/* MaklerHaus Hero-Logo-Animation „Dies ist das Haus" — isoliert (mhl-Prefix).
   M zeichnet sich beim Laden, Wortspiel-Caption, dann Reveal von „aklerHaus" + Slogan.
   GPU-only (transform/opacity/clip), prefers-reduced-motion = sofort Endbild.
   Fallback ohne JS: <noscript>-Logo. */
.mhl{
  position:absolute; inset:0; margin:auto; z-index:2;
  width:84%; max-height:80%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.45em;
  container-type:inline-size;
  cursor:pointer; user-select:none;
  filter:drop-shadow(0 10px 28px rgba(0,0,112,0.20));
}
.mhl-caption{
  font-family:inherit; font-weight:700; color:#232C5E;
  font-size:6.5cqw; letter-spacing:.3px; min-height:1.3em;
  display:flex; gap:.3em; align-items:baseline; transition:opacity .5s ease;
}
.mhl-caption.gone{ opacity:0; }
.mhl-caption .mhl-w{ opacity:0; transform:translateY(6px); transition:opacity .26s ease, transform .26s ease, max-width .4s ease, margin .4s ease; max-width:6em; white-space:nowrap; }
.mhl-caption .mhl-w.show{ opacity:1; transform:none; }
.mhl-haus{ position:relative; }
.mhl-haus::after{ content:""; position:absolute; left:-4%; top:54%; height:.12em; width:0; background:#2BA53C; border-radius:1px; transition:width .4s cubic-bezier(.6,.1,.3,1); }
.mhl-haus.struck::after{ width:108%; }
.mhl-haus.removed{ max-width:0 !important; margin-left:-.3em !important; opacity:0 !important; }

.mhl-row{ display:flex; align-items:flex-end; gap:.12em; }
.mhl-mark{ height:25cqw; width:auto; overflow:visible; display:block; }
.mhl-mark path{ stroke-linejoin:miter; stroke-miterlimit:8; }
.mhl-leg{ fill:#2BA53C; stroke:none; transform-box:fill-box; transform-origin:bottom; transform:scaleY(0); transition:transform .55s cubic-bezier(.5,.1,.3,1); }
.mhl-leg.grown{ transform:scaleY(1); }
.mhl-vee{ fill:#232C5E; stroke:none; }
#mhl-vclip{ transform-box:fill-box; transform-origin:left; transform:scaleX(0); transition:transform .55s cubic-bezier(.55,.1,.35,1); }

.mhl-word{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding-bottom:2px; }
.mhl-slogan{ font-style:italic; font-weight:600; color:#2BA53C; font-size:5cqw; white-space:nowrap; opacity:0; transform:translateY(14px); transition:opacity .45s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
.mhl-slogan.show{ opacity:1; transform:none; }
.mhl-wordmark{ font-weight:800; font-size:14cqw; line-height:.86; color:#232C5E; letter-spacing:-1px; opacity:0; transform:translateX(-10px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); white-space:nowrap; }
.mhl-wordmark.show{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .mhl-caption .mhl-w, .mhl-wordmark, .mhl-slogan, .mhl-leg, #mhl-vclip{ transition:none; }
}