/*
 * NhPanel – Sprachserver-Seiten: TeamSpeak 3 auf dem VPS (/teamspeak-server, voice/landing.twig) und Mumble-Server mieten
 * (/mumble-server, voice/mumble.twig). Baut auf dedicated.css auf (.nhd-*: Kopf, Liste rechts, Text, Datenblatt, Fragen, Themen);
 * hier nur Überblick im Kopf, Karten, Pakettabelle. Alles unter .nhvo. Nur helle Flächen: die Datei bekommt im Dunkelmodus einen
 * Zwilling (keine dunklen Nachbildungen hier hinein, sonst entfällt der Zwilling – siehe vps-apps-zentrale.css).
 * Kein abgeschnittener Text, kein Querscrollen.
 */
.nhvo .nhvo-state{font:600 12px/1.3 var(--d-mono);color:#17794c;white-space:nowrap;text-align:right}
.nhvo #einrichten,.nhvo #pakete,.nhvo #vps{scroll-margin-top:90px}

/* ---- Kopf rechts: App im Überblick (TeamSpeak) ---- */
.nhvo .nhvo-glance{margin:0;padding:0}
.nhvo .nhvo-glance div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:4px 18px;padding:15px 20px;border-bottom:1px solid var(--d-line)}
.nhvo .nhvo-glance div:last-child{border-bottom:0}
.nhvo .nhvo-glance dt{font:600 10.5px/1.9 var(--d-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--d-muted)}
.nhvo .nhvo-glance dd{margin:0;font-size:15.5px;font-weight:650;line-height:1.45;color:var(--d-ink);overflow-wrap:break-word}
.nhvo .nhd-top__price span{margin-right:4px}

/* ---- Karten ---- */
.nhvo .nhvo-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nhvo .nhvo-ways--spaced{margin-top:26px}
.nhvo .nhvo-way{display:flex;flex-direction:column;gap:12px;padding:24px;background:#fff;border:1px solid var(--d-line);border-radius:10px;scroll-margin-top:96px}
.nhvo .nhvo-way h3{margin:0;font-size:1.35rem;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--d-ink)}
.nhvo .nhvo-way > p{margin:0;color:var(--d-ink2);font-size:15px;line-height:1.6}
.nhvo .nhvo-facts{display:grid;gap:7px;margin:4px 0 0;padding-top:12px;border-top:1px solid var(--d-line);font-size:14px}
.nhvo .nhvo-facts div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px}
.nhvo .nhvo-facts--wide div{grid-template-columns:132px minmax(0,1fr)}
.nhvo .nhvo-facts dt{font:600 10.5px/1.9 var(--d-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
.nhvo .nhvo-facts dd{margin:0;color:var(--d-ink);overflow-wrap:break-word}
.nhvo .nhvo-mono{font-family:var(--d-mono);font-size:.92em}
.nhvo .nhvo-note{margin:0;font-size:13.5px;line-height:1.5;color:#17794c}
.nhvo .nhvo-way__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:6px}
.nhvo .nhvo-way__actions .nhd-btn{min-height:44px}

/* ---- Pakettabelle (Mumble) ---- */
.nhvo .nhvo-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--d-line);border-radius:10px;overflow:hidden;font-size:15px}
.nhvo .nhvo-table th,.nhvo .nhvo-table td{padding:15px 18px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--d-line)}
.nhvo .nhvo-table thead th,.nhvo .nhvo-table thead td{padding-top:12px;padding-bottom:11px;background:#fbfcfe;font:600 10.5px/1.3 var(--d-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--d-muted)}
.nhvo .nhvo-table tbody tr:last-child > *{border-bottom:0}
.nhvo .nhvo-table tbody th{font-size:16.5px;font-weight:700;letter-spacing:-.015em;color:var(--d-ink)}
.nhvo .nhvo-table tbody td{color:var(--d-ink2);font-variant-numeric:tabular-nums}
.nhvo .nhvo-table td small{display:block;font-size:12.5px;color:var(--d-muted)}
.nhvo .nhvo-table .nhvo-table__num{text-align:right;white-space:nowrap}
.nhvo .nhvo-table__price{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--d-ink)}
.nhvo .nhvo-table td .nhvo-table__per{display:inline;font:600 11px/1 var(--d-mono)}
.nhvo .nhvo-table__buy{width:1%;text-align:right}
.nhvo .nhvo-table__buy .nhd-btn{min-height:42px;padding:9px 16px}
.nhvo .nhvo-table__flex > *{background:#fbfcfe}
.nhvo .nhvo-foot{margin-top:20px}
.nhvo .nhvo-upgrade{margin:16px 0 0;max-width:46em;font-size:14.5px;line-height:1.6;color:var(--d-ink2)}

/* ---- zweiter Textabschnitt (Mumble „So startest du“) ---- */
.nhvo .nhvo-start{border-top:1px solid var(--d-line)}

/* ---- verwandte Seiten: zwei Spalten ---- */
.nhvo .nhvo-topics{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(max-width:860px){.nhvo .nhvo-ways{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){
  /* Tabelle wird zu Zeilenkarten */
  .nhvo .nhvo-table,.nhvo .nhvo-table tbody,.nhvo .nhvo-table tr,.nhvo .nhvo-table th,.nhvo .nhvo-table td{display:block;width:auto}
  .nhvo .nhvo-table{border:0;background:none;border-radius:0}
  .nhvo .nhvo-table thead{display:none}
  .nhvo .nhvo-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 16px;padding:16px 18px;margin:0 0 12px;background:#fff;border:1px solid var(--d-line);border-radius:10px}
  .nhvo .nhvo-table tbody tr > *{padding:0;border:0;background:none}
  .nhvo .nhvo-table tbody th{grid-column:1/-1;font-size:17px;margin-bottom:4px}
  .nhvo .nhvo-table td[data-label]::before{content:attr(data-label);display:block;font:600 10px/1.6 var(--d-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--d-muted)}
  .nhvo .nhvo-table .nhvo-table__num{text-align:left;white-space:nowrap}
  .nhvo .nhvo-table__buy{grid-column:1/-1;width:auto;text-align:left;margin-top:8px}
  .nhvo .nhvo-table__buy .nhd-btn{width:100%;min-height:46px}
}
@media(max-width:520px){
  .nhvo .nhvo-topics{grid-template-columns:minmax(0,1fr)}
  .nhvo .nhvo-way{padding:20px 18px}
  .nhvo .nhvo-facts div,.nhvo .nhvo-facts--wide div{grid-template-columns:minmax(0,1fr);gap:0}
  .nhvo .nhvo-glance div{grid-template-columns:minmax(0,1fr);gap:2px;padding:13px 18px}
}