:root{
  --bg:#0f1115;
  --card:#1b1f27;
  --accent:#6ea8fe;
  --danger:#ff4d4d;
  --warn:#ffb84d;
  --neutral:#8a8f99;
  --text:#e6e8ee;
}

/* Grundlayout */
*{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
}

body{
  margin:0;
  background:linear-gradient(180deg,#0f1115,#1a1d24);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}

.container{
  max-width:1000px;
  margin:0 auto;
  padding:clamp(12px,4vw,28px);
}

h1{
  text-align:center;
  margin:10px 0 25px 0;
  font-size:clamp(1.6rem,5vw,2.2rem);
  letter-spacing:.03em;
}

/* Felder */
.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:28px;
}

.field{
  background:var(--card);
  padding:18px;
  border-radius:18px;
  text-align:center;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

label{
  display:block;
  font-size:clamp(1rem,3.6vw,1.2rem);
  margin-bottom:8px;
  opacity:.9;
}

/* große Zahlen — wichtig für Handy */
input{
  width:100%;
  font-size:clamp(2rem,8vw,2.8rem);
  padding:16px 10px;
  border-radius:14px;
  border:none;
  text-align:center;
  background:#0f1115;
  color:var(--text);
  outline:none;
  min-height:60px;
}

/* readonly Felder stärker hervorheben */
input[readonly]{
  background:#0c0e12;
  color:#ffffff;
  font-weight:700;
  letter-spacing:1px;
}

/* Buttons — auf Smartphone untereinander */
.buttons{
  display:flex;
  flex-direction:column;
  gap:26px;
  margin:34px 0;
}

.btn{
  width:100%;
  padding:22px 18px;
  font-size:clamp(1.2rem,5vw,1.6rem);
  border-radius:22px;
  border:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, filter .12s;
  min-height:70px;          /* wichtig für Daumenbedienung */
  box-shadow:0 10px 22px rgba(0,0,0,.45);
}

/* echtes „Button-Gefühl“ */
.btn:active{
  transform:scale(.96);
  filter:brightness(.92);
}

.danger{background:var(--danger);color:white}
.warn{background:var(--warn);color:black}
.neutral{background:var(--neutral);color:white}

/* Reset-Historie */
.log{
  background:var(--card);
  padding:18px;
  border-radius:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}

.log h2{
  text-align:center;
  margin:0 0 12px 0;
  font-size:clamp(1.2rem,4vw,1.4rem);
}

.log ul{
  list-style:none;
  padding:0;
  margin:0;
}

.log li{
  padding:12px 6px;
  b