@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root{--ink:#25353a;
--muted:#596a70;
--blue:#087caf;
--blue-dark:#07648d;
--pale:#edf8fc;
--orange:#b85417;
--line:#dce7eb;
--round:8px;
--font:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;
font:1rem/1.7 var(--font);
color:var(--ink);
background:white}
h1,h2,h3,p,figure{margin:0}
a{color:inherit;
text-decoration:none}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{touch-action:manipulation}
button{cursor:pointer}
img{max-width:100%;
display:block}
h1,h2,h3{line-height:1.15;
letter-spacing:-.045em}
h1{font-size:clamp(2.7rem,5vw,4.9rem);
font-weight:500}
h2{font-size:clamp(2rem,3.3vw,3.1rem);
font-weight:500}
h3{font-size:1.4rem;
font-weight:600}
em{font-family:Georgia,serif;
font-weight:400;
color:var(--blue)}
.wrap{max-width:1380px;
margin:auto;
padding-inline:48px}
.demo-strip{background:var(--pale);
color:#52707e;
font-size:.75rem;
padding:8px 0}
.demo-strip .wrap{display:flex;
justify-content:space-between}
.demo-strip b{font-weight:500;
margin-left:16px}
header{background:rgba(255,255,255,.98);
position:sticky;
top:0;
z-index:20;
border-bottom:1px solid var(--line)}
.header{display:flex;
align-items:center;
gap:32px;
height:118px}
.logo{display:block;
width:195px;
flex-shrink:0}
.logo img{width:100%;
height:106px;
object-fit:contain}
.header nav{display:flex;
gap:20px;
margin-left:auto}
.header nav a{font-size:.875rem;
padding:10px 0;
white-space:nowrap}
.header nav a:hover,.header nav [aria-current]{color:var(--blue);
box-shadow:0 2px var(--blue)}
.button,button.primary{display:inline-flex;
white-space:nowrap;
flex-shrink:0;
justify-content:center;
align-items:center;
gap:22px;
background:var(--blue);
color:#fff;
padding:15px 23px;
border:1px solid var(--blue);
border-radius:4px;
font-size:.875rem;
font-weight:600}
.button:hover,button.primary:hover{background:var(--blue-dark)}
.button.secondary{background:#fff;
color:var(--blue);
border-color:#b2d7e6}
.small{padding:12px 16px}
.menu{display:none;
background:transparent;
border:1px solid var(--line);
padding:7px 13px;
font-size:1.5rem}
.eyebrow{font-size:.75rem;
letter-spacing:.12em;
font-weight:600;
color:var(--blue);
margin-bottom:22px}
.home-intro{padding-block:56px 44px;
display:grid;
grid-template-columns:1.45fr 1fr;
column-gap:80px;
align-items:end}
.home-intro .eyebrow{grid-column:1/-1}
.intro-aside{max-width:365px;
padding-bottom:7px}
.intro-aside p{color:var(--muted);
margin-bottom:24px}
.text-link{display:inline-block;
color:var(--blue-dark);
font-size:.875rem;
border-bottom:1px solid #8fc9e0;
padding:5px 0}
.panorama{position:relative}
.panorama>img{width:100%;
height:410px;
object-fit:cover;
object-position:center 56%;
border-radius:3px}
.photo-label{position:absolute;
bottom:32px;
left:80px;
padding:22px 28px;
background:white;
display:flex;
flex-direction:column;
gap:5px}
.photo-label span{font-size:.625rem;
letter-spacing:.12em;
color:var(--blue)}
.photo-label strong{font-size:1.15rem;
font-weight:500}
.image-note{position:absolute;
bottom:12px;
right:65px;
background:#fff;
padding:3px 8px;
font-size:.75rem;
color:#52656d}
.entry{display:grid;
grid-template-columns:1fr 1fr 1fr 1fr;
gap:32px;
padding-block:48px 80px}
.entry>div{padding-top:18px}
.entry h2{font-size:1.7rem}
.entry .eyebrow{margin-bottom:15px}
.entry>a{border-top:2px solid #aad8ea;
padding:18px 0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:20px}
.entry>a:nth-of-type(2){border-color:#efba90}
.entry>a:hover h3{color:var(--blue)}
.entry h3{font-size:1.8rem;
font-weight:500}
.entry a>span:last-child{font-size:.8125rem;
color:var(--muted)}
.number{font-size:.75rem;
letter-spacing:.08em;
color:var(--blue)}
.orange{color:var(--orange)}
footer{background:#f4f9fb;
border-top:1px solid var(--line);
padding-top:46px}
.footer-grid{display:grid;
grid-template-columns:1.2fr 1fr 1fr 1.2fr;
gap:40px;
padding-bottom:44px}
.footer-grid h3{font-size:1rem;
margin-bottom:18px;
letter-spacing:0}
.footer-grid p,.footer-grid a:not(.logo){font-size:.875rem;
color:var(--muted)}
.footer-grid a:not(.logo){display:block;
margin:8px 0}
.footer-logo{margin-top:-24px;
margin-bottom:10px}
.footer-bottom{display:flex;
justify-content:space-between;
gap:20px;
font-size:.75rem;
padding-block:21px;
border-top:1px solid var(--line);
color:var(--muted)}
.skip{position:fixed;
left:15px;
top:-100px;
background:white;
padding:15px;
z-index:50}
.skip:focus{top:10px}
:focus-visible{outline:3px solid var(--orange);
outline-offset:5px}
section[id]{scroll-margin-top:140px}
[hidden]{display:none!important}

@media(max-width:1250px){.header{gap:20px}
.header nav{gap:15px}
}
@media(max-width:1100px){.header{gap:18px}
.header nav{gap:14px}
.header>.button{display:none}
.home-intro{column-gap:40px}
.entry{gap:22px}
.wrap{padding-inline:30px}
.photo-label{left:55px}
.image-note{right:45px}
}

@media(max-width:780px){.header{height:95px}
.logo{width:160px}
.logo img{height:85px}
.menu{display:block;
margin-left:auto}
.header nav{display:none;
position:absolute;
top:95px;
left:0;
right:0;
padding:24px 30px;
background:#fff;
border-bottom:1px solid var(--line);
flex-direction:column;
gap:8px}
.header nav.open{display:flex}
.home-intro{grid-template-columns:1fr;
gap:24px;
padding-top:38px}
.home-intro .eyebrow{margin:0}
.intro-aside{max-width:550px}
.panorama>img{height:360px}
.entry{grid-template-columns:1fr 1fr}
.footer-grid{grid-template-columns:1fr 1fr}
.footer-bottom{flex-direction:column;
gap:5px}
}

@media(max-width:480px){.wrap{padding-inline:22px}
.demo-strip .wrap>span:last-child{display:none}
.demo-strip .wrap{justify-content:center}
.home-intro h1{font-size:2.75rem}
.panorama>img{height:330px}
.photo-label{left:34px;
right:34px;
bottom:40px;
padding:16px}
.photo-label strong{font-size:1rem}
.image-note{right:34px}
.entry{gap:24px 18px;
padding-block:30px 48px}
.entry h3{font-size:1.4rem}
.entry h2{font-size:1.35rem}
.entry .eyebrow{font-size:.625rem}
.footer-grid{grid-template-columns:1fr;
gap:24px}
}

@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}
.button{transition:background .2s}
}

.section{padding-block:85px}
.section-topless{padding-bottom:85px}
.tint{background:var(--pale)}
.feature-split{display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px;
padding-block:65px}
.feature-split p:not(.eyebrow){margin:24px 0;
color:var(--muted);
max-width:490px}
.feature-photo{position:relative}
.feature-photo img{width:100%;
height:430px;
object-fit:cover;
border-radius:4px}
.photo-sticker{position:absolute;
background:#fff;
bottom:28px;
left:-28px;
padding:25px 32px;
font-size:1.6rem;
line-height:1.3}
.micro{display:block;
font-size:.8125rem;
color:var(--muted);
line-height:1.65;
margin-top:13px}
.section-head{display:flex;
align-items:end;
justify-content:space-between;
gap:45px;
margin-bottom:42px}
.section-head>p{max-width:450px;
color:var(--muted)}
.journey{list-style:none;
padding:0;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:32px;
margin-top:42px}
.journey li{border-top:1px solid var(--line);
padding-top:23px}
.journey span{color:var(--blue);
font-size:.8125rem}
.journey h3{margin:24px 0 17px;
font-size:1.3rem}
.journey p{color:var(--muted);
font-size:.9375rem}
.service-banner{background:#fff7ef;
border:1px solid #f5dfc8;
padding-block:42px;
display:flex;
align-items:center;
gap:45px}
.service-banner h2{font-size:2rem}
.service-banner p:not(.eyebrow){flex:1;
max-width:390px;
color:var(--muted)}
.service-banner .eyebrow{color:var(--orange)}
.topic-list{display:grid;
grid-template-columns:1fr 1fr;
gap:30px}
.topic-list a{background:#f4f8fa;
padding:35px;
position:relative;
border-bottom:2px solid #c4e0eb}
.topic-list a>span{font-size:.75rem;
color:var(--blue);
letter-spacing:.1em}
.topic-list h3{font-size:2rem;
margin-top:25px;
font-weight:500}
.topic-list b{position:absolute;
right:35px;
bottom:35px;
font-size:1.8rem;
color:var(--blue)}
.page-intro{padding-block:32px 55px}
.breadcrumb{display:inline-block;
font-size:.8125rem;
color:var(--muted);
margin-bottom:36px}
.page-intro .eyebrow{margin-bottom:16px}
.lead{max-width:670px;
font-size:1.0625rem;
color:var(--muted);
margin-top:24px}
.editorial-photo{position:relative}
.editorial-photo img{width:100%;
height:420px;
object-fit:cover;
border-radius:4px}
.editorial-photo>span{position:absolute;
right:65px;
bottom:16px;
background:white;
padding:5px 10px;
font-size:.75rem;
color:var(--muted)}
.three-columns{display:grid;
grid-template-columns:repeat(3,1fr);
gap:45px}
.three-columns h3{margin:23px 0 18px}
.three-columns p{color:var(--muted)}
.tool-layout{display:grid;
grid-template-columns:1.3fr 1fr;
gap:50px;
margin-top:40px;
align-items:start}
.tool-form{min-width:0}
.tool-form fieldset{border:0;
border-bottom:1px solid var(--line);
padding:0 0 30px;
margin:0 0 30px;
min-width:0}
.tool-form legend{font-size:1rem;
font-weight:600;
padding:0;
margin-bottom:20px}
.tool-form>label,.form-grid>label{display:block;
font-size:.875rem;
font-weight:500;
margin-bottom:23px}
.tool-form input:not([type=radio]):not([type=checkbox]):not([type=range]),.tool-form select,.tool-form textarea{display:block;
width:100%;
padding:13px 14px;
border:1px solid #bdcfd6;
border-radius:4px;
background:white;
color:var(--ink);
margin-top:8px;
min-width:0;
font-size:1rem}
.tool-form textarea{resize:vertical}
input[type=range]{width:100%;
margin:20px 0;
accent-color:var(--blue)}
input[type=radio],input[type=checkbox]{accent-color:var(--blue);
width:18px;
height:18px;
flex-shrink:0}
.choice-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px}
.choice-grid label{position:relative;
cursor:pointer}
.choice-grid input{position:absolute;
top:13px;
left:10px}
.choice-grid span{display:block;
padding:43px 14px 20px;
border:1px solid #c5d9e1;
border-radius:4px;
background:#fff;
height:100%}
.choice-grid input:checked+span{border:2px solid var(--blue);
padding:42px 13px 19px;
background:#f6fcff}
.choice-grid input:focus-visible+span{outline:3px solid var(--orange)}
.choice-grid b{font-size:.875rem;
font-weight:500}
.choice-grid small{display:block;
font-size:.75rem;
color:var(--muted);
margin-top:5px}
.check-grid{display:grid;
grid-template-columns:1fr 1fr;
gap:16px}
.check-grid label{display:flex;
align-items:center;
gap:10px;
font-size:.9375rem}
.check-grid.vertical{grid-template-columns:1fr}
.summary{background:#fff;
border:1px solid #cde2eb;
border-radius:6px;
padding:30px;
position:sticky;
top:142px}
.summary h3{font-size:1.7rem;
font-weight:500;
margin:18px 0 24px}
.summary button,.summary .button{width:100%;
margin-top:23px}
.summary .text-link{margin-top:15px}
.summary dl{font-size:.9375rem;
margin:0}
.summary dt{color:var(--muted);
font-size:.75rem;
margin-top:16px}
.summary dd{margin:4px 0 0}
.summary ul{padding-left:20px;
font-size:.9375rem}
.text-button{background:none;
border:0;
border-bottom:1px solid #9fc2d2;
padding:3px 0;
color:var(--blue-dark);
font-size:.875rem}
output{color:var(--blue);
font-weight:600}
label output{float:right}
.narrow{max-width:900px}
.narrow h2{margin-bottom:30px}
.narrow p+h2{margin-top:40px}
.narrow p{color:var(--muted)}
details{border-bottom:1px solid var(--line);
padding:23px 0}
summary{cursor:pointer;
font-weight:500;
font-size:1.0625rem;
padding-right:10px}
details p{padding:18px 0 0;
color:var(--muted);
max-width:800px}
.heating-path{display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
padding-bottom:70px}
.heating-path a{padding:38px;
background:#fff8f0;
border:1px solid #f2dcc8;
border-radius:5px}
.heating-path a:last-child{background:var(--pale);
border-color:#cce3ee}
.heating-path span{font-size:.75rem;
color:var(--orange);
letter-spacing:.1em}
.heating-path h2{font-size:2.4rem;
margin:23px 0}
.heating-path p{color:var(--muted);
margin-bottom:20px;
max-width:380px}
.heating-path b{font-weight:500;
color:var(--blue-dark);
font-size:.875rem}
.form-grid{display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px}
.result-box{background:#fff;
border:1px solid #bddfea;
border-left:3px solid var(--blue);
padding:24px;
margin-top:25px}
.result-box a{display:block;
margin-top:17px;
color:var(--blue-dark);
text-decoration:underline}
.big-result{display:block;
font-size:3.7rem;
line-height:1.2;
margin:23px 0}
.climate-choices{display:flex;
flex-wrap:wrap;
gap:15px;
margin:35px 0}
.climate-choices button{background:white;
border:1px solid #bad6e2;
border-radius:30px;
padding:12px 22px;
color:var(--blue-dark)}
.climate-choices [aria-pressed=true]{background:var(--blue);
color:white;
border-color:var(--blue)}
.climate-result{padding:40px;
background:var(--pale);
border-radius:6px;
min-height:280px}
.climate-result h3{font-size:1.8rem;
margin:20px 0}
.climate-result p{max-width:760px;
color:var(--muted);
margin-bottom:20px}
.service-options{display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding-bottom:75px}
.service-options a{padding:28px;
border:1px solid var(--line);
border-radius:5px}
.service-options span{color:var(--blue);
font-size:.875rem}
.service-options h3{margin:22px 0 18px}
.service-options p{color:var(--muted);
margin-bottom:22px}
.service-options b{font-size:.875rem;
font-weight:500;
color:var(--blue-dark)}
.service-checks{display:flex;
flex-direction:column;
gap:14px;
margin:24px 0}
.service-checks label{font-size:.875rem;
display:flex;
align-items:flex-start;
gap:10px}
.service-checks input{margin-top:5px}
.contact-layout{display:grid;
grid-template-columns:1fr 1.35fr;
gap:90px}
.contact-aside{padding:35px;
background:var(--pale);
align-self:start;
border-radius:5px}
.contact-aside h2{font-size:2.6rem}
.contact-aside dl{margin-block:30px}
.contact-aside dt{font-size:.75rem;
letter-spacing:.06em;
color:var(--blue);
margin-top:20px}
.contact-aside dd{margin:7px 0}
.demo-note{padding:15px 18px;
background:#edf6fa;
border-left:2px solid #84bdd4;
font-size:.8125rem;
color:var(--muted);
margin-block:20px}
.career-band{display:flex;
justify-content:space-between;
gap:20px;
padding:28px;
background:var(--pale);
font-size:.75rem;
color:var(--blue-dark);
letter-spacing:.07em;
margin-bottom:55px}
.section-topless details summary span{float:right;
font-size:.8125rem;
color:var(--muted);
font-weight:400}

@media(max-width:1000px){.tool-layout{gap:28px;
grid-template-columns:1.2fr 1fr}
.choice-grid{grid-template-columns:1fr}
.choice-grid span{padding:14px 16px 14px 40px}
.choice-grid input:checked+span{padding:13px 15px 13px 39px}
.check-grid{grid-template-columns:1fr}
.feature-split{gap:45px}
.service-banner{flex-wrap:wrap}
.contact-layout{gap:40px}
.three-columns{gap:28px}
}

@media(max-width:780px){.section{padding-block:55px}
.section-topless{padding-bottom:55px}
.feature-split,.tool-layout,.contact-layout{grid-template-columns:1fr}
.feature-split{padding-block:45px;
gap:35px}
.feature-photo img{height:350px}
.photo-sticker{left:15px}
.summary{position:static}
.section-head{display:block}
.section-head>p{margin-top:25px;
max-width:100%}
.journey{grid-template-columns:1fr 1fr}
.three-columns{grid-template-columns:1fr}
.topic-list{gap:20px}
.topic-list a{padding:25px}
.topic-list h3{font-size:1.6rem}
.heating-path{gap:20px}
.heating-path a{padding:25px}
.heating-path h2{font-size:1.8rem}
.service-options{grid-template-columns:1fr}
.service-options a{display:grid;
grid-template-columns:25px 1fr;
gap:10px 20px}
.service-options h3{margin:0}
.service-options p,.service-options b{grid-column:2}
.service-options p{margin:0}
.editorial-photo img{height:330px}
.career-band{flex-wrap:wrap}
.choice-grid{grid-template-columns:1fr 1fr 1fr}
.choice-grid span{padding:43px 14px 20px}
.choice-grid input:checked+span{padding:42px 13px 19px}
}

@media(max-width:480px){.form-grid,.heating-path,.topic-list{grid-template-columns:1fr}
.tool-layout{gap:25px}
.summary{padding:24px}
.tool-form fieldset{margin-bottom:24px}
.choice-grid{grid-template-columns:1fr}
.choice-grid span{padding:14px 16px 14px 40px}
.choice-grid input:checked+span{padding:13px 15px 13px 39px}
.service-banner{gap:24px}
.journey{gap:22px}
.journey h3{font-size:1.1rem}
.climate-result{padding:25px}
.climate-choices{gap:10px}
.climate-choices button{font-size:.875rem;
padding:10px 15px}
.editorial-photo>span{right:34px}
.section-topless details summary span{display:block;
float:none;
margin-top:8px}
.contact-aside h2{font-size:2rem}
.big-result{font-size:3rem}
}

.gallery-filters{display:flex;
flex-wrap:wrap;
gap:12px;
margin:28px 0 45px}
.gallery-filters button{background:white;
border:1px solid #bad6e2;
border-radius:30px;
padding:10px 20px;
color:var(--blue-dark);
font-size:.875rem;
font-weight:500;
transition:all .2s}
.gallery-filters button:hover{border-color:var(--blue);
background:var(--pale)}
.gallery-filters [aria-pressed=true]{background:var(--blue);
color:white;
border-color:var(--blue)}
.gallery-grid{display:grid;
grid-template-columns:repeat(3,1fr);
gap:32px}
.gallery-card{border:1px solid var(--line);
border-radius:var(--round);
background:#fff;
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .2s,box-shadow .2s}
.gallery-card:hover{transform:translateY(-3px);
box-shadow:0 12px 28px rgba(37,53,58,.08)}
.gallery-card figure{position:relative;
margin:0;
width:100%;
height:220px;
aspect-ratio:3/2;
overflow:hidden;
background:#f0f5f7}
.gallery-card figure img{width:100%;
height:100%;
object-fit:cover;
transition:transform .4s ease}
.gallery-card:hover figure img{transform:scale(1.04)}
.gallery-card .card-badge{position:absolute;
top:14px;
left:14px;
background:rgba(255,255,255,.94);
backdrop-filter:blur(4px);
padding:4px 10px;
border-radius:3px;
font-size:.6875rem;
letter-spacing:.08em;
font-weight:600;
color:var(--blue)}
.gallery-card-body{padding:24px 26px;
display:flex;
flex-direction:column;
flex:1}
.gallery-card-body h3{font-size:1.25rem;
margin-bottom:10px;
font-weight:600;
line-height:1.25}
.gallery-card-body p{font-size:.9rem;
color:var(--muted);
line-height:1.6;
margin-bottom:18px;
flex:1}
.gallery-card-footer{display:flex;
justify-content:space-between;
align-items:center;
border-top:1px solid var(--line);
padding-top:14px;
margin-top:auto}
.gallery-card-footer span{font-size:.8125rem;
color:var(--muted)}
.gallery-card-footer a{font-size:.8125rem;
color:var(--blue-dark);
font-weight:600}
.gallery-card-footer a:hover{text-decoration:underline}

@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(2,1fr);
gap:24px}
}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr;
gap:20px}
.gallery-filters{gap:8px}
.gallery-filters button{font-size:.8125rem;
padding:8px 14px}
}

@media print{header,footer,.demo-strip,.skip,main>section:not(#wartungsplan),#wartungsplan .tool-form,#wartungsplan .eyebrow,#wartungsplan h2,#wartungsplan .lead,.printable button,.printable a{display:none!important}
#wartungsplan .tool-layout{display:block}
#wartungsplan,.summary{background:white!important}
.summary{border:0;
position:static}
.wrap{padding:0}
.section{padding:0}
.printable{width:100%}
}