/* AUTOGENERIERT von scripts/design.mjs (npm run design) — NICHT bearbeiten.
   Quelle der Wahrheit: wk-design/felder.css im Workspace-Root. */

/* ============================================================
   wk-design · felder.css
   EIN Aussehen für jedes Eingabefeld im Verein — Portal, Hauptseite, Archiv.
   Wird von `npm run design` verteilt, genau wie tokens.css.
   Setzt tokens.css voraus (muss davor geladen werden).

   WARUM ES DIESE DATEI GIBT (12.09.2026).

   Es gab vorher kein gemeinsames Feld. Es gab:
     · im Portal `.field input` (133 Stellen, gestylt)
     · im Portal `class="feld"` (29 Stellen, Finanz-Strang) — eine Klasse, zu
       der es in KEINER Stylesheet-Datei eine Regel gab. Die Masken für Konto,
       Geldgeber, Kostenart, Vereinsdaten und Beleg-Posten standen damit als
       nackte Browser-Felder in einem sonst durchgestalteten Portal.
     · elf `<select>` ganz ohne Klasse
     · `.wk-select` — das EINZIGE Auswahlfeld mit CD-Pfeil, fertig gebaut und
       an genau EINER von 51 Stellen benutzt
     · auf der Hauptseite denselben `.form`-Feldblock in VIER Kopien, in dem
       `select` in keiner Selektorliste vorkam — weshalb das einzige
       Auswahlfeld der Website (Warteliste, „Beziehung") ebenfalls nackt war.

   Das ist kein Schlampigkeitsbefund, sondern ein Strukturbefund: Es gab keine
   Stelle, an der ein Feld einmal beschrieben war. Jetzt gibt es sie.

   BAUART. Gestylt wird das ELEMENT (`input`, `select`, `textarea`), nicht eine
   Klasse. Das hat einen Grund: ein Element-Selektor hat die schwächste
   Spezifität, die es gibt. Jede vorhandene Sonderregel im Portal
   (`.mv-edit input`, `.kv-num`, `.tb-text-in`, `.zell-eingabe` …) gewinnt
   also weiterhin von selbst — hier steht die Grundlage, nicht das Gesetz.
   Deshalb muss diese Datei VOR der Anwendungs-CSS geladen werden.

   EINE bewusste Sichtänderung ist darin: der Fokus trägt jetzt überall
   Goldrand UND einen weichen Ring. Der Goldrand ist die Fassung des Portals,
   der Ring die der Hauptseite. Beide hatten recht — ein Ring ist deutlicher
   sichtbar als ein Farbwechsel allein, und wer die Tastatur benutzt, soll
   sehen, wo er ist.
   ============================================================ */

/* ── Die Grundlage: Text-, Zahl-, Auswahl- und Mehrzeilenfeld ── */
input, select, textarea {
  font-family: var(--f-body);
  font-size: var(--feld-schrift);
  color: var(--tinte);
  background: var(--feld-grund);
  border: 1px solid var(--feld-rand);
  border-radius: var(--radius);
  padding: var(--feld-polster);
  transition: border-color .18s var(--ease-soft), box-shadow .18s var(--ease-soft);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--feld-rand-an);
  box-shadow: 0 0 0 3px var(--feld-ring);
}
textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

/* Ein Feld, das nur zeigt. Grau statt weiß, damit man es SIEHT und nicht erst
   beim Hineinklicken merkt — und mit demselben Rahmen, damit die Zeile nicht
   springt, wenn dasselbe Feld einmal schreibbar ist und einmal nicht. */
input:disabled, select:disabled, textarea:disabled {
  background: var(--sand); color: var(--braun);
  border-style: dashed; cursor: not-allowed;
}

/* ── Ankreuz- und Auswahlkästchen ──
   Bewusst NICHT nachgebaut: das native Kästchen ist überall bedienbar, kennt
   den Zwischenzustand und wird von Vorlesegeräten richtig angesagt. Es bekommt
   nur die Hausfarbe und eine Größe, die man auf dem Handy trifft. Deshalb
   müssen hier alle Werte der Grundlage oben zurückgenommen werden. */
input[type="checkbox"], input[type="radio"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; padding: 0; border: 0;
  background: none; box-shadow: none;
  accent-color: var(--bx); flex-shrink: 0; cursor: pointer;
}
input[type="checkbox"] { border-radius: var(--radius); }
input[type="radio"] { border-radius: 50%; }   /* ein Kreis, keine Ecke */
input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: none; }

/* ── Dateifeld ──
   Der „Durchsuchen…"-Knopf des Browsers stand bis zum 12.09.2026 an fünf
   Stellen roh im Bordeaux-Layout. Er lässt sich nicht ersetzen, aber
   angleichen: `::file-selector-button` ist der Knopf darin. */
input[type="file"] {
  padding: 8px 10px; cursor: pointer;
  font-size: calc(var(--feld-schrift) - 1px);
}
input[type="file"]::file-selector-button {
  font-family: var(--f-body); font-size: 13px; font-weight: 600;
  letter-spacing: .04em;
  margin-right: 12px; padding: 7px 14px; cursor: pointer;
  color: var(--bx); background: var(--sand);
  border: 1px solid var(--gold-line); border-radius: var(--radius);
  transition: background .18s var(--ease-soft);
}
input[type="file"]::file-selector-button:hover { background: var(--creme); }

/* ── Ablagefläche ─────────────────────────────────────────────
   Das `<input>` liegt UNSICHTBAR über der ganzen Fläche. Damit macht der
   Browser alles selbst: Klick öffnet den Dateidialog, Fallenlassen nimmt die
   Datei, Tab springt hin, Leertaste öffnet. Nichts davon ist nachgebaut — und
   deshalb gibt es auch nichts, was anders funktioniert als erwartet.

   Gestrichelt, weil es eine Fläche ist, die etwas AUFNIMMT; ein durchgezogener
   Rahmen sieht aus wie ein Feld, in das man tippt. */
.wk-ablage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 14px 18px;
  text-align: center;
  border: 1px dashed var(--feld-rand);
  border-radius: var(--radius);
  background: var(--feld-grund);
  color: var(--braun);
  transition: border-color .18s var(--ease-soft), background .18s var(--ease-soft);
}
.wk-ablage input[type="file"] {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: none; box-shadow: none;
  opacity: 0; cursor: pointer;
}
.wk-ablage-satz { font-size: 14px; line-height: 1.45; pointer-events: none; }
.wk-ablage-satz b { color: var(--bx); font-weight: 600; }
.wk-ablage:hover, .wk-ablage:focus-within { border-color: var(--gold); }
.wk-ablage:focus-within { box-shadow: 0 0 0 3px var(--feld-ring); }
/* Während etwas darüber hängt: deutlich, aber nicht laut. */
.wk-ablage.drauf {
  border-color: var(--bx); border-style: solid;
  background: var(--ton-gut-flaeche);
}

/* Was drin ist. Die Zeile ist die eigentliche Neuigkeit — vorher stand nach
   dem Auswählen nichts da, und bei „mehrere auf einmal" wusste niemand, ob es
   drei oder vier waren. */
/* Leer heißt WEG, nicht nur leer: `.field` ist eine Flex-Spalte mit `gap`,
   und ein leeres <div> darin wäre ein Spalt Luft unter jedem Feld, das noch
   keine Datei hat. */
.wk-ablage-liste:empty { display: none; }
.wk-ablage-liste { display: flex; flex-direction: column; gap: 4px; }
.wk-ablage-z {
  display: flex; align-items: baseline; gap: 10px;
  font-size: 13.5px; color: var(--tinte);
  padding: 6px 10px;
  background: var(--sand); border-radius: var(--radius);
}
.wk-ablage-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-ablage-g { color: var(--braun); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Rausschmeißen. Klein, ohne Rahmen, und erst beim Hinsehen deutlich — die
   Zeile ist eine Auskunft, kein Bedienfeld mit Knopf darin. Die Trefferfläche
   ist trotzdem 28px, damit sie auf dem Telefon getroffen wird; die negativen
   Ränder holen die Höhe wieder aus der Zeile heraus.

   Rund, und das ist KEINE Ecke: ein ✕ in einem Rechteck sieht aus wie das
   Schließen-Kreuz eines Fensters. */
.wk-ablage-x {
  flex: 0 0 auto; align-self: center;
  width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
  color: var(--braun); background: none; border: 0; border-radius: 50%;
  cursor: pointer;
  transition: color .15s var(--ease-soft), background .15s var(--ease-soft);
}
.wk-ablage-x:hover, .wk-ablage-x:focus-visible {
  color: var(--ton-offen-schrift); background: var(--ton-offen-flaeche);
}
.wk-ablage-x:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Der Knopf unter der Ablage. Er steht erst da, wenn etwas gewählt ist —
   deshalb `hidden` ausdrücklich, statt sich auf den Voreingestellten des
   Browsers zu verlassen: eine Regel weiter oben, die dem Knopf ein `display`
   gibt, würde `hidden` sonst stillschweigend aushebeln.

   Links ausgerichtet und nicht über die volle Breite: er ist der zweite
   Schritt nach dem Ablegen, nicht der Abschluss eines Formulars. */
.wk-ablage-los { align-self: flex-start; margin-top: 2px; }
.wk-ablage-los[hidden] { display: none; }
/* Die abgewiesene Datei, und warum. Sie steht HIER und nicht in einer Meldung,
   die wegblinkt: der Fehler ist an dieser Stelle passiert. */
.wk-ablage-nein {
  font-size: 13.5px; padding: 6px 10px;
  color: var(--ton-offen-schrift); background: var(--ton-offen-flaeche);
  border-radius: var(--radius);
}

/* ── Auswahlfeld mit eigenem Pfeil ──
   Das Standard-Feld des Browsers sieht in jedem Browser anders aus und in
   keinem gut. Der Pfeil ist mit CSS gezeichnet — keine zweite Datei, kein
   Netzzugriff, und er nimmt seine Farbe aus dem Token statt aus einem
   eingebetteten Bild, in dem sie wieder festgeschrieben wäre.

   Dafür braucht es eine Hülle um das Feld. Niemand muss daran denken:
   `auswahl()` in `wk-bausteine.js` schreibt sie von selbst mit. Ein `<select>`
   ohne Hülle sieht trotzdem richtig aus — ihm fehlt nur der eigene Pfeil. */
.wk-select { position: relative; display: inline-flex; flex: 1; min-width: 170px; }
.wk-select select {
  width: 100%;
  padding-right: 30px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  cursor: pointer;
}
.wk-select::after {
  content: ''; position: absolute; right: 11px; top: 50%;
  width: 9px; height: 9px; pointer-events: none;
  transform: translateY(-65%) rotate(45deg);
  border-right: 2px solid var(--braun); border-bottom: 2px solid var(--braun);
  opacity: .6; border-radius: 0 0 var(--radius) 0;
}

/* ── Datumsfeld ──────────────────────────────────────────────
   TT.MM.JJJJ, getippt, browserunabhängig. `<input type="date">` zeigt sein
   Datum in der Sprache, auf die der BROWSER eingestellt ist — „03.09." gegen
   „09.03." ist kein Schönheitsfehler, wenn eine Kündigungsfrist daran hängt.

   Das VERHALTEN steht zweimal, weil es zwei Anwendungen sind: in
   `wk-kern.js` („DATUM EINGEBEN") und in `DatumFeld.astro`. Das AUSSEHEN steht
   seit dem 12.09.2026 nur noch hier — vorher lag es im Portal in wk-app.css
   und auf der Hauptseite in vier `:global(input.wk-datum)`-Kopien. */
.wk-datum { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
input.wk-datum { width: 100%; max-width: 190px; }
input.wk-datum[data-zeit] { max-width: 230px; }
/* `falsch` heißt „unfertig oder unmöglich", nicht „leer": ein leeres Feld ist
   oft in Ordnung, und rot anzustreichen, was noch gar nicht getippt wurde,
   erzieht niemanden. Keine eigene Farbe — der Rand nimmt das Bordeaux. */
input.wk-datum.falsch, input.wk-datum.falsch:focus { border-color: var(--bx); }

/* ── Zeitfeld ──
   Seit dem 12.09.2026 ebenfalls ein getipptes Textfeld (HH:MM), aus demselben
   Grund wie das Datum: `<input type="time">` zeigt seine Uhrzeit in der
   Sprache des BROWSERS — „4:00 PM" statt „16:00". Bei einem Auftrittsbeginn
   stehen vier Uhr nachmittags und vier Uhr morgens im selben Feld.
   Das Verhalten steht in `wk-kern.js` („UHRZEIT EINGEBEN"), gebaut wird es
   mit `zeitFeld({…})`, gelesen wie immer mit `val()`. */
.wk-zeit { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
input.wk-zeit { width: 100%; max-width: 120px; }
input.wk-zeit.falsch, input.wk-zeit.falsch:focus { border-color: var(--bx); }