/* =========================================
   FORM WIDGETS
   =========================================
   Alle Formular-Styles für base-form-* Klassen.
   Farben ausschließlich aus colors.css (var(--...)).
   Siehe @skill-css-rules, 011-ui-forms.mdc.
   ========================================= */

.base-form-container {
    max-width: 100%;
    width: 100%;
}

.base-form-field-group {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

/* .base-form-field-group-compact | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-html-form-inline-labels, @skill-change-provenance | Einspaltig fuer Inline-Label-Formulare, volle Control-Breite */
.base-form-field-group-compact {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* .base-form-row-two-columns | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Name/E-Mail ab Tablet nebeneinander */
.base-form-row-two-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .base-form-row-two-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1rem;
        align-items: start;
    }
}

/* .base-form-readonly-value | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Readonly-E-Mail optisch an Form-Inputs angeglichen */
.base-form-readonly-value {
    display: flex;
    align-items: center;
    margin: 0;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-background);
    color: var(--color-text-muted);
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    word-break: break-word;
}

.base-form-field-group-hidden {
    display: none;
}

@media (max-width: 575px) {
    .base-form-field-group {
        grid-template-columns: 1fr;
        gap: 0.35rem 0;
        margin-bottom: 1rem;
    }
}

.base-form-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-normal);
    padding-top: 0.5rem;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .base-form-label {
        padding-top: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

.base-form-required {
    color: var(--color-error);
    font-weight: var(--font-weight-semibold);
}

.base-form-input {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* .base-form-input[type="file"] | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Hochwertige Datei-Auswählen-Optik fuer alle File-Inputs */
.base-form-input[type="file"] {
    display: block;
    padding: 0.5rem 0.625rem;
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    line-height: 1.45;
    cursor: pointer;
}

/* .base-form-input[type="file"]:hover | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | File-Input Hover Primary-Border */
.base-form-input[type="file"]:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    box-shadow: inset 0 0 0 1px var(--color-primary-soft-border);
}

/* .base-form-input[type="file"]:focus | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | File-Input Focus Primary */
.base-form-input[type="file"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    box-shadow: 0 0 0 3px var(--color-primary-focus-shadow);
}

/* .base-form-input[type="file"]:not(:placeholder-shown) | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Gewaehlte Datei: Primary statt Logo-Orange */
.base-form-input[type="file"]:not(:placeholder-shown) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-primary-soft-border);
}

/* .base-form-input[type="file"]::file-selector-button | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Datei-Auswaehlen-Button wie Primary-CTA */
.base-form-input[type="file"]::file-selector-button {
    margin-right: 0.875rem;
    padding: 0.7rem 1.25rem;
    font-family: var(--font-family-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
    color: var(--color-primary-button-text);
    background-color: var(--color-primary-button);
    background-image: none;
    border: 1px solid var(--color-primary-button);
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* .base-form-input[type="file"]:hover::file-selector-button | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Datei-Button Hover */
.base-form-input[type="file"]:hover::file-selector-button {
    background-color: var(--color-primary-button-hover);
    border-color: var(--color-primary-button-hover);
    box-shadow: var(--shadow-md);
}

/* .base-form-input[type="file"]:focus::file-selector-button | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Datei-Button Focus */
.base-form-input[type="file"]:focus::file-selector-button {
    background-color: var(--color-primary-button-hover);
    border-color: var(--color-primary-button-hover);
}

.base-form-textarea {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.base-form-input-error {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.base-form-textarea-error {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.base-form-input::placeholder {
    color: var(--color-text-muted);
}

.base-form-textarea::placeholder {
    color: var(--color-text-muted);
}

.base-form-input-error::placeholder {
    color: var(--color-text-muted);
}

.base-form-textarea-error::placeholder {
    color: var(--color-text-muted);
}

.base-form-input:hover {
    border-color: var(--color-border-highlight);
}

.base-form-textarea:hover {
    border-color: var(--color-border-highlight);
}

.base-form-input-error:hover {
    border-color: var(--color-border-highlight);
}

.base-form-textarea-error:hover {
    border-color: var(--color-border-highlight);
}

.base-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

.base-form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

.base-form-input-error {
    border-color: var(--color-error);
    background-color: var(--color-error-soft-bg);
}

.base-form-input-error:focus {
    outline: none;
    border-color: var(--color-error);
    box-shadow: none;
}

.base-form-textarea-error {
    min-height: 120px;
    resize: vertical;
    border-color: var(--color-error);
    background-color: var(--color-error-soft-bg);
}

.base-form-textarea-error:focus {
    outline: none;
    border-color: var(--color-error);
    box-shadow: none;
}

/* .base-form-input-success | Änderungsprotokoll: 2026-10-01 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Ticket-Shop JS ersetzt base-form-input durch success – fehlende Styles ließen Felder nach Submit kollabieren */
.base-form-input-success {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success);
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: inset 0 0 0 1px var(--color-success);
}

.base-form-input-success::placeholder {
    color: var(--color-text-muted);
}

.base-form-input-success:hover {
    border-color: var(--color-success);
    background-color: var(--color-success-bg);
    box-shadow: inset 0 0 0 1px var(--color-success);
}

.base-form-input-success:focus {
    outline: none;
    border-color: var(--color-success);
    background-color: var(--color-success-bg);
    box-shadow: inset 0 0 0 1px var(--color-success);
}

/* .base-form-input:not(select):not([type="file"]):not(:placeholder-shown) | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Select und File von Orange-Befuellt-Markierung ausnehmen */
.base-form-input:not(select):not([type="file"]):not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown) {
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

.base-form-input:not(select):not([type="file"]):not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown):hover {
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

.base-form-input:not(select):not([type="file"]):not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown):focus {
    outline: none;
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

/* .base-form-textarea:not(:placeholder-shown) | Änderungsprotokoll: 2026-10-01 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Befüllte Textareas orange markieren laut @skill-css-rules Regel 003 */
.base-form-textarea:not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown) {
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

.base-form-textarea:not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown):hover {
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

.base-form-textarea:not(.base-form-input-error):not(.base-form-input-success):not(:placeholder-shown):focus {
    outline: none;
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}

/* form[id*="filter"] select:has(...), form[class*="filter-form"] select:has(...), .admin-ticket-discount-codes-list-filter-form select:has(...) | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Gelb nur Filter-Formulare; Create/Edit ohne Gelb */
form[id*="filter"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[id*="filter"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[id*="filter"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[id*="filter"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[class*="filter-form"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[class*="filter-form"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[class*="filter-form"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[class*="filter-form"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[id*="filter"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
form[class*="filter-form"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success),
.admin-ticket-discount-codes-list-filter-form select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success) {
    border-color: var(--color-filter-active-border);
    background-color: var(--color-filter-active-bg);
    color: var(--color-filter-active-text);
    box-shadow: inset 0 0 0 1px var(--color-filter-active-border);
}

form[id*="filter"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[id*="filter"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[id*="filter"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[id*="filter"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[class*="filter-form"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[class*="filter-form"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[class*="filter-form"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[class*="filter-form"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[id*="filter"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
form[class*="filter-form"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover,
.admin-ticket-discount-codes-list-filter-form select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):hover {
    border-color: var(--color-filter-active-border-hover);
    background-color: var(--color-filter-active-bg);
    color: var(--color-filter-active-text);
    box-shadow: inset 0 0 0 1px var(--color-filter-active-border-hover);
}

form[id*="filter"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[id*="filter"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[id*="filter"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[id*="filter"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[class*="filter-form"] .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[class*="filter-form"] .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[class*="filter-form"] select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[class*="filter-form"] select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
.admin-ticket-discount-codes-list-filter-form .base-form-input:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value=""]):has(option:checked:not([value=""])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
.admin-ticket-discount-codes-list-filter-form select.base-form-select:has(option[value="all"]):not(:has(option[value=""])):has(option:checked:not([value="all"])):not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[id*="filter"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
form[class*="filter-form"] select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus,
.admin-ticket-discount-codes-list-filter-form select.base-form-select-filter-active:not(.base-form-select-admin):not(.base-form-input-error):not(.base-form-input-success):focus {
    outline: none;
    border-color: var(--color-filter-active-border);
    background-color: var(--color-filter-active-bg);
    color: var(--color-filter-active-text);
    box-shadow: inset 0 0 0 1px var(--color-filter-active-border);
}

.base-form-input[type="password"]::-ms-reveal {
    display: none;
}

.base-form-input[type="password"]::-ms-clear {
    display: none;
}

.base-form-input-error[type="password"]::-ms-reveal {
    display: none;
}

.base-form-input-error[type="password"]::-ms-clear {
    display: none;
}

/* .base-form-input[type="password"] | Änderungsprotokoll: 2026-10-23 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Passwort-Glyphs mobil sichtbar: text-fill + caret; VERBOTEN textfield-decoration-container zu verstecken */
.base-form-input[type="password"],
.base-form-input[type="password"]:hover,
.base-form-input[type="password"]:focus,
.base-form-input[type="password"]:not(:placeholder-shown),
.base-form-input[type="password"]:not(:placeholder-shown):hover,
.base-form-input[type="password"]:not(:placeholder-shown):focus,
.base-form-input-error[type="password"],
.base-form-input-error[type="password"]:hover,
.base-form-input-error[type="password"]:focus,
.base-form-input-error[type="password"]:not(:placeholder-shown),
.base-form-input-error[type="password"]:not(:placeholder-shown):hover,
.base-form-input-error[type="password"]:not(:placeholder-shown):focus {
    color: var(--color-text);
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    opacity: 1;
    -webkit-opacity: 1;
    font-size: max(16px, 1em);
    line-height: 1.35;
}

.base-form-input[type="password"]:-webkit-autofill,
.base-form-input[type="password"]:-webkit-autofill:hover,
.base-form-input[type="password"]:-webkit-autofill:focus,
.base-form-input-error[type="password"]:-webkit-autofill,
.base-form-input-error[type="password"]:-webkit-autofill:hover,
.base-form-input-error[type="password"]:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-text);
    caret-color: var(--color-text);
    transition: background-color 99999s ease-out;
}

.base-form-input[type="password"]::-webkit-password-toggle-button {
    display: none;
    visibility: hidden;
}

.base-form-input[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
    visibility: hidden;
}

.base-form-input-error[type="password"]::-webkit-password-toggle-button {
    display: none;
    visibility: hidden;
}

.base-form-input-error[type="password"]::-webkit-credentials-auto-fill-button {
    display: none;
    visibility: hidden;
}

.base-form-input[type="password"]::-webkit-caps-lock-indicator {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.base-form-input-error[type="password"]::-webkit-caps-lock-indicator {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.base-form-input[type="password"]::-webkit-contacts-auto-fill-button {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.base-form-input-error[type="password"]::-webkit-contacts-auto-fill-button {
    display: none;
    visibility: hidden;
    pointer-events: none;
}

.base-form-password-toggle-button {
    justify-self: end;
    margin-top: 0.5rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-primary);
    line-height: var(--line-height-normal);
    cursor: pointer;
}

.base-form-password-toggle-button:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}

.base-form-password-field {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 0.5rem 1.5rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

@media (max-width: 575px) {
    .base-form-password-field {
        grid-template-columns: 1fr;
        gap: 0.35rem 0;
        margin-bottom: 1rem;
    }
}

.base-form-password-row {
    position: relative;
    display: block;
    grid-column: 2;
    min-width: 0;
}

@media (max-width: 575px) {
    .base-form-password-row {
        grid-column: 1;
    }
}

.base-form-password-row > .base-form-input,
.base-form-password-row > .base-form-input-error {
    padding-right: 2.875rem;
}

.base-form-password-row > .base-form-password-toggle-icon,
.base-form-password-row > .base-form-password-toggle-icon-visible {
    position: absolute;
    top: 50%;
    right: 0.625rem;
    width: 1.75rem;
    height: 1.75rem;
    min-height: 0;
    padding: 0;
    border: none;
    border-radius: 0.375rem;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.base-form-password-row > .base-form-password-toggle-icon:hover,
.base-form-password-row > .base-form-password-toggle-icon-visible:hover {
    background: var(--color-surface-hover);
}

.base-form-password-row > .base-form-password-toggle-icon:focus,
.base-form-password-row > .base-form-password-toggle-icon-visible:focus {
    outline: none;
    box-shadow: none;
}

.base-form-password-toggle-icon {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.base-form-password-toggle-icon::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-text);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M1 12s4-8 11-8 11 8 4 8-1 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.base-form-password-toggle-icon-visible {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
}

.base-form-password-toggle-icon-visible::before {
    content: '';
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-text);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.24a10.94 10.94 0 0 1-1.71-2.05'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
}

.base-form-help-text {
    grid-column: 1 / -1;
    margin-top: 0.35rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-family: var(--font-family-primary);
}

.base-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.base-form-error {
    font-size: var(--font-size-sm);
    font-family: var(--font-family-primary);
    color: var(--color-error);
    margin-top: 0.25rem;
    grid-column: 1 / -1;
}

@media (max-width: 575px) {
    .base-form-error {
        margin-top: 0.15rem;
    }
}

/* .base-form-actions | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Speichern und Sekundaeraktion nebeneinander, mobil gestapelt */
.base-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: 0;
}

@media (max-width: 575px) {
    .base-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .base-form-actions .base-button-primary,
    .base-form-actions .base-button-delete {
        width: 100%;
        box-sizing: border-box;
    }
}

.base-form-actions-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.base-form-submit-container {
    margin-top: 1.5rem;
    padding-top: 0.5rem;
}

/* .base-form-footer | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Submit + Datenschutz-Info-Box hochwertig getrennt */
.base-form-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.875rem;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
    box-sizing: border-box;
}

/* .base-form-footer .base-message-info | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Info-Box im Form-Footer ohne Extra-Margin (Gap steuert Abstand) */
.base-form-footer .base-message-info {
    margin-bottom: 0;
}

/* .base-form-submit-container-flush | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Submit ohne Extra-Margin im Form-Footer; mobil volle Breite */
.base-form-submit-container-flush {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
}

@media (min-width: 600px) {
    .base-form-submit-container-flush {
        grid-template-columns: max-content;
    }
}

/* .base-form-security-block | Änderungsprotokoll: 2026-10-03 | parent-agent | @skill-compact-forms, @skill-css-rules, @skill-change-provenance | Spam-Schutz als dezente Security-Flaeche */
.base-form-security-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--color-primary-soft-border);
    border-radius: 0.65rem;
    background-color: var(--color-primary-soft-bg);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 575px) {
    .base-form-submit-container {
        margin-top: 1.25rem;
    }

    .base-form-footer {
        margin-top: 1.5rem;
        padding-top: 1rem;
    }
}

.base-form-submit-container + .base-form-links-inline {
    margin-top: 1rem;
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .base-form-submit-container + .base-form-links-inline {
        margin-top: 0.75rem;
    }
}

.base-form-links-inline {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 575px) {
    .base-form-links-inline {
        justify-content: flex-start;
        align-items: center;
        text-align: left;
        margin-bottom: 1.25rem;
    }

    .base-form-submit-container .base-button-primary {
        width: 100%;
        box-sizing: border-box;
    }
}

/* .base-honeypot | Änderungsprotokoll: 2026-11-04 | subagent-check-popup | @skill-modal-popup-windows, @skill-contact-form-spam-protection, @skill-change-provenance | Honeypot per Clip im Elternelement ohne left -9999px */
.base-honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Spam-Schutz Mathe-Anzeige (SVG) – kompakte Darstellung, wiederverwendbar für Registrierung/Kontakt */
.base-form-label-spam {
    white-space: normal;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
}

.base-form-spam-formula-line {
    display: flex;
    align-items: center;
}

.base-form-label-spam .base-form-spam-svg-wrapper {
    margin-left: 0;
}

.base-form-spam-svg-wrapper {
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.25rem;
}

/* .base-form-spam-svg | Änderungsprotokoll: 2026-10-01 | parent-agent | @skill-css-rules, @skill-change-provenance | Spam-SVG groesser fuer Lesbarkeit */
.base-form-spam-svg {
    display: inline-block;
    vertical-align: middle;
    width: 96px;
    height: 28px;
    overflow: visible;
}

/* .base-form-spam-text | Änderungsprotokoll: 2026-10-01 | parent-agent | @skill-css-rules, @skill-change-provenance | fill statt Default-Schwarz: Lesbarkeit auf dunklem Surface */
.base-form-spam-text {
    fill: var(--color-primary);
    font: 700 20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* --- Admin-Bestellungen Nachzug | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-compact-forms, @skill-change-provenance | Fehlende Admin-Filter/Tabellen/Button-Styles --- */
/* .base-form-select | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Basis-Select Premium Chevron */
.base-form-select {
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}

/* .base-form-select-option | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Native Options Typografie wo Browser erlaubt */
.base-form-select-option {
    font-family: var(--font-family-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    color: var(--color-text);
    background-color: var(--color-background);
}

/* .base-admin-modal-light .base-form-select | Änderungsprotokoll: 2026-10-15 | subagent-fix-layoutfehler | @skill-change-provenance, @skill-css-rules, @skill-admin-email-templates-previewer | Light-Insel Select: Chevron no-repeat + appearance none gegen Tile-Repeat */
.base-admin-modal-light .base-form-select {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-admin-light-form-control);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}

/* .base-admin-modal-light .base-form-select-option | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel Options Premium */
.base-admin-modal-light .base-form-select-option {
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}
/* .base-admin-modal-light .base-form-input, .base-admin-modal-light .base-form-textarea | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Input/Textarea klar erkennbarer Mittelgrau-Rahmen + Soft-Shadow */
.base-admin-modal-light .base-form-input,
.base-admin-modal-light .base-form-textarea {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-background);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
    box-shadow: var(--shadow-admin-light-form-control);
}
/* .base-admin-modal-light .base-form-select:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Premium-Select Hover Logo-Orange 1px */
.base-admin-modal-light .base-form-select:hover {
    border-color: var(--color-logo-orange);
    background-color: var(--color-background);
    color: var(--color-text);
    box-shadow: none;
}
/* .base-admin-modal-light .base-form-input:hover, .base-admin-modal-light .base-form-textarea:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Input/Textarea Hover Logo-Orange */
.base-admin-modal-light .base-form-input:hover,
.base-admin-modal-light .base-form-textarea:hover {
    border-color: var(--color-logo-orange);
    background-color: var(--color-background);
    box-shadow: none;
}
/* .base-admin-modal-light .base-form-select:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Premium-Select Focus Logo-Orange 1px */
.base-admin-modal-light .base-form-select:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    background-color: var(--color-background);
    color: var(--color-text);
    box-shadow: none;
}
/* .base-admin-modal-light Create/Edit-Selects | Änderungsprotokoll: 2026-11-12 | subagent-update-screen | @skill-compact-forms, @skill-css-rules, @skill-modal-popup-windows, @skill-change-provenance | VERBOTEN Gelb in Modal Create/Edit; Rot/Gruen via Screen-Klassen */
/* .base-admin-modal-light .base-form-input:focus, .base-admin-modal-light .base-form-textarea:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Input/Textarea Focus Logo-Orange */
.base-admin-modal-light .base-form-input:focus,
.base-admin-modal-light .base-form-textarea:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    background-color: var(--color-background);
    box-shadow: none;
}

/* .base-admin-modal-light .base-form-input[type="file"] | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal: File-Input Primary statt Orange */
.base-admin-modal-light .base-form-input[type="file"] {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-background);
    color: var(--color-text-muted);
    box-shadow: var(--shadow-admin-light-form-control);
}

/* .base-admin-modal-light .base-form-input[type="file"]:hover | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal File Hover Primary */
.base-admin-modal-light .base-form-input[type="file"]:hover {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    box-shadow: inset 0 0 0 1px var(--color-primary-soft-border);
}

/* .base-admin-modal-light .base-form-input[type="file"]:focus | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal File Focus Primary */
.base-admin-modal-light .base-form-input[type="file"]:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    box-shadow: 0 0 0 3px var(--color-primary-focus-shadow);
}

/* .base-admin-modal-light .base-form-input[type="file"]:not(:placeholder-shown) | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal File gewaehlt Primary */
.base-admin-modal-light .base-form-input[type="file"]:not(:placeholder-shown) {
    border-color: var(--color-primary);
    background-color: var(--color-primary-soft-bg);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-primary-soft-border);
}

/* .base-admin-modal-light .base-form-input[type="file"]::file-selector-button | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal Datei-Button CTA */
.base-admin-modal-light .base-form-input[type="file"]::file-selector-button {
    color: var(--color-primary-button-text);
    background-color: var(--color-primary-button);
    border-color: var(--color-primary-button);
}

/* .base-admin-modal-light .base-form-input[type="file"]:hover::file-selector-button | Änderungsprotokoll: 2026-10-25 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Modal Datei-Button Hover */
.base-admin-modal-light .base-form-input[type="file"]:hover::file-selector-button {
    background-color: var(--color-primary-button-hover);
    border-color: var(--color-primary-button-hover);
}

.base-form-input[aria-invalid="true"],
select.base-form-input[aria-invalid="true"],
textarea.base-form-input[aria-invalid="true"],
textarea.base-form-textarea[aria-invalid="true"],
input.admin-bestellungen-edit-modal-input[aria-invalid="true"],
select.admin-bestellungen-edit-modal-select[aria-invalid="true"] {
    border-color: var(--color-error);
    background-color: rgba(239, 68, 68, 0.04);
}
/* .base-form-input[aria-invalid="true"]:focus, .base-form-textarea[aria-invalid="true"]:focus, .admin-bestellungen-edit-modal-input[aria-invalid="true"]:focus, .admin-bestellungen-edit-modal-select[aria-invalid="true"]:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Invalid-Focus ohne Glow */
.base-form-input[aria-invalid="true"]:focus,
.base-form-textarea[aria-invalid="true"]:focus,
.admin-bestellungen-edit-modal-input[aria-invalid="true"]:focus,
.admin-bestellungen-edit-modal-select[aria-invalid="true"]:focus {
    outline: none;
    border-color: var(--color-error);
    box-shadow: none;
}
/* Änderungsprotokoll: 2026-09-25 | subagent-delete-screen | @skill-delete-screen, @skill-change-provenance | Entfernte Filter-Select-Regeln fuer geloeschte Buchhaltungs-Screens */
/* .admin-bestellungen-filter-select, .admin-bestellungen-filter-select-status, .admin-bestellungen-filter-year-select | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Filter-Select-Pfeil weiss statt Goldbraun */
.admin-bestellungen-filter-select,
.admin-bestellungen-filter-select-status,
.admin-bestellungen-filter-year-select {
    width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 34px 7px 12px;
    border: 1px solid var(--color-text-muted);
    border-radius: 10px;
    background-color: var(--color-surface);
    box-shadow: none;
    font-weight: 600;
    color: var(--color-text);
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    transition: border-color 140ms ease;
}
/* .admin-bestellungen-filter-select-status | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Status-Selects füllen Rasterzellen gleichmäßig */
.admin-bestellungen-filter-select-status {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* .admin-bestellungen-filter-select:hover, .admin-bestellungen-filter-select-status:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Filter-Hover ohne Glow */
.admin-bestellungen-filter-select:hover,
.admin-bestellungen-filter-select-status:hover {
    border-color: var(--color-primary);
    box-shadow: none;
}
/* .admin-bestellungen-filter-select:focus, .admin-bestellungen-filter-select-status:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Filter-Focus ohne Glow */
.admin-bestellungen-filter-select:focus,
.admin-bestellungen-filter-select-status:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: none;
}
/* .admin-bestellungen-filter-select-active | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiver Filter inkl. Jahresauswahl Logo-Orange */
.admin-bestellungen-filter-select.admin-bestellungen-filter-select-active,
.admin-bestellungen-filter-select-status.admin-bestellungen-filter-select-active,
.admin-bestellungen-filter-year-select.admin-bestellungen-filter-select-active,
.admin-bestellungen-filter-query.admin-bestellungen-filter-select-active {
    border-color: var(--color-logo-orange);
    border-width: 2px;
    background-color: var(--color-logo-orange-surface);
    color: var(--color-logo-orange);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
    font-weight: var(--font-weight-bold);
}
/* .admin-bestellungen-filter-select.admin-bestellungen-filter-select-active | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiver Filter-Select-Pfeil inkl. Jahresauswahl Logo-Orange */
.admin-bestellungen-filter-select.admin-bestellungen-filter-select-active,
.admin-bestellungen-filter-select-status.admin-bestellungen-filter-select-active,
.admin-bestellungen-filter-year-select.admin-bestellungen-filter-select-active {
    background-image: var(--icon-select-chevron-logo-orange);
}
/* .admin-bestellungen-filter-select-active:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiver Filter Hover inkl. Jahresauswahl Logo-Orange */
.admin-bestellungen-filter-select.admin-bestellungen-filter-select-active:hover,
.admin-bestellungen-filter-select-status.admin-bestellungen-filter-select-active:hover,
.admin-bestellungen-filter-year-select.admin-bestellungen-filter-select-active:hover,
.admin-bestellungen-filter-query.admin-bestellungen-filter-select-active:hover {
    border-color: var(--color-logo-orange-hover);
    background-color: var(--color-logo-orange-surface);
    color: var(--color-logo-orange-hover);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange-hover);
}
/* .admin-bestellungen-filter-select-active:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Aktiver Filter Focus inkl. Jahresauswahl Logo-Orange */
.admin-bestellungen-filter-select.admin-bestellungen-filter-select-active:focus,
.admin-bestellungen-filter-select-status.admin-bestellungen-filter-select-active:focus,
.admin-bestellungen-filter-year-select.admin-bestellungen-filter-select-active:focus,
.admin-bestellungen-filter-query.admin-bestellungen-filter-select-active:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    color: var(--color-logo-orange);
    box-shadow: inset 0 0 0 1px var(--color-logo-orange);
}
/* .admin-bestellungen-filter-query | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Suchfeld ohne natives Grau, Placeholder weiss */
.admin-bestellungen-filter-query {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid var(--color-text-muted);
    border-radius: 10px;
    background-color: var(--color-surface);
    box-shadow: none;
    color: var(--color-text);
    font-weight: 500;
    appearance: none;
    -webkit-appearance: none;
}
/* .admin-bestellungen-filter-query::placeholder | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Placeholder weiss statt Browser-Grau */
.admin-bestellungen-filter-query::placeholder {
    color: var(--color-form-placeholder);
    -webkit-text-fill-color: var(--color-form-placeholder);
    opacity: 1;
}
/* .base-admin-modal-light .admin-bestellungen-filter-select | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Bestellungen-Filter klar erkennbarer Mittelgrau-Rahmen + Soft-Shadow */
.base-admin-modal-light .admin-bestellungen-filter-select,
.base-admin-modal-light .admin-bestellungen-filter-select-status,
.base-admin-modal-light .admin-bestellungen-filter-year-select {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    box-shadow: var(--shadow-admin-light-form-control);
}
/* .base-admin-modal-light .admin-bestellungen-filter-year-select | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Jahresauswahl Premium-Light wie Expert-Workshop, kein Orange-Aktiv */
.base-admin-modal-light .admin-bestellungen-filter-year-select {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231a1a1a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    box-shadow: var(--shadow-admin-light-form-control);
}
/* .base-admin-modal-light .admin-bestellungen-filter-select:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Filter Hover Logo-Orange 1px */
.base-admin-modal-light .admin-bestellungen-filter-select:hover,
.base-admin-modal-light .admin-bestellungen-filter-select-status:hover,
.base-admin-modal-light .admin-bestellungen-filter-year-select:hover {
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .base-admin-modal-light .admin-bestellungen-filter-select:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Filter Focus Logo-Orange 1px */
.base-admin-modal-light .admin-bestellungen-filter-select:focus,
.base-admin-modal-light .admin-bestellungen-filter-select-status:focus,
.base-admin-modal-light .admin-bestellungen-filter-year-select:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .base-admin-modal-light .admin-bestellungen-filter-query | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Suche klar erkennbarer Mittelgrau-Rahmen + Soft-Shadow */
.base-admin-modal-light .admin-bestellungen-filter-query {
    border: 1px solid var(--color-admin-light-contrast-border);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--shadow-admin-light-form-control);
}
/* .base-admin-modal-light .admin-bestellungen-filter-query:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Suche Hover Logo-Orange */
.base-admin-modal-light .admin-bestellungen-filter-query:hover {
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .base-admin-modal-light .admin-bestellungen-filter-query:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: Suche Focus Logo-Orange */
.base-admin-modal-light .admin-bestellungen-filter-query:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .base-admin-modal-light .admin-bestellungen-filter-select-active | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance, @skill-compact-forms | Light-Insel: aktiver Filter Logo-Orange 1px ohne Schwarz; Jahresauswahl ausgenommen */
.base-admin-modal-light .admin-bestellungen-filter-select.admin-bestellungen-filter-select-active,
.base-admin-modal-light .admin-bestellungen-filter-select-status.admin-bestellungen-filter-select-active,
.base-admin-modal-light .admin-bestellungen-filter-query.admin-bestellungen-filter-select-active {
    border-width: 1px;
    border-color: var(--color-logo-orange);
    background-color: var(--color-logo-orange-surface);
    color: var(--color-logo-orange);
    box-shadow: none;
}
/* .admin-bestellungen-edit-modal-input, .admin-bestellungen-edit-modal-price-input, .admin-bestellungen-edit-modal-select | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Leer: weisser Rahmen; befuellt/ausgewaehlt: Logo-Orange */
.admin-bestellungen-edit-modal-input,
.admin-bestellungen-edit-modal-price-input,
.admin-bestellungen-edit-modal-select {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: 500;
    line-height: var(--line-height-normal);
    color: var(--color-headline);
    background: var(--color-surface);
    border: 1px solid var(--color-border-highlight);
    border-radius: 0.5rem;
    padding: 6px 10px;
    min-height: 34px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
/* .admin-bestellungen-edit-modal-select | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Select-Pfeil Logo-Orange auf hellem Modal */
.admin-bestellungen-edit-modal-select {
    padding-right: 34px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    background-image: var(--icon-select-chevron-logo-orange);
    background-color: var(--color-surface);
}
/* .admin-bestellungen-edit-modal-input::placeholder | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Placeholder dunkel auf hellem Modal-Grund */
.admin-bestellungen-edit-modal-input::placeholder {
    color: var(--color-form-placeholder);
    -webkit-text-fill-color: var(--color-form-placeholder);
    font-weight: 500;
    opacity: 1;
}
/* .admin-bestellungen-edit-modal-price-input::placeholder | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Placeholder dunkel auf hellem Modal-Grund */
.admin-bestellungen-edit-modal-price-input::placeholder {
    color: var(--color-form-placeholder);
    -webkit-text-fill-color: var(--color-form-placeholder);
    font-weight: 500;
    opacity: 1;
}
/* .admin-bestellungen-edit-modal-input:not(:placeholder-shown) | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Befuelltes Modal-Feld Rahmen Logo-Orange */
.admin-bestellungen-edit-modal-input:not(:placeholder-shown),
.admin-bestellungen-edit-modal-price-input:not(:placeholder-shown) {
    border-color: var(--color-logo-orange);
}
/* .admin-bestellungen-edit-modal-select:has(option:checked:not([value=""])) | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Ausgewaehltes Dropdown Rahmen und Pfeil Logo-Orange */
.admin-bestellungen-edit-modal-select:has(option:checked:not([value=""])) {
    border-color: var(--color-logo-orange);
    background-image: var(--icon-select-chevron-logo-orange);
}
/* .admin-bestellungen-edit-modal-input:hover, .admin-bestellungen-edit-modal-price-input:hover, .admin-bestellungen-edit-modal-select:hover | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Hover Logo-Orange statt Primary-Weiss */
.admin-bestellungen-edit-modal-input:hover,
.admin-bestellungen-edit-modal-price-input:hover,
.admin-bestellungen-edit-modal-select:hover {
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .admin-bestellungen-edit-modal-input:focus, .admin-bestellungen-edit-modal-price-input:focus, .admin-bestellungen-edit-modal-select:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Focus Logo-Orange statt Primary-Weiss */
.admin-bestellungen-edit-modal-input:focus,
.admin-bestellungen-edit-modal-price-input:focus,
.admin-bestellungen-edit-modal-select:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    box-shadow: none;
}
/* .admin-bestellungen-edit-modal-textarea | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Leer weisser Rahmen, befuellt Logo-Orange */
.admin-bestellungen-edit-modal-textarea {
    font-size: var(--font-size-base);
    font-family: var(--font-family-primary);
    font-weight: 500;
    line-height: 1.45;
    color: var(--color-headline);
    background: var(--color-surface);
    border: 1px solid var(--color-border-highlight);
    border-radius: 0.5rem;
    padding: 8px 10px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 72px;
    resize: vertical;
    grid-column: 1 / -1;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
/* .admin-bestellungen-edit-modal-textarea::placeholder | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Placeholder dunkel auf hellem Modal-Grund */
.admin-bestellungen-edit-modal-textarea::placeholder {
    color: var(--color-form-placeholder);
    -webkit-text-fill-color: var(--color-form-placeholder);
    font-weight: 500;
    opacity: 1;
}
/* .admin-bestellungen-edit-modal-textarea:not(:placeholder-shown) | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Befuellte Textarea Rahmen Logo-Orange */
.admin-bestellungen-edit-modal-textarea:not(:placeholder-shown) {
    border-color: var(--color-logo-orange);
}
/* .admin-bestellungen-edit-modal-textarea:hover, .admin-bestellungen-edit-modal-textarea:focus | Änderungsprotokoll: 2026-10-02 | parent-agent | @skill-css-rules, @skill-change-provenance | Textarea Hover/Focus Logo-Orange */
.admin-bestellungen-edit-modal-textarea:hover,
.admin-bestellungen-edit-modal-textarea:focus {
    outline: none;
    border-color: var(--color-logo-orange);
    box-shadow: none;
}