:root{
   
  --paper:#FFFFFF;       
  --ink:#0E0E0E;         
  --mid:#4A4A4A;         
  --soft:#6F6F6F;        

   
  --max:2400px;          
  --pad:14px;            
  --nav:64px;            

   
  --bild:1.35;           

   
  --t-titel:clamp(1.625rem, 0.7429rem + 3.619vw, 4rem);         
  --t-projekt:clamp(1.5rem, 0.8036rem + 2.8571vw, 3.375rem);    
  --t-lead:clamp(1rem, 0.8839rem + 0.4762vw, 1.3125rem);        
  --t-zahl:clamp(1.5rem, 1.0357rem + 1.9048vw, 2.75rem);        
  --t-vorsatz:clamp(1.0625rem, 0.8536rem + 0.8571vw, 1.625rem); 

   
  --t-text:1.03125rem;   
  --t-marke:0.96875rem;  
  --t-menu:0.9375rem;    

   

   
  --luft-oben:68px;      

   

   
  --auslastung-format:4.2;         
   
  --auslastung-strich:#E0E0DC;     
  --auslastung-grundlast:#D6D6D2;  
  --auslastung-raster:#ECECE9;     
  --auslastung-frei:#E8E8E5;       
   
  --auslastung-linie:0.85;         
  --auslastung-fein:0.75;          
  --auslastung-schraffur:12;       
}
@media(min-width:901px){:root{--pad:20px;--nav:78px}}
 
@media(max-width:640px){:root{
  --auslastung-format:2;
  --auslastung-linie:0.7;
  --auslastung-fein:0.6;
  --auslastung-schraffur:14;
}}

 

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:100%;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
 
html{overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
canvas{display:block}
::selection{background:var(--ink);color:#fff}
 
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
 
.ohne-js{display:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.02}
 
.lbl{font-size:0.78125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);font-weight:500;margin:0;display:inline}
p{margin:0 0 1.05em}

 
nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav);z-index:80;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--pad);max-width:var(--max);margin:0 auto;
  pointer-events:none;
}
nav > *{pointer-events:auto}
.mark{font-size:var(--t-marke);font-weight:600;letter-spacing:-.02em}
.menu{display:flex;gap:30px;align-items:center}
.menu a{font-size:var(--t-menu);font-weight:500;color:var(--soft);transition:color .25s;position:relative}
.menu a:hover{color:var(--ink)}
.menu a.on{color:var(--ink)}
.menu a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--ink);
  animation:grow .45s cubic-bezier(.19,1,.22,1)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 
@media(max-width:640px){:root{--nav:56px;--t-marke:0.84375rem;--t-menu:0.84375rem}
  .menu{gap:20px}}

 
 
main{min-height:100vh;min-height:100dvh}
.page{display:none}
.page.on{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  animation:pin .55s cubic-bezier(.19,1,.22,1)}
 
#home.page.on{display:block;min-height:0}
 
.page.on > .wrap,.page.on > #projekt-in{flex:1;width:100%;display:flex;flex-direction:column}
 
#projekte.page.on > .wrap{flex:0 0 auto;width:100%;display:block}
.page.on > .wrap > footer{margin-top:auto}
@keyframes pin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

 
#home{height:100vh;height:100dvh;position:relative;overflow:hidden}
 
#field{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
#field:active{cursor:grabbing}
#field canvas{display:block;width:100%;height:100%}
 
.projektzeile{position:absolute;z-index:2;left:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom,0px));
  font-size:0.8125rem;line-height:1.4;color:var(--soft);text-decoration:none;max-width:calc(100% - 2 * var(--pad))}
.projektzeile b{color:var(--ink);font-weight:500}
.projektzeile span{display:inline-block;color:var(--ink);transition:transform .25s cubic-bezier(.19,1,.22,1)}
.projektzeile:hover{color:var(--ink)}
.projektzeile:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.projektzeile:hover span{transform:translateX(4px)}
 
.pgtop{padding:calc(var(--nav) + var(--luft-oben)) 0 0}
.pgtop h2{font-size:var(--t-titel);letter-spacing:-.04em;max-width:16ch;margin:14px 0 0}
.pgtop .intro{max-width:46ch;color:var(--mid);font-size:var(--t-text);line-height:1.58;margin-top:22px}

 
.ph{background:#F2F2F0;display:flex;align-items:center;justify-content:center;
  font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:#B6B6B2}

 
.ovlist{flex:1;padding:calc(var(--nav) + 42px) var(--pad) 0;position:relative;z-index:5}
.ovlist .list{width:max-content;max-width:min(44vw,560px)}
 
.ovlist .row{display:block;padding:3px 0;font-size:0.9375rem;letter-spacing:-.005em;
  font-weight:500;transition:opacity .3s}
 
.ovlist .ut{font-weight:400;margin-left:.5em}
.ovlist .jr{color:var(--soft);margin-left:.7em;font-variant-numeric:tabular-nums}
.ovlist .list:hover .row{opacity:.4}
.ovlist .list:hover .row:hover{opacity:1}
 
@media(max-width:1100px),(hover:none){.ovlist .list{max-width:100%}.ovlist .row{padding:6px 0}}

 
#ovpv{position:fixed;right:0;top:var(--nav);bottom:0;width:50vw;z-index:3;
  opacity:0;pointer-events:none;transition:opacity .45s cubic-bezier(.19,1,.22,1)}
#ovpv.on{opacity:1}
#ovpv .fr{height:100%;position:relative;overflow:hidden;background:#F2F2F0}
 
#ovpv .fr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s}
#ovpv .fr img.on{opacity:1}
 
#ovpv .fr img[data-id="lichtblick"]{object-position:22% center}
#ovpv .fr .ph{position:absolute;inset:0;opacity:0;transition:opacity .45s}
#ovpv .fr .ph.on{opacity:1}
 
@media(max-width:1100px),(hover:none){#ovpv{display:none}}

 
:root{
  --gutter:28px;
  --blatt-max:470px;    
  --gross:1080px;       
  --foto-max:900px;     
  --dia-max:560px;      
  --dia-gross:760px;    
  --reihe-gap:150px;    
  --reihe-vier:26px;    
  --reihe-fuenf:26px;   
  --reihe-drei:70px;    
  --satz-luft:30px;     
  --satz-gap:4px;       
  --luft:clamp(46px,5vw,84px);
  --luft-akt:clamp(96px,11vw,190px);   
}
 
.g{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter)}
 
.blk{padding-top:var(--luft)}
 
.blk.akt{padding-top:var(--luft-akt)}

.pkat{font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  font-weight:500;display:block;margin-bottom:14px}
.ptitel{font-size:var(--t-projekt);font-weight:600;letter-spacing:-.042em;line-height:1;margin:0}
 
.put{font-size:var(--t-vorsatz);font-weight:400;letter-spacing:-.02em;
  line-height:1.25;color:var(--mid);margin:14px 0 0}
.plead{font-size:var(--t-lead);font-weight:500;letter-spacing:-.025em;line-height:1.34;margin:0}
.ptxt{color:var(--mid);font-size:0.96875rem;line-height:1.66}
.ptxt p{margin:0 0 1.05em}
.kredit div{padding:6px 0;font-size:0.875rem;line-height:1.45}
.kredit .k{font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  font-weight:500;margin-bottom:2px}
.gt,.pl-h{font-size:0.71875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
  font-weight:500;margin:0 0 14px;display:block}
.bnote{font-size:0.8125rem;color:var(--soft);line-height:1.55}
.zahl{font-size:var(--t-zahl);font-weight:600;letter-spacing:-.04em;line-height:1}
ul.pl{list-style:none;padding:0;margin:0}
ul.pl li{padding:8px 0}
ul.pl a{font-size:0.9375rem}
ul.pl a:hover{opacity:.5}
ul.pl span{display:block;color:var(--soft);font-size:0.78125rem;margin-top:2px}

.blatt img,.blatt .ph{width:100%;max-width:var(--blatt-max)}
.fotoB img,.fotoB .ph{width:100%;max-width:var(--foto-max)}
.dia img,.dia .ph{width:100%;max-width:var(--dia-max)}
figure{margin:0}
 
figure img{display:block}

 
 
.KOPF{max-width:var(--gross);grid-template-rows:auto auto 1fr}
.KOPF .a{grid-column:1/8;grid-row:1}
.KOPF .b{grid-column:1/8;grid-row:2}
 
.KOPF .d{grid-column:1/8;grid-row:3}
.KOPF .c{grid-column:9/13;grid-row:2/4}
 
@media(min-width:901px){ .KOPF .d{max-width:54ch} }
 
.F1 .a{grid-column:1/13}
 
.F2{max-width:var(--gross)}
.F2 .a{grid-column:1/7}     .F2 .b{grid-column:7/13}
.F3 .a{grid-column:1/10}    .F3 .b{grid-column:10/13;align-self:end}
 
.F5{grid-template-columns:repeat(3,1fr)}
.F5 > *{grid-column:auto}
.F5 img,.F5 .ph{width:100%;max-width:none}
.Z1 .a{grid-column:1/13}
 
.Z1.schmal img,.Z1.schmal .ph{max-width:calc((var(--gross) - var(--gutter))/2)}
.F1.schmal img,.F1.schmal .ph{max-width:calc((var(--gross) - var(--gutter))/2)}
.Z1 + .Z1{padding-top:clamp(16px,1.7vw,30px)}   
.F1 img,.F1 .ph,.F3 .a img,.F3 .a .ph,.Z1 img,.Z1 .ph{max-width:var(--gross)}
.Z2 .a{grid-column:1/5}     .Z2 .b{grid-column:5/9}
 
.Z5{max-width:var(--gross);grid-template-columns:repeat(2,1fr)}
.Z5 > *{grid-column:auto}
.Z5 img,.Z5 .ph{max-width:none}
 
.Z6 .a{grid-column:1/13}
.Z6 img,.Z6 .ph{width:100%;max-width:none}
 
.Z6.offen{max-width:none;margin-right:calc(var(--pad) * -1)}
.Z6.offen img,.Z6.offen .ph{width:100%;max-width:none}
 
.Z6 picture{display:block}
@media(max-width:640px){.Z6.offen.stufen{margin-right:0}}
 
.Z6 + .Z6{padding-top:clamp(16px,1.7vw,30px)}
 
.B1{max-width:var(--gross)}
.B1 .a{grid-column:1/13;position:relative}
 
.B1 video{position:absolute;top:0;left:0;width:1px;height:1px;
  opacity:0;pointer-events:none;z-index:-1}
.B1 canvas{width:100%;height:auto;display:block;background:var(--paper)}
.B1.voll{max-width:none}
.B1 + .B1{padding-top:clamp(16px,1.7vw,30px)}

 
.DL1{max-width:var(--gross)}
.DL1 .a{grid-column:1/13}
.DL1 canvas{width:100%;height:auto;display:block;cursor:pointer;background:var(--paper)}

 
.KA1{max-width:var(--gross)}
.KA1 .a{grid-column:1/13}
.KA1 canvas{width:100%;display:block;background:var(--paper)}

 
 
.K3{max-width:none;
    margin-left:calc(var(--pad) * -1);
    margin-right:calc(var(--pad) * -1)}
.K3 .a{grid-column:1/13}
.K3 [data-kassetten-3d]{--dim:var(--soft); --bg:var(--paper);
                        touch-action:pan-y}

 
.ka-huelle{position:relative}
.ka-huelle > .kassette{position:sticky;top:0;
   
  display:flex;align-items:center;min-height:100vh;min-height:100svh}
.ka-huelle > .kassette canvas{margin:0 auto}

 
.ka-regler{width:100%;margin:10px 0 0;accent-color:var(--mid);cursor:ew-resize}

 
.TR1{padding-top:calc(var(--luft) - min(var(--gross), 100%) * 0.0289989);
     padding-bottom:6px}
.TR1 .a{grid-column:1/13}
 
.TR1 [data-traeger]{--tra-strich:.6;
          width:min(calc(100% + min(var(--gross), 100%) * 0.0238249), 1627px);
          margin-left:calc(min(var(--gross), 100%) * -0.0238249)}

 
.Z8{grid-template-columns:repeat(2,1fr)}
.Z8 > *{grid-column:auto}
.Z8 img,.Z8 .ph{width:100%;max-width:none}
 
.F4{grid-template-columns:var(--sa,1fr) var(--sb,1fr)}
.F4 > *{grid-column:auto}
.F4 img,.F4 .ph{width:100%;max-width:none}
 
.Z7 .reihe{display:grid;grid-template-columns:1530fr 1134fr;
  gap:var(--gutter);align-items:start}
.Z7 .mitte{width:calc((100% - var(--gutter)) * 0.57432)}
.Z7 > * + *{margin-top:clamp(16px,1.7vw,30px)}
.Z7 figure img,.Z7 figure .ph{width:100%;max-width:none;display:block}
 
 
 
.Z9{grid-template-columns:var(--sa,1fr) var(--sb,1fr) var(--sc,1fr);gap:var(--satz-gap)}
 
.Z9.mitte{align-items:center;gap:var(--satz-luft)}
.Z9 > *{grid-column:auto}
.Z9 img,.Z9 .ph{width:100%;max-width:none}
 
.karte img,.karte .ph{width:auto;max-width:100%;max-height:74vh}
.Z3 .a{grid-column:1/5}     .Z3 .b{grid-column:5/9}    .Z3 .c{grid-column:9/13}
.Z4 .a{grid-column:1/5}     .Z4 .b{grid-column:5/9}    .Z4 .c{grid-column:10/13;align-self:end}
 
.D1{max-width:var(--gross)}
.D1 .a{grid-column:1/13}
.D1 img,.D1 .ph{max-width:var(--dia-gross);display:block;margin:0 auto}
.D2 .a{grid-column:1/6}     .D2 .b{grid-column:7/12}
 
.D3,.D4{max-width:var(--gross);gap:var(--reihe-gap)}
.D3{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--reihe-drei)}
 
.D4{grid-template-columns:repeat(4,1fr);gap:var(--reihe-vier)}
.D4 img,.D4 .ph{width:100%;max-width:none}
 
.D5{max-width:var(--gross);grid-template-columns:repeat(5,1fr);gap:var(--reihe-fuenf)}
.D3 > *,.D4 > *,.D5 > *{grid-column:auto}
.D5 img,.D5 .ph{width:100%;max-width:none}
.M1 .a{grid-column:1/7}     .M1 .b{grid-column:8/13;align-self:end}
.T1 .a{grid-column:1/6}
.T2 .a{grid-column:1/13}
.T3 .a{grid-column:1/4}     .T3 .b{grid-column:4/9}
.S1 .a{grid-column:1/5}     .S1 .b{grid-column:6/11}
.W1 .a{grid-column:1/13;max-width:860px}     
 
.P1{max-width:var(--gross)}
.P1 .a{grid-column:1/13}
 
.wolke{position:relative;width:100%;aspect-ratio:4/5;cursor:grab}
.wolke.zieht{cursor:grabbing}
 
.wolke canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.wolke .laden{position:absolute;inset:0;display:grid;place-items:center;
  font-size:0.8125rem;color:var(--soft)}
 
 
.PAN1{max-width:var(--gross)}
.PAN1 .a{grid-column:1/13}
.rundbild.geladen{cursor:grab}
.rundbild.geladen:active{cursor:grabbing}
 
@media(orientation:landscape){
  .PAN1 .rundbild{aspect-ratio:3/2;max-height:80vh;max-height:80svh}
}
 
.rundbild-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;
  opacity:0;transition:opacity .3s ease}
.rundbild.bereit .rundbild-canvas{opacity:1}
 
.rundbild-hinweis{position:absolute;z-index:1;pointer-events:none;transition:opacity .45s ease}
.rundbild-hinweis.weg{opacity:0}
.rundbild-zeichen{left:50%;top:50%;transform:translate(-50%,-50%);width:4rem;height:4rem;
  border-radius:50%;background:rgba(14,14,14,.55);color:var(--paper);display:flex;
  align-items:center;justify-content:center}
.rundbild-zeichen svg{width:2.3rem;height:2.3rem;display:block}
 
.splat{position:relative;display:block;width:100%;aspect-ratio:4/5;padding:0;
  border:0;background:var(--auslastung-raster) center/cover no-repeat;
  cursor:pointer;font:inherit;color:inherit;text-align:left}
.splat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block}
.splat.geladen{cursor:grab}
.splat:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
 
.G1{max-width:var(--gross)}
.G1 .a{grid-column:1/13}
.dgm{position:relative;width:100%}
.dgm canvas{display:block;width:100%;aspect-ratio:var(--auslastung-format);
  touch-action:pan-y;cursor:crosshair}
.dgm .laden{position:absolute;left:0;right:0;top:44%;text-align:center;
  font-size:0.8125rem;color:var(--soft)}
 
 
.PF1{max-width:var(--gross)}
.PF1 .a{grid-column:1/13}
.fassade{position:relative;width:100%}
.fassade canvas{display:block;width:100%;aspect-ratio:4/3;
  touch-action:pan-y;cursor:crosshair}
 

 

 
@media(max-width:900px){
   
  .g:not(.KOPF):not(.D3):not(.D4):not(.F2):not(.F4):not(.Z2):not(.Z4):not(.Z5):not(.Z8):not(.D2){
    grid-template-columns:minmax(0,1fr);gap:20px}
  .g:not(.KOPF):not(.D3):not(.D4):not(.F2):not(.F4):not(.Z2):not(.Z4):not(.Z5):not(.Z8):not(.D2) > *{
    grid-column:1/-1 !important}

   
  .g.F2,.g.Z2,.g.Z4,.g.Z5,.g.Z8,.g.D2{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  .g.F2 > *,.g.F4 > *,.g.Z2 > *,.g.Z5 > *,.g.Z8 > *,.g.D2 > *,
  .g.Z4 > .a,.g.Z4 > .b,
  .g.D3 > *,.g.D4 > *{grid-column:auto !important}
   
  .g.Z4 > .c{grid-column:1/-1 !important}

   

   
  .g.T1 > *{max-width:62ch}

   
  .Z7 .reihe{grid-template-columns:minmax(0,1fr);gap:0}
  .Z7 .reihe > * + *{margin-top:clamp(16px,1.7vw,30px)}
  .Z7 .reihe > *:last-child{width:74.118%}
  .Z7 .mitte{width:100%}

   
  :root{--reihe-gap:clamp(12px,4vw,90px);
        --reihe-drei:clamp(12px,3vw,70px);
        --reihe-fuenf:clamp(8px,2vw,44px)}
}

 
@media(max-width:640px){
   

   
  .g.F2.gross{grid-template-columns:minmax(0,1fr)}
  .g.F2.gross > *{grid-column:1/-1 !important}
   
  .g.Z5.gross{grid-template-columns:minmax(0,1fr)}
  .g.Z5.gross > *{grid-column:1/-1 !important}

   
  .D4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--reihe-vier)}
}

 
.abmain .body p{max-width:56ch;color:var(--mid);font-size:var(--t-text);line-height:1.68}
.abmain .body p.first{color:var(--ink);font-size:var(--t-vorsatz);letter-spacing:-.025em;
  line-height:1.32;max-width:26ch;font-weight:500;margin-bottom:32px}
.stations{padding:84px 0 0;display:grid;grid-template-columns:1fr;gap:34px;max-width:760px}
.st{display:grid;grid-template-columns:96px 1fr;gap:22px}
@media(max-width:640px){.st{grid-template-columns:1fr;gap:5px}}
.st .yr{font-size:0.875rem;color:var(--soft);padding-top:3px}
.st b{font-size:1.0625rem;font-weight:600;letter-spacing:-.02em;display:block}
 
.st b .rl{font-weight:400}
.st .wo{display:block;font-size:0.875rem;color:var(--soft);line-height:1.35}
.st p{margin:6px 0 0;color:var(--mid);font-size:0.96875rem;line-height:1.55;max-width:52ch}
.st .wo + p{margin-top:12px}
.ablayout{display:grid;grid-template-columns:1fr;gap:52px;padding:60px 0 0}
.side{display:flex;flex-direction:column;gap:30px}
.portrait{margin:0;max-width:420px}
.portrait img{width:100%;height:auto;display:block;background:#F1F1F0;filter:contrast(1.03)}
@media(min-width:901px){
  .ablayout{grid-template-columns:minmax(0,1fr) 300px;gap:90px;align-items:start}
  .side{position:sticky;top:calc(var(--nav) + 34px);gap:34px}
  .portrait{max-width:none}
   
  .abmain .body p.first{margin-top:-0.39em}
}
 
@media(max-width:900px){
  .side{order:-1}
  .portrait{max-width:200px}
}
.contact{display:flex;flex-direction:column;gap:22px;align-items:flex-start;align-self:start}
.contact a{font-size:1.125rem;font-weight:500;position:relative;padding-bottom:3px}
.contact a .ln{position:absolute;left:0;bottom:0;height:1.2px;width:100%;background:currentColor;
  transform-origin:right;transform:scaleX(0);transition:transform .45s cubic-bezier(.19,1,.22,1)}
.contact a:hover .ln{transform-origin:left;transform:scaleX(1)}
.contact .k{display:block;font-size:0.78125rem;letter-spacing:.11em;text-transform:uppercase;color:var(--soft);
  font-weight:500;margin-bottom:5px}
.skills{padding:96px 0 0;max-width:860px}
.skgroups{display:grid;grid-template-columns:1fr;gap:28px;margin-top:24px}
@media(min-width:641px){.skgroups{grid-template-columns:repeat(2,1fr);gap:34px 48px}}
.skg .k{display:block;font-size:0.78125rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);font-weight:500;margin-bottom:9px}
.skg .items{display:flex;flex-wrap:wrap;gap:7px 22px}
.skg .items span{font-size:1rem;color:var(--ink);letter-spacing:-.01em}

 
footer{padding:130px 0 calc(var(--pad) + max(0px, (100vw - var(--max)) / 2));
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
@media(max-width:400px){footer{gap:6px 14px}}
 
@media(max-height:800px){
  footer{padding-top:clamp(40px, 9vh, 130px)}
  .ovlist{padding-top:calc(var(--nav) + 22px)}
}
footer .fussl{display:flex;gap:24px}
#projekt-in footer{padding-top:76px}    
footer span,footer a{font-size:0.84375rem;color:var(--soft)}
footer a:hover{color:var(--ink)}


 
#projekt-in figure img{cursor:zoom-in}
 
#gross{position:fixed;inset:0;z-index:200;background:var(--paper);padding:var(--pad);
  display:none;overflow:hidden;touch-action:none;cursor:zoom-out;
  user-select:none;-webkit-user-select:none}
#gross.auf{display:flex}
 
#gross img{margin:auto;flex:0 0 auto;max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;
  transform-origin:0 0;
  cursor:zoom-in;-webkit-user-drag:none}
 
#gross img.bewegt{will-change:transform}
#gross img.gebacken{position:absolute;margin:0;max-width:none;max-height:none}
 
#gross img.weich{transition:transform .24s cubic-bezier(.22,1,.36,1)}
 
#gross.nah img{cursor:grab}
#gross.zieht img{cursor:grabbing}
html.starr{overflow:hidden}

 
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}
  .rv{opacity:1;transform:none}html{scroll-behavior:auto}}

 
.recht{max-width:620px;padding-top:46px}
.recht p{color:var(--mid);font-size:0.96875rem;line-height:1.66;margin:0 0 1.05em}
.recht .adr{color:var(--ink)}
.recht .lbl{display:block;margin:38px 0 12px}
.recht .lbl:first-child{margin-top:0}
.recht a{color:var(--ink);transition:opacity .25s}
.recht a:hover{opacity:.55}
 
.ausweis{padding-top:56px}
.ausweis .lbl{color:var(--ink)}

 
.pgtop > .lbl{color:var(--ink)}

 
.K3 .ka3 canvas{touch-action:pan-y !important}

 
@media (pointer:coarse){
  .mark{position:relative}
  .mark::before,.menu a::before,
  ul.pl a::before,.contact a::before,footer a::before{
    content:"";position:absolute;inset:-13px -8px}
  ul.pl a,.contact a,footer a{position:relative}

   
  .contact{gap:30px}

   
  .ovlist .row{padding:12px 0}
}

 
@media(min-width:641px) and (max-width:900px){
  .g.KOPF{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:28px}
  .g.KOPF > .a{grid-column:1/-1;grid-row:1}
  .g.KOPF > .b{grid-column:1;grid-row:2}
   
  .g.KOPF > .d{grid-column:1;grid-row:3;max-width:none}
  .g.KOPF > .c{grid-column:2;grid-row:2/4}
}

 
@media(max-width:640px){
  .g.KOPF{grid-template-columns:minmax(0,1fr);gap:0}
  .g.KOPF > *{grid-column:1/-1;grid-row:auto}
   
  .g.KOPF > .b{margin-top:8px}
  .g.KOPF > .d{margin-top:30px}
  .g.KOPF > .c{margin-top:44px}
}

 
 
.Z6 > .teile{display:none}
@media(max-width:640px){
  .Z6.geteilt > .a{display:none}
  .Z6.geteilt > .teile{display:block;grid-column:1/-1 !important}
  .teil{position:relative;overflow:hidden;
    width:calc(var(--b) / var(--voll) * 100%);
    aspect-ratio:var(--b) / var(--h)}
  .teil img{position:absolute;top:0;height:auto;max-width:none;
    left:calc(var(--x) / var(--b) * -100%);
    width:calc(var(--q) / var(--b) * 100%)}
   
  .teil + .teil{margin-top:clamp(16px,1.7vw,30px)}
}

 
.D5 > .folge,.D3 > .folge,.Z1 > .folge{display:none}
@media(max-width:640px){
  .D5 > figure,.D3.folge > figure,.Z1.folge > figure{display:none}
   
  .D5 > .folge,.D3.folge > .folge,.Z1.folge > .folge{display:block;grid-column:1/-1 !important;
    width:100%;cursor:pointer}
  .D5 > .folge canvas,.D3.folge > .folge canvas,.Z1.folge > .folge canvas{display:block;width:100%;height:100%}
  .D3.gross{grid-template-columns:minmax(0,1fr);gap:30px}
}


 
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
figure img:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
 
figure img.ohne-ring:focus-visible{outline:none}