/*
  Formularfeld: ersetzt Legacy input.blade.php/select.blade.php/textarea.blade.php
  (drei fast identische Dateien, siehe formularfeld.schema.json) durch eine
  gemeinsame visuelle Basis fuer alle drei Feldtypen -- .feld__eingabe traegt
  input/select/textarea gleichermassen, nur typspezifische Zusatzklassen
  (.feld__eingabe--select/--textarea) fuer die Unterschiede (Pfeil-Icon,
  vertikales Resize). A11y-kritischste Komponente der Bibliothek: Label immer
  echt verknuepft (nie nur Platzhalter), Fokus sichtbar, Fehler ueber
  aria-invalid/aria-describedby/role=alert an das Feld gebunden -- siehe
  formularfeld.mustache.
*/@layer komponenten{.feld{display:flex;flex-direction:column;gap:var(--space-2)}.feld__label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--farbe-text)}.feld__pflicht{color:var(--farbe-gefahr)}/* ---- Gemeinsame Basis fuer input/select/textarea ---- */.feld__eingabe{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:var(--text-base);color:var(--farbe-text);background:var(--farbe-grund);border:1px solid var(--farbe-linie-stark);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);-webkit-appearance:none;appearance:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.feld__eingabe::placeholder{color:var(--farbe-text-dezent)}.feld__eingabe:hover:not(:disabled){border-color:color-mix(in oklch, var(--farbe-text) 35%, var(--farbe-linie-stark))}.feld__eingabe:focus-visible{outline:none;border-color:var(--farbe-fokus);box-shadow:0 0 0 3px color-mix(in oklch, var(--farbe-fokus) 25%, transparent)}/* ---- select: eigener Pfeil statt Browser-Default (appearance:none oben
     entfernt ihn), rechts Platz fuer das Icon lassen ---- */.feld__eingabe--select{padding-inline-end:var(--space-10);background-repeat:no-repeat;background-position:right var(--space-3) center;background-size:1.1em;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2355606b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E")}/* Dark-Mode-Fund (Achilles, 2026-08-19): der Pfeil ist als Daten-URI gebacken,
     kann also keine CSS-Custom-Property lesen -- #55606b (~ Grauton zwischen
     --color-gray-600/700) hat auf hellem Feld-Grund genug Kontrast, aber auf
     dunklem Feld-Grund (--farbe-grund im Dark Mode = --nacht-grund, nahe
     Schwarz) faellt er unter brauchbaren Kontrast. Zweite Daten-URI mit
     hellerem Grauton (~ --color-gray-400), selber Drei-Wege-Aktivierungs-
     mechanismus wie ueberall sonst in der Bibliothek. */@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .feld__eingabe--select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a7b0ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E")}}:root[data-theme="dark"] .feld__eingabe--select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23a7b0ba' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E")}/* ---- textarea: nur vertikal groesser ziehbar, Layout bleibt stabil ---- */.feld__eingabe--textarea{resize:vertical;min-height:6.5rem}/* ---- Deaktiviert: echte Sperre (native disabled uebernimmt bereits Klick-
     /Tastatur-Blockade), hier nur die visuelle Seite ---- */.feld__eingabe:disabled{background:var(--farbe-flaeche);color:var(--farbe-text-dezent);cursor:not-allowed;opacity:0.7}/* ---- Fehlerzustand: aria-invalid ist die Quelle der Wahrheit (kommt direkt
     aus formularfeld.mustache, keine zusaetzliche data-Klasse noetig) ---- */.feld__eingabe[aria-invalid="true"]{border-color:var(--farbe-gefahr)}.feld__eingabe[aria-invalid="true"]:focus-visible{border-color:var(--farbe-gefahr);box-shadow:0 0 0 3px color-mix(in oklch, var(--farbe-gefahr) 20%, transparent)}.feld__fehler{display:flex;align-items:flex-start;gap:var(--space-1);font-size:var(--text-sm);color:var(--farbe-gefahr)}.feld__hinweis{font-size:var(--text-sm);color:var(--farbe-text-dezent)}/* ---- checkbox: Label rechts neben dem Kaestchen statt darueber, sonst
     gleiches Verhalten (Fehler/Hinweis/Pflicht) wie die anderen Typen. Eigener
     Block statt .feld__label/.feld__eingabe -- eine Checkbox ist visuell kein
     Textfeld, braucht eigene Ausrichtung (align-items: flex-start wegen
     mehrzeiligem Einwilligungstext). ---- */.feld--checkbox .feld__checkbox-label{display:flex;align-items:flex-start;gap:var(--space-3);cursor:pointer}.feld__checkbox-eingabe{flex-shrink:0;width:1.25rem;height:1.25rem;margin-block-start:0.15em;accent-color:var(--farbe-akzent, var(--farbe-fokus));cursor:pointer}.feld__checkbox-eingabe:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:2px}.feld__checkbox-eingabe:disabled{cursor:not-allowed;opacity:0.7}.feld__checkbox-eingabe[aria-invalid="true"]{outline:2px solid var(--farbe-gefahr)}.feld__checkbox-text{font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text)}.feld__checkbox-text a{color:var(--farbe-akzent, var(--farbe-fokus));text-decoration:underline}}