/* ============================================================
   pb-bar.css — der Rückweg zu Purple AI Labs.

   Die Studie bringt ihre eigene Navigation mit und weiß nichts von
   der Hauptseite. Ohne diesen Balken landet der Besucher in einer
   Sackgasse. Bewusst eine eigene Datei: style.css bleibt damit
   Zeile für Zeile das Original, und ein Abgleich mit dem Quellprojekt
   bleibt möglich.

   pb--Präfix als eigener Namensraum. z-index 10001 liegt über dem
   Splash (9999) und über dem Skip-Link (10000) — die Einordnung als
   Konzeptstudie steht ab der ersten Sekunde, nicht erst danach.
   ============================================================ */

.pb-bar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 10001;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 clamp(12px, 3vw, 28px);
    background: rgba(4, 7, 15, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(216, 242, 255, 0.10);
    font-family: var(--ff-body, system-ui, sans-serif);
}

.pb-bar__brand { display: flex; align-items: center; opacity: .85; transition: opacity .2s ease; }
.pb-bar__brand:hover { opacity: 1; }
.pb-bar__brand img { height: 13px; width: auto; display: block; }

.pb-bar__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(216, 242, 255, .62);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.pb-bar__back:hover { color: var(--ice-hi, #d8f2ff); }

.pb-bar__tag {
    padding: .25em .6em;
    border: 1px solid rgba(127, 212, 255, .45);
    border-radius: 999px;
    color: var(--ice, #7fd4ff);
    letter-spacing: .14em;
}

/* Die fixierte Kopfzeile der Studie und der Skip-Link sitzen beide auf
   top: 0 — beide rutschen um die Höhe des Balkens nach unten. */
.nav { top: 36px; }
.skip-link:focus-visible { top: 36px; }

@media (max-width: 560px) {
    .pb-bar { height: 32px; }
    .pb-bar__back { font-size: 9px; letter-spacing: .1em; }
    .pb-bar__tag { display: none; }
    .nav { top: 32px; }
    .skip-link:focus-visible { top: 32px; }
}