/* ============================================================
   galerie-nw.css – Integration der Bildergalerie ins NW-Layout
   Ergänzt galerie/assets/css/galerie.css (geladen via extraHead)
   ============================================================ */

/* ── NW-Navbar: Bootstrap + galerie.css Overrides zurücksetzen ─
   Bootstrap setzt display:flex auf .navbar → verschiebt Inhalt.
   galerie.css setzt grünen Gradient auf nav.navbar → falsche Farbe.
   Beides mit !important zurücksetzen, damit der NW-Nav korrekt bleibt. */
nav.navbar {
  background:    #1e2b2b !important;
  border-bottom: 1px solid #2a3a2a !important;
  box-shadow:    none !important;
  height:        62px !important;
  padding:       0 !important;
  display:       block !important;    /* Bootstrap würde hier flex setzen */
  position:      sticky !important;
  top:           0 !important;
  z-index:       100 !important;
  flex-wrap:     unset !important;
  justify-content: unset !important;
  align-items:   unset !important;
}

/* ── Body-Flex für Footer-am-Ende ──────────────────────────── */
body {
  display:         flex;
  flex-direction:  column;
  min-height:      100vh;
}

.galerie-main {
  flex: 1 0 auto;
}

/* ── NW-Navbar: Bootstrap Reboot-Resets für ul/li ─────────────
   Bootstrap setzt margin-bottom:1rem + padding-left:2rem auf ul,
   was die Nav-Items vertikal verschiebt. */
nav.navbar .nav-list {
  margin-bottom: 0 !important;
  padding-left:  0 !important;
  margin-top:    0 !important;
}

nav.navbar .nav-list > li {
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}

/* ── Suchfeld in der Kategorieleiste ───────────────────────── */
.galerie-search-input {
  min-width: 160px;
  max-width: 260px;
  border-color: rgba(45, 106, 79, .35);
}

.galerie-search-input:focus {
  border-color: var(--accent, #7aaa50);
  box-shadow: 0 0 0 0.2rem rgba(122, 170, 80, .25);
}

/* ── GLightbox – grüner Rahmen um Bild und Beschreibung ─────── */
.glightbox-container .gslide-media {
  border-top:    3px solid #7aaa50 !important;
  border-left:   3px solid #7aaa50 !important;
  border-right:  3px solid #7aaa50 !important;
  border-bottom: none            !important;
  border-radius: 8px 8px 0 0    !important;
  overflow:      hidden          !important;
  box-shadow:    0 0 28px rgba(122, 170, 80, .3);
  box-sizing:    border-box      !important;
}

.glightbox-container .gslide-media img,
.glightbox-container .gslide-media video {
  border:     none !important;
  box-shadow: none !important;
  display:    block;
}

.glightbox-container .gslide-description {
  border-left:   3px solid #7aaa50 !important;
  border-right:  3px solid #7aaa50 !important;
  border-bottom: 3px solid #7aaa50 !important;
  border-top:    none              !important;
  border-radius: 0 0 8px 8px      !important;
  background:    #f4faf5           !important;
  box-shadow:    inset 0 2px 0 rgba(122, 170, 80, .35);
  overflow:      hidden            !important;
}

.glightbox-clean .gdesc-inner,
.gdesc-open .gdesc-inner {
  padding: 6px 14px !important;
}

.glightbox-container .gslide-description p,
.glightbox-container .gslide-description p:last-child {
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}

.glightbox-clean .gslide-title {
  color:         #1a3d2e !important;
  font-weight:   600     !important;
  font-size:     0.86rem !important;
  margin-bottom: 0       !important;
  margin-top:    0       !important;
  line-height:   1.3     !important;
}

.glightbox-clean .gslide-desc {
  color:       #2D6A4F !important;
  font-size:   0.79rem !important;
  line-height: 1.3     !important;
  margin:      0       !important;
}

.gclose {
  opacity: 1 !important;
}

.gclose svg {
  fill: #fff !important;
}

/* ── GLightbox – Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  .glightbox-mobile .glightbox-container .ginner-container {
    flex-direction:  column      !important;
    align-items:     center      !important;
    justify-content: flex-start  !important;
    overflow-y:      auto        !important;
    height:          100%        !important;
  }
  .glightbox-mobile .glightbox-container .gslide-media {
    flex:        0 0 auto !important;
    width:       100%     !important;
    max-width:   100vw    !important;
    border-top:  3px solid #7aaa50 !important;
    border-left: 3px solid #7aaa50 !important;
    border-right:3px solid #7aaa50 !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    box-sizing:  border-box !important;
  }
  .glightbox-mobile .glightbox-container .gslide-image img {
    max-height: 62vh     !important;
    width:      auto     !important;
    max-width:  100vw    !important;
    display:    block    !important;
    margin:     0 auto   !important;
  }
  .glightbox-mobile .glightbox-container .gslide-description {
    position:   relative !important;
    bottom:     auto     !important;
    left:       auto     !important;
    right:      auto     !important;
    width:      100%     !important;
    max-width:  100vw    !important;
    height:     auto     !important;
    max-height: none     !important;
    border-left:   3px solid #7aaa50 !important;
    border-right:  3px solid #7aaa50 !important;
    border-bottom: 3px solid #7aaa50 !important;
    border-top:    none              !important;
    border-radius: 0 0 8px 8px      !important;
    background:    #f4faf5           !important;
    padding:       0                 !important;
    box-sizing:    border-box        !important;
    overflow:      hidden            !important;
  }
  .glightbox-mobile .glightbox-container .gdesc-inner {
    padding: 5px 12px 6px !important;
  }
  .glightbox-mobile .glightbox-container .gslide-title {
    color:         #1a3d2e !important;
    font-size:     0.82rem !important;
    font-weight:   600     !important;
    margin-bottom: 0       !important;
    line-height:   1.2     !important;
  }
  .glightbox-mobile .glightbox-container .gslide-desc {
    color:       #2D6A4F !important;
    font-size:   0.75rem !important;
    line-height: 1.2     !important;
    margin:      0       !important;
  }
}

/* ── Video-Overlay & Drag-Window ────────────────────────────── */
.video-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(80, 80, 80, .72);
  z-index:    1080;
}

.video-window {
  position:      fixed;
  background:    #0d1a12;
  border-radius: 12px;
  border:        3px solid #7aaa50;
  box-shadow:    0 24px 80px rgba(0, 0, 0, .85),
                 0 0 30px rgba(122, 170, 80, .25);
  display:       flex;
  flex-direction:column;
  min-width:     320px;
  min-height:    220px;
  overflow:      hidden;
  will-change:   transform;
}

.video-win-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  background:      #1a3d2e;
  padding:         9px 14px;
  cursor:          move;
  border-radius:   9px 9px 0 0;
  flex-shrink:     0;
  border-bottom:   2px solid #2D6A4F;
}

.video-win-title-wrap {
  display:       flex;
  align-items:   center;
  color:         #e8f5ec;
  font-size:     .9rem;
  font-weight:   600;
  overflow:      hidden;
  white-space:   nowrap;
  text-overflow: ellipsis;
  gap:           6px;
}

.video-win-controls {
  display:    flex;
  gap:        6px;
  flex-shrink:0;
  margin-left:12px;
}

.video-win-btn {
  background:    rgba(122, 170, 80, .15);
  border:        1px solid rgba(122, 170, 80, .35);
  border-radius: 6px;
  color:         #b8d4bb;
  width:         30px;
  height:        30px;
  display:       flex;
  align-items:   center;
  justify-content:center;
  cursor:        pointer;
  transition:    background .2s, color .2s, border-color .2s;
  font-size:     .85rem;
  flex-shrink:   0;
}

.video-win-btn:hover {
  background:   rgba(122, 170, 80, .35);
  border-color: #7aaa50;
  color:        #fff;
}

.video-win-close-btn:hover {
  background:   #c0392b;
  border-color: #c0392b;
  color:        #fff;
}

.video-win-body {
  flex:       1;
  padding:    6px;
  overflow:   hidden;
  min-height: 0;
  display:    flex;
  align-items:stretch;
}

#videoContainer {
  flex:          1;
  width:         100%;
  height:        100%;
  background:    #000;
  border-radius: 6px;
  overflow:      hidden;
}

#videoContainer video {
  width:      100%;
  height:     100%;
  display:    block;
  background: #000;
}

/* Resize-Handles */
.rz {
  position:   absolute;
  z-index:    10;
  background: transparent !important;
}
.rz-n  { top: 0;      left: 8px;   right: 8px;   height: 6px;  cursor: n-resize;  }
.rz-s  { bottom: 0;   left: 8px;   right: 8px;   height: 6px;  cursor: s-resize;  }
.rz-w  { left: 0;     top: 8px;    bottom: 8px;  width: 6px;   cursor: w-resize;  }
.rz-e  { right: 0;    top: 8px;    bottom: 8px;  width: 6px;   cursor: e-resize;  }
.rz-nw { top: 0;      left: 0;     width: 14px;  height: 14px; cursor: nw-resize; }
.rz-ne { top: 0;      right: 0;    width: 14px;  height: 14px; cursor: ne-resize; }
.rz-sw { bottom: 0;   left: 0;     width: 14px;  height: 14px; cursor: sw-resize; }
.rz-se {
  bottom: 0; right: 0; width: 14px; height: 14px; cursor: se-resize;
  background: linear-gradient(135deg, transparent 55%, rgba(122, 170, 80, .4) 55%) !important;
}

.video-window.maximized {
  border-radius: 0 !important;
  border-width:  0 !important;
}

.video-window.maximized .rz { display: none; }

.video-window.is-dragging,
.video-window.is-resizing {
  opacity:      .96;
  border-color: #7f9a7b;
  box-shadow:   0 32px 100px rgba(0, 0, 0, .95),
                0 0 40px rgba(122, 170, 80, .5);
}

@media (max-width: 576px) {
  .video-window {
    position:      fixed    !important;
    left:          0        !important;
    top:           0        !important;
    width:         100vw    !important;
    height:        100dvh   !important;
    border-radius: 0        !important;
    border-width:  0        !important;
  }
}