/* Reference page only. Shared header, original logo and type remain untouched. */
.references-main{--ref-text:var(--ink);--ref-sub:var(--muted);--ref-bg:#fff;background:var(--ref-bg);color:var(--ref-text)}
.ref-hero{position:relative;isolation:isolate;min-height:550px;display:flex;align-items:center;background:#041a30;color:#fff;box-shadow:0 5px 10px #041a3020}.ref-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#041a30d9,#041a3060 57%,#041a3010)}.ref-hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%;z-index:-2}.ref-hero-panel{background:linear-gradient(130deg,#102f49f5,#071f36ed);border:1px solid #486780;border-radius:15px;padding:34px 38px;max-width:650px;box-shadow:0 4px 8px #0003;margin:42px 0 70px}.ref-hero-panel h1{font-size:clamp(2.8rem,5vw,4.7rem)}.ref-hero-panel p{color:#e2edf6;max-width:500px}.ref-hero-panel .eyebrow{color:#b9d9ef}.ref-hero-caption{position:absolute;right:5vw;bottom:20px;font-size:.78rem;background:#082642e8;padding:6px 12px;border-radius:7px;color:#f2f7fb;border:1px solid #526f86}
.ref-theme-bar{padding:24px 0;border-bottom:1px solid var(--line);background:#fff;color:var(--ink)}.ref-theme-bar>.wrap{display:flex;justify-content:space-between;gap:20px;align-items:center}.ref-theme-bar span{font-weight:700;font-size:.88rem}.ref-theme-bar small{display:block;font-size:.72rem;color:var(--muted);font-weight:400}.ref-theme-bar [role=group]{display:flex;gap:10px;flex-wrap:wrap}.ref-theme-bar button,.ref-filters button{border:1px solid #9cb6ca;border-radius:12px;background:linear-gradient(#153b5a,#082642);box-shadow:var(--shadow);color:#f0f7fc;min-height:44px;padding:10px 16px;font-size:.83rem}.ref-theme-bar button[aria-pressed=true],.ref-filters button[aria-pressed=true]{background:linear-gradient(#087bc5,#075c9f);border-color:#168dcf;box-shadow:0 0 0 2px #0e79b32b,var(--shadow)}
.ref-collection{padding:80px 0 90px;scroll-margin-top:150px}.ref-intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:end;gap:60px;margin-bottom:30px}.ref-intro p{color:var(--ref-sub);font-size:1.05rem}.ref-filters{display:flex;gap:10px;flex-wrap:wrap}.ref-filter-status{color:var(--ref-sub);font-size:.78rem;margin:18px 0 30px}.ref-project-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 28px}.ref-project{grid-column:span 6;min-width:0;align-self:start;scroll-margin-top:155px}.ref-cover{position:relative;box-shadow:0 4px 9px #08264222;border-radius:15px;overflow:hidden;border:1px solid #7798b5}.ref-cover figure,.ref-cover .photo-link{display:block}.ref-cover img{height:360px;width:100%;object-fit:cover}.ref-cover figcaption{display:none}.ref-photo-tag{position:absolute;bottom:18px;left:18px;background:#082642ef;border:1px solid #6b8ca8;border-radius:9px;padding:6px 12px;color:white;font-size:.8rem;box-shadow:0 3px 5px #0003;pointer-events:none}.ref-copy{position:relative;z-index:1;margin: -1px 15px 0;padding:24px 26px;background:linear-gradient(135deg,#133651,#071f36);border:1px solid #43617a;border-radius:0 0 15px 15px;box-shadow:var(--shadow);color:#fff}.ref-copy .eyebrow{color:#b1d3eb;font-size:.67rem;margin-bottom:8px}.ref-copy h2{font-size:1.65rem;line-height:1.18}.ref-copy p{font-size:.88rem;color:#d7e6f2}.ref-copy .button{font-size:.82rem;min-height:44px;padding:10px 16px;background:linear-gradient(#174b71,#0a2c48);color:#fff;border-color:#5a7f9c}.ref-story-strip{display:none}.ref-details{grid-column:1/-1;padding:28px;margin-top:18px;background:#f2f7fb;border:1px solid #c6d9e7;border-radius:15px;color:var(--ink)}.ref-details h3{font-size:1.2rem}.ref-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.ref-detail-grid img{width:100%;height:270px;object-fit:contain;background:#e6eef4}.ref-detail-grid figcaption{font-size:.78rem;color:var(--muted)}.ref-rights{font-size:.75rem;line-height:1.6;margin-top:24px;color:var(--muted)}.ref-contact{background:#fff;color:var(--ink)}
/* 01: airy, asymmetrical photo editorial. */
[data-ref-theme=architektur] .ref-project:nth-child(3n+1){grid-column:span 7}[data-ref-theme=architektur] .ref-project:nth-child(3n+2){grid-column:span 5}[data-ref-theme=architektur] .ref-project:nth-child(3n+2) .ref-cover img{height:430px}
/* 02: darker gallery, same existing blue surfaces and controls. */
[data-ref-theme=galerie]{--ref-text:#edf5fc;--ref-sub:#b6cada;--ref-bg:#041a30}[data-ref-theme=galerie] .ref-intro .eyebrow{color:#a4cce8}[data-ref-theme=galerie] .ref-cover{border-color:#567b99;box-shadow:0 5px 10px #0005}[data-ref-theme=galerie] .ref-project:nth-child(even){margin-top:65px}[data-ref-theme=galerie] .ref-copy{background:linear-gradient(135deg,#133650,#08233a)}
/* 03: spacious project stories; phase photos stay separate, no misleading slider. */
[data-ref-theme=geschichten] .ref-project{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;gap:0;align-items:stretch;margin-bottom:28px}[data-ref-theme=geschichten] .ref-cover{border-radius:15px 0 0 15px}[data-ref-theme=geschichten] .ref-cover .photo-link,[data-ref-theme=geschichten] .ref-cover figure{height:100%}[data-ref-theme=geschichten] .ref-cover img{min-height:370px;height:100%;max-height:470px}[data-ref-theme=geschichten] .ref-copy{margin:0;border-radius:0 15px 15px 0;padding:38px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}[data-ref-theme=geschichten] .ref-copy h2{font-size:clamp(1.8rem,3vw,2.5rem)}[data-ref-theme=geschichten] .ref-story-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;grid-column:1/-1;margin-top:20px}[data-ref-theme=geschichten] .ref-story-strip img{height:220px;width:100%;object-fit:cover}[data-ref-theme=geschichten] .ref-story-strip figcaption{font-size:.78rem}[data-ref-theme=geschichten] .ref-project:nth-child(even) .ref-cover{grid-column:2;grid-row:1;border-radius:0 15px 15px 0}[data-ref-theme=geschichten] .ref-project:nth-child(even) .ref-copy{grid-column:1;grid-row:1;border-radius:15px 0 0 15px}
@media(max-width:1000px){.ref-theme-bar>.wrap{align-items:flex-start;flex-direction:column}.ref-project-grid{gap:28px 20px}.ref-cover img{height:300px}.ref-intro{gap:30px}.ref-copy{padding:22px}.ref-copy h2{font-size:1.5rem}[data-ref-theme=geschichten] .ref-copy{padding:26px}}
@media(max-width:760px){.ref-hero{min-height:510px}.ref-hero-panel{padding:25px;margin:32px 0 70px;border-radius:15px}.ref-hero-panel h1{font-size:2.75rem}.ref-hero-caption{left:24px;right:auto;font-size:.7rem}.ref-theme-bar{padding:20px 0}.ref-theme-bar [role=group]{display:grid;grid-template-columns:1fr;width:100%}.ref-theme-bar button{text-align:left}.ref-collection{padding:50px 0}.ref-intro{grid-template-columns:1fr;gap:8px}.ref-project-grid{display:block}.ref-project{margin-bottom:35px!important}.ref-cover img{height:320px!important}.ref-copy{margin:0 8px;padding:22px}.ref-detail-grid{grid-template-columns:1fr}.ref-details{padding:18px}.ref-filters button{flex:1 1 140px;font-size:.8rem;padding:10px 12px}[data-ref-theme=geschichten] .ref-project{display:block}[data-ref-theme=geschichten] .ref-cover{border-radius:15px 15px 0 0!important}[data-ref-theme=geschichten] .ref-copy{border-radius:0 0 15px 15px!important;margin:0;padding:24px}[data-ref-theme=geschichten] .ref-story-strip{gap:9px}[data-ref-theme=geschichten] .ref-story-strip img{height:150px}[data-ref-theme=geschichten] .ref-story-strip figcaption{font-size:.66rem}.ref-theme-bar>.wrap{gap:14px}}
@media(max-width:380px){.ref-hero-panel h1{font-size:2.35rem}.ref-story-strip{grid-template-columns:1fr!important}.ref-story-strip img{height:210px!important}}

/* One shared rounded surface: no white wedges between photo and text. */
[data-ref-theme=geschichten] .ref-summary{display:grid;grid-template-columns:1.1fr 1fr;grid-column:1/-1;gap:0;align-items:stretch;background:linear-gradient(135deg,#133651,#071f36);border:1px solid #43617a;border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}
[data-ref-theme=geschichten] .ref-summary .ref-cover,[data-ref-theme=geschichten] .ref-summary .ref-copy{border:0;border-radius:0!important;box-shadow:none;margin:0}
[data-ref-theme=geschichten] .ref-summary .ref-cover .photo-link{border-radius:0;box-shadow:none;height:100%}
[data-ref-theme=geschichten] .ref-summary .ref-cover img{max-height:none}
[data-ref-theme=geschichten] .ref-summary .ref-copy{background:transparent}
.ref-contact .cta{background:var(--navy-deep);color:#fff;border:1px solid #365772;box-shadow:var(--shadow)}
.ref-contact .cta p{color:#d6e5f1}
.ref-contact .cta .eyebrow{color:#b9d9ef}
[data-ref-theme=geschichten] .ref-story-strip .ref-cad img{object-fit:contain;background:#fff;padding:10px}
@media(max-width:760px){[data-ref-theme=geschichten] .ref-summary{display:block}[data-ref-theme=geschichten] .ref-summary .ref-cover img{height:320px!important;min-height:0}}
/* Let text define the card height, not the portrait photo's intrinsic ratio. */
[data-ref-theme=geschichten] .ref-summary .ref-cover{position:relative;min-height:370px}
[data-ref-theme=geschichten] .ref-summary .ref-cover img{position:absolute;inset:0;width:100%;height:100%;min-height:0;object-fit:cover}
@media(max-width:760px){[data-ref-theme=geschichten] .ref-summary .ref-cover{min-height:0}[data-ref-theme=geschichten] .ref-summary .ref-cover img{position:static;height:320px!important}}

/* Full-bleed project photography with a translucent floating information panel. */
#references-view[data-ref-theme=geschichten] .ref-project-shell{grid-column:1/-1;background:#071f36;border:1px solid #43617a;border-radius:15px;overflow:hidden;box-shadow:var(--shadow)}
#references-view[data-ref-theme=geschichten] .ref-summary{display:flex;position:relative;isolation:isolate;justify-content:flex-end;align-items:center;min-height:470px;border:0;border-radius:0;box-shadow:none;overflow:hidden}
#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover{position:absolute;inset:0;min-height:0;width:100%;height:100%;z-index:-1}
#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover figure,#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover .photo-link{width:100%;height:100%}
#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover img{position:absolute;inset:0;height:100%;width:100%;min-height:0;object-fit:cover}
#references-view[data-ref-theme=geschichten] .ref-summary .ref-copy{position:relative;margin:28px;max-width:52%;padding:30px;border:1px solid #93b1c36b;border-radius:15px!important;background:linear-gradient(135deg,#082642d6,#041a30c7);backdrop-filter:blur(3px);box-shadow:0 4px 9px #0003;z-index:2}
#references-view[data-ref-theme=geschichten] .ref-project:nth-child(even) .ref-summary{justify-content:flex-start}
#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover .photo-expand{top:16px;bottom:auto;right:16px;z-index:3}
#references-view[data-ref-theme=geschichten] .ref-project:nth-child(even) .ref-photo-tag{left:auto;right:18px}
#references-view[data-ref-theme=geschichten] .ref-details{padding:30px;margin:0;border:0;border-top:1px solid #3c607a;border-radius:0;background:#071f36;color:#edf5fc;overflow:hidden;animation:ref-dropdown-in 200ms ease-out}
#references-view[data-ref-theme=geschichten] .ref-details .ref-rights,#references-view[data-ref-theme=geschichten] .ref-details figcaption{color:#caddeb}
#references-view[data-ref-theme=geschichten] .ref-detail-grid img{background:#0c2b43}
#references-view[data-ref-theme=geschichten] .ref-details .button.secondary{background:linear-gradient(#174b71,#0a2c48);border-color:#5a7f9c;color:white}
@keyframes ref-dropdown-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){#references-view[data-ref-theme=geschichten] .ref-summary{min-height:560px;align-items:flex-end;padding-top:170px}#references-view[data-ref-theme=geschichten] .ref-summary .ref-copy{max-width:none;width:calc(100% - 32px);margin:16px;padding:24px}#references-view[data-ref-theme=geschichten] .ref-summary .ref-cover img{position:absolute;height:100%!important;min-height:0}#references-view[data-ref-theme=geschichten] .ref-details{padding:22px 18px}#references-view[data-ref-theme=geschichten] .ref-summary .ref-photo-tag{top:16px;bottom:auto;left:16px;right:auto}}
@media(prefers-reduced-motion:reduce){#references-view[data-ref-theme=geschichten] .ref-details{animation:none}}
/* Project expansion and accessible photographic before/after comparison. */
.ref-load-actions{display:flex;justify-content:center;margin:35px 0}.ref-chapter{margin-top:38px}.ref-details h4{font-size:1.3rem;color:#f1f7fc;margin-bottom:18px}.ref-chapter .ref-detail-grid{margin-top:0}.ref-pair-note{font-size:.82rem;line-height:1.6;color:#c1d7e7;max-width:800px;margin:16px 0}.ref-pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.ref-pair-grid img{height:380px;object-fit:contain;background:#0b253c;width:100%}.ref-comparison,.ref-comparison-pair{padding-bottom:24px;border-bottom:1px solid #64839c66;margin-bottom:30px}
.compare-stage{position:relative;aspect-ratio:4/3;max-height:650px;overflow:hidden;border-radius:15px;border:1px solid #6e91ab;background:#041a30;box-shadow:0 4px 12px #0004;isolation:isolate}.compare-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}.compare-stage .compare-before{clip-path:inset(0 calc(100% - var(--compare-position)) 0 0)}.compare-line{position:absolute;top:0;bottom:0;left:var(--compare-position);width:4px;transform:translateX(-50%);background:white;box-shadow:0 0 5px #0005;pointer-events:none}.compare-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;gap:5px;color:white;font-size:44px;font-weight:700;line-height:1;filter:drop-shadow(0 2px 3px #0005)}.compare-grip b{display:block;width:30px;height:30px;border:6px solid white;background:#126ba9;border-radius:50%;flex:none}.compare-label{position:absolute;bottom:20px;padding:7px 15px;border:1px solid #aac9df66;border-radius:8px;background:#126ba9cb;color:white;backdrop-filter:blur(2px);pointer-events:none;box-shadow:0 2px 5px #0002}.compare-label.before{left:18px}.compare-label.after{right:18px}.compare-stage input{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}.compare-stage:focus-within{outline:3px solid #f7bc4c;outline-offset:4px}.compare-error{position:absolute;inset:0;display:grid;place-items:center;background:#082642;padding:30px;color:white}.compare-stage.is-failed .compare-line,.compare-stage.is-failed .compare-label{display:none}.gallery-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:15px 0}.gallery-controls button{min-width:48px;min-height:44px;border:1px solid #63839d;border-radius:10px;color:white;background:#082642}.gallery-controls span{min-width:85px;text-align:center}
@media(max-width:760px){.ref-pair-grid{gap:14px}.ref-pair-grid img{height:270px}.compare-stage{aspect-ratio:3/4}.compare-label{bottom:14px;font-size:.85rem;padding:6px 11px}.compare-label.before{left:12px}.compare-label.after{right:12px}.ref-chapter{margin-top:28px}.ref-details h4{font-size:1.15rem}}
.compare-stage{aspect-ratio:var(--compare-aspect,4/3)}
@media(max-width:760px){.compare-stage{aspect-ratio:var(--compare-aspect,3/4)}}
.compare-stage{margin-inline:auto}
.ref-trade-group{display:block;margin-bottom:65px}.ref-trade-group .ref-project{margin-bottom:38px}.ref-trade-heading{margin:0 0 26px;padding:24px 28px;border:1px solid #456d8b;border-radius:15px;background:linear-gradient(130deg,#123d5a,#041a30);color:white;box-shadow:0 4px 10px #041a301f}.ref-trade-heading h2{font-size:clamp(1.65rem,3vw,2.5rem);margin:0}.ref-trade-heading .eyebrow{color:#c2def1;margin-bottom:10px}.ref-filters{gap:10px}.compare-label{max-width:44%;font-size:.88rem}.compare-label.after{text-align:right}

/* Trade sections occupy the full editorial row; hidden filters always win. */
#references-view .ref-trade-group{grid-column:1/-1;min-width:0;width:100%}
#references-view .ref-trade-group .ref-project{display:block;width:100%;min-width:0}
#references-view [hidden]{display:none!important}
.ref-scope-note{margin:22px 0 26px;padding:22px 26px;border-left:4px solid #167bbc;border-radius:0 12px 12px 0;background:#eef5fa;color:#173b56;max-width:950px}
.ref-scope-note strong{display:block;margin-bottom:7px;color:#082642}
.ref-scope-note p{margin:0;line-height:1.65}