/*
 * Abschnitt „Nexthosting Schutz“ auf den Gameserver-Seiten (Support/ShieldPromo.php, Skript gs-schutz.js).
 *
 * Der Abschnitt ist ein Fenster ins Schutz-Panel und bringt dessen Welt mit: Nachtblau, die Mauer aus Blöcken,
 * Blau für das, was durchkommt, Sand für das, was abgewiesen wird; Chakra Petch, DM Sans, JetBrains Mono.
 * Er nimmt nichts von der Seite an, auf der er steht – Farben und Schriften stehen deshalb mit !important,
 * weil mehrere Seiten sie für alle Überschriften und Absätze erzwingen. Alles unter .nhs gekapselt.
 */
@font-face{font-family:"NHS Display";src:url("/themes/hw/booking/fonts/chakra-petch-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"NHS Display";src:url("/themes/hw/booking/fonts/chakra-petch-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"NHS 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:"NHS 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:"NHS 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}
@font-face{font-family:"NHS Mono";src:url("/assets/fonts/system/jetbrains-mono/jetbrains-mono-v24-latin-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

.nhs,.nhs *,.nhs *::before,.nhs *::after{box-sizing:border-box}
.nhs{
  --nhs-nacht:#0a0f2a;--nhs-tief:#070b1f;--nhs-grund:#0d1336;--nhs-tafel:#141d4e;--nhs-linie:#222d66;--nhs-kante:#33408a;
  --nhs-mauer:#5767a8;--nhs-tinte:#eef1ff;--nhs-dunst:#aab4e0;--nhs-nebel:#7885bd;
  --nhs-strom:#8ea2f0;--nhs-sand:#e6c684;--nhs-sand-tief:#a3843f;--nhs-ruhe:#8fd4b2;--nhs-koralle:#f0907f;
  --nhs-titel:"NHS Display","Chakra Petch","DM Sans",system-ui,sans-serif;
  --nhs-text:"NHS Text","DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --nhs-werte:"NHS Mono","JetBrains Mono",ui-monospace,Consolas,monospace;
  /* Mitte der Mauer im Bild, vom linken Rand der Bühne – das Skript setzt den gemessenen Wert in Pixeln */
  --nhs-wand:60.6%;
  position:relative;isolation:isolate;display:block;margin:16px 0 0;padding:5.25rem 1.5rem 5.5rem;
  background:var(--nhs-nacht);color:var(--nhs-tinte)!important;color-scheme:dark;
  font:400 1rem/1.6 var(--nhs-text);text-align:left;letter-spacing:0;text-transform:none;
}
/* Zinnen: die Mauer von vorn, sie steht oben auf dem Abschnitt */
.nhs::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='16' shape-rendering='crispEdges'%3E%3Crect width='16' height='16' fill='%230a0f2a'/%3E%3Cpath fill='%23222d66' d='M0 0h16v2H0zM0 2h2v14H0z'/%3E%3Cpath fill='%23070b1f' d='M14 2h2v14h-2z'/%3E%3C/svg%3E") left top/32px 16px repeat-x}
.nhs p,.nhs h2,.nhs h3,.nhs h4,.nhs figure,.nhs figcaption,.nhs dl,.nhs dt,.nhs dd,.nhs ul,.nhs li{margin:0;padding:0;border:0;background:none;text-align:left;text-transform:none;text-shadow:none}
.nhs ul{list-style:none}
.nhs img{display:block;max-width:100%;border:0;border-radius:0;box-shadow:none;margin:0}
.nhs i{font-style:normal}
.nhs .nhs-w{max-width:1150px;margin:0 auto;padding:0}
.nhs .nhs-q{display:inline-block;flex:none;width:.6em;height:.6em;background:currentColor}
.nhs .nhs-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Kopf */
.nhs .nhs-marke{display:flex;align-items:center;gap:.65rem;margin:0 0 1.5rem;font:600 .95rem/1 var(--nhs-titel)!important;letter-spacing:.09em;color:var(--nhs-dunst)!important}
.nhs .nhs-marke .nhs-q{color:var(--nhs-sand)!important}
.nhs .nhs-h{margin:0 0 1.35rem!important;padding:0!important;max-width:none;font:700 clamp(2rem,4.3vw,3.35rem)/1.06 var(--nhs-titel)!important;letter-spacing:-.012em!important;text-wrap:balance}
.nhs .nhs-h span{display:block}
.nhs .nhs-h .nhs-blau{color:var(--nhs-strom)!important}
.nhs .nhs-h .nhs-sand{color:var(--nhs-sand)!important}
.nhs .nhs-lead{margin:0 0 2.75rem!important;max-width:47rem;font:400 1.14rem/1.6 var(--nhs-text)!important;color:var(--nhs-dunst)!important}

/* Bühne: die Mauer */
.nhs .nhs-buehne{position:relative}
.nhs .nhs-ansage{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.4rem 2rem;min-height:2.6rem;margin:0 0 .85rem}
.nhs .nhs-stand{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .75rem;font:400 1.02rem/1.5 var(--nhs-text)!important;color:var(--nhs-dunst)!important}
.nhs .nhs-stand .nhs-q{align-self:center;width:.85rem;height:.85rem;color:var(--nhs-ruhe)!important}
.nhs .nhs-stand b{font:700 1.5rem/1.2 var(--nhs-titel)!important;color:var(--nhs-ruhe)!important}
.nhs[data-nhs-lage="angriff"] .nhs-stand .nhs-q{color:var(--nhs-sand)!important}
.nhs[data-nhs-lage="angriff"] .nhs-stand b{color:var(--nhs-sand)!important}
.nhs .nhs-beispiel{font:400 .78rem/1.5 var(--nhs-werte)!important;color:var(--nhs-nebel)!important;white-space:nowrap}
.nhs .nhs-bahn{position:relative;height:272px;border:2px solid var(--nhs-kante);background:#0d1437;overflow:hidden}
.nhs .nhs-leinwand{display:block;width:100%;height:100%}
.nhs .nhs-bahn picture{position:absolute;inset:0}
.nhs .nhs-bahn picture img{width:100%;height:100%;object-fit:cover;object-position:center bottom}

/* Unter der Mauer: Zahlen und die beiden Seiten, an der Mauerlinie ausgerichtet */
.nhs .nhs-unter{position:relative;padding-bottom:.4rem}
.nhs .nhs-unter::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--nhs-wand) - 12px);width:24px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' shape-rendering='crispEdges'%3E%3Crect width='24' height='16' fill='%235767a8'/%3E%3Cpath fill='%236272b4' d='M8 0h8v8H8zM0 8h8v8H0z'/%3E%3Cpath fill='%234f5e9e' d='M16 8h8v8h-8z'/%3E%3Cpath fill='%238492d0' d='M0 0h24v1H0zM0 8h24v1H0zM0 0h1v16H0zM8 0h1v16H8zM16 0h1v16h-1z'/%3E%3Cpath fill='%233a4684' d='M0 7h24v1H0zM0 15h24v1H0zM7 0h1v16H7zM15 0h1v16h-1zM23 0h1v16h-1z'/%3E%3C/svg%3E") left top/24px 16px repeat-y;
  -webkit-mask-image:linear-gradient(#000 0,#000 calc(100% - 5rem),transparent);mask-image:linear-gradient(#000 0,#000 calc(100% - 5rem),transparent)}
.nhs .nhs-zahlen{display:grid;grid-template-columns:minmax(0,1fr) auto 24px auto minmax(0,1fr);align-items:end;column-gap:0;padding:1.1rem 0 0;
  /* erste beiden Spalten enden an der Mauer */
  grid-template-columns:calc((var(--nhs-wand) - 12px) * .45) calc((var(--nhs-wand) - 12px) * .55) 24px auto minmax(0,1fr)}
.nhs .nhs-zahl{min-width:0}
.nhs .nhs-zahl span{display:block;font:400 .875rem/1.4 var(--nhs-text);color:var(--nhs-dunst)!important}
.nhs .nhs-zahl b{display:block;font:700 1.95rem/1.15 var(--nhs-titel);color:var(--nhs-tinte)!important;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nhs .nhs-zahl-ab{grid-column:2;text-align:right;padding-right:1.1rem}
.nhs .nhs-zahl-ab b{color:var(--nhs-sand)!important}
.nhs .nhs-zahl-ok{grid-column:4;padding-left:1.1rem;min-width:9.5rem}
.nhs .nhs-zahl-ok b{color:var(--nhs-strom)!important}
.nhs .nhs-zahl-rest{grid-column:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.6rem 1.2rem;min-height:3rem}
.nhs .nhs-einheit{font:400 .78rem/1.4 var(--nhs-werte);color:var(--nhs-nebel)!important}
.nhs .nhs-seiten{display:grid;grid-template-columns:calc(var(--nhs-wand) - 12px) 24px minmax(0,1fr);margin-top:2.4rem}
.nhs .nhs-seite p{font:400 1rem/1.62 var(--nhs-text)!important;color:var(--nhs-dunst)!important}
.nhs .nhs-draussen{grid-column:1;justify-self:end;max-width:30rem;padding-right:2.6rem}
.nhs .nhs-drinnen{grid-column:3;max-width:30rem;padding-left:2.6rem}
.nhs .nhs-h3{margin:0 0 .6rem!important;padding:0!important;font:700 1.4rem/1.2 var(--nhs-titel)!important;letter-spacing:-.005em!important;color:var(--nhs-tinte)!important}
.nhs .nhs-seite .nhs-h3{display:flex;align-items:center;gap:.65rem}
.nhs .nhs-draussen .nhs-q{color:var(--nhs-sand)!important}
.nhs .nhs-drinnen .nhs-q{color:var(--nhs-strom)!important}

/* Knöpfe wie im Panel: kantig, mit fester Unterkante */
.nhs a.nhs-knopf,.nhs button.nhs-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:46px;margin:0;padding:.65rem 1.15rem;
  border:2px solid var(--nhs-kante)!important;border-radius:0!important;background:var(--nhs-tafel)!important;color:var(--nhs-tinte)!important;
  font:600 .95rem/1.2 var(--nhs-titel)!important;letter-spacing:.01em;text-decoration:none!important;white-space:nowrap;cursor:pointer;
  box-shadow:0 4px 0 var(--nhs-tief);transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease}
.nhs a.nhs-knopf:hover,.nhs button.nhs-knopf:hover{background:#1c2764!important}
.nhs a.nhs-knopf:active,.nhs button.nhs-knopf:active{transform:translateY(3px);box-shadow:0 1px 0 var(--nhs-tief)}
.nhs button.nhs-knopf:disabled{cursor:default;color:var(--nhs-nebel)!important;background:var(--nhs-grund)!important}
.nhs a.nhs-knopf-voll{border-color:var(--nhs-sand)!important;background:var(--nhs-sand)!important;color:#1b1505!important;box-shadow:0 4px 0 var(--nhs-sand-tief);min-height:50px;padding:.75rem 1.4rem;font-size:1rem!important}
.nhs a.nhs-knopf-voll:hover{background:#f3ddaa!important;border-color:#f3ddaa!important}
.nhs a.nhs-knopf-voll:active{box-shadow:0 1px 0 var(--nhs-sand-tief)}
.nhs a:focus-visible,.nhs button:focus-visible{outline:2px solid var(--nhs-tinte)!important;outline-offset:4px;border-radius:0!important}
.nhs a.nhs-verweis{color:var(--nhs-tinte)!important;font:400 .98rem/1.4 var(--nhs-text);text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:.22em;text-decoration-color:var(--nhs-nebel)!important;padding:.6rem 0}
.nhs a.nhs-verweis:hover{text-decoration-color:currentColor!important}

/* Das Panel in Bildern */
.nhs .nhs-panel{margin-top:5.5rem}
.nhs .nhs-panel-h{margin:0 0 2rem!important;font-size:clamp(1.55rem,2.6vw,2.1rem)!important}
.nhs .nhs-rahmen{position:relative;border:2px solid var(--nhs-kante);background:var(--nhs-nacht);box-shadow:10px 10px 0 #050819}
.nhs .nhs-leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem .8rem;border-bottom:2px solid var(--nhs-linie);background:var(--nhs-grund)}
.nhs .nhs-leiste span{font:400 .74rem/1.3 var(--nhs-werte);color:var(--nhs-nebel)!important}
.nhs .nhs-leiste b{font:600 .82rem/1.3 var(--nhs-titel);letter-spacing:.03em;color:var(--nhs-tinte)!important}
.nhs .nhs-flaeche{position:relative;overflow:hidden}
.nhs .nhs-flaeche picture{display:block}
.nhs .nhs-flaeche img{width:100%;height:auto}
.nhs .nhs-rahmen-hoch .nhs-flaeche{aspect-ratio:5/4}
.nhs .nhs-rahmen-hoch .nhs-flaeche img{height:100%;object-fit:cover;object-position:left top}
.nhs .nhs-rahmen-hoch .nhs-flaeche::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(rgba(10,15,42,0),var(--nhs-nacht));pointer-events:none}
.nhs .nhs-bild figcaption p{font:400 1rem/1.62 var(--nhs-text)!important;color:var(--nhs-dunst)!important}
.nhs .nhs-h4{margin:0 0 .6rem!important;padding:0!important;font:700 1.4rem/1.2 var(--nhs-titel)!important;letter-spacing:-.005em!important;color:var(--nhs-tinte)!important}
.nhs .nhs-bild-karte{display:grid;grid-template-columns:minmax(0,2.05fr) minmax(0,1fr);gap:1.5rem 3.4rem;align-items:center}
.nhs .nhs-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.4rem;margin-top:4.2rem}
.nhs .nhs-paar figcaption{margin-top:1.9rem;max-width:32rem}
/* Fähnchen auf der Lagekarte: zeigen auf eine Stelle im Bild */
.nhs .nhs-marken{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s ease}
.nhs .nhs-flaeche.nhs-da .nhs-marken{opacity:1}
.nhs .nhs-m{position:absolute;width:0;height:0}
.nhs .nhs-m::before{content:"";position:absolute;left:-13px;top:-13px;width:26px;height:26px;border:2px solid var(--nhs-tinte)}
.nhs .nhs-m::after{content:"";position:absolute;background:var(--nhs-tinte)}
.nhs .nhs-m span{position:absolute;white-space:nowrap;padding:.28rem .55rem .3rem;background:var(--nhs-tinte);color:var(--nhs-nacht)!important;font:600 .78rem/1.2 var(--nhs-titel);letter-spacing:.01em}
.nhs .nhs-m-land::after{right:13px;top:-1px;width:44px;height:2px}
.nhs .nhs-m-land span{right:57px;top:-.85rem}
.nhs .nhs-m-sperre::after{left:-1px;top:13px;width:2px;height:54px}
.nhs .nhs-m-sperre span{right:-1.2rem;top:67px}

/* Was es kostet */
.nhs .nhs-angebot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);gap:1.4rem 3.4rem;align-items:start;margin-top:5.5rem;padding-top:2.8rem;border-top:2px solid var(--nhs-linie)}
.nhs .nhs-angebot>.nhs-h3{font-size:clamp(1.55rem,2.6vw,2.1rem)!important}
.nhs .nhs-dl{grid-column:2;border-top:1px solid var(--nhs-linie)}
.nhs .nhs-reihe{display:grid;grid-template-columns:13.5rem minmax(0,1fr);gap:.3rem 1.6rem;padding:1.15rem 0;border-bottom:1px solid var(--nhs-linie)}
.nhs .nhs-reihe dt{font:600 1.08rem/1.45 var(--nhs-titel)!important;color:var(--nhs-tinte)!important}
.nhs .nhs-reihe dd{font:400 1rem/1.62 var(--nhs-text)!important;color:var(--nhs-dunst)!important}
.nhs .nhs-los{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.7rem;margin-top:.9rem}
.nhs .nhs-hinweis{flex-basis:100%;font:400 .875rem/1.55 var(--nhs-text)!important;color:var(--nhs-nebel)!important}

@media (max-width:1100px){
  .nhs .nhs-bild-karte{grid-template-columns:minmax(0,1fr)}
  .nhs .nhs-bild-karte figcaption{max-width:40rem;margin-top:.9rem}
  .nhs .nhs-paar{gap:2.4rem}
  .nhs .nhs-angebot{grid-template-columns:minmax(0,1fr)}
  .nhs .nhs-dl,.nhs .nhs-los{grid-column:1}
}
@media (max-width:820px){
  .nhs{padding:3.75rem 1rem 4rem}
  .nhs .nhs-lead{font-size:1.05rem!important;margin-bottom:2rem!important}
  .nhs .nhs-ansage{min-height:5.6rem;align-items:flex-start}
  .nhs .nhs-beispiel{order:-1;flex-basis:100%}
  .nhs .nhs-stand b{font-size:1.3rem!important;flex-basis:auto}
  .nhs .nhs-stand span{flex-basis:100%}
  .nhs .nhs-bahn{height:216px}
  .nhs .nhs-unter::before{bottom:auto;height:5.2rem;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
  .nhs .nhs-zahlen{grid-template-columns:calc(var(--nhs-wand) - 12px) 24px minmax(0,1fr);row-gap:1.1rem}
  .nhs .nhs-zahl-an{display:none}
  .nhs .nhs-zahl-ab{grid-column:1;padding-right:.8rem}
  .nhs .nhs-zahl-ok{grid-column:3;padding-left:.8rem;min-width:0}
  .nhs .nhs-zahl b{font-size:1.6rem}
  .nhs .nhs-zahl-rest{grid-column:1/-1;justify-content:space-between;position:relative;z-index:1;padding-top:.4rem}
  .nhs .nhs-seiten{grid-template-columns:minmax(0,1fr);gap:1.7rem;margin-top:2rem}
  .nhs .nhs-draussen,.nhs .nhs-drinnen{grid-column:1;justify-self:start;max-width:none;padding:0}
  .nhs .nhs-panel,.nhs .nhs-angebot{margin-top:3.75rem}
  .nhs .nhs-paar{grid-template-columns:minmax(0,1fr);gap:3rem;margin-top:3rem}
  .nhs .nhs-rahmen{box-shadow:6px 6px 0 #050819;margin-right:6px}
  .nhs .nhs-paar figcaption{margin-top:1.5rem}
  .nhs .nhs-reihe{grid-template-columns:minmax(0,1fr)}
  .nhs .nhs-h3,.nhs .nhs-h4{font-size:1.25rem!important}
}
/* Auf dem Handy zeigen die Bilder das Panel in seiner schmalen Fassung – in voller Höhe, ohne Fähnchen */
@media (max-width:640px){
  .nhs .nhs-marken{display:none}
  .nhs .nhs-rahmen-hoch .nhs-flaeche{aspect-ratio:auto;max-height:420px}
  .nhs .nhs-rahmen-hoch .nhs-flaeche img{height:auto}
  .nhs .nhs-los{flex-direction:column;align-items:stretch}
  .nhs a.nhs-knopf-voll{white-space:normal;text-align:center}
  .nhs a.nhs-verweis{align-self:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .nhs a.nhs-knopf,.nhs button.nhs-knopf{transition:none}
}
@media print{
  .nhs .nhs-bahn,.nhs .nhs-zahlen{display:none}
}