/* Kontakt — Hero section.
   Side-by-side, anchored to the top (no forced vertical centering, so no
   empty band under the nav). Facade photo at its true landscape ratio.
   Shared .hero-visual / .hero-quick-info / .qi-item / .btn-lead-ic live in
   style.css (used by other subpage heroes too). */

/* --- Tight top padding clears the fixed nav without a big empty gap --- */
.page-hero--kontakt{
  padding:140px 0 52px;
}

/* --- Two columns; photo column is now noticeably wider so it reads large --- */
.page-hero--kontakt .page-hero-grid{
  grid-template-columns:.85fr 1.15fr;
  align-items:center;gap:50px;
}

/* --- Photo at true ratio: object-fit:cover has nothing to crop --- */
.page-hero--kontakt .page-hero-frame{
  position:relative;
  aspect-ratio:1600/1067;
  border-radius:24px;
}
.page-hero--kontakt .page-hero-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-hero--kontakt .hero-visual:hover .page-hero-frame img{transform:scale(1.035)}

/* --- Status pill (bottom-left of photo) — kontakt-only live indicator --- */
.status-card{position:absolute;left:18px;bottom:18px;background:rgba(252,250,244,.96);backdrop-filter:blur(10px) saturate(1.1);border:1px solid var(--line);border-radius:100px;padding:10px 18px 10px 14px;display:inline-flex;align-items:center;gap:10px;font-family:"Hanken Grotesk",sans-serif;font-size:.85rem;font-weight:600;color:var(--pine);box-shadow:var(--sh-sm);z-index:2}
.status-card .dot{width:8px;height:8px;border-radius:50%;background:#3ca977;box-shadow:0 0 0 4px rgba(60,169,119,.22);animation:ping 2.2s infinite}
.status-card.closed{color:#7a4c0e}
.status-card.closed .dot{background:#c8761e;box-shadow:0 0 0 4px rgba(200,118,30,.18);animation:none}

/* --- Responsive: normal landscape image once stacked --- */
@media(max-width:980px){
  .page-hero--kontakt{padding:118px 0 64px}
  .page-hero--kontakt .page-hero-grid{grid-template-columns:1fr;gap:40px}
  .page-hero--kontakt .page-hero-frame{aspect-ratio:16/10}
}
@media(max-width:680px){
  .page-hero--kontakt{padding:104px 0 56px}
  .page-hero--kontakt .page-hero-frame{aspect-ratio:4/3}
}