/* Widerrufsfunktion (§ 356a BGB): Knopf "Vertrag widerrufen" und die Seiten
   unter /widerrufen/ (webshop/widerruf). Farben aus dem Markenpaket, auf
   dunklen Fußzeilen die helle Fassung. Kontrast jeweils über 4,5:1. */

/* "a.wr-knopf:not(.btn)" hält mit ".ks a:not(.btn)" aus konto.css mit;
   die Datei wird danach geladen und gewinnt so bei gleicher Spezifität */
.wr-knopf,
a.wr-knopf:not(.btn),
a.wr-knopf:not(.btn):visited {
    display: inline-block;
    padding: .65em 1.25em;
    border: 2px solid var(--d-brand, #1f3d2b);
    border-radius: var(--d-btn-radius, 4px);
    background: var(--d-brand, #1f3d2b);
    color: var(--d-on-brand, #fff);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.wr-knopf:hover,
.wr-knopf:focus-visible,
a.wr-knopf:not(.btn):hover,
a.wr-knopf:not(.btn):focus-visible {
    background: var(--d-on-brand, #fff);
    color: var(--d-brand, #1f3d2b);
    text-decoration: none;
}

.wr-knopf:focus-visible {
    outline: 3px solid var(--d-brand, #1f3d2b);
    outline-offset: 3px;
}

/* Fußzeilen setzen Linkfarben mit ".sf a" bzw. ".footer a" (auch :hover),
   deshalb hier mit Elternklasse */
.wr-fuss a.wr-knopf--hell,
.wr-fuss a.wr-knopf--hell:visited {
    border-color: #fff;
    background: #fff;
    color: #141716;
}

.wr-fuss a.wr-knopf--hell:hover,
.wr-fuss a.wr-knopf--hell:focus-visible {
    background: transparent;
    color: #fff;
}

.wr-fuss a.wr-knopf--hell:focus-visible {
    outline-color: #fff;
}

.wr-knopf--gross {
    font-size: 1.125rem;
    padding: .8em 1.6em;
}

/* in der Fußzeile: eigene Zeile über den Spalten, damit er nicht zwischen
   Links untergeht */
.wr-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0 0 2rem;
}

.wr-fuss p {
    margin: 0;
}

.wr-kasten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border: 1px solid #d5d8d6;
    border-radius: 6px;
    background: #f6f7f6;
}

.wr-kasten p {
    margin: 0;
}

/* Formular und Eingangsseite */
.wr-seite {
    max-width: 40rem;
    margin-bottom: 3rem;
    font-size: 1rem;
}

.wr-formular {
    margin: 1.5rem 0;
}

.wr-feld {
    margin-bottom: 1.25rem;
}

.wr-feld fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.wr-label,
.wr-seite legend.wr-label {
    display: block;
    margin-bottom: .25rem;
    font-weight: 600;
    font-size: 1rem;
}

.wr-pflicht {
    font-weight: 400;
}

.wr-hilfe {
    margin: 0 0 .35rem;
    color: #4b524e;
    font-size: .9375rem;
}

/* mit .wr-seite davor, sonst gewinnt konto.css (".ks input[type=text]") */
.wr-seite .wr-feld input[type="text"],
.wr-seite .wr-feld input[type="email"],
.wr-seite .wr-feld textarea {
    display: block;
    width: 100%;
    padding: .6rem .75rem;
    border: 1px solid #6b726e;
    border-radius: 4px;
    font-size: 1rem;
    background: #fff;
    color: #141716;
}

.wr-seite .wr-feld input:focus,
.wr-seite .wr-feld textarea:focus {
    outline: 3px solid var(--d-brand, #1f3d2b);
    outline-offset: 1px;
}

.wr-option,
.wr-seite label.wr-option {
    display: flex;
    gap: .5rem;
    align-items: baseline;
    margin: .35rem 0;
    font-weight: 400;
}

.wr-option input {
    width: 1.1rem;
    height: 1.1rem;
}

.wr-seite .wr-feld--fehler input[type="text"],
.wr-seite .wr-feld--fehler input[type="email"],
.wr-seite .wr-feld--fehler textarea {
    border: 2px solid #b3261e;
}

.wr-fehler {
    margin: 0 0 .35rem;
    color: #b3261e;
    font-weight: 600;
}

.wr-meldung {
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--d-brand, #1f3d2b);
    background: #f6f7f6;
}

.wr-meldung p {
    margin: 0 0 .5rem;
}

.wr-meldung p:last-child {
    margin-bottom: 0;
}

.wr-meldung--fehler {
    border-left-color: #b3261e;
    background: #fdf1f0;
}

.wr-titel {
    font-size: 1.25rem;
    margin: 1.5rem 0 .75rem;
}

.wr-angaben {
    margin: 0 0 1.5rem;
}

.wr-angaben > div {
    display: grid;
    grid-template-columns: minmax(8rem, 14rem) 1fr;
    gap: .25rem 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid #e2e4e3;
}

.wr-angaben dt {
    font-weight: 600;
}

.wr-angaben dd {
    margin: 0;
}

@media (max-width: 575px) {
    .wr-angaben > div {
        grid-template-columns: 1fr;
    }

    .wr-knopf--gross {
        width: 100%;
    }
}