/* ============================================================
AUTO-GENERIERT von ui-kit/sync.py — NICHT hier editieren!
Quelle: ui-kit/buttons.css + tabs.css + forms.css + modal.css + account-menu.css + menu.css + kaestchen-dunkel.css + login-gate.css
Aussehen aendern? -> in der Quelle, dann "Sync".
============================================================ */
/* Button-Icon: Inline-SVG (currentColor, D-034: kein Icon-Asset) vor dem Text.
Suite-eigen — das Buero fuehrt keine SVGs im Knopf. */
.btn svg { width: 14px; height: 14px; flex-shrink: 0; margin-right: var(--abstand-4); }
/* ══ HAUS-BAUSTEIN: knopf ══ Quelle: Material/design/bausteine/knopf.css
HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
und zwar in ALLEN Dächern gleichzeitig. */
/* ══ KNOPF ══ eine Basis, sechs Aufsätze
Gemeinsam seit V-3 (05.08.2026). Entschieden an der knopfkarte.html.
BAUWEISE: Basis + Variante (Chris 05.08.2026) — `class="btn btn-primaer"`.
Das Büro hatte fünf eigenständige Klassen, die Suite hatte die Basis. Die
Basis gewinnt, weil sie WENIGER wird, wenn Varianten dazukommen: Ein neuer
Knopf sagt nur noch, was ihn unterscheidet. Beim Umbau war das zugleich der
risikoärmere Weg — die Büro-Namen blieben, es kam nur `btn` davor.
WERTE: gemischt, je Zeile am Bild entschieden. Grob — Polsterung, Gewicht
und die deckende Fläche kommen aus dem Büro (größeres Ziel für den Finger,
und ein durchsichtiger Knopf verschwindet auf getönten Flächen halb); die
Mindesthöhe, der Hover am Hauptknopf, die Rolle statt `#fff` beim
zerstörenden Knopf und das ruhigere Ausgegraut kommen aus der Suite.
`.btn-sekundaer` GIBT ES NICHT MEHR: Die Neben-Aktion IST die Basis. Wer
`btn` schreibt, bekommt sie.
Zwei Rollen mussten dafür in V-3a nachgezogen werden: das Büro bekam
`--akzent-aktiv` (es hatte gar keinen Hover-Wert — der Hauptknopf gab beim
Überfahren nichts zurück), die Suite `--schrift-kompakt` für den leisen
Knopf. */
.btn {
border: 1px solid var(--linie);
background: var(--flaeche-erhaben);
color: var(--text);
font-family: inherit;
font-size: var(--schrift-sm);
font-weight: var(--gewicht-mittel);
padding: var(--abstand-8) var(--abstand-14);
/* 34px ist die einzige nackte Zahl hier und mit Absicht keine Rolle: Sie
ist die Anatomie des Knopfs, kein geteilter Wert. Ohne sie sind Knöpfe
verschieden hoch, je nachdem wie groß ihre Schrift gerade ist. */
min-height: 34px;
border-radius: var(--rundung-mittel);
cursor: pointer;
white-space: nowrap;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--abstand-6);
/* Gezielt statt `all`: Ein `all` animiert auch, was niemand animiert haben
will — beim Umschalten der Farbwelt etwa würde jede Rahmenfarbe
hinterherlaufen. */
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
/* Die Fläche beim Überfahren nur dort, wo es einen Zeiger GIBT — am Handy
bliebe sie sonst nach dem Antippen kleben. */
@media (hover: hover) {
.btn:hover { background: var(--linie-zart); }
}
/* ── Haupt-Aktion ── der Knopf, den man sucht */
.btn-primaer {
background: var(--akzent);
border-color: var(--akzent);
color: var(--text-auf-akzent);
font-weight: var(--gewicht-halbfett);
/* KEIN eigenes Polster (Chris 15.08.2026, an Aufträge/Benutzerverwaltung:
„warum sind die blauen höher als die anderen?"): 10/16 statt 8/14 hob den
Hauptknopf über die 34-px-Höhe seiner Nachbarn — in ALLEN Dächern, weil
dieser Block überall hinsynct. Er hebt sich durch Farbe und Gewicht ab,
nicht durch Größe: die Höhe ist die Anatomie des EINEN Knopfs. */
}
@media (hover: hover) {
.btn-primaer:hover { background: var(--akzent-aktiv); border-color: var(--akzent-aktiv); }
}
/* ── Leise ── Tabellen-Aktionen und Nebenwege; trägt keine Fläche und keinen
Rahmen, bleibt aber ein volles Treffer-Ziel (34px aus der Basis). */
.btn-leise {
border: 0;
background: transparent;
color: var(--text-gedaempft);
font-size: var(--schrift-kompakt);
padding: var(--abstand-8) var(--abstand-10);
}
@media (hover: hover) {
.btn-leise:hover { background: var(--linie-zart); color: var(--text); }
}
/* Löschen als TEXT — die leise Form des Entfernens, dort wo eine rote Fläche
zu laut wäre. Der Hover hält die Farbe, damit sie nicht ins Neutrale kippt. */
.btn-loeschen { color: var(--fehler); }
@media (hover: hover) {
.btn-loeschen:hover { color: var(--fehler); }
}
/* ── Zerstörend ── rote FLÄCHE, für den Punkt ohne Wiederkehr.
Bis V-3 stand hier im Büro ein hartes `#fff` — der einzige Wert des
ganzen Knopfs, den der Baustein-Lint ablehnt, und zu Recht: In einer
geteilten Quelle muss auch die Schrift auf der Fläche eine Rolle sein. */
.btn-gefahr {
background: var(--fehler-flaeche);
border-color: var(--fehler-flaeche);
color: var(--text-auf-akzent);
font-weight: var(--gewicht-halbfett);
}
@media (hover: hover) {
.btn-gefahr:hover { background: var(--fehler-flaeche-aktiv); border-color: var(--fehler-flaeche-aktiv); }
}
/* ── Klein ── für Zeilen und enge Köpfe. Die 2px sind Feinjustage, nicht
Raster (Abstands-Modell: unter 4px kein Raster). */
.btn-klein {
min-height: 26px;
padding: 2px var(--abstand-8);
font-size: var(--schrift-xs);
}
/* ── Symbol ── Quadrat für ein einzelnes Zeichen, gleich hoch wie die Basis */
.btn-symbol {
width: 34px;
padding: var(--abstand-6);
}
/* Ausgegraut: neutrale Fläche statt Deckkraft auf der Akzentfarbe. Deckkraft
allein ergab auf Navy einen matschigen Graublau-Ton — auf der Knopfkarte
nebeneinander gut zu sehen. */
.btn:disabled,
.btn:disabled:hover {
background: var(--linie-zart);
border-color: var(--linie);
color: var(--text-leise);
cursor: not-allowed;
opacity: 0.55;
}
/* ══ HAUS-BAUSTEIN: knopf ENDE ══ */
/* ═══ SUITE-EIGENE KNOPF-REGELN — hinter dem Haus-Block, sonst frisst sie
der nächste Werkstatt-Sync (am 15.08.2026 zweimal passiert). ═══ */
/* AUF ERHABENEM GRUND rückt der Knopf eine Stufe hoch (Chris 15.08.2026,
Sollkurven-Leiste: „dunkler und schlechter lesbar"): Tab-Leiste und Topbar
liegen selbst auf --flaeche-erhaben — dieselbe Farbe wie der Knopf. Gleiche
Farbe auf gleicher Farbe: der Knopf hing nur noch an seiner Rahmenlinie.
Jetzt trägt er dort --karte („schwebt drauf") und hovert nach --karte-aktiv.
Farbige Varianten (primär, gefahr, leise) und der durchsichtige Instrumenten-
Knopf sind ausgenommen — sie haben ihren eigenen Grund. */
.tabs .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument),
.topbar .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument) {
background: var(--karte);
}
@media (hover: hover) {
.tabs .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument):hover,
.topbar .btn:not(.btn-primaer):not(.btn-gefahr):not(.btn-leise):not(.btn-instrument):hover {
background: var(--karte-aktiv);
}
}
/* INSTRUMENTEN-VARIANTE (Chris 15.08.2026, an der Sollkurven-Leiste): derselbe
Knopf in der Typografie der Cockpit-Familie — Versalien, 2xs, Laufweite,
gedämpft, durchsichtig. Genau die Sprache, die im Cockpit jede Beschriftung
spricht (TOOLS · FILTER · Kachelköpfe · BEREIT); der Standardknopf wirkte
dort „klobig, gedrungen" (Formular-Register). Ersetzt die frühere Kit-Pille
.tab-pill-btn UND den Dashboard-Sonderling .sidebar-action-btn: EIN Knopf,
eine weitere benannte Variante — wie primär/gefahr. KEINE eigene Höhe:
Charakter und Größe sind zwei Achsen — Standard 34 (bündig mit Feldern) vom
.btn, klein 26 per .btn-klein (Tab-Leiste, Chart-Kopf). `.active` = Schublade
offen / Zustand an. Suite-eigen (Cockpit); das Büro braucht sie nicht. */
.btn.btn-instrument {
padding-inline: 12px;
background: transparent;
border-color: var(--linie);
color: var(--text-gedaempft);
font-size: var(--schrift-2xs);
font-weight: var(--gewicht-mittel);
text-transform: uppercase;
letter-spacing: var(--laufweite);
}
@media (hover: hover) {
.btn.btn-instrument:hover { color: var(--text); border-color: var(--linie-stark); background: var(--karte); }
}
.btn.btn-instrument.active { color: var(--text); border-color: var(--linie-stark); background: var(--karte); }
.btn.btn-instrument:disabled, .btn.btn-instrument:disabled:hover {
opacity: 0.4; color: var(--text-leise); border-color: var(--linie); background: transparent;
}
.tabs {
flex-shrink: 0;
height: 48px; /* Suite-Topbar-Standard */
background: var(--flaeche-erhaben);
border-bottom: 1px solid var(--linie);
padding: 0 0 0 var(--abstand-24);
display: flex;
align-items: stretch;
gap: 2px;
}
.tab {
background: transparent;
border: none;
color: var(--text-gedaempft);
padding: 8px 18px 0;
cursor: pointer;
font-family: var(--schriftart-ui);
font-size: var(--schrift-sm);
font-weight: var(--gewicht-mittel);
letter-spacing: 0.02em;
border-bottom: 2px solid transparent;
margin-bottom: -1px; /* überlagert die 1px-Border der .tabs */
transition: color 0.12s, border-color 0.12s;
}
.tab:hover {
color: var(--text);
}
.tab.active {
color: var(--text);
border-bottom-color: var(--akzent);
}
.tab[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.tab[hidden] {
display: none;
}
/* Gruppe rechts in der Leiste — Werkzeug-Knöpfe und/oder Konto-Menü */
.tab-pill-group {
margin-left: auto;
display: flex;
align-items: center;
gap: var(--abstand-8);
padding-right: var(--abstand-12);
}
/* ══ HAUS-BAUSTEIN: feld ══ Quelle: Material/design/bausteine/feld.css
HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
und zwar in ALLEN Dächern gleichzeitig. */
/* ══ FELD ══ Hülle · Etikett · Eingabe · Hinweis · Fehler
Gemeinsam seit V-4b (05.08.2026). Entschieden an der feldkarte.html.
BAUWEISE: eigene Klassen (Chris 05.08.2026) — ``
statt `.feld input`. Element-Selektoren wären kürzer im HTML, treffen aber
auch, was man nicht meint: In den Büro-Tools stecken drei KÄSTCHEN in
Feld-Hüllen, die mit einer Element-Regel das Aussehen eines Textfelds
bekommen hätten. Wer eigene Klassen vergibt, kann das nicht.
DIE HAUPTENTSCHEIDUNG war die Schriftgröße: 13px statt der 12px, die das
Büro führte. Das stand seit dem 02.08.2026 als O-5 in formen.css offen
(„77 Fundstellen … eigener Schritt"). Ein Feld zeigt, was jemand
EINGETIPPT hat — das ist Inhalt, keine Nebeninfo.
DIE POLSTERUNG kommt vom Büro (10/12), nicht von der Suite (6/10): Chris
sah die Büro-Felder als „luftiger" an. Nachgemessen war der Unterschied
nicht die Höhe (36 gegen 34 px), sondern die Luft IM Feld — 10px über und
unter dem Text gegen 6. Und die haengt nicht an der Schriftgröße: 13px mit
10/12 ergibt 37px, also einen Pixel mehr Luft als das Büro vorher hatte.
Beides ging, man musste nicht wählen.
Die Mindesthöhe 34px kommt aus der Suite. Sie greift bei 37px nie — sie ist
ein Boden für den Tag, an dem jemand die Polsterung kleiner dreht.
WAS AUS WELCHEM DACH KOMMT, gemischt und je Zeile am Bild entschieden:
Büro → Polsterung, Etikett-Farbe, Größe von Hinweis und Fehler, der
LESBARE Ausgegraut-Zustand, Fehler-Markierung an der Hülle
Suite → Schriftgröße, Mindesthöhe, Nur-Lesen-Zustand, Feldfläche
`--eingabe` als Feldfläche ist die zweite sichtbare Änderung: In der hellen
Welt ist sie identisch mit der bisherigen (#ffffff), in der DUNKLEN dunkler
(#151D27 gegen #17212C). Ein Eingabefeld ist eine Vertiefung, keine
erhabene Fläche — es liegt IN der Karte, nicht darauf. */
.feld {
display: flex;
flex-direction: column;
gap: var(--abstand-6);
min-width: 0;
}
.feld.voll { grid-column: 1 / -1; }
.feld-etikett {
font-size: var(--schrift-xs);
text-transform: uppercase;
letter-spacing: var(--laufweite);
color: var(--text-gedaempft);
font-weight: var(--gewicht-mittel);
}
.eingabe {
width: 100%;
/* min-width schlägt width — ohne die 0 drückt die eingebaute Mindestbreite
von iOS-Datumsfeldern das Feld über den Modal-Rand hinaus. */
min-width: 0;
max-width: 100%;
background: var(--eingabe);
color: var(--text);
border: 1px solid var(--linie);
border-radius: var(--rundung-mittel);
font-family: inherit;
font-size: var(--schrift-sm);
/* Senkrecht 6 wie .auswahl und .btn. 34px ist die Zeilenhöhe des Hauses —
sie steht als min-height bei JEDEM Formular-Bauteil. Nur .eingabe hielt
sie nicht ein: mit 10 wurde sie von Natur aus 38px hoch (Datumsfelder
sogar 40) und überfuhr damit ihre eigene Vorgabe, während Auswahl und
Knopf daneben brav auf 34 standen. Mit 6 bleiben alle unter 34, und
min-height gibt die Höhe vor — das hält auch, wenn sich später die
Schriftgröße ändert.
Chris fand es am 10.08.2026 am Sollkurven-Konfigurator und korrigierte
es in der Suite; am 12.08.2026 nachgemessen, dass die Büro-Tools
dieselbe Abweichung tragen, und hier in die Quelle gezogen. */
padding: var(--abstand-6) var(--abstand-12);
min-height: 34px;
outline: none;
transition: border-color 0.15s ease;
}
.eingabe::placeholder { color: var(--text-leise); opacity: 1; }
/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller drei Dächer.
Der Ring wird ERSETZT, nicht gestrichen: Ohne `outline: none` malt Safari
seinen eigenen blauen Ring darüber, ohne den Rahmen sähe man mit der
Tastatur nicht mehr, wo man steht. */
.eingabe:focus { border-color: var(--akzent); }
textarea.eingabe { resize: vertical; min-height: 76px; line-height: 1.5; }
/* GESPERRT und NUR-LESEN sind zwei verschiedene Dinge:
gesperrt = darf hier niemand ändern · nur-lesen = wird woanders gepflegt.
Gesperrt bekommt einen EIGENEN Stil statt Deckkraft — ohne den zeichnet iOS
solche Felder so blass, dass man den Wert nicht mehr liest. Das war eine
teure Lektion im Büro-Dach und ist der Grund, warum hier kein `opacity`
steht. */
.eingabe:disabled {
background: var(--linie-zart);
color: var(--text-gedaempft);
-webkit-text-fill-color: var(--text-gedaempft);
opacity: 1;
cursor: default;
}
.eingabe[readonly] {
background: var(--flaeche);
color: var(--text-gedaempft);
}
/* iOS zentriert den Datumswert — linksbündig wie jedes andere Feld.
ALLE DREI Typen, nicht nur `date`: „Sicherheit" benutzt `datetime-local`,
und dort stand der Wert lange als einziges Feld mittig. Am Mac fällt das
nie auf, der Fehler ist WebKit-only.
NICHT WEITER BEHANDELT — und das ist eine Entscheidung, kein Versäumnis
(Chris, 12.08.2026): Auf dem iPhone ist `datetime-local` ein natives
Rad-Auswahlfeld mit einer eigenen Mindestbreite. Im Unfall-Formular von
Sicherheit ragt es dadurch als einziges Feld über den rechten Rand hinaus.
Ein Versuch mit `width: 100%` auf diesem Pseudo-Element half nicht und ist
deshalb wieder entfernt.
Warum hier nichts weiter passiert: Der Hebel, der greifen würde
(`-webkit-appearance: none`), nimmt dem Feld sein natives Aussehen — ein
Eingriff in eine Plattform-Eigenheit, den alle acht Werkzeuge mittragen
müssten. Chris' Entscheid: „wenn das ein Apple-spezifisches Ding ist, will
ich, dass der Code stabil bleibt und keine Workarounds."
NACHPRÜFBAR ist das übrigens nur am Gerät. Playwrights WebKit läuft auf
macOS und baut dieses Feld anders — dort messen Text- und Datumsfeld auf den
Pixel gleich, mit und ohne jede Korrektur (nachgestellt am 12.08.2026).
Wer das je angeht, braucht ein echtes iPhone, nicht eine Emulation.
Der saubere Weg wäre ohnehin kein CSS-Kniff, sondern zwei getrennte Felder
(Datum + Uhrzeit) statt `datetime-local`. */
.eingabe[type="date"]::-webkit-date-and-time-value,
.eingabe[type="datetime-local"]::-webkit-date-and-time-value,
.eingabe[type="time"]::-webkit-date-and-time-value { text-align: left; }
/* Zahl-Felder ohne Spinner-Pfeile — Hausregel (Chris): getippt, nicht
geklickt. Global und nicht auf `.eingabe` beschränkt, denn die Regel gilt
für jedes Zahlenfeld; eines in Rennsport liegt ausserhalb jeder Hülle. */
input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* KEIN Kontakt-Autofill-Symbol — zweite Hausregel (Chris 03.08., bekräftigt
05.08.: „das will ich in keinem Tool haben"). Safari ignoriert
autocomplete="off" bei Feldern, die es für Kontaktdaten hält, und setzt sein
Symbol trotzdem hinein; abschalten geht nur über das Pseudo-Element.
Der Passwort-Manager am Login bleibt unangetastet — anderes Element. */
input::-webkit-contacts-auto-fill-button {
visibility: hidden !important;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
.feld-hinweis { color: var(--text-leise); font-size: var(--schrift-xs); }
/* Der FEHLER hängt an der HÜLLE, nicht am Feld: So schaltet eine Klasse den
roten Rahmen UND den Fehlertext gleichzeitig. Sässe sie am Feld, müsste das
JavaScript zwei Stellen treffen und könnte eine vergessen. */
.feld-fehler { display: none; color: var(--fehler); font-size: var(--schrift-xs); }
.feld.fehler .eingabe { border-color: var(--fehler); }
.feld.fehler .feld-fehler { display: block; }
/* ══ HAUS-BAUSTEIN: feld ENDE ══ */
/* ══ HAUS-BAUSTEIN: suchfeld ══ Quelle: Material/design/bausteine/suchfeld.css
HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
und zwar in ALLEN Dächern gleichzeitig. */
/* ══ SUCHFELD ══ das Feld über oder neben einer Liste
Gemeinsam seit V-4c/1 (05.08.2026). Hieß in beiden Dächern `.search`.
DIE BREITE STEHT ABSICHTLICH NICHT HIER. Sie ist der einzige echte
Unterschied zwischen den Dächern, und sie ist Layout, kein Aussehen: Die
Suite legt das Feld breit über die Liste (`width: 100%`), die Büro-Tools
stellen es schmal in die Kopfzeile (`flex: 1 1 220px`). Beides steht so im
Spiegel als BEANTWORTETE Frage — Suchen ist dort die Hauptbewegung, hier
Nebensache. Hausregel seit V-2: Komponente = Optik zentral, Größe lokal.
DIE FELDFLÄCHE ist `--eingabe`, nicht `--flaeche-erhaben`, das das Büro
führte. Gleiche Begründung wie bei den Feldern in V-4b: Ein Suchfeld ist
eine Vertiefung, keine erhabene Fläche. In der hellen Welt ist das
identisch (#ffffff), in der dunklen einen Hauch tiefer.
HÖHE UND POLSTERUNG kommen aus der Suite (6/12 auf Mindesthöhe 34) und
nicht aus dem Büro (8/12, ohne Boden). Grund ist die Zeile, in der das Feld
steht: Auswahl und Knöpfe daneben sind 34 px hoch. Ein Suchfeld, das als
einziges 35 px misst, verzieht die Kopfleiste um einen Pixel.
Es trägt NICHT die 13 px der Eingabefelder aus V-4b — hier steht keine
Eingabe, die man später wieder liest, sondern ein Filter. */
.suche {
background: var(--eingabe);
color: var(--text);
border: 1px solid var(--linie);
border-radius: var(--rundung-mittel);
font-family: inherit;
font-size: var(--schrift-sm);
padding: var(--abstand-6) var(--abstand-12);
min-height: 34px;
outline: none;
transition: border-color 0.15s ease;
}
.suche::placeholder { color: var(--text-leise); opacity: 1; }
/* Fokus = Akzent-RAHMEN, kein Ring — Hausstil aller Dächer (siehe feld.css). */
.suche:focus { border-color: var(--akzent); }
/* KEIN eingebautes Lösch-Kreuz. Dieselbe Hausregel wie Spinner-Pfeile und
Kontakt-Autofill (Chris): Ein Feld zeigt, was wir hineinbauen, nicht was der
Browser dazustellt. Bisher lag die Regel nur in der Suite — Vertriebs
Suchfeld trug das Kreuz. Nur WebKit zeichnet es überhaupt.
Global und nicht auf `.suche` beschränkt, aus demselben Grund wie die
Spinner-Regel in feld.css: Sie gilt für JEDES Suchfeld. Rennsport sucht
über `.sec-filter` in der Abschnitts-Kopfzeile — ein anderes Bauteil, aber
dieselbe Hausregel. */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/* Touch: 16 px verhindern den iOS-Auto-Zoom beim Antippen. Anker ist der
FINGER, nicht die Fensterbreite — sonst zoomt das iPad trotzdem (Vertrieb
V-28). Die Regel lag bisher nur tool-lokal im Vertrieb; in der Suite zoomte
die Suche auf dem iPad. Am Mac sieht man das nie.
ENTSCHIEDEN am 05.08.2026 (Chris), nachdem wir die Alternative durchgesprochen
haben: Es BLEIBT bei der Feld-Regel. Der Zoom ist Safaris Automatik, nicht
unsere — ohne Gegenregel passiert er. Man könnte ihn auch mit einer Zeile in
der Kopfzeile abstellen (`maximum-scale=1` im viewport); das wäre kürzer,
hielte die 13 px auch auf Touch und machte das Lint-Ventil überflüssig.
Dagegen sprach: Die Feld-Regel ist bewährt und beweisbar, die Kopfzeilen-Zeile
ruht auf Browser-Verhalten, das hier niemand nachmessen kann, und auf Android
sperrte sie zusätzlich das Aufziehen mit zwei Fingern. SICHER SCHLÄGT SCHLANK.
Der Preis ist bekannt und angenommen: Eingabefelder sind auf Touch 16 px statt
der 13 px aus V-4b. Wer das später ändern will, ändert eine Entscheidung —
nicht ein Versehen. */
@media screen and (pointer: coarse) {
.suche { font-size: 16px; } /* haus-ausnahme: 16px ist die Schwelle, unter der iOS beim Antippen zoomt — eine Grenze des Betriebssystems, keine Rolle, die ein Dach je anders auflösen würde */
}
/* ══ DAS LÖSCH-KREUZ ══ (20.08.2026, Chris: „brauchen wir überall")
Ein Suchfeld mit Text braucht einen Weg zurück, der EIN Griff ist — auf dem
Tablet ist Markieren-und-Löschen kein Weg. Das native Kreuz kam dafür nicht
in Frage (siehe Regel darüber): Nur WebKit zeichnet es, in jeder Fassung
anders, und es ist für einen Finger zu klein. Also zeichnen wir es selbst —
einmal hier, sichtbar in jedem Werkzeug.
DER PREIS ist wie bei der Auswahl eine Hülle je Feld: Ein kann kein
::after tragen. Die Hülle zieht `suchfeld.js` beim Laden von allein ein; im
Markup der Werkzeuge steht weiterhin nur das Feld.
KEIN `width` an der Hülle — dieselbe Regel wie bei `.auswahl-huelle`: Ob sie
die ganze Breite füllt oder in einer Kopfleiste mitfließt, ist Layout und
gehört dem Dach. Jedes Dach gibt der Hülle dort die Rolle, die vorher das
Feld hatte (Suite: 100 %, Büro: flex). */
.suche-huelle {
position: relative;
display: block;
min-width: 0; /* darf in einer Flex-Zeile schrumpfen */
}
/* Versteckt jemand das FELD, geht die Hülle mit — sonst bliebe ein Kreuz ohne
Feld stehen. Die Lehre stammt von der Auswahl-Hülle (Vertriebs-Cockpit). */
.suche-huelle:has(> .suche[hidden]) { display: none; }
/* 100 % der HÜLLE — Vertrag der Komponente, nicht Layout: Das Kreuz sitzt an
deren rechtem Rand, ein schmaleres Feld ließe es daneben schweben. */
.suche-huelle > .suche {
width: 100%;
min-width: 0;
padding-right: 32px; /* haus-ausnahme: die Freihaltung für das Kreuz (4 rechts + 26 Knopf + Luft) — Geometrie dieses Bauteils, dieselbe Rechnung wie die 32px der Auswahl, keine Abstands-Entscheidung für die Leiter */
}
/* Der Knopf ist 26 px groß, das gezeichnete Kreuz nur 9: Die Fläche ist für
den Finger, das Zeichen fürs Auge (Touch-Regel des Hauses). Er erscheint
erst, wenn etwas im Feld steht — `suchfeld.js` setzt `hidden`. */
.suche-loeschen {
position: absolute;
right: 4px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
/* KEINE Rundung, keine Hover-Fläche: Der Knopf hat keinen Grund, auf dem
sie sichtbar wäre — das Kreuz allein wird beim Überfahren dunkler.
(Und `--rundung-klein` gibt es nur in der Dokument-Welt; im Rennsport
fiele die Zeile still auf den Browser-Wert zurück — der Token-Wächter
von Pitwall hat sie am 20.08.2026 genau dafür gemeldet.) */
color: var(--text-gedaempft);
display: grid;
place-items: center;
}
.suche-loeschen:hover { color: var(--text); }
.suche-loeschen[hidden] { display: none; }
/* Das Kreuz: zwei Striche, gedreht — dieselbe Bauweise wie der Chevron der
Auswahl (kein Bild, keine Schrift, kein zweites Adressenpaar je Dach). */
.suche-loeschen::before,
.suche-loeschen::after {
content: "";
position: absolute;
width: 11px;
height: 1.5px;
background: currentColor;
border-radius: 1px;
}
.suche-loeschen::before { transform: rotate(45deg); }
.suche-loeschen::after { transform: rotate(-45deg); }
/* ══ HAUS-BAUSTEIN: suchfeld ENDE ══ */
/* Die BREITE ist Dach-Sache, nicht Haus-Sache (siehe Kopf des Bausteins):
Die Suite legt die Suche breit über die Liste. Seit dem Lösch-Kreuz
(20.08.2026) gilt sie AUCH für die Hülle: Sie ist es, die seither in der
Zeile steht — das Feld füllt nur noch sie aus. */
.suche, .suche-huelle { width: 100%; }
/* ══ HAUS-BAUSTEIN: auswahl ══ Quelle: Material/design/bausteine/auswahl.css
HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
und zwar in ALLEN Dächern gleichzeitig. */
/* ══ AUSWAHL ══ das Dropdown, geschlossen
Gemeinsam seit V-4c/2 (05.08.2026). Entschieden an der wahlkarte.html.
DAS HAUS HATTE DREI PFEILE, und das war der ganze Unterschied — der Kasten
war überall fast derselbe:
nativ 18 Felder im Büro. Das Betriebssystem malt ihn. Sieht auf Mac,
Windows und iPhone verschieden aus und lässt sich NICHT
einfärben — in der dunklen Welt blieb er, was macOS für richtig
hält.
SVG-Bild 6 Felder im Vertrieb. Ein gezeichneter Pfeil als Hintergrund.
Sein Ton steckt IN der Bild-Adresse und ist deshalb keine
Rolle; er musste je Farbwelt einzeln gepflegt werden. Dieselbe
Regel stand zusätzlich in ALLEN VIER Suite-Werkzeugen und traf
dort kein einziges sichtbares Feld — vier tote Regeln.
Chevron 9 Felder in der Suite. GEWÄHLT (Chris 05.08.2026).
WARUM DER CHEVRON GEWINNT: Er ist keine Datei, sondern eine gedrehte Ecke
aus zwei Rahmenlinien. Sein Ton ist eine ROLLE (--text-gedaempft) und folgt
der Farbwelt von allein. Beim nächsten Farbwechsel ist hier nichts zu tun —
bei der Bild-Variante wären es zwei Adressen je Dach gewesen. Die Rolle
--menue-pfeil ist damit ersatzlos entfallen.
DER PREIS ist eine Hülle je Feld: Der Pfeil hängt an ihr, nicht am
Auswahlfeld selbst — ein