/* ===================================================================
   Calls & Meeting-Protokolle.

   Nur eine Gruppe wird optisch hervorgehoben: die, in der etwas fehlt.
   Alles andere bleibt bewusst ruhig -- sonst schreit die ganze Seite
   und man sieht nicht mehr, was wirklich dran ist.
   =================================================================== */

.gruppe { margin-bottom: 32px; }
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.stufe__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.stufe__zahl {
  min-width: 22px; padding: 1px 7px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06); border-radius: 999px;
}
.block__frage { margin: 0 0 12px; font-size: .85rem; color: var(--text-still); }
.gruppe__karten { display: grid; gap: 10px; margin-top: 12px; }

.gruppe[data-gruppe="offen"] .stufe__titel { color: #f0c48a; }
.gruppe[data-gruppe="offen"] .stufe__zahl {
  color: #f0c48a; background: rgba(240, 196, 138, .13);
}

/* ---------- Karte --------------------------------------------------------- */

.call {
  position: relative;
  padding: 15px 18px 15px 21px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  transition: border-color .18s ease;
}
.call::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--rand-stark, rgba(255, 255, 255, .18));
}
.call[data-gruppe="offen"] {
  border-color: rgba(240, 196, 138, .32);
  background: rgba(240, 196, 138, .045);
}
.call[data-gruppe="offen"]::before { background: #f0c48a; }
.call[data-gruppe="anstehend"]::before { background: var(--akzent); }
.call[data-gruppe="erledigt"] { opacity: .82; }
.call[data-gruppe="erledigt"]:hover { opacity: 1; }
.call[data-gruppe="erledigt"]::before { background: #79d1a2; opacity: .55; }
.call:hover { border-color: rgba(255, 255, 255, .18); }

.call__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.call__titel { margin: 0; font-size: 1.02rem; font-weight: 650; }
.call__zeit { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }
.call__text, .call__ort { margin: 10px 0 0; font-size: .86rem; color: var(--text-leise); }
.call__ort::before { content: "Ort: "; color: var(--text-still); }

.marke-fehlt {
  padding: 3px 9px; border-radius: 999px;
  font-size: .71rem; font-weight: 600;
  color: #f0c48a; background: rgba(240, 196, 138, .12);
  border: 1px solid rgba(240, 196, 138, .35);
}

/* ---------- Aufgeklappt ---------------------------------------------------- */

.call__detail { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--rand); }
.call__abschnitt {
  margin: 2px 0 14px; font-size: .88rem; color: var(--text-leise);
  white-space: pre-wrap; max-width: 78ch;
}
.call__quelle { margin: 12px 0 0; font-size: .77rem; color: var(--text-still); }
.call__verweis { color: var(--akzent); }

.todo-liste { margin: 4px 0 0; padding: 0; list-style: none; }
.todo-liste li {
  padding: 9px 13px; margin-bottom: 6px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  font-size: .87rem;
}
.todo-liste li[data-status="erledigt"] { opacity: .6; }
.todo-liste li[data-status="erledigt"] .todo-liste__titel { text-decoration: line-through; }
.todo-liste__titel { display: block; }
.todo-liste .kk__still { display: block; margin-top: 2px; font-size: .76rem; color: var(--text-still); }

/* ---------- Protokollbogen -------------------------------------------------- */

.bogen__hinweis { margin: 1px 0 6px; font-size: .78rem; color: var(--text-still); max-width: 70ch; }
.bogen__feld {
  width: 100%; margin-bottom: 16px; padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; resize: vertical;
}
.bogen__zeit {
  margin-bottom: 14px; padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.todos { display: grid; gap: 7px; margin: 4px 0 10px; }
.todo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 7px; }
.todo__titel, .todo__frist {
  padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

.bogen__feld:focus, .bogen__zeit:focus, .todo__titel:focus, .todo__frist:focus {
  outline: none; border-color: rgba(63, 189, 245, .65);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}


@media (max-width: 560px) {
  .todo { grid-template-columns: minmax(0, 1fr) auto; }
  .todo__frist { grid-column: 1 / 2; }
  .todo__weg { grid-row: 1 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .call, .todo__weg { transition: none; }
}