:root {
  --paper: #f3f7f9; --ink: #12232c; --ink-soft: #42535c; --water: #0a5c86; --line: #c9d6dc;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0e1a20; --ink: #e8f0f3; --ink-soft: #a9bbc4; --water: #7cc8ee; }
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); font: 400 1.125rem/1.5 var(--font);
}
main, footer { width: 100%; max-width: 28rem; margin: 0 auto; padding: 0 16px; }
main { flex: 1; padding-top: 32px; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
.lead { color: var(--ink-soft); max-width: 40ch; }
a { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
footer {
  border-top: 1px solid var(--line); padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom)); display: flex; gap: 16px;
}
footer a { color: var(--ink-soft); font-weight: 600; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.hinweis { border: 1px solid var(--line); border-radius: 10px; padding: 8px 16px; }
.zaehler { text-align: center; margin: 24px 0; }
.zahl { margin: 0; color: var(--water); font-weight: 600; line-height: 1; font-size: clamp(6rem, 32vw, 11rem); }
.zeile { margin: 8px 0 0; color: var(--ink-soft); }
.meldung { text-align: center; min-height: 1.5em; margin: 0 0 16px; color: var(--ink-soft); }
form { margin: 0 0 16px; }
button { font: 600 1rem/1 var(--font); cursor: pointer; }
button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.plus { width: 100%; height: 72px; padding: 0 32px; border: 0; border-radius: 16px; background: var(--water); color: #fff; }
.plus:active { filter: brightness(0.85); }
.minus { min-width: 48px; height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink-soft); }
.minus[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (prefers-color-scheme: dark) { .plus { color: #06202d; } }