:root {
  --eis: #eaf0f3;
  --bande: #ffffff;
  --tinte: #0c1a14;
  --grau: #5c6b73;
  --gruen: #00913f;
  --gruen-tief: #04642e;
  --blaulinie: #2c5ca8;
  --rotlinie: #c8102e;
  --linie: #cfdae1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--eis);
  color: var(--tinte);
  font: 16px/1.55 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 780px;
  margin: 0 auto;
  padding: 22px 18px 60px;
}

h1, h2, h3 {
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 10px;
}
h1 { font-size: 1.7rem; font-weight: 800; }
h2 { font-size: 1.18rem; font-weight: 750; margin-top: 34px; }
h3 { font-size: 1rem; font-weight: 700; }
p { max-width: 62ch; }

a { color: var(--gruen-tief); }

/* ------------------------------------------------------------- Kopfzeile */

.kopf {
  background: var(--gruen-tief);
  color: #fff;
  padding: 12px 18px;
  border-bottom: 5px solid var(--gruen);
}
.marke { display: block; text-decoration: none; color: #fff; }
.marke-team { display: block; font-size: .74rem; opacity: .8; }
.marke-wort { display: block; font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em; }
.kopf nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; }
.kopf nav a { color: #d8ece0; text-decoration: none; font-size: .92rem; }
.kopf nav a:hover { color: #fff; text-decoration: underline; }
.kopf nav .nav-du { margin-left: auto; opacity: .85; }

/* --------------------------------------------------------------- Bloecke */

.karte {
  background: var(--bande);
  border: 1px solid var(--linie);
  border-radius: 3px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.karte.heim { border-left: 5px solid var(--gruen); }
.karte.auswaerts { border-left: 5px solid var(--blaulinie); }

.naechstes {
  background: var(--bande);
  border: 1px solid var(--linie);
  border-top: 6px solid var(--gruen);
  border-radius: 3px;
  padding: 20px 20px 18px;
}
.naechstes .wann { color: var(--grau); font-size: .9rem; }
.naechstes .paarung {
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em;
  margin: 4px 0 2px;
}
.naechstes .ort { color: var(--grau); font-size: .9rem; }

.status { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linie); }
.status.getippt { color: var(--gruen-tief); font-weight: 650; }
.status.offen { color: var(--rotlinie); font-weight: 650; }

.zahl { font-variant-numeric: tabular-nums; }

.ergebnis {
  font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.leer {
  border: 1px dashed var(--linie);
  border-radius: 3px;
  padding: 22px 18px;
  color: var(--grau);
  background: transparent;
}

/* --------------------------------------------------------------- Listen */

.spielliste { list-style: none; padding: 0; margin: 0; }
.spielliste li {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  background: var(--bande);
  border: 1px solid var(--linie);
  border-left: 5px solid var(--linie);
  border-radius: 3px;
  padding: 11px 14px; margin-bottom: 8px;
}
.spielliste li.heim { border-left-color: var(--gruen); }
.spielliste li.auswaerts { border-left-color: var(--blaulinie); }
.spielliste .datum { color: var(--grau); font-size: .88rem; min-width: 8.5em; font-variant-numeric: tabular-nums; }
.spielliste .gegner { font-weight: 650; flex: 1; }
.spielliste .marker { font-size: .82rem; color: var(--grau); }
.spielliste .marker.fehlt { color: var(--rotlinie); }
.spielliste .marker.dabei { color: var(--gruen-tief); }

table { border-collapse: collapse; width: 100%; background: var(--bande); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); }
th { font-size: .82rem; color: var(--grau); font-weight: 650; }
td.z, th.z { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
.tabelle-wrap { border: 1px solid var(--linie); border-radius: 3px; overflow-x: auto; }
tr.ich td { background: #f0f8f3; font-weight: 650; }
td.platz { color: var(--grau); width: 2.4em; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- Formulare */

label { display: block; font-size: .88rem; font-weight: 650; margin: 12px 0 4px; }
input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--linie);
  border-radius: 3px;
  background: #fff;
  color: inherit;
}
textarea { min-height: 140px; font-size: .92rem; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--blaulinie);
  outline-offset: 1px;
}
.zeile { display: flex; gap: 12px; }
.zeile > div { flex: 1; }
.hinweis { font-size: .85rem; color: var(--grau); margin-top: 4px; }

button, .knopf {
  display: inline-block;
  margin-top: 16px;
  padding: 11px 20px;
  border: none;
  border-radius: 3px;
  background: var(--gruen);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .knopf:hover { background: var(--gruen-tief); }
button.still, .knopf.still { background: transparent; color: var(--grau); border: 1px solid var(--linie); }
button.still:hover { background: #f2f6f8; color: var(--tinte); }
button.warn { background: var(--rotlinie); }

.meldung {
  padding: 10px 14px; border-radius: 3px; margin: 0 0 16px; max-width: none;
  border-left: 5px solid var(--gruen);
  background: #e7f4ec;
}
.meldung.fehler { border-left-color: var(--rotlinie); background: #fdeced; }

footer {
  max-width: 780px; margin: 0 auto; padding: 0 18px 40px;
  color: var(--grau); font-size: .84rem;
}

@media (max-width: 520px) {
  .zeile { flex-direction: column; gap: 0; }
  .naechstes .paarung { font-size: 1.3rem; }
  .kopf nav .nav-du { margin-left: 0; }
}

/* ------------------------------------------------- Verlaufskurve, Profil */

.kurve { width: 100%; height: auto; display: block; margin: 6px 0 10px; }

.legende {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: .9rem;
}
.legende li { display: flex; align-items: center; gap: 6px; }
.legende .punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.legende .zahl { color: var(--grau); }

.knopfzeile { display: flex; flex-wrap: wrap; gap: 6px; }
.knopfzeile form { margin: 0; }
button.mini { margin: 0; padding: 5px 10px; font-size: .84rem; font-weight: 600; }