/* KDS Lead Engine – Referenzhäuser-Galerie (Scroll-Choreografie, 3D-Tilt, FLIP-Expand) */
.gh,.gh-detail{
  --accent:var(--c-accent,#0973B9);
  --ink:#111827; --text:#3A3A3A; --muted:#8A8F99; --line:#E9EBEF;
  --soft:#F4F6F9;
  --gh-font:var(--font,'Roboto',system-ui,Arial,sans-serif);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
}
.gh,.gh-detail,.gh *,.gh-detail *{box-sizing:border-box}
.gh-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

.gh{max-width:1180px;margin:0 auto;padding:92px 24px 104px;font-family:var(--gh-font);color:var(--text)}

/* Kopf */
.gh__head{margin-bottom:48px;opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.gh__head.is-in{opacity:1;transform:none}
.gh__eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.gh__eyebrow::before{content:"";width:34px;height:2px;background:var(--accent)}
.gh__title{font-weight:300;font-size:clamp(1.8rem,3.6vw,2.7rem);color:var(--ink);line-height:1.12}
.gh__title b{font-weight:700}

/* Raster */
.gh__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:218px;gap:16px}
.gh-card{position:relative;border-radius:12px;cursor:pointer;perspective:1000px;background:var(--soft);
  opacity:0;transform:translateY(34px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0ms)}
.gh-card.is-in{opacity:1;transform:none}
.gh-card--lg{grid-column:span 2;grid-row:span 2}

.gh-card__inner{position:absolute;inset:0;border-radius:12px;overflow:hidden;transform-style:preserve-3d;
  transition:transform .35s var(--ease-out),box-shadow .5s var(--ease);box-shadow:0 6px 18px -10px rgba(16,24,39,.4)}
.gh-card:hover .gh-card__inner{box-shadow:0 34px 60px -26px rgba(16,24,39,.55)}
.gh-card__img{position:absolute;inset:-6%;background-size:cover;background-position:center;
  transition:transform .5s var(--ease-out)}
.gh-card__lines{position:absolute;inset:0;opacity:.10;mix-blend-mode:screen;background-image:
  repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.6) 38px 39px),
  repeating-linear-gradient(0deg,transparent 0 38px,rgba(255,255,255,.6) 38px 39px)}
.gh-card__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.66))}
.gh-card__sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.gh-card:hover .gh-card__sheen{transform:translateX(120%)}

.gh-card__bar{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 22px;color:#fff;transform:translateZ(40px)}
.gh-card__title{display:block;font-size:1.12rem;font-weight:500;letter-spacing:.01em}
.gh-card--lg .gh-card__title{font-size:1.5rem;font-weight:400}
.gh-card__loc{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-top:5px}
.gh-card__loc::before{content:"";width:14px;height:1px;background:var(--accent)}
.gh-card__rule{height:1px;background:var(--accent);width:0;margin-top:12px;transition:width .5s var(--ease);box-shadow:0 0 10px var(--accent)}
.gh-card:hover .gh-card__rule{width:52px}

.gh-card__cue{position:absolute;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25);
  color:#fff;opacity:0;transform:translateY(-6px) translateZ(50px);transition:.4s var(--ease)}
.gh-card:hover .gh-card__cue{opacity:1;transform:translateY(0) translateZ(50px)}
.gh-card__cue svg{width:17px;height:17px;stroke:#fff;stroke-width:2;fill:none}

@media(max-width:980px){.gh__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}.gh-card--lg{grid-column:span 2;grid-row:span 2}}
@media(max-width:560px){.gh__grid{grid-template-columns:1fr;grid-auto-rows:200px}.gh-card--lg{grid-row:span 2}}

/* Detail – immersive, FLIP-Expand */
.gh-detail{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:28px;font-family:var(--gh-font)}
.gh-detail__bg{position:absolute;inset:0;background:rgba(12,17,28,.62);backdrop-filter:blur(8px);opacity:0;transition:opacity .5s var(--ease)}
.gh-detail.is-open .gh-detail__bg{opacity:1}
.gh-detail__panel{position:relative;width:min(1060px,94vw);height:min(70vh,640px);max-height:88vh}
.gh-detail__hero{position:absolute;inset:0;border-radius:16px;background-size:cover;background-position:center;
  box-shadow:0 50px 100px -30px rgba(0,0,0,.7);will-change:transform}
.gh-detail__hero::after{content:"";position:absolute;inset:0;border-radius:16px;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.78))}
.gh-detail__content{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:46px clamp(28px,5vw,64px);color:#fff;
  opacity:0;transform:translateY(26px);transition:opacity .5s var(--ease) .18s,transform .6s var(--ease-out) .18s}
.gh-detail.is-open .gh-detail__content{opacity:1;transform:none}
.gh-detail__loc{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#7FC0EC;font-weight:700;display:flex;align-items:center;gap:10px}
.gh-detail__loc::before{content:"";width:26px;height:2px;background:var(--accent)}
.gh-detail__title{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:300;margin:14px 0 16px;max-width:18ch}
.gh-detail__desc{font-size:15.5px;line-height:1.78;color:rgba(255,255,255,.9);max-width:60ch}
.gh-detail__close{position:absolute;top:18px;right:18px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);color:#fff;font-size:24px;line-height:1;cursor:pointer;
  opacity:0;transition:opacity .4s var(--ease) .25s,background .25s,transform .25s}
.gh-detail.is-open .gh-detail__close{opacity:1}
.gh-detail__close:hover{background:var(--accent);transform:rotate(90deg)}
.gh-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.34);backdrop-filter:blur(6px);color:#fff;cursor:pointer;
  display:grid;place-items:center;opacity:0;transition:opacity .4s var(--ease) .3s,background .25s,border-color .25s}
.gh-detail.is-open .gh-nav{opacity:1}
.gh-nav:hover{background:var(--accent);border-color:var(--accent)}
.gh-nav svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.gh-nav--prev{left:max(18px,calc(50% - 596px))}
.gh-nav--next{right:max(18px,calc(50% - 596px))}
@media(max-width:560px){.gh-nav{width:46px;height:46px}.gh-nav--prev{left:14px}.gh-nav--next{right:14px}}

@media(prefers-reduced-motion:reduce){
  .gh *,.gh-detail *{transition-duration:.001ms!important}
  .gh-card,.gh__head{opacity:1;transform:none}
}