/* Kalkubit-Zentrale – Ergänzungen zu app.css (Farben, Bausteine und Darstellung kommen von dort). */
.toolbar { align-items: center; }
.toolbar .in { min-width: 180px; }
.toolbar .check { white-space: nowrap; }

/* Instanzliste: Punkt grün/grau, Kunde fett, Knopf „Fernwartung“ rechts */
.inst { cursor: pointer; align-items: flex-start; }
.inst:hover, .inst:focus-visible { background: var(--sunken); }
.inst .m a { color: var(--primary-text); }
.online-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--grey-zone); flex: none; margin-top: 6px; box-shadow: 0 0 0 3px var(--surface-sub); }
.online-dot.on { background: var(--ok); }
.inst .btn { flex: none; align-self: center; }
@media (max-width: 480px) { .inst { flex-wrap: wrap; } .inst .btn { width: 100%; margin-top: 4px; } .inst .grow { flex: 1 1 calc(100% - 30px); } }

/* Fernwartungs-Dialog: große Code-Eingabe, großer Link zur Instanz */
.code-in { font-size: 30px; letter-spacing: .18em; text-align: center; font-variant-numeric: tabular-nums; min-height: 64px; font-weight: 700; }
.fw-big { min-height: 60px; font-size: 18px; }
.fw-wait { display: flex; align-items: center; gap: 12px; }
.fw-wait i { width: 16px; height: 16px; border-radius: 999px; border: 3px solid var(--primary-border); border-top-color: var(--primary); flex: none; animation: fw-spin 1s linear infinite; }
@keyframes fw-spin { to { transform: rotate(360deg); } }
.fw-state { font-size: 15px; }
.fw-state b { display: block; margin-bottom: 2px; }

/* Verlauf */
.verlauf .m { font-size: 13px; }
.kv.info { grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; }
.kv.info span:nth-child(odd) { color: var(--muted); }
.kv.info span { min-width: 0; overflow-wrap: anywhere; }