*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body{
  margin:0; padding:16px 14px calc(24px + env(safe-area-inset-bottom));
  background:#0f1115; color:#e8ecf1;
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  max-width:520px; margin-inline:auto; user-select:none;
}
h1{ font-size:18px; margin:0 0 4px; letter-spacing:.5px; }
.sub{ color:#8b95a4; font-size:13px; margin-bottom:14px; }
.flash{ padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:14px; }
.ok{ background:#12321f; color:#7ee2a8; }
.bad{ background:#3a1620; color:#ff9aa9; }

.grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; transition:opacity .15s; }
.grid.dim{ opacity:.3; }
.cell{
  aspect-ratio:1/1; border:2px solid #29303c; border-radius:14px;
  background:#171b23; color:#cfd6e0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; font-family:inherit; cursor:pointer; transition:.12s;
}
.cell .code{ font-size:22px; font-weight:700; letter-spacing:1px; }
.cell .name{ font-size:10px; color:#7c8798; text-transform:uppercase; letter-spacing:.5px; }
.cell.on{ background:#1d6b3f; border-color:#3ddc84; color:#fff; }
.cell.on .name{ color:#bff0d2; }
.cell:active{ transform:scale(.96); }

.sliderbox{ margin:18px 0 6px; }
.sliderlabels{ display:flex; justify-content:space-between; font-size:12px;
  font-weight:700; letter-spacing:1px; color:#5f6b7c; margin-bottom:6px; }
.sliderlabels .active{ color:#ffb454; }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%;
  height:44px; background:transparent; }
input[type=range]::-webkit-slider-runnable-track{
  height:12px; border-radius:6px; background:#242b36; }
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:44px; height:44px; margin-top:-16px;
  border-radius:50%; background:#ffb454; border:3px solid #0f1115; }
input[type=range]::-moz-range-track{ height:12px; border-radius:6px; background:#242b36; }
input[type=range]::-moz-range-thumb{ width:38px; height:38px; border:3px solid #0f1115;
  border-radius:50%; background:#ffb454; }

.count{ text-align:center; font-size:13px; color:#8b95a4; margin:4px 0 12px; }

.actions{ display:flex; align-items:stretch; gap:10px; }
.flag{ flex:0 0 88px; padding:10px 4px; border:2px solid #29303c; border-radius:14px;
  background:#171b23; color:#8b95a4; font-family:inherit; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.flag .lbl{ font-size:24px; font-weight:700; line-height:1; }
.flag .cap{ font-size:9px; letter-spacing:.6px; text-transform:uppercase; color:#6b7688; }
.flag.on{ background:#7a4a12; border-color:#ffb454; color:#fff; }
.flag.on .cap{ color:#ffd9a3; }
.flag:active{ transform:scale(.96); }
.dots{ display:grid; grid-template-columns:repeat(2,1fr); gap:3px; }
.dot{ width:10px; height:10px; border-radius:2px; background:#2b323e; transition:.12s; }
.flag.on .dot{ background:#5c3a10; }
.dot.on, .flag.on .dot.on{ background:#fff; box-shadow:0 0 7px #ffffffaa; }

.save{ flex:1; padding:18px; font-size:18px; font-weight:700; letter-spacing:1px;
  border:0; border-radius:14px; background:#3ddc84; color:#06240f; font-family:inherit; }
.save:disabled{ background:#242b36; color:#5f6b7c; }
.save:active:not(:disabled){ transform:scale(.98); }

table{ width:100%; border-collapse:collapse; margin-top:22px; font-size:13px; }
th,td{ text-align:left; padding:7px 6px; border-bottom:1px solid #1e242e; color:#a7b1c0; }
th{ color:#5f6b7c; font-size:11px; text-transform:uppercase; letter-spacing:1px; }

/* Kopfzeile mit Menue */
header{ display:flex; align-items:flex-start; justify-content:space-between;
  position:relative; margin-bottom:14px; }
header h1{ margin:0 0 4px; }
header .sub{ margin:0; }
.burger{ flex:0 0 44px; width:44px; height:44px; margin:-6px -8px 0 0;
  background:none; border:0; padding:11px 9px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; }
.burger span{ display:block; height:3px; border-radius:2px; background:#8b95a4; }
.burger:active span{ background:#fff; }
.menu{ display:none; position:absolute; top:38px; right:0; z-index:5;
  min-width:150px; background:#1b212b; border:1px solid #2b323e;
  border-radius:12px; overflow:hidden; box-shadow:0 8px 24px #0008; }
.menu.open{ display:block; }
.menu a{ display:block; padding:14px 16px; color:#e8ecf1;
  text-decoration:none; font-size:15px; }
.menu a + a{ border-top:1px solid #242b36; }
.menu a:active{ background:#242b36; }

/* Letzter Eintrag unter dem Speichern-Button */
.lastrow{ margin-top:16px; padding-top:12px; border-top:1px solid #1e242e;
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; color:#8b95a4; }
.lastrow b{ color:#cfd6e0; font-weight:600; letter-spacing:.5px; }

.back{ display:inline-block; margin-bottom:14px; color:#8b95a4;
  text-decoration:none; font-size:14px; }
.empty{ color:#5f6b7c; font-size:14px; margin-top:20px; }

/* Namensfeld */
.namerow{ display:flex; align-items:center; gap:10px; margin-bottom:14px;
  background:#171b23; border:2px solid #29303c; border-radius:12px; padding:0 14px; }
.namerow label{ font-size:11px; letter-spacing:1px; text-transform:uppercase;
  color:#5f6b7c; flex:0 0 auto; }
.namerow input{ flex:1; min-width:0; background:none; border:0; outline:none;
  color:#e8ecf1; font:600 16px/1 inherit; padding:14px 0; }
.namerow input::placeholder{ color:#4d5766; font-weight:400; }
.namerow:focus-within{ border-color:#3ddc84; }

/* ------------------------------------------------------------------
   Hauptseite: alles auf einen Bildschirm, ohne Zoomen und Scrollen.
   Das Grid nimmt den Platz, der uebrig bleibt; die Touch-Flaechen
   (Regler, Speichern, ?, 4H, Namensfeld) behalten ihre Groesse.
   ------------------------------------------------------------------ */
body.app{
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  display:flex; flex-direction:column;
  padding-top:clamp(8px,1.6vh,16px);
  padding-bottom:calc(clamp(8px,1.6vh,16px) + env(safe-area-inset-bottom));
}
body.app form{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }

body.app header{ margin-bottom:clamp(6px,1.3vh,14px); }
body.app .flash{ margin-bottom:clamp(6px,1.3vh,14px); padding:clamp(7px,1.2vh,10px) 12px; }
body.app .namerow{ margin-bottom:clamp(6px,1.3vh,14px); }
body.app .namerow input{ padding:clamp(10px,1.7vh,14px) 0; }
body.app .sliderbox{ margin:clamp(6px,1.5vh,18px) 0 clamp(2px,.6vh,6px); }
body.app .count{ margin:clamp(2px,.5vh,4px) 0 clamp(6px,1.3vh,12px); }
body.app .lastrow{ margin-top:clamp(8px,1.5vh,16px); padding-top:clamp(6px,1.1vh,12px); }

/* Das Grid fuellt den Rest der Hoehe */
body.app .grid{
  flex:1 1 auto; min-height:0;
  grid-template-rows:repeat(4,1fr);
  gap:clamp(5px,1vh,8px);
}
body.app .cell{ aspect-ratio:auto; min-height:0; }
body.app .cell .code{ font-size:clamp(16px,3.4vh,22px); }
body.app .cell .name{ font-size:clamp(8px,1.4vh,10px); }
body.app .flag .lbl{ font-size:clamp(18px,3.4vh,24px); }