html,body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f8fafc;
  color: #22223b;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background: rgba(250,250,250,0.85);
  z-index: 20;
  display: flex;
  gap: 0.7em;
  padding: 0.7em 0.9em;
  align-items: center;
  box-shadow: 0 2px 12px rgba(60, 72, 96, 0.06);
}
.header-btn {
  margin: 0 0.2em;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 90px;
  min-height: 80vh;
}
.main-card { 
  background: #fff; 
  box-shadow: 0 8px 32px rgba(60, 72, 96, 0.16); 
  border-radius: 2rem; padding: 2.5rem 4rem; 
  text-align: center; margin-bottom: 2rem; 
  min-width: 260px; 
  transition: background 0.3s, color 0.3s;
}
.main-card h2 { 
  font-size: 1.4rem; 
  font-weight: 400; 
  color: #64748b; 
  margin-bottom: 0.5rem; 
  transition: color 0.3s;
}
.main-card .number { 
  font-size: 5rem; 
  font-weight: 700; 
  color: #22223b; 
  transition: color 0.3s;
}
.klasse-on-main {
  font-size: 1.2em;
  margin-top: .3em;
  color: #2563eb;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.controls { 
  display: flex; 
  gap: 2rem; 
  margin-bottom: 2.5rem;
}
.controls button { 
  font-size: 2.5rem; 
  padding: 0.5em 1.4em; 
  border-radius: 1.5rem; 
  border: none; 
  background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%); 
  color: #fff; 
  box-shadow: 0 4px 16px rgba(96, 125, 139, 0.15); 
  cursor: pointer; 
  font-weight: bold; 
  transition: background 0.18s, transform 0.1s; 
  outline: none;
}
.controls button:active { 
  background: linear-gradient(90deg, #6366f1 0%, #c026d3 100%); 
  transform: scale(0.96);
}
.prep-cards { 
  display: flex; 
  gap: 2rem; 
  justify-content: center; 
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.prep-card { 
  background: #f1f5f9; 
  border-radius: 1.5rem; 
  box-shadow: 0 2px 10px rgba(60, 72, 96, 0.12); 
  min-width: 140px; 
  min-height: 140px; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  font-size: 2.4rem; 
  color: #334155; 
  font-weight: 600; 
  margin-bottom: 0.5rem; 
  position: relative; 
  transition: background 0.3s, color 0.3s, border 0.3s;
}
.prep-label { 
  font-size: 1rem; 
  color: #64748b; 
  margin-bottom: 0.4rem; 
  font-weight: 400; 
  transition: color 0.3s;
}
.prep-klasse {
  margin-top: .5em;
  font-size: 1.06em;
  color: #2563eb;
  font-weight: 500;
  font-size: 15px;
}
.edit-btn { 
  position: absolute; 
  top: 12px; 
  right: 18px; 
  background: transparent; 
  border: none; 
  cursor: pointer; 
  font-size: 1.3rem; 
  color: #64748b; 
  transition: color 0.3s;
}
.edit-input { 
  font-size: 2rem; 
  width: 60px; 
  border-radius: 0.5rem; 
  border: 1px solid #ccc; 
  text-align: center; 
  margin-top: 0.5rem; 
  transition: background 0.3s, color 0.3s;
}
.duplicate { 
  color: #e11d48; 
  background: #fee2e2; 
  border: 2px solid #e11d48; 
  transition: background 0.3s, color 0.3s, border 0.3s;
}
.klasse-section {
  margin: 2em 0 1.5em 0;
  text-align: center;
}
.klasse-chooser {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  justify-content: center;
}
.klasse-btn {
  padding: 0.4em 1.1em;
  border-radius: 1.2em;
  font-size: 1.04em;
  border: 1px solid #bbb;
  background: #f8fafc;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.klasse-btn.selected {
  background: #1357ad;
  color: #fff;
  border: 1px solid #2b73da;
}
.klasse-btn:hover {
  background: #e3ebf7;
}
.klasse-table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 0.5em;
  background: #f9fafb;
}
.klasse-table th, .klasse-table td {
  border: 1px solid #e0e7ef;
  padding: 0.65em 0.55em;
  text-align: left;
}
.klasse-table th {
  background: #f1f5f9;
  color: #666;
  font-size: 1em;
  font-weight: 600;
}
.klasse-table input[type="text"], .klasse-table input[type="number"] {
  font-size: 1em;
  border-radius: 0.45em;
  border: 1px solid #bbb;
  padding: 0.25em 0.6em;
  background: #fff;
  min-width: 3.3em;
}
.klasse-table input[type="number"] {
  width: 4em;
}
.move-btn, .remove-btn, .btn-green, .btn {
  margin-left: 0.1em;
  border-radius: 1.2em;
  border: none;
  font-size: 1em;
  background: #f4f6fd;
  color: #444;
  cursor: pointer;
  padding: 0.16em 0.7em;
  transition: background 0.15s;
}
.btn-green {
  background: #16a34a;
  color: #fff;
  font-weight: 500;
  padding: 0.17em 1.3em;
}
.btn-green:hover {
  background: #059669;
}
.remove-btn {
  background: #fca5a5;
  color: #b91c1c;
}
.remove-btn:hover {
  background: #ef4444;
  color: #fff;
}
.move-btn {
  background: #dbeafe;
  color: #2563eb;
  padding: 0.16em 0.5em;
}
.move-btn:hover {
  background: #93c5fd;
}
.reset-btn {
  font-size: 1.05em;
  color: #f43f5e;
  background: #fff;
  border-radius: 1.2em;
  padding: 0.25em 0.9em;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.05); 
  border: 1px solid #fca5a5; 
  transition: background 0.2s, color 0.2s;
}
.reset-btn:hover { 
  background: #fee2e2; 
  color: #b91c1c;
}
.dark-toggle {
  font-size: 1.6em;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: 0.2em;
}
.login-input {
  width: 100%;
  margin-bottom: 1em;
  padding: 0.5em;
  font-size: 1.1em;
  border-radius: 0.5em;
  border: 1px solid #ccc;
}
.btn {
  font-size: 1em;
  padding: 0.5em 1.5em;
  border-radius: 1em;
  background: #eee;
}
footer {
  width: 100%;
  background: #f1f5f9;
  text-align: center;
  margin-top: 3em;
  border-top: 1px solid #e5e7eb;
  font-size: 1.05em;
  color: #656d78;
  letter-spacing: 0.01em;
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.2em 0 1.5em 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2em;
  justify-content: center;
}
@media (max-width: 850px) {
  main {
    padding-top: 80px;
  }
  .prep-cards { 
    flex-direction: column;
    gap: 1.2rem;
  }
  .prep-card { 
    min-width: 100px; 
    min-height: 100px; 
    font-size: 1.7rem;
  }
  .main-card { 
    padding: 1.5rem 1rem; 
    min-width: 120px;
  }
  .controls { 
    gap: 1rem;
  }
  .controls button { 
    font-size: 1.7rem; 
    padding: 0.4em 1.1em;
  }
  .klasse-table th, .klasse-table td {
    font-size: .97em;
    padding: 0.48em 0.35em;
  }
}
@media (max-width:600px) {
  header {
    flex-direction: column;
    gap: 0.5em;
    padding: .3em .3em;
  }
  .main-card { padding: 0.8em .3em; }
}
.dark-mode { 
  background: #191a23; 
  color: #e7e7ee;
}
.dark-mode .main-card { 
  background: #26273b; 
  color: #e7e7ee;
}
.dark-mode .main-card h2 { 
  color: #a5b4fc;
}
.dark-mode .main-card .number { 
  color: #fff;
}
.dark-mode .prep-card { 
  background: #232434; 
  color: #d1d5db; 
  border-color: #373a50;
}
.dark-mode .prep-label { 
  color: #a5b4fc;
}
.dark-mode .edit-btn { 
  color: #a5b4fc;
}
.dark-mode .edit-input { 
  background: #18192a; 
  color: #e7e7ee; 
  border: 1px solid #373a50;
}
.dark-mode .duplicate { 
  color: #ef4444; 
  background: #3b1820; 
  border-color: #ef4444;
}
.dark-mode .klasse-table,
.dark-mode .klasse-table th,
.dark-mode .klasse-table td {
  background: #232434;
  color: #e7e7ee;
  border-color: #373a50;
}
.dark-mode .btn-green {
  background: #22d3ee;
  color: #1e293b;
}
.dark-mode .btn-green:hover {
  background: #0ea5e9;
  color: #fff;
}
.dark-mode .remove-btn {
  background: #fca5a5;
  color: #fff;
}
.dark-mode .remove-btn:hover {
  background: #dc2626;
}
.dark-mode .move-btn {
  background: #a5b4fc;
  color: #232434;
}
.dark-mode .move-btn:hover {
  background: #6366f1;
  color: #fff;
}
.dark-mode .reset-btn { 
  background: #26273b; 
  color: #fda4af; 
  border-color: #b91c1c;
}
.dark-mode .dark-toggle { 
  color: #f1f5f9;
}
footer {
  background: #21213a;
  color: #cbd5e1;
}
.dark-mode footer { background: #18192a; color: #a5b4fc; }
a { color: #2563eb; }

.round-display {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .7em;
  font-size: 1.25em;
  margin-bottom: 1.1em;
  font-weight: 500;
  color: #2563eb;
}
.round-btn {
  font-size: 1em;
  padding: 0.18em 0.8em;
  margin: 0 0.13em;
}