/* ========= Slider ========= */
.custom-project-slider{
  position:relative;
  width:100%;
  overflow:hidden;
  display:block;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  outline:none;
  line-height:0;
  -webkit-tap-highlight-color:transparent;
  cursor:pointer;
  aspect-ratio:4/3;            /* feste Höhe */
}
.custom-project-slider:focus{ outline:none; box-shadow:none; }

.project-slide{
  position:absolute;
  inset:0;
  width:100%;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
  will-change:opacity;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.project-slide.active{
  opacity:1;
  z-index:2;
  pointer-events:auto;
}

.project-image-wrapper{
  width:100%;
  aspect-ratio:4/3;
  position:relative;
  overflow:hidden;
  background:#000;
}
.project-image-wrapper img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border:0;
  vertical-align:middle;
}

.project-title{
  position:absolute;
  left:1rem;
  right:1rem;
  bottom:1rem;
  color:#000;
  font-weight:300;
  font-size: 10px;
  /* padding:5px; */
  /* background: #ff1d25; */
  /* text-shadow:0 0 5px rgba(0,0,0,.6); */
  display: none;
}

/* ========= Panel (volle Breite) ========= */
.reveal-panel{
  width:100%;
  overflow:hidden;
  transition:max-height .3s ease;
  /* sorgt dafür, dass scrollIntoView mit Offset sauber ist */
  scroll-margin-top: 80px; /* gleiche Zahl wie RevealPanels.scroll_offset */
  background:#fbfbfb;
}

/* Kopfzeile: links Titel, rechts Close */
.reveal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:1.25rem 1.25rem 0rem 1.25rem;         /* horizontale Innenabstände wie im Screenshot */
  /* border-bottom:1px solid rgba(0,0,0,.08); */
  /* background: red; */
}
.reveal-head-left{
  font-size:1.125rem;
  /* font-weight:700; */
  line-height:1.2;
  font-family: 'Rena Medium';
  text-transform: uppercase;
  letter-spacing: 3px;
}
.reveal-close{
  background:transparent;
  border:0;
  padding:.25rem .5rem;
  font-size:2.5rem;             /* gut sichtbar */
  line-height:1;
  cursor:pointer;
  color:inherit;
  font-family: 'Rena Regular';

}
.reveal-close:focus{
  outline:2px solid rgba(0,0,0,.25);
  outline-offset:2px;
}

/* ========= Grid – 4 Spalten Desktop ========= */
.reveal-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:1.25rem;
  padding:1.25rem;              /* innen bündig mit Header */
}

.reveal-card{}
.reveal-thumb{
  display:block;
  width:100%;
  aspect-ratio:4/3;             /* einheitliche Bildhöhe */
  overflow:hidden;
  background:#000;
  border-radius:4px;
}
.reveal-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.reveal-title{
  margin:.5rem 0 0;
  font-size:1.2rem;
  line-height:1.3;
}

/* ========= Archiv-Fallback ========= */
.reveal-archive{
  padding:1.25rem;
  display:grid;
  gap:1rem;
}
.reveal-item img{
  width:100%;
  height:auto;
  display:block;
}

/* ========= Breakpoints ========= */
@media (max-width:1200px){
  .reveal-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:900px){
  .reveal-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:560px){
  .reveal-grid{ grid-template-columns: 1fr; }
}

/* nur auf echten Hover-Geräten (keine Mobile-Ghosts) */
@media (hover:hover) and (pointer:fine) {
  /* Container, die Bilder enthalten, schneiden Überlauf ab */
  .reveal-panel figure,
  .reveal-panel .et_pb_image,
  .reveal-panel .post-thumb,
  .reveal-panel a,
  .reveal-panel .wp-block-image {
    overflow: hidden;
  }

  /* sanfter Zoom */
  .reveal-panel img {
    display: block;                 /* verhindert Lücken unter Bildern */
    transform-origin: center center;
    transition: transform .35s ease;
    will-change: transform;
  }
  .reveal-panel img:hover {
    transform: scale(1.04);         /* dezent: 4% Zoom */
  }
}

/* Rücksicht auf "Bewegung reduzieren" */
@media (prefers-reduced-motion: reduce) {
  .reveal-panel img { transition: none !important; }
}

/* Loader Overlay (Reveal Panel) */
.reveal-panel { position: relative; overflow: hidden; }
.reveal-panel .rp-loader{
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(1.5px);
  transition: opacity .18s ease;
  opacity: 0;
  z-index: 50;
  will-change: opacity;
}
.reveal-panel.is-loading .rp-loader{ display: flex; opacity: 1; }

.rp-spinner{
  width: 28px; height: 28px;
  border: 3px solid rgba(0,0,0,.2);
  border-top-color: rgba(0,0,0,.6);
  border-radius: 50%;
  animation: rp-spin .8s linear infinite;
}
@keyframes rp-spin{ to { transform: rotate(360deg); } }

.reveal-panel.ready .reveal-grid,
.reveal-panel.ready .reveal-archive { animation: rp-fadein .18s ease; }
@keyframes rp-fadein { from { opacity:.001 } to { opacity:1 } }