/* ============================================================
   Über uns – eine Seite, ein großer Moment:
   die Jahreszahl 1987 als Fenster in den Gastraum.
   Alles andere bleibt ruhig. Fonts: Abril Fatface (nur 1987),
   Cormorant Garamond (Text), Inter (UI).
   ============================================================ */

.u-progress{
  position:fixed;left:0;top:0;height:3px;width:100%;z-index:60;pointer-events:none;
  background:linear-gradient(90deg,var(--verde) 0 33.3%,var(--cream) 33.3% 66.6%,var(--rosso) 66.6%);
  transform-origin:0 50%;transform:scaleX(var(--sp,0));
}

/* ---------- Hero: 1987 als Fenster ---------- */
.u-hero{
  position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;
  padding:calc(var(--nav-h) + 1.2rem) 0 2.2rem;
  background:radial-gradient(70% 50% at 50% 100%,rgba(176,43,255,.2),transparent 70%),var(--bg);
}
.u-stage{width:min(1500px,100% - 2rem);margin-inline:auto;display:grid;gap:clamp(.8rem,2.2vw,1.8rem)}
.u-line{
  font-family:var(--font-display);font-style:italic;font-weight:500;line-height:1.1;
  font-size:clamp(1.45rem,4.2vw,3.3rem);text-align:center;color:var(--cream);text-wrap:balance;
}
.u-knock{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);height:clamp(15rem,33vw,30rem)}
.u-knock-pan{position:absolute;inset:-10% 0;will-change:transform}
.u-knock-pan img{width:100%;height:100%;object-fit:cover;transform:scale(1.25);animation:u-drift 26s ease-in-out infinite alternate}
@keyframes u-drift{from{transform:scale(1.25) translate3d(-2%,0,0)}to{transform:scale(1.05) translate3d(2%,-1%,0)}}
.u-knock-mask{
  position:absolute;inset:0;background:var(--bg);mix-blend-mode:multiply;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:"Abril Fatface",var(--font-display);font-weight:400;
  font-size:min(37vw,35rem);line-height:1;letter-spacing:-.015em;padding-top:.04em;
}
.u-knock-mask span{display:block;animation:u-wipe 1.5s cubic-bezier(.2,.75,.15,1) both}
.u-knock-mask span:nth-child(2){animation-delay:.18s}
@keyframes u-wipe{from{clip-path:inset(100% 0 0 0);transform:translateY(8%)}to{clip-path:inset(0);transform:none}}
.u-hero-foot{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;padding-inline:.4rem}
.u-hero-foot p{font-family:var(--font-display);font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--muted);max-width:34ch}
.u-cta{display:flex;flex-wrap:wrap;gap:.8rem}
.u-cta-c{justify-content:center}

@media (max-width:640px){
  .u-hero{align-items:start}
  .u-knock{height:min(112vw,34rem)}
  .u-knock-mask{flex-direction:column;font-size:min(62vw,24rem);line-height:.8;padding-top:0}
  .u-hero-foot{justify-content:center;text-align:center}
  .u-hero-foot p{max-width:none}
  .u-cta{justify-content:center}
}

/* ---------- Text neben wechselndem Foto ---------- */
.u-story{padding-block:clamp(3.5rem,8vw,6rem) 0}
.u-story-grid{display:grid;gap:3.5rem}
.u-story-media{display:none}
.u-chap h2{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:600;margin-bottom:.9rem}
.u-chap p{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.65rem);line-height:1.5;color:var(--cream);opacity:.88;max-width:36ch}
.u-chap-img{border-radius:6px;aspect-ratio:4/3;object-fit:cover;width:100%;margin-bottom:1.3rem}
@media (min-width:900px){
  .u-story-grid{grid-template-columns:.95fr 1.05fr;gap:clamp(3rem,6vw,6rem);align-items:start}
  .u-story-media{
    display:block;position:sticky;top:calc(var(--nav-h) + 1.5rem);
    height:calc(100svh - var(--nav-h) - 3rem);min-height:420px;
  }
  .u-frame{position:absolute;inset:0;overflow:hidden;border-radius:6px;opacity:0;transform:scale(1.05);
    transition:opacity .9s ease,transform 1.6s cubic-bezier(.2,.7,.2,1)}
  .u-frame.on{opacity:1;transform:none}
  .u-frame img{width:100%;height:100%;object-fit:cover}
  .u-chap{min-height:88svh;display:flex;flex-direction:column;justify-content:center}
  .u-chap-img{display:none}
  .js .u-chap{opacity:.25;transition:opacity .6s ease}
  .js .u-chap.on{opacity:1}
}

/* ---------- Leitsatz, Wort für Wort ---------- */
.u-quote{height:230vh;position:relative;padding:0}
.u-quote-in{
  position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;
  width:min(var(--maxw),100% - 2.5rem);margin-inline:auto;
}
.u-quote-text{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  font-size:clamp(2.7rem,8.6vw,7.4rem);line-height:1.02;letter-spacing:-.005em;max-width:15ch;text-wrap:balance;
}
.u-quote-text .qw{display:inline-block;color:var(--cream);opacity:1;transition:opacity .45s ease,color .45s ease}
.js .u-quote-text .qw{opacity:.14}
.js .u-quote-text .qw.lit{opacity:1}
.u-quote-bar{margin-top:2rem;width:90px;height:4px;transform-origin:0 50%}
.js .u-quote-bar{transform:scaleX(0);transition:transform .8s ease}
.js .u-quote.done .u-quote-bar{transform:none}

/* ---------- Haus: Text, Video, zwei Fotobänder ---------- */
.u-house{padding-block:clamp(3rem,8vw,6rem);overflow:hidden}
.u-house-grid{display:grid;gap:2rem;align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.u-house-copy h2{font-size:clamp(2.2rem,5.4vw,4rem)}
.u-house-copy p{font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.55rem);line-height:1.5;color:var(--muted);max-width:32ch;margin-top:1rem}
.u-video{
  width:min(100%,330px);aspect-ratio:9/16;max-height:600px;border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(176,43,255,.35),0 40px 90px -40px var(--lila-glow);
  justify-self:start;
}
.u-video video{width:100%;height:100%;object-fit:cover}
@media (min-width:900px){
  .u-house-grid{grid-template-columns:1fr auto;gap:5rem}
  .u-video{justify-self:end}
}
.u-rows{display:grid;gap:clamp(.7rem,1.5vw,1rem)}
.u-row{overflow:hidden}
.u-track{display:flex;gap:clamp(.7rem,1.5vw,1rem);width:max-content;will-change:transform;transform:translate3d(var(--tx,0px),0,0)}
.u-it{height:clamp(210px,30vw,360px);aspect-ratio:var(--ar);flex:none;overflow:hidden;border-radius:4px}
.u-it img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.u-it:hover img{transform:scale(1.05)}

/* ---------- Linkliste mit Vorschaubild ---------- */
.u-links{padding-block:clamp(3rem,7vw,5.5rem);background:var(--bg-2);position:relative}
.u-links-h{font-size:clamp(1.7rem,3.4vw,2.4rem);color:var(--muted);font-weight:500;margin-bottom:1.6rem}
.u-linklist{border-top:1px solid var(--line)}
.u-linklist a{
  display:grid;grid-template-columns:64px 1fr;gap:.2rem 1rem;align-items:center;
  padding:1.1rem 0;border-bottom:1px solid var(--line);transition:padding .35s ease,color .25s;
}
.u-linklist a img{grid-row:span 2;width:64px;height:64px;object-fit:cover;border-radius:4px}
.u-l-t{font-family:var(--font-display);font-weight:600;font-size:clamp(2.2rem,8vw,5.2rem);line-height:1}
.u-l-d{color:var(--muted);font-size:.9rem}
.u-linklist a:hover .u-l-t,.u-linklist a:focus-visible .u-l-t{color:var(--gold-2)}
.u-preview{
  position:fixed;left:0;top:0;width:260px;aspect-ratio:4/5;object-fit:cover;border-radius:4px;z-index:20;
  pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:0 30px 70px -20px rgba(0,0,0,.8);
  will-change:transform;
}
@media (min-width:900px){
  .u-linklist a{grid-template-columns:1fr auto;padding:1.5rem 0}
  .u-linklist a img{display:none}
  .u-linklist a:hover{padding-left:1.2rem}
  .u-l-d{font-size:1rem}
}
@media (hover:none){.u-preview{display:none}}

/* ---------- Finale ---------- */
.u-finale{
  padding-block:clamp(5rem,12vw,9rem);text-align:center;overflow:hidden;
  background:radial-gradient(60% 55% at 50% 110%,rgba(176,43,255,.28),transparent 70%),var(--bg);
}
.u-finale-in{display:grid;justify-items:center;gap:1.1rem}
.u-thanks,.u-enjoy{font-family:var(--font-display);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.5;max-width:36ch;color:var(--muted)}
.u-enjoy{font-style:italic}
.u-grazie{
  font-family:var(--font-display);font-style:italic;font-weight:600;line-height:1;margin-top:1.4rem;
  font-size:clamp(3.8rem,15vw,11rem);color:var(--cream);
}
.u-swoosh{width:min(520px,80%);height:auto;overflow:visible}
.u-swoosh path{stroke-dasharray:1;stroke-dashoffset:0}
.js .u-swoosh path{stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1)}
.js .u-swoosh path:nth-child(2){transition-delay:.15s}
.js .u-swoosh path:nth-child(3){transition-delay:.3s}
.js .u-swoosh.in path{stroke-dashoffset:0}
.u-sign{letter-spacing:.14em;font-size:.85rem;color:var(--cream);margin-bottom:1.4rem}

/* Buttons mit leichtem Magnetismus nur per JS (transform) */
.u-mag{will-change:transform}

@media (prefers-reduced-motion:reduce){
  .u-knock-pan img,.u-knock-mask span{animation:none!important}
  .u-knock-pan img{transform:scale(1.1)}
  .js .u-quote-text .qw{opacity:1}
  .js .u-swoosh path{stroke-dashoffset:0}
  .js .u-quote-bar{transform:none}
  .u-quote{height:auto;padding:5rem 0}
  .u-quote-in{position:static;height:auto}
  .js .u-chap{opacity:1}
}