/*
 * Einstreu Qualität – Kundenseite.
 *
 * Regel (Nachtrag 0.1.8, Punkt 5): Der Kundenbereich schreibt KEINE Farben vor, er erbt sie
 * vom Theme. Es gibt hier keinen festen Wert für color und keine feste Hintergrundfarbe.
 * - Gedämpfter Text: color: inherit + opacity: .75 (hell wie dunkel lesbar).
 * - Abhebung: neutrales Grau mit niedriger Deckkraft (--esq-flaeche). Flächen nie
 *   ineinander schachteln – jede weitere Schicht kostet auf dunklem Grund Kontrast.
 * - Rahmen: currentColor mit niedriger Deckkraft (color-mix). Kann ein Browser color-mix
 *   nicht, wird die Deklaration ungültig und der Rahmen fällt auf currentColor zurück.
 * - Statusmarken gibt es im Kundenbereich nicht (Stand steht als Text). Kämen welche dazu,
 *   müssten sie Vorder- UND Hintergrundfarbe mitbringen.
 * Prüfung: tests/test-v018-darstellung.php (statisch) und die Kontrastmessung im Bericht.
 */
.esq-kunde {
  --esq-flaeche: rgba(128, 128, 128, .12);
  --esq-linie-cm: color-mix(in srgb, currentColor 35%, transparent);
  --esq-akzent-cm: color-mix(in srgb, currentColor 70%, transparent);
}
.esq-kunde [hidden] { display: none !important; }
.esq-kunde fieldset.esq-schritt { border: 1px solid; border-color: var(--esq-linie-cm); border-radius: 8px; padding: 16px; margin: 0 0 16px; }
.esq-kunde legend { font-weight: 700; padding: 0 6px; }
.esq-kunde label { display: block; margin: 0 0 4px; }
.esq-kunde input[type="text"], .esq-kunde input[type="tel"], .esq-kunde input[type="date"], .esq-kunde select, .esq-kunde textarea { width: 100%; max-width: 32rem; box-sizing: border-box; }
.esq-kunde .esq-wahl { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.esq-kunde .esq-gruende { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.esq-kunde .esq-grund { display: flex; gap: 8px; align-items: flex-start; border: 1px solid; border-color: var(--esq-linie-cm); border-radius: 8px; padding: 10px; cursor: pointer; background: var(--esq-flaeche); }
.esq-kunde .esq-grund small { display: block; color: inherit; opacity: .75; }
.esq-kunde .esq-grund:has(input:checked) { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.esq-kunde .esq-hinweiskasten { border-left: 4px solid; border-left-color: var(--esq-akzent-cm); background: var(--esq-flaeche); padding: 12px 14px; margin: 0 0 12px; }
.esq-kunde .esq-klein { font-size: .9em; color: inherit; opacity: .75; }
/* Kästen mit Knöpfen ohne Fläche: Theme-Knöpfe sind oft durchsichtig mit farbiger Schrift – auf
   der Fläche fiele Karamell auf Betheme von 4,79:1 auf 4,16:1. Der kräftige Rahmen hebt ab. */
.esq-kunde .esq-angebot { border: 2px solid currentColor; border-radius: 8px; padding: 16px; margin: 16px 0; }
.esq-kunde .esq-angebot h3 { margin-top: 0; }
.esq-kunde .esq-angebot-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.esq-kunde .esq-gutschein { border: 1px dashed currentColor; padding: 12px 16px; border-radius: 8px; margin: 16px 0; }
.esq-kunde .esq-code { font-size: 1.4em; font-weight: 700; letter-spacing: .08em; }
.esq-kunde .esq-zeitleiste { list-style: none; padding: 0; margin: 0 0 16px; border-left: 2px solid; border-left-color: var(--esq-akzent-cm); }
.esq-kunde .esq-zeitleiste li { padding: 4px 0 4px 14px; position: relative; }
.esq-kunde .esq-zeitleiste li::before { content: ""; position: absolute; left: -6px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.esq-kunde .esq-zeitleiste time { color: inherit; opacity: .75; margin-right: 6px; }
.esq-kunde .esq-bestellungen { list-style: none; padding: 0; }
.esq-kunde .esq-bestellungen li { margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.esq-seite .esq-rahmen { max-width: 860px; margin: 32px auto; padding: 0 16px; }
.esq-knopf-zeile { margin-top: 16px; }
/* Vorschau: gedreht per CSS, HEIC als Download (Spec 4.2) */
.esq-kunde .esq-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.esq-vorschau { display: block; text-decoration: none; color: inherit; font-size: .9em; }
.esq-vorschau-rahmen { display: flex; align-items: center; justify-content: center; width: 100%; height: 130px; overflow: hidden; border-radius: 6px; background: rgba(128, 128, 128, .12); }
.esq-vorschau-rahmen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.esq-vorschau-pdfmarke { font-weight: 700; }
.esq-vorschau-text { display: block; margin-top: 4px; }
.esq-vorschau-download { display: flex; flex-direction: column; justify-content: center; min-height: 130px; padding: 8px; border: 1px dashed currentColor; border-radius: 6px; }
/* Foto nachreichen (Spec 4.2b) */
.esq-kunde .esq-nachreichen { border: 2px dashed currentColor; border-radius: 8px; padding: 16px; margin: 16px 0; }
.esq-kunde .esq-nachreichen h3 { margin-top: 0; }
.esq-kunde .esq-nachreichen fieldset.esq-schritt { border-style: dashed; }
/*
 * Listen erben die Textfarbe ihrer Umgebung. Betheme färbt im Inhalt jede Liste fest
 * (`body.content-brightness-dark .the_content_wrapper ul { color: #8B96A0 }`, `ol` #737E86) –
 * auf dunklem Grund 4,38:1 bzw. 3,18:1. `inherit` ist keine feste Farbe; `!important`, weil die
 * Theme-Regel spezifischer ist. Gemessen 04.11.2026 gegen das Live-CSS von einstreu.pro.
 */
.esq-kunde ul, .esq-kunde ol, .esq-kunde li { color: inherit !important; }
/* In Meldungskästen (WooCommerce bringt Vorder- und Hintergrund mit) wird nicht gedämpft:
   .75 auf #515151/#f6f5f8 ergäbe 3,95:1. */
.esq-kunde :is(.woocommerce-error, .woocommerce-message, .woocommerce-info) .esq-klein { opacity: 1; }
/*
 * Auswahlfelder (0.1.9, Punkt 6): Betheme färbt sie #8e8e8e – 4,03:1 auf #303030. Im eigenen Formular
 * erben sie die Textfarbe der Umgebung (8,22:1). Die Textfelder bleiben beim Theme (#9b9b9b, 4,75:1 –
 * gemessen, über 4,5:1; die Theme-Regel ist dort ohnehin spezifischer).
 * Die AUFGEKLAPPTE Liste zeichnet der Browser selbst; der Hintergrund des Theme-Feldes ist durchsichtig,
 * dort also weiß. Darum tragen die Optionen das System-Farbpaar des Browsers (CanvasText auf Canvas) –
 * keine feste Farbe, sondern das Paar, mit dem der Browser auch seine eigenen Listen zeichnet.
 */
.esq-kunde select { color: inherit; }
.esq-kunde select option { color: CanvasText; background-color: Canvas; }