/* Aussehen der Web-App. Grosse Bedienflaechen und hoher Kontrast: Die App wird im Gespraech nebenbei
   bedient, oft auf dem Tisch liegend. */
* { box-sizing: border-box; }
body { margin: 0; font: 17px/1.45 system-ui, "Segoe UI", Roboto, sans-serif; color: #1a1a1a; background: #f3f5f7; }
header { background: #1f4e79; color: #fff; padding: 12px 16px; }
h1 { margin: 0; font-size: 1.15rem; font-weight: 600; }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
main { max-width: 560px; margin: 0 auto; padding: 16px; }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin-bottom: 6px; }
button { display: block; width: 100%; min-height: 52px; margin: 10px 0; padding: 10px 14px; border: 0; border-radius: 8px;
         background: #1f4e79; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
button.neben { background: #e1e6eb; color: #1a1a1a; }
button.stopp { background: #b3261e; }
button:disabled { opacity: .45; cursor: default; }
input[type=text], input[type=password], input[type=date], input[type=number] {
  width: 100%; min-height: 46px; padding: 8px 10px; margin: 4px 0 12px; font: inherit; border: 1px solid #8a949e; border-radius: 6px; background: #fff; }
label { display: block; font-weight: 600; }
label.wahl { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0; }
label.wahl input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.karte { background: #fff; border: 1px solid #d5dbe1; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.karte.fehlt { border-color: #b3261e; }
.klein { font-size: .9rem; color: #4a545e; }
.fehler { background: #fbe9e7; border: 1px solid #b3261e; color: #7f1d17; padding: 10px 12px; border-radius: 8px; margin-bottom: 12px; }
.zeit { font-size: 2.6rem; font-variant-numeric: tabular-nums; text-align: center; margin: 12px 0 4px; }
.punkt { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #b3261e; margin-right: 8px; animation: blink 1.4s infinite; }
.mitte { text-align: center; }
@keyframes blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .punkt { animation: none; } }