*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto;}
html,body{margin:0;padding:0;}
body{font-family:Helvetica,"Helvetica Neue",Arial,sans-serif;background:#f4f3ee;color:#0a0a0a;min-height:100vh;display:flex;flex-direction:column;}
img{display:block;max-width:100%;}
button{cursor:pointer;border:none;background:none;padding:0;}
a{color:inherit;}
.nav{position:sticky;top:0;z-index:20;background:#f4f3ee;border-bottom:1px solid rgba(10,10,10,.12);}
.nav-inner{max-width:1280px;margin:0 auto;padding:10px 32px;display:flex;justify-content:space-between;align-items:center;}
.nav-logo{all:unset;cursor:pointer;display:block;}
.nav-logo-wrap{position:relative;display:inline-block;height:40px;width:118px;}
.nav-logo-wrap img{position:absolute;top:0;left:0;height:40px;width:auto;mix-blend-mode:multiply;display:block;transition:opacity .35s ease;}
.nav-logo-short{opacity:1;}
.nav-logo-full{opacity:0;}
.nav-logo:hover .nav-logo-short{opacity:0;}
.nav-logo:hover .nav-logo-full{opacity:1;}
.nav-links{display:flex;gap:22px;}
.nav-links button,.nav-links a{all:unset;cursor:pointer;font:400 14px/1 Helvetica;color:rgba(10,10,10,.55);border-bottom:1px solid transparent;padding-bottom:3px;}
.nav-links button.active,.nav-links a.active{color:#0a0a0a;border-bottom-color:#1f3dff;}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:4px;cursor:pointer;}
.nav-burger span{display:block;width:22px;height:1px;background:#0a0a0a;}
.nav-mobile{display:none;flex-direction:column;background:#f4f3ee;border-bottom:1px solid rgba(10,10,10,.12);padding:0 24px 16px;}
.nav-mobile button,.nav-mobile a{all:unset;cursor:pointer;font:400 15px/1 Helvetica;color:rgba(10,10,10,.55);padding:14px 0;border-bottom:1px solid rgba(10,10,10,.06);display:block;width:100%;}
.nav-mobile button.active,.nav-mobile a.active{color:#0a0a0a;}
.nav-mobile.open{display:flex;}
.page{display:none;flex:1;}
.page.active{display:block;}
.hero{border-bottom:1px solid rgba(10,10,10,.12);}
.hero-inner{max-width:1280px;margin:0 auto;padding:40px 32px 56px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:stretch;}
.hero-img{background:#e8e7e2;overflow:hidden;min-height:520px;}
.hero-img img{width:100%;height:100%;object-fit:cover;}
.hero-text{display:flex;flex-direction:column;justify-content:space-between;padding:4px 0;}
.hero-meta{font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);letter-spacing:.04em;display:flex;justify-content:space-between;}
.hero-h1{margin:24px 0 0;font:500 88px/.92 Helvetica;letter-spacing:-.035em;}
.hero-h1 .dot{color:#1f3dff;}
.hero-desc{margin:32px 0 0;font:400 17px/1.5 Helvetica;max-width:460px;}
.hero-cta{all:unset;cursor:pointer;margin-top:32px;font:400 13px/1 Helvetica;color:#1f3dff;align-self:flex-start;border-bottom:1px solid #1f3dff;padding-bottom:4px;}
.auswahl{max-width:1280px;margin:0 auto;padding:40px 32px 80px;}
.auswahl-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:24px;}
.auswahl-label{font:400 11px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;letter-spacing:.06em;}
.auswahl-all{all:unset;cursor:pointer;font:400 12px/1 Helvetica;color:#1f3dff;}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.projekte-inner{max-width:1280px;margin:0 auto;padding:40px 32px 80px;}
.projekte-header{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:32px;align-items:baseline;}
.projekte-label{grid-column:1/span 3;font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;}
.projekte-h1{grid-column:4/span 5;margin:0;font:500 64px/1 Helvetica;letter-spacing:-.03em;}
.projekte-h1 .dot{color:#1f3dff;}
.projekte-filters{grid-column:9/span 4;display:flex;gap:14px;justify-content:flex-end;flex-wrap:wrap;}
.projekte-filters button{all:unset;cursor:pointer;font:400 12px/1 Helvetica;color:rgba(10,10,10,.55);border-bottom:1px solid transparent;padding-bottom:3px;}
.projekte-filters button.active{color:#0a0a0a;border-bottom-color:#1f3dff;}
.card-grid-proj{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
.card{all:unset;cursor:pointer;display:block;}
.card-img{overflow:hidden;background:#e8e7e2;}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,filter .4s ease;display:block;filter:grayscale(100%) contrast(1.15) brightness(.85);}
.card-img img:hover{transform:scale(1.03);filter:grayscale(0%);}
.card-title{margin-top:12px;}
.card-title span{font:500 16px/1.2 Helvetica;letter-spacing:-.005em;}
.card-title .num{color:#1f3dff;font:400 11px/1 "JetBrains Mono",monospace;margin-right:8px;}
.card-meta{margin-top:4px;font:400 11px/1.5 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);}
.ratio-45{aspect-ratio:4/5;}
.detail-inner{max-width:1280px;margin:0 auto;padding:32px 32px 80px;}
.detail-back{all:unset;cursor:pointer;font:400 12px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);margin-bottom:24px;display:block;}
.detail-header{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:32px;align-items:baseline;}
.detail-num{grid-column:1/span 1;font:400 11px/1 "JetBrains Mono",monospace;color:#1f3dff;}
.detail-title{grid-column:2/span 8;margin:0;font:500 56px/1 Helvetica;letter-spacing:-.025em;}
.detail-catyr{grid-column:11/span 2;font:400 11px/1.5 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-align:right;}
.detail-img{width:100%;max-height:720px;object-fit:cover;margin-bottom:32px;}
.detail-img-full{width:100%;max-width:960px;height:auto;display:block;margin:0 auto 40px;}
.detail-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:40px;max-width:960px;margin-left:auto;margin-right:auto;}
.detail-gallery-img{width:100%;height:auto;display:block;cursor:zoom-in;}
.detail-gallery-img:only-child{grid-column:1/-1;}
.lightbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(10,10,10,.93);align-items:center;justify-content:center;}
.lightbox.open{display:flex;}
.lightbox-img{max-width:90vw;max-height:90vh;object-fit:contain;display:block;position:relative;z-index:1;cursor:default;user-select:none;}
.lightbox-close{position:absolute;top:20px;right:28px;all:unset;cursor:pointer;color:#fff;font:300 32px/1 Helvetica;opacity:.55;z-index:2;}
.lightbox-close:hover{opacity:1;}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);all:unset;cursor:pointer;color:#fff;font:300 40px/1 Helvetica;opacity:.4;padding:20px 28px;z-index:2;user-select:none;}
.lightbox-nav:hover{opacity:1;}
.lightbox-prev{left:0;}.lightbox-next{right:0;}
.detail-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:40px;}
.detail-row-label{grid-column:1/span 3;font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;}
.detail-row-body{grid-column:4/span 7;margin:0;font:400 17px/1.55 Helvetica;}
.detail-tags{display:flex;gap:8px;flex-wrap:wrap;}
.detail-facts{display:grid;grid-template-columns:180px 1fr;margin:0;border-top:1px solid rgba(10,10,10,.12);}
.detail-facts dt{font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;letter-spacing:.04em;padding:14px 24px 14px 0;border-bottom:1px solid rgba(10,10,10,.12);}
.detail-facts dd{margin:0;font:400 16px/1.45 Helvetica;color:#0a0a0a;padding:12px 0;border-bottom:1px solid rgba(10,10,10,.12);}
.tag{font:400 11px/1 "JetBrains Mono",monospace;border:1px solid rgba(10,10,10,.12);padding:4px 8px;color:rgba(10,10,10,.55);}
.page-inner{max-width:1280px;margin:0 auto;padding:40px 32px 80px;}
.page-header{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-bottom:56px;}
.page-label{grid-column:1/span 3;font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;align-self:end;}
.page-h1{grid-column:4/span 8;margin:0;font:500 64px/1 Helvetica;letter-spacing:-.03em;}
.page-h1 .dot{color:#1f3dff;}
.page-body{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;}
.page-body-col{grid-column:4/span 6;}
.page-body-col p{margin:0;font:400 19px/1.5 Helvetica;}
.kontakt-email{display:inline-block;font:500 36px/1 Helvetica;letter-spacing:-.02em;color:#0a0a0a;text-decoration:none;border-bottom:2px solid #1f3dff;padding-bottom:6px;margin-top:32px;}
.ueber-grid{max-width:1280px;margin:0 auto;padding:0 32px 80px;display:grid;grid-template-columns:1fr 2fr;gap:64px;align-items:start;}
.ueber-intro p{margin:0;font:400 22px/1.5 Helvetica;color:#0a0a0a;}
.ueber-rows{border-top:1px solid rgba(10,10,10,.12);}
.ueber-row{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid rgba(10,10,10,.12);align-items:start;}
.ueber-row-label{font:400 11px/1.4 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-transform:uppercase;letter-spacing:.04em;padding-top:3px;}
.ueber-row-body{display:flex;flex-direction:column;gap:6px;}
.ueber-row-body--inline{flex-direction:row;flex-wrap:wrap;gap:8px;}
.ueber-item{font:400 16px/1.4 Helvetica;color:#0a0a0a;}
.ueber-item-meta{font:400 12px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);}
.ueber-item-dim{color:rgba(10,10,10,.45);font-weight:400;}
.ueber-lang{font:400 13px/1 "JetBrains Mono",monospace;border:1px solid rgba(10,10,10,.15);padding:5px 10px;color:#0a0a0a;}
.legal-body{grid-column:1/span 9;font:400 15px/1.7 Helvetica;}
.legal-body h1{font:500 48px/1 Helvetica;letter-spacing:-.02em;margin:0 0 32px;}
.legal-body h2{font:500 20px/1.2 Helvetica;letter-spacing:-.01em;margin:40px 0 12px;}
.legal-body h3{font:500 15px/1.2 Helvetica;margin:24px 0 8px;}
.legal-body p{margin:0 0 16px;}
.legal-body ul{margin:0 0 16px;padding-left:20px;}
.legal-body a{color:#1f3dff;}
.legal-back{all:unset;cursor:pointer;font:400 12px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);margin-bottom:32px;display:block;}
footer{border-top:1px solid rgba(10,10,10,.12);margin-top:auto;}
.footer-inner{max-width:1280px;margin:0 auto;padding:24px 32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font:400 11px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);}
.footer-links{display:flex;gap:16px;}
.footer-links button,.footer-links a{all:unset;cursor:pointer;font:400 11px/1 "JetBrains Mono",monospace;color:rgba(10,10,10,.55);text-decoration:underline;text-underline-offset:3px;}
.footer-links button:hover,.footer-links a:hover{color:#0a0a0a;}
@media(max-width:768px){
  .nav-inner{padding:12px 20px;}
  .nav-logo span{display:none;}
  .nav-links{display:none;}
  .nav-burger{display:flex;}
  .hero-inner{grid-template-columns:1fr;padding:0 0 40px;gap:0;}
  .hero-img{min-height:56vw;}
  .hero-text{padding:24px 20px 0;}
  .hero-h1{font:500 52px/.92 Helvetica;letter-spacing:-.03em;margin-top:20px;}
  .hero-desc{font:400 15px/1.5 Helvetica;margin-top:20px;}
  .hero-cta{margin-top:24px;}
  .auswahl{padding:32px 20px 60px;}
  .auswahl-header{flex-direction:column;gap:12px;align-items:flex-start;}
  .card-grid-3{grid-template-columns:1fr;gap:32px;}
  .projekte-inner{padding:32px 20px 60px;}
  .projekte-header{display:flex;flex-direction:column;gap:16px;margin-bottom:24px;}
  .projekte-label{display:none;}
  .projekte-h1{font:500 42px/1 Helvetica;}
  .projekte-filters{justify-content:flex-start;gap:16px;}
  .card-grid-proj{grid-template-columns:1fr;gap:32px;}
  .detail-inner{padding:24px 20px 60px;}
  .detail-header{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
  .detail-num,.detail-catyr{text-align:left;}
  .detail-title{font:500 36px/1 Helvetica;letter-spacing:-.02em;}
  .detail-row{display:flex;flex-direction:column;gap:8px;margin-bottom:28px;}
  .detail-facts{display:block;border-top:none;}
  .detail-facts dt{padding:14px 0 2px;border-bottom:none;}
  .detail-facts dd{padding:0 0 12px;font-size:15px;}
  .detail-gallery{grid-template-columns:1fr;}
  .detail-gallery-img{cursor:default;}
  .page-inner{padding:32px 20px 60px;}
  .page-header{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;}
  .page-h1{font:500 42px/1 Helvetica;}
  .page-body{display:flex;flex-direction:column;}
  .page-body-col p{font:400 16px/1.5 Helvetica;}
  .kontakt-email{font:500 24px/1.2 Helvetica;word-break:break-all;}
  .ueber-grid{grid-template-columns:1fr;gap:32px;padding:0 20px 60px;}
  .ueber-intro p{font:400 18px/1.5 Helvetica;}
  .ueber-row{grid-template-columns:100px 1fr;gap:12px;padding:16px 0;}
  .ueber-item{font:400 15px/1.4 Helvetica;}
  .legal-body{grid-column:1/-1;}
  .legal-body h1{font:500 32px/1 Helvetica;}
  .footer-inner{padding:20px;flex-direction:column;align-items:flex-start;gap:10px;}
}
@media(max-width:480px){
  .hero-h1{font:500 44px/.92 Helvetica;}
  .ratio-45{aspect-ratio:3/2;}
}