/*
 * „Das Nexthosting-Panel“ (Support/PanelPromo.php, Reiter der Kategorie: gs-panel.js).
 *
 * Zwei Teile:
 *  – .nhpp-mehr: die Liste „Außerdem im Panel“ unter der Panel-Galerie einer Spielseite. Sie nimmt Schrift und Farben der
 *    Seite an (currentColor), damit sie auf jeder der Seiten-Welten ruhig mitläuft – nur Abstände und Linien kommen von hier.
 *  – .nhpp: der eigene Abschnitt auf der Gameserver-Kategorie, ein Fenster ins Panel in dessen Farben „Graphit“
 *    (neutrales Grau, Blau nur als Akzent). Farben und Schrift mit !important, weil die Kategorie-Seite sie für alle
 *    Überschriften und Absätze erzwingt. Alles unter .nhpp gekapselt.
 */
@font-face{font-family:"NHP Text";src:url("/themes/hw/booking/fonts/dm-sans-v17-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NHP Text";src:url("/themes/hw/booking/fonts/dm-sans-v17-latin-700.woff2") format("woff2");font-weight:600 800;font-style:normal;font-display:swap}
@font-face{font-family:"NHP Mono";src:url("/assets/fonts/system/jetbrains-mono/jetbrains-mono-v24-latin-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---- Außerdem im Panel (auf den Spielseiten) ---- */
.nhpp-mehr{margin-top:3rem}
.nhpp-mehr .nhpp-mehr-h{margin:0 0 .6rem}
/* ohne Vorbild auf der Seite: eigene, schlichte Überschrift (sonst trägt sie die h3-Klasse der Seite) */
.nhpp-mehr .nhpp-mehr-h-eigen{font-size:1.15rem;line-height:1.3;font-weight:700;letter-spacing:0;text-transform:none}
.nhpp-mehr .nhpp-liste{display:grid;grid-template-columns:minmax(0,1fr);column-gap:2.5rem;margin:0;padding:0}
.nhpp-mehr .nhpp-zeile{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:1rem;padding:.85rem 0;border-top:1px solid rgba(127,127,127,.22);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.nhpp-mehr dt{margin:0;font-weight:700;font-size:.95rem;line-height:1.45}
.nhpp-mehr dd{margin:0;font-size:.92rem;line-height:1.55;opacity:.78}
.nhpp-mehr dd a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (min-width:900px){.nhpp-mehr .nhpp-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.nhpp-mehr .nhpp-zeile{grid-template-columns:minmax(0,1fr);gap:.2rem}}

/* ---- Abschnitt auf der Gameserver-Kategorie ---- */
.nhpp,.nhpp *,.nhpp *::before,.nhpp *::after{box-sizing:border-box}
.nhpp{
  --nhpp-grund:#0e0f11;--nhpp-flaeche:#151619;--nhpp-flaeche-2:#1b1c20;--nhpp-linie:#26272c;--nhpp-linie-2:#33343a;
  --nhpp-tinte:#ececee;--nhpp-leise:#9b9ca3;--nhpp-blau:#4184f7;
  --nhpp-text:"NHP Text","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nhpp-werte:"NHP Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
  display:block;margin:0;padding:5rem 1.5rem 5.25rem;background:var(--nhpp-grund);color:var(--nhpp-tinte)!important;color-scheme:dark;
  border-top:1px solid var(--nhpp-linie);border-bottom:1px solid var(--nhpp-linie);
  font:400 1rem/1.6 var(--nhpp-text);text-align:left;letter-spacing:0;text-transform:none
}
.nhpp p,.nhpp h2,.nhpp h3,.nhpp dl,.nhpp dt,.nhpp dd{margin:0;padding:0;border:0;background:none;text-align:left;text-transform:none;text-shadow:none}
.nhpp img{display:block;max-width:100%;border:0;border-radius:0;box-shadow:none;margin:0}
.nhpp .nhpp-w{max-width:1180px;margin:0 auto}
.nhpp .nhpp-kopf{max-width:46rem}
.nhpp .nhpp-marke{font:400 .78rem/1.4 var(--nhpp-werte)!important;color:var(--nhpp-leise)!important;letter-spacing:.02em}
.nhpp .nhpp-marke::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.55em;background:var(--nhpp-blau);vertical-align:.05em}
.nhpp .nhpp-h{margin-top:.6rem;font:700 clamp(1.75rem,3.2vw,2.35rem)/1.15 var(--nhpp-text)!important;color:#fff!important;letter-spacing:-.01em}
.nhpp .nhpp-lead{margin-top:.9rem;font-size:1.05rem;color:var(--nhpp-leise)!important;max-width:44rem}

.nhpp .nhpp-galerie{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.7fr);gap:2rem;align-items:start;margin-top:2.75rem}
.nhpp .nhpp-reiterliste{display:grid;gap:.15rem}
.nhpp .nhpp-reiter{display:block;width:100%;min-height:48px;margin:0;padding:.8rem .95rem .8rem 1rem;text-align:left;cursor:pointer;
  background:transparent;border:0;border-left:2px solid transparent;border-radius:0 6px 6px 0;color:inherit;font:inherit;transition:background-color .15s,border-color .15s}
.nhpp .nhpp-reiter b{display:block;font-weight:700;font-size:.98rem;color:#d6d7db!important}
.nhpp .nhpp-reiter span{display:block;margin-top:.15rem;font-size:.86rem;line-height:1.5;color:var(--nhpp-leise)!important}
.nhpp .nhpp-reiter:hover{background:var(--nhpp-flaeche)}
.nhpp .nhpp-reiter[aria-selected="true"]{background:var(--nhpp-flaeche-2);border-left-color:var(--nhpp-blau)}
.nhpp .nhpp-reiter[aria-selected="true"] b{color:#fff!important}
.nhpp .nhpp-reiter:focus-visible{outline:2px solid var(--nhpp-blau);outline-offset:2px}
.nhpp .nhpp-fenster{position:sticky;top:7.5rem;border:1px solid var(--nhpp-linie-2);border-radius:10px;overflow:hidden;background:#0b0b0d;box-shadow:0 24px 48px -28px rgba(0,0,0,.9)}
.nhpp .nhpp-leiste{display:flex;align-items:center;gap:.4rem;padding:.55rem .9rem;border-bottom:1px solid var(--nhpp-linie);font:400 .74rem/1.2 var(--nhpp-werte);color:var(--nhpp-leise)}
.nhpp .nhpp-leiste::before{content:"";width:28px;height:8px;background:radial-gradient(circle at 4px 4px,#3a3b41 3.5px,transparent 4px) 0 0/10px 8px repeat-x}
.nhpp .nhpp-bild img{width:100%;height:auto;aspect-ratio:1.6/1;object-fit:cover;object-position:top left}
.nhpp .nhpp-cap{margin-top:.8rem;font-size:.84rem;color:var(--nhpp-leise)!important}
.nhpp .nhpp-mehr{margin-top:3.25rem;color:var(--nhpp-tinte)}
.nhpp .nhpp-mehr .nhpp-mehr-h{color:#fff!important}
.nhpp .nhpp-mehr dt{color:#e3e4e7!important}
.nhpp .nhpp-mehr dd{color:var(--nhpp-leise)!important;opacity:1}
.nhpp .nhpp-mehr .nhpp-zeile{border-top-color:var(--nhpp-linie)}
.nhpp .nhpp-mehr dd a{color:#cfe0ff!important}
@media (max-width:860px){
  .nhpp{padding:3.5rem 1rem 3.75rem}
  .nhpp .nhpp-galerie{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .nhpp .nhpp-fenster{position:static;order:-1}
  .nhpp .nhpp-reiterliste{grid-auto-flow:column;grid-auto-columns:minmax(11.5rem,72%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.25rem}
  .nhpp .nhpp-reiter{scroll-snap-align:start;border-left:0;border-top:2px solid transparent;border-radius:0 0 6px 6px}
  .nhpp .nhpp-reiter[aria-selected="true"]{border-top-color:var(--nhpp-blau)}
}
@media (prefers-reduced-motion:reduce){.nhpp .nhpp-reiter{transition:none}}
/* Bildspalte der Galerie auf den Spielseiten: bleibt beim Durchgehen der Reiter im Blick (die Reiterliste ist höher als das Bild) */
@media (min-width:900px){.nhpp-spalte{position:sticky;top:6.5rem}}