/* Celik x Willenberger Masch 33. Three colours: ink, near-neutral white, fine beige. */
:root{
  --ink:oklch(.175 .012 80);
  --ink-2:oklch(.23 .012 80);
  --on-ink:oklch(.96 .004 80);
  --on-ink-soft:oklch(.80 .012 80);
  --white:oklch(.985 .002 80);
  --white-2:oklch(.955 .004 80);
  --text:oklch(.24 .012 80);
  --text-soft:oklch(.42 .012 80);
  --line:oklch(.87 .006 80);
  --sand:oklch(.875 .027 85);
  --sand-deep:oklch(.46 .03 80);
  --serif:"Fraunces",Georgia,serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --gut:clamp(20px,4.5vw,64px);
  --z-sticky:10;--z-dock:20;--z-top:30;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:380;line-height:1.05;letter-spacing:-.018em;text-wrap:balance;font-variation-settings:"opsz" 144,"SOFT" 50}
h2{font-size:clamp(2.25rem,5.4vw,4.5rem)}
h3{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.wrap{max-width:1360px;margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:clamp(72px,10vw,150px)}
section.dark{background:var(--ink);color:var(--on-ink)}
section.light{background:var(--white)}
section.tint{background:var(--white-2)}
.body{max-width:58ch;text-wrap:pretty}
.dark .body{color:var(--on-ink-soft)}
.light .body{color:var(--text-soft)}
.body p+*{margin-top:24px}

.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--sand);color:var(--ink);font-weight:650;text-decoration:none;border:0;border-radius:2px;cursor:pointer;transition:transform .18s var(--ease),background-color .18s}
.btn:hover{transform:translateY(-2px);background:oklch(.92 .02 85)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-sm{min-height:42px;padding:0 18px;font-size:.95rem}
.btn-line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn-line:hover{background:transparent;color:inherit}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}

/* Header */
.top{position:fixed;inset:0 0 auto;z-index:var(--z-top);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--gut);transition:background-color .25s,transform .25s var(--ease)}
.top.solid{background:var(--ink)}
.logo{height:46px;width:auto}
.top nav{display:flex;gap:28px;font-size:.95rem;color:var(--on-ink)}
.top nav a{text-decoration:none;padding:8px 0;opacity:.85;transition:opacity .15s}
.top nav a:hover{opacity:1}

/* Hero: frames alone, driven by scroll, holds on the lit house */
.js .hero-track{height:260svh}
.js .hero{position:sticky;top:0}
.hero{position:relative;height:100svh;min-height:560px;padding:0;background:var(--ink);overflow:hidden;color:var(--on-ink)}
.hero canvas{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;background:url(../media/tag-abend-poster.jpg) 50% 45%/cover}
.hero-hint{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,56px);text-align:center;font-size:.95rem;color:var(--on-ink);text-shadow:0 1px 10px oklch(.12 .01 80/.7);transition:opacity .35s var(--ease);pointer-events:none}
.hero-hint::after{content:"";display:block;width:9px;height:9px;margin:8px auto 0;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);animation:hint 1.8s var(--ease) infinite}
.hero.moved .hero-hint{opacity:0}
@keyframes hint{50%{translate:0 6px}}
.hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,oklch(.12 .01 80/.5) 0,oklch(.12 .01 80/0) 22%,oklch(.12 .01 80/0) 48%,oklch(.12 .01 80/.82) 100%)}
.hero-text{position:absolute;inset:auto 0 0;padding:0 var(--gut) clamp(28px,5vw,56px)}
.hero h1{font-size:clamp(3rem,8.4vw,6rem);margin-top:6px}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.3rem)}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:22px}
.hero-price{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.5rem);color:var(--sand);font-variant-numeric:lining-nums}
.js .hero.wait .hero-text>*{opacity:0;transform:translateY(10px)}
.hero-text>*{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.hero-text>:nth-child(2){transition-delay:.06s}
.hero-text>:nth-child(3){transition-delay:.12s}
.hero-wm{position:absolute;right:var(--gut);bottom:clamp(28px,5vw,56px);width:clamp(120px,12vw,190px);height:auto;opacity:.82}
.top-al{align-items:start}

/* Facts as one sentence, on a fine beige ground */
.sentence{background:var(--sand);color:var(--ink);padding-inline:var(--gut)}
.sentence p{max-width:1240px;margin-inline:auto;font-family:var(--serif);font-size:clamp(2rem,5.1vw,4.3rem);line-height:1.13;letter-spacing:-.015em;font-weight:340;text-wrap:balance;font-variant-numeric:lining-nums}
.sentence b{font-weight:600}

/* Film */
.film{position:relative;background:#000 center/cover;aspect-ratio:16/9;width:100%}
.film video{width:100%;height:100%;object-fit:cover}
.film-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.film.live .film-still{display:none}
#wohnen,#grundstueck{padding-top:0}

.two{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,90px);align-items:end;padding-block:clamp(56px,7vw,110px)}
.light>.two:first-child,#technik>.two{padding-top:0}

/* Photos */
.ph{position:relative;overflow:hidden;cursor:zoom-in}
.ph img{width:100%;height:auto;transition:transform .5s var(--ease)}
@media (hover:hover){.ph:hover img{transform:scale(1.015)}}
.full{width:100%}
#treppe,#bad,#behandlung{padding-top:0}
figcaption{position:absolute;left:12px;bottom:12px;background:var(--ink);color:var(--on-ink);padding:4px 10px;font-size:.88rem;max-width:calc(100% - 150px)}
.duo{display:grid;grid-template-columns:7fr 5fr;gap:clamp(12px,1.6vw,24px);align-items:start}
.duo .off{margin-top:clamp(40px,9vw,150px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.pad-b{padding-top:clamp(40px,6vw,90px)}

/* Kitchen: one image, four details */
.kitchen{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,70px);align-items:center;padding-top:clamp(64px,9vw,140px)}
.kit-img img{transition:opacity .22s ease-out}
.kit-img.swap img{opacity:0}
.kit-list h3{margin-bottom:24px}
.kit-tab{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid oklch(.96 .004 80/.2);color:var(--on-ink);padding:16px 0;font:inherit;cursor:pointer}
.kit-tab b{font-family:var(--serif);font-weight:420;font-size:1.3rem;display:block;transition:color .15s}
.kit-tab span{display:grid;grid-template-rows:0fr;color:var(--on-ink-soft);transition:grid-template-rows .24s var(--ease)}
.kit-tab span i{font-style:normal;overflow:hidden}
.kit-tab[aria-selected=true] b{color:var(--sand)}
.kit-tab[aria-selected=true] span{grid-template-rows:1fr}
.kit-tab[aria-selected=true] span i{padding-top:6px}

/* Rooms track */
.track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:var(--gut);scroll-padding-inline:var(--gut);scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track figure{flex:0 0 auto;scroll-snap-align:start}
.track img{width:auto;height:min(62vw,620px);max-width:none}

/* Bath mosaic */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(12px,1.6vw,24px);align-items:start}
.m-a{grid-column:span 5}
.m-b{grid-column:span 7;align-self:end}
.m-c{grid-column:4 / span 6}
.m-d{grid-column:span 5}
.m-e{grid-column:span 4}

/* Details */
.details{display:grid;grid-template-columns:5fr 6fr;gap:clamp(32px,6vw,100px)}
.det-head figure{margin-top:32px}
.det-list>div{padding-block:22px;border-top:1px solid var(--line)}
.det-list dt{font-family:var(--serif);font-size:clamp(1.35rem,2.2vw,1.8rem);line-height:1.2;color:var(--text)}
.det-list dd{color:var(--text-soft);margin-top:4px;max-width:52ch}

/* Energy on beige */
.sand{background:var(--sand);color:var(--ink)}
.sand .body{color:var(--ink)}

/* Plot map */
.plot{display:grid;grid-template-columns:7fr 5fr;gap:clamp(24px,4vw,70px);align-items:start}
.plot-map{position:relative}
.plot-map img{width:100%;height:auto}
.pin{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;background:var(--ink);color:var(--sand);border:2px solid var(--sand);font:600 .95rem var(--sans);cursor:pointer;transition:transform .18s var(--ease),background-color .15s,color .15s}
.pin:hover{transform:scale(1.1)}
.pin[aria-pressed=true]{background:var(--sand);color:var(--ink);transform:scale(1.14)}
.plot-panel h3{margin-top:18px}
.plot-panel p{color:var(--on-ink-soft);margin-top:8px;max-width:48ch}
.plot-photo[hidden]{display:none}

/* Location */
.umg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);padding-bottom:18px}
.umg h3{margin-bottom:14px}
.umg .dist span{min-width:0}
.umg .dist b{flex:none;white-space:nowrap;font-size:.92em}
.umg-note{font-size:.82rem;color:var(--text-soft);padding-bottom:clamp(36px,5vw,64px)}
.dist{list-style:none}
.dist li{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-top:1px solid var(--line)}
.dist b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.mapbox{background:var(--white-2);padding:clamp(24px,4vw,48px);margin-top:clamp(32px,4vw,60px);min-height:220px}
.mapbox iframe{display:block;width:100%;height:440px;border:0}
.map-t{font-family:var(--serif);font-size:1.5rem;color:var(--text)}
.map-n{color:var(--text-soft);font-size:.95rem;margin-top:6px;max-width:62ch}
.map-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* Calculator */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,100px);align-items:start}
.calc-in{margin-top:32px;display:grid;gap:24px}
.calc-in label span{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--text)}
.calc-in output,.zinsnum{font-variant-numeric:tabular-nums;font-weight:500;color:var(--text-soft)}
.zinsnum input{width:4.2em;text-align:right;font:inherit;color:var(--text);border:1px solid var(--line);background:var(--white);border-radius:2px;padding:0 6px}
input[type=range]{width:100%;margin-top:8px;accent-color:var(--sand-deep);min-height:28px}
.calc-out{background:var(--ink);color:var(--on-ink);padding:clamp(24px,3.4vw,44px)}
.calc-rate{font-family:var(--serif);font-size:clamp(3rem,6vw,4.8rem);line-height:1;color:var(--sand);font-variant-numeric:lining-nums tabular-nums;margin-top:4px}
.calc-out dl{margin-block:24px}
.calc-out dl div{display:flex;justify-content:space-between;gap:16px;padding-block:10px;border-top:1px solid oklch(.96 .004 80/.18)}
.calc-out dt small{display:block;color:var(--on-ink-soft);font-size:.82rem}
.calc-out dd{font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-note{font-size:.84rem;color:var(--on-ink-soft);margin-top:16px}

/* All facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:clamp(24px,4vw,60px);margin-top:36px}
.facts div{display:flex;justify-content:space-between;gap:16px;padding-block:13px;border-top:1px solid var(--line)}
.facts dt{color:var(--text-soft)}
.facts dd{color:var(--text);font-weight:600;text-align:right}
.note{font-size:.88rem;color:var(--text-soft);margin-top:28px;max-width:80ch}

/* Contact on the lit house */
.contact{position:relative;color:var(--on-ink);overflow:hidden;background:var(--ink);padding-block:clamp(96px,14vw,200px)}
.contact-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact-scrim{position:absolute;inset:0;background:oklch(.13 .012 80/.66)}
.contact-in{position:relative}
.contact h2{font-size:clamp(2.4rem,6vw,5rem);max-width:15ch}
.contact .body{margin-top:18px;color:var(--on-ink)}
.contact-card{margin-top:34px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.contact-office{flex-basis:100%;font-size:.95rem;margin-top:8px}

footer{background:var(--ink);color:var(--on-ink-soft);font-size:.88rem;padding-block:26px calc(26px + env(safe-area-inset-bottom))}
.foot-ki{margin-top:10px;max-width:72ch;font-size:.82rem}

/* Mobile dock */
.dock{position:fixed;inset:auto 0 0;z-index:var(--z-dock);display:none;justify-content:space-between;align-items:center;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:var(--ink);color:var(--on-ink);transform:translateY(110%);transition:transform .28s var(--ease)}
.dock.on{transform:none}
.dock small{display:block;font-size:.76rem;color:var(--on-ink-soft)}
.dock b{font-family:var(--serif);font-weight:500;font-size:1.25rem;color:var(--sand)}

/* Lightbox */
.lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100dvh;margin:auto}
.lb::backdrop{background:oklch(.1 .01 80/.94)}
.lb[open]{animation:lbin .22s var(--ease)}
.lb img{max-width:96vw;max-height:92dvh;width:auto;height:auto}
.lb button{position:fixed;top:14px;right:18px;min-height:44px;padding:0 14px;background:var(--ink);color:var(--on-ink);border:1px solid oklch(.96 .004 80/.4);border-radius:2px;font:inherit;cursor:pointer}
@keyframes lbin{from{opacity:0;transform:scale(.98)}}

/* Reveals: content stays visible unless JS is there to reveal it */
.js .rv:not(.in){opacity:0;transform:translateY(14px)}
.rv{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:var(--d,0s)}
.js .rv-img:not(.in){clip-path:inset(6% 3% 6% 3%);opacity:.0}
.rv-img{transition:clip-path .7s var(--ease),opacity .4s ease-out;transition-delay:var(--d,0s)}
.js .rv-x:not(.in){opacity:0;transform:translateX(36px)}
.rv-x{transition:opacity .45s var(--ease),transform .45s var(--ease)}

@media (max-width:900px){
  body{padding-bottom:0}
  .top nav{display:none}
  .logo{height:40px}
  .two,.duo,.kitchen,.details,.plot,.calc,.umg{grid-template-columns:minmax(0,1fr)}
  .two{gap:16px;align-items:start}
  .duo .off{margin-top:0}
  .trio{grid-template-columns:minmax(0,1fr)}
  .trio figure:nth-child(2){margin-left:12%}
  .trio figure:nth-child(3){margin-right:12%}
  .track img{height:62vw}
  .m-a,.m-b,.m-c,.m-d,.m-e{grid-column:span 12}
  .dock{display:flex}
  .hero{height:auto;min-height:100svh;display:flex;flex-direction:column}
  .js .hero.wait .hero-text>*{opacity:1;transform:none}
  .hero canvas{position:relative;inset:auto;height:auto;aspect-ratio:1/1.08;flex:none;object-position:50% 50%;background-position:50% 50%}
  .hero-scrim{height:calc(100vw*1.08);bottom:auto;background:linear-gradient(180deg,oklch(.12 .01 80/.45) 0,oklch(.12 .01 80/0) 25%,oklch(.12 .01 80/0) 70%,var(--ink) 100%)}
  .hero-text{position:relative;inset:auto;padding-top:12px;margin-top:-34px;flex:1}
  .hero-wm{top:calc(100vw*1.08 - 74px);bottom:auto;width:104px}
  .pin{width:32px;height:32px;margin:-16px 0 0 -16px;font-size:.85rem}
  figcaption{max-width:calc(100% - 110px);font-size:.82rem}
  footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (max-width:900px) and (max-height:720px){.hero-hint{display:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .js .rv:not(.in),.js .rv-img:not(.in),.js .rv-x:not(.in){opacity:1;transform:none;clip-path:none}
  .js .hero.wait .hero-text>*{opacity:1;transform:none}
}