/* MHS Autohotel — Pageloader.
   Phase 1 laeuft ohne jede Datei (nur CSS/SVG), damit sofort etwas steht.
   Phase 2 zeigt die Blender-Zeichnung der Doppelparker-Halle, sobald sie da ist.
   Phase 3 blendet nach oben und unten weg und gibt die Seite frei. */

.ldr{position:fixed;inset:0;z-index:9999;background:transparent;overflow:hidden;isolation:isolate;
  --g:#c9a870; --l:rgba(255,255,255,.80); --d:rgba(255,255,255,.34);
  font-family:'Good Times Rg','Inter',sans-serif}
.ldr[hidden]{display:none}
html.ldr-an,html.ldr-an body{overflow:hidden!important;height:100%}

/* ── Zeichnung ───────────────────────────────────────────────── */
.ldr-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.015);transition:opacity .8s ease}
.ldr.is-film .ldr-film{opacity:1}
.ldr-vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 74% 74% at 50% 48%,transparent 46%,rgba(0,0,0,.72) 100%)}

/* ── Raster, Schnittmarken, Fadenkreuz ───────────────────────── */
.ldr-plan{position:absolute;inset:0;pointer-events:none}
.ldr-plan line,.ldr-plan path,.ldr-plan circle,.ldr-plan rect{vector-effect:non-scaling-stroke}
.ldr-ecke{stroke:var(--g);stroke-width:1;opacity:0;transition:opacity .45s ease}
.ldr.is-marken .ldr-ecke{opacity:.85}
.ldr-ecke:nth-of-type(2){transition-delay:.07s}
.ldr-ecke:nth-of-type(3){transition-delay:.14s}
.ldr-ecke:nth-of-type(4){transition-delay:.21s}
.ldr-kreuz{stroke:rgba(255,255,255,.22);stroke-width:1;opacity:0;transition:opacity .6s ease .3s}
.ldr-ring{fill:none;stroke:var(--g);stroke-width:1;opacity:0;transition:opacity .6s ease .34s}
.ldr.is-marken .ldr-kreuz,.ldr.is-marken .ldr-ring{opacity:1}
.ldr-teil{stroke:rgba(255,255,255,.3);stroke-width:1;opacity:0;transition:opacity .5s ease}
.ldr.is-marken .ldr-teil{opacity:1}

/* ── Horizontlinie: waechst zuerst, faehrt dann auseinander ──── */
.ldr-hor{position:absolute;left:50%;top:50%;width:0;height:1px;background:var(--g);
  transform:translate(-50%,-50%);transition:width .72s cubic-bezier(.16,1,.3,1)}
.ldr.is-linie .ldr-hor{width:calc(100% - 96px)}
.ldr.is-marke .ldr-hor,.ldr.is-marke .ldr-ring,.ldr.is-marke .ldr-kreuz,
.ldr.is-marke .ldr-wechsel{opacity:0;transition:opacity .45s ease}
.ldr.is-auf .ldr-hor{opacity:0;transition:opacity .5s ease}
.ldr-spalt{position:absolute;left:48px;right:48px;height:1px;background:rgba(201,168,112,.42);
  opacity:0;transition:transform 1.5s cubic-bezier(.22,1,.36,1),opacity .6s ease}
.ldr.is-auf .ldr-spalt{opacity:1}
.ldr-spalt.o{top:50%;transform:translateY(0)}
.ldr-spalt.u{top:50%;transform:translateY(0)}
.ldr.is-auf .ldr-spalt.o{transform:translateY(-32vh)}
.ldr.is-auf .ldr-spalt.u{transform:translateY(32vh)}

/* ── Schrift ─────────────────────────────────────────────────── */
.ldr-txt{position:absolute;font-size:9px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--d);white-space:nowrap;opacity:0;transform:translateY(4px);
  transition:opacity .5s ease,transform .5s ease}
.ldr.is-daten .ldr-txt{opacity:1;transform:none}
.ldr-txt b{color:var(--l);font-weight:400}
.ldr-txt.g{color:var(--g)}
.ldr-ol{top:42px;left:48px}
.ldr-or{top:42px;right:48px;text-align:right}
.ldr-ul{bottom:44px;left:48px}
.ldr-ur{bottom:44px;right:48px;text-align:right}
.ldr-ol{transition-delay:.05s} .ldr-or{transition-delay:.13s}
.ldr-ul{transition-delay:.21s} .ldr-ur{transition-delay:.29s}
.ldr-txt .z{display:block;margin-top:7px}

/* wechselnde technische Zeile */
.ldr-wechsel{position:absolute;left:48px;top:50%;margin-top:26px;font-size:9px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--l);white-space:nowrap;opacity:0;transition:opacity .4s ease}
.ldr.is-film .ldr-wechsel{opacity:1}
.ldr-wechsel::before{content:'';display:inline-block;width:22px;height:1px;background:var(--g);
  vertical-align:middle;margin-right:12px}
.ldr.is-marke .ldr-wechsel,.ldr.is-auf .ldr-wechsel{opacity:0;transition:opacity .4s ease}

/* ── Bemassung unten ─────────────────────────────────────────── */
.ldr-mass{position:absolute;left:50%;bottom:112px;transform:translateX(-50%);
  width:0;max-width:calc(100% - 140px);height:26px;overflow:visible;opacity:0;
  transition:width 1.1s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.ldr.is-mass .ldr-mass{width:320px;opacity:1}
.ldr-mass i{position:absolute;top:13px;left:0;right:0;height:1px;background:rgba(255,255,255,.4)}
.ldr-mass i::before,.ldr-mass i::after{content:'';position:absolute;top:-6px;width:1px;height:13px;
  background:rgba(255,255,255,.55)}
.ldr-mass i::before{left:0} .ldr-mass i::after{right:0}
.ldr-mass span{position:absolute;left:50%;top:-4px;transform:translateX(-50%);background:#000;
  padding:0 10px;font-size:9px;letter-spacing:.26em;color:var(--l)}

/* ── Wortmarke ───────────────────────────────────────────────── */
.ldr-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;gap:.1em;font-size:clamp(1.1rem,3.4vw,2.2rem);letter-spacing:.3em;
  color:#fff;text-indent:.3em}
.ldr-mark i{display:inline-block;font-style:normal;opacity:0;transform:translateY(14px);
  filter:blur(6px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),filter .5s ease}
.ldr.is-marke .ldr-mark i{opacity:1;transform:none;filter:none}
.ldr-mark .sp{width:.5em}
.ldr-unter{position:absolute;left:50%;top:50%;margin-top:34px;transform:translateX(-50%);
  font-size:8.5px;letter-spacing:.42em;color:var(--g);white-space:nowrap;opacity:0;
  transition:opacity .6s ease .45s}
.ldr.is-marke .ldr-unter{opacity:1}

/* ── Zaehler + Balken ────────────────────────────────────────── */
.ldr-zahl{position:absolute;right:48px;bottom:96px;font-size:clamp(2.6rem,7vw,4.6rem);
  line-height:1;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  opacity:0;transition:opacity .5s ease}
.ldr.is-daten .ldr-zahl{opacity:.92}
.ldr.is-marke .ldr-zahl{opacity:0;transition:opacity .4s ease}
.ldr-zahl sup{font-size:.26em;vertical-align:super;margin-left:.25em;color:var(--g);letter-spacing:.1em}
.ldr-bar{position:absolute;left:48px;right:48px;bottom:76px;height:1px;background:rgba(255,255,255,.12);
  opacity:0;transition:opacity .5s ease}
.ldr.is-daten .ldr-bar{opacity:1}
.ldr.is-marke .ldr-bar{opacity:0}
.ldr-bar i{display:block;height:100%;width:0;background:var(--g);transition:width .25s linear}

/* ── Korn ────────────────────────────────────────────────────── */
.ldr-korn{position:absolute;inset:-50%;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:ldrKorn .5s steps(3) infinite}
@keyframes ldrKorn{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}}

/* ── Abgang ──────────────────────────────────────────────────── */
.ldr-tor{position:absolute;left:0;right:0;height:50.2%;background:#000;z-index:-1;
  transition:transform 1.05s cubic-bezier(.76,0,.24,1)}
.ldr-tor.o{top:0} .ldr-tor.u{bottom:0}
.ldr.is-auf .ldr-tor.o{transform:translateY(-101%)}
.ldr.is-auf .ldr-tor.u{transform:translateY(101%)}
.ldr.is-auf .ldr-film,.ldr.is-auf .ldr-plan,.ldr.is-auf .ldr-txt,
.ldr.is-auf .ldr-mark,.ldr.is-auf .ldr-unter,.ldr.is-auf .ldr-wechsel,
.ldr.is-auf .ldr-mass,.ldr.is-auf .ldr-korn,.ldr.is-auf .ldr-vig{opacity:0;transition:opacity .45s ease}
.ldr.is-weg{opacity:0;pointer-events:none;transition:opacity .3s ease}

@media (max-width:760px){
  .ldr-ol,.ldr-ul{left:22px} .ldr-or,.ldr-ur{right:22px}
  .ldr-zahl{right:22px;bottom:84px} .ldr-bar{left:22px;right:22px}
  .ldr-wechsel{left:22px;right:22px;top:auto;bottom:150px;margin-top:0;font-size:8px;letter-spacing:.2em;white-space:normal}
  .ldr-txt{font-size:8px;letter-spacing:.22em;white-space:normal;max-width:45vw}
  .ldr-ol .z{display:none}   /* Strasse weglassen, sonst stoesst sie an die Koordinaten */
  .ldr-spalt{left:22px;right:22px}
  .ldr.is-linie .ldr-hor{width:calc(100% - 44px)}
  .ldr-mass{bottom:104px} .ldr.is-mass .ldr-mass{width:190px}
  .ldr-mass span{white-space:nowrap;font-size:8px;letter-spacing:.18em;padding:0 7px}
}
@media (prefers-reduced-motion:reduce){
  .ldr-film,.ldr-korn{display:none}
  .ldr *{transition-duration:.2s!important;animation:none!important}
}