/* --- Konfiguration --- */
:root { 
  --leitwert-orange: #F28500; /* Deine Orange-Farbcode */
  --leitwert-blau: #122563; /* Dein Blau-Farbcode */
} 

/* --- 1. ABSTÄNDE, LINIEN & BREITEN-FIX (Bilder kantenbündig) --- */

/* **KERNLÖSUNG: Schränke den Thumbnail-Container auf die Bildbreite ein.** */
.gdlr-core-portfolio-thumbnail {
    /* Setzt das Element auf Inline-Block, damit es sich auf die Breite seines Inhalts (des Bildes) zusammenzieht */
    display: inline-block !important; 
    /* Zentriert den Inline-Block-Container innerhalb der breiteren Spalte */
    text-align: center !important; 
    /* Setzt Ränder auf Null, um jeglichen internen Abstand zu eliminieren */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Vorherige Regeln beibehalten */
    overflow: hidden; 
    position: relative; 
    transition: transform 0.3s ease-in-out; 
    border: none !important; /* Entfernt Ränder am Container */
}

/* Aggressive Entfernung aller Spaltenabstände */
.gdlr-core-portfolio-item-column,
.gdlr-core-portfolio-item-holder .gdlr-core-column,
.gdlr-core-portfolio-item-holder .gdlr-core-portfolio-item {
    /* Setzt Padding/Margin auf der Spalten-Ebene auf Null */
    padding: 0 !important;
    margin: 0 !important;
    /* Erzwingt eine Breite, die genau in die Zeile passt (für 3 Spalten) */
    width: 33.333333% !important; 
    /* Hilft, alte Spaltensysteme kantenbündig zu machen */
    float: left !important; 
}

/* Entfernt den Hintergrund des umgebenden Row-Containers, der als Linie sichtbar ist */
.gdlr-core-portfolio-item-holder {
    background-color: transparent !important;
    margin: 0 !important;
}

/* Bild-Responsivität und Zentrierung innerhalb des geschrumpften Thumbnails */
.gdlr-core-portfolio-item img {
    max-width: 100%; 
    height: auto; 
    display: block; 
    margin: 0 auto; 
    transition: transform 0.3s ease-in-out; 
}


/* --- 2. Overlay und Text: Standard-Zustand (Immer sichtbar) --- */

/* Das Overlay muss absolut sein, um die volle Fläche des geschrumpften Thumbnails abzudecken */
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail .gdlr-core-portfolio-overlay,
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail .gdlr-core-portfolio-overlay-content{
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: background 0.3s ease, transform 0.3s ease-in-out, color 0.3s ease; 
  position: absolute; 
  top: 0; left: 0; right: 0; bottom: 0; 
  width: 100%; /* Deckt die 100% Breite des nun bildgroßen Thumbnails ab */
  height: 100%;
}

/* Standard-Hintergrund-Overlay (leicht gräulich/dunkel) */
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail .gdlr-core-portfolio-overlay{
  background: rgba(0,0,0,0.28) !important; 
}

/* Text im Overlay zentrieren (Vertikal und Horizontal) */
.gdlr-core-portfolio-overlay-content {
  display: flex; 
  align-items: center; 
  justify-content: center; 
  text-align: center;
  box-sizing: border-box; 
  padding: 24px; 
  background: transparent !important; 
}

/* --- Standard-Textfarbe: WEISS --- */
.gdlr-core-portfolio-overlay-content,
.gdlr-core-portfolio-overlay-content * ,
.gdlr-core-portfolio-title,
.gdlr-core-portfolio-title a,
.gdlr-core-portfolio-info,
.gdlr-core-portfolio-info a{
  color: #FFFFFF !important; 
  text-shadow: none !important;
}


/* --- 3. Hover-Effekt (Zoom, Blau-Overlay und Textfarbe ORANGE) --- */

/* Zoom für das gesamte Element */
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail:hover {
  transform: scale(1.05); 
}

/* Starkes Blau-Overlay und Mitziehen beim Zoom */
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail:hover .gdlr-core-portfolio-overlay {
  background: rgba(18, 37, 99, 0.85) !important; 
  transform: scale(1.05); 
}

/* Textfarbe auf ORANGE beim Hover + Mitziehen des Text-Inhalts beim Zoom */
.gdlr-core-portfolio-item:hover .gdlr-core-portfolio-overlay-content,
.gdlr-core-portfolio-item:hover .gdlr-core-portfolio-overlay-content * {
  color: var(--leitwert-orange) !important; 
}
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail:hover .gdlr-core-portfolio-overlay-content {
  transform: scale(1.05); 
}

/* Sicherstellung, dass das Overlay beim Hover nicht verschwindet */
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail:hover .gdlr-core-portfolio-overlay,
.gdlr-core-portfolio-item .gdlr-core-portfolio-thumbnail:hover .gdlr-core-portfolio-overlay-content{
  opacity: 1 !important;
  visibility: visible !important;
}