:root {
  --blau: #1e3a68;
  --rot: #e4405f;
  --gruen: #2aa86a;
  --hellblau: #2f6fd0;
  --violett: #8b5cf6;
  --gelb: #fde68a;
  --gelb-text: #78500a;
  --rahmen: #e4e7ec;
  --grau: #6a7280;
  --flaeche: #ffffff;
  --hintergrund: #f5f6f8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--hintergrund);
  color: #1c1f23;
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

h1 { font-size: 1.15rem; margin: 0; }

.anmeldung {
  max-width: 22rem;
  margin: 4rem auto;
  padding: 1.5rem;
  background: var(--flaeche);
  border: 1px solid var(--rahmen);
  border-radius: 10px;
}
.anmeldung label { display: block; margin: 1rem 0 0.25rem; font-size: 0.85rem; }
.anmeldung input, .anmeldung button {
  width: 100%; padding: 0.6rem; font-size: 1rem;
  border: 1px solid var(--rahmen); border-radius: 6px;
}
.anmeldung button { margin-top: 0.75rem; background: var(--blau); color: #fff; border: 0; cursor: pointer; }
.fehler { color: var(--rot); font-size: 0.9rem; }

.kopf {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.85rem 1rem; background: var(--blau); color: #fff;
  flex-wrap: wrap;
}
.kopf p { margin: 0.15rem 0 0; font-size: 0.78rem; opacity: 0.85; }
.abmelden { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.5);
  border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; font-size: 0.8rem; }

.warnung {
  margin: 0; padding: 0.7rem 1rem; background: #fff1f3;
  border-bottom: 2px solid var(--rot); color: #8d1226; font-size: 0.85rem;
}

.reiter { display: flex; background: var(--flaeche); border-bottom: 1px solid var(--rahmen); }
.reiter button {
  padding: 0.7rem 1rem; background: none; border: 0; border-bottom: 2px solid transparent;
  font-size: 0.9rem; color: var(--grau); cursor: pointer;
}
.reiter button.an { color: var(--blau); border-bottom-color: var(--blau); font-weight: 600; }

main { padding: 0.75rem 1rem 2rem; max-width: 60rem; margin: 0 auto; }

.zahlen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.75rem 0; }
@media (min-width: 40rem) { .zahlen { grid-template-columns: repeat(4, 1fr); } }
.zahl { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 8px;
  padding: 0.6rem; text-align: center; min-width: 0; }
.zahl b { display: block; font-size: 1.5rem; color: var(--blau); line-height: 1.1; }
.zahl.achtung b { color: var(--rot); }
.zahl span { font-size: 0.72rem; color: var(--grau); }

.filter { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1rem; }
.filter button {
  font-size: 0.75rem; border: 1px solid var(--rahmen); border-radius: 999px;
  padding: 0.25rem 0.7rem; background: var(--flaeche); color: #44505e; cursor: pointer;
}
.filter button.an { background: var(--blau); color: #fff; border-color: var(--blau); }

.monat { font-size: 0.72rem; letter-spacing: 0.06em; font-weight: 700; color: var(--blau);
  border-bottom: 1px solid var(--rahmen); padding-bottom: 0.2rem; margin: 1.25rem 0 0.5rem; }

.eintrag {
  background: var(--flaeche); border: 1px solid var(--rahmen); border-left: 4px solid var(--grau);
  border-radius: 8px; padding: 0.55rem 0.7rem; margin-bottom: 0.45rem;
}
.eintrag.k-deadline, .eintrag.k-deadline_hart { border-left-color: var(--rot); }
.eintrag.k-veranstaltung { border-left-color: var(--hellblau); }
.eintrag.k-produktion { border-left-color: var(--gruen); }
.eintrag.k-phase { border-left-color: #a8cdf5; }
.eintrag.k-wahltermin { border-left-color: var(--violett); }
.eintrag.k-aufgabe { border-left-color: var(--grau); }
.eintrag.bedingt { border-style: dashed; }
.eintrag.erledigt { opacity: 0.55; }
#ansicht-erledigt .eintrag.erledigt { opacity: 1; }
.eintrag.ueberfaellig { background: #fff6f7; }
.eintrag.bald { background: #fff8e6; border-left-color: #e0a100; }
.eintrag .kontext { display: block; font-size: 0.75rem; color: var(--blau); margin: -0.1rem 0 0.2rem; }

.eintrag .datum { font-size: 0.75rem; font-weight: 700; color: var(--blau); }
.eintrag .kennung { display: inline-block; font-size: 0.65rem; font-weight: 600;
  padding: 0 0.35rem; margin-left: 0.35rem; border: 1px solid var(--blau);
  border-radius: 4px; color: var(--blau); font-variant-numeric: tabular-nums; }
.eintrag .titel { display: block; font-weight: 600; margin: 0.1rem 0 0.2rem; }
.eintrag .zeile { font-size: 0.75rem; color: var(--grau); }
.marke { display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem;
  border-radius: 4px; color: #fff; margin-right: 0.3rem; }
.m-deadline, .m-deadline_hart { background: var(--rot); }
.m-veranstaltung { background: var(--hellblau); }
.m-produktion { background: var(--gruen); }
.m-phase { background: #7aa9e0; }
.m-wahltermin { background: var(--violett); }
.m-aufgabe { background: var(--grau); }
.pruefen { display: inline-block; font-size: 0.65rem; padding: 0.1rem 0.4rem;
  border-radius: 4px; background: var(--gelb); color: var(--gelb-text); margin-left: 0.2rem; }
.hinweis { display: block; font-size: 0.72rem; color: var(--gelb-text);
  background: #fffbeb; border-radius: 4px; padding: 0.25rem 0.4rem; margin-top: 0.3rem; }

.jetzt { border: 1px solid #f3c4cc; background: #fff6f7; border-radius: 9px;
  padding: 0.7rem; margin-bottom: 1rem; }
.jetzt h2 { font-size: 0.72rem; letter-spacing: 0.05em; color: #b01e37; margin: 0 0 0.5rem; }

.block { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 9px;
  padding: 0.7rem; margin-bottom: 0.75rem; }
.block h2 { font-size: 0.8rem; margin: 0 0 0.5rem; color: var(--blau); }
.leer { font-size: 0.78rem; color: var(--grau); }

.fuss { max-width: 60rem; margin: 0 auto; padding: 0 1rem 2rem; font-size: 0.72rem; color: var(--grau); }