/* Studio MaBe · Richtung "Wortmarke" · weiss, Maroon, Jost */
:root{
  --w:#FFFFFF; --ink:#1F1A18; --brand:#682216; --sage:#687770; --line:#E6E2DD;
  --f:"Jost","Futura","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --rand:clamp(24px,6vw,96px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--w);color:var(--ink);font-family:var(--f);font-weight:300;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:8px}

/* Gesperrte Versalien, das PLANUNG des Logos */
.label,.nav a,figcaption,.fakten dt,.cv h3,.unter,.fuss,.rolle{
  font-weight:400;font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;color:var(--brand)}
.label{margin-bottom:clamp(40px,6vw,88px)}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:10;background:var(--w);display:flex;justify-content:space-between;align-items:center;
  padding:28px var(--rand) 20px}
.marke img{width:130px;height:auto}
.nav{display:flex;gap:clamp(20px,3vw,48px)}
.nav a{padding:10px 0;position:relative;color:var(--ink)}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;background:var(--brand);transition:right .35s var(--ease)}
.nav a:hover::after{right:0}
@media (max-width:700px){
  .kopf{padding:20px 20px 14px}
  .marke img{width:88px}
  .nav{gap:14px;flex-shrink:0}.nav a{font-size:10px;letter-spacing:.14em}
  .nav a:nth-child(3){display:none}
}

section{padding:clamp(96px,14vw,200px) var(--rand) 0}

/* ---------- Hero ---------- */
.hero{min-height:calc(100svh - 110px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding-top:0}
.claim{display:grid;gap:.15em;font-weight:300;line-height:1;color:var(--brand)}
.claim-l{font-size:clamp(18px,2.2vw,32px);letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.claim-h{font-size:clamp(34px,7.5vw,112px);font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding-left:.18em;margin-top:.12em}
.unter{margin-top:clamp(32px,5vw,64px);color:var(--sage)}
.hero-kurz{margin-top:clamp(14px,2vw,22px);max-width:44em;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:var(--ink)}
.hero-wege{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,36px);margin-top:clamp(20px,2.6vw,32px);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.hero-wege a{position:relative;padding:8px 0;color:var(--brand)}
.hero-wege a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--brand);opacity:.35;transition:opacity .35s var(--ease)}
.hero-wege a:hover::after{opacity:1}

/* ---------- Bilder ---------- */
.bild{margin:0}
.bild img{width:100%;height:auto}
figcaption{margin-top:14px;color:var(--sage);letter-spacing:.22em;font-size:10.5px}
.bild.voll{padding:0 var(--rand);margin-top:clamp(48px,8vw,120px)}
.projekt .bild.voll{padding:0;margin-top:clamp(40px,6vw,80px)}
.bild.plan{margin-top:clamp(64px,10vw,140px)}
.bild.plan img{max-width:1400px;margin:0 auto}
.bild.plan figcaption{text-align:center}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,48px);margin-top:clamp(64px,10vw,140px);align-items:start}
.drei{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(16px,3vw,48px);margin-top:clamp(64px,10vw,140px);align-items:start}
@media (max-width:700px){.paar,.drei{grid-template-columns:1fr;gap:40px}}

/* ---------- Projekt ---------- */
.projekt h2,.person h2{font-weight:600;font-size:clamp(30px,4.6vw,64px);letter-spacing:.14em;text-transform:uppercase;line-height:1.05;color:var(--brand)}
.p-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:clamp(32px,6vw,120px);align-items:start}
.p-kopf .label{grid-column:1/-1;margin-bottom:0}
.fakten{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:20px;margin-top:8px}
.fakten div{display:grid;grid-template-columns:110px 1fr;gap:16px;font-size:15px;line-height:1.5}
.fakten dt{padding-top:3px}
.p-text{max-width:62ch;margin-top:clamp(48px,7vw,96px);font-size:clamp(17px,1.35vw,21px);line-height:1.6}
.p-text p+p{margin-top:1.2em}
@media (max-width:800px){.p-kopf{grid-template-columns:1fr}.fakten{margin-top:24px}}

/* ---------- Person + CV ---------- */
.person-grid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:clamp(32px,6vw,120px);align-items:start}
.portrait img{filter:grayscale(1) contrast(1.05)}
.rolle{margin:16px 0 32px;color:var(--sage)}
.person-text p:not(.rolle){max-width:60ch;font-size:clamp(17px,1.2vw,19px)}
.person-text p+p:not(.rolle){margin-top:1.1em}
.cv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(32px,4vw,64px);margin-top:clamp(64px,9vw,128px);border-top:1px solid var(--line);padding-top:40px}
.cv h3{margin-bottom:18px}
.cv h3+ul+h3{margin-top:40px}
.cv ul{list-style:none}
.cv li{display:grid;grid-template-columns:64px 1fr;gap:14px;font-size:14.5px;line-height:1.5;padding:9px 0;border-bottom:1px solid var(--line)}
.cv li span:first-child{color:var(--sage);font-size:12.5px;letter-spacing:.06em;padding-top:2px}
@media (max-width:900px){.cv{grid-template-columns:1fr}.person-grid{grid-template-columns:1fr}.portrait{max-width:260px}}

/* ---------- Leistungen ---------- */
.leist{list-style:none;max-width:1100px;counter-reset:l}
.leist li{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:clamp(24px,4vw,64px);padding:36px 0;border-top:1px solid var(--line)}
.leist li:last-child{border-bottom:1px solid var(--line)}
.leist h3{font-weight:500;font-size:clamp(17px,1.5vw,22px);letter-spacing:.16em;text-transform:uppercase;color:var(--brand);line-height:1.3}
.leist p{max-width:58ch}
.hinweis{margin-top:40px;max-width:62ch;font-size:13.5px;color:var(--sage)}
@media (max-width:700px){.leist li{grid-template-columns:1fr;gap:12px}}

/* ---------- Kontakt ---------- */
.kontakt{padding-bottom:40px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mail{font-weight:300;font-size:clamp(26px,4.4vw,64px);letter-spacing:.06em;color:var(--brand);border-bottom:1px solid var(--brand);padding-bottom:6px;transition:letter-spacing .4s var(--ease)}
.mail:hover{letter-spacing:.1em}
.adresse{margin-top:36px;color:var(--ink);line-height:1.8}
.fuss-logo{width:120px;height:auto;margin:clamp(80px,12vw,160px) auto 0}
.fuss{width:100%;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);color:var(--sage);letter-spacing:.2em;font-size:10.5px}
.fuss nav{display:flex;gap:24px}
.fuss a{padding:6px 0}
@media (max-width:700px){.fuss{justify-content:center;text-align:center}}

/* ---------- Reveal ---------- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
}
/* gleiche Hoehen in Bildreihen */
.drei img{aspect-ratio:3/4;object-fit:cover}
.paar img{aspect-ratio:4/5;object-fit:cover}
.paar.quer img{aspect-ratio:3/2}

/* ---------- Wortmarke "Studio MaBe" ---------- */
.wm{display:inline-grid;line-height:1;color:var(--brand);text-transform:uppercase}
.wm-a{font-weight:300;font-size:10px;letter-spacing:.5em;padding-left:.5em;margin-bottom:5px}
.wm-b{font-weight:600;font-size:26px;letter-spacing:.2em;padding-left:.2em}
.wm-gross{margin:clamp(80px,12vw,160px) auto 0}
.wm-gross .wm-a{font-size:14px;margin-bottom:8px}
.wm-gross .wm-b{font-size:44px}
@media (max-width:700px){.wm-b{font-size:20px}}

/* ---------- CV Highlights ---------- */
.cv li.hl{color:var(--brand);font-weight:500}
.cv li.hl span:first-child{color:var(--brand);font-weight:400}
.cv li.hl{border-left:2px solid var(--brand);padding-left:14px;margin-left:-16px}

/* ---------- Kontakt Wege ---------- */
.wege{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.weg{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;font-size:17px;letter-spacing:.04em;border-bottom:1px solid transparent;transition:border-color .3s}
.weg:hover{border-color:var(--brand)}
.weg svg{color:var(--brand)}
.adresse{margin-top:28px}

/* ---------- Wortwechsel: Buchstaben setzen sich wie gestampfte Lagen ---------- */
.claim-h{--wortscale:1;font-size:calc(clamp(30px,4.6vw,76px) * var(--wortscale));white-space:nowrap;min-height:1em}
.claim-h .b{display:inline-block;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease}
.claim-h .b.raus{transform:translateY(.35em);opacity:0}
.claim-h .b.rein{transform:translateY(-.45em);opacity:0;transition:none}
@media (prefers-reduced-motion:reduce){.claim-h .b{transition:none}.claim-h .b.raus,.claim-h .b.rein{transform:none;opacity:1;filter:none}}

/* ---------- Lehmklumpen: eigene Spalte, nie ueber Bildern ---------- */
.klumpen{pointer-events:none;height:auto;width:100%;backface-visibility:hidden}
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(200px,.8fr);align-items:center;gap:clamp(24px,5vw,80px);text-align:left}
.hero-in{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.hero .claim{text-align:left}
.hero-klumpen{display:flex;justify-content:center}
.hero-klumpen .klumpen{max-width:min(34vw,420px)}
.p-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,.42fr);gap:clamp(32px,6vw,120px);align-items:start}
.p-klumpen{position:sticky;top:22vh;display:flex;justify-content:center;padding-top:clamp(64px,10vw,140px)}
.p-klumpen .klumpen{max-width:min(22vw,300px)}
.p-inhalt .bild.voll{margin-top:clamp(40px,6vw,80px)}
.p-inhalt .paar,.p-inhalt .drei{gap:clamp(12px,2vw,32px)}
@media (max-width:800px){
  .hero{grid-template-columns:1fr;text-align:center}
  .hero-in{align-items:center}.hero .claim{text-align:center}
  .hero-kurz{padding:0 8px}.hero-wege{justify-content:center}.hero-wege a:nth-child(3){display:none}
  .hero-klumpen .klumpen{max-width:180px}
  .p-body{grid-template-columns:1fr}
  .p-klumpen{position:static;padding-top:48px;justify-content:flex-end}
  .p-klumpen .klumpen{max-width:120px}
}
@media (prefers-reduced-motion:reduce){.klumpen{transform:none !important}}

.js .klumpen.reveal{transform:none;transition:opacity 1.2s var(--ease)}
@media (max-width:800px){.claim-h{font-size:calc(clamp(30px,8.4vw,60px) * var(--wortscale))}.claim-l{font-size:clamp(16px,4.4vw,24px)}}

/* ---------- Kopf: Studio MaBe wird zu Material becomes X ---------- */
.marke{position:relative;display:block;min-width:220px;height:44px}
.marke .wm{position:absolute;left:0;top:0;transition:opacity .6s var(--ease),transform .6s var(--ease)}
.marke .wm-claim{opacity:0;transform:translateY(14px)}
.kopf.claim-oben .wm-studio{opacity:0;transform:translateY(-14px)}
.kopf.claim-oben .wm-claim{opacity:1;transform:none}
.wm-claim .wm-b{white-space:nowrap}
.wm-claim .wm-b .b{display:inline-block;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.wm-claim .wm-b .b.raus{transform:translateY(.3em);opacity:0}
.wm-claim .wm-b .b.rein{transform:translateY(-.4em);opacity:0;transition:none}
.hero .claim{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero .claim.weg{opacity:0;transform:translateY(-24px)}
.leist-intro{margin:0 0 clamp(40px,6vw,72px)}
@media (max-width:700px){.marke{min-width:150px}.wm-claim .wm-a{font-size:8px}}
@media (max-width:700px){.wm-claim .wm-b{font-size:13px;letter-spacing:.14em}}

/* ---------- Video im Bildpaar ---------- */
.paar.hoch img,.paar.hoch video{aspect-ratio:9/16;object-fit:cover;width:100%;height:auto;display:block;background:#f3f1ee}

/* ---------- Schnitt: der Ofen erscheint beim Scrollen ---------- */
.schnitt-in{position:relative;max-width:1400px;margin:0 auto}
.schnitt-in img{width:100%;height:auto}
.ofen-mark{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ofen-deckel{transform-box:fill-box;transform-origin:top;transform:scaleY(1);transition:transform 1.8s cubic-bezier(.2,.8,.2,1)}
.schnitt.ofen-an .ofen-deckel{transform:scaleY(0)}
.ofen-rand{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s ease .3s}
.schnitt.ofen-an .ofen-rand{stroke-dashoffset:0}
.ofen-pfeil{stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1s ease 1.6s,opacity .2s ease 1.6s}
.schnitt.ofen-an .ofen-pfeil{stroke-dashoffset:0;opacity:1}
.making{position:absolute;left:78.5%;top:9%;color:var(--brand);text-decoration:none;display:grid;gap:3px;
  opacity:0;transform:translateY(6px);transition:opacity .8s ease 1.3s,transform .8s var(--ease) 1.3s;white-space:nowrap}
.schnitt.ofen-an .making{opacity:1;transform:none}
.making-txt{font-weight:500;font-size:clamp(11px,1.15vw,16px);letter-spacing:.06em}
.making-sub{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--sage)}
.making:hover .making-txt{text-decoration:underline;text-underline-offset:4px}
@media (max-width:800px){.making{left:auto;right:0;top:0}.making-txt{font-size:11px}.making-sub{font-size:8px}}
@media (prefers-reduced-motion:reduce){.ofen-deckel,.ofen-rand,.ofen-pfeil,.making{transition:none}.ofen-deckel{transform:scaleY(0)}.ofen-rand,.ofen-pfeil{stroke-dashoffset:0}.ofen-pfeil,.making{opacity:1}}
.paar.zeichnung figure{display:flex;flex-direction:column;align-items:flex-start}
.paar.zeichnung img{max-width:100%}
.paar.zeichnung figure:only-child{grid-column:1/-1}
@media (max-width:700px){.paar.zeichnung img{width:100% !important}}
/* Zeichnungen aus der Diplomarbeit: nie beschneiden, gemeinsame Skala ueber inline width */
.paar.zeichnung img{aspect-ratio:auto;object-fit:contain;background:#fff;height:auto}
.paar.zeichnung{align-items:end}

/* ---------- Wortmarke als SVG: STUDIO und MABE exakt gleich breit ---------- */
.wm-svg{display:block;width:100px;height:40px;overflow:visible}
.wm-svg text{font-family:var(--f);fill:var(--brand)}
.wm-svg-a{font-size:8.6px;font-weight:400}
.wm-svg-b{font-size:29px;font-weight:700}
.wm-gross .wm-svg{width:170px;height:68px}
@media (max-width:700px){.wm-studio .wm-svg{width:80px;height:32px}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}