@font-face{font-family:"Inter";src:url("Assets/fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--ul:1px;--ul-off:.2em;--gut:4vw;--cw:calc(100vw - 8vw);--fg:#111111;--bg:#fafafa}
@media (max-width:767px){:root{--gut:6vw;--cw:calc(100vw - 12vw)}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font,"Inter",sans-serif);font-weight:300;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:var(--ul);text-underline-offset:var(--ul-off)}
img{display:block;max-width:100%}

/* Header */
.hdr{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:3vw 4vw}
.logo{font-size:calc(16px + 1.2vw);line-height:1.4;letter-spacing:.03em;text-decoration:none;font-weight:400}
.nav{display:flex;gap:2.1vw}
.nav a{font-size:24px;line-height:1.8;padding:.1em 0;text-decoration:none}
.nav a.active,.nav a:hover,.menu a.active,.menu a:hover{text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:var(--ul-off)}
.burger{display:none;background:none;border:0;padding:8px;margin:-8px;cursor:pointer;color:inherit}
.burger span{display:block;width:30px;height:1px;background:currentColor;margin:8px 0;transition:transform .25s}
.menu{position:fixed;inset:0;z-index:15;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.menu a{font-size:32px;line-height:1.4;text-decoration:none}
body.menu-open .menu{opacity:1;visibility:visible}
body.menu-open .hdr{position:fixed}
body.menu-open{overflow:hidden}
body.menu-open .burger span:first-child{transform:translateY(4.5px) rotate(45deg)}
body.menu-open .burger span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:799px){.nav{display:none}.burger{display:block}.hdr{padding:18px 6vw;align-items:center}.logo{font-size:min(26.8px,6vw);white-space:nowrap;line-height:1.2}}

/* Fluid-Engine-Raster (24 Spalten + 2 Randspalten) */
.sec{padding:var(--pt) 0 var(--pb);position:relative}
.fe{display:grid;column-gap:11px;row-gap:calc(var(--cw) * 11 / 1325);
  grid-template-columns:calc(var(--gut) - 11px) repeat(24,minmax(0,1fr)) calc(var(--gut) - 11px);
  grid-template-rows:repeat(var(--r),minmax(calc(var(--cw) * .0215),auto))}
.b{grid-area:var(--a);position:relative;min-width:0;display:flex;flex-direction:column;justify-content:var(--va,flex-start)}
.b.g{container-type:inline-size;display:block}
@media (max-width:767px){
  .sec{padding:var(--ptm) 0 var(--pbm)}
  .fe{grid-template-columns:calc(var(--gut) - 11px) repeat(8,minmax(0,1fr)) calc(var(--gut) - 11px);
      grid-template-rows:repeat(var(--rm),minmax(calc(var(--cw) * 24 / 343),auto));row-gap:calc(var(--cw) * 11 / 343)}
  .b{grid-area:var(--am)}
}

/* Text */
.txt{overflow-wrap:normal}
.client,.txt .client{font-weight:400}
/* Service-Tags: kleine Pills mit 1 px Outline */
.txt a.svc-link{text-decoration-line:none}
.txt a.svc-link:hover{text-decoration-line:underline}
.txt p.tags{display:flex;flex-wrap:wrap;gap:calc(.35em + 8px);font-size:calc(16px + .24vw);line-height:1.1;font-weight:300;letter-spacing:normal}  /* = Service-Leiste auf Home */
@media (max-width:767px){.txt p.tags{font-size:15px;gap:calc(.35em + 6px)}}
.txt .svc-pill,.txt .svc-pill:hover{text-decoration:none}
/* Projekt-Einstieg: Titel, Copy und Pills mit jeweils gleichem Abstand */
.txt .intro{--ig:32px}
.txt .intro>*{margin:0 0 var(--ig)!important}
.txt .intro>:last-child{margin-bottom:0!important}
@media (max-width:767px){.txt .intro{--ig:24px}}
.more.svc{padding-top:calc(101.4px + 4.68vw)}  /* Logo-Unterkante (3vw + 1,4 × Logo) + 80 px bis zu den Tags */
@media (max-width:767px){.more.svc{padding-top:105px}}
.txt>:first-child{margin-top:0!important}
.txt>:last-child{margin-bottom:0!important}
.txt a{text-decoration:underline;text-decoration-thickness:var(--ul);text-underline-offset:var(--ul-off)}
.txt ul,.txt ol{padding-left:1.2em;margin:16px 0}
.txt li>p{margin:0}

/* Bilder in Galerie-/Bildblöcken (Positionen exakt wie auf der Live-Seite) */
.gal{position:relative;height:calc(var(--hh) * 100cqw)}
.gal figure{position:absolute;margin:0;overflow:hidden;left:calc(var(--x) * 100%);top:calc(var(--y) * 100cqw);width:calc(var(--w) * 100%);height:calc(var(--h) * 100cqw)}
.gal img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
@media (max-width:767px){
  .gal{height:calc(var(--hhm) * 100cqw)}
  .gal figure{left:calc(var(--xm) * 100%);top:calc(var(--ym) * 100cqw);width:calc(var(--wm) * 100%);height:calc(var(--hm) * 100cqw)}
  .gal figure.d-only{display:none}
}
@media (min-width:768px){.gal figure.m-only{display:none}}

/* Button */
.btn{display:inline-flex;white-space:nowrap;line-height:1;align-items:center;align-self:flex-start;height:2.7em;padding:0 1.6em;border:1px solid currentColor;border-radius:300px;font-size:14px;font-weight:400;text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}
.page-about main .btn{margin-top:32px}
@media (max-width:767px){.page-about main .btn{margin-top:24px}}

/* Eingebettete Videos */
.embed{position:relative;width:100%;height:100%;min-height:200px}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Galerie-Abschnitte (ältere Projekte) */
.mas{padding:calc(var(--t) * 100vw) var(--gut) calc(var(--bt) * 100vw)}
.mas img{width:100%;height:auto}
.ss{position:relative;overflow:hidden}
@media (min-width:768px){
  .mas>.q{width:100%}
  .mas>.h{width:calc((100% - 11 * 11px) / 12 * 6 + 5 * 11px);margin-left:auto;margin-right:auto}
}
.ss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.ss img.on{opacity:1;pointer-events:auto}
.mas-head{padding:6vw 0 32px}
@media (max-width:767px){.mas-head{padding:16vw 0 24px}}
@media (max-width:767px){.mas{padding:calc(var(--tm) * 100vw) var(--gut) calc(var(--btm) * 100vw)}}
.plain{padding:calc(22px + 7.7vw) var(--gut) 4vw;max-width:calc(var(--cw) + 2 * var(--gut))}
.plain .txt{max-width:860px}

/* Projektübersicht */
.grid{display:grid;grid-template-columns:1fr 1fr;padding:calc(101.4px + 4.68vw) 4vw 20px}  /* 80 px Logo bis Tags */
.grid-item{display:block;text-decoration:none;color:var(--fg);grid-column:span var(--span)}
.grid-item .gi{position:relative;overflow:hidden;aspect-ratio:var(--ar)}
.grid-item img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.grid-item .pix{position:absolute;inset:0;object-position:50% 50%;image-rendering:pixelated;opacity:0;transition:opacity .2s ease}  /* Hover: feines Punktraster, Farben aus dem Bild */
@media (hover:hover){.grid-item:hover .pix{opacity:1}}.grid-item:focus-visible .pix{opacity:1}  /* auf Touch-Geräten kein hängender Hover */
/* Titel schwarz unter der Kachel wie bei Related Projects, Schriftgröße wie die Service-Pills */
.grid-item>span{display:block;padding:12px 34px 72px 0;font-size:calc(16px + .24vw);line-height:1.389;letter-spacing:.03em}
@media (max-width:767px){.grid{padding:105px 6vw 20px;grid-template-columns:1fr}.grid-item{grid-column:auto}.grid-item .gi{aspect-ratio:1/1}.grid-item>span{padding:8px 34px 64px 0;font-size:15px}}  /* mobil eine quadratische Kachel pro Reihe */

/* Startseite: Service-Leiste über den Kacheln. Jede Pill hat eigene Enden; bei Mouseover wird die jeweilige Pill rechteckig.
   Die Kontur ist ein SVG mit 1-px-Linie in Bildschirmpixeln (per JS gezeichnet), damit auch schräge Linien sauber sind. */
.svc-row{--sg:4vw;grid-column:1/-1;display:block;margin:0 calc(-1 * var(--sg)) 1.65vw;padding:1px var(--sg);overflow-x:auto;scrollbar-width:none;font-size:calc(16px + .24vw);line-height:1.1;font-weight:300}  /* = Schrift unter Related Projects; randlos bis an den Bildschirmrand */
.svc-pill{position:relative;flex:none;display:flex;align-items:center;justify-content:center;padding:.42em 1.15em;white-space:nowrap;text-decoration:none;color:var(--fg)}
.svc-pill[data-shape="notch"]{padding-left:1.6em;padding-right:1.6em}  /* Kerben ragen nach innen: mehr Innenabstand, damit es optisch wie die anderen wirkt */
.svc-pill svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.svc-pill svg *{fill:none;stroke:currentColor;stroke-width:var(--ul);vector-effect:non-scaling-stroke;shape-rendering:geometricPrecision;stroke-linejoin:miter}
.svc-pill span{position:relative}
.svc-pill.is-active{color:var(--bg)}
.svc-pill.is-active svg *{fill:var(--fg);stroke:var(--fg)}
.svc-home{flex:none;width:1.94em;height:1.94em;display:block;color:var(--fg)}  /* = Höhe einer Pill (1,1em Zeile + 0,84em Innenabstand) */
.svc-home svg{display:block;width:100%;height:100%;overflow:visible}
.svc-home polygon{fill:none;stroke:currentColor;stroke-width:var(--ul);vector-effect:non-scaling-stroke;stroke-linejoin:miter}
.more.svc .svc-row{margin-bottom:0}.more.svc .more-grid{margin-top:1.65vw}  /* Abstand Pills zur Kachel (Desktop) */
.svc-row::-webkit-scrollbar{display:none}
.svc-track{display:flex;width:max-content}
.svc-set{display:flex;gap:calc(.35em + 8px)}
@media (max-width:767px){  /* Mobil: kleiner */
  .svc-row{--sg:6vw;margin-bottom:6vw;font-size:15px}
  .svc-set{gap:calc(.35em + 6px)}}
@media (max-width:767px){
  .more.svc .svc-row{margin-bottom:0}.more.svc .more-grid{margin-top:6vw}}

/* Vor/Zurück */
/* More Projects: quadratische Kacheln ohne Abstand, Titel darunter */
.more{padding:4vw 4vw 0}
.more>.txt>h3{margin:0}
.more-grid{margin-top:72px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.more-grid a{display:block;text-decoration:none;color:var(--fg);background:var(--bg)}
.more-grid .sq{aspect-ratio:1/1;overflow:hidden}
.more-grid img{width:100%;height:100%;object-fit:cover;object-position:var(--fp,50% 50%)}
.more-grid a>span{display:block;padding:12px 34px 72px 0;font-size:calc(16px + .24vw);line-height:1.389;letter-spacing:.03em}
@media (max-width:767px){.more{padding:12vw 6vw 0}.more-grid{grid-template-columns:repeat(2,1fr)}.more-grid a>span{padding:8px 34px 64px 0;font-size:14px}}
/* Lightbox (wie Squarespace „light“), blättert durch alle Bilder der Seite */
.gal img,.mas img{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.lb.open{opacity:1;visibility:visible}
.lb-bg{position:absolute;inset:0;background:var(--bg);opacity:.97}
.lb-img{position:relative;max-width:calc(100vw - 40px);max-height:calc(100vh - 100px);width:auto;height:auto;object-fit:contain;user-select:none}
.lb button{position:absolute;z-index:2;background:none;border:0;padding:10px;cursor:pointer;color:#ccc;transition:color .2s}
.lb button:hover{color:var(--fg)}
.lb svg{display:block;fill:none;stroke:currentColor;stroke-width:1.5}
.lb-close{top:5px;right:10px}
.lb-close svg{width:24px;height:24px}
.lb.left,.lb.left *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpolyline points='25,4 9,20 25,36' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 20 20,w-resize}
.lb.right,.lb.right *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpolyline points='15,4 31,20 15,36' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 20 20,e-resize}
.lb .lb-close,.lb .lb-close *{cursor:pointer}
body.lb-open{overflow:hidden}

/* Mobile Bildfolge (Projekte mit mobil.json): Bilder einzeln, randlos, ohne Abstand */
.mflow{display:none}
@media (max-width:767px){
  .has-mflow main .sec{display:none}
  .has-mflow .mflow{display:block;padding-top:96px}
  .mflow .mf-txt{padding:0 6vw;margin:12vw 0}
  .mflow .mf-txt:first-child{margin-top:0}
  .mflow .mf-img{display:block;width:100%;height:auto;object-fit:cover;object-position:var(--fp,50% 50%)}
  .mflow .ss{width:100%}
}

/* Bilder blenden beim Scrollen nacheinander sanft ein (Klasse wird per JS gesetzt) */
.reveal{opacity:0;transition:opacity .9s ease}
.reveal.in{opacity:1}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transition:none}}
@media (max-width:767px){.lb-img{max-width:100vw}}

/* Typografie (aus der Live-Seite gemessen) */
.txt h1{font-size:calc(16.00px + 1.440vw);line-height:1.333;letter-spacing:0.030em;font-weight:300;margin:32px 0 32px}
.txt h2{font-size:calc(16.00px + 1.440vw);line-height:1.333;letter-spacing:0.030em;font-weight:300;margin:32px 0 32px}
.txt h3{font-size:calc(16.00px + 1.440vw);line-height:1.333;letter-spacing:0.030em;font-weight:300;margin:32px 0 32px}
.txt h4{font-size:calc(16.00px + 0.240vw);line-height:1.389;letter-spacing:0.030em;font-weight:300;margin:32px 0 32px}
.txt p, .txt li{font-size:16.00px;line-height:1.600;letter-spacing:0.010em;font-weight:300;margin:16px 0 16px}
.txt p.sqsrte-large{font-size:calc(16.00px + 0.480vw);line-height:1.600;letter-spacing:0.010em;font-weight:300;margin:16px 0 16px}
.txt p.sqsrte-small{font-size:calc(14.72px + -0.031vw);line-height:1.600;letter-spacing:0.010em;font-weight:300;margin:16px 0 16px}
@media (max-width:767px){
.txt h1{font-size:28.96px}
.txt h2{font-size:28.96px}
.txt h3{font-size:28.96px}
.txt h4{font-size:18.16px}
.txt p, .txt li{font-size:16.00px}
.txt p.sqsrte-large{font-size:20.32px}
.txt p.sqsrte-small{font-size:14.92px}
}