:root{
  --pad:clamp(18px,2.2vw,38px);
  --gap:clamp(18px,2vw,34px);
  --fg:#111;
  --muted:#727272;
  --line:#e9e9e9;
  --media:#f3f3f3;
}
*{box-sizing:border-box}
html{background:#fff;color:var(--fg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100%;
  background:#fff;
  color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.viewer-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

.site-header{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:18px var(--pad) 14px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-size:11px;
  line-height:1.35;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.brand{font-weight:500}
.tag{
  margin-top:2px;
  color:#777;
  text-transform:none;
  letter-spacing:.01em
}
.nav{display:flex;gap:24px}
.nav a{border-bottom:1px solid transparent}
.nav a:hover,.nav .active{border-color:#111}

.grid-page{padding:0 var(--pad)}
.project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(54px,7vw,110px) var(--gap);
  padding:clamp(34px,5vw,72px) 0 clamp(90px,10vw,150px);
}
.project-card{
  min-width:0;
  cursor:pointer;
  outline:none;
}
.project-card:focus-visible .card-media{
  outline:1px solid #111;
  outline-offset:4px;
}
.card-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--media);
}
.card-poster,.card-preview{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:var(--media);
}
.card-poster{
  z-index:1;
  opacity:1;
  transition:opacity .16s linear,transform .6s cubic-bezier(.2,.65,.25,1);
}
.card-preview{
  z-index:2;
  opacity:0;
  transition:opacity .16s linear;
}
.card-preview.is-visible{opacity:1}
.project-card:hover .card-poster,
.project-card:focus-visible .card-poster{transform:scale(1.012)}
.card-open-hint{
  position:absolute;
  z-index:4;
  right:13px;
  bottom:11px;
  padding:5px 7px 4px;
  background:rgba(255,255,255,.87);
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.09em;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.project-card:hover .card-open-hint,
.project-card:focus-visible .card-open-hint{
  opacity:1;
  transform:none;
}
.card-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding-top:10px;
  font-size:12px;
  line-height:1.35;
}
.card-title{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.075em;
}
.card-subtitle{text-align:right;color:#666}

.site-footer{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:28px var(--pad) 30px;
  border-top:1px solid var(--line);
  font-size:11px;
}

/* Full project viewer */
.viewer{
  position:fixed;
  inset:0;
  z-index:100;
  background:#fff;
  overflow:auto;
}
.viewer[hidden]{display:none}
.viewer-site-header{
  position:sticky;
  top:0;
  z-index:120;
}
.viewer-controls{
  position:sticky;
  top:54px;
  z-index:115;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:8px var(--pad) 0;
  pointer-events:none;
}
.viewer-close,.viewer-nav button{
  appearance:none;
  border:0;
  background:rgba(255,255,255,.92);
  padding:7px 9px;
  cursor:pointer;
  pointer-events:auto;
}
.viewer-close{
  font-size:30px;
  font-weight:200;
  line-height:1;
}
.viewer-nav{display:flex;gap:5px}
.viewer-nav button{font-size:19px;line-height:1}
.viewer-body{
  width:100%;
  padding:clamp(18px,2.8vw,44px) var(--pad) clamp(60px,7vw,110px);
}
.viewer-stage{
  position:relative;
  width:min(100%,1400px);
  margin:0 auto;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--media);
  isolation:isolate;
}
.viewer-poster,.viewer-layer,.viewer-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.viewer-poster{
  z-index:1;
  display:block;
  object-fit:cover;
  background:var(--media);
  transition:opacity .10s linear;
}
.viewer-poster.is-hidden{opacity:0}
.viewer-poster.is-missing{display:none}
.viewer-layer{
  z-index:2;
  opacity:0;
  background:var(--media);
  transition:opacity .10s linear;
}
.viewer-layer.is-active{z-index:4;opacity:1}
.viewer-media{
  display:block;
  object-fit:cover;
  background:var(--media);
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.viewer-meta{
  width:min(100%,1400px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  padding-top:12px;
  font-size:12px;
  line-height:1.35;
}
.viewer-title{
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.075em;
}
.viewer-subtitle{
  margin:0;
  font-size:12px;
  color:#666;
  text-align:right;
}

/* Static About / Contact pages */
.about-page,.legal-page{padding:0 var(--pad)}
.about-hero{
  min-height:50vh;
  display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(0,2.28fr);
  align-items:end;
  gap:56px;
  padding:11vh 0 7vh;
  border-bottom:1px solid var(--line)
}
.about-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#666}
.about-hero h1{
  font-size:clamp(46px,6.2vw,92px);
  font-weight:300;
  letter-spacing:-.05em;
  line-height:.98;
  margin:0;
  max-width:900px
}
.about-copy{
  display:grid;
  grid-template-columns:minmax(150px,.72fr) minmax(0,2.28fr);
  gap:56px;
  padding:88px 0 56px
}
.about-name{
  font-size:11px;
  line-height:1.55;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#444;
  padding-top:4px
}
.about-text{
  max-width:740px;
  font-size:clamp(17px,1.28vw,20px);
  font-weight:300;
  line-height:1.72
}
.about-text p{margin:0 0 2.35em}
.about-text p:last-child{margin-bottom:0}
.about-text strong{font-weight:450}
.contact-hero{
  min-height:58vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:20px;
  padding:9vh 0 7vh;
  border-bottom:1px solid var(--line)
}
.contact-hero h1{
  font-size:clamp(52px,8vw,118px);
  font-weight:300;
  letter-spacing:-.055em;
  margin:0;
  line-height:.92
}
.contact-data{font-size:clamp(16px,1.5vw,22px);font-weight:300;line-height:1.55}
.contact-data p{margin:0 0 1.5em}
.contact-data a,.legal-copy a{border-bottom:1px solid #bbb}
.legal-section{
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:40px;
  padding:72px 0;
  border-bottom:1px solid var(--line)
}
.legal-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  position:sticky;
  top:82px;
  align-self:start
}
.legal-copy{max-width:760px;font-size:13px;line-height:1.65}
.legal-copy h2{
  font-size:clamp(26px,3vw,42px);
  font-weight:300;
  letter-spacing:-.025em;
  margin:0 0 40px
}
.legal-copy p{margin:0 0 28px}
.legal-copy strong{font-weight:500}


@media(max-width:1100px) and (min-width:701px){
  .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (hover:none),(pointer:coarse){
  .card-open-hint{display:none}
}
@media(max-width:700px){
  .site-header{position:relative}
  .tag{display:none}
  .nav{gap:13px}
  .project-grid{
    grid-template-columns:1fr;
    gap:64px;
    padding-top:22px
  }
  .card-meta{grid-template-columns:1fr;gap:3px}
  .card-subtitle{text-align:left}
  .viewer-topbar{
    min-height:58px;
    grid-template-columns:48px minmax(0,1fr) 76px;
    padding:8px 12px;
    gap:6px
  }
  .viewer-body{padding:12px}
  .viewer-stage{
    width:100%;
    max-height:none;
  }
  .viewer-title,.viewer-subtitle{font-size:10px}
  .site-footer{flex-direction:column}
  .about-hero,.about-copy,.contact-hero,.legal-section{grid-template-columns:1fr}
  .about-hero{min-height:auto;padding:9vh 0 7vh;gap:24px}
  .about-copy{gap:28px;padding:54px 0 38px}
  .about-text{font-size:17px;line-height:1.68;max-width:none}
  .contact-hero{min-height:auto;padding:10vh 0 8vh}
  .legal-section{gap:26px;padding:52px 0}
  .legal-label{position:static}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card-poster,.card-preview,.viewer-layer,.viewer-poster{transition:none}
}

@media (min-width:701px) and (max-width:1100px){
  .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .viewer-controls{top:50px;padding-left:12px;padding-right:12px}
  .viewer-body{padding:14px 12px 56px}
  .viewer-meta{grid-template-columns:1fr;gap:3px;padding-top:10px}
  .viewer-subtitle{text-align:left}
}


/* Touch-Geräte: dezenter, permanenter Hinweis zum Öffnen des Projekts */
@media (hover:none), (pointer:coarse){
  .card-open-hint{
    display:block;
    opacity:.78;
    transform:none;
    right:10px;
    bottom:9px;
    padding:4px 6px 3px;
    font-size:9px;
    letter-spacing:.07em;
    text-transform:none;
    background:rgba(255,255,255,.82);
  }
}

/* Leiser Architektur-Claim für Bauernkate Tützpatz */
.card-title-wrap{min-width:0}
.card-claim{margin-top:5px;font-size:10px;font-style:italic;font-weight:400;letter-spacing:.025em;text-transform:none;color:#777}
.viewer-claim{width:min(100%,1400px);margin:7px auto 0;font-size:11px;font-style:italic;letter-spacing:.03em;color:#777}
.viewer-claim[hidden]{display:none}

/* Optional editorial text below a selected project's main media. */
.viewer-description{
  width:min(100%,760px);
  margin:24px auto 0;
  font-size:12px;
  line-height:1.7;
  font-weight:400;
  letter-spacing:.008em;
  color:#656565;
}
.viewer-description[hidden]{display:none}
@media(max-width:700px){.viewer-description{margin-top:18px;font-size:12px;line-height:1.65}}