/* ─────────────────────────────────────────────────────────────
   widerruf.css — Widerrufsfunktion (Richtlinie (EU) 2023/2673,
   Art. 11a der Richtlinie 2011/83/EU, gilt seit dem 19.06.2026).
   Nur Tokens aus /assets/tokens.css. Keine eigenen Hex-Werte.
   ───────────────────────────────────────────────────────────── */

.wf-wrap {
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  padding-block: 4rem 5rem;
}

.wf-intro__lead {
  font-size: 1.125rem;
  color: var(--text-2);
}

.wf-cortesia {
  color: var(--text-3);
}

/* ── Formular ───────────────────────────────────────────────── */

.wf-form {
  display: grid;
  gap: 1.25rem;
  margin-block-start: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background-color: var(--surface);
}

.wf-campo {
  display: grid;
  gap: 0.375rem;
}

.wf-campo label {
  font-weight: 600;
  color: var(--text);
}

.wf-campo__ayuda {
  font-size: 0.875rem;
  color: var(--text-3);
  margin: 0;
}

.wf-campo input,
.wf-campo textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--text);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
}

.wf-campo input:focus-visible,
.wf-campo textarea:focus-visible {
  outline: 2px solid var(--lima);
  outline-offset: 2px;
}

.wf-campo textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.wf-obligatorio {
  color: var(--danger);
}

.wf-boton {
  justify-self: start;
  padding: 0.85rem 1.6rem;
  font: inherit;
  font-weight: 700;
  color: var(--bg);
  background-color: var(--lima);
  border: 0;
  border-radius: var(--radius-s);
  cursor: pointer;
}

.wf-boton:hover {
  background-color: var(--lima-dark);
}

.wf-boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.wf-estado {
  margin: 0;
  min-height: 1.5rem;
  font-weight: 600;
  color: var(--text-2);
}

.wf-estado--ok {
  color: var(--lima);
}

.wf-estado--error {
  color: var(--danger);
}

/* ── Rechtlicher Hinweis ────────────────────────────────────── */

.wf-nota {
  margin-block-start: 2.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--lima);
  background-color: var(--elevated);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
}

.wf-nota h2 {
  margin-block-start: 0;
  font-size: 1.125rem;
}

.wf-nota p {
  color: var(--text-2);
}

.wf-nota p:last-child {
  margin-block-end: 0;
}

/* ── Abschnitt "Widerrufsrecht" unter einem Kaufblock ────────── */

.wf-bloque {
  margin-block-start: 1.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background-color: var(--elevated);
}

.wf-bloque h3 {
  margin-block-start: 0;
  margin-block-end: 0.4rem;
  font-size: 1rem;
  color: var(--text);
}

.wf-bloque p {
  margin-block-start: 0;
  margin-block-end: 0.85rem;
  font-size: 0.9375rem;
  color: var(--text-2);
}

.wf-bloque__btn {
  display: inline-block;
  padding: 0.6rem 1.1rem;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--lima);
  text-decoration: none;
  background-color: transparent;
  border: 1px solid var(--lima);
  border-radius: var(--radius-s);
}

.wf-bloque__btn:hover {
  color: var(--bg);
  background-color: var(--lima);
}