:root {
  --teal: #28b8c8;
  --schwarz: #060606;
  --flaeche: #141414;
  --text: #f2f2f2;
  --leise: #9a9a9a;
  --pause: #2a2a2a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--schwarz);
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transition: background-color 0.3s;
}
body[data-phase="uebung"] { background: var(--teal); color: var(--schwarz); }
body[data-phase="pause"] { background: var(--pause); }
body[data-phase="vorbereitung"], body[data-phase="abklingzeit"] { background: var(--flaeche); }
main { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; }
section { display: flex; flex-direction: column; gap: 16px; flex: 1; }
section[hidden] { display: none; }
h1 { color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 0; }
.feld { display: grid; grid-template-columns: 1fr 56px 96px 56px; align-items: center; gap: 8px; background: var(--flaeche); border-radius: 12px; padding: 12px; }
.feld .name { font-size: 1.2rem; text-transform: uppercase; }
.feld .wert { font-size: 1.8rem; font-variant-numeric: tabular-nums; text-align: center; }
button { font: inherit; color: inherit; background: var(--flaeche); border: 2px solid var(--teal); border-radius: 12px; min-height: 56px; font-size: 1.5rem; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
button:disabled { opacity: 0.4; }
.gross { background: var(--teal); color: var(--schwarz); font-size: 2rem; text-transform: uppercase; margin-top: auto; min-height: 72px; }
.gesamt { color: var(--leise); font-size: 1.2rem; margin: 0; }
body[data-phase="uebung"] .gesamt { color: var(--schwarz); }
.hinweis { color: #ff8a80; margin: 0; }
.phase { font-size: 2.4rem; text-transform: uppercase; text-align: center; margin: 24px 0 0; }
.rest { font-size: min(32vw, 10rem); font-variant-numeric: tabular-nums; text-align: center; margin: 0; line-height: 1; }
.runde { font-size: 1.8rem; text-align: center; margin: 0; }
.knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
body[data-phase="uebung"] button { border-color: var(--schwarz); background: transparent; }