/* HEMMUNG · Uhrmacherei Wien
   Layout: one technical drawing sheet. Cool paper, 32px grid, ink line art, ruby red for the few things that matter.
   Signature: the watch itself, drawn in code, opens layer by layer on scroll (Explosionszeichnung). */
:root{
  --bg:#E7E9E6;
  --panel:#F2F3F0;
  --ink:#15191D;
  --ink-2:#33393D;
  --mute:#5A6266;
  --line:#C5CAC6;
  --grid:rgba(21,25,29,.05);
  --acc:#B42840;
  --acc-ink:#FFF6F6;
  --ok:#2E7D4F;
  --err:#B42840;
  --dark:#15191D;
  --dark-ink:#E7E9E6;
  --dark-mute:#9AA2A6;

  --f-display:"Archivo Narrow","Arial Narrow","Roboto Condensed",sans-serif;
  --f-body:"Hanken Grotesk","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  --max:1440px;
  --ease:cubic-bezier(.2,.8,.1,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16.5px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px;background-attachment:fixed}
img{display:block;max-width:100%;height:auto}
svg{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
::selection{background:var(--acc);color:var(--acc-ink)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--ink);color:var(--bg);padding:12px 16px;text-decoration:none}
.skip:focus{top:calc(12px + env(safe-area-inset-top,0px))}
.grain{position:fixed;inset:-50%;pointer-events:none;z-index:90;opacity:.04;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-4%)}75%{transform:translate(-4%,-1%)}100%{transform:translate(0,0)}}

/* ---------- type ---------- */
.meta{font:400 11px/1.45 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.h1{font:700 clamp(40px,5.8vw,96px)/.92 var(--f-display);text-transform:uppercase;letter-spacing:-.005em;margin:0;text-wrap:balance}
.h2{font:700 clamp(34px,4.6vw,72px)/.95 var(--f-display);text-transform:uppercase;letter-spacing:-.005em;margin:0;text-wrap:balance}
.h3{font:600 clamp(18px,1.5vw,22px)/1.15 var(--f-display);text-transform:uppercase;letter-spacing:.05em;margin:0}
.h1 em,.h2 em,.h3 em{font-style:normal;color:var(--acc)}
.lede{font-size:clamp(16.5px,1.25vw,18.5px);color:var(--ink-2);max-width:42ch;margin:0}
.no{font:500 11px/1 var(--f-mono);color:var(--acc);letter-spacing:.04em}
.demo-tag{display:inline-block;font:500 9.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 5px 2px;border:1px solid currentColor;opacity:.75;vertical-align:.15em;margin-left:6px;white-space:nowrap}
.split-line{overflow:clip;padding-bottom:.08em;margin-bottom:-.08em}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:600 13.5px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--fill{background:var(--ink);color:var(--bg)}
.btn--fill:hover{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.btn--inv{border-color:var(--dark-ink);color:var(--dark-ink)}
.btn--inv:hover{background:var(--dark-ink);color:var(--dark)}
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- header ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:transform .5s var(--ease),background .4s}
.hd__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.hd.is-scrolled{background:rgba(231,233,230,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.hd.is-hidden{transform:translateY(-100%)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-height:44px}
.logo b{font:700 19px/1 var(--f-display);letter-spacing:.34em}
.logo i{display:block;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;position:relative}
.logo i::after{content:"";position:absolute;left:50%;top:2px;width:1.5px;height:6px;background:var(--acc);margin-left:-.75px;transform-origin:50% 5px;animation:logoTick 1s steps(8) infinite}
@keyframes logoTick{to{transform:rotate(360deg)}}
.nav{display:flex;gap:2px}
.nav a{text-decoration:none;font:500 12px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;padding:12px 12px;color:var(--ink-2);position:relative}
.nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:1.5px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:none}
.menu-btn{display:none;width:48px;height:48px;border:1.5px solid var(--ink);background:transparent;cursor:pointer;position:relative}
.menu-btn i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-btn i:nth-child(1){top:19px}.menu-btn i:nth-child(2){top:27px}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
@media (max-width:1020px){.nav{display:none}.menu-btn{display:block}.hd__cta .btn{display:none}}
.mnav{position:fixed;inset:0;z-index:55;background:var(--bg);padding:calc(100px + env(safe-area-inset-top,0px)) var(--gut) 40px;display:flex;flex-direction:column;overflow:auto}
.mnav a{font:700 clamp(34px,9vw,52px)/1.2 var(--f-display);text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--line);padding-block:8px;display:flex;justify-content:space-between;align-items:baseline}
.mnav a small{font:500 11px/1 var(--f-mono);color:var(--acc)}
.mnav a.btn{margin-top:24px;align-self:flex-start;font:600 14px/1 var(--f-display);border-bottom:1.5px solid var(--ink);padding:0 22px}

/* ---------- sections ---------- */
.sec{padding-block:clamp(90px,11vw,160px)}
.sec--rule{border-top:1.5px solid var(--ink)}
.sec-label{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.sec-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,64px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.sec-top .lede{justify-self:end}
@media (max-width:860px){.sec-top{grid-template-columns:1fr}.sec-top .lede{justify-self:start}}

/* ================= WATCH SKIN (technical line drawing) =================
   parts.js draws with these variables only; a variant restyles the watch by redefining them. */
.watch{--edge:#15191D;--metal:#ECEDEA;--metal-hi:#F5F6F3;--paper:#F3F4F1;--glass:rgba(255,255,255,.1);--side:#CDD2CC;--dial:#F5F6F3;--dial-ink:#15191D;--idx:#F5F6F3;--sub:#ECEEEA;--hand:#15191D;--hand-hi:#4E575C;--sec:#B42840;--bridge:#EEF0EC;--bevel:#FAFBF8;--gear:#F2F3F0;--ruby:#B42840;--screw:#F5F6F3;--plate:#EEEFEC}
.watch svg{display:block;width:100%;height:100%;overflow:visible}
.watch text{font-kerning:normal}
.layer .face,.layer .slice{position:absolute;inset:0;pointer-events:none;backface-visibility:visible}
.layer .slice--last svg *{stroke:var(--edge);stroke-width:1.1px}
.layer--crystal .slice{opacity:.85}

/* ================= HERO (pinned explode) ================= */
.scene{position:relative}
.sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage{position:absolute;width:var(--S);height:var(--S);left:var(--X,50%);top:var(--Y,50%);margin:calc(var(--S)/-2) 0 0 calc(var(--S)/-2);perspective:1600px}
.rig{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.layer{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.anchor{position:absolute;left:85.4%;top:50%;width:1px;height:1px;pointer-events:none}
.leaders{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:3;width:100%;height:100%}
.leaders line,.leaders path{stroke:var(--ink);stroke-width:.85;fill:none}
.leaders circle{fill:var(--bg);stroke:var(--ink);stroke-width:1}
.leaders circle.dot{fill:var(--ink);stroke:none}
.leaders text{font:500 10px/1 var(--f-mono);fill:var(--ink)}
.leaders .hot circle{fill:var(--acc);stroke:var(--acc)}
.leaders .hot text{fill:var(--acc-ink)}
.leaders .hot line,.leaders .hot path{stroke:var(--acc);stroke-width:1.3}
.hero-scale{position:absolute;left:var(--gut);bottom:22px;font:400 11px/1 var(--f-mono);color:var(--mute);display:flex;gap:18px;z-index:3;flex-wrap:wrap}
.hero-scale b{color:var(--ink);font-weight:500}
.scroll-cue{position:absolute;right:var(--gut);bottom:20px;z-index:3;display:flex;gap:10px;align-items:center;font:400 11px/1 var(--f-mono);color:var(--mute);text-transform:uppercase;letter-spacing:.07em;transition:opacity .4s}
.scroll-cue i{width:1px;height:34px;background:var(--line);position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--ink);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{to{top:100%}}
.hero-bar{position:fixed;left:0;top:0;height:2px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0);z-index:61;pointer-events:none}

/* shared: drawing sheet frame with zone strip (1–8 / A–E) and centring marks */
.sheet{--zs:14px;position:absolute;left:var(--gut);right:var(--gut);top:80px;bottom:14px;border:1px solid var(--ink);pointer-events:none;z-index:1}
.sheet::before{content:"";position:absolute;inset:var(--zs);border:1.5px solid var(--ink)}
.sheet__z{position:absolute;display:flex;font:500 8.5px/1 var(--f-mono);color:var(--mute)}
.sheet__z span{flex:1;display:grid;place-items:center;min-width:0;min-height:0}
.sheet__z--t,.sheet__z--b{left:var(--zs);right:var(--zs);height:var(--zs)}
.sheet__z--t{top:0}.sheet__z--b{bottom:0}
.sheet__z--l,.sheet__z--r{top:var(--zs);bottom:var(--zs);width:var(--zs);flex-direction:column}
.sheet__z--l{left:0}.sheet__z--r{right:0}
.sheet__z--t span+span,.sheet__z--b span+span{border-left:1px solid var(--ink)}
.sheet__z--l span+span,.sheet__z--r span+span{border-top:1px solid var(--ink)}
.sheet__z--t span:nth-child(5),.sheet__z--b span:nth-child(5){border-left-width:2px}
.sheet__z--l span:nth-child(3),.sheet__z--r span:nth-child(3){background:linear-gradient(var(--ink),var(--ink)) center/100% 2px no-repeat}
/* centre axis drawn in 3D inside the rig, so parts hide it where they cross */
.axis{position:absolute;left:50%;top:50%;width:1.4px;margin-left:-.7px;height:2px;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--acc) 0 14px,transparent 14px 18px,var(--acc) 18px 20px,transparent 20px 24px)}

/* V1 · Blatt */
.h1v .stage{--S:min(56vh,32vw);--X:50%;--Y:53%}
.h1v__copy{position:absolute;left:calc(var(--gut) + 40px);top:118px;z-index:4;width:min(400px,30vw)}
.h1v__copy .h1{margin:14px 0 0;font-size:clamp(40px,4.7vw,78px)}
.h1v__copy .lede{margin:20px 0 24px;max-width:31ch;font-size:clamp(15.5px,1.1vw,17px)}
.h1v .scroll-cue{left:calc(var(--gut) + 40px);right:auto;bottom:42px}
.h1v__doc{position:absolute;right:calc(var(--gut) + 14px);bottom:28px;z-index:4;width:min(380px,29vw);display:flex;flex-direction:column}
@media (max-width:1366px){.bom td:nth-child(3){font-size:10.5px}.h1v .stage{--S:min(54vh,30vw);--X:47%}}
.bom{width:100%;border-collapse:collapse;font:400 11.5px/1.2 var(--f-mono);background:var(--bg);border:1.5px solid var(--ink);border-bottom:0;table-layout:fixed}
.bom th,.bom td{padding:5px 7px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bom td+td,.bom th+th{border-left:1px solid var(--line)}
.bom thead th{font:500 9.5px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute);border-bottom:1.5px solid var(--ink)}
.bom th:nth-child(1){width:44px}.bom th:nth-child(4){width:48px}.bom th:nth-child(3){width:41%}
.bom td:nth-child(1),.bom td:nth-child(4){text-align:center;font-variant-numeric:tabular-nums}
.bom td:nth-child(2){font:600 12.5px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.05em}
.bom td:nth-child(3){color:var(--mute)}
.bom tbody tr{transition:background .25s,color .25s;cursor:default}
.bom tbody tr .pos{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--line);border-radius:50%;font-size:10px;transition:border-color .3s,background .3s,color .3s}
.bom tbody tr.on .pos{border-color:var(--ink)}
.bom tbody tr.hot{background:var(--ink);color:var(--bg)}
.bom tbody tr.hot td:nth-child(3){color:var(--line)}
.bom tbody tr.hot .pos{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.tb{display:grid;grid-template-columns:1.25fr .9fr .85fr .6fr;border:1.5px solid var(--ink);background:var(--bg);font:400 10px/1.2 var(--f-mono)}
.tb__c{padding:5px 7px 6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0;display:flex;flex-direction:column;gap:3px;justify-content:space-between}
.tb__c small{font:400 8.5px/1 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.tb__c span{font:500 11.5px/1.15 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb__c span em{display:block;font-style:normal;font-weight:400;color:var(--mute);font-size:10px;margin-top:2px}
.tb__firm{grid-row:1/3;justify-content:center;gap:5px}
.tb__firm b{font:700 17px/1 var(--f-display);letter-spacing:.32em}
.tb__firm small{white-space:nowrap;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis}
.tb__name{grid-column:2/5}
.tb__name span{font:600 15px/1.05 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.tb__no{grid-column:2/4}
.tb__no span{font-weight:600;font-size:13px;color:var(--acc)}
.tb__c:nth-child(4n),.tb__sheet,.tb__by,.tb__name{border-right:0}
.tb__scale,.tb__proj,.tb__date,.tb__by{border-bottom:0}
.tb__firm{border-bottom:1px solid var(--ink)}
.proj{width:40px;height:17px;color:var(--ink)}
/* Einzelheit Z: live escapement, magnified */
.detail{position:absolute;right:calc(var(--gut) + 44px);top:112px;width:min(236px,17vw);margin:0;z-index:3}
.detail__c{aspect-ratio:1;border-radius:50%;background:var(--bg)}
.detail__c svg *{vector-effect:non-scaling-stroke}
.detail figcaption{display:flex;gap:10px;align-items:center;margin-top:10px;font:400 10px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.detail figcaption b{font:700 30px/1 var(--f-display);color:var(--acc)}
.detail .live{font-style:normal}
@media (prefers-reduced-motion:reduce){.detail .live{display:none}}
.rig.focus .layer:not(.is-f)>*{opacity:.18;transition:opacity .3s}
.rig .layer>*{transition:opacity .3s}
/* short laptop screens: tighter parts list, the detail view shrinks with the height and steps aside below 760px */
@media (min-width:861px) and (max-height:900px){
  .bom th,.bom td{padding-top:3px;padding-bottom:3px}
  .detail{width:clamp(150px,calc(100vh - 620px),236px)}
  .detail figcaption{margin-top:6px;font-size:9px;letter-spacing:.04em}
  .detail .live{display:none}
}
@media (min-width:861px) and (max-height:760px){.detail{display:none}}
@media (max-width:1180px){
  .detail{display:none}
  .h1v__copy{width:min(330px,26vw)}
  .h1v .stage{--S:min(52vh,30vw);--X:49%}
  .h1v__doc{width:min(300px,29vw)}
  .bom td:nth-child(3),.bom th:nth-child(3){display:none}
  .tb__firm b{font-size:14px;letter-spacing:.22em}
  .tb__c span{font-size:10.5px}
  .tb{grid-template-columns:1.1fr .8fr 1fr .6fr}
}
@media (max-width:860px){
  .sheet{--zs:10px;top:72px;left:8px;right:8px;bottom:8px}
  .sheet__z{font-size:7px}
  .h1v__copy{left:30px;right:30px;top:96px;width:auto}
  .h1v__copy .h1{font-size:clamp(34px,10.4vw,54px)}
  .h1v__copy .lede,.h1v__copy .btn,.h1v .scroll-cue,.bom{display:none}
  .h1v .stage{--S:min(42vh,78vw);--X:47%;--Y:60%}
  .h1v__doc{left:18px;right:18px;bottom:18px;width:auto}
  .tb{grid-template-columns:1.1fr 1fr .9fr .6fr}
  .tb__firm{grid-row:auto}.tb__firm b{font-size:13px}.tb__firm small{display:none}
  .tb__name,.tb__date,.tb__by,.tb__proj{display:none}
  .tb__firm,.tb__no,.tb__sheet,.tb__scale{border-bottom:0}
  .tb__no{grid-column:auto}
  .tb__c span{font-size:10.5px}.tb__no span{font-size:11px}
}

/* V2 · Zentriert */
.h2v .sticky{padding:0}
.h2v .stage{--S:min(52vh,40vw);--Y:52%}
.h2v__l1,.h2v__l2{position:absolute;left:var(--gut);right:var(--gut);z-index:4;font:700 clamp(44px,7.6vw,132px)/.86 var(--f-display);text-transform:uppercase;letter-spacing:-.01em;margin:0;will-change:transform}
.h2v__l1{top:96px}
.h2v__l2{bottom:84px;text-align:right}
.h2v__l2 em{font-style:normal;color:var(--acc)}
.h2v__side{position:absolute;right:var(--gut);top:112px;z-index:4;max-width:30ch;display:flex;flex-direction:column;gap:18px;transition:opacity .4s}
.legend{position:absolute;left:var(--gut);right:var(--gut);bottom:22px;z-index:4;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));border-top:1.5px solid var(--ink);opacity:0;transition:opacity .4s}
.legend li{list-style:none;padding:8px 6px 0 0;font:500 10.5px/1.3 var(--f-mono);opacity:.3;transition:opacity .3s;min-width:0}
.legend li.on{opacity:1}
.legend b{color:var(--acc);display:block}
.legend ol{display:contents}
@media (max-width:860px){
  .h2v .stage{--S:min(48vh,88vw);--Y:54%}
  .h2v__l1{top:90px;font-size:clamp(40px,12vw,70px)}
  .h2v__l2{bottom:120px;font-size:clamp(40px,12vw,70px)}
  .h2v__side{display:none}
  .legend{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2px;bottom:16px}
  .legend li{padding-top:4px;font-size:10px}
  .legend b{display:inline;margin-right:4px}
}

/* V3 · Querschnitt */
.h3v .sticky{padding:0}
.h3v .stage{--S:min(42vh,26vw);--X:50%;--Y:56%}
.h3v__copy{position:absolute;left:var(--gut);top:100px;z-index:4;max-width:min(560px,46vw);transition:opacity .4s}
.h3v__copy .lede{margin:20px 0 24px}
.h3v__dim{position:absolute;left:var(--gut);right:var(--gut);bottom:64px;z-index:3;height:30px;opacity:0;transition:opacity .4s}
.h3v__dim::before{content:"";position:absolute;left:0;right:0;top:14px;height:1px;background:var(--ink)}
.h3v__dim::after{content:"";position:absolute;left:0;right:0;top:8px;height:13px;border-left:1px solid var(--ink);border-right:1px solid var(--ink)}
.h3v__dim span{position:absolute;left:50%;top:0;transform:translateX(-50%);background:var(--bg);padding:0 10px;font:500 11px/30px var(--f-mono)}
.h3v .tags{position:absolute;inset:0;pointer-events:none;z-index:4}
.h3v .tag{position:absolute;font:500 10.5px/1.3 var(--f-mono);white-space:nowrap;transform:translate(-50%,0);opacity:0;transition:opacity .3s;text-align:center}
.h3v .tag b{color:var(--acc);display:block}
.h3v .tag.side{transform:none;text-align:left}
.h3v .tag.side b{display:inline;margin-right:6px}
@media (max-width:860px){
  .h3v .stage{--S:min(40vh,62vw);--X:42%;--Y:60%}
  .h3v__copy{max-width:none;right:16px;top:90px}
  .h3v__copy .lede,.h3v__copy .btn{display:none}
  .h3v__dim{bottom:84px}
}

/* portfolio build (html[data-badge]): the ELYX demo pill sits bottom left, so the hero cue moves to the centre
   and the phone title strip starts right of the pill */
[data-badge] .h1v .scroll-cue{left:50%;right:auto;transform:translateX(-50%)}
@media (max-width:860px){
  [data-badge] .h1v__doc{left:148px}
  [data-badge] .h1v .tb__firm{display:none}
  [data-badge] .h1v .tb{grid-template-columns:1.25fr .8fr .8fr}
}

/* ================= REVISION ================= */
.steps-data{display:none}
/* V1 · Protokoll */
.prot{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.prot__fig{position:sticky;top:110px;margin:0;aspect-ratio:4/5;overflow:hidden;border:1.5px solid var(--ink);background:var(--panel)}
.prot__fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply;transition:opacity .6s var(--ease),transform 1.2s var(--ease);opacity:0;transform:scale(1.04)}
.prot__fig img.on{opacity:1;transform:none}
.prot__fig figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;background:var(--panel);border-top:1px solid var(--ink);font:500 11px/1.3 var(--f-mono);display:flex;justify-content:space-between;gap:12px}
.prot__list{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.prot__row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:6px 16px;padding:22px 0;border-bottom:1px solid var(--line);position:relative;transition:padding .4s var(--ease)}
.prot__row::after{content:"";position:absolute;left:0;bottom:-1px;height:1.5px;width:100%;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.prot__row.on::after{transform:none}
.prot__row p{grid-column:2/-1;margin:0;color:var(--ink-2);font-size:15.5px;max-width:56ch}
.prot__row .dur{font:500 11px/1.4 var(--f-mono);color:var(--mute);text-align:right}
@media (max-width:860px){.prot{grid-template-columns:1fr}.prot__fig{position:relative;top:auto;aspect-ratio:16/10}}

/* V2 · Karten */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--ink);border-left:1.5px solid var(--ink)}
.card{border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);background:var(--panel);padding:20px;display:flex;flex-direction:column;gap:12px;min-height:330px;position:relative;overflow:hidden;min-width:0}
/* hover turns the inner svg; the div itself belongs to the GSAP entrance (a CSS transition on it would corrupt the tween's end values) */
.card__ico{width:132px;height:132px;margin:2px 0 4px}
.card__ico svg{transition:transform .8s var(--ease)}
.card__ico svg *{vector-effect:non-scaling-stroke}
.card:hover .card__ico svg{transform:rotate(-20deg) scale(1.06)}
.card p{margin:0;color:var(--ink-2);font-size:15px}
.card .dur{margin-top:auto;font:500 11px/1 var(--f-mono);color:var(--mute);padding-top:10px;border-top:1px dashed var(--line)}
.card__ph{position:absolute;inset:0;opacity:0;transition:opacity .5s;pointer-events:none}
.card__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1)}
.card__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,25,29,.0) 30%,rgba(21,25,29,.85))}
.card:hover .card__ph,.card:focus-within .card__ph{opacity:1}
.card:hover,.card:focus-within{color:var(--dark-ink)}
.card:hover p,.card:focus-within p{color:var(--dark-ink);position:relative}
.card:hover .h3,.card:hover .no,.card:hover .dur{position:relative}
.card .no,.card .h3,.card p,.card .dur,.card__ico{position:relative;z-index:1}
@media (hover:none){.card__ph{display:none}}
@media (max-width:980px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards{grid-template-columns:1fr}.card{min-height:0}}

/* V3 · Zeitachse (pinned horizontal travel) */
.travel{position:relative}
.travel__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:28px}
.travel__track{display:flex;gap:0;will-change:transform;padding-inline:var(--gut);border-top:1.5px solid var(--ink)}
.tstep{flex:0 0 min(380px,78vw);padding:22px 26px 0 0;border-right:1px solid var(--line);margin-right:26px;display:flex;flex-direction:column;gap:12px}
.tstep figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--panel);border:1px solid var(--ink)}
.tstep img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);mix-blend-mode:multiply}
.tstep p{margin:0;color:var(--ink-2);font-size:15px}
.travel__days{display:flex;justify-content:space-between;align-items:center;padding-inline:var(--gut);gap:16px}
.daybar{flex:1;height:2px;background:var(--line);position:relative}
.daybar i{position:absolute;left:0;top:0;height:2px;width:100%;background:var(--acc);transform-origin:left;transform:scaleX(0)}
@media (prefers-reduced-motion:reduce){.travel__sticky{position:relative;height:auto}.travel__track{overflow-x:auto}}

/* ================= ZEITWAAGE (timegrapher) ================= */
.tg-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.tg-out div{padding:12px 12px 4px 0;min-width:0}
.tg-out small{display:block;font:400 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.tg-out strong{font:600 clamp(24px,2.6vw,38px)/1.1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.tg-out .bad{color:var(--acc)}
.tg-out .good{color:var(--ok)}
.tg-status{font:500 12px/1.4 var(--f-mono);display:flex;gap:10px;align-items:center}
.tg-status i{width:9px;height:9px;border-radius:50%;background:var(--acc);display:inline-block}
.tg-status.ok i{background:var(--ok)}
.reg{position:relative;user-select:none;-webkit-user-select:none;touch-action:none}
.reg__track{height:46px;border:1.5px solid var(--ink);background:var(--panel);position:relative;cursor:ew-resize;
  background-image:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10%);background-size:100% 10px;background-repeat:no-repeat;background-position:0 100%}
.reg__track::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1.5px;background:var(--ok);opacity:.6}
.reg__knob{position:absolute;top:-8px;bottom:-8px;width:20px;margin-left:-10px;background:var(--ink);cursor:grab}
.reg__knob::after{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--bg)}
.reg__lbl{display:flex;justify-content:space-between;font:500 11px/1 var(--f-mono);margin-top:8px;color:var(--mute)}
.reg input[type=range]{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:ew-resize}
.reg input[type=range]:focus-visible+.reg__knob{outline:2px solid var(--acc);outline-offset:3px}
/* V1 · Papierstreifen */
.tg1{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.tg1__paper{background:#F6F6F1;border:1.5px solid var(--ink);position:relative;box-shadow:10px 10px 0 rgba(21,25,29,.07)}
.tg1__paper canvas{display:block;width:100%;height:clamp(260px,32vw,380px)}
.tg1__hd{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font:500 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.06em}
.tg1__ctl{display:flex;flex-direction:column;gap:22px}
@media (max-width:860px){.tg1{grid-template-columns:1fr}}
/* V2 · Messgerät */
.tg2{background:var(--dark);color:var(--dark-ink);border:1.5px solid var(--ink);display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr)}
.tg2__screen{position:relative;border-right:1px solid rgba(231,233,230,.15)}
.tg2__screen canvas{display:block;width:100%;height:clamp(300px,34vw,440px)}
.tg2__side{padding:22px;display:flex;flex-direction:column;gap:20px;min-width:0}
.tg2 .tg-out{grid-template-columns:1fr 1fr;border-top-color:rgba(231,233,230,.3)}
.tg2 .tg-out small{color:var(--dark-mute)}
.tg2 .reg__track{background-color:#20262B;border-color:var(--dark-ink);background-image:repeating-linear-gradient(90deg,var(--dark-ink) 0 1px,transparent 1px 10%)}
.tg2 .reg__knob{background:var(--dark-ink)}
.tg2 .reg__knob::after{background:var(--dark)}
.tg2 .reg__lbl{color:var(--dark-mute)}
.tg2 .meta{color:var(--dark-mute)}
.knobwrap{display:flex;gap:16px;align-items:center}
@media (max-width:900px){.tg2{grid-template-columns:1fr}.tg2__screen{border-right:0;border-bottom:1px solid rgba(231,233,230,.15)}}
/* V3 · Rücker am Unruhkloben */
.tg3{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.tg3__cock{position:relative;aspect-ratio:340/300;max-width:560px;width:100%;justify-self:center;touch-action:none}
.tg3__cock svg{width:100%;height:100%;overflow:visible}
.tg3__lever{cursor:grab}
.tg3__lever:active{cursor:grabbing}
.tg3__mini{border:1.5px solid var(--ink);background:#F6F6F1}
.tg3__mini canvas{display:block;width:100%;height:150px}
.tg3__big{font:700 clamp(64px,9vw,140px)/.9 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tg3__big small{font-size:.28em;letter-spacing:.06em;margin-left:6px}
@media (max-width:860px){.tg3{grid-template-columns:1fr}}

/* ================= ATELIER (quiet) ================= */
.atelier{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,5vw,90px);align-items:end}
.atelier__img{margin:0;position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--panel);border:1.5px solid var(--ink)}
.atelier__img img{width:100%;height:116%;object-fit:cover;filter:grayscale(1) contrast(1.05);will-change:transform}
.atelier__img figcaption{position:absolute;left:12px;bottom:12px;background:var(--panel);padding:6px 8px;font:500 10.5px/1 var(--f-mono);border:1px solid var(--ink)}
.quiet{font:500 clamp(24px,2.4vw,36px)/1.25 var(--f-body);letter-spacing:-.01em;margin:0}
.quiet em{font-style:normal;color:var(--acc)}
.facts{margin:32px 0 0;border-top:1.5px solid var(--ink)}
.facts div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.facts dt{font:400 11px/1.6 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute)}
.facts dd{margin:0;text-align:right;font-weight:500}
@media (max-width:860px){.atelier{grid-template-columns:1fr}}

/* ================= H-01 ================= */
.drawing svg{width:100%;height:auto;overflow:visible}
.dim line,.dim path{stroke:var(--ink);stroke-width:1;fill:none}
.dim text{font:500 11px/1 var(--f-mono);fill:var(--ink)}
.dim .acc{stroke:var(--acc)}
.dim text.acc{fill:var(--acc)}
.dim .cl{stroke:var(--ink);stroke-width:.6;stroke-opacity:.4}
.dim .dl line{stroke-width:.8}
.dim .ah{fill:var(--ink);stroke:none}
.dim .acc line{stroke:var(--acc)}.dim .acc .ah{fill:var(--acc)}.dim .acc text{fill:var(--acc)}
.dim text{font-size:12px;font-weight:500}
.drawing--dims{margin:0;display:flex;flex-direction:column;gap:6px}
.drawing--dims .watch{aspect-ratio:1;width:100%}
.drawing--dims figcaption{text-align:center}
/* V1 · Datenblatt */
.ds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.spec{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.spec th,.spec td{text-align:left;padding:12px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.spec th{font:400 11px/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute);width:42%}
.spec td{font-weight:500}
.spec tr:first-child th,.spec tr:first-child td{border-top:1.5px solid var(--ink)}
.price{display:flex;align-items:baseline;gap:12px;margin-top:22px;flex-wrap:wrap}
.price strong{font:700 clamp(30px,3vw,44px)/1 var(--f-display);letter-spacing:.02em}
@media (max-width:860px){.ds{grid-template-columns:1fr}}
/* V2 · Zifferblatt-Wahl */
.dc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,80px);align-items:center}
.dc__watch{max-width:520px;width:100%;justify-self:center;transition:filter .3s}
.dc__watch .watch{--dial:var(--dc-dial,#F5F6F3);--idx:var(--dc-idx,#F5F6F3);--sub:var(--dc-sub,#ECEEEA);--dial-ink:var(--dc-ink,#15191D);--hand:var(--dc-hand,#15191D);--hand-hi:var(--dc-hand-hi,#4E575C)}
.dc__opts{display:flex;flex-direction:column;gap:0;border-top:1.5px solid var(--ink)}
.dc__opt{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 0;border:0;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;text-align:left;width:100%}
.dc__opt i{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);display:block}
.dc__opt span{font:600 18px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.06em}
.dc__opt small{display:block;font:400 13.5px/1.4 var(--f-body);color:var(--mute);text-transform:none;letter-spacing:0}
.dc__opt b{font:500 11px/1 var(--f-mono);color:var(--mute)}
.dc__opt[aria-pressed="true"] span{color:var(--acc)}
.dc__opt[aria-pressed="true"] i{box-shadow:0 0 0 4px var(--bg),0 0 0 5.5px var(--acc)}
@media (max-width:860px){.dc{grid-template-columns:1fr}}
/* V3 · Profil */
.pf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,80px);align-items:center}
.pf__nums{display:grid;grid-template-columns:1fr 1fr;border-top:1.5px solid var(--ink)}
.pf__nums div{padding:16px 12px 16px 0;border-bottom:1px solid var(--line)}
.pf__nums strong{display:block;font:700 clamp(34px,3.6vw,56px)/1 var(--f-display);font-variant-numeric:tabular-nums}
.pf__nums strong small{font-size:.4em;margin-left:4px}
@media (max-width:860px){.pf{grid-template-columns:1fr}}

/* ================= PREISE ================= */
.ptab{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptab caption{text-align:left;padding-bottom:12px}
.ptab th,.ptab td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.ptab thead th{font:400 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);border-bottom:1.5px solid var(--ink);padding-top:0}
.ptab tbody th{font:600 clamp(17px,1.4vw,20px)/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.05em;padding-right:16px}
.ptab tbody th small{display:block;font:400 14px/1.4 var(--f-body);color:var(--mute);margin-top:4px;text-transform:none;letter-spacing:0}
.ptab td{font:500 14.5px/1 var(--f-mono);white-space:nowrap}
.ptab td:last-child,.ptab th:last-child{text-align:right}
.prices{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(24px,5vw,80px);align-items:start}
/* Messprotokoll: what the customer gets back with the watch */
.proto{border:1.5px solid var(--ink);background:#F6F6F1;padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;gap:14px;box-shadow:10px 10px 0 rgba(21,25,29,.07);min-width:0}
.proto__hd{display:flex;justify-content:space-between;align-items:center;gap:10px;font:500 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.07em;color:var(--mute);padding-bottom:10px;border-bottom:1px dashed var(--line)}
.proto .h3{font-size:clamp(18px,1.4vw,21px)}
.proto__t{width:100%;border-collapse:collapse;font:500 13px/1 var(--f-mono);font-variant-numeric:tabular-nums;table-layout:fixed}
.proto__t th,.proto__t td{padding:8px 0;border-bottom:1px solid var(--line);text-align:right;font-weight:500}
.proto__t th:first-child{text-align:left}
.proto__t thead th:first-child{width:22%}
.proto__t abbr{text-decoration:none;cursor:help;border-bottom:1px dotted var(--mute)}
.proto__t thead th{font:400 9.5px/1.2 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);border-bottom:1.5px solid var(--ink);padding-top:0}
.proto__t thead th:last-child{text-align:center;width:38%;padding-left:14px}
.proto__t thead th:nth-child(2),.proto__t thead th:nth-child(3){width:20%}
.proto__t td.after{color:var(--ok);font-weight:600}
.proto__t td.bar{width:40%;padding-left:14px}
.proto__t tfoot th,.proto__t tfoot td{border-bottom:0;padding-top:10px}
/* track scale −10 … +45 s/day: zero at 18.18 %, tolerance ±4 s = 10.9 % … 25.5 % */
.trk{position:relative;display:block;height:13px}
.trk::before{content:"";position:absolute;top:0;bottom:0;left:10.9%;width:14.55%;background:rgba(46,125,79,.16)}
.trk::after{content:"";position:absolute;top:0;bottom:0;left:18.18%;width:1px;background:var(--ink)}
.trk i{position:absolute;height:4px}
.trk .b0{top:1.5px;background:repeating-linear-gradient(90deg,var(--mute) 0 2px,transparent 2px 4px)}
.trk .b1{top:7.5px;background:var(--ok)}
.proto__lg{margin:0;display:flex;gap:6px 14px;flex-wrap:wrap;align-items:center;font:400 10px/1.4 var(--f-mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.proto__lg span{display:inline-block;width:14px;height:4px;margin-right:-8px;vertical-align:middle}
.proto__lg .k0{background:repeating-linear-gradient(90deg,var(--mute) 0 2px,transparent 2px 4px)}
.proto__lg .k1{background:var(--ok)}
.proto__lg .k2{height:10px;background:rgba(46,125,79,.18)}
.proto__g{margin:0;border-top:1.5px solid var(--ink);padding-top:12px;color:var(--ink-2);font-size:15px}
.proto__g b{font:600 15px/1.2 var(--f-display);text-transform:uppercase;letter-spacing:.05em;color:var(--ink)}
.proto__g em{font-style:normal;color:var(--acc)}
@media (max-width:860px){.prices{grid-template-columns:1fr}}
@media (max-width:560px){.ptab th:nth-child(2),.ptab td:nth-child(2){display:none}.ptab td{white-space:normal}}
@media (max-width:640px){.tg-out{grid-template-columns:1fr 1fr}}

/* ================= TERMIN ================= */
.fld{display:flex;flex-direction:column;gap:6px;min-width:0;border:0;padding:0;margin:0}
.fld>label,.fld>legend,.fld>.lbl{font:400 10.5px/1.3 var(--f-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);padding:0}
.fld input,.fld textarea,.fld select{font:400 16px/1.4 var(--f-body);color:var(--ink);background:var(--panel);border:1.5px solid var(--line);border-radius:0;padding:11px 12px;min-height:48px;width:100%;transition:border-color .2s}
.fld textarea{min-height:90px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--ink)}
.fld .err,.err{font:400 12px/1.3 var(--f-mono);color:var(--err)}
.fld.bad input,.fld.bad textarea{border-color:var(--err)}
.opt-row{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative;display:inline-flex}
.opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%;min-height:0}
.opt span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--line);background:var(--panel);font:500 14.5px/1 var(--f-body);transition:border-color .2s,background .2s,color .2s;cursor:pointer}
.opt input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.opt input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid2 .full{grid-column:1/-1}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.ok-box{border:1.5px solid var(--ink);background:var(--panel);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px}
.ok-box dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;font-size:15px}
.ok-box dt{font:400 11px/1.6 var(--f-mono);color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.ok-box dd{margin:0}
.ok-box .demo-note{font:400 12px/1.5 var(--f-mono);color:var(--mute);border-top:1px dashed var(--line);padding-top:12px;margin:0}
/* V1 · Reparaturschein */
.ticket{max-width:920px;margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 190px;background:#F6F6F1;border:1.5px solid var(--ink);box-shadow:12px 12px 0 rgba(21,25,29,.07);position:relative}
.ticket__main{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px;min-width:0}
.ticket__stub{border-left:2px dashed var(--ink);padding:24px 18px;display:flex;flex-direction:column;justify-content:space-between;gap:16px;position:relative;background:repeating-linear-gradient(-45deg,transparent 0 10px,rgba(21,25,29,.025) 10px 20px)}
.ticket__stub::before,.ticket__stub::after{content:"";position:absolute;left:-12px;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink)}
.ticket__stub::before{top:-12px}.ticket__stub::after{bottom:-12px}
.ticket__no{font:700 40px/1 var(--f-display);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.ticket__hole{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);background:var(--bg)}
.ticket .fld input,.ticket .fld textarea,.ticket .fld select{background:transparent;border:0;border-bottom:1.5px dashed var(--mute);padding:8px 2px;font-family:var(--f-mono);font-size:15px}
.ticket .fld input:focus,.ticket .fld textarea:focus{border-bottom:1.5px solid var(--ink)}
@media (max-width:700px){.ticket{grid-template-columns:1fr}.ticket__stub{border-left:0;border-top:2px dashed var(--ink);flex-direction:row;align-items:center}.ticket__stub::before,.ticket__stub::after{display:none}}
/* V2 · Kostenrechner */
.calc{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);border:1.5px solid var(--ink);background:var(--panel)}
.calc__in{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--line);min-width:0}
.calc__out{padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:18px;min-width:0}
.calc__range{font:700 clamp(44px,5vw,76px)/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.calc__lines{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.calc__lines li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.calc__lines li span:last-child{font:500 13.5px/1.4 var(--f-mono);white-space:nowrap}
@media (max-width:900px){.calc{grid-template-columns:1fr}.calc__in{border-right:0;border-bottom:1px solid var(--line)}}
/* V3 · Zwei Wege */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border:1.5px solid var(--ink)}
.way{padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:14px;background:var(--panel);border:0;text-align:left;cursor:pointer;position:relative;min-width:0}
.way+.way{border-left:1.5px solid var(--ink)}
.way svg{width:120px;height:90px}
.way .h3{display:block}
.way__p{display:block;color:var(--ink-2)}
.way__m{display:flex;flex-direction:column;font:400 12.5px/1.8 var(--f-mono);color:var(--mute)}
.way[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.way[aria-pressed="true"] .way__p,.way[aria-pressed="true"] .way__m{color:var(--dark-ink)}
.way[aria-pressed="true"] svg *{stroke:var(--bg)}
.ways__form{border:1.5px solid var(--ink);border-top:0;padding:clamp(20px,3vw,32px);background:#F6F6F1;display:flex;flex-direction:column;gap:18px}
@media (max-width:700px){.ways{grid-template-columns:1fr}.way+.way{border-left:0;border-top:1.5px solid var(--ink)}}

/* ================= FAQ / band / footer ================= */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px)}
.qa{border-top:1.5px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:600 clamp(17px,1.5vw,21px)/1.25 var(--f-display);text-transform:uppercase;letter-spacing:.04em;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary i{flex:none;width:26px;height:26px;border:1.5px solid var(--ink);position:relative;transition:background .3s}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:6px;right:6px;top:11px;height:1.5px;background:currentColor}
.qa summary i::after{transform:rotate(90deg);transition:transform .45s var(--ease)}
.qa details[open] summary i{background:var(--ink);color:var(--bg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa .ans{overflow:hidden}
.qa .ans p{margin:0 0 20px;color:var(--ink-2);max-width:60ch}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.band{background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.band__in{padding-block:clamp(80px,10vw,140px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:end;position:relative;z-index:1}
.band p{color:#C6CCCF;margin:0 0 24px;max-width:38ch}
.band__watch{position:absolute;right:-6vw;top:50%;width:min(56vw,640px);aspect-ratio:1;transform:translateY(-50%);opacity:.16;pointer-events:none}
.band__watch .watch{--edge:#E7E9E6;--dial:transparent;--dial-ink:#E7E9E6;--idx:transparent;--sub:transparent;--hand:#E7E9E6;--hand-hi:transparent;--metal-hi:transparent;--metal:transparent;--paper:transparent;--glass:transparent;--gear:transparent;--bridge:transparent;--bevel:transparent;--plate:transparent;--screw:transparent}
.band__watch .lw--dial,.band__watch .lw--crystal{opacity:.55}
@media (max-width:860px){.band__in{grid-template-columns:1fr}.band__watch{width:90vw;right:-30vw}}
.ft{background:var(--dark);color:var(--dark-mute);border-top:1px solid rgba(231,233,230,.15);font-size:14px}
.ft__in{padding-block:48px calc(40px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,.6fr));gap:32px}
.ft b.t{display:block;color:var(--dark-ink);font:500 10.5px/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.ft a{text-decoration:none}.ft a:hover{color:var(--dark-ink)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.ft .logo{color:var(--dark-ink)}
.ft .logo i{border-color:var(--dark-ink)}
.ft__legal{grid-column:1/-1;border-top:1px solid rgba(231,233,230,.15);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 11.5px/1.6 var(--f-mono)}
.ft__copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ft__copy span{overflow-wrap:anywhere}
.ft__copy button{font:400 11px/1 var(--f-mono);background:transparent;border:1px solid rgba(231,233,230,.25);color:var(--dark-ink);padding:6px 8px;cursor:pointer;min-height:32px}
@media (max-width:860px){.ft__in{grid-template-columns:1fr 1fr}.ft__in>div:first-child{grid-column:1/-1}}
@media (max-width:520px){.ft__in{grid-template-columns:1fr}}

/* ================= intro / cursor ================= */
.intro{position:fixed;inset:0;z-index:150;background:var(--bg);display:grid;place-items:center;cursor:pointer;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:32px 32px}
.intro__in{display:flex;flex-direction:column;align-items:center;gap:18px}
.intro svg{width:120px;height:120px}
.intro b{font:700 clamp(30px,4vw,44px)/1 var(--f-display);letter-spacing:.4em;margin-right:-.4em}
.intro span{font:400 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.intro small{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));font:400 10.5px/1 var(--f-mono);color:var(--mute)}
.cur{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;z-index:120;display:none;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease)}
.cur::before,.cur::after{content:"";position:absolute;background:var(--ink)}
.cur::before{left:50%;top:0;bottom:0;width:1px}
.cur::after{top:50%;left:0;right:0;height:1px}
.cur.big{width:54px;height:54px;margin:-27px 0 0 -27px}
.cur.big::before,.cur.big::after{background:var(--acc)}
@media (pointer:fine){.cur.on{display:block}}

/* ================= variant picker (internal) ================= */
.vp{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:130;background:rgba(19,23,27,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#EEF1F3;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.28);font:400 12.5px/1.3 var(--f-body);width:min(286px,calc(100vw - 28px))}
.vp__hd{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 10px 10px 14px}
.vp__hd b{font:500 12.5px/1 var(--f-body);display:flex;gap:8px;align-items:center}
.vp__hd b::before{content:"";width:8px;height:8px;border-radius:50%;background:#E0566E}
.vp__tog{background:rgba(255,255,255,.08);border:0;color:#EEF1F3;border-radius:8px;min-height:32px;padding:0 10px;cursor:pointer;font:500 11.5px/1 var(--f-mono)}
.vp__list{list-style:none;margin:0;padding:0 8px 8px;display:flex;flex-direction:column;gap:2px}
.vp__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:3px 6px;border-radius:8px}
.vp__row.cur-ch{background:rgba(224,86,110,.16)}
.vp__name{background:none;border:0;color:#EEF1F3;text-align:left;cursor:pointer;padding:4px 0;min-height:30px;font:400 12.5px/1.2 var(--f-body)}
.vp__name small{display:block;color:#9AA4AE;font:400 10.5px/1.2 var(--f-mono);margin-top:2px}
.vp__opts{display:flex;gap:3px}
.vp__opts button{width:32px;height:30px;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:transparent;color:#EEF1F3;cursor:pointer;font:500 12px/1 var(--f-mono)}
.vp__opts button[aria-pressed="true"]{background:#EEF1F3;color:#13171B;border-color:#EEF1F3}
.vp__ft{display:flex;gap:6px;padding:0 14px 12px;align-items:center;justify-content:space-between}
.vp__ft span{color:#9AA4AE;font:400 10.5px/1.3 var(--f-mono)}
.vp.min .vp__list,.vp.min .vp__ft{display:none}
@media (max-width:600px){.vp{width:auto;left:calc(10px + env(safe-area-inset-left,0px));right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  .grain{display:none}
}