/* Erstkontakt · Abschluss-Zustände (Auftrag B-website-test, Kundenzusatz „Bestätigungsbildschirme im neuen Design“).
   Neu: Premium-Pfad (Gesamteindruck 10 / 10), Danke nach „Befund per E-Mail“, Hinweis nach dem Termin-Knopf.
   Bauart wie das Danke des Website-Tests (CI-Fläche mit Ring, Haken-Kreis, Kicker, Titel, Schritte). Nur Tokens, mobil zuerst. */

.ek-premium, .ek-danke {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-14); align-items: start;
  padding: var(--space-20) var(--space-18); border-radius: var(--radius-card);
  background: var(--color-accent-a08); box-shadow: var(--ring-panel-accent), var(--shadow-panel);
  animation: dg-ein var(--dur-state-long) var(--ease-out);
}
.ek-premium[hidden], .ek-danke[hidden] { display: none; }
.ek-danke:focus, .ek-premium:focus { outline: none; }
.ek-premium { background: var(--color-warm-a10); box-shadow: var(--ring-stamp-warm), var(--shadow-panel); }
.ek-zustand-icon { display: grid; place-items: center; width: var(--space-40); height: var(--space-40); border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); }
.ek-zustand-icon--warm { background: var(--color-warm); color: var(--color-on-warm); }
.ek-zustand-icon svg { width: var(--size-icon); height: var(--size-icon); }
.ek-zustand-text { display: grid; gap: var(--space-10); justify-items: start; min-width: 0; }
.ek-zustand-text h3 { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.ek-zustand-text > p:not(.eyebrow):not(.mikro) { font-size: var(--font-size-ui); line-height: var(--leading-body); color: var(--color-text-secondary); text-wrap: pretty; }
.ek-zustand-text > p b { color: var(--color-text); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.ek-zustand-text > p[hidden] { display: none; }
.ek-zustand-schritte { display: grid; gap: var(--space-8); margin: var(--space-4) 0; }
.ek-zustand-schritte li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-10); font-size: var(--font-size-small); line-height: var(--leading-snug); color: var(--color-text-secondary); }
.ek-zustand-schritte .mono { font-size: var(--font-size-mono-2xs); color: var(--color-accent-soft); padding-top: var(--space-1); }
.ek-zustand-aktion { display: flex; flex-wrap: wrap; gap: var(--space-10) var(--space-12); padding-top: var(--space-4); }
.ek-premium .eyebrow::before { background: var(--color-warm); }

/* Premium-Pfad aktiv: die übrigen Fragen und „Weiter“ treten zurück (wie die App) */
.ek-tafel.ist-premium .ek-frage + .ek-frage, .ek-tafel.ist-premium .ek-tafel-fuss { display: none; }

/* Danke ersetzt das Mail-Formular */
.ek-tafel.ist-gesendet .ek-wahl, .ek-tafel.ist-gesendet .ek-aktion { display: none; }

@media (min-width: 560px) {
  .ek-premium, .ek-danke { padding: var(--space-24) var(--space-24); gap: var(--space-18); }
}
@media (prefers-reduced-motion: reduce) { .ek-premium, .ek-danke { animation: none; } }

/* schmale Breiten: Symbol über dem Text, Knöpfe dürfen umbrechen (sonst bestimmt die Knopfbreite die Spalte) */
.ek-zustand-text { grid-template-columns: minmax(0, 1fr); }
.ek-zustand-aktion .btn { white-space: normal; max-width: 100%; text-align: left; }
@media (max-width: 559px) {
  .ek-premium, .ek-danke { grid-template-columns: minmax(0, 1fr); }
}

/* r1 (Kritik kritik-strecken.md) */
/* gesendet: die Frage „Wie möchten Sie weitermachen?“ ist beantwortet */
.ek-tafel.ist-gesendet .ek-tafel-kopf .ek-tafel-h, .ek-tafel.ist-gesendet .ek-tafel-kopf .lead { display: none; }
/* Premium: ruhige App-Fläche, Bernstein nur als Plakette und Kicker-Strich (Style-Lock: Bernstein sparsam) */
.ek-premium { background: var(--color-app-panel); box-shadow: var(--ring-hairline), var(--shadow-panel); }