/* Prisma · Live-Demo — die Leiste unten (tools/build-demo.js).
   Schwebt über der Seite, gehört nicht zum Template: eigene Schrift, eigene
   Farben, eigener Präfix (pxdemo), damit nichts im Template sie berührt und
   sie nichts im Template. */
body { padding-bottom: 96px !important; }

.pxdemo {
  /* Mittig ohne left:50% — das hätte die Leiste auf die halbe Fensterbreite
     begrenzt und die letzten Seiten abgeschnitten. */
  position: fixed; left: 0; right: 0; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2147483000;
  margin-inline: auto; width: max-content;
  display: flex; align-items: center; gap: 6px;
  max-width: calc(100vw - 20px); padding: 6px;
  background: rgba(16, 18, 26, .92); color: #fff;
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, .45);
  font: 500 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
}
.pxdemo a { color: inherit; text-decoration: none; }
.pxdemo-brand { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; flex: 0 0 auto; }
.pxdemo-brand:hover { background: rgba(255, 255, 255, .08); }
.pxdemo-dot { width: 9px; height: 9px; border-radius: 50%; background: #AD4708; box-shadow: 0 0 0 3px rgba(173, 71, 8, .35); }
.pxdemo-brand b { font-weight: 700; }
.pxdemo-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .85); }
.pxdemo-pages { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.pxdemo-pages::-webkit-scrollbar { display: none; }
.pxdemo-pages a { flex: 0 0 auto; padding: 9px 11px; border-radius: 10px; color: rgba(255, 255, 255, .72); white-space: nowrap; }
.pxdemo-pages a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.pxdemo-pages a.is-on { color: #fff; background: rgba(255, 255, 255, .16); }
.pxdemo-buy { flex: 0 0 auto; padding: 9px 13px; border-radius: 10px; background: #fff; color: #10121A !important; font-weight: 700; }
.pxdemo-buy:hover { background: #F1E7DA; }
.pxdemo a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.pxdemo-toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 2147483001;
  transform: translateX(-50%); padding: 9px 14px; border-radius: 10px;
  background: #10121A; color: #fff; font: 500 12.5px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); pointer-events: none;
}

@media (max-width: 720px) {
  .pxdemo { left: 10px; right: 10px; width: auto; max-width: none; }
  .pxdemo-tag, .pxdemo-buy { display: none; }
}

/* Beispielfotos (build-demo.js → dressPhotos): Kopf der Startseite und der
   Kategorie sind für die breite Fläche ausgeschnitten. Am Telefon wird die
   Fläche hoch — dort füllt das Foto sie ganz, mit den Personen in der Mitte. */
@media (max-width: 760px) {
  .rz-hero { background-size: auto, cover, auto !important; background-position: 0 0, 62% 18%, 0 0 !important; }
  .rz-cathero { background-size: cover !important; background-position: 55% 20% !important; }
}

/* Eingebettet (Rahmen auf website/prisma.html#demo): die Website trägt dort
   ihre eigene Seitenleiste, die Leiste der Demo würde sie doppeln. */
.pxdemo-framed body { padding-bottom: 0 !important; }
.pxdemo-framed .pxdemo { display: none !important; }