/*
Theme Name: Divi Child
Theme URI:      http://www.elegantthemes.com
Description:    Divi Child-Theme
Author: Franzif
Template: Divi
Version: 1.0
*/

/* Bild-Wrapper und Portfolio quadratisch halten */

.galerie-vorschau {
    aspect-ratio: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.galerie-vorschau .et_pb_promo_description{
   position: absolute; left: 20px; bottom: 0;
  z-index:2;
}

.galerie-vorschau::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,.45);
  opacity:0;
  transition: opacity .2s ease;
  pointer-events:none;
 }
.galerie-vorschau:hover::after{
  opacity:1;
}

.sq-grid .et_pb_portfolio_image,.sq-grid .et_pb_portfolio_image img{
    width:100%;}

.sq-grid .et_pb_portfolio_image{
    aspect-ratio:1/1;
    overflow:hidden;
    osition:relative;}

.sq-grid .et_pb_portfolio_image img{
    height:100%;
    object-fit:cover;
    display:block;
    position:absolute; inset:0;}

/* Optional: gleiche Höhe für Karteninhalte darunter */
.sq-grid .et_pb_portfolio_item{
    display:flex; flex-direction:column;}

.sq-grid .et_pb_portfolio_item .et_pb_module_header{
    margin-top:.5rem;}
    
/* Dreispaltiges Portfolio */
.dreispaltig .et_pb_portfolio_item{
  display:flex; flex-wrap:wrap;   /* <— Gesamtabstand zwischen Kacheln */
}

/* Kachelbreiten (3 / 2 / 1 Spalte responsiv) */
.dreispaltig .et_pb_portfolio_item{
  clear:none !important;
  width:auto !important; margin:0 !important;      
  flex: 1 1 calc(33.333% - 20px);
  max-width: calc(33.333% - 20px);
}
@media (max-width:980px){
  .dreispaltig .et_pb_portfolio_item{ flex:1 1 calc(50% - 20px); max-width:calc(50% - 20px); }
}
@media (max-width:767px){
  .dreispaltig .et_pb_portfolio_item{ flex:1 1 100%; max-width:100%; }
}

.dreispaltig .et_pb_portfolio_item.et_pb_grid_item{
  margin-bottom: 20px !important;
  margin-right: 20px !important;
}

/* --- Quadratische Kachel + Titel-Overlay oben --- */
.kachel-toptitle .et_portfolio_image{
  position: relative;
  aspect-ratio: 1 / 1; 
  overflow: hidden;
  display: block;
}

/* Bild vollflächig zuschneiden */
.kachel-toptitle .et_portfolio_image img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Titel über dem Bild fixieren */
.kachel-toptitle .et_pb_module_header{
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 !important; z-index: 2;
}

@media (max-width:980px){
 .kachel-toptitle .et_pb_module_header{ 
   position: relative;
  }
}

/* Fallback für ältere Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .kachel-toptitle .et_portfolio_image::before{
    content:""; display:block; padding-top:100%;
  }
  .kachel-toptitle .et_portfolio_image img{ position:absolute; inset:0; }
}

/* Container spacing + wrap */
.filters-chips .et_pb_portfolio_filters{
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; margin-bottom:14px !important;
}

/* Filter */
.filters-chips .et_pb_portfolio_filters li{
  margin:5px; 
  list-style:none;
  background-color: black;
  border: 1px solid white;
  border-radius: 50px;
}
.filters-chips .et_pb_portfolio_filters .et_pb_portfolio_filter_all{
  background-color: grey;
}

.filters-chips .et_pb_portfolio_filters a{
  display:inline-block; 
  padding:.45rem .75rem; 
  line-height:1; 
  transition:all .16s ease;
  background-color: transparent !important;
  border: none !important;
  color: white !important;
}
.filters-chips .et_pb_portfolio_filters a:hover{ 
  text-decoration: underline;
  font-weight:600;
}

.filters-chips .et_pb_portfolio_filters a.active{
  background-color:white !important; 
  border: 1px solid white;
  border-radius: 50px !important;
  color:black !important; 
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.filters-chips .et_pb_portfolio_filters .et_pb_portfolio_filter_all a.active{
  background-color:transparent !important; 
}

@media (max-width: 767px) {
  .et_pb_column .filters-chips .et_pb_portfolio_filters li {
    width: auto;
  }
}

/* Unterstreichung durch Scroll-Spy (.spy-active) */

li.current-menu-item.menu-item-type-post_type > a{
    text-decoration: underline;
}

.spy-menu li.spy-active > a{
  color: #bfb48e !important;  
  text-decoration: underline;
}

ul.sub-menu, .et_mobile_menu{
  border-top: 0px !important;
}