:root{
--navy:#0225c1;
--red:#fe0000;
--ink:#181818;
--paper:#f3f3f1;
--muted:#626262;
--line:#d8d8d5;
--white:#fff}
.topline{
background:var(--ink)}
.site-header{
position:sticky;
top:0;
height:96px;
z-index:50;
overflow:visible;
border-bottom:3px solid var(--red);
box-shadow:0 5px 24px rgba(0,0,0,.06);
transition:height .25s}
.site-header.is-compact{
height:78px}
.site-header .brand{
padding:0;
border:0;
background:transparent;
box-shadow:none}
.site-header .brand img{
width:245px;
height:70px;
transition:height .25s}
.site-header.is-compact .brand img{
height:55px}
.site-header nav{
align-self:stretch;
color:var(--ink)}
.site-header nav a{
display:flex;
align-items:center;
padding:.25rem}
.site-header nav a:not(.nav-cta)::after{
bottom:1.1rem}
.site-header nav a.active:not(.nav-cta)::after{
right:0;
background:var(--navy)}
.site-header nav .nav-cta{
margin-block:1rem;
padding-inline:1.2rem;
background:var(--navy);
color:#fff;
border:0}
.site-header nav .nav-cta:hover,.site-header nav .nav-cta:focus-visible,.button:hover,.button:focus-visible{
background:#b80000}
@media(min-width:981px) and (max-width:1280px){
.site-header{
padding-inline:1.25rem}
.site-header .brand img{
width:200px}
.site-header nav{
gap:1rem;
font-size:.68rem;
letter-spacing:.08em}
.site-header nav .nav-cta{
padding-inline:.85rem}
}
.hero{
min-height:690px;
height:calc(100svh - 130px);
background:var(--ink);
grid-template-columns:minmax(390px,42%) 1fr}
.hero-copy{
background:linear-gradient(120deg,#181818 20%,#202020);
padding-block:clamp(3rem,6vw,6rem)}
.hero h1 em{
color:#fff;
text-decoration:underline;
text-decoration-color:var(--red);
text-decoration-thickness:.08em;
text-underline-offset:.08em}
.hero-photo{
overflow:hidden}
.hero-photo img{
object-position:center}
.hero-seal span{
border-color:var(--red)}
.button{
background:var(--navy)}
.button.button-light{
min-width:230px;
background:var(--navy);
color:#fff;
border:1px solid var(--navy);
padding:1rem 1.35rem;
letter-spacing:.13em;
transition:background-color .28s,border-color .28s}
.button.button-light:hover,.button.button-light:focus-visible{
background:#b80000;
border-color:#b80000}
.intro h2,.section-heading h2,.generation h2,.contact h2,.intro-stat strong,.service h3,.steps h3{
color:var(--ink)}
.section-number{
color:#b80000}
.service{
grid-template-columns:1fr;
min-height:245px;
border-top:3px solid var(--ink);
box-shadow:0 10px 32px rgba(0,0,0,.055)}
.service p{
grid-column:auto}
.service>span{
margin-top:auto;
padding-top:1.5rem;
color:var(--ink);
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.1em}
.service:nth-child(odd):hover{
border-color:var(--red);
box-shadow:0 12px 34px rgba(254,0,0,.1)}
.service:nth-child(even):hover{
border-color:var(--navy);
box-shadow:0 12px 34px rgba(2,37,193,.1)}
.projects{
padding-block:clamp(5rem,8vw,8rem)}
.projects::before{
width:5px;
background:linear-gradient(var(--red) 0 50%,var(--navy) 50%)}
.highlight-layout{
display:grid;
grid-template-columns:minmax(0,1.35fr) minmax(310px,.65fr);
gap:1rem}
.project-carousel{
position:relative;
min-width:0;
background:#e8e8e5}
.carousel-stage{
position:relative;
aspect-ratio:16/10;
min-height:360px;
display:grid;
place-items:center;
overflow:hidden;
touch-action:pan-y;
user-select:none}
.carousel-image{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:contain;
background:#d8d8d5;
display:block;
backface-visibility:hidden;
will-change:transform}
.carousel-image[hidden],.carousel-empty[hidden]{
display:none}
.carousel-empty{
max-width:430px;
padding:2rem;
text-align:center;
color:var(--muted)}
.carousel-empty strong{
display:block;
color:var(--ink);
font:600 1.5rem Manrope}
.carousel-button,.lightbox-arrow{
position:absolute;
top:50%;
translate:0 -50%;
display:grid;
place-items:center;
width:3rem;
height:3rem;
border:0;
background:#fff;
color:var(--ink);
box-shadow:0 6px 22px rgba(0,0,0,.2);
cursor:pointer}
.carousel-prev{
left:1rem}
.carousel-next{
right:1rem}
.carousel-meta{
position:absolute;
left:1rem;
right:1rem;
bottom:1rem;
display:flex;
justify-content:flex-end;
align-items:center;
color:#fff;
text-shadow:0 1px 6px #000}
.carousel-progress{
position:absolute;
z-index:3;
left:0;
right:0;
bottom:0;
height:3px;
overflow:hidden;
background:rgba(255,255,255,.28)}
.carousel-progress span{
display:block;
width:100%;
height:100%;
background:var(--red);
box-shadow:0 0 8px rgba(254,0,0,.28);
transform:scaleX(0);
transform-origin:left center;
will-change:transform}
.carousel-progress[hidden]{
display:none}
.carousel-dots{
display:flex;
gap:.4rem}
.carousel-dots button{
width:.65rem;
height:.65rem;
padding:0;
border:1px solid #fff;
border-radius:50%;
background:transparent}
.carousel-dots button.active{
background:#fff}
.craft-band{
display:flex;
background:var(--ink);
color:#fff}
.craft-band>div{
display:flex;
flex-direction:column;
justify-content:center;
padding:clamp(2rem,4vw,4rem);
border-left:5px solid var(--red)}
.craft-band strong{
font:600 clamp(2rem,3vw,3.2rem)/1.08 Manrope;
letter-spacing:-.04em}
.craft-band .button{
align-self:flex-start;
margin-top:1.5rem;
font-size:.72rem;
text-transform:uppercase;
letter-spacing:.1em}
.generation{
background:#e9e9e6;
color:var(--ink)}
.generation h2{
color:var(--ink)}
.generation-copy>p:not(.section-number){
color:var(--muted)}
.generation-image::after{
border-color:var(--navy)}
.people{
display:grid;
grid-template-columns:1fr 1fr;
gap:1rem;
margin-top:2.5rem}
.people p{
margin:0;
padding:1.25rem 0;
border-top:3px solid var(--ink)}
.people strong,.people span{
display:block}
.people strong{
font:600 1.12rem Manrope}
.people span{
margin-top:.35rem;
font-size:.7rem;
text-transform:uppercase;
letter-spacing:.11em;
color:var(--muted)}
.steps{
border-color:var(--ink)}
.steps li{
display:grid;
grid-template-rows:auto 1fr}
.steps li div{
margin-top:clamp(2.5rem,4vw,4rem);
align-self:start}
.contact{
background:var(--ink);
grid-template-columns:.9fr 1.1fr}
.contact h2{
color:#fff}
.contact-intro{
max-width:560px;
color:#d0d0d0}
.contact-details{
margin-top:3rem;
padding-top:1.5rem;
border-top:1px solid #555}
.contact-form{
position:relative;
background:#fff;
color:var(--ink);
padding:clamp(1.5rem,3vw,3rem);
border-top:6px solid var(--navy)}
.contact-form label{
display:block;
margin-bottom:1.4rem}
.contact-form label>span{
display:block;
margin-bottom:.45rem;
font-size:.68rem;
text-transform:uppercase;
letter-spacing:.13em;
font-weight:600}
.contact-form input,.contact-form textarea{
width:100%;
padding:.85rem;
border:0;
border-bottom:1px solid #aaa;
background:#f5f5f3;
color:var(--ink);
font:inherit}
.contact-form textarea{
resize:vertical}
.contact-form input:focus,.contact-form textarea:focus{
outline:2px solid var(--navy);
outline-offset:2px}
.form-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:1.25rem}
.form-submit{
width:100%;
border:0;
background:var(--navy);
color:#fff;
padding:1rem 1.2rem;
display:flex;
justify-content:space-between;
cursor:pointer;
font-weight:600}
.form-submit:hover,.form-submit:focus-visible{
background:#b80000}
.no-js .contact-form>:not(noscript){
display:none}
.form-no-script{
margin:0;
padding:1rem;
border-left:4px solid var(--red);
background:#f5f5f3}
.form-no-script a{
color:var(--navy);
font-weight:600;
text-decoration:underline}
.form-note,.form-status{
font-size:.75rem;
color:var(--muted)}
.form-status:empty{
display:none}
.form-status.is-success{
position:relative;
margin:1.25rem 0 .85rem;
padding:1rem 1.15rem 1rem 3.45rem;
border-left:5px solid var(--navy);
background:rgba(2,37,193,.07);
color:var(--ink);
font-size:clamp(1rem,1.2vw,1.1rem);
font-weight:600;
line-height:1.5}
.form-status.is-success::before{
content:"✓";
position:absolute;
left:1rem;
top:50%;
translate:0 -50%;
display:grid;
place-items:center;
width:1.65rem;
height:1.65rem;
border-radius:50%;
background:var(--navy);
color:#fff;
font-size:1rem;
line-height:1}
.form-note a{
color:inherit;
text-decoration:underline;
text-underline-offset:.15em}
.form-honeypot{
position:absolute!important;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%)}
.site-footer{
display:grid;
grid-template-columns:1.2fr 1fr 1fr .7fr;
align-items:start;
background:var(--paper);
color:var(--ink);
border-top:1px solid var(--line);
font-size:.78rem}
.site-footer .brand{
padding:0;
background:transparent;
border:0;
box-shadow:none}
.site-footer .brand img{
width:285px;
height:auto}
.site-footer address{
font-style:normal;
margin-top:.4rem}
.site-footer>div,.site-footer nav{
display:flex;
flex-direction:column;
gap:.25rem}
.site-footer>p{
grid-column:1/-1;
margin:1rem 0 0;
padding-top:1rem;
border-top:1px solid var(--line)}
.legal-link{
text-align:left}
.gallery-hero{
padding:clamp(5rem,9vw,9rem) max(clamp(1.25rem,5vw,5rem),calc((100% - 1340px)/2));
background:var(--ink);
color:#fff}
.gallery-hero .section-number{
color:#ff6666}
.gallery-hero h1{
font:600 clamp(3.5rem,7vw,7rem)/.95 Manrope;
letter-spacing:-.055em;
margin:1rem 0}
.gallery-hero>p:last-child{
max-width:650px;
color:#ccc;
font-size:1.15rem}
.gallery-page{
max-width:1420px;
margin:auto;
padding:clamp(4rem,7vw,7rem) clamp(1.25rem,4vw,4rem)}
.gallery-page-heading{
display:flex;
justify-content:space-between;
align-items:end;
gap:2rem;
margin-bottom:2rem}
.gallery-page-heading h2{
margin:0;
font:600 clamp(2.5rem,5vw,5rem)/1 Manrope}
.gallery-summary{
max-width:420px;
color:var(--muted)}
.gallery-filters{
position:relative;
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:.45rem;
overflow:visible;
border-block:1px solid var(--line);
margin-bottom:1.25rem;
padding:.65rem 0}
.gallery-filter{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
gap:.35rem;
min-width:0;
min-height:3.15rem;
padding:.65rem .7rem;
border:1px solid transparent;
border-radius:2px;
background:transparent;
color:var(--muted);
cursor:pointer;
font-weight:600;
line-height:1.2;
text-align:center;
hyphens:auto;
overflow-wrap:normal;
word-break:normal;
transition:color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.gallery-filter[data-filter="highlights"]{
grid-column:span 2}
.gallery-filter:hover{
background:rgba(255,255,255,.72);
color:var(--ink)}
.gallery-filter.active{
border-color:rgba(196,18,31,.15);
background:#fff;
box-shadow:0 5px 16px rgba(22,22,22,.055);
color:var(--ink)}
.gallery-filter:focus-visible{
outline:3px solid var(--navy);
outline-offset:2px}
.gallery-selection-indicator{
position:absolute;
z-index:2;
left:0;
top:0;
width:0;
height:3px;
border-radius:999px;
background:var(--red);
box-shadow:0 1px 5px rgba(196,18,31,.22);
pointer-events:none;
transform-origin:center;
will-change:left,width,transform,opacity}
.project-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:.65rem;
--gallery-shift:0px}
.project{
margin:0;
content-visibility:auto;
contain-intrinsic-size:300px 225px}
.project-image{
display:block;
width:100%;
padding:0;
border:0;
overflow:hidden;
aspect-ratio:4/3;
background:#e9e8e4;
cursor:zoom-in}
.project-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .35s}
.project-image:hover img,.project-image:focus-visible img{
transform:scale(1.03)}
.project-image:focus-visible{
outline:3px solid var(--navy);
outline-offset:3px}
.gallery-empty{
padding:3rem;
text-align:center;
background:#fff}
.gallery-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:2rem;
padding:clamp(2rem,5vw,5rem) max(clamp(1.25rem,5vw,5rem),calc((100% - 1320px)/2));
background:#e9e9e6}
.gallery-cta p{
font:600 clamp(1.5rem,3vw,3rem) Manrope;
margin:0}
body.lightbox-open{
overflow:hidden}
.project-lightbox{
width:min(1200px,calc(100% - 2rem));
max-height:calc(100svh - 2rem);
padding:0;
border:0;
overflow:visible;
background:transparent}
.project-lightbox::backdrop{
background:rgba(8,8,8,.86);
backdrop-filter:blur(7px)}
.lightbox-frame{
position:relative}
.project-lightbox img{
width:100%;
max-height:calc(100svh - 2rem);
object-fit:contain;
background:#111;
box-shadow:0 24px 80px rgba(0,0,0,.5)}
.lightbox-close{
position:absolute;
z-index:3;
top:.6rem;
right:.6rem;
width:2.8rem;
height:2.8rem;
border:0;
border-radius:50%;
background:#fff;
font-size:2rem;
cursor:pointer}
.lightbox-arrow{
z-index:2}
.lightbox-prev{
left:.7rem}
.lightbox-next{
right:.7rem}
.lightbox-counter{
position:absolute;
left:50%;
bottom:.5rem;
translate:-50% 0;
margin:0;
padding:.35rem .75rem;
background:rgba(0,0,0,.7);
color:#fff;
font-size:.75rem}
.reveal{
opacity:1;
transform:none}
.js .reveal{
opacity:0;
transform:translateY(24px);
transition:opacity .7s,transform .7s}
.js .reveal.visible{
opacity:1;
transform:none}
:focus-visible{
outline:3px solid var(--navy);
outline-offset:3px}
@media(max-width:980px){
.site-header,.site-header.is-compact{
height:80px}
.site-header .brand img,.site-header.is-compact .brand img{
width:190px;
height:58px}
.site-header nav{
top:80px;
align-self:auto}
.site-header nav a{
padding:.75rem 0}
.site-header nav .nav-cta{
margin:0;
padding:1rem}
.hero{
height:auto;
grid-template-columns:1fr}
.hero-copy{
min-height:560px}
.hero-photo{
height:56vw;
min-height:390px}
.highlight-layout{
grid-template-columns:1fr}
.gallery-filters{
grid-template-columns:repeat(4,minmax(0,1fr))}
.project-grid{
grid-template-columns:repeat(3,minmax(0,1fr))}
.contact{
grid-template-columns:1fr}
.site-footer{
grid-template-columns:1fr 1fr}
.site-footer>p{
grid-column:1/-1}
}
@media(max-width:640px){
.hero-copy{
min-height:auto;
padding-block:4.5rem}
.hero-photo{
height:68vw;
min-height:330px}
.hero-photo img{
object-position:55% center}
.hero-actions{
align-items:flex-start;
flex-direction:column}
.button.button-light{
width:100%}
.people,.form-row{
grid-template-columns:1fr}
.highlight-layout{
margin-inline:-.25rem}
.carousel-stage{
min-height:260px}
.craft-band>div{
border-left:0;
border-top:5px solid var(--red)}
.gallery-page-heading,.gallery-cta{
align-items:flex-start;
flex-direction:column}
.gallery-filters{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.4rem}
.gallery-filter{
min-height:3rem;
padding:.6rem .45rem;
font-size:.82rem}
.project-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:.5rem}
.site-footer{
grid-template-columns:1fr}
.site-footer .brand img{
width:min(280px,80vw)}
.project-lightbox{
width:calc(100% - .75rem)}
.lightbox-arrow{
width:2.7rem;
height:2.7rem}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
.js .reveal{
opacity:1;
transform:none;
transition:none}
.project-image img,.site-header{
transition:none}
}
.gallery-page .project:nth-child(even){
margin-top:0}
/* Gezielte Feinabstimmung: Hero, Navigation, Highlights und Galerie */
@media (min-width:981px){
.hero{
grid-template-columns:minmax(390px,34%) 1fr;
height:min(760px,calc(100svh - 130px));
min-height:620px}
}
.hero-photo img{
object-position:center}
.hero h1 em{
display:inline-block;
text-decoration:none;
border-bottom:.075em solid var(--red);
padding-bottom:.035em}
.text-link{
line-height:1.3;
padding-bottom:.55rem}
.site-header nav a:not(.nav-cta)::after{
top:calc(50% + .85rem);
bottom:auto}
.site-header nav .nav-cta{
padding-block:1.05rem}
.carousel-stage{
aspect-ratio:4/3}
.carousel-image{
object-position:center center}
.footer-brand img{
background:transparent!important;
border:0!important;
box-shadow:none!important;
filter:none!important}
.gallery-page-heading .eyebrow{
color:var(--navy);
font-weight:600;
opacity:1}
.project-grid{
transition:opacity .24s ease,transform .24s ease,height .28s ease}
.project-grid.is-switching{
opacity:0;
transform:translateX(var(--gallery-shift)) scale(.996)}
@media(max-width:980px){
.hero-photo img{
object-position:center}
.site-header nav a:not(.nav-cta)::after{
top:auto;
bottom:.55rem}
.site-header nav .nav-cta{
padding-block:1.2rem}
}
@media(max-width:640px){
.carousel-stage{
aspect-ratio:4/3;
min-height:0}
.hero-photo img{
object-position:center}
}
@media(prefers-reduced-motion:reduce){
.project-grid{
transition:none}
.project-grid.is-switching{
transform:none}
}
@media(min-width:981px){
.hero{
grid-template-columns:minmax(560px,38%) 1fr;
height:780px;
min-height:620px}
.hero-copy{
min-height:0;
padding-block:4rem}
.hero h1{
font-size:clamp(3.7rem,6.2vw,6rem)}
}
.js .hero-copy.reveal{
opacity:1;
transform:none}
@media(max-width:640px){
.hero-photo{
height:62vw;
min-height:220px}
}
/* Verfeinerter, responsiver Hero-Bildausschnitt */
.hero-photo img{
object-position:center}
/* Bereich 04: klarer Kontrast ohne Änderung der Typografie */
.generation{
background:#e4e4e0;
color:var(--ink)}
.generation-copy{
position:relative;
z-index:1}
.generation-copy .section-number{
color:#b80000}
.generation-copy h2{
color:#111}
.generation-copy>p:not(.section-number):not(.signature){
color:#3f3f3f;
opacity:1}
.people strong{
color:#111}
.people span{
color:#4d4d4d;
opacity:1}
/* Skalierbares Footerlogo auf ruhigem, dunklem Grund */
.site-footer{
background:var(--ink);
color:#fff;
border-top:4px solid var(--navy)}
.site-footer>p{
border-top-color:#444}
.site-footer .legal-link{
color:#fff}
.site-footer a:hover,.site-footer .legal-link:hover{
color:#fff;
text-decoration:underline}
.footer-brand img{
width:330px;
max-width:100%;
height:auto}