/* Widerruf (2026-10-10): Knopf „Vertrag widerrufen“ auf /widerruf und die Widerrufsfunktion /vertrag-widerrufen
   (Formular, Fehler, Bestätigung). Eigene Datei, im Inhalt der Textseite eingebunden (link im body ist erlaubt);
   nutzt die Farben aus shop.css bzw. stil-*.css. */

/* ---------- /widerruf: Knopf oben und Online-Adresse ---------- */
/* Knöpfe im Rechtstext: .rechtstext a (petrol, unterstrichen) würde den Knopftext sonst einfärben */
.rechtstext a.btn { color: #fff; text-decoration: none; }
.rechtstext a.btn:hover { color: #fff; }
.rechtstext a.btn-hell, .rechtstext a.btn-hell:hover { color: var(--ink); }
.wr-knopf-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 24px; }
.wr-knopf-zeile .btn { min-width: 220px; }
.wr-knopf-zeile p { margin: 0; font-size: 15px; color: var(--muted); }
.wr-adresse { overflow-wrap: anywhere; }

/* ---------- Formular ---------- */
.wr-einleitung { font-size: 17px; }
.wr-form { margin: 28px 0 8px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--papier, #fff); }
.wr-form h2 { margin-top: 0; }
.wr-feld { display: grid; gap: 6px; margin: 0 0 18px; }
.wr-feld label { font: 700 15px/1.35 var(--titel); color: var(--ink); }
.wr-frei { font: 400 14px/1.35 "Open Sans", system-ui, sans-serif; color: var(--muted); }
.wr-hilfe { margin: 0 !important; font-size: 14px; line-height: 1.45; color: var(--muted); }
.wr-feld input, .wr-feld textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1.5px solid #b9c9cb; border-radius: 12px; background: #fff;
  color: var(--ink); font: 16px/1.4 "Open Sans", system-ui, sans-serif;   /* 16 px: kein Zoom beim Antippen (iOS) */
}
.wr-feld textarea { min-height: 96px; resize: vertical; }
.wr-feld input:focus, .wr-feld textarea:focus { border-color: var(--petrol); outline: 3px solid color-mix(in srgb, var(--wt-akzent) 25%, transparent); outline-offset: 0; }
.wr-ungueltig input, .wr-ungueltig textarea { border-color: var(--warn); }
.wr-fehler-text { margin: 0 !important; font-size: 14px; font-weight: 600; color: var(--warn); }
.wr-fehler-text::before { content: "! "; }
.wr-senden { width: 100%; margin-top: 4px; font-size: 16px; }
@media (min-width: 641px) { .wr-senden { width: auto; min-width: 260px; } }
.wr-klein { margin: 14px 0 0 !important; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Feld nur für Programme – für Menschen unsichtbar, auch für Vorleseprogramme */
.wr-honig { position: absolute !important; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.wr-fehlerbox { margin: 20px 0; padding: 14px 18px; border-left: 4px solid var(--warn); border-radius: 12px; background: #fdeceb; color: #5f1410; }
.wr-fehlerbox p { margin: 0 0 6px; }
.wr-fehlerbox p:last-child { margin: 0; }
.wr-fehlerbox ul { margin: 6px 0 0; }
.wr-fehlerbox a { color: #5f1410; font-weight: 600; }

/* ---------- Bestätigung ---------- */
.wr-ok { margin: 0 0 20px; padding: 16px 20px; border-left: 4px solid #2e7d4f; border-radius: 12px; background: #e8f5ec; color: #173b26; }
.wr-ok p { margin: 0; }
.wr-ok-titel { display: flex; align-items: center; gap: 10px; margin-bottom: 6px !important; font: 800 19px/1.3 var(--titel); color: #173b26; }
.wr-ok-titel svg { flex: none; color: #2e7d4f; }
.wr-erklaerung { margin: 0 0 16px; padding: 14px 18px; border-radius: 12px; background: var(--bg-2); font-style: italic; overflow-wrap: anywhere; }
.wr-erklaerung p { margin: 0; }
.wr-daten { display: grid; gap: 0; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--papier, #fff); }
.wr-daten div { display: grid; grid-template-columns: minmax(150px, 34%) 1fr; gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--line); }
.wr-daten div:first-child { border-top: 0; }
.wr-daten dt { font-weight: 700; color: var(--ink); }
.wr-daten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .wr-daten div { grid-template-columns: 1fr; } }
.wr-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.wr-drucken { display: none; }
.js .wr-drucken { display: inline-flex; }

@media print {
  .kopfzeile, .fuss, .wa-knopf, .toast-bereich, .wr-knoepfe, .skip { display: none !important; }
  .wr-ok, .wr-erklaerung { border: 1px solid #999; }
}