/* ============================================================
   Kalender + Geräte-Pairing
   ============================================================ */

.cal-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--s-24); align-items: start; }
.plate--cal { padding: var(--s-16); }

.cal-top { display: flex; align-items: center; gap: var(--s-8); margin-bottom: var(--s-16); }
.cal-title { font-size: var(--fs-15); font-weight: 600; flex: 1; text-align: center; }

.cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-wd span { text-align: center; padding: 6px 0; font-size: var(--fs-12); font-weight: 550; color: var(--ink-faint); }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-cell {
  background: var(--bg-deep); border: 1px solid transparent; border-radius: var(--r-sm);
  min-height: 76px; padding: 6px 7px; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cal-cell:hover { border-color: var(--line-strong); }
.cal-cell--other { opacity: 0.45; }
.cal-cell__n { font-size: var(--fs-12); font-weight: 500; color: var(--ink-dim); font-feature-settings: 'tnum'; }
.cal-cell--today .cal-cell__n { color: var(--accent-ink); background: var(--accent); border-radius: var(--r-sm); padding: 1px 6px; align-self: flex-start; font-weight: 600; }
.cal-cell--sel { border-color: var(--accent); background: var(--accent-wash); }
.cal-cell__ev { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.cal-cell__more { font-size: 10px; color: var(--ink-faint); }

.cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.cal-dot--termin { background: var(--ok); }
.cal-dot--abschluss { background: var(--ok); box-shadow: 0 0 0 2px var(--ok-wash); }
.cal-dot--wiedervorlage { background: var(--warn); }
.cal-dot--aftersales { background: var(--accent); }
.cal-item--aftersales .cal-item__time { color: var(--accent); }

.cal-legend { display: flex; gap: var(--s-16); margin-top: var(--s-12); font-size: var(--fs-12); color: var(--ink-dim); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }

.cal-item {
  width: 100%; display: flex; align-items: center; gap: var(--s-12);
  padding: 12px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel); text-align: left; margin-top: var(--s-8);
  box-shadow: var(--shadow-sm); transition: border-color var(--dur) var(--ease);
}
.cal-item:first-of-type { margin-top: var(--s-16); }
.cal-item:hover { border-color: var(--ink-faint); }
.cal-item__time { font-size: var(--fs-12); font-weight: 600; color: var(--accent); min-width: 42px; font-feature-settings: 'tnum'; }
.cal-item__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-item__title { font-size: var(--fs-14); font-weight: 550; }
.cal-item__meta { font-size: var(--fs-12); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-item--wiedervorlage .cal-item__time { color: var(--warn); }

.cal-agenda { display: flex; flex-direction: column; gap: 10px; margin-top: var(--s-16); }
.cal-agenda li { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-13); }
.cal-agenda__date { color: var(--ink-dim); min-width: 128px; font-weight: 500; }

@media (max-width: 900px) { .cal-layout { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .cal-cell { min-height: 56px; } .cal-agenda__date { min-width: 92px; } }

/* ---------- Pairing-Dialog ---------- */
.pair-dlg { max-width: 400px; }
.pair { padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-16); }
.pair__head { display: flex; align-items: center; justify-content: space-between; }
.pair__head h2 { font-size: var(--fs-16); }
.pair__lead { font-size: var(--fs-13); line-height: 1.6; color: var(--ink-dim); }
.pair__qr {
  align-self: center; width: 232px; height: 232px; padding: 12px;
  display: grid; place-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: #FFFFFF;
}
.pair__qr svg { width: 100%; height: 100%; display: block; }
.pair__err { font-size: var(--fs-13); color: var(--danger); text-align: center; padding: var(--s-16); }
.pair__code { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8); }
.pair__codeval { font-family: var(--font-mono); font-size: var(--fs-18); font-weight: 600; letter-spacing: 0.16em; color: var(--accent); }
.pair__ttl { font-size: var(--fs-12); color: var(--ink-faint); }
.pair__url {
  font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-dim);
  word-break: break-all; cursor: pointer; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-deep);
}
.pair__url:hover { color: var(--ink); border-color: var(--line-strong); }
.pair__actions { display: flex; justify-content: center; }
.pair__net summary { font-size: var(--fs-12); font-weight: 550; color: var(--ink-dim); cursor: pointer; }
.pair__net[open] summary { margin-bottom: var(--s-8); }
.pair__net .field__hint { margin-top: 6px; }
.pair__foot { font-size: var(--fs-12); line-height: 1.6; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: var(--s-12); }
.pair__presence { border-top: 1px solid var(--line); padding-top: var(--s-12); }
.pair__preslist { display: flex; flex-direction: column; gap: var(--s-8); }
.pair__pres { display: flex; align-items: center; gap: var(--s-8); font-size: var(--fs-12); }
.pair__pres .muted { margin-left: auto; color: var(--ink-faint); }
.pair__presdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: tm-pulse 2s ease-in-out infinite; }

/* ---------- Live-Indikator ---------- */
.livedot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-12); font-weight: 500; color: var(--ink-dim);
  border: 1px solid var(--line-strong); border-radius: var(--r-full); padding: 4px 10px;
}
.livedot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.livedot--callers { color: var(--ok-deep); border-color: color-mix(in srgb, var(--ok) 40%, var(--line-strong)); }
.livedot--callers::before { background: var(--ok); animation: tm-pulse 2s ease-in-out infinite; }
@media (max-width: 1100px) { .livedot { display: none; } }

/* ---------- /pair Landepage (Handy) ---------- */
.pairland { min-height: 100dvh; display: grid; place-content: center; padding: var(--s-24); background: var(--bg); }
.pairland__card { width: min(360px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-32); box-shadow: var(--shadow); }
.pairland__mark { font-size: var(--fs-15); font-weight: 640; letter-spacing: -0.015em; margin-bottom: var(--s-24); }
.pairland__mark span { color: var(--accent); }
.pairland__msg { font-size: var(--fs-14); line-height: 1.6; display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-16); }