/* Viewport-aware portfolio layouts. No clipping or global overflow suppression. */
.screen-page{--header-height:84px;font-size:16px;line-height:1.5}
.screen-page .site-header{height:var(--header-height)}
.screen-page .footer-top{display:none}
.screen-page .page-heading,.screen-page .project-overview .page-heading{padding:18px var(--gutter)}
.screen-page .page-heading h1{font-size:clamp(32px,3vw,46px);line-height:1.1}
.screen-page .eyebrow{font-size:12px;margin-bottom:8px}
.screen-page .page-heading .intro{font-size:17px;line-height:1.4;margin-top:10px}
.screen-page .section,.screen-page .project-section:not(.school-project){padding:20px var(--gutter)}
.screen-page .breadcrumbs{padding:10px var(--gutter);font-size:13px;gap:9px;line-height:1.4}
.screen-page .next-chapter{margin:0 var(--gutter);padding:10px 0;gap:12px;flex-direction:row;align-items:center}
.screen-page .next-chapter>a{font-size:17px}
.screen-page .next-chapter>span{font-size:12px}
.screen-page .project-info{gap:32px;margin:0}
.screen-page .project-info p{font-size:16px;line-height:1.5}
.screen-page .project-info h2{font-size:clamp(26px,2.4vw,36px)}
.screen-page .project-credit{font-size:14px!important;margin-top:16px!important}
.view-deck{min-width:0;min-height:0}
.view-deck.is-paged{display:flex;flex-direction:column;gap:14px}
.view-panel{min-width:0;min-height:0}
.view-panel[hidden]{display:none!important}
.view-controls{display:flex;align-items:center;gap:10px;flex:none;border-bottom:1px solid #ddd;padding-bottom:10px}
.view-controls button{width:40px;height:38px;flex:none;border:1px solid #bbb;background:white;color:#222;cursor:pointer;font-size:21px;line-height:1}
.view-controls button:hover:not(:disabled){background:#222;color:#fff}
.view-controls button:disabled{opacity:.3;cursor:default}
.view-controls select{min-width:0;flex:1;font:inherit;font-size:15px;color:#222;background:#fff;border:0;padding:7px 2px;text-overflow:ellipsis}
.view-controls select:focus-visible{outline:2px solid #222;outline-offset:2px}
.view-count{font-size:13px;white-space:nowrap;color:#666}
.media-deck.is-paged>.view-panel{flex:1}
.media-deck .view-panel>figure,.media-deck .project-film,.media-deck .project-film figure{height:100%;min-height:0;display:flex;flex-direction:column;margin:0;width:100%;max-width:none}
.media-deck .view-panel img,.media-deck .view-panel video{display:block;min-height:0;flex:1;width:100%;height:0;object-fit:contain;aspect-ratio:auto;background:#f4f4f4}
.media-deck figcaption{flex:none;font-size:13px!important;line-height:1.35!important;padding-top:8px!important;color:#666}
.media-deck .project-film>.eyebrow,.media-deck .project-film>h3{display:none}
.screen-page .profile{gap:45px;grid-template-columns:1fr 1.35fr}
.screen-page .profile-name{padding-left:22px}
.screen-page .profile-name h2{font-size:44px;margin-bottom:14px}
.screen-page .profile-name h2 br{display:none}
.screen-page .profile p+p{margin-top:12px}
.screen-page .profile-name .text-link{margin-top:14px}
.screen-page .profile h3{font-size:25px;margin:0 0 16px}
.screen-page .timeline>div{padding:14px 0}
.screen-page .services{margin-bottom:0;background:#fff}
.screen-page .services .section-heading{display:block;margin-bottom:18px}
.screen-page .services .section-heading>p{max-width:none}
.service-deck article{border-top:0;display:grid;grid-template-columns:50px 1fr;gap:16px;padding:12px 0}
.service-deck article>span{font-size:14px;color:#666}
.service-deck article h3{font-size:30px}
.service-deck article>p,.service-deck article>div{grid-column:2;max-width:720px}
.service-deck .text-link{margin-top:12px}
.screen-page .contact-heading h1 br{display:none}
.screen-page .contact-heading h1 em:before{content:' '}
.screen-page .contact-details{grid-template-columns:1.2fr 1fr;gap:50px;align-content:center}
.screen-page .contact-row{margin-bottom:14px}
.screen-page .contact-row .large-contact{font-size:clamp(26px,2.8vw,38px)}
.screen-page .contact-row .email-contact{font-size:clamp(20px,2.1vw,28px)}
.screen-page .contact-label{font-size:16px}
.screen-page .contact-actions{margin-top:20px}
.screen-page .button{font-size:15px;min-height:44px;padding:10px 20px}
.screen-page address{padding-left:35px}
.screen-page address p{margin-top:12px}
.screen-page address h2{font-size:27px}
.screen-page .legal{max-width:1200px;width:100%;margin:0 auto}
.screen-page .legal h1{font-size:34px;margin:0 0 22px}
.screen-page .legal h2{font-size:27px;margin:0 0 15px}
.screen-page .legal h3{font-size:23px;margin:0 0 12px}
.screen-page .legal h4{font-size:19px;margin:0 0 12px}
.screen-page .legal p{margin:0 0 12px;line-height:1.6}
.screen-page .legal section{margin:0;padding:0;border:0}
.screen-page .legal .view-panel{padding-top:10px}
.screen-page .portfolio-hero{min-height:calc(100svh - var(--closing-bar-height));padding-top:120px;padding-bottom:24px}
.screen-page .portfolio-hero-copy{padding-top:0}
.screen-page .portfolio-hero h1{font-size:clamp(42px,5vw,76px)}
.screen-page .portfolio-hero-copy>p{margin-top:18px}
.screen-page .line-navigation{margin-top:clamp(35px,7vh,80px)}
.screen-page .hero-bottom{padding-top:30px}
@media(min-width:901px){
 .screen-page:not(.portfolio-home) main{min-height:calc(100svh - var(--header-height) - var(--closing-bar-height));display:flex;flex-direction:column}
 .screen-page main>.page-heading,.screen-page main>.breadcrumbs,.screen-page main>.next-chapter{flex:none}
 .screen-page main>.next-chapter{margin-top:auto}
 .screen-page .contact-details{flex:1}
 .screen-page .project-choices{gap:36px;padding-top:20px;padding-bottom:20px}
 .screen-page .project-choices img{height:clamp(140px,calc(100svh - 425px),430px);margin-bottom:14px;aspect-ratio:auto}
 .screen-page .project-choices h2{font-size:29px}
 .screen-page .project-choices a>p:last-child{font-size:15px;margin-top:8px}
 .screen-page .portfolio-projects{gap:28px}
 .screen-page .portfolio-project img,.screen-page .portfolio-project:first-child img{height:clamp(120px,calc(100svh - 470px),390px);aspect-ratio:auto}
 .screen-page .portfolio-project-caption{padding:14px 0;gap:10px}
 .screen-page .portfolio-project-caption h3{font-size:25px}
 .screen-page .portfolio-project-caption p:not(.eyebrow){font-size:15px;margin-top:8px}
 .screen-page .portfolio-project-caption .eyebrow{font-size:11px;margin-bottom:6px}
 .page-detail .project-section,.page-aktuelle-projekte .school-project article{display:grid;grid-template-columns:minmax(240px,1fr) minmax(0,2fr);gap:40px}
 .page-detail .project-info,.page-aktuelle-projekte .project-info{display:flex;flex-direction:column;gap:20px}
 .page-detail .media-deck{height:calc(100svh - var(--header-height) - var(--closing-bar-height) - 138px);min-height:280px}
 .page-aktuelle-projekte .media-deck{height:calc(100svh - var(--header-height) - var(--closing-bar-height) - 230px);min-height:265px}
}
@media(max-width:900px){
 .screen-page{--gutter:24px}
 .screen-page .section,.screen-page .project-section:not(.school-project){padding-block:22px}
 .screen-page .page-heading h1{font-size:32px}
 .screen-page .project-info{margin-bottom:20px}
 .media-deck.is-paged{height:390px;height:clamp(270px,48svh,480px)}
 .screen-page .profile,.screen-page .contact-details{grid-template-columns:1fr;gap:28px}
 .screen-page address{padding:20px 0 0}
 .screen-page .contact-heading h1 br{display:block}
 .screen-page .contact-row{flex-direction:row}
 .screen-page .next-chapter{padding-block:16px}
 .screen-page .next-chapter>span{display:none}
 .screen-page .project-choices{gap:25px}
 .screen-page .project-choices img{height:180px}
 .screen-page .portfolio-project img{height:200px;object-fit:cover}
 .screen-page .portfolio-hero{padding:110px 24px 20px 36px}
 .screen-page .portfolio-hero-copy>p{font-size:17px;margin-top:12px}
 .screen-page .line-navigation{gap:0;margin-top:20px}
 .screen-page .line-navigation a{min-height:42px;padding-block:6px}
 .screen-page .hero-bottom{padding-top:18px}
 .screen-page .legal h1{font-size:29px}
}
@media print{
 .screen-page main,.media-deck{height:auto!important;min-height:0!important}
 .view-panel[hidden]{display:block!important}.view-controls{display:none}
 .media-deck .view-panel img,.media-deck .view-panel video{height:auto;max-height:500px}
 .screen-page .footer-bottom{position:static}
}
/* Progressive fallback: images and text stay readable if scripting is unavailable. */
.media-deck:not(.is-paged){height:auto;display:block}
.media-deck:not(.is-paged) .view-panel{margin-bottom:24px}
.media-deck:not(.is-paged) .view-panel img,.media-deck:not(.is-paged) .view-panel video{height:auto;max-height:600px}
.view-deck:not(.is-paged)>.view-panel{margin-bottom:24px}
/* Büro and services: complete information in one compact view. */
.screen-page.page-buero .profile{grid-template-columns:1fr 1.5fr;gap:clamp(30px,5vw,80px);font-size:15px;line-height:1.45}
.screen-page.page-buero .profile-name h2{font-size:38px;margin-bottom:12px}
.screen-page.page-buero .profile-name .text-link{font-size:15px;margin-top:12px}
.screen-page.page-buero .office-content{display:grid;gap:18px}
.screen-page.page-buero .office-content h3{font-size:22px;margin:0 0 8px}
.screen-page.page-buero .timeline>div{padding:8px 0;gap:16px}
.screen-page.page-buero .timeline dt{font-size:14px}
.screen-page.page-leistungen .services{padding-top:16px;padding-bottom:16px}
.screen-page.page-leistungen .section-heading{font-size:15px;margin-bottom:14px}
.screen-page.page-leistungen .service-list article{display:grid;grid-template-columns:28px minmax(230px,.9fr) minmax(0,1.5fr);gap:22px;padding:14px 0;border-top:1px solid #ddd;font-size:15px;line-height:1.45}
.screen-page.page-leistungen .service-list article>span{font-size:13px}
.screen-page.page-leistungen .service-list h3{font-size:22px;line-height:1.2}
.screen-page.page-leistungen .service-list .text-link{font-size:14px;margin-top:6px;padding-block:4px}
@media(min-width:901px){
 .screen-page.page-kontakt .contact-heading{height:clamp(210px,calc(100svh - 490px),460px);display:flex;flex-direction:column;justify-content:center;padding-block:24px}
 .screen-page.page-kontakt .contact-details{padding-block:24px}
}
@media(max-width:900px){
 .screen-page.page-buero .profile{grid-template-columns:1fr}
 .screen-page.page-leistungen .service-list article{grid-template-columns:24px 1fr;gap:8px 14px;padding:12px 0}
 .screen-page.page-leistungen .service-list article>p,.screen-page.page-leistungen .service-list article>div{grid-column:2}
 .screen-page.page-leistungen .service-list h3{font-size:21px}
 .screen-page.page-kontakt .contact-heading{min-height:220px;display:flex;flex-direction:column;justify-content:center}
}
/* Match the contact page's generous upper band, with room for complete text. */
.screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading{display:flex;flex-direction:column;justify-content:center;min-height:220px}
@media(min-width:901px){
 .screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading{min-height:0;height:clamp(140px,calc(100svh - 580px),460px);padding-block:24px}
 .screen-page.page-buero .profile{flex:1;align-content:center}
 .screen-page.page-leistungen .services{flex:1;display:flex;flex-direction:column;justify-content:center}
 .screen-page.page-leistungen .service-list article{padding-block:10px}
}
/* Shared entry photograph in the title bands. */
.screen-page .page-heading{position:relative;isolation:isolate;background:#f4f4f4}
.screen-page .page-heading:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#ffffffcf,#ffffff85),url('assets/schlosswache-lichtdecke.jpg') center 45%/cover no-repeat}
.screen-page.page-projekte .page-heading{display:flex;flex-direction:column;justify-content:center;min-height:220px}
@media(min-width:901px){
 .screen-page.page-projekte{--title-band-height:clamp(140px,calc(100svh - 580px),460px)}
 .screen-page.page-projekte .page-heading{min-height:0;height:var(--title-band-height);padding-block:24px}
 .screen-page.page-projekte .project-choices{flex:1;align-content:center}
 .screen-page.page-projekte .project-choices img{height:clamp(100px,calc(100svh - var(--title-band-height) - 320px),430px)}
}
/* Legal content is a continuous document, including direct footer anchors. */
.screen-page.page-impressum main{display:block;min-height:0}
.screen-page.page-impressum .legal{max-width:1050px;padding-block:40px 60px}
.screen-page.page-impressum .legal h1{margin-bottom:36px}
.screen-page.page-impressum .legal section{margin-bottom:40px;scroll-margin-top:24px}
.screen-page.page-impressum .legal h2{margin:28px 0 16px}
.screen-page.page-impressum .legal h3{margin:22px 0 10px}
.screen-page.page-impressum .legal h4{margin:18px 0 10px}
.screen-page.page-impressum .legal p{margin:0 0 16px}
.screen-page.page-impressum .legal .ai-notice{border-top:1px solid #ddd;padding-top:24px}
/* Lower the home introduction and its connected navigation together. */
.screen-page.portfolio-home .portfolio-hero{padding-top:calc(120px + clamp(48px,10svh,120px))}
.screen-page .page-heading h1,.screen-page .project-overview .page-heading h1{font-size:clamp(38px,3.6vw,56px)}
.screen-page .page-heading .intro{font-size:18px}
.screen-page .page-heading .eyebrow{font-size:13px}
@media(max-width:900px){
 .screen-page.portfolio-home .portfolio-hero{padding-top:calc(110px + clamp(18px,3svh,30px))}
 .screen-page .page-heading h1,.screen-page .project-overview .page-heading h1{font-size:36px}
 .screen-page .page-heading .intro{font-size:17px}
}
/* School project: balanced text and full-bleed media within the display area. */
.screen-page.page-aktuelle-projekte .project-info h2{font-size:clamp(26px,2.1vw,34px);line-height:1.28}
.screen-page.page-aktuelle-projekte .project-info .eyebrow{margin-bottom:16px}
.screen-page.page-aktuelle-projekte .project-info p{line-height:1.65}
.screen-page.page-aktuelle-projekte .project-info .project-credit{margin-top:24px!important;line-height:1.7}
.screen-page.page-aktuelle-projekte .media-deck.is-paged .view-panel img,.screen-page.page-aktuelle-projekte .media-deck.is-paged .view-panel video{object-fit:cover;object-position:center 56%;background:#eee}
@media(min-width:901px) and (min-height:700px){
 .screen-page.page-aktuelle-projekte main{height:calc(100svh - var(--header-height) - var(--closing-bar-height))}
 .screen-page.page-aktuelle-projekte .school-project{flex:1;min-height:0}
 .screen-page.page-aktuelle-projekte .school-project article{height:100%;min-height:0;align-items:stretch}
 .screen-page.page-aktuelle-projekte .media-deck.is-paged{height:100%;min-height:0}
 .screen-page.page-aktuelle-projekte .project-info{align-self:center;gap:clamp(20px,3svh,34px);padding-block:10px}
 .screen-page.page-aktuelle-projekte .next-chapter{margin-top:0}
}
@media(min-width:901px) and (max-height:780px){
 .screen-page.page-aktuelle-projekte .project-info{gap:16px}
 .screen-page.page-aktuelle-projekte .project-info .eyebrow{margin-bottom:10px}
 .screen-page.page-aktuelle-projekte .project-info .project-credit{margin-top:16px!important}
}
/* Existing project descriptions align with the middle of their media area. */
.screen-page.page-detail .project-info h2{font-size:clamp(26px,2.1vw,34px);line-height:1.28}
.screen-page.page-detail .project-info .eyebrow{margin-bottom:16px}
.screen-page.page-detail .project-info p{line-height:1.65}
@media(min-width:901px){
 .screen-page.page-detail .project-info{align-self:center;gap:clamp(20px,3svh,34px);padding-block:10px}
}
@media(min-width:901px) and (max-height:800px){
 .screen-page.portfolio-home .portfolio-hero h1{font-size:clamp(42px,4.5vw,60px)}
 .screen-page.portfolio-home .line-navigation{margin-top:30px}
 .screen-page.portfolio-home .hero-bottom{padding-top:20px}
}