/* „Wenn deine Stadt wächst“ auf der FiveM-Seite (Support\FivemScale). Steht in .nhp.gx und nimmt deren Farben (--ac, --st, --line …). */
.nhp .nhfs{border-top:1px solid var(--line)}
.nhp .nhfs .np-head{margin-bottom:2rem}

/* Größenwahl */
.nhp .nhfs-pick-q{font-size:.8rem;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.nhp .nhfs-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line-2);border-radius:var(--r-sm);overflow:hidden}
.nhp .nhfs-step{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-height:64px;padding:.8rem 1rem;margin:0;
  background:transparent;border:0;border-left:1px solid var(--line-2);color:var(--ink);text-align:left;cursor:pointer;font:inherit;
  transition:background .2s var(--ease),color .2s var(--ease)}
.nhp .nhfs-step:first-child{border-left:0}
.nhp .nhfs-step b{font-size:1rem;font-weight:700;color:inherit}
.nhp .nhfs-step span{font-size:.84rem;line-height:1.35;color:var(--muted)}
.nhp .nhfs-step:hover{background:rgba(var(--fg-rgb),.04)}
.nhp .nhfs-step[aria-checked="true"]{background:var(--ac);color:var(--ac-ink)}
.nhp .nhfs-step[aria-checked="true"] b{color:var(--ac-ink)}
.nhp .nhfs-step[aria-checked="true"] span{color:rgba(31,13,0,.78)}
.nhp .nhfs-step:focus-visible{outline:2px solid var(--ac);outline-offset:-4px}
.nhp .nhfs-step[aria-checked="true"]:focus-visible{outline-color:var(--ac-ink)}
.nhp .nhfs-guide{font-size:.84rem;color:var(--muted-2);margin:.55rem 0 0}

/* Empfehlung */
.nhp .nhfs-recs{margin-top:1.6rem}
.nhp .nhfs-rec{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.25rem 3rem;align-items:center;padding:1.5rem 1.6rem;
  background:var(--st2);border:1px solid var(--line-2);border-left:3px solid var(--ac);border-radius:var(--r-sm)}
.nhp .nhfs-rec[hidden]{display:none}
.nhp .nhfs-rec-k{font-size:.75rem;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ac);margin:0 0 .3rem}
.nhp .nhfs-rec-t{font-size:1.45rem;margin:0 0 .4rem}
.nhp .nhfs-rec-p{color:var(--ink-3);margin:0;max-width:44em}
.nhp .nhfs-rec-specs{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;margin:.75rem 0 0;font-family:var(--f-mono);font-size:.84rem;color:var(--ink-2)}
.nhp .nhfs-rec-specs span+span::before{content:"";display:inline-block;width:1px;height:.8em;background:var(--line-2);margin-right:1.25rem;vertical-align:-.05em}
.nhp .nhfs-rec-buy{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right}
.nhp .nhfs-rec-buy .np-price{margin:0}
.nhp .nhfs-alt{font-size:.84rem;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.nhp .nhfs-alt:hover{color:var(--ink)}

/* Datenblatt */
.nhp .nhfs-sheet{margin-top:2rem;border-top:1px solid var(--line-2)}
.nhp .nhfs-row{display:grid;grid-template-columns:minmax(9rem,.8fr) repeat(var(--nhfs-cols,3),minmax(0,1fr));border-bottom:1px solid var(--line)}
.nhp .nhfs-k{padding:.85rem 1rem .85rem 0;font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.nhp .nhfs-c{padding:.85rem 1rem;font-size:.94rem;color:var(--ink-2);transition:background .2s var(--ease)}
.nhp .nhfs-row-head .nhfs-c{display:flex;flex-direction:column;gap:.1rem;padding-top:1.1rem;padding-bottom:1rem;border-top:3px solid transparent;margin-top:-1px}
.nhp .nhfs-name{font-size:1.1rem;font-weight:700;color:var(--ink)}
.nhp .nhfs-tag{font-size:.84rem;color:var(--muted)}
.nhp .nhfs-from{margin-top:.35rem;font-size:.84rem;color:var(--muted)}
.nhp .nhfs-from b{font-size:1.15rem;color:var(--ink);font-variant-numeric:tabular-nums}
.nhp .nhfs-v{display:block;min-width:0}
.nhp .nhfs-num{font-variant-numeric:tabular-nums}
.nhp .nhfs-bar{display:block;height:4px;margin-top:.45rem;background:var(--line);border-radius:2px;overflow:hidden}
.nhp .nhfs-bar>i{display:block;height:100%;background:var(--ash)}
.nhp .nhfs-row-cta{border-bottom:0}
.nhp .nhfs-row-cta .nhfs-c{display:flex;flex-direction:column;align-items:stretch;gap:.5rem;padding-top:1.1rem}
.nhp .nhfs-more{font-size:.84rem;color:var(--muted);text-align:center}
.nhp .nhfs-more:hover{color:var(--ink)}

/* gewählte Spalte (data-hi am Abschnitt, gesetzt aus der Empfehlung) */
.nhp .nhfs[data-hi="game"] .nhfs-c[data-col="game"],
.nhp .nhfs[data-hi="vps"] .nhfs-c[data-col="vps"],
.nhp .nhfs[data-hi="dedi"] .nhfs-c[data-col="dedi"]{background:rgba(var(--ac-rgb),.07)}
.nhp .nhfs[data-hi="game"] .nhfs-row-head .nhfs-c[data-col="game"],
.nhp .nhfs[data-hi="vps"] .nhfs-row-head .nhfs-c[data-col="vps"],
.nhp .nhfs[data-hi="dedi"] .nhfs-row-head .nhfs-c[data-col="dedi"]{border-top-color:var(--ac)}
.nhp .nhfs[data-hi="game"] .nhfs-c[data-col="game"] .nhfs-bar>i,
.nhp .nhfs[data-hi="vps"] .nhfs-c[data-col="vps"] .nhfs-bar>i,
.nhp .nhfs[data-hi="dedi"] .nhfs-c[data-col="dedi"] .nhfs-bar>i{background:var(--ac)}
.nhp .nhfs[data-hi="game"] .nhfs-row-cta .nhfs-c[data-col="game"] .np-btn,
.nhp .nhfs[data-hi="vps"] .nhfs-row-cta .nhfs-c[data-col="vps"] .np-btn,
.nhp .nhfs[data-hi="dedi"] .nhfs-row-cta .nhfs-c[data-col="dedi"] .np-btn{background:var(--ac)!important;color:var(--ac-ink)!important;border-color:var(--ac)!important}

.nhp .nhfs-note{margin:1.4rem 0 0;font-size:.84rem;color:var(--muted-2)}
.nhp .nhfs-note a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .nhp .nhfs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nhp .nhfs-step:nth-child(3){border-left:0}
  .nhp .nhfs-step:nth-child(n+3){border-top:1px solid var(--line-2)}
  .nhp .nhfs-rec{grid-template-columns:minmax(0,1fr)}
  .nhp .nhfs-rec-buy{align-items:flex-start;text-align:left}
}
/* schmal: jede Stufe als eigener Block untereinander (Zellen per order nach Spalte sortiert, Zeilenname vor dem Wert) */
@media (max-width:720px){
  .nhp .nhfs-steps{grid-template-columns:minmax(0,1fr)}
  .nhp .nhfs-step,.nhp .nhfs-step:nth-child(3){border-left:0}
  .nhp .nhfs-step+.nhp .nhfs-step,.nhp .nhfs-step:not(:first-child){border-top:1px solid var(--line-2)}
  .nhp .nhfs-step{min-height:0;flex-direction:row;align-items:baseline;gap:.6rem}
  .nhp .nhfs-rec{padding:1.2rem}
  .nhp .nhfs-sheet{display:grid;grid-template-columns:minmax(0,1fr);border-top:0}
  .nhp .nhfs-row{display:contents}
  .nhp .nhfs-k{display:none}
  .nhp .nhfs-c{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;padding:.6rem 1rem;border:1px solid var(--line);border-top:0}
  .nhp .nhfs-c::before{content:attr(data-k);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:.15rem}
  .nhp .nhfs-c[data-col="game"]{order:1}
  .nhp .nhfs-c[data-col="vps"]{order:2}
  .nhp .nhfs-c[data-col="dedi"]{order:3}
  .nhp .nhfs-row-head .nhfs-c{display:flex;margin-top:1.25rem;border-top:3px solid var(--line-2);border-radius:var(--r-sm) var(--r-sm) 0 0}
  .nhp .nhfs-row-head .nhfs-c::before,.nhp .nhfs-row-cta .nhfs-c::before{display:none}
  .nhp .nhfs-row-cta .nhfs-c{display:flex;padding-bottom:1rem;border-radius:0 0 var(--r-sm) var(--r-sm)}
}