/*
|--------------------------------------------------------------------------
| 2026-08-06
| Author: Claude
| Änderung:
| --vt-form-surface wird nicht mehr innerhalb dieser Komponentendatei
| definiert, sondern ausschließlich auf Foundation-Ebene
| (01-foundation/vt-colors.css). Diese Datei referenziert die Variable
| ausschließlich, gemäß 05-form-inputfield.md Abschnitt 3. Der zuvor an
| dieser Stelle vorhandene :root-Block wurde entfernt; der Wert selbst
| (menschlich festgelegt) ist dabei unverändert nach 01-foundation/
| vt-colors.css übernommen worden.
|
| Technische Notwendigkeit: Damit var(--vt-form-surface) innerhalb dieser
| Datei einen Wert erhält, muss die Foundation-Definition tatsächlich in
| die Kaskade geladen werden. Es existiert derzeit keine zentrale Stelle,
| die 01-foundation automatisch in jedes Feature einbindet, das diese
| Komponente verwendet (vt-ui.css führt den Foundation-Import aktuell nur
| auskommentiert). Diese Komponente bindet ihre Foundation-Abhängigkeit
| deshalb selbst ein, anstatt sie stillschweigend vorauszusetzen oder eine
| neue, hier nicht beauftragte Loader-Architektur zu entwerfen.
|--------------------------------------------------------------------------
*/
@import url("../01-foundation/vt-colors.css");

/*
|--------------------------------------------------------------------------
| 2026-09-03
| Author: Claude
| Änderung:
| Ausschließlich additive Erweiterung um die beiden neuen Unterelemente
| der Komponente (Beschriftung und Fehlercontainer) sowie um die
| dokumentierten Zustandsanker der zentralen Renderfunktion
| customInputField() (global_functions/05-atomar-modules/
| 000-form-input-field/vt-form-input-field.php).
|
| Keine bestehende Regel wurde verändert, verkürzt oder entfernt. Es
| wurde kein neuer Farb-, Geometrie- oder Abstandswert eingeführt: die
| Farbwerte der Zustände disabled, readonly und invalid sind nach
| 05-form-inputfield.md Abschnitt 15 weiterhin eine offene menschliche
| Designentscheidung und werden hier ausdrücklich nicht vorweggenommen.
| Der Abschnitt „Statuszustände" benennt deshalb nur die Zustandsanker.
|
| Nachtrag 2026-09-03: Diese offene Entscheidung ist durch die menschliche
| Farbfestlegung vom 2026-09-03 abgelöst. Der Abschnitt „Statuszustände"
| bindet die drei semantischen Foundation-Tokens
| --vt-form-inactive-surface, --vt-form-inactive-text und --vt-form-error
| an die bereits vorhandenen Zustandsselektoren an. Diese Datei setzt
| weiterhin keinen eigenen Farbwert.
|
| Reihenfolge nach AR-023 Abschnitt 8.1: die neuen Regeln für innere
| Elemente stehen hinter den Basisregeln und vor den Interaktions-
| zuständen, der Abschnitt „Statuszustände" hinter den Interaktions-
| zuständen und vor dem abschließenden Media-Query-Bereich.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-06
| Author: Claude
| Änderung:
| Zentrale Erstimplementierung der Komponente Form Inputfield gemäß dem
| menschlich freigegebenen Komponentenvertrag 05-form-inputfield.md.
| Sämtliche Werte sind ausschließlich aus der Zielreferenz Domainsuche
| sowie, wo dort kein Wert vorhanden ist, aus der Vergleichsreferenz
| Domainpreisliste übernommen. Keine frei interpretierten Werte.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-06
| Author: Claude
| Änderung:
| An die menschliche Designentscheidung angepasst: Die Domainsuche ist
| die alleinige gestalterische Zielreferenz, ausdrücklich auch für die
| visuelle Zustandswirkung. Die Domainpreisliste dient hierfür nicht mehr
| als Wertequelle. Die zuvor aus der Domainpreisliste übernommene
| Focus-visible-Outline sowie die Placeholder-Farbe wurden entfernt, da
| die Domainsuche hierfür keinen eigenen Wert besitzt. pointer-events
| bleibt als ausdrücklich zugelassene Ausnahme bestehen.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| 2026-08-06
| Author: Claude
| Änderung:
| Icon-Verantwortung vollständig entfernt. Wrapper-Regeln, Icon-Regeln
| sowie sämtliche iconbedingten Innenabstände (Basis und responsiv)
| wurden nach vt-form-inputfield-icon.css verschoben. Diese Datei ist
| damit als reines Texteingabefeld ohne Icon vollständig eigenständig
| verwendbar. Die horizontalen Innenabstände ohne Icon wurden aus dem
| einzigen icon-unabhängigen Wert der Domainsuche abgeleitet (rechter
| Innenabstand 24px/18px/16px), symmetrisch auf beide Seiten angewendet
| — kein neuer, frei erfundener Wert.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Spezifität
| Die doppelte Komponentenklasse erhöht ausschließlich die Kaskaden-
| autorität gegenüber allgemeinen Feldregeln, analog zur bereits
| bestehenden Komponente vt-cta-firstrank.css. Sie führt keine Feature-,
| Theme- oder Elementor-Abhängigkeit ein.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Basis
| height, border, color, font-size: ausschließlich aus der Domainsuche
| (alleinige gestalterische Zielreferenz).
|
| border-radius: menschliche Architekturentscheidung vom 2026-08-07 —
| Inputfield und Select erhalten einen einheitlichen Radius von 20px
| anstelle des bisherigen, aus der Domainsuche stammenden Werts von 18px.
| Der Primary CTA First Rank bleibt unverändert bei 20px, besitzt jedoch
| weiterhin keinen fachlichen oder technischen Bezug zu diesem Wert; die
| Übereinstimmung ist keine neue Kopplung an die CTA-Komponente.
|
| background: seit der menschlichen Foundation-Entscheidung nicht mehr
| lokal definiert, sondern ausschließlich über var(--vt-form-surface)
| referenziert (siehe 01-foundation/vt-colors.css sowie den Kommentar am
| Dateianfang). Der bisherige, aus der Domainsuche stammende Wert
| rgba(255,255,255,0.03) wurde durch diese Umstellung nicht fortgeführt;
| die Foundation-Ebene führt hierfür einen eigenen, menschlich
| festgelegten Wert.
|
| padding: Die Domainsuche besitzt kein Eingabefeld ohne Icon; der linke
| Innenabstand (62px) ist dort ausschließlich iconbedingt und daher nicht
| auf ein Feld ohne Icon übertragbar. Der rechte Innenabstand (24px) ist
| hingegen icon-unabhängig und wird deshalb symmetrisch für beide Seiten
| verwendet — der einzige aus der Referenz eindeutig ableitbare
| Innenabstandswert für ein Feld ohne Icon.
|
| box-sizing wird weiterhin bewusst NICHT gesetzt (siehe OPEN_POINTS.md).
|
| Nicht enthalten: width, margin — laut Komponentenvertrag Abschnitt 10
| ausdrücklich Feature-/Layout-Eigenschaften, kein Bestandteil der
| Komponente. Kein Wrapper, kein Icon — siehe
| vt-form-inputfield-icon.css für die optionale Icon-Ausprägung.
|--------------------------------------------------------------------------
*/
input.vt-form-inputfield.vt-form-inputfield {
    height: 52px;

    padding: 0 24px;

    border: 1px solid rgba(80,140,255,0.25);
    border-radius: 20px;

    background: var(--vt-form-surface);

    color: #ffffff;

    font-size: 20px;
}

/*
|--------------------------------------------------------------------------
| 2026-08-09 | Author: Claude
| Änderung:
| Neuer Abschnitt „Zustandsübergänge". Umsetzung der menschlichen
| Architekturentscheidung vom 2026-08-09: Die Neutralisierung der von
| Astra geerbten Zustandsanimation gehört zentral zu dieser Komponente,
| nicht in eine Feature- oder Geometrieschicht.
|
| Sachverhalt (browserverifiziert an beiden realen Verwendern, siehe
| TESTPROTOKOLL.md):
| Astra (themes/astra/assets/css/minified/main.min.css) setzt auf
| input[type="text"] u. a. `transition: all .2s linear`. Diese Regel
| wurde von keiner VisionThinks-Datei zurückgesetzt; der computed value
| lautete auf beiden Verwendern dieser Komponente — Domainsuche wie
| Domainpreisliste — tatsächlich `transition-property: all`.
|
| Dadurch bestimmte Theme-CSS die zeitliche Ausprägung der Zustands-
| wechsel dieser Komponente mit. Komponentenvertrag Abschnitt 9 weist
| die Zustände normal, hover, focus, focus-visible, active, disabled,
| readonly, invalid und Autofill ausschließlich der Komponente zu und
| untersagt Feature-, Layout-, Theme- und Framework-CSS ausdrücklich,
| die visuelle Gestaltung dieser Zustände zu definieren, zu ergänzen
| oder zu überschreiben. Die Abwehr dieses Fremdeinflusses ist damit
| Aufgabe dieser Datei.
|
| `transition-property: none` unterbindet ausschließlich die
| Zwischenzustände des Zustandswechsels. Es wird kein Gestaltungswert
| gesetzt: keine Farbe, keine Outline, keine Geometrie, kein neuer
| Zustand. Anfangs- und Endzustand aller Zustände bleiben unverändert;
| sie werden lediglich unmittelbar statt über eine fremd vorgegebene
| Dauer erreicht.
|
| Bewusst nicht gesetzt: `transition` als Kurzform. Diese würde
| zusätzlich `transition-duration`, `-timing-function` und `-delay` auf
| ihre Initialwerte zurücksetzen und damit über den Zweck hinaus
| Eigenschaften festlegen, für die diese Komponente keinen eigenen Wert
| besitzt.
|
| Kein eigener VisionThinks-Bewegungswert: Sollte für diese Komponente
| künftig eine gestaltete Zustandsanimation gewünscht sein, ist dies
| eine menschliche Designentscheidung auf Foundation- oder
| Komponentenebene und nicht durch diese Regel vorweggenommen.
|--------------------------------------------------------------------------
*/
input.vt-form-inputfield.vt-form-inputfield {
    transition-property: none;
}

/*
|--------------------------------------------------------------------------
| Innere Elemente
|
| Gruppe
| Die Gruppe fasst Beschriftung, Control-Ebene und Fehlercontainer zu
| einer adressierbaren Feldeinheit zusammen und trägt die zentralen
| Zustandsklassen. Sie erhält bewusst keine eigene Deklaration: Breite,
| Außenabstände und die Einordnung in das Seiten- oder Formularlayout
| sind nach Komponentenvertrag Abschnitt 10 Feature-Verantwortung.
|
| Der bereits vorhandene Positionierungskontext .vt-form-inputfield-wrap
| bleibt unverändert die Control-Ebene aus optionalem Icon und nativem
| Eingabefeld (siehe vt-form-inputfield-icon.css). Beschriftung und
| Fehlercontainer liegen ausdrücklich außerhalb dieses Kontexts, damit
| der Vertikalversatz des absolut positionierten Icons unverändert auf
| das Eingabefeld bezogen bleibt.
|
| Beschriftung
| display: block ist keine gestalterische Festlegung, sondern die
| komponenteninterne Struktur: Beschriftung und Eingabefeld stehen
| untereinander. Ohne diese Deklaration bestimmte allein der
| Browserstandardwert für <label> die Eigenform der Komponente, was
| AR-025 ausdrücklich ausschließt. Farbe, Typografie und Abstand der
| Beschriftung bleiben offene menschliche Designwerte und werden hier
| nicht vorweggenommen.
|
| Fehlercontainer
| Der Container wird serverseitig immer ausgegeben und über das native
| hidden-Attribut verborgen, solange kein Fehlertext vorliegt. Die Regel
| sichert diese native Semantik gegen eine fremde display-Deklaration ab
| (AR-025, Abschnitt Fremd-CSS); sie setzt keinen Gestaltungswert.
|--------------------------------------------------------------------------
*/
.vt-form-inputfield-label {
    display: block;
}

/*
|--------------------------------------------------------------------------
| 2026-09-03
| Author: Claude
| Änderung:
| Ausschließlich additive Ergänzung der zentralen Fehler-Microinteraction.
| Umsetzung der menschlichen Designentscheidung vom 2026-09-03: Der
| Fehlercontainer der Komponente blendet beim Erscheinen und beim
| Verschwinden über eine opacity-Transition von 120 ms ein und aus.
|
| Damit ist der weiter oben im Abschnitt "Zustandsübergänge" als offen
| bezeichnete Fall einer gestalteten Zustandsanimation für dieses eine
| Unterelement menschlich entschieden. Die dortige Regel bleibt
| unverändert: das native Eingabefeld führt weiterhin
| transition-property: none. Es entsteht kein zweiter Bewegungswert für
| das Eingabefeld.
|
| Animiert wird ausschließlich opacity. Kein transform, kein slide,
| keine Höhen- oder Positionsanimation, keine Verzögerung. Die Geometrie
| des Containers bleibt über den gesamten Verlauf unverändert; er
| beansprucht während des Ein- und Ausblendens denselben Raum wie im
| sichtbaren Zustand.
|
| Warum display in der Übergangsliste steht
| Der Container wird nach Komponentenvertrag Abschnitt 16.1 über das
| native hidden-Attribut verborgen; hidden bedeutet display: none. Ein
| unmittelbarer Wechsel nach display: none würde die Ausblendtransition
| im selben Frame abschneiden - die Deckkraft käme nie bei 0 an.
|
| transition-behavior: allow-discrete lässt den Browser den diskreten
| Wechsel von display erst am Ende der 120 ms vollziehen. display wird
| dabei nicht interpoliert; es springt weiterhin, nur zum richtigen
| Zeitpunkt. Der einzige animierte Darstellungswert bleibt opacity.
|
| Das ist der native Weg des Standards. Er kommt ohne setTimeout, ohne
| transitionend-Listener und ohne einen zweiten Sichtbarkeitszustand aus.
| Eine schnelle Eingabefolge kann deshalb kein Timer-Rennen erzeugen: der
| Browser richtet eine bereits laufende Transition selbst auf das neue
| Ziel aus.
|
| @starting-style liefert den Ausgangswert für den umgekehrten Fall. Ein
| Element, das aus display: none heraus erstmals dargestellt wird, besitzt
| ohne diese Regel keinen Vorher-Zustand, von dem aus die Deckkraft
| animieren könnte; es erschiene ohne Übergang.
|
| Rückfallverhalten: Kennt eine Laufzeitumgebung allow-discrete oder
| @starting-style nicht, werden beide nach den Fehlerbehandlungsregeln von
| CSS übergangen. Der Container erscheint und verschwindet dann
| unmittelbar - exakt das Verhalten vor dieser Änderung. Es entsteht kein
| defekter Zwischenzustand.
|
| transition-timing-function wird bewusst nicht gesetzt. Die Entscheidung
| nennt ausschließlich die Dauer; der Initialwert bleibt wirksam. Eine
| gestaltete Beschleunigungskurve bleibt eine offene menschliche
| Entscheidung (Komponentenvertrag Abschnitt 15). Fremd-CSS kann sie nicht
| bestimmen: im geladenen Baum existiert keine Regel, die diesen Container
| trifft und transition führt.
|
| display: block ist wie bei der Beschriftung keine gestalterische
| Festlegung, sondern die komponenteninterne Eigenform. Ohne die
| Deklaration bestimmte allein der Browserstandardwert den Vorher-Wert des
| diskreten Übergangs, was AR-025 ausschließt. Der Wert entspricht dem
| bisherigen Verhalten; es entsteht keine Geometrieänderung.
|
| Reihenfolge nach AR-023 Abschnitt 8.1: die Regeln stehen unverändert im
| Abschnitt der inneren Elemente, unmittelbar an der bereits vorhandenen
| hidden-Regel. Keine bestehende Regel wurde verändert oder entfernt; die
| bisherige Deklaration display: none ist vollständig erhalten.
|--------------------------------------------------------------------------
*/
.vt-form-inputfield-error {
    display: block;

    opacity: 1;

    transition-property: opacity, display;
    transition-duration: 120ms;
    transition-delay: 0s;
    transition-behavior: allow-discrete;
}

.vt-form-inputfield-error[hidden] {
    display: none;

    opacity: 0;
}

@starting-style {
    .vt-form-inputfield-error:not([hidden]) {
        opacity: 0;
    }
}

/*
|--------------------------------------------------------------------------
| Zustände
|
| Focus (ohne Focus-visible): Komponentenvertrag Abschnitt 9 legt fest,
| dass Focus allein keine sichtbare Fokusmarkierung erzeugt. Diese Regel
| unterdrückt daher ausschließlich die native Standarddarstellung, ohne
| einen eigenen Gestaltungswert zu setzen.
|
| Focus-visible: Keine eigene VisionThinks-Gestaltung vorhanden (weder
| Domainsuche noch — nach der menschlichen Designentscheidung —
| Domainpreisliste liefern einen zulässigen Wert). Um weder eine weiße/
| native Browser- oder Theme-Outline noch eine optisch dominante
| Markierung zuzulassen, wird auch hier die native Standarddarstellung
| unterdrückt. Offener menschlicher Designwert, siehe OPEN_POINTS.md.
| Geometrie (Höhe, Rahmen, Radius) bleibt unverändert.
|--------------------------------------------------------------------------
*/
input.vt-form-inputfield.vt-form-inputfield:focus:not(:focus-visible) {
    outline: none;
}

input.vt-form-inputfield.vt-form-inputfield:focus-visible {
    outline: none;
}

/*
|--------------------------------------------------------------------------
| Placeholder
| Keine Regel vorhanden. Weder Domainsuche noch (nicht mehr zulässig)
| Domainpreisliste liefern einen Placeholder-Farbwert. Native Browser-/
| Theme-Darstellung bleibt wirksam. Offener menschlicher Designwert,
| siehe OPEN_POINTS.md.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Textcursor
| Keine Regel vorhanden. Der native Texteingabecursor (I-Beam) bleibt
| dadurch unverändert wirksam.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Statuszustände
|
| Die Zustandsanker der Komponente werden von PHP beziehungsweise
| JavaScript gesetzt:
|
|   nativ am Eingabefeld   :disabled
|                          :read-only
|                          [aria-invalid="true"]
|
|   an der Gruppe          .is-disabled
|                          .is-readonly
|                          .is-invalid
|
| Die Gruppenklassen sind keine Verdopplung der nativen Semantik. Sie
| erfüllen eine eigene Aufgabe im Zustandsmodell (VT-NAM-056): nur über
| sie sind Beschriftung, Icon und Fehlercontainer als Geschwister des
| Eingabefeldes erreichbar.
|
| Die zuvor an dieser Stelle dokumentierte offene Farbentscheidung ist
| durch die menschliche Festlegung vom 2026-09-03 abgelöst. Sämtliche
| Werte stammen ausschließlich aus den drei dafür angelegten semantischen
| Foundation-Tokens (01-foundation/vt-colors.css); diese Datei setzt
| keinen eigenen Farbwert.
|
| Reihenfolge nach AR-023 Abschnitt 8.2: Disabled vor Error/Invalid.
|
| Geometrie-Invarianz nach Komponentenvertrag Abschnitt 9: kein Zustand
| verändert Höhe, Radius oder Rahmenstärke. Der Invalid-Zustand setzt
| ausschließlich border-color, nicht border.
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| Disabled und Readonly
|
| Beide Zustände bleiben technisch und semantisch getrennt: disabled
| sperrt das Feld vollständig und schließt seinen Wert vom Formularversand
| aus, readonly sperrt ausschließlich die Bearbeitung. Visuell teilen sie
| sich nach der menschlichen Entscheidung bewusst dieselbe inactive-
| Farbsprache; es gibt dafür ausdrücklich keine getrennten Tokens.
|
| --vt-form-inactive-surface referenziert --vt-form-surface. Die Fläche
| bleibt damit unverändert; der Unterschied zum Normalzustand entsteht
| ausschließlich über die Inhaltsfarbe.
|
| Beschriftung und Icon folgen derselben Inhaltsfarbe. Andernfalls stünde
| eine weiße Beschriftung neben abgesenktem Feldinhalt, und der Zustand
| wirkte uneinheitlich. Beide werden ausschließlich über die
| Gruppenklassen erreicht — die einzige Aufgabe, für die diese Klassen
| bestehen. Für das Icon genügt die Spezifität der Gruppenklasse gegenüber
| vt-form-inputfield-icon.css; ein !important ist nicht erforderlich.
|--------------------------------------------------------------------------
*/
input.vt-form-inputfield.vt-form-inputfield:disabled,
input.vt-form-inputfield.vt-form-inputfield:read-only {
    background: var(--vt-form-inactive-surface);

    color: var(--vt-form-inactive-text);
}

.vt-form-inputfield-group.is-disabled .vt-form-inputfield-label,
.vt-form-inputfield-group.is-readonly .vt-form-inputfield-label,
.vt-form-inputfield-group.is-disabled .vt-form-inputfield-icon,
.vt-form-inputfield-group.is-readonly .vt-form-inputfield-icon {
    color: var(--vt-form-inactive-text);
}

/*
|--------------------------------------------------------------------------
| Invalid
|
| Die Fehlerkennzeichnung des Eingabefeldes erfolgt über die Rahmenfarbe.
| Rahmenstärke, Höhe und Radius bleiben unverändert, damit kein
| Zustandswechsel das Layout verschiebt (Komponentenvertrag Abschnitt 9).
|
| Der Fehlercontainer trägt denselben Token. Es wird keine zweite
| Fehlerfarbe geführt.
|
| --vt-form-error ist bewusst formularweit benannt und nicht auf diese
| Komponente beschränkt.
|--------------------------------------------------------------------------
*/
input.vt-form-inputfield.vt-form-inputfield[aria-invalid="true"] {
    border-color: var(--vt-form-error);
}

.vt-form-inputfield-error {
    color: var(--vt-form-error);
}

/*
|--------------------------------------------------------------------------
| Responsive
| Ausschließlich aus der Domainsuche übernommen. Wie in der Basisregel
| wird ausschließlich der icon-unabhängige rechte Innenabstand
| (responsiv 18px bzw. 16px) symmetrisch für beide Seiten verwendet; die
| iconbedingten linken Innenabstände (58px/54px) sind Bestandteil von
| vt-form-inputfield-icon.css.
|
| Die Höhe wird an keinem Bruchpunkt erneut definiert: In der Domainsuche
| ändert sich an dieser Stelle ausschließlich die Höhe eines umgebenden
| Wrapper-Elements — nicht die Höhe des Eingabefeldes selbst. Diese Regel
| überträgt deshalb ausschließlich das tatsächliche Verhalten des
| nativen Eingabefeldes.
|--------------------------------------------------------------------------
*/
@media (max-width: 881px) {
    input.vt-form-inputfield.vt-form-inputfield {
        font-size: 20px;

        padding: 0 18px;
    }
}

@media (max-width: 640px) {
    input.vt-form-inputfield.vt-form-inputfield {
        font-size: 18px;

        padding: 0 16px;
    }
}


/*
|--------------------------------------------------------------------------
| 2026-11-03
| Author: Claude
| Änderung (PHP-Sicherheitscheck R2b-1, Freigabe Klaus 03.11.2026):
| Ausschließlich additiv: Modifikatoren nach globaler Richtlinie 3
| (Objekt + Modifikator) und Fokus nach Richtlinie 5 (Fokus = Hover,
| keine gestrichelte Linie).
|
|   class="vt-form-inputfield"                 dunkel (Standard, wie bisher)
|   class="vt-form-inputfield dunkel"          dunkel ausdrücklich
|   class="vt-form-inputfield hell"            heller Grund
|   class="vt-form-inputfield … kompakt"       Formulare: 48 px, 16 px, Radius 10
|
| Ohne „kompakt“ bleibt die große Ausprägung (52 px, 20 px, Radius 20)
| für einzelne Felder wie die Domainsuche (Klaus 17:17).
| Natives <select> nutzt dieselbe Grundklasse (Klaus 15:08).
| Über customInputField(): 'input_class' => 'hell kompakt'.
| Farben ausschließlich aus 01-foundation/vt-colors.css.
|--------------------------------------------------------------------------
*/

/* Dunkel (Standard): Rahmen mit Kontrast, Hover = Fokus */
input.vt-form-inputfield.vt-form-inputfield,
select.vt-form-inputfield.vt-form-inputfield {
    border-color: var(--vt-form-dunkel-rahmen);
    transition: border-color .15s ease;
}

input.vt-form-inputfield.vt-form-inputfield:hover,
input.vt-form-inputfield.vt-form-inputfield:focus,
input.vt-form-inputfield.vt-form-inputfield:focus-visible,
select.vt-form-inputfield.vt-form-inputfield:hover,
select.vt-form-inputfield.vt-form-inputfield:focus,
select.vt-form-inputfield.vt-form-inputfield:focus-visible {
    border-color: var(--vt-form-dunkel-aktiv);
    outline: none;
    box-shadow: none;
}

/* Natives Auswahlfeld mit derselben Grundklasse */
select.vt-form-inputfield.vt-form-inputfield {
    width: 100%;
    height: 52px;
    padding: 0 48px 0 24px;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    background-color: var(--vt-form-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a9b7cc' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 18px center;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    color: #ffffff;
    font-size: 20px;
    appearance: none;
    cursor: pointer;
}

/* Automatisch ausgefüllte Felder: eigene Farben behalten (kein Browser-Gelb) */
input.vt-form-inputfield.vt-form-inputfield:-webkit-autofill,
input.vt-form-inputfield.vt-form-inputfield:-webkit-autofill:hover,
input.vt-form-inputfield.vt-form-inputfield:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 0 0 1000px var(--vt-form-surface) inset;
    caret-color: #ffffff;
}
input.vt-form-inputfield.vt-form-inputfield:autofill {
    background: var(--vt-form-surface);
}

/* Hell */
input.vt-form-inputfield.vt-form-inputfield.hell,
select.vt-form-inputfield.vt-form-inputfield.hell {
    border-color: var(--vt-form-hell-rahmen);
    background-color: var(--vt-form-hell-surface);
    color: var(--vt-form-hell-text);
}

select.vt-form-inputfield.vt-form-inputfield.hell {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235a6a82' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

input.vt-form-inputfield.vt-form-inputfield.hell:hover,
input.vt-form-inputfield.vt-form-inputfield.hell:focus,
input.vt-form-inputfield.vt-form-inputfield.hell:focus-visible,
select.vt-form-inputfield.vt-form-inputfield.hell:hover,
select.vt-form-inputfield.vt-form-inputfield.hell:focus,
select.vt-form-inputfield.vt-form-inputfield.hell:focus-visible {
    border-color: var(--vt-form-hell-aktiv);
}

input.vt-form-inputfield.vt-form-inputfield.hell:disabled,
input.vt-form-inputfield.vt-form-inputfield.hell:read-only {
    background: var(--vt-form-hell-inactive-surface);
    color: var(--vt-form-hell-inactive-text);
}

input.vt-form-inputfield.vt-form-inputfield.hell[aria-invalid="true"],
select.vt-form-inputfield.vt-form-inputfield.hell[aria-invalid="true"] {
    border-color: var(--vt-form-hell-error);
}

.vt-form-inputfield-group.hell .vt-form-inputfield-error {
    color: var(--vt-form-hell-error);
}

input.vt-form-inputfield.vt-form-inputfield.hell:-webkit-autofill,
input.vt-form-inputfield.vt-form-inputfield.hell:-webkit-autofill:hover,
input.vt-form-inputfield.vt-form-inputfield.hell:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--vt-form-hell-text);
    box-shadow: 0 0 0 1000px var(--vt-form-hell-surface) inset;
    caret-color: var(--vt-form-hell-text);
}
input.vt-form-inputfield.vt-form-inputfield.hell:autofill {
    background: var(--vt-form-hell-surface);
}

/* Fehler dunkel auch am Auswahlfeld */
select.vt-form-inputfield.vt-form-inputfield[aria-invalid="true"] {
    border-color: var(--vt-form-error);
}

/* Kompakt: Formulare mit mehreren Feldern */
input.vt-form-inputfield.vt-form-inputfield.kompakt,
select.vt-form-inputfield.vt-form-inputfield.kompakt {
    height: 48px;
    padding: 0 14px;
    border-radius: var(--vt-radius-small, 10px);
    font-size: 16px; /* verhindert Zoom auf iOS */
}

select.vt-form-inputfield.vt-form-inputfield.kompakt {
    padding-right: 40px;
    background-position: right 14px center;
}

@media (max-width: 881px) {
    select.vt-form-inputfield.vt-form-inputfield {
        font-size: 20px;
        padding-left: 18px;
    }
}

@media (max-width: 640px) {
    select.vt-form-inputfield.vt-form-inputfield {
        font-size: 18px;
        padding-left: 16px;
    }
}

/* Kompakt bleibt auch mobil kompakt (nach den Media-Queries der Grundklasse) */
@media (max-width: 881px) {
    input.vt-form-inputfield.vt-form-inputfield.kompakt,
    select.vt-form-inputfield.vt-form-inputfield.kompakt {
        font-size: 16px;
        padding-left: 14px;
    }
    input.vt-form-inputfield.vt-form-inputfield.kompakt {
        padding-right: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    input.vt-form-inputfield.vt-form-inputfield,
    select.vt-form-inputfield.vt-form-inputfield {
        transition: none;
    }
}

/*
|--------------------------------------------------------------------------
| 2026-11-04
| Author: Claude
| Änderung (PHP-Sicherheitscheck R2b-3, Befund Klaus 04.11.2026 11:08):
| Kein Browser-Gelb auch am Auswahlfeld (Firefox füllt z. B. „Land“ aus).
| Firefox setzt beim Ausfüllen Hintergrundbild und Farbe fest; Fläche
| und Schrift deshalb wie bei input über inset-Schatten bzw.
| -webkit-text-fill-color, der Pfeil kommt in diesem Zustand vom Wrapper.
|--------------------------------------------------------------------------
*/
select.vt-form-inputfield.vt-form-inputfield:-webkit-autofill,
select.vt-form-inputfield.vt-form-inputfield:autofill {
    -webkit-text-fill-color: #ffffff;
    box-shadow: 0 0 0 1000px var(--vt-form-surface) inset;
}

select.vt-form-inputfield.vt-form-inputfield.hell:-webkit-autofill,
select.vt-form-inputfield.vt-form-inputfield.hell:autofill {
    -webkit-text-fill-color: var(--vt-form-hell-text);
    box-shadow: 0 0 0 1000px var(--vt-form-hell-surface) inset;
}

.vt-form-inputfield-wrap:has(> select.vt-form-inputfield:autofill) {
    position: relative;
}

.vt-form-inputfield-wrap:has(> select.vt-form-inputfield:autofill)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23a9b7cc' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / 14px 14px;
    pointer-events: none;
}

.vt-form-inputfield-wrap:has(> select.vt-form-inputfield.hell:autofill)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235a6a82' stroke-width='2.5' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.vt-form-inputfield-wrap:has(> select.vt-form-inputfield.kompakt:autofill)::after {
    right: 14px;
}