/*
 * NhPanel – Seite Clan-Paket (/clan-paket, views/clan/landing.twig). Baut auf dedicated.css (.nhd …) auf.
 *
 * Gestaltung: sachlich wie die SSL-/VPS-Seiten (weiße Flächen, feine Linien, Beschriftungen in Mono). Einziger lauter Moment
 * ist das Bild im Kopf: drei echte Gegenstände eines Clans auf Rasterpapier – die Website unter der eigenen Domain (mit der
 * Schablonenschrift, die solche Clan-Seiten gern tragen), der Discord-Kanal mit dem Bot und der Eintrag in der Serverliste –,
 * beschriftet wie eine technische Zeichnung. Farbpunkte: grün = Gameserver, violett = Discord, orange = Website/Domain
 * (dieselben Punkte im Querverweis auf den Spielseiten und im Menü).
 * Alle Regeln unter .nhc. Dunkelmodus: Zwillinge entstehen automatisch; Discord-Fenster ist ohnehin dunkel.
 */
@font-face{font-family:"NH Stencil";src:url("gs-black-ops-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"NH Azeret";src:url("gs-azeret-mono.woff2") format("woff2");font-weight:400 700;font-display:swap}

.nhc{--c-game:#2fb36d;--c-bot:#5865f2;--c-web:#e8a33d}

/* ---- Kopf ---- */
.nhc .nhc-head{padding:34px 0 64px;background-color:var(--d-soft);background-image:linear-gradient(rgba(11,16,32,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(11,16,32,.045) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px}
.nhc .nhc-head__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,650px);gap:52px;align-items:center}
.nhc .nhc-head h1{font-size:clamp(2.05rem,3.9vw,3.15rem);font-weight:700;line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;max-width:13em;text-wrap:balance}
.nhc .nhc-perks{display:grid;gap:0;margin:24px 0 0;max-width:34em;border-top:1px solid var(--d-line)}
.nhc .nhc-perks div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:12px;padding:9px 0;border-bottom:1px solid var(--d-line);font-size:14.5px}
.nhc .nhc-perks dt{font-weight:600;color:var(--d-ink2);display:flex;align-items:center;gap:9px}
.nhc .nhc-perks dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-game);flex:0 0 auto}
.nhc .nhc-perks div:nth-child(2) dt::before{border-radius:2px;background:var(--c-bot)}
.nhc .nhc-perks div:nth-child(3) dt::before{border-radius:1px;background:var(--c-web)}
.nhc .nhc-perks dd{margin:0;font-weight:650;color:var(--d-ink);font-variant-numeric:tabular-nums}

/* ---- Das Bild: Website, Discord, Serverliste ---- */
.nhc-scene{position:relative;margin:0;min-height:560px;padding:14px 0 0}
.nhc-site{position:relative;background:#fff;border:1px solid #c9d2e0;border-radius:10px;box-shadow:0 26px 60px -30px rgba(11,16,32,.45);overflow:hidden}
.nhc-site__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#eef1f6;border-bottom:1px solid #d6dce7}
.nhc-site__bar i{width:9px;height:9px;border-radius:50%;background:#c6cedb}
.nhc-site__url{margin-left:10px;flex:1;min-width:0;padding:4px 10px;border-radius:6px;background:#fff;font:500 12px/1.3 var(--d-mono);color:#2b354b;overflow-wrap:anywhere}
.nhc-site__url b{font-weight:500;color:#8a93a6}
.nhc-site__page{background:#f4f7fa;color:#16324a}
.nhc-site__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;padding:18px 20px 16px;background:#16324a;color:#f4f7fa}
.nhc-site__logo{font:400 30px/1 "NH Stencil","Black Ops One",Impact,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:#f4f7fa}
.nhc-site__nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;font-weight:600;color:#b9c9d8}
.nhc-site__tag{margin:16px 20px 0;font-size:14px;line-height:1.5;color:#33506a;max-width:30em}
.nhc-site__status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;margin:14px 20px 0;padding:12px 14px;border:1px solid #cfdbe6;border-left:4px solid var(--c-game);border-radius:6px;background:#fff}
.nhc-site__k{grid-column:1/-1;font:600 10.5px/1.2 var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:#6b8296}
.nhc-site__addr{font:600 15px/1.4 "NH Azeret",var(--d-mono);color:#16324a;overflow-wrap:anywhere}
.nhc-site__live{display:flex;align-items:center;gap:6px;font-size:13px;color:#1f6a43;font-weight:600;white-space:nowrap}
.nhc-site__live em{width:8px;height:8px;border-radius:50%;background:var(--c-game)}
.nhc-site__join{display:inline-block;margin:14px 20px 170px;padding:8px 14px;border-radius:6px;background:#e8a33d;color:#1d1405;font-size:13px;font-weight:700}

.nhc-dc{display:grid;grid-template-columns:118px minmax(0,1fr);background:#313338;border-radius:8px;box-shadow:0 30px 60px -24px rgba(0,0,0,.55);overflow:hidden;color:#dbdee1;font:400 13.5px/1.4 "gg sans","Noto Sans","Helvetica Neue",Arial,sans-serif}
.nhc-dc__side{display:grid;align-content:start;gap:3px;padding:12px 8px;background:#2b2d31;font-size:12.5px;color:#949ba4}
.nhc-dc__side b{padding:0 6px 8px;color:#f2f3f5;font-size:13px;border-bottom:1px solid #1f2023;margin-bottom:4px}
.nhc-dc__side span{display:flex;gap:5px;padding:3px 6px;border-radius:4px;white-space:nowrap;overflow:hidden}
.nhc-dc__side span.is-on{background:#404249;color:#f2f3f5}
.nhc-dc__side i,.nhc-dc__head i{font-style:normal;color:#80848e}
.nhc-dc__head{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid #26282c;font-weight:600;color:#f2f3f5}
.nhc-dc__msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 14px 16px}
.nhc-dc__av{width:34px;height:34px;border-radius:50%;background:var(--c-bot);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.nhc-dc__who{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nhc-dc__who b{color:#f2f3f5;font-weight:600}
.nhc-dc__app{background:var(--c-bot);color:#fff;font-size:9.5px;font-weight:700;padding:2px 4px;border-radius:3px;line-height:1}
.nhc-dc__time{font-size:11px;color:#949ba4}
.nhc-dc__msg p{margin:3px 0 0;color:#dbdee1}
.nhc-dc__sys{font-size:12.5px;color:#a5d6b6!important}

.nhc-list{background:#14171c;border:1px solid #2a2f38;border-radius:6px;box-shadow:0 22px 46px -20px rgba(0,0,0,.6);color:#d7dbe2;font:500 12.5px/1.35 "NH Azeret",var(--d-mono)}
.nhc-list__head{padding:7px 12px;text-align:right;border-bottom:1px solid #2a2f38;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7f8897}
.nhc-list__row{display:grid;grid-template-columns:10px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:10px 12px;background:#1d222a}
.nhc-list__lock{width:9px;height:9px;border-radius:50%;background:var(--c-game);box-shadow:0 0 0 3px rgba(47,179,109,.18)}
.nhc-list__name{display:grid;min-width:0}
.nhc-list__name b{color:#f2f4f8;font-weight:700;overflow-wrap:anywhere}
.nhc-list__name small{color:#e8a33d;font-size:11.5px;overflow-wrap:anywhere}
.nhc-list__n,.nhc-list__ping{color:#aeb6c4;white-space:nowrap}

/* Beschriftung wie an einer Zeichnung: Schild oben links an jedem Gegenstand */
.nhc-piece{position:relative}
.nhc-piece--site{width:86%;margin-left:auto}
.nhc-piece--dc{position:absolute;left:0;bottom:92px;width:64%;z-index:1}
.nhc-piece--list{position:absolute;right:0;bottom:0;width:60%;z-index:2}
.nhc-mark{position:absolute;top:-12px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:4px 8px;background:#fff;border:1px solid var(--d-ink);border-radius:3px;font:600 10.5px/1.1 var(--d-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--d-ink);white-space:nowrap}
.nhc-mark::before{content:"";width:7px;height:7px;flex:0 0 auto}
.nhc-mark--web::before{background:var(--c-web);border-radius:1px}
.nhc-mark--bot::before{background:var(--c-bot);border-radius:2px}
.nhc-mark--game::before{background:var(--c-game);border-radius:50%}

/* ---- So hängt alles zusammen ---- */
.nhc-how{padding:72px 0 64px;border-bottom:1px solid var(--d-line)}
.nhc-how h2,.nhc-config h2,.nhc-prices h2{font-size:clamp(1.65rem,2.7vw,2.2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0 0 12px}
.nhc .nhc-how__lead,.nhc .nhc-config__lead{max-width:44em;font-size:1.05rem;color:var(--d-ink2);margin:0 0 34px}
.nhc-how__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-top:1px solid var(--d-line)}
.nhc-how__col{padding:22px 26px 6px 0}
.nhc-how__col+.nhc-how__col{padding-left:26px;border-left:1px solid var(--d-line)}
.nhc-how__col h3{display:flex;align-items:center;gap:10px;font-size:1.12rem;font-weight:700;margin:0 0 8px}
.nhc-how__col h3::before{content:"";width:10px;height:10px;flex:0 0 auto;background:var(--c-game);border-radius:50%}
.nhc-how__col--bot h3::before{background:var(--c-bot);border-radius:2px}
.nhc-how__col--web h3::before{background:var(--c-web);border-radius:1px}
.nhc-how__col--voice h3::before{background:var(--d-ink2);border-radius:0}
.nhc-how__col p{margin:0 0 10px;color:var(--d-ink2);font-size:15px;line-height:1.6}
.nhc .nhc-how__perk{font:600 12.5px/1.4 var(--d-mono);color:var(--d-ink)}

/* ---- Konfigurator ---- */
.nhc-config{padding:72px 0;background:var(--d-soft);border-bottom:1px solid var(--d-line);scroll-margin-top:80px}
.nhc-error{margin:0 0 22px;padding:12px 16px;border:1px solid #e4a1a1;border-left:4px solid #c0392b;border-radius:6px;background:#fff;color:#7b1d1d;font-size:15px}
.nhc-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:start}
.nhc-steps{display:grid;gap:26px;min-width:0}
.nhc-step{margin:0;padding:0;border:0;min-width:0}
.nhc .nhc-step__k{display:block;float:none;width:auto;margin:0 0 10px;padding:0;font:600 11px/1.3 var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.nhc-select{width:100%;max-width:420px;min-height:48px;padding:10px 40px 10px 14px;border:1px solid #c5ccdb;border-radius:8px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232b354b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;appearance:none;font:600 16px/1.3 var(--d-sans);color:var(--d-ink)}
.nhc-pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nhc-pkg,.nhc-term{position:relative;margin:0;cursor:pointer;min-width:0}
.nhc-pkg input,.nhc-term input{position:absolute;opacity:0;pointer-events:none}
.nhc-pkg__box{display:grid;gap:3px;min-height:92px;padding:12px 14px;border:1px solid #c5ccdb;border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
.nhc-pkg__box b{font-size:15.5px}
.nhc-pkg__spec{font:600 12px/1.4 var(--d-mono);color:var(--d-ink2)}
.nhc-pkg__price{margin-top:auto;font-weight:700;font-variant-numeric:tabular-nums}
.nhc-pkg input:checked+.nhc-pkg__box,.nhc-term input:checked+span{border-color:var(--d-ink);box-shadow:inset 0 0 0 1px var(--d-ink)}
.nhc-pkg input:focus-visible+.nhc-pkg__box,.nhc-term input:focus-visible+span{outline:3px solid #8179ed;outline-offset:2px}
.nhc-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:560px}
.nhc-term span{display:grid;gap:3px;min-height:64px;padding:11px 14px;border:1px solid #c5ccdb;border-radius:8px;background:#fff}
.nhc-term b{font-size:15px}
.nhc-term small{font-size:12.5px;color:var(--d-muted);line-height:1.4}
.nhc-check{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:600}
.nhc-check input{width:20px;height:20px}

/* Bestellschein */
.nhc-slip{position:sticky;top:96px;background:#fff;border:1px solid var(--d-line);border-radius:12px;box-shadow:0 1px 0 rgba(11,16,32,.04),0 18px 40px -22px rgba(11,16,32,.28);overflow:hidden}
.nhc-slip__head{display:flex;justify-content:space-between;gap:12px;padding:13px 20px 12px;background:#fbfcfe;border-bottom:1px solid var(--d-line);font:600 11px/1 var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.nhc-slip__head span:first-child{color:var(--d-ink)}
.nhc-slip__rows{width:100%;border-collapse:collapse;font-size:14.5px}
.nhc-slip__rows th,.nhc-slip__rows td{padding:11px 0!important;border-bottom:1px solid var(--d-line);text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
.nhc-slip__rows th:first-child{padding-left:20px!important;text-align:left;font-weight:600;color:var(--d-ink)}
.nhc-slip__rows td:last-child,.nhc-slip__rows th:last-child{padding-right:20px!important;padding-left:14px!important;font-weight:700;color:var(--d-ink)}
.nhc-slip__rows thead th{padding-top:9px!important;padding-bottom:7px!important;font:600 10.5px/1.2 var(--d-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--d-muted)!important}
.nhc-slip__rows td:nth-child(2){padding-left:12px!important;color:var(--d-muted)}
.nhc-slip__rows del{text-decoration-thickness:1px;color:var(--d-muted)}
.nhc-slip__setup th,.nhc-slip__setup td{font-size:13px}
.nhc-slip__total{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:18px 20px 4px}
.nhc .nhc-slip__k{font:600 11px/1.3 var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.nhc-slip__total p{margin:0;text-align:right;line-height:1}
.nhc-slip__total b{display:block;font-size:40px;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--d-ink)}
.nhc-slip__total p span{display:block;margin-top:6px;font:600 11px/1 var(--d-mono);color:var(--d-muted)}
.nhc .nhc-slip__save{margin:10px 20px 0;padding:9px 12px;border-radius:6px;background:#eaf6ef;color:#14532d;font-size:14px;font-weight:600;text-align:center}
.nhd-btn.nhc-slip__buy{display:flex;width:calc(100% - 40px);margin:14px 20px 0}
.nhc .nhc-slip__note{margin:12px 20px 0;font-size:13px;color:var(--d-ink2);text-align:center;line-height:1.5}
.nhc .nhc-slip__terms{margin:6px 20px 18px;font-size:12px;color:var(--d-muted);text-align:center;line-height:1.5;text-wrap:balance}

/* ---- Preise ---- */
.nhc-prices{padding:72px 0 56px}
.nhc-cmp{width:100%;max-width:880px;border-collapse:collapse;font-size:15px}
/* Theme (hw.css) setzt „table thead th, table tbody td{padding:1rem 1.5rem !important}“ und graue Kopfzellen – hier zurück auf das eigene Maß */
.nhc-cmp thead tr th,.nhc-slip__rows thead tr th{background:transparent;border-radius:0}
.nhc-cmp th,.nhc-cmp td{padding:13px 16px 13px 0!important;border-bottom:1px solid var(--d-line);text-align:left;vertical-align:top}
.nhc-cmp thead th{font:600 11px/1.2 var(--d-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted)}
.nhc-cmp tbody th{font-weight:650;color:var(--d-ink)}
.nhc-cmp tbody th small{display:block;font-weight:400;font-size:12.5px;color:var(--d-muted)}
.nhc-cmp td{font-variant-numeric:tabular-nums;color:var(--d-ink2)}
.nhc-cmp td:last-child{font-weight:650;color:var(--d-ink)}

/* ---- Schmal ---- */
@media (max-width:1100px){
  .nhc .nhc-head__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .nhc-scene{max-width:640px}
  .nhc-form{grid-template-columns:minmax(0,1fr)}
  .nhc-slip{position:static}
}
@media (max-width:700px){
  .nhc .nhc-head{padding-bottom:44px}
  .nhc .nhc-perks div{grid-template-columns:minmax(0,1fr);gap:2px}
  .nhc-scene{min-height:0;display:grid;gap:12px;padding:0}
  .nhc-piece--site,.nhc-piece--dc,.nhc-piece--list{position:relative;inset:auto;width:100%;margin:0}
  .nhc-site__join{margin-bottom:18px}
  .nhc-dc{grid-template-columns:minmax(0,1fr)}
  .nhc-dc__side{display:none}
  .nhc-scene{gap:16px;padding-top:0}
  .nhc-mark{position:static;margin:0 0 6px}
  .nhc-site__status{grid-template-columns:minmax(0,1fr)}
  .nhc-how__col,.nhc-how__col+.nhc-how__col{padding:18px 0 4px;border-left:0;border-top:1px solid var(--d-line)}
  .nhc-how__cols{border-top:0}
  .nhc-terms{grid-template-columns:minmax(0,1fr)}
  .nhc-pkgs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nhc-slip__total b{font-size:34px}
  .nhc-cmp th,.nhc-cmp td{padding-right:10px!important;font-size:14px}
}
/* Handy: lange Wörter (pl „miesięcznie“, it „Configurazione“, da „engangsbeløb“) sprengten bei 375 px die Tabellen
   (Prüfung 2026-11-02). Preisvergleich: Zeilenname über volle Breite, darunter „Einzeln“ | „Im Paket“ in zwei Spalten
   (kein Umbruch mitten im Wort); Bestellschein: Preise ohne Umbruch, engere Ränder. */
@media (max-width:480px){
  .nhc-cmp,.nhc-cmp thead,.nhc-cmp tbody{display:block}
  .nhc-cmp tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;border-bottom:1px solid var(--d-line)}
  .nhc-cmp th,.nhc-cmp td{padding:0 0 12px!important;border-bottom:0;font-size:14px;background:none}
  .nhc-cmp thead th{padding:12px 0 10px!important}
  .nhc-cmp thead th:first-child{display:none}
  .nhc-cmp tbody th{grid-column:1/-1;padding-top:13px!important;padding-bottom:6px!important}
  .nhc-slip__rows th,.nhc-slip__rows td{overflow-wrap:break-word}
  .nhc-slip__rows thead th{letter-spacing:.03em}
  .nhc-slip__rows .nhc-slip__setup td{white-space:normal}
  .nhc-slip__rows td{white-space:nowrap}
  .nhc-slip__rows td:nth-child(2){padding-left:8px!important}
  .nhc-slip__rows td:last-child,.nhc-slip__rows th:last-child{padding-left:10px!important;padding-right:14px!important}
  .nhc-slip__rows th:first-child{padding-left:14px!important}
}
@media (prefers-reduced-motion:no-preference){
  .nhc-pkg__box,.nhc-term span{transition:border-color .15s,box-shadow .15s}
}