/* =====================================================================
   Story-Modus: Rahmen, Fortschritt, Kapitelmenü, Marke
   ===================================================================== */

/* --- Markenzeile oben links --------------------------------------- */
#brandbar {
  position: fixed;
  top: clamp(18px, 3.2vh, 34px);
  left: var(--pad-x);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 16px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
#brandbar.on { opacity: 1; transform: none; }
#brandbar .mark {
  height: clamp(15px, 1.5vw, 21px);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .92;
}
#brandbar .sep { width: 1px; height: 15px; background: var(--line-strong); }
#brandbar .ctx {
  font-size: var(--t-kicker);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* --- Fortschritt unten -------------------------------------------- */
#progress {
  position: fixed;
  left: var(--pad-x);
  right: var(--pad-x);
  bottom: clamp(16px, 2.6vh, 30px);
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
#progress.on { opacity: 1; }

#progress .ticks {
  flex: 1;
  display: flex;
  gap: 5px;
  align-items: center;
  cursor: pointer;
}
#progress .tick {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-4);
  position: relative;
  overflow: hidden;
  transition: background 400ms var(--ease), height 300ms var(--ease);
}
#progress .tick i {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--action-soft);
  transition: transform 500ms var(--ease);
}
#progress .tick.done i { transform: scaleX(1); background: rgba(238, 241, 251, .34); }
#progress .tick.now { height: 3px; }
#progress .tick.now i { transform: scaleX(1); }

#progress .label {
  font-size: var(--t-kicker);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  display: flex;
  gap: 12px;
  align-items: center;
}
#progress .label b { color: var(--fg-2); font-weight: 600; }
#progress .menu-btn {
  font-size: var(--t-kicker);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  transition: color 240ms, border-color 240ms;
}
#progress .menu-btn:hover { color: var(--fg); border-color: var(--line-strong); }

/* Hinweis für die Bedienung — verschwindet nach dem ersten Schritt. */
#hint {
  position: fixed;
  bottom: clamp(52px, 7vh, 84px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 39;
  font-size: var(--t-small);
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 900ms var(--ease);
  pointer-events: none;
}
#hint.on { opacity: 1; }
#hint kbd {
  font-family: var(--font);
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 7px;
  color: var(--fg-2);
}

/* --- Kapitelmenü --------------------------------------------------- */
#chapters {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(3, 5, 18, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: auto;
  padding: clamp(40px, 8vh, 90px) var(--pad-x);
  opacity: 0;
  visibility: hidden;
  transition: opacity 420ms var(--ease), visibility 0s linear 420ms;
}
#chapters.on { opacity: 1; visibility: visible; transition-delay: 0s; }
#chapters .grid {
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  flex: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}
#chapters .ch {
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px 18px 18px;
  background: var(--surface);
  transition: border-color 240ms, background 240ms, transform 240ms var(--ease);
}
#chapters .ch:hover { border-color: var(--line-strong); background: var(--surface-2); transform: translateY(-2px); }
#chapters .ch.now { border-color: var(--action-soft); }
#chapters .ch .n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
  letter-spacing: .1em;
}
#chapters .ch .t { margin-top: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.015em; }
#chapters .ch .s { margin-top: 5px; font-size: 12px; color: var(--fg-3); }
#chapters .head { max-width: var(--maxw); margin: 0 auto 26px; width: 100%; flex: none; }

/* --- Modusumschalter (dezent, oben rechts) ------------------------- */
#modeswitch {
  position: fixed;
  top: clamp(18px, 3.2vh, 34px);
  right: var(--pad-x);
  z-index: 41;
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
#modeswitch.on { opacity: 1; }
#modeswitch button {
  font-size: var(--t-kicker);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
  transition: color 240ms, border-color 240ms;
}
#modeswitch button:hover { color: var(--fg); border-color: var(--line-strong); }