/*
 * LPE Formulare: Darstellung auf der Website.
 * Alle Regeln hängen an .lpef.lpef (doppelte Klasse), damit Theme- und Elementor-Stile nicht durchschlagen.
 * Farben und Radius kommen als CSS-Variablen aus den Einstellungen bzw. dem Formular.
 * Die breite Darstellung (Schritte links) richtet sich nach der Breite des Formulars (Container-Abfrage),
 * nicht nach dem Bildschirm. So passt es auch in Spalten und Popups.
 */
.lpef.lpef {
  --lpef-primary: #405352;
  --lpef-accent: #ff5600;
  --lpef-radius: 10px;
  --lpef-font: inherit;
  --lpef-ink: #2f3e3d;
  --lpef-muted: #697674;
  --lpef-hint: #9aa2a0;
  --lpef-paper: #f6f3ef;
  --lpef-panel: #ffffff;
  --lpef-rail: #faf8f5;
  --lpef-line: #e6e3dc;
  --lpef-field-line: #d9d5cc;
  --lpef-field-hover: #bdb8ad;
  --lpef-error: #b42318;
  --lpef-tint: color-mix(in srgb, var(--lpef-primary) 9%, #ffffff);
  --lpef-ring: color-mix(in srgb, var(--lpef-primary) 18%, transparent);
  --lpef-ring-error: color-mix(in srgb, var(--lpef-error) 16%, transparent);
  --lpef-field-bg: #ffffff;          /* Eingabefelder, Buttons */
  --lpef-fill: var(--lpef-primary);  /* gefüllt: Hauptschaltfläche, Auswahl, erledigte Schritte */
  --lpef-on-fill: #ffffff;           /* Schrift auf gefüllten Flächen */
  --lpef-link: var(--lpef-primary);
  --lpef-eyebrow: color-mix(in srgb, var(--lpef-primary) 70%, #ffffff);
  --lpef-sunk: var(--lpef-paper);    /* Hinweisflächen */
  --lpef-contact-bg: #ffffff;
  --lpef-alert-bg: color-mix(in srgb, var(--lpef-error) 6%, #ffffff);
  container-type: inline-size;
  display: block;
  width: 100%;
  max-width: 100%;
  font-family: var(--lpef-font);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--lpef-ink);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- Abschirmung gegen Theme-Stile ---------- */
.lpef.lpef *, .lpef.lpef *::before, .lpef.lpef *::after { box-sizing: border-box; }
.lpef.lpef [hidden] { display: none !important; }
.lpef.lpef :is(h3, h4, p, ol, ul, li, fieldset, legend, label, form, small, b) { margin: 0; padding: 0; border: 0; background: none; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: normal; text-transform: none; line-height: inherit; text-align: left; }
.lpef.lpef :is(ol, ul) { list-style: none; }
.lpef.lpef li::before, .lpef.lpef li::marker { content: none; }
.lpef.lpef fieldset { min-width: 0; }
.lpef.lpef label { display: block; vertical-align: baseline; }
.lpef.lpef button { margin: 0; font: inherit; line-height: 1.2; letter-spacing: normal; text-transform: none; text-decoration: none; text-shadow: none; box-shadow: none; white-space: nowrap; min-height: 0; min-width: 0; width: auto; cursor: pointer; }
.lpef.lpef :is(input, select, textarea) { font: inherit; color: inherit; margin: 0; box-shadow: none; min-height: 0; max-width: 100%; letter-spacing: normal; }
.lpef.lpef a { color: var(--lpef-link); text-decoration: underline; text-underline-offset: 2px; }
.lpef.lpef a:hover { color: var(--lpef-accent); }
.lpef.lpef :focus-visible { outline: 2px solid var(--lpef-accent); outline-offset: 2px; }
.lpef.lpef [tabindex="-1"]:focus { outline: none; }
.lpef.lpef .lpef-i { display: block; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.lpef.lpef .lpef-sr { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; opacity: 0; }

/* ---------- Hintergrund und Karte ---------- */
.lpef.lpef .lpef-frame { border-radius: calc(var(--lpef-radius) + 10px); }
.lpef.lpef.lpef--bg-beige .lpef-frame { background: var(--lpef-paper); padding: 24px; }
.lpef.lpef.lpef--bg-white .lpef-frame { background: #ffffff; padding: 24px; }
.lpef.lpef.lpef--bg-primary .lpef-frame { background: var(--lpef-primary); padding: 24px; }
.lpef.lpef.lpef--bg-white .lpef-card { box-shadow: 0 1px 2px rgba(47, 62, 61, .04), 0 8px 24px -12px rgba(47, 62, 61, .14); }
.lpef.lpef .lpef-card { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--lpef-panel); border: 1px solid var(--lpef-line); border-radius: calc(var(--lpef-radius) + 6px); overflow: hidden; }

/* ---------- Kopf und Schrittleiste ---------- */
.lpef.lpef .lpef-rail { display: flex; flex-direction: column; gap: 22px; padding: 22px 20px 0; min-width: 0; }
.lpef.lpef .lpef-eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--lpef-eyebrow); }
.lpef.lpef .lpef-title { margin-top: 4px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; text-wrap: balance; color: var(--lpef-ink); }
.lpef.lpef .lpef-eyebrow + .lpef-title { margin-top: 4px; }
.lpef.lpef .lpef-head > :first-child { margin-top: 0; }
.lpef.lpef .lpef-intro { margin-top: 6px; font-size: 13px; color: var(--lpef-muted); }
.lpef.lpef .lpef-steps { display: none; flex-direction: column; gap: 2px; margin: 0 -8px; }
.lpef.lpef .lpef-stepbtn { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; white-space: normal; }
.lpef.lpef .lpef-stepbtn:disabled { cursor: default; opacity: 1; }
.lpef.lpef .lpef-stepbtn:not(:disabled):hover { background: var(--lpef-panel); }
.lpef.lpef .lpef-dot { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--lpef-field-line); background: var(--lpef-panel); display: grid; place-items: center; font-size: 11px; font-weight: 600; line-height: 1; color: var(--lpef-muted); transition: background .2s, border-color .2s, color .2s; }
.lpef.lpef .lpef-dot .lpef-i { display: none; width: 12px; height: 12px; stroke-width: 2.5; }
.lpef.lpef .lpef-sname { font-size: 13px; font-weight: 500; line-height: 22px; }
.lpef.lpef .lpef-sval { grid-column: 2; font-size: 12px; line-height: 1.4; color: var(--lpef-muted); overflow-wrap: anywhere; }
.lpef.lpef .is-done .lpef-dot { background: var(--lpef-fill); border-color: var(--lpef-fill); color: var(--lpef-on-fill); }
.lpef.lpef .is-done .lpef-dot .lpef-i { display: block; }
.lpef.lpef .is-done .lpef-dot-n { display: none; }
.lpef.lpef .is-current .lpef-stepbtn { background: var(--lpef-panel); box-shadow: 0 0 0 1px var(--lpef-line); }
.lpef.lpef .is-current .lpef-dot { border-color: var(--lpef-accent); color: var(--lpef-accent); }
.lpef.lpef .is-current .lpef-sname { font-weight: 600; }
.lpef.lpef .lpef-note { display: none; gap: 8px; align-items: flex-start; margin-top: auto; font-size: 12px; line-height: 1.5; color: var(--lpef-muted); }
.lpef.lpef .lpef-note .lpef-i, .lpef.lpef .lpef-assure .lpef-i { width: 14px; height: 14px; margin-top: 2px; }

/* ---------- Fortschritt (schmale Darstellung) ---------- */
.lpef.lpef .lpef-pane { display: flex; flex-direction: column; min-width: 0; }
.lpef.lpef .lpef-progress { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 0; }
.lpef.lpef .lpef-pmeta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--lpef-muted); }
.lpef.lpef .lpef-pname { font-weight: 500; color: var(--lpef-ink); text-align: right; }
.lpef.lpef .lpef-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.lpef.lpef .lpef-bar span { display: block; height: 4px; border-radius: 2px; background: var(--lpef-line); transition: background .25s; }
.lpef.lpef .lpef-bar span.is-on { background: var(--lpef-fill); }

/* ---------- Schritte und Raster ---------- */
.lpef.lpef .lpef-body { flex: 1; padding: 22px 20px 24px; }
.lpef.lpef .lpef-step { display: block; }
.lpef.lpef .lpef-step + .lpef-step { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--lpef-line); }
.lpef.is-js .lpef-step + .lpef-step { margin-top: 0; padding-top: 0; border-top: 0; }
.lpef.is-js .lpef-step:not(.is-active) { display: none; }
.lpef.is-js .lpef-step.is-active { animation: lpef-in .22s ease-out; }
@keyframes lpef-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.lpef.lpef .lpef-step-title { float: left; width: 100%; font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--lpef-ink); }
.lpef.lpef .lpef-step-desc { clear: both; padding-top: 4px; color: var(--lpef-muted); }
.lpef.lpef .lpef-grid { clear: both; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; padding-top: 22px; }
.lpef.lpef .lpef-step > .lpef-grid:first-child { padding-top: 0; }
.lpef.lpef .lpef-w-full { grid-column: 1 / -1; }
.lpef.lpef .lpef-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* ---------- Beschriftung, Hilfe, Fehler ---------- */
.lpef.lpef .lpef-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--lpef-ink); }
.lpef.lpef .lpef-opt { font-size: 12px; font-weight: 400; color: var(--lpef-muted); }
.lpef.lpef .lpef-req { color: var(--lpef-accent); }
.lpef.lpef .lpef-help { font-size: 12px; line-height: 1.45; color: var(--lpef-muted); }
.lpef.lpef .lpef-error { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.4; color: var(--lpef-error); }
.lpef.lpef .lpef-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") no-repeat center / contain; }
.lpef.lpef .lpef-heading { padding-top: 14px; border-top: 1px solid var(--lpef-line); font-size: 15px; font-weight: 600; line-height: 1.35; }
.lpef.lpef .lpef-paragraph { font-size: 13px; color: var(--lpef-muted); }
.lpef.lpef .lpef-paragraph p + p { margin-top: 8px; }

/* ---------- Eingabefelder ----------
   Elementor-Kits (Website-Einstellungen → Formularfelder) setzen Farbe, Hintergrund, Rahmen, Abstand und Schrift
   aller Eingabefelder mit hoher Priorität. Deshalb hier mit !important. Hover, Fokus und Fehler ändern nur die
   Variablen --lpef-b (Rahmen) und --lpef-glow (Leuchtrand). */
.lpef.lpef :is(.lpef-input, .lpef-affix) {
  --lpef-b: var(--lpef-field-line);
  --lpef-glow: 0 0 0 0 transparent;
  display: block; width: 100%; height: 42px; margin: 0;
  background-color: var(--lpef-field-bg) !important;
  border: 1px solid var(--lpef-b) !important;
  border-radius: var(--lpef-radius) !important;
  box-shadow: var(--lpef-glow) !important;
  transition: border-color .15s, box-shadow .15s;
}
.lpef.lpef :is(.lpef-input, .lpef-affix-input) {
  color: var(--lpef-ink) !important;
  -webkit-text-fill-color: var(--lpef-ink);
  caret-color: var(--lpef-ink);
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lpef.lpef .lpef-input { padding: 0 12px !important; }
.lpef.lpef textarea.lpef-input { height: auto; min-height: 104px; padding: 10px 12px !important; resize: vertical; line-height: 1.5 !important; }
.lpef.lpef :is(.lpef-input, .lpef-affix-input)::placeholder { color: var(--lpef-hint) !important; -webkit-text-fill-color: var(--lpef-hint); opacity: 1; }
.lpef.lpef .lpef-input:hover, .lpef.lpef .lpef-affix:hover { --lpef-b: var(--lpef-field-hover); }
.lpef.lpef .lpef-input:focus, .lpef.lpef .lpef-affix:focus-within { --lpef-b: var(--lpef-fill); --lpef-glow: 0 0 0 3px var(--lpef-ring); outline: none; }
.lpef.lpef .is-invalid :is(.lpef-input, .lpef-affix) { --lpef-b: var(--lpef-error); }
.lpef.lpef .is-invalid :is(.lpef-input:focus, .lpef-affix:focus-within) { --lpef-glow: 0 0 0 3px var(--lpef-ring-error); }
.lpef.lpef .lpef-input[type=date] { padding-right: 8px !important; }
.lpef.lpef .lpef-affix { display: flex; align-items: center; }
.lpef.lpef .lpef-affix-input { flex: 1; min-width: 0; width: auto !important; height: 100% !important; margin: 0; padding: 0 12px !important; border: 0 !important; border-radius: var(--lpef-radius) !important; background: transparent !important; box-shadow: none !important; font-variant-numeric: tabular-nums; }
.lpef.lpef .lpef-affix-t { padding-right: 12px; font-size: 13px; color: var(--lpef-muted); white-space: nowrap; }
.lpef.lpef .lpef-select .lpef-input { padding-right: 38px !important; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23697674' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; }

/* ---------- Auswahl ---------- */
.lpef.lpef .lpef-choices { display: flex; flex-direction: column; gap: 8px; }
.lpef.lpef .lpef-choice { position: relative; cursor: pointer; color: var(--lpef-ink); }
.lpef.lpef .lpef-ind { flex: none; width: 16px; height: 16px; border: 1px solid var(--lpef-field-hover); border-radius: 50%; background: var(--lpef-field-bg); display: grid; place-items: center; transition: background .15s, border-color .15s, box-shadow .15s; }
.lpef.lpef .lpef-ind--box { border-radius: 4px; }
.lpef.lpef input:checked + .lpef-ind { background: var(--lpef-fill); border-color: var(--lpef-fill); }
.lpef.lpef input:checked + .lpef-ind::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lpef-on-fill); }
.lpef.lpef input:checked + .lpef-ind--box::after { width: 8px; height: 4px; border-radius: 0; background: none; border: solid var(--lpef-on-fill); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg); }
.lpef.lpef input:focus-visible + .lpef-ind { box-shadow: 0 0 0 3px var(--lpef-ring); }
.lpef.lpef .lpef-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lpef.lpef .lpef-choice-t { font-size: 14px; line-height: 20px; }
.lpef.lpef .lpef-choice-d { display: block; font-size: 12px; line-height: 1.4; color: var(--lpef-muted); }

/* Buttons nebeneinander */
.lpef.lpef .lpef-choices--buttons { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.lpef.lpef .lpef-choices--buttons .lpef-choice { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--lpef-field-line); border-radius: var(--lpef-radius); background: var(--lpef-field-bg); color: var(--lpef-ink); transition: border-color .15s, background .15s, color .15s; }
.lpef.lpef .lpef-choices--buttons .lpef-choice-t { font-size: 13px; font-weight: 500; line-height: 1.3; }
.lpef.lpef .lpef-choices--buttons .lpef-choice:hover { border-color: var(--lpef-field-hover); }
.lpef.lpef .lpef-choices--buttons .lpef-choice:has(input:checked) { background: var(--lpef-fill); border-color: var(--lpef-fill); color: var(--lpef-on-fill); }
.lpef.lpef .lpef-choices--buttons .lpef-choice:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--lpef-ring); }
.lpef.lpef .lpef-choice-ic { display: none; width: 9px; height: 5px; margin: -2px 0 0 -2px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.lpef.lpef .lpef-choices--buttons .lpef-choice:has(input:checked) .lpef-choice-ic { display: block; }

/* Kacheln */
.lpef.lpef .lpef-choices--tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.lpef.lpef .lpef-choices--tiles .lpef-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--lpef-field-line); border-radius: var(--lpef-radius); background: var(--lpef-field-bg); transition: border-color .15s, background .15s, box-shadow .15s; }
.lpef.lpef .lpef-choices--tiles .lpef-choice .lpef-ind { margin-top: 2px; }
.lpef.lpef .lpef-choices--tiles .lpef-choice-t { font-weight: 500; }
.lpef.lpef .lpef-choices--tiles .lpef-choice:hover { border-color: var(--lpef-field-hover); }
.lpef.lpef .lpef-choices--tiles .lpef-choice:has(input:checked) { border-color: var(--lpef-fill); background: var(--lpef-tint); box-shadow: inset 0 0 0 1px var(--lpef-fill); }

/* Liste */
.lpef.lpef .lpef-choices--list { gap: 2px; }
.lpef.lpef .lpef-choices--list .lpef-choice { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.lpef.lpef .lpef-choices--list .lpef-choice-text { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }

.lpef.lpef .is-invalid :is(.lpef-choices--buttons .lpef-choice, .lpef-choices--tiles .lpef-choice, .lpef-ind) { border-color: var(--lpef-error); }

/* Einwilligung und einzelnes Häkchen */
.lpef.lpef .lpef-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13px; line-height: 1.5; }
.lpef.lpef .lpef-check .lpef-ind { width: 18px; height: 18px; margin-top: 1px; }
.lpef.lpef .lpef-field--consent .lpef-check { color: var(--lpef-muted); }
.lpef.lpef .lpef-field--checkbox .lpef-check { font-size: 14px; }

/* ---------- Fußzeile ---------- */
.lpef.lpef .lpef-foot { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid var(--lpef-line); }
.lpef.lpef .lpef-count { display: none; font-size: 12px; color: var(--lpef-muted); font-variant-numeric: tabular-nums; }
.lpef.lpef .lpef-actions { display: flex; align-items: center; gap: 8px; flex: 1; }
.lpef.lpef .lpef-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--lpef-radius);
  background: var(--lpef-fill); color: var(--lpef-on-fill); font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.lpef.lpef .lpef-btn:hover, .lpef.lpef .lpef-btn:focus-visible { background: var(--lpef-accent); color: #fff; }
.lpef.lpef .lpef-next, .lpef.lpef .lpef-submit { flex: 1; }
.lpef.lpef .lpef-btn--ghost { flex: none; padding: 0 10px 0 6px; background: none; color: var(--lpef-muted); font-weight: 500; }
.lpef.lpef .lpef-btn--ghost:hover, .lpef.lpef .lpef-btn--ghost:focus-visible { background: none; color: var(--lpef-ink); }
.lpef.lpef .lpef-btn[disabled] { opacity: .85; cursor: progress; }
.lpef.lpef .lpef-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: lpef-spin .7s linear infinite; }
@keyframes lpef-spin { to { transform: rotate(360deg); } }
.lpef.lpef .lpef-assure { display: flex; gap: 8px; align-items: flex-start; padding: 0 20px 16px; font-size: 12px; line-height: 1.5; color: var(--lpef-muted); }

/* ---------- Hinweise ---------- */
.lpef.lpef .lpef-alert { margin-bottom: 18px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--lpef-error) 25%, transparent); border-radius: var(--lpef-radius); background: var(--lpef-alert-bg); color: var(--lpef-error); font-size: 13px; }
.lpef.lpef .lpef-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.lpef.lpef .lpef-preview-note { margin: 0 20px 16px; padding: 8px 12px; border-radius: var(--lpef-radius); background: var(--lpef-sunk); font-size: 12px; color: var(--lpef-muted); }

/* ---------- Danke ---------- */
.lpef.lpef .lpef-done { justify-content: center; }
.lpef.lpef .lpef-success { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 32px 20px 30px; }
.lpef.lpef .lpef-success-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%; background: var(--lpef-tint); color: var(--lpef-fill); }
.lpef.lpef .lpef-success-icon .lpef-i { width: 22px; height: 22px; stroke-width: 2; }
.lpef.lpef .lpef-success-title { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--lpef-ink); }
.lpef.lpef .lpef-success-text { max-width: 520px; color: var(--lpef-muted); }
.lpef.lpef .lpef-success-text p + p { margin-top: 8px; }
.lpef.lpef .lpef-next-steps { display: flex; flex-direction: column; gap: 14px; max-width: 520px; margin-top: 18px; }
.lpef.lpef .lpef-next-steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 12px; }
.lpef.lpef .lpef-next-n { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--lpef-field-line); display: grid; place-items: center; font-size: 11px; font-weight: 600; line-height: 1; color: var(--lpef-muted); }
.lpef.lpef .lpef-next-steps b { font-size: 14px; font-weight: 500; line-height: 22px; }
.lpef.lpef .lpef-next-t { grid-column: 2; font-size: 13px; color: var(--lpef-muted); }

/* ---------- Vorschau-Auswertung (nur im Admin-Test) ---------- */
.lpef.lpef .lpef-pv { display: flex; flex-direction: column; gap: 10px; padding: 24px 20px; }
.lpef.lpef .lpef-pv-title { font-weight: 600; font-size: 15px; }
.lpef.lpef .lpef-pv-scroll { overflow-x: auto; }
.lpef.lpef .lpef-pv table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--lpef-panel); }
.lpef.lpef .lpef-pv th, .lpef.lpef .lpef-pv td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--lpef-line); vertical-align: top; }
.lpef.lpef .lpef-pv th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--lpef-muted); font-weight: 600; }
.lpef.lpef .lpef-pv code { font-size: 12px; background: var(--lpef-sunk); padding: 1px 5px; border-radius: 4px; }
.lpef.lpef .lpef-pv .is-off td { color: var(--lpef-muted); }
.lpef.lpef .lpef-pv details { font-size: 12px; }
.lpef.lpef .lpef-pv pre { white-space: pre-wrap; word-break: break-word; background: var(--lpef-sunk); border-radius: var(--lpef-radius); padding: 10px; font-size: 11px; max-height: 300px; overflow: auto; }
.lpef.lpef .lpef-pv .lpef-btn { align-self: flex-start; flex: none; }

/* ---------- Ansprechpartner ---------- */
.lpef.lpef .lpef-contact { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--lpef-line); border-radius: calc(var(--lpef-radius) + 2px); background: var(--lpef-contact-bg); }
.lpef.lpef .lpef-contact-label { font-size: 11px; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--lpef-muted); }
.lpef.lpef .lpef-contact-main { display: flex; align-items: center; gap: 12px; }
.lpef.lpef .lpef-contact-img { flex: none; display: block; width: 44px; height: 44px; max-width: none; margin: 0; border-radius: 50%; object-fit: cover; box-shadow: none; }
.lpef.lpef .lpef-contact-who { display: flex; flex-direction: column; min-width: 0; }
.lpef.lpef .lpef-contact-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.lpef.lpef .lpef-contact-pos { font-size: 12px; line-height: 1.4; color: var(--lpef-muted); }
.lpef.lpef .lpef-contact-links { display: flex; flex-direction: column; gap: 4px; }
.lpef.lpef .lpef-contact-link { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; line-height: 1.4; color: var(--lpef-ink); text-decoration: none; overflow-wrap: anywhere; }
.lpef.lpef .lpef-contact-link:hover { color: var(--lpef-accent); }
.lpef.lpef .lpef-contact-link .lpef-i { width: 14px; height: 14px; color: var(--lpef-muted); }
.lpef.lpef .lpef-contact--side { display: none; } /* nur in der breiten Darstellung, sonst unten */
.lpef.lpef .lpef-aside { padding: 0 20px 20px; }
.lpef.lpef .lpef-aside .lpef-contact { background: var(--lpef-rail); }
.lpef.lpef .lpef-done:not([hidden]) ~ .lpef-aside { padding-top: 0; }

/* ---------- Dunkles Farbschema (z. B. auf grünem Hintergrund) ---------- */
.lpef.lpef.lpef--dark {
  color-scheme: dark;
  --lpef-ink: #ffffff;
  --lpef-muted: rgba(255, 255, 255, .72);
  --lpef-hint: rgba(255, 255, 255, .42);
  --lpef-panel: color-mix(in srgb, var(--lpef-primary) 86%, #000000);
  --lpef-rail: color-mix(in srgb, var(--lpef-primary) 74%, #000000);
  --lpef-line: rgba(255, 255, 255, .13);
  --lpef-field-line: rgba(255, 255, 255, .24);
  --lpef-field-hover: rgba(255, 255, 255, .45);
  --lpef-field-bg: rgba(255, 255, 255, .06);
  --lpef-error: #ffb4a6;
  --lpef-tint: rgba(255, 255, 255, .1);
  --lpef-ring: rgba(255, 255, 255, .28);
  --lpef-ring-error: rgba(255, 180, 166, .3);
  --lpef-fill: #ffffff;
  --lpef-on-fill: var(--lpef-primary);
  --lpef-link: #ffffff;
  --lpef-eyebrow: rgba(255, 255, 255, .62);
  --lpef-sunk: rgba(255, 255, 255, .06);
  --lpef-contact-bg: rgba(255, 255, 255, .05);
  --lpef-alert-bg: rgba(255, 180, 166, .1);
}
.lpef.lpef.lpef--dark .lpef-card { border-color: rgba(255, 255, 255, .1); }
.lpef.lpef.lpef--dark .lpef-select .lpef-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important; }
.lpef.lpef.lpef--dark .lpef-select option { background: var(--lpef-panel); color: #ffffff; }
.lpef.lpef.lpef--dark .lpef-error::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb4a6' stroke-width='1.75' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E"); }
.lpef.lpef.lpef--dark .lpef-btn:hover, .lpef.lpef.lpef--dark .lpef-btn:focus-visible { background: var(--lpef-accent); color: #ffffff; }
.lpef.lpef.lpef--dark .lpef-btn--ghost:hover, .lpef.lpef.lpef--dark .lpef-btn--ghost:focus-visible { background: none; color: #ffffff; }
.lpef.lpef.lpef--dark :is(.lpef-input, .lpef-affix-input):-webkit-autofill { -webkit-text-fill-color: #ffffff; box-shadow: 0 0 0 40px var(--lpef-panel) inset !important; }
.lpef.lpef.lpef--dark.lpef--bg-white .lpef-card { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .4); }

/* ---------- Ohne JavaScript: alle Schritte untereinander ---------- */
.lpef.lpef:not(.is-js) :is(.lpef-progress, .lpef-steps, .lpef-count) { display: none !important; }

/* ---------- Breite Darstellung: Schritte links ---------- */
@container (min-width: 720px) {
  .lpef.lpef .lpef-card--side { grid-template-columns: 248px minmax(0, 1fr); min-height: 460px; }
  .lpef.lpef .lpef-card--side .lpef-rail { padding: 24px 18px 20px; background: var(--lpef-rail); border-right: 1px solid var(--lpef-line); gap: 26px; }
  .lpef.lpef .lpef-card--side .lpef-rail .lpef-contact--side { display: flex; }
  .lpef.lpef .lpef-card--side :is(.lpef-steps, .lpef-note) { display: flex; }
  .lpef.lpef .lpef-card--side :is(.lpef-progress, .lpef-assure, .lpef-aside:not(.lpef-aside--always)) { display: none; }
  .lpef.lpef .lpef-aside { padding: 0 32px 24px; }
  .lpef.lpef .lpef-aside .lpef-contact { max-width: 360px; }
  .lpef.lpef .lpef-card--side .lpef-count { display: block; }
  .lpef.lpef .lpef-body { padding: 30px 32px 28px; }
  .lpef.lpef .lpef-rail { padding: 26px 32px 0; }
  .lpef.lpef .lpef-progress { padding: 20px 32px 0; }
  .lpef.lpef .lpef-foot { padding: 14px 32px; }
  .lpef.lpef .lpef-assure { padding: 0 32px 16px; }
  .lpef.lpef .lpef-actions { flex: 0 0 auto; margin-left: auto; }
  .lpef.lpef :is(.lpef-next, .lpef-submit) { flex: 0 0 auto; }
  .lpef.lpef .lpef-success { padding: 44px 32px; }
  .lpef.lpef .lpef-pv { padding: 28px 32px; }
  .lpef.lpef .lpef-preview-note { margin: 0 32px 16px; }
}
/* Sehr schmal: halbe Felder untereinander, weniger Rand */
@container (max-width: 479px) {
  .lpef.lpef .lpef-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lpef.lpef.lpef--bg-beige .lpef-frame, .lpef.lpef.lpef--bg-white .lpef-frame { padding: 12px; }
}
/* Kein automatisches Hineinzoomen auf dem iPhone */
@media (max-width: 600px) {
  .lpef.lpef :is(.lpef-input, .lpef-affix-input) { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lpef.is-js .lpef-step.is-active { animation: none; }
  .lpef.lpef .lpef-bar span { transition: none; }
}