/* ============================================================
   u flow – Kalender-Termine im Fokus (read-only, von Aufgaben abgesetzt)
   ============================================================ */
.ft-termin {
  display: flex; align-items: baseline; gap: 9px;
  min-height: 42px; padding: 6px 8px 6px 17px; margin: 1px 0; border-radius: 10px;
  position: relative; font-size: 13px; color: var(--fk-text);
}
/* Termin = Zeitblock: schmaler Balken links (statt Punkt/Checkbox), bündig zum Wochentag */
.ft-termin::before {
  content: ""; position: absolute; left: 2px; top: 7px; bottom: 7px;
  width: 3px; border-radius: 999px; background: var(--fk-akzent); opacity: 0.65;
}
.ft-termin.ganztags::before { top: 50%; bottom: auto; transform: translateY(-50%); height: 6px; }
/* Zeit ruhig (nicht im Tag-Orange) – der Balken trägt das „Termin“-Signal */
.ft-termin-zeit {
  flex: 0 0 auto; min-width: 82px; font-size: 11px; font-weight: 600;
  color: var(--fk-mittel); font-variant-numeric: tabular-nums;
}
.ft-termin.ganztags .ft-termin-zeit { font-weight: 500; color: var(--fk-leise); }
.ft-termin-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-termin-dauer {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 500;
  color: var(--fk-leise); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ft-termin-cal {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--fk-akzent); background: var(--fk-akzent-bg); padding: 2px 7px; border-radius: 999px;
}

/* ---------- Kalenderquellen im Einstellungsdialog ---------- */
.pm-cal-body { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.pm-cal-liste { display: flex; flex-direction: column; gap: 6px; }
.pm-cal-zeile {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 8px; border: 1px solid var(--karte-rand); border-radius: 10px; background: rgba(255,255,255,0.7);
}
.pm-cal-zeile.ist-aus { opacity: 0.62; }
.pm-cal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pm-cal-info b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-stark); }
.pm-cal-info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-leise); }
.pm-cal-schalter { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.pm-cal-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.pm-cal-schalter span { width: 30px; height: 18px; border-radius: 999px; background: rgba(90,85,77,0.22); position: relative; transition: background 0.15s ease; }
.pm-cal-schalter span::after { content: ""; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.15s ease; }
.pm-cal-schalter input:checked + span { background: #5d8756; }
.pm-cal-schalter input:checked + span::after { transform: translateX(12px); }
.pm-cal-schalter input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.pm-cal-entfernen { border: 0; background: transparent; color: var(--text-leise); cursor: pointer; font-size: 20px; line-height: 1; padding: 3px; }
.pm-cal-entfernen:hover { color: var(--red, #e1002a); }
.pm-cal-werkzeuge { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pm-cal-form { display: flex; flex-direction: column; gap: 7px; padding: 10px; border: 1px dashed var(--karte-rand); border-radius: 11px; background: rgba(255,255,255,0.55); }
.pm-cal-form[hidden] { display: none; }
.pm-cal-form-aktionen { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pm-cal-spacer { flex: 1; }
.pm-cal-meldung { min-height: 16px; font-size: 11.5px; line-height: 1.35; color: var(--text-leise); }
.pm-cal-meldung.ok { color: #4d7a48; }
.pm-cal-meldung.fehler, .pm-cal-leer.fehler { color: var(--red, #b3261e); }
.pm-cal-leer { padding: 9px 10px; border-radius: 9px; background: var(--flaeche-2, rgba(120,110,96,0.08)); font-size: 12px; line-height: 1.4; color: var(--text-leise); }

@media (max-width: 520px) {
  .pm-cal-zeile { align-items: flex-start; flex-wrap: wrap; }
  .pm-cal-info { min-width: 150px; }
}