/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   FORMULARE — Feld, Suchfeld, Auswahl, Kästchen, Schalter.
     Feld:     <div class="feld"><label class="feld-etikett">Name</label>
                 <input class="eingabe"><div class="feld-hinweis">…</div>
                 <div class="feld-fehler">…</div></div>   (.feld.fehler zeigt den Fehler)
     Suche:    <input type="search" class="suche">        (suchfeld.js legt das Lösch-Kreuz dazu)
     Auswahl:  <span class="auswahl-huelle"><select class="auswahl">…</select></span>
     Kästchen: <label class="kaestchen"><input type="checkbox"><span>Text</span></label>
     Schalter: <label class="schalter"><input type="checkbox"><span class="bahn"></span></label>
   Eigene Klassen statt Element-Selektoren: `.feld input` träfe auch das
   Kästchen in einer Feld-Hülle. Fokus ist ein Akzent-Rahmen, kein Ring;
   Fehler und Grund sind Rollen; der Chevron ist eine CSS-Form, kein Bild. */

/* ══ FELD ══ Hülle · Etikett · Eingabe · Hinweis · Fehler
   13 px: Ein Feld zeigt, was jemand eingetippt hat — das ist Inhalt, keine
   Nebeninfo. Die Feldfläche ist `--eingabe`, nicht die erhabene Fläche: Ein
   Eingabefeld ist eine Vertiefung, 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 Dialogrand 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 Knopf: 34 px ist die Zeilenhöhe des Kits,
       und sie steht als min-height an jedem Formular-Bauteil. Mit mehr
       Polster wächst das Feld über seine Nachbarn hinaus. */
    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. 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, 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 Dinge: gesperrt = darf hier niemand
   ändern · nur-lesen = wird woanders gepflegt. Gesperrt bekommt einen eigenen
   Stil statt Deckkraft — mit Deckkraft zeichnet iOS solche Felder so blass,
   dass man den Wert nicht mehr liest. */
.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, denn `datetime-local` stand sonst als einziges Feld mittig.
   Dass das native Rad-Auswahlfeld am iPhone eine eigene Mindestbreite hat,
   bleibt bewusst unbehandelt: Der Hebel dagegen (`-webkit-appearance: none`)
   nähme dem Feld sein natives Aussehen. */
.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: getippt, nicht geklickt. Global, denn
   die Regel gilt für jedes Zahlenfeld, auch außerhalb einer 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: 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
   ist ein anderes Element und bleibt unangetastet. */
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 zugleich. Säße 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; }

/* ══ SUCHFELD ══ das Feld über oder neben einer Liste
   Dieselbe Höhe wie Auswahl und Knöpfe daneben (34): Ein Suchfeld, das als
   einziges 35 px misst, verzieht die Kopfleiste um einen Pixel. Die BREITE
   steht nicht hier — sie ist Layout und gehört dem Werkzeug. */

.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; }

.suche:focus { border-color: var(--akzent); }

/* Kein eingebautes Lösch-Kreuz des Browsers: Nur WebKit zeichnet es, in
   jeder Fassung anders, und für einen Finger zu klein. Das Kit zeichnet sein
   eigenes (unten). Global, weil die Regel für jedes Suchfeld gilt. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Am Finger 16 px: die Schwelle, unter der iOS beim Antippen zoomt. Anker
   ist der Finger, nicht die Fensterbreite — sonst zoomt das iPad trotzdem.
   Der Preis ist bekannt: Auf Touch ist das Feld 16 statt 13 px. */
@media screen and (pointer: coarse) {
    .suche { font-size: 16px; }
}

/* ══ DAS LÖSCH-KREUZ ══
   Ein Suchfeld mit Text braucht einen Weg zurück, der EIN Griff ist — am
   Tablet ist Markieren-und-Löschen keiner. Ein <input> kann kein ::after
   tragen, darum legt suchfeld.js beim Laden eine Hülle um jedes Suchfeld;
   im Markup steht weiterhin nur das Feld. Kein `width` an der Hülle: Ob sie
   die Breite füllt oder in einer Kopfleiste mitfließt, ist Layout. */
.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. */
.suche-huelle:has(> .suche[hidden]) { display: none; }

/* 100 % der Hülle ist der Vertrag der Komponente, nicht Layout: Das Kreuz
   sitzt an deren rechtem Rand; ein schmaleres Feld ließe es daneben
   schweben. Die 32 px rechts halten den Platz dafür frei. */
.suche-huelle > .suche {
    width: 100%;
    min-width: 0;
    padding-right: 32px;
}

/* Der Knopf ist 26 px groß, das gezeichnete Kreuz nur 9: Die Fläche ist für
   den Finger, das Zeichen fürs Auge. Er erscheint erst, wenn etwas im Feld
   steht — suchfeld.js setzt `hidden`. Keine Hover-Fläche: Das Kreuz allein
   wird beim Überfahren dunkler. */
.suche-loeschen {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    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 — kein Bild, keine Schrift. */
.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); }

/* Vorgabe: Die Suche liegt breit über der Liste, die sie durchsucht. Eine
   Kopfleiste, die das Feld schmal halten will, deckelt es selbst. */
.suche, .suche-huelle { width: 100%; }

/* ══ AUSWAHL ══ das Dropdown, geschlossen
   Der Pfeil ist eine gedrehte Ecke aus zwei Rahmenlinien: keine Datei, sein
   Ton ist eine Rolle und folgt der Farbwelt von allein. Ein <select> kann
   kein ::after tragen, deshalb hängt der Pfeil an einer Hülle. Die geöffnete
   Liste malt sonst das Betriebssystem — customselect.js ersetzt sie. */

/* Kein `width` an der Hülle: Ob sie die Breite füllt (im Formular) oder sich
   an ihren Inhalt schmiegt (in einer Kopfleiste), ist Layout. */
.auswahl-huelle {
    position: relative;
    display: block;
}
/* Versteckt jemand das Feld, muss die Hülle mit — sonst bleibt ein Pfeil
   ohne Feld in der Zeile stehen. */
.auswahl-huelle:has(> .auswahl[hidden]) { display: none; }

.auswahl-huelle::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    width: 5.5px;                    /* optisch etwa 8 px */
    height: 5.5px;
    border-right: 1.25px solid var(--text-gedaempft);
    border-bottom: 1.25px solid var(--text-gedaempft);
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.auswahl {
    /* 100 % der Hülle — der Vertrag der Komponente: Der Pfeil sitzt an
       deren rechtem Rand; die 32 px rechts halten ihm den Platz frei. */
    width: 100%;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    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) 32px var(--abstand-6) var(--abstand-10);
    min-height: 34px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease;
}

.auswahl:focus { border-color: var(--akzent); }

/* Gesperrt wie beim Eingabefeld, ohne Deckkraft: Eine gesperrte Auswahl
   sagt „hier ändert niemand etwas", nicht „hier steht vielleicht etwas". */
.auswahl:disabled {
    background: var(--linie-zart);
    color: var(--text-gedaempft);
    -webkit-text-fill-color: var(--text-gedaempft);
    opacity: 1;
    cursor: not-allowed;
}

/* ══ KÄSTCHEN ══ das Häkchen-Feld
   Nativ, nur in der Akzentfarbe getönt — schlanker als ein eigener Kasten,
   mit dem vertrauten Häkchen des Betriebssystems, ohne zusätzliches Markup.
   15 px: so groß wie die Schrift daneben. Im Dunkeln zeichnet kaestchen.css
   es selbst, weil der graue Rand des nativen Kästchens dort stört. */

.kaestchen {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-8);
    cursor: pointer;
    font-family: var(--schriftart-ui);
    font-size: var(--schrift-sm);
    color: var(--text);
    user-select: none;
}

/* Zwei Schreibweisen für zwei Lagen: Im Formular steht das Kästchen in
   seiner Beschriftung (<label class="kaestchen">), in einer Tabellenzelle
   steht es allein (<input class="kaestchen">). */
.kaestchen input,
input.kaestchen {
    accent-color: var(--akzent);
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.kaestchen:has(input:disabled) { cursor: not-allowed; }
.kaestchen input:disabled ~ * { opacity: 0.55; }

/* Die Kästchen-Liste: anklickbare Zeilen mit Innenabstand und Hover — die
   ganze Zeile ist das Ziel, nicht nur das Kästchen. */
.kaestchen-liste {
    display: flex;
    flex-direction: column;
}
.kaestchen-liste .kaestchen {
    padding: var(--abstand-6) var(--abstand-8);
    border-radius: var(--rundung-mittel);
    transition: background 0.12s ease;
}
.kaestchen-liste .kaestchen:hover {
    background: var(--flaeche-betont);
}

/* ══ SCHALTER ══ der Kippschalter (an/aus)
   Nur der Schalter selbst — die Zeile darum (Beschriftung links, Wert
   rechts) gehört dem Werkzeug. Eingeschaltet ist GRÜN, nicht Akzent: Ein
   Schalter meldet einen Zustand; Akzent ist die Farbe für „hier drückst du". */

.schalter {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    cursor: pointer;
}

/* Der native Eingang bleibt fokussierbar und wird nur unsichtbar — nicht
   `display: none`, das nähme ihn aus der Tastatur-Reihenfolge und aus dem
   Formular. */
.schalter input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.schalter .bahn {
    display: block;
    position: relative;
    width: 38px;
    height: 23px;
    border-radius: 999px;   /* eine Pille — voll rund, unabhängig vom Radius der Leiter */
    background: var(--linie);
    transition: background 0.15s;
}
.schalter .bahn::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--flaeche-erhaben);
    box-shadow: var(--schatten-knopf);
    transition: left 0.15s;
}

.schalter input:checked + .bahn { background: var(--ok); }
.schalter input:checked + .bahn::after { left: 18px; }   /* Bahn 38 minus Rand 3 minus Griff 17 */

/* Gesperrt: Der Zeiger sagt es, und der Schalter tritt zurück. */
.schalter:has(input:disabled) { cursor: not-allowed; }
.schalter input:disabled + .bahn { opacity: 0.55; }

/* Formularelemente erben Schrift und Farbe der Seite statt der Browser-
   Voreinstellung — sonst tippt man in Arial in einer Roboto-Oberfläche.
   Der Schlüssel des Passwort-Managers wird ausgeblendet: Er drängte sich
   ins Feld der Anmeldung. */
button, input, textarea, select {
    font-family: inherit;
    color: inherit;
}
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    display: none !important;
    pointer-events: none;
    height: 0;
    width: 0;
    margin: 0;
}