:root{--bg:#f3efe6;--ink:#141414;--mu:#76705f;--yl:#ddd7cc;--co:#141414;--pad:max(clamp(20px,4vw,72px),calc((100vw - 1920px)/2 + 72px));color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--bg)}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.sf{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400}
.w{padding:0 var(--pad)}
.top{position:absolute;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:80;display:flex;justify-content:space-between;align-items:center;padding:14px var(--pad);mix-blend-mode:normal}
.top img{height:70px;width:auto}
.mb{background:var(--ink);color:var(--bg);border:0;font:600 .95rem "Bricolage Grotesque",sans-serif;padding:14px 26px;border-radius:99px;cursor:pointer;transition:background .2s,transform .2s}.mb:hover{background:var(--co);transform:rotate(-3deg)}
#menu{position:fixed;inset:0;z-index:70;background:var(--yl);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);transform:translateY(-101%);transition:transform .6s cubic-bezier(.7,0,.2,1)}
#menu.open{transform:none}
#menu a{font-size:clamp(3rem,11vw,8rem);font-weight:800;letter-spacing:-.04em;line-height:1;display:block;transition:transform .25s,color .2s}#menu a:hover{transform:translateX(24px);color:var(--co)}
#ld{position:fixed;inset:0;z-index:100;background:var(--ink);display:none;place-items:center;transition:transform .8s cubic-bezier(.7,0,.2,1)}
.js #ld{display:grid}#ld img{height:90px;width:auto;animation:pu 1s ease-in-out infinite alternate}#ld.out{transform:translateY(-101%)}
@keyframes pu{to{transform:scale(1.08) rotate(-2deg)}}
.hero{min-height:100svh;padding:150px var(--pad) 60px;display:grid;align-content:end;position:relative}
.hero h1{font-size:clamp(4.4rem,17.5vw,19rem);font-weight:800;line-height:.82;letter-spacing:-.06em;position:relative;z-index:2}
.hero h1 span{display:block}.hero h1 .hello{font-size:.42em;line-height:1;letter-spacing:-.04em;margin-bottom:.12em}.hero h1 .l2{padding-left:8vw}
.hero h1 em{color:var(--co)}
.sub{margin-top:34px;font-size:clamp(1.2rem,2.2vw,1.8rem);max-width:520px;position:relative;z-index:2}.sub .sf{font-size:1.15em}
.igh{padding:34px var(--pad) 72px;position:relative;z-index:3}
.igh .lb{display:block;margin-bottom:22px}
.igh-track{display:flex;gap:28px;align-items:flex-start;overflow-x:auto;scrollbar-width:none}.igh-track::-webkit-scrollbar{display:none}
.igh-item{display:grid;justify-items:center;gap:10px;flex:0 0 auto;font-weight:600;font-size:.9rem;transition:transform .2s}.igh-item:hover{transform:translateY(-4px)}
.igh-ring{width:108px;height:108px;padding:3px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f9ce34 5%,#ee2a7b 50%,#6228d7 95%)}
.igh-ring img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:4px solid var(--bg)}
.igh-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp{position:absolute;left:48%;right:auto;top:105px;width:min(40vw,520px);z-index:1;transform:rotate(4deg);clip-path:inset(0 0 100% 0);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) 1s}
.go .hp{clip-path:inset(0)}
.hp img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:200px 200px 20px 20px}
.hp .cr{color:var(--mu);text-shadow:none;bottom:-26px;left:4px}
.cr{position:absolute;left:12px;bottom:10px;font-size:.7rem;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.8);z-index:3}.cr:hover{color:var(--yl)}
.lb{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mu)}
.ab{padding:140px var(--pad) 110px;display:grid;grid-template-columns:.3fr 1fr;gap:40px}
#st{font-size:clamp(1.9rem,4.4vw,3.8rem);font-weight:600;line-height:1.12;letter-spacing:-.03em}
#st span{opacity:.18;transition:opacity .25s}#st span.on{opacity:1}
.meta{margin-top:50px;display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:1rem;color:var(--mu);max-width:760px}.meta b{display:block;color:var(--ink);font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.gl{padding:0 0 120px}.gl .lb{padding:0 var(--pad) 22px}
.hs{display:flex;gap:22px;overflow-x:auto;padding:0 var(--pad) 20px;scroll-snap-type:x mandatory;cursor:grab;scrollbar-width:none}.hs::-webkit-scrollbar{display:none}.hs.dg{cursor:grabbing;scroll-snap-type:none}
.hs figure{position:relative;flex:0 0 min(70vw,420px);aspect-ratio:3/4;overflow:hidden;border-radius:18px;scroll-snap-align:start;transition:transform .4s}.hs figure:nth-child(2){margin-top:60px}.hs figure:hover{transform:rotate(-1.5deg)}
.hs img{width:100%;height:100%;object-fit:cover;user-select:none}
.kd{background:var(--ink);color:var(--bg);padding:120px var(--pad)}
.kd h2{font-size:clamp(2rem,5vw,4.2rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:14px 0 60px;max-width:900px}
.row{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:18px;padding:26px 0;border-top:1px solid #3a3a3a;cursor:pointer;outline:0;transition:padding .3s,color .3s;position:relative}.row:last-child{border-bottom:1px solid #3a3a3a}
.row .no{font-size:.85rem;color:#8a8579}.row b{font-size:clamp(2rem,6vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1}.row i{font-style:normal;color:#8a8579;font-size:.95rem;text-align:right}
.row:hover,.row:focus-visible{padding-left:24px;color:var(--yl)}
.rl{display:none}
#pv{position:fixed;left:0;top:0;z-index:60;pointer-events:none;width:320px;height:210px;display:grid;place-items:center;border-radius:18px;background:var(--bg);opacity:0;transform:translate(-999px,-999px) scale(.8);transition:opacity .2s}
#pv.on{opacity:1}#pv.dk{background:#fff}#pv.dk img{filter:brightness(0)}#pv img{max-width:68%;max-height:64%;width:auto;height:auto;object-fit:contain}
.ct{background:var(--yl);padding:130px var(--pad) 70px}
.ct h2{font-size:clamp(3.4rem,13vw,13rem);font-weight:800;letter-spacing:-.06em;line-height:.85}
.ml{display:inline-block;margin:44px 0 70px;font-size:clamp(1.3rem,3.6vw,2.6rem);font-weight:600;border-bottom:4px solid var(--ink);transition:color .2s,border-color .2s}.ml:hover{color:var(--co);border-color:var(--co)}
.cg{display:grid;grid-template-columns:1.3fr 1fr;gap:70px}
form{display:grid;gap:16px}
input,textarea{width:100%;background:rgba(255,255,255,.5);border:2px solid transparent;border-radius:16px;font:inherit;font-size:1.05rem;color:var(--ink);padding:16px 20px;transition:.2s}input::placeholder,textarea::placeholder{color:rgba(20,20,20,.5)}input:focus,textarea:focus{outline:0;background:#fff;border-color:var(--ink)}textarea{min-height:130px;resize:vertical}
.sb{justify-self:start;background:var(--ink);color:var(--bg);border:0;font:600 1.05rem "Bricolage Grotesque",sans-serif;padding:18px 38px;border-radius:99px;cursor:pointer;transition:.2s}.sb:hover{background:var(--co);transform:rotate(-2deg) scale(1.04)}
.so{list-style:none;padding:0;display:grid;gap:10px;font-size:1.6rem;font-weight:800;align-content:start;letter-spacing:-.02em}.so a:hover{color:var(--co)}
footer{background:var(--ink);color:#bdb7a8;padding:30px var(--pad);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;font-size:.85rem}footer img{height:48px;width:auto}
#cu{position:fixed;left:0;top:0;width:44px;height:44px;margin:-22px 0 0 -22px;border:2px solid #fff;border-radius:50%;z-index:95;pointer-events:none;mix-blend-mode:difference;transition:width .25s,height .25s,margin .25s,background .25s;display:none}
#cu.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}
@media(hover:hover) and (pointer:fine){.js #cu{display:block}}
.js .rv{opacity:0;transform:translateY(34px);transition:opacity .8s,transform .8s}.js .rv.in{opacity:1;transform:none}
.mb:focus-visible,a:focus-visible,.row:focus-visible,.sb:focus-visible{outline:3px solid currentColor;outline-offset:4px}
button,input,textarea{min-height:44px}
@media(max-width:1200px) and (min-width:861px){:root{--pad:clamp(32px,4vw,60px)}.hero h1{font-size:clamp(6rem,15vw,12rem)}.hp{left:54%;width:min(42vw,480px)}.ab{grid-template-columns:minmax(140px,.28fr) 1fr}.cg{grid-template-columns:1.1fr 1fr;gap:44px}}
@media(max-width:860px){:root{--pad:clamp(18px,5vw,42px)}.top img{height:54px}.mb{padding:12px 20px}.ab,.cg{grid-template-columns:1fr;gap:34px}.hp{position:absolute;left:auto;right:-8vw;top:145px;width:min(82vw,500px);margin:0}.hero{min-height:max(100svh,680px);padding-top:150px;padding-bottom:54px;align-content:end}.hero h1 .l2{padding-left:0}.hero h1 .hello{font-size:.38em}.sub{max-width:90%;margin-top:26px}.igh{padding-top:26px;padding-bottom:64px}.igh-track{gap:20px}.igh-ring{width:92px;height:92px}.ab{padding-top:90px;padding-bottom:80px}.meta{grid-template-columns:1fr;gap:24px;margin-top:40px}.gl{padding-bottom:80px}.hs{gap:16px}.hs figure{flex-basis:min(82vw,380px)}.hs figure:nth-child(2){margin-top:30px}.kd{padding-top:88px;padding-bottom:88px}.kd h2{margin-bottom:44px}.row{grid-template-columns:30px minmax(0,1fr);gap:14px;padding:22px 0}.row b{font-size:clamp(1.7rem,9vw,3.4rem)}.row i{grid-column:2;text-align:left}.rl{display:block;grid-column:2;height:44px;width:auto;max-width:min(240px,80%);margin-top:8px;object-fit:contain;filter:none}.dk .rl{background:#fff;padding:6px;border-radius:6px;filter:brightness(0)}#pv{display:none}.ct{padding-top:90px;padding-bottom:56px}.ct h2{font-size:clamp(3.1rem,16vw,7rem)}.ml{margin:34px 0 52px;font-size:clamp(1rem,5vw,1.8rem);border-bottom-width:2px;overflow-wrap:anywhere}.so{font-size:1.4rem}footer{padding-top:24px;padding-bottom:24px}}
@media(max-width:420px){:root{--pad:18px}.top img{height:48px}.mb{font-size:.85rem;padding:11px 17px}.hero{padding-top:138px;padding-bottom:44px}.hero h1{font-size:clamp(4rem,21vw,6.5rem)}.hero h1 .hello{font-size:.36em}.hp{right:-18vw;top:158px;width:96vw}.sub{font-size:1.05rem;margin-top:22px}.igh{padding-top:22px}.igh-track{gap:16px}.igh-ring{width:82px;height:82px}.igh-name{max-width:86px;font-size:.82rem}.ab{padding-top:76px;padding-bottom:70px}#st{font-size:clamp(1.7rem,8.6vw,2.4rem)}.meta{font-size:.95rem}.gl .lb{padding-bottom:16px}.hs figure{flex-basis:84vw}.kd{padding-top:74px;padding-bottom:74px}.row b{font-size:clamp(1.6rem,9vw,2.6rem)}.ct{padding-top:76px}.ct h2{font-size:clamp(3rem,17vw,5rem)}input,textarea{padding:14px 16px;border-radius:13px}.sb{width:100%;justify-self:stretch}footer{justify-content:center;text-align:center}footer img{height:42px}}
@media(max-width:860px) and (max-height:560px) and (orientation:landscape){.hero{min-height:650px;padding-top:110px}.hero h1{font-size:clamp(4rem,12vw,7rem)}.hp{right:5vw;top:95px;width:min(44vw,360px)}.sub{max-width:55%}}
@media(min-width:861px) and (max-height:800px){.hero{min-height:max(100svh,700px);padding-top:120px;padding-bottom:40px}.hero h1{font-size:clamp(5rem,13vw,10rem)}.hero h1 .hello{font-size:.38em}.hp{top:86px;width:min(34vw,420px)}.sub{margin-top:24px}}
@media(min-width:1600px){.hero h1{font-size:clamp(10rem,15vw,18rem)}.hp{width:min(34vw,600px)}.hs figure{flex-basis:clamp(440px,28vw,560px)}.row b{font-size:clamp(3.4rem,5vw,5.5rem)}#pv{width:clamp(320px,22vw,420px);height:clamp(210px,14vw,280px)}}
@media(min-width:2400px){body{font-size:1.12rem}.top img{height:94px}.mb{font-size:1.15rem;padding:18px 34px}.hero h1{font-size:clamp(16rem,13vw,22rem)}.hero h1 .hello{font-size:.36em}.hp{top:150px;width:min(31vw,700px)}.sub{max-width:700px;font-size:2rem}.igh-ring{width:138px;height:138px}.igh-item{font-size:1.05rem}.lb{font-size:1rem}#st{font-size:clamp(3.8rem,3.2vw,5rem)}.hs figure{flex-basis:600px}.kd h2{font-size:5.4rem}.row b{font-size:6rem}.ct h2{font-size:15rem}.cg{gap:110px}input,textarea{font-size:1.25rem;padding:20px 24px}footer{font-size:1rem}footer img{height:64px}}
@media(hover:none){#pv{display:none}.row{cursor:default}.rl{display:block;grid-column:2;height:48px;width:auto;max-width:240px;margin-top:8px;object-fit:contain}.dk .rl{background:#fff;padding:6px;border-radius:6px;filter:brightness(0)}}
@media(prefers-reduced-motion:reduce){#ld img{animation:none}.js .rv{opacity:1;transform:none}.hp{clip-path:none;transition:none}}

#impressum,#datenschutz{display:none}
#impressum.open,#datenschutz.open{display:block;position:fixed;inset:0;z-index:95;background:var(--bg);overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 40px) var(--pad) 80px}
.ic{max-width:720px}
.ic h2{font-size:clamp(2.4rem,7vw,5rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin:24px 0 36px}
.ic h3{font-size:1rem;font-weight:800;margin:28px 0 6px}
.ic p{color:var(--ink);margin-bottom:6px}
.ic a.back{display:inline-block;background:var(--ink);color:var(--bg);font-weight:600;padding:12px 22px;border-radius:99px}
footer .fl{margin-left:20px;text-decoration:underline}.ic h2.sm{font-size:clamp(2rem,5vw,3.4rem)}.ic .ph{background:#ffe27a;padding:0 4px}
.wa{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;width:62px;height:62px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .2s}.wa:hover{transform:scale(1.08) rotate(-6deg)}
.cn{font-size:.8rem;color:var(--mu);margin:4px 0 0}#fs{margin-top:12px;font-weight:600}#fs.err{color:#b3261e}.sb[disabled]{opacity:.6;cursor:default}

/* Mobile: Foto steht ueber dem Text, damit der Name lesbar bleibt */
@media(max-width:860px) and (min-height:561px){.hero{align-content:start;padding-top:128px;padding-bottom:40px;min-height:0}.hp{position:relative;left:auto;right:auto;top:auto;width:min(72vw,380px);margin:0 0 44px auto;transform:rotate(3deg)}.hero h1{font-size:clamp(4rem,21vw,8rem)}.sub{max-width:100%}}

.tx{padding:110px var(--pad);display:grid;grid-template-columns:.3fr 1fr;gap:40px}.tx h2{font-size:clamp(2rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1;margin-bottom:24px}.tx p.t{font-size:1.2rem;max-width:720px;white-space:pre-line}.tx img{margin-top:30px;border-radius:18px;max-width:560px;width:100%}@media(max-width:860px){.tx{grid-template-columns:1fr}}
