/* ==========================================================================
   Print & Web – studiocarbon.eu
   Hero mit Image-Accordion (Essential Addons) + filterbare Werke-Galerie
   mit eigener Masonry-/Lightbox-Logik (print.js). Heller Header (site-header--light).
   ========================================================================== */

/* 1. Hero ----------------------------------------------------------------- */
.print-hero{padding:40px}
.print-hero .bg-overlay{background-color:#fff;opacity:.7}
.print-hero__inner{min-height:100vh;align-items:center}

.print-hero__col--text{width:53.439%;align-items:center}
.print-hero__text{padding:0 10% 0 0}

.print-hero__col--accordion{width:46.561%;align-items:flex-end}
.print-hero__accordion-wrap{padding:19px}

.print-hero__eyebrow{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  line-height:28px;
  letter-spacing:5px;
  text-transform:uppercase;
  color:#333;
  margin:0 0 20px;
}
.print-hero__title{
  font-size:65px;
  font-weight:600;
  line-height:1;
  color:#333;
  margin:0;
}
.print-hero__desc{
  font-size:16px;
  font-weight:300;
  line-height:1.8em;
  color:#333;
}

@media only screen and (max-width:1024px){
  .print-hero{padding:0 14px}
  .print-hero__inner{min-height:800px}
  .print-hero__title{font-size:55px}
}
@media only screen and (max-width:767px){
  .print-hero{padding:33px 20px 0}
  .print-hero__inner{flex-wrap:wrap}   /* sonst schrumpfen die 100%-Spalten nebeneinander auf 50 % */
  .print-hero__col--text,.print-hero__col--accordion{width:100%}
  .print-hero__text{padding:25px 0 0;text-align:center}
  .print-hero__accordion-wrap{padding:20px 0 30px}
  .print-hero__eyebrow,.print-hero__title,.print-hero__desc{text-align:center}
  .print-hero__title{font-size:45px}
}

/* 2. Image-Accordion (Essential Addons eael-image-accordion) --------------- */
.img-accordion{
  display:flex;
  height:300px;
  overflow:hidden;
  border:1px solid #fff;
  box-shadow:7px 4px 10px 0 rgba(0,0,0,.5);
}
.img-accordion__panel{
  position:relative;
  flex:1 1 0%;
  overflow:hidden;
  cursor:pointer;
  transition:flex .4s;
}
.img-accordion__panel::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background-color:rgba(0,0,0,.3);
  transition:background-color .3s ease-in-out;
}
.img-accordion__panel.is-active::before{background-color:rgba(0,0,0,.5)}
.img-accordion__panel.is-active{flex:3 1 0%}
.img-accordion__panel .bg-media{z-index:0}
.img-accordion__overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 10px;
  text-align:center;
}
.img-accordion__inner *{
  opacity:0;
  visibility:hidden;
  transition:none;
}
.img-accordion__title{
  font-family:var(--font-display);
  color:#fff;
  font-size:20px;
  margin:0;
  transform:translate3d(0,-60px,0);
}
.img-accordion__panel.is-active .img-accordion__inner *{
  opacity:1;
  visibility:visible;
  transition:.3s .3s;
  transform:none;
}
@media screen and (max-width:800px){
  .img-accordion{flex-direction:column}
}

/* 3. Werke-Sektion ---------------------------------------------------------- */
/* Original: elementor-container "column-gap-no" -> kein 10px-Innenabstand der Spalte */
.print-works{padding:100px 0}
.print-works .col__wrap{padding:0}
.print-works__title{
  font-family:var(--font-display);
  font-size:65px;
  font-weight:600;
  color:#000;
  text-align:center;
  margin:0;   /* kein eigener Bottom-Margin: .widget liefert die 20px (sonst 40px, da .col__wrap flex ist und die Margins nicht kollabieren) */
  line-height:1;   /* Original: 65px/65px bzw. 45px/45px */
}
@media only screen and (max-width:1024px){
  .print-works{padding:100px 25px}
}
@media only screen and (max-width:767px){
  .print-works{padding:50px 20px}
  .print-works__title{font-size:45px}
}

/* 3.1 Filter ---------------------------------------------------------------- */
.gallery__filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  margin:0 0 20px;
}
.gallery__filter{
  font-family:var(--font-body);
  font-size:13px;
  font-weight:400;
  line-height:1.8;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:6px 15px;
  margin:0 5px;
  color:#444;
  background:transparent;
  border-radius:0;
  cursor:pointer;
}
.gallery__filter.is-active{color:#fff;background:#333}

/* 3.2 Grid (eigene Masonry-Positionierung, siehe print.js) ------------------ */
.gallery__grid{position:relative}
.gallery__item{
  position:absolute;
  top:0;
  left:0;
  box-sizing:border-box;
  padding:0 10px 20px;
  opacity:0;
  transition:opacity .3s, transform .3s;
}
.gallery__grid.is-ready .gallery__item{opacity:1}
.gallery__item.is-filtered{opacity:0;pointer-events:none}
.gallery__thumb{position:relative;overflow:hidden}
.gallery__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.gallery__caption{
  position:absolute;
  inset:0 10px 20px;
  padding:15px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  visibility:hidden;
  opacity:0;
  transition:opacity .6s;
}
.gallery__item:hover .gallery__caption{opacity:1;visibility:visible}
.gallery__bg{
  position:absolute;
  inset:0 10px 20px;
  background:#000;
  opacity:.7;
  z-index:-1;
}
.gallery__content{position:relative;width:100%}
.gallery__title{
  color:#fff;
  font-size:20px;
  font-weight:600;
  line-height:28px;
  margin:0 0 20px;
  transform:translateY(20px);
  transition:transform .6s;
}
.gallery__desc{
  color:#fff;
  font-size:14px;
  line-height:1.6;
  margin:0 0 5px;
  transform:translateY(40px);
  transition:transform .6s;
}
.gallery__desc p{margin:0 0 5px;color:#fff}
.gallery__desc a{color:#fff;text-decoration:underline}
.gallery__buttons{
  transform:translateY(40px);
  transition:transform .6s;
}
.gallery__item:hover .gallery__title,
.gallery__item:hover .gallery__desc,
.gallery__item:hover .gallery__buttons{transform:translate(0)}
.gallery__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  margin-right:15px;
  border-radius:100px;
  background:#ff622a;
  color:#fff;
  font-size:18px;
  transition:.3s;
}
.gallery__btn:hover{background:#ff622a;color:#fff}
.gallery__btn-icon{width:18px;height:18px}

/* 4. Lightbox ---------------------------------------------------------------- */
.lightbox{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox[hidden]{display:none}
.lightbox__backdrop{position:absolute;inset:0;background:rgba(10,10,10,.92)}
.lightbox__figure{
  position:relative;
  z-index:1;
  max-width:92vw;
  max-height:88vh;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.lightbox__picture{display:block;max-width:92vw;max-height:80vh;line-height:0}
.lightbox__picture img{
  display:block;
  max-width:92vw;
  max-height:80vh;
  width:auto;
  height:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.lightbox__caption{
  color:#fff;
  font-size:15px;
  text-align:center;
  margin-top:14px;
  min-height:1em;
}
.lightbox__close{
  position:absolute;
  top:20px;
  right:20px;
  z-index:2;
  width:44px;
  height:44px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
}
.lightbox__close:hover{background:rgba(255,255,255,.18)}
.lightbox__close svg{width:20px;height:20px}
.lightbox__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  width:50px;
  height:50px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  font-size:20px;
}
.lightbox__nav:hover{background:rgba(255,255,255,.18)}
.lightbox__nav--prev{left:14px}
.lightbox__nav--next{right:14px}
@media only screen and (max-width:600px){
  .lightbox__nav{width:40px;height:40px;font-size:16px}
  .lightbox__close{width:36px;height:36px;top:10px;right:10px}
}

/* 5. Touch-Geräte: Tippen statt Hover (Image-Accordion + Galerie-Karten) ---- */
@media (hover:none){
  .gallery__caption{transition:opacity .3s}
  .gallery__item.is-tapped .gallery__caption{opacity:1;visibility:visible}
  .gallery__item.is-tapped .gallery__title,
  .gallery__item.is-tapped .gallery__desc,
  .gallery__item.is-tapped .gallery__buttons{transform:translate(0)}
}