/* widerruf.css — LR-2b (22.10.2026): the page «Vertrag widerrufen» (widerruf.html). It sits in the AGB page's frame
   (agb_style.css: toprail, hero, footer) and adds the note, the card, the fields, the summary and the buttons.
   Logical properties only (the page mirrors itself under dir="rtl"); every colour with its literal fallback. */

body.wd-page [hidden] { display: none !important; }

.wd-main {
  display: grid;
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 40px;
  padding-inline: 16px;
}

.wd-note {
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-inline-start: 4px solid var(--color-brand, #1f2937);
  border-radius: 12px;
  background: var(--color-surface-soft, #f9fafb);
  color: var(--color-text, #1f2937);
  font-size: 0.95rem;
  line-height: 1.6;
}
.wd-note p { margin: 0 0 6px; }
.wd-note p:last-child { margin-bottom: 0; }

.wd-link { color: var(--color-text-strong, #111827); text-decoration: underline; text-underline-offset: 3px; }

.wd-card {
  display: grid;
  gap: 14px;
  padding: 20px 18px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 16px;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #1f2937);
}
.wd-card__title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 800;
  color: var(--color-text-strong, #111827);
}
.wd-card__title:focus { outline: none; }
.wd-card--done { border-color: var(--color-success, #16a34a); }

.wd-field { display: grid; gap: 6px; }
.wd-label { font-weight: 700; font-size: 0.95rem; color: var(--color-text-strong, #111827); }
.wd-input {
  inline-size: 100%;
  box-sizing: border-box;
  min-block-size: 46px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong, #9ca3af);
  border-radius: 10px;
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #1f2937);
  font: inherit;
  font-size: 1rem;
}
.wd-input--area { min-block-size: 84px; resize: vertical; }
.wd-input[aria-invalid="true"] { border-color: var(--color-danger, #dc2626); }
.wd-hint { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--color-text-muted, #4b5563); }
.wd-error { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-danger-strong, #b91c1c); font-weight: 600; }
.wd-ok { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--color-success-strong, #166534); font-weight: 600; }
.wd-privacy { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--color-text-muted, #4b5563); }

/* the field nobody sees (a script fills it) */
.wd-hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }

.wd-summary { display: grid; gap: 8px; margin: 0; }
.wd-summary__row {
  display: grid;
  gap: 2px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--color-border-subtle, #f1f5f9);
}
.wd-summary__row dt { font-size: 0.85rem; color: var(--color-text-muted, #4b5563); }
.wd-summary__row dd { margin: 0; font-weight: 700; color: var(--color-text-strong, #111827); overflow-wrap: anywhere; }

.wd-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wd-btn {
  min-block-size: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}
.wd-btn--primary { background: var(--color-text-strong, #111827); color: #ffffff; }
.wd-btn--ghost { background: transparent; color: var(--color-text-strong, #111827); border-color: var(--color-border-strong, #9ca3af); }
.wd-btn[disabled] { opacity: 0.6; cursor: wait; }
form.wd-card > .wd-btn { justify-self: start; }

@media (max-width: 480px) {
  .wd-actions .wd-btn, form.wd-card > .wd-btn { inline-size: 100%; }
}

@media print {
  .agb-toprail, .agb-footer, .wd-note, .wd-actions, [data-wd-step="form"], [data-wd-step="review"] { display: none !important; }
  .wd-card--done { border: 0; padding: 0; }
}