/* GLANZ – freely designed demo for an invented small-town hair salon. Editorial: white paper, black ink, big italic serif, one deep wine red.
   Motion is slow and elegant: words come into focus out of a blur, photos open like curtains drawn apart, a ribbon of services drifts
   sideways and leans with the scroll speed, prices slide in from the right one after the other (values --in, --p, --v from demo.js). */
@font-face{font-family:DM;src:url('/assets/dm-sans-latin.woff2') format('woff2');font-weight:100 1000;font-display:swap}
:root{--paper:#fbfaf8;--ink:#141212;--grey:#6a6462;--wine:#7a2436;--rule:#1412121f;--side:clamp(20px,5.5vw,96px);--serif:'Iowan Old Style',Charter,'Palatino Linotype',Georgia,serif;--ease:cubic-bezier(.22,1,.36,1);color-scheme:light}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 DM,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,p,ul,dl,dd,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;text-wrap:balance}
em{font-style:italic;color:var(--wine)}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
::selection{background:var(--wine);color:var(--paper)}
.skip{position:fixed;top:-60px;left:16px;z-index:50;padding:10px 16px;background:var(--ink);color:var(--paper)}
.skip:focus{top:10px}

.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:30px;min-height:72px;padding:0 var(--side);background:#fbfaf8f2;border-bottom:1px solid var(--rule);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;min-height:44px;margin-right:auto;font:italic 400 30px/1 var(--serif);text-decoration:none}
.bar nav{display:flex;gap:30px;font-size:15px}
.bar nav a{padding:10px 0;text-decoration:none;transition:color .3s}
.bar nav a:hover{color:var(--wine)}
.bar-call{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none;font-variant-numeric:tabular-nums;transition:background .3s}
.bar-call:hover{background:var(--wine)}
.menu-toggle{display:none;min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer}

.photo{position:relative;overflow:hidden;background:#ece8e3}
.photo img{display:block;width:100%;height:100%;object-fit:cover}
.photo.no-photo img{visibility:hidden}
.photo.no-photo:after{content:'Foto folgt';position:absolute;right:16px;bottom:12px;font-size:12px;color:var(--grey)}
/* Curtains: the photo is uncovered from the middle outwards while it arrives, and settles from a slight zoom. */
.curtain{clip-path:inset(0 calc((1 - var(--in,1))*50%))}
.curtain img{transform:scale(calc(1.2 - .2*var(--in,1)))}

/* Opening: words left, portrait right. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,5vw,90px);align-items:center;padding:clamp(40px,5vw,84px) var(--side) clamp(50px,6vw,100px)}
.hero h1{font-size:clamp(48px,7.4vw,124px);line-height:.98}
.focus{display:inline-block}
.animated .focus{animation:come-into-focus 1.5s var(--ease) both}
.animated .focus:nth-child(2){animation-delay:.18s}
.animated .focus:nth-child(3){animation-delay:.36s}
@keyframes come-into-focus{from{opacity:0;filter:blur(14px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
.hero-text p{max-width:440px;margin-top:28px;font-size:clamp(17px,1.35vw,20px);color:var(--grey)}
.line-link{display:inline-block;margin-top:18px;padding:12px 0 8px;font-size:17px;text-decoration:none;background:linear-gradient(var(--wine),var(--wine)) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s}
.line-link:hover{color:var(--wine);background-size:34% 1px}
.hero-photo{aspect-ratio:4/5;border-radius:999px 999px 6px 6px}

/* Ribbon of services: drifts by itself, leans and speeds up with the scroll. */
.ribbon{overflow:hidden;padding:20px 0;border-block:1px solid var(--rule)}
.ribbon p{display:flex;gap:56px;width:max-content;font:italic 400 clamp(26px,3vw,44px)/1.1 var(--serif);white-space:nowrap;transform:translateX(calc(var(--page,0)*-38%)) skewX(calc(var(--v,0)*-9deg))}
.ribbon span:nth-child(odd){color:var(--wine)}

/* Prices: the heart of the page. */
.prices{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:30px clamp(30px,6vw,120px);padding:clamp(70px,8vw,130px) var(--side)}
.prices h2,.salon h2,.booking h2{font-size:clamp(32px,4vw,62px);line-height:1.05}
.prices-head p{max-width:360px;margin-top:22px;color:var(--grey)}
.price-list{border-top:1px solid var(--ink)}
.price-list li{overflow:hidden;--row:clamp(0,calc((var(--in,1) - var(--k,0)*.1)*3),1);display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--rule);transition:background .3s}
.price-list li:nth-child(2){--k:1}.price-list li:nth-child(3){--k:2}.price-list li:nth-child(4){--k:3}.price-list li:nth-child(5){--k:4}.price-list li:nth-child(6){--k:5}
.price-list span{font:400 clamp(22px,2vw,30px)/1.2 var(--serif);opacity:var(--row)}
.price-list small{display:block;margin-top:4px;font:400 14px/1.5 DM,Arial,sans-serif;color:var(--grey)}
.price-list b{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:var(--row);transform:translateX(calc((1 - var(--row))*40px))}
@media(hover:hover){.price-list li:hover{background:#7a24360d}
.price-list li:hover b{color:var(--wine)}}

/* The salon: a tall photo, the words, a small second photo set lower. */
.salon{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.6fr);gap:clamp(24px,4vw,70px);align-items:start;padding:0 var(--side) clamp(70px,8vw,130px)}
.tall{aspect-ratio:4/5;border-radius:6px}
.small{aspect-ratio:1;margin-top:clamp(60px,12vw,200px);border-radius:999px}
.salon-text{padding-top:clamp(10px,4vw,70px)}
.salon-text p{max-width:460px;margin-top:22px;color:var(--grey)}

.booking{padding:clamp(70px,8vw,130px) var(--side);background:var(--ink);color:var(--paper);text-align:center}
.booking h2{max-width:900px;margin-inline:auto}
.booking .phone{margin-top:30px;font:italic 400 clamp(40px,6vw,96px)/1 var(--serif);font-variant-numeric:tabular-nums;color:#e9b7c0}
.hours{display:grid;gap:0;max-width:460px;margin:44px auto 0;text-align:left;border-top:1px solid #fbfaf833}
.hours div{display:flex;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid #fbfaf833}
.hours dd{color:#cfc8c4;font-variant-numeric:tabular-nums}
.booking address{margin-top:26px;font-style:normal;color:#cfc8c4}

.studio{padding:clamp(60px,7vw,110px) var(--side);background:#080808;color:#f3f2ed;border-top:1px solid #ffffff2e}
.studio h2{max-width:900px;font:800 clamp(30px,4vw,60px)/1 DM,Arial,sans-serif;letter-spacing:-.05em;text-transform:uppercase}
.studio p{max-width:560px;margin-top:22px;color:#c8c8c8}
.studio-link{display:inline-flex;align-items:center;gap:26px;min-height:56px;margin-top:30px;padding:0 28px;border:1px solid #f3f2ed;border-radius:999px;text-decoration:none;transition:background .3s,color .3s}
.studio-link svg{width:22px;height:22px}
.studio-link:hover{background:#f3f2ed;color:#080808}
.demo-note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:18px var(--side) 22px;background:#080808;color:#a6a6a6;font-size:13px;border-top:1px solid #ffffff2e}

.reveal{transition:opacity 1.2s var(--ease),filter 1.2s var(--ease)}
.reveal.waiting{opacity:0;filter:blur(10px)}
.still{scroll-behavior:auto}
.still *,.still *:before,.still *:after{animation:none!important;transition:none!important}
.still .waiting{opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
.reveal.waiting{opacity:1;filter:none}}

@media(max-width:900px){.hero,.prices{grid-template-columns:minmax(0,1fr)}
.hero-photo{max-width:520px}
.salon{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.small{display:none}}
@media(max-width:700px){.bar{flex-wrap:wrap;gap:0 12px;min-height:64px}
.bar-call{display:none}
.menu-toggle{display:block}
.bar nav{display:grid;gap:0;width:100%;padding-bottom:10px;font-size:17px}
.bar nav a{padding:12px 0;border-bottom:1px solid var(--rule)}
.salon{grid-template-columns:minmax(0,1fr)}}