/* ═══════════════════════════════════════════════════════
   Master — alle laufenden Server auf einer Wand
   Jede Karte ist ein Monitorplatz: Melder, Zahlen, Kanalreihe.
   ═══════════════════════════════════════════════════════ */

.master-hinweis {
    display: flex; align-items: flex-start; gap: 0.7rem;
    background: repeating-linear-gradient(135deg,
        rgba(245,158,11,0.13) 0 14px, rgba(245,158,11,0.06) 14px 28px);
    border: 1px solid rgba(245,158,11,0.32);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem; margin-bottom: 1rem;
    font-size: var(--fs-xs); line-height: 1.5; color: #fcd34d;
}
.master-hinweis i { font-size: var(--fs-base); margin-top: 0.1rem; flex: none; }
.master-hinweis strong { color: #fde68a; }

/* ── Serverwand ──────────────────────────────────────── */
.srv-raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 0.7rem;
    padding-top: 0.5rem;
}

.srv-karte {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface2);
    transition: border-color 0.2s;
}
.srv-karte:hover { border-color: var(--linie-stark); }
/* Sendet dort jemand, bekommt der Platz eine rote Kante — auf einer
   Monitorwand muss man das aus drei Metern Entfernung sehen. */
.srv-karte.funkt { border-color: var(--border-red); box-shadow: 0 0 0 1px var(--red-dim) inset; }
.srv-karte.funkt::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: var(--red); box-shadow: 0 0 10px var(--red-glow);
}

.srv-karte header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--kopf-bg);
    border-bottom: 1px solid var(--linie);
}
.srv-karte .name {
    font-family: var(--cond); font-size: var(--fs-base); font-weight: 700;
    letter-spacing: 0.03em; text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.srv-karte .code {
    margin-left: auto; flex: none;
    font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: 0.08em;
    color: var(--text-dim);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.05rem 0.35rem;
}

.srv-karte .werte {
    display: grid; grid-template-columns: repeat(3, 1fr);
    border-bottom: 1px solid var(--linie);
}
.srv-karte .wert {
    padding: 0.55rem 0.6rem; text-align: center;
    border-right: 1px solid var(--linie);
}
.srv-karte .wert:last-child { border-right: none; }
.srv-karte .zahl {
    display: block; font-family: var(--mono); font-size: var(--fs-md); font-weight: 600;
    font-variant-numeric: tabular-nums; color: var(--text);
}
.srv-karte .bez {
    display: block; margin-top: 0.15rem; white-space: nowrap;
    font-size: var(--fs-3xs); text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-dim);
}

.srv-karte .kanaele { margin-top: auto; padding: 0.4rem 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.kanalzeile {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.28rem 0.45rem; border-radius: var(--radius-sm);
    font-size: var(--fs-2xs); color: var(--text-dim);
}
.kanalzeile .kurz {
    font-family: var(--mono); font-size: var(--fs-2xs); letter-spacing: 0.05em;
    color: var(--text-mid); min-width: 42px;
}
.kanalzeile .wer { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanalzeile.aktiv { background: var(--red-dim); color: var(--red); }
.kanalzeile.aktiv .kurz { color: var(--red); }

@media (max-width: 560px) {
    .srv-raster { grid-template-columns: 1fr; }
    .master-hinweis { font-size: var(--fs-xs); }
}