:root{
--bg:#FAFAFA;
--ink:#111;
--muted:#6f6a65;
--line:#151515;
--soft:#e2ddd6;
--accent:#b3402b;
--dark:#0e0e0d;
--darkink:#f3efe7;
--sans:Arial, Helvetica, sans-serif;
--serif:Georgia, 'Times New Roman', serif;
}

*{box-sizing:border-box}
html{
scroll-behavior:smooth;
overflow-x:hidden
}

body{
margin:0;
background:var(--bg);
color:var(--ink);
font-family:var(--sans);
font-size:15px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}

.site{min-height:100vh}

/* leicht kühler als vorher */
.rail{
position:fixed;
z-index:20;
left:0;top:0;bottom:0;
width:84px;
border-right:1px solid var(--line);
background:rgba(250,250,250,.92);
backdrop-filter:blur(10px);
display:flex;
align-items:center;
justify-content:space-between;
flex-direction:column;
padding:28px 0
}

.rail .mark{
writing-mode:vertical-rl;
transform:rotate(180deg);
letter-spacing:.18em;
font-size:14px;
font-weight:700;
  letter-spacing: 0.3em;
text-transform:uppercase
}

.rail .year{
writing-mode:vertical-rl;
letter-spacing:.08em;
font-size:11px;
color:var(--muted)
}

/* ebenfalls neutralisiert */
.topnav{
position:fixed;
z-index:30;
top:0;
left:84px;
right:0;
height:72px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 42px;
background:rgba(250,250,250,.97);
backdrop-filter:blur(14px);
border-bottom:1px solid rgba(17,17,17,.14)
}

.topnav .name{
display:none;
font-size:13px;
letter-spacing:.18em;
text-transform:uppercase;
font-weight:700
}

.topnav nav{
display:flex;
gap:28px;
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em
}

.topnav nav a{color:#292929}
.topnav nav a:hover{color:var(--accent)}

main{margin-left:84px}

.hero{
min-height:100vh;
padding:120px 42px 42px;
display:grid;
grid-template-columns:minmax(360px,1fr) minmax(420px,1.18fr);
gap:48px;
align-items:end;
border-bottom:1px solid var(--line)
}

.kicker{
font-size:12px;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:20px
}

.hero h1{
font-family:var(--serif);
font-weight:400;
letter-spacing:-.06em;
line-height:1.10;
font-size:clamp(64px,10vw,122px);
margin:0 0 28px
}

.lead{
font-size:clamp(20px,2vw,25px);
line-height:1.2;
letter-spacing:-.02em;
max-width:740px;
margin:0
}

.hero-meta{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:var(--line);
margin-top:52px;
border:1px solid var(--line)
}

.work-axis{
grid-template-columns:repeat(4,1fr)
}

.hero-meta span{
display:block;
background:var(--bg);
padding:16px 14px;
font-size:12px;
letter-spacing:.06em;
text-transform:uppercase
}

.hero-image{
position:relative;
align-self:stretch;
min-height:620px;
overflow:hidden;
background:#ddd
}

.hero-image img{
width:100%;
height:100%;
object-fit:cover;
filter:grayscale(8%) contrast(1.08)
}

.hero-image:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.36))
}


.hero-meta a{
  display:block;
  background:var(--bg);
  padding:16px 14px;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s ease;
      border-top:1px solid var(--line);
}

.hero-meta a:hover{
  color:var(--ink);
}






.caption{
position:absolute;
bottom:18px;
left:18px;
right:18px;
color:#fff;
font-size:12px;
letter-spacing:.07em;
text-transform:uppercase;
z-index:2
}

.section{
padding:92px 42px;
border-bottom:1px solid var(--line)
}

.section-head{
display:grid;
grid-template-columns:minmax(360px,.46fr) minmax(0,1fr);
gap:64px;
margin-bottom:48px
}

.section h2{
font-family:var(--serif);
font-weight:400;
font-size:clamp(44px,5.4vw,96px);
line-height:1;
letter-spacing:0;
margin:0
}

.section .intro{
font-size:20px;
line-height:1.35;
max-width:820px;
margin:0
}

@media (max-width:1200px){
  .section-head{
    grid-template-columns:1fr;
    gap:24px;
  }

  .section h2{
    max-width:900px;
  }

  .detail-head{
    grid-template-columns:1fr;
    gap:24px;
  }

  .waldprotokolle-page .detail-head{
    grid-template-columns:1fr;
  }
}

.grid-feature{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:18px;
align-items:start;
padding-bottom:220px
}

.project-card{
position:relative;
border-top:1px solid var(--line);
padding-top:15px;
padding-bottom:48px;
display:grid;
gap:14px;
min-width:0
}

.project-card + .project-card{
margin-top:34px
}

.project-card > img{
width:100%;
height:clamp(460px,60vh,780px);
object-fit:contain;
object-position:left center;
background:#fff;
}

.grid-feature > .project-card:nth-child(even){
transform:translateY(220px)
}
.project-card.tall > img{height:clamp(560px,68vh,880px)}

.image-pair{
height:clamp(460px,60vh,780px);
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
background:#fff;
overflow:hidden
}

.image-pair img{
width:100%;
height:100%;
min-width:0;
display:block;
object-fit:contain;
object-position:center top;
background:#fff
}

.image-pair.full-images{
  height:auto;
  overflow:visible;
  align-items:start;
}

.image-pair.full-images img{
  width:100%;
  height:auto;
  max-height:680px;
  object-fit:contain;
  object-position:center top;
}



.project-card.tall .image-pair{height:clamp(560px,68vh,880px)}

@media (max-width:1100px){
  .image-pair{
    grid-template-columns:1fr;
    height:auto;
  }

  .image-pair img{
    height:clamp(260px,48vh,520px);
  }
}

.project-card .no{
font-size:11px;
color:var(--muted);
letter-spacing:.16em;
text-transform:uppercase
}

.project-card h3{
font-family:var(--serif);
font-weight:400;
font-size:34px;
line-height:1;
margin:0;
letter-spacing:-.025em
}

.project-card p{
margin:0;
color:#403c37;
max-width:620px
}


.image-caption-white,
.image-caption-black{
  position:absolute;
  left:18px;
  bottom:18px;
  z-index:2;
  font-size:12px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.card-image-caption{
  position:relative;
  width:100%;
  height:clamp(460px,60vh,780px);
  background:#fff;
  overflow:hidden;
}

.card-image-caption img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  background:#fff;
}


.image-caption-white{
  color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}

.image-caption-black{
  color:#111;
}







.detail-hero{
padding:132px 42px 80px;
border-bottom:1px solid var(--line)
}

.detail-head{
display:grid;
grid-template-columns:minmax(360px,.72fr) minmax(0,1fr);
gap:64px;
align-items:end;
margin-bottom:52px
}

.detail-head h1{
font-family:var(--serif);
font-weight:400;
font-size:clamp(64px,8vw,128px);
line-height:.94;
letter-spacing:0;
margin:0
}

.waldprotokolle-page .detail-head{
grid-template-columns:minmax(0,.62fr) minmax(420px,1fr);
align-items:end
}

.waldprotokolle-page .detail-head h1{
font-size:clamp(54px,6.2vw,96px);
line-height:1;
max-width:100%
}

.waldprotokolle-page .lead{
max-width:720px
}

.back-link{
display:inline-block;
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:28px
}

.back-link:hover{color:var(--ink)}

.detail-images{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
background:#fff;
overflow:hidden
}

.detail-images img{
width:100%;
height:clamp(520px,66vh,840px);
object-fit:contain;
object-position:center top;
background:#fff
}

.aopl-page .detail-images{
align-items:start
}

.aopl-page .detail-images img{
height:auto;
object-fit:contain
}

.detail-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:34px
}

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 18px;
border:1px solid currentColor;
font-size:12px;
letter-spacing:.1em;
text-transform:uppercase
}

.btn:hover{color:var(--accent)}

.compact-related .project-card{
padding-bottom:0
}

.compact-related .image-pair{
height:clamp(260px,38vh,420px)
}

.project-content{
margin-left:84px;
padding:76px 42px;
display:grid;
grid-template-columns:minmax(360px,.62fr) minmax(0,1fr);
gap:52px;
border-bottom:1px solid var(--line)
}

.project-text{
max-width:860px;
font-size:20px;
line-height:1.45
}

.project-text p{
margin:0 0 22px
}

.project-text h2{
font-family:var(--serif);
font-weight:400;
font-size:clamp(42px,4.6vw,84px);
line-height:1.02;
letter-spacing:0;
margin:18px 0 28px
}

.project-text a{
text-decoration:underline;
text-underline-offset:3px
}

.project-media{
display:grid;
gap:18px
}

.project-media figure{
margin:0
}

.project-media img{
width:100%;
max-height:620px;
object-fit:contain;
object-position:left top;
background:#fff
}

.project-media figcaption{
margin-top:8px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted)
}

.project-content-alt{
background:#f8f8f7
}

.project-content-alt .project-media{
grid-template-columns:repeat(2,minmax(0,1fr));
align-items:start
}

.project-content-alt .project-media img{
height:clamp(280px,40vh,460px);
object-position:center
}

.project-facts{
display:grid;
align-content:start;
border-top:1px solid var(--line)
}

.project-facts div{
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:22px;
padding:22px 0;
border-bottom:1px solid rgba(17,17,17,.18)
}

.project-facts span{
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted)
}

.project-facts strong{
font-size:20px;
line-height:1.32;
font-weight:400
}

.project-embed{
min-width:0
}

.project-embed iframe{
width:100%;
min-height:520px;
border:0;
background:#111
}

.video-hero{
padding:96px 42px 0;
border-bottom:1px solid var(--line);
background:#fff
}

.video-hero iframe{
display:block;
width:100%;
aspect-ratio:16/9;
height:auto;
border:0;
background:#111
}

.sds-subpage .detail-hero,
.sds-ballet-page .detail-hero{
padding-top:54px;
padding-bottom:48px
}

.sds-subpage .detail-head,
.sds-ballet-page .detail-head{
margin-bottom:0
}

.sds-subpage .project-content,
.sds-ballet-page .project-content{
padding-top:48px;
padding-bottom:34px
}

.sds-subpage .project-gallery,
.sds-ballet-page .project-gallery{
padding-top:42px
}

.project-grid{
margin-left:84px;
padding:76px 42px;
border-bottom:1px solid var(--line)
}

.project-gallery{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:24px;
margin-left:84px;
padding:76px 42px;
border-bottom:1px solid var(--line)
}

.project-gallery figure{
margin:0;
background:#fff
}

.project-gallery img{
width:100%;
height:clamp(360px,52vh,680px);
object-fit:contain;
object-position:center top;
background:#fff
}

.project-gallery figcaption{
margin-top:8px;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted)
}

.archive-hero{
padding:126px 42px 58px;
border-bottom:1px solid var(--line)
}

.archive-hero h1{
font-family:var(--serif);
font-weight:400;
font-size:clamp(42px,5.2vw,86px);
line-height:1;
letter-spacing:0;
max-width:960px;
margin:0 0 24px
}

.archive-hero > p{
font-size:clamp(18px,1.7vw,24px);
line-height:1.3;
max-width:980px;
margin:0 0 40px;
color:#3f3a35
}

.archive-roles{
display:grid;
grid-template-columns:repeat(3,1fr);
border-top:1px solid #111;
border-bottom:1px solid #111
}

.archive-roles a{
display:block;
padding:22px 24px;
color:inherit;
text-decoration:none;
border-right:1px solid #111
}

.archive-roles a:last-child{border-right:none}

.archive-roles span{
display:block;
font-family:Georgia,serif;
font-size:32px;
line-height:1.1;
color:#111;
margin-bottom:8px
}

.archive-roles p{
margin:0;
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:#6f6a64
}

.archive-roles a:hover{
background:#f4f1ec
}

.archive-memory{
padding:0 42px 92px
}

.archive-group{
padding-top:62px
}

.archive-group h2{
font-family:var(--sans);
font-size:12px;
font-weight:400;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--muted);
margin:0 0 16px
}

.archive-list{
border-top:1px solid var(--line)
}

.archive-row{
display:grid;
grid-template-columns:110px minmax(240px,.9fr) minmax(280px,1.4fr) 72px;
gap:20px;
align-items:baseline;
padding:13px 0 14px;
border-bottom:1px solid rgba(17,17,17,.22);
font-size:15px
}

.archive-row:hover{
color:var(--accent)
}

.archive-row span,
.archive-row b{
font-size:11px;
font-weight:400;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted)
}

.archive-row strong{
font-family:var(--serif);
font-size:25px;
font-weight:400;
line-height:1.05
}

.archive-row em{
font-style:normal;
color:#49443f
}

.systems-hero{
min-height:calc(100vh - 72px);
padding:72px 42px 42px;
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:minmax(0,.78fr) minmax(0,1fr);
gap:38px;
align-items:center;
align-content:center
}

.systems-hero-text{
min-width:0
}

.systems-hero h1{
font-family:var(--serif);
font-weight:400;
font-size:clamp(52px,5.6vw,94px);
line-height:1;
letter-spacing:0;
max-width:780px;
margin:0 0 24px
}

.systems-hero p{
font-size:clamp(18px,1.45vw,23px);
line-height:1.3;
max-width:700px;
margin:0;
color:#403c37
}

.systems-hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
height:auto;
overflow:visible;
background:#fff
}

.systems-hero-grid img{
width:100%;
height:clamp(170px,24vh,320px);
min-width:0;
object-fit:contain;
object-position:center;
background:#fff;
filter:grayscale(4%) contrast(1.03)
}

.system-panel{
padding:64px 42px;
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:minmax(420px,1.08fr) minmax(360px,.72fr);
gap:48px;
align-items:center;
scroll-margin-top:96px
}

.system-panel.reverse{
grid-template-columns:minmax(360px,.72fr) minmax(420px,1.08fr)
}

.system-panel.reverse .system-visual{
grid-column:2
}

.system-panel.reverse .system-copy{
grid-column:1;
grid-row:1
}

.system-visual{
margin:0;
background:#fff;
min-width:0
}

.system-visual img{
width:100%;
height:clamp(430px,58vh,720px);
object-fit:contain;
object-position:center;
background:#fff
}

.system-copy h2{
font-family:var(--serif);
font-weight:400;
font-size:clamp(40px,4.2vw,74px);
line-height:1.02;
letter-spacing:0;
margin:0 0 24px
}

.system-copy p{
font-size:20px;
line-height:1.42;
max-width:720px;
margin:0 0 32px;
color:#403c37
}

.system-links{
display:grid;
border-top:1px solid var(--line)
}

.system-links a{
display:flex;
align-items:center;
justify-content:space-between;
min-height:44px;
border-bottom:1px solid rgba(17,17,17,.22);
font-size:12px;
letter-spacing:.12em;
text-transform:uppercase;
color:#292929
}

.system-links a:after{
content:'Open';
font-size:10px;
letter-spacing:.14em;
color:var(--muted)
}

.system-links a:hover,
.system-links a:hover:after{
color:var(--accent)
}

.systems-close {
  padding: 80px 8vw 110px;
  border-top: 1px solid #111;

}

.systems-close p {
  max-width: 760px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 22px 0 34px;
}

.systems-close .text-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

.practice-hero{
padding:136px 42px 92px;
border-bottom:1px solid var(--line)
}

.practice-hero h1{
font-family:var(--serif);
font-weight:400;
font-size:clamp(56px,7.4vw,122px);
line-height:.96;
letter-spacing:0;
max-width:1160px;
margin:0 0 34px
}

.practice-hero p{
font-size:clamp(22px,2.3vw,34px);
line-height:1.18;
max-width:1040px;
margin:0;
color:#d7d0c5
}

.practice-intro{
padding:72px 42px;
border-bottom:1px solid var(--line)
}

.practice-intro p{
font-family:var(--serif);
font-size:clamp(30px,3.6vw,58px);
line-height:1.08;
max-width:1320px;
margin:0
}

.practice-block{
padding:78px 42px;
border-bottom:1px solid var(--line);
display:grid;
grid-template-columns:minmax(320px,.42fr) minmax(0,1fr);
gap:72px;
align-items:start;
scroll-margin-top:96px
}

.practice-block h2{
font-family:var(--serif);
font-weight:400;
font-size:clamp(38px,4vw,72px);
line-height:1.02;
letter-spacing:0;
max-width:760px;
margin:0
}

.practice-text{
font-size:21px;
line-height:1.46;
max-width:900px
}

.practice-text p{
margin:0 0 24px
}

.practice-text p:last-child{margin-bottom:0}

.practice-close{
padding:82px 42px 96px;
border-bottom:1px solid var(--line)
}

.practice-close p{
font-family:var(--serif);
font-size:clamp(34px,4.6vw,76px);
line-height:1.05;
max-width:1280px;
margin:0 0 38px
}

.about-hero {
  display: grid;
  grid-template-columns: minmax(0, 760px) 420px;
  gap: 90px;
  align-items: start;
  padding: 130px 8vw 90px;
  border-bottom: 1px solid #111;
}

.about-intro h1 {
  font-size: clamp(64px, 7vw, 50px);
  line-height: 0.95;
  margin: 24px 0 34px;
}

.about-intro p {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.38;
}

.about-portrait img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.about-section {
  display: grid;
  grid-template-columns: 320px minmax(0, 760px);
  gap: 80px;
  padding: 70px 8vw;
  border-bottom: 1px solid #d8d2ca;
}

.about-section h2 {
  font-size: 34px;
  line-height: 1.1;
}

.about-copy p {
  font-size: 18px;
  line-height: 1.55;
}

.about-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid #111;
}

.about-fields article {
  padding: 24px 0;
  border-bottom: 1px solid #d8d2ca;
}

.about-fields span {
  font-size: 22px;
}

.about-fields p {
  max-width: 620px;
}

.press-hero{
margin-left:84px;
min-height:72vh;
padding:140px 42px 84px;
display:grid;
grid-template-columns:minmax(360px,.9fr) minmax(420px,1fr);
gap:72px;
align-items:end;
border-bottom:1px solid var(--line);
background:#f8f8f7
}

.press-hero h1{
font-family:var(--serif);
font-weight:400;
font-size:clamp(46px,4.8vw,78px);
line-height:1.04;
letter-spacing:0;
max-width:780px;
margin:22px 0 0
}

.press-hero p{
font-size:clamp(18px,1.45vw,24px);
line-height:1.36;
max-width:820px;
margin:0;
color:#171717
}

.press-section{
margin-left:84px;
padding:76px 42px;
border-bottom:1px solid var(--line);
background:#fff
}

.press-section-head{
display:grid;
grid-template-columns:minmax(300px,.55fr) minmax(420px,1fr);
gap:72px;
align-items:start;
margin-bottom:44px
}

.press-section-head h2{
font-family:var(--serif);
font-weight:400;
font-size:clamp(32px,3.2vw,56px);
line-height:1.06;
letter-spacing:0;
margin:18px 0 0
}

.press-section-head p{
font-size:clamp(17px,1.25vw,21px);
line-height:1.42;
max-width:820px;
margin:0;
color:#3f3a35
}

.press-feature-grid,
.press-list{
display:grid;
border-top:1px solid var(--line)
}

.press-feature-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}

.press-row{
display:grid;
grid-template-columns:86px 74px minmax(0,1fr) 54px;
gap:18px;
align-items:start;
padding:20px 0;
border-bottom:1px solid rgba(17,17,17,.18);
color:inherit;
text-decoration:none
}

.press-feature-grid .press-row{
display:block;
padding:24px 24px 30px;
border-right:1px solid rgba(17,17,17,.18)
}

.press-feature-grid .press-row:nth-child(2n){
border-right:0
}

.press-row span,
.press-row strong,
.press-row b{
font-size:11px;
line-height:1.25;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--muted);
font-weight:400
}

.press-row em{
font-style:normal;
font-size:17px;
line-height:1.38;
color:#111
}

.press-feature-grid .press-row span,
.press-feature-grid .press-row strong,
.press-feature-grid .press-row b{
display:inline-block;
margin:0 14px 18px 0
}

.press-feature-grid .press-row em{
display:block;
font-family:var(--serif);
font-size:clamp(25px,2vw,38px);
line-height:1.08
}

.press-row:hover{
background:#f4f1ec
}

.press-list.compact{
max-width:1180px
}

@media (max-width:1200px){
  .detail-head{
    grid-template-columns:1fr;
    gap:24px;
  }

  .project-content{
    grid-template-columns:1fr;
    gap:34px;
  }

  .project-content-alt .project-media{
    grid-template-columns:1fr 1fr;
  }

  .project-gallery{
    grid-template-columns:1fr;
  }

  .archive-roles{
    grid-template-columns:1fr;
  }

  .archive-roles a,
  .archive-roles a:last-child{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .archive-roles a:last-child{border-bottom:0}

  .archive-row{
    grid-template-columns:90px minmax(220px,.8fr) minmax(0,1fr) 60px;
  }

  .systems-hero,
  .system-panel,
  .system-panel.reverse{
    grid-template-columns:1fr;
  }
    
    .systems-close {
  padding: 80px 8vw 110px;
  border-top: 1px solid #111;
  background: #f7f3ec;
}

.systems-close p {
  max-width: 760px;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 22px 0 34px;
}

.systems-close .text-link {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

  .system-panel.reverse .system-visual,
  .system-panel.reverse .system-copy{
    grid-column:auto;
    grid-row:auto;
  }

  .practice-block{
    grid-template-columns:1fr;
    gap:28px;
  }

  .about-hero,
  .about-section{
    grid-template-columns:1fr;
    gap:42px;
  }

  .about-portrait img{
    height:auto;
    max-height:none;
  }

  .about-fields{
    grid-template-columns:1fr;
  }

  .about-fields article,
  .about-fields article:last-child{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .about-fields article:last-child{border-bottom:0}

  .press-hero,
  .press-section-head{
    grid-template-columns:1fr;
    gap:34px;
  }

  .press-feature-grid{
    grid-template-columns:1fr;
  }

  .press-feature-grid .press-row,
  .press-feature-grid .press-row:nth-child(2n){
    border-right:0;
  }

  .press-row{
    grid-template-columns:76px 64px minmax(0,1fr);
  }

  .press-row b{
    display:none;
  }
}

@media (min-width:1201px) and (max-height:560px){
  .systems-hero{
    min-height:calc(100vh - 72px);
    padding-top:56px;
    padding-bottom:28px;
    gap:30px;
  }

  .systems-hero h1{
    font-size:clamp(48px,4.7vw,76px);
    line-height:.98;
    margin-bottom:18px;
  }

  .systems-hero p{
    font-size:16px;
    line-height:1.25;
    max-width:620px;
  }

  .systems-hero-grid{
    gap:10px;
  }

  .systems-hero-grid img{
    height:clamp(130px,30vh,190px);
  }
}

@media (max-width:1100px){
  .detail-images{
    grid-template-columns:1fr;
  }

  .detail-images img{
    height:clamp(320px,54vh,620px);
  }

  .project-embed iframe{
    min-height:360px;
  }

  .video-hero{
    padding:0 20px;
  }

  .project-gallery img{
    height:clamp(280px,48vh,540px);
  }
}

/* Rest unverändert */

.systems{
display:grid;
grid-template-columns:repeat(4,1fr);
border:1px solid var(--line);
border-right:0
}

.system{
min-height:300px;
padding:24px;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
justify-content:space-between
}

.system h3{
font-family:var(--serif);
font-weight:400;
font-size:34px;
line-height:1;
margin:0
}

.system p{color:#46413c}

.dark{background:var(--dark);color:var(--darkink)}

.dark .section-head,
.dark .project-card{border-color:#f3efe7}

.dark p,
.dark .intro,
.dark .project-card p{color:#c8c0b4}

.dark .kicker{color:#a89f94}

/* Rest bleibt identisch */


/* --- MOBILE OPTIMIZATION --- */
@media (max-width:640px){

  .topnav{
    height:auto;
    min-height:64px;
    padding:16px 18px;
    align-items:flex-start;
    gap:14px;
    flex-direction:column;
  }

  .topnav nav{
    flex-wrap:wrap;
    gap:12px 18px;
  }

  .hero{
    padding-top:140px;
  }

  .hero h1{
    font-size:56px;
  }

  .lead{
    font-size:20px;
  }

  .hero-meta,
  .work-axis{
    grid-template-columns:1fr;
  }

  .section h2{
    font-size:42px;
  }

  .project-card h3{
    font-size:28px;
  }

  .detail-hero{
    padding:118px 18px 58px;
  }

  .practice-hero{
    padding:132px 18px 64px;
  }

  .practice-hero h1{
    font-size:48px;
  }

  .practice-hero p{
    font-size:21px;
  }

  .practice-intro,
  .practice-block,
  .practice-close{
    padding-left:18px;
    padding-right:18px;
  }

  .archive-hero{
    padding:126px 18px 48px;
  }

  .archive-hero h1{
    font-size:42px;
  }

  .archive-memory{
    padding-left:18px;
    padding-right:18px;
  }

  .archive-row{
    grid-template-columns:1fr;
    gap:4px;
    padding:16px 0 18px;
  }

  .archive-row strong{
    font-size:24px;
  }

  .systems-hero{
    padding:112px 18px 46px;
    gap:30px;
  }

  .systems-hero h1{
    font-size:48px;
  }

  .systems-hero-grid{
    grid-template-columns:1fr;
    height:auto;
  }

  .systems-hero-grid img{
    height:240px;
  }

  .systems-hero-grid img:nth-child(1){
    grid-row:auto;
  }

  .system-panel{
    padding:52px 18px;
    gap:26px;
  }

  .system-visual img{
    height:clamp(280px,50vh,480px);
  }

  .system-copy h2{
    font-size:38px;
  }

  .system-copy p{
    font-size:18px;
  }


  .practice-intro p,
  .practice-close p{
    font-size:34px;
  }

  .practice-block h2{
    font-size:36px;
  }

  .practice-text{
    font-size:18px;
  }

  .project-content,
  .project-grid,
  .project-gallery{
    margin-left:84px;
    padding:52px 18px;
  }

  .project-content-alt .project-media{
    grid-template-columns:1fr;
  }

  .project-facts div{
    grid-template-columns:1fr;
    gap:8px;
  }

  .detail-head h1{
    font-size:46px;
  }

  .project-card > img,
  .project-card.tall > img{
    height:clamp(280px,52vh,480px);
  }

  .image-pair{
    grid-template-columns:1fr;
    height:auto;
  }

  .image-pair img{
    height:clamp(240px,44vh,420px);
  }
}

/* --- GERMAN HERO OVERRIDES ---
   The German headline is longer than the English version.
   These rules keep the hero readable and prevent the text block from being cut off.
*/
html[lang="de"] .hero{
  grid-template-columns:minmax(360px,.95fr) minmax(420px,1.22fr);
  gap:64px;
}

html[lang="de"] .hero h1{
  font-size:clamp(54px,7.8vw,100px);
  line-height:.9;
  letter-spacing:-.055em;
  margin:0 0 24px;
}

html[lang="de"] .lead{
  font-size:clamp(19px,1.7vw,18px);
  line-height:1.28;
  letter-spacing:.002em;
  max-width:620px;
}

html[lang="de"] .hero-meta{
  margin-top:42px;
}

@media (max-width:1100px){
  html[lang="de"] .hero h1{
    font-size:clamp(50px,8.5vw,92px);
  }
}

@media (max-width:640px){
  html[lang="de"] .hero h1{
    font-size:48px;
    line-height:.92;
  }
}

.footer{
  margin-left:84px;
  padding:32px 52px;
  display:flex;
  justify-content:space-between;
  border-top:1px solid rgba(17,17,17,.1);
  font-size:12px;
  letter-spacing:.08em;
}

/* =========================================================
   RESPONSIVE LAYOUT
   Tablet + Mobile
   ========================================================= */

/* Tablet-Regeln hier */
@media (max-width: 1099px) and (min-width: 769px) {

  .rail {
    width: 72px;
  }

  .topnav {
    padding: 24px 5vw;
  }

  main {
    margin-left: 72px;
  }

  .hero,
  .about-hero,
  .systems-hero,
  .archive-hero,
  .section {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  h1,
  .hero h1,
  .about-intro h1,
  .systems-hero h1,
  .archive-hero h1 {
    font-size: clamp(64px, 9vw, 110px);
    line-height: 0.92;
  }

  .grid-feature,
  .work-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-hero,
  .systems-hero {
    grid-template-columns: 1fr 360px;
    gap: 48px;
  }

  .system-panel,
  .system-panel.reverse,
  .about-section {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}
/* Mobile-Regeln hier */

@media (max-width: 768px) {

  body {
    overflow-x: hidden;
  }

  .site {
    display: block;
  }

  .rail {
    display: none;
  }

.topnav {
  position: relative;
  height: auto;
  width: auto;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #111;
  display: block;
}

.topnav .name {
  display: block;
  margin-bottom: 16px;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #111;
  font-weight: 700;
}

.topnav nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: flex-start;
}

.topnav nav a {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.11em;
}

  main {
    margin-left: 0;
    width: 100%;
  }

.hero,
.about-hero,
.systems-hero,
.archive-hero,
.section,
.intro-section {
  padding: 42px 20px 56px;
}

.hero,
.about-hero,
.systems-hero,
.section-head,
.about-section,
.system-panel,
.system-panel.reverse {
  display: block;
}

h1,
.hero h1,
.systems-hero h1,
.archive-hero h1,
.about-intro h1 {
  font-size: clamp(50px, 11vw, 70px);
  line-height: 0.92;
  letter-spacing: -0.045em;
}

h2,
.system-copy h2,
.about-section h2 {
  font-size: clamp(30px, 8vw, 44px);
  line-height: 1;
}

.lead,
.intro,
.about-intro p,
.about-copy p,
.system-copy p,
.archive-hero p,
.systems-hero p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 22ch;
}

  .hero-image,
  .about-portrait,
  .systems-hero-grid,
  .system-visual {
    margin-top: 36px;
  }

  .hero-image img,
  .about-portrait img,
  .system-visual img {
    width: 100%;
    height: auto;
  }

  .grid-feature,
  .work-list,
  .about-fields,
  .archive-roles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .project-card,
  .archive-roles a {
    width: 100%;
  }

  .image-pair {
    grid-template-columns: 1fr 1fr;
  }

  .hero-meta,
  .work-axis {
    background: transparent;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    display: block;
    margin: 48px 0 34px;
  }

  .hero-meta a,
  .work-axis a {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid #d8d2ca;
    color: #6f6a64;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
  }

  .hero-meta a:last-child,
  .work-axis a:last-child {
    border-bottom: none;
  }


  .btn {
    width: auto;
  }

  .system-panel,
  .about-section {
    padding: 58px 20px;
  }

  .system-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .archive-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }

  .archive-row span,
  .archive-row em,
  .archive-row b {
    font-size: 12px;
  }

  .systems-close {
    padding: 64px 20px 80px;
  }

  .systems-close p {
    font-size: clamp(24px, 8vw, 38px);
    line-height: 1.12;
  }

  

  .footer {
    display: block;
    padding: 28px 20px;
  }

  .footer div + div {
    margin-top: 10px;
  }
}