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

   Entrel bringt eigenen Header und Footer mit und weiß nichts von der
   Studio-Seite. Ohne diesen Balken landet der Besucher in einer
   Sackgasse. Bewusst eine eigene Datei: die vier Quell-Stylesheets
   bleiben damit unangetastet, ein Abgleich mit dem Quellprojekt unter
   Webseiten/Entrel Website bleibt möglich.

   Anders als bei den Konzeptstudien steht hier NICHT „Konzeptstudie":
   Entrel ist ein eigenes Produkt, kein Entwurf. Deshalb „Produkt" und
   der Rückweg ins Portfolio statt auf die Konzeptseite.

   z-index 10001 liegt über dem Splash (2000), dem Vollbild-Gate der
   Kapitel (1500) und dem Header (900) — die Einordnung steht ab der
   ersten Sekunde.
   ============================================================ */

.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(14, 14, 14, 0.92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(200, 180, 138, 0.16);
    font-family: 'General Sans', 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: .55rem;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(245, 242, 235, .6);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.pb-bar__back:hover { color: #F5F2EB; }

.pb-bar__tag {
    padding: .3em .7em;
    border: 1px solid var(--gold-accent-border, rgba(200, 180, 138, .5));
    border-radius: 999px;
    color: var(--gold-accent, #C8B48A);
    letter-spacing: .16em;
}

/* Die fixierte Kopfzeile von Entrel rutscht unter den Balken. */
.header { top: 36px; }

@media (max-width: 560px) {
    .pb-bar { height: 32px; }
    .pb-bar__back { font-size: 9px; letter-spacing: .12em; }
    .pb-bar__tag { display: none; }
    .header { top: 32px; }
}