/* Farben und Schriften aus dem Stilblatt (gestaltung/Stil.dc.html).
   Schriften liegen im Repo (SIL Open Font License), kein Schrift-Dienst eines Fremdanbieters. */
@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Andika';
  src: url('../fonts/Andika-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('../fonts/Fredoka.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --grund: #eff3f1;
  --text: #1e2b2f;
  --text-leise: #4e5d62;
  --rand: #d5ddd9;
  --knopf: #2f6db5;
  --knopf-schatten: #1f4f86;
  --karte: #ffffff;
  --richtig: #2d7d5a;
  --richtig-hell: #ddf0e6;
  --muenze: #e0a526;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: 'Andika', system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.5;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h1 {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 34px;
  margin: 0;
}

p {
  margin: 0;
}

.karte {
  background: var(--karte);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 22px;
}

input {
  min-height: 56px;
  font: inherit;
  font-size: 26px;
  padding: 8px 16px;
  border-radius: 16px;
  border: 3px solid var(--rand);
  background: #fff;
  color: var(--text);
  letter-spacing: 0.2em;
}

button {
  min-height: 72px;
  min-width: 56px;
  padding: 14px 28px;
  border: none;
  border-radius: 22px;
  background: var(--knopf);
  box-shadow: 0 6px 0 var(--knopf-schatten);
  color: #fff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 600;
  font-size: 26px;
  cursor: pointer;
}

button:disabled {
  background: var(--rand);
  box-shadow: 0 6px 0 #b6c2bd;
  color: var(--text-leise);
  cursor: default;
}

.leise {
  color: var(--text-leise);
  font-size: 18px;
}

.meldung {
  min-height: 32px;
  font-size: 22px;
}

.meldung[data-status='fehler'] {
  color: #a8331f;
}

.meldung[data-status='ok'] {
  color: var(--richtig);
}

a {
  color: #1f4f86;
}

.geraete {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.geraete li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  border: 3px solid var(--rand);
  border-radius: 18px;
  padding: 10px 16px;
  font-size: 20px;
}

.geraete li[data-aktiv='nein'] {
  color: var(--text-leise);
}

.geraete button {
  min-height: 48px;
  margin-left: auto;
  padding: 8px 18px;
  font-size: 20px;
}