/* Eisenhauer GmbH, Klaus: the status line. One family (Source Sans 3, the humanist sans of their 2025 logo), four roles:
   display 200, heading 300, text 400, label 600 caps. At most two of them in one block. Accent: their steel blue, by colour only. */
@font-face { font-family: 'Source Sans 3'; src: url(../fonts/source-sans-3.woff2) format('woff2'); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --ink: #1b1f23; --ink2: #22272c; --ink3: #2d343a;
  --paper: #f1f2f0; --paper2: #e3e6e6; --white: #fafbfa;
  --steel: #43708e; --steel-l: #9dbdd2; --steel-d: #325166;
  --on-d: rgba(241, 242, 240, .68); --on-l: rgba(27, 31, 35, .66);
  --line-d: rgba(241, 242, 240, .16); --line-l: rgba(27, 31, 35, .14);
  --sans: 'Source Sans 3', 'Myriad Pro', system-ui, sans-serif;
  --gut: clamp(20px, 4.2vw, 72px);
  --hdr: 78px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --h2: clamp(2.2rem, min(4.1vw, 7.2svh), 4.5rem);
  --h3: clamp(1.45rem, min(1.9vw, 3.4svh), 1.9rem);
  --t: clamp(1rem, .95rem + .22vw, 1.1875rem);
  --lab: 11.5px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ink); }
body { margin: 0; font: 400 var(--t)/1.55 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; font-synthesis: none; font-kerning: normal; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
ol, ul, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: 300; }
figure { margin: 0; }
b, strong { font-weight: 600; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
:focus-visible { outline: 1.5px solid var(--steel); outline-offset: 3px; }
.vh, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; top: 10px; left: 10px; z-index: 99; background: var(--paper); color: var(--ink); padding: 10px 16px; }

/* ---------- the four roles ---------- */
.h2 { font: 300 var(--h2)/1.04 var(--sans); letter-spacing: -.02em; text-wrap: balance; }
.ac { color: var(--steel); }
[data-tone="dark"] .ac { color: var(--steel-l); }
.lab { font: 600 var(--lab)/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--on-l); }
[data-tone="dark"] .lab { color: var(--on-d); }
section p { color: var(--on-l); max-width: 34em; }
[data-tone="dark"] p { color: var(--on-d); }
section { position: relative; }
[data-tone="dark"] { background: var(--ink); color: var(--paper); }
[data-tone="light"] { background: var(--paper); color: var(--ink); }
.small { font-size: .82rem; line-height: 1.5; }

/* buttons: label caps, quiet; a line button tints with its own colour and never loses its label */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 54px; padding: 0 28px; font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); transition: background .35s var(--ease), color .35s var(--ease), border-color .35s; white-space: nowrap; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { background: var(--ink3); border-color: var(--ink3); }
.btn--line { background: transparent; color: var(--ink); border-color: rgba(27, 31, 35, .35); }
.btn--line:hover { background: rgba(27, 31, 35, .06); border-color: rgba(27, 31, 35, .55); }
[data-tone="dark"] .btn, .sheet .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
[data-tone="dark"] .btn:hover, .sheet .btn:hover { background: #fff; border-color: #fff; }
[data-tone="dark"] .btn--line, .sheet .btn--line { background: transparent; color: var(--paper); border-color: rgba(241, 242, 240, .38); }
[data-tone="dark"] .btn--line:hover, .sheet .btn--line:hover { background: rgba(241, 242, 240, .09); border-color: rgba(241, 242, 240, .6); }
.btn, .door, .lnk, .dach__tabs button, .dach__arrows button, .craft__q, .opt, .chip, .day { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.btn:active, .door:active, .dach__arrows button:active, .opt:active, .chip:active { transform: scale(.97); transition-duration: .08s; }
.lnk { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; border-bottom: 1px solid currentColor; }
.lnk svg { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.lnk:hover svg { transform: translateX(3px); }

/* ---------- header ---------- */
.hdr { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--hdr); display: flex; align-items: center; gap: 36px; padding: 0 var(--gut); color: var(--paper); transition: transform .5s var(--ease), background .4s, color .4s; }
.hdr.is-solid { background: rgba(27, 31, 35, .95); /* no backdrop blur: it re-samples the page under the bar on every scrolled frame */ }
.hdr.is-solid.is-light { background: rgba(241, 242, 240, .96); color: var(--ink); }
.hdr.is-up { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 14px; transition: opacity .5s; }
.brand__mark { width: 44px; height: auto; aspect-ratio: 809 / 418; color: currentColor; }
.brand__name { font: 600 14px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.hdr:not(.is-solid) .brand { opacity: 0; pointer-events: none; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a, .hdr__cta { font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 10px 0; position: relative; }
.nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a.is-on::after { transform: scaleX(1); }
.hdr__cta { border: 1px solid currentColor; padding: 13px 18px; opacity: .92; transition: background .3s, opacity .3s; }
.hdr__cta:hover { opacity: 1; background: rgba(127, 127, 127, .14); }
.menu-btn { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; }
.menu-btn span:not(.vh) { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .35s var(--ease); }
.menu-btn span:nth-child(1) { top: 18px; } .menu-btn span:nth-child(2) { top: 25px; }
.hdr.is-menu .menu-btn span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.hdr.is-menu .menu-btn span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.hdr.is-menu { background: transparent !important; color: var(--paper) !important; }
.hdr.is-menu .brand { opacity: 1; pointer-events: auto; }
.sheet { position: fixed; inset: 0; z-index: 29; background: var(--ink); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--hdr) + 3svh) var(--gut) calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; }
.sheet__nav { display: flex; flex-direction: column; }
.sheet__nav a { font: 200 clamp(2rem, 8.6vw, 3.2rem)/1.2 var(--sans); letter-spacing: -.02em; }
.sheet__foot { display: grid; gap: 10px; margin-top: 28px; }
.sheet__note { justify-self: start; border: 0; margin-top: 6px; color: var(--on-d); }

/* ---------- 1 · cover: the new house in front of the name ---------- */
.cover { height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #15181b; overflow-anchor: none; }
.cover__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(58% 64% at 63% 70%, #3c454d 0%, #2b3238 32%, #1e2327 62%, #15181b 100%); }
.cover__top { position: absolute; z-index: 3; left: var(--gut); top: calc(var(--hdr) + 2.2svh); display: flex; align-items: center; gap: clamp(16px, 1.6vw, 26px); --mk: clamp(38px, 6svh, 62px); }
.cover__mark { height: var(--mk); width: calc(var(--mk) * 809 / 418); color: var(--paper); overflow: visible; will-change: transform; }
.mk-hot { opacity: 0; }
.spark { opacity: 0; }
.cover__pre { font: 600 var(--lab)/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-d) !important; padding-left: clamp(16px, 1.6vw, 26px); border-left: 1px solid var(--line-d); }
.cover__name { position: absolute; z-index: 1; left: calc(var(--gut) - .04em); right: 0; top: calc(var(--hdr) + 2.2svh + clamp(38px, 6svh, 62px) + 2.8svh); font: 200 clamp(3.4rem, min(16vw, 27svh), 19rem)/.84 var(--sans); letter-spacing: -.012em; text-transform: uppercase; white-space: nowrap; color: var(--paper); will-change: transform; }
.cover__w { display: inline-block; }
.cover__house { position: absolute; z-index: 2; right: 1.6vw; bottom: 7svh; height: min(56svh, calc(62vw / 2.0674)); aspect-ratio: 2.0674; will-change: transform; }
.cover__img { width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; }
.cover__house::before { content: ''; position: absolute; z-index: -1; left: 10%; right: -6%; bottom: -5%; height: 22%; background: radial-gradient(closest-side, rgba(8, 10, 12, .62), rgba(8, 10, 12, 0)); }
/* the ground under the house runs into the dark floor */
.cover::after { content: ''; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 15svh; background: linear-gradient(0deg, #15181b 18%, rgba(21, 24, 27, 0)); pointer-events: none; }
.cover__foot { position: absolute; z-index: 4; left: var(--gut); bottom: max(5svh, 28px); display: flex; flex-direction: column; gap: 2.2svh; }
.cover__what { font: 600 var(--lab)/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--on-d) !important; }
.doors { display: flex; gap: 12px; }
.door { position: relative; display: flex; flex-direction: column; gap: 8px; width: clamp(230px, 18vw, 290px); padding: 19px 62px 19px 22px; background: rgba(21, 24, 27, .7); border: 1px solid rgba(241, 242, 240, .26); color: var(--paper); transition: background .45s var(--ease), color .45s var(--ease), border-color .45s; }
.door__t { font: 300 clamp(1.25rem, 1.55vw, 1.55rem)/1.1 var(--sans); }
.door__s { font: 600 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-d); transition: color .45s; }
.door svg { position: absolute; right: 18px; top: 50%; width: 26px; height: 26px; margin-top: -13px; transition: transform .45s var(--ease); }
.door:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.door:hover .door__s { color: var(--on-l); }
.door:hover svg { transform: translateX(5px); }

/* ---------- 2 · the new house ---------- */
.haus { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 37fr) minmax(0, 63fr); grid-template-areas: 'text a'; column-gap: 5vw; align-items: center; padding: calc(var(--hdr) + 3svh) var(--gut) 5svh; }
.haus__text { grid-area: text; display: flex; flex-direction: column; gap: 3.4svh; }
.haus__p { max-width: 28em; }
.haus__ph--a { grid-area: a; position: relative; height: calc(100svh - var(--hdr) - 8svh); max-height: 900px; overflow: hidden; background: var(--paper2); }
.haus__ph img { width: 100%; height: 100%; object-fit: cover; }
.haus__ph--a img { object-position: 50% 62%; }
.haus__ph--b { position: absolute; z-index: 2; width: clamp(150px, 15vw, 250px); aspect-ratio: 3 / 4; left: calc(var(--gut) + (100% - 2 * var(--gut) - 5vw) * .37 + 5vw - 3.4vw); bottom: calc(5svh + 5svh); border: 8px solid var(--paper); background: var(--paper2); }
.figs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 clamp(24px, 3vw, 52px); padding-top: 3svh; border-top: 1px solid var(--line-l); }
.figs dt { font: 200 clamp(2.2rem, min(3.6vw, 6.4svh), 3.9rem)/1 var(--sans); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.figs dd { margin-top: 10px; font: 600 10.5px/1.35 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-l); }
.live { display: flex; align-items: center; gap: 12px; font: 600 10.5px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-l); }
.live i, .now i { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #e3a23c; }
.live.is-on i::after, .now.is-open i::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: inherit; opacity: .25; }
.live.is-on i { background: #f0b545; }
.live.is-off i { background: rgba(27, 31, 35, .35); }

/* ---------- 3 · roofs: slides ---------- */
.dach { height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; }
.dach__head { position: absolute; z-index: 5; top: calc(var(--hdr) + 2.4svh); left: var(--gut); right: var(--gut); display: flex; justify-content: space-between; align-items: baseline; }
.dach__count { font: 600 var(--lab)/1 var(--sans); letter-spacing: .2em; color: var(--on-d) !important; }
.dach__count b { color: var(--paper); font-weight: 600; }
.dach__stage { position: absolute; inset: 0; touch-action: pan-y; }
.sl { position: absolute; inset: 0; visibility: hidden; }
.sl.is-on { visibility: visible; }
.sl__ph { position: absolute; z-index: 1; right: var(--gut); top: calc(var(--hdr) + 8svh); bottom: calc(5svh + 92px); width: 55vw; overflow: hidden; background: var(--ink3); }
.sl__ph img { width: 100%; height: 100%; object-fit: cover; }
.sl__ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 31, 35, .72), rgba(27, 31, 35, 0) 38%); }
.sl__name { position: absolute; z-index: 2; left: calc(var(--gut) - .05em); top: calc(var(--hdr) + 15svh); font: 200 min(7.8vw, 15svh, calc(122vw / var(--len))) /.9 var(--sans); letter-spacing: -.03em; color: var(--paper); white-space: nowrap; max-width: none !important; }
.sl__txt { position: absolute; z-index: 3; left: var(--gut); bottom: calc(5svh + 92px); width: min(25em, 32vw); display: flex; flex-direction: column; align-items: flex-start; gap: 2.4svh; }
.sl__t { color: var(--paper) !important; opacity: .86; }
.sl__f { font: 600 10.5px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--steel-l) !important; }
.dach__nav { position: absolute; z-index: 5; left: var(--gut); right: var(--gut); bottom: 5svh; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line-d); padding-top: 14px; }
.dach__tabs { display: flex; gap: clamp(16px, 2.6vw, 40px); }
.dach__tabs button { position: relative; font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-d); padding: 12px 0; transition: color .3s; }
.dach__tabs button::after { content: ''; position: absolute; left: 0; right: 0; top: -15px; height: 2px; background: var(--steel-l); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.dach__tabs button:hover, .dach__tabs button[aria-selected="true"] { color: var(--paper); }
.dach__tabs button[aria-selected="true"] { --p: 1; }
.dach__arrows { display: flex; gap: 10px; }
.dach__arrows button { width: 54px; height: 54px; border: 1px solid rgba(241, 242, 240, .3); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.dach__arrows button:hover { background: rgba(241, 242, 240, .1); border-color: rgba(241, 242, 240, .6); }
.dach__arrows svg { width: 20px; height: 20px; }
.dach__arrows .prev svg { transform: rotate(180deg); }

/* ---------- 4 · the inquiry ---------- */
.cfg { height: 100svh; min-height: 600px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 3.6vw; row-gap: 2.6svh; padding: calc(var(--hdr) + 2.8svh) var(--gut) 4.4svh; }
.cfg__head { grid-column: 1 / -1; display: flex; align-items: flex-end; justify-content: space-between; gap: 4vw; }
.cfg__prog { display: flex; gap: 6px; flex: 0 1 46%; }
.cfg__prog li { flex: 1; display: flex; flex-direction: column; gap: 9px; font: 600 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(27, 31, 35, .4); transition: color .3s; }
.cfg__prog li::before { content: ''; height: 2px; background: var(--line-l); transition: background .4s; }
.cfg__prog li.is-done { color: var(--on-l); }
.cfg__prog li.is-done::before { background: rgba(27, 31, 35, .45); }
.cfg__prog li.is-on { color: var(--ink); }
.cfg__prog li.is-on::before { background: var(--steel); }
.cfg__now { display: none; }
.cfg__vis { grid-column: 1; grid-row: 2; position: relative; min-height: 0; background-color: var(--white); background-image: linear-gradient(rgba(67, 112, 142, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(67, 112, 142, .07) 1px, transparent 1px); background-size: 28px 28px; border: 1px solid var(--line-l); overflow: hidden; }
.cfg__svg { position: absolute; inset: 3% 3% 13%; width: 94%; height: 84%; overflow: visible; }
.cfg__svg * { vector-effect: non-scaling-stroke; }
.cfg__svg text { font: 600 calc(12px / var(--k, 1)) var(--sans); letter-spacing: .08em; fill: var(--steel-d); stroke: none; }
.cfg__fig { position: absolute; left: 22px; bottom: 18px; display: flex; align-items: baseline; gap: 14px; }
.cfg__fig b { font: 200 clamp(1.9rem, min(3vw, 5.4svh), 3.2rem)/1 var(--sans); letter-spacing: -.02em; }
.cfg__fig span { font: 600 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-l); }
.cfg__shot { position: absolute; right: 16px; bottom: 16px; width: clamp(110px, 12vw, 170px); background: var(--white); border: 1px solid var(--line-l); padding: 6px 6px 8px; box-shadow: 0 14px 30px rgba(27, 31, 35, .12); transform: rotate(1.5deg); }
.cfg__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cfg__shot span { display: block; margin-top: 6px; font: 600 9.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-l); }
.cfg__panel { grid-column: 2; grid-row: 2; min-height: 0; display: flex; flex-direction: column; }
.cfg__steps { position: relative; flex: 1 1 auto; min-height: 0; }
.st { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.2svh; visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
.st.is-on { visibility: visible; opacity: 1; transition: opacity .45s .05s, visibility 0s; }
.st__h { font: 300 var(--h3)/1.15 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.st__hint { font-size: .9rem; line-height: 1.45; color: var(--on-l); max-width: 32em; }
.st__lab { font: 600 10.5px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-l); margin-bottom: 10px; }
.cfg__nav { display: flex; justify-content: space-between; gap: 10px; padding-top: 2svh; border-top: 1px solid var(--line-l); }
.cfg__nav .btn { height: 50px; padding: 0 24px; }
.cfg__nav .btn:first-child.is-off { visibility: hidden; }

/* options with a picture (step 1) */
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.opt { position: relative; display: flex; flex-direction: column; text-align: left; background: var(--white); border: 1px solid var(--line-l); transition: border-color .3s, box-shadow .3s; }
.opt img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--paper2); }
.opt span { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.opt b { font: 400 .98rem/1.2 var(--sans); overflow-wrap: break-word; hyphens: manual; }
.opt small { font: 600 9.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-l); }
.opt:hover { border-color: rgba(27, 31, 35, .4); }
.opt[aria-checked="true"] { border-color: var(--steel); box-shadow: inset 0 0 0 1px var(--steel); }
.opt[aria-checked="true"]::after { content: ''; position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6.5 12.5 3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* chips: single or multiple choice */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(27, 31, 35, .22); background: var(--white); font: 400 .95rem/1.15 var(--sans); text-align: left; transition: border-color .25s, background .25s, color .25s; }
.chip:hover { border-color: rgba(27, 31, 35, .5); }
.chip[aria-checked="true"], .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(27, 31, 35, .25); background: var(--sw); flex: none; }
.chip[aria-checked="true"] i { border-color: rgba(241, 242, 240, .5); }
.chip--wish::before { content: ''; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: linear-gradient(#000 0 0) 50% 50% / 100% 1.4px no-repeat, linear-gradient(#000 0 0) 50% 50% / 1.4px 100% no-repeat; mask: linear-gradient(#000 0 0) 50% 50% / 100% 1.4px no-repeat, linear-gradient(#000 0 0) 50% 50% / 1.4px 100% no-repeat; }
.chip--wish[aria-pressed="true"]::before { width: 14px; height: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12.5 5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%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 24 24'%3E%3Cpath d='m4 12.5 5 5L20 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* size sliders */
.dim { display: grid; grid-template-columns: 1fr auto; align-items: baseline; row-gap: 6px; }
.dim + .dim { margin-top: 2.2svh; }
.dim output { font: 200 clamp(1.7rem, min(2.4vw, 4.4svh), 2.4rem)/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.dim input { grid-column: 1 / -1; width: 100%; height: 34px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.dim input::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--steel) var(--f, 50%), rgba(27, 31, 35, .18) var(--f, 50%)); }
.dim input::-moz-range-track { height: 2px; background: rgba(27, 31, 35, .18); }
.dim input::-moz-range-progress { height: 2px; background: var(--steel); }
.dim input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink); box-shadow: 0 4px 10px rgba(27, 31, 35, .18); }
.dim input::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 1.5px solid var(--ink); }

/* photo, fields */
.drop { display: flex; align-items: center; gap: 18px; padding: 18px; border: 1px dashed rgba(27, 31, 35, .35); background: var(--white); cursor: pointer; transition: border-color .3s, background .3s; }
.drop:hover { border-color: var(--steel); background: #fff; }
.drop svg { width: 34px; height: 34px; flex: none; color: var(--steel); }
.drop b { display: block; font: 400 1.02rem/1.3 var(--sans); }
.drop small { display: block; font-size: .86rem; color: var(--on-l); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop img { width: 96px; height: 72px; object-fit: cover; flex: none; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld--w { grid-column: 1 / -1; }
.fld span { font: 600 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-l); }
.fld input, .fld textarea { width: 100%; height: 46px; padding: 0 14px; border: 1px solid rgba(27, 31, 35, .22); background: var(--white); border-radius: 0; font-size: 16px; transition: border-color .25s; }
.fld textarea { height: 76px; padding: 10px 14px; resize: none; line-height: 1.4; }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--steel); }
.fld.is-bad input { border-color: #b4532f; }
.err { min-height: 1.2em; font-size: .86rem; color: #a5482a; }
.days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 64px; padding: 9px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 5px; border: 1px solid rgba(27, 31, 35, .22); background: var(--white); transition: border-color .25s, background .25s, color .25s; }
.day small { font: 600 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-l); }
.day b { font: 300 1.3rem/1 var(--sans); }
.day:hover { border-color: rgba(27, 31, 35, .5); }
.day[aria-checked="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.day[aria-checked="true"] small { color: rgba(241, 242, 240, .7); }

/* the e-mail Karl would receive */
.mail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-l); box-shadow: 0 24px 50px rgba(27, 31, 35, .08); }
.mail__hd { padding: 16px 20px 14px; border-bottom: 1px solid var(--line-l); display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: .88rem; line-height: 1.35; }
.mail__hd dt { font: 600 9.5px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--on-l); }
.mail__hd dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mail__hd .sub { font-weight: 600; }
.mail__bd { padding: 14px 20px 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: .9rem; line-height: 1.35; overflow: auto; }
.mail__bd dt { color: var(--on-l); }
.mail__bd dd { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.mail__att { display: flex; gap: 8px; padding: 0 20px 16px; }
.mail__att span { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border: 1px solid var(--line-l); font-size: .8rem; color: var(--on-l); }
.mail__att img, .mail__att svg { width: 44px; height: 32px; object-fit: cover; background: var(--paper2); }
.sent { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: rgba(67, 112, 142, .1); border-left: 2px solid var(--steel); font-size: .9rem; line-height: 1.45; color: var(--ink); }
.sent svg { width: 20px; height: 20px; flex: none; color: var(--steel); margin-top: 1px; }

/* the sketch */
.sk-floor { fill: rgba(67, 112, 142, .06); stroke: rgba(27, 31, 35, .5); stroke-width: 1; }
.sk-grid { stroke: rgba(67, 112, 142, .22); stroke-width: 1; fill: none; }
.sk-wall { fill: #e9ebea; stroke: rgba(27, 31, 35, .45); stroke-width: 1; }
.sk-wall2 { fill: rgba(233, 235, 234, .75); stroke: rgba(27, 31, 35, .4); stroke-width: 1; }
.sk-door { fill: rgba(67, 112, 142, .12); stroke: rgba(27, 31, 35, .45); stroke-width: 1; }
.sk-frame { fill: var(--fc); stroke: var(--fs); stroke-width: 1; }
.sk-line { stroke: var(--fc); stroke-width: 2; fill: none; }
.sk-thin { stroke: rgba(27, 31, 35, .5); stroke-width: 1; fill: none; }
.sk-lam { fill: var(--lam); stroke: rgba(27, 31, 35, .35); stroke-width: .8; }
.sk-glass { fill: rgba(120, 170, 200, .2); stroke: rgba(67, 112, 142, .7); stroke-width: 1; }
.sk-cloth { fill: #ecebe6; stroke: rgba(27, 31, 35, .35); stroke-width: .8; }
.sk-cloth2 { fill: #d9d8d2; stroke: rgba(27, 31, 35, .35); stroke-width: .8; }
.sk-screen { fill: rgba(70, 74, 78, .38); stroke: rgba(27, 31, 35, .5); stroke-width: 1; }
.sk-led { stroke: #f4c25b; stroke-width: 3; fill: none; }
.sk-led2 { stroke: rgba(244, 194, 91, .35); stroke-width: 9; fill: none; }
.sk-heat { fill: rgba(240, 120, 60, .16); stroke: none; }
.sk-heater { fill: #3b4248; stroke: none; }
.sk-dim { stroke: var(--steel); stroke-width: 1; fill: none; }
.sk-bar { stroke: var(--fc); stroke-width: 1.4; fill: none; }
.sk-orn { stroke: var(--fc); stroke-width: 1.2; fill: none; }
.sk-old { stroke: rgba(27, 31, 35, .45); stroke-width: 1; fill: rgba(27, 31, 35, .04); stroke-dasharray: 6 5; }
.cfg__vis[data-color="anthrazit"] { --fc: #2f363c; --fs: #1b1f23; --lam: #8a949b; }
.cfg__vis[data-color="weiss"] { --fc: #f7f8f7; --fs: #6d757b; --lam: #ffffff; }
.cfg__vis[data-color="ral"] { --fc: #43708e; --fs: #2c4a5e; --lam: #a9c1d1; }
.cfg__vis[data-color="weiss"] .sk-line, .cfg__vis[data-color="weiss"] .sk-bar, .cfg__vis[data-color="weiss"] .sk-orn { stroke: #8b939a; }

/* ---------- 5 · the wall of their work ---------- */
.wall { height: 100svh; min-height: 560px; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.wall__grid { position: absolute; inset: -14svh 0; z-index: -2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 0 10px; }
.wall__col { display: flex; flex-direction: column; gap: 10px; will-change: transform; }
.wall__col img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--ink3); }
.wall::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56% 60% at 50% 50%, rgba(27, 31, 35, .92), rgba(27, 31, 35, .6)); }
.wall__body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3svh; padding: 0 var(--gut); }
.wall__n { max-width: none !important; }
.wall__n b { display: block; font: 200 clamp(6rem, min(22vw, 40svh), 22rem)/.8 var(--sans); letter-spacing: -.05em; color: var(--paper); font-weight: 200; }
.wall__t { max-width: 22em; font-size: clamp(1.05rem, 1.4vw, 1.35rem); line-height: 1.45; color: var(--paper) !important; opacity: .84; }

/* ---------- 6 · the locksmith's craft ---------- */
.craft { height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 5vw; padding: calc(var(--hdr) + 3svh) var(--gut) 5svh; }
.craft__side { display: flex; flex-direction: column; justify-content: center; gap: 4svh; min-height: 0; }
.craft__list { border-top: 1px solid var(--line-l); }
.craft__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; text-align: left; padding: 1.5svh 0; border-bottom: 1px solid var(--line-l); font: 300 clamp(1.15rem, min(1.6vw, 3svh), 1.6rem)/1.25 var(--sans); color: rgba(27, 31, 35, .5); transition: color .35s, padding .5s var(--ease); }
.craft__q svg { width: 22px; height: 22px; flex: none; opacity: 0; transform: translateX(-8px); transition: opacity .35s, transform .45s var(--ease); }
.craft__q:hover { color: var(--ink); }
.craft__q[aria-selected="true"] { color: var(--ink); padding-left: 12px; }
.craft__q[aria-selected="true"] svg { opacity: 1; transform: none; color: var(--steel); }
.craft__view { position: relative; min-height: 0; }
.craft__ph { position: absolute; inset: 0 0 0 9%; overflow: hidden; background: var(--paper2); }
.craft__ph img { width: 100%; height: 100%; object-fit: cover; }
.craft__card { position: absolute; left: 0; bottom: 6svh; width: min(430px, 72%); background: var(--paper); padding: 28px 30px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; box-shadow: 0 30px 60px rgba(27, 31, 35, .12); }
.craft__card p { font: 300 clamp(1.08rem, 1.35vw, 1.35rem)/1.42 var(--sans); color: var(--ink); max-width: none; }
.craft__card .btn { height: 48px; padding: 0 20px; }
.craft__cards { display: none; }

/* ---------- 7 · team and seals ---------- */
.team { height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); column-gap: 5vw; align-items: center; padding: calc(var(--hdr) + 3svh) var(--gut) 5svh; }
.team__ph { height: calc(100svh - var(--hdr) - 8svh); overflow: hidden; background: var(--ink3); }
.team__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 50%; }
.team__body { display: flex; flex-direction: column; gap: 4.2svh; min-width: 0; }
.team__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6svh 2vw; }
.team__list li { display: flex; flex-direction: column; gap: 3px; padding-top: 1.1svh; border-top: 1px solid var(--line-d); }
.team__list b { font: 400 clamp(.95rem, 1.1vw, 1.08rem)/1.25 var(--sans); color: var(--paper); }
.team__list small { font-size: .82rem; line-height: 1.3; color: var(--on-d); }
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2vw; padding-top: 3svh; border-top: 1px solid var(--line-d); }
.proof li { display: flex; flex-direction: column; gap: 8px; }
.proof b { font: 200 clamp(1.4rem, min(1.9vw, 3.6svh), 2rem)/1.05 var(--sans); letter-spacing: -.01em; color: var(--paper); white-space: nowrap; }
.proof small { font: 600 9.5px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-l); }

/* ---------- 8 · contact ---------- */
.kontakt { height: 100svh; min-height: 560px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: 'ph body' 'ph side'; column-gap: 5vw; row-gap: 5svh; padding: calc(var(--hdr) + 3svh) var(--gut) 5svh; }
.kontakt__ph { grid-area: ph; overflow: hidden; background: var(--paper2); }
.kontakt__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 55%; }
.kontakt__body { grid-area: body; align-self: end; display: flex; flex-direction: column; gap: 3svh; }
.kontakt__side { grid-area: side; display: flex; flex-direction: column; gap: 2.6svh; }
.now { display: flex; align-items: center; gap: 12px; font: 600 var(--lab)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink) !important; }
.now.is-open i { background: #3f9a62; }
.now i { background: #c08a3e; }
.kontakt__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hours { border-collapse: collapse; width: 100%; font-size: .95rem; }
.hours td { padding: 1svh 0; border-bottom: 1px solid var(--line-l); color: var(--on-l); }
.hours td + td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr.is-today td { color: var(--ink); }
.hours tr.is-today td:first-child::after { content: ' · heute'; color: var(--steel); }
.kontakt__more { display: flex; flex-wrap: wrap; gap: 4px 30px; }
.kontakt__more .lnk { border: 0; padding: 8px 0; color: var(--on-l); }
.kontakt__more .lnk:hover { color: var(--ink); }

/* ---------- footer, note, dock ---------- */
.foot { background: var(--ink); color: var(--on-d); padding: 9svh var(--gut) 0; display: grid; gap: 14px; border-top: 1px solid var(--line-d); font-size: .88rem; }
.foot__top { display: flex; align-items: center; gap: 18px; margin-bottom: 10px; }
.foot__mark { width: 74px; height: auto; aspect-ratio: 809 / 418; color: var(--paper); }
.foot__name { font: 200 clamp(1.8rem, 3vw, 2.6rem)/1 var(--sans); color: var(--paper); letter-spacing: -.01em; }
.foot a { text-decoration: underline; text-decoration-color: rgba(241, 242, 240, .3); text-underline-offset: 3px; }
.foot a.vc-credit { text-decoration: none; }
.foot__s { font-size: .8rem; }
.note-tab { position: fixed; z-index: 25; right: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 16px 9px; background: var(--ink3); color: var(--paper); opacity: .82; }
.note-tab:hover { opacity: 1; }
.note { position: fixed; z-index: 40; right: 18px; bottom: 18px; width: min(390px, calc(100vw - 36px)); background: var(--paper); color: var(--ink); padding: 26px 24px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); display: grid; gap: 14px; font-size: .92rem; line-height: 1.55; }
.note p { color: var(--on-l); }
.note b { color: var(--ink); font-weight: 600; }
.note .btn { justify-self: start; height: 46px; }
.note .small a { text-decoration: underline; }
.note__x { position: absolute; top: 6px; right: 12px; width: 40px; height: 40px; font-size: 24px; line-height: 1; }
.dock { display: none; }

/* VCSLV credit: one quiet line under the footer (templates/credit) */
.vc-credit-row { margin-top: clamp(28px, 4vw, 44px); padding: 14px 0 calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); display: flex; justify-content: center; }
.vc-credit { --vc-dot: #D2664A; display: inline-flex; align-items: center; gap: .7em; min-height: 44px; padding: 0 6px; color: inherit; text-decoration: none; font-size: 12px; line-height: 1; letter-spacing: .04em; opacity: .72; transition: opacity .4s ease; }
.vc-credit--light { --vc-dot: #A8452F; }
.vc-credit__mark { display: block; height: .92em; width: auto; overflow: visible; }
.vc-credit__dot { fill: var(--vc-dot); transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.2, .9, .25, 1.35) .15s, filter .4s ease; }
.vc-credit__line { padding-left: .7em; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.vc-credit.is-arm .vc-credit__dot { transform: scale(0); }
.vc-credit.is-arm.is-in .vc-credit__dot { transform: scale(1); }
.vc-credit:hover, .vc-credit:focus-visible { opacity: 1; }
.vc-credit:hover .vc-credit__dot, .vc-credit:focus-visible .vc-credit__dot { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--vc-dot) 80%, transparent)); }
.vc-credit:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 4px; }
@media (max-width: 520px) {
  .vc-credit { flex-wrap: wrap; justify-content: center; row-gap: 8px; padding: 10px 6px; }
  .vc-credit__line { flex-basis: 100%; text-align: center; padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .vc-credit.is-arm .vc-credit__dot { transform: none; transition: none; } }

/* ---------- motion helpers ---------- */
.is-intro .cover__name, .is-intro .cover__pre, .is-intro .cover__mark, .is-intro .cover__house, .is-intro .cover__foot, .is-intro .hdr, .is-intro .note-tab { visibility: hidden; }
.is-intro .cover__glow { opacity: 0; }
.no-anim .cover *, .no-anim .hdr { visibility: visible !important; opacity: 1 !important; }
.no-anim .mk-hot, .no-anim .spark { opacity: 0 !important; }

/* ---------- laptops with little height ---------- */
@media (min-width: 900px) and (max-height: 760px) {
  :root { --hdr: 66px; }
  .cfg { row-gap: 1.8svh; }
  .opts { gap: 8px; }
  .opt img { aspect-ratio: 16 / 9; }
  .opt span { padding: 7px 10px 9px; }
  .st { gap: 1.6svh; }
  .st__hint { font-size: .84rem; }
  .figs dd { margin-top: 6px; }
  .team__list { gap: 1.1svh 2vw; }
  .team__list small { font-size: .76rem; }
  .craft__card { padding: 22px 24px 24px; gap: 14px; }
  .sl__t { font-size: .95rem; }
  .chip { min-height: 40px; }
  .fld input { height: 42px; }
  .fld textarea { height: 62px; }
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1180px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .hdr__cta { margin-left: auto; }
  .team__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4svh; }
}
@media (max-width: 899px) {
  :root { --hdr: 62px; --gut: 18px; --t: 1rem; --h2: clamp(2rem, 8.8vw, 2.6rem); --h3: 1.4rem; --lab: 10.5px; --dockh: calc(84px + env(safe-area-inset-bottom)); }
  .hdr { gap: 14px; }
  .brand__mark { width: 38px; }
  .brand__name { font-size: 12.5px; letter-spacing: .22em; }
  .hdr__cta { display: none; }
  .menu-btn { margin-left: auto; }
  section p { font-size: .97rem; }

  .cover { min-height: 520px; }
  .cover__glow { background: radial-gradient(110% 52% at 56% 58%, #3c454d 0%, #2b3238 36%, #1e2327 64%, #15181b 100%); }
  .cover__top { top: calc(var(--hdr) + 1.4svh); --mk: 34px; gap: 14px; }
  .cover__pre { font-size: 9.5px; letter-spacing: .2em; padding-left: 14px; }
  .cover__name { --fs: min(16.6vw, 13svh); top: calc(var(--hdr) + 1.4svh + 34px + 2.4svh); font-size: var(--fs); }
  /* the house hangs from the name (Safari's short visible height must never push it over the letters) */
  .cover__house { --nb: calc(var(--hdr) + 1.4svh + 34px + 2.4svh + .86 * min(16.6vw, 13svh)); --hh: min(calc(120vw / 2.0674), calc(max(100svh, 520px) - var(--nb) - 3svh - 150px)); height: var(--hh); top: max(calc(var(--nb) + 3svh), calc(var(--nb) + (max(100svh, 520px) - var(--nb) - 150px - var(--hh)) / 2)); bottom: auto; right: -3vw; }
  .cover::after { height: 30svh; background: linear-gradient(0deg, #15181b 34%, rgba(21, 24, 27, 0)); }
  .cover__foot { right: var(--gut); bottom: calc(16px + env(safe-area-inset-bottom)); gap: 12px; }
  .cover__what { font-size: 9.5px; letter-spacing: .22em; }
  .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .door { width: auto; padding: 14px 34px 14px 14px; gap: 6px; }
  .door__t { font-size: 1.12rem; }
  .door__s { font-size: 9px; letter-spacing: .1em; }
  .door svg { right: 10px; width: 20px; height: 20px; margin-top: -10px; }

  .haus { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'a' 'text'; align-content: start; row-gap: 2.6svh; padding: var(--hdr) 0 var(--dockh); }
  .haus__ph--a { height: 34svh; }
  .haus__ph--b { display: none; }
  .haus__text { padding: 0 var(--gut); gap: 2.2svh; }
  .figs { padding-top: 2svh; gap: 0 22px; }
  .figs dt { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .figs dd { font-size: 9px; letter-spacing: .12em; margin-top: 6px; }

  .dach__head { top: calc(var(--hdr) + 1.4svh); }
  .sl__name { top: calc(var(--hdr) + 5.6svh); font-size: min(12vw, calc(150vw / var(--len))); }
  .sl__ph { left: 0; right: 0; width: auto; top: calc(var(--hdr) + 5.6svh + 13vw + 2svh); bottom: auto; height: 34svh; }
  .sl__ph::after { background: linear-gradient(0deg, rgba(27, 31, 35, .4), rgba(27, 31, 35, 0) 40%); }
  .sl__txt { width: auto; right: var(--gut); top: calc(var(--hdr) + 5.6svh + 13vw + 4svh + 34svh); bottom: auto; gap: 1.8svh; }
  .sl__t { font-size: .95rem !important; line-height: 1.45; }
  .sl__f { display: none; }
  .sl__txt .btn { height: 46px; padding: 0 18px; font-size: 11px; }
  .dach__nav { bottom: calc(var(--dockh) + 4px); padding-top: 10px; border-top: 0; }
  .dach__tabs { flex: 1; gap: 6px; }
  .dach__tabs button { flex: 1; height: 30px; font-size: 0; padding: 0; }
  .dach__tabs button::after { top: auto; bottom: 13px; height: 2px; background: var(--steel-l); }
  .dach__tabs button::before { content: ''; position: absolute; left: 0; right: 0; bottom: 13px; height: 2px; background: var(--line-d); }
  .dach__arrows { display: none; }

  .cfg { height: auto; min-height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); row-gap: 1.6svh; padding: calc(var(--hdr) + 1.4svh) var(--gut) calc(var(--dockh) + 6px); }
  .cfg__head { grid-column: 1; }
  .cfg__head .h2 { display: none; }
  .cfg__prog { flex: 1; gap: 4px; }
  .cfg__prog li { font-size: 0; gap: 0; }
  .cfg__head { flex-direction: column; align-items: stretch; gap: 8px; }
  .cfg__now { display: block; font: 600 10px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--on-l) !important; }
  .cfg__now b { color: var(--ink); font-weight: 600; }
  .cfg__vis { grid-column: 1; grid-row: 2; height: 22svh; min-height: 140px; }
  .cfg.is-late .cfg__vis { display: none; }
  .cfg__svg { inset: 4% 3% 16%; height: 80%; }
  .cfg__fig { left: 12px; bottom: 8px; gap: 10px; }
  .cfg__fig b { font-size: 1.5rem; }
  .cfg__fig span { font-size: 9px; }
  .cfg__shot { display: none !important; }
  .cfg__panel { grid-column: 1; grid-row: 3; min-height: 284px; }
  .st { gap: 1svh; }
  .st__lab { margin-bottom: 6px; }
  .st__h { font-size: 1.3rem; }
  .st__hint { font-size: .84rem; }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .opt { flex-direction: row; align-items: center; }
  .opt img { width: 50px; height: 50px; aspect-ratio: auto; flex: none; }
  .opt span { padding: 6px 8px; gap: 2px; }
  .opt b { font-size: .86rem; }
  .opt small { font-size: 8.5px; letter-spacing: .1em; }
  .opt[aria-checked="true"]::after { width: 18px; height: 18px; top: 4px; right: 4px; background-size: 14px; }
  .chips { gap: 6px; }
  .chip { min-height: 40px; padding: 0 12px; font-size: .9rem; }
  .dim + .dim { margin-top: 1svh; }
  .dim output { font-size: 1.6rem; }
  .fields { gap: 8px; }
  .fld input { height: 42px; }
  .fld textarea { height: 54px; }
  .cfg__nav { padding-top: 10px; }
  .cfg__nav .btn { height: 46px; padding: 0 18px; flex: 1; }
  .drop { padding: 14px; }
  .mail__hd { padding: 12px 14px 10px; font-size: .82rem; }
  .mail__bd { padding: 10px 14px 12px; font-size: .84rem; gap: 4px 12px; }
  .mail__att { padding: 0 14px 12px; }

  .wall__grid { grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px; }
  .wall__col { gap: 6px; }
  .wall__col:nth-child(n+4) { display: none; }
  .wall__n b { font-size: 46vw; }
  .wall { padding-bottom: var(--dockh); }

  .craft { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); row-gap: 2.4svh; padding: calc(var(--hdr) + 1.4svh) 0 var(--dockh); }
  .craft__side { padding: 0 var(--gut); }
  .craft__list, .craft__view { display: none; }
  .craft__cards { display: flex; min-height: 0; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 var(--gut) 8px; scroll-padding: 0 var(--gut); scrollbar-width: none; }
  .craft__cards::-webkit-scrollbar { display: none; }
  .craft__c { flex: none; width: 80vw; scroll-snap-align: start; display: flex; flex-direction: column; background: var(--white); }
  .craft__c img { width: 100%; flex: 1 1 auto; min-height: 0; object-fit: cover; background: var(--paper2); }
  .craft__c div { padding: 14px 16px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .craft__c b { font: 300 1.25rem/1.2 var(--sans); color: var(--ink); }
  .craft__c p { font-size: .88rem; line-height: 1.45; }
  .craft__c .lnk { font-size: 10.5px; padding: 6px 0; border-bottom-color: rgba(27, 31, 35, .3); }

  .team { grid-template-columns: minmax(0, 1fr); align-content: start; align-items: start; row-gap: 2.4svh; padding: var(--hdr) 0 var(--dockh); }
  .team__ph { height: 19svh; }
  .team__body { padding: 0 var(--gut); gap: 1.8svh; }
  .team__list { gap: 5px 14px; }
  .team__list li { padding-top: 4px; gap: 0; }
  .team__list b { font-size: .84rem; line-height: 1.2; }
  .team__list small { font-size: .7rem; line-height: 1.25; }
  .proof { display: flex; overflow-x: auto; gap: 22px; padding-top: 1.8svh; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding-left: var(--gut); padding-right: var(--gut); }
  .proof::-webkit-scrollbar { display: none; }
  .proof li { flex: none; gap: 5px; }
  .proof b { font-size: 1.3rem; }
  .proof small { font-size: 8.5px; }

  .kontakt { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: 'ph' 'body' 'side'; align-content: start; row-gap: 2.4svh; padding: var(--hdr) 0 var(--dockh); }
  .kontakt__ph { height: 24svh; }
  .kontakt__body, .kontakt__side { padding: 0 var(--gut); gap: 1.8svh; }
  .kontakt__p { font-size: .9rem !important; }
  .kontakt__btns .btn { flex: 1 1 auto; height: 48px; padding: 0 16px; }
  .hours { font-size: .84rem; }
  .hours td { padding: .6svh 0; }
  .kontakt__more { gap: 0 22px; }
  .kontakt__more .lnk { padding: 4px 0; font-size: 10.5px; }

  .foot { padding-top: 6svh; }
  .foot .vc-credit-row { padding-bottom: calc(var(--dockh) + 8px); }
  .note-tab { display: none; }
  .dock { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; position: fixed; z-index: 26; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); transform: translateY(150%); transition: transform .5s var(--ease); }
  .dock.is-on { transform: none; }
  .dock a { height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; background: rgba(27, 31, 35, .95); color: var(--paper); border: 1px solid rgba(241, 242, 240, .14); }
  .dock a:last-child { background: var(--paper); color: var(--ink); border-color: rgba(27, 31, 35, .2); }
  .dock svg { width: 18px; height: 18px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .haus__p { display: none; }
  .live { display: none; }
  .st__hint { display: none; }
  .team__ph { height: 14svh; }
  .kontakt__p { display: none; }
  .kontakt__ph { height: 20svh; }
  .craft__c p { font-size: .84rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
}