/* ==========================================================================
   DIE PROMEDIA-BILDANSICHT (V3.54.35) — EINE Bildansicht für Kundenseiten und Website
   ==========================================================================
   Entschieden von Chris am 18.10.2026 („nimm die du dafür empfiehlst“): Es gab drei
   Bildansichten. Die des CMS (assets/ansicht.js) bleibt dort – sie ist der CMS-Standard.
   Für Kunden und Website gibt es diese eine; Kundengalerie und Website-Galerie bauen darauf.
   Markenwerte kommen aus pm-kundenstrecke.css (.pm-kw, .pm-ba – eine Quelle), Symbole aus
   promedia_symbole(). Gold nur als Antwort auf Überfahren, Fokus und gewählten Zustand.
   ========================================================================== */

.pm-ba{
  position:fixed;inset:0;z-index:100000;
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;
  background:var(--pmk-dunkel);color:#fff;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.pm-ba[hidden]{display:none}
.pm-ba__kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.pm-ba__zahl{margin:0;min-width:0;font-size:14px;opacity:.78;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pm-ba__knoepfe{display:flex;gap:8px;flex:0 0 auto}

/* Symbolknopf auf dunklem Grund: dieselbe Form wie im Haus, Gold nur als Antwort. */
.pm-ba__symbol{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--pmk-ziel);height:var(--pmk-ziel);padding:0;
  border:1px solid rgba(255,255,255,.22);border-radius:var(--pmk-r-knopf);
  background:transparent;color:#fff;cursor:pointer;text-decoration:none;
  transition:color .12s ease,border-color .12s ease}
.pm-ba__symbol:hover,.pm-ba__symbol:focus-visible,.pm-ba__symbol[aria-pressed="true"]{color:var(--pmk-gold);border-color:var(--pmk-gold)}
.pm-ba__symbol:focus-visible{outline:2px solid var(--pmk-gold);outline-offset:2px}
.pm-ba__symbol[aria-pressed="true"] svg[data-fuellbar]{fill:currentColor}
.pm-ba__symbol:disabled{opacity:.45;cursor:default}

.pm-ba__buehne{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 72px 16px;cursor:default}
.pm-ba__buehne img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:auto;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:opacity .15s linear}
.pm-ba__buehne img.ist-laedt{opacity:.55}
.pm-ba__weiter{
  position:absolute;top:50%;margin-top:-28px;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  appearance:none;-webkit-appearance:none;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;cursor:pointer;
  transition:color .12s ease,background-color .12s ease}
.pm-ba__weiter:hover,.pm-ba__weiter:focus-visible{color:var(--pmk-gold);background:rgba(255,255,255,.14)}
.pm-ba__weiter:focus-visible{outline:2px solid var(--pmk-gold);outline-offset:2px}
.pm-ba__zurueck{left:12px}
.pm-ba__vor{right:12px}

/* Was die Nutzung unter das Bild legt (Notiz der Kundengalerie, Kaufen-Feld der Website). */
.pm-ba__unten{grid-row:3;padding:0 16px 16px;max-width:760px;width:100%;margin:0 auto;box-sizing:border-box}
.pm-ba__unten:empty{display:none}

/* Bildstreifen (Website-Galerie). */
.pm-ba__streifen{grid-row:4;display:flex;gap:6px;overflow-x:auto;padding:0 16px 14px;scrollbar-width:thin}
.pm-ba__streifen:empty{display:none}
.pm-ba__streifen button{flex:0 0 auto;width:64px;height:44px;padding:0;border:2px solid transparent;border-radius:6px;background:none;cursor:pointer;opacity:.6;transition:opacity .12s,border-color .12s}
.pm-ba__streifen button[aria-current="true"],.pm-ba__streifen button:hover,.pm-ba__streifen button:focus-visible{opacity:1;border-color:var(--pmk-gold)}
.pm-ba__streifen img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}

html.pm-ba-offen{overflow:hidden}

@media (max-width:600px){
  .pm-ba__buehne{padding:0 0 12px}
  .pm-ba__weiter{display:none}
  .pm-ba__kopf{padding:8px 8px 8px 12px}
  .pm-ba__zahl{flex:1 1 100%}
  .pm-ba__knoepfe{flex:1 1 100%;justify-content:space-between;gap:4px}
}