/* Widerrufsformular – eigenständiges, neutrales Styling.
   Läuft sowohl als Vollseite (Fallback im neuen Tab) als auch im Modal-Iframe. */

:root {
    --wr-bg: #f5f6f8;
    --wr-surface: #ffffff;
    --wr-text: #1f2733;
    --wr-muted: #5a6677;
    --wr-border: #d7dce3;
    --wr-border-focus: #2563eb;
    --wr-primary: #2563eb;
    --wr-primary-hover: #1d4ed8;
    --wr-danger: #c0392b;
    --wr-success: #15803d;
    --wr-radius: 10px;
    --wr-maxw: 640px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--wr-bg);
    color: var(--wr-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wr-wrap {
    max-width: var(--wr-maxw);
    margin: 0 auto;
    padding: 24px 20px 48px;
}

.wr-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius);
    padding: 28px;
}

h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.05rem; margin: 28px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--wr-border); }
p { margin: 0 0 14px; }
.wr-intro { color: var(--wr-muted); }
.wr-hint { color: var(--wr-muted); font-size: .85rem; }

.wr-recipient {
    background: var(--wr-bg);
    border: 1px solid var(--wr-border);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 8px;
    font-size: .95rem;
}
.wr-recipient strong { display: block; }
.wr-recipient .wr-addr { display: block; color: var(--wr-muted); white-space: pre-line; }

.wr-field { margin: 0 0 16px; }
.wr-row { display: flex; gap: 16px; flex-wrap: wrap; }
.wr-row .wr-field { flex: 1 1 200px; }

label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
label .wr-req { color: var(--wr-danger); }
label .wr-opt { color: var(--wr-muted); font-weight: 400; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--wr-border);
    border-radius: 8px;
    font: inherit;
    color: inherit;
    background: #fff;
}
textarea { resize: vertical; min-height: 84px; }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--wr-border-focus);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.wr-field.has-error input,
.wr-field.has-error textarea { border-color: var(--wr-danger); }
.wr-error { color: var(--wr-danger); font-size: .82rem; margin-top: 5px; }

.wr-radios { display: flex; gap: 20px; flex-wrap: wrap; }
.wr-radios label { font-weight: 400; display: flex; align-items: center; gap: 8px; margin: 0; }
.wr-radios input { width: auto; }

.wr-check { display: flex; gap: 10px; align-items: flex-start; }
.wr-check input { margin-top: 4px; }
.wr-check label { font-weight: 400; }

.wr-declaration {
    font-style: italic;
    color: var(--wr-muted);
    border-left: 3px solid var(--wr-border);
    padding-left: 12px;
    margin: 0 0 16px;
}

.wr-btn {
    display: inline-block;
    width: 100%;
    padding: 13px 18px;
    border: 0;
    border-radius: 8px;
    background: var(--wr-primary);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}
.wr-btn:hover { background: var(--wr-primary-hover); }
.wr-btn:disabled { opacity: .55; cursor: not-allowed; }

.wr-alert { border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; font-size: .92rem; }
.wr-alert-error { background: #fdecea; color: #8a2017; border: 1px solid #f5b7b1; }
.wr-alert-info { background: #fff7e6; color: #8a5a00; border: 1px solid #ffe2a8; }

.wr-success-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--wr-success); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; margin: 0 0 16px;
}
.wr-note {
    background: var(--wr-bg); border: 1px solid var(--wr-border);
    border-radius: 8px; padding: 12px 14px; color: var(--wr-muted);
    font-size: .88rem; margin-top: 16px;
}
.wr-close-btn { margin-top: 20px; }