/* ==========================================================================
   Kecksilber — Schmuck aus Wien seit 1962
   Typografie: PP Right Serif Light (Display & Lesetext), DM Sans (Mikro-Typo)
   ========================================================================== */


:root{
  --paper:#FAF9F6;
  --paper-2:#F2EFE9;
  --ink:#16140F;
  --ink-2:#3A362F;
  --muted:#7A756C;
  --line:rgba(22,20,15,.14);
  --umber:#19130E;
  --umber-2:#231B14;
  --cream:#EDE6DA;
  --cream-2:rgba(237,230,218,.62);
  --sage:#2F3A31;
  --serif:"PP Right Serif","Times New Roman",Times,serif;
  --sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --m:clamp(16px,2.75vw,40px);
  --gut:clamp(10px,1.1vw,16px);
  --hd:clamp(64px,7vw,100px);
  /* Abstands-System: alle Innen- und Außenabstände nutzen nur diese Stufen */
  --sp-lab:20px;                         /* Label → Überschrift */
  --sp-2:14px;                           /* eng: Zeilen, Linien */
  --sp-3:24px;                           /* Text → Link, kleine Gruppen */
  --sp-4:clamp(32px,3.5vw,48px);         /* Gruppen innerhalb eines Blocks */
  --sp-5:clamp(40px,6vw,88px);           /* Überschrift → Inhalt */
  --sp-6:clamp(64px,9vw,136px);          /* Block → Block */
  --sec:clamp(56px,6.5vw,100px);         /* Abschnitt oben/unten (zwei aufeinander = doppelt) */
  --panel:clamp(28px,3.5vw,48px);        /* Innenrand unten in Bild-/Textflächen */
  --top:calc(var(--hd) + clamp(8px,2vh,24px));   /* Start unter dem Header (Split-Flächen) */
  --top-page:calc(var(--hd) + var(--sp-5));      /* Start unter dem Header (Textseiten) */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.76,0,.24,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-synthesis:none;-webkit-text-size-adjust:100%}
/* Keine sichtbaren Scrollbars: sonst verschwindet die Leiste beim Öffnen des Menüs (Scroll-Stopp) und das Layout springt um ihre Breite */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-weight:300;font-size:18px;line-height:1.35;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;transition:background-color .9s var(--ease),color .9s var(--ease)}
body.is-dark{background:var(--umber);color:var(--cream)}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul{margin:0}
ol,ul{list-style:none;padding:0}
em,i{font-style:italic}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.sr{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--ink);color:var(--paper);padding:10px 14px;font:500 12px var(--sans)}
.skip:focus{top:12px}

/* ---------- Typografie ---------- */
.d-xxl{font-size:clamp(72px,17.4vw,300px);line-height:.82;letter-spacing:-.045em}
.d-xl{font-size:clamp(60px,10.4vw,172px);line-height:.86;letter-spacing:-.035em}
.d-l{font-size:clamp(46px,6.25vw,90px);line-height:.92;letter-spacing:-.028em}
.d-m{font-size:clamp(36px,4.4vw,70px);line-height:.98;letter-spacing:-.022em}
.d-s{font-size:clamp(28px,2.9vw,44px);line-height:1.04;letter-spacing:-.015em}
.lede{font-size:clamp(22px,2.25vw,34px);line-height:1.12;letter-spacing:-.008em}
.lede.ind{text-indent:2.8em}
.copy{font-size:clamp(17px,1.25vw,19px);line-height:1.42}
.copy p + p{margin-top:.9em}
.sans{font-family:var(--sans);font-weight:400;font-size:13.5px;line-height:1.42;letter-spacing:.005em}
.cap{font-family:var(--sans);font-weight:400;font-size:10px;line-height:1.3;letter-spacing:.06em;text-transform:uppercase}
.cap-l{font-family:var(--sans);font-weight:400;font-size:11.5px;line-height:1.3;letter-spacing:.05em;text-transform:uppercase}
.vlab{position:absolute;left:-6px;bottom:0;transform:translateX(-100%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap}
.num{font-feature-settings:"tnum" 1,"lnum" 1}
sup.ix{font-family:var(--sans);font-size:9px;letter-spacing:.04em;vertical-align:top;position:relative;top:.55em;margin-right:.35em;font-weight:400;font-style:normal}
.it{font-style:italic}
.muted{color:var(--muted)}
.is-dark .muted,.dark .muted{color:var(--cream-2)}

/* SplitText Zeilen */
/* Ausgleich nur unten: negative Margins oben und unten würden zwischen den Zeilen zusammenfallen und jede Folgezeile während der Animation um .06em nach unten schieben */
.ln-mask{padding:.06em 0 .14em;margin:0 0 -.2em;top:-.06em}
.ind div{text-indent:0}
.ind > .ln-mask:first-child .ln,.ind > .ln:first-child{text-indent:2.8em}
.js [data-split]{visibility:hidden}

/* ---------- Links ---------- */
.ul{position:relative;display:inline-block}
.ul::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .7s var(--ease)}
.ul:hover::after{transform-origin:left;animation:ulx .9s var(--ease)}
@keyframes ulx{0%{transform:scaleX(1);transform-origin:right}45%{transform:scaleX(0);transform-origin:right}46%{transform:scaleX(0);transform-origin:left}100%{transform:scaleX(1);transform-origin:left}}
.arrow{display:inline-flex;align-items:center;gap:.6em}
.arrow svg{width:1em;height:1em;transition:transform .6s var(--ease)}
.arrow:hover svg{transform:translateX(.35em)}
.go{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;gap:.7em;align-items:center;padding:10px 0;margin:-10px 0}
.go i{font-style:normal;display:inline-block;transition:transform .6s var(--ease)}
.go:hover i{transform:translateX(5px)}

/* ---------- Header ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:80;transition:transform .8s var(--ease);display:flex;justify-content:space-between;align-items:flex-start;padding:clamp(18px,2.2vw,30px) var(--m);color:#fff;mix-blend-mode:difference;pointer-events:none}
.hd > *{pointer-events:auto}
.hd-hide .hd{transform:translateY(-110%)}
.menu-open .hd{transform:none}
.hd-logo img{height:clamp(22px,2.55vw,37px);width:auto;filter:brightness(0) invert(1)}
.hd-r{display:flex;gap:clamp(18px,2.4vw,36px);align-items:center;padding-top:4px}
.hd-r a,.hd-r button{font-family:var(--sans);font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1;padding:6px 0;min-height:32px;display:inline-flex;align-items:center}
.hd-menu .t{display:inline-block;overflow:hidden;height:1.05em}
.hd-menu .t span{display:block;transition:transform .7s var(--ease)}
.menu-open .hd-menu .t span{transform:translateY(-100%)}
.hd-menu .dots{display:inline-flex;gap:3px;margin-left:10px}
.hd-menu .dots i{width:3px;height:3px;border-radius:50%;background:currentColor;transition:transform .5s var(--ease)}
.hd-menu:hover .dots i:nth-child(1){transform:translateY(-3px)}
.hd-menu:hover .dots i:nth-child(3){transform:translateY(3px)}

/* ---------- Menü ---------- */
.menu{position:fixed;inset:0;z-index:70;background:var(--paper);color:var(--ink);visibility:hidden;clip-path:inset(0 0 100% 0)}
.menu-in{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:1fr auto;row-gap:24px;column-gap:var(--gut);padding:var(--top-page) var(--m) var(--panel)}
.menu-nav{grid-column:1/8;align-self:start;display:flex;flex-direction:column}
.menu-nav a{display:flex;align-items:flex-start;font-size:clamp(30px,min(4.2vw,5.6vh),66px);line-height:.97;letter-spacing:-.028em;padding:.02em 0;width:max-content;max-width:100%;transition:color .5s var(--ease)}
.menu-nav a .w{display:inline-block;transition:padding-left .7s var(--ease),text-decoration-color .5s var(--ease);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:transparent}
.menu-nav a sup.ix{top:.9em}
.menu-nav:hover a{color:#B8B2A7}
.menu-nav a:hover,.menu-nav a[aria-current="page"]{color:var(--ink)}
.menu-nav a:hover .w{padding-left:.18em}
.menu-nav a[aria-current="page"] .w{text-decoration-color:currentColor}
.menu-fig{grid-column:9/13;align-self:start;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);height:min(54vh,520px);justify-self:end;width:auto}
.menu-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.menu-fig figcaption{position:absolute;left:12px;bottom:12px;z-index:2;color:#fff;mix-blend-mode:difference}
.menu-foot{grid-column:1/-1;align-self:end;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);border-top:1px solid var(--line);padding-top:var(--sp-2)}
.menu-foot > div{grid-column:span 3}
.menu-foot p{font-family:var(--sans);font-size:12.5px;line-height:1.45}
.menu-foot .cap{color:var(--muted);margin-bottom:6px}

/* ---------- Vorhang (Seitenübergang / Intro) ---------- */
.curtain{position:fixed;inset:0;z-index:95;background:var(--umber);color:var(--cream);pointer-events:none;visibility:hidden;display:flex;align-items:center;justify-content:center}
.pt-cover .curtain,.intro .curtain{visibility:visible}
.curtain-mark{width:58px;height:auto;filter:brightness(0) invert(.9);opacity:.9}
.curtain-year{position:absolute;left:var(--m);bottom:clamp(18px,3vw,36px);font-size:clamp(64px,12vw,200px);line-height:.8;letter-spacing:-.04em;display:none}
.intro .curtain-year{display:block}
.curtain-meta{position:absolute;right:var(--m);bottom:clamp(22px,3.2vw,40px);text-align:right;display:none}
.intro .curtain-meta{display:block}
.curtain-top{position:absolute;left:var(--m);top:clamp(18px,2.2vw,30px);display:none}
.intro .curtain-top{display:block}

/* ---------- Cursor-Label ---------- */
.cursor{position:fixed;left:0;top:0;z-index:85;pointer-events:none;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:10px;letter-spacing:.07em;text-transform:uppercase;transform:scale(0);will-change:transform}
.is-dark .cursor,.dark .cursor{background:var(--cream);color:var(--ink)}
@media (hover:none){.cursor{display:none}.hint-mouse{display:none}}
@media (hover:hover){.hint-touch{display:none}}

/* ---------- Bilder ---------- */
.ph{position:relative;overflow:hidden;background:var(--paper-2)}
.dark .ph,.is-dark .ph{background:var(--umber-2)}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.par img{position:absolute;left:0;top:-8%;height:116%}
.js [data-reveal]{clip-path:inset(100% 0 0 0)}
figcaption.fc{display:flex;justify-content:space-between;gap:12px;margin-top:9px}
.fig-r{position:relative}

/* ---------- Layout ---------- */
.wrap{padding-left:var(--m);padding-right:var(--m)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.sec{position:relative;padding-top:var(--sec);padding-bottom:var(--sec)}
.dark{background:var(--umber);color:var(--cream)}
main{position:relative;z-index:2}

/* =========================================================================
   STARTSEITE
   ========================================================================= */

/* --- Hero: geteilter Bildschirm --- */
.hero{position:relative;overflow:hidden;height:100vh;height:100svh;min-height:min(620px,100svh);display:grid;grid-template-columns:1fr 1fr}
.hero-stage{position:relative;overflow:hidden;background:var(--umber)}
.hero-slide{position:absolute;inset:0;overflow:hidden}
.hero-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-slide:not(.on){visibility:hidden}
.hero-slide.on{visibility:visible}
.hero-thumbs{position:absolute;left:50%;bottom:var(--panel);transform:translateX(-50%);display:flex;align-items:flex-end;gap:8px;z-index:3}
.hero-thumb{position:relative;width:clamp(48px,4.8vw,70px);aspect-ratio:7/9;overflow:hidden;outline:1px solid rgba(255,255,255,.0);outline-offset:3px;transition:width .8s var(--ease),outline-color .5s}
.hero-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),filter .5s}
.hero-thumb:not(.on) img{filter:saturate(.75) brightness(.86)}
.hero-thumb:hover img{transform:scale(1.08);filter:none}
.hero-thumb.on{width:clamp(62px,6.4vw,92px);outline-color:rgba(255,255,255,.75)}
.hero-thumb .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.9);transform-origin:left;transform:scaleX(0)}
.hero-cap{position:absolute;right:var(--m);bottom:var(--panel);z-index:3;color:#fff;text-align:right;mix-blend-mode:difference}
.hero-cap .n{display:block;margin-bottom:4px}
.hero-txt{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--top) var(--m) var(--panel);text-align:center}
.hero-txt h1{max-width:9.4em}
.hero-mini{position:relative;width:clamp(140px,min(20vw,28svh),290px);aspect-ratio:4/5;flex:none}
.hero-mini .ph{position:absolute;inset:0}
.hero-mini .ph img{position:absolute;inset:0}
.hero-mini .mini{position:absolute;inset:0;visibility:hidden}
.hero-mini .mini.on{visibility:visible}
.hero-mini .vlab{z-index:2}
.hero-foot{max-width:26em}
.hero-foot .sans{font-size:14px}
.scroll-cue{position:absolute;left:var(--m);bottom:var(--panel);display:flex;align-items:center;gap:10px}
.scroll-cue i{display:block;width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--ink);animation:cue 2.4s var(--ease-io) infinite}
@keyframes cue{to{top:100%}}

/* --- Charakter: Expansion --- */
.xp{position:relative;height:100vh;height:100svh;min-height:min(640px,100svh);overflow:hidden}
.xp-box{position:absolute;overflow:hidden;z-index:2;background:var(--umber)}
.xp-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.xp-box .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,8,.42),rgba(15,11,8,0) 34%,rgba(15,11,8,0) 62%,rgba(15,11,8,.38));opacity:0}
.xp-a{left:var(--m);top:calc(var(--hd) - 30px);width:clamp(150px,18vw,262px);aspect-ratio:13/16}
.xp-b{position:absolute;left:calc(var(--m) + clamp(150px,18vw,262px) + var(--gut));top:calc(var(--hd) - 30px);width:clamp(110px,11.5vw,166px);aspect-ratio:4/5;z-index:1}
.xp-c{position:absolute;right:var(--m);top:calc(var(--hd) - 30px);width:clamp(220px,32vw,460px);aspect-ratio:3/2;z-index:1}
.xp-c figcaption{position:absolute;right:0;bottom:-20px}
.xp-p{position:absolute;left:calc(var(--m) + 22.5%);top:38%;width:min(17em,40vw);z-index:3}
.xp-p2{position:absolute;left:50%;top:calc(var(--hd) + 2vh);transform:translateX(-50%);width:min(36em,72vw);text-align:center;color:#fff;z-index:4;opacity:0}
.xp-h{position:absolute;left:var(--m);right:var(--m);bottom:var(--panel);display:flex;justify-content:space-between;align-items:center;z-index:4;white-space:nowrap}
.xp-h>span{display:block}
.xp-miv{position:absolute;--bw:clamp(110px,11.5vw,166px);--lw:clamp(72px,7.6vw,110px);left:calc(var(--m) + clamp(150px,18vw,262px) + var(--bw) + 2 * var(--gut));top:calc(var(--hd) - 30px + var(--bw) * 1.25 - var(--lw) * 162 / 169);width:var(--lw);aspect-ratio:169/162;z-index:1}
.xp-miv svg{display:block;width:100%;height:100%}
.xp-h .wi{display:inline-block;will-change:transform}
.miv-svg{display:block;width:100%;height:100%;overflow:visible}

/* --- Werkstatt (dunkel) --- */
.ws{position:relative}
.ws-intro{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.ws-l{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:var(--panel) var(--m)}
.ws-l .lede{max-width:15.5em;color:var(--cream)}
.ws-small{display:flex;align-items:flex-end;gap:var(--sp-3)}
.ws-small .ph{width:clamp(130px,13.5vw,196px);aspect-ratio:5/6}
.ws-small p{max-width:21em;color:var(--cream)}
.ws-r{position:relative;overflow:hidden}
.ws-r .ph{position:absolute;inset:0}
.proc{position:relative;height:100vh;height:100svh;overflow:hidden}
.proc-head{position:absolute;left:var(--m);top:calc(var(--hd) + 2vh);right:var(--m);display:flex;justify-content:space-between;align-items:flex-start;z-index:2}
.proc-prog{width:clamp(120px,14vw,200px);height:1px;background:rgba(237,230,218,.2);position:relative;margin-top:8px}
.proc-prog i{position:absolute;inset:0;background:var(--cream);transform-origin:left;transform:scaleX(0)}
.proc-track{position:absolute;left:0;top:0;height:100%;display:flex;align-items:center;gap:clamp(56px,7vw,120px);padding:0 var(--m) 0 calc(var(--m) + 20vw);will-change:transform}
.step{position:relative;flex:none;display:flex;flex-direction:column;gap:14px}
.step .ph{width:clamp(220px,24vw,360px);aspect-ratio:4/5}
.step.w .ph{width:clamp(300px,38vw,560px);aspect-ratio:3/2}
.step.t .ph{width:clamp(180px,18vw,260px);aspect-ratio:2/3}
.step:nth-child(even){transform:translateY(7vh)}
.step:nth-child(3n){transform:translateY(-5vh)}
.step-t{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:baseline;max-width:24em}
.step-t .n{color:var(--cream-2)}
.step-t h3{font-size:clamp(26px,2.4vw,38px);line-height:1;letter-spacing:-.015em}
.step-t p{grid-column:2;margin-top:8px;font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--cream-2);max-width:24em}
.step-end{flex:none;width:clamp(280px,30vw,440px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;padding-right:6vw}
.punze{width:clamp(84px,8vw,120px);filter:brightness(0) invert(.92)}
.step-end .d-m{color:var(--cream)}

/* --- Stücke: Ziehen --- */
.pcs{padding:var(--sec) 0}
.pcs-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end;margin-bottom:var(--sp-5)}
.pcs-head h2{grid-column:1/9}
.pcs-head .side{grid-column:10/13;display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;padding-bottom:.6em}
.rail{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y}
.rail.drag{cursor:grabbing}
.rail-track{display:flex;gap:var(--gut);padding:0 var(--m);will-change:transform;width:max-content}
.card{flex:none;width:clamp(220px,22.4vw,322px);user-select:none}
.card .ph{aspect-ratio:7/9}
.card .ph img{pointer-events:none;-webkit-user-drag:none;transition:transform 1.1s var(--ease)}
.card:hover .ph img{transform:scale(1.045)}
.card figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:9px}
.card figcaption .m{color:var(--muted)}
.rail-foot{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-3) var(--m) 0}
.rail-prog{flex:1;max-width:260px;height:1px;background:var(--line);position:relative;margin-left:auto}
.rail-prog i{position:absolute;left:0;top:0;height:100%;width:30%;background:var(--ink)}
@media (hover:none){.rail{overflow-x:auto;scroll-snap-type:x mandatory;cursor:auto;touch-action:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.rail::-webkit-scrollbar{display:none}.card{scroll-snap-align:start}.rail{scroll-padding:var(--m)}}

/* --- Seit 1962 --- */
.yrs{position:relative}
.yrs-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.yrs-imgs{grid-column:1/6;display:flex;gap:var(--gut);align-items:flex-start}
.yrs-imgs .a{width:62%;aspect-ratio:13/16}
.yrs-imgs .b{width:38%;aspect-ratio:3/4;margin-top:16vw}
.yrs-imgs .a img{filter:grayscale(1) contrast(1.05)}
.yrs-txt{grid-column:7/12;padding-top:clamp(40px,14vw,220px)}
.yrs-txt .lede{margin-bottom:var(--sp-3)}
.yrs-list{margin-top:var(--sp-6);border-top:1px solid var(--line)}
.yr{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:baseline;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line);position:relative}
.yr .y{grid-column:1/5;font-size:clamp(44px,6.4vw,104px);line-height:.9;letter-spacing:-.035em;transition:transform .9s var(--ease)}
.yr .w{grid-column:6/9;font-size:clamp(20px,1.8vw,28px);line-height:1.1}
.yr .t{grid-column:9/13;font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.yr:hover .y{transform:translateX(.12em)}
.peek{position:fixed;left:0;top:0;z-index:60;width:clamp(150px,13vw,210px);aspect-ratio:4/5;pointer-events:none;overflow:hidden;opacity:0;visibility:hidden}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:none){.peek{display:none}}

/* --- Zwei Häuser --- */
.houses-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-bottom:var(--sp-6)}
.houses-head h2{grid-column:1/10}
.houses-head p{grid-column:10/13;align-self:end}
.house{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start;position:relative}
.house + .house{margin-top:var(--sec)}
.house .big{grid-column:1/7;grid-row:1/3;aspect-ratio:4/5}
.house .info{grid-column:8/13;grid-row:1;display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4)}
.house .info h3{transition:font-style .3s}
.house:hover .info h3 em{font-style:normal}
.house .small{grid-column:8/11;grid-row:2;align-self:end;aspect-ratio:4/5;margin-top:var(--sp-5);width:80%}
.house.r .big{grid-column:7/13;grid-row:1/3}
.house.r .info{grid-column:1/6;grid-row:1}
.house.r .small{grid-column:2/5;grid-row:2;align-self:end}
.dl{display:grid;grid-template-columns:auto 1fr;column-gap:24px;row-gap:6px;font-family:var(--sans);font-size:13px;line-height:1.45;border-top:1px solid var(--line);padding-top:var(--sp-2);max-width:30em}
.dl dt{color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.dark .dl,.is-dark .dl{border-color:rgba(237,230,218,.2)}

/* --- Gutscheine: Kuvert --- */
.gift{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100svh}
.gift-img{position:relative;overflow:hidden}
.gift-img .ph{position:absolute;inset:0}
.gift-txt{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:var(--top) var(--m) var(--panel);gap:var(--sp-4)}
.env-wrap{--env:#C3101B;--env-d:#9E0B14;--laid:repeating-linear-gradient(0deg,rgba(0,0,0,.045) 0 1px,rgba(0,0,0,0) 1px 3px);position:relative;width:clamp(240px,23vw,340px);aspect-ratio:1.42;perspective:1400px;margin:calc(var(--sp-3) + clamp(139px,13.3vw,196px)) 0 var(--sp-3)}
.env-back{position:absolute;inset:0;background:var(--laid),linear-gradient(180deg,var(--env-d),#B20E18 60%,var(--env));box-shadow:0 34px 60px -30px rgba(60,8,10,.45)}
.env-flap{position:absolute;left:0;right:0;top:0;height:60%;transform-origin:top;transform:rotateX(180deg);z-index:1;--o:1}
.env-flap>i{position:absolute;inset:0;background:var(--laid),linear-gradient(180deg,var(--env),#B30E18);clip-path:polygon(0 0,100% 0,54% 92%,52% 96%,50% 97%,48% 96%,46% 92%)}
.env-seal{position:absolute;left:50%;top:96%;width:17%;aspect-ratio:167/164;transform:translate(-50%,-50%) rotate(-1deg);z-index:calc(var(--o,0) * -1)}
.env-seal .sf,.env-seal .sb{position:absolute;inset:0;border-radius:24%;overflow:hidden}
.env-seal .sf{opacity:calc(1 - var(--o,0));box-shadow:0 1px 2px rgba(40,0,0,.35)}
.env-seal .sf::before{content:"";position:absolute;inset:5%;border-radius:24%;background:linear-gradient(135deg,#F1F1EE,#B4B4B0 34%,#ECECE9 52%,#9E9E9A 78%,#D6D6D2)}
.env-seal .sf img{position:relative;display:block;width:100%;height:100%;filter:brightness(0);opacity:.72}
.env-seal .sf::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 65%);transform:translateX(var(--shine,-130%));mix-blend-mode:screen}
.env-seal .sb{opacity:var(--o,0);background:linear-gradient(180deg,#F3F0EA,#E8E3DA);box-shadow:inset 0 0 0 1px rgba(60,45,40,.08)}
.env-front{position:absolute;inset:0;z-index:3;filter:drop-shadow(0 -1px 2px rgba(60,6,8,.28));pointer-events:none}
.env-front i{position:absolute;inset:0;background:var(--laid),linear-gradient(178deg,#D0141F,var(--env) 55%,#B50F19);clip-path:polygon(0 6%,45% 43%,48% 45.5%,50% 46%,52% 45.5%,55% 43%,100% 6%,100% 100%,0 100%)}
.vcard{position:absolute;left:8%;width:84%;top:12%;aspect-ratio:1.53;z-index:2;transform:translateY(-50%) rotate(-2deg);will-change:transform;text-align:left}
.vc-sheet{position:absolute;inset:0;background:#E8E2D8;box-shadow:0 16px 34px -16px rgba(20,10,10,.45)}
.vc-fold{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vc-fold polygon{stroke:rgba(70,55,45,.34);stroke-width:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vcard .sheen{z-index:2;position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--sx,30%) var(--sy,20%),rgba(255,255,255,.22),rgba(255,255,255,0) 45%);mix-blend-mode:soft-light}

/* --- Schluss-Statement --- */
.close{padding-top:var(--sec);padding-bottom:var(--sec)}
.close-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:end}
.close h2{grid-column:1/10;grid-row:1}
.close .side{grid-column:10/13;grid-row:1;padding-bottom:.6vw;display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3)}

/* ---------- Footer (Vorhang-Effekt) ---------- */
.ft-wrap{position:relative;z-index:1}
.ft-fixed .ft-wrap{height:var(--fth,100vh);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.ft-fixed .ft{position:fixed;left:0;right:0;bottom:0}
.ft{position:relative;min-height:100vh;min-height:100svh;gap:var(--sp-5);background:var(--umber);color:var(--cream);display:flex;flex-direction:column;justify-content:space-between;padding:var(--panel) var(--m) var(--sp-3)}
.ft-top{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:28px}
.ft-claim{grid-column:1/6}
.ft-claim .lede{max-width:14em}
.ft-col{grid-column:span 2}
.ft-col:first-of-type{grid-column:7/9}
.ft-col .cap{color:var(--cream-2);margin-bottom:var(--sp-2)}
.ft-col p,.ft-col li{font-family:var(--sans);font-size:13px;line-height:1.55}
.ft-col a{transition:opacity .3s;display:inline-block;padding:5px 0;margin:-5px 0}
.ft-col a:hover{opacity:.55}
.ft-mid{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.ft-mid .marks{display:flex;gap:14px;align-items:center}
.ft-mid .marks img{width:44px;filter:brightness(0) invert(.92);opacity:.75}
/* Buchstaben steigen aus einem Verlauf unter der Grundlinie statt aus einer harten Kante */
.ft-word{--fade:4vw;width:100%;overflow:hidden;pointer-events:none;padding-bottom:var(--fade);margin-bottom:calc(var(--sp-3) - var(--sp-5) - var(--fade));-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--fade)),transparent)}
.ft-word .ft-mark{display:block;width:100%;height:auto;fill:var(--cream);overflow:visible}
.ft-bot{display:flex;justify-content:space-between;gap:var(--sp-3);padding-top:var(--sp-2)}
.ft-bot .cap{color:var(--cream-2)}
.ft .muted{color:var(--cream-2)}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.pg-hero{position:relative;height:100vh;height:100svh;min-height:min(620px,100svh);overflow:hidden;background:var(--umber);color:#fff}
.pg-hero .ph{position:absolute;inset:0;background:var(--umber)}
.pg-hero .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,7,.32) 0%,rgba(14,10,7,0) 30%,rgba(14,10,7,0) 55%,rgba(14,10,7,.5) 100%)}
.pg-hero .t{position:absolute;left:var(--m);right:var(--m);bottom:var(--panel);z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:24px}
.pg-hero .t .cap{color:rgba(255,255,255,.85)}
.pg-hero-sub{color:rgba(255,255,255,.9);font-size:clamp(14px,1.1vw,16px);max-width:19em;text-align:right;padding-bottom:.5em}
.pg-intro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);padding-top:var(--sec);padding-bottom:var(--sec)}
.pg-intro .k{grid-column:1/4}
.pg-intro .lede{grid-column:4/11}
.pg-intro .side{grid-column:4/8;margin-top:var(--sp-4)}
.split-hero{display:grid;grid-template-columns:1fr 1fr;height:100vh;height:100svh;min-height:min(620px,100svh)}
.split-hero .img{position:relative;overflow:hidden;background:var(--umber)}
.split-hero .img .ph{position:absolute;inset:0}
.split-hero .txt{display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:var(--top) var(--m) var(--panel)}
.split-hero.rev .img{order:2}

/* Editorial-Raster (Coutumes-artig) */
.ed{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.ed + .ed{margin-top:var(--sec)}
.ed .h{grid-column:1/5}
.ed .tx{grid-column:7/12}
.ed .tx .copy{max-width:31em}
.ed .h.wide{grid-column:1/9}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.full{position:relative;height:clamp(420px,90vh,980px);overflow:hidden}
.full .ph{position:absolute;inset:0}
.full .q{position:absolute;left:var(--m);right:var(--m);bottom:var(--panel);color:#fff;z-index:2;max-width:18em}
.full::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,10,7,0) 45%,rgba(14,10,7,.55));z-index:1;pointer-events:none}

/* Prozess (vertikal) */
.vsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--sp-4);row-gap:var(--sp-4)}
.vsteps li{display:flex;flex-direction:column;gap:var(--sp-2);border-top:1px solid var(--line);padding-top:var(--sp-2)}
.vsteps h3{font-size:clamp(26px,2.4vw,36px);line-height:1;letter-spacing:-.015em}
.dark .vsteps li{border-color:rgba(237,230,218,.2)}

/* Register (SEO-Index) */
.reg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.reg .k{grid-column:1/4}
.reg .cols{grid-column:4/13;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-4)}
.reg h3{font-size:clamp(24px,2vw,30px);margin-bottom:var(--sp-2)}
.reg li a{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-family:var(--sans);font-size:13px;transition:padding .5s var(--ease)}
.reg li a:hover{padding-left:8px}
.reg li a span{color:var(--muted);font-size:10px;letter-spacing:.06em;text-transform:uppercase}

/* Akkordeon */
.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-b{width:100%;display:flex;justify-content:space-between;align-items:baseline;gap:20px;text-align:left;padding:clamp(16px,1.8vw,24px) 0;font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.012em}
.acc-b .pm{flex:none;width:12px;height:12px;position:relative}
.acc-b .pm::before,.acc-b .pm::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transition:transform .6s var(--ease)}
.acc-b .pm::after{transform:rotate(90deg)}
.acc-b[aria-expanded="true"] .pm::after{transform:rotate(0)}
.acc-p{overflow:hidden;height:0}
.acc-p > div{padding:0 0 var(--sp-3);max-width:38em}
.no-js .acc-p,.acc-p.open{height:auto}

/* =========================================================================
   SCHMUCK (Katalog)
   ========================================================================= */
.cat-head{padding:var(--top-page) var(--m) var(--sp-5)}
.cat-head .cap{color:var(--muted);margin-bottom:var(--sp-lab)}
.filters{display:flex;flex-wrap:wrap;column-gap:clamp(14px,1.7vw,28px);row-gap:2px;font-size:clamp(34px,4.4vw,68px);line-height:1.04;letter-spacing:-.025em}
.filters button{display:inline-flex;align-items:flex-start;color:#B5AFA4;transition:color .5s var(--ease)}
.filters button:hover{color:var(--ink)}
.filters button.on{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.filters button .cnt{font-family:var(--sans);font-size:9px;letter-spacing:.04em;margin-left:.3em;position:relative;top:.7em;font-style:normal}
.cat-meta{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);margin-top:var(--sp-4)}
.cat-meta p{grid-column:10/13}
.cat-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-5);padding:var(--sp-4) var(--m) var(--sec);align-items:start}
.pc{display:block;text-align:left;width:100%}
.pc .ph{aspect-ratio:4/5}
.pc .ph img{transition:transform 1.2s var(--ease)}
.pc:hover .ph img{transform:scale(1.04)}
.pc .ph img.alt{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.pc.has-alt:hover .ph img.alt{opacity:1}
@media (hover:none){.pc .ph img.alt{display:none}}
.pc figcaption{display:flex;justify-content:space-between;gap:10px;margin-top:9px}
.pc figcaption .m{color:var(--muted)}
.s1{grid-column:4/8}.s2{grid-column:9/12;margin-top:10vw}.s3{grid-column:1/4}.s4{grid-column:5/8;margin-top:8vw}.s5{grid-column:9/13;margin-top:3vw}.s6{grid-column:2/6;margin-top:2vw}.s7{grid-column:8/11;margin-top:12vw}.s8{grid-column:1/4}.s9{grid-column:5/8;margin-top:6vw}.s10{grid-column:9/13}
.drawer{position:fixed;inset:0;z-index:88;visibility:hidden}
.drawer-bg{position:absolute;inset:0;background:rgba(22,20,15,.35);opacity:0}
.drawer-p{--dpx:clamp(20px,3vw,44px);position:absolute;right:0;top:0;bottom:0;width:min(560px,100%);background:var(--paper);display:flex;flex-direction:column;padding:0 var(--dpx) clamp(20px,3vw,40px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y}
/* Schließen liegt auf dem Bild, deshalb mit Papier-Hintergrund */
.drawer-x{position:absolute;z-index:2;right:clamp(14px,1.6vw,22px);top:clamp(14px,1.6vw,22px);padding:9px 12px;background:var(--paper);font-family:var(--sans);font-size:11px;letter-spacing:.07em;text-transform:uppercase}
/* Bild randlos oben, Höhe begrenzt, damit der Titel im Blick bleibt */
.drawer .ph{aspect-ratio:4/5;max-height:68vh;margin:0 calc(-1 * var(--dpx)) 28px;flex:none}
/* Zweites Bild direkt darunter, knapper Abstand */
.drawer .ph:has(+ .ph2:not([hidden])){margin-bottom:4px}
.drawer h2{font-size:clamp(34px,3.4vw,52px);line-height:.98;letter-spacing:-.022em;margin-bottom:18px}
.drawer .dl{margin-bottom:28px}
.drawer .nav{display:flex;justify-content:space-between;margin-top:auto;padding-top:28px}

/* =========================================================================
   GESCHICHTE
   ========================================================================= */
.chron{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut)}
.chron-y{grid-column:1/6;position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:flex-end;padding-bottom:var(--panel)}
.odo{display:flex;align-items:flex-start;font-size:clamp(84px,15vw,250px);line-height:1;letter-spacing:-.05em;height:1em;overflow:hidden}
.odo .col{display:flex;flex-direction:column;flex:none;will-change:transform}
.odo .col span{display:block;flex:none;height:1em}
.chron-l{grid-column:7/13}
.chap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:var(--sp-3);padding:var(--sp-6) 0}
.chap .imgs{display:flex;gap:var(--gut);align-items:flex-end}
.chap .imgs .ph:first-child{width:56%;aspect-ratio:4/5}
.chap .imgs .ph:nth-child(2){width:34%;aspect-ratio:3/4}
.chap .bw img{filter:grayscale(1) contrast(1.05)}
.quote{text-align:center;padding:var(--sec) var(--m)}
.quote blockquote{font-size:clamp(34px,4.6vw,74px);line-height:1;letter-spacing:-.025em;max-width:15em;margin:0 auto}
.quote footer{margin-top:var(--sp-3)}

/* =========================================================================
   KONTAKT
   ========================================================================= */
.form{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-4)}
.pick{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:var(--gut)}
.pick label{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .ph{aspect-ratio:16/10;transition:filter .6s var(--ease)}
.pick .ph img{transition:transform 1.2s var(--ease)}
.pick label:hover .ph img{transform:scale(1.035)}
.pick .lab{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.pick .lab .n{font-size:clamp(26px,2.6vw,40px);letter-spacing:-.018em;line-height:1}
.pick .tick{width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;position:relative;flex:none}
.pick .tick::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .5s var(--ease)}
.pick input:checked + .ph{filter:none}
.pick input:not(:checked) + .ph{filter:grayscale(.65) brightness(.96)}
.pick input:checked ~ .lab .tick::after{transform:scale(1)}
.pick input:checked ~ .lab .n{font-style:italic}
.pick input:focus-visible ~ .lab .n{outline:1px solid currentColor;outline-offset:4px}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 22px;font-size:clamp(24px,2.4vw,36px);letter-spacing:-.015em;line-height:1.15}
.chips label{cursor:pointer;color:#ADA79C;transition:color .4s;padding:6px 0;margin:-6px 0}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips input:checked + span{color:var(--ink);font-style:italic}
.chips label:hover{color:var(--ink)}
.chips input:focus-visible + span{outline:1px solid currentColor;outline-offset:3px}
.fld{grid-column:span 6;display:flex;flex-direction:column;gap:4px;position:relative}
.fld.w{grid-column:1/-1}
.fld label{font-family:var(--sans);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld textarea{font-family:var(--serif);font-weight:300;font-size:clamp(22px,2vw,30px);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:8px 0 10px;border-radius:0;outline:none;width:100%;transition:border-color .4s}
.fld textarea{resize:vertical;min-height:2.4em;line-height:1.2}
.fld input:focus,.fld textarea:focus{border-bottom-color:var(--ink)}
.fld .bar{position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.fld input:focus ~ .bar,.fld textarea:focus ~ .bar{transform:scaleX(1)}
.consent{grid-column:1/9;display:flex;gap:12px;align-items:flex-start;font-family:var(--sans);font-size:12.5px;line-height:1.45;color:var(--ink-2)}
.consent input{width:16px;height:16px;margin-top:2px;accent-color:var(--ink)}
.send{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--ink);padding-top:var(--sp-2)}
.send button{font-size:clamp(34px,3.6vw,58px);letter-spacing:-.022em;line-height:1;display:inline-flex;gap:.3em;align-items:baseline}
.send button i{font-style:normal;display:inline-block;transition:transform .7s var(--ease)}
.send button:hover i{transform:translateX(.2em)}
.thanks{grid-column:1/-1;font-size:clamp(34px,4vw,64px);line-height:1;letter-spacing:-.022em}

/* =========================================================================
   Responsiv
   ========================================================================= */
@media (max-width:900px){
  .g12,.pcs-head,.yrs-top,.yr,.houses-head,.house,.close-in,.ft-top,.pg-intro,.ed,.reg,.chron,.cat-meta,.menu-in,.menu-foot,.form{grid-template-columns:repeat(6,minmax(0,1fr))}
  .menu-nav{grid-column:1/-1}
  .menu-fig{display:none}
  .menu-foot > div{grid-column:span 3;margin-bottom:12px}
  .menu-nav a{font-size:clamp(30px,min(10vw,5.6vh),56px)}
  .menu-nav{align-items:center;text-align:center}
  .menu-nav a{justify-content:center;margin:0 auto}
  .menu-nav a:hover .w{padding-left:0}
  .menu-foot{text-align:center}
  .menu-foot > div{grid-column:1/-1}
  .hero{grid-template-columns:1fr;height:auto;min-height:0}
  .hero-stage{height:78svh}
  .hero-txt{padding:var(--sp-6) var(--m);gap:var(--sp-5)}
  .hero-txt h1{order:-1}
  .scroll-cue{display:none}
  .xp{height:auto;min-height:0;overflow:visible;padding:var(--sec) 0 0;display:flex;flex-direction:column}
  .xp-a,.xp-b,.xp-c,.xp-p{position:relative;left:auto;top:auto;right:auto}
  .xp-row{display:flex;gap:var(--gut);padding:0 var(--m);align-items:flex-start}
  .xp-a{width:52%}
  .xp-b{width:30%}
  .xp-c{width:auto;margin:var(--sp-4) var(--m) 0}
  .xp-p{width:auto;margin:var(--sp-4) var(--m) 0 calc(var(--m) + 12%)}
  .xp-p2{display:none}
  .xp-h{position:relative;left:auto;right:auto;bottom:auto;margin:var(--sp-5) var(--m) var(--sp-4);display:grid;grid-template-columns:auto 1fr;row-gap:.06em}
  .xp-miv{position:relative;left:auto;top:auto;flex:0 0 13%;width:13%;margin-top:calc(30% * 1.25 - 13% * 162 / 169)}
  .xp-h .w2{grid-column:1/-1;justify-self:end}
  .ws-intro{grid-template-columns:1fr;min-height:0}
  .ws-l{padding-top:var(--sec);gap:var(--sp-5)}
  .ws-r{height:90svh}
  .proc{height:auto;overflow:visible;padding:var(--sec) 0}
  .proc-head{position:relative;left:auto;top:auto;right:auto;padding:0 var(--m) var(--sp-4)}
  .proc-track{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:var(--m);width:100%;padding:0 var(--m);gap:28px;align-items:flex-start;scrollbar-width:none}
  .proc-track::-webkit-scrollbar{display:none}
  .step,.step-end{scroll-snap-align:start;transform:none !important}
  .step .ph,.step.w .ph,.step.t .ph{width:72vw}
  .step-end{width:72vw}
  .pcs-head h2,.pcs-head .side{grid-column:1/-1}
  .pcs-head .side{margin-top:var(--sp-3)}
  .yrs-imgs,.yrs-txt{grid-column:1/-1}
  .yrs-txt{padding-top:var(--sp-5)}
  .yr .y{grid-column:1/-1}
  .yr .w{grid-column:1/4;margin-top:8px}
  .yr .t{grid-column:4/7;margin-top:8px}
  .houses-head h2,.houses-head p{grid-column:1/-1}
  .houses-head p{margin-top:var(--sp-3)}
  .house .big,.house.r .big,.house .info,.house.r .info{grid-column:1/-1;grid-row:auto}
  .house .info{padding-top:var(--sp-3)}
  .house .small,.house.r .small{grid-column:3/7;grid-row:auto;width:100%}
  .gift{grid-template-columns:1fr}
  .gift-img{height:80svh}
  .gift-txt{padding:var(--sp-6) var(--m);gap:var(--sp-5)}
  .env-wrap{width:min(240px,62vw)}
  .close h2,.close .side{grid-column:1/-1;grid-row:auto}
  .close .side{margin-top:var(--sp-4);padding-bottom:0}
  .ft-fixed .ft-wrap{height:auto;clip-path:none}
  .ft-fixed .ft{position:relative}
  .ft{min-height:0;gap:var(--sp-5)}
  .ft-claim{grid-column:1/-1}
  .ft-col,.ft-col:first-of-type{grid-column:span 3}
  .ft-mid{flex-direction:column;align-items:flex-start}
  .ft-bot{flex-direction:column}
  .pg-hero .t{flex-direction:column;align-items:flex-start;gap:16px}
  .pg-hero .t .cap{text-align:left}
  .pg-hero-sub{text-align:left}
  .pg-intro .k,.pg-intro .lede,.pg-intro .side{grid-column:1/-1}
  .pg-intro .lede{margin-top:var(--sp-lab)}
  .split-hero{grid-template-columns:1fr;height:auto;min-height:0}
  .split-hero .img{height:76svh}
  .split-hero.rev .img{order:0}
  .split-hero .txt{padding:var(--sp-6) var(--m);gap:var(--sp-5)}
  .ed .h,.ed .tx{grid-column:1/-1}
  .ed .tx{margin-top:var(--sp-3)}
  .pair{grid-template-columns:1fr 1fr}
  .vsteps{grid-template-columns:1fr}
  .reg .k,.reg .cols{grid-column:1/-1}
  .reg .cols{grid-template-columns:1fr 1fr;margin-top:var(--sp-3)}
  .cat-meta p{grid-column:1/-1}
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:36px}
  .cat-grid .pc{grid-column:span 3 !important;margin-top:0 !important}
  .cat-grid .s1,.cat-grid .s6{grid-column:1/6 !important}
  .cat-grid .s4,.cat-grid .s9{grid-column:3/7 !important}
  .chron-y{grid-column:1/-1;position:sticky;top:0;height:auto;padding:var(--hd) 0 var(--sp-2);background:var(--paper);z-index:3}
  .odo{font-size:clamp(64px,22vw,120px)}
  .chron-l{grid-column:1/-1}
  .chap{min-height:0;padding:var(--sp-4) 0 var(--sp-5)}
  .fld{grid-column:1/-1}
  .consent{grid-column:1/-1}
  .pick{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1280px){
  .hero-cap{top:var(--top);bottom:auto}
}
@media (min-width:901px) and (max-width:1100px){
  .scroll-cue{display:none}
}
@media (max-width:560px){
  .facts,.vsteps{grid-template-columns:1fr}
  .reg .cols{grid-template-columns:1fr}
  .ft-col,.ft-col:first-of-type{grid-column:1/-1}
  .hero-cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .js [data-split]{visibility:visible}
  .js [data-reveal]{clip-path:none}
  /* Ohne Pin: Prozess-Band wie auf Mobile nativ scrollbar, Zitat der Bühne entfällt */
  .proc{height:auto;overflow:visible;padding:80px 0}
  .proc-head{position:relative;left:auto;top:auto;right:auto;padding:0 var(--m) 40px}
  .proc-track{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:var(--m);width:100%;padding:0 var(--m);align-items:flex-start;scrollbar-width:none}
  .proc-track::-webkit-scrollbar{display:none}
  .step,.step-end{scroll-snap-align:start;transform:none !important}
  .xp-p2{display:none}
}

/* =========================================================================
   UNTERSEITEN – Ergänzungen
   ========================================================================= */
.pg-hero .d-xxl{color:#fff}
.pg-hero-l{position:absolute;left:var(--m);top:calc(var(--hd) + 2vh);z-index:2;color:rgba(255,255,255,.85)}
.split-hero .txt .hero-mini .ph{position:absolute;inset:0}

/* Eheringe: Ringe-Komposition */
.rings{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-5);align-items:start;padding-bottom:var(--sec)}
.rings figure{margin:0}
.rings .ph{aspect-ratio:4/5}
.rings .r1{grid-column:2/7;grid-row:1}
.rings .r2{grid-column:9/12;grid-row:1;margin-top:16vw}
.rings .r3{grid-column:2/6;grid-row:2;margin-top:2vw}
.rings .r4{grid-column:7/10;grid-row:2}
.rings .r5{grid-column:10/13;grid-row:2;margin-top:12vw}

/* Editorial mit zwei Bildern */
.ed-w{row-gap:var(--sp-4)}
.ed-w + .ed-w{margin-top:var(--sec)}
.ed-w .h{grid-column:1/6}
.ed-w .tx{grid-column:7/12;align-self:end}
.ed-w figure{margin:0}
.ed-w figcaption{margin-top:9px}
.ed-w .im1{grid-column:1/7}
.ed-w .im1 .ph{aspect-ratio:4/5}
.ed-w .im2{grid-column:9/12;align-self:end}
.ed-w .im2 .ph{aspect-ratio:4/5}
.ed-r .h{grid-column:7/13}
.ed-r .tx{grid-column:1/6;grid-row:1;align-self:end}
.ed-r .im1{grid-column:7/13}
.ed-r .im2{grid-column:2/5;grid-row:2;align-self:start;margin-top:12vw}

/* Stempel */
.stamp{padding:var(--sec) var(--m);text-align:center;position:relative;overflow:hidden}
.stamp-in{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.punze-big{width:clamp(110px,11vw,170px);filter:brightness(0) invert(.92)}
.stamp .miv{width:clamp(70px,6vw,92px);filter:brightness(0) invert(.85);opacity:.8}

/* Werkstatt-Galerie */
.strip{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);align-items:start}
.strip .sf{margin:0}
.strip .ph{aspect-ratio:4/5}
.strip .sf:nth-child(1){grid-column:1/4}
.strip .sf:nth-child(2){grid-column:4/7;margin-top:12vw}
.strip .sf:nth-child(3){grid-column:8/10;margin-top:4vw}
.strip .sf:nth-child(4){grid-column:10/13;margin-top:18vw}
.strip .sf:nth-child(5){grid-column:2/6;margin-top:-6vw}

/* Geschichte */
.vsteps.vs3{grid-template-columns:repeat(3,minmax(0,1fr))}
.slot{display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(22,20,15,.04) 14px 15px);color:var(--muted)}
.chap h2{margin-top:-6px}
.chap .imgs{margin-bottom:10px}
.chap .imgs .ph:only-child{width:62%;aspect-ratio:4/5}
.quote blockquote em{font-style:italic}

/* Geschäfte */
.boutique .info-side{grid-column:4/9}
section.pair{gap:0}
section.pair .ph{aspect-ratio:4/5}
.finds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gut);align-items:start}
.finds .card{width:auto}
.finds .card:nth-child(even){margin-top:clamp(40px,6vw,96px)}
.finds .card .ph{aspect-ratio:4/5}
.next{border-top:1px solid var(--line)}
.next-in{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-6);padding-bottom:var(--sec)}
.next-in .d-xl{transition:color .5s var(--ease)}
.next-in .arr{display:inline-block;transition:transform .9s var(--ease)}
.next-in:hover .d-xl{color:var(--muted)}
.next-in:hover .arr{transform:translateX(.2em)}

/* Kontakt */
.ct-head{padding-top:var(--top-page);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-3)}
.ct-head > .cap{grid-column:1/-1}
.ct-head h1{grid-column:1/10}
.ct-head .lede{grid-column:7/12;margin-top:var(--sp-4)}
/* Kontakt: Filialen + einfaches Formular */
.ct-shops{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);padding-top:var(--sp-5)}
.ct-shop{display:block}
.ct-shop .ph{aspect-ratio:16/10}
.ct-shop .ph img{transition:transform 1.2s var(--ease)}
.ct-shop:hover .ph img{transform:scale(1.035)}
.ct-shop .d-s{margin:12px 0 var(--sp-2)}
.form-k{grid-column:1/-1}
/* Impressum & Datenschutz */
.legal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-4)}
.lg-b{grid-column:4/11;border-top:1px solid var(--line);padding-top:var(--sp-2)}
.lg-b h2{margin-bottom:var(--sp-2)}
.lg-b p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2)}

@media (max-width:900px){
  .rings{grid-template-columns:repeat(6,minmax(0,1fr))}
  .rings .r1{grid-column:1/5}.rings .r2{grid-column:4/7;margin-top:0}.rings .r3{grid-column:1/-1;margin-top:0}.rings .r4{grid-column:1/4;margin-top:0}.rings .r5{grid-column:3/7;margin-top:0}
  .ed-w .h,.ed-w .tx,.ed-r .h,.ed-r .tx,.ed-w .im1,.ed-r .im1{grid-column:1/-1;grid-row:auto}
  .ed-w .im2,.ed-r .im2{grid-column:3/7;grid-row:auto;margin-top:0}
  .strip{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:24px}
  .strip .sf:nth-child(n){grid-column:span 3;margin-top:0}
  .strip .sf:nth-child(2n){margin-top:40px}
  .vsteps.vs3{grid-template-columns:1fr}
  .boutique .info-side{grid-column:1/-1}
  .finds{grid-template-columns:1fr 1fr}
  .ct-head{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ct-head h1,.ct-head .lede{grid-column:1/-1}
  .ct-shops{grid-template-columns:1fr}
  .legal{grid-template-columns:1fr}
  .lg-b{grid-column:1/-1}
}
section.labels{display:grid;grid-template-columns:1fr 1fr}
section.labels .ph{aspect-ratio:4/5}
@media (max-width:900px){section.labels{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .rings > *{grid-row:auto !important}
  .rings .r1{grid-column:1/6}.rings .r2{grid-column:3/7}.rings .r3{grid-column:1/-1}.rings .r4{grid-column:1/4}.rings .r5{grid-column:4/7;margin-top:18vw}
}
/* Geschäfte: Bild oben, Adresse darunter */
.st-hero{padding-bottom:var(--sp-3)}
.st-frame{position:relative;height:82vh;height:82svh;min-height:480px;overflow:hidden}
.st-img{position:absolute;inset:0}
.st-t{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-3);padding-top:var(--sp-3)}
.st-t .cap{text-align:right;color:var(--muted);padding-bottom:.9em}
@media (max-width:900px){.st-frame{height:60svh}.st-t{flex-direction:column;align-items:flex-start}.st-t .cap{text-align:left}}
.split-hero .txt h1{font-size:clamp(44px,5.6vw,90px)}
.ws-small .ph{flex:none}
@media (max-width:900px){.ws-small{flex-direction:column;align-items:flex-start}.ws-small .ph{width:46vw}}
.ed .tx.faq-col{grid-column:6/13}
@media (max-width:900px){.ed .tx.faq-col{grid-column:1/-1}}

/* Eheringe: Material als Liste neben dem Bild */
.ed-w .mats{grid-column:8/13;align-self:start;display:flex;flex-direction:column}
.mats li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--gut);border-top:1px solid var(--line);padding:var(--sp-2) 0}
.mats h3{font-size:clamp(24px,2.1vw,32px);line-height:1.05;letter-spacing:-.015em}
.mats .mat-logo{grid-column:2;display:block;width:clamp(150px,13vw,200px);margin-top:var(--sp-2)}
.mats .mat-logo svg{display:block;width:100%;height:auto}
/* Made-in-Vienna-Band (Verweis) */
.miv-band{padding-bottom:var(--sec)}
.miv-band-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-4);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:var(--sp-4) 0}
.miv-band-marks{display:flex;gap:14px;align-items:center}
.miv-band-marks .mb-miv{display:block;width:clamp(56px,5vw,76px);aspect-ratio:169/162}
.miv-band-marks img{width:clamp(56px,5vw,76px);filter:brightness(0);opacity:.85}
.miv-band-t{display:flex;flex-direction:column;gap:8px}
.miv-band-t .sans{max-width:36em;color:var(--ink-2)}
.miv-band-in .d-s{transition:text-decoration-color .5s var(--ease);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em;text-decoration-color:transparent}
.miv-band-in:hover .d-s{text-decoration-color:currentColor}
.miv-band-in:hover .go i{transform:translateX(.3em)}
@media (max-width:900px){
  .ed-w .mats{grid-column:1/-1}
  .miv-band-in{grid-template-columns:1fr;gap:var(--sp-3)}
}

/* ================= Seite Made in Vienna ================= */
/* Einstieg: das Zeichen als Stempel, im Footer-Braun */
.mv3-first{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;padding-top:calc(var(--hd) + var(--sp-4))}
.mv2-stamp-logo{width:clamp(150px,17vw,260px);aspect-ratio:169/162;color:var(--cream)}
.mv2-stamp-logo svg{display:block;width:100%;height:100%}
/* Collage wie auf der Startseite */
.mv3-col{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gut);row-gap:var(--sp-4);padding-top:var(--sec);padding-bottom:var(--sec);align-items:start}
.mv3-col .a{grid-column:1/4;grid-row:1/3;aspect-ratio:13/16}
.mv3-col .b{grid-column:4/6;grid-row:1;aspect-ratio:4/5}
.mv3-col .logo{grid-column:6/7;grid-row:1;width:clamp(56px,5.6vw,90px);aspect-ratio:169/162;margin-top:clamp(20px,4vw,60px)}
.mv3-col .logo svg{display:block;width:100%;height:100%}
.mv3-col .lede{grid-column:4/9;grid-row:2;margin-top:var(--sp-3)}
.mv3-col .c{grid-column:9/13;grid-row:1/3;margin:0}
.mv3-col .c .ph{aspect-ratio:3/2}
.mv3-col .c figcaption{text-align:right;margin-top:9px}
/* Ringe-Raster mit Silbersticker */
.mv3-rings2{margin-top:var(--sp-6);padding-bottom:0}
.mv3-rings2 a{display:block}
.mv3-rings2 a .ph img{transition:transform 1.2s var(--ease)}
.mv3-rings2 a:hover .ph img{transform:scale(1.035)}
.mv3-rings2 .r2{margin-top:2vw}
.mv3-ring-miv{grid-column:7/9;grid-row:1;align-self:start;width:clamp(88px,8.9vw,128px);aspect-ratio:169/162}
.mv3-ring-miv svg,.mk-miv svg,.miv-st svg{display:block;width:100%;height:100%}
.ft-mid .marks .mk-miv{display:block;width:44px;aspect-ratio:169/162;opacity:.85}
.dark .miv-shine,.ft .miv-shine{--miv-glint:#7d766c}
.stamp .miv.miv-st{filter:none;opacity:1;aspect-ratio:169/162;display:block}
@media (max-width:900px){
  .mv3-col{grid-template-columns:repeat(6,minmax(0,1fr))}
  .mv3-col .a{grid-column:1/4;grid-row:1}
  .mv3-col .b{grid-column:4/6;grid-row:1}
  .mv3-col .logo{grid-column:6/7;grid-row:1;width:48px;margin-top:0}
  .mv3-col .lede{grid-column:1/-1;grid-row:2}
  .mv3-col .c{grid-column:1/-1;grid-row:3}
  .mv3-ring-miv{display:none}
}

/* Cookie-Einstellungen: Karte unten links, zwei gleichwertige Knöpfe */
.ck{position:fixed;left:max(var(--m),env(safe-area-inset-left,0px));bottom:calc(var(--m) + env(safe-area-inset-bottom,0px));z-index:90;width:min(430px,calc(100vw - 2 * var(--m)));background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:24px 24px 22px;box-shadow:0 22px 60px rgba(22,20,15,.18),0 2px 6px rgba(22,20,15,.06);opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .8s var(--ease)}
.ck.on{opacity:1;transform:none}
.ck-k{color:var(--muted);margin-bottom:var(--sp-2)}
.ck-h{font-size:clamp(26px,2.2vw,32px);line-height:1;letter-spacing:-.015em;margin-bottom:12px}
.ck .sans{color:var(--ink-2);max-width:34em}
.ck-b{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.ck-btn{font-family:var(--sans);font-size:11px;letter-spacing:.07em;text-transform:uppercase;line-height:1;border:1px solid var(--ink);padding:15px 10px;transition:background .4s var(--ease),color .4s var(--ease)}
.ck-btn:hover,.ck-btn:focus-visible{background:var(--ink);color:var(--paper)}
.ck-open{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;padding:0}
.ck-open:hover{text-decoration:underline;text-underline-offset:.2em}
@media (max-width:560px){.ck{left:var(--m);right:var(--m);width:auto;padding:20px 18px 18px}}
@media (prefers-reduced-motion:reduce){.ck{transition:none}}

/* 404 */
.ct-head .nf-sub{grid-column:1/-1}
.nf-links{padding-top:var(--sp-4);padding-bottom:var(--sec)}
.nf-links ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.nf-a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--line);font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.015em;transition:color .5s var(--ease)}
.nf-a .arr{display:inline-block;transition:transform .9s var(--ease)}
.nf-a:hover{color:var(--muted)}
.nf-a:hover .arr{transform:translateX(.2em)}