:root {
  --papier: #FAF3E6; --karton: #F0E4CF; --tinte: #2A211B; --kaffee: #6B5A4E; --kante: #D9C9AE; --tomate: #C8321E;
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--papier); color: var(--tinte); font: 400 1.125rem/1.45 var(--font);
}
.seite { flex: 1; width: 100%; max-width: 30rem; margin: 0 auto; padding: 24px 16px 16px; display: flex; flex-direction: column; gap: 16px; }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
h2 { font-size: 1.25rem; margin: 16px 0 0; }
p { margin: 0; max-width: 60ch; }
a { color: var(--tomate); }
.zurueck { color: var(--tinte); }
.label { font-size: .875rem; font-weight: 600; color: var(--kaffee); }
.hinweis { color: var(--kaffee); }
.entwurf, .offen { font-weight: 600; }

.karte { background: var(--karton); border: 2px solid var(--kante); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
a.karte { color: inherit; text-decoration: none; }
button.karte { font: inherit; color: inherit; text-align: left; width: 100%; cursor: pointer; }
.karte strong { font-size: 1.25rem; }
.karte:focus-visible, button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--tinte); outline-offset: 2px; }
.karte.gewaehlt { border-color: var(--tinte); }

label { display: flex; flex-direction: column; gap: 8px; }
input[type=text] {
  font: inherit; height: 56px; min-width: 0; padding: 0 16px; border: 2px solid var(--kante); border-radius: 16px;
  background: var(--karton); color: var(--tinte); width: 100%;
}
input.code { text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.fehler { color: var(--tomate); font-weight: 600; }
.fehler[hidden] { display: none; }
.fehler::before { content: "⚠ "; }

button.btn {
  font: 600 1.125rem var(--font); min-height: 56px; width: 100%; border-radius: 16px; padding: 0 16px; cursor: pointer;
  border: 2px solid var(--kante); background: var(--karton); color: var(--tinte); box-shadow: 0 4px 0 var(--kante);
}
button.btn.primaer { background: var(--tomate); border-color: var(--tomate); color: var(--papier); box-shadow: 0 4px 0 #8f2314; }
button.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 var(--kante); }
button.btn.primaer:active:not(:disabled) { box-shadow: 0 2px 0 #8f2314; }
button.btn:disabled { opacity: .55; cursor: not-allowed; }
.leiste {
  position: sticky; bottom: 0; margin-top: auto; padding: 16px 0 calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, rgba(250,243,230,0), var(--papier) 24%); display: flex; flex-direction: column; gap: 8px;
}
button.link { font: inherit; background: none; border: 0; color: var(--kaffee); text-decoration: underline; min-height: 48px; cursor: pointer; }

.raumcode { font-size: 2.5rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--tomate); line-height: 1; }
.spieler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spieler li { display: flex; align-items: center; gap: 12px; background: var(--karton); border-radius: 16px; padding: 8px 16px 8px 8px; min-height: 48px; animation: ein .25s ease-out; }
.spieler .kreis { width: 40px; height: 40px; border-radius: 50%; background: var(--tinte); color: var(--papier); display: grid; place-items: center; font-weight: 700; flex: none; }
.spieler .name { font-weight: 600; overflow-wrap: anywhere; flex: 1; }
.spieler .marke { font-size: .875rem; font-weight: 600; color: var(--kaffee); }
@keyframes ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button.btn:active:not(:disabled) { transform: none; }
}

.thema { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.zahlkarte {
  position: relative; border-radius: 20px; min-height: 12rem; display: grid; place-items: center; text-align: center; padding: 16px;
  box-shadow: 0 6px 0 var(--kante); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; cursor: pointer;
  border: 0; font: inherit; width: 100%;
}
.zahlkarte.verdeckt { background: var(--karton); color: var(--tinte); border: 2px dashed var(--kaffee); }
.zahlkarte .zahl { font-size: clamp(6rem, 40vw, 10rem); font-weight: 800; line-height: 1; }
.zahlkarte .halten { font-weight: 600; }
.reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.reihe li { display: flex; align-items: center; gap: 16px; border-radius: 16px; padding: 8px 16px; min-height: 64px; }
.reihe .zahl { font-size: 2.5rem; font-weight: 800; min-width: 2.5ch; text-align: center; line-height: 1; }
.reihe .name { font-weight: 600; overflow-wrap: anywhere; }
.schalter { flex-direction: row; align-items: center; gap: 12px; min-height: 48px; }
.schalter input { width: 24px; height: 24px; flex: none; }

.n1 { background: #2B5F8E; color: #FAF3E6; } .n2 { background: #28708F; color: #FAF3E6; }
.n3 { background: #3B9A8C; color: #2A211B; } .n4 { background: #7FB069; color: #2A211B; }
.n5 { background: #C9C257; color: #2A211B; } .n6 { background: #F2C14E; color: #2A211B; }
.n7 { background: #F29E4C; color: #2A211B; } .n8 { background: #EE7B3D; color: #2A211B; }
.n9 { background: #E8603A; color: #2A211B; } .n10 { background: #C8321E; color: #FAF3E6; }

.fuss { text-align: center; font-size: .875rem; font-weight: 600; padding: 8px 16px calc(16px + env(safe-area-inset-bottom)); color: var(--kaffee); }
.fuss a { color: var(--kaffee); display: inline-flex; align-items: center; min-height: 48px; padding: 0 8px; }
.spiele { display: flex; flex-direction: column; gap: 16px; }
.btn-link { display: block; text-align: center; padding: 16px; border-radius: 16px; background: var(--karton); border: 2px solid var(--kante); color: var(--tinte); font-weight: 600; text-decoration: none; }