/**
* ============================================================================
* EMEU Universal Form Design System
* ============================================================================
*
* Version: 2.0.0
* Erstellt: 2026-04-09
* Refactored: 2026-04-19 (Session S027 — v2.0 Token-Migration + Signal-Alignment)
* Autor: Nikolai Sven Volkov-Lindgren (NISO K74)
* Dokumentation: projects/emeu-ai-website/epem-51-07-howto-emeu-form-system.md
*
* ----------------------------------------------------------------------------
* PHILOSOPHIE — Token-Strategie (v2.0)
* ----------------------------------------------------------------------------
*
* Diese Datei nutzt EMEU Semantic Color Tokens DIREKT in den Feld-Selektoren.
* Keine Zwischenvariablen mit Farben wegen IACVT-Risiko bei :root-Scope-Aufloesung.
*
* Die Semantic Tokens kommen aus bricks-child/style.css LAYER 3:
* --color-bg-page (Seiten-BG, via ice / obsidian)
* --color-bg-surface (Surface-Schicht, via mist / graphite)
* --color-bg-field (Input-BG, weiss / graphite-l-1)
* --color-border (Borders, via mist-d-1 / graphite-l-2)
* --color-border-hover (Hover-Border, via obsidian-l-2 / frost-d-1)
* --color-text (Haupttext, via obsidian / frost)
* --color-text-muted (Gedaempfter Text, via obsidian-l-2 / frost-d-2)
* --color-text-subtle (Meta, Captions, via obsidian-l-4 / frost-d-4)
* --color-primary (Cyan Brand, signal #00E5FF — kontextunabhaengig)
* --color-primary-accent (via deep / tide)
*
* State-Farben (fix im Child-Theme, Signal-Forms-Tone):
* --color-success (#1A9A6A / #4AD89C)
* --color-success-soft (#E4F5ED / #0F2920)
* --color-error (#D84A3D / #FF6E62)
* --color-error-soft (#FCE8E5 / #2A1513)
* --shadow-focus (rgba(0, 229, 255, 0.2 / 0.25))
*
* Label-Typography Tokens aus style.css LAYER 3c:
* --form-label-floating-idle-size (16px / lh 22 / weight 300)
* --form-label-floating-active-size (13px fix / lh 17 / weight 300)
* --form-label-permanent-size (13px / lh 17 / weight 300)
* --form-label-group-* (13px, weight 500, uppercase, ls 0.02em)
* --form-label-item-size (15px / lh 1.4 / weight 400)
* --form-label-feedback-size (13px / lh 1.4 / weight 400)
*
* Form-Geometrie aus style.css LAYER 3c:
* --form-field-height (50px)
* --form-field-radius (var(--radius-button, 8px))
* --form-focus-width (2px)
*
* ----------------------------------------------------------------------------
* MAGIC NUMBERS — Floating Label Pattern
* ----------------------------------------------------------------------------
*
* Die untenstehenden `:root` Variablen sind bewusst HIER definiert und NICHT
* im Bricksbuilder Style Manager. Begruendung:
*
* 1. Sie sind intern-mathematisch aneinander gekoppelt
* (aendert man --floating-label-top-active, muss --floating-input-padding-
* active-top mit angepasst werden, sonst ueberlappen sich Label und Text)
*
* 2. Sie gelten AUSSCHLIESSLICH fuer Form-Felder der drei Anwendungsfaelle:
* WooCommerce (Blocks + Classic), WS Form, WP Login
* Kein universeller Anwendungsfall — gehoert nicht ins globale Token-System
*
* 3. Die Wartung erfolgt hier zentral an einer Stelle. Wenn das Floating-
* Label-Pattern spaeter grundlegend anders aussehen soll, wird diese
* Datei editiert — nicht das Bricksbuilder-Setup.
*
* 4. Die Werte sind Material-Design-nah und werden sich ueber die Lebenszeit
* des Systems wahrscheinlich nicht mehr aendern.
*
* ----------------------------------------------------------------------------
* DECKT AB
* ----------------------------------------------------------------------------
*
* - WooCommerce Blocks (Cart, Checkout via .wc-block-components-*)
* - Classic WooCommerce (My Account via .form-row + .input-text)
* - WS Form Conversational (via .wsf-label-position-inside)
* - WS Form Classic (traditional via .wsf-field-wrapper)
* - WP Login (via body.login-action-login)
* - Select2 (wp + wc country + wsf select2 opt-in)
* - Bricks Form Elements (EMEU custom via .emeu-form-field)
*
* VORAUSSETZUNGEN
*
* - emeu-form-enhancer.js geladen (Classic WC Placeholder + Select2 Context)
* - Browser mit :has() Support (Chrome 105+, Safari 15.4+, Firefox 121+)
* - Alle Semantic Color Tokens in style.css LAYER 3 definiert
*
* ============================================================================
*/
/* ============================================================================
1. MAGIC NUMBERS — Floating Label Pattern (form-spezifisch)
============================================================================
Diese Werte sind NUR fuer das Floating-Label-Pattern gedacht. Sie sind
intern-mathematisch aneinander gekoppelt und duerfen nicht einzeln
geaendert werden ohne Gesamtsystem-Review.
Definitionen hier in :root, aber mit EMEU-spezifischem Prefix
(`--floating-*`), damit klar ist dass sie zum Form-System gehoeren und
nicht das globale Token-System ueberladen.
============================================================================ */
:root {
/* Label Positioning (gekoppelt an --form-field-height: 50px) */
--floating-label-top-idle: 25px; /* Vertikal zentriert im 50px Input */
--floating-label-top-active: 6px; /* Gefloated nach oben */
--floating-label-scale: 0.82; /* 16px × 0.82 = 13.12px effective */
--floating-label-left: 10px;
/* Input Padding — Wechsel zwischen Idle und Active
(Werte 1:1 aus WooCommerce Blocks: 16 12 / 24 9 8)
Verifiziert gegen emeu_checkout.css Zeile 1032 + 1038 */
--floating-input-padding-x: 12px; /* Idle: symmetrisch */
--floating-input-padding-x-active: 9px; /* Active: weniger horizontal fuer Label-Alignment */
--floating-input-padding-x-focus: 8.5px; /* Focus+Filled: Border-Kompensation bei 1.5px */
--floating-input-padding-y-idle: 16px; /* Idle: symmetrisch */
--floating-input-padding-y-top: 24px; /* Active: Platz fuer Label oben */
--floating-input-padding-y-bot: 8px; /* Active: Cursor-Puffer — WC-Standard */
/* Field Geometry */
--floating-field-margin-top: 12px;
--floating-field-border-focus: 1.5px; /* Ueberschreibt Idle 1px */
/* Label (Permanent-Oben Variante, fuer Select2 + Native Select) */
--floating-label-permanent-top: -8px; /* Notch oberhalb der Border */
--floating-label-permanent-size: 13px; /* Entspricht gefloatetem State */
--floating-label-permanent-padx: 4px; /* Background-Padding */
/* Non-Floating Widget Geometry (Signal-aligned, S027) */
--form-checkbox-size: 22px; /* Signal 22x22 */
--form-checkbox-check-radius: 4px; /* Checkbox-Corner */
--form-checkbox-border-width: 1.5px; /* Signal 1.5px Border */
--form-radio-size: 22px; /* Signal 22x22 */
--form-toggle-width: 44px; /* Signal Toggle Track */
--form-toggle-height: 24px;
--form-toggle-thumb-size: 20px;
--form-toggle-thumb-travel: 20px; /* translateX im Checked-State */
--form-range-track-height: 6px; /* S026a: Statement Slider, dicker + touch-freundlich */
--form-range-thumb-size: 24px; /* S026a: groesser, visuell praesenter */
--form-rating-size: 32px;
--form-rating-gap: 6px;
--form-dropzone-min-height: 140px;
/* Form Animation */
--form-transition: all 0.2s ease;
/* ------------------------------------------------------------------
HINWEIS zu --edge-padding__bp-a / --edge-padding__bp-d
------------------------------------------------------------------
Diese beiden Variablen werden in Bricksbuilder Style Manager
definiert (Kategorie "Padding", siehe Section 14 unten).
Hier bewusst NICHT redefiniert (Single Source of Truth).
Bricks Definition:
--edge-padding__bp-a: 40px (Desktop, BP-A/BP-X)
--edge-padding__bp-d: 24px (Tablet und abwaerts, BP-D)
Die Fallback-Werte in den var() Aufrufen in Section 14 sind
Safety Nets fuer den Fall dass Bricks Style Manager
temporaer nicht verfuegbar ist (z.B. beim Builder-Edit).
------------------------------------------------------------------ */
}
/* ============================================================================
2. FLOATING LABEL PATTERN — Universal Rules
============================================================================ */
/* ---- 2.1 Container (Positioning Context) ---- */
.wc-block-components-text-input,
.wc-block-components-form .wc-block-components-text-input,
.wsf-field-wrapper .wsf-label-position-inside,
.woocommerce .form-row:not(.form-row--no-floating),
.emeu-form-field {
position: relative;
margin-top: var(--floating-field-margin-top);
}
/* ---- 2.2 Input (Idle State) ---- */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-text-input input[type="password"],
.wc-block-components-text-input input[type="number"],
.wsf-label-position-inside > .wsf-field:not(select):not(textarea),
.woocommerce .form-row .input-text,
.emeu-form-field > input {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
box-sizing: border-box;
color: var(--color-text);
/* font-family inherit von body (Mont) — nicht explizit setzen */
font-size: 16px; /* FIX: fix statt fluid var(--text-body) = 16-20px */
height: var(--form-field-height, 50px);
line-height: 25px; /* FIX: Fix Pixel-Wert (WC-Standard), nicht Ratio 1.5 */
padding: var(--floating-input-padding-y-idle) var(--floating-input-padding-x);
width: 100%;
transition: var(--form-transition);
}
/* ---- 2.3 Input (Focus State — Border verstaerkt) ---- */
.wc-block-components-text-input input:focus,
.wsf-label-position-inside > .wsf-field:focus,
.woocommerce .form-row .input-text:focus,
.emeu-form-field > input:focus {
border-width: var(--floating-field-border-focus);
border-color: var(--color-text);
outline: none;
}
/* ---- 2.4 Label (Idle — zentriert im Input) ---- */
.wc-block-components-text-input label,
.wsf-label-position-inside > .wsf-label,
.woocommerce .form-row > label,
.emeu-form-field > label {
color: var(--color-text-muted);
cursor: text;
/* font-family inherit */
font-size: 16px; /* FIX: Default Label (nicht fluid var(--text-body) = 16-20px) */
left: var(--floating-label-left);
line-height: 1.4;
margin: 0;
max-width: calc(100% - 24px);
overflow: hidden;
pointer-events: none;
position: absolute;
text-overflow: ellipsis;
top: var(--floating-label-top-idle);
transform: translateY(-50%);
transform-origin: top left;
transition: var(--form-transition);
white-space: nowrap;
z-index: 1;
}
/* ---- 2.5 Label (Active — gefloatet nach oben) ----
Zweig A: WooCommerce Blocks via .is-active (React-gesteuert)
Zweig B: Alle anderen via :has() + :focus / :not(:placeholder-shown)
FIX (v1.1.1): Echter font-size Wechsel 16px → 13px statt transform: scale().
Der scale-Ansatz hatte das Problem, dass die computed font-size unveraendert
blieb — in DevTools sichtbar als "16px konstant". Durch echten font-size
Wechsel ist der Effekt deterministisch und in DevTools nachvollziehbar.
---- */
.wc-block-components-text-input.is-active label,
.wc-block-components-text-input input:-webkit-autofill + label,
.wsf-label-position-inside:has(.wsf-field:focus) > .wsf-label,
.wsf-label-position-inside:has(.wsf-field:not(:placeholder-shown)) > .wsf-label,
.woocommerce .form-row:has(.input-text:focus) > label,
.woocommerce .form-row:has(.input-text:not(:placeholder-shown)) > label,
.emeu-form-field:has(input:focus) > label,
.emeu-form-field:has(input:not(:placeholder-shown)) > label {
top: var(--floating-label-top-active);
transform: none; /* Ueberschreibt das translateY(-50%) aus der Default-Regel */
font-size: 13px; /* FIX: Echter font-size Wechsel, deterministisch */
color: var(--color-text-muted); /* UX: Meta-Info, damit Input-Content visuell dominiert */
}
/* ---- 2.6 Input Padding Shift (wenn Label gefloatet ist) ----
Alle vier Seiten setzen, damit der Wechsel zwischen Idle (16 12 16 12)
und Active (24 9 0 9) sauber laeuft. Ohne horizontal-Override wuerde
x bei 12px aus der Idle-Regel haengenbleiben — das erzeugt einen
1px-Shift beim Focus/Blur-Uebergang der Border-Breite.
---- */
.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:-webkit-autofill,
.wsf-label-position-inside:has(.wsf-field:focus) > .wsf-field,
.wsf-label-position-inside:has(.wsf-field:not(:placeholder-shown)) > .wsf-field,
.woocommerce .form-row:has(.input-text:focus) > .input-text,
.woocommerce .form-row:has(.input-text:not(:placeholder-shown)) > .input-text,
.emeu-form-field:has(input:focus) > input,
.emeu-form-field:has(input:not(:placeholder-shown)) > input {
padding-top: var(--floating-input-padding-y-top); /* 24 */
padding-right: var(--floating-input-padding-x-active); /* 9 */
padding-bottom: var(--floating-input-padding-y-bot); /* 0 */
padding-left: var(--floating-input-padding-x-active); /* 9 */
}
/* ---- 2.7 Focus + Filled: left padding angepasst (wegen 1.5px Border) ---- */
.wc-block-components-text-input.is-active input:focus,
.wsf-label-position-inside:has(.wsf-field:focus):has(.wsf-field:not(:placeholder-shown)) > .wsf-field,
.woocommerce .form-row:has(.input-text:focus):has(.input-text:not(:placeholder-shown)) > .input-text,
.emeu-form-field:has(input:focus):has(input:not(:placeholder-shown)) > input {
padding-left: var(--floating-input-padding-x-focus);
}
/* ---- 2.8 WS Form: Placeholder im Idle-Zustand unsichtbar ----
(Placeholder-Text ist in WS Form identisch mit Label, wuerde doppelt wirken)
---- */
.wsf-label-position-inside > .wsf-field::placeholder {
color: transparent;
}
.wsf-label-position-inside > .wsf-field:focus::placeholder {
color: transparent;
}
/* ---- 2.9 Classic WooCommerce: input-wrapper ist strukturell, nicht visuell ---- */
.woocommerce .form-row .woocommerce-input-wrapper {
display: block;
width: 100%;
}
/* ---- 2.10 Reduced Motion (Accessibility) ---- */
@media (prefers-reduced-motion: reduce) {
.wc-block-components-text-input label,
.wc-block-components-text-input input,
.wsf-label-position-inside > .wsf-label,
.wsf-label-position-inside > .wsf-field,
.woocommerce .form-row > label,
.woocommerce .form-row > .input-text,
.emeu-form-field > label,
.emeu-form-field > input {
transition: none;
}
}
/* ============================================================================
3. TEXTAREA VARIANTE (Label startet oben, nicht zentriert)
============================================================================ */
.wc-block-components-text-input textarea,
.wsf-label-position-inside > textarea.wsf-field,
.woocommerce .form-row textarea.input-text,
.emeu-form-field > textarea {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
box-sizing: border-box;
color: var(--color-text);
font-size: 16px; /* FIX: fix statt fluid */
line-height: 1.5;
padding: 24px 9px 12px;
min-height: 120px;
resize: vertical;
width: 100%;
transition: var(--form-transition);
}
.wc-block-components-text-input:has(textarea) label,
.wsf-label-position-inside:has(textarea.wsf-field) > .wsf-label,
.woocommerce .form-row:has(textarea.input-text) > label,
.emeu-form-field:has(textarea) > label {
top: 20px;
transform: none;
}
.wc-block-components-text-input.is-active:has(textarea) label,
.wsf-label-position-inside:has(textarea.wsf-field:focus) > .wsf-label,
.wsf-label-position-inside:has(textarea.wsf-field:not(:placeholder-shown)) > .wsf-label,
.woocommerce .form-row:has(textarea.input-text:focus) > label,
.woocommerce .form-row:has(textarea.input-text:not(:placeholder-shown)) > label,
.emeu-form-field:has(textarea:focus) > label,
.emeu-form-field:has(textarea:not(:placeholder-shown)) > label {
top: var(--floating-label-top-active);
transform: none;
font-size: 13px; /* Echter font-size Wechsel statt scale */
color: var(--color-text-muted); /* UX: Meta-Info, Content dominiert */
}
/* ============================================================================
4. NATIVE SELECT VARIANTE (WS Form Conversational ohne Select2)
============================================================================ */
.wsf-label-position-inside:has(> select.wsf-field) {
position: relative;
}
.wsf-label-position-inside > select.wsf-field {
appearance: none;
-webkit-appearance: none;
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
color: var(--color-text);
cursor: pointer;
font-size: 16px; /* FIX: fix statt fluid */
line-height: 20px; /* Kleiner als Text-Input (kein Cursor noetig) */
height: var(--form-field-height, 50px);
padding: 14px 40px 14px 9px; /* Symmetrisch: Label ist im Notch ausserhalb */
width: 100%;
transition: var(--form-transition);
/* Defensive gegen Bricks frontend-layer.min.css input:not([type=submit]) */
box-sizing: border-box;
/* Native Selects brechen lange Options nie um, aber defensiv: */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.wsf-label-position-inside > select.wsf-field:focus {
border-width: var(--floating-field-border-focus);
border-color: var(--color-text);
outline: none;
}
/* Custom Arrow fuer native Select */
.wsf-label-position-inside > .wsf-select-arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
width: 12px;
height: 8px;
pointer-events: none;
background: var(--color-text);
mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
}
/* Native Select Label — im Notch-Pattern oberhalb der Border
(konsistent mit Select2 Label-Behandlung, verhindert Ueberlappung mit Select-Content)
*/
.wsf-label-position-inside:has(> select.wsf-field) > .wsf-label {
position: absolute;
top: var(--floating-label-permanent-top); /* -8px: Notch oberhalb Border */
left: var(--floating-label-left);
background: var(--color-bg-field); /* Deckt die Border an der Notch-Position ab */
padding: 0 var(--floating-label-permanent-padx); /* 4px horizontal fuer Atem */
transform: none;
color: var(--color-text-muted); /* UX: Meta-Info, Select-Wert dominiert */
font-size: var(--floating-label-permanent-size); /* 13px */
line-height: 1.2; /* Dichte, damit Label kompakt bleibt */
pointer-events: none;
z-index: 2;
/* Force 1-zeilig mit ellipsis bei langen Label-Texten */
max-width: calc(100% - 20px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ============================================================================
5. NON-FLOATING WIDGETS — Checkbox und Radio
============================================================================ */
.wsf-field-wrapper[data-type="checkbox"],
.wsf-field-wrapper[data-type="radio"],
.wsf-field-wrapper[data-type="price_checkbox"] {
margin-top: var(--floating-field-margin-top);
}
/* Group Label (direkt unter field-wrapper) */
.wsf-field-wrapper[data-type="checkbox"] > .wsf-label,
.wsf-field-wrapper[data-type="radio"] > .wsf-label,
.wsf-field-wrapper[data-type="price_checkbox"] > .wsf-label {
display: block;
font-size: var(--text-meta);
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 12px;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Rows (einzelne Checkbox- oder Radio-Zeilen) */
.wsf-field-wrapper [data-row-checkbox],
.wsf-field-wrapper [data-row-radio] {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
}
/* Native Checkbox/Radio verstecken — wir zeichnen ein eigenes Visual
KONKRETE ROOT-CAUSE (verifiziert durch Prof. Lumina, S025a):
Bricks Builder laedt ueber `frontend-layer.min.css` eine aggressive
Input-Baseline-Regel:
.input, input:not([type=submit]), select, textarea {
padding: 0 12px; // macht Checkbox 37px breit statt 13px
line-height: 40px; // verformt Range-Slider Box
width: 100%; // streckt Checkbox auf volle Breite
border: 1px solid; // doppelte Border bei eigenem Border-Styling
}
Der Selektor `input:not([type=submit])` matcht ALLE Input-Typen ausser
Submit-Buttons — also auch checkbox, radio, range, file, color, etc.
Ohne explizite Defensive-Overrides werden diese Elemente visuell
verformt, weil Bricks-Specificity (0,0,1,1) bei nicht-ueberschriebenen
Properties greift.
Defensive Strategie: Jede Eigenschaft die potenziell die Box-Groesse
beeinflusst (padding, min-*, line-height, width) wird hier explizit
auf 0 oder den Fix-Wert gesperrt.
*/
.wsf-field-wrapper [data-row-checkbox] > input[type="checkbox"],
.wsf-field-wrapper [data-row-radio] > input[type="radio"] {
appearance: none;
-webkit-appearance: none;
background: var(--color-bg-field);
border: 1px solid var(--color-border);
box-sizing: border-box; /* Padding zaehlt nicht zur Box-Groesse */
cursor: pointer;
flex-shrink: 0;
margin: 0;
padding: 0; /* Defensive: gegen Fremd-Regeln mit padding */
position: relative;
transition: var(--form-transition);
/* Defensive gegen generische Input-Regeln */
min-height: 0;
min-width: 0;
line-height: 0; /* Verhindert dass line-height die Box vergroessert */
vertical-align: middle; /* Konsistente Baseline-Ausrichtung im Flex-Row */
}
/* Checkbox-spezifisch */
.wsf-field-wrapper [data-row-checkbox] > input[type="checkbox"] {
width: var(--form-checkbox-size);
height: var(--form-checkbox-size);
max-width: var(--form-checkbox-size); /* Verhindert width: 100% Overrides */
max-height: var(--form-checkbox-size);
border-radius: var(--form-checkbox-check-radius);
}
.wsf-field-wrapper [data-row-checkbox] > input[type="checkbox"]:checked {
background: var(--color-primary);
border-color: var(--color-primary);
}
.wsf-field-wrapper [data-row-checkbox] > input[type="checkbox"]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 10px;
border: solid var(--color-bg-page);
border-width: 0 2px 2px 0;
transform: translate(-50%, -60%) rotate(45deg);
}
/* Radio-spezifisch */
.wsf-field-wrapper [data-row-radio] > input[type="radio"] {
width: var(--form-radio-size);
height: var(--form-radio-size);
max-width: var(--form-radio-size); /* Verhindert width: 100% Overrides */
max-height: var(--form-radio-size);
border-radius: 50%;
}
.wsf-field-wrapper [data-row-radio] > input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-primary);
transform: translate(-50%, -50%);
}
/* ============================================================================
5.2 IMAGE CHECKBOX — Auto-Detection via :has(img)
============================================================================
Pattern: Checkbox-Feld wo ein Bild der Auslöser ist (statt eines Text-Labels).
Verwendung: Storytelling-Forms (Praeferenz-Auswahl, Mood-Boards, visuelle
Narrative-Fragen, Produkt-Auswahl nach Bild).
Auto-Detection: Wird automatisch aktiv wenn ein .wsf-field-wrapper vom
data-type="checkbox" eine Row mit ![]()
im Label enthaelt. Keine
Modifier-Klasse oder WS Form Konfiguration noetig.
Visuelles Prinzip: EMEU Variante A (puristisch)
- Default: Bild desaturiert + gedaempfte Opacity
- Hover: Zurueck auf vollstaendige Farbigkeit
- Selected: Primary Border + 1.02 Scale + volle Farbigkeit
- Focus-visible: Outline-Ring fuer Keyboard-Navigation
Gestaltungs-Entscheidungen (verifiziert durch Prof. Lumina, S026a):
- Grid: auto-fit, minmax(160px, 1fr) — responsive Layout
- Max-Breite pro Bild: 360px (passt 1024px Display als 3er-Grid mit Gap)
- Desaturierung: grayscale(0.4) + opacity(0.75) — mittlere Staerke
- Scale im Selected: 1.02 — subtil
- Border-Radius: var(--radius-form-card, 8px) — flexible Variable
(im Bricks Style Manager einstellbar, Default 8px = --radius-button)
*/
/* ---- 5.2.1 Container: Grid-Layout wenn Image-Checkbox erkannt ---- */
.wsf-field-wrapper[data-type="checkbox"]:has([data-row-checkbox] label img) > div {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--space-s, 16px);
max-width: 100%;
}
/* ---- 5.2.2 Row: Kein Flex-Layout (war bei Standard-Checkbox aktiv) ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox]:has(label img) {
display: block;
padding: 0;
position: relative;
}
/* ---- 5.2.3 Native Checkbox verstecken (accessibility-safe) ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox]:has(label img) > input[type="checkbox"] {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
/* Defensive gegen Bricks frontend-layer.min.css */
padding: 0;
margin: 0;
min-height: 0;
min-width: 0;
}
/* ---- 5.2.4 Label wird zur Image-Tile ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > label:has(img) {
display: block;
cursor: pointer;
margin: 0;
padding: 0;
position: static; /* Override Parent-Regeln */
pointer-events: auto;
transform: none;
max-width: 360px; /* 1024px Display, 3er-Grid-tauglich */
/* Standard Label-Styling aus Parent-Regel aushebeln */
font-size: inherit;
color: inherit;
text-transform: none;
font-weight: normal;
letter-spacing: 0;
}
/* ---- 5.2.5 Das Bild selbst (Default State) ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > label > img {
display: block;
width: 100%;
height: auto;
max-width: 360px;
aspect-ratio: 1 / 1;
object-fit: cover;
border: 2px solid var(--color-border);
border-radius: var(--radius-form-card, 8px);
filter: grayscale(0.4) opacity(0.75);
transition: all var(--duration-medium, 300ms) var(--ease-default, ease);
}
/* ---- 5.2.6 Hover State: Zurueck zu vollstaendiger Darstellung ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > label:hover > img {
filter: grayscale(0) opacity(1);
border-color: var(--color-text-muted);
}
/* ---- 5.2.7 Selected State: Input checked → Label + img reagieren ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > input[type="checkbox"]:checked + label > img {
filter: grayscale(0) opacity(1);
border-color: var(--color-primary);
transform: scale(1.02);
}
/* ---- 5.2.8 Focus-visible fuer Keyboard-Navigation ---- */
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > input[type="checkbox"]:focus-visible + label > img {
outline: 3px solid var(--color-primary);
outline-offset: 4px;
}
/* ---- 5.2.9 Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > label > img {
transition: none;
}
.wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] > input[type="checkbox"]:checked + label > img {
transform: none;
}
}
/* Focus Ring */
.wsf-field-wrapper [data-row-checkbox] > input:focus-visible,
.wsf-field-wrapper [data-row-radio] > input:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Item Label (rechts neben Checkbox/Radio) */
.wsf-field-wrapper [data-row-checkbox] > .wsf-label,
.wsf-field-wrapper [data-row-radio] > .wsf-label {
font-size: var(--text-ui);
color: var(--color-text);
cursor: pointer;
line-height: 1.4;
margin: 0;
user-select: none;
position: static;
transform: none;
pointer-events: auto;
text-transform: none;
font-weight: 400;
letter-spacing: 0;
}
/* ============================================================================
6. NON-FLOATING WIDGETS — Range Slider ("Statement Slider" Variante A)
============================================================================
Design-Entscheidung (S026a, Prof. Lumina):
- Variante A gewaehlt (Statement Slider) — grosse Value-Zahl als visueller
Anker, Track-Fill in Primary bis zum Thumb, eleganter Thumb mit Scale 1.15
- Track: 6px (moderner + touch-freundlicher als 4px)
- Thumb: 24px mit Box-Shadow + Scale bei Hover/Active
- Value-Display: text-heading (dezenter als text-lead), faerbt sich bei
Interaktion in var(--color-primary) ein (via :has() Pure CSS)
- Track-Fill: var(--color-primary) bis Thumb-Position, Rest var(--color-border)
Braucht --slider-progress CSS Custom Property (gesetzt von emeu-form-enhancer.js)
Cross-Browser Track-Fill Strategie:
- WebKit/Blink: linear-gradient auf Track mit var(--slider-progress)
- Firefox: natives ::-moz-range-progress Pseudo-Element
============================================================================ */
.wsf-field-wrapper[data-type="range"] {
margin-top: var(--floating-field-margin-top);
}
/* ---- 6.1 Label (Meta-Label Stil, wie alle Non-Floating) ---- */
.wsf-field-wrapper[data-type="range"] > .wsf-label {
display: block;
font-size: var(--text-meta);
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
position: static;
transform: none;
}
/* ---- 6.2 Value Display (Floating am Thumb) ----
Der Value schwebt UEBER dem Thumb und bewegt sich mit.
Position wird per JS gesetzt (left: X%).
---- */
.wsf-field-wrapper[data-type="range"] {
position: relative; /* Anker fuer absolute wsf-help */
padding-top: 36px; /* Platz fuer den schwebenden Value */
}
.wsf-field-wrapper[data-type="range"] > .wsf-help {
position: absolute;
top: 0;
left: 50%; /* Default, wird von JS ueberschrieben */
transform: translateX(-50%); /* Zentriert ueber der left-Position */
font-size: var(--text-heading);
font-weight: 600;
color: var(--color-text);
letter-spacing: -0.01em;
white-space: nowrap;
pointer-events: none;
transition: color var(--duration-medium, 300ms) var(--ease-default, ease),
left 0.05s ease-out; /* Smooth Tracking */
}
/* Value faerbt sich in Primary bei Interaktion (Pure CSS via :has()) */
.wsf-field-wrapper[data-type="range"]:has(input:focus) > .wsf-help,
.wsf-field-wrapper[data-type="range"]:has(input:active) > .wsf-help {
color: var(--color-primary);
}
/* ---- 6.3 Input Range (Basis) ----
WICHTIG: Der Background wird DIREKT auf dem Input gesetzt (nicht auf
::webkit-slider-runnable-track), weil WebKit den Track-Background NICHT
re-painted bei CSS Custom Property Aenderungen. JS setzt input.style.background
direkt als linear-gradient.
---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"] {
appearance: none;
-webkit-appearance: none;
box-sizing: border-box;
cursor: pointer;
width: 100%;
height: var(--form-range-thumb-size); /* 24px — Klickflaeche */
padding: 0;
margin: 0;
/* Track als Background auf dem Input selbst */
background: linear-gradient(to right, var(--color-primary) 50%, var(--color-border) 50%) center/100% var(--form-range-track-height) no-repeat;
border-radius: var(--form-range-track-height);
/* Defensive gegen Bricks frontend-layer.min.css input:not([type=submit]) */
border: none;
line-height: 0;
min-height: 0;
}
/* ---- 6.4 Track (WebKit: transparent, Background kommt vom Input) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-webkit-slider-runnable-track {
background: transparent;
border: none;
height: var(--form-range-track-height);
width: 100%;
}
/* ---- 6.5 Track (Firefox: Basis) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-moz-range-track {
background: var(--color-border);
border: none;
border-radius: var(--form-range-track-height);
height: var(--form-range-track-height);
width: 100%;
}
/* ---- 6.6 Track Fill (Firefox: natives Pseudo-Element) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-moz-range-progress {
background: var(--color-primary);
border-radius: var(--form-range-track-height);
height: var(--form-range-track-height);
}
/* ---- 6.7 Thumb (WebKit/Blink) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
background: var(--color-primary);
border: 2px solid var(--color-bg-page);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
height: var(--form-range-thumb-size);
margin-top: calc((var(--form-range-track-height) - var(--form-range-thumb-size)) / 2);
width: var(--form-range-thumb-size);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wsf-field-wrapper[data-type="range"] > input[type="range"]:focus::-webkit-slider-thumb,
.wsf-field-wrapper[data-type="range"] > input[type="range"]:active::-webkit-slider-thumb {
transform: scale(1.15);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* ---- 6.8 Thumb (Firefox) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-moz-range-thumb {
background: var(--color-primary);
border: 2px solid var(--color-bg-page);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
height: var(--form-range-thumb-size);
width: var(--form-range-thumb-size);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wsf-field-wrapper[data-type="range"] > input[type="range"]:focus::-moz-range-thumb,
.wsf-field-wrapper[data-type="range"] > input[type="range"]:active::-moz-range-thumb {
transform: scale(1.15);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* ---- 6.9 Focus Outline entfernen (visuelles Feedback kommt vom Thumb) ---- */
.wsf-field-wrapper[data-type="range"] > input[type="range"]:focus {
outline: none;
}
/* ---- 6.10 Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
.wsf-field-wrapper[data-type="range"] > .wsf-help {
transition: none;
}
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-webkit-slider-thumb {
transition: none;
}
.wsf-field-wrapper[data-type="range"] > input[type="range"]::-moz-range-thumb {
transition: none;
}
}
/* ============================================================================
7. NON-FLOATING WIDGETS — File Upload (DropzoneJS)
============================================================================ */
.wsf-field-wrapper[data-type="file"] {
margin-top: var(--floating-field-margin-top);
}
.wsf-field-wrapper[data-type="file"] > .wsf-label {
display: block;
font-size: var(--text-meta);
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
position: static;
transform: none;
}
.wsf-field-wrapper[data-type="file"] .dropzone {
background: var(--color-bg-surface);
border: 2px dashed var(--color-border);
border-radius: var(--radius-button, 8px);
color: var(--color-text);
cursor: pointer;
min-height: var(--form-dropzone-min-height);
padding: 24px;
position: relative;
text-align: center;
transition: var(--form-transition);
}
.wsf-field-wrapper[data-type="file"] .dropzone:hover,
.wsf-field-wrapper[data-type="file"] .dropzone.dz-drag-hover {
border-color: var(--color-primary);
background: var(--color-bg-field);
}
.wsf-field-wrapper[data-type="file"] .dropzone .dz-message {
font-size: var(--text-ui);
color: var(--color-text);
line-height: 1.5;
margin: 0;
padding: 16px 0;
}
.wsf-field-wrapper[data-type="file"] .dropzone .dz-message::before {
content: "↑";
display: block;
font-size: 32px;
color: var(--color-text-muted);
margin-bottom: 8px;
font-weight: 300;
}
/* Preview Items */
.wsf-field-wrapper[data-type="file"] .dz-preview {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
display: inline-block;
margin: 8px;
padding: 12px;
position: relative;
text-align: left;
vertical-align: top;
min-width: 120px;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-filename {
color: var(--color-text);
font-size: var(--text-meta);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 180px;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-size {
color: var(--color-text-muted);
font-size: 12px;
margin-top: 4px;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-remove {
color: var(--form-error-color, #cc1818);
cursor: pointer;
font-size: 12px;
margin-top: 8px;
text-decoration: none;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-progress {
background: var(--color-border);
border-radius: 2px;
height: 4px;
margin-top: 8px;
overflow: hidden;
width: 100%;
}
.wsf-field-wrapper[data-type="file"] .dz-preview .dz-upload {
background: var(--color-primary);
height: 100%;
transition: width 0.3s ease;
}
.wsf-field-wrapper[data-type="file"] .dz-preview.dz-success .dz-progress {
display: none;
}
.wsf-field-wrapper[data-type="file"] .dz-preview.dz-error {
border-color: var(--form-error-color, #cc1818);
}
.wsf-field-wrapper[data-type="file"] .dz-preview.dz-error .dz-error-message {
color: var(--form-error-color, #cc1818);
font-size: 12px;
margin-top: 4px;
}
/* ============================================================================
8. NON-FLOATING WIDGETS — Rating (Star Widget)
============================================================================ */
.wsf-field-wrapper[data-type="rating"] {
margin-top: var(--floating-field-margin-top);
}
.wsf-field-wrapper[data-type="rating"] > .wsf-label {
display: block;
font-size: var(--text-meta);
font-weight: 500;
color: var(--color-text-muted);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.02em;
position: static;
transform: none;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating-wrapper {
outline: none;
padding: 8px 0;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating-wrapper:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 4px;
border-radius: var(--radius-button, 8px);
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating {
display: flex;
list-style: none;
gap: var(--form-rating-gap);
margin: 0;
padding: 0;
user-select: none;
justify-content: flex-start;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating li {
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0;
transition: transform 0.15s ease;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating li:hover {
transform: scale(1.1);
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating-icon {
display: block;
width: var(--form-rating-size);
height: var(--form-rating-size);
transition: fill 0.15s ease;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating-icon path {
fill: var(--color-text-muted);
transition: fill 0.15s ease;
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating li.active .wsf-rating-icon path {
fill: var(--color-primary);
}
.wsf-field-wrapper[data-type="rating"] .wsf-rating li:hover .wsf-rating-icon path,
.wsf-field-wrapper[data-type="rating"] .wsf-rating li:hover ~ li.active .wsf-rating-icon path {
fill: var(--color-primary);
}
/* ============================================================================
9. SELECT2 INTEGRATION — Container Styling
============================================================================ */
/* Container — Specificity-Boost mit #brx-content noetig, weil Select2's
eigenes Default-CSS von WS Form NACH unserem CSS geladen wird und bei
gleicher Specificity gewinnt. #brx-content gibt uns (0,1,x,0) als Basis. */
#brx-content .wsf-field-wrapper .select2-container,
#brx-content .woocommerce .form-row .select2-container,
#brx-content .emeu-form-field .select2-container {
width: 100% !important;
min-height: var(--form-field-height, 50px);
}
#brx-content .select2-container--default .select2-selection--single {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
box-sizing: border-box;
color: var(--color-text);
cursor: pointer;
display: flex;
align-items: center;
height: var(--form-field-height, 50px);
padding: 0;
width: 100%;
transition: var(--form-transition);
}
#brx-content .select2-container--default.select2-container--focus .select2-selection--single,
#brx-content .select2-container--default.select2-container--open .select2-selection--single {
border-width: var(--floating-field-border-focus);
border-color: var(--color-text);
outline: none;
}
#brx-content .select2-container--default .select2-selection--single .select2-selection__rendered {
color: var(--color-text);
font-size: 16px;
line-height: var(--form-field-height, 50px); /* Gleich wie Container-Height fuer vertikale Zentrierung */
padding: 0 40px 0 var(--floating-input-padding-x);
flex: 1;
min-width: 0;
}
#brx-content .select2-container--default .select2-selection__placeholder {
color: var(--color-text-muted);
}
/* Custom Arrow (ersetzt Default Select2 Arrow) */
#brx-content .select2-container--default .select2-selection--single .select2-selection__arrow {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
height: 12px;
width: 12px;
pointer-events: none;
}
#brx-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
display: none;
}
#brx-content .select2-container--default .select2-selection--single .select2-selection__arrow::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--color-text);
mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
transition: transform 0.2s ease;
}
#brx-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
transform: rotate(180deg);
}
/* Select2 Label — permanent oben im "Notch"-Pattern, immer muted (Meta-Info) */
#brx-content .wsf-field-wrapper:has(.select2-container) > .wsf-label,
#brx-content .wsf-field-wrapper .wsf-label-position-inside:has(.select2-container) > .wsf-label,
#brx-content .woocommerce .form-row:has(.select2-container) > label {
position: absolute;
top: var(--floating-label-permanent-top);
left: var(--floating-label-left);
background: var(--color-bg-field);
padding: 0 var(--floating-label-permanent-padx);
font-size: var(--floating-label-permanent-size);
color: var(--color-text-muted); /* UX: Meta-Info, Select-Wert dominiert */
pointer-events: none;
z-index: 2;
transform: none;
transition: color 0.2s ease;
}
/* ============================================================================
10. SELECT2 INTEGRATION — Dropdown
============================================================================
ACHTUNG: Select2 Dropdown-Position variiert nach Kontext:
- WooCommerce: Dropdown als direktes Kind von body (ausserhalb #brx-content)
- WS Form: Dropdown INNERHALB des .wsf-field-wrapper (position: absolute)
In beiden Faellen matcht der `body .select2-*` Selektor, weil body immer
ein Vorfahre ist. WS Form nutzt zusaetzlich die Klasse `.wsf-select2-dropdown`
auf dem Dropdown-Element.
Kompaktheit: Die Werte sind bewusst klein gehalten (padding 6px, font 14px)
damit der Dropdown nicht ueber-dimensioniert wirkt. Das ist ein Dropdown-
Menue, kein Formular-Feld — es darf kompakter sein als die 50px Text-Inputs.
============================================================================ */
body .select2-container--default .select2-dropdown {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
body .select2-container--default .select2-dropdown--above {
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}
body .select2-container--default .select2-search--dropdown {
padding: 6px;
border-bottom: 1px solid var(--color-border);
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
background: var(--color-bg-field);
border: 1px solid var(--color-border);
border-radius: var(--radius-button, 8px);
color: var(--color-text);
font-size: 14px; /* Kompakter als Form-Inputs: Dropdown-Search ist UI, nicht Content */
height: 36px; /* Fixe Hoehe statt Auto (konsistent, kompakt) */
padding: 4px 10px;
width: 100%;
outline: none;
box-sizing: border-box;
transition: border-color 0.2s ease;
}
body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--color-text);
}
body .select2-container--default .select2-results__options {
max-height: 300px;
overflow-y: auto;
padding: 4px 0;
}
body .select2-container--default .select2-results__option {
color: var(--color-text);
cursor: pointer;
font-size: 14px; /* Kompakt: Dropdown-Menue, nicht Form-Feld */
line-height: 1.4;
padding: 6px 12px; /* Kompakter als vorher (10px) — Dropdown soll dicht und effizient sein */
transition: background-color 0.15s ease;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--color-primary);
color: var(--color-bg-page);
}
body .select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--color-bg-surface);
color: var(--color-text);
font-weight: 500;
}
body .select2-container--default .select2-results__option--no-results {
color: var(--color-text-muted);
text-align: center;
padding: 20px;
font-style: italic;
}
body .select2-container--default .select2-results__options::-webkit-scrollbar {
width: 6px;
}
body .select2-container--default .select2-results__options::-webkit-scrollbar-track {
background: var(--color-bg-surface);
}
body .select2-container--default .select2-results__options::-webkit-scrollbar-thumb {
background: var(--color-border);
border-radius: 3px;
}
/* Dark Mode Context fuer Select2 Dropdown (gesetzt von emeu-form-enhancer.js) */
/* Token-Migration v2.0 (S027, 2026-04-19) */
body.select2-context-on-dark .select2-dropdown {
--color-bg-field: var(--graphite-l-1);
--color-border: var(--graphite-l-2);
--color-text: var(--frost);
--color-text-muted: var(--frost-d-2);
--color-primary: var(--signal);
--color-bg-page: var(--obsidian);
--color-bg-surface: var(--graphite);
}
body.select2-context-on-light .select2-dropdown {
--color-bg-field: #FFFFFF;
--color-border: var(--mist-d-1);
--color-text: var(--obsidian);
--color-text-muted: var(--obsidian-l-2);
--color-primary: var(--signal);
--color-bg-page: var(--ice);
--color-bg-surface: var(--mist);
}
/* ============================================================================
11. FORM BUTTONS (Mapping auf EMEU Button Hierarchie)
============================================================================ */
.wsf-field-wrapper[data-type="submit"] .wsf-button,
.wsf-field-wrapper[data-type="submit"] .wsf-button-full,
.wsf-field-wrapper[data-type="submit"] .wsf-button-primary,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button,
.woocommerce button.button[type="submit"],
.woocommerce input.button[type="submit"],
.woocommerce-form button[type="submit"] {
background: var(--color-primary);
color: var(--color-bg-page);
border: none;
border-radius: 50px; /* EMEU Pill-Button (aus epem-51-04 Section 6) */
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-ui);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1;
padding: 16px 32px;
min-height: var(--form-field-height, 50px);
text-decoration: none;
transition: var(--form-transition);
}
.wsf-field-wrapper[data-type="submit"] .wsf-button-primary:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-button:hover,
.woocommerce button.button[type="submit"]:hover,
.woocommerce input.button[type="submit"]:hover {
background: var(--color-text);
color: var(--color-bg-page);
}
.wsf-field-wrapper[data-type="submit"] .wsf-button-primary:disabled,
.wc-block-components-checkout-place-order-button:disabled,
.woocommerce button.button[type="submit"]:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.wsf-field-wrapper[data-type="submit"] .wsf-button-full {
width: 100%;
}
.wc-block-components-checkout-place-order-button--loading .wc-block-components-button__text {
visibility: hidden;
}
.wc-block-components-checkout-place-order-button--loading .wc-block-components-spinner {
visibility: visible;
}
/* ============================================================================
12. ERROR STATES UND VALIDATION
============================================================================ */
.wc-block-components-text-input.has-error input,
.wsf-field-wrapper.wsf-invalid .wsf-field,
.wsf-field-wrapper:has(.wsf-field.wsf-invalid) .wsf-field,
.woocommerce .form-row.woocommerce-invalid .input-text,
.emeu-form-field.has-error > input,
.emeu-form-field.has-error > textarea {
border-color: var(--form-error-color, #cc1818);
}
.wc-block-components-text-input.has-error input:focus,
.wsf-field-wrapper.wsf-invalid .wsf-field:focus,
.woocommerce .form-row.woocommerce-invalid .input-text:focus,
.emeu-form-field.has-error > input:focus {
box-shadow: 0 0 0 0.5px var(--form-error-color, #cc1818);
border-color: var(--form-error-color, #cc1818);
}
.wc-block-components-text-input.has-error label,
.wsf-field-wrapper.wsf-invalid .wsf-label,
.wsf-field-wrapper:has(.wsf-field.wsf-invalid) .wsf-label,
.woocommerce .form-row.woocommerce-invalid > label,
.emeu-form-field.has-error > label {
color: var(--form-error-color, #cc1818);
}
/* Fehler-Nachrichten */
.wc-block-components-validation-error,
.wsf-invalid-feedback,
.woocommerce-error li,
.emeu-form-field__error {
color: var(--form-error-color, #cc1818);
font-size: var(--text-meta);
line-height: 1.4;
padding-top: 6px;
display: block;
}
.wsf-invalid-feedback[aria-hidden="true"] {
display: none;
}
.wsf-field-wrapper.wsf-invalid .wsf-invalid-feedback,
.wsf-field-wrapper:has(.wsf-field.wsf-invalid) .wsf-invalid-feedback {
display: block;
}
.wc-block-components-validation-error svg {
fill: currentColor;
height: 16px;
width: 16px;
margin-right: 4px;
vertical-align: middle;
}
/* ============================================================================
13. AUTOFILL FIX (WebKit Yellow Background Override)
============================================================================ */
.wc-block-components-text-input input:-webkit-autofill,
.wc-block-components-text-input input:-webkit-autofill:hover,
.wc-block-components-text-input input:-webkit-autofill:focus,
.wsf-label-position-inside > .wsf-field:-webkit-autofill,
.wsf-label-position-inside > .wsf-field:-webkit-autofill:hover,
.wsf-label-position-inside > .wsf-field:-webkit-autofill:focus,
.woocommerce .form-row .input-text:-webkit-autofill,
.woocommerce .form-row .input-text:-webkit-autofill:hover,
.woocommerce .form-row .input-text:-webkit-autofill:focus,
.emeu-form-field > input:-webkit-autofill,
.emeu-form-field > input:-webkit-autofill:hover,
.emeu-form-field > input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--color-text);
-webkit-box-shadow: 0 0 0 1000px var(--color-bg-field) inset;
transition: background-color 5000s ease-in-out 0s;
}
/* ============================================================================
14. WOOCOMMERCE CONTENT CONTAINER SETUP
============================================================================
Diese Regeln setzen den Content-Container fuer Cart, Checkout und
My-Account auf volle Viewport-Breite mit responsivem Edge-Padding.
Warum hier (im Form System CSS)?
- Im direkten Kontext zu den Form-Magic-Numbers (konzeptionelle Einheit)
- Beide Regelwerke sind feature-spezifisch fuer WooCommerce/Forms
- Zentrale Wartung an einer Stelle im Child-Theme
Warum Body-Class-Selektoren statt Post-IDs?
- WooCommerce Core setzt diese Body-Klassen automatisch via body_class()
Filter-Hooks. Sie aendern sich NIE, unabhaengig davon ob Cart/Checkout
Seiten neu angelegt werden oder Post-IDs wechseln:
.woocommerce-cart — auf der Cart-Seite
.woocommerce-checkout — auf der Checkout-Seite
.woocommerce-account — auf allen My-Account-Endpoints
- Hart verdrahtet in WooCommerce Core — semantisch stabil
- Plus .woocommerce-page als generische WC-Seiten-Kennung
Variables (aus Bricks Style Manager):
- --edge-padding__bp-a (40px) — Desktop (BP-A/BP-X, > 1024px)
- --edge-padding__bp-d (24px) — Tablet und abwaerts (BP-D, <= 1024px)
Fallback-Werte in var() Aufrufen als Safety Net.
============================================================================ */
/* ---- 14.1 Cart Container (body.woocommerce-cart) ---- */
body.woocommerce-cart #brx-content {
width: 100svw;
padding: 0 var(--edge-padding__bp-a, 40px);
overflow: hidden;
}
body.woocommerce-cart #brx-content .wp-block-woocommerce-cart {
margin-left: 0;
width: 100%;
}
/* ---- 14.2 Checkout Container (body.woocommerce-checkout) ---- */
body.woocommerce-checkout #brx-content {
width: 100svw;
padding: 0 var(--edge-padding__bp-a, 40px);
overflow: hidden;
}
body.woocommerce-checkout #brx-content .wp-block-woocommerce-checkout {
margin-left: 0;
width: 100%;
}
/* ---- 14.3 My-Account (alle Endpoints via body.woocommerce-account) ---- */
body.woocommerce-account #brx-content .woocommerce {
padding: 0 var(--edge-padding__bp-a, 40px);
}
/* ---- 14.4 Responsive: BP-D und kleiner (Tablet und abwaerts) ---- */
@media (max-width: 1024px) {
body.woocommerce-cart #brx-content,
body.woocommerce-checkout #brx-content {
padding: 0 var(--edge-padding__bp-d, 24px);
}
body.woocommerce-account #brx-content .woocommerce {
padding: 0 var(--edge-padding__bp-d, 24px);
}
}
/* ============================================================================
15. WOOCOMMERCE GLOBAL STYLE-SET — Typografie + Borders
============================================================================
Vereinheitlicht die WooCommerce Block-Typografie mit dem EMEU Design-System.
Strategie: WC Defaults akzeptieren wo gut, gezielt ueberschreiben wo noetig.
WooCommerce Blocks nutzen WordPress Preset Tokens (--wp--preset--font-size--*)
die WIR hier gezielt fuer Cart/Checkout scopen. Ein Token, alle WC-Blocks
reagieren — kein Selektoren-Durcheinander.
Dieses Style-Set ist die GRUNDLAGE fuer spaetere Erweiterungen:
- Single Product Template (Produkt-Meta, Add-to-Cart, Reviews)
- Shop Archive (Product Cards, Filters)
- My Account Endpoints
Alle zukuenftigen WC-Templates nutzen dieselbe Typografie-Hierarchie.
Entscheidung verifiziert durch Prof. Lumina (S026a, 2026-04-10):
- 13px (small) akzeptiert — Mont ist grundsaetzlich groesser als System-Fonts,
13px in Mont wirkt visuell wie 14-15px in Helvetica
- 20px (medium) fuer Headlines und Total
- 11px (x-small) nur fuer Meta/Kurzbeschreibung (absolute Untergrenze)
- Breadcrumbs fix 14px
- Borders auf var(--color-border) (statt WC color-mix)
============================================================================ */
/* ---- 15.1 WP Preset Font-Size Tokens (scoped auf Cart + Checkout) ----
WC Blocks nutzen intern var(--wp--preset--font-size--small, 14px) etc.
Durch gezieltes Setzen dieser Tokens auf Cart/Checkout-Ebene kontrollieren
wir die GESAMTE WC-Typografie mit drei Zeilen.
NICHT global auf :root setzen — das wuerde WordPress Admin, Gutenberg-
Editor und andere Blocks beeinflussen. Immer body-scoped.
---- */
body.woocommerce-cart #brx-content,
body.woocommerce-checkout #brx-content {
--wp--preset--font-size--x-small: 11px; /* Meta, Kurzbeschreibung */
--wp--preset--font-size--small: 13px; /* Table Content, Labels, Preise */
--wp--preset--font-size--medium: 20px; /* Headlines, Total */
}
/* ---- 15.2 Font-Weight Overrides (Headline-Hierarchie) ----
Problem: WC setzt Headlines (Section Title) und Total beide auf --medium (20px)
mit font-weight: 500. Visuell sind sie dann nicht unterscheidbar.
Fix: Headlines bekommen 600 (EMEU Heading-Konvention), Total bleibt bei 500.
---- */
body.woocommerce-cart #brx-content .wc-block-cart__totals-title {
font-weight: 600;
}
body.woocommerce-checkout #brx-content .wc-block-components-checkout-step__title {
font-weight: 600;
}
body.woocommerce-checkout #brx-content .wc-block-components-checkout-order-summary__title-text {
font-weight: 600;
}
/* ---- 15.3 Breadcrumbs — Fix statt relativ ----
WC/Germanized Pro nutzt .875em (relativ zu Parent) fuer Breadcrumbs.
Das ist fragil und aendert sich wenn Parent-Font sich aendert.
Fix: 14px absolut (= --text-meta Untergrenze).
---- */
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs {
font-size: 14px;
}
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs ol {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
gap: 4px;
}
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs ol li {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-muted);
}
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs ol li.active {
color: var(--color-text);
font-weight: 500;
}
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs ol li.completed a {
color: var(--color-text-muted);
text-decoration: none;
}
body.woocommerce-checkout #brx-content .wc-gzdp-multilevel-checkout-breadcrumbs ol li.completed a:hover {
color: var(--color-text);
}
/* ---- 15.4 Borders und Dividers — auf EMEU Token-System ----
WC nutzt color-mix(in srgb, currentColor 20%, transparent) fuer Borders.
Das ist relativ zum currentColor und kann je nach Kontext anders aussehen.
Wir ersetzen durch var(--color-border) fuer Konsistenz mit unserem System.
Die Selektoren sind bewusst breit (body.woocommerce-*) damit sie auf
ALLEN WC-Seiten greifen, nicht nur Cart/Checkout. Das ist zukunftssicher
fuer Single Product und My Account.
---- */
body.woocommerce-cart #brx-content .wc-block-components-totals-wrapper,
body.woocommerce-checkout #brx-content .wc-block-components-totals-wrapper {
border-top-color: var(--color-border);
}
body.woocommerce-cart #brx-content .wp-block-woocommerce-cart-order-summary-block {
border-bottom-color: var(--color-border);
}
body.woocommerce-checkout #brx-content .wc-block-components-checkout-step {
border-bottom-color: var(--color-border);
}
/* Allgemeine WC-Borders die color-mix nutzen */
body.woocommerce-cart #brx-content [style*="color-mix"],
body.woocommerce-checkout #brx-content [style*="color-mix"] {
/* Kann nicht per Attribut-Selektor auf inline-styles greifen —
deshalb gezielte Klassen-Overrides oben.
Diese Regel ist ein Marker/Kommentar, keine aktive Regel. */
}
/* ---- 15.5 WC Typography Hierarchy — Referenz-Tabelle (als Kommentar) ----
Die verbindliche EMEU WooCommerce Typografie-Hierarchie:
| Stufe | Token | Computed | Verwendung |
|-----------|------------------------------------| ---------|-----------------------------------|
| x-small | --wp--preset--font-size--x-small | 11px | Meta, Kurzbeschreibung |
| small | --wp--preset--font-size--small | 13px | Table Content, Labels, Preise |
| base | (kein Token, fix) | 14px | Breadcrumbs |
| input | (kein Token, fix) | 16px | Form Inputs, Floating Labels |
| medium | --wp--preset--font-size--medium | 20px | Section Headlines, Total |
Gilt fuer: Cart, Checkout, spaeter Single Product, Shop Archive, My Account.
Mont-Faktor: 13px Mont ≈ 14-15px Helvetica visuell.
Headline Weight-Hierarchie:
| Element | Size | Weight |
|----------------------|-------|--------|
| Section Headline | 20px | 600 |
| Order Summary Title | 20px | 600 |
| Total Label + Value | 20px | 500 | ← absichtlich leichter als Headlines
| Table Content | 13px | 400 |
| Meta/Kurzbeschreibung| 11px | 400 |
---- */
/* ============================================================================
END OF EMEU FORM DESIGN SYSTEM v1.1.0
============================================================================ */