/* Bildrondell — EINE Bildergalerie fuer den ganzen Shop.
   ------------------------------------------------------------------------
   Startseite (index.html: Branchen-Rondell + Life-Rondell) UND Schaufenster
   (produkte.html / produkt.html: Produktfenster) zeigen dieselbe Galerie.
   Deshalb steht sie HIER — einmal.

   Vorher lagen `.shots` & Co. inline in index.html, und die Mechanik war dort
   sogar ZWEIMAL gebaut (Branchen und Life, fast identisch). Das ist genau die
   Drift, die die Regel meint: zwei Staende, die auseinanderlaufen.

   Setzt die Farbvariablen der Seite voraus (--panel, --panel2, --line, --line2,
   --ink, --muted, --muted2, --cyan) — index.html und produkte.css fuehren
   dieselben Namen mit denselben Werten. Die Akzentfarbe kommt je Rondell als
   `--bc`. Das Verhalten steht in `ausschnitte.js`. */

/* --- Bildrondell: echte Demo-Ansichten je Branche, als Branchen-Schaufenster --- */
.shots{margin-top:34px}
.shots-head{text-align:center;max-width:640px;margin:0 auto 18px}
.shots-head h4{font-family:"Space Grotesk",sans-serif;font-size:20px;color:var(--ink);font-weight:700;margin:0 0 6px;letter-spacing:.01em}
.shots-head h4 b{color:var(--bc,var(--cyan))}
.shots-sub{font-size:13.5px;color:var(--muted);margin:0;line-height:1.5}
.shotrail{position:relative}
.shottrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.shottrack::-webkit-scrollbar{display:none}
.shot{flex:0 0 min(600px,80%);margin:0;scroll-snap-align:center;border:1px solid var(--line2);border-radius:16px;overflow:hidden;
  background:var(--panel);cursor:zoom-in;position:relative;box-shadow:0 18px 50px rgba(0,0,0,.4);transition:box-shadow .25s,transform .25s}
.shot:hover{box-shadow:0 24px 66px rgba(0,0,0,.5),0 0 0 1px var(--bc,var(--cyan));transform:translateY(-2px)}
/* Branchen-Kopf: macht auf einen Blick klar, WELCHE Branche man sieht */
.shothead{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,color-mix(in srgb,var(--bc) 18%,transparent),transparent 70%),var(--panel2)}
.shotemblem{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:18px;
  background:color-mix(in srgb,var(--bc) 20%,transparent);border:1px solid color-mix(in srgb,var(--bc) 45%,transparent)}
.shothead-t{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.shothead-t b{font-family:"Space Grotesk",sans-serif;font-size:15px;color:var(--bc,var(--ink))}
.shothead-t small{font-size:12px;color:var(--muted2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shotmood{margin-left:auto;flex:none;font-size:10.5px;letter-spacing:.03em;color:var(--muted2);border:1px solid var(--line);
  border-radius:20px;padding:3px 10px;white-space:nowrap}
.shotimg{position:relative;line-height:0}
.shotimg img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shotsub{position:absolute;left:0;right:0;bottom:0;padding:22px 15px 11px;font-size:12.5px;color:#eef4fd;line-height:1.4;
  background:linear-gradient(transparent,rgba(4,8,16,.9))}
/* Kopf-Varianten passend zur Design-Handschrift der Branche */
.shots[data-mood="light"] .shothead{background:linear-gradient(90deg,#eaf3f8,#f6f9fb)}
.shots[data-mood="light"] .shothead-t b{color:#256189}
.shots[data-mood="light"] .shothead-t small,.shots[data-mood="light"] .shotmood{color:#5f7688}
.shots[data-mood="light"] .shotmood{border-color:#d3e0ea}
.shots[data-mood="light"] .shotemblem{background:#dcecf5;border-color:#bcd7e6}
.shots[data-mood="matte"] .shothead-t b{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
.shots[data-mood="neon"] .shot:hover{box-shadow:0 24px 66px rgba(0,0,0,.5),0 0 26px rgba(255,61,242,.3)}
.shotnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(8,14,26,.9);color:var(--ink);cursor:pointer;font-size:19px;line-height:1;display:grid;place-items:center;z-index:2}
.shotnav.prev{left:-10px}.shotnav.next{right:-10px}
.shotnav:hover{border-color:var(--bc,var(--cyan));color:var(--bc,var(--cyan))}
.shotdots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.shotdots i{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer;transition:background .2s}
.shotdots i.on{background:var(--bc,var(--cyan))}
.shotov{position:fixed;inset:0;background:rgba(3,6,12,.93);display:none;place-items:center;z-index:220;padding:22px;cursor:zoom-out}
.shotov.open{display:grid}
.shotov img{max-width:min(1600px,96vw);max-height:92vh;border-radius:12px;border:1px solid var(--line2);box-shadow:0 40px 120px rgba(0,0,0,.6)}
/* Kein „kaputtes Bild"-Platzhalter (graue Leiste) mehr: ein <img> ohne bzw. mit
   leerer Quelle wird nie gerendert. Das Lightbox-Bild (#shotov img) bekommt seine
   Quelle erst beim Öffnen per JS — dann greift die Regel nicht mehr und es zeigt. */
img:not([src]),img[src=""]{display:none!important}

/* --- Hochformat -----------------------------------------------------------
   Nicht jede App ist ein Breitbild. MediTune liegt als Handy-Aufnahme vor
   (800x1720); die 16:10-Regel oben wuerde davon einen Streifen abschneiden.
   `data-form="hoch"` stellt die Folien schmal und zeigt das Bild GANZ. */
.shots[data-form="hoch"] .shot{flex:0 0 min(300px,62%)}
.shots[data-form="hoch"] .shotimg img{aspect-ratio:10/21;object-fit:contain;background:#0a1220}
.shots[data-form="hoch"] .shotsub{padding:18px 12px 10px;font-size:11.5px}