:root { --rot:#c8102e; --dunkel:#1a1a1a; --grau:#e8e8e8; }
* { box-sizing:border-box; }
body { font-family:system-ui,sans-serif; margin:0; background:#f0f0f0; color:var(--dunkel); }
header { background:var(--rot); color:#fff; padding:.8rem 1.5rem; display:flex;
         justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; }
header h1 { margin:0; font-size:1.5rem; letter-spacing:.15em; font-weight:800; }
nav button { background:transparent; border:1px solid rgba(255,255,255,.5); color:#fff;
             padding:.4rem .8rem; margin-left:.3rem; border-radius:4px; cursor:pointer; font-size:.9rem; }
nav button.aktiv { background:#fff; color:var(--rot); font-weight:600; }
#status { font-size:.9rem; display:flex; align-items:center; gap:.6rem; }
#kontostand { font-weight:700; }
main { max-width:900px; margin:1.5rem auto; padding:0 1rem; }
.karte { background:#fff; padding:1.2rem; border-radius:8px; margin-bottom:1rem;
         box-shadow:0 1px 4px rgba(0,0,0,.1); }
h2 { font-size:1rem; margin:.8rem 0 .5rem; }
input[type=text],input[type=password],input[type=email],select {
  display:block; width:100%; padding:.6rem; margin:.4rem 0; border:1px solid #ccc;
  border-radius:4px; font-size:1rem; }
button { background:var(--rot); color:#fff; border:0; padding:.6rem 1.1rem; border-radius:4px;
         font-size:.95rem; cursor:pointer; }
button:hover { filter:brightness(1.1); }
button.gross { display:block; width:100%; padding:.9rem; font-size:1.1rem; font-weight:700; margin-top:.8rem; }
button.hell { background:#fff; color:var(--rot); border:1px solid var(--rot); }
hr { border:0; border-top:1px solid var(--grau); margin:1.2rem 0; }

/* Tippfeld im Original-Raster: 7 Spalten, 1-49 */
.tippfeld { background:#fff; padding:1rem; border-radius:8px; margin-bottom:1rem;
            box-shadow:0 1px 4px rgba(0,0,0,.1); }
.tippfeld .kopf { display:flex; justify-content:space-between; align-items:center;
                  gap:.5rem; flex-wrap:wrap; margin-bottom:.7rem; }
.tippfeld .kopf b { color:var(--rot); }
.tippfeld select { width:auto; margin:0; padding:.35rem; font-size:.85rem; }
.raster { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.zahl { aspect-ratio:1; display:flex; align-items:center; justify-content:center;
        border:1px solid #bbb; border-radius:3px; background:#fafafa; cursor:pointer;
        font-size:.95rem; user-select:none; }
.zahl:hover { background:var(--grau); }
.zahl.gewaehlt { background:var(--rot); color:#fff; border-color:var(--rot); font-weight:700; }
.feldinfo { margin-top:.6rem; font-size:.85rem; color:#555; display:flex;
            justify-content:space-between; align-items:center; gap:.5rem; flex-wrap:wrap; }
.steuer { position:sticky; bottom:0; }
.zusatz { display:inline-block; margin:.6rem 1rem .6rem 0; font-size:.95rem; cursor:pointer; }
.summe { font-size:1.2rem; margin-top:.5rem; }
.ziehungsinfo { background:var(--dunkel); color:#fff; padding:.8rem 1.2rem;
                border-radius:8px; margin-bottom:1rem; font-size:.95rem; }
.schein { background:#fff; padding:1rem; border-radius:8px; margin-bottom:.8rem;
          box-shadow:0 1px 4px rgba(0,0,0,.1); font-size:.9rem; }
.schein .nr { font-family:monospace; font-size:1.1rem; letter-spacing:.1em; }
.reihe { font-family:monospace; letter-spacing:.08em; }
table { width:100%; border-collapse:collapse; font-size:.9rem; }
td,th { padding:.4rem; border-bottom:1px solid var(--grau); text-align:left; }
td.zahl_r { text-align:right; font-variant-numeric:tabular-nums; }
.kugeln { display:flex; gap:.6rem; flex-wrap:wrap; min-height:4.5rem; align-items:center; }
.kugel { width:3.5rem; height:3.5rem; border-radius:50%; border:2px solid #fff; background:var(--rot);
         color:#fff; font-weight:700; font-size:1.15rem; display:flex; align-items:center;
         justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,.25);
         animation:kugel-ein .4s ease-out; }
.kugel.sz { background:var(--dunkel); }
.kugel.platzhalter { background:transparent; border:2px dashed #bbb; color:transparent; animation:none; }
@keyframes kugel-ein { from { transform:scale(.3); } to { transform:scale(1); } }
#meldung { margin:1rem 0; font-size:.95rem; color:var(--rot); min-height:1.2em; font-weight:600; }
.hinweis { text-align:center; font-size:.8rem; color:#666; padding-bottom:2rem; }
@media (max-width:600px) { header h1 { font-size:1.2rem; } .zahl { font-size:.8rem; } }