/* Dunkel, weil die Seite meistens abends auf einem Handy aufgemacht wird, und weil ein
   weisses Blatt beim Aufmachen im Dunkeln blendet. Eine Farbe als Akzent, sonst Grau. */

:root {
  --grund: #14151a;
  --karte: #1d1f26;
  --rand: #2e313b;
  --schrift: #e9e9ec;
  --leise: #9a9ba4;
  /* Ein helles, entsaettigtes Grau statt einer Signalfarbe. Es traegt den Knopf, den
     Rahmen der Wurfkiste im Hover und den Fokusrahmen. Alles drei aus demselben Wert,
     damit die Seite eine Handschrift hat und nicht drei. */
  --akzent: #c8c9ce;
  --akzent-schrift: #17171a;
  --gut: #5fae7e;
  --schlecht: #d9534f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Auf iOS zoomt Safari beim Antippen eines Feldes, wenn die Schrift kleiner als
     16px ist. Danach steht die Seite verrutscht da und muss von Hand zurueckgezogen. */
  -webkit-text-size-adjust: 100%;
}

.blatt {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1.1rem 4rem;
}

h1 {
  font-size: 1.9rem;
  letter-spacing: 0.02em;
  margin: 0.2rem 0 0;
}

h2 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--leise);
  margin: 2.4rem 0 0.6rem;
}

.kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.unter { color: var(--leise); margin: 0.4rem 0 1.8rem; }
.leise { color: var(--leise); text-decoration: none; font-size: 0.9rem; }
.leise:hover { color: var(--schrift); }

.zahl {
  color: var(--schrift);
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-size: 0.85rem;
}

/* Anmeldung */

/* Der Abstand nach oben sass frueher im Untertitel. Der ist raus, also traegt ihn jetzt
   das Formular, sonst klebt das Feld an der Ueberschrift. Gleiche Stelle wie bei .wer. */
.anmeldung {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.8rem;
  max-width: 22rem;
}

label { color: var(--leise); font-size: 0.9rem; }

input[type="password"], input[type="text"] {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: 0.5rem;
  color: var(--schrift);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

input:focus-visible, .wurf:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

button {
  background: var(--akzent);
  border: 0;
  border-radius: 0.5rem;
  /* Dunkle Schrift auf hellem Knopf. Weiss auf hellem Grau waere kaum zu lesen. */
  color: var(--akzent-schrift);
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1rem;
}

/* Heller statt dunkler beim Hover: bei einem hellen Knopf ist Aufhellen die Bewegung
   nach vorne, Abdunkeln sieht nach ausgegraut aus. */
button:hover { background: #dedee2; }

.fehler { color: var(--schlecht); margin: 0; }

/* Namensfeld und Wurfkiste */

/* Der Abstand nach oben sass frueher im Untertitel. Der ist raus, also traegt ihn jetzt
   das Feld, sonst klebt es an der Ueberschrift. */
.wer { margin: 1.8rem 0 1rem; max-width: 22rem; }

.wurf {
  border: 2px dashed var(--rand);
  border-radius: 0.9rem;
  cursor: pointer;
  padding: 2.2rem 1rem;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.wurf:hover, .wurf.drueber { border-color: var(--akzent); background: var(--karte); }

.wurf p { margin: 0; }
.wurf .gross { font-size: 1.15rem; font-weight: 600; }
.wurf .klein { color: var(--leise); font-size: 0.9rem; margin-top: 0.3rem; }
.wurf .grenze { margin-top: 0.9rem; font-size: 0.82rem; }

/* Die eine Meldezeile. Sie steht nur da, wenn sie etwas zu sagen hat. */

.meldung {
  color: var(--leise);
  font-size: 0.9rem;
  margin: 1rem 0 0;
  overflow-wrap: anywhere;
}

.meldung.schlecht { color: var(--schlecht); }

/* Was schon drin liegt */

.liste { list-style: none; margin: 1rem 0 0; padding: 0; }

.liste li {
  border-bottom: 1px solid var(--rand);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.6rem 0.1rem;
}

.liste .name { overflow-wrap: anywhere; }
.liste .daten { color: var(--leise); font-size: 0.85rem; white-space: nowrap; }
.liste .leer { color: var(--leise); border: 0; }

@media (max-width: 30rem) {
  .liste li { flex-direction: column; gap: 0.15rem; }
  .liste .daten { white-space: normal; }
}