/* ============================================================
   pb-bar.css — was für purpleailabs.de an der Studie ergänzt wurde.

   Zwei Dinge: der Rückweg-Balken und die Umgestaltung des
   Kartenmodals, nachdem der Google-Maps-iframe entfallen ist.
   Bewusst eine eigene Datei — css/styles.css bleibt so Zeile für
   Zeile das Original.

   ── 1. 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: css/styles.css bleibt damit
   Zeile für Zeile das Original, ein Abgleich mit dem Quellprojekt
   bleibt möglich.

   pb--Präfix als eigener Namensraum. z-index 10001 liegt über dem
   Splash (--z-splash: 1000) und über den Modals (100) — 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(5, 5, 5, 0.88);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(245, 240, 232, 0.10);
    font-family: 'Barlow Condensed', 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: 11px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(245, 240, 232, .62);
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease;
}
.pb-bar__back:hover { color: #f5f0e8; }

.pb-bar__tag {
    padding: .25em .6em;
    border: 1px solid rgba(139, 44, 44, .75);
    border-radius: 999px;
    color: #d9736f;
    letter-spacing: .14em;
}

/* Die fixierte Kopfzeile der Studie rutscht unter den Balken. */
.nav { top: 36px; }

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


/* ============================================================
   2. Kartenmodal ohne iframe

   Das Modal war auf eine 16:9-Karte plus Infospalte darunter
   ausgelegt. Ohne Karte bleibt nur die Infospalte — sie bekommt
   Luft und wird zentriert, damit das Modal nicht halbleer wirkt.
   ============================================================ */

.map--static {
    padding: var(--space-lg, 2.5rem) var(--space-md, 1.5rem);
    text-align: center;
}

.map--static .map__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    max-width: 34ch;
    margin: 0 auto;
}

.map--static .map__address {
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.7;
    letter-spacing: .04em;
}

.map--static .map__address strong {
    display: block;
    font-family: 'Titan One', system-ui, sans-serif;
    font-size: 1.7rem;
    letter-spacing: .02em;
    margin-bottom: .35rem;
}

.map__note {
    font-size: 0.8125rem;
    line-height: 1.65;
    color: var(--cream-subtle, rgba(245, 240, 232, .4));
}

/* ============================================================
   3. Querlauf abstellen — Fehler aus dem Quellprojekt

   Die Seite scrollte auf jeder Breite seitwärts: gemessen 1480 statt
   1440 px, auf dem Telefon 430 statt 390. Ursache ist .marquee--tilted,
   das per rotate(-1deg) scale(1.02) über beide Ränder hinausragt, dazu
   die um 2px überskalierten Hero-Ebenen.

   styles.css:84 setzt bereits body { overflow-x: hidden } — das greift
   hier aber nicht: solange html auf overflow: visible steht, wandert der
   Wert des Body auf das Viewport, und der Body selbst wird wieder
   visible. Geklammert werden muss deshalb html.

   clip statt hidden, weil clip keinen Scroll-Container erzeugt.
   (Der Fehler steckt auch im Quellprojekt unter Webseiten/LaCueva.)
   ============================================================ */

html {
    overflow-x: clip;
}