/* ============================================================
   BAUUNTERNEHMEN-DIGITAL SUBPAGE — page-specific bits only.
   All structural component classes (.wdp-hero, .wdp-merge, .wdp-check,
   .wdp-why-list, .wdp-lst, .wdp-faq, .wdp-cta-section, ...) now live
   once in style.css under the shared "SUBPAGE TEMPLATE" section and are
   reused across recruiting.html, social-media.html,
   digitale-loesungen.html and bauunternehmen-digital.html. This file
   only holds what's unique to this page (no branchen section here).
   ============================================================ */

/* Scoped override: nav becomes position:absolute on this page (loads
   after style.css, so this wins) — see webdesign.css for the rationale. */
nav{ position:absolute; top:0; left:0; right:0; background:transparent; }

/* this page has no why-branches/intro-tags follow-up, so the why-list
   needs its own bottom spacing before the section ends */
.wdp-why-list{ margin-bottom:40px; }

/* Leistungen tiles sit on a light-gray section here (vs. white elsewhere) */
.wdp-lst{ background:var(--gray-light); }

/* FAQ background photo for this page */
.wdp-faq::before{
  background-image:url('../img/Bauunternehmen-digital.jpg');
}

/* ---------- REFERENZEN — customer companies (replaces the generic
   Leistungen tile grid on this page) ---------- */
.bau-ref-intro{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1rem,1.5vw,1.2rem); color:#3A3A3A;
  margin-bottom:50px; max-width:60ch;
}
.bau-ref-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:28px;
  align-items:start;
  /* verhindert, dass der Browser beim Aufklappen die Scrollposition
     nachjustiert (Scroll-Anchoring) */
  overflow-anchor:none;
}

/* Die Karte selbst ist nur der Platzhalter im Raster: Ihre Hoehe wird per JS
   auf die hoechste geschlossene Karte gesetzt und aendert sich nie. Der
   sichtbare Inhalt liegt darin absolut positioniert und legt sich beim
   Aufklappen ueber die darunterliegenden Karten (z-index), statt sie zu
   verschieben. */
.bau-ref-card{ position:relative; cursor:pointer; }
.bau-ref-card.is-open{ z-index:5; }
.bau-ref-card:focus-visible{ outline:none; }
.bau-ref-card:focus-visible .bau-ref-card-inner{ outline:2px solid var(--red); outline-offset:4px; }

.bau-ref-card-inner{
  position:absolute; top:0; left:0; right:0; min-height:100%;
  display:flex; flex-wrap:wrap; align-items:flex-start;
  /* column-gap trennt Logo und Text; row-gap muss 0 sein, sonst kaeme
     zwischen Bild und Logo/Text ein zweiter Abstand zum margin-bottom des
     Panels hinzu und die Karte waere zu hoch */
  column-gap:28px; row-gap:0;
  background:var(--white); padding:34px 30px;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
/* roter Akzentstrich, faehrt beim Hover von links ein */
.bau-ref-card-inner::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--red); transform:scaleY(0); transform-origin:bottom;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.bau-ref-card:hover .bau-ref-card-inner{
  transform:translateY(-8px);
  box-shadow:0 28px 60px rgba(0,0,0,.14);
}
.bau-ref-card:hover .bau-ref-card-inner::after{ transform:scaleY(1); transform-origin:top; }

.bau-ref-logo{
  flex-shrink:0; width:200px; height:90px;
  display:flex; align-items:center; justify-content:center;
}
.bau-ref-logo img{
  max-width:100%; max-height:100%; object-fit:contain;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.bau-ref-card:hover .bau-ref-logo img{ transform:scale(1.06); }
.bau-ref-info{ flex:1 1 0; min-width:0; }
.bau-ref-name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--red); }
.bau-ref-loc{ font-size:.88rem; color:#6A6A6A; margin-top:2px; margin-bottom:14px; }
.bau-ref-list{ list-style:none; }
.bau-ref-list li{
  position:relative; padding-left:16px; font-size:.9rem; color:#2A2A2A;
  line-height:1.9;
}
.bau-ref-list li::before{
  content:''; position:absolute; left:0; top:.75em;
  width:5px; height:5px; border-radius:50%; background:var(--red);
}

@media (prefers-reduced-motion:reduce){
  .bau-ref-card-inner,
  .bau-ref-card-inner::after,
  .bau-ref-logo img{ transition:none; }
  .bau-ref-card:hover .bau-ref-card-inner{ transform:none; }
  .bau-ref-card:hover .bau-ref-logo img{ transform:none; }
}

@media (max-width:900px){
  .bau-ref-grid{ grid-template-columns:1fr; }
  /* einspaltig: kein Ueberlagern, die Karte laeuft wieder im normalen Fluss */
  .bau-ref-card{ height:auto !important; }
  .bau-ref-card-inner{
    position:static; flex-direction:column; align-items:flex-start;
  }
  /* Logo auf Mobile zentriert ueber dem Textblock */
  .bau-ref-logo{ width:100%; margin:0 auto; justify-content:center; }
}

/* ---------- BRANCHEN — nur das sol-grid, ohne Rule/Headline.
   Die aktive Karte (= diese Seite) steht dauerhaft im Hover-Zustand. ---------- */
.wdp-branchen .sol-grid{ margin-top:0; }
.sol-card.active{
  background:var(--red); color:var(--white);
  border-color:var(--red); cursor:default;
}
.sol-card.active .sol-num{ -webkit-text-stroke-color:rgba(255,255,255,.9); }
.sol-card.active .sol-photo{ border-color:rgba(255,255,255,.5); }
.sol-card.active .sol-go{ color:var(--white); border-color:rgba(255,255,255,.35); }
.sol-card.active:hover{ transform:none; }
.sol-card.active:hover .sol-go{ gap:10px; }
.sol-card.active:hover .sol-go i{ transform:none; }
.wdp-branchen{ padding-top:0; }

/* ---------- Aufklappbarer Projektbereich pro Referenzkarte ---------- */
/* Panel: Hoehe wird ueber grid-template-rows animiert (0fr -> 1fr) */
.bau-ref-panel{
  /* order:-1 stellt das Bild ueber Logo und Text, ohne die Lesereihenfolge
     im Quelltext zu aendern */
  order:-1; flex:0 0 100%; display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1),
             margin-bottom .5s cubic-bezier(.22,.61,.36,1);
}
.bau-ref-panel-inner{ overflow:hidden; min-height:0; }
.bau-ref-panel img{
  /* height:auto ist noetig: das height-Attribut im HTML wirkt sonst als
     Praesentations-Hinweis (900px) und macht das Bild hochkant */
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  opacity:0; transform:scale(1.03);
  transition:opacity .5s ease .12s, transform .6s cubic-bezier(.22,.61,.36,1) .12s;
}

.bau-ref-card.is-open{ cursor:default; }
/* Die geoeffnete Karte ist exakt so hoch wie zwei geschlossene Karten plus der
   Rasterabstand. --ref-open-h und --ref-img-h werden per JS gesetzt. */
.bau-ref-card.is-open .bau-ref-card-inner{ height:var(--ref-open-h); }
.bau-ref-card.is-open .bau-ref-panel{ grid-template-rows:1fr; margin-bottom:26px; }
.bau-ref-card.is-open .bau-ref-panel img{ height:var(--ref-img-h); aspect-ratio:auto; }
.bau-ref-card.is-open .bau-ref-panel img{ opacity:1; transform:scale(1); }
/* offene Karte bleibt angehoben stehen */
.bau-ref-card.is-open .bau-ref-card-inner{
  transform:none; box-shadow:0 28px 70px rgba(0,0,0,.18);
}
.bau-ref-card.is-open .bau-ref-card-inner::after{ transform:scaleY(1); transform-origin:top; }

@media (prefers-reduced-motion:reduce){
  .bau-ref-panel, .bau-ref-panel img{ transition:none; }
  .bau-ref-panel img{ opacity:1; transform:none; }
}

/* ---------- Klick-Hinweis: dreieckiger Pfeil oben rechts in der Karte.
   Erscheint beim Hover, dreht sich beim Aufklappen nach oben. ---------- */
.bau-ref-cue{
  position:absolute; top:20px; right:20px; z-index:2;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--red); background:var(--white);
  opacity:0; transform:translateY(-6px) scale(.9);
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1),
             background .3s ease;
  pointer-events:none;
}
.bau-ref-cue svg{
  width:12px; height:8px; fill:var(--red);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), fill .3s ease;
}
.bau-ref-card:hover .bau-ref-cue,
.bau-ref-card:focus-visible .bau-ref-cue{
  opacity:1; transform:translateY(0) scale(1);
}
/* offene Karte: Icon verschwindet komplett */
.bau-ref-card.is-open .bau-ref-cue,
.bau-ref-card.is-open:hover .bau-ref-cue{
  opacity:0; transform:translateY(-6px) scale(.9);
}

/* Touch-Geraete kennen kein Hover — dort dauerhaft sichtbar */
@media (hover:none){
  .bau-ref-cue{ opacity:1; transform:none; }
  .bau-ref-card.is-open .bau-ref-cue{ opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .bau-ref-cue, .bau-ref-cue svg{ transition:none; }
}