/* ======================
   REFERENZEN – MASONRY (4 dezente Größen)
   Datei: /assets/referenzen/referenzen.css
   Geladen über functions.php – nur auf der Referenzen-Seite
   ====================== */

:root{
  --gap:32px;
}

/* H1 ausblenden */
.referenzen-h1,
.referenzen-block h1{
  display:none !important;
}

/* =========================================
   Wrapper – FadeIn beim Scrollen
   Grid-Layout: beide Tab-Panels liegen in derselben Zelle
   → gleiche Breite, echter Cross-Fade, Höhe nur vom aktiven Panel
   ========================================= */
.referenzen-block{
  max-width:1400px;
  margin:0 auto;
  padding:0 24px 80px;
  position:relative;

  display:grid;
  grid-template-columns:minmax(0,1fr);

  opacity:0;
  transform:translateY(12px);
  transition:
    opacity 1.1s cubic-bezier(.22,1,.36,1),
    transform 1.1s cubic-bezier(.22,1,.36,1);
}

.referenzen-block.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   Tabs
   ========================================= */
.referenzen-tabs{
  grid-row:1;
  display:flex;
  justify-content:center;
  gap:18px;
  margin:32px 0 56px;
  flex-wrap:wrap;
}

.ref-tab{
  padding:14px 34px;
  border:1px solid #5B6E74;
  background:transparent;
  cursor:pointer;

  font-family:'Open Sans',sans-serif;
  font-weight:400;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#5B6E74;

  transition:
    background-color .35s ease,
    color .35s ease,
    border-color .35s ease;
}

.ref-tab.is-active{
  background:#5B6E74;
  color:#fff;
  border-color:#5B6E74;
}

.ref-tab:not(.is-active):hover{
  background:#E4E6E8;
  color:#5B6E74;
}

/* =========================================
   Tab-Panels – Cross-Fade ohne display:none
   ========================================= */
.referenzen-tab{
  grid-row:2;
  grid-column:1;
  align-self:start;

  height:0;               /* inaktives Panel bestimmt die Höhe nicht */
  overflow:hidden;        /* …und erzeugt keinen leeren Scrollraum */
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .65s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .65s;
}

/* Während des Ausblendens sichtbar lassen (Cross-Fade), danach wieder geclippt */
.referenzen-tab.is-leaving{
  overflow:visible;
}

.referenzen-tab.is-active{
  height:auto;
  overflow:visible;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .65s cubic-bezier(.22,1,.36,1);
}

/* =========================================
   Grid (Positionen & Höhen setzt das JS)
   ========================================= */
.referenzen-grid{
  position:relative;
  min-height:1px;
}

.referenz-item{
  position:absolute;
  margin:0;
  --tile-height:300px;   /* Fallback, JS überschreibt */
}

/* =========================================
   Link / Bild
   ========================================= */
.referenz-link{
  display:block;
  height:var(--tile-height);
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#E4E6E8;
  text-decoration:none;
}

.referenz-link:focus-visible{
  outline:2px solid #5B6E74;
  outline-offset:3px;
}

.referenz-image,
.referenz-image--placeholder{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.referenz-image{
  object-fit:cover;
  transform:scale(1);
  transition:transform 1.1s ease;
}

/* Overlay – weicher Schleier:
   dicht nur im Schriftbereich, darüber sanft auslaufend (ease-out),
   obere Bildhälfte bleibt komplett frei */
.referenz-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50%;
  pointer-events:none;

  background:linear-gradient(
    to top,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.88) 18%,
    rgba(255,255,255,.74) 30%,
    rgba(255,255,255,.52) 42%,
    rgba(255,255,255,.32) 54%,
    rgba(255,255,255,.17) 66%,
    rgba(255,255,255,.07) 78%,
    rgba(255,255,255,.02) 90%,
    rgba(255,255,255,0) 100%
  );

  opacity:0;
  transition:opacity .45s ease;
}

/* Titel */
.referenz-title{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:26px 22px 22px;
  text-align:center;

  font-family:'Open Sans',sans-serif;
  font-weight:400;
  font-size:18px;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.35;
  color:#5B6E74;

  /* weicher heller Lichthof → Schrift bleibt auch auf unruhigen Bildstellen lesbar */
  text-shadow:
    0 0 2px rgba(255,255,255,.6),
    0 0 14px rgba(255,255,255,.85);

  opacity:0;
  transform:translateY(10px);
  transition:
    opacity .5s ease,
    transform .5s ease;
}

/* Hover (nur Geräte mit Maus) */
@media (hover:hover){
  .referenz-link:hover .referenz-image{
    transform:scale(1.05);
  }
  .referenz-link:hover .referenz-overlay{
    opacity:1;
  }
  .referenz-link:hover .referenz-title{
    opacity:1;
    transform:translateY(0);
  }
}

/* Tastatur-Fokus zeigt Schleier + Titel wie Hover */
.referenz-link:focus-visible .referenz-overlay{
  opacity:1;
}
.referenz-link:focus-visible .referenz-title{
  opacity:1;
  transform:translateY(0);
}

/* =========================================
   Touch-Geräte (Handy + Tablet) & schmale Viewports:
   Schleier + Titel immer sichtbar
   ========================================= */
@media (hover:none), (max-width:640px){
  .referenz-overlay{
    opacity:1;
  }
  .referenz-title{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================
   Responsive
   Spalten & Kachelformate steuert das JS:
   > 1100px = 3 Spalten · 641–1100px = 2 Spalten · ≤ 640px = 1 Spalte (4:5)
   Abstand (--gap) auf allen Geräten 32px
   ========================================= */

/* =========================================
   Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce){
  .referenzen-block,
  .referenzen-tab,
  .referenzen-tab.is-active,
  .referenz-image,
  .referenz-overlay,
  .referenz-title{
    transition:none;
  }
  .referenzen-block{
    opacity:1;
    transform:none;
  }
}