/* ===========================================================================
   LORO-X Videogalerie — Optik
   Site-CI: Markenblau #006aac (wie das .oa-*-System der uebrigen Tools),
   Flaechen weiss/hellgrau, 1px blaue Rahmen, 4px Radius.
   Bewusst OHNE Icons, Icon-Fonts, Emojis, Farbverlaeufe und Dark Mode.
   Mobile First: Grundlayout einspaltig, Breakpoints erweitern nach oben.
   Alle Klassen mit Praefix .vg- — kollidiert nicht mit dem Seitentemplate.
   =========================================================================== */

.vg-galerie{
  --vg-blau:#006aac;
  --vg-blau-dunkel:#00568a;
  --vg-blau-hell:#e8f2f9;
  --vg-hellgrau:#f8f9fa;
  --vg-rahmen:#dee2e6;
  --vg-text:#444;
  color:var(--vg-text);
}

/* ---------- Kopf und Take-aways ---------- */
.vg-takeaways{background:var(--vg-hellgrau);border:1px solid var(--vg-blau);border-radius:4px;
  padding:1rem 1.1rem;margin:0 0 1.4rem;}
.vg-takeaways p{margin:0 0 .6rem;}
.vg-takeaways ul{margin:0;padding-left:1.2rem;}
.vg-takeaways li{margin:.25rem 0;line-height:1.6;}

/* ---------- Steuerung: Suche und Filterchips ---------- */
.vg-steuerung{margin:0 0 1.4rem;}
.vg-suche-zeile{margin-bottom:.7rem;}
.vg-suche-label{display:block;font-weight:600;margin-bottom:.3rem;font-size:.95rem;}
.vg-suche{width:100%;padding:.55rem .7rem;font-size:1rem;font-family:inherit;color:var(--vg-text);
  background:#fff;border:1px solid var(--vg-rahmen);border-radius:4px;}
.vg-suche:focus{outline:none;border-color:var(--vg-blau);box-shadow:0 0 0 3px rgba(0,106,172,.2);}

/* Filterchips: ab 17 Kategorien wuerde eine umbrechende Leiste auf dem Handy
   den halben Bildschirm fuellen, bevor die erste Kachel sichtbar ist. Deshalb
   auf schmalen Schirmen EINE waagerecht scrollbare Zeile, ab Tablet umbrechend.
   Nur der Chip-Streifen scrollt, nie die Seite. */
.vg-chips{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;overflow-y:hidden;
  padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.vg-chips>.vg-chip{flex:0 0 auto;}
@media (min-width:768px){
  .vg-chips{flex-wrap:wrap;overflow-x:visible;padding-bottom:0;}
  .vg-chips>.vg-chip{flex:0 1 auto;}
}
.vg-chip{background:#fff;border:1px solid var(--vg-blau);color:var(--vg-blau);
  border-radius:4px;padding:6px 12px;font-size:.88rem;font-weight:600;font-family:inherit;
  cursor:pointer;line-height:1.2;}
.vg-chip:hover{background:var(--vg-blau-hell);}
.vg-chip-aktiv,.vg-chip-aktiv:hover{background:var(--vg-blau);color:#fff;}
.vg-chip:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,106,172,.35);}

.vg-trefferzeile{margin:.6rem 0 0;font-size:.9rem;color:#666;min-height:1.2em;}

/* ---------- Kategorie-Abschnitte und Kachelraster ---------- */
.vg-kategorie{margin:0 0 1.8rem;}
/* Ueberschriften bewusst OHNE Eigen-Styling - Schriftgroesse/Gewicht kommen aus dem
   Template (Betreiber-Regel 2026-07-28: niemals Template-Ueberschriften umstylen).
   Hier nur der blaue Trennstrich unter der Kategoriezeile (Layout, keine Typografie). */
.vg-kategorie h3{padding-bottom:.35rem;border-bottom:1px solid var(--vg-blau);}

.vg-raster{display:grid;grid-template-columns:1fr;gap:14px;align-items:start;}
@media (min-width:520px){ .vg-raster{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));} }

.vg-kachel{border:1px solid var(--vg-blau);border-radius:4px;background:#fff;
  padding:0 0 .7rem;display:flex;flex-direction:column;overflow:hidden;}
.vg-kachel[hidden]{display:none;}

/* Vorschaubild als Schaltflaeche — oeffnet das Modal */
.vg-kachel-bild{position:relative;display:block;width:100%;padding:0;border:0;
  border-bottom:1px solid var(--vg-rahmen);background:var(--vg-hellgrau);cursor:pointer;
  aspect-ratio:16/9;overflow:hidden;}
.vg-kachel-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.vg-kachel-bild:focus-visible{outline:2px solid var(--vg-blau);outline-offset:-2px;}

/* Neutrale CI-Flaeche, wenn kein lokales Vorschaubild vorliegt */
.vg-kachel-platzhalter{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  background:var(--vg-hellgrau);color:var(--vg-blau);font-weight:700;font-size:.95rem;
  border-bottom:1px solid var(--vg-rahmen);}

/* Textmarke statt Play-Symbol — die CI verbietet Icons */
.vg-play{position:absolute;left:0;bottom:0;background:var(--vg-blau);color:#fff;
  font-size:.78rem;font-weight:600;padding:3px 9px;border-radius:0 4px 0 0;letter-spacing:.02em;}
.vg-kachel-bild:hover .vg-play{background:var(--vg-blau-dunkel);}
.vg-dauer{position:absolute;right:6px;bottom:6px;background:#fff;color:var(--vg-text);
  border:1px solid var(--vg-rahmen);border-radius:4px;font-size:.78rem;padding:1px 6px;}

.vg-kachel-titel{font-size:.98rem;font-weight:700;line-height:1.35;margin:.7rem .7rem .25rem;}
.vg-kachel-kat{margin:0 .7rem .4rem;font-size:.82rem;color:#6c757d;}
.vg-kachel-text{margin:0 .7rem .5rem;font-size:.88rem;line-height:1.5;}

/* Transkript: im DOM vorhanden (indexierbar), standardmaessig zugeklappt */
.vg-transkript{margin:.2rem .7rem .5rem;border-top:1px solid var(--vg-rahmen);padding-top:.45rem;}
.vg-transkript>summary{cursor:pointer;font-size:.85rem;font-weight:600;color:var(--vg-blau);
  list-style:none;}
.vg-transkript>summary::-webkit-details-marker{display:none;}
.vg-transkript>summary::after{content:" +";font-weight:700;}
.vg-transkript[open]>summary::after{content:" –";}
.vg-transkript-quelle{margin:.4rem 0 .3rem;font-size:.76rem;color:#6c757d;}
.vg-transkript-text{font-size:.85rem;line-height:1.6;max-height:230px;overflow-y:auto;
  background:var(--vg-hellgrau);border:1px solid var(--vg-rahmen);border-radius:4px;padding:.5rem .6rem;}

.vg-kachel-link{margin:auto .7rem 0;padding-top:.5rem;font-size:.86rem;font-weight:600;
  color:var(--vg-blau);text-decoration:none;}
.vg-kachel-link:hover{color:var(--vg-blau-dunkel);text-decoration:underline;}

.vg-leer{background:var(--vg-hellgrau);border:1px solid var(--vg-rahmen);border-radius:4px;
  padding:.9rem 1rem;margin:0 0 1.4rem;}
.vg-kategorie[hidden]{display:none;}

/* ---------- FAQ und Fuss ---------- */
.vg-faq{margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--vg-rahmen);}
.vg-faq h2{font-size:1.25rem;margin:0 0 .8rem;}
.vg-faq h3{font-size:1rem;font-weight:700;margin:1rem 0 .3rem;}
.vg-faq p{margin:0;line-height:1.7;}
.vg-fuss{margin-top:1.4rem;padding-top:.8rem;border-top:1px solid var(--vg-rahmen);
  font-size:.85rem;color:#6c757d;}

/* ---------- Modal ---------- */
.vg-modal{position:fixed;inset:0;z-index:10000;display:flex;align-items:flex-start;
  justify-content:center;padding:12px;overflow-y:auto;}
.vg-modal[hidden]{display:none;}
.vg-modal-hg{position:fixed;inset:0;background:rgba(0,0,0,.55);}
.vg-modal-box{position:relative;z-index:1;width:100%;max-width:900px;margin:auto;
  background:#fff;border:1px solid var(--vg-blau);border-radius:4px;
  display:flex;flex-direction:column;max-height:calc(100vh - 24px);}
.vg-modal-kopf{display:flex;align-items:flex-start;gap:12px;justify-content:space-between;
  background:var(--vg-hellgrau);border-bottom:1px solid var(--vg-blau);padding:.6rem .8rem;}
.vg-modal-titel{margin:0;font-size:1.05rem;font-weight:700;line-height:1.35;color:var(--vg-text);}
.vg-modal-zu{flex:0 0 auto;background:#fff;border:1px solid var(--vg-blau);color:var(--vg-blau);
  border-radius:4px;padding:4px 12px;font-size:.85rem;font-weight:600;font-family:inherit;cursor:pointer;}
.vg-modal-zu:hover{background:var(--vg-blau);color:#fff;}

.vg-modal-inhalt{padding:.8rem;overflow-y:auto;}
.vg-modal-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:4px;overflow:hidden;}
.vg-modal-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.vg-modal-kat{margin:.6rem 0 .4rem;font-size:.85rem;color:#6c757d;}
.vg-modal-transkript{margin:.4rem 0;}
.vg-modal-transkript .vg-transkript{margin:0;border-top:0;padding-top:0;}
.vg-modal-transkript .vg-transkript-text{max-height:200px;}
.vg-modal-links{margin:.6rem 0 0;}

.vg-modal-fuss{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--vg-rahmen);background:var(--vg-hellgrau);padding:.55rem .8rem;}
.vg-modal-zaehler{font-size:.82rem;color:#6c757d;white-space:nowrap;}

.vg-btn-sekundaer{display:inline-block;background:#fff;border:1px solid var(--vg-blau);
  color:var(--vg-blau);border-radius:4px;padding:5px 13px;font-size:.85rem;font-weight:600;
  font-family:inherit;cursor:pointer;text-decoration:none;line-height:1.3;}
.vg-btn-sekundaer:hover{background:var(--vg-blau);color:#fff;text-decoration:none;}
.vg-btn-sekundaer[disabled]{opacity:.45;cursor:default;}
.vg-btn-sekundaer[disabled]:hover{background:#fff;color:var(--vg-blau);}

/* Seitenhintergrund nicht mitscrollen, solange das Modal offen ist */
body.vg-modal-offen{overflow:hidden;}

.vg-hinweis{background:var(--vg-hellgrau);border:1px solid #dc3545;border-radius:4px;padding:.8rem 1rem;}

@media (min-width:768px){
  .vg-galerie .vg-kopf h1{font-size:2rem;}
  .vg-modal{padding:24px;}
  .vg-modal-box{max-height:calc(100vh - 48px);}
  .vg-modal-titel{font-size:1.2rem;}
}