/* ============================================================
   STANDORTE OVERVIEW — page-specific bits only.
   All structural component classes (.wdp-hero, .wdp-merge, .wdp-branchen,
   .wdp-cta-section, ...) live once in style.css under the shared
   "SUBPAGE TEMPLATE" section. This file only holds what's unique to
   this page: the single-column intro variant and the four-card
   location grid (.loc-grid / .loc-card) — a full-bleed 3:2 photo on
   top, red card body below, that grows slightly on hover.
   ============================================================ */

/* 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 right-hand "Warum WST" checklist, so the intro
   collapses to a single readable column instead of the usual 1fr 1fr */
.loc-intro-grid{ grid-template-columns:1fr; max-width:62ch; }

/* ---------- STANDORTE (light) — four location cards ---------- */
.loc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  margin-top:96px;
}
.loc-card{
  position:relative; display:flex; flex-direction:column;
  padding:0 0 30px;
  background:var(--red); color:var(--white); text-decoration:none;
  border:1px solid var(--red);
  transition:transform .3s ease, box-shadow .3s ease;
  will-change:transform;
}
.loc-card:hover, .loc-card:focus-visible{
  transform:scale(1.045);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
  z-index:2;
}
.loc-photo{
  display:block; width:100%; aspect-ratio:3/2; border-radius:0; overflow:hidden;
}
.loc-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.loc-name{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem,1.6vw,1.5rem); line-height:1.2;
  margin-top:24px; padding:0 30px;
}
.loc-sub{
  margin-top:8px; padding:0 30px;
  font-size:.85rem; color:rgba(255,255,255,.8);
}
.loc-go{
  display:flex; align-items:center; gap:10px;
  margin:16px 30px 0; padding-top:16px;
  border-top:1px solid rgba(255,255,255,.3);
  font-size:.85rem; font-weight:500; color:var(--white);
  transition:gap .3s ease;
}
.loc-go i{ font-style:normal; transition:transform .3s ease; }
.loc-card:hover .loc-go, .loc-card:focus-visible .loc-go{ gap:16px; }
.loc-card:hover .loc-go i, .loc-card:focus-visible .loc-go i{ transform:translateX(4px); }

@media (max-width:1100px){
  .loc-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .loc-grid{ gap:18px; }
}
@media (max-width:560px){
  .loc-grid{ grid-template-columns:1fr; }
}