/* === VCTM Archiv – DJ/Personen-Overlap-Fix (nur Editionen 2015–2018 Spring) ===
   Reale Struktur: .row.thumbnails.speaker > .col-md-3 > .thumbnail > .circle > .circle-inner > img
   Ursache Overlap: Bootstrap-Float-Grid + .circle (350px) laeuft ueber die 293er-Spalte,
   .circle-inner hat variable Hoehe (350 quadratisch bis 465 Portraet) -> ungleich hohe
   Float-Items verhaken sich beim Umbruch. Genau 1 img je .circle-inner (laedt trotz //).
   Fix: Container -> Flex-Wrap; .col-Wrapper entfloaten (Bootstrap-Breite bleibt);
   .circle-inner auf feste runde 190x190-Flaeche (object-fit:cover) -> alle Kreise gleich hoch. */

/* Container: Float-Grid -> sauberes zentriertes Flex-Wrap-Raster */
.row.thumbnails.speaker{
  display:flex !important; flex-wrap:wrap; justify-content:center; align-items:flex-start;
}
.row.thumbnails.speaker::before,
.row.thumbnails.speaker::after{ content:none !important; display:none !important; }
.row.thumbnails.speaker > .clearfix{ display:none !important; }

/* Spalten-Wrapper: nicht floaten; Bootstrap-Breite (col-md-3=25% / col-sm-6=50%) bleibt */
.row.thumbnails.speaker > [class*="col-"]{
  float:none !important; margin-left:0 !important; margin-right:0 !important;
  display:flex; justify-content:center;
}

/* Kachel/Kreis: nicht breiter als die Spalte, zentriert, keine Positionstricks */
.thumbnails .circle{
  position:static !important; float:none !important; left:auto !important; top:auto !important;
  transform:none !important; width:auto !important; max-width:100%; margin:0 auto !important;
}
/* feste runde Bildflaeche -> alle Kreise gleich hoch => kein Overlap mehr */
.thumbnails .circle-inner{
  position:relative !important; width:190px; height:190px; margin:0 auto 14px;
  border-radius:50%; overflow:hidden;
}
.thumbnails .circle-inner img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  display:block; border-radius:50%;
}
/* Schutz: evtl. zweite (Lazy-/noscript-)Bilddublette je Kreis ausblenden (aktuell 1 img) */
.thumbnails .circle-inner img + img{ display:none !important; }

/* Responsiv: unter sm eine Spalte, damit nichts gequetscht wird */
@media (max-width:560px){ .row.thumbnails.speaker > [class*="col-"]{ width:100% !important; } }

/* === Phase G === */
/* Leere/kaputte Bildreferenzen (Mirror-Platzhalter) -> sauberer leerer grauer Kreis */
.thumbnails .circle-inner img[src$="index.html"],
.thumbnails .circle-inner img[src=""]{ display:none !important; }
.thumbnails .circle-inner{ background:#e9e9e9; }

/* Roter Leerblock (nur vctm2015): .color-Zeile ohne Inhalt -> Fuellfarbe kollabieren.
   Klasse per Diagnose eindeutig identifiziert, kommt nur auf vctm2015 vor. */
.vc_custom_1428393254254{
  background-color:transparent !important; background-image:none !important;
  min-height:0 !important; padding:0 !important;
}

/* === Phase H === */
/* Organizer-Kreise haben eine .media-Zwischenebene (DJs nicht) → sie muss den Kreis füllen */
.thumbnails .circle-inner .media{
  display:block !important; width:100% !important; height:100% !important;
  overflow:hidden; border-radius:50%;
}
.thumbnails .circle-inner .media img{
  width:100% !important; height:100% !important; object-fit:cover !important;
  object-position:center top; display:block;
}

/* === Phase I === */
/* Personen-Spalten einheitlich 4/Reihe: Organizer (col-md-2 + offset) an DJs (col-md-3) angleichen */
.thumbnails.speaker > [class*="col-"]{
  width:25% !important; max-width:25% !important; flex:0 0 25% !important;
  margin-left:0 !important; margin-right:0 !important; float:none !important;
  padding:0 10px !important; box-sizing:border-box;
}
@media (max-width:900px){ .thumbnails.speaker > [class*="col-"]{ width:50% !important; max-width:50% !important; flex-basis:50% !important; } }
@media (max-width:560px){ .thumbnails.speaker > [class*="col-"]{ width:100% !important; max-width:100% !important; flex-basis:100% !important; } }
/* Kreis nicht mehr über Prozentbreite steuern – die Spalte macht jetzt die Reihe */
.thumbnails .circle{ width:auto !important; }