/* ==========================================================================
   Human Punishment — Design-System (Kompendium)
   "Redacted Dossier": kalte Fast-Schwarz-Basis, gedecktes Oxidrot als einziger
   warmer Akzent, Fraktionsfarben als Signalfarben. Zwei getrennte Ansichten —
   Kartenuebersicht (A) und Vorbereitung (B) — teilen sich diese Chrome.
   ========================================================================== */

:root {
  /* Grund */
  --void:      #06080c;
  --steel:     #0e141d;
  --panel:     #141d29;
  --panel-hi:  #1c2735;
  --line:      rgba(190, 205, 225, 0.13);
  --line-hot:  rgba(168, 58, 46, 0.45);

  /* Schrift */
  --bone:      #e6e2d6;
  --bone-dim:  #9aa4b0;
  --bone-far:  #6b7684;

  /* Akzent + Fraktionen (aus den Karten) */
  --ember:     #a83a2e;
  --ember-lo:  #7d2b23;
  --human:     #4d9fe0;
  --machine:   #e8412f;
  --outlaw:    #b6c0cc;
  --legion:    #79c04a;
  --fallen:    #cf6fa6;

  --radius:    14px;
  --radius-sm: 9px;

  --shadow-lift: 0 24px 60px rgba(0, 0, 0, 0.6);
  --shadow-flat: 0 2px 0 rgba(0, 0, 0, 0.5);

  --font-display: "Oxanium", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Signika", ui-sans-serif, system-ui, sans-serif;

  --card-paper:    #cfc3a3;
  --card-paper-hi: #dbd0b0;
  --card-ink:      #221c12;
  --card-ink-dim:  #5c5540;
}

* { box-sizing: border-box; }

/* Das hidden-Attribut muss auch dann greifen, wenn eine Regel der Klasse ein
   eigenes display gibt (.hp-zoom/.hp-card) — sonst bleibt das Overlay sichtbar
   und gefilterte Karten verschwinden nicht. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body.hp {
  margin: 0;
  min-height: 100dvh;
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  background: var(--void);
  overflow-x: clip;
  max-width: 100%;
}

body.hp-noscroll { overflow: hidden; }

/* --- Atmosphäre: Korn + Lichtkegel ---------------------------------------- */

.hp-grain,
.hp-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.hp-grain {
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter>\
<rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.hp-glow {
  background:
    radial-gradient(58vw 42vh at 78% -8%, rgba(168, 58, 46, 0.16), transparent 68%),
    radial-gradient(52vw 46vh at 4% 108%, rgba(77, 159, 224, 0.11), transparent 66%),
    linear-gradient(178deg, #080b11 0%, #06080c 46%, #090c12 100%);
}

/* --- Kopfleiste ----------------------------------------------------------- */

.hp-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.9rem clamp(1rem, 4vw, 2.6rem);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 12, 18, 0.92), rgba(9, 12, 18, 0.55));
  backdrop-filter: blur(9px);
}

.hp-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}

.hp-brand__mark {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border: 1.5px solid var(--ember);
  border-radius: 50% 50% 46% 46%;
  box-shadow: inset 0 -6px 10px rgba(168, 58, 46, 0.35), 0 0 16px rgba(168, 58, 46, 0.28);
  position: relative;
}

.hp-brand__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 9px;
  height: 6px;
  transform: translateX(-50%);
  border: 1.5px solid var(--ember);
  border-top: 0;
  opacity: 0.75;
}

.hp-brand__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  line-height: 1.1;
}

.hp-brand__sub {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bone-far);
}

.hp-topnav {
  flex-wrap: wrap;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hp-topnav__link {
  color: var(--bone-dim);
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--font-display);
  font-weight: 500;
  transition: color 0.18s ease;
}

.hp-topnav__link:hover { color: var(--ember); }
.hp-topnav__link.is-active { color: var(--ember); }

.hp-topnav__link--button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- Grundgerüst ---------------------------------------------------------- */

.hp-main {
  position: relative;
  z-index: 1;
  padding: clamp(1.4rem, 4vw, 3.4rem) clamp(1rem, 4vw, 2.6rem) 4rem;
  max-width: 1180px;
  margin: 0 auto;
}

.hp-eyebrow {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ember);
}

.hp-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.hp-h2 {
  margin: 0 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
}

.hp-lede {
  margin: 0.9rem 0 0;
  max-width: 52ch;
  color: var(--bone-dim);
  font-size: 1.02rem;
}

.hp-hr {
  height: 1px;
  border: 0;
  margin: 2.2rem 0;
  background: linear-gradient(90deg, var(--line-hot), var(--line) 22%, transparent 72%);
}

/* --- Panels --------------------------------------------------------------- */

.hp-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 39, 53, 0.75), rgba(15, 21, 30, 0.85));
  box-shadow: var(--shadow-lift);
  padding: clamp(1.1rem, 2.6vw, 1.7rem);
}

.hp-panel--notch {
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

/* --- Formularelemente ----------------------------------------------------- */

.hp-field { display: block; margin-bottom: 1rem; }

.hp-label {
  display: block;
  margin-bottom: 0.38rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone-far);
}

.hp-input,
.hp-select {
  width: 100%;
  padding: 0.72rem 0.85rem;
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 1rem;
  background: rgba(6, 9, 13, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.hp-input:focus,
.hp-select:focus {
  outline: none;
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(168, 58, 46, 0.16);
}

.hp-input::placeholder { color: var(--bone-far); }

/* --- Buttons -------------------------------------------------------------- */

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.3rem;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(28, 39, 53, 0.7);
  color: var(--bone);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.18s ease,
              background 0.18s ease, color 0.18s ease;
}

.hp-btn:hover:not(:disabled) {
  border-color: var(--line-hot);
  background: rgba(40, 54, 72, 0.8);
  transform: translateY(-1px);
}

.hp-btn:active:not(:disabled) { transform: translateY(0); }
.hp-btn:disabled { opacity: 0.42; cursor: not-allowed; }

.hp-btn--primary {
  border-color: transparent;
  color: #16100a;
  background: linear-gradient(180deg, #c96b60, var(--ember) 55%, var(--ember-lo));
  box-shadow: 0 10px 26px rgba(168, 58, 46, 0.24);
}

.hp-btn--primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #dc8a7f, #b8493b 55%, #8f3327);
  border-color: transparent;
}

.hp-btn--ghost { background: transparent; }
.hp-btn--wide { width: 100%; }

/* --- Fraktions-Signalfarben ----------------------------------------------- */

.is-human   { --faction: var(--human); }
.is-machine { --faction: var(--machine); }
.is-outlaw  { --faction: var(--outlaw); }
.is-legion  { --faction: var(--legion); }
.is-fallen  { --faction: var(--fallen); }

.hp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.16rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--faction, var(--bone-far)) 55%, transparent);
  border-radius: 999px;
  color: var(--faction, var(--bone-dim));
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Kleine, neutrale Marken (Edition, Timing, Gewicht …) */
.hp-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.16rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(6, 9, 13, 0.5);
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hp-chip--base { border-color: color-mix(in srgb, var(--human) 45%, transparent); color: var(--human); }
.hp-chip--hellgate { border-color: var(--line-hot); color: var(--ember); }
.hp-chip--muted { color: var(--bone-far); }
.hp-chip--warn { border-color: color-mix(in srgb, var(--ember) 60%, transparent); color: #e8b0a8; }
.hp-chip--tag { color: var(--bone-far); text-transform: none; letter-spacing: 0.06em; }

/* --- Meldungen ------------------------------------------------------------ */

.hp-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--machine);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(232, 65, 47, 0.1);
  color: #ffb9b1;
  font-size: 0.92rem;
}

.hp-notice:empty { display: none; }

.hp-notice--ok {
  border-left-color: var(--legion);
  background: rgba(121, 192, 74, 0.1);
  color: #cbe9b4;
}

.hp-empty {
  padding: 1.4rem 0.2rem;
  color: var(--bone-far);
  font-size: 0.94rem;
  text-align: center;
}

/* --- Segmentierte Auswahl (Filter) ---------------------------------------- */

.hp-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hp-segment button {
  flex: 1;
  min-width: max-content;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--bone-dim);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.hp-segment button:hover { background: rgba(168, 58, 46, 0.08); color: var(--bone); }

.hp-segment button[aria-pressed="true"] {
  background: rgba(168, 58, 46, 0.16);
  color: var(--ember);
}

.hp-segment--multi button {
  flex: 0 1 auto;
  padding: 0.5rem 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--line);
}

/* ==========================================================================
   Home — die zwei Funktionen als Portale
   ========================================================================== */

.hp-home__intro { margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.hp-home__intro .hp-lede em { color: var(--bone); font-style: normal; }

.hp-portals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1rem, 3vw, 1.6rem);
}

.hp-portal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(28, 39, 53, 0.72), rgba(15, 21, 30, 0.9));
  box-shadow: var(--shadow-lift);
  text-decoration: none;
  color: inherit;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: transform 0.16s ease, border-color 0.18s ease;
}

.hp-portal:hover { transform: translateY(-3px); border-color: var(--line-hot); }

.hp-portal__index {
  position: absolute;
  top: 0.8rem; right: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: color-mix(in srgb, var(--ember) 34%, transparent);
}

.hp-portal__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-portal__lede { margin: 0; color: var(--bone-dim); font-size: 0.98rem; }

.hp-portal__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}

.hp-portal__facts li {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-far);
}

.hp-portal__facts b {
  display: block;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--bone);
}

.hp-portal__go {
  margin-top: auto;
  padding-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ember);
}

.hp-home__note {
  margin: 2.4rem 0 0;
  color: var(--bone-far);
  font-size: 0.85rem;
}

/* ==========================================================================
   Gemeinsame Ansichts-Kopfzeile + Filterleiste
   ========================================================================== */

.hp-viewhead { margin-bottom: 1.4rem; }

.hp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: flex-end;
  margin-bottom: 1.2rem;
}

.hp-filtergroup { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.hp-filtergroup .hp-label { margin: 0; }
.hp-filtergroup--search { flex: 1 1 220px; }
.hp-filtergroup--search .hp-input { min-width: 200px; }

.hp-resultcount {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-far);
}

/* ==========================================================================
   Funktion A — Kartengitter
   ========================================================================== */

.hp-cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: clamp(0.7rem, 2vw, 1.1rem);
}

.hp-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--faction, var(--ember));
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(28, 39, 53, 0.7), rgba(15, 21, 30, 0.9));
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hp-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-hot);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5);
}

.hp-card__thumb {
  aspect-ratio: 3 / 2;
  background-size: cover;
  background-position: center top;
  background-color: color-mix(in srgb, var(--faction, var(--ember)) 16%, var(--steel));
}

.hp-card__thumb--none { display: grid; place-items: center; }

.hp-card__glyph {
  font-size: 2.4rem;
  color: color-mix(in srgb, var(--faction, var(--ember)) 60%, var(--bone-far));
}

.hp-card__body { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.75rem 0.85rem; }

.hp-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.15;
}

.hp-card__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.hp-card__text {
  margin: 0;
  font-size: 0.82rem;
  color: var(--bone-dim);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Großansicht (Modal) -------------------------------------------------- */

.hp-zoom {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(4, 6, 10, 0.82);
  backdrop-filter: blur(4px);
}

.hp-zoom__close {
  position: absolute;
  top: clamp(0.8rem, 3vw, 1.6rem);
  right: clamp(0.8rem, 3vw, 1.6rem);
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(6, 9, 13, 0.8);
  color: var(--bone);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.hp-zoom__close:hover { border-color: var(--line-hot); color: var(--ember); }

.hp-zoom__panel {
  width: min(640px, 100%);
  max-height: 86dvh;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-top: 4px solid var(--faction, var(--ember));
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel-hi), var(--steel));
  box-shadow: var(--shadow-lift);
}

.hp-zoom__art {
  height: min(320px, 42dvh);
  background-size: cover;
  background-position: center top;
  background-color: color-mix(in srgb, var(--faction, var(--ember)) 18%, var(--steel));
}

.hp-zoom__main { padding: clamp(1.1rem, 3vw, 1.7rem); display: flex; flex-direction: column; gap: 0.8rem; }

.hp-zoom__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.05;
}

.hp-zoom__meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hp-zoom__subtitle { margin: 0; color: var(--bone-dim); font-style: italic; }

.hp-zoom__section { display: flex; flex-direction: column; gap: 0.3rem; }
.hp-zoom__section p { margin: 0; color: var(--bone); line-height: 1.55; }

.hp-zoom__kicker {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
}

.hp-zoom__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }

/* ==========================================================================
   Funktion B — Vorbereitungs-Blatt
   ========================================================================== */

.hp-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 29, 41, 0.7), rgba(12, 17, 24, 0.9));
  box-shadow: var(--shadow-lift);
  padding: clamp(1.2rem, 3.4vw, 2.2rem);
}

.hp-sheet__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.hp-sheet__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.hp-sheet__section {
  margin: 1.8rem 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
}

.hp-sheet__lede { margin: -0.4rem 0 1rem; color: var(--bone-dim); font-size: 0.92rem; }

.hp-supplygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.9rem;
}

.hp-supplyblock {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(6, 9, 13, 0.45);
  padding: 0.9rem 1rem 1rem;
}

.hp-supplyblock__title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone);
}

.hp-supplyblock__sub { margin: 0 0 0.6rem; font-size: 0.82rem; color: var(--bone-far); }

.hp-supplylist { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }

.hp-supplyitem {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.92rem;
}
.hp-supplyitem:last-child { border-bottom: 0; }

.hp-supplyitem__dot {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 2px;
  background: var(--faction, var(--bone-far));
  transform: rotate(45deg);
}

.hp-supplyitem__name { flex: 1; color: var(--bone); }
.hp-supplyitem__count {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--bone);
  font-size: 0.95rem;
}

.hp-supplyitem__flag {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ember);
}
.hp-supplyitem--locked .hp-supplyitem__name { color: var(--bone-dim); }

/* Aufbau-Schritte */
.hp-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }

.hp-step {
  counter-increment: step;
  position: relative;
  padding: 0.8rem 1rem 0.8rem 3rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember-lo);
  border-radius: var(--radius-sm);
  background: rgba(6, 9, 13, 0.4);
}

.hp-step::before {
  content: counter(step);
  position: absolute;
  left: 0.85rem; top: 0.8rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--ember);
}

.hp-step__title {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.hp-step__detail { margin: 0; color: var(--bone-dim); font-size: 0.92rem; line-height: 1.5; }

/* Sonderregeln */
.hp-notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }

.hp-note {
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--ember);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: rgba(168, 58, 46, 0.08);
  color: var(--bone);
  font-size: 0.92rem;
}

/* Vorgabe-Szenarios */
.hp-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
}

.hp-scenario {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(6, 9, 13, 0.45);
  padding: 0.9rem 1rem 1rem;
}

.hp-scenario__name {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bone);
}

.hp-scenario__roles {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.hp-scenario__roles li {
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  color: var(--bone-dim);
}

.hp-scenario__rule { margin: 0; font-size: 0.86rem; color: var(--bone-dim); line-height: 1.45; }

.hp-scenario__kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.2rem;
}

/* ==========================================================================
   Zugangsschloss
   ========================================================================== */

.hp-gate {
  min-height: 72dvh;
  display: grid;
  place-items: center;
}

.hp-gate .hp-panel { width: min(24rem, 100%); }
.hp-gate .hp-lede { margin-bottom: 1.5rem; }

/* --- Einblendung beim Laden ----------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hp-rise { animation: hp-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .hp-rise:nth-child(2) { animation-delay: 0.06s; }
  .hp-rise:nth-child(3) { animation-delay: 0.12s; }
}

@keyframes hp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* --- Mobil ---------------------------------------------------------------- */

@media (max-width: 560px) {
  .hp-brand__text { display: none; }
  .hp-brand__mark { width: 20px; height: 20px; }
  .hp-topnav { gap: 0.9rem; font-size: 0.74rem; }
  .hp-cardgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .hp-card__glyph { font-size: 1.8rem; }
}