@font-face{font-family:"Mona Sans";src:url(fonts/mona-sans-latin-standard-normal.woff2) format("woff2");font-weight:200 900;font-stretch:75% 125%;font-style:normal;font-display:swap}
@font-face{font-family:"Ibarra Real Nova";src:url(fonts/ibarra-real-nova-latin-wght-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url(fonts/azeret-mono-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#06181a;        /* near-black petrol */
  --ink-2:#0b2427;      /* menu petrol, refined from #071E20 */
  --line-d:rgba(233,227,214,.14);
  --ivory:#f5f0e7;
  --ivory-2:#ece5d7;
  --line-l:rgba(6,24,26,.14);
  --gold:#d9a441;       /* logo gold */
  --bronze:#8a6420;     /* gold for text on ivory (contrast) */
  --t-d:#ebe5d8;
  --t-dm:#a3b2b0;
  --t-l:#16282a;
  --t-lm:#56625f;
  --sans:"Mona Sans","Helvetica Neue",Arial,sans-serif;  /* close to the logo's Maison Neue */
  --script:"Ibarra Real Nova",Georgia,serif;                /* italic accent: the elegant half of each headline */
  --mono:"Azeret Mono",ui-monospace,Menlo,monospace;       /* details: numbers, labels, measures */
  --cut:9px;                                               /* facet corner, used on buttons and frames */
  --pad:clamp(20px,5vw,72px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ivory);color:var(--t-l);font:400 17px/1.6 var(--sans);overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:400}
h1,h2{font-feature-settings:"ss01"}
em{font-style:normal}
h1 em,.h2 em{font-family:var(--script);font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;font-stretch:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.nw{white-space:nowrap}
.cf{color:var(--bronze);font-family:var(--mono);font-size:.78em;letter-spacing:-.01em;white-space:normal}
.dark .cf,.hero .cf,.foot .cf{color:var(--gold)}


/* header */
.top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:32px;padding:18px var(--pad);color:var(--t-d)}
.top.fixed{position:fixed;top:0;background:var(--ink);border-bottom:1px solid var(--line-d);padding-top:12px;padding-bottom:12px;animation:drop .35s ease}
@keyframes drop{from{transform:translateY(-100%)}to{transform:none}}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:500 14.5px/1.08 var(--sans);letter-spacing:0}
.nav{display:flex;gap:28px;margin-left:auto}
.nav a{text-decoration:none;font-size:14.5px;color:var(--t-d);opacity:.82;transition:opacity .2s}
.nav a:hover{opacity:1}
.top-r{display:flex;align-items:center;gap:14px}
.lang{background:none;border:1px solid var(--line-d);color:var(--t-d);font:500 11.5px var(--mono);letter-spacing:.12em;padding:0 11px;height:40px;cursor:pointer;border-radius:0}
.lang:hover{border-color:var(--gold);color:var(--gold)}

/* buttons: facet-cut corners (like a stone's table), mono label, arrow */
.btn{--bd:transparent;--bg:transparent;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:54px;padding:0 22px 0 26px;font:500 12.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;color:var(--fg);background:var(--bd);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));transition:color .3s}
.btn::before{content:"";position:absolute;inset:1px;z-index:-1;background:var(--bg);clip-path:polygon(calc(var(--cut) - .4px) 0,100% 0,100% calc(100% - var(--cut) + .4px),calc(100% - var(--cut) + .4px) 100%,0 100%,0 calc(var(--cut) - .4px));transition:background .3s}
.btn::after{content:"";flex:none;width:17px;height:9px;background:currentColor;transition:transform .35s cubic-bezier(.2,.7,.2,1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0 4.5h15.5M12 1l3.5 3.5L12 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0 4.5h15.5M12 1l3.5 3.5L12 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
.btn:hover::after{transform:translateX(5px)}
.btn-down::after{transform:rotate(90deg)}
.btn-down:hover::after{transform:rotate(90deg) translateX(4px)}
.btn:focus-visible{outline:none}
.btn:focus-visible::before{box-shadow:inset 0 0 0 2px var(--gold)}
.btn.sm{min-height:40px;padding:0 14px 0 16px;gap:12px;font-size:11.5px;--cut:7px}
.btn.sm::after{width:14px}
.btn-gold{--bd:var(--gold);--bg:var(--gold);--fg:var(--ink)}
.btn-gold:hover{--bg:#e8bb62;--bd:#e8bb62}
.btn-ghost{--bd:rgba(235,229,216,.5);--bg:var(--ink);--fg:var(--t-d)}
.btn-ghost:hover{--bd:var(--gold);--fg:var(--gold)}
.btn-line{--bd:var(--gold);--bg:var(--ink);--fg:var(--gold)}
.btn-line:hover{--bg:var(--gold);--fg:var(--ink)}
.btn-dark{--bd:var(--ink);--bg:var(--ink);--fg:var(--t-d)}
.btn-dark::after{background:var(--gold)}
.btn-dark:hover{--bg:var(--ink-2)}
.top.fixed .btn-line,.top .btn-line{--bg:var(--ink)}

/* hero: text on solid petrol, the film in its own frame, so nothing gets lost in the footage */
.hero{position:relative;color:var(--t-d);background:var(--ink);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:center;padding-top:118px;padding-bottom:clamp(36px,4vw,56px);min-height:min(calc(100svh - 58px),860px)}
.hero-in{min-width:0}
/* one frame for every image: facet-cut corners + gold viewfinder marks */
.frame{position:relative;overflow:hidden;background:var(--ink-2);--f:18px;clip-path:polygon(var(--f) 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,0 100%,0 var(--f))}
.frame > img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.frame .vf{z-index:1}
.frame > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media{margin:0;height:min(calc(100svh - 230px),620px);min-height:420px}
.hero-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:46% 40%;filter:saturate(.8) contrast(1.05)}
.vf{position:absolute;width:24px;height:24px;border:solid var(--gold);pointer-events:none}
.vf-a{top:16px;right:16px;border-width:1px 1px 0 0}
.vf-b{bottom:16px;left:16px;border-width:0 0 1px 1px}
.hero-cap{position:absolute;left:52px;right:16px;bottom:16px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-d)}
.hero-cap span{background:rgba(6,24,26,.82);padding:8px 10px}
.hero-cap > span:first-child::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:1px;animation:rec 2.4s ease-in-out infinite}
@keyframes rec{50%{opacity:.25}}
.tc{color:var(--gold);font-variant-numeric:tabular-nums}
.hero h1{font:300 clamp(40px,4.9vw,74px)/1.02 var(--sans);font-stretch:104%;letter-spacing:-.035em;max-width:14ch}
.hero h1 em{display:block;color:var(--gold);font-size:.7em;line-height:1.1;margin-top:.22em}
.hero-p{max-width:44ch;font-size:clamp(16.5px,1.4vw,18px);color:rgba(235,229,216,.86);margin:28px 0 36px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.trust{position:relative;display:flex;flex-wrap:wrap;list-style:none;margin:0 auto;width:100%;padding-top:0;padding-bottom:0}
.trust li{flex:1 1 0;padding:18px 0;border-top:1px solid var(--line-d);font:400 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t-d);white-space:nowrap}
.trust li::before{content:"";display:inline-block;width:5px;height:5px;transform:rotate(45deg) translateY(-2px);border:1px solid var(--gold);margin-right:12px}

/* sections */
.sec{padding:clamp(80px,11vw,150px) 0}
.ivory{background:var(--ivory)}
.ivory-2{background:var(--ivory-2)}
.dark{background:var(--ink);color:var(--t-d)}
.sec-head{max-width:880px;margin-bottom:clamp(48px,6vw,80px)}
.h2{font:300 clamp(32px,4vw,56px)/1.06 var(--sans);font-stretch:104%;letter-spacing:-.03em}
.h2 em{color:var(--bronze)}
.dark .h2 em{color:var(--gold)}
.lead{font-size:18px;color:var(--t-lm);max-width:52ch;margin:24px 0 0}
.dark .lead{color:var(--t-dm)}

/* für wen */
.who{background:var(--ivory);padding:clamp(80px,10vw,140px) 0}
.who-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(40px,6vw,100px);align-items:stretch}
.who-img{margin:0;min-height:460px}
.who-img img{position:absolute;inset:0;transform:scale(1.08);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.who-img.in img{transform:none}
.who-txt{align-self:center;padding:12px 0}
.who-txt .h2{font-size:clamp(36px,4.4vw,62px);margin-bottom:28px}
.who-txt .h2 em{display:block}
.who-txt > p{margin:0 0 14px;color:var(--t-lm);max-width:42ch}
.who-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:0;margin:34px 0 36px;border-top:1px solid var(--line-l)}
.who-facts div{padding:18px 28px 0 0}
.who-facts div + div{padding-left:28px;border-left:1px solid var(--line-l)}
.who-facts dt{font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze);margin-bottom:8px}
.who-facts dd{margin:0;font:300 clamp(24px,2.2vw,30px)/1.1 var(--sans);letter-spacing:-.03em;color:var(--ink)}

/* fassarten */
.fa-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-d);border-left:1px solid var(--line-d)}
.fa{position:relative;padding:28px 30px 36px;border-right:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.fa figure{margin:0 0 22px;position:relative}
.fa svg{width:100%;height:auto;display:block}
.fa svg .ln,.fa svg .ln *{fill:none;stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.fa svg .ln .dash{stroke-dasharray:4 4;opacity:.6}
.fa svg .mt{fill:url(#hatch);stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.fa svg .k *{fill:var(--gold);stroke:none}
.fa svg .lbl line{stroke:var(--t-dm);stroke-width:.6;vector-effect:non-scaling-stroke}
.fa svg .lbl text{fill:var(--t-dm);font:400 8px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.fa figcaption{position:absolute;top:0;right:0;font:400 10px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-dm)}
.fa-no{font:400 12px var(--mono);letter-spacing:.08em;color:var(--gold)}
.fa h3{font:400 25px/1.15 var(--sans);letter-spacing:-.02em;margin:8px 0 10px}
.fa p{margin:0;font-size:15.5px;color:var(--t-dm)}

/* komplexität */
.scale{position:relative;height:13px;border-bottom:1px solid var(--bronze);display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:34px}
.scale i{border-left:1px solid var(--bronze)}
.scale i:nth-child(2){border-left-width:1px;height:13px}
.scale::after{content:"";position:absolute;right:0;bottom:-1px;height:13px;border-right:1px solid var(--bronze)}
.ko-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px)}
.ko .ko-l{font:italic 400 clamp(36px,3.6vw,50px)/1.05 var(--script);color:var(--bronze);margin:0 0 20px}
.ko h3{font:500 17px var(--sans);margin-bottom:8px}
.ko p{margin:0;color:var(--t-lm)}

/* vertrauen */
.ve{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
.ve-head{position:sticky;top:110px}
.ve-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-l)}
.ve-row{position:relative;isolation:isolate;display:grid;grid-template-columns:64px minmax(0,1fr) 56px;gap:24px;align-items:center;padding:34px 24px 34px 8px;border-bottom:1px solid var(--line-l);cursor:default;transition:color .45s}
.ve-row::before{content:"";position:absolute;inset:-1px 0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.ve-no{font:italic 400 44px/1 var(--script);color:var(--bronze);transition:color .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.ve-b h3{font:400 clamp(22px,2.2vw,30px)/1.15 var(--sans);letter-spacing:-.025em;margin:0 0 8px}
.ve-b p{margin:0;font-size:16px;color:var(--t-lm);max-width:46ch;transition:color .45s}
.ve-ic{width:52px;height:52px;fill:none;stroke:var(--bronze);stroke-width:1.1;stroke-linejoin:round;transition:stroke .45s,transform .55s cubic-bezier(.2,.7,.2,1)}
.ve-row:hover{color:var(--t-d)}
.ve-row:hover::before{transform:none}
.ve-row:hover .ve-no{color:var(--gold);transform:translateX(8px)}
.ve-row:hover .ve-b p{color:var(--t-dm)}
.ve-row:hover .ve-ic{stroke:var(--gold);transform:rotate(-8deg) scale(1.08)}
.ve-row.reveal{transform:translateX(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),color .45s}
.ve-row.reveal.in{transform:none}
.ve-row:nth-child(2){transition-delay:.08s}.ve-row:nth-child(3){transition-delay:.16s}.ve-row:nth-child(4){transition-delay:.24s}

/* ablauf */
.ab{overflow:hidden}
.ab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(40px,5vw,64px)}
.ab-ctrl{display:flex;align-items:center;gap:14px;flex:none}
.ab-count{font:400 13px var(--mono);letter-spacing:.14em;color:var(--t-dm);white-space:nowrap}
.ab-count b{font-weight:400;color:var(--gold);font-variant-numeric:tabular-nums}
.ab-arrow{width:46px;height:46px;display:grid;place-items:center;background:none;border:1px solid var(--line-d);color:var(--t-d);cursor:pointer;transition:border-color .25s,color .25s,background .25s}
.ab-arrow svg{width:17px;height:9px;fill:none;stroke:currentColor;stroke-width:1.2}
.ab-arrow:hover{border-color:var(--gold);color:var(--gold)}
.ab-arrow:focus-visible,.ab-tab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* the five steps along one line; the sun slides to the active one */
.ab-tabs{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.ab-line{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line-d)}
.ab-line i{position:absolute;left:0;top:0;height:1px;width:calc(var(--a,0) * 20%);background:var(--gold);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.ab-sun{position:absolute;top:-14px;left:calc(var(--a,0) * 20%);width:28px;height:28px;margin-left:-2px;transform:rotate(calc(var(--a,0) * 72deg));transition:left .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.ab-sun img{width:28px;height:28px}
.ab-tab{position:relative;display:block;width:100%;text-align:left;background:none;border:0;padding:46px 18px 18px 0;color:var(--t-dm);font:inherit;cursor:pointer}
.ab-dot{position:absolute;top:18px;left:0;width:9px;height:9px;background:var(--ink);border:1px solid rgba(217,164,65,.6);transform:rotate(45deg);transition:background .4s}
.ab-tab.done .ab-dot,.ab-tab.on .ab-dot{background:var(--gold);border-color:var(--gold)}
.ab-tab.on .ab-dot{opacity:0}
.ab-n{display:block;font:400 12px var(--mono);letter-spacing:.12em;color:var(--t-dm);transition:color .3s}
.ab-tt{display:block;margin-top:6px;font:400 clamp(16px,1.4vw,19px)/1.25 var(--sans);letter-spacing:-.01em;transition:color .3s}
.ab-tab:hover .ab-tt{color:var(--t-d)}
.ab-tab.on .ab-n{color:var(--gold)}
.ab-tab.on .ab-tt{color:var(--t-d)}
.ab-bar{position:absolute;left:0;right:18px;bottom:0;height:1px;background:var(--line-d);overflow:hidden;opacity:0;transition:opacity .3s}
.ab-tab.on .ab-bar{opacity:1}
.ab-bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.ab-ui.run .ab-tab.on .ab-bar i{animation:abfill var(--dur,6s) linear forwards}
.ab-ui.hold .ab-tab.on .ab-bar i{animation-play-state:paused}
@keyframes abfill{to{transform:none}}
/* the detail of the active step */
.ab-panels{position:relative;margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--line-d);padding-top:clamp(32px,4vw,52px);min-height:260px;touch-action:pan-y}
.ab-panel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(28px,5vw,72px);align-items:center}
.ab-panel[hidden]{display:none}
.ab-big{font:200 clamp(120px,15vw,220px)/.8 var(--mono);letter-spacing:-.08em;color:transparent;-webkit-text-stroke:1px var(--gold)}
.ab-w{display:block;font:400 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.ab-txt h3{font:300 clamp(32px,3.8vw,54px)/1.05 var(--sans);font-stretch:104%;letter-spacing:-.035em;margin:0 0 16px}
.ab-txt p{margin:0;font-size:clamp(16.5px,1.4vw,19px);color:var(--t-dm);max-width:40ch}
.ab-icw{position:relative;display:grid;place-items:center;width:clamp(120px,12vw,168px);aspect-ratio:1;border:1px solid var(--line-d);border-radius:50%}
.ab-icw::before{content:"";position:absolute;inset:10px;border:1px solid rgba(217,164,65,.22);border-radius:50%}
.ab-ic{width:46%;height:auto;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.ab-ic *{vector-effect:non-scaling-stroke}
.ab-ic .m{fill:var(--ink)}
.ab-panel.on .ab-big{animation:abin .8s cubic-bezier(.2,.7,.2,1) both}
.ab-panel.on .ab-txt{animation:abin .8s cubic-bezier(.2,.7,.2,1) .08s both}
.ab-panel.on .ab-icw{animation:abic .9s cubic-bezier(.2,.7,.2,1) .12s both}
@keyframes abin{from{opacity:0;transform:translateX(28px)}}
@keyframes abic{from{opacity:0;transform:scale(.85) rotate(-10deg)}}

/* werkstatt */
.we{display:grid;grid-template-columns:5fr 6fr;gap:clamp(36px,7vw,110px);align-items:center}
.we-txt > p{color:var(--t-lm);max-width:50ch}
.we-txt .h2{margin-bottom:28px}
.facts{margin:36px 0 0;border-top:1px solid var(--line-l)}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-l)}
.facts dt{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);padding-top:3px}
.facts dd{margin:0}

/* werkstatt photo */
.we-img{margin:0;aspect-ratio:4/5}

/* photo placeholders */
.ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ivory-2);aspect-ratio:4/3;padding:24px;font:400 13px/1.5 var(--mono);color:var(--t-lm)}
.ph-tall{aspect-ratio:4/5}
.ph::before,.ph::after{content:"";position:absolute;width:22px;height:22px;border:solid var(--bronze);opacity:.7}
.ph::before{top:14px;left:14px;border-width:1px 0 0 1px}
.ph::after{bottom:14px;right:14px;border-width:0 1px 1px 0}
.ph-dark{background:var(--ink-2);color:var(--t-dm)}
.ph-dark::before,.ph-dark::after{border-color:var(--gold)}

/* galerie + loupe */
.ga-lead{margin-bottom:clamp(20px,2.5vw,32px)}
.ga-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.loupe{position:relative;margin:0}
.loupe .frame{cursor:none;touch-action:pan-y}
.loupe.on-touch .frame{touch-action:none}
.ga-lead .frame img{aspect-ratio:16/9}
.ga-grid .frame img{aspect-ratio:4/3}
.lens{position:absolute;z-index:2;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;pointer-events:none;opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .25s ease;
  border:1px solid var(--gold);box-shadow:0 0 0 6px rgba(6,24,26,.35),0 0 0 7px rgba(217,164,65,.5),0 18px 40px rgba(0,0,0,.45);background-repeat:no-repeat;will-change:left,top}
.lens::before,.lens::after{content:"";position:absolute;background:rgba(217,164,65,.55)}
.lens::before{left:50%;top:22%;bottom:22%;width:1px}
.lens::after{top:50%;left:22%;right:22%;height:1px}
.loupe.active .lens{opacity:1;transform:scale(1)}
.loupe figcaption{padding:14px 0 0;font-size:14.5px;color:var(--t-dm);background:var(--ink)}
.hint{color:var(--gold);white-space:nowrap;margin-left:.6em;font:400 12px var(--mono);letter-spacing:.04em}
.loupe figcaption .cf{margin-left:.4em}
.ga-grid .lens{width:150px;height:150px;margin:-75px 0 0 -75px}

/* anfrage */
.an{display:grid;grid-template-columns:4fr 6fr;gap:clamp(36px,7vw,110px);align-items:start}
.an-txt > p{color:var(--t-lm)}
.an-txt .h2{margin-bottom:24px}
.contact{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line-l)}
.contact li{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line-l);font-size:16px}
.contact li span{font:400 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);padding-top:3px}
.contact a{text-decoration:none;border-bottom:1px solid var(--line-l)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px;background:#fbf8f2;border:1px solid var(--line-l);padding:clamp(22px,3.5vw,44px)}
.form label{display:flex;flex-direction:column;gap:8px;font:400 11px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t-lm);min-width:0}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{font:400 16px var(--sans);color:var(--t-l);background:transparent;border:0;border-bottom:1px solid rgba(6,24,26,.3);padding:8px 0;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.form select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6' fill='none' stroke='%238a6420'/%3E%3C/svg%3E") right 4px center no-repeat;padding-right:20px}
.form textarea{resize:vertical;border:1px solid rgba(6,24,26,.3);padding:10px}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--bronze)}
.form .file input{border:1px dashed rgba(6,24,26,.3);padding:14px;font-size:14px}
.form small{text-transform:none;letter-spacing:0;font:400 13px var(--sans)}
.form .check{flex-direction:row;align-items:flex-start;gap:12px;text-transform:none;letter-spacing:0;font:400 15px/1.5 var(--sans);color:var(--t-l)}
.form .check input{width:18px;height:18px;flex:none;margin-top:3px;-webkit-appearance:auto;appearance:auto;accent-color:var(--ink)}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.form-msg{margin:0;font-size:15px;color:var(--bronze);border-left:1px solid var(--bronze);padding-left:14px}

/* footer: same content and order as the live site */
.foot{background:var(--ink);color:var(--t-d);padding:64px 0 28px;font-size:15px}
.foot p{margin:0}
.foot a{color:var(--t-d);text-decoration:none}
.foot a:hover{color:var(--gold)}
.foot-in{display:flex;justify-content:space-between;gap:40px 64px;flex-wrap:wrap}
.foot-main{max-width:780px}
.foot-logo{display:inline-flex}
.foot-tag{margin:22px 0 26px!important;color:var(--t-dm);max-width:46ch;line-height:1.6}
.foot-contact{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--t-dm)}
.foot-contact li{display:flex;align-items:center;gap:9px}
.foot-contact svg,.foot-li svg{width:17px;height:17px;fill:none;stroke:var(--gold);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.foot-contact a{color:var(--t-dm)}
.foot-social{min-width:200px}
.foot-h{font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--t-d);margin-bottom:16px!important}
.foot-li{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-d);border-radius:50%;transition:border-color .25s}
.foot-li svg{width:18px;height:18px;stroke-width:1.8}
.foot-li:hover{border-color:var(--gold)}
.foot-note{display:block;margin-top:10px!important}
.foot-b{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line-d);font-size:13px;color:var(--t-dm)}
.foot-legal{display:flex;gap:22px}
.foot-legal a{color:var(--t-dm);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(163,178,176,.4)}
.foot-made{display:inline-flex;align-items:center;gap:8px}
.foot-made svg{width:16px;height:16px}

/* mobile bar */
.mbar{display:none}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.ve-row.reveal{opacity:1;transform:none;transition:none}
  .ab-line i,.ab-sun{transition:none}
  .ab-panel.on .ab-big,.ab-panel.on .ab-txt,.ab-panel.on .ab-icw{animation:none}
  .who-img img{transition:none}
  .lens{transition:none}
  .top.fixed{animation:none}
}

/* responsive */
@media (max-width:1080px){
  .nav{display:none}
  .top-r{margin-left:auto}
  .fa-grid{grid-template-columns:1fr 1fr}
  .ve{grid-template-columns:1fr;gap:40px}
  .ve-head{position:static}
}
@media (max-width:760px){
  body{font-size:16px;padding-bottom:64px}
  .top{top:0;gap:12px;padding:14px 16px}
  .top.fixed{padding:10px 16px}
  .top .btn.sm{display:none}
  .brand{font-size:13px}
  .brand img{width:30px;height:30px}
  .wrap{padding:0 20px}
  .hero-grid{grid-template-columns:1fr;gap:28px;min-height:0;padding-top:76px;padding-bottom:32px}
  .hero-media{order:-1;height:auto;min-height:0;aspect-ratio:4/3}
  .frame{--f:12px}
  .vf-a{top:12px;right:12px}.vf-b{bottom:12px;left:12px}
  .hero-cap{left:40px;right:12px;bottom:12px}
  .hero h1{font-size:clamp(36px,10vw,46px);letter-spacing:-.028em}
  .hero-p{margin:22px 0 26px}
  .hero-cta .btn{flex:1 1 auto;padding:0 14px 0 18px}
  .trust li{flex:1 1 50%;min-width:0;white-space:normal;font-size:11px;letter-spacing:.08em;padding:12px 8px 12px 0}
  .who-in{grid-template-columns:1fr;gap:36px}
  .who-img{aspect-ratio:6/5;min-height:0}
  .who-facts div{padding-right:16px}
  .who-facts div + div{padding-left:16px}
  .fa-grid{grid-template-columns:1fr}
  .fa{padding:24px 20px 30px}
  .ko-grid{grid-template-columns:1fr;gap:36px}
  .scale{display:none}
  .ko{border-top:1px solid var(--line-l);padding-top:22px}
  .ve-row{grid-template-columns:40px minmax(0,1fr);gap:14px;padding:26px 8px 26px 4px;align-items:start}
  .ve-no{font-size:32px}
  .ve-ic{display:none}
  .ve-row.reveal{transform:translateY(18px)}
  .ab-head{flex-wrap:wrap;margin-bottom:28px}
  .ab-tab{padding:42px 4px 14px 0}
  .ab-tt{display:none}
  .ab-n{font-size:13px}
  .ab-bar{right:6px}
  .ab-panel{grid-template-columns:1fr;gap:18px}
  .ab-big{font-size:96px}
  .ab-icw{display:none}
  .ab-panels{min-height:300px}
  .we,.an{grid-template-columns:1fr}
  .ph-tall{aspect-ratio:4/3}
  .facts div{grid-template-columns:110px 1fr}
  .ga-grid{grid-template-columns:1fr;gap:28px}
  .ph-dark{font-size:15px;padding:16px}
  .form{grid-template-columns:1fr;padding:22px 18px}
  .foot-contact{flex-direction:column}
  .foot-b{flex-direction:column;align-items:flex-start}
  .mbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);border-top:1px solid var(--line-d);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:10px;height:58px;text-decoration:none;color:var(--t-d);font:500 12.5px var(--mono);letter-spacing:.13em;text-transform:uppercase}
  .mbar a::before{content:"";width:15px;height:15px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat}
  .mbar a:first-child{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 1.5l2 3.3-1.4 1.4a8.6 8.6 0 0 0 4.6 4.6l1.4-1.4 3.3 2-.9 2.6c-6.4.3-11.9-5.2-11.6-11.6z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .mbar a.on{flex-direction:row-reverse}
  .mbar a.on{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 9'%3E%3Cpath d='M0 4.5h15.5M12 1l3.5 3.5L12 8' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")}
  .mbar a.on{background:var(--gold);color:var(--ink)}
  .lens{width:150px;height:150px;margin:-75px 0 0 -75px}
}

/* accessibility */
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--gold);color:var(--ink);padding:12px 18px;font:500 14px var(--sans);text-decoration:none;transition:top .2s}
.skip:focus{top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ivory a:focus-visible,.ivory-2 a:focus-visible,.form :focus-visible,.legal a:focus-visible{outline-color:var(--bronze)}
.hero-cap-r{display:flex;align-items:stretch;gap:6px;background:none!important;padding:0!important}
.hero-cap-r .tc{background:rgba(6,24,26,.82);padding:8px 10px}
.vid-btn,.ab-play{display:grid;place-items:center;cursor:pointer}
.vid-btn{width:30px;background:rgba(6,24,26,.82);border:0;color:var(--t-d);padding:0}
.vid-btn svg,.ab-play svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.vid-btn:hover,.ab-play:hover{color:var(--gold)}
.i-play{display:none;fill:currentColor;stroke:none}
.paused .i-play{display:block}
.paused .i-pause{display:none}
.req{color:var(--bronze)}
.form-note{margin:0;font-size:13.5px;color:var(--t-lm)}
.form-note a{color:var(--t-l)}
.form-msg:empty{display:none}
.form [aria-invalid="true"]{border-color:#a3341f}

/* legal pages */
.legal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px var(--pad);background:var(--ink);color:var(--t-d)}
.legal{max-width:820px;padding-top:clamp(56px,8vw,96px);padding-bottom:clamp(72px,10vw,120px)}
.legal h1{margin-bottom:28px}
.legal-lead{font-size:18px;color:var(--t-lm);margin:0 0 12px}
.legal section{padding:26px 0;border-top:1px solid var(--line-l)}
.legal section:first-of-type{margin-top:28px}
.legal h2{font:500 18px/1.3 var(--sans);letter-spacing:-.01em;margin:0 0 10px}
.legal p{margin:0 0 12px;color:var(--t-lm)}
.legal a{color:var(--t-l)}
@media (max-width:760px){
  body.legal-page{padding-bottom:0}
}

/* form extras */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-files{margin:0;font-size:14.5px;color:var(--t-lm)}
.form-files a{color:var(--t-l)}
.form button[disabled]{opacity:.6;cursor:progress}