/* Gemeinsame Gestaltung aller Referenz-Unterseiten — Typografie, Größe und Farbe wie die Leistungsslides */
:root{--bg:#EFEAF2;--ink:#000;--muted:rgba(0,0,0,.66);--serif:'Bodoni Moda',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif;--line:rgba(0,0,0,.14)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:200;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* Kopf */
.refhead{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px clamp(20px,5vw,56px);background:linear-gradient(to bottom,rgba(239,234,242,.95),rgba(239,234,242,0));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.backlink{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--muted);transition:color .25s ease,transform .25s ease}
.backlink:hover{color:var(--ink);transform:translateX(-4px)}
.refmark{font-family:var(--serif);font-weight:500;font-size:18px;letter-spacing:.02em}

/* Hero — Bodoni 500 (Überschrift), Hanken 200 (Fließtext), Schwarz — wie die Slides */
.hero{padding:9vh 0 5vh}
.kicker{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin:0 0 20px}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,74px);line-height:1.05;margin:0 0 16px;color:var(--ink)}
.hero .lead{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(18px,2.2vw,27px);color:rgba(0,0,0,.8);margin:0 0 30px}
.intro{max-width:64ch;font-family:var(--sans);font-weight:200;font-size:clamp(15px,1.2vw,19px);letter-spacing:.06em;line-height:1.55;color:var(--ink);margin:0}

/* Eckdaten — nur ausgefüllte Felder erscheinen */
.meta{display:flex;flex-wrap:wrap;gap:30px 60px;margin:52px 0 0;padding-top:30px;border-top:1px solid var(--line)}
.meta dt{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.meta dd{margin:0;font-family:var(--serif);font-weight:500;font-size:clamp(16px,1.4vw,21px);color:var(--ink)}

/* Galerie / Parallax */
.gallery{display:flex;flex-direction:column;gap:clamp(40px,9vh,120px);padding:9vh 0 7vh}
figure.frame{margin:0}
.frame{position:relative;overflow:hidden;border-radius:2px;opacity:0;transform:translateY(46px);transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1)}
.frame.in{opacity:1;transform:none}
.frame img{display:block;width:100%;height:auto;transform:scale(1.12);will-change:transform}
.cap{margin-top:14px;text-align:left;font-family:var(--sans);font-weight:200;font-size:13px;letter-spacing:.04em;color:rgba(0,0,0,.6)}
.cap .copy{color:rgba(0,0,0,.42);white-space:nowrap}

/* Bildnachweis */
.credit{font-family:var(--sans);font-weight:200;font-size:13px;letter-spacing:.04em;color:var(--muted);padding-bottom:9vh}

/* Fuß */
.reffoot{border-top:1px solid var(--line);padding:7vh 0 9vh;text-align:center}
.reffoot p{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(18px,2vw,24px);color:rgba(0,0,0,.82);margin:0}
.reffoot a.cta{display:inline-block;margin-top:22px;font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:1px solid rgba(0,0,0,.35);padding:.95em 1.7em;transition:border-color .3s ease,transform .3s ease}
.reffoot a.cta:hover{border-color:rgba(0,0,0,.7);transform:translateX(4px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .frame{transition:opacity .5s ease;transform:none}
  .frame img{transform:none}
}

/* Eingebettet (im Erlebnis-Overlay): eigener Kopf weg, kein eigener Hintergrund — die Glasfläche scheint durch */
.embed body{background:transparent}
.embed .refhead{display:none}
.embed .hero{padding-top:7vh}