/* BRUNN & WEST: Architektur. Lädt nach demo.css, wirkt nur unter body.architecture.
   Palette: #f3f3ed Grund, #292d27 Tinte, #373d32 Akzent, #1c1f1a Bühne (flach), #c9b98a Messing (nur Faden, Zahl, Schnittlinie). */
.architecture{--stage:#1c1f1a;--stage-ink:#eef0e6;--stage-mute:#b4baa9;--stage-line:rgba(238,240,230,.18);--brass:#c9b98a}

/* Kopf: Pfeile weg, ein Handlungswort */
.architecture .nav-cta{padding-right:0}
.architecture .hero-label{display:none}
.architecture .hero-copy{will-change:transform,opacity}

/* Gegenspieler: das gemeinsame Einblenden aus demo.js liegt auf diesen Elementen, die hier eigene Szenen tragen */
.architecture .statement h2.reveal.pending,.architecture .statement h2.reveal{opacity:1!important;transform:none!important;transition:none}

/* Haltung: Text links, hohes Bild rechts */
.architecture .statement{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(48px,7vw,130px);align-items:center;padding-block:clamp(90px,11vw,170px)}
.architecture .st-text h2{font-size:clamp(34px,4.3vw,68px);line-height:1.1;max-width:15ch}
.architecture .st-text h2 em{font-family:Editorial,Georgia,serif;font-style:italic;letter-spacing:-.02em;color:var(--muted)}
.architecture .st-fig{margin:0}
.architecture .st-img{overflow:hidden;aspect-ratio:5/4}
.architecture .st-img img{transform:scale(1.08);object-position:34% 50%}
.architecture .st-fig figcaption,.architecture .ct-fig figcaption{margin-top:14px;font-size:13px;color:var(--muted);max-width:48ch}
.architecture .ct-fig figcaption a{text-decoration:underline;text-underline-offset:3px}
.architecture .st-w{opacity:1}

/* Signaturszene: Ausgewählte Entwürfe. Grundzustand = lesbare Abfolge ohne Pin (Handy, reduzierte Bewegung, ohne Skript) */
.architecture .ent{background:var(--stage);color:var(--stage-ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:72px clamp(40px,6vw,110px);padding:clamp(80px,9vw,140px) var(--pad);align-items:start}
.architecture .ent-pin,.architecture .ent-stick,.architecture .ent-text,.architecture .ent-media,.architecture .ent-frame,.architecture .ent-panels{display:contents}
.architecture .ent-head{grid-column:1/-1;grid-row:1}
.architecture .ent-head h2{max-width:14ch}
.architecture .ent-head p{margin-top:18px;color:var(--stage-mute)}
.architecture .ent-nav,.architecture .ent-cap,.architecture .ent-cut{display:none}
.architecture .ent-panel{grid-column:1;grid-row:var(--r);align-self:center;max-width:46ch}
.architecture .ent-fig{grid-column:2;grid-row:var(--r);aspect-ratio:3/2;overflow:hidden;margin:0}
.architecture .ent-fig img{position:static}
.architecture .ent-fig figcaption{padding-top:12px;font-size:13px;color:var(--stage-mute);position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.architecture .ent-panel h3{font-size:clamp(28px,3vw,42px);letter-spacing:-.04em}
.architecture .ent-panel p{margin-top:18px;color:#c6cbbd;font-size:16px;max-width:42ch}
.architecture .ent-plate{margin:28px 0 0;border-top:1px solid var(--stage-line);font-size:14px}
.architecture .ent-plate div{display:grid;grid-template-columns:5.5rem 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--stage-line)}
.architecture .ent-plate dt{color:var(--stage-mute);letter-spacing:.04em}
.architecture .ent-plate dd{margin:0;color:var(--stage-ink)}
@media(max-width:720px){
 .architecture .ent{grid-template-columns:minmax(0,1fr);gap:22px;padding-block:80px}
 .architecture .ent-head{margin-bottom:18px}
 .architecture .ent-fig{grid-column:1;grid-row:var(--rm);aspect-ratio:auto;margin-top:26px}
 .architecture .ent-fig figcaption{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
 .architecture .ent-fig{overflow:visible}
 .architecture .ent-fig img{aspect-ratio:4/3;height:auto}
 .architecture .ent-panel{grid-column:1;grid-row:var(--rm);margin-bottom:40px;max-width:none}
}

/* Lebender Zustand: angepinnt, vom Scrollstand gesteuert */
.architecture .ent.ent-live{display:block;padding:0}
.ent-live .ent-pin{display:block;height:465vh;position:relative}
.ent-live .ent-stick{display:grid;position:sticky;top:0;height:100vh;height:100dvh;grid-template-columns:minmax(380px,5fr) 7fr;gap:0 clamp(40px,5vw,96px);padding-left:var(--pad);overflow:hidden}
.ent-live .ent-text{display:flex;flex-direction:column;justify-content:center;min-height:0;padding:5vh 0}
.ent-live .ent-head{grid-column:auto;margin-bottom:clamp(22px,4vh,44px)}
.ent-live .ent-head h2{font-size:clamp(32px,3vw,44px);max-width:none}
.ent-live .ent-head p{margin-top:12px;font-size:15px}
.ent-live .ent-nav{display:block;position:relative;padding-left:26px}
.ent-live .ent-thread{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--stage-line)}
.ent-live .ent-thread i{position:absolute;left:-1px;top:1px;width:3px;height:56px;background:var(--brass);will-change:transform}
.ent-live .ent-list{list-style:none;margin:0;padding:0}
.ent-live .ent-list li{border-top:1px solid var(--stage-line)}
.ent-live .ent-list li:last-child{border-bottom:1px solid var(--stage-line)}
.ent-live .ent-list button{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;height:56px;text-align:left;color:var(--stage-ink);opacity:.6;will-change:opacity}
.ent-live .ent-list .n{font-size:13px}
.ent-live .ent-list .t{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.035em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ent-live .ent-list .k{font-size:13px;letter-spacing:.04em}
.ent-live .ent-list button:focus-visible{outline-offset:-3px}
.ent-live .ent-panels{display:grid;margin-top:clamp(22px,4vh,40px);padding-left:26px}
.ent-live .ent-panel{grid-area:1/1;max-width:44ch;opacity:0;will-change:opacity,transform;align-self:start}
.ent-live .ent-panel h3{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ent-live .ent-panel p{margin-top:0;font-size:15px;line-height:1.55}
.ent-live .ent-plate{margin-top:20px}
.ent-live .ent-media{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;padding:6vh var(--pad) 4.5vh 0;min-height:0}
.ent-live .ent-frame{display:block;position:relative;min-height:0}
.ent-live .ent-fig{position:absolute;inset:0;grid-column:auto;grid-row:auto;aspect-ratio:auto;overflow:hidden;will-change:clip-path}
.ent-live .ent-fig img{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.ent-live .ent-fig:first-child{clip-path:none}
.ent-live .ent-fig:not(:first-child){clip-path:inset(0 50% 0 50%)}
.ent-live .ent-cut{display:block;position:absolute;inset:0;border:1px solid var(--brass);opacity:0;pointer-events:none;will-change:transform,opacity}
.ent-live .ent-cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px;font-size:13px;color:var(--stage-mute);max-width:none;width:100%}
.ent-live .ent-cap .c{color:var(--stage-ink);letter-spacing:.06em}
@media(max-width:1100px){.ent-live .ent-stick{grid-template-columns:minmax(330px,5fr) 6fr}.ent-live .ent-list .k{display:none}}

/* Ausgang der Szene: weicher Übergang statt harter Kante */
.architecture .ent-exit{height:clamp(110px,15vh,170px);background:linear-gradient(180deg,var(--stage),var(--bg))}

/* Substanz-Bild */
.architecture .wide-image{margin:0;height:clamp(460px,52vw,760px);will-change:clip-path}
.architecture .wide-image img{will-change:transform;object-position:50% 55%}
.architecture .wide-image:after{background:linear-gradient(90deg,rgba(10,17,12,.8),rgba(10,17,12,.46) 52%,rgba(10,17,12,.08) 90%),linear-gradient(0deg,rgba(10,17,12,.55),transparent 55%)}
.architecture .hero-photo:after{background:linear-gradient(90deg,rgba(11,20,10,.8),rgba(11,20,10,.46) 48%,rgba(11,20,10,.06) 80%)}
.architecture .photo-caption{font-size:13px}
.architecture .wide-image>div{left:clamp(24px,5vw,90px);bottom:clamp(30px,5vw,70px)}
.architecture .wide-image h2{font-size:clamp(32px,4vw,58px)}

/* Zusammenarbeit: eine Linie, die sich zeichnet */
.architecture .process{padding-top:clamp(90px,10vw,150px)}
.architecture .process>h2{margin-bottom:clamp(48px,6vw,90px)}
.architecture .proc{position:relative}
.architecture .proc-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%}
.architecture .process li{border-top:0;padding-top:34px;position:relative}
.architecture .process li:before{content:'';position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.architecture .process li>span{font-size:12px;margin-bottom:26px}
.js.arch-an .proc-line{transform:scaleX(0)}
.js.arch-an .proc-line.da{transform:scaleX(1);transition:transform 2.1s cubic-bezier(.45,0,.2,1)}

/* Kontakt: ein Tipp, drei Wege */
.architecture .contact{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(48px,7vw,120px);align-items:center}
.architecture .contact h2{max-width:14ch;margin:0 0 20px}
.architecture .ct-topics{margin-top:34px;border-bottom:1px solid var(--line)}
.architecture .ct-topics button{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;padding:24px 0;border-top:1px solid var(--line);text-align:left;font-size:clamp(20px,2vw,27px);letter-spacing:-.03em;line-height:1.25;color:var(--ink)}
.architecture .ct-topics button span:last-child{font-size:24px;flex:none;transition:transform .3s var(--ease)}
.architecture .ct-topics button:hover span:last-child{transform:translate(4px,-4px)}
.architecture .ct-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.architecture .ct-steps li{padding-left:18px;position:relative}
.architecture .ct-steps li:before{content:'';position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--muted)}
.architecture .ct-fig{margin:0}
.architecture .ct-fig img{aspect-ratio:4/5;height:auto;max-height:560px}

/* Fuß: 13 px, Zeilenraster 44 px */
.architecture footer>div{font-size:13px;align-items:center}
.architecture footer nav{align-items:center;gap:0 26px}
.architecture footer nav a{display:inline-flex;align-items:center;min-height:44px}
.architecture footer>div>span{min-height:44px;display:inline-flex;align-items:center}
.architecture footer>p{font-size:13px}
.architecture .nav-cta{display:inline-flex}

@media(max-width:850px){
 .architecture .statement{grid-template-columns:minmax(0,1fr);gap:48px}
 .architecture .st-text h2{max-width:none}
 .architecture .contact{grid-template-columns:minmax(0,1fr)}
 .architecture .ct-fig img{aspect-ratio:4/3}
 .architecture .st-fig,.architecture .ct-fig{margin-top:44px}
 .architecture .statement{gap:0}
 .architecture .st-fig{margin-top:36px}
 .architecture .process ol{gap:36px}
}
@media(max-width:600px){
 .architecture .statement{padding-top:48px}
 .architecture .statement h2{margin-top:0}
 .architecture .process ol{grid-template-columns:minmax(0,1fr);gap:40px}
 .architecture .proc-line{right:auto;bottom:0;width:1px;height:auto;transform-origin:50% 0}
 .architecture .process li{padding:0 0 0 30px}
 .architecture .process li:before{top:2px;left:-3px}
 .architecture .process li>span{margin-bottom:12px}
 .architecture .wide-image>div{right:24px}
 .architecture .wide-image:after{background:linear-gradient(0deg,rgba(10,17,12,.78),rgba(10,17,12,.1) 70%)}
 .architecture .hero-photo:after{background:linear-gradient(90deg,rgba(11,20,10,.84),rgba(11,20,10,.5))}
}
@media(prefers-reduced-motion:reduce){
 .architecture .hero-copy,.architecture .st-img img,.architecture .wide-image,.architecture .wide-image img{transform:none!important;clip-path:none!important;opacity:1!important}
 .js.arch-an .proc-line,.js .proc-line{transform:none}
}
html.motion-paused .architecture *{transition:none!important}

/* Runde 3 (28.10.2026): zeitgesteuerte Bewegung ruhiger. Einblenden 0,8 s auf 1,05 s, Hero 0,85 s auf 1,1 s, sanftere Kurve; nur ohne reduzierte Bewegung. */
@media(prefers-reduced-motion:no-preference){
 .js .architecture .reveal{transition:opacity 1.05s cubic-bezier(.33,.1,.2,1),transform 1.05s cubic-bezier(.33,.1,.2,1)}
 .js .architecture .reveal.pending{transform:translateY(22px)}
 .js .architecture .process li.reveal:nth-child(2){transition-delay:.14s}
 .js .architecture .process li.reveal:nth-child(3){transition-delay:.28s}
 .js .architecture .hero h1{animation:hero-in 1.1s cubic-bezier(.33,.1,.2,1) both}
 .js .architecture .hero .hero-desc{animation:hero-in 1.1s .14s cubic-bezier(.33,.1,.2,1) both}
 .js .architecture .hero .button{animation:hero-in 1.1s .28s cubic-bezier(.33,.1,.2,1) both}
}