/* Hosting-Website – Gestaltung angelehnt an die Home-App ("Hausverteiler"):
   kühles Papier/Graphit mit feinem Planraster, Kobalt als Akzent, Kacheln mit
   Kopfzeile in Mono-Versalien und Status-LED, Ampelfarben nur für Zustände.
   Hell/Dunkel nach Systemeinstellung, fest wählbar über data-theme (thema.js). */

@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --canvas: #eceff2;
  --raster: rgba(20, 40, 70, 0.045);
  --surface-1: #ffffff;
  --surface-2: #f3f5f8;
  --text-primary: #15212c;
  --text-secondary: #4a5866;
  --text-muted: #7b8794;
  --gridline: #dde3e9;
  --border: #d9dfe5;
  --schatten: 0 1px 0 rgba(20, 33, 44, 0.04), 0 1px 3px rgba(20, 33, 44, 0.06);
  --accent: #2753d1;
  --accent-text: #ffffff;
  --status-good: #1d8f4e;
  --status-warning: #b77900;
  --status-critical: #cc3434;
  --status-off: #9aa4ae;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas: #0d1217; --raster: rgba(160, 190, 230, 0.035); --surface-1: #151c23; --surface-2: #1b232b;
    --text-primary: #e5ecf2; --text-secondary: #a6b2be; --text-muted: #72808d; --gridline: #24303a; --border: #25313b;
    --schatten: 0 1px 0 rgba(255, 255, 255, 0.03) inset; --accent: #7f9dff; --accent-text: #0b1020;
    --status-good: #3ccf7c; --status-warning: #f0b445; --status-critical: #ff6b6b; --status-off: #5b6773;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0d1217; --raster: rgba(160, 190, 230, 0.035); --surface-1: #151c23; --surface-2: #1b232b;
  --text-primary: #e5ecf2; --text-secondary: #a6b2be; --text-muted: #72808d; --gridline: #24303a; --border: #25313b;
  --schatten: 0 1px 0 rgba(255, 255, 255, 0.03) inset; --accent: #7f9dff; --accent-text: #0b1020;
  --status-good: #3ccf7c; --status-warning: #f0b445; --status-critical: #ff6b6b; --status-off: #5b6773;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font: 15px/1.5 var(--font-sans); color: var(--text-primary); -webkit-font-smoothing: antialiased;
  background-color: var(--canvas);
  background-image: linear-gradient(var(--raster) 1px, transparent 1px), linear-gradient(90deg, var(--raster) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; background-attachment: fixed;
}
a { color: var(--accent); }
code, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
code { font-size: 13px; background: var(--surface-2); border: 1px solid var(--border); padding: 0 5px; border-radius: 5px; }

/* --- Rahmen: Seitenleiste links (Desktop), Leiste unten (Handy) --- */
.rahmen { display: flex; min-height: 100vh; }
.seitenleiste {
  flex: none; width: 228px; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; gap: 18px; padding: 20px 12px;
  background: var(--surface-1); border-right: 1px solid var(--border); overflow-y: auto;
}
.seitenleiste-marke { display: flex; align-items: center; gap: 10px; padding: 0 8px; text-decoration: none; color: inherit; }
.seitenleiste-marke svg { width: 36px; height: 36px; flex: none; }
.seitenleiste-marke strong { display: block; font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); }
.seitenleiste-marke span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-muted); }
.seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-punkt, .seitenleiste button.nav-punkt {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 12px; border: none; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-punkt svg { width: 20px; height: 20px; flex: none; fill: currentColor; }
.nav-punkt:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-punkt.aktiv { background: color-mix(in srgb, var(--accent) 11%, var(--surface-1)); color: var(--accent); font-weight: 600; }
.nav-punkt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seitenleiste-fuss { margin-top: auto; display: grid; gap: 10px; padding: 0 4px; }
.wer { padding: 0 8px; font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.wer span { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.thema-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; }
.thema-wahl button { border: none; background: none; font: inherit; font-size: 12px; padding: 5px 0; border-radius: 6px; color: var(--text-secondary); cursor: pointer; }
.thema-wahl button[aria-pressed="true"] { background: var(--surface-1); color: var(--text-primary); font-weight: 600; box-shadow: var(--schatten); }

.inhalt { flex: 1 1 auto; min-width: 0; padding: 0 16px 48px; }
.seite { max-width: 1320px; margin: 0 auto; display: grid; gap: 12px; }
.topbar { padding: 26px 8px 8px; }
.topbar-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.topbar h1 { font-size: 30px; line-height: 1.1; margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }
.topbar-zeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1023px) {
  .rahmen { display: block; }
  .seitenleiste {
    position: fixed; z-index: 10; top: auto; bottom: 0; left: 0; right: 0; width: auto; height: auto;
    flex-direction: row; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 0;
    border-right: none; border-top: 1px solid var(--border); overflow: visible;
  }
  .seitenleiste-marke, .seitenleiste-fuss .wer, .seitenleiste-fuss .thema-wahl { display: none; }
  .seitenleiste nav { flex: 1; } .seitenleiste ul { display: flex; justify-content: space-around; }
  .seitenleiste li { flex: 1; }
  .nav-punkt, .seitenleiste button.nav-punkt { flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; text-align: center; justify-content: center; }
  .seitenleiste-fuss { margin: 0; padding: 0; display: flex; }
  .inhalt { padding-bottom: 96px; }
  .topbar { padding-top: 20px; } .topbar h1 { font-size: 26px; }
  .handy-thema { display: block !important; }
}
.handy-thema { display: none; }

/* --- Kacheln ("Module") --- */
.tile { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--schatten); padding: 16px 18px; min-width: 0; }
.tile h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.tile.schmal { max-width: 560px; width: 100%; justify-self: center; }
.modul-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.led { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }
.led::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--status-off); flex: none; }
.led.ok::before { background: var(--status-good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-good) 18%, transparent); }
.led.warn::before { background: var(--status-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-warning) 20%, transparent); }
.led.krit::before { background: var(--status-critical); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-critical) 20%, transparent); }
.led.ok { color: var(--status-good); } .led.warn { color: var(--status-warning); } .led.krit { color: var(--status-critical); } .led.aus { color: var(--text-muted); }
.tile-label { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.tile-value { font-size: 28px; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.tile-value small { font-size: 15px; font-weight: 400; color: var(--text-secondary); }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.raster.breit { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.balken { height: 6px; background: var(--surface-2); border: 1px solid var(--gridline); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.balken div { height: 100%; background: var(--accent); }
.balken.voll div { background: var(--status-warning); }

.meldung, .fehler-meldung { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-1); display: flex; gap: 10px; align-items: baseline; }
.meldung::before, .fehler-meldung::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.meldung::before { background: var(--status-good); } .fehler-meldung::before { background: var(--status-critical); }
.fehler-meldung { border-color: color-mix(in srgb, var(--status-critical) 40%, var(--border)); }
.klein { font-size: 13px; color: var(--text-secondary); }
.leer { color: var(--text-muted); margin: 4px 0; }
.warn-text { color: var(--status-warning); } .krit-text { color: var(--status-critical); }

/* --- Listen (VMs, Domains, Zugänge) --- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--gridline); }
.liste > li:first-child { border-top: none; padding-top: 4px; }
.liste .haupt { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.liste .haupt strong { font-size: 15px; }
.liste .daten { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-secondary); }
.liste .rechts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* --- Formulare und Knöpfe --- */
.formular { display: grid; gap: 12px; }
.formular label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.formular.zeile { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.formular.eng { gap: 6px; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); align-items: end; }
.formular.eng input { padding: 5px 7px; }
.haken { display: flex !important; align-items: center; gap: 8px; font-weight: 400 !important; color: var(--text-primary) !important; }
.haken input { width: auto; accent-color: var(--accent); }
input, select, textarea { font: inherit; font-size: 14px; color: var(--text-primary); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 0; border-color: var(--accent); }
textarea { font-family: var(--font-mono); font-size: 12px; }
input:disabled { opacity: 0.7; }
.hinweis { font-weight: 400; font-size: 12px; color: var(--text-muted); }
fieldset.wahl { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px 10px; display: grid; gap: 6px; margin: 0; }
fieldset.wahl legend { font-size: 13px; font-weight: 500; color: var(--text-secondary); padding: 0 4px; }
fieldset.wahl label { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--text-primary); font-size: 14px; }
fieldset.wahl input { width: auto; accent-color: var(--accent); }
.knopf, button.knopf {
  font: inherit; font-size: 14px; font-weight: 500; border: 1px solid var(--border); background: var(--surface-1); color: var(--text-primary);
  border-radius: 8px; padding: 7px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.knopf:hover { border-color: var(--text-muted); }
.knopf.haupt { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.knopf.haupt:hover { filter: brightness(1.08); }
.knopf.gefahr { background: var(--status-critical); color: #fff; border-color: var(--status-critical); }
.btn-link { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: var(--accent); cursor: pointer; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.btn-link.gefahr { color: var(--status-critical); }
.aktion-form { display: flex; gap: 6px; margin: 0; }
.aktion-form select { width: auto; padding: 6px 8px; }

.qr { display: block; margin: 12px auto; background: #fff; padding: 10px; border-radius: 10px; max-width: 100%; }
pre.conf { background: var(--surface-2); border: 1px solid var(--border); padding: 12px; border-radius: 8px; overflow-x: auto; font: 12px/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-all; margin: 0; }
#terminal { height: 70vh; min-height: 320px; background: #000; border-radius: 8px; padding: 6px; }
.dns-status.ok { color: var(--status-good); } .dns-status.nein { color: var(--status-warning); }

/* Anmeldung und Einladung: ohne Seitenleiste, mittig */
.einzeln { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.einzeln > div { width: 100%; max-width: 440px; }
.einzeln .tile { width: 100%; }
.einzeln .seitenleiste-marke { justify-content: center; margin-bottom: 18px; padding: 0; }

/* SSH-Anleitung beim Anlegen: aufklappbar, Reiter ohne JavaScript */
details.anleitung { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 0 14px; }
details.anleitung[open] { padding-bottom: 12px; }
details.anleitung summary { cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 500; color: var(--accent); list-style: none; display: flex; align-items: center; gap: 8px; }
details.anleitung summary::-webkit-details-marker { display: none; }
details.anleitung summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; }
details.anleitung[open] summary::before { transform: rotate(45deg); }
details.anleitung pre.conf { background: var(--surface-1); margin: 4px 0 8px; }
.reiter { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; position: relative; }
.reiter > input { position: absolute; opacity: 0; pointer-events: none; left: 0; top: 0; width: 1px; height: 1px; margin: 0; }
.reiter > label { display: inline-block !important; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; background: var(--surface-1); }
.reiter > input:checked + label { background: color-mix(in srgb, var(--accent) 11%, var(--surface-1)); border-color: var(--accent); color: var(--accent); }
.reiter > input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 1px; }
.reiter-inhalt { display: none; flex-basis: 100%; }
#ssh-win:checked ~ [data-fuer="ssh-win"], #ssh-mac:checked ~ [data-fuer="ssh-mac"], #ssh-lin:checked ~ [data-fuer="ssh-lin"],
#px-ub:checked ~ [data-fuer="px-ub"], #px-ro:checked ~ [data-fuer="px-ro"] { display: block; }

/* Auslastung der VMs (Übersicht): Messbalken und CPU-Verlauf.
   Linie in --serie: hell Kobalt wie Home, dunkel ein Schritt dunkler als --accent (geprüft: Helligkeit/Kontrast). */
:root { --serie: #2753d1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --serie: #6688f0; } }
:root[data-theme="dark"] { --serie: #6688f0; }
.liste > li > .auslastung { order: 3; flex-basis: 100%; display: grid; gap: 10px; }
.auslastung:empty { display: none; }
.messer-raster { display: grid; gap: 10px 16px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.messer-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-secondary); }
.messer-kopf > span:first-child { color: var(--text-primary); font-weight: 500; }
.messer-kopf.leise, .messer-kopf.leise > span:first-child { color: var(--text-muted); font-weight: 400; font-size: 11px; }
.messer .balken { margin-top: 5px; }
.verlauf { position: relative; }
.verlauf svg { display: block; width: 100%; height: 48px; margin: 6px 0 2px; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.vg-raster { stroke: var(--gridline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vg-linie { fill: none; stroke: var(--serie); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vg-kreuz { stroke: var(--text-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vg-punkt { position: absolute; width: 10px; height: 10px; margin: 4px 0 0 -5px; border-radius: 50%; background: var(--serie); box-shadow: 0 0 0 2px var(--surface-1); pointer-events: none; transform: translateY(-5px); }
.verlauf-wert { color: var(--text-primary); }
.netz-zeile { margin: 0; color: var(--text-muted); }
.leise-text { color: var(--text-muted); margin: 0; }
.messer-kopf > span:last-child { white-space: nowrap; }
@media (max-width: 560px) { .messer-raster { grid-template-columns: 1fr; } }
@media (max-width: 1023px) {
  .seitenleiste li { min-width: 0; }
  .nav-punkt span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-punkt, .seitenleiste button.nav-punkt { font-size: 10.5px; padding: 6px 0; }
  .seitenleiste-fuss form { min-width: 0; flex: 1; }
}
@media (max-width: 1023px) { .seitenleiste nav { flex: 4 1 0; min-width: 0; } .seitenleiste-fuss { flex: 1 1 0; min-width: 0; } }

/* Verwaltung: Speicher */
.speicher-zeilen { display: grid; gap: 6px; margin-top: 14px; }
.speicher-zeile { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; align-items: baseline; padding-top: 6px; border-top: 1px solid var(--gridline); font-size: 14px; }
.speicher-zeile .klein { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }
.platte-benutzer { margin-top: 6px; display: grid; gap: 4px; max-width: 560px; }
.balken.doppelt { position: relative; }
.balken.doppelt > div { position: absolute; left: 0; top: 0; bottom: 0; }
.balken.doppelt > div.vergeben { background: color-mix(in srgb, var(--accent) 30%, var(--surface-2)); }

/* Verwaltung: Reservierungen pro Kunde (kategorische Farben, Reihenfolge fest; mit dataviz-Prüfskript geprüft) */
:root { --kat-0: #8a96a3; --kat-1: #2a78d6; --kat-2: #eb6834; --kat-3: #1baf7a; --kat-4: #eda100; --kat-5: #e87ba4; --kat-6: #008300; --kat-7: #6250d6; --kat-8: #e34948; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kat-0: #6b7783; --kat-1: #3987e5; --kat-2: #d95926; --kat-3: #199e70; --kat-4: #c98500; --kat-5: #d55181; --kat-6: #008300; --kat-7: #9085e9; --kat-8: #e66767; } }
:root[data-theme="dark"] { --kat-0: #6b7783; --kat-1: #3987e5; --kat-2: #d95926; --kat-3: #199e70; --kat-4: #c98500; --kat-5: #d55181; --kat-6: #008300; --kat-7: #9085e9; --kat-8: #e66767; }
.res-balken-huelle { position: relative; padding-top: 30px; margin-top: -22px; }
.res-balken { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; }
.res-teil { flex: 0 0 auto; min-width: 3px; transition: opacity .12s ease; cursor: default; }
.res-teil:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }
.res-teil.gedimmt { opacity: .35; }
.res-frei { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.res-grenze { position: absolute; top: 24px; bottom: -6px; width: 0; border-left: 2px solid var(--text-primary); }
.res-grenze span { position: absolute; top: -20px; left: 4px; white-space: nowrap; font: 11px var(--font-mono); color: var(--text-secondary); }
.res-tip { position: absolute; top: 0; z-index: 2; max-width: 100%; padding: 4px 8px; border-radius: 6px; background: var(--surface-1); border: 1px solid var(--border); box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.res-legende { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.res-legende li { display: grid; grid-template-columns: 12px 1fr auto; gap: 0 8px; align-items: baseline; font-size: 14px; }
.res-legende .klein { grid-column: 2 / -1; font-size: 12px; color: var(--text-muted); }
.res-farbe { width: 12px; height: 12px; border-radius: 3px; align-self: center; }

/* Zugangsschalter pro VM (VMs-Seite) */
.liste > li > .zugang { order: 4; flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 8px; border-top: 1px dashed var(--gridline); }
.zugang-titel { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.schalter-form { margin: 0; }
.schalter { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; padding: 2px 0; font: inherit; font-size: 13px; color: var(--text-primary); cursor: pointer; }
.schalter-knopf { position: relative; width: 34px; height: 20px; border-radius: 10px; background: var(--status-off); transition: background .15s ease; flex: none; }
.schalter-knopf::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s ease; }
.schalter[aria-checked="true"] .schalter-knopf { background: var(--status-good); }
.schalter[aria-checked="true"] .schalter-knopf::after { transform: translateX(14px); }
.schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Snapshots pro VM (VMs-Seite) */
.liste > li > .snapshots { order: 5; flex-basis: 100%; padding-top: 6px; }
details.snapshots > summary { cursor: pointer; list-style: none; display: flex; gap: 10px; align-items: baseline; }
details.snapshots > summary::-webkit-details-marker { display: none; }
details.snapshots > summary::after { content: "›"; color: var(--text-muted); transition: transform .15s ease; }
details.snapshots[open] > summary::after { transform: rotate(90deg); }
.snap-liste { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 4px; }
.snap-liste li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 14px; }
.snap-knoepfe { display: flex; gap: 14px; } .snap-knoepfe form { margin: 0; }
.snap-neu { max-width: 560px; margin-top: 6px; }
/* Handy: Kopfzeilen der Plattenbalken umbrechen statt die Seite zu verbreitern */
@media (max-width: 560px) { .messer-kopf { flex-wrap: wrap; } .messer-kopf > span:last-child { white-space: normal; } }
/* Eigene Ziele pro VM (bei gesperrtem Internet) */
.zugang .ziele { flex-basis: 100%; }
.zugang .ziele summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.zugang .ziele .formular { margin-top: 8px; }
.zugang .gesperrt { margin-top: 10px; }
.zugang .gesperrt ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.zugang .gesperrt li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; min-width: 0; }
.zugang .gesperrt li .mono { overflow-wrap: anywhere; }
.zugang .gesperrt form { display: inline; }
/* Hilfeseiten: Abstand zwischen Text und Befehlsblöcken */
.tile > pre.conf, .reiter-inhalt > pre.conf { margin: 6px 0 10px; }

/* Seite „VMs“: eine Karte pro VM (Kopf, Knöpfe, Bereiche Ausgehend / Eingehend / Snapshots) */
.vm-summe { margin: 0 0 8px; }
.vm-karten { display: grid; gap: 14px; }
.vm-karte { display: grid; gap: 12px; }
.vm-kopf { display: grid; gap: 4px; }
.vm-titel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vm-titel h2 { margin: 0; font-size: 20px; }
.vm-kopf .daten { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--text-secondary); }
.vm-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.vm-knoepfe .knopf { margin: 0; }
.vm-karte[data-z="läuft"] .nur-aus, .vm-karte[data-z="aus"] .nur-an { display: none; }
.mehr { position: relative; }
.mehr > summary { list-style: none; cursor: pointer; }
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary::after { content: " ▾"; color: var(--text-muted); }
.mehr-menue { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 240px; display: grid; gap: 2px; padding: 8px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.mehr-menue .btn-link { text-align: left; padding: 6px 4px; }
.vm-bereiche { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vm-bereich { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.vm-bereich h3 { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.vm-bereich h3 .klein { font-family: inherit; letter-spacing: 0; text-transform: none; font-size: 12px; color: var(--text-secondary); }
.vm-bereich .klein { margin: 0; }
.vm-bereich .ziele summary { cursor: pointer; font-size: 14px; color: var(--accent); }
.vm-bereich .ziele summary .klein { color: var(--text-secondary); }
.vm-bereich .ziele .formular { margin-top: 8px; }
.vm-bereich .gesperrt { margin-top: 10px; }
.vm-bereich .gesperrt ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.vm-bereich .gesperrt li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 13px; min-width: 0; }
.vm-bereich .gesperrt li .mono { overflow-wrap: anywhere; }
.vm-bereich .gesperrt form { display: inline; }
.vm-bereich details.snapshots > summary { display: flex; align-items: baseline; }
.vm-bereich details.snapshots > summary h3 { flex: 1; }
.vm-bereich .snap-liste li { background: var(--surface-1); }
.vm-bereich .snap-neu { margin-top: 6px; }
.vm-bereich details, .vm-bereich form, .vm-bereich ul { min-width: 0; max-width: 100%; }
.vm-bereich .snap-neu { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: none; }
.vm-bereich .snap-neu .knopf { justify-self: start; }
.vm-bereich .snap-liste li { min-width: 0; }
@media (max-width: 560px) {
  .mehr { flex-basis: 100%; }
  .mehr-menue { position: static; margin-top: 6px; min-width: 0; box-shadow: none; }
}
/* Freigaben nach Adresse und Port */
.freigabe-zeile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.freigabe-zeile label { min-width: 0; }
/* VM-Karten einklappbar: der Kopf ist die Klappleiste */
details.vm-karte > summary { list-style: none; cursor: pointer; }
details.vm-karte > summary::-webkit-details-marker { display: none; }
.vm-pfeil { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; color: var(--text-muted); }
.vm-pfeil::before { content: "›"; font-size: 22px; line-height: 1; transition: transform .15s ease; }
details.vm-karte[open] .vm-pfeil::before { transform: rotate(90deg); }
details.vm-karte > summary:hover .vm-pfeil { background: var(--surface-2); color: var(--text-primary); }
details.vm-karte > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.vm-kurz { color: var(--text-secondary); }
details.vm-karte[open] .vm-kurz { display: none; }
details.vm-karte:not([open]) { gap: 0; }
details.vm-karte > .vm-knoepfe { margin-top: 12px; }
details.vm-karte > .vm-bereiche { margin-top: 14px; }
/* Platzhalter deutlich als Beispiel erkennbar (nicht mit Einträgen verwechseln) */
.vm-bereich textarea::placeholder, .vm-bereich input::placeholder { color: var(--text-muted); opacity: .6; font-style: italic; }