/* ===== Mount Midlife Coffee – Designsystem ===== */
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../assets/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --maroon:#4f1c1b;
  --maroon-deep:#2f0f0e;
  --navy:#0e1a2b;
  --navy-2:#162840;
  --cream:#f4ecdf;
  --paper:#ebe0cd;
  --sand:#d4bb98;
  --ink:#1c1412;
  --serif:"Instrument Serif","Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,sans-serif;
  --pad:clamp(1.25rem,4.5vw,4.5rem);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.0625rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--sand);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--cream);color:var(--ink);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* type */
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.6rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.015em}
.h2 em,.hero__title em,.statement__text em,.band__text em,.craft__cap em{font-style:italic}
.eyebrow,.rule span,.calc__label,.facts dt,legend{font:500 .72rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.rule{display:flex;align-items:center;gap:1.1rem;margin-bottom:2rem}
.rule::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35}
.rule span{white-space:nowrap}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:1rem 1.7rem;border-radius:999px;background:var(--cream);color:var(--maroon);text-decoration:none;font:600 .78rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--cream);transition:transform .35s var(--ease),background .3s,color .3s}
.btn:hover{transform:translateY(-3px);background:var(--sand);border-color:var(--sand)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(244,236,223,.45)}
.btn--ghost:hover{background:var(--cream);color:var(--maroon)}
.btn--small{padding:.8rem 1.3rem}
.btn--light{background:var(--cream);color:var(--maroon)}
.btn--big{padding:1.2rem 2.2rem}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:1.1rem var(--pad);color:var(--cream);transition:background .4s,padding .4s,backdrop-filter .4s}
.nav.is-solid{background:rgba(47,15,14,.88);backdrop-filter:blur(14px);padding-block:.7rem}
.nav__logo img{width:clamp(110px,12vw,150px);height:auto}
.nav__links{display:flex;gap:2rem;margin-left:auto}
.nav__links a{font:500 .74rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;opacity:.85;position:relative;padding:.4rem 0}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .4s var(--ease)}
.nav__links a:hover{opacity:1}.nav__links a:hover::after{right:0}
.nav__toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.nav__toggle span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--cream);transition:transform .4s var(--ease)}
.nav__toggle span:first-child{top:18px}.nav__toggle span:last-child{top:25px}
.nav__toggle[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;background:var(--maroon);color:var(--cream);min-height:100svh;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1rem,4vw,5rem);align-items:center;padding:7.5rem var(--pad) 6.5rem;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 80% 40%,rgba(255,255,255,.07),transparent 70%),radial-gradient(50% 60% at 0 100%,rgba(14,26,43,.5),transparent 70%)}
.hero__copy{position:relative;z-index:2}
.eyebrow{opacity:.8;margin-bottom:1.8rem}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(3.5rem,9.4vw,9.6rem);line-height:.92;letter-spacing:-.025em;margin-bottom:2rem}
.line{display:block;overflow:hidden;padding-bottom:.08em}
.line>span{display:block;transform:translateY(105%);animation:rise 1.2s var(--ease) forwards}
.line:nth-child(2)>span{animation-delay:.14s}
@keyframes rise{to{transform:none}}
.hero__lead{max-width:34rem;font-size:clamp(1.05rem,1.35vw,1.25rem);opacity:.88;margin-bottom:2.4rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem}
.hero__art{position:relative;z-index:2;justify-self:end;width:min(100%,clamp(20rem,32vw,29rem))}
.arch{border-radius:999px 999px 1.2rem 1.2rem;overflow:hidden;aspect-ratio:5/7;background:var(--maroon-deep);box-shadow:0 40px 80px -30px rgba(0,0,0,.55)}
.arch img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:settle 2.2s var(--ease) .2s forwards}
@keyframes settle{to{transform:scale(1)}}
.badge{position:absolute;left:-3.2rem;bottom:2.2rem;width:8.4rem;height:8.4rem;padding:.4rem;border-radius:50%;background:var(--cream);color:var(--maroon);animation:spin 28s linear infinite}
.badge text{font:600 13px var(--sans);text-transform:uppercase;fill:currentColor}
.badge circle{fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}
.ticker{position:absolute;left:0;right:0;bottom:0;background:var(--navy);color:var(--cream);border-top:1px solid rgba(244,236,223,.12);overflow:hidden;z-index:3}
.ticker__track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker span{font:500 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;padding:1.25rem 2.2rem;white-space:nowrap;opacity:.85}
.ticker span::after{content:"◆";margin-left:2.4rem;opacity:.45;font-size:.55rem;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}

/* statement */
.statement{padding:clamp(5rem,10vw,9rem) var(--pad) clamp(4rem,8vw,7rem);background:var(--cream)}
.statement__text{font-family:var(--serif);font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.08;letter-spacing:-.01em;max-width:21em;color:var(--maroon)}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:clamp(3rem,6vw,5.5rem);padding-top:2rem;border-top:1px solid rgba(79,28,27,.3)}
.facts dt{color:var(--maroon);opacity:.65;margin-bottom:.9rem}
.facts dd{font-family:var(--serif);font-size:clamp(1.4rem,2.3vw,2.1rem);line-height:1.1}

/* offer */
.offer{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,6vw,7rem);padding:clamp(4rem,8vw,8rem) var(--pad);background:var(--paper);color:var(--maroon)}
.sticky{position:sticky;top:6rem;border-radius:1.2rem;overflow:hidden;aspect-ratio:2/3;box-shadow:0 30px 60px -30px rgba(47,15,14,.5)}
.sticky img{width:100%;height:100%;object-fit:cover}
.offer__body .h2{margin-bottom:3rem}
.offer__list li{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:2rem 0;border-top:1px solid rgba(79,28,27,.28);transition:padding .5s var(--ease)}
.offer__list li:last-child{border-bottom:1px solid rgba(79,28,27,.28)}
.offer__list li:hover{padding-left:.8rem}
.num{font-family:var(--serif);font-size:1.6rem;opacity:.5;line-height:1.1}
.offer__list h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.1;margin-bottom:.6rem}
.offer__list p{color:var(--ink);opacity:.82;max-width:34rem}

/* craft */
.craft{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.6rem);padding:clamp(4rem,8vw,7rem) var(--pad) clamp(3rem,5vw,5rem);background:var(--cream);align-items:start}
.craft figure{overflow:hidden;border-radius:.9rem}
.craft img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.craft figure:hover img{transform:scale(1.05)}
.craft__a{aspect-ratio:3/4;margin-top:4rem}
.craft__b{aspect-ratio:9/16}
.craft__c{aspect-ratio:9/16;margin-top:6rem}
.craft__d{aspect-ratio:9/16;margin-top:1rem}
.craft__cap{grid-column:1/-1;font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,3.2rem);color:var(--maroon);margin-top:2.5rem;max-width:18em}

/* reference */
.ref{background:var(--navy);color:var(--cream);padding:clamp(4rem,9vw,9rem) var(--pad)}
.ref__inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,8rem);align-items:center}
.ref__img{aspect-ratio:3/4;overflow:hidden;clip-path:polygon(0 11%,50% 0,100% 11%,100% 100%,0 100%);background:var(--navy-2)}
.ref__img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ref .h2{margin-bottom:1.6rem}
.ref__lead{font-size:clamp(1.1rem,1.5vw,1.35rem);max-width:34rem;opacity:.9;margin-bottom:2.4rem}
.ref__facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(1.5rem,4vw,3.5rem);margin-bottom:2rem;padding:1.6rem 0;border-block:1px solid rgba(244,236,223,.25)}
.ref__facts strong{display:block;font:400 clamp(1.8rem,3vw,2.8rem)/1 var(--serif)}
.ref__facts span{font:500 .7rem/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.65}
.ref__note{opacity:.75;max-width:30rem;margin-bottom:2.2rem}

/* band */
.band{position:relative;height:clamp(24rem,70vh,46rem);overflow:hidden;display:grid;place-items:end start;color:var(--cream)}
.band__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(14,26,43,.78),rgba(14,26,43,0) 65%)}
.band__text{position:relative;font-family:var(--serif);font-size:clamp(3rem,8vw,8rem);line-height:.92;letter-spacing:-.02em;padding:var(--pad)}

/* steps */
.steps{padding:clamp(4rem,8vw,8rem) var(--pad);background:var(--cream);color:var(--maroon)}
.steps .h2{margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,3rem)}
.step{padding:2rem 0 0;border-top:1px solid rgba(79,28,27,.4)}
.step__n{font-family:var(--serif);font-size:clamp(4rem,7vw,7rem);line-height:.9;display:block;margin-bottom:1rem;font-style:italic}
.step h3{font-family:var(--serif);font-weight:400;font-size:2rem;margin-bottom:.5rem}
.step p{color:var(--ink);opacity:.8;max-width:24rem}
.steps__imgs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,2rem);margin-top:clamp(3rem,6vw,5.5rem)}
.steps__imgs figure{aspect-ratio:4/3;overflow:hidden;border-radius:.9rem}
.steps__imgs img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}

/* calculator */
.calc{display:grid;grid-template-columns:.9fr 1.1fr;grid-template-areas:"intro result" "form result";gap:2.5rem clamp(2rem,6vw,6rem);padding:clamp(4rem,9vw,9rem) var(--pad);background:var(--maroon);color:var(--cream);align-items:start}
.calc__intro{grid-area:intro}.calc__intro p:last-child{opacity:.8;max-width:28rem;margin-top:1.4rem}
.calc__form{grid-area:form;display:grid;gap:1.8rem}
.field{border:0;padding:0;margin:0}
.field label,.field legend{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.9rem;padding:0}
.field output{font:400 1.7rem/1 var(--serif);letter-spacing:0;text-transform:none}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:rgba(244,236,223,.35);border-radius:2px;outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cream);border:0;cursor:grab;box-shadow:0 0 0 6px rgba(244,236,223,.14)}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cream);border:0;cursor:grab}
.seg{display:flex;flex-wrap:wrap;gap:.5rem}
.seg button{flex:1 1 auto;padding:.85rem 1.1rem;border-radius:999px;border:1px solid rgba(244,236,223,.35);background:transparent;cursor:pointer;font:500 .85rem/1 var(--sans);transition:background .3s,color .3s,border-color .3s}
.seg button:hover{border-color:var(--cream)}
.seg button.is-on{background:var(--cream);color:var(--maroon);border-color:var(--cream)}
.calc__result{grid-area:result;grid-row:1/3;background:var(--navy);padding:clamp(1.6rem,3.5vw,3.2rem);border-radius:1.4rem;position:sticky;top:6rem;box-shadow:0 40px 80px -40px rgba(0,0,0,.6)}
.calc__label{opacity:.6;margin-bottom:1rem}
.calc__price{font-family:var(--serif);font-size:clamp(3rem,6.4vw,6.2rem);line-height:1;letter-spacing:-.02em;display:flex;align-items:baseline;flex-wrap:wrap;gap:0 .15em}
.calc__price i{font-style:normal;opacity:.4}
.calc__price small{font-size:.45em;opacity:.7;margin-left:.15em}
.calc__meta{margin-top:1rem;opacity:.75}
.calc__hint{margin-top:1.4rem;padding:.9rem 1.1rem;border-left:2px solid var(--sand);background:rgba(244,236,223,.06);font-size:.95rem}
.calc__hint.is-warn{border-color:#e7a07a}
.calc__list{margin:1.6rem 0 2rem}
.calc__list li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-top:1px solid rgba(244,236,223,.15);font-size:.95rem}
.calc__list li span:last-child{white-space:nowrap;opacity:.85}
.calc__legal{margin-top:1.2rem;font-size:.78rem;opacity:.55}

/* gallery */
.gallery{padding:clamp(4rem,8vw,8rem) 0 clamp(4rem,8vw,8rem);background:var(--cream);color:var(--maroon)}
.gallery__head{padding:0 var(--pad);margin-bottom:2.5rem}
.gallery__track{display:flex;gap:clamp(.8rem,1.6vw,1.6rem);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);padding:0 var(--pad) 1.5rem;scrollbar-width:thin;scrollbar-color:var(--maroon) transparent}
.gallery__track figure{flex:0 0 auto;width:clamp(15rem,26vw,25rem);aspect-ratio:2/3;border-radius:.9rem;overflow:hidden;scroll-snap-align:start}
.gallery__track figure.wide{width:clamp(20rem,38vw,38rem);aspect-ratio:4/3;align-self:center}
.gallery__track img{width:100%;height:100%;object-fit:cover}

/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,8rem);padding:clamp(4rem,9vw,9rem) var(--pad);background:var(--maroon-deep);color:var(--cream)}
.contact__intro>p:not(.rule){margin-top:1.6rem;opacity:.8;max-width:26rem}
.contact__direct{margin-top:2.4rem;display:grid;gap:.6rem;font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.8rem)}
.contact__direct a{text-decoration:none;border-bottom:1px solid rgba(244,236,223,.35);padding-bottom:.4rem;width:fit-content;max-width:100%;overflow-wrap:anywhere}
.contact__direct a:hover{border-color:var(--cream)}
.contact__form{display:grid;gap:1.4rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.f{display:grid;gap:.5rem}
.f span{font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;opacity:.7}
.f input,.f textarea{background:transparent;border:0;border-bottom:1px solid rgba(244,236,223,.4);padding:.7rem 0;font-size:1.1rem;border-radius:0;transition:border-color .3s;width:100%}
.f input::placeholder,.f textarea::placeholder{color:rgba(244,236,223,.35)}
.f input:focus,.f textarea:focus{outline:none;border-color:var(--cream)}
.f input:invalid.touched{border-color:#e7a07a}
.form__note{font-size:.85rem;opacity:.6}

/* footer */
.foot{background:var(--maroon-deep);color:var(--cream);padding:clamp(3rem,6vw,5rem) var(--pad) 2rem;border-top:1px solid rgba(244,236,223,.12)}
.foot__logo{width:min(70vw,420px);height:auto;margin-bottom:3rem}
.foot__cols{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:clamp(2rem,8vw,7rem);font-size:.95rem;line-height:1.9}
.foot a{text-decoration:none;opacity:.8}.foot a:hover{opacity:1;text-decoration:underline}
.foot__small{margin-top:3rem;font-size:.78rem;opacity:.5}

/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.in{opacity:1;transform:none}

/* legal pages */
.legal{max-width:46rem;margin:0 auto;padding:9rem var(--pad) 5rem}
.legal h1{font:400 clamp(2.6rem,6vw,4.4rem)/1 var(--serif);color:var(--maroon);margin-bottom:2rem}
.legal h2{font:400 1.7rem/1.2 var(--serif);color:var(--maroon);margin:2.2rem 0 .6rem}
.legal p,.legal li{margin-bottom:.8rem}
.legal ul{list-style:disc;padding-left:1.3rem}
.legal .ph{background:#f2d99a;padding:0 .25em;border-radius:3px}
.legal .notice{border-left:3px solid var(--maroon);padding:.8rem 1rem;background:var(--paper);font-size:.92rem}
body.page-legal .nav{background:var(--maroon-deep)}

/* responsive */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;padding-top:7rem;padding-bottom:7.5rem;gap:3rem}
  .hero__art{justify-self:center;width:min(86%,26rem)}
  .badge{left:-1rem;width:6.8rem;height:6.8rem}
  .facts{grid-template-columns:repeat(2,1fr)}
  .offer,.ref__inner,.calc,.contact{grid-template-columns:1fr}
  .calc{grid-template-areas:"intro" "form" "result"}
  .calc__result{grid-row:auto;position:static}
  .sticky{position:static;aspect-ratio:4/5;max-height:34rem}
  .craft{grid-template-columns:repeat(2,1fr)}
  .craft__a,.craft__c{margin-top:0}.craft__d{margin-top:2rem}
  .steps__grid{grid-template-columns:1fr}
  .ref__img{max-width:28rem}
  .nav__toggle{display:block;margin-left:auto}
  .nav .btn--small{display:none}
  .nav__links{position:fixed;inset:0;background:var(--maroon-deep);flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;margin:0;transform:translateY(-100%);transition:transform .6s var(--ease);z-index:-1}
  .nav__links a{font:400 2.6rem/1.1 var(--serif);letter-spacing:0;text-transform:none}
  .nav.is-open .nav__links{transform:none}
}
@media (max-width:640px){
  .row{grid-template-columns:1fr}
  .ref__facts{grid-template-columns:repeat(3,auto);gap:1.2rem}
  .steps__imgs{grid-template-columns:1fr}
  .foot__cols{grid-template-columns:1fr;gap:1.5rem}
  .offer__list li{grid-template-columns:3rem 1fr}
  .calc__price{font-size:clamp(2.6rem,13vw,4rem)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .line>span{transform:none}.js .reveal{opacity:1;transform:none}.arch img{transform:none}
}

/* Kopfzeile Rechtsseiten: Buttons rechts, statt Inline-Style (CSP) */
.nav__logo + .btn{margin-left:auto}
.nav .btn + .btn{margin-left:12px}