:root {
    --grund: #f7f4ef;
    --karte: #ffffff;
    --text: #2b2724;
    --leise: #6b625b;
    --akzent: #7a4b2a;
    --akzent-hell: #f1e6dc;
    --rand: #e3dbd2;
    --hinweis: #8a3b12;
    color-scheme: light;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--grund);
    color: var(--text);
    font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
}

.kopf { width: 100%; max-width: 560px; padding: 28px 0 12px; }
.marke { font-size: 1.05rem; letter-spacing: .04em; color: var(--leise); }

.karte {
    width: 100%;
    max-width: 560px;
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 14px;
    padding: 28px 24px 32px;
}

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 18px; font-weight: 600; }

p { margin: 0 0 14px; white-space: pre-line; }

.meldung { background: var(--akzent-hell); border-radius: 10px; padding: 12px 14px; }
.meldung.hinweis { background: #fbeee6; color: var(--hinweis); }

form { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }

fieldset.listen { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
legend { font-weight: 600; margin-bottom: 6px; padding: 0; }

.wahl { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; }
.wahl input { transform: translateY(2px); width: 18px; height: 18px; accent-color: var(--akzent); }
.zusatz { color: var(--leise); font-size: .9rem; }

.feld { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.feld input {
    font: inherit;
    font-weight: 400;
    padding: 10px 12px;
    border: 1px solid var(--rand);
    border-radius: 8px;
    background: #fff;
    color: var(--text);
}
.feld input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }

.einwilligung { font-size: .92rem; color: var(--leise); }

button {
    font: inherit;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 10px;
    border: 1px solid var(--akzent);
    background: var(--akzent);
    color: #fff;
    cursor: pointer;
}
button.zweitrangig { background: transparent; color: var(--akzent); }
.knoepfe { display: flex; gap: 12px; flex-wrap: wrap; }
/* Unterstuetzer E142 (Mikael 2026-11-09): /p/ buttons one below the other, "Alles abonnieren" the largest. */
.knoepfe.untereinander { flex-direction: column; align-items: stretch; }
button.gross { padding: 16px 18px; font-size: 1.1rem; }
button.klein { align-self: center; padding: 8px 14px; font-size: .92rem; font-weight: 400; background: transparent; color: var(--leise); border-color: var(--rand); }

a { color: var(--akzent); }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.fuss { width: 100%; max-width: 560px; padding: 18px 0 32px; display: flex; gap: 18px; font-size: .9rem; }
.fuss a { color: var(--leise); }