
/* Accessible, stable layouts for the reviewed static version. */
:focus-visible{outline:3px solid #9b6a24;outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:1rem;z-index:100000;background:#fff;color:#222;padding:1rem}
.skip-link:focus{top:1rem}
html{scroll-padding-top:110px}
.hamburger{border:0;background:transparent;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.mobile-menu{visibility:hidden}.mobile-menu.active{visibility:visible}
.reveal,.reveal-left,.reveal-right{opacity:1;transform:none}
.hero-slide.active{animation:none}.hero{min-height:85svh}
.hero-label,.hero-title,.hero-line{opacity:1;animation:none}
.hero-subtitle{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,2rem);color:#fff;margin-bottom:1rem}
.hero-summary{color:#eee;line-height:1.7;margin-bottom:2rem}
.hero-slides .hero-slide:not(:first-child){display:none}
.section-label,.team-role,.philosophy-attribution{color:#80602d}
.services .section-label{color:var(--gold)}
.team-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1200px}
.team-info{padding:1.5rem}.team-role{letter-spacing:.1em;overflow-wrap:anywhere}
.team-initials{color:#d4b87d}.team-portrait img{object-position:center 25%}
.project-card img{aspect-ratio:4/3;object-fit:contain;background:var(--bg-warm)}
.project-info{position:static;opacity:1;transform:none;background:var(--charcoal);padding:1.2rem 1.4rem}
.project-name{font-size:1.3rem;overflow-wrap:anywhere}
.project-card:hover img{transform:none;filter:none}
.lightbox-img img{max-height:65vh;object-fit:contain}.lightbox-thumbs[hidden]{display:none}
.lightbox-detail-label,.footer-copyright{color:#b8b3af}.footer-links a,.footer-quote{color:#bdb7b2}
.contact-grid{grid-template-columns:1fr 1fr;align-items:center}
.contact-direct{background:var(--bg-warm);padding:3rem;min-width:0}
.contact-direct h3{font-family:var(--font-display);font-size:2rem;line-height:1.2;margin-bottom:1.5rem}
.contact-direct p{line-height:1.8;margin:1rem 0}.contact-email{display:block;font-size:clamp(1rem,2vw,1.5rem);text-decoration:underline;text-underline-offset:5px;overflow-wrap:anywhere}
.contact-route{margin-top:1.5rem;text-decoration:underline}.contact-link{overflow-wrap:anywhere}
.btn:hover{background:var(--gold);color:var(--charcoal)}
@media(max-width:1100px){.services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nav-links{gap:1.2rem}.nav{padding-left:2rem;padding-right:2rem}}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-grid{grid-template-columns:1fr}.cta-bg{background-attachment:scroll}}
@media(max-width:500px){.team-grid,.services-grid{grid-template-columns:1fr}.team-portrait{aspect-ratio:3/4}.contact-direct{padding:1.5rem}.nav.scrolled{padding:1rem 1.2rem}.facts{padding:3rem 1rem}.fact-item{flex-basis:40%;padding:.8rem}.nav-logo-name{font-size:1.3rem}.hero-content{padding-top:6rem;padding-bottom:4rem}.btn{padding:1rem 1.4rem}.hero-slide{background-position:58% center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.nav-logo-name{white-space:nowrap}
.legal a{color:#765326;overflow-wrap:anywhere}
.legal{padding-top:10rem}
@media(max-width:500px){.nav-logo-name{font-size:1.1rem;letter-spacing:.24em}.legal{padding-top:8rem}}

/* Initialen auf der vorhandenen Betontextur. */
.team-portrait-initials{background:#c6c5c4 url('images/team-beton.jpg') center/cover no-repeat}
.team-portrait-initials::before{background:rgba(255,255,255,.08)}
.team-portrait-initials .team-initials{color:#3a3632;font-size:clamp(3rem,5vw,4.5rem);font-weight:500;text-shadow:0 1px 0 rgba(255,255,255,.45)}

/* Kompakte Teamkarten statt hoher Bildtafeln. */
.team-grid{max-width:960px;gap:1.5rem;align-items:start}
.team-portrait{height:240px;aspect-ratio:auto}
.team-portrait img{object-position:center top}
.team-info{padding:1.25rem}
.team-portrait-initials .team-initials{font-size:3rem}
@media(max-width:900px){.team-grid{max-width:620px}}
@media(max-width:500px){.team-grid{max-width:280px}.team-portrait{height:260px;aspect-ratio:auto}.team-header{margin-bottom:2.5rem}}

/* Gemeinsame Typografie fuer Startseite, Rechtliches und Fehlerseite. */
:root{--type-heading:clamp(2rem,3.5vw,3rem);--type-card:1.5rem;--type-body:1rem;--type-small:.875rem;--type-label:.75rem}
body{font-family:var(--font-body);font-size:var(--type-body);font-weight:400;line-height:1.65}
button,input,textarea,select{font-family:var(--font-body)}
.hero-title{font-weight:500;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.section-title,.cta-title,.legal h1,.error-title{font-family:var(--font-display);font-size:var(--type-heading);font-weight:500;font-style:normal;line-height:1.2;letter-spacing:0;text-wrap:balance}
.service-card h3,.project-name,.team-name,.contact-direct h3,.legal h2{font-family:var(--font-display);font-size:var(--type-card);font-weight:500;font-style:normal;line-height:1.3;letter-spacing:0}
.lightbox-title{font-family:var(--font-display);font-size:clamp(1.75rem,3vw,2.5rem);font-weight:500;line-height:1.25}
.hero-subtitle,.hero-summary,.section-subtitle,.philosophy-body,.service-card p,.team-bio,.cta-sub,.contact-direct p,.contact-address,.contact-link,.contact-route,.lightbox-desc,.legal p,.legal ul,.legal-note{font-family:var(--font-body);font-size:var(--type-body);font-weight:400;font-style:normal;line-height:1.75;letter-spacing:0}
.hero-subtitle{font-size:1.125rem;line-height:1.6}
.philosophy-quote{font-family:var(--font-body);font-size:1.125rem;font-weight:400;font-style:normal;line-height:1.75;letter-spacing:0}
.philosophy-attribution{font-size:var(--type-small);font-weight:500;letter-spacing:0}
.hero-label,.section-label,.project-tag,.team-role,.fact-label,.lightbox-tag,.lightbox-detail-label,.footer-links h4{font-family:var(--font-body);font-size:var(--type-label);font-weight:500;font-style:normal;line-height:1.5;letter-spacing:.12em}
.nav-links a{font-family:var(--font-body);font-size:var(--type-small);font-weight:500;letter-spacing:.08em}
.mobile-menu a{font-family:var(--font-body);font-size:1.25rem;font-weight:500;letter-spacing:.08em}
.btn,.back-link{font-family:var(--font-body);font-size:var(--type-small);font-weight:500;line-height:1.5;letter-spacing:.08em}
.cta .btn{font-size:1rem}
.contact-email,.lightbox-detail-value{font-family:var(--font-body);font-size:1rem;font-weight:500;line-height:1.65;letter-spacing:0}
.footer-quote{font-family:var(--font-body);font-size:var(--type-small);font-weight:400;font-style:normal;line-height:1.75}
.footer-links a,.footer-copyright{font-family:var(--font-body);font-size:var(--type-small);font-weight:400;line-height:1.75;letter-spacing:0}
.service-card p,.cta-sub,.lightbox-desc{color:rgba(255,255,255,.82)}
.fact-label{color:#c7c2bd}
.legal h3,.legal strong,.contact-address strong{font-family:var(--font-body);font-weight:500}
@media(max-width:500px){.hero-title{font-size:2.5rem}.philosophy-quote{font-size:1rem}.nav-logo-sub{letter-spacing:.3em}}
