/* Seiten-Layouts P1b: Übersicht/Server (E2), Server-Detail (E3 Leitstand), Host/Nutzer/Einstellungen (E1). Werte NUR aus tokens.css. */

/* Übersicht (H, E2) */
.hero { grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 4), 1fr)); margin-bottom: var(--s-4); }
.hero .card { display: flex; align-items: center; gap: var(--s-4); }
.hero .t { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; } .hero .t b { font-size: var(--fs-l); }
.zwei { grid-template-columns: 2fr 1fr; margin-bottom: var(--s-4); }
.gross { font-size: var(--fs-2xl); font-weight: 700; }
.kachel-link { margin-bottom: var(--s-4); }
.kachel-link a.card { display: flex; align-items: center; gap: var(--s-4); }
.kachel-link a.card:hover { border-color: var(--akz); }
.kachel-link .rechts { margin-left: auto; color: var(--ink-3); }

/* Server-Liste (C, E2) */
.werkzeug { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); flex-wrap: wrap; }
.werkzeug .suche { flex: 1; min-width: calc(var(--s-8) * 3); }
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip { cursor: pointer; }
.zust { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); background: var(--g-1); border-top: var(--haar) solid var(--line); font-size: var(--fs-s); color: var(--ink-3); }
.tbl td .bar { min-width: calc(var(--s-8) * 1.5); }
.tbl tr[data-id] { cursor: pointer; }
.aktions { display: flex; gap: var(--s-1); }

/* Server-Detail (D, E3 Leitstand): Objektliste links, Arbeitsfläche rechts */
.leitstand { display: grid; grid-template-columns: calc(var(--s-8) * 4.5) minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.liste { background: var(--g-1); border: var(--haar) solid var(--line); border-radius: var(--r-3); padding: var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-3); position: sticky; top: calc(var(--topbar-h) + var(--s-4)); max-height: calc(100vh - var(--topbar-h) - var(--s-6)); overflow: auto; }
.liste h3 { font-size: var(--fs-l); padding: 0 var(--s-2); }
.gruppe { margin-bottom: var(--s-1); }
.gruppe > .kopf { display: flex; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); text-align: left; }
.gruppe > .kopf .chev { transition: transform var(--t) var(--ease); } .gruppe:not(.auf) > .kopf .chev { transform: rotate(-90deg); }
.gruppe .zahl { margin-left: auto; background: var(--g-4); border-radius: var(--r-voll); padding: 0 var(--s-2); }
.gruppe:not(.auf) .eintraege { display: none; }
.eintrag { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); width: 100%; text-align: left; font-size: var(--fs-s); color: var(--ink-2); }
.eintrag:hover { background: var(--g-3); color: var(--ink); }
.eintrag.on { background: var(--akz-schwach); color: var(--ink); box-shadow: inset 3px 0 0 var(--akz); }
.eintrag small { display: block; color: var(--ink-3); font-size: var(--fs-xs); line-height: 1.2; } .eintrag .m { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.eintrag .r { color: var(--ink-3); font-size: var(--fs-xs); }
.flaeche { min-width: 0; }
.leit { grid-template-columns: repeat(12, 1fr); }
.leit .s3 { grid-column: span 3; } .leit .s4 { grid-column: span 4; } .leit .s6 { grid-column: span 6; } .leit .s8 { grid-column: span 8; } .leit .s12 { grid-column: span 12; }
.band { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.band h2 { font-size: var(--fs-xl); }
.band .rechts { margin-left: auto; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.rel { display: flex; gap: var(--s-1); border-bottom: var(--haar) solid var(--line); margin-bottom: var(--s-4); overflow: auto; }
.rel button { padding: var(--s-2) var(--s-3); font-size: var(--fs-s); font-weight: 600; color: var(--ink-3); border-bottom: calc(var(--haar) * 2) solid transparent; display: flex; gap: var(--s-2); align-items: center; }
.rel button.on { color: var(--ink); border-bottom-color: var(--akz); }
.konsole { max-height: calc(var(--s-8) * 6); overflow: auto; white-space: pre-wrap; word-break: break-word; }
.befehl { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.fakt { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); font-size: var(--fs-s); } .fakt dt { color: var(--ink-3); } .fakt dd { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* Host & Proxmox (E, E1), Nutzer (G, E1), Einstellungen (F, E1) */
.kopfband { display: flex; gap: var(--s-3); align-items: center; margin-bottom: var(--s-4); flex-wrap: wrap; }
.kopfband .suche { flex: 1; min-width: calc(var(--s-8) * 3); }
.dash4 { grid-template-columns: repeat(auto-fit, minmax(calc(var(--s-8) * 3), 1fr)); margin-bottom: var(--s-4); }
.zwei-e1 { grid-template-columns: 1.4fr 1fr; align-items: start; }
.spalte { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
.matrix td, .matrix th { text-align: center; } .matrix td:first-child, .matrix th:first-child { text-align: left; }
.hinweiskarte { margin-bottom: var(--s-4); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.formzeile { display: flex; gap: var(--s-2); align-items: flex-end; flex-wrap: wrap; }
.formzeile .field { margin: 0; flex: 1; min-width: calc(var(--s-8) * 2.5); }
.tbl td.umbruch { white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 1000px) {
  .zwei, .zwei-e1 { grid-template-columns: minmax(0, 1fr); }
  .leitstand { grid-template-columns: minmax(0, 1fr); }
  .liste { position: static; max-height: calc(var(--s-8) * 5); }
  .leit .s3, .leit .s4, .leit .s6, .leit .s8 { grid-column: span 12; }
  .hero { grid-template-columns: repeat(2, 1fr); }
  .hero .card { flex-direction: column; align-items: flex-start; }
}
.tbl .gruppe-kopf td { background: var(--g-1); color: var(--ink-2); }

/* Teil C (E2): Server-Tabelle mit Aktion-Menü, Auswahl und Fußleiste */
.tbl-wrap.menue { overflow: visible; }
.tbl th:first-child, .tbl td:first-child { width: var(--s-6); }
.gruppen-kopf td { background: var(--g-1); color: var(--ink-2); font-size: var(--fs-xs); }
.zust .dd.oben .dd-menu { top: auto; bottom: calc(100% + var(--s-1)); left: auto; right: 0; }
.aktions .dd-btn { min-width: calc(var(--s-8) * 2.2); }
/* Server-Auswahl (E3): Tabelle in der schmaleren Arbeitsfläche scrollt, statt rechts abgeschnitten zu werden */
.leitstand .tbl-wrap { overflow-x: auto; max-width: 100%; }
.leitstand .tbl td .bar { min-width: var(--s-7); }