/* KDS Anfrage-Funnel – nutzt die Theme-Tokens (mit Fallbacks). */
.rmanf{
  --_ink: var(--ink, #111);
  --_accent: var(--accent, #111);
  --_line: var(--line, #e5e2dc);
  --_tint: var(--tint, #f5f3f0);
  --_muted: var(--muted, #8a857d);
  --_bg: var(--bg, #fff);
  --_disp: var(--font-display, Georgia, serif);
  max-width: 640px;
  margin-inline: auto;
}

/* Fortschritt */
.rmanf__progress{ height: 2px; background: var(--_line); margin-bottom: clamp(28px,5vh,52px); overflow: hidden; }
.rmanf__bar{ display: block; height: 100%; background: var(--_ink); transition: width .45s cubic-bezier(.22,.61,.36,1); }

/* Schritte */
.rmanf__step{ border: 0; margin: 0; padding: 0; min-inline-size: 0; display: none; animation: rmanfIn .5s ease both; }
.rmanf__step.is-active{ display: block; }
@keyframes rmanfIn{ from{ opacity: 0; transform: translateY(10px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .rmanf__step{ animation: none; } .rmanf__bar{ transition: none; } }

.rmanf__eyebrow{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--_muted); margin: 0 0 .8em; }
.rmanf__q{ font-family: var(--_disp); font-weight: 400; font-size: clamp(1.6rem,1.2rem + 1.6vw,2.4rem); line-height: 1.18; color: var(--_ink); margin: 0 0 .8em; }
.rmanf__hint{ color: var(--_muted); margin: -.3em 0 1.2em; font-size: .98rem; }

/* Auswahl-Kacheln */
.rmanf__opts{ display: grid; gap: 12px; }
.rmanf__opt{
  appearance: none; cursor: pointer; text-align: left;
  background: var(--_bg); border: 1px solid var(--_line);
  padding: 18px 20px; font-size: 1.05rem; color: var(--_ink);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.rmanf__opt:hover{ border-color: var(--_ink); transform: translateX(3px); }
.rmanf__opt.is-chosen{ background: var(--_ink); color: #fff; border-color: var(--_ink); }

/* Eingaben */
.rmanf__label{ display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--_muted); margin: 0 0 14px; }
.rmanf__input{
  display: block; width: 100%; margin-top: 7px; box-sizing: border-box;
  background: var(--_bg); border: 1px solid var(--_line); color: var(--_ink);
  padding: 13px 14px; font: inherit; font-size: 1rem;
  transition: border-color .18s ease;
}
.rmanf__input:focus{ outline: none; border-color: var(--_ink); }
textarea.rmanf__input{ resize: vertical; }
.rmanf__row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px){ .rmanf__row{ grid-template-columns: 1fr; } }

.rmanf__check{ display: flex; gap: 11px; align-items: flex-start; font-size: .92rem; color: var(--_muted); line-height: 1.5; margin: 4px 0 4px; }
.rmanf__check input{ margin-top: 3px; flex: 0 0 auto; }
.rmanf__check a{ color: var(--_ink); }

.rmanf__hp{ position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Zusammenfassung auf dem Kontakt-Schritt */
.rmanf__summary{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.rmanf__chip{ font-size: .8rem; letter-spacing: .02em; background: var(--_tint); border: 1px solid var(--_line); color: var(--_ink); padding: 6px 11px; border-radius: 999px; }

/* Navigation */
.rmanf__nav{ display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; }
.rmanf__back{ appearance: none; background: none; border: 0; cursor: pointer; color: var(--_muted); font: inherit; font-size: .95rem; padding: 6px 0; margin-top: 22px; }
.rmanf__back:hover{ color: var(--_ink); }
.rmanf__step[data-step="1"] .rmanf__back{ display: none; }

.rmanf__next, .rmanf__submit{
  appearance: none; cursor: pointer; font: inherit; font-size: .98rem;
  letter-spacing: .02em; background: var(--_ink); color: #fff; border: 1px solid var(--_ink);
  padding: 14px 26px; transition: opacity .18s ease;
}
.rmanf__next:hover, .rmanf__submit:hover{ opacity: .84; }
.rmanf__next[disabled], .rmanf__submit[disabled]{ opacity: .4; cursor: not-allowed; }
.rmanf__nav .rmanf__back{ margin-top: 0; }

.rmanf__error{ color: #b3261e; font-size: .9rem; margin: 14px 0 0; min-height: 1em; }

/* Erfolg */
.rmanf__done{ text-align: center; padding: clamp(20px,5vh,44px) 0; animation: rmanfIn .5s ease both; }
.rmanf__donemark{
  width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.6rem;
  background: var(--_ink); color: #fff;
}
.rmanf__done p{ color: var(--_muted); max-width: 42ch; margin-inline: auto; line-height: 1.6; }

/* =====================================================================
   Korrektur: Das Eltern-Theme (Bricks) setzt `input{ width:100% }`.
   Dadurch wurde die Checkbox 640px breit und quetschte den Text.
   ===================================================================== */
.rmanf__check{
  display:grid; grid-template-columns:20px 1fr; align-items:start; gap:12px;
  margin:10px 0 6px; text-align:left;
}
.rmanf__check input[type="checkbox"]{
  width:18px !important; height:18px; min-width:0; margin:3px 0 0; padding:0;
  flex:0 0 auto; display:inline-block; accent-color:var(--_ink);
}
.rmanf__check span{ display:block; line-height:1.55; }

/* Mobile: „Zurück" bequem tippbar (war 41px). */
@media (max-width:720px){
  .rmanf__back{ min-height:44px; display:inline-flex; align-items:center; }
  .rmanf__submit,.rmanf__next{ min-height:52px; }
}