/*
 * MMD Forms - Stil-Varianten (C9, ARCHITECTURE.md Kap. 11.2)
 *
 * Warum es diese Datei zusaetzlich zur LESS-Komponente gibt:
 * assets/less/mmd-forms.less landet erst in der Theme-CSS, wenn das Theme
 * neu gebaut wird - auf einer bestehenden Installation also nicht sofort.
 * (DASS YOOtheme sie kompiliert, ist belegt: LoadStylerImports.php:64-71
 * haengt jede Komponente aus theme.styles.components als @import an das
 * Theme-LESS. B-40 ist damit geschlossen; der Grund hier war nie der
 * Zweifel daran, sondern der Zeitpunkt.) Was verlaesslich da sein muss,
 * gehoert deshalb hierher; registriert wird die Datei ueber denselben
 * WebAssetManager wie mmd-forms.js seit C2.
 *
 * Aufgabenteilung:
 *   diese Datei  - die Struktur einer Variante. Was ein Karten-Radio zu
 *                  einem Karten-Radio macht: Layout, Zustaende, Fokus.
 *   die LESS-Datei - Farben, Radien, Abstaende als Styler-Variablen.
 *                  Faellt sie aus, sieht es nach Default aus, ist aber
 *                  nicht kaputt.
 *
 * Drei Regeln gelten fuer JEDE Variante hier drin. Sie sind der Grund,
 * warum diese Stile von Hand entstehen statt aus einer Sammlung kopiert zu
 * werden (SPIKE-FINDINGS.md Abschnitt 25):
 *
 *   1. Das native <input> bleibt im DOM und fokussierbar. Es wird optisch
 *      ersetzt, nie durch display:none oder visibility:hidden entfernt -
 *      beides nimmt es aus der Tabreihenfolge und aus dem
 *      Accessibility-Baum.
 *   2. Fokus bleibt sichtbar. Jede Variante zeichnet einen eigenen
 *      :focus-visible-Ring auf das sichtbare Ersatzelement, weil der
 *      Browser seinen Ring auf das versteckte Input legt.
 *   3. Bewegung ist abschaltbar. Alle Uebergaenge stehen unter
 *      prefers-reduced-motion: reduce.
 *
 * Keine neuen Farben: alles arbeitet mit currentColor und den
 * UIkit-Variablen des Themes (Kap. 11).
 */


/* ==========================================================================
   Mehrspaltiges Layout: Zeilenabstand (C10.2)
   ==========================================================================

   Der gemeldete Fehler: in der ERSTEN Zeile eines mehrspaltigen Formulars
   sass das linke Feld 20px hoeher als das rechte, ab der zweiten Zeile
   standen alle buendig. Zwei UIkit-Regeln zusammen erklaeren das:

     uikit.css:4844   .uk-grid > *    { margin: 0; }
     uikit.css:9278   * + .uk-margin  { margin-top: 20px !important; }

   UIkit raeumt die Aussenabstaende seiner Grid-Kinder selbst ab - aber das
   !important der zweiten Regel haelt dagegen. Und ihr Selektor ist
   `* + .uk-margin`: das ERSTE Kind hat kein vorangehendes Geschwister und
   bekommt deshalb kein margin-top, jedes weitere schon. Untereinander ist
   das genau richtig (Abstand zwischen den Feldern), nebeneinander ist es
   falsch - das erste Feld einer Zeile rutscht nach oben.

   UIkit loest das mit einer eigenen Klasse fuer umgebrochene Zeilen
   (.uk-grid-margin, uikit.css:4868), die aber die JS-Grid-Komponente
   vergibt - und die aktivieren wir bewusst nicht (R-15: keine harte
   window.UIkit-Abhaengigkeit fuer reines Zeilenlayout).

   Also der CSS-eigene Weg: den Zeilenabstand vom Kind an den Container
   verlegen. `row-gap` an einem umbrechenden Flex-Container setzt Abstand
   ZWISCHEN die Zeilen und keinen vor der ersten - genau das, was
   .uk-grid-margin per JS nachbaut.

   Zwei Entscheidungen, die bewusst so und nicht anders sind:

   1. `!important` gegen `!important`. Sonst nicht zu schlagen: eine Regel
      ohne !important verliert gegen uikit.css:9278 unabhaengig von der
      Spezifitaet. Weil beide es tragen, entscheidet wieder die
      Spezifitaet - `.mmd-forms-grid > .el-field` (0,2,0) schlaegt
      `* + .uk-margin` (0,1,0), ohne dass die Ladereihenfolge mitspielt
      (die Lehre aus B-60). Der Ausnahmegrund ist eng: es geht nicht darum,
      Anpassungen des Seitenbetreibers zu ueberstimmen, sondern eine
      Abstandsregel zu neutralisieren, die fuer den Blockfluss gedacht ist.
   2. `uk-margin` bleibt am Feld-Wrapper stehen. Faellt diese Datei aus, ist
      das Ergebnis der heutige Zustand - Felder mit Abstand, erste Zeile
      leicht versetzt. Ohne uk-margin klebten sie dann aneinander. Fail-safe
      heisst: der Ausfall sieht nach Standard aus, nicht nach kaputt.
   3. 20px fest, nicht UIkits 30px und nicht an "Abstand" (grid_gutter)
      gekoppelt. Der Auftrag ist, den Versatz zu beseitigen - nicht, das
      Layout bestehender Formulare zu veraendern. 20px ist genau der
      Abstand, den uk-margin heute liefert.

   C12: Der Wert ist seitdem ueber "Zeilenabstand" waehlbar (eigene
   Einstellung, bewusst weiterhin getrennt von "Feldabstand"/grid_gutter -
   das ist die Luecke ZWISCHEN Spalten, das hier die Luecke ZWISCHEN
   Zeilen). Ohne Wahl bleibt es bei denselben 20px wie eben begruendet -
   var() mit Rueckfall, kein neues Verhalten fuer ein unangetastetes
   Formular.
   ========================================================================== */

.mmd-forms-grid {
    row-gap: var(--mmd-forms-spacing, 20px);
}

.mmd-forms-grid > .el-field {
    margin-top: 0 !important;
    /* Ohne dies addierte sich uk-margins margin-bottom auf den row-gap und
       der Zeilenabstand waere doppelt so gross wie heute. Kein !important
       noetig: margin-bottom traegt in uikit.css keins. */
    margin-bottom: 0;
}

/* ==========================================================================
   Auswahlfelder: gemeinsame Grundlage
   ========================================================================== */

/*
 * Eine Liste von Optionen, in drei Auspraegungen: Karten (Kacheln
 * nebeneinander), Rahmen (Zeilen untereinander) und Schalter. Die ersten
 * beiden teilen sich Struktur und Zustandsregeln und unterscheiden sich nur
 * in Richtung und Ausrichtung - deshalb dieselben Klassen mit einem
 * Modifikator an der Liste.
 */

/*
 * Eigenes box-sizing, statt sich auf den Reset des Themes zu verlassen.
 * UIkit setzt border-box global - dieses CSS soll aber auch ohne fremden
 * Reset stimmen. Mit content-box zaehlt `height: 100%` nur den Inhalt,
 * Polsterung und Rahmen kommen obendrauf, und der Kartenkoerper ragt 34
 * Pixel aus seiner Karte heraus. Im Browser-Test aufgefallen; auf einer
 * UIkit-Seite waere es nie sichtbar geworden, und genau deshalb waere es
 * beim ersten fremden Theme aufgeschlagen.
 */
.mmd-forms-choices,
.mmd-forms-choice-item,
.mmd-forms-choice-body,
.mmd-forms-choice-media,
.mmd-forms-switch,
.mmd-forms-switch-control,
.mmd-forms-switch-track {
    box-sizing: border-box;
}

.mmd-forms-choices {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
}

.mmd-forms-choices-cards {
    flex-wrap: wrap;
}

.mmd-forms-choices-boxed,
.mmd-forms-choices-switch {
    flex-direction: column;
}

.mmd-forms-choice-item {
    position: relative;
    display: block;
}

.mmd-forms-choices-cards > .mmd-forms-choice-item {
    flex: 1 1 140px;
    min-width: 120px;
}

/*
 * Das Input liegt deckungsgleich ueber seiner Karte, aber unsichtbar.
 * Bewusst opacity statt display:none - so bleibt es klickbar, fokussierbar
 * und fuer Screenreader vorhanden.
 *
 * z-index ist hier nicht Kosmetik. Ohne ihn liegt der sichtbare Koerper
 * ueber dem Input und faengt die Zeiger-Ereignisse ab. Ueber das
 * umschliessende <label> waehlt ein Klick zwar trotzdem aus - aber das
 * Input verliert seine eigene Klickflaeche, und damit den cursor:pointer
 * und ein verlaessliches Ziel fuer Touch. Im Browser-Test gemessen, nicht
 * ueberlegt (tests/browser/cards.mjs).
 */
.mmd-forms-choice-item > input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mmd-forms-choice-item > input:disabled {
    cursor: default;
}

.mmd-forms-choice-body {
    display: flex;
    height: 100%;
    border: 1px solid currentColor;
    /*
     * C12: dieselbe Variable wie am Eingabefeld (FieldRadius) - EIN
     * Eckenradius fuers ganze Formular statt zwei Einstellungen, die
     * ohnehin fast immer denselben Wert bekaemen. Ohne Wahl bleibt es bei
     * den bisherigen 8px.
     */
    border-radius: var(--mmd-forms-radius, 8px);
    opacity: 0.6;
    transition: opacity 120ms ease, box-shadow 120ms ease;
}

.mmd-forms-choices-cards .mmd-forms-choice-body {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    text-align: center;
}

.mmd-forms-choices-boxed .mmd-forms-choice-body {
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

/*
 * Ausgewaehlt und fokussiert sind zwei verschiedene Zustaende und muessen
 * unterschiedlich aussehen - sonst ist mit der Tastatur nicht erkennbar, wo
 * man steht, wenn die Auswahl woanders liegt.
 */
.mmd-forms-choice-item > input:checked + .mmd-forms-choice-body {
    opacity: 1;
    box-shadow: inset 0 0 0 2px currentColor;
}

.mmd-forms-choice-item > input:focus-visible + .mmd-forms-choice-body {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mmd-forms-choice-item > input:disabled + .mmd-forms-choice-body {
    opacity: 0.3;
}

.mmd-forms-choice-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.mmd-forms-choice-media img {
    max-width: 100%;
    height: auto;
}

.mmd-forms-choice-label {
    line-height: 1.2;
}


/* ==========================================================================
   Schalter
   ========================================================================== */

/*
 * Anders gebaut als Karte und Rahmen, und das mit Absicht: Das Input liegt
 * NICHT ueber der ganzen Zeile, sondern nur ueber dem Schalter selbst. So
 * bleibt der Text daneben normaler Text - waere er von einem unsichtbaren
 * Input ueberdeckt, liesse sich ein Link darin nicht mehr anklicken. Bei
 * einer Einwilligung mit Link zur Datenschutzerklaerung waere das ein
 * echter Fehler.
 */

.mmd-forms-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mmd-forms-switch-control {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
}

.mmd-forms-switch-control > input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.mmd-forms-switch-track {
    position: absolute;
    inset: 0;
    border: 1px solid currentColor;
    border-radius: 11px;
    opacity: 0.6;
    transition: opacity 120ms ease;
}

.mmd-forms-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: currentColor;
    transition: transform 120ms ease;
}

.mmd-forms-switch-control > input:checked + .mmd-forms-switch-track {
    opacity: 1;
}

.mmd-forms-switch-control > input:checked + .mmd-forms-switch-track::after {
    transform: translateX(18px);
}

.mmd-forms-switch-control > input:focus-visible + .mmd-forms-switch-track {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mmd-forms-switch-control > input:disabled + .mmd-forms-switch-track {
    opacity: 0.3;
}


/* ==========================================================================
   Eingabefeld-Stile
   ========================================================================== */

/*
 * Zwei Varianten zum UIkit-Standard. Beide arbeiten mit currentColor und
 * ohne eigene Farben (Kap. 11) - der Hintergrund der gefuellten Variante
 * entsteht aus der Textfarbe mit niedriger Deckkraft, passt sich damit
 * hellen wie dunklen Themes an und braucht keinen festen Wert.
 *
 * Der Fokusring bleibt in beiden Varianten der des Themes. Anders als bei
 * den Auswahlfeldern wird hier nichts versteckt: das Eingabefeld ist
 * sichtbar, nur anders umrandet.
 */

.mmd-forms-field-underlined .uk-input,
.mmd-forms-field-underlined .uk-select,
.mmd-forms-field-underlined .uk-textarea,
.mmd-forms-field-filled .uk-input,
.mmd-forms-field-filled .uk-select,
.mmd-forms-field-filled .uk-textarea {
    /*
     * border-style MUSS mitgesetzt werden. UIkit selbst setzt
     * `border: 0 none` auf .uk-input/.uk-select/.uk-textarea (uikit
     * 3.25.21, dist/css/uikit-core.css) - den sichtbaren Rahmen zeichnet
     * erst die Theme-CSS. Ein Theme, das dafuer keinen `border`, sondern
     * z. B. nur einen Hintergrund benutzt, laesst `border-style: none`
     * stehen; eine blosse `border-width` zeichnet dann nichts (im Browser
     * gemessen, SPIKE-FINDINGS.md B-55). Deshalb hier Stil UND Breite.
     */
    border-style: solid;
    border-width: 0 0 1px 0;
    /*
     * Manche Themes zeichnen den Feldrahmen als box-shadow statt als
     * border. Beide Varianten ersetzen den Rahmen bewusst - ein
     * stehengebliebener Schatten saehe aus wie "Standard plus Strich".
     */
    box-shadow: none;
}

.mmd-forms-field-underlined .uk-input,
.mmd-forms-field-underlined .uk-select,
.mmd-forms-field-underlined .uk-textarea {
    /*
     * C12: die oberen Ecken lesen denselben Eckenradius wie das Standard-
     * Feld und die Auswahl-Karten (FieldRadius) - ohne Wahl bleibt es beim
     * bisherigen 0 (rundum eckig). Unten immer 0: das ist die Kante der
     * Linie, die bleibt in jedem Fall gerade.
     */
    border-top-left-radius: var(--mmd-forms-radius, 0);
    border-top-right-radius: var(--mmd-forms-radius, 0);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    padding-left: 0;
    padding-right: 0;
    background: transparent;
}

/*
 * Die Fuellfarbe ist eine Variable, damit der Formularautor sie im Builder
 * waehlen kann (mmd_form, "Fuellfarbe"). Ohne Wahl bleibt die Ableitung aus
 * der Textfarbe: sie passt sich hellen wie dunklen Themes an. Auf einem
 * Theme, das Eingabefelder ohnehin schon flaechig fuellt, ist der
 * Unterschied allerdings klein - genau dafuer gibt es die Wahl.
 */
.mmd-forms-field-filled .uk-input,
.mmd-forms-field-filled .uk-select,
.mmd-forms-field-filled .uk-textarea {
    /* C12: derselbe Eckenradius wie bei Unterstrichen/Standard/Auswahl-
       Karten, ohne Wahl bleibt es bei den bisherigen 4px. */
    border-top-left-radius: var(--mmd-forms-radius, 4px);
    border-top-right-radius: var(--mmd-forms-radius, 4px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--mmd-forms-fill, rgb(from currentColor r g b / 6%));
}

/*
 * Rueckfall fuer Browser ohne relative Farbangaben: dann bleibt der
 * Hintergrund schlicht durchsichtig, die Variante wirkt wie
 * "unterstrichen". Kein Fehlerbild, nur weniger Effekt.
 */
@supports not (background: rgb(from currentColor r g b / 6%)) {
    .mmd-forms-field-filled .uk-input,
    .mmd-forms-field-filled .uk-select,
    .mmd-forms-field-filled .uk-textarea {
        background: var(--mmd-forms-fill, transparent);
    }
}

/*
 * C12: Eckenradius UND Rahmenbreite am Standard-Feldstil (FieldRadius/
 * FieldBorder). Anders als bei Unterstrichen/Gefuellt oben gibt es hier
 * keine vorhandene Klasse, an deren Regel sich eine Variable mit Rueckfall
 * anhaengen liesse - Standard bedeutet bislang "keine eigene Klasse,
 * volle Kontrolle beim Theme". Die beiden Klassen unten entstehen deshalb
 * NUR, wenn der Formularautor tatsaechlich etwas gewaehlt hat (Template-
 * Logik in mmd_form_field/templates/template.php) - ein Formular, das
 * beides nie anfasst, bekommt keine der beiden Regeln zu Gesicht, und das
 * Theme behaelt seinen Radius/Rahmen unveraendert.
 */
.mmd-forms-radius .uk-input,
.mmd-forms-radius .uk-select,
.mmd-forms-radius .uk-textarea {
    border-radius: var(--mmd-forms-radius, 0);
}

.mmd-forms-border .uk-input,
.mmd-forms-border .uk-select,
.mmd-forms-border .uk-textarea {
    /*
     * Dieselbe B-55-Lehre wie oben bei Unterstrichen/Gefuellt: Stil UND
     * Breite muessen zusammen gesetzt werden, sonst zeichnet ein Theme
     * ohne eigenen border-style gar nichts. box-shadow: none raeumt einen
     * schattengezeichneten Theme-Rahmen ab - sonst saehen manche Themes
     * "Theme-Schatten plus eigener Rahmen" statt nur des eigenen Rahmens.
     * Keine eigene border-color: das Feld bleibt currentColor (CSS-Vorgabe
     * ohne explizite Farbe), also keine neue Farbe (Kap. 11).
     */
    border-style: solid;
    border-width: var(--mmd-forms-border-width, 1px);
    box-shadow: none;
}


/* ==========================================================================
   Feld-Icons
   ========================================================================== */

/*
 * UIkits eigenes Muster [DOK, getuikit.com/docs/form, "Form and icons"]:
 * uk-inline als Huelle, uk-form-icon zuerst im Markup, uk-form-icon-flip
 * fuer rechts. Das Icon selbst rendert UIkit-JavaScript - seit C9 eine
 * zugelassene Voraussetzung (Kap. 11). Fehlt es, bleibt ein leeres Span
 * stehen; der Platz dafuer entsteht durch UIkits eigene Regel, nicht durch
 * unsere.
 *
 * Hier steht nur, was UIkit nicht mitbringt: dass die Huelle die volle
 * Breite behaelt. Ohne das schrumpft ein Feld in einem Grid auf seine
 * Inhaltsbreite.
 */
.mmd-forms-field-icon.uk-inline {
    display: block;
}


/* ==========================================================================
   Bewegung
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .mmd-forms-choice-body,
    .mmd-forms-switch-track,
    .mmd-forms-switch-track::after {
        transition: none;
    }
}


/* ==========================================================================
   Farbmodus (C10.1)
   ==========================================================================

   Das Problem, im Live-Test gefunden: steht ein Formular in einer hellen
   Karte, die in einer Section mit "Textfarbe: Hell" liegt, faerbt UIkits
   `uk-light` alles darin weiss - Beschriftungen auf weissem Grund sind
   unsichtbar, der Absenden-Button verliert seine Flaeche.

   UIkit bietet dagegen KEINEN Ausweg. Drei Wege geprueft:

     * `uk-dark` - existiert nur, wenn das Theme mit
       `@inverse-global-color-mode: dark` gebaut wurde [CORE, uikit
       3.25.22, src/less/components/inverse.less:13,36,42]. In einem
       Standard-Theme traegt es keine einzige Regel (live bestaetigt).
     * `uk-preserve-color` - kommt in 1009 Selektoren vor, aber in KEINEM
       an einer `.uk-light`-Regel; und dort, wo es vorkommt, haengt das
       `:not()` an der Section, nicht am Nachfahren. Es kann eine ganze
       Section ausnehmen, keinen Teilbaum (im Browser gemessen).
     * Ein Rueckfall auf geerbte Farben - geht nicht: geerbt wird im
       Inneren von `uk-light` gerade die falsche Farbe.

   Also ein eigener Ruecksetzer. Die Werte kommen NICHT aus dieser Datei,
   sondern aus Variablen (Kap. 11.2: "CSS = Struktur, LESS = Farben"): die
   LESS-Komponente fuellt sie beim Theme-Neubau aus den Styler-Variablen,
   der Formularautor kann sie im Builder ueberschreiben. Die Rueckfallwerte
   hier sind UIkits eigene Vorgaben ohne Inversion - im Browser abgelesen
   (Label #333, Text #666, Rand #e5e5e5, Flaeche #fff, gedaempft #999).

   Die Gegenrichtung braucht nichts davon: ein Formular auf dunklem Grund
   bekommt schlicht UIkits `uk-light`, das ja vorhanden ist. Deshalb gibt
   es hier nur eine Klasse und nicht zwei.
 */

/*
 * Reihenfolge: Ueberschriften, dann Fliesstext, dann Steuerelemente,
 * dann alles, was eine eigene Farbe traegt (Links, Icons, Buttons).
 * Formulartitel (.el-title) und Zwischenueberschrift (.el-heading) sind
 * unser eigenes Markup, `legend` gehoert zu Radio-/Checkbox-Gruppen und
 * zum Schritt-Fieldset.
 */
/*
 * Die Klasse steht in JEDEM Selektor doppelt - das ist kein Versehen.
 *
 * `.uk-light .uk-form-label` und `.mmd-forms-scheme-dark .uk-form-label`
 * haben dieselbe Spezifitaet (0,2,0). Bei Gleichstand entscheidet die
 * Quellreihenfolge, und unsere Datei wird ueber den WebAssetManager
 * eingebunden, ohne Zusage darueber, ob sie vor oder nach der Theme-CSS
 * landet. Einfach geschrieben verlor der Ruecksetzer deshalb genau dann,
 * wenn das Theme spaeter kam - im Browser-Test gemessen, nicht vermutet.
 *
 * Die doppelte Klasse hebt jede Regel auf (0,3,0) und macht sie damit
 * unabhaengig von der Reihenfolge. Bewusst so und nicht mit `!important`:
 * ein `!important` wuerde auch eigene Anpassungen des Seitenbetreibers
 * uebersteuern, die doppelte Klasse laesst sich mit einem etwas
 * spezifischeren Selektor weiterhin ueberschreiben.
 *
 * C10.3: Es sind DREI, und der Weg dahin ist lehrreich.
 *
 * `uk-light` ist nur einer von zehn Traegern, an denen dieses Theme seine
 * Inversion aufhaengt. Gemessen wurde jeder einzelne, gegen die echte
 * kompilierte theme.css - sieben davon setzten den Ruecksetzer ausser
 * Kraft, die Beschriftung wurde reinweiss:
 *
 *   (0,3,0)  .uk-card-primary.uk-card-body .uk-form-label
 *   (0,3,0)  .uk-card-primary>:not([class*=uk-card-media]) .uk-form-label
 *   (0,3,0)  .uk-card-secondary.uk-card-body ...
 *   (0,3,0)  .uk-card-secondary>:not([class*=uk-card-media]) ...
 *   (0,3,0)  .uk-section-secondary:not(.uk-preserve-color) ...
 *   (0,3,0)  .uk-tile-primary:not(.uk-preserve-color) ...
 *   (0,3,0)  .uk-tile-secondary:not(.uk-preserve-color) ...
 *   (0,2,0)  .uk-light / .uk-overlay-primary / .tm-toolbar-default
 *
 * Sieben mal (0,3,0) - genau der Wert, den eine doppelte Klasse mit
 * Nachfahren erreicht. Gleichstand, und dann entscheidet die
 * Quellreihenfolge: auf der echten Seite laedt die Theme-CSS nach unserer,
 * also gewann das Theme. Genau davor sollte die doppelte Klasse schuetzen -
 * fuer `uk-light` (0,2,0) tat sie es, fuer die sieben anderen nicht.
 *
 * Dreifach sind es (0,4,0) am Nachfahren, ueber allen zehn.
 *
 * Und weiterhin bewusst ohne `!important`: es waere hier zwar leicht zu
 * rechtfertigen (der Ruecksetzer greift nur, wenn der Seitenbetreiber
 * ausdruecklich "Dunkler Text" waehlt), aber eine Klassenkette laesst sich
 * mit einem etwas spezifischeren Selektor weiterhin schlagen - ein
 * `!important` nur mit einem zweiten. Die Kette ist die hoeflichere Form
 * derselben Durchsetzung.
 *
 * ZWISCHENFALL, der hier stehen bleibt: In C10.2 stand diese Kette schon
 * einmal dreifach da und wurde wieder auf zwei zurueckgebaut - mit der
 * Begruendung, die Gegenprobe zeige, dass zwei genuegen. Das stimmte auch,
 * nur pruefte die Gegenprobe eine Fixture, die von den zehn Traegern
 * genau einen kannte: `uk-light`. Eine Vereinfachung, die sich auf einen
 * gruenen Test beruft, ist nur so viel wert wie der Test.
 */

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .el-title,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .el-heading,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-form-label,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark legend,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-legend {
    color: var(--mmd-forms-emphasis-color, #333);
}

/*
 * Der Fliesstext des Elements (Beschreibung unter dem Titel) und alles,
 * was sonst nur erbt.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark {
    color: var(--mmd-forms-color, #666);
}

/*
 * Der dritte Selektor ist eine Nachbildung, kein Versehen. Das Theme des
 * Projektinhabers invertiert Auswahllisten ueber
 * `.uk-light .uk-select:not([multiple]):not([size])` - Spezifitaet (0,4,0),
 * weil `:not()` sein Argument mitzaehlt. Gegen (0,3,0) gewann das. Dieselbe
 * Form hier bringt uns auf (0,5,0) und damit darueber.
 *
 * Das ist zugegebenermassen ein Wettruesten, und es hat eine Grenze: ein
 * Theme mit einem noch staerkeren Inversionsselektor wuerde wieder
 * gewinnen. Der Ausweg waere dann nicht eine noch laengere Kette, sondern
 * die Frage, ob dieses Theme ueberhaupt invertiert werden soll. Belegt ist
 * bis jetzt genau dieser eine Fall [CORE, YOOtheme Pro 5.0.43,
 * yootheme/css/theme.css].
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-input,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-select,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-select:not([multiple]):not([size]),
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-textarea {
    color: var(--mmd-forms-color, #666);
    background-color: var(--mmd-forms-background, #fff);
    border-color: var(--mmd-forms-border, #e5e5e5);
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-input::placeholder,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-textarea::placeholder {
    color: var(--mmd-forms-muted-color, #999);
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-checkbox,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-radio {
    background-color: var(--mmd-forms-background, #fff);
    border-color: var(--mmd-forms-border, #e5e5e5);
}

/*
 * Angehakt bleibt angehakt: UIkit faerbt den Haken selbst ueber eine
 * Hintergrundfarbe, und die kommt in der Inversion aus dem hellen
 * Farbtopf. Ohne diese Regel waere eine gesetzte Checkbox auf weissem
 * Grund nicht von einer leeren zu unterscheiden - bei einer
 * Einwilligung waere das ein echter Fehler. Die Fokus-Zustaende sind
 * eigene Selektoren im Theme und brauchen deshalb eigene Regeln, sonst
 * springt die Farbe beim Antippen zurueck in die Inversion.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-checkbox:checked,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-checkbox:checked:focus,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-checkbox:indeterminate,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-checkbox:indeterminate:focus,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-radio:checked,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-radio:checked:focus {
    background-color: var(--mmd-forms-accent-color, #1e87f0);
    border-color: var(--mmd-forms-accent-color, #1e87f0);
}

/*
 * Gedaempfter Text: `uk-text-meta` traegt den Pflichtfeld-Hinweis. In der
 * Inversion wird er halbtransparentes Weiss, auf einer hellen Karte also
 * zu nichts.
 *
 * Bewusst NICHT dabei: `uk-text-muted`, `-emphasis`, `-primary`,
 * `-secondary`. Deren Inversionsregeln tragen im Theme ein `!important`
 * (UIkit-Konvention fuer Text-Utilities) - eine Regel dafuer waere hier
 * wirkungslos, egal wie spezifisch. Sie stuende nur da und taeuschte eine
 * Abdeckung vor, die es nicht gibt. Wir rendern keine davon (geprueft:
 * unser Markup kennt uk-text-meta, -danger und -small); sollte das je
 * anders werden, braucht es an dieser Stelle ein eigenes `!important`
 * und eine eigene Begruendung.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-text-meta {
    color: var(--mmd-forms-muted-color, #999);
}

/*
 * C10.2 - Links. Der Verweis im Einwilligungstext (C10) wurde in der
 * Inversion reinweiss und verschwand auf der hellen Karte spurlos. Am
 * Screenshot des Live-Durchgangs zu sehen: die Zeile war da, der Link
 * nicht. Ein unsichtbarer Link in einer Einwilligung ist kein
 * Schoenheitsfehler - er ist der Pflichtteil der Einwilligung.
 *
 * `a` ohne Klasse, weil ConsentText::render() genau so rendert; die
 * uk-link-Varianten zusaetzlich, falls das Markup sie je traegt.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-link,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a.uk-link-muted,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a.uk-link-text {
    color: var(--mmd-forms-accent-color, #1e87f0);
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a:hover,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-link:hover,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a.uk-link-muted:hover,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark a.uk-link-text:hover {
    color: var(--mmd-forms-emphasis-color, #333);
}

/*
 * C10.2 - Feld-Icon (C9.1). `uk-form-icon` wird in der Inversion
 * halbtransparentes Weiss; auf heller Karte blieb ein leeres Feld mit
 * unsichtbarem Symbol.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-form-icon {
    color: var(--mmd-forms-muted-color, #999);
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-form-icon:hover {
    color: var(--mmd-forms-color, #666);
}

/*
 * C10.2 - Buttons. Bisher war nur `uk-button-default` abgedeckt - der
 * Standardwert im Builder ist aber `uk-button-primary`, also traf der
 * Ruecksetzer ausgerechnet den Absende-Button eines frisch angelegten
 * Formulars nicht. Am echten Theme gemessen: der Primary-Button kehrte
 * sich um (weisse Flaeche, blaue Schrift statt umgekehrt).
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-button-default {
    color: var(--mmd-forms-emphasis-color, #333);
    background-color: transparent;
    border-color: var(--mmd-forms-border, #e5e5e5);
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-button-primary {
    color: var(--mmd-forms-on-accent-color, #fff);
    background-color: var(--mmd-forms-accent-color, #1e87f0);
    border-color: transparent;
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-button-secondary {
    color: var(--mmd-forms-on-accent-color, #fff);
    background-color: var(--mmd-forms-emphasis-color, #333);
    border-color: transparent;
}

.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-button-text,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-button-link {
    color: var(--mmd-forms-emphasis-color, #333);
    background-color: transparent;
}

/*
 * Der Fokusring des Themes bleibt, aber seine Farbe kam ebenfalls aus der
 * Inversion.
 */
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-input:focus,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-select:focus,
.mmd-forms-scheme-dark.mmd-forms-scheme-dark.mmd-forms-scheme-dark .uk-textarea:focus {
    color: var(--mmd-forms-emphasis-color, #333);
    background-color: var(--mmd-forms-background, #fff);
    border-color: var(--mmd-forms-accent-color, #1e87f0);
}