/* 17.10.2026: Große Bedienelemente und ruhige Kontraste machen Kundenanliegen auf kleinen Handys lesbar. */
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #203a32; background: #f4f5ef; line-height: 1.6; }
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1.25rem, env(safe-area-inset-right)); border-bottom: 1px solid #d8ded5; }
.marke { font-size: 1.35rem; font-weight: 750; letter-spacing: .1em; white-space: nowrap; }
.marke span { margin-left: .5rem; font-size: .95rem; font-weight: 450; letter-spacing: 0; }
main { max-width: 44rem; margin: 0 auto; padding: 2rem 1.25rem; min-height: 75vh; }
.rubrik { font-size: .72rem; letter-spacing: .18em; font-weight: 750; margin: 0; color: #576c60; }
h1 { font-size: clamp(1.9rem, 7vw, 2.7rem); line-height: 1.16; letter-spacing: -.035em; margin: .75rem 0 1.25rem; max-width: 20ch; }
p { margin: 1rem 0; }
button, input { font: inherit; }
button { cursor: pointer; border: 1px solid transparent; border-radius: .65rem; background: #163b32; color: #fff; padding: .8rem 1.15rem; min-height: 48px; font-weight: 650; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #9b6422; outline-offset: 3px; }
section > button, form > button { width: 100%; margin-top: .75rem; }
.dezent { background: transparent; color: #163b32; border-color: #bac7bb; }
.hinweis, footer { color: #5c6b60; font-size: .85rem; }
#meldung:not(:empty) { background: #fff1d6; border-left: 3px solid #9b6422; padding: .85rem 1rem; }
#abgleich { margin-top: 2rem; border-top: 1px solid #bac7bb; padding-top: .75rem; }
#abgleichcode { display: block; font-size: clamp(2.7rem, 13vw, 4.5rem); letter-spacing: .12em; font-weight: 750; font-variant-numeric: tabular-nums; }
#regeln-text { white-space: pre-wrap; background: #fff; padding: 1.1rem; border: 1px solid #d8ded5; border-radius: .65rem; }
.zustimmung { display: flex; align-items: flex-start; gap: .75rem; margin: 1.25rem 0; }
input[type="checkbox"] { flex-shrink: 0; width: 24px; height: 24px; accent-color: #163b32; margin-top: .2rem; }
label, legend { font-weight: 650; }
#nummer { display: block; width: 100%; margin: .5rem 0 1.5rem; padding: .85rem; border: 1px solid #8d9e8f; border-radius: .65rem; background: #fff; color: #203a32; font-size: 1.1rem; }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.anlaesse { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.anlaesse button { background: #fff; color: #203a32; border-color: #bac7bb; font-size: .9rem; padding: .7rem; }
.anlaesse [aria-pressed="true"] { background: #dce9dd; border: 2px solid #163b32; }
#treffer { margin-top: 2rem; }
figure { margin: 1.5rem 0; }
figcaption { padding: .6rem 0; font-weight: 650; }
canvas { display: block; width: 100%; height: auto; border-radius: .45rem; -webkit-touch-callout: none; user-select: none; }
footer { text-align: center; padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)); }