@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/geist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;src:url(fonts/geist-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/host-grotesk-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Host Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/host-grotesk-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* FRAME + FORM · Website. Zeichnungs-Look: Rahmen, Linse (Sucher), Bilder schwarz-weiß bis zur Linse. */
:root{
  /* Markenfarben aus dem Design System (Earthy Olive Luxe): Creme, Espresso, Walnuss, Oliv, Terrakotta. Kanten bleiben scharf. */
  --ground:#DED6CA;--paper:#EAE5DB;--text:#34291F;--meta:#6B5A4A;--line:#BFB3A0;--ac:#C56A2D;--act:#8F4718;
  --dg:#2E3124;--dt:#EAE5DB;--dm:#B9B9A8;--dl:#4A4D3B;--dac:#E08A4F;--sand:#CFC4B1;
  --m:clamp(20px,4vw,64px);--ease:cubic-bezier(.2,.7,.2,1);--R:72px;--kopf:76px;
  --sans:Geist,"Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
  /* fünf Schriftgrößen, sonst keine */
  --f1:14px;--l1:1.45;
  --f2:18px;--l2:1.6;
  --f3:clamp(22px,1.9vw,28px);--l3:1.25;
  --f4:clamp(30px,3.3vw,48px);--l4:1.1;
  --f5:clamp(40px,6vw,92px);--l5:1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--ground);color:var(--text);font:400 var(--f2)/var(--l2) var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;border-radius:0}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
:focus-visible{outline:1px solid var(--ac);outline-offset:3px}
::selection{background:var(--ac);color:#fff}
.meta{font-family:var(--sans);font-size:var(--f1);line-height:var(--l1)}
/* Mono nur für Zahlen: Nummern, Preise, Dauer */
.num,.n.meta,.p.meta,.fd.meta{font-family:var(--mono);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--ground);padding:10px 14px;z-index:99}
.skip:focus{left:8px}
@media (hover:hover) and (pointer:fine){body.lens-on,body.lens-on a,body.lens-on button,body.lens-on summary,body.lens-on input[type=range]{cursor:none}}

/* Abschnittsrahmen */
.sec{position:relative}
.dark{background:var(--dg);color:var(--dt)}
.paper{background:var(--paper)}
.axis{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none}
.dark .axis{background:var(--dl)}
.label{position:absolute;left:var(--m);top:56px;display:flex;gap:16px;align-items:baseline;z-index:2}
.label .n{color:var(--meta)}
.dark .label .n{color:var(--dm)}
.label .t{font-size:var(--f1);line-height:var(--l1);font-weight:400}
.tie{position:absolute;top:66px;right:50%;height:1px;background:var(--line);transform-origin:right;transform:scaleX(0);transition:transform 900ms var(--ease)}
.dark .tie{background:var(--dl)}
.in .tie{transform:scaleX(1)}
.more{position:absolute;right:var(--m);top:52px;padding:6px 0;font-size:var(--f1);line-height:var(--l1);background:linear-gradient(var(--ac),var(--ac)) 0 100%/100% 1px no-repeat;z-index:2}
.dark .more{background-image:linear-gradient(var(--dac),var(--dac))}
.count{position:absolute;right:var(--m);top:58px;color:var(--meta)}
.dark .count{color:var(--dm)}

/* Logo: der Rahmen wird gezeichnet, dann setzt sich die Form hinein */
.logo{display:block;color:var(--text)}
.logo svg{width:100%;height:100%;display:block;overflow:visible}
.logo path{fill:currentColor}
.logo .ffl{fill:none;stroke:#fff;stroke-width:240;stroke-dasharray:700;stroke-dashoffset:700;animation:draw .9s cubic-bezier(.45,.05,.3,1) .2s forwards}
.logo .ffd{transform-box:fill-box;transform-origin:100% 100%;transform:scale(0);animation:set .5s var(--ease) 1.05s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes set{to{transform:none}}

/* Navigation */
.nav{display:flex;gap:28px;font-size:var(--f1);line-height:var(--l1);align-items:baseline}
.nav a{padding:12px 0;background:linear-gradient(var(--ac),var(--ac)) 0 100%/0 1px no-repeat;transition:background-size 240ms var(--ease)}
.nav a:hover,.nav a[aria-current]{background-size:100% 1px}
.nav a.anf{background-size:100% 1px}
.menub{display:none;position:absolute;right:var(--m);top:22px;padding:12px 0;z-index:5;font-size:var(--f1);line-height:var(--l1)}
.menu{position:fixed;inset:0;z-index:70;background:var(--ground);padding:96px var(--m) 32px;display:none;flex-direction:column;overflow:auto}
.menu.auf{display:flex}
.menu a{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--f3);line-height:var(--l3);font-weight:300}
.menu a .meta{color:var(--meta);width:28px}
.menu .x{position:absolute;right:var(--m);top:22px;padding:12px 0;font-size:var(--f1);line-height:var(--l1)}

/* Schaltflächen und Textlinks */
.cta{display:inline-block;padding:14px 22px;background:var(--text);color:var(--ground);font-size:var(--f1);line-height:var(--l1);transition:background 240ms var(--ease)}
.cta:hover{background:var(--ac)}
.dark .cta{background:var(--dt);color:var(--dg)}
.dark .cta:hover{background:var(--dac)}
.open{display:inline-block;padding:12px 0;box-shadow:inset 0 -1px 0 var(--ac)}
.dark .open{box-shadow:inset 0 -1px 0 var(--dac)}
.open:hover{color:var(--act)}
.dark .open:hover{color:var(--dac)}

/* Ansatz */
.approach{padding:180px var(--m) 130px}
.stmtwrap{position:relative;max-width:min(1100px,100%)}
.stmt{font-size:var(--f5);line-height:var(--l5);font-weight:300;letter-spacing:-.005em;max-width:21ch}
.stmt.blue{position:absolute;inset:0;color:var(--ac);pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),#000 0,#000 var(--R),transparent calc(var(--R) + 4px));
  mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),#000 0,#000 var(--R),transparent calc(var(--R) + 4px))}
.approach .lead{margin:44px 0 0;max-width:46ch;font-size:var(--f2);line-height:var(--l2)}
.facts{margin:56px 0 0 calc(50% + 4px);max-width:440px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;border-top:1px solid var(--line);padding-top:14px}
.facts b{display:block;font-weight:400;font-size:var(--f3);line-height:var(--l3);letter-spacing:-.01em}
.facts span{display:block;color:var(--meta);margin-top:6px}

/* Einblenden */
.rv{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease),transform 700ms var(--ease)}
.rv.in{opacity:1;transform:none}
.rvline{display:block;overflow:hidden}
.rvline>span{display:block;transform:translateY(105%);transition:transform 900ms var(--ease)}
.in .rvline>span{transform:none}
.in .rvline:nth-child(2)>span{transition-delay:120ms}
.in .rvline:nth-child(3)>span{transition-delay:240ms}

/* Bilder: grau, bis sie die Bildmitte erreichen oder die Linse sie berührt */
.ph{position:relative;margin:0 0 16px var(--ml,0);width:var(--w,40%)}
.frame{position:relative;display:block;aspect-ratio:var(--ar,4/3);overflow:hidden;background:var(--sand)}
.dark .frame{background:#3a3d2e}
.frame img,.frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame.contain img{object-fit:contain}
.frame.light{background:#fff}
.frame[data-zoom]{cursor:zoom-in}
.ph figcaption{margin-top:10px;font-size:var(--f1);line-height:var(--l1)}
.ph figcaption i{display:block;font-style:normal;color:var(--meta);font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);margin-top:2px}
.dark .ph figcaption i{color:var(--dm)}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-left:var(--ml,19%);width:var(--w,62%)}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-left:var(--ml,19%);width:var(--w,62%)}
.quad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-left:var(--ml,19%);width:var(--w,62%)}
.duo .ph,.trio .ph,.quad .ph{width:100%;margin:0}
.corner{position:absolute;width:24px;height:24px;border:0 solid currentColor;pointer-events:none}
.corner.tl{left:-16px;top:-16px;border-left-width:1px;border-top-width:1px}
.corner.tr{right:-16px;top:-16px;border-right-width:1px;border-top-width:1px}
.side{position:absolute;top:0;width:min(16vw,260px)}
.side.l{right:calc(100% + 32px);text-align:right}
.side.r{left:calc(100% + 32px)}
.side .n{color:var(--meta)}
.dark .side .n,.dark .side .sub{color:var(--dm)}
.side h3{margin:12px 0 0;font-size:var(--f4);line-height:var(--l4);font-weight:400;letter-spacing:-.01em}
.side h3.s{font-size:var(--f3);line-height:var(--l3)}
.side h3 a:hover{color:var(--act)}
.dark .side h3 a:hover{color:var(--dac)}
.side .sub{margin-top:8px;color:var(--meta)}
.side p.txt{margin-top:14px;font-size:var(--f1);line-height:var(--l1)}
.side .open{margin-top:20px}

/* Durchsicht: fertiges Bild, die Linse zeigt das Modell darunter. Die Maske sitzt auf der Hülle, damit sie sich nicht mit dem Bild bewegt. */
.xr .frame .modw{position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),#000 0,#000 var(--R),transparent calc(var(--R) + 1px));
  mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),#000 0,#000 var(--R),transparent calc(var(--R) + 1px))}
.xr.intro .frame .modw{-webkit-mask-image:none;mask-image:none;animation:wipe 1.7s cubic-bezier(.6,.05,.2,1) 1.2s both}
.xr .wipe{position:absolute;top:0;bottom:0;left:0;width:1px;background:var(--ac);opacity:0;pointer-events:none}
.xr.intro .wipe{animation:wipel 1.7s cubic-bezier(.6,.05,.2,1) 1.2s both}
.xr.showmod .frame .modw{-webkit-mask-image:none;mask-image:none}
@keyframes wipe{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
@keyframes wipel{0%{left:0;opacity:1}95%{opacity:1}100%{left:100%;opacity:0}}
.tog{font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);padding:8px 0;color:var(--meta);box-shadow:inset 0 -1px 0 var(--line)}
.tog:hover,.tog[aria-pressed=true]{color:var(--act);box-shadow:inset 0 -1px 0 var(--ac)}
.dark .tog{color:var(--dm);box-shadow:inset 0 -1px 0 var(--dl)}
.dark .tog:hover,.dark .tog[aria-pressed=true]{color:var(--dac);box-shadow:inset 0 -1px 0 var(--dac)}

/* Vorher und Nachher */
.ba .frame{--p:50%;touch-action:pan-y}
.ba .vor{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba .griff{position:absolute;top:0;bottom:0;left:var(--p);width:1px;background:#fff;pointer-events:none}
.ba .griff::after{content:"";position:absolute;left:-9px;top:50%;width:19px;height:19px;margin-top:-10px;border:1px solid #fff;background:rgba(52,41,31,.55);transform:rotate(45deg)}
.ba .tag{position:absolute;bottom:10px;padding:3px 7px;background:rgba(52,41,31,.72);color:#fff;pointer-events:none}
.ba .tag.l{left:10px}.ba .tag.r{right:10px}
.ba input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}

/* Videos */
.vid .frame{background:#111}
.vid .play{position:absolute;left:10px;bottom:10px;padding:5px 9px;background:rgba(52,41,31,.72);color:#fff}
.vid .play:hover{background:var(--ac)}

/* Rundgang */
.tour{position:relative;margin:0 var(--m) 0 var(--m);aspect-ratio:16/9;max-height:82svh;min-height:380px;width:auto;background:#111;overflow:hidden}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.tour iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tour .ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;text-align:center;padding:24px}
.tour .ov .big{font-size:var(--f4);line-height:var(--l4);font-weight:300;letter-spacing:-.01em}
.tour .cta{background:#fff;color:var(--text)}
.tour .cta:hover{background:var(--dac)}
.tour .ring{width:74px;height:74px;border:1px solid rgba(255,255,255,.8);border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);animation:turn 9s linear infinite}
.tour .ring::before{content:"";width:2px;height:2px;background:#fff;box-shadow:0 -31px 0 1px #fff}
@keyframes turn{to{transform:rotate(360deg)}}
.tournote{display:flex;justify-content:space-between;gap:24px;margin:12px var(--m) 0 var(--m);color:var(--meta)}
.cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:32px;padding:0 var(--m) 0 var(--m)}
.cols .c-a{grid-column:1 / span 5}
.cols .c-b{grid-column:7 / span 6}
.cols h2,.h2{font-size:var(--f4);line-height:var(--l4);font-weight:300;letter-spacing:-.01em}
.cols p{font-size:var(--f2);line-height:var(--l2);max-width:52ch}
.cols p+p{margin-top:14px}
.liste{list-style:none;padding:0;border-top:1px solid var(--line)}
.dark .liste{border-color:var(--dl)}
.liste li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px;padding:11px 0;border-bottom:1px solid var(--line);font-size:var(--f2);line-height:var(--l2)}
.dark .liste li{border-color:var(--dl)}
.liste li .meta{color:var(--meta);padding-top:3px}
.dark .liste li .meta{color:var(--dm)}

/* Startseite: Abschnitte */
.work{padding:170px 0 190px}
.proj{position:relative;margin-top:170px}
.proj:first-of-type{margin-top:0}
.teaser{padding:150px 0 130px}
.intro2{padding:0 var(--m) 0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;margin-bottom:72px}
.intro2>.h2{grid-column:1 / span 6}
.intro2>p:not(.h2){grid-column:7 / span 5;font-size:var(--f2);line-height:var(--l2);align-self:end;max-width:46ch}

/* Leistungsverzeichnis */
.reg{margin:0 var(--m) 0 var(--m);border-top:1px solid var(--text)}
.reg a{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.6fr) 150px 24px;column-gap:24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line);position:relative}
.reg a .n{color:var(--meta)}
.reg a .t{font-size:var(--f3);line-height:var(--l3);font-weight:400;letter-spacing:-.01em}
.reg a .d{font-size:var(--f2);line-height:var(--l2);color:var(--meta)}
.reg a .p{text-align:right;color:var(--meta)}
.reg a .go{text-align:right;transition:transform 240ms var(--ease)}
.reg a::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--ac);transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}
.reg a:hover::after{transform:scaleX(1)}
.reg a:hover .t{color:var(--act)}
.reg a:hover .go{transform:translateX(4px);color:var(--act)}
.reghead{display:grid;grid-template-columns:56px minmax(0,1.1fr) minmax(0,1.6fr) 150px 24px;column-gap:24px;margin:0 var(--m) 8px var(--m);color:var(--meta)}
.reghead span:nth-child(4){text-align:right}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 var(--m) 0 var(--m);border-top:1px solid var(--text)}
.steps div{padding:18px 24px 8px 0;border-right:1px solid var(--line)}
.steps div+div{padding-left:24px}
.steps div:last-child{border-right:0}
.steps .n{color:var(--ac)}
.steps h3,.steps .sh{margin:36px 0 10px;font-size:var(--f3);line-height:var(--l3);font-weight:400;letter-spacing:0}
.steps p{font-size:var(--f2);line-height:var(--l2);color:var(--meta)}

/* Fragen */
.faq{margin:0 var(--m) 0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.faq .fl{grid-column:1 / span 4}
.faq .fr{grid-column:6 / span 7;border-top:1px solid var(--text)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 20px;gap:16px;padding:18px 0;font-size:var(--f2);line-height:var(--l2);cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--ac);text-align:right;transition:transform 240ms var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 36px 20px 0;font-size:var(--f2);line-height:var(--l2);color:var(--meta);max-width:62ch}

/* Kontakt */
.contact{min-height:760px;padding-bottom:120px}
.chl{position:absolute;left:0;right:0;top:500px;height:1px;background:var(--line)}
.mail{position:absolute;left:50%;top:230px;transform:translateX(-50%);background:var(--ground);padding:8px 16px;font-size:var(--f5);line-height:var(--l5);font-weight:300;white-space:nowrap}
.mail:hover{color:var(--act)}
.mailhint{position:absolute;left:0;right:0;top:322px;text-align:center;color:var(--meta)}
.mailhint span{background:var(--ground);padding:0 8px}
.cgrid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:560px var(--m) 0 var(--m)}
.cgrid .ca{grid-column:1 / span 5}
.cgrid .cb{grid-column:7 / span 6;background:var(--ground)}
.cgrid dl{display:grid;grid-template-columns:96px minmax(0,1fr);row-gap:10px;font-size:var(--f2);line-height:var(--l2)}
.cgrid dt{color:var(--meta);font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);padding-top:3px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.form label{display:block;border-bottom:1px solid var(--text);padding:14px 0 6px}
.form label.w{grid-column:1 / -1}
.form label span{display:block;font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);color:var(--meta)}
.form input,.form select,.form textarea{width:100%;border:0;background:transparent;font:inherit;color:inherit;padding:6px 0;border-radius:0;outline:0;-webkit-appearance:none;appearance:none}
.form textarea{resize:vertical;min-height:84px}
.form label:focus-within{border-color:var(--ac)}
.form label:focus-within span{color:var(--act)}
.form .send{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;color:var(--meta)}

/* Fuß */
.foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:28px;padding:56px var(--m) 28px var(--m);border-top:1px solid var(--line);font-size:var(--f1);line-height:var(--l1)}
.foot .f1{grid-column:1 / span 4}
.foot .f2{grid-column:6 / span 2}.foot .f3{grid-column:8 / span 2}.foot .f4{grid-column:10 / span 3}
.foot h2{font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);font-weight:400;color:var(--meta);margin-bottom:10px;letter-spacing:.02em}
.foot ul{list-style:none;padding:0}
.foot li a{display:inline-block;padding:3px 0}
.foot li a:hover{color:var(--act)}
.foot .wm{font-size:var(--f3);line-height:var(--l3);font-weight:500;letter-spacing:-.005em;margin-bottom:8px}
.foot .end{grid-column:1 / -1;display:flex;justify-content:space-between;gap:16px;color:var(--meta);border-top:1px solid var(--line);padding-top:16px;margin-top:20px}

/* Unterseiten */
.ptitle{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:110px var(--m) 88px var(--m)}
.ptitle .back{grid-column:span 2;color:var(--meta);padding-top:18px}
.ptitle .back a{padding:12px 0}
.ptitle .back a:hover{color:var(--act)}
.ptitle .head{grid-column:3 / span 7}
.ptitle h1{font-size:var(--f5);line-height:var(--l5);font-weight:400;letter-spacing:-.015em}
.ptitle .kicker{margin-top:16px;font-size:var(--f1);line-height:var(--l1);letter-spacing:.06em;text-transform:uppercase}
.ptitle .lead{margin-top:28px;font-size:var(--f3);line-height:var(--l3);font-weight:300;max-width:38ch}
.ptitle dl{grid-column:10 / span 3;padding-top:16px;display:grid;grid-template-columns:84px minmax(0,1fr);row-gap:8px;align-content:start}
.ptitle dt{color:var(--meta)}
.pcover{padding:0 var(--m) 96px var(--m)}
.pcover .ph{width:100%;margin:0}
.block{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:40px;padding:56px var(--m) 110px var(--m);border-top:1px solid var(--line)}
.block>.bl{grid-column:span 2;padding-top:4px}
.block>.bl .n{color:var(--meta)}
.block>.bl .t{display:block;margin-top:6px;font-size:var(--f1);line-height:var(--l1);font-weight:400}
.prose{grid-column:3 / span 6;font-size:var(--f2);line-height:var(--l2)}
.prose h2{font-size:var(--f4);line-height:var(--l4);font-weight:400;letter-spacing:-.01em;margin-bottom:18px}
.prose p{margin:0 0 18px}
.prose p:last-child{margin:0}
.prose a{box-shadow:inset 0 -1px 0 var(--ac)}
.prose a:hover{color:var(--act)}
.notes{grid-column:10 / span 3;list-style:none;padding:0}
.notes li{padding:8px 0;border-bottom:1px solid var(--line)}
.notes li b{display:block;font-weight:400;font-size:var(--f1);line-height:var(--l1)}
.notes li i{display:block;font-style:normal;color:var(--meta);font-family:var(--mono);font-size:var(--f1);line-height:var(--l1)}
.span12{grid-column:1 / -1}
.c3-12{grid-column:3 / -1}
.c3-8{grid-column:3 / span 6}
.c9-12{grid-column:9 / -1}
.c3-10{grid-column:3 / span 8}
.c3-9{grid-column:3 / span 7}
.block .ph{width:100%;margin:0}
.block .duo,.block .trio,.block .quad{margin-left:0;width:100%}
.block .faq{margin:0;grid-column:3 / -1;display:block}
.block .faq .fr{border-top:1px solid var(--text)}
.block .tour{margin:0}
.ptab{grid-column:3 / -1;width:100%;border-collapse:collapse;font-size:var(--f2);line-height:var(--l2)}
.ptab th{font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);font-weight:400;color:var(--meta);text-align:left;padding:0 0 8px;border-bottom:1px solid var(--text)}
.ptab td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.ptab td small{display:block;font-size:var(--f1);line-height:var(--l1);color:var(--meta)}
.ptab td:last-child,.ptab th:last-child{text-align:right;padding-right:0;white-space:nowrap}
.next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:40px var(--m) 96px var(--m);border-top:1px solid var(--line);align-items:baseline}
.next .bl{grid-column:span 2;color:var(--meta)}
.next a.big{grid-column:3 / span 7;font-size:var(--f4);line-height:var(--l4);font-weight:300}
.next a.big:hover{color:var(--act)}
.next .idx2{grid-column:10 / span 3;color:var(--meta)}
.band{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:72px var(--m) 80px var(--m);align-items:end}
.band h2{grid-column:3 / span 6;font-size:var(--f4);line-height:var(--l4);font-weight:300;letter-spacing:-.01em}
.band div{grid-column:10 / span 3}

/* Großansicht */
.lb{position:fixed;inset:0;z-index:80;background:rgba(222,214,202,.97);display:none;align-items:center;justify-content:center;padding:48px}
.lb.auf{display:flex}
.lb img,.lb video{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 0 0 1px var(--line)}
.lb .x{position:absolute;right:var(--m);top:20px;padding:12px;font-size:var(--f1);line-height:var(--l1)}
.lb .cap{position:absolute;left:var(--m);bottom:20px;color:var(--meta)}
.lb .pv,.lb .nx{position:absolute;top:50%;transform:translateY(-50%);padding:16px;font-size:var(--f2);line-height:var(--l2)}
.lb .pv{left:8px}.lb .nx{right:8px}
.lb .cnt{position:absolute;right:var(--m);bottom:20px;color:var(--meta)}
.lb.single .pv,.lb.single .nx{display:none}

/* Ringe beim Kopieren der Adresse */
.rings{position:absolute;pointer-events:none;overflow:visible}
.rings circle{fill:none;stroke:var(--ac);stroke-width:1.2;transform-box:fill-box;transform-origin:center;opacity:0;animation:ringout 1.3s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ringout{0%{transform:scale(.08);opacity:.9}100%{transform:scale(1);opacity:0}}

/* Linse */
.lens{position:fixed;left:0;top:0;width:180px;height:180px;margin:-90px 0 0 -90px;pointer-events:none;z-index:90;opacity:0;transition:opacity 200ms}
body.lens-on .lens{opacity:1}

/* schmale Bildschirme */
@media (max-width:899px){
  .menub{display:block}
  .axis,.tie{display:none}
  .approach{min-height:0;padding:140px var(--m) 96px}
  .approach .lead,.facts{margin-left:0}
  .ph,.duo,.trio,.quad{margin-left:var(--m)!important;width:calc(100% - 2 * var(--m))!important}
  .ph.small{width:70%!important;margin-left:auto!important;margin-right:var(--m)}
  .duo,.trio{grid-template-columns:1fr}
  .quad{grid-template-columns:1fr 1fr}
  .duo .ph,.trio .ph,.quad .ph,.block .ph,.pcover .ph{margin:0!important;width:100%!important}
  .trio.keep{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .side{position:static;width:auto;text-align:left!important;margin:14px 0 8px}
  .corner{display:none}
  .lens{display:none}
  .work{padding:130px 0 110px}.proj{margin-top:96px}.teaser{padding:130px 0 96px}
  .intro2,.cols,.faq,.cgrid,.foot,.ptitle,.block,.next,.band{grid-template-columns:1fr;padding-right:var(--m)}
  .intro2>*,.cols>*,.faq>*,.cgrid>*,.foot>*,.ptitle>*,.block>*,.next>*,.band>*{grid-column:1 / -1!important}
  .intro2>p:not(.h2){margin-top:18px}
  .faq{margin:0 var(--m);padding:0}.faq .fr{margin-top:28px}
  .block .faq{margin:0}
  .reg,.steps,.tour,.tournote{margin-left:var(--m);margin-right:var(--m)}
  .tour{aspect-ratio:4/5;min-height:0}
  .reghead{display:none}
  .reg a{grid-template-columns:36px minmax(0,1fr) 20px;row-gap:4px}
  .reg a .d{grid-column:2 / span 1}.reg a .p{grid-column:2;text-align:left}.reg a .go{grid-row:1;grid-column:3}
  .steps{grid-template-columns:1fr 1fr}
  .steps div{padding:16px 16px 20px 0!important;border-right:0;border-bottom:1px solid var(--line)}
  .steps h3,.steps .sh{margin-top:18px}
  .contact{min-height:0;padding-bottom:64px}
  .mail{top:170px}.mailhint{top:236px}.chl{display:none}
  .cgrid{padding-top:320px;row-gap:40px}
  .form{grid-template-columns:1fr}
  .ptitle{padding-top:56px;padding-bottom:56px;row-gap:20px}
  .ptitle .back{padding-top:0}
  .more,.count{right:var(--m)}
  .foot .end{flex-direction:column}
  .ptab{font-size:var(--f2);line-height:var(--l2)}
  .lb{padding:16px}
}
.static .rv,.static .rvline>span,.static .tie{transition:none;opacity:1;transform:none}
.static .logo .ffl{animation:none;stroke-dashoffset:0}.static .logo .ffd{animation:none;transform:none}
.static .xr.intro .frame .modw{animation:none;clip-path:inset(0 0 0 100%)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .logo .ffl{animation:none;stroke-dashoffset:0}.logo .ffd{animation:none;transform:none}
  .rv,.rvline>span,.tie{transition:none;opacity:1;transform:none}
  .xr.intro .frame .modw{animation:none;clip-path:inset(0 0 0 100%)}.xr.intro .wipe{animation:none}
  .kette::before,.kette div{transition:none;transform:none;opacity:1}
  .tour .ring{animation:none}
}


.block .tournote{margin-left:0;margin-right:0}
.block .steps{grid-column:3 / -1;margin:0}

/* ---------- Bewegung ---------- */
/* Alles aus einer Hand: Maßkette mit sechs Stationen */
.hand{margin:130px var(--m) 0 var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px}
.hand .h2{grid-column:1 / span 6}
.hand>p:not(.h2){grid-column:7 / span 5;font-size:var(--f2);line-height:var(--l2);align-self:end;max-width:46ch}
.kette{grid-column:1 / -1;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:64px;padding-top:28px}
.kette::before{content:"";position:absolute;left:0;right:0;top:8px;height:1px;background:var(--text);transform-origin:left;transform:scaleX(0);transition:transform 1.8s var(--ease)}
.kette.in::before{transform:scaleX(1)}
.kette div{position:relative;padding-right:16px;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.kette.in div{opacity:1;transform:none}
.kette div::before{content:"";position:absolute;left:0;top:-29px;width:1px;height:19px;background:var(--ac);transform:rotate(45deg)}
.kette div:nth-child(1){transition-delay:.2s}.kette div:nth-child(2){transition-delay:.45s}.kette div:nth-child(3){transition-delay:.7s}
.kette div:nth-child(4){transition-delay:.95s}.kette div:nth-child(5){transition-delay:1.2s}.kette div:nth-child(6){transition-delay:1.45s}
.kette i{display:block;font-style:normal;font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);color:var(--meta)}
.kette b{display:block;font-weight:400;font-size:var(--f3);line-height:var(--l3);margin-top:8px}
.kette span{display:block;color:var(--meta);font-size:var(--f1);line-height:var(--l1);margin-top:6px;max-width:22ch}

/* Stile zum Umschalten */
.stile .frame img{opacity:0;transition:opacity 700ms var(--ease)}
.stile .frame img.z{opacity:1}
.tabs{display:flex;gap:6px 20px;flex-wrap:wrap}
.raumliste{margin-top:14px;font-family:var(--mono);font-size:var(--f1);line-height:var(--l1);text-align:left}
.raumliste div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--dl)}
.raumliste div:last-child{border:0;color:var(--dt)}
.raumliste span:last-child{white-space:nowrap}

/* Vorschaubild am Mauszeiger über dem Verzeichnis */
.vorschau{position:fixed;left:0;top:0;width:300px;aspect-ratio:3/2;margin:22px 0 0 88px;overflow:hidden;pointer-events:none;z-index:60;opacity:0;transition:opacity 260ms var(--ease);background:var(--sand);box-shadow:0 0 0 1px var(--line)}
.vorschau.an{opacity:1}
.vorschau img{width:100%;height:100%;object-fit:cover}
[data-par]{will-change:transform}
.qr{grid-column:10 / span 3}
.qr .frame{background:#fff;aspect-ratio:1}
.qr .frame img{object-fit:contain;padding:9%}
@media (max-width:899px){
  .hand{display:block;margin:96px var(--m) 0}
  .hand>p:not(.h2){margin-top:18px}
  .kette{grid-template-columns:1fr 1fr;row-gap:44px}
  .kette::before{display:none}
  .kette div::before{top:-22px;height:14px}
  .qr{max-width:240px}
}

/* ---------- Startseite: Bühne der Leistungen ---------- */
.schau{position:relative;margin:0 var(--m) 0 var(--m)}
.schau ol{list-style:none;margin:0;padding:0;width:38%;min-height:clamp(520px,44vw,680px);border-top:1px solid var(--text)}
.schau li>a.zl{display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;gap:12px;color:inherit;text-decoration:none;cursor:pointer;align-items:baseline;width:100%;text-align:left;padding:14px 0;border-bottom:1px solid var(--line);transition:color 200ms var(--ease)}
.schau li>a.zl .t{font-size:var(--f3);line-height:var(--l3);letter-spacing:-.01em}
.schau li>a.zl .n,.schau li>a.zl .p{color:var(--meta)}
.schau li.sel>a.zl{color:var(--act);border-bottom-color:var(--ac)}
.schau li.sel>a.zl .n,.schau li.sel>a.zl .p{color:var(--act)}
.schau li>a.zl .go{opacity:0;transform:translateX(-8px);transition:opacity 200ms var(--ease),transform 200ms var(--ease)}
.schau li.sel>a.zl .go{opacity:1;transform:none}
.schau .tafel{display:none;position:absolute;left:44%;right:0;top:0}
.schau li.sel .tafel{display:block;animation:auf .45s var(--ease)}
.schau .feld{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--sand)}
.schau .feld>img,.schau .feld>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.schau .feld.blatt{background:#fff}
.schau .feld.blatt>img{object-fit:contain;padding:3%}
.schau .feld.dunkel{background:var(--dg)}
.schau .feld.dunkel>video{object-fit:contain}
.schau .tafel .ph{width:100%;margin:0}
.schau .tafel>p{margin-top:16px;font-size:var(--f2);line-height:var(--l2);max-width:50ch}
.schau .tafel>.open{margin-top:4px}

/* ---------- lebendes Architekturmodell ---------- */
.modell3d{position:relative;margin:64px 48px 0 0}
.modell3d canvas{display:block;width:100%;aspect-ratio:16/8.2;max-height:76svh;cursor:grab;touch-action:pan-y;opacity:0;transition:opacity 900ms var(--ease)}
.modell3d.bereit canvas{opacity:1}
.modell3d canvas:active{cursor:grabbing}
.modell3d .ersatz{display:none;width:100%;aspect-ratio:16/8.2;object-fit:cover}
.modell3d.ohne canvas{display:none}
.modell3d.ohne .ersatz{display:block}
.modell3d.ohne .m3-leiste,.modell3d.ohne .m3-info{display:none}
.m3-info{position:absolute;left:0;top:0;color:var(--meta)}
.m3-leiste{display:flex;gap:10px 32px;flex-wrap:wrap;align-items:center;justify-content:space-between;border-top:1px solid var(--text);padding-top:12px}
.m3-s{display:flex;gap:14px;align-items:center;color:var(--meta)}
.m3-sonne{-webkit-appearance:none;appearance:none;width:min(280px,42vw);height:20px;margin:0;background:linear-gradient(var(--text),var(--text)) center/100% 1px no-repeat}
.m3-sonne::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border:0;border-radius:0;background:var(--ac);transform:rotate(45deg)}
.m3-sonne::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:0;background:var(--ac);transform:rotate(45deg)}
.m3-knoepfe{display:flex;gap:28px}
@media (max-width:899px){
  .schau{margin:0 var(--m)}
  .schau ol{width:auto;min-height:0}
  .schau .tafel{position:static;margin:6px 0 26px}
  .modell3d{margin-right:0}
  .modell3d canvas,.modell3d .ersatz{aspect-ratio:4/3.4}
  .m3-info{position:static;margin-bottom:6px}
}

.static .kette::before,.static .kette div{transform:none;opacity:1;transition:none}

/* ---------- Browserfenster, in dem die Beispiel-Projektseite durchläuft ---------- */
.fenster{display:block;border:1px solid var(--text);background:var(--paper)}
.fenster .fl{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--text);color:var(--meta)}
.fenster .fl i{width:8px;height:8px;border:1px solid var(--text)}
.fenster .fl b{font-weight:400;margin-left:10px}
.fenster .fl em{font-style:normal;margin-left:auto;color:var(--act)}
.fenster .sicht{display:block;position:relative;aspect-ratio:16/9.4;overflow:hidden;background:var(--paper)}
.fenster .sicht img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;animation:rollen 36s ease-in-out 1s infinite alternate}
.fenster:hover .sicht img{animation-play-state:paused}
@keyframes rollen{from{top:0;transform:translateY(0)}to{top:100%;transform:translateY(-100%)}}
.block .fenster{grid-column:3 / -1}
.schau .tafel .fenster .sicht{aspect-ratio:3/1.8}
.wege{display:flex;gap:2px 28px;flex-wrap:wrap;margin-top:4px}
/* Nutzen in drei Spalten */
.nutz{grid-column:3 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--text)}
.nutz div{padding:18px 24px 6px 0;border-right:1px solid var(--line)}
.nutz div+div{padding-left:24px}
.nutz div:last-child{border-right:0}
.nutz h3{font-size:var(--f3);line-height:var(--l3);font-weight:400;margin-bottom:10px}
.nutz p{font-size:var(--f2);line-height:var(--l2);color:var(--meta)}
.block .kette{margin-top:0}
.static .fenster .sicht img{animation:none}
@media (max-width:899px){
  .nutz{grid-template-columns:1fr}
  .nutz div{border-right:0;border-bottom:1px solid var(--line);padding:16px 0!important}
}
@media (prefers-reduced-motion:reduce){.fenster .sicht img{animation:none}}


/* ---------- Systembild der Vermarktung: Strategie, Plattform, Content, Ergebnis ---------- */
.sys{display:grid;grid-template-columns:minmax(0,.9fr) 72px minmax(0,2.1fr) 72px minmax(0,1.1fr);align-items:start;margin:0;padding-top:28px;border-top:1px solid var(--text)}
.sys .sy{min-width:0}
.sys .n{display:block;color:var(--meta);margin-bottom:16px}
.sys .sy>p{margin-top:16px;font-size:var(--f2);line-height:var(--l2);color:var(--meta);max-width:36ch}
.sys .karte b{display:block;font-weight:400;font-size:var(--f3);line-height:var(--l3);letter-spacing:-.01em}
.sys .karte{border:1px solid var(--text);background:var(--paper);padding:20px 20px 8px}
.sys .s1 ul{list-style:none;margin:16px 0 0;padding:0}
.sys .s1 li{position:relative;padding:10px 0 10px 24px;border-top:1px solid var(--line);font-size:var(--f2);line-height:var(--l2)}
.sys .s1 li::before{content:"";position:absolute;left:2px;top:16px;width:9px;height:9px;border:1px solid var(--ac);background:var(--ac)}
.sys .pf{position:relative;display:block;align-self:center;margin:0 12px;height:1px;background:var(--text)}
.sys .pf::after{content:"";position:absolute;right:-1px;top:-4px;border-left:8px solid var(--text);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.sys .p2::after{right:auto;left:-1px;border-left:0;border-right:8px solid var(--text)}
.sys .fenster{width:100%}
.sys .stapel{position:relative;display:block;aspect-ratio:1/1.03}
.sys .handy{position:absolute;left:0;top:0;width:46%;aspect-ratio:9/16;border:1px solid var(--text);background:var(--dg);padding:5px;z-index:2}
.sys .handy video{width:100%;height:100%;object-fit:cover}
.sys .blatt{position:absolute;right:0;bottom:0;width:62%;border:1px solid var(--text);background:#fff}
.sys .blatt img.s{display:block;width:100%;height:auto}
.sys .blatt .q{position:absolute;right:-1px;bottom:-1px;width:32%;height:auto;background:#fff;border:1px solid var(--text);padding:3px}
.sys .s4{grid-column:3;justify-self:center;text-align:center}
.sys .p3{width:1px;height:46px;margin:6px auto 16px;background:var(--ac)}
.sys .p3::after{right:auto;left:-4px;top:auto;bottom:-1px;border:0;border-top:8px solid var(--ac);border-left:4.5px solid transparent;border-right:4.5px solid transparent}
.sys .s4 .karte{display:inline-block;border-color:var(--ac);padding:16px 26px 18px}
.sys .s4 .n{margin-bottom:8px;color:var(--act)}
.sys .s4 .meta:last-child{display:block;margin-top:8px;color:var(--meta)}
.sys .sy,.sys .pf{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.sys.in .sy,.sys.in .pf{opacity:1;transform:none}
.sys .s2{transition-delay:.35s}.sys .p1{transition-delay:.2s}.sys .s3{transition-delay:.8s}.sys .p2{transition-delay:1.05s}.sys .s4{transition-delay:1.5s}
.static .sys .sy,.static .sys .pf{opacity:1;transform:none;transition:none}
@media (max-width:899px){
  .sys{grid-template-columns:1fr;row-gap:0}
  .sys .pf{width:1px;height:34px;margin:18px auto;justify-self:center}
  .sys .pf::after{right:auto;left:-4px;top:auto;bottom:-1px;border:0;border-top:8px solid var(--text);border-left:4.5px solid transparent;border-right:4.5px solid transparent}
  .sys .p2::after{top:-1px;bottom:auto;border-top:0;border-bottom:8px solid var(--text)}
  .sys .s4{grid-column:1}
  .sys .p3{margin:18px auto}
  .sys .p3::after{border-top-color:var(--ac)}
  .sys .stapel{max-width:320px}
  .sys .sy>p{max-width:none}
}
@media (prefers-reduced-motion:reduce){.sys .sy,.sys .pf{opacity:1;transform:none;transition:none}}

/* ---------- Erklärvideo: links groß, was es ist und bringt, rechts das kleinere Vorschaubild mit Abspielknopf ---------- */
.filmblock{align-items:center}
.filmblock>.bl{align-self:start}
.filmblock .ftx{grid-column:3 / span 5}
.filmblock .ftx .fl{display:block;color:var(--act);margin-bottom:14px}
.filmblock .ftx h2{font-size:var(--f5);line-height:var(--l5);letter-spacing:-.02em;font-weight:400;margin-bottom:18px}
.filmblock .ftx p{font-size:var(--f2);line-height:var(--l2);max-width:46ch}
.filmblock .ftx .notes{grid-column:auto;margin:22px 0 28px;max-width:46ch}
.filmknopf{display:inline-flex;align-items:center;gap:12px;cursor:pointer}
.filmknopf i,.filmkarte .pl::after{display:block;width:0;height:0;border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.filmknopf:hover{background:var(--ac)}
.filmkarte{grid-column:8 / -1;position:relative;display:block;padding:0;border:1px solid var(--text);background:var(--ground);cursor:pointer;overflow:hidden}
.filmkarte img{display:block;width:100%;height:auto;transition:transform .6s var(--ease)}
.filmkarte:hover img{transform:scale(1.03)}
.filmkarte .pl{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;background:var(--text);color:var(--ground);display:grid;place-items:center;transition:background .25s var(--ease),transform .25s var(--ease)}
.filmkarte .pl::after{content:"";border-left-width:20px;border-top-width:13px;border-bottom-width:13px;margin-left:5px}
.filmkarte:hover .pl{background:var(--ac);transform:scale(1.06)}
.filmkarte .fd{position:absolute;right:10px;bottom:10px;padding:4px 8px;background:rgba(52,41,31,.78);color:#fff}
@media (max-width:899px){
  .filmblock .ftx,.filmkarte{grid-column:1 / -1}
  .filmkarte{order:2}.filmblock .ftx{order:3}
  .filmkarte .pl{width:64px;height:64px;margin:-32px 0 0 -32px}
}

/* ---------- Filme im Querformat: Kopf der Startseite, Erklärfilme ---------- */
.vid .frame.light video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vid .frame.light{background:var(--ground)}
.schau .feld.hell{background:var(--ground)}
.schau .feld.hell>video{object-fit:contain}

/* ---------- Projektübersicht: Kacheln führen auf die Projektseiten ---------- */
.pkacheln{row-gap:44px}
.pkacheln a{display:block}
.pkacheln a:hover figcaption{color:var(--act)}
@media (max-width:899px){.trio.pkacheln{grid-template-columns:1fr 1fr;gap:20px 12px}}

/* ---------- Startseite: Zusammenarbeit auf Dauer, vier Punkte ---------- */
.nutz.dauer{grid-template-columns:repeat(4,minmax(0,1fr));margin:72px var(--m) 0 var(--m)}
@media (max-width:899px){.nutz.dauer{grid-template-columns:1fr;margin:40px var(--m) 0}}

/* ---------- Hinweise: Fußzeile, Preise inklusive Umsatzsteuer ---------- */
.foot .hinw{grid-column:1 / -1;margin-top:8px;max-width:96ch;font-size:var(--f1);line-height:var(--l1);color:var(--meta)}
.foot .hinw a{text-decoration:underline;text-underline-offset:3px}
.ptab td:last-child small{display:block;margin-top:3px;font-size:var(--f1);line-height:var(--l1);color:var(--meta);white-space:nowrap}
.tournote a{text-decoration:underline;text-underline-offset:3px}


/* =====================================================================
   Runde 14 (17.10.2026): Kopf im Vollbild, Logo als Rahmen, Fortschritt als Rahmen,
   Bilder schwarz-weiß bis zum Sucher, Leistungen in vier Gruppen, mehr Luft.
   ===================================================================== */

/* Kopfleiste auf jeder Seite */
.kopf{position:fixed;left:0;right:0;top:0;height:var(--kopf);z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:0 var(--m);background:var(--ground);color:var(--text);border-bottom:1px solid transparent;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.kopf.rand{border-bottom-color:var(--line)}
.kopf+main{padding-top:var(--kopf)}
.marke{display:flex;align-items:center;gap:14px;padding:8px 0}
.marke .logo{display:block;width:30px;height:30px;color:currentColor}
.marke .wort{font-size:var(--f1);line-height:1;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.kopf .nav{gap:clamp(18px,2.2vw,32px)}
.kopf .menub{position:static;display:none;padding:12px 0;font-size:var(--f1)}
/* auf der Startseite liegt die Leiste zuerst durchsichtig über dem Bild */
.kopf.ueber{background:transparent}
.kopf.ueber.hell{color:var(--paper)}
.kopf.ueber.fest{background:var(--ground)}
.kopf.ueber .marke .logo{opacity:0}
.kopf.ueber.angekommen .marke .logo{opacity:1}
.kopf.ueber .marke .logo .ffl,.kopf.ueber .marke .logo .ffd{animation:none;stroke-dashoffset:0;transform:none}

/* Fortschritt: eine Linie läuft um den Bildschirmrand, der Rahmen schließt sich am Seitenende */
.fortschritt{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:62;overflow:visible}
.fortschritt rect{fill:none;stroke:var(--ac);stroke-width:2;stroke-dasharray:1000;stroke-dashoffset:1000}

/* Kopf der Startseite: Vollbild, zieht sich beim Scrollen in den Rahmen zurück */
.vorspann{position:relative;height:170svh}
.hero{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ground);--k:0;--s:0}
.bildrahmen{position:absolute;top:calc(var(--k) * (var(--kopf) + 4px));left:calc(var(--k) * var(--m));right:calc(var(--k) * var(--m));bottom:calc(var(--k) * var(--m));overflow:hidden;background:#F2EFE8}
.bildrahmen .still,.bildrahmen canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:47% 55%}
.bildrahmen canvas{display:none}
.hero.lauf .bildrahmen canvas{display:block}
.schleier{position:absolute;inset:0;pointer-events:none;opacity:var(--s);transition:opacity 1s var(--ease);
  background:linear-gradient(to top,rgba(46,49,36,.66) 0,rgba(46,49,36,0) 48%),linear-gradient(rgba(46,49,36,.42) 0,rgba(46,49,36,0) 22%)}
.zeile{position:absolute;left:var(--m);right:var(--m);bottom:clamp(32px,7vh,72px);color:var(--paper);font-size:var(--f4);line-height:var(--l4);font-weight:400;letter-spacing:-.015em;max-width:18ch;
  opacity:var(--s);transform:translateY(calc((1 - var(--s)) * 14px));transition:opacity 1s var(--ease) .15s,transform 1s var(--ease) .15s}
.zeile span{display:block;margin-top:12px;font-size:var(--f2);line-height:var(--l2);letter-spacing:0;opacity:.88}
.flug{position:fixed;left:0;top:0;width:410px;height:408px;z-index:61;pointer-events:none;transform-origin:0 0;overflow:visible;--w:0}
.flug path{fill:color-mix(in srgb,var(--paper) calc(var(--w) * 100%),var(--text))}
.flug.weg{visibility:hidden}
@media (prefers-reduced-motion:reduce){.vorspann{height:100svh}.zeile,.schleier{transition:none}}

/* Sucher: Bilder sind schwarz-weiß, in der Linse farbig. Am Handy färben sie sich in der Bildschirmmitte, Kacheln beim Überfahren. */
.sw{position:absolute;inset:0;pointer-events:none;-webkit-backdrop-filter:grayscale(1);backdrop-filter:grayscale(1);transition:opacity .8s var(--ease);
  -webkit-mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent 0,transparent var(--R),#000 calc(var(--R) + 1px));
  mask-image:radial-gradient(circle at var(--mx,-999px) var(--my,-999px),transparent 0,transparent var(--R),#000 calc(var(--R) + 1px))}
.farbe>.sw{opacity:0}
@media (hover:hover){.pk:hover .sw,.gr:hover .sw{opacity:0}}
.finger{display:none}
@media (hover:none),(pointer:coarse){.maus{display:none}.finger{display:inline}}

/* Abschnitte: eine Aussage, ein Bild, eine Aktion */
.abschnitt{padding:clamp(104px,15vh,200px) var(--m)}
.abschnitt.oben{padding-top:0}
.kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:clamp(40px,6vh,80px)}
.h2,.cols h2{font-size:var(--f4);line-height:var(--l4);font-weight:400;letter-spacing:-.015em}
#ansatz .stmt{font-size:var(--f5);line-height:var(--l5);max-width:16ch;letter-spacing:-.02em}
#ansatz .lead{margin-top:32px;max-width:40ch;font-size:var(--f3);line-height:var(--l3);font-weight:300}
.spalte{max-width:52ch}
.spalte p{margin-bottom:24px}

/* Leistungen in vier Gruppen */
.gruppen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,7vw,104px) clamp(24px,3vw,48px)}
.gr .grb{display:block}
.gr .frame{display:block}
.gr h3{margin-top:22px;font-size:var(--f3);line-height:var(--l3);font-weight:400;letter-spacing:-.01em}
.gr h3 a:hover{color:var(--act)}
.gr p{margin-top:6px;color:var(--meta)}
.gr ul{list-style:none;padding:0;margin-top:14px;display:flex;flex-wrap:wrap;gap:2px 26px}
.gr ul a{display:inline-block;padding:8px 0;box-shadow:inset 0 -1px 0 var(--ac)}
.gr ul a:hover{color:var(--act)}

/* Projekte mit großen Bildern */
.pkacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(56px,7vw,104px) clamp(24px,3vw,48px)}
.pk{display:block}
.pk.breit{grid-column:1 / -1}
.pk .frame{display:block}
.pk .pt{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:18px}
.pk .pt b{font-weight:400;font-size:var(--f3);line-height:var(--l3);letter-spacing:-.01em}
.pk .pt span{color:var(--meta);font-size:var(--f1);text-align:right}
.pk:hover .pt b{color:var(--act)}

/* 3D-Modell: Standbild liegt sofort da, das Modell blendet darüber */
.modell3d{margin:clamp(48px,7vh,88px) 0 0}
.modell3d .m3-flaeche{position:relative;aspect-ratio:16/7;max-height:68svh;width:100%;overflow:hidden;background:var(--paper)}
.modell3d .m3-flaeche canvas,.modell3d .m3-flaeche .ersatz{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;max-height:none}
.modell3d .m3-flaeche .ersatz{display:block;object-fit:cover;transition:opacity .9s var(--ease)}
.modell3d.bereit .m3-flaeche .ersatz{opacity:0}
.modell3d.ohne .m3-flaeche .ersatz{opacity:1}
.m3-info{position:static;margin:14px 0 0;color:var(--meta)}
.m3-leiste{margin-top:14px}

/* Rundgang, Fragen, Kontakt im neuen Raster */
.abschnitt .tour,.abschnitt .tournote,.abschnitt .faq{margin-left:0;margin-right:0}
.abschnitt .tour{max-height:78svh}
.contact{min-height:0;padding-bottom:clamp(104px,15vh,200px)}
.cgrid{padding:0}
.cgrid .ca{grid-column:1 / span 5}
.cgrid .cb{grid-column:7 / span 6;background:none}
.mail{position:static;transform:none;padding:4px 0;background:none;font-size:var(--f3);line-height:var(--l3);white-space:normal;text-align:left;box-shadow:inset 0 -1px 0 var(--ac)}
.mailhint{position:static;display:block;margin:10px 0 40px;text-align:left;color:var(--meta)}
.cgrid dl{font-size:var(--f2);line-height:var(--l2);row-gap:14px;grid-template-columns:110px minmax(0,1fr)}
.cgrid dt{font-family:var(--sans);font-size:var(--f1);padding-top:4px}
.form label span{font-family:var(--sans)}

/* Unterseiten: ein Gedanke je Block, keine Seitenlabels */
.ptitle{padding:clamp(80px,12vh,150px) var(--m) clamp(56px,8vh,96px)}
.ptitle .head{grid-column:3 / span 7}
.ptitle h1{font-size:var(--f5);line-height:var(--l5);letter-spacing:-.025em;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.ptitle .lead{margin-top:32px;font-size:var(--f3);line-height:var(--l3);max-width:34ch}
.ptitle dl{font-size:var(--f1);row-gap:10px}
.ptitle dt{font-family:var(--sans)}
.pcover{padding:0 var(--m) clamp(72px,10vh,128px)}
.block{row-gap:clamp(36px,5vw,64px);padding:clamp(72px,11vh,136px) var(--m)}
.block .prose{grid-column:1 / span 8;max-width:62ch}
.prose h2{font-size:var(--f4);line-height:var(--l4);letter-spacing:-.015em;margin-bottom:24px}
.prose.recht{grid-column:1 / span 8}
.prose.recht h2{font-size:var(--f3);line-height:var(--l3);margin:40px 0 12px}
.block .notes{grid-column:10 / span 3;align-self:end}
.notes li b{font-size:var(--f1);line-height:var(--l1)}
.notes li i{font-family:var(--sans)}
.voll,.block .c3-12,.block .c3-10,.block .c3-9,.block .c3-8,.block .span12,.block .fenster,.block .nutz,.block .steps,.block .ptab,.block .faq{grid-column:1 / -1}
.block .faq{display:grid;margin:0}
.block .faq .fl{grid-column:1 / span 4}
.block .faq .fr{grid-column:6 / span 7}
.filmblock .ftx{grid-column:1 / span 5;align-self:center}
.filmblock .ftx h2{font-size:var(--f4);line-height:var(--l4);margin-bottom:20px}
.filmkarte{grid-column:7 / -1;border:0}
.filmkarte .fd{font-family:var(--sans)}
.nutz{border-top:1px solid var(--text)}
.nutz h3{font-size:var(--f3);line-height:var(--l3)}
.nutz p{font-size:var(--f2);line-height:var(--l2)}
.pfuss{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.psatz{color:var(--meta);max-width:52ch}
.band{padding:clamp(72px,11vh,136px) var(--m);border-top:1px solid var(--line)}
.band h2{grid-column:1 / span 8;font-size:var(--f4);line-height:var(--l4)}
.next{padding:40px var(--m) 96px}
.next .bl{grid-column:span 3}
.next a.big{grid-column:4 / span 7;font-size:var(--f4);line-height:var(--l4)}
.foot{padding:72px var(--m) 32px}
.foot h2{font-family:var(--sans)}
.foot .wm{font-size:var(--f1);letter-spacing:.08em;text-transform:uppercase}
.steps .n{color:var(--act)}
.steps h3,.steps .sh{font-size:var(--f3);line-height:var(--l3)}
.steps p{font-size:var(--f2);line-height:var(--l2)}
.faq summary{font-size:var(--f2)}
.faq details p{font-size:var(--f2);line-height:var(--l2)}
.ph figcaption i{font-family:var(--sans)}
.tog,.tl-wahl button{font-family:var(--sans)}

@media (max-width:899px){
  :root{--kopf:64px}
  .kopf .nav{display:none}
  .kopf .menub{display:block}
  .menu{padding-top:calc(var(--kopf) + 24px)}
  .menu a{font-size:var(--f3)}
  .vorspann{height:150svh}
  .zeile{max-width:none}
  .gruppen,.pkacheln{grid-template-columns:1fr}
  .pk .pt{flex-direction:column;gap:4px}
  .pk .pt span{text-align:left}
  .modell3d .m3-flaeche{aspect-ratio:4/3.4;max-height:none}
  .cgrid{grid-template-columns:1fr;row-gap:48px}
  .ptitle .head{grid-column:1 / -1}
  .block{grid-template-columns:1fr}
  .block>*,.block .faq>*{grid-column:1 / -1!important}
  .block .faq{display:block}
  .block .faq .fr{margin-top:24px}
  .filmkarte{order:2}.filmblock .ftx{order:1}
  .pfuss{flex-direction:column;align-items:flex-start}
  .band{grid-template-columns:1fr;row-gap:24px}
}
.abschnitt .tour{aspect-ratio:auto;max-height:none;min-height:0;height:min(78svh,calc((100vw - 2 * var(--m)) * .5625));background:var(--dg)}
@media (max-width:899px){.abschnitt .tour{height:auto;aspect-ratio:4/5}}
.zeile{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;right:calc(var(--m) + var(--k) * var(--m))}
@media (max-width:899px){
  .zeile{font-size:var(--f3);line-height:var(--l3)}
  .block .duo,.block .trio,.block .quad{margin-left:0!important;width:100%!important}
}

/* =====================================================================
   Runde 15 (17.10.2026): Weiß und Schwarz statt Beige, Farbbilder im gleichen Passepartout,
   Host Grotesk statt Geist, schwarze Flächen für 3D und Rundgang, deutliche Fortschrittslinie.
   Vorbilder laut Timo: Chipperfield, MIR, Snøhetta, Nightnurse.
   ===================================================================== */
:root{
  --ground:#FFFFFF;--paper:#FFFFFF;--text:#111111;--meta:#6B6B6B;--line:#E2E2E2;--ac:#C56A2D;--act:#A4551F;
  --dg:#0B0B0B;--dt:#F2F2F2;--dm:#9B9B9B;--dl:#2B2B2B;--dac:#E08A4F;--sand:#F3F3F1;--pass:#F3F3F1;
  /* Hausschrift. Mit Lizenz für PP Neue Montreal: Dateien nach quelle/fonts_host/, @font-face in fonts.css, Namen hier vorn eintragen. */
  --sans:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;--mono:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --f5:clamp(40px,5.4vw,84px);
}
body{font-feature-settings:"ss01" 0}
h1,h2,h3,.h2,.stmt,.zeile,.lead{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.num,.n.meta,.p.meta,.fd.meta{font-variant-numeric:tabular-nums;letter-spacing:0}
.paper{background:var(--ground)}

/* Linien und Unterstreichungen schwarz, Terrakotta gehört allein der Fortschrittslinie */
.open,.gr ul a,.mail,.prose a{box-shadow:inset 0 -1px 0 currentColor}
.open:hover,.gr ul a:hover,.gr h3 a:hover,.pk:hover .pt b,.mail:hover,.prose a:hover{color:var(--meta)}
.nav a{background-image:linear-gradient(currentColor,currentColor)}
.cta:hover{background:#3A3A3A}
.tog:hover,.tog[aria-pressed=true]{color:var(--text);box-shadow:inset 0 -1px 0 var(--text)}
.dark .tog:hover,.dark .tog[aria-pressed=true]{color:var(--dt);box-shadow:inset 0 -1px 0 var(--dt)}
.steps .n,.filmblock .ftx .fl{color:var(--meta)}
::selection{background:var(--text);color:#fff}
.fortschritt rect{stroke:var(--ac);stroke-width:4}

/* Passepartout: jedes Bild im selben hellen Feld, mit gleichem Rand, ganz zu sehen */
.frame.pass{background:var(--pass)}
.frame.pass img.pb{position:absolute;inset:auto;object-fit:cover;background-size:cover;background-position:center}
.dark .frame.pass{background:#161616}
.frame.light{background:var(--pass)}
.frame.light.contain img{padding:5%}

/* Raster: zwei Spalten, ein Format */
.gruppen,.pkacheln{gap:clamp(64px,8vw,120px) clamp(20px,2.4vw,40px)}
.gr h3,.pk .pt b{font-size:var(--f3);line-height:var(--l3)}
.pk .pt{margin-top:16px}

/* Schwarze Flächen: 3D-Modell und Rundgang */
.dark{background:var(--dg);color:var(--dt)}
.dark .h2{color:var(--dt)}
.dark .lead,#ansatz.dark .lead{color:var(--dm)}
.dark .open{box-shadow:inset 0 -1px 0 currentColor}
.dark .meta,.dark .m3-info,.dark .m3-s,.dark .tournote{color:var(--dm)}
.dark .m3-leiste{border-top-color:var(--dl)}
.dark .m3-sonne{background:linear-gradient(var(--dt),var(--dt)) center/100% 1px no-repeat}
.dark .m3-sonne::-webkit-slider-thumb{background:var(--dt)}
.dark .m3-sonne::-moz-range-thumb{background:var(--dt)}
.modell3d .m3-flaeche{background:var(--dg);aspect-ratio:16/9;max-height:76svh}
.abschnitt .tour{background:#000}
#ansatz .lead{margin-top:0;margin-bottom:0}

/* Kopf: die Zeile ist zuerst dunkel auf der Linienzeichnung und wird hell, wenn das Bild da ist */
.zeile{opacity:1;transform:none;color:color-mix(in srgb,var(--paper) calc(var(--s) * 100%),var(--text));max-width:20ch;font-size:var(--f5);line-height:var(--l5);letter-spacing:-.025em}
.zeile span{max-width:48ch;font-size:var(--f2);line-height:var(--l2)}
.bildrahmen{background:#fff}

/* Kopfleiste klein und ruhig */
.marke .logo{width:26px;height:26px}
.kopf .nav{font-size:var(--f1)}

@media (max-width:899px){
  .zeile{font-size:var(--f4);line-height:var(--l4)}
  .h2 br,.zeile br{display:none}
  .ptitle h1{font-size:var(--f4);line-height:var(--l4);-webkit-hyphens:manual;hyphens:manual}
  .gruppen,.pkacheln{gap:64px}
}
.faq summary::after{color:var(--text)}
@media (max-width:899px){.kopfzeile{flex-direction:column;align-items:flex-start;gap:16px}}

/* =====================================================================
   Runde 16 (17.10.2026): Anmerkungen von Alois und Marlon.
   Kein Rahmen im Rahmen, Fortschritt nur oben, keine schwarzen Flächen,
   Kontaktformular in eigener Fläche, Team auf der Studio-Seite.
   ===================================================================== */
.frame.pass{background:var(--pass)}
.frame.pass img.pb{inset:0;left:0;top:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.fortschritt{position:fixed;left:0;right:0;top:var(--kopf);width:auto;height:2px;z-index:61;pointer-events:none;overflow:hidden}
.fortschritt i{display:block;height:100%;background:var(--ac);transform:scaleX(0);transform-origin:0 50%}
.modell3d .m3-flaeche{background:var(--pass)}
/* Erklärvideo: Überschrift und Satz wie jeder Block, das Video darunter über die ganze Breite */
.filmblock{align-items:start}
.filmblock .filmkarte{grid-column:1 / -1;border:0}
.filmkarte .pl{width:96px;height:96px;margin:-48px 0 0 -48px}
/* Zusammenarbeit: Satz links, vier Punkte rechts */
.dauer2{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,4vw,72px);align-items:start}
.dauer2 .nutz.dauer{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:auto}
.dauer2 .nutz.dauer div{border-right:0;border-bottom:1px solid var(--line);padding:20px 24px 20px 0}
.dauer2 .nutz.dauer div+div{padding-left:0}
.dauer2 .nutz.dauer div:nth-child(even){padding-left:24px;border-left:1px solid var(--line)}
/* Kontakt: Formular in eigener Fläche, links und rechts dieselben Größen */
.cgrid .cb.feld{background:var(--pass);padding:clamp(24px,3vw,44px)}
.cgrid dl{font-size:var(--f2);line-height:var(--l2)}
.form label span,.cgrid dt{font-size:var(--f1);line-height:var(--l1)}
.form input,.form select,.form textarea{font-size:var(--f2)}
/* Team */
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.person{border-top:1px solid var(--text);padding-top:20px}
.person .ini{display:grid;place-items:center;width:100%;aspect-ratio:4/5;background:var(--pass);color:var(--meta);font-size:var(--f4);margin-bottom:22px}
.person h3{font-size:var(--f3);line-height:var(--l3);font-weight:400}
.person .rolle{color:var(--meta);margin:4px 0 14px}
.person p{font-size:var(--f2);line-height:var(--l2)}
.person .fuer{margin-top:14px;font-size:var(--f1);line-height:var(--l1);color:var(--meta)}
@media (max-width:899px){
  .dauer2,.dauer2 .nutz.dauer,.team{grid-template-columns:1fr}
  .dauer2 .nutz.dauer div:nth-child(even){padding-left:0;border-left:0}
}

/* Jedes Bild passt ganz auf den Bildschirm (Marlon, 28.10.2026): zu hohe Bilder werden schmaler, nicht beschnitten.
   Ausnahme Titelbild der Projektseiten: bleibt breit und wird oben und unten etwas beschnitten. */
@media (min-width:900px){
  :root{--bildh:calc(100svh - var(--kopf) - 120px)}
  .block .ph{max-width:calc(var(--bildh) * (var(--ar,4/3)))}
  .block .duo,.block .trio{display:flex;gap:16px;align-items:flex-start}
  .block .duo .ph,.block .trio .ph{flex:1 1 0;min-width:0}
  .filmblock .filmkarte{max-width:calc(var(--bildh) * 16 / 9)}
  .pcover .frame{aspect-ratio:auto;height:min(var(--bildh),calc((100vw - 2 * var(--m)) / (var(--ar,4/3))))}
}
/* Beispiel zum Anklicken: großer Knopf im Text und auf dem Bild */
.prose a.cta,.prose a.cta:hover{box-shadow:none;color:var(--ground)}
.prose a.cta.gross{font-size:var(--f2);line-height:var(--l2);padding:16px 26px;margin-top:8px}
.bildlink{position:absolute;left:0;right:0;top:0;aspect-ratio:var(--ar,4/3);display:grid;place-items:center;background:rgba(20,16,12,0);transition:background .3s var(--ease)}
.bildlink .cta{background:#fff;color:var(--text);font-size:var(--f2);line-height:var(--l2);padding:16px 28px}
.bildlink:hover{background:rgba(20,16,12,.18)}
.bildlink:hover .cta{background:var(--ac);color:#fff}

/* Bilder und Filme stehen mittig, links und rechts bleibt Luft (Marlon, 28.10.2026) */
@media (min-width:900px){
  .block .ph{justify-self:center;margin-left:auto;margin-right:auto}
  .block .duo,.block .trio{justify-content:center}
  .filmblock .filmkarte{justify-self:center;width:100%}
}
/* Zehn Leistungen auf einen Blick */
.zehn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:clamp(24px,4vw,72px);border-bottom:1px solid var(--line)}
.zehn li{border-top:1px solid var(--line)}
.zehn a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:20px 0}
.zehn.mitpreis a{grid-template-columns:44px minmax(0,1fr) auto auto}
.zehn .zt b{display:block;font-weight:400;font-size:var(--f3);line-height:var(--l3);letter-spacing:-.01em;transition:color .2s var(--ease)}
.zehn .zt span{display:block;margin-top:4px;color:var(--meta);font-size:var(--f1);line-height:var(--l1)}
.zehn .zp{white-space:nowrap}
.zehn .pf{transition:transform .25s var(--ease),color .2s var(--ease)}
.zehn a:hover b,.zehn a:hover .pf{color:var(--ac)}
.zehn a:hover .pf{transform:translateX(4px)}
@media (max-width:899px){
  .zehn{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .zehn a,.zehn.mitpreis a{grid-template-columns:36px minmax(0,1fr) auto;padding:16px 0}
  .zehn.mitpreis .zp{grid-column:2;grid-row:2}
}

/* Sprachumschalter DE/EN */
.nav .sprache{margin-left:8px;padding-left:16px;border-left:1px solid currentColor;opacity:.7}
.nav .sprache:hover{opacity:1}
.menu .sprache{opacity:.7}
#leistungen .lead{margin:0 0 28px}

/* Startbild Uferhaus (16:9, Haus links der Mitte): am Handy bleibt das Haus im Ausschnitt */
.bildrahmen .still.ufer{object-position:45% 50%}
/* Heller Himmel im Uferhaus-Bild: oben etwas dunkler, Menü mit leichtem Schatten, damit es lesbar bleibt */
.bildrahmen:has(.still.ufer) .schleier{background:linear-gradient(to top,rgba(46,49,36,.62) 0,rgba(46,49,36,0) 46%),linear-gradient(rgba(28,30,24,.58) 0,rgba(28,30,24,0) 28%)}
.kopf.ueber.hell .nav a,.kopf.ueber.hell .marke{text-shadow:0 1px 10px rgba(0,0,0,.35)}

/* Zehnerliste ruhiger: Pfeil erst beim Darüberfahren (Marlon, 28.10.2026); am Handy bleibt er als Hinweis */
@media (hover:hover){.zehn .pf{opacity:0}.zehn a:hover .pf{opacity:1}}
/* 29.10.2026 (Marlon): Bilder über die ganze Zeile mittig, nicht nur innerhalb der rechten Spalten */
@media (min-width:900px){
  .block>.ph,.block>.duo,.block>.trio{grid-column:1 / -1}
}
/* Beispiel-Knopf leichter: Umriss statt schwarzer Fläche, beim Darüberfahren gefüllt */
.prose a.cta.gross{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--text);font-size:var(--f1);line-height:var(--l1);padding:12px 20px;margin-top:4px}
.prose a.cta.gross:hover{background:var(--text);color:var(--ground)}
/* Hinweis auf dem Bild klein und unten links, leicht durchscheinend */
.bildlink{place-items:end start;padding:clamp(14px,1.6vw,24px)}
.bildlink .cta{font-size:var(--f1);line-height:var(--l1);padding:9px 14px;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--text)}
.bildlink:hover{background:rgba(20,16,12,.08)}
.bildlink:hover .cta{background:var(--text);color:var(--ground)}

/* Intro als Ebenen (29.10.2026): Zeichnung und Planungsmodell über dem Foto, der Wischer bewegt nur transform */
.stufen{position:absolute;inset:0;pointer-events:none}
.hero.glatt:not(.offen) .still{visibility:hidden}
.stufe{position:absolute;inset:0;overflow:hidden;will-change:transform}
.stufe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 50%;will-change:transform}
.stufe::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ac);z-index:1;opacity:0}
.stufe.wischt::before{opacity:1}
/* Bis das Intro bereit ist, zeigt der Kopf die Zeichnung als Grund, nicht das Foto */
.hero.glatt .bildrahmen{background:#F6F3EE}
.hero.glatt .still{will-change:transform}
/* Rückzug in den Rahmen beim Scrollen: Ausschnitt statt neuer Größe, das Bild wird nicht neu gerechnet */
.hero.glatt .bildrahmen{inset:0;clip-path:inset(calc(var(--k) * (var(--kopf) + 4px)) calc(var(--k) * var(--m)) calc(var(--k) * var(--m)) calc(var(--k) * var(--m)))}
.hero.glatt .zeile{right:var(--m);translate:calc(var(--k) * var(--m)) calc(var(--k) * var(--m) * -1)}
/* =====================================================================
   Runde 17 (18.10.2026, Alois): Feinschliff Kopf.
   Unterzeile in zwei festen Zeilen statt zufälligem Umbruch; am Handy kein Umbruchsprung beim Scrollen,
   Logo der Kopfleiste blendet weich ein (am Handy fliegen die Formen nicht mehr quer durchs Bild, siehe site.js).
   ===================================================================== */
.zeile span i{display:block;font-style:normal}
.kopf.ueber .marke .logo{transition:opacity .4s var(--ease)}
@media (max-width:899px){
  .zeile{right:calc(var(--m) * 2)}
}
/* Runde 17: Serienprojekte, Bilder direkt unter dem Titel (wie das Titelbild beim Tennenhaus), Text darunter */
.block.zuerst{border-top:0;padding-top:0}
.block.zuerst .prose{margin-top:48px}

/* =====================================================================
   Runde 17: Schrift dezenter (Alois: Titel zu groß, die Bilder sollen tragen).
   Gleiche fünf Stufen, kleinere Werte, angelehnt an aloisdurand.com (Seitentitel max. 52 px, Abschnitt 36 px).
   vorher: f3 22–28, f4 30–48, f5 40–84 px
   ===================================================================== */
:root{
  --f3:clamp(19px,1.45vw,22px);--l3:1.3;
  --f4:clamp(25px,2.4vw,36px);--l4:1.15;
  --f5:clamp(34px,3.7vw,54px);--l5:1.05;
}
.gr h3,.pk .pt b,.person h3{font-weight:400}
.ptitle .lead{max-width:42ch}
/* Runde 17: Titel auf derselben Achse wie der Inhalt. Seit Runde 14 stehen alle Abschnitte bündig links,
   nur der Seitentitel war noch auf Spalte 3 eingerückt. Zurück-Verweis jetzt klein über dem Titel. */
@media (min-width:900px){
  .ptitle{padding-top:72px;row-gap:28px}
  .ptitle .back{grid-column:1 / -1;padding-top:0}
  .ptitle .head{grid-column:1 / span 8}
  .ptitle dl{grid-column:10 / span 3;padding-top:10px}
}
/* Runde 17: Porträts im Team, 4:5, darunter Linie und Name */
.person{border-top:0;padding-top:0}
.person .pfoto{margin:0 0 20px;aspect-ratio:4/5;overflow:hidden;background:var(--pass)}
.person .pfoto img{display:block;width:100%;height:100%;object-fit:cover}
.person h3{border-top:1px solid var(--text);padding-top:16px}
/* Runde 17: Fußzeile am Handy kürzer. Die zehn Leistungen und die Ortsseiten bleiben im HTML (Verweise für Suchmaschinen),
   am Handy stehen nur Kontakt, Studio (mit „Leistungen“) und Rechtliches nebeneinander. */
.foot .nurhandy{display:none}
.foot .recht{margin-top:22px}
@media (max-width:899px){
  .foot{grid-template-columns:1fr 1fr;row-gap:32px;padding-top:56px}
  .foot>*{grid-column:1 / -1!important}
  .foot .f2,.foot .ort{display:none}
  .foot .nurhandy{display:list-item}
  .foot .f3{grid-column:1 / 2!important}
  .foot .f4{grid-column:2 / 3!important}
  .foot .recht{margin-top:0}
}

/* =====================================================================
   Runde 17, Anmerkungen von Marlon (20.10.2026)
   ===================================================================== */
/* Keine Linse mehr: das Modell liegt verdeckt unter dem Bild, ein deutlicher Schalter auf dem Bild blendet es ein */
.xr .frame .modw{-webkit-mask-image:none;mask-image:none;opacity:0;transition:opacity .5s var(--ease)}
.xr.intro .frame .modw,.xr.showmod .frame .modw{opacity:1}
.xr .frame .modtog{position:absolute;left:16px;bottom:16px;z-index:3;padding:11px 18px;background:#fff;color:var(--text);
  font-family:var(--sans);font-size:var(--f1);line-height:1;letter-spacing:.01em;box-shadow:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.xr .frame .modtog:hover{background:var(--text);color:#fff;box-shadow:none}
.xr .frame .modtog[aria-pressed=true]{background:var(--text);color:#fff;box-shadow:none}
.xr .frame .modtog:focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media (max-width:899px){.xr .frame .modtog{left:10px;bottom:10px;padding:9px 14px}}
/* Zusammenführung 31.10.2026: die Bildhöhe regelt Marlons --bildh oben (Titelbild bleibt breit), Alois' eigene Regel entfällt. */