/* Prototyp-Chrome — gehoert NICHT zum Produkt-Design, nur zur Demo-Navigation */

body { padding-bottom: 56px; }

.pt-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  height: 56px; display: flex; align-items: center; gap: 14px;
  padding: 0 16px; background: #1A1712; color: #FFFDF6;
  border-top: 3px solid var(--coral);
  font: 500 13px/1 var(--f-text);
}
.pt-bar__mark {
  font-family: var(--f-display); text-transform: uppercase; font-size: 13px;
  letter-spacing: .06em; color: var(--coral-glow); white-space: nowrap;
}
.pt-bar__roles { display: flex; gap: 4px; }
.pt-role {
  border-radius: var(--r-pill); padding: 7px 13px; white-space: nowrap;
  font: 600 12px/1 var(--f-text); color: #CFC4B2;
  border: 1px solid rgba(255,253,246,.22); background: transparent;
}
.pt-role:hover { border-color: var(--coral-glow); color: #FFFDF6; }
.pt-role[aria-current="true"] { background: var(--coral); border-color: var(--coral); color: #fff; }
.pt-bar__spacer { flex: 1; }
.pt-bar__meta { font-family: var(--f-mono); font-size: 11px; color: #9C907D; white-space: nowrap; }
.pt-step {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  border: 1px solid rgba(255,253,246,.22); color: #FFFDF6;
  display: inline-flex; align-items: center; justify-content: center;
}
.pt-step:hover { border-color: var(--coral-glow); }
.pt-step[disabled] { opacity: .3; }
.pt-hot {
  border-radius: var(--r-pill); padding: 7px 13px; white-space: nowrap;
  font: 600 12px/1 var(--f-text); color: #CFC4B2;
  border: 1px solid rgba(255,253,246,.22);
}
.pt-hot[aria-pressed="true"] { background: var(--coral-glow); border-color: var(--coral-glow); color: #1A1712; }

/* Screen-Auswahl */
.pt-jump { position: relative; }
.pt-jump__list {
  position: absolute; bottom: 46px; right: 0; width: 288px; max-height: 60vh; overflow: auto;
  background: #1A1712; border: 1px solid rgba(255,253,246,.18); border-radius: 14px; padding: 6px;
}
.pt-jump__list[hidden] { display: none; }
.pt-jump__list a {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px;
  color: #CFC4B2; font: 500 12.5px/1.3 var(--f-text);
}
.pt-jump__list a:hover { background: rgba(255,255,255,.07); color: #FFFDF6; }
.pt-jump__list a[aria-current="true"] { color: var(--coral-glow); }
.pt-jump__list .n { font-family: var(--f-mono); font-size: 11px; color: #7E7364; }
.pt-jump__list .sep {
  padding: 10px 10px 4px; font: 700 10px/1 var(--f-text); letter-spacing: .1em;
  text-transform: uppercase; color: #7E7364;
}

/* Hotspots sichtbar machen */
html.pt-hotspots a[href]:not(.pt-role):not(.pt-step) {
  outline: 2px dashed var(--coral); outline-offset: 2px; border-radius: 6px;
}
html.pt-hotspots .pt-bar a { outline: none; }

/* Nav-Punkte, die im Prototyp nicht ausgebaut sind */
.nav-item[data-soon] { opacity: .78; }

@media (max-width: 1023px) {
  body { padding-bottom: 0; }
  .pt-bar {
    left: auto; right: 12px; bottom: 84px; height: auto; width: auto;
    border-radius: 16px; border: 1px solid rgba(255,253,246,.2); border-top: 3px solid var(--coral);
    flex-direction: column; align-items: stretch; gap: 8px; padding: 12px;
    box-shadow: 0 10px 30px rgba(26,23,18,.35);
  }
  .pt-bar[data-collapsed="true"] { padding: 0; border-radius: 50%; }
  .pt-bar[data-collapsed="true"] > *:not(.pt-toggle) { display: none; }
  .pt-bar__roles { flex-wrap: wrap; }
  .pt-bar__meta { display: none; }
  .pt-jump__list { bottom: auto; top: 0; right: 52px; width: 230px; }
  .pt-toggle {
    width: 46px; height: 46px; border-radius: 50%; flex: none; align-self: flex-end;
    background: var(--coral); color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--f-display); font-size: 13px;
  }
}
@media (min-width: 1024px) { .pt-toggle { display: none; } }