/* Layout by available space, including tablet portrait and landscape. */
.screen-page .site-header{gap:22px}
.screen-page .site-header nav{margin-left:auto}
.header-back{display:inline-flex;align-items:center;justify-content:center;min-height:44px;white-space:nowrap;font-size:14px;border-bottom:1px solid #aaa;flex:none}
.header-back:hover{border-color:#222}
.screen-page :is(.project-info,.project-info>div,.project-choices>a,.portfolio-project,.profile>div,.service-list article>div){min-width:0}
.screen-page .project-info h1{font-size:clamp(26px,2.1vw,34px);line-height:1.28}
.screen-page .project-info p{overflow-wrap:break-word}
.view-controls button{width:44px;height:44px}
.view-controls select{min-height:44px}
.page-current-overview .project-choices a:nth-child(2) img{object-position:50% 58%}
.screen-page .page-heading h1{overflow-wrap:break-word}
@media(min-width:1200px) and (min-height:750px){
 .screen-page.page-detail main{height:calc(100svh - var(--header-height) - var(--closing-bar-height))}
 .screen-page.page-detail .project-section{flex:1;min-height:0;align-items:stretch}
 .screen-page.page-detail .media-deck.is-paged{height:100%;min-height:0}
 .screen-page.page-detail .project-info{align-self:center}
 .screen-page.page-feuchtwangen .project-info{max-width:540px}
 .screen-page.page-current-overview .project-choices h2{font-size:clamp(24px,2vw,30px)}
}
/* Touch navigation remains available outside the collapsed menu. */
@media(max-width:1199px){
 .screen-page{--gutter:clamp(20px,4vw,44px);--header-height:84px}
 .screen-page .site-header,.screen-page.portfolio-home .site-header{height:84px;padding-inline:var(--gutter);gap:16px}
 .screen-page .site-header .brand{margin-right:auto;font-size:13px;gap:10px}
 .screen-page .brand-logo{width:68px}
 .screen-page .site-header .brand small{font-size:10px}
 .screen-page .menu-toggle{display:flex;align-items:center;gap:8px;min-height:44px;border:0;background:transparent;padding:8px 2px;font-size:15px;order:3}
 .screen-page .header-back{order:2;font-size:14px}
 .screen-page .site-header nav{display:none;position:absolute;top:84px;left:0;right:0;margin:0;background:white;border-bottom:1px solid #ddd;padding:12px var(--gutter) 18px;box-shadow:0 12px 18px #0000000a;gap:0;align-items:stretch}
 .screen-page .site-header nav.open{display:flex;flex-direction:column}
 .screen-page .site-header nav a{font-size:18px;padding:12px 0;min-height:44px}
 .screen-page:not(.portfolio-home) main,.screen-page.page-aktuelle-projekte main{height:auto;min-height:calc(100svh - var(--header-height) - var(--closing-bar-height));display:flex;flex-direction:column}
 .screen-page .page-heading,.screen-page.page-projekte .page-heading,.screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading,.screen-page.page-kontakt .contact-heading{height:auto;min-height:190px;padding:28px var(--gutter);display:flex;flex-direction:column;justify-content:center}
 .screen-page .page-heading h1,.screen-page .project-overview .page-heading h1{font-size:clamp(32px,4.5vw,46px)}
 .screen-page .page-heading .intro{font-size:17px;max-width:680px}
 .screen-page .section,.screen-page .project-section:not(.school-project){padding:28px var(--gutter)}
 .screen-page.page-detail .project-section,.screen-page.page-aktuelle-projekte .school-project article{display:flex;flex-direction:column;height:auto;gap:24px;min-height:0}
 .screen-page .school-project{flex:none}
 .screen-page .project-info,.screen-page.page-detail .project-info,.screen-page.page-aktuelle-projekte .project-info{display:grid;grid-template-columns:1fr 1.2fr;align-items:start;align-self:stretch;gap:28px;margin:0;padding:0;max-width:none}
 .screen-page .project-info :is(h1,h2){font-size:28px;line-height:1.25}
 .screen-page .project-info p{font-size:16px;line-height:1.55}
 .screen-page .project-info .eyebrow{margin-bottom:12px}
 .screen-page .project-info .project-credit{margin-top:16px!important}
 .screen-page .media-deck.is-paged{height:auto;min-height:0;width:100%;gap:12px;flex:none}
 .screen-page .media-deck.is-paged>.view-panel{flex:none}
 .screen-page .media-deck.is-paged .view-panel>figure,.screen-page .media-deck.is-paged .project-film,.screen-page .media-deck.is-paged .project-film figure{display:block;height:auto}
 .screen-page .media-deck.is-paged .view-panel img,.screen-page .media-deck.is-paged .view-panel video{flex:none;width:100%;height:auto;max-height:65svh;aspect-ratio:auto;object-fit:contain;background:#f4f4f4}
 .screen-page .media-deck figcaption{padding-top:10px!important}
 .screen-page .project-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;align-content:start;flex:none}
 .screen-page .project-choices img{height:auto;aspect-ratio:16/10;max-height:none;margin-bottom:14px;object-fit:cover}
 .screen-page .project-choices h2{font-size:26px}
 .screen-page .project-choices a>p:last-child{font-size:15px;line-height:1.5;margin-top:10px}
 .screen-page .portfolio-projects{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
 .screen-page .portfolio-project img,.screen-page .portfolio-project:first-child img{height:auto;aspect-ratio:4/3;object-fit:cover}
 .screen-page .portfolio-project-caption{padding-block:16px}
 .screen-page .portfolio-project-caption h3{font-size:25px}
 .screen-page.page-buero .profile{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:32px;flex:none;align-content:start}
 .screen-page.page-buero .profile-name h2{font-size:34px}
 .screen-page.page-leistungen .services{display:block;flex:none}
 .screen-page.page-leistungen .service-list article{grid-template-columns:24px minmax(0,.9fr) minmax(0,1.3fr);gap:18px;padding-block:18px}
 .screen-page.page-leistungen .service-list article>p,.screen-page.page-leistungen .service-list article>div{grid-column:3}
 .screen-page .contact-details{grid-template-columns:1fr 1fr;gap:28px;align-content:start;flex:none}
 .screen-page .contact-row{display:block}
 .screen-page .contact-label{display:block;margin-bottom:4px}
 .screen-page .contact-row .large-contact{font-size:29px}
 .screen-page .contact-row .email-contact{font-size:22px}
 .screen-page address{border-top:0;border-left:1px solid #ddd;padding:0 0 0 28px}
 .screen-page main>.next-chapter{margin-top:auto;padding-block:16px}
 .screen-page.portfolio-home .portfolio-hero{padding:150px var(--gutter) 28px;min-height:calc(100svh - var(--closing-bar-height))}
 .screen-page.portfolio-home .portfolio-hero h1{font-size:clamp(40px,6vw,62px)}
 .screen-page.portfolio-home .line-navigation{flex-direction:column;align-items:stretch;gap:4px;margin:28px 0 0}
 .screen-page.portfolio-home .line-navigation a{flex-direction:row;justify-content:flex-start;gap:24px;min-height:44px;padding:8px 0;font-size:16px}
 .screen-page.portfolio-home .line-node{width:16px;height:16px;flex:none}
 .screen-page.portfolio-home .hero-bottom{padding-top:26px}
 .screen-page .footer-bottom{padding:8px var(--gutter);gap:4px 18px}
 .screen-page .footer-bottom>div{gap:4px 18px}
}
@media(max-width:600px){
 .screen-page{--gutter:20px}
 .screen-page .site-header,.screen-page.portfolio-home .site-header{gap:10px}
 .screen-page .site-header .brand{font-size:10px;gap:8px}
 .screen-page .site-header .brand small{font-size:8px}
 .screen-page .brand-logo{width:48px}
 .screen-page .header-back{font-size:12px}
 .screen-page .menu-toggle{font-size:13px;gap:5px}
 .screen-page .page-heading,.screen-page.page-projekte .page-heading,.screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading,.screen-page.page-kontakt .contact-heading{min-height:160px;padding-block:24px}
 .screen-page .page-heading h1,.screen-page .project-overview .page-heading h1{font-size:32px}
 .screen-page .section,.screen-page .project-section:not(.school-project){padding-block:24px}
 .screen-page .project-info,.screen-page.page-detail .project-info,.screen-page.page-aktuelle-projekte .project-info{grid-template-columns:1fr;gap:18px}
 .screen-page .project-info :is(h1,h2){font-size:27px}
 .screen-page .project-choices,.screen-page .portfolio-projects{grid-template-columns:1fr;gap:30px}
 .screen-page.page-buero .profile,.screen-page .contact-details{grid-template-columns:1fr;gap:30px}
 .screen-page address{border-left:0;border-top:1px solid #ddd;padding:24px 0 0}
 .screen-page.page-leistungen .service-list article{grid-template-columns:24px minmax(0,1fr);gap:8px 14px}
 .screen-page.page-leistungen .service-list article>p,.screen-page.page-leistungen .service-list article>div{grid-column:2}
 .screen-page .view-controls{gap:6px}
 .screen-page .view-controls select{font-size:14px}
 .screen-page .next-chapter>span{display:none}
 .screen-page .next-chapter>a{font-size:16px}
 .screen-page.portfolio-home .portfolio-hero{padding-top:130px}
 .screen-page.portfolio-home .portfolio-hero h1{font-size:clamp(36px,8vw,46px)}
 .screen-page .timeline>div{grid-template-columns:90px minmax(0,1fr);gap:12px}
 .screen-page .footer-bottom>div{gap:4px 14px}
 .screen-page .footer-bottom a{font-size:12px;min-height:36px}
}
/* Low landscape displays favor readable document flow over a squeezed viewport. */
@media(min-width:1200px) and (max-height:749px){
 .screen-page.page-detail main,.screen-page.page-aktuelle-projekte main{height:auto}
 .screen-page.page-aktuelle-projekte .school-project article{height:auto}
 .screen-page.page-detail .media-deck.is-paged,.screen-page.page-aktuelle-projekte .media-deck.is-paged{height:400px;min-height:0}
 .screen-page.page-aktuelle-projekte .project-info{align-self:center}
}
@media print{
 .header-back,.menu-toggle{display:none}
 .screen-page main,.screen-page .project-section{height:auto!important;display:block!important}
 .screen-page .media-deck.is-paged{height:auto!important}
 .screen-page .media-deck .view-panel img{height:auto!important;max-height:500px}
}
@media(max-width:1199px){
 .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:contain}
}
/* Visible ring feedback for mouse, keyboard and touch, including hybrid tablets. */
.screen-page.portfolio-home .line-navigation a:is(:hover,:focus-visible,:active) .line-node{transform:scale(1.3);background:#222}
.screen-page.portfolio-home .line-navigation a:is(:hover,:focus-visible,:active) .line-node:after{animation:node-ring 1.8s ease-out infinite;opacity:.6}
@media(any-hover:none){
 .screen-page.portfolio-home .line-node:after{animation:node-ring 2.8s ease-out infinite}
 .screen-page.portfolio-home .line-navigation a:nth-child(2) .line-node:after{animation-delay:.25s}
 .screen-page.portfolio-home .line-navigation a:nth-child(3) .line-node:after{animation-delay:.5s}
 .screen-page.portfolio-home .line-navigation a:nth-child(4) .line-node:after{animation-delay:.75s}
 .screen-page.portfolio-home .line-navigation a:nth-child(5) .line-node:after{animation-delay:1s}
}
@media(prefers-reduced-motion:reduce){
 .screen-page.portfolio-home .line-node:after{animation:none!important}
 .screen-page.portfolio-home .line-navigation a:is(:hover,:focus-visible,:active) .line-node:after{opacity:.5}
}
/* Selected-project overview: same title-band height as the other overview pages. */
@media(min-width:1200px){
 .screen-page.page-ausgewaehlte-projekte{--title-band-height:clamp(140px,calc(100svh - 580px),460px)}
 .screen-page.page-ausgewaehlte-projekte .page-heading{height:var(--title-band-height);min-height:0;display:flex;flex-direction:column;justify-content:center;padding-block:24px}
 .screen-page.page-ausgewaehlte-projekte .portfolio-project img,.screen-page.page-ausgewaehlte-projekte .portfolio-project:first-child img{height:clamp(120px,calc(100svh - var(--title-band-height) - 365px),390px)}
}
/* More space for the portfolio beneath a shallower image band. */
@media(min-width:1200px){
 .screen-page:is(.page-projekte,.page-ausgewaehlte-projekte,.page-buero,.page-leistungen,.page-kontakt){--title-band-height:clamp(180px,calc(100svh - 650px),350px)}
 .screen-page:is(.page-projekte,.page-ausgewaehlte-projekte,.page-buero,.page-leistungen,.page-kontakt) .page-heading{height:var(--title-band-height);min-height:0;padding-block:16px}
 .screen-page.page-schule-bechhofen .page-heading{padding-block:12px}
 .screen-page.page-ausgewaehlte-projekte .portfolio-selected{flex:1;display:flex;align-items:center}
 .screen-page.page-ausgewaehlte-projekte .portfolio-projects{width:100%}
}
@media(min-width:601px) and (max-width:1199px){
 .screen-page .page-heading,.screen-page.page-projekte .page-heading,.screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading,.screen-page.page-kontakt .contact-heading{min-height:160px;padding-block:20px}
 .screen-page .project-choices img{aspect-ratio:3/2}
}
@media(max-width:600px){
 .screen-page .page-heading,.screen-page.page-projekte .page-heading,.screen-page.page-buero .page-heading,.screen-page.page-leistungen .page-heading,.screen-page.page-kontakt .contact-heading{min-height:140px;padding-block:18px}
 .screen-page .project-choices img{aspect-ratio:3/2}
}
/* Carry the title photograph behind the header without moving the lower edge. */
.screen-page.has-title-band .site-header{background:transparent;border-bottom-color:transparent}
.screen-page.has-title-band .page-heading:before{top:calc(-1 * var(--header-height))}
/* Keep header links in identical positions on the home and inner pages. */
html{scrollbar-gutter:stable}
@media(min-width:1200px){
 .screen-page .site-header,.screen-page.portfolio-home .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto 80px;column-gap:22px;height:84px;padding-inline:var(--gutter);border-bottom:1px solid transparent}
 .screen-page .site-header .brand{grid-column:1;grid-row:1}
 .screen-page .site-header nav{grid-column:2;grid-row:1;margin:0;gap:clamp(20px,2.5vw,40px)}
 .screen-page .site-header nav a,.screen-page.portfolio-home .site-header nav a{font-size:17px;font-weight:400;line-height:1.5;padding:13px 0;letter-spacing:normal}
 .screen-page .site-header .header-back{grid-column:3;grid-row:1;width:80px;justify-self:end}
}