/* ===================================================================
   Kalender. Nach Tagen gruppiert statt als Monatsraster: Es geht um
   wenige, dafür konkrete Termine -- eine Liste liest sich dabei besser
   und funktioniert auf dem Handy ohne Umbau.
   =================================================================== */

.zeitraum { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
.zeitraum .schritt[aria-pressed="true"] {
  background: rgba(63, 189, 245, .14);
  border-color: rgba(63, 189, 245, .55);
  color: var(--text);
}

.tag { margin-bottom: 22px; }

.tag__kopf {
  display: flex; align-items: baseline; gap: 10px;
  margin: 0 2px 9px; padding-bottom: 7px;
  border-bottom: 1px solid var(--rand);
}
.tag__datum { font-weight: 700; font-size: .95rem; }
.tag__wochentag { font-size: .8rem; color: var(--text-still); }
.tag__marke {
  margin-left: auto; padding: 1px 9px; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(63, 189, 245, .16); color: #7fd2fb;
}
/* Vergangene Tage treten zurück, bleiben aber lesbar. */
.tag[data-vergangen="ja"] .tag__datum,
.tag[data-vergangen="ja"] .tag__wochentag { color: var(--text-still); }

.eintrag {
  display: grid; gap: 3px 14px;
  grid-template-columns: 78px 1fr auto;
  align-items: start;
  padding: 11px 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand);
  border-left: 3px solid var(--rand);
  border-radius: var(--radius-klein);
}
.eintrag[data-art="call"]   { border-left-color: var(--akzent); }
.eintrag[data-art="review"] { border-left-color: #e0a33c; }
.eintrag[data-art="termin"] { border-left-color: var(--violett); }
.eintrag[data-art="frist"]  { border-left-color: #d8656e; background: rgba(216, 101, 110, .05); }
.eintrag[data-erledigt="ja"] { opacity: .5; }

.eintrag__zeit {
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: .88rem;
  color: var(--text-leise);
}
.eintrag__titel { font-weight: 600; font-size: .93rem; }
.eintrag__zusatz {
  grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px;
  font-size: .78rem; color: var(--text-still);
}
.eintrag__zusatz a { color: var(--akzent); }
.eintrag__knoepfe { display: flex; gap: 6px; align-items: center; }

.eintrag__art {
  padding: 1px 8px; border-radius: 999px;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255, 255, 255, .06); color: var(--text-still);
}

.leer-hinweis {
  padding: 26px 20px; text-align: center;
  color: var(--text-still); font-size: .9rem;
  border: 1px dashed var(--rand); border-radius: var(--radius);
}

@media (max-width: 620px) {
  .eintrag { grid-template-columns: 62px 1fr; }
  .eintrag__knoepfe { grid-column: 1 / -1; margin-top: 8px; }
  .eintrag__zusatz { grid-column: 1 / -1; }
}