/* ==== Video Galerie – natürliches Seitenverhältnis ==== */
:root{
  --vg-accent:#C93264;
  --vg-accent-ink:#fff;
  --vg-border:#e7e7ea;
  --vg-bg:#fff;
  --vg-card-radius:16px;
  --vg-shadow:0 1px 2px rgba(0,0,0,.04);
  --vg-shadow-hover:0 6px 16px rgba(0,0,0,.12);
  
}

/* Grid / Card */
.vg-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;
}
.vg-card{
  background:var(--vg-bg);
  border:1px solid var(--vg-border);
  border-radius:var(--vg-card-radius);
  box-shadow:var(--vg-shadow);
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s ease;
  cursor:pointer;
    display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* Thumbnail bleibt oben */
.vg-card .vg-thumb{
  margin-bottom: 8px;
}
.vg-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--vg-shadow-hover);
  border-color: color-mix(in srgb, var(--vg-accent) 35%, var(--vg-border));
}
.vg-card h3{
  flex: 0 0 4em;   /* z. B. Höhe für max. 2 Zeilen */
  font-size: 1rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;   /* 2 Zeilen sichtbar */
  -webkit-box-orient: vertical;
  margin-left: 2px;
}

/* Thumbnail – KEIN 16:9-Wrapper mehr */
.vg-thumb{
  position: relative;
  background: #f7f8fa;   /* optional */
  overflow: visible;     /* WICHTIG: nicht hidden */
  padding: 0;            /* falls irgendwo gesetzt war */
}

/* 16:9-Wrapper auf jeden Fall entfernen */
.vg-thumb::before{ content: none !important; }

/* Medien: natürlich skalieren, ohne Zuschnitt */
.vg-thumb img,
.vg-thumb video,
.vg-thumb iframe{
  position: static !important;   /* nicht absolute */
  display: block;
  width: 100%;
  height: auto !important;       /* Portrait bleibt Portrait */
  object-fit: contain !important;/* nichts abschneiden */
}


/* Toolbar/Filter/Buttons (optional) */
.vg-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.vg-toolbar .vg-search{
  flex: 0 0 220px !important;   /* stoppt flex-grow vom Theme */
  width: 220px !important;      /* keine Vollbreite */
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--vg-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Mehr Luft, wenn nur die Suche sichtbar ist (keine Filter) */
.vg-toolbar--search-only{ margin-bottom:28px; }
@media (min-width:768px){
  .vg-toolbar--search-only{ margin-bottom:32px; }
}
@media (max-width: 480px){
  .vg-toolbar .vg-search{
    flex-basis: 100% !important;
    width: 100% !important;     /* auf Mobil volle Breite */
  }
}

.vg-search:focus{ border-color:var(--vg-accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--vg-accent) 20%, transparent); }
.vg-pill{
  display:inline-block; padding:8px 12px; border:1px solid var(--vg-border);
  border-radius:999px; cursor:pointer; user-select:none; background:#fff;
  transition:all .15s ease;
}
.vg-pill:hover{ border-color:var(--vg-accent); }
.vg-pill.active{ background:var(--vg-accent); color:var(--vg-accent-ink); border-color:var(--vg-accent); }

.vg-pagination{ display:flex; gap:8px; justify-content:center; margin-top:16px; }
.vg-btn{ padding:9px 12px; border:1px solid var(--vg-border); border-radius:10px; background:#fff; cursor:pointer; }
.vg-btn:hover{ border-color:var(--vg-accent); }
.vg-btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* Lightbox – natürliche Höhe */
.vg-lightbox{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6); z-index:99999; padding:24px;
}
.vg-lightbox.is-open{ display:flex; }
.vg-lightbox__inner{
  width:min(100%, 1100px); max-height:90vh; background:#000;
  border-radius:14px; overflow:auto; position:relative; /* auto für Scroll bei sehr hohen Inhalten */
}
.vg-lightbox__body{ height:auto; padding:0; display:flex; align-items:center; justify-content:center; }

.vg-lightbox__body iframe,
.vg-lightbox__body video{
  position: static;
  width: 100%;
  height: auto;
  max-height: 80vh;  /* passt ins Viewport ohne Zuschnitt */
  object-fit: contain;
}
.vg-lightbox__close{
  position:absolute;
  top:8px; right:8px;
  width:40px; height:40px;
  border:0; padding:0;
  border-radius:999px;
  background:#C93264;          /* deine Akzentfarbe */
  color:#fff;                   /* steuert das SVG via currentColor */
  display:flex;                 /* mittig ausrichten */
  align-items:center;
  justify-content:center;
  line-height:1;                /* kein Versatz durch Zeilenhöhe */
  cursor:pointer;
  z-index:2;                    /* über dem Video/Embed */
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.vg-lightbox__close svg{ display:block; }
.vg-lightbox__close:hover{ filter:brightness(1.05); }

.vg-empty{
  grid-column: 1 / -1;
  text-align: center;
  color: #777;
  padding: 24px 8px;
  font-size: 15px;
}

.vg-filters, .vg-tags {
	padding-bottom: 15px;
}

.vg-lightbox__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:0; border-radius:999px;
  background:#C93264; color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25); cursor:pointer; z-index:2; opacity:.95;
}
.vg-lightbox__nav:hover{ filter:brightness(1.05); }
.vg-lightbox__prev{ left:8px; }
.vg-lightbox__next{ right:8px; }
.vg-lightbox__nav[disabled]{ opacity:.35; cursor:not-allowed; }