/* ══════════════════════════════════════════════════════════════════
   Der Überblick auf Start (v.35.66.0) — feature/start/ueberblick.js.
   Kompakt: eine Karte mit dem, was ansteht, darunter die Gruppen als
   Plättchen und der Assistent als Zeile.
   ══════════════════════════════════════════════════════════════════ */

.ueberblick { display: grid; gap: var(--s4); }

.wichtig {
  padding: var(--s3) var(--s3) var(--s2);
  border: 1px solid color-mix(in oklab, var(--accent) 18%, var(--border));
  border-radius: var(--r-panel);
  background: var(--accent-bg);
}
.wichtig__kopf { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s1) var(--s2); }
.wichtig__icon {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.wichtig__titel {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-soft);
}
.wichtig__stand { margin-left: auto; font-size: 12px; color: var(--ink-soft); }
.wichtig__liste { gap: var(--s1); }
.wichtig__liste .row { background: var(--surface); }
.wichtig__liste > .empty-hint { margin: var(--s1) var(--s1) var(--s2); }
.wichtig__notiz { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); font-style: italic; }
.wichtig__prog, .wichtig__ok {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.wichtig__ok { color: var(--success, var(--accent)); }
.wichtig__mehr { display: inline-block; margin: var(--s1) var(--s1) 0; font-size: 13px; }
.wichtig .brief__marke { margin-top: var(--s3); }
.wichtig__zeile[data-art="absage"] .row__title { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Die Gruppen als Plättchen in ihrer Farbe — ein Tipp öffnet sie. */
.start-gruppen__liste { display: flex; flex-wrap: wrap; gap: var(--s2); }
.start-gruppe {
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px;
  padding: var(--s1) var(--s3) var(--s1) var(--s1);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}
.start-gruppe:hover { border-color: var(--ink-soft); }
.start-gruppe__zeichen {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--tint, var(--accent));
  color: var(--deep, #fff);
  font-size: 12px; font-weight: 800;
}

/* Ohne Gruppe: zwei Wege hinein. */
.start-wege { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.start-weg {
  display: grid; gap: 2px;
  padding: var(--s4);
  border: 1.5px solid var(--border);
  border-radius: var(--r-panel);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.start-weg:first-child { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); }
.start-weg:hover { border-color: var(--accent); }
.start-weg__wort { font-weight: 750; }
.start-weg__sub { font-size: 13px; color: var(--ink-soft); }

.start-ki__knopf { width: 100%; font: inherit; text-align: left; cursor: pointer; }