/* ============================================================================
   PAPITON - Galerie und Bewertungs-Medien - CSS               (Stand 07/2026)

   Teil 1  Produktgalerie (Track, Thumbnails, Punkteleiste)   - ersetzt MagicZoom
   Teil 2  Lightbox (gemeinsam fuer Galerie und Bewertungen)
   Teil 3  Upload-Bereich im Bewertungsformular
   Teil 4  Anzeige der Kundenmedien unter den Bewertungen

   Nutzt --FGruen aus papiton25.css.
   ============================================================================ */

/* ---- Hauptanzeige / Track ------------------------------------------------- */
#MZCon { position: relative; }
.galTrack { position: relative; }

/* Desktop-Grundzustand: nur das aktive Medium sichtbar, kein Scroll */
.galItem { display: none; position: relative; cursor: zoom-in; }
.galItem.act { display: block; }
.galItem img, .galItem video { width: 100%; height: auto; display: block; }
.galVideo { cursor: pointer; }

/* Play-Icon (Overlay) */
.galPlay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(0,0,0,.55); pointer-events: none;
}
.galPlay::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent #fff;
}

/* ---- Thumbnails (Desktop) ------------------------------------------------- */
.galThumb { position: relative; display: block; cursor: pointer; }
.galThumbAct img, .galThumbAct .galThumbVid { outline: 2px solid var(--FGruen); outline-offset: -2px; }
.galThumbVid { width: 121px; height: auto; display: block; border: 1px solid #ccc; border-radius: 1px; }
.galVideoThumb .galPlay { width: 24px; height: 24px; }
.galVideoThumb .galPlay::after { border-width: 5px 0 5px 8px; }

/* ---- Punkteleiste (nur Mobil) -------------------------------------------- */
.galDots { display: none; }

/* ---- Mobil: Wisch-Galerie ------------------------------------------------- */
@media (max-width: 800px) {
  .galTrack {
    display: flex; overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .galTrack::-webkit-scrollbar { display: none; }
  .galItem { display: block; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; cursor: pointer; }

  .galDots {
    display: flex; justify-content: center; gap: 7px;
    position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2;
  }
  .galDots span {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,0,0,.28); cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .galDots span.act { background: #000; transform: scale(1.2); }
  .galDots span.vid { border-radius: 2px; }   /* Video-Punkt eckig -> unterscheidbar */
}

/* ============================================================================
   LIGHTBOX
   ============================================================================ */
body.galLBopen { overflow: hidden; }

.galLB {
  position: fixed; inset: 0; z-index: 1000000;
  background: rgba(0,0,0,.92);
  display: none; align-items: center; justify-content: center;
}
.galLB.on { display: flex; }

.galLBstage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.galLBimg {
  max-width: 98vw; max-height: 96vh;   /* fuellt grosse Fenster besser aus */
  transform-origin: center center;
  transition: transform .05s linear;
  cursor: zoom-in;
  /* Bild aus dem Browser ziehbar. user-select:none kann das Ziehen in
     Chrome blockieren, deshalb hier NICHT gesetzt. */
  -webkit-user-drag: element;
}
.galLBimg.zoomed { cursor: grab; }
.galLBvideo { max-width: 96vw; max-height: 92vh; background: #000; }

.galLBcount {
  position: absolute; bottom: 14px; left: 0; right: 0;
  text-align: center; color: #fff; font-size: 14px; pointer-events: none;
}

.galLBbtn {
  position: absolute; z-index: 2; border: none; cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0,0,0,.4);
}
.galLBbtn:hover { background: rgba(0,0,0,.65); }

.galLBclose { top: 14px; right: 14px; }
.galLBclose::before, .galLBclose::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; background: #fff;
}
.galLBclose::before { transform: translate(-50%, -50%) rotate(45deg); }
.galLBclose::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.galLBprev, .galLBnext { top: 50%; transform: translateY(-50%); }
.galLBprev { left: 14px; }
.galLBnext { right: 14px; }
.galLBprev::before, .galLBnext::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 11px; height: 11px; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.galLBprev::before { transform: translate(-40%, -50%) rotate(-135deg); }
.galLBnext::before { transform: translate(-60%, -50%) rotate(45deg); }

.galLB.single .galLBprev,
.galLB.single .galLBnext,
.galLB.single .galLBcount { display: none; }

@media (max-width: 800px) {
  .galLBbtn { width: 40px; height: 40px; }
}


/* ############################################################################
   TEIL 3 + 4 - BEWERTUNGS-MEDIEN
   ############################################################################ */

/* =========================================================================
   TEIL 3 - Upload-Bereich im Bewertungsformular
   ========================================================================= */
#bewUpl {
  margin: 14px 0 4px 0;
  padding: 12px;
  border: 1px dashed #c4c4c4;
  border-radius: 4px;
  background: #fafafa;
  transition: border-color .15s, background .15s;
}
#bewUpl.bewUplDrag {
  border-color: var(--FGruen);
  background: #f2f6f2;
}

.bewUplKopf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* Das echte <input type="file"> wird versteckt, das <label> ist der Button.
   Nicht display:none verwenden - sonst ist es fuer Screenreader weg. */
#bewUpl input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.bewUplBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--FGruen);
  border-radius: 3px;
  background: #fff;
  color: var(--FGruen);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.bewUplBtn:hover { background: var(--FGruen); color: #fff; }

/* Kamera-Symbol aus CSS - kein Bild noetig */
.bewUplBtn::before {
  content: "";
  width: 15px; height: 12px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  position: relative;
  box-sizing: border-box;
}
.bewUplBtn::after {
  content: "";
  width: 5px; height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  margin-left: -11px;
  box-sizing: border-box;
}

#bewUpl.bewUplVoll .bewUplBtn {
  opacity: .45;
  pointer-events: none;
}

.bewUplHint {
  font-size: 12px;
  color: #777;
  line-height: 1.4;
}

/* VIP-Punkte-Hinweis (nur fuer eingeloggte Kunden, per JS eingeblendet) */
.bewUplVip {
  margin: 8px 0 2px 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--FGruen);
}
.bewUplVip::before {
  content: "★ ";
  color: var(--FVIP2, #aa9863);
}

/* Hinweis Nutzerrechte / Social Media */
.bewUplRecht {
  margin: 10px 0 2px 0;
  font-size: 11px;
  color: #888;
  line-height: 1.45;
}

.bewUplMsg {
  font-size: 13px;
  margin-top: 8px;
  min-height: 1px;
}
.bewUplMsg.bewUplFehler { color: #c00; }

/* ---- Kachelliste ---- */
.bewUplList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.bewUplList:empty { margin-top: 0; }

.bewUplIt {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 3px;
  overflow: hidden;
  background: #e8e8e8;
  flex: 0 0 auto;
}
.bewUplIt img,
.bewUplIt video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* HEIC o.ae.: Browser kann nicht rendern -> Ersatzdarstellung */
.bewUplIt.bewUplKeinVor::before {
  content: "Datei";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #888;
}

/* Play-Symbol auf Video-Kacheln (galPlay kommt aus papiton-galerie.css) */
.bewUplIt .galPlay { width: 30px; height: 30px; }
.bewUplIt .galPlay::after { border-width: 6px 0 6px 9px; }

/* Fortschrittsbalken */
.bewUplBar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0,0,0,.18);
}
.bewUplBar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--FGruen);
  transition: width .15s linear;
}
.bewUplIt.bewUplOk  .bewUplBar { opacity: 0; transition: opacity .4s .3s; }
.bewUplIt.bewUplErr .bewUplBar i { background: #c00; width: 100% !important; }
.bewUplIt.bewUplErr { outline: 2px solid #c00; outline-offset: -2px; }

/* fertig hochgeladen -> gruener Haken oben links */
.bewUplIt.bewUplOk::after {
  content: "";
  position: absolute; left: 6px; top: 5px;
  width: 6px; height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  filter: drop-shadow(0 0 2px rgba(0,0,0,.7));
}

/* Entfernen-Knopf */
.bewUplDel {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  cursor: pointer;
  box-sizing: border-box;
}
.bewUplDel:hover { background: rgba(0,0,0,.8); }
.bewUplDel::before,
.bewUplDel::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 1.5px;
  background: #fff;
}
.bewUplDel::before { transform: translate(-50%,-50%) rotate(45deg); }
.bewUplDel::after  { transform: translate(-50%,-50%) rotate(-45deg); }


/* Absende-Knopf waehrend des Sendens sperren.
   #btBewAb ist ein <div>, deshalb ueber eine Klasse statt ueber :disabled. */
#btBewAb.bewAbBusy {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}


/* =========================================================================
   TEIL 4 - Anzeige der Kundenmedien unter den Bewertungen
   ========================================================================= */
.bewMed {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 4px 0;
}
.bewMed a {
  position: relative;
  display: block;
  width: 96px; height: 96px;
  border-radius: 3px;
  overflow: hidden;
  background: #eee;
  cursor: zoom-in;
  flex: 0 0 auto;
}
.bewMed a img,
.bewMed a video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .2s;
}
.bewMed a:hover img,
.bewMed a:hover video { transform: scale(1.06); }
/* Video-Kachel: <video> zeigt den ersten Frame, keine Steuerelemente */
.bewMed a[data-type="video"] video { pointer-events: none; }

.bewMed a[data-type="video"] { cursor: pointer; }
.bewMed a[data-type="video"]::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.8));
}

/* Hinweiszeile "Foto vom Kunden" */
.bewMedHint {
  font-size: 11px;
  color: #888;
  margin: 2px 0 0 0;
}

@media (max-width: 800px) {
  .bewUplIt { width: 72px; height: 72px; }
  .bewMed a { width: 84px; height: 84px; }
}