/* 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 (OA-1005-032..039): senkrechtes Menü links wie games.g-sv.eu, Arbeitsfläche rechts */
.leitstand { display: grid; grid-template-columns: calc(var(--s-8) * 3.5) minmax(0, 1fr); gap: var(--s-4); align-items: start; } /* MENUE-EINBAU */
.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; }
.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); }
  .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); }

/* P5c Reiter Teilen */
.teilen-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.tchip { cursor: pointer; }
.tchip:disabled { cursor: default; opacity: .6; }
.teilen-rechte { white-space: normal; max-width: calc(var(--s-8) * 6); }
.teilen-form { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.teilen-form .inp { flex: 1 1 calc(var(--s-8) * 2); width: auto; }
.teilen-form .tstufe, .tbl .tstufe { flex: 0 0 auto; width: auto; min-width: calc(var(--s-8) * 1.6); }
.mono { font-family: var(--ff-mono); }

/* Reiter FTP/SFTP (P5c) */
.ftp-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.ftp-l { flex: 0 0 calc(var(--s-8) * 1.5); }
.ftp-w { flex: 1; min-width: calc(var(--s-8) * 2); overflow-wrap: anywhere; }

/* Verlauf CPU/RAM (Teil H) */
svg.verlauf { display: block; width: 100%; height: calc(var(--s-8) * 2); margin: var(--s-3) 0; }
svg.verlauf polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
svg.verlauf .v-cpu { stroke: var(--akz); }
svg.verlauf .v-ram { stroke: var(--info); }

/* Neuer Server (Assistent) */
.gitter.vorlagen { grid-template-columns: repeat(auto-fill, minmax(calc(var(--s-8) * 4), 1fr)); }
button.card.vorlage { text-align: left; display: flex; flex-direction: column; gap: var(--s-2); cursor: pointer; }
button.card.vorlage.gewaehlt { border-color: var(--akz); }
.feld { display: flex; flex-direction: column; gap: var(--s-1); margin-bottom: var(--s-3); }
.feld input, .feld select { padding: var(--s-2) var(--s-3); border-radius: var(--r-2); border: 1px solid var(--line-stark); background: var(--g-1); color: var(--ink); font-family: var(--ff); font-size: var(--fs-m); }
.fehler-text { color: var(--danger); }
.fuss-knoepfe { display: flex; gap: var(--s-3); justify-content: flex-end; margin-top: var(--s-4); }

/* P5c-Nachbesserung 390: Archiv-Block und Teilen-Tabelle umbrechen statt abgeschnitten (Rückweg: seiten.css.bak-p5c-mobil-20261004) */
.archiv .tbl-wrap { overflow: auto; }
@media (max-width: 1000px) {
  .archiv .tbl td, .archiv .tbl th, .tbl-wrap:has(.teilen-rechte) .tbl td { white-space: normal; }
  .archiv .tbl td:first-child, .archiv .tbl th:first-child { width: auto; }
}

@media (max-width: 1000px) { .archiv .tbl th:nth-child(3), .archiv .tbl td:nth-child(3) { display: none; } }
/* HOVER-EINBAU (OA-1005-031): Verlauf-Tooltip, nur Token */
.v-wrap { position: relative; touch-action: pan-y; }
.v-linie { position: absolute; width: var(--haar); background: var(--line-stark); pointer-events: none; }
.v-punkt { position: absolute; width: var(--s-3); height: var(--s-3); margin: calc(var(--s-3) / -2) 0 0 calc(var(--s-3) / -2); border-radius: var(--r-voll); pointer-events: none; background: var(--akz); box-shadow: 0 0 0 var(--s-1) var(--akz-schwach); }
.v-punkt.ram { background: var(--info); box-shadow: 0 0 0 var(--s-1) var(--info-schwach); }
.v-tip { position: absolute; z-index: 2; padding: var(--s-2) var(--s-3); background: var(--g-3); border: var(--haar) solid var(--line-stark); border-radius: var(--r-2); box-shadow: var(--sch-2); font-size: var(--fs-s); color: var(--ink); pointer-events: none; white-space: nowrap; }
.v-zeile { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.v-zeile i { width: var(--s-2); height: var(--s-2); border-radius: var(--r-voll); background: var(--akz); display: inline-block; }
.v-zeile i.ram { background: var(--info); }
.v-spitze { color: var(--warn); font-size: var(--fs-xs); }
.smenue { background: var(--g-1); border: var(--haar) solid var(--line); border-radius: var(--r-3); padding: var(--s-3); display: flex; flex-direction: column; gap: var(--s-1); position: sticky; top: calc(var(--topbar-h) + var(--s-4)); max-height: calc(100vh - var(--topbar-h) - var(--s-6)); overflow: auto; }
.smenue-kopf { display: none; align-items: center; gap: var(--s-2); width: 100%; padding: var(--s-2) var(--s-3); font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); text-align: left; }
.smenue-kopf b { margin-left: auto; color: var(--ink); }
.smenue-liste { display: flex; flex-direction: column; gap: var(--s-1); }
.sm-h { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2) var(--s-3); border-radius: var(--r-2); border: var(--haar) solid transparent; font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); text-align: left; }
.sm-h:hover { background: var(--g-3); color: var(--ink); }
.sm-h.on, .sm-gruppe.akt > .sm-h { background: var(--akz-schwach); color: var(--ink); border-color: var(--akz); }
.sm-h .chev { margin-left: auto; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.sm-gruppe:not(.auf) .chev { transform: rotate(-90deg); }
.sm-unter { display: none; flex-direction: column; gap: var(--s-1); padding: var(--s-1) 0 var(--s-1) var(--s-5); }
.sm-gruppe.auf > .sm-unter { display: flex; }
.sm-e { padding: var(--s-1) var(--s-3); border-radius: var(--r-1); font-size: var(--fs-s); color: var(--ink-3); text-align: left; box-shadow: inset 0 0 0 transparent; }
.sm-e:hover { color: var(--ink); background: var(--g-3); }
.sm-e.on { color: var(--akz); box-shadow: inset 2px 0 0 var(--akz); background: var(--akz-schwach); }
.sm-abschnitt { display: block; margin: var(--s-3) var(--s-3) var(--s-1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.sm-abschnitt-wrap { display: flex; flex-direction: column; gap: var(--s-1); border-top: var(--haar) solid var(--line); margin-top: var(--s-2); }
.sw { position: relative; }
.sw-btn { height: auto; padding: var(--s-1) var(--s-3); gap: var(--s-3); }
.sw-name { font-size: var(--fs-xl); font-weight: 700; color: var(--ink); }
.sw-bild { width: var(--s-5); height: var(--s-5); border-radius: var(--r-1); object-fit: cover; flex: none; }
.sw-sym { display: inline-flex; align-items: center; justify-content: center; background: var(--g-4); color: var(--ink-3); }
.sw-menu { min-width: calc(var(--s-8) * 4.5); max-height: calc(var(--s-8) * 6); overflow: auto; }
.sw-gruppe { padding: var(--s-2) var(--s-3); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); }
.sw-zeile { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-2); font-size: var(--fs-s); color: var(--ink-2); box-shadow: inset 0 0 0 transparent; }
.sw-zeile:hover { background: var(--g-3); color: var(--ink); }
.sw-zeile.on { background: var(--akz-schwach); color: var(--ink); box-shadow: inset 3px 0 0 var(--akz); }
.sw-n { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.sw-st { color: var(--ink-3); font-size: var(--fs-xs); }
.konsole .a-rot { color: var(--gefahr); } .konsole .a-gruen { color: var(--akz); } .konsole .a-gelb { color: var(--warn); } .konsole .a-blau { color: var(--info); } .konsole .a-lila { color: var(--ink-2); } .konsole .a-grau { color: var(--ink-3); }
@media (max-width: 1000px) {
  .smenue { position: static; max-height: none; }
  .smenue-kopf { display: flex; }
  .smenue-kopf .chev { transition: transform var(--t) var(--ease); }
  .smenue.zu .smenue-liste { display: none; }
  .smenue.zu .smenue-kopf .chev { transform: rotate(-90deg); }
}

/* QA-ROT Runde 2 (Mitglied 390): Tabellen im Server-Detail umbrechen statt rechts abgeschnitten (Rückweg: seiten.css.bak-qarot2-20261005). !important nötig: Aktionszellen tragen inline white-space:nowrap */
@media (max-width: 600px) {
  [data-tabkoerper] .tbl-wrap .tbl:has([data-a=pin],[data-a=zurueck]) td, [data-tabkoerper] .tbl-wrap .tbl:has([data-a=pin],[data-a=zurueck]) th { white-space: normal !important; overflow-wrap: anywhere; padding-inline: var(--s-2); }
  [data-tabkoerper] .tbl-wrap .tbl:has([data-a=pin],[data-a=zurueck]) td:first-child, [data-tabkoerper] .tbl-wrap .tbl:has([data-a=pin],[data-a=zurueck]) th:first-child { width: auto; }
}
/* Mods Installiert: Karten-Fuss, Filter, Karten auf Handy (Name volle Breite) */
.mods-fuss { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
[data-mods] [data-filter] { margin-bottom: var(--s-3); }
@media (max-width: 600px) { .tbl-karten tbody tr[data-mod] { padding: var(--s-2) 0; } .tbl-karten tbody tr[data-mod] td:first-child { width: auto; flex: 1 1 100%; } .tbl-karten tbody tr[data-mod] td { width: auto; } }
/* Teilen 390: Zeilen als Karten (Name volle Breite, darunter Stufe/Rechte/Aktion). Rückweg: seiten.css.bak-teilen390-20261005 */
@media (max-width: 600px) { .tbl-karten tbody tr[data-uid] { padding: var(--s-2) 0; } .tbl-karten tbody tr[data-uid] td { width: auto; } .tbl-karten tbody tr[data-uid] td.teilen-rechte { flex: 1 1 100%; max-width: none; order: 3; } .tbl-karten tbody tr[data-uid] td:last-child { order: 2; } }
/* Tabellen 390: erste Spalte nicht auf Icon-Breite pressen (Container-Port/Name brachen zeichenweise). Rückweg: seiten.css.bak-teilen390-20261005 */
@media (max-width: 600px) { .tbl th:first-child, .tbl td:first-child { width: auto; } }