/* DM Sans lokal eingebunden (variable Schrift, Gewichte 100-900), statt vom
Google-Server: keine Datenuebertragung an Google beim Seitenaufruf. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{--ink:#152832;--paper:#f7f6f2;--soft:#dce7ed;--gold:#9d8322;--muted:#53636b;--line:#cbd3d5;--white:#fff;--ink-soft:#213944;--space:clamp(70px,calc(var(--vw) * 8),124px);font-family:'DM Sans',Arial,sans-serif;font-synthesis:none;color:var(--ink);background:var(--paper)}
:root[data-theme=graphit]{--ink:#252727;--paper:#f5f2ec;--soft:#e5dfd4;--muted:#66665f;--line:#d6d1c7;--ink-soft:#383b39}
:root[data-theme=tanne]{--ink:#203c34;--paper:#f6f5ef;--soft:#e0e7dc;--muted:#596a5d;--line:#cad5c8;--ink-soft:#305046}
:root[data-theme=schiefer]{--ink:#253744;--paper:#ffffff;--soft:#f3f7fa;--muted:#536573;--line:#d0dbe5;--ink-soft:#425e70}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:145px}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:5px}h1,h2,h3,h4,p,figure{margin:0}h1,h2,h3,h4{font-weight:500}h1{font-size:clamp(48px,calc(var(--vw) * 5.1),78px);line-height:1.06;letter-spacing:-.055em}h1 em{font-style:normal;color:var(--soft)}h2{font-size:clamp(36px,calc(var(--vw) * 4),58px);line-height:1.12;letter-spacing:-.045em}h3{font-size:clamp(24px,calc(var(--vw) * 2.2),32px);line-height:1.2;letter-spacing:-.035em}h4{font-size:19px;letter-spacing:-.02em}p{font-size:17px;line-height:1.7}button{border:0}::selection{background:var(--gold);color:var(--ink)}.wrap{max-width:1280px;width:calc(100% - 100px);margin:auto}.section{padding-block:var(--space)}.dark{background:var(--ink);color:var(--paper)}.soft{background:var(--soft)}.muted{color:var(--muted)}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:600;line-height:1.5;margin-bottom:22px}.dark .eyebrow{color:var(--gold)}.button{min-height:52px;padding:16px 25px;display:inline-flex;align-items:center;justify-content:center;gap:30px;border-radius:40px;font-size:14px;font-weight:550;line-height:1.3;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button span{font-size:20px;font-weight:400}.button.light{background:var(--paper);color:var(--ink)}.button.solid{background:var(--ink);color:var(--paper)}.button.small{min-height:44px;padding:12px 20px;gap:22px}.text-link{display:inline-flex;gap:24px;align-items:center;font-size:14px;border-bottom:1px solid #ffffff55;padding-bottom:7px}.dark-link{border-color:var(--line)}.text-link:hover{border-color:var(--gold)}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip{position:fixed;z-index:100;top:-100px;left:20px;background:var(--paper);padding:20px}.skip:focus{top:10px}
.design-bar{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:10px 40px;background:#fff;color:#29363d;border-bottom:1px solid #e1e4e6}.design-label{font-size:11px;letter-spacing:.13em;font-weight:650;white-space:nowrap}.design-label>span{color:#78828a;font-weight:400;letter-spacing:0;margin-left:16px}.theme-options{display:flex;gap:5px}.theme-options button{background:transparent;color:#55616a;padding:8px 12px;border-radius:25px;display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.theme-options button[aria-pressed=true]{background:#edf0f1;color:#172731;box-shadow:none}.theme-options i{background:var(--swatch);width:14px;height:14px;border-radius:50%}.site-header{background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:30px 50px;gap:30px}.wordmark{display:inline-block;line-height:1}.brand-main{display:block;font-size:27px;letter-spacing:.075em;font-weight:650}.brand-dot{color:var(--gold)}.brand-sub{display:block;font-size:10px;letter-spacing:.4em;margin-top:9px}.site-header nav{display:flex;gap:30px;font-size:14px}.site-header nav a{padding-block:10px}.site-header nav a:hover{color:var(--gold)}.menu-toggle{display:none;background:transparent;width:44px;height:44px;padding:10px}.menu-toggle span{display:block;height:1px;background:var(--paper);margin:7px 0}
.hero{padding:20px 50px 65px;display:grid;grid-template-columns:1.08fr 1fr;gap:clamp(35px,calc(var(--vw) * 5),85px);align-items:center}.hero-photo{position:relative;min-width:0;height:620px;border-radius:16px;overflow:hidden}.hero-photo img{object-position:center}.hero-photo:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#0b1a2590)}.photo-note{position:absolute;bottom:30px;left:30px;right:30px;color:white;z-index:1;display:grid;gap:8px}.photo-note span:first-child{font-size:11px;letter-spacing:.14em}.photo-note span:last-child{font-size:20px}.hero-copy{padding-block:30px;max-width:550px}.hero-copy p:not(.eyebrow){max-width:395px;margin:27px 0 30px;color:var(--soft);font-size:17px}.hero-copy .text-link{display:table;margin-top:25px}.hero-copy .text-link span{margin-left:20px}.promise-strip{display:flex;align-items:center;justify-content:center;gap:clamp(20px,calc(var(--vw) * 4),68px);padding:30px;background:var(--soft);font-size:14px}.promise-strip i{width:4px;height:4px;background:var(--gold);border-radius:50%}.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-bottom:55px}.intro-copy{max-width:480px;padding-top:35px}.intro-copy p+p{margin-top:20px}.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.solution-card{border-radius:14px;overflow:hidden;background:var(--white);color:var(--ink)}.card-image{height:345px;position:relative;overflow:hidden}.card-image img{transition:transform .7s}.solution-card:hover .card-image img{transform:scale(1.035)}.image-tag{position:absolute;top:22px;left:22px;font-size:11px;letter-spacing:.12em;background:var(--paper);padding:10px 14px;border-radius:20px}.card-body{padding:34px}.card-body p{margin:18px 0 28px;color:var(--muted);font-size:16px}.circle-link{display:flex;justify-content:space-between;align-items:center;font-size:14px;font-weight:500;gap:15px}.circle-link span{border:1px solid var(--line);width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px}.circle-link:hover span{background:var(--ink);color:var(--paper)}.editorial{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(var(--vw) * 8),120px);align-items:center}.editorial-copy>p:not(.eyebrow){margin:26px 0;color:var(--muted);max-width:505px}.tall-image{height:680px;position:relative;border-radius:14px;overflow:hidden}.tall-image figcaption{position:absolute;bottom:22px;left:22px;right:22px;background:var(--paper);color:var(--ink);padding:18px 22px;border-radius:8px;font-size:14px}.feature-list{list-style:none;padding:0;margin:30px 0}.feature-list li{display:flex;gap:20px;padding-block:17px;border-top:1px solid var(--line)}.feature-list li>span{font-size:12px;padding-top:4px;color:var(--muted)}.feature-list p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.6}.heat-section .editorial-copy>p:not(.eyebrow){color:var(--soft)}.heat-section .tall-image{height:650px}.heat-points{margin-block:32px}.heat-points>div{padding:17px 0;border-top:1px solid #ffffff26}.heat-points span{font-size:18px}.heat-points p{font-size:14px;margin-top:6px;color:var(--soft)}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:55px}.section-heading>p{max-width:380px;color:var(--muted);font-size:16px}.values{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.values article{border-top:1px solid var(--line);padding-top:28px}.value-number{display:inline-block;font-size:13px;color:var(--muted);margin-bottom:55px}.values h3{margin-bottom:18px}.values p{font-size:16px;color:var(--muted)}.system-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:100px;align-items:center}.system-layout>div>p:not(.eyebrow){margin-block:25px 30px;max-width:490px;color:var(--muted)}.system-steps{border-left:1px solid var(--ink);padding-left:35px}.system-steps>div{position:relative;padding:20px 0 30px 42px}.system-index{position:absolute;left:0;top:28px;font-size:12px}.system-steps h3{font-size:30px}.system-steps p{font-size:15px;margin-top:9px;color:var(--muted)}.process{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;list-style:none;padding:0;margin:0}.process li{border-top:1px solid var(--line);padding-top:24px}.process span{display:block;font-size:13px;color:var(--muted);margin-bottom:36px}.process h3{font-size:22px;margin-bottom:14px}.process p{font-size:15px;color:var(--muted)}.insights-section{background:var(--soft)}.insights-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}.insights-grid figure{height:490px;position:relative;overflow:hidden;border-radius:14px}.insights-grid figure:after{content:'';position:absolute;inset:30% 0 0;background:linear-gradient(transparent,#10191ec9)}.insights-grid figcaption{position:absolute;bottom:30px;left:30px;right:25px;color:#fff;z-index:1}.insights-grid figcaption>span{font-size:11px;letter-spacing:.14em}.insights-grid h3{margin-top:10px;font-size:27px}.image-disclosure{font-size:12px;color:var(--muted);margin-top:18px}.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:90px}.faq-section>div>p.muted{margin-top:26px;max-width:300px;font-size:16px}.faq-section .text-link{margin-top:26px}.faqs details{border-bottom:1px solid var(--line)}.faqs details:first-child{border-top:1px solid var(--line)}.faqs summary{padding:25px 0;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:25px;font-size:17px;line-height:1.5}.faqs summary::-webkit-details-marker{display:none}.faqs summary span{font-size:25px;flex-shrink:0;font-weight:400;transition:transform .2s}.faqs details[open] summary span{transform:rotate(45deg)}.faqs details>p{padding-bottom:25px;color:var(--muted);font-size:15px}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.contact-layout>div>p:not(.eyebrow){margin-top:28px;color:var(--soft)}.instagram-link{display:inline-flex;gap:25px;font-size:16px;margin-top:35px;border-bottom:1px solid #ffffff44;padding-bottom:8px}.contact-card{background:var(--paper);color:var(--ink);border-radius:14px;padding:36px}.contact-card h3{font-size:25px;margin-bottom:24px}.interest-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:25px}.interest-options button{background:transparent;color:var(--ink);border:1px solid var(--line);padding:11px 15px;border-radius:25px;font-size:13px}.interest-options button.selected{background:var(--ink);color:var(--paper);border-color:var(--ink)}.contact-card label{display:block;font-size:13px;margin-bottom:10px}.contact-card textarea{resize:vertical;min-height:135px;width:100%;padding:15px;color:var(--ink);border:1px solid var(--line);background:var(--white);border-radius:7px;font-size:15px;line-height:1.6}.contact-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:22px}.contact-card .contact-hint{font-size:12px!important;color:var(--muted)!important;margin-top:20px!important;line-height:1.6}.site-footer{border-top:1px solid #ffffff24}.footer-top{display:grid;grid-template-columns:1.25fr 1.25fr 1fr 1fr;gap:40px;padding-block:58px}.footer-top>p{font-size:16px;color:var(--soft)}.footer-top>div{display:grid;gap:13px;font-size:14px}.footer-bottom{border-top:1px solid #ffffff24;padding-block:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--soft)}.footer-bottom button{padding:0;background:transparent;color:inherit;font-size:inherit}.footer-bottom button:hover{text-decoration:underline}dialog{border:0;padding:45px;max-width:620px;width:calc(100% - 36px);border-radius:14px;background:var(--paper);color:var(--ink)}dialog::backdrop{background:#071018aa;backdrop-filter:blur(5px)}dialog h2{font-size:34px;margin-bottom:25px}dialog p{font-size:16px;margin-top:15px}dialog a{text-decoration:underline}dialog .dialog-close{position:absolute;right:15px;top:10px;background:transparent;color:var(--ink);font-size:30px;width:40px;height:40px}#image-credits{line-height:1.7;font-size:15px}#image-credits p{margin-bottom:15px}
@media(min-width:1600px){.hero,.site-header{padding-left:max(50px,calc((calc(var(--vw) * 100) - 1440px)/2));padding-right:max(50px,calc((calc(var(--vw) * 100) - 1440px)/2))}.hero-photo{height:690px}}
@media(max-width:1100px){.design-label>span{display:none}.site-header{padding:25px 30px;gap:20px}.site-header nav{gap:18px}.hero{padding:20px 30px 50px;gap:40px}.hero-photo{height:550px}.wrap{width:calc(100% - 60px)}.hero-copy h1{font-size:58px}.header-cta{font-size:12px!important}.intro{gap:40px}.editorial{gap:50px}.tall-image{height:650px}.system-layout,.contact-layout,.faq-section{gap:50px}.contact-card{padding:26px}.card-image{height:300px}}
@media(max-width:820px){html{scroll-padding-top:120px}.design-bar{padding:9px 20px;justify-content:center}.design-label{display:none}.site-header{padding:24px}.site-header nav{display:none;position:absolute;top:140px;left:0;right:0;background:var(--ink);padding:20px 24px 30px;z-index:30;box-shadow:none}.site-header nav.open{display:grid}.menu-toggle{display:block}.header-cta{margin-left:auto}.hero{padding:12px 24px 45px;gap:30px}.hero-photo{height:475px}.hero-copy h1{font-size:46px}.hero-copy .eyebrow{font-size:10px}.hero-copy p:not(.eyebrow){font-size:15px}.hero-copy .button{padding:15px 18px;font-size:12px;gap:18px}.promise-strip{gap:16px;font-size:12px;flex-wrap:wrap}.wrap{width:calc(100% - 48px)}.intro{gap:30px}.intro-copy{padding-top:0}.card-body{padding:25px}.card-image{height:260px}.editorial,.system-layout,.contact-layout,.faq-section{gap:35px}.tall-image,.heat-section .tall-image{height:610px}.section-heading{gap:35px}.section-heading>p{max-width:290px}.values{gap:28px}.process{grid-template-columns:1fr 1fr;gap:40px}.insights-grid figure{height:390px}.insights-grid h3{font-size:23px}.insights-grid figcaption{left:23px;bottom:23px}.contact-layout{grid-template-columns:1fr}.contact-layout>div:first-child{max-width:550px}.footer-top{grid-template-columns:1fr 1fr}.footer-top .brand-main{font-size:24px}.faq-section{grid-template-columns:1fr}.faq-section>div>p.muted{max-width:500px}.faq-section .text-link{margin-top:18px}}
@media(max-width:600px){.design-bar{padding:8px 5px}.theme-options{gap:1px;justify-content:space-between;width:100%}.theme-options button{font-size:10px;gap:5px;padding:9px 7px}.theme-options i{width:11px;height:11px;flex-shrink:0}.site-header{padding:24px 20px}.brand-main{font-size:23px}.brand-sub{font-size:9px}.header-cta{display:none}.hero{display:flex;flex-direction:column-reverse;padding:0 20px 30px;gap:20px}.hero-copy{max-width:none;width:100%;padding:22px 0 10px}.hero-copy h1{font-size:clamp(49px,calc(var(--vw) * 12),68px)}.hero-copy .eyebrow{font-size:11px;margin-bottom:20px}.hero-copy p:not(.eyebrow){font-size:16px;max-width:390px;margin-top:23px}.hero-copy .button{font-size:14px;padding:16px 22px}.hero-copy .text-link{display:inline-flex;margin-left:0;margin-top:20px}.hero-photo{width:100%;height:355px}.photo-note{bottom:24px;left:24px}.promise-strip{justify-content:flex-start;padding:22px;gap:14px 18px}.promise-strip i:last-of-type{display:none}.wrap{width:calc(100% - 40px)}.intro{grid-template-columns:1fr;gap:25px;padding-bottom:35px}.intro-copy{max-width:none}.intro-copy p{font-size:16px}.solution-grid{grid-template-columns:1fr;gap:25px}.card-image{height:300px}.card-body{padding:26px}.editorial{grid-template-columns:1fr;gap:40px}.tall-image,.heat-section .tall-image{height:450px}.heat-section .reverse .tall-image{order:2}.section-heading{display:block;margin-bottom:36px}.section-heading>p{max-width:none;margin-top:24px}.section-heading>.text-link{margin-top:26px}.values{grid-template-columns:1fr;gap:30px}.value-number{margin-bottom:25px}.values p{max-width:460px}.system-layout{grid-template-columns:1fr;gap:35px}.system-steps{padding-left:20px}.system-steps>div{padding-block:18px}.process{gap:32px 23px}.process h3{font-size:20px}.process p{font-size:14px}.process span{margin-bottom:25px}.insights-grid{grid-template-columns:1fr}.insights-grid figure{height:370px}.insights-grid .insight-large{height:420px}.faq-section{gap:35px}.faqs summary{font-size:16px;padding-block:21px}.contact-card{padding:25px 22px}.contact-card h3{font-size:24px}.contact-actions{gap:20px}.contact-card textarea{font-size:16px}.footer-top{gap:35px 25px;padding-block:42px}.footer-top>p{font-size:14px}.footer-top .brand-main{font-size:20px}.footer-top .brand-sub{font-size:8px}.footer-bottom{display:grid;gap:16px;font-size:11px}.footer-bottom span{line-height:1.7}.button{min-height:50px}dialog{padding:35px 25px}dialog h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Full-width photographic hero, shared by all four palettes. */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:740px;min-height:85svh;padding:75px max(50px,calc((calc(var(--vw) * 100) - 1280px)/2)) 100px;overflow:hidden;gap:0;background:var(--ink)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;min-height:0;border-radius:0;z-index:-2}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
.hero-photo:after{inset:0;background:linear-gradient(90deg,rgba(8,20,26,.86) 0%,rgba(8,20,26,.68) 34%,rgba(8,20,26,.16) 72%),linear-gradient(0deg,rgba(8,20,26,.45),transparent 50%)}
.hero-copy{max-width:620px;width:100%;padding:25px 0;color:#fff}
.hero-copy h1{font-size:clamp(62px,calc(var(--vw) * 6.8),96px);letter-spacing:-.055em}
.hero-copy h1 em{color:#fff}
.hero-copy p:not(.eyebrow){color:#f1f4f5;max-width:400px;font-size:18px;margin-top:30px}
.hero-copy .eyebrow{color:#e0cc91}
.hero-copy .text-link{color:#fff}
.hero .photo-note{left:auto;right:50px;bottom:35px;text-align:right}
@media(max-width:1100px){.hero{padding:70px 40px 90px;min-height:720px;min-height:82svh}.hero-copy h1{font-size:78px}.hero-photo{height:100%}}
@media(max-width:820px){.hero{padding:60px 30px 95px;min-height:710px;min-height:82svh}.hero-copy{max-width:560px}.hero-copy h1{font-size:72px}.hero-photo{height:100%}.hero .photo-note{right:30px;bottom:25px}.hero-photo:after{background:linear-gradient(90deg,rgba(8,20,26,.83),rgba(8,20,26,.32)),linear-gradient(0deg,rgba(8,20,26,.4),transparent 60%)}}
@media(max-width:600px){.hero{display:flex;flex-direction:row;align-items:center;padding:50px 24px 95px;min-height:690px;min-height:calc(100svh - 135px)}.hero-copy{padding:0}.hero-copy h1{font-size:clamp(53px,calc(var(--vw) * 12.8),76px)}.hero-copy p:not(.eyebrow){font-size:16px;max-width:320px}.hero-photo{height:100%;width:100%}.hero-photo img{object-position:58% center}.hero .photo-note{left:24px;right:24px;bottom:24px;text-align:left}.hero .photo-note span:first-child{display:none}.hero .photo-note span:last-child{font-size:13px}.hero-copy .text-link{display:table;margin-top:22px}.hero-photo:after{background:linear-gradient(90deg,rgba(8,20,26,.83),rgba(8,20,26,.42)),linear-gradient(0deg,rgba(8,20,26,.4),transparent 70%)}}
/* Pale blue sampled from the supplied Levonova reference: #F3F7FA. */
:root[data-theme=schiefer] .site-header{background:var(--soft);color:var(--ink)}
:root[data-theme=schiefer] .header-cta{background:var(--ink);color:#fff}
:root[data-theme=schiefer] .solution-card{background:var(--soft)}
:root[data-theme=schiefer] .heat-section,:root[data-theme=schiefer] .contact-section{background:var(--soft);color:var(--ink)}
:root[data-theme=schiefer] .heat-section .eyebrow,:root[data-theme=schiefer] .contact-section .eyebrow{color:var(--muted)}
:root[data-theme=schiefer] .heat-section .editorial-copy>p:not(.eyebrow),:root[data-theme=schiefer] .heat-points p,:root[data-theme=schiefer] .contact-layout>div>p:not(.eyebrow){color:var(--muted)}
:root[data-theme=schiefer] .heat-points>div{border-color:var(--line)}
:root[data-theme=schiefer] .heat-section .button.light{background:var(--ink);color:#fff}
:root[data-theme=schiefer] .instagram-link{border-color:var(--line)}
:root[data-theme=schiefer] .menu-toggle span{background:var(--ink)}
@media(max-width:820px){:root[data-theme=schiefer] .site-header nav{background:var(--soft)}}
.wordmark{display:inline-flex;align-items:center;gap:13px;flex-shrink:0}
.logo-frame{position:relative;display:block;width:48px;height:48px;border-radius:8px;overflow:hidden;background:#fff;flex-shrink:0}
.logo-frame img{position:absolute;max-width:none;width:108px;height:108px;left:-30px;top:-30px;object-fit:contain}
.site-header .brand-main{font-size:23px}.site-header .brand-sub{font-size:9px}
.footer-top .logo-frame{width:42px;height:42px}.footer-top .logo-frame img{width:94px;height:94px;left:-26px;top:-26px}
.footer-top .brand-main{font-size:21px}.footer-top .brand-sub{font-size:8px}
@media(max-width:1100px){.site-header .brand-main{font-size:20px}.site-header .brand-sub{font-size:8px}.site-header .wordmark{gap:10px}}
@media(max-width:600px){.site-header .brand-main{font-size:21px}.footer-top .wordmark{gap:8px}.footer-top .brand-main{font-size:16px}.footer-top .brand-sub{font-size:7px;letter-spacing:.26em}.footer-top .logo-frame{width:33px;height:33px}.footer-top .logo-frame img{width:76px;height:76px;left:-21px;top:-21px}}
/* Navigation overlays the same photograph as the hero content. */
.hero .site-header{position:absolute;inset:0 0 auto;z-index:5;background:transparent;color:#fff;padding:28px max(50px,calc((calc(var(--vw) * 100) - 1280px)/2));gap:25px}
:root[data-theme=schiefer] .hero .site-header{background:transparent;color:#fff}
.hero .site-header .header-cta,:root[data-theme=schiefer] .hero .header-cta{background:#fff;color:var(--ink)}
.hero .site-header .menu-toggle span,:root[data-theme=schiefer] .hero .menu-toggle span{background:#fff}
.hero .site-header nav a:hover{color:#e0cc91}
.hero{padding-top:170px;min-height:calc(100svh - 56px)}
.hero-photo:before{content:'';position:absolute;inset:0 0 auto;height:180px;background:linear-gradient(rgba(8,20,26,.65),transparent);z-index:1;pointer-events:none}
@media(max-width:1100px){.hero .site-header{padding:26px 40px}.hero{padding-top:155px}}
@media(max-width:820px){.hero .site-header{padding:24px 30px}.hero .site-header nav,:root[data-theme=schiefer] .hero .site-header nav{top:100%;background:var(--ink);color:#fff}.hero{padding-top:155px}}
@media(max-width:600px){.hero .site-header{padding:24px}.hero{padding-top:140px;min-height:calc(100svh - 50px)}}
.hero .site-header{border-bottom:1px solid rgba(255,255,255,.42)}
.hero-copy h1{font-weight:400}
.logo-frame{background:transparent;border-radius:0}
/* Original brand gold for primary actions in all four palettes. */
:root[data-theme] .button,:root[data-theme] .hero .site-header .header-cta,:root[data-theme] .heat-section .button.light{background:var(--gold);color:#101820}
:root[data-theme] .button:hover{background:#b39836;color:#101820}
:root[data-theme] .circle-link span{background:var(--gold);color:#101820;border-color:var(--gold)}
:root[data-theme] .circle-link:hover span{background:#b39836;border-color:#b39836}
:root[data-theme] .interest-options button.selected{background:var(--gold);color:#101820;border-color:var(--gold)}
/* Anthracite text on light content surfaces. */
:root[data-theme]{--muted:#222222}
:root[data-theme] body{color:#222222}
:root[data-theme] .solution-card,:root[data-theme] .contact-card,:root[data-theme] dialog,:root[data-theme] .tall-image figcaption{color:#222222}
:root[data-theme] .contact-card textarea,:root[data-theme] .interest-options button{color:#222222}
:root[data-theme] .interest-options button.selected{color:#101820}
/* White labels on every gold action, including hover and selected states. */
:root[data-theme] .button,:root[data-theme] .button:hover,:root[data-theme] .hero .site-header .header-cta,:root[data-theme] .heat-section .button.light,:root[data-theme] .circle-link span,:root[data-theme] .circle-link:hover span,:root[data-theme] .interest-options button.selected{color:#fff}
.hero .site-header .header-wordmark{position:relative;display:block;width:290px;height:50px;overflow:hidden;flex-shrink:0}
.hero .site-header .header-wordmark>img{position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:auto;object-fit:contain}
@media(max-width:1100px){.hero .site-header .header-wordmark{width:235px}}
@media(max-width:600px){.hero .site-header .header-wordmark{width:245px;max-width:calc(calc(var(--vw) * 100) - 120px);height:44px}}
/* Pale-blue circular discovery buttons, as requested. */
:root[data-theme] .circle-link span{background:#f3f7fa;border-color:#f3f7fa;color:#fff}
:root[data-theme] .circle-link:hover span{background:#e5edf4;border-color:#e5edf4;color:#fff}
/* Original lighter logo gold restored for action buttons. */
:root{--action-gold:#9d8322;--action-gold-hover:#b39836}
:root[data-theme] .button,:root[data-theme] .hero .site-header .header-cta,:root[data-theme] .heat-section .button.light,:root[data-theme] .circle-link span,:root[data-theme] .interest-options button{background:var(--action-gold);border-color:var(--action-gold);color:#fff}
:root[data-theme] .button:hover,:root[data-theme] .hero .site-header .header-cta:hover,:root[data-theme] .heat-section .button.light:hover,:root[data-theme] .circle-link:hover span,:root[data-theme] .interest-options button:hover{background:var(--action-gold-hover);border-color:var(--action-gold-hover);color:#fff}
:root[data-theme] .interest-options button.selected{background:var(--action-gold);border-color:#fff;color:#fff;box-shadow:none}
/* Full-photo service cards with hover, keyboard and touch reveal. */
:root[data-theme] .solution-card{position:relative;min-height:560px;background:#172128;color:#fff;isolation:isolate;overflow:hidden;border-radius:20px}
.solution-card .card-image{position:absolute;inset:0;height:100%;z-index:-2}
.solution-card .card-image:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.06) 55%,rgba(0,0,0,.3));transition:background .35s}
.solution-card .image-tag{display:none}
.solution-card .card-body{position:relative;min-height:560px;padding:38px;display:flex;flex-direction:column;pointer-events:none}
.solution-card .card-body h3{font-size:clamp(30px,calc(var(--vw) * 3.2),44px);line-height:1.2;font-weight:400;color:#fff}
.solution-card .card-body p{margin-top:auto;margin-bottom:24px;padding-top:65px;color:#fff;font-size:17px;opacity:0;transform:translateY(16px);transition:opacity .3s,transform .3s}
.solution-card .circle-link{font-size:18px;color:#fff;border-bottom:2px solid var(--gold);padding-bottom:14px;opacity:0;transform:translateY(16px);visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;pointer-events:auto}
.solution-card .card-toggle{position:absolute;inset:0;width:100%;height:100%;background:transparent;z-index:0;border-radius:20px}
.solution-card .card-toggle:focus-visible{outline-offset:-5px}
.solution-card:hover .card-image:after,.solution-card:focus-within .card-image:after,.solution-card.is-open .card-image:after{background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.32) 40%,rgba(0,0,0,.9))}
.solution-card:hover .card-body p,.solution-card:focus-within .card-body p,.solution-card.is-open .card-body p,.solution-card:hover .circle-link,.solution-card:focus-within .circle-link,.solution-card.is-open .circle-link{opacity:1;transform:none;visibility:visible}
@media(max-width:600px){:root[data-theme] .solution-card,.solution-card .card-body{min-height:500px}.solution-card .card-body{padding:28px}.solution-card .card-body h3{font-size:34px}.solution-card .card-body p{font-size:16px}}
@media(hover:none){.solution-card .card-body:after{content:'Details anzeigen +';position:absolute;bottom:30px;left:28px;color:#fff;font-size:14px}.solution-card.is-open .card-body:after,.solution-card:focus-within .card-body:after{display:none}}
/* White discovery circles with black arrows in the photographic cards. */
:root[data-theme] .solution-card .circle-link span,
:root[data-theme] .solution-card .circle-link:hover span{background:#fff;border-color:#fff;color:#000}
/* Seitenmassstab: eine einzige Verkleinerung fuer alle Seiten (Startseite,
Funnel, Rechtsseiten), auf Geraeten mit Maus ab 768px. Zum Nachjustieren
nur --seitenzoom aendern. Vollbild-Abschnitte teilen durch den Wert, damit
sie trotz Verkleinerung den echten Bildschirm fuellen. */
:root{--seitenzoom:1;--vw:1vw}
/* --vw: 1vw des MacBook-Referenzlayouts (1440 px bei 95 %). Auf kleineren Desktop-Fenstern
rechnet es auf dieselbe virtuelle Breite um, damit alles proportional gleich bleibt. */
@media(min-width:1100px) and (pointer:fine){:root{--vw:calc(1vw * .95 / var(--seitenzoom))}}
@media(min-width:768px) and (pointer:fine){
:root{--seitenzoom:.95;zoom:var(--seitenzoom)}
.hero{min-height:calc(100svh / var(--seitenzoom) - 56px)}
}
/* White reveal underline in both service cards and every palette. */
:root[data-theme] .solution-card .circle-link,
:root[data-theme] .solution-card .circle-link:hover{border-bottom-color:#fff}
/* Guided energy enquiry directly below the hero. */
.energy-funnel{background:var(--soft);padding:76px 0 82px;color:#222;scroll-margin-top:65px}
.funnel-layout{display:grid;grid-template-columns:.8fr 1.5fr;gap:70px;align-items:center}
.funnel-intro h2{font-size:clamp(34px,calc(var(--vw) * 3.5),50px)}
.funnel-intro>p:not(.eyebrow){font-size:16px;max-width:330px;margin-top:25px}
.funnel-intro-note{margin-top:38px;display:flex;gap:20px;align-items:center}
.funnel-intro-note>span{font-size:13px;letter-spacing:.08em;color:#70601e;border-right:1px solid #9d832255;padding-right:20px}
.funnel-intro-note p{font-size:13px;line-height:1.6}
.funnel-panel{background:#fff;border-radius:18px;padding:34px 38px;box-shadow:none;min-width:0}
.funnel-progress{list-style:none;display:flex;justify-content:space-between;gap:12px;padding:0 0 24px;margin:0 0 28px;border-bottom:1px solid #e8ecef}
.funnel-progress li{display:flex;align-items:center;gap:8px;font-size:12px;color:#69747a}
.funnel-progress li>span{display:grid;place-items:center;border-radius:50%;height:27px;width:27px;background:#f3f7fa;font-size:11px}
.funnel-progress li.current{color:#222;font-weight:600}
.funnel-progress li.current>span,.funnel-progress li.complete>span{background:var(--action-gold);color:#fff}
.funnel-counter{font-size:11px;letter-spacing:.12em;color:#6a6f73;margin-bottom:12px}
.funnel-step h3{font-size:28px;letter-spacing:-.025em;line-height:1.25;outline:none}
.funnel-subtitle{font-size:14px;color:#60686d;margin-top:12px;line-height:1.6}
.funnel-choices{border:0;padding:0;margin:26px 0 0;display:grid;gap:12px}
.solution-choices{grid-template-columns:repeat(3,minmax(0,1fr))}
.funnel-choice{position:relative;display:block;cursor:pointer;min-width:0}
.funnel-choice input{position:absolute;top:16px;right:14px;width:17px;height:17px;margin:0;accent-color:var(--action-gold);z-index:1}
.funnel-choice .choice-content{display:flex;flex-direction:column;padding:20px 15px;gap:9px;height:100%;border:1px solid #dfe5e9;border-radius:10px;background:#fff;transition:border-color .2s,background .2s}
.funnel-choice input:checked+.choice-content{border-color:var(--action-gold);background:#fbf9f0;box-shadow:none}
.funnel-choice input:focus-visible+.choice-content{outline:3px solid var(--gold);outline-offset:3px}
.funnel-choice:hover .choice-content{border-color:var(--action-gold)}
.choice-symbol{font-size:34px;color:var(--action-gold);line-height:1;margin:6px 0 19px}
.funnel-choice strong{font-size:15px;font-weight:500;line-height:1.45;padding-right:8px}
.funnel-choice small{font-size:12px;color:#60686d;line-height:1.6}
.compact-choices{grid-template-columns:1fr 1fr}
.compact-choices .choice-content{padding:18px 38px 18px 18px;min-height:70px;justify-content:center}
.funnel-ownership{border:0;padding:0;margin:25px 0 0;display:flex;flex-wrap:wrap;gap:18px;font-size:14px}
.funnel-ownership legend{font-size:14px;margin-bottom:12px}
.funnel-ownership label{display:flex;align-items:center;gap:7px;min-height:28px;cursor:pointer}
.funnel-ownership input{accent-color:var(--action-gold);width:16px;height:16px}
.funnel-navigation{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:24px;padding-top:22px;border-top:1px solid #e8ecef}
.funnel-navigation>span{font-size:12px;color:#69747a}
.funnel-back{color:#222;background:transparent;padding:10px 0;font-size:14px}
.funnel-error{font-size:13px;color:#9c2828;line-height:1.5;margin-top:15px}
.funnel-error:empty{display:none}
.funnel-step[hidden],.funnel-back[hidden],#funnel-next[hidden],#funnel-reassurance[hidden]{display:none}
#funnel-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:25px 0;padding:20px;background:#f3f7fa;border-radius:8px}
#funnel-summary dt{font-size:11px;color:#667179;margin-bottom:5px}
#funnel-summary dd{font-size:14px;line-height:1.5;margin:0}
.funnel-message-label{font-size:12px;display:block;margin-bottom:9px}
#funnel-message{width:100%;border:1px solid #dfe5e9;border-radius:8px;color:#222;background:#fff;resize:vertical;min-height:150px;padding:15px;font-size:14px;line-height:1.6}
.funnel-send-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:20px}
.funnel-note{font-size:12px;color:#69747a;line-height:1.6;margin-top:17px}
@media(max-width:1100px){.funnel-layout{gap:35px;grid-template-columns:.7fr 1.5fr}.funnel-panel{padding:28px}.solution-choices{grid-template-columns:1fr}.solution-choices .choice-content{padding:17px 40px 17px 56px;position:relative;gap:3px}.choice-symbol{position:absolute;left:17px;top:21px;font-size:27px;margin:0}.funnel-progress{gap:8px}.funnel-progress li{font-size:11px;gap:5px}}
@media(max-width:820px){.funnel-layout{grid-template-columns:1fr;gap:30px}.funnel-intro>p:not(.eyebrow){max-width:520px;margin-top:15px}.funnel-intro-note{display:none}.funnel-intro h2 br{display:none}.energy-funnel{padding:55px 0}.solution-choices{grid-template-columns:repeat(3,minmax(0,1fr))}.solution-choices .choice-content{padding:20px 14px;gap:9px}.choice-symbol{position:static;font-size:30px;margin:5px 0 20px}}
@media(max-width:600px){.funnel-panel{padding:24px 20px}.funnel-progress li{font-size:10px;gap:5px}.funnel-progress li>span{height:22px;width:22px;font-size:10px}.funnel-progress{gap:5px;margin-bottom:24px}.funnel-step h3{font-size:25px}.solution-choices,.compact-choices{grid-template-columns:1fr}.solution-choices .choice-content{padding:16px 38px 16px 53px;gap:3px}.choice-symbol{position:absolute;top:23px;left:16px;margin:0;font-size:26px}.funnel-navigation{gap:12px}.funnel-navigation>span{max-width:110px;font-size:11px}.funnel-navigation .button{padding:14px 20px;gap:18px;font-size:13px}.funnel-ownership{gap:13px}#funnel-message{font-size:16px}#funnel-summary{gap:16px 12px;padding:17px}.energy-funnel .wrap{width:calc(100% - 32px)}}
/* Editorial service gallery inspired by the supplied reference. */
.more-services{background:#fff;color:#222;padding:85px 0 40px;overflow:hidden}
.more-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:48px}
.more-heading h2{font-size:clamp(32px,calc(var(--vw) * 3.5),49px);line-height:1.2;letter-spacing:-.035em;font-weight:400}
.more-heading .eyebrow{color:#9d8322;font-size:11px;margin-bottom:18px}
.more-heading .button{flex-shrink:0;font-size:13px}
.more-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:#9d8322 #fff;padding:3px 3px 20px;margin:-3px -3px 0}
.more-card{position:relative;display:block;flex:0 0 calc((100% - 62px)/3.15);height:510px;border-radius:15px;overflow:hidden;scroll-snap-align:start;isolation:isolate;color:#fff;background:#263139}
.more-card img{height:100%;width:100%;object-fit:cover;transition:transform .65s ease}
.more-card:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 32%,rgba(5,13,18,.2) 55%,rgba(5,13,18,.9));pointer-events:none}
.more-card:hover img,.more-card:focus-visible img{transform:scale(1.035)}
.more-card-caption{position:absolute;z-index:1;bottom:30px;left:25px;right:25px;text-align:center}
.more-card-caption p{font-size:10px;letter-spacing:.07em;line-height:1.5;margin-bottom:11px;color:#e3e9ec}
.more-card-caption h3{font-size:26px;line-height:1.18;font-weight:400;letter-spacing:-.025em;color:#fff}
.more-card-sub{display:block;font-size:12px;line-height:1.5;margin-top:12px;color:#e3e9ec}
.more-card-arrow{position:absolute;z-index:1;top:20px;right:20px;display:grid;place-items:center;background:#fff;color:#000;width:36px;height:36px;border-radius:50%;font-size:21px;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s}
.more-card:hover .more-card-arrow,.more-card:focus-visible .more-card-arrow{opacity:1;transform:none}
.more-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:16px}
.more-controls>span{color:#555;font-size:12px}
.more-controls>div{display:flex;gap:10px}
.more-controls button{width:42px;height:42px;border-radius:50%;background:var(--action-gold);color:#fff;font-size:20px}
.more-controls button:hover{background:var(--action-gold-hover)}
.more-controls button:disabled{opacity:.35;cursor:default}
@media(max-width:1100px){.more-card{flex-basis:calc((100% - 36px)/2.35);height:470px}.more-heading{gap:25px}.more-heading .button{font-size:12px;gap:12px;padding:14px 18px}}
@media(max-width:700px){.more-services{padding:60px 0 30px}.more-heading{display:block;margin-bottom:30px}.more-heading .button{margin-top:25px}.more-card{flex-basis:82%;height:460px}.more-track{gap:16px}.more-card-arrow{opacity:1;transform:none}.more-controls>span{max-width:190px;line-height:1.6}.more-card-caption h3{font-size:27px}}
@media(prefers-reduced-motion:reduce){.more-track{scroll-behavior:auto}}
.smart-home{background:#fff;color:#222;padding-top:60px}
.smart-home-visual{margin:0 auto 45px;max-width:1180px}
.smart-home-visual img{width:100%;height:auto;object-fit:contain}
.smart-home-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.smart-home-content h2{font-weight:400}
.smart-home-content h2 span{color:#9d8322}
.smart-home-copy p{font-size:17px;line-height:1.75;margin-bottom:20px;max-width:530px}
.smart-home-copy .button{margin-top:9px}
.more-card-caption{bottom:34px}
@media(max-width:820px){.smart-home-content{gap:35px}.smart-home-copy p{font-size:16px}.smart-home-visual{margin-bottom:30px}}
@media(max-width:600px){.smart-home{padding-top:40px}.smart-home-content{grid-template-columns:1fr;gap:25px}.smart-home-visual{margin-inline:-8px}.smart-home-copy .button{font-size:13px;gap:20px}}
.vision-section{color:#222}
.vision-intro{display:grid;grid-template-columns:280px 1fr;gap:55px;align-items:center;margin-bottom:65px}
.vision-intro>img{width:100%;height:280px;object-fit:cover;border-radius:20px}
.vision-intro h2{font-weight:400;margin-bottom:28px}
.vision-intro p{font-size:19px;line-height:1.7;max-width:840px}
.vision-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px 65px}
.vision-benefits article>svg{width:44px;height:44px;color:var(--gold);margin-bottom:23px}
.vision-benefits h3{font-size:25px;font-weight:400;line-height:1.25;letter-spacing:-.025em;margin-bottom:19px}
.vision-benefits p{font-size:16px;line-height:1.7;max-width:335px}
@media(max-width:820px){.vision-intro{grid-template-columns:220px 1fr;gap:32px}.vision-intro>img{height:240px}.vision-intro p{font-size:17px}.vision-benefits{gap:38px 30px}.vision-benefits h3{font-size:22px}}
@media(max-width:600px){.vision-intro{grid-template-columns:1fr;gap:28px;margin-bottom:42px}.vision-intro>img{height:270px}.vision-intro h2{margin-bottom:20px}.vision-benefits{grid-template-columns:1fr;gap:34px}.vision-benefits article>svg{margin-bottom:15px}.vision-benefits p{max-width:none}}
/* Compact Smart Home composition: artwork above a left-aligned text column. */
.smart-home-visual{max-width:820px;margin:0 auto 38px}
.smart-home-content{display:block;max-width:510px}
.smart-home-content h2{font-size:clamp(30px,calc(var(--vw) * 3.3),44px);margin-bottom:24px}
.smart-home-copy p{max-width:480px}
@media(max-width:600px){.smart-home-visual{width:100%;margin:0 auto 28px}.smart-home-content{max-width:100%}}
/* Image-led consultation funnel. */
.energy-funnel{background:#f3f7fa;padding:75px 0;color:#222}
.funnel-layout{display:block;max-width:940px}
.funnel-advisor{display:flex;align-items:center;gap:22px;background:#fff;border:1px solid #e5e5e2;border-radius:32px;padding:25px 34px;margin-bottom:24px;box-shadow:none}
.advisor-avatar{display:grid;place-items:center;width:64px;height:64px;flex-shrink:0;border-radius:50%;background:#edf2f5;color:#9d8322;font-size:27px}
.funnel-advisor strong{font-size:20px;line-height:1.4}.funnel-advisor p{font-size:15px;color:#777;margin-top:7px}
.funnel-panel{border:1px solid #e5e5e2;border-radius:36px;padding:42px 50px;box-shadow:none;background:#fff}
.funnel-badges{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:27px}.funnel-badges span{border:1px solid #e3e3df;border-radius:40px;padding:12px 18px;font-size:14px;font-weight:500}
.funnel-status{display:flex;align-items:center;gap:18px;margin-bottom:17px}#funnel-counter{background:#222;color:#fff;border-radius:30px;padding:11px 20px;font-size:14px;font-weight:600}.funnel-time{margin-left:auto;color:#777;font-size:14px}
.funnel-meter{height:8px;border-radius:10px;background:#e7e6e2;margin-bottom:36px;overflow:hidden}.funnel-meter>span{display:block;width:25%;height:100%;background:#9d8322;border-radius:10px;transition:width .25s}
.funnel-step h3{font-size:clamp(25px,calc(var(--vw) * 3),36px);font-weight:600;line-height:1.25;letter-spacing:-.02em;margin-bottom:17px}.funnel-subtitle{font-size:16px;line-height:1.7;color:#777;margin-bottom:28px}
.funnel-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.funnel-choice .choice-content{padding:25px 14px;align-items:center;justify-content:center;gap:18px;border:1.5px solid #e3e3df;border-radius:20px;min-height:176px;text-align:center}.funnel-choice .choice-content img{width:84px;height:74px;object-fit:cover;border-radius:7px}.funnel-choice strong{font-size:17px;font-weight:600;padding:0}.funnel-choice input{width:16px;height:16px;top:13px;right:13px}.ownership-symbol{display:grid;place-items:center;font-size:44px;line-height:1;height:74px;color:#9d8322}
.funnel-navigation{justify-content:center;border:0;margin-top:28px;padding:0}.funnel-navigation .button{min-width:290px;justify-content:center;border-radius:50px;padding:19px 30px;font-size:18px;color:#fff}#funnel-next:disabled{opacity:.45;cursor:not-allowed}.funnel-privacy{text-align:center;font-size:13px;line-height:1.6;margin-top:18px;color:#666}
#funnel-selections{display:flex;gap:9px;flex-wrap:wrap;margin-top:25px}#funnel-selections:empty{display:none}#funnel-selections span{background:#edf3f7;border-radius:25px;font-size:13px;padding:9px 14px}.funnel-footer{display:flex;justify-content:center;gap:20px;border-top:1px solid #e3e3df;margin-top:30px;padding-top:24px;font-size:13px;color:#777}
.funnel-contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}.funnel-contact-fields label{font-size:14px;font-weight:500}.funnel-contact-fields input{display:block;width:100%;padding:14px;border:1px solid #ccc;border-radius:9px;margin-top:9px;background:#fff;color:#222;font-size:16px}.funnel-contact-fields input:focus{outline:2px solid #9d8322;outline-offset:2px}
@media(max-width:600px){.funnel-panel{padding:25px 20px;border-radius:24px}.funnel-advisor{padding:20px;gap:14px;border-radius:24px}.funnel-advisor strong{font-size:16px}.funnel-advisor p{font-size:13px}.advisor-avatar{width:48px;height:48px}.funnel-badges{gap:7px}.funnel-badges span{font-size:11px;padding:9px 12px}.funnel-choices{gap:11px;grid-template-columns:1fr 1fr}.funnel-choice .choice-content{padding:23px 8px 16px;min-height:153px;gap:12px}.funnel-choice strong{font-size:13px}.funnel-choice .choice-content img{width:65px;height:60px}.funnel-subtitle{font-size:14px}.funnel-time{font-size:11px}#funnel-counter{font-size:12px;padding:10px 13px}.funnel-status{gap:12px}.funnel-contact-fields{grid-template-columns:1fr}.funnel-navigation .button{min-width:0;width:100%}.funnel-footer{gap:9px;font-size:10px}.funnel-back{font-size:12px}}
/* Compact two-column energy check. */
.energy-funnel .funnel-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);max-width:1200px;gap:64px;align-items:start}
.funnel-right{min-width:0}.funnel-intro{padding-top:45px}.funnel-intro>p:not(.eyebrow){line-height:1.75;max-width:340px}
.funnel-right .funnel-advisor{padding:18px 22px;border-radius:22px;gap:14px;margin-bottom:16px}.funnel-right .advisor-avatar{width:46px;height:46px;font-size:22px}.funnel-right .funnel-advisor strong{font-size:15px}.funnel-right .funnel-advisor p{font-size:12px;margin-top:4px}
.funnel-right .funnel-panel{padding:27px;border-radius:25px}.funnel-right .funnel-badges{gap:7px;margin-bottom:20px}.funnel-right .funnel-badges span{font-size:11px;padding:9px 12px}.funnel-right .funnel-status{gap:12px}.funnel-right #funnel-counter{font-size:12px;padding:9px 14px}.funnel-right .funnel-time{font-size:12px}.funnel-right .funnel-meter{margin-bottom:25px;height:6px}
.funnel-right .funnel-step h3{font-size:26px}.funnel-right .funnel-subtitle{font-size:13px;margin-bottom:20px;line-height:1.6}.funnel-right .funnel-choices{gap:12px;margin-top:20px}.funnel-right .choice-content{min-height:132px;padding:19px 10px 15px;gap:12px;border-radius:15px}.funnel-right .choice-content img{width:64px;height:54px}.funnel-right .funnel-choice strong{font-size:14px}.funnel-right .ownership-symbol{height:54px;font-size:35px}
.funnel-right .funnel-navigation{margin-top:21px}.funnel-right .funnel-navigation .button{font-size:15px;padding:14px 25px;min-width:220px}.funnel-right .funnel-privacy{font-size:11px}.funnel-right .funnel-footer{font-size:11px;gap:12px;margin-top:22px;padding-top:18px}.funnel-right .funnel-contact-fields{gap:15px}
@media(max-width:1000px){.energy-funnel .funnel-layout{grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:30px}.funnel-intro h2{font-size:36px}.funnel-right .funnel-panel{padding:22px}}
@media(max-width:700px){.energy-funnel .funnel-layout{grid-template-columns:1fr;gap:28px}.funnel-intro{padding-top:0}.funnel-intro h2 br{display:none}.funnel-intro>p:not(.eyebrow){max-width:100%;margin-top:14px}.funnel-intro-note{display:none}.funnel-right .funnel-panel{padding:22px 18px}.funnel-right .funnel-step h3{font-size:24px}.funnel-right .funnel-advisor{padding:17px}.funnel-right .funnel-choice strong{font-size:13px}}
/* Separate vision panel and light service gallery. */
.more-services{background:#fff;color:#222}
.more-heading .eyebrow{color:#9d8322}
.more-controls>span{color:#555}
.more-track{scrollbar-color:#9d8322 #fff}
.vision-section.section.wrap{background:#f3f7fa;border-radius:26px;margin-top:65px;margin-bottom:35px;padding:55px;color:#222}
@media(max-width:820px){.vision-section.section.wrap{padding:35px;margin-top:45px}.vision-benefits{gap:35px}}
@media(max-width:600px){.vision-section.section.wrap{padding:27px 22px;margin-top:32px;margin-bottom:20px;border-radius:20px}}
/* Full-width vision background and integrated advisor. */
.vision-section.section{background:#f3f7fa;border-radius:0;margin:65px 0 0;padding:65px 0;color:#222;width:100%;max-width:none}
.funnel-right .funnel-panel>.funnel-advisor{border:0;border-bottom:1px solid #e5e5e2;border-radius:0;box-shadow:none;padding:0 0 21px;margin:0 0 23px;background:transparent}
@media(max-width:600px){.vision-section.section{margin-top:35px;padding:42px 0}.funnel-right .funnel-panel>.funnel-advisor{padding:0 0 18px;margin-bottom:20px}}
/* Full-width complete-package feature. */
.complete-package{background:#f3f7fa;color:#222;overflow:hidden;padding:85px 0}
.package-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:25px;align-items:center;min-height:500px}
.package-copy{position:relative;z-index:1}.package-copy .eyebrow{color:#9d8322}.package-copy h2{font-size:clamp(34px,calc(var(--vw) * 3.6),52px);font-weight:400;line-height:1.14;letter-spacing:-.035em;margin-bottom:25px}.package-copy h2 span{color:#9d8322}
.package-description{font-size:17px;line-height:1.75;max-width:500px;margin-bottom:24px}.package-inclusions{display:flex;flex-wrap:wrap;gap:9px 18px;margin-bottom:30px;font-size:12px}.package-inclusions span:before{content:'✓';color:#9d8322;margin-right:7px}.package-note{font-size:12px;line-height:1.6;color:#666;max-width:390px;margin-top:19px}
.package-visual{margin:0 -70px 0 0;position:relative}.package-visual img{width:100%;height:auto;display:block;mix-blend-mode:multiply}.package-visual figcaption{font-size:10px;color:#747c80;text-align:center;margin-top:12px}
@media(max-width:900px){.package-layout{gap:15px;grid-template-columns:1fr 1fr;min-height:0}.package-visual{margin-right:-30px}.package-description{font-size:15px}.package-copy h2{font-size:36px}}
@media(max-width:650px){.complete-package{padding:50px 0}.package-layout{grid-template-columns:1fr;gap:30px}.package-visual{margin:0}.package-copy h2{font-size:34px}.package-copy .button{font-size:14px}.package-note{max-width:100%}}
/* Screen-filling complete-package stage. */
.complete-package{position:relative;display:flex;align-items:center;min-height:100svh;padding:75px 0;background:#111619;color:#fff;isolation:isolate}
.complete-package .package-layout{position:relative;z-index:1;min-height:0;display:block}
.complete-package .package-copy{width:46%;max-width:570px;padding:30px 0}
.complete-package .package-copy h2{font-size:clamp(38px,calc(var(--vw) * 4.2),64px);color:#fff}
.complete-package .package-description{color:#e1e5e7}
.complete-package .package-note{color:#b7bfc3}
.complete-package .package-visual{position:absolute;z-index:-1;left:43%;top:50%;transform:translateY(-50%);width:76%;margin:0}
.complete-package .package-visual img{mix-blend-mode:normal;width:100%;height:auto;max-height:90svh;object-fit:contain;mask-image:linear-gradient(to right,transparent,#000 12%,#000 94%,transparent)}
.complete-package .package-visual figcaption{color:#a9b3b8}
@media(min-width:768px) and (pointer:fine){.complete-package{min-height:calc(100svh / var(--seitenzoom))}}
@media(max-width:900px){.complete-package .package-copy{width:48%}.complete-package .package-copy h2{font-size:38px}.complete-package .package-visual{left:44%;width:76%}}
@media(max-width:650px){.complete-package{padding:60px 0;min-height:100svh}.complete-package .package-copy{width:100%;max-width:none;padding:0}.complete-package .package-copy h2{font-size:36px}.complete-package .package-visual{position:relative;left:auto;top:auto;transform:none;width:115%;margin:35px -7.5% 0;z-index:0}.complete-package .package-visual img{max-height:none}}
/* Consistent vertical section spacing. */
main>.section,main>.energy-funnel,main>.more-services,main>.complete-package{padding-block:var(--space)}
main>.vision-section.section{margin-block:0}
main>.solution-grid{padding-bottom:var(--space)}
/* White persistent navigation after leaving the top of the page. */
.hero .site-header{transition:background .2s,color .2s;z-index:60}
:root[data-theme] .hero .site-header.is-scrolled{position:fixed;inset:var(--design-bar-offset,56px) 0 auto;background:#fff;color:#222;border-bottom:1px solid #e5e8ea;box-shadow:none}
:root[data-theme] .hero .site-header.is-scrolled nav a{color:#222}
:root[data-theme] .hero .site-header.is-scrolled nav a:hover{color:#9d8322}
:root[data-theme] .hero .site-header.is-scrolled .menu-toggle span{background:#222}
.hero .site-header nav{gap:22px;white-space:nowrap}
@media(min-width:1001px){.hero .site-header{padding:22px max(30px,calc((100% - 1280px)/2));gap:20px}.hero .site-header .header-wordmark{width:240px}.hero .site-header nav{font-size:13px}.hero .site-header .header-cta{font-size:12px;padding:13px 18px;gap:14px}}
@media(max-width:1000px){.hero .site-header nav,:root[data-theme] .hero .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;padding:20px 30px;box-shadow:none;background:#111619;color:#fff;max-height:70svh;overflow:auto}.hero .site-header nav.open{display:grid;gap:8px}.hero .site-header .menu-toggle{display:block}.hero .site-header .header-cta{margin-left:auto}:root[data-theme] .hero .site-header.is-scrolled nav{background:#fff;color:#222}}
@media(prefers-reduced-motion:reduce){.hero .site-header{transition:none}}
/* Keep fixed navigation above later sections while preserving hero image layers. */
.hero{z-index:60}.design-bar{z-index:100}
/* White partner marks within the hero image. */
.hero{padding-bottom:210px}
.hero-partners{position:absolute;bottom:35px;left:max(50px,calc((100% - 1280px)/2));right:max(50px,calc((100% - 1280px)/2));z-index:2;display:flex;align-items:center;gap:30px;color:#fff}
.hero-partners>p{flex:0 0 185px;font-size:16px;line-height:1.5;border-right:1px solid #ffffff75;padding-right:25px}
.partner-logos{display:flex;align-items:center;gap:20px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ffffff55 transparent;min-width:0;flex:1;padding:5px 0 12px}
.partner-logo{flex:0 0 130px;height:65px;display:block;background-size:200% 200%;background-position:var(--logo-x) var(--logo-y);background-repeat:no-repeat;filter:brightness(0) invert(1)}
.partner-logo.sheet-a{background-image:url('assets/partners-white-a.png')}.partner-logo.sheet-b{background-image:url('assets/partners-white-b.png')}
@media(max-width:1100px){.hero-partners{left:40px;right:40px;gap:20px}.hero-partners>p{flex-basis:150px;font-size:14px}.partner-logos{gap:14px}.partner-logo{flex-basis:115px;height:57.5px}}
@media(max-width:600px){.hero{padding-bottom:235px}.hero-partners{left:24px;right:24px;bottom:25px;display:block}.hero-partners>p{border-right:0;padding:0;font-size:12px;margin-bottom:12px}.hero-partners>p br{display:none}.partner-logos{gap:20px}.partner-logo{flex-basis:120px;height:60px}}
.complete-package.motion-ready .package-visual img{opacity:0;transform:perspective(1200px) translateY(45px) scale(.94);transition:opacity 1s ease,transform 1.25s cubic-bezier(.2,.7,.2,1);will-change:transform}
.complete-package.motion-ready.in-view .package-visual img{opacity:1;transform:perspective(1200px) translateY(0) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) scale(1)}
@media(prefers-reduced-motion:reduce){.complete-package.motion-ready .package-visual img{opacity:1;transform:none;transition:none;will-change:auto}}
.journey-section{background:#f3f7fa;color:#222}.journey-heading{text-align:center;margin-bottom:45px}.journey-heading h2{font-weight:400}.journey-heading .eyebrow{color:#9d8322}.journey-timeline{max-width:820px;margin:auto;padding:0;list-style:none}.journey-timeline li{position:relative;display:grid;grid-template-columns:64px 1fr;gap:30px;align-items:center;padding-bottom:20px}.journey-timeline li:not(:last-child):before{content:'';position:absolute;left:31px;top:50%;bottom:-50%;width:2px;background:#9d832250}.journey-icon{position:relative;z-index:1;border:1px solid #9d8322;border-radius:50%;width:64px;height:64px;display:grid;place-items:center;background:#fff;color:#9d8322}.journey-icon svg{width:30px;height:30px}.journey-card{padding:24px 30px;border-radius:18px;background:#fff}.journey-card .eyebrow{font-size:10px;color:#9d8322;margin-bottom:9px}.journey-card h3{font-size:23px;font-weight:500;margin-bottom:9px}.journey-card>p:last-child{font-size:15px;line-height:1.6;color:#657079}.journey-timeline li:last-child .journey-card{background:#111619;color:#fff}.journey-timeline li:last-child .journey-card>p:last-child{color:#d7dee2}.journey-timeline li:first-child .journey-icon,.journey-timeline li:last-child .journey-icon{background:#9d8322;color:#fff}.journey-cta{text-align:center;margin-top:30px}@media(max-width:600px){.journey-timeline li{grid-template-columns:45px 1fr;gap:15px}.journey-icon{width:45px;height:45px}.journey-icon svg{width:23px;height:23px}.journey-timeline li:not(:last-child):before{left:22px}.journey-card{padding:20px}.journey-card h3{font-size:20px}.journey-card>p:last-child{font-size:13px}.journey-card .eyebrow{font-size:9px}}
.reviews-section{background:#fff;color:#222}.reviews-heading{text-align:center;max-width:650px;margin:0 auto 55px}.reviews-heading .eyebrow{color:#9d8322}.reviews-heading h2{font-weight:400;margin-bottom:22px}.reviews-heading>p:last-child{font-size:17px;line-height:1.7;color:#72777b}.reviews-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;align-items:center;gap:24px}.review-card{margin:0;padding:32px;border:1px solid #e5e9eb;border-radius:22px;background:#fff}.review-card:nth-child(2){padding-block:42px;box-shadow:none}.review-top{display:flex;gap:17px;align-items:center;margin-bottom:24px}.review-avatar{display:grid;place-items:center;background:#f3f7fa;color:#70889a;font-size:18px;font-weight:600;width:48px;height:48px;border-radius:50%}.review-stars{color:#9d8322;letter-spacing:3px;font-size:17px}.review-card blockquote{margin:0 0 25px;font-size:16px;line-height:1.75}.review-card figcaption strong{display:block;font-size:14px;margin-bottom:7px}.review-card figcaption>span{font-size:13px;color:#7b858b}@media(max-width:900px){.reviews-grid{gap:15px}.review-card{padding:23px}.review-card blockquote{font-size:14px}}@media(max-width:650px){.reviews-grid{grid-template-columns:1fr;gap:22px}.review-card:nth-child(2){padding:28px}.reviews-heading{margin-bottom:32px}.review-card blockquote{font-size:16px}}
/* Keep the partner loop within the first viewport. */
.hero{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;height:var(--hero-viewport-height,calc(100svh - 56px));min-height:var(--hero-viewport-height,calc(100svh - 56px));padding-top:110px;padding-bottom:22px;row-gap:20px}
.hero .hero-copy{align-self:center;padding:0}.hero .hero-copy h1{font-size:clamp(42px,8.5svh,86px);line-height:1.02}.hero .hero-copy .eyebrow{margin-bottom:18px}.hero .hero-copy p:not(.eyebrow){font-size:16px;line-height:1.55;margin:20px 0 23px}
.hero .hero-partners{position:relative;inset:auto;width:100%;align-self:end;gap:25px}.hero .partner-logos{display:block;overflow:hidden;padding:0;mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent)}
.partner-track{display:flex;width:max-content;animation:partner-loop 52s linear infinite;will-change:transform}.partner-group{display:flex;align-items:center;gap:28px;padding-right:28px;flex-shrink:0}.partner-group .partner-logo{flex:0 0 130px;width:130px;height:65px}.partner-logos:hover .partner-track{animation-play-state:paused}
@keyframes partner-loop{to{transform:translateX(-50%)}}
@media(max-width:600px){.hero{padding-top:100px;padding-bottom:20px;row-gap:20px}.hero .hero-copy h1{font-size:clamp(34px,7svh,56px)}.hero .hero-copy .eyebrow{font-size:10px;margin-bottom:12px}.hero .hero-copy p:not(.eyebrow){font-size:14px;margin:14px 0 18px}.hero .hero-copy .button{padding:13px 19px;min-height:44px;font-size:13px}.hero .hero-partners{display:block}.hero-partners>p{margin-bottom:6px}.partner-group{gap:20px;padding-right:20px}.partner-group .partner-logo{width:110px;flex-basis:110px;height:55px}}
@media(max-height:600px){.hero{height:auto;min-height:var(--hero-viewport-height);padding-top:95px}.hero .hero-copy h1{font-size:34px}.hero .hero-copy p:not(.eyebrow){margin:12px 0;font-size:13px}.hero .hero-copy .eyebrow{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.partner-track{animation:none;will-change:auto}.hero .partner-logos{overflow-x:auto}.partner-group[aria-hidden=true]{display:none}}
/* Full-height vision with four clear pillars. */
main>.vision-fullscreen.section{min-height:100svh;display:flex;align-items:center;padding-block:clamp(80px,10svh,150px);box-sizing:border-box}
.vision-fullscreen>.wrap{display:flex;flex-direction:column;gap:clamp(64px,10svh,125px)}
.vision-statement .eyebrow{color:var(--action-gold);margin-bottom:24px}
.vision-statement h2{font-size:clamp(44px,calc(var(--vw) * 5.2),78px);line-height:1.08;letter-spacing:-.045em;font-weight:400;max-width:900px;margin:0}
.vision-fullscreen .vision-benefits{grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.vision-fullscreen .vision-benefits article{padding:12px 32px 0;border-left:1px solid #2223}
.vision-fullscreen .vision-benefits article:first-child{padding-left:0;border-left:0}
.vision-fullscreen .vision-benefits article:last-child{padding-right:0}
.vision-fullscreen .vision-benefits article>svg{width:48px;height:48px;margin-bottom:clamp(38px,6svh,72px)}
.vision-fullscreen .vision-benefits h3{font-size:clamp(22px,calc(var(--vw) * 2),29px);margin-bottom:20px;max-width:290px}
.vision-fullscreen .vision-benefits p{font-size:17px;line-height:1.65;color:#61676a;max-width:290px}
@media(min-width:768px) and (pointer:fine){main>.vision-fullscreen.section{min-height:calc(100svh / var(--seitenzoom))}}
@media(max-width:1000px){.vision-fullscreen .vision-benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 0}.vision-fullscreen .vision-benefits article:nth-child(3){border-left:0;padding-left:0}.vision-fullscreen .vision-benefits article>svg{margin-bottom:28px}}
@media(max-width:600px){main>.vision-fullscreen.section{padding-block:70px}.vision-fullscreen>.wrap{gap:50px}.vision-statement h2{font-size:clamp(39px,calc(var(--vw) * 10),55px)}.vision-fullscreen .vision-benefits{grid-template-columns:1fr;gap:30px}.vision-fullscreen .vision-benefits article{border-left:0;border-top:1px solid #2223;padding:30px 0 0}.vision-fullscreen .vision-benefits article:first-child{border-top:0;padding-top:0}.vision-fullscreen .vision-benefits p{max-width:100%}.vision-fullscreen .vision-benefits article>svg{margin-bottom:22px}}
/* Crossfade the shading from the title to the revealed details. */
.solution-card .card-image:before,.solution-card .card-image:after{content:'';position:absolute;inset:0;pointer-events:none;transition:opacity .55s ease}
.solution-card .card-image:before{background:linear-gradient(180deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.65) 24%,rgba(0,0,0,.16) 57%,transparent 100%);opacity:1}
.solution-card .card-image:after{background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.48) 65%,rgba(0,0,0,.94) 100%);opacity:0}
.solution-card:hover .card-image:before,.solution-card:focus-within .card-image:before,.solution-card.is-open .card-image:before{opacity:0}
.solution-card:hover .card-image:after,.solution-card:focus-within .card-image:after,.solution-card.is-open .card-image:after{background:linear-gradient(180deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.04) 32%,rgba(0,0,0,.48) 65%,rgba(0,0,0,.94) 100%);opacity:1}
.solution-card .card-body h3{text-shadow:none}
@media(prefers-reduced-motion:reduce){.solution-card .card-image:before,.solution-card .card-image:after{transition:none}}
.vision-heading-row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(35px,calc(var(--vw) * 5),80px);align-items:center}
.vision-heading-image{display:block;width:100%;height:auto;aspect-ratio:1.75;object-fit:cover;border-radius:20px}
.vision-heading-row .vision-statement h2{font-size:clamp(40px,calc(var(--vw) * 4.4),68px)}
@media(max-width:760px){.vision-heading-row{grid-template-columns:1fr;gap:32px}.vision-heading-row .vision-statement h2{font-size:clamp(39px,calc(var(--vw) * 7),55px)}.vision-heading-image{max-height:360px}}
.header-phone{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-size:13px;color:inherit;flex-shrink:0}
.header-phone svg{width:19px;height:19px}
.site-header .header-cta{margin-left:0}
@media(min-width:1101px){.site-header{gap:22px}.site-header nav{gap:20px}}
@media(max-width:1100px){.header-phone{margin-left:auto}.site-header .header-cta{margin-left:0}}
@media(max-width:700px){.header-phone{font-size:11px;gap:5px}.header-phone svg{width:17px;height:17px}.site-header{gap:12px}.site-header .header-wordmark{width:180px}}
@media(max-width:420px){.site-header .header-wordmark{width:155px}.header-phone{font-size:10px}}
.smart-home-details{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(230px,1fr);align-items:center;gap:70px}
.smart-phone-demo{width:245px;justify-self:center;margin:0}
.smart-phone-shell{position:relative;border:6px solid #252525;outline:2px solid #777;border-radius:35px;background:#f5f4f1;padding:15px 15px 20px;box-shadow:none;transform:rotate(3deg);color:#222;font-family:Arial,sans-serif}
.phone-status{font-size:9px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:30px}.phone-island{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:65px;height:16px;border-radius:20px;background:#161616}
.smart-phone-shell h3{font-size:21px;letter-spacing:-.6px;margin-bottom:4px}.phone-muted{font-size:10px;color:#888;margin:0 0 17px}.phone-energy{padding:12px;background:#fff;border-radius:14px;margin-bottom:10px}.phone-energy small{font-size:9px}.phone-energy svg{display:block;width:100%;height:65px}.phone-energy>strong{display:block;text-align:right;font-size:16px}
.phone-metric{display:flex;gap:13px;align-items:center;background:#fff;border-radius:12px;padding:13px 12px;margin-top:9px}.phone-metric>span{font-size:24px;color:#9d8322}.phone-metric small{display:block;font-size:9px;margin-bottom:5px}.phone-metric strong{display:block;font-size:17px}.phone-tabs{display:flex;justify-content:space-between;font-size:8px;color:#888;padding:22px 3px 14px}.phone-tabs span:first-child{color:#9d8322}.phone-homebar{height:4px;width:75px;background:#222;border-radius:4px;margin:0 auto}.smart-phone-demo figcaption{text-align:center;color:#888;font-size:11px;margin-top:23px}
:root[data-theme] .site-footer.dark{background:#111619;color:#fff}.site-footer .footer-top p,.site-footer .footer-bottom{color:#d7dce0}.site-footer .footer-bottom{border-color:#ffffff26}.footer-wordmark{position:relative;width:260px;height:65px;display:block;overflow:hidden}.footer-wordmark>img{position:absolute;width:100%;height:auto;top:50%;transform:translateY(-50%)}
@media(max-width:800px){.smart-home-details{gap:30px;grid-template-columns:minmax(0,1fr) 210px}.smart-phone-demo{width:205px}.smart-phone-shell{padding:15px 12px}.smart-phone-shell h3{font-size:18px}}
@media(max-width:600px){.smart-home-details{grid-template-columns:1fr;gap:45px}.smart-phone-demo{width:225px}.footer-wordmark{width:220px}}
.funnel-right .funnel-choice input[name="building"]+.choice-content img{width:155px;height:115px;object-fit:contain;border-radius:0;background:transparent}
@media(max-width:600px){.funnel-right .funnel-choice input[name="building"]+.choice-content img{width:125px;height:100px}}
.smart-phone-photo{display:block;width:100%;height:auto;border-radius:24px}.smart-phone-demo:has(.smart-phone-photo){width:285px;max-width:100%}
/* More expressive hero typography, scaled to the viewport. */
.hero .hero-copy{max-width:950px;width:100%}
.hero .hero-copy h1{font-size:clamp(72px,calc(var(--vw) * 7),144px);line-height:1.01;font-weight:500;letter-spacing:-.055em}
.hero .hero-copy p:not(.eyebrow){font-size:clamp(21px,calc(var(--vw) * 1.55),30px);line-height:1.5;max-width:660px;margin:28px 0 30px}
.hero .hero-copy .eyebrow{font-size:15px;letter-spacing:.14em}
.hero .hero-copy .button{font-size:19px;padding:20px 32px;min-height:62px}
@media(max-width:1000px){.hero .hero-copy h1{font-size:clamp(65px,calc(var(--vw) * 9),100px)}.hero .hero-copy p:not(.eyebrow){font-size:22px;max-width:590px}}
@media(max-width:600px){.hero{height:auto;min-height:var(--hero-viewport-height,100svh);row-gap:35px;padding-top:115px}.hero .hero-copy h1{font-size:clamp(52px,calc(var(--vw) * 12.8),74px)}.hero .hero-copy p:not(.eyebrow){font-size:19px;line-height:1.45;margin:23px 0}.hero .hero-copy .eyebrow{font-size:11px}.hero .hero-copy .button{font-size:16px;padding:17px 25px;min-height:54px}}
@media(min-width:601px) and (max-height:850px){.hero{height:auto;min-height:var(--hero-viewport-height,100svh);row-gap:36px}.hero .hero-copy h1{font-size:clamp(68px,11svh,106px)}}
.site-footer{padding-top:90px}
.footer-offer{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:30px;min-height:480px;padding:65px;border-radius:30px;background:linear-gradient(115deg,#f3f7fa 10%,#e1edf5 100%);color:#222;overflow:hidden;margin-bottom:55px}
.footer-offer-copy .eyebrow{color:#9d8322;font-size:12px;margin-bottom:24px}.footer-offer-copy h2{font-size:clamp(38px,calc(var(--vw) * 4),62px);line-height:1.08;letter-spacing:-.04em;margin-bottom:25px}.site-footer .footer-offer-copy>p:not(.eyebrow){color:#59636a;font-size:18px;line-height:1.6;margin-bottom:30px}.footer-offer-visual img{width:100%;height:auto;mix-blend-mode:multiply}.footer-offer .button{font-size:17px;padding:19px 28px}
.hero .hero-partners>p{font-size:clamp(21px,calc(var(--vw) * 1.55),30px);line-height:1.5;flex-basis:270px}
@media(max-width:1000px){.hero .hero-partners>p{font-size:22px;flex-basis:220px}.footer-offer{padding:40px;min-height:420px}}
@media(max-width:700px){.footer-offer{grid-template-columns:1fr;padding:35px 26px;gap:30px}.footer-offer-visual{max-width:480px;margin:auto}.site-footer{padding-top:55px}}
@media(max-width:600px){.hero .hero-partners>p{font-size:19px;line-height:1.45;margin-bottom:18px}.footer-offer-copy h2{font-size:38px}}
/* Keep the partner strip close to the hero call to action. */
.hero{grid-template-rows:auto auto;align-content:center;row-gap:32px}
.hero .hero-copy{align-self:auto}
.hero .hero-partners{align-self:auto;margin-top:0}
@media(max-width:600px){.hero{row-gap:28px}}
.footer-columns{display:grid;grid-template-columns:1.35fr 1.15fr 1fr 1fr .8fr;gap:35px;align-items:start}
.footer-columns h3{font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:#fff;margin:20px 0 28px}
.footer-columns p,.footer-columns address,.footer-columns a,.footer-columns button{font-size:14px;line-height:1.8}.footer-columns address{font-style:normal;color:#d7dce0}.footer-columns button{display:block;color:#d7dce0;text-align:left;margin-bottom:10px}.footer-brand>p{margin:15px 0 24px}.footer-columns .footer-wordmark{width:230px;max-width:100%}.footer-columns .footer-social{display:inline-flex;align-items:center;gap:10px;color:#fff}.footer-social svg{width:24px;height:24px}
@media(max-width:1100px){.footer-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:35px}.footer-brand{grid-row:span 2}}
@media(max-width:650px){.footer-columns{grid-template-columns:1fr 1fr;gap:24px}.footer-brand{grid-column:1/-1;grid-row:auto}.footer-columns h3{margin-top:10px;margin-bottom:18px}}
.contact-form-panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,calc(var(--vw) * 6),95px);background:#fff;border-radius:26px;padding:clamp(30px,calc(var(--vw) * 5),70px);color:#222}
.contact-form-intro .eyebrow{color:#9d8322}.contact-form-intro h2{font-size:clamp(36px,calc(var(--vw) * 3.4),52px);line-height:1.1;margin-bottom:28px}.contact-form-intro>p:not(.eyebrow){font-size:18px;line-height:1.65;color:#666;margin:0 0 22px}.contact-direct{display:grid;gap:8px;margin-top:32px;font-size:16px}.contact-direct>span{color:#777;font-size:14px}
.contact-fields{display:grid;grid-template-columns:1fr 1fr;gap:28px 22px}.contact-fields label{display:grid;gap:10px;font-size:13px;color:#222}.contact-fields input,.contact-fields textarea{background:transparent;border:0;border-bottom:1px solid #a6afb4;border-radius:0;padding:13px 0;color:#222;font:inherit;font-size:16px;width:100%;min-width:0}.contact-fields input:focus,.contact-fields textarea:focus{outline:0;border-bottom:2px solid #9d8322}.contact-message-field{grid-column:1/-1}.contact-fields textarea{resize:vertical;min-height:155px}.contact-form-note{font-size:12px;line-height:1.5;color:#70777b;margin:20px 0}.contact-form-panel form>.button{font-size:15px;padding:17px 26px}
@media(max-width:850px){.contact-form-panel{grid-template-columns:1fr;gap:40px}.contact-form-intro{max-width:600px}}@media(max-width:430px){.contact-fields{grid-template-columns:1fr}.contact-form-panel{padding:27px 22px}}
/* Open, editorial contact layout. */
:root[data-theme] #kontakt{background:#fff;color:#222}
#kontakt .contact-form-panel{background:transparent;border-radius:0;padding:30px 0;grid-template-columns:1.12fr 1fr;gap:clamp(45px,calc(var(--vw) * 7),110px);align-items:start}
#kontakt .contact-form-intro{padding-top:14px}#kontakt .contact-form-intro .eyebrow{color:#333;letter-spacing:.34em;font-size:12px;margin-bottom:40px}
#kontakt .contact-form-intro h2{font-size:clamp(40px,calc(var(--vw) * 4.4),66px);line-height:1.14;font-weight:400;letter-spacing:-.04em;margin-bottom:44px}#kontakt .contact-form-intro h2 span{color:#9d8322}
#kontakt .contact-form-intro>p:not(.eyebrow){color:#333;font-size:20px;line-height:1.55}
#kontakt .contact-fields{grid-template-columns:1fr;gap:24px}#kontakt .contact-fields label{font-size:16px;gap:5px}#kontakt .contact-fields input{height:42px;padding:8px 0}#kontakt .contact-fields textarea{min-height:105px}#kontakt .contact-form-note{margin:19px 0;color:#858585}#kontakt .privacy-inline{text-decoration:underline;color:inherit}#kontakt .contact-form-panel form>.button{font-size:17px;padding:18px 28px}
@media(max-width:850px){#kontakt .contact-form-panel{grid-template-columns:1fr;gap:45px}#kontakt .contact-form-intro h2{font-size:clamp(40px,calc(var(--vw) * 7),60px);margin-bottom:27px}#kontakt .contact-form-intro .eyebrow{margin-bottom:25px}}
#kontakt .contact-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 22px}
#kontakt .contact-message-field{grid-column:1/-1}
.smart-home-details{grid-template-columns:minmax(0,600px) minmax(0,285px);gap:40px;justify-content:start}
.smart-home-details .smart-phone-demo{justify-self:start}
@media(max-width:800px){.smart-home-details{grid-template-columns:minmax(0,1fr) 230px;gap:25px}}
@media(max-width:600px){.smart-home-details{grid-template-columns:1fr;gap:35px}.smart-home-details .smart-phone-demo{justify-self:center}#kontakt .contact-fields{column-gap:16px}#kontakt .contact-fields label{font-size:14px}}
:root[data-theme] #ablauf{background:#f8f8f6;color:#111619}.journey-heading{margin-bottom:48px}.journey-heading h2{font-size:clamp(34px,calc(var(--vw) * 4),56px);line-height:1.15;letter-spacing:-.035em}.journey-timeline{max-width:900px}.journey-timeline li{grid-template-columns:70px 1fr;gap:30px;padding-bottom:24px}.journey-icon{width:70px;height:70px}.journey-timeline li:not(:last-child):before{left:34px;width:1px;background:#9d83228c}.journey-card{border:1px solid #e5e5e1;padding:24px 28px;border-radius:20px}.journey-card .eyebrow{font-size:14px;letter-spacing:.02em}.journey-card h3{font-size:24px}.journey-card>p:last-child{font-size:16px}.journey-timeline li:last-child .journey-card{border-color:#111619}.journey-cta{margin-top:22px}
.references-section{background:#fff;color:#222}.references-heading{display:flex;justify-content:space-between;align-items:center;gap:45px;margin-bottom:45px}.references-heading .eyebrow{color:#9d8322}.references-heading h2{font-size:clamp(42px,calc(var(--vw) * 5),70px);line-height:1.08;letter-spacing:-.04em}.references-heading>p{font-size:19px;color:#555;max-width:360px}.references-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:24px}.references-grid figure{margin:0;min-width:0}.references-grid img{width:100%;height:490px;object-fit:cover;border-radius:18px}.references-grid figcaption{padding-top:20px}.references-grid figcaption p{font-size:12px;letter-spacing:.07em;color:#808080;margin-bottom:8px}.references-grid h3{font-size:23px;line-height:1.3;font-weight:400}
@media(max-width:900px){.references-grid{gap:18px}.references-grid img{height:360px}.references-grid h3{font-size:20px}.references-heading{align-items:flex-start}.references-heading>p{max-width:240px}}
@media(max-width:600px){.journey-timeline li{grid-template-columns:45px 1fr;gap:15px}.journey-icon{width:45px;height:45px}.journey-timeline li:not(:last-child):before{left:22px}.journey-card{padding:20px}.journey-card h3{font-size:21px}.journey-card>p:last-child{font-size:14px}.references-heading{display:block}.references-heading>p{max-width:none;margin-top:24px}.references-grid{grid-template-columns:1fr;gap:35px}.references-grid img{height:auto;aspect-ratio:4/5}}
.advisor-avatar{object-fit:cover;object-position:center 36%}
.funnel-right .funnel-choice input[name="solution"]+.choice-content img{width:110px;height:100px;object-fit:contain;border-radius:8px}
.hero .site-header .header-phone{margin-left:auto;margin-right:-8px;border:1px solid currentColor;border-radius:999px;padding:14px 20px;min-height:48px;justify-content:center}
.hero .site-header .header-cta{margin-left:0}
.package-copy>.eyebrow{color:#b39a3c;margin-bottom:24px}
@media(max-width:700px){.hero .site-header .header-phone{padding:10px 12px;min-height:42px;margin-right:0}.funnel-right .funnel-choice input[name="solution"]+.choice-content img{width:85px;height:80px}}
:root[data-theme] body .eyebrow{color:#9d8322!important}
:root[data-theme] body .button,:root[data-theme] body .header-phone{font-size:13px!important}
@media(max-width:1100px){:root[data-theme] body .button,:root[data-theme] body .header-phone{font-size:12px!important}}
:root[data-theme] body h2{font-size:clamp(38px,calc(var(--vw) * 4.2),64px)!important;line-height:1.14}
@media(max-width:900px){:root[data-theme] body h2{font-size:38px!important}}
@media(max-width:650px){:root[data-theme] body h2{font-size:36px!important}}
.hero-action-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}.google-review-badge{display:flex;align-items:center;gap:10px;background:transparent;color:#fff;font-size:16px;white-space:nowrap}.google-letter{font-family:Arial,sans-serif;font-size:38px;font-weight:700;background:conic-gradient(#4285f4 0deg 95deg,#34a853 95deg 190deg,#fbbc05 190deg 250deg,#ea4335 250deg 315deg,#4285f4 315deg);background-clip:text;-webkit-background-clip:text;color:transparent}.google-review-stars,.google-review-badge strong{color:#cabe86}.google-review-stars{letter-spacing:2px;font-size:21px}.google-review-badge strong{font-size:23px}@media(max-width:600px){.hero-action-row{gap:20px}.google-review-badge{font-size:13px;gap:7px}.google-review-stars{font-size:17px}.google-review-badge strong{font-size:20px}}
.reviews-section .google-review-badge{justify-content:center;color:#222;margin:-22px auto 38px}.reviews-section .google-review-stars,.reviews-section .google-review-badge strong{color:#9d8322}
/* Center navigation within the space between brand and actions. */
@media(min-width:1001px){.hero .site-header #navigation{flex:1;justify-content:center;min-width:0}.hero .site-header .header-phone{margin-left:0}.hero .site-header .header-wordmark{flex-shrink:0}}
.partner-showcase{background:#fff;color:#222;padding-block:95px 105px}.partner-showcase-heading{text-align:center;max-width:880px;margin:0 auto 58px}.partner-showcase-heading .eyebrow{display:flex;justify-content:center;align-items:center;gap:18px}.partner-showcase-heading .eyebrow:before{content:"";height:1px;width:38px;background:currentColor}.partner-showcase-heading h2{font-weight:400;margin-bottom:0}.partner-showcase-heading h2 span{color:#9d8322}.partner-showcase-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 48px;align-items:center;justify-items:center}.partner-showcase-logos .partner-logo{width:200px;max-width:100%;height:100px;filter:brightness(0);opacity:.8}@media(max-width:650px){.partner-showcase{padding-block:60px}.partner-showcase-heading{margin-bottom:35px}.partner-showcase-heading .eyebrow{font-size:10px;gap:10px}.partner-showcase-logos{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.partner-showcase-logos .partner-logo{width:150px;height:75px}}
.hero{grid-template-rows:auto;row-gap:0}.partner-showcase-logos{display:block;overflow:hidden;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent)}.showcase-loop{display:flex;width:max-content;animation:showcase-scroll 48s linear infinite}.showcase-loop-group{display:flex;align-items:center;gap:55px;padding-right:55px;flex-shrink:0}.partner-showcase-logos .partner-logo{width:200px;max-width:none;height:100px;flex:0 0 200px}.partner-showcase-logos:hover .showcase-loop{animation-play-state:paused}@keyframes showcase-scroll{to{transform:translateX(-50%)}}@media(max-width:650px){.partner-showcase-logos .partner-logo{width:150px;height:75px;flex-basis:150px}.showcase-loop-group{gap:30px;padding-right:30px}}@media(prefers-reduced-motion:reduce){.showcase-loop{animation:none}.partner-showcase-logos{overflow-x:auto}.showcase-loop-group[aria-hidden=true]{display:none}}
.partner-showcase-heading .eyebrow:before{content:none}
.energy-funnel .funnel-layout{grid-template-columns:minmax(0,1fr);max-width:940px;gap:40px;justify-items:center}.energy-funnel .funnel-intro{text-align:center;padding-top:0;max-width:850px}.energy-funnel .funnel-intro>p:not(.eyebrow){max-width:650px;margin:22px auto 0}.energy-funnel .funnel-intro-note{display:none}.energy-funnel .funnel-right{width:100%;max-width:800px}@media(max-width:700px){.energy-funnel .funnel-layout{gap:30px}}
.journey-four{background:#fff;color:#222;padding-bottom:35px}.journey-four-heading{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:45px}.journey-four-heading h2{margin-bottom:0}.journey-four-heading>p{max-width:335px;font-size:16px;line-height:1.6}.journey-four-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}.journey-four-steps li{border-top:1px solid #d8dcdf;padding-top:22px}.journey-four-steps .eyebrow{display:block;margin-bottom:18px}.journey-four-steps h3{font-size:21px;font-weight:500;line-height:1.3;margin-bottom:14px}.journey-four-steps p{font-size:15px;line-height:1.7;color:#72777b}#kontakt{padding-top:40px}#kontakt .contact-form-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:45px;align-items:stretch}#kontakt .contact-form-intro{padding-top:0;margin-bottom:35px}#kontakt .contact-form-intro .eyebrow{margin-bottom:24px}#kontakt .contact-form-intro h2{margin-bottom:22px}#kontakt .contact-form-intro>p:not(.eyebrow){font-size:17px}.contact-energy-photo{margin:0;min-width:0}.contact-energy-photo img{display:block;width:100%;height:100%;min-height:480px;object-fit:cover;object-position:55% center;border-radius:18px}@media(max-width:850px){.journey-four-heading{display:block}.journey-four-heading>p{max-width:550px;margin-top:25px}.journey-four-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px}#kontakt .contact-form-panel{grid-template-columns:1fr}.contact-energy-photo img{height:auto;min-height:0;aspect-ratio:1.45;object-fit:cover}}@media(max-width:480px){.journey-four-steps{grid-template-columns:1fr}.journey-four{padding-bottom:20px}}
:root[data-theme] #ablauf.journey-four,:root[data-theme] #ablauf #kontakt{background:#fff}.journey-four{padding-bottom:80px}.journey-contact-arrow{padding-block:12px 8px}.journey-contact-arrow svg{display:block;width:105px;height:88px;margin-left:9%}#ablauf #kontakt{padding:0}#ablauf #kontakt .contact-form-panel{padding-block:0}.journey-contact-arrow{color:#9d8322}@media(max-width:600px){.journey-contact-arrow svg{width:80px;height:68px;margin-left:12%}.journey-four{padding-bottom:55px}}
.energy-funnel .funnel-layout{max-width:1280px;gap:25px}.energy-funnel .funnel-right{max-width:none}.energy-funnel .funnel-panel{padding:22px 26px}.energy-funnel .funnel-advisor{padding:0 0 12px;margin-bottom:12px}.energy-funnel .funnel-badges{margin-bottom:12px}.energy-funnel .funnel-status{margin-block:10px}.energy-funnel .funnel-meter{margin-bottom:18px}.energy-funnel .funnel-step h3{font-size:23px;margin-bottom:10px}.energy-funnel .funnel-subtitle{margin-bottom:14px}.energy-funnel .funnel-navigation{margin-top:16px}.energy-funnel .funnel-choice .choice-content{min-height:125px;padding:16px 10px;gap:8px}.energy-funnel .funnel-choice input[name="solution"]+.choice-content img,.energy-funnel .funnel-choice input[name="building"]+.choice-content img{height:75px;width:105px}.energy-funnel .funnel-error:empty{display:none}
@media(min-width:701px){.energy-funnel .funnel-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media(max-width:700px){.energy-funnel .funnel-panel{padding:20px 16px}.energy-funnel .funnel-choice .choice-content{min-height:112px}.energy-funnel .funnel-step h3{font-size:21px}}
.contact-energy-photo{display:flex;align-items:center;justify-content:center}.contact-energy-photo img{height:auto;min-height:0;max-height:670px;object-fit:contain;aspect-ratio:auto;border-radius:0;background:transparent}
#kontakt .contact-fields textarea{height:80px;min-height:80px}#kontakt .contact-form-intro h2{font-weight:500}#kontakt .contact-energy-photo img{max-height:620px;width:100%;height:auto}#kontakt .privacy-inline{color:#9d8322}#kontakt .contact-form-note{margin:14px 0}
:root[data-theme] body h2{font-weight:400!important}
.energy-funnel .funnel-right{max-width:800px;margin-inline:auto}.energy-funnel .funnel-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.journey-contact-arrow{padding-top:42px;padding-bottom:40px}@media(max-width:600px){.journey-contact-arrow{padding-top:32px;padding-bottom:30px}}
.bottom-contact{background:#fff;color:#222}.bottom-contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}.bottom-contact h2 span{color:#9d8322}.bottom-contact h2{margin-bottom:30px}.bottom-contact-layout>div>p:last-child{font-size:20px;line-height:1.6}.bottom-contact .contact-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 22px}.bottom-contact .contact-fields textarea{min-height:90px;height:90px}.bottom-contact .privacy-inline{color:#9d8322;text-decoration:underline}.bottom-contact .contact-form-note{margin:18px 0}@media(max-width:850px){.bottom-contact-layout{grid-template-columns:1fr;gap:35px}}
:root[data-theme] #weitere-leistungen{background:#f3f7fa}:root[data-theme] #smart-home{background:#f8f6f0}
:root[data-theme] .site-footer.dark{background:#f8f6f0;color:#222;border-top-color:#dedbd2}.site-footer .footer-columns h3{color:#222}.site-footer .footer-columns p,.site-footer .footer-columns address,.site-footer .footer-columns button,.site-footer .footer-bottom{color:#59605f}.site-footer .footer-columns a,.site-footer .footer-columns .footer-social{color:#222}.site-footer .footer-bottom{border-color:#dcd9cf}
/* Looping hero background video */
.hero-photo video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
/* Complete head framing from the original advisor portrait. */
.funnel-right .advisor-avatar.advisor-portrait{position:relative;display:block;width:72px;height:72px;overflow:hidden;border-radius:50%;flex:0 0 72px;background:#5c5e5c}
.advisor-portrait img{position:absolute;width:200%;max-width:none;height:auto;left:-48.4375%;top:-18.75%;object-fit:initial;border-radius:0}
@media(max-width:600px){.funnel-right .advisor-avatar.advisor-portrait{width:64px;height:64px;flex-basis:64px}}
/* Scroll-triggered gold energy, with unchanged heading size and weight. */
h2.energy-heading,h2.energy-heading span:not(.energy-letter){color:#222!important}
h2.energy-heading.energy-on-dark,h2.energy-heading.energy-on-dark span:not(.energy-letter){color:#fff!important}
h2.energy-heading .energy-word{display:inline-block;white-space:nowrap;font:inherit;letter-spacing:inherit}
h2.energy-heading .energy-letter{color:inherit;font:inherit;letter-spacing:inherit}
/* One continuous energy system, from services to the connected house. */
:root[data-theme] #weitere-leistungen,:root[data-theme] #smart-home{background:#f8f6f0}
.connected-energy{position:relative;background:#f8f6f0;isolation:isolate}
.connected-energy #weitere-leistungen{padding-bottom:28px}
.connected-energy #smart-home{padding-top:140px}
.energy-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;overflow:hidden}
.energy-network .energy-wire{fill:none;stroke:#b5a16a;stroke-opacity:.3;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.energy-network .energy-current{fill:none;stroke:#b19535;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:30 260;animation:energy-current-flow 4.2s linear infinite;filter:drop-shadow(0 0 3px #c9ab4a);opacity:0}
.connected-energy.energy-visible .energy-current{opacity:.95}
.energy-network .energy-junction{fill:#d6b951;stroke:#f8f6f0;stroke-width:2}
@keyframes energy-current-flow{to{stroke-dashoffset:-290}}
@media(max-width:650px){.connected-energy #smart-home{padding-top:100px}.energy-network .energy-wire{stroke-width:1}.energy-network .energy-current{stroke-width:2}}
@media(prefers-reduced-motion:reduce){.energy-network .energy-current{animation:none;display:none}}
/* Fine luminous particles instead of solid moving dash segments. */
.energy-network .energy-wire{stroke:#b5a16a;stroke-opacity:.13;stroke-width:.7}
.energy-network .energy-photon{fill:#e7c361;filter:drop-shadow(0 0 2px #d0a12f);visibility:hidden}
.energy-network .energy-halo{fill:#e6bb48;filter:blur(4px)}
.connected-energy.energy-visible .energy-photon{visibility:visible}
@media(prefers-reduced-motion:reduce){.energy-network .energy-photon{display:none}}
.energy-network .energy-photon{fill:#fff0bd;filter:drop-shadow(0 0 2px #d7ad38) drop-shadow(0 0 5px #d7ad3880)}
.energy-network .energy-halo{fill:#e3b744;filter:blur(6px)}
.connected-energy #smart-home{padding-top:250px}
.energy-controller .controller-aura{fill:#d8b24c;opacity:.24;filter:blur(14px)}
.energy-controller .controller-glass{fill:#f5efdf;stroke:#ddc47a;stroke-width:1;filter:none}
.energy-controller .controller-ring{fill:none;stroke:#d8b85d;stroke-width:1;opacity:.6}
.energy-controller .controller-device{fill:#faf7ed;stroke:#ad8d2d;stroke-width:1.4}
.energy-controller .controller-symbol{fill:none;stroke:#b39535;stroke-width:1.7;stroke-linecap:round}
.energy-controller .controller-led{fill:#e1b946;filter:drop-shadow(0 0 4px #cba032)}
@media(max-width:650px){.connected-energy #smart-home{padding-top:230px}}
/* Scroll-linked depth and light on the supplied package artwork. */
#komplettpaket{position:relative;overflow:hidden;isolation:isolate;background:#101818}
#komplettpaket .package-layout{z-index:2;pointer-events:none}
#komplettpaket .package-copy{pointer-events:auto}
#komplettpaket .package-parallax{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;margin:0;z-index:0;transform:translate3d(0,var(--package-shift,0px),0) scale(1.08);will-change:transform}
#komplettpaket .package-parallax img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:center;mask-image:none;opacity:1;transform:none;mix-blend-mode:normal}
.package-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#komplettpaket:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#10181870,transparent 57%)}
@media(max-width:650px){#komplettpaket .package-parallax{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1.35;margin-top:30px}#komplettpaket .package-parallax img{object-position:right}#komplettpaket:after{display:none}}
@media(prefers-reduced-motion:reduce){#komplettpaket .package-parallax{transform:none;will-change:auto}.package-light{display:none}}
/* Keep the complete artwork in frame; no cover crop or enlargement. */
#komplettpaket .package-parallax{inset:40px 0;left:0;top:40px;width:100%;height:calc(100% - 80px);transform:translate3d(0,0,0)}
#komplettpaket .package-parallax img{object-fit:contain;object-position:center;transform:none!important}
#komplettpaket .package-light{width:100%;height:100%}
@media(max-width:650px){#komplettpaket{display:block}#komplettpaket .package-parallax{position:relative;inset:auto;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1902 / 827;margin:55px 0 30px}#komplettpaket .package-parallax img{object-fit:contain;object-position:center}}
#smart-home .smart-home-details{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px}
#smart-home .smart-phone-demo{width:100%;max-width:620px;margin:0 auto}
#smart-home .smart-phone-photo{width:100%;height:auto;max-height:none;object-fit:contain;border-radius:0;mix-blend-mode:multiply}
@media(max-width:800px){#smart-home .smart-home-details{grid-template-columns:1fr}#smart-home .smart-phone-demo{max-width:680px}}
/* The section follows the image proportions, without letterbox bands. */
main>#komplettpaket,.package-scroll-track>#komplettpaket{min-height:0;padding:0;display:grid;aspect-ratio:1902 / 827;align-items:center}
#komplettpaket .package-layout{grid-area:1/1;width:100%;padding-block:32px}
#komplettpaket .package-parallax{grid-area:1/1;position:absolute;inset:0;width:100%;height:100%;margin:0;transform:none!important;will-change:auto}
#komplettpaket .package-parallax img{object-fit:fill}
#komplettpaket .package-copy{padding:0;width:44%}
@media(max-width:1000px) and (min-width:651px){#komplettpaket .package-copy h2{font-size:32px!important}#komplettpaket .package-description{font-size:14px;line-height:1.55}#komplettpaket .package-copy h2{margin-bottom:18px}}
@media(max-width:650px){main>#komplettpaket,.package-scroll-track>#komplettpaket{display:flex;flex-direction:column;aspect-ratio:auto;background:#0c1616}#komplettpaket .package-layout{padding:46px 24px 12px}#komplettpaket .package-copy{width:100%}#komplettpaket .package-parallax{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1902 / 827;margin:0}#komplettpaket .package-parallax img{height:auto;object-fit:contain}}
/* Pin the complete scene until its scroll-driven light reaches the foreground. */
.package-scroll-track{position:relative;padding:0;overflow:visible}
.package-scroll-track>#komplettpaket{position:sticky;top:var(--package-pin-top,90px);aspect-ratio:1709 / 920;min-height:0}
#komplettpaket .package-parallax img{object-fit:fill}
@media(max-width:650px){.package-scroll-track>#komplettpaket{aspect-ratio:auto}#komplettpaket .package-parallax{aspect-ratio:1709 / 920}}
@media(min-width:651px){
.package-scroll-track>#komplettpaket{top:0;grid-template-rows:1fr}
#komplettpaket .package-layout{height:100%;min-height:0;display:flex;align-items:center;box-sizing:border-box;align-self:stretch;padding-block:40px}
#komplettpaket .package-copy{margin-block:0;align-self:center}
}
/* Fill the viewport throughout the pinned scroll interval. */
@media(min-width:651px){.package-scroll-track>#komplettpaket{height:max(var(--package-viewport,100dvh),calc(var(--vw) * 53.83265));aspect-ratio:auto;min-height:var(--package-viewport,100dvh)}.package-scroll-track{background:#101818}}
/* Static artwork: the image itself defines the section edges. */
main>#komplettpaket{position:relative;display:block;height:auto;min-height:0;aspect-ratio:auto;padding:0}
#komplettpaket:after{display:none}
#komplettpaket .package-static{position:relative;inset:auto;display:block;width:100%;height:auto;margin:0;transform:none;z-index:0}
#komplettpaket .package-static img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;transform:none;mask-image:none}
#komplettpaket .package-layout{position:absolute;inset:0;height:100%;width:100%;display:flex;align-items:center;padding-block:0;min-height:0;z-index:2}
#komplettpaket .package-copy{width:44%;margin:0;padding:0;transform:none;opacity:1}
@media(max-width:650px){
#komplettpaket .package-layout{position:relative;inset:auto;height:auto;padding:30px 24px}
#komplettpaket .package-copy{width:100%}
main>#komplettpaket{background:#101818 url('assets/package-static-final.png') center/cover no-repeat}
#komplettpaket .package-static{background:transparent}
}
.renovation-benefits{background:#f2f7fa;padding:110px 0;color:#222}
.benefits-layout{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}
.benefits-intro{position:sticky;top:140px;padding:15px 0 45px}
.benefits-intro h2{font-size:clamp(34px,calc(var(--vw) * 4),62px);line-height:1.12;font-weight:400;letter-spacing:-.035em;margin:25px 0 30px}
.benefits-intro>p:not(.eyebrow){font-size:19px;line-height:1.75;max-width:490px;margin-bottom:32px}
.benefits-list{border-left:1px solid #b1b9bd;padding-left:38px}
.benefit-item{display:grid;grid-template-columns:30px 1fr;gap:18px;padding:45px 0 80px;min-height:320px;transition:opacity .45s ease,transform .45s ease}
.benefit-number{font-size:13px;padding-top:8px;color:#8f7929}
.benefit-item h3{font-size:clamp(25px,calc(var(--vw) * 2.6),37px);line-height:1.2;font-weight:500;letter-spacing:-.025em;margin:0 0 20px}
.benefit-item p{font-size:18px;line-height:1.8;margin:0;color:#555f65}
.benefits-enhanced .benefit-item.is-past{opacity:.2}
.benefit-item.is-active h3{animation:benefit-light .8s ease-out}
@keyframes benefit-light{0%,100%{color:#222;text-shadow:none}35%{color:#a88c26;text-shadow:none}}
@media(max-width:700px){.renovation-benefits{padding:55px 0}.benefits-layout{grid-template-columns:1fr;gap:22px}.benefits-intro{top:85px;background:#f2f7fa;z-index:3;padding:18px 0}.benefits-intro h2{font-size:30px;margin:12px 0}.benefits-intro>p:not(.eyebrow){font-size:15px;line-height:1.5;margin:0}.benefits-intro .button{display:none}.benefits-list{padding-left:16px}.benefit-item{padding:35px 0 65px;min-height:290px;gap:10px}.benefit-item p{font-size:16px}.benefits-intro .eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){.benefit-item{transition:none}.benefit-item.is-active h3{animation:none}}
/* Spacious, centered consultation form inspired by the supplied reference. */
#energiecheck .funnel-layout{display:block;max-width:1200px}
#energiecheck .funnel-right{width:100%;max-width:1200px;margin:auto}
#energiecheck .funnel-panel{padding:48px 52px;border-radius:26px;background:#fff;border:1px solid #e4e0d7;box-shadow:none}
#energiecheck .funnel-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin:0 0 30px}
#energiecheck .funnel-badges span{padding:12px 20px;font-size:15px;color:#6e5c1b}
#energiecheck .funnel-main-title{text-align:center;font-size:clamp(30px,calc(var(--vw) * 3.2),48px);line-height:1.2;margin:0 0 28px;font-weight:600}
#energiecheck .funnel-advisor{justify-content:center;border:0;margin:0 0 24px;padding:0;text-align:left}
#energiecheck .funnel-lead{font-size:18px;line-height:1.7;color:#6c7074;text-align:center;max-width:800px;margin:0 auto 28px}
#energiecheck .funnel-status{justify-content:center;gap:18px}
#energiecheck .funnel-time{margin-left:0}
#energiecheck .funnel-meter{max-width:760px;margin:15px auto 32px;height:5px}
#energiecheck .funnel-step h3,#energiecheck .funnel-subtitle{text-align:center}
#energiecheck .funnel-subtitle{max-width:820px;margin:18px auto 30px}
#energiecheck .funnel-step[data-step="0"] .funnel-choices,#energiecheck .funnel-step[data-step="1"] .funnel-choices{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
#energiecheck .funnel-choice{border-radius:16px;background:#fff;min-height:185px}
#energiecheck .choice-content img{width:100%;height:100px;object-fit:contain;background:#f7f6f2;border-radius:10px;margin-bottom:12px}
#energiecheck .choice-content strong{font-size:16px}
#energiecheck .funnel-google{display:flex;justify-content:center;margin:24px auto 0;width:fit-content;color:#444;background:#fff;border:1px solid #e5e2d9;border-radius:30px;padding:10px 18px;font-size:13px}
@media(max-width:650px){#energiecheck .funnel-panel{padding:25px 18px}#energiecheck .funnel-badges{gap:7px}#energiecheck .funnel-badges span{font-size:11px;padding:8px 10px}#energiecheck .funnel-main-title{font-size:29px}#energiecheck .funnel-lead{font-size:15px}#energiecheck .funnel-step[data-step="0"] .funnel-choices,#energiecheck .funnel-step[data-step="1"] .funnel-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#energiecheck .funnel-choice{min-height:160px}#energiecheck .choice-content strong{font-size:14px}}
.hero-photo>img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
#energiecheck .funnel-layout,#energiecheck .funnel-right{max-width:1080px}
#energiecheck .funnel-panel{padding:40px}
#energiecheck .funnel-google{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;margin:0 auto 28px}
#energiecheck .choice-content img{background:transparent;border-radius:0;mix-blend-mode:multiply}
#energiecheck .choice-content{background:transparent}
@media(max-width:650px){#energiecheck .funnel-panel{padding:25px 18px}}
#loesungen{padding-bottom:36px}#loesungen h2{margin-bottom:0}#loesungen+.solution-grid{margin-top:0;padding-top:0}@media(max-width:650px){#loesungen{padding-bottom:28px}}
.connected-energy #smart-home{padding-top:80px}@media(max-width:650px){.connected-energy #smart-home{padding-top:50px}}
.connected-energy #smart-home{padding-top:250px}@media(max-width:650px){.connected-energy #smart-home{padding-top:230px}}
.footer-offer-visual{width:100%;overflow:hidden;border-radius:22px}.footer-offer-visual img{display:block;width:100%;height:auto;mix-blend-mode:normal;object-fit:cover}
#energiecheck .advisor-avatar.advisor-jenny{display:block;width:72px;height:72px;border-radius:50%;overflow:hidden;flex:0 0 72px}#energiecheck .advisor-jenny img{position:static;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:none}
/* The photograph fills the entire right half of the CTA. */
.site-footer .footer-offer{grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch;overflow:hidden}
.site-footer .footer-offer-copy{padding:clamp(32px,calc(var(--vw) * 4),65px);align-self:center}
.site-footer .footer-offer-visual{position:relative;align-self:stretch;width:100%;height:100%;min-height:100%;max-width:none;margin:0;border-radius:0}
.site-footer .footer-offer-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:0}
@media(max-width:700px){.site-footer .footer-offer{grid-template-columns:1fr}.site-footer .footer-offer-copy{padding:35px 26px}.site-footer .footer-offer-visual{height:auto;min-height:0;aspect-ratio:3/2}}
#kontakt .contact-energy-photo .contact-google{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;width:fit-content;max-width:100%;margin:12px auto 0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:#424a4f;font-size:14px}#kontakt .contact-energy-photo figcaption{padding:0 12px 10px}
#energiecheck .funnel-layout,#energiecheck .funnel-right{max-width:960px}#energiecheck .funnel-panel{padding:36px 32px}#energiecheck .funnel-choice{min-height:165px}#energiecheck .choice-content img{height:94px;mix-blend-mode:normal}#energiecheck .choice-content strong{font-size:15px}#energiecheck .funnel-main-title{font-size:clamp(29px,calc(var(--vw) * 3),42px)}@media(max-width:650px){#energiecheck .funnel-panel{padding:25px 18px}}
/* Direct contact details in the footer call to action. */
.site-footer .footer-offer{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-footer .footer-offer-copy{min-width:0}
.footer-contact-hours{border-block:1px solid #8998a330;padding:20px 0;margin:26px 0}
.site-footer .footer-contact-hours h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#59636a;margin:0 0 8px}
.site-footer .footer-contact-hours p{font-size:16px;color:#30383e;margin:0;line-height:1.6}
.footer-contact-hours strong{font-weight:500}
.footer-contact-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-footer .footer-contact-actions .button{margin:0}
.site-footer .footer-phone-action{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid #a0a8a980;border-radius:100px;padding:16px 19px;font-size:15px;line-height:1.4;color:#222;text-decoration:none;margin:0}
.site-footer .footer-email-action{display:inline-flex;align-items:center;gap:10px;font-size:16px;color:#3e4a52;text-decoration:none;margin:18px 0 0;max-width:100%}
.footer-phone-action svg,.footer-email-action svg{width:20px;height:20px;flex-shrink:0}
.footer-email-action span{overflow-wrap:anywhere}
.footer-phone-action:hover,.footer-email-action:hover{color:#9d8322}
@media(max-width:700px){.site-footer .footer-offer{grid-template-columns:1fr}.footer-contact-hours{margin:22px 0}.site-footer .footer-phone-action{font-size:14px}}
/* Keep both funnel controls together below the current question. */
#energiecheck .funnel-navigation{display:flex;align-items:center;justify-content:center;gap:18px}
#energiecheck .funnel-navigation .funnel-back{font-size:14px;padding:14px 12px;min-height:48px}
#energiecheck .funnel-navigation #funnel-next{margin:0}
@media(max-width:450px){#energiecheck .funnel-navigation{gap:8px}#energiecheck .funnel-navigation #funnel-next{min-width:0;flex:1;max-width:220px;padding-inline:20px}}
#kundenstimmen .reviews-cta{display:flex;justify-content:center;margin-top:36px}
/* Compact ownership options stay together in one centered row. */
#energiecheck .funnel-step[data-step="2"] .funnel-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:100%;max-width:660px;margin-inline:auto}
#energiecheck .funnel-step[data-step="2"] .funnel-choice{min-height:0}
#energiecheck .funnel-step[data-step="2"] .choice-content{min-height:118px;padding:20px 10px 16px;gap:10px}
#energiecheck .funnel-step[data-step="2"] .ownership-symbol{height:36px;font-size:30px}
@media(max-width:480px){#energiecheck .funnel-step[data-step="2"] .funnel-choices{gap:8px}#energiecheck .funnel-step[data-step="2"] .choice-content{min-height:112px;padding:22px 4px 12px;gap:8px;border-radius:12px}#energiecheck .funnel-step[data-step="2"] .ownership-symbol{height:30px;font-size:26px}#energiecheck .funnel-step[data-step="2"] .choice-content strong{font-size:14px;line-height:1.3}}
/* Legal dialog triggers use the same plain presentation as footer links. */
.site-footer .footer-columns button{appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;color:inherit;width:fit-content;justify-self:start;text-align:left}
.site-footer .footer-columns button:hover{text-decoration:underline;text-underline-offset:3px}
#loesungen .intro-copy,#ablauf .journey-four-heading>p{text-align:right}
[data-funnel-entry] .funnel-panel{cursor:pointer}
[data-funnel-entry] a.funnel-choice{position:relative;display:block;color:inherit;text-decoration:none}
[data-funnel-entry] a.funnel-choice::after{content:"";position:absolute;right:12px;top:12px;width:14px;height:14px;border:1px solid #89918f;border-radius:50%;background:#fff}
[data-funnel-entry] .funnel-navigation{margin-top:18px}
body.funnel-page{background:#f2f7fa}
.funnel-page .energy-funnel{padding:44px 0 48px;min-height:calc(100svh - 170px)}
.funnel-page .funnel-main-title{font-size:clamp(30px,calc(var(--vw) * 4),42px);font-weight:400;letter-spacing:-.045em;line-height:1.2;margin:0 auto 24px;max-width:900px}
.funnel-page .funnel-note a{text-decoration:underline;text-underline-offset:3px}
.funnel-page-footer{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 32px;padding:0 24px 28px;color:#626867;font-size:13px}
.funnel-page-footer nav{display:flex;gap:20px}
.funnel-page-footer a:hover{text-decoration:underline}
@media(max-width:650px){.funnel-page .energy-funnel{padding:24px 0 32px}.funnel-page .funnel-main-title{font-size:30px}}
.journey-contact-arrow{padding-block:24px 20px}
.journey-contact-arrow svg{display:block;width:100%;height:clamp(100px,calc(var(--vw) * 10),140px);margin:0}
.journey-arrow-mobile{display:none}
@media(max-width:850px){.journey-arrow-desktop{display:none}.journey-arrow-mobile{display:block}#kontakt .contact-energy-photo{order:-1;width:min(100%,520px);margin-inline:auto}}
#loesungen .intro-copy{justify-self:end;width:100%}
#kontakt .contact-energy-photo{flex-direction:column}
#kontakt .contact-energy-photo figcaption{width:100%;max-width:100%;min-width:0}
/* Honigtopf-Feld gegen automatische Formular-Eintraege: fuer Menschen
unsichtbar, fuer Skripte aber im Formular vorhanden. */
.hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Bildausschnitt im Hero, Handyansicht. Im Hochformat sind nur rund 473 der
1536 Bildpunkte Breite sichtbar - Solarmodul und Mann passen nicht beide
vollstaendig hinein. 64% ist der Kompromiss: Das Modul bleibt als Diagonale
erkennbar, der Mann ist vollstaendig im Bild. Die Regel steht am Dateiende,
damit sie nicht von einer spaeteren ueberschrieben wird - genau das war
vorher mit "object-position:58% center" passiert. */
@media (max-width: 600px) {
.hero-photo > img { object-position: 64% center; }
}
/* Kopfzeile in der Handyansicht: Logo zweizeilig, rechts Telefon-Symbol und
Menue-Button. Steht am Dateiende, damit es nicht ueberschrieben wird. */
/* Drei Striche statt zwei, gleichmaessig verteilt. Die Auswahl ist so
spezifisch wie die bestehende Regel ".hero .site-header .menu-toggle",
sonst greift sie nicht. */
.hero .site-header .menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 44px;
height: 44px;
padding: 10px;
background: transparent;
}
.hero .site-header .menu-toggle span { height: 1.5px; margin: 0; border-radius: 2px; }
@media (max-width: 1000px) { .hero .site-header .menu-toggle { display: flex; } }
@media (max-width: 600px) {
.hero .site-header { gap: 8px; align-items: center; }
/* Das Logo liegt als einzeiliges Bild vor. Fuer die zweizeilige Darstellung
wird es zweimal als Hintergrund gezeigt und jeweils auf ein Wort
zugeschnitten. Originalmasse: LEVONOVA x 50-1205 / y 262-427,
ENERGY x 1266-2113 / y 326-427, Gesamtbild 2161 x 728.
Skalierung 0,13 - dadurch ist LEVONOVA 150px breit. */
.hero .site-header .header-wordmark {
display: grid;
gap: 3px;
width: 150px;
max-width: none;
height: auto;
overflow: visible;
}
.hero .site-header .header-wordmark > img { display: none; }
.hero .site-header .header-wordmark::before,
.hero .site-header .header-wordmark::after {
content: "";
display: block;
background-image: url("assets/levonova-energy-wordmark.png");
background-repeat: no-repeat;
background-size: 281px auto;
}
.hero .site-header .header-wordmark::before {
width: 150px;
height: 21px;
background-position: -6.5px -34px;
}
.hero .site-header .header-wordmark::after {
width: 110px;
height: 13px;
background-position: -164.5px -42.5px;
}
/* Telefon: nur das Symbol. Der tel:-Link oeffnet am Handy direkt den
Anrufdialog mit der hinterlegten Nummer. */
.hero .site-header .header-phone {
margin-left: auto;
margin-right: 0;
flex-shrink: 0;
width: 44px;
height: 44px;
min-height: 0;
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero .site-header .header-phone span { display: none; }
.hero .site-header .header-phone svg { width: 20px; height: 20px; }
.hero .site-header .menu-toggle { flex-shrink: 0; margin-left: 2px; }
}
/* Das Handy-Menue liess sich nicht oeffnen: ":root[data-theme] .hero
.site-header nav" (Spezifitaet 0,4,0) setzt display:none und schlaegt
".hero .site-header nav.open" (0,3,1). Da data-theme immer gesetzt ist,
blieb die Navigation trotz Klick unsichtbar. Diese Regel hat 0,4,1 und
gewinnt daher im geoeffneten Zustand. */
@media (max-width: 1000px) {
:root[data-theme] .hero .site-header nav.open,
.hero .site-header nav.open { display: grid; }
}
/* Einleitungstext ueber dem Energiecheck wird in der Handyansicht ausgeblendet,
damit die Fragen ohne langes Scrollen erreichbar sind. Auf groesseren
Bildschirmen bleibt er sichtbar. */
@media (max-width: 600px) {
.funnel-lead { display: none; }
}
/* Auswahl im eigenstaendigen Funnel: NUR in der Handyansicht eine Option je
Zeile, Bild links, Beschriftung rechts daneben, linksbuendig. Ab Tablet
stehen die Kacheln nebeneinander - dafuer greifen wieder die weiter oben
stehenden Rasterregeln (#energiecheck .funnel-step[data-step="0"] ... mit
repeat(4,...) bzw. repeat(3,...) fuer die Eigentumsfrage).
Die Auswahl ist bewusst spezifischer als jene Spaltenregeln, sonst greift
sie nicht. Gilt fuer beide Stellen: den eigenstaendigen Funnel und den
Ausschnitt auf der Startseite. */
@media (max-width: 650px) {
body #energiecheck .funnel-step[data-step] .funnel-choices {
grid-template-columns: 1fr;
gap: 10px;
max-width: none;
margin-inline: 0;
}
body #energiecheck .funnel-step[data-step] .funnel-choice {
min-height: 0;
}
body #energiecheck .funnel-step[data-step] .choice-content {
flex-direction: row;
align-items: center;
justify-content: flex-start;
text-align: left;
min-height: 0;
padding: 12px 48px 12px 14px;
gap: 16px;
border-radius: 14px;
}
body #energiecheck .funnel-step[data-step] .choice-content img {
width: 92px;
height: 68px;
margin-bottom: 0;
flex-shrink: 0;
object-fit: contain;
}
body #energiecheck .funnel-step[data-step] .ownership-symbol {
width: 92px;
height: auto;
flex-shrink: 0;
}
body #energiecheck .funnel-step[data-step] .choice-content strong {
font-size: 16px;
}
/* Auswahlkreis mittig an den rechten Rand statt nach oben rechts. */
body #energiecheck .funnel-step[data-step] .funnel-choice input {
top: 50%;
transform: translateY(-50%);
right: 16px;
}
/* Auf der Startseite sind die Kacheln Links statt Auswahlfelder; ihr Kreis
wird per ::after gezeichnet und muss ebenfalls mittig nach rechts.
#energiecheck und [data-funnel-entry] sitzen dort auf demselben Element. */
body #energiecheck[data-funnel-entry] a.funnel-choice::after {
top: 50%;
transform: translateY(-50%);
right: 16px;
}
}
/* Kundenstimmen in der Handyansicht: statt untereinander als Wisch-Karussell,
immer eine Karte sichtbar, mit Punkten darunter als Hinweis zum Wischen.
Die Punkte werden in app.js erzeugt. Auf groesseren Bildschirmen bleibt das
dreispaltige Raster, die Punkte sind dort ausgeblendet. */
@media (min-width: 601px) {
#kundenstimmen .reviews-dots { display: none; }
}
@media (max-width: 600px) {
#kundenstimmen .reviews-grid {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
#kundenstimmen .reviews-grid::-webkit-scrollbar { display: none; }
#kundenstimmen .review-card,
#kundenstimmen .review-card:nth-child(2) {
flex: 0 0 100%;
scroll-snap-align: center;
padding: 23px;
}
#kundenstimmen .reviews-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 18px;
}
#kundenstimmen .reviews-dots button {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: #d4d7d9;
transition: background .2s, transform .2s;
}
#kundenstimmen .reviews-dots button.is-active {
background: var(--action-gold, #9d8322);
transform: scale(1.25);
}
}
/* Einleitungstext unter "Ein Zuhause. Viele Moeglichkeiten." in der
Handyansicht linksbuendig unter der Ueberschrift. Auf Desktop bleibt die
rechtsbuendige Ausrichtung (#loesungen .intro-copy{text-align:right}). */
@media (max-width: 600px) {
#loesungen .intro-copy {
text-align: left;
justify-self: start;
}
}
/* Der geschwungene Pfeil zwischen Ablauf und Kontaktformular entfaellt in der
Handyansicht. Auf Desktop bleibt er. */
@media (max-width: 600px) {
#ablauf .journey-contact-arrow { display: none; }
}
/* Komplettpaket in der Handyansicht, angelehnt an eine klassische Produkt-
Hero-Aufteilung: Ueberschrift, drei Stichpunkte mit Haken, grosses
Produktbild, darunter ein Knopf ueber die volle Breite. Die Stichpunkte
(.package-points) gibt es nur hier; auf Desktop bleibt der Fliesstext und
das Bild liegt weiterhin als Hintergrund hinter dem Text. */
.package-points { display: none; }
@media (max-width: 600px) {
main > #komplettpaket {
background-image: none;
background-color: #101818;
display: flex;
flex-direction: column;
padding: 44px 24px 40px;
}
/* Textblock und Bild werden direkte Kinder der Section, damit der Knopf
per order unter das Bild wandern kann. */
#komplettpaket .package-layout,
#komplettpaket .package-copy { display: contents; }
#komplettpaket .package-copy > .eyebrow { margin-bottom: 18px; }
#komplettpaket .package-copy h2 { margin-bottom: 22px; }
#komplettpaket .package-description { display: none; }
#komplettpaket .package-points {
display: grid;
gap: 12px;
margin: 0 0 6px;
padding: 0;
list-style: none;
color: #fff;
font-size: 16px;
font-weight: 500;
}
#komplettpaket .package-points li { display: flex; align-items: flex-start; gap: 12px; }
#komplettpaket .package-points li::before {
content: "✓";
color: #c9a94a;
font-weight: 700;
flex-shrink: 0;
line-height: 1.45;
}
/* Das Bild ist sehr breit und links leer; auf dem Handy wird der rechte
Teil mit den Geraeten gezeigt. */
#komplettpaket .package-static {
order: 1;
width: calc(100% + 48px);
margin: 18px -24px 22px;
}
#komplettpaket .package-static img {
width: 100%;
height: auto;
aspect-ratio: 1.05;
object-fit: cover;
object-position: 82% center;
}
#komplettpaket .package-copy > .button {
order: 2;
width: 100%;
justify-content: center;
text-align: center;
font-size: 16px;
padding: 18px 24px;
}
}
/* Handy-Menue als seitliche Schublade von rechts: weisse Flaeche, Eintraege
mit Trennlinien, unten Telefonnummer mit Oeffnungszeiten und ein Knopf ueber
die volle Breite. Die Seite dahinter wird abgedunkelt; Tippen darauf
schliesst das Menue (app.js). Telefonblock und Knopf existieren nur im
Menue und sind auf Desktop ausgeblendet. */
.nav-contact, .nav-cta { display: none; }
@media (max-width: 600px) {
:root[data-theme] .hero .site-header nav.open,
:root[data-theme] .hero .site-header.is-scrolled nav.open {
display: flex;
flex-direction: column;
position: fixed;
inset: 0 0 0 auto;
width: min(calc(var(--vw) * 84), 360px);
max-height: none;
padding: 96px 24px 28px;
background: #fff;
color: #222;
z-index: 80;
overflow-y: auto;
box-shadow: none;
isolation: isolate;
}
/* Abdunkelung der Seite; liegt innerhalb der Schublade hinter deren Inhalt */
.hero .site-header nav.open::before {
content: "";
position: fixed;
inset: 0 min(calc(var(--vw) * 84), 360px) 0 0;
background: rgba(8, 20, 26, .45);
z-index: -1;
}
:root[data-theme] .hero .site-header nav.open > a:not(.nav-cta) {
display: block;
padding: 17px 0;
border-bottom: 1px solid #e5e8ea;
color: #222;
font-size: 18px;
font-weight: 500;
}
:root[data-theme] .hero .site-header nav.open .nav-contact {
display: block;
margin-top: auto;
padding-top: 26px;
}
:root[data-theme] .hero .site-header nav.open .nav-contact a {
display: grid;
gap: 3px;
padding: 0 0 0 34px;
position: relative;
color: #222;
text-decoration: none;
}
:root[data-theme] .hero .site-header nav.open .nav-contact a::before {
content: "☏";
position: absolute;
left: 0;
top: 0;
font-size: 22px;
line-height: 1;
color: #9d8322;
}
:root[data-theme] .hero .site-header nav.open .nav-contact strong { font-size: 18px; font-weight: 600; }
:root[data-theme] .hero .site-header nav.open .nav-contact span { font-size: 13px; color: #60686d; }
:root[data-theme] .hero .site-header nav.open .nav-cta {
display: flex;
justify-content: center;
width: 100%;
margin-top: 18px;
padding: 18px 24px;
font-size: 16px;
border-radius: 999px;
color: #fff;
}
}
/* Schliess-Knopf oben rechts in der Menue-Schublade, an derselben Stelle wie
der Menue-Knopf in der Kopfzeile (der liegt hinter der Schublade). Gleiche
drei Striche, damit er als dasselbe Bedienelement erkennbar ist. */
.nav-close { display: none; }
@media (max-width: 600px) {
:root[data-theme] .hero .site-header nav.open .nav-close {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
position: absolute;
top: 24px;
right: 24px;
width: 44px;
height: 44px;
padding: 10px;
border: 0;
background: transparent;
cursor: pointer;
}
:root[data-theme] .hero .site-header nav.open .nav-close span {
display: block;
height: 1.5px;
border-radius: 2px;
background: #222;
}
}
/* Telefon und Knopf im Handy-Menue direkt unter den Menuepunkten statt am
unteren Rand der Schublade. */
@media (max-width: 600px) {
:root[data-theme] .hero .site-header nav.open .nav-contact {
margin-top: 0;
padding-top: 30px;
}
}
/* Handy-Menue, zweite Fassung nach Vorlage: klappt von oben ueber die volle
Breite aus, ist aber nur so hoch wie sein Inhalt; die Seite darunter bleibt
abgedunkelt sichtbar. Oben links das Logo (zweizeilig wie in der Kopfzeile),
oben rechts der Schliess-Knopf. Ueberschreibt die seitliche Schublade. */
.nav-logo { display: none; }
@media (max-width: 600px) {
:root[data-theme] .hero .site-header nav.open,
:root[data-theme] .hero .site-header.is-scrolled nav.open {
inset: 0 0 auto 0;
width: 100%;
max-height: 100dvh;
padding: 22px 24px 28px;
border-radius: 0 0 22px 22px;
}
.hero .site-header nav.open::before { inset: 0; }
/* Logo oben links: gleiche Zuschnitt-Technik wie .header-wordmark */
:root[data-theme] .hero .site-header nav.open .nav-logo {
display: grid;
gap: 3px;
width: 150px;
margin-bottom: 26px;
}
:root[data-theme] .hero .site-header nav.open .nav-logo > img { display: none; }
:root[data-theme] .hero .site-header nav.open .nav-logo::before,
:root[data-theme] .hero .site-header nav.open .nav-logo::after {
content: "";
display: block;
background-image: url("assets/levonova-energy-wordmark.png");
background-repeat: no-repeat;
background-size: 281px auto;
}
:root[data-theme] .hero .site-header nav.open .nav-logo::before {
width: 150px; height: 21px; background-position: -6.5px -34px;
}
:root[data-theme] .hero .site-header nav.open .nav-logo::after {
width: 110px; height: 13px; background-position: -164.5px -42.5px;
}
/* Schliess-Knopf auf Hoehe des Logos, an der Stelle des Menue-Knopfs */
:root[data-theme] .hero .site-header nav.open .nav-close { top: 22px; right: 24px; }
:root[data-theme] .hero .site-header nav.open > a:not(.nav-cta) { padding: 15px 0; }
:root[data-theme] .hero .site-header nav.open .nav-contact { padding-top: 22px; }
:root[data-theme] .hero .site-header nav.open .nav-cta { margin-top: 16px; }
}
/* Das Logo im Menue ist ebenfalls ein Link, bekommt aber keine Trennlinie. */
@media (max-width: 600px) {
:root[data-theme] .hero .site-header nav.open > a.nav-logo {
padding: 0;
border-bottom: 0;
}
}
/* Korrektur: Die Abdunkelung lag als ::before innerhalb des Menues und damit
ueber dessen weissem Hintergrund - das Menue wirkte grau. Sie haengt jetzt
an der Kopfzeile, unterhalb des Menues (z-index 70 < 80), oberhalb der Seite. */
@media (max-width: 600px) {
.hero .site-header nav.open::before { display: none; }
.hero .site-header:has(nav.open)::after {
content: "";
position: fixed;
inset: 0;
background: rgba(8, 20, 26, .45);
z-index: 70;
}
}
/* Keine Abdunkelung der Seite beim geoeffneten Menue (Vorlage Enpal). Die
unsichtbare Flaeche bleibt, damit ein Tipp neben das Menue es schliesst. */
@media (max-width: 600px) {
.hero .site-header:has(nav.open)::after { background: transparent; }
}
/* Reihenfolge der Karten in "Weitere Leistungen", Handyansicht:
Wallboxen, Batteriespeicher, Energieberatung, Sanierungsfahrplan/iSFP.
Desktop behaelt die Reihenfolge aus dem HTML. */
@media (max-width: 600px) {
#more-services-track > .more-card:nth-child(1) { order: 3; }
#more-services-track > .more-card:nth-child(2) { order: 2; }
#more-services-track > .more-card:nth-child(3) { order: 1; }
#more-services-track > .more-card:nth-child(4) { order: 4; }
}
/* Funnel-Kopf in der Handyansicht: Ueberschrift "In 60 Sekunden ..." entfaellt,
die Google-Bewertung rueckt unter die Beraterin. Gilt fuer Startseite und
eigenstaendige Funnelseite (gleicher Aufbau). Desktop unveraendert. */
@media (max-width: 600px) {
#energiecheck .funnel-panel { display: flex; flex-direction: column; }
#energiecheck .funnel-panel > * { order: 3; }
#energiecheck .funnel-main-title { display: none; }
#energiecheck .funnel-panel > .funnel-advisor { order: 1; }
#energiecheck .funnel-panel > .funnel-google { order: 2; margin: 0 auto 24px; }
}
/* Im Flex-Spaltenlayout des Funnel-Panels verlor der Fortschrittsbalken seine
Breite (Rand auto + keine feste Breite). */
@media (max-width: 600px) {
#energiecheck .funnel-panel > .funnel-meter { width: 100%; align-self: stretch; }
}
/* Komplettpaket, Handyansicht: eigenes Hochformat-Bild (package-static-mobile.jpg)
statt des zugeschnittenen Querformats. Die Sektion nimmt die Hintergrundfarbe
des Bildes an, damit Text- und Bildteil nahtlos ineinander uebergehen. */
@media (max-width: 600px) {
main > #komplettpaket { background-color: #0f1517; }
#komplettpaket .package-static { margin: 6px -24px 18px; }
#komplettpaket .package-static img {
aspect-ratio: 941 / 1672;
object-fit: cover;
object-position: center top;
}
}
/* Das Hochformat-Bild hat oben viel leere Flaeche; gezeigt wird das untere
Drittel-plus mit den Geraeten und den Lichtringen. */
@media (max-width: 600px) {
#komplettpaket .package-static img {
aspect-ratio: 941 / 1150;
object-position: center bottom;
}
}
/* Komplettpaket, Handyansicht, dritte Fassung: Das Hochformat-Bild liegt als
Hintergrund ueber die volle Sektion; Ueberschrift, Stichpunkte und Knopf
stehen auf dem Bild. Oben ist das Bild dunkel und leer, dort sitzt der Text;
die Geraete beginnen erst weiter unten, der Knopf steht auf dem Boden.
Ueber dem Bild fuellt die passende Hintergrundfarbe den Rest. */
@media (max-width: 600px) {
main > #komplettpaket {
background: #151f20 url("assets/package-static-mobile.jpg") center top / 100% auto no-repeat;
min-height: calc(var(--vw) * 233.4); /* Bildverhaeltnis 821 x 1916: das Bild fuellt die Sektion exakt */
padding: 44px 24px 36px;
}
#komplettpaket .package-static { display: none; }
#komplettpaket .package-copy > .button { margin-top: auto; }
}
/* Eyebrow im Komplettpaket mobil linksbuendig wie Ueberschrift und Stichpunkte. */
@media (max-width: 600px) {
#komplettpaket .package-copy > .eyebrow { text-align: left; align-self: flex-start; margin-left: 0; margin-right: 0; }
}
/* Komplettpaket mobil: Eyebrow und Ueberschrift zentriert (Stichpunkte und
Knopf bleiben wie sie sind). Ueberschreibt die linksbuendige Fassung. */
@media (max-width: 600px) {
#komplettpaket .package-copy > .eyebrow,
#komplettpaket .package-copy > h2 {
text-align: center;
align-self: center;
width: 100%;
}
}
/* Funnel-Kopf auch auf Tablets (bis 1100px): Ueberschrift "In 60 Sekunden ..."
entfaellt, Google-Bewertung unter der Beraterin. Gleiche Regeln wie fuer
das Handy; Desktop ab 1101px unveraendert. */
@media (min-width: 601px) and (max-width: 1100px) {
#energiecheck .funnel-panel { display: flex; flex-direction: column; }
#energiecheck .funnel-panel > * { order: 3; }
#energiecheck .funnel-main-title { display: none; }
#energiecheck .funnel-panel > .funnel-advisor { order: 1; }
#energiecheck .funnel-panel > .funnel-google { order: 2; margin: 0 auto 24px; }
#energiecheck .funnel-panel > .funnel-meter { width: 100%; align-self: stretch; }
}
/* Pfeil zwischen Ablauf und Kontakt auch auf Tablets ausblenden. */
@media (max-width: 1100px) {
#ablauf .journey-contact-arrow { display: none; }
}
/* Kartenreihenfolge "Weitere Leistungen" auch auf Tablets (bis 1100px):
Wallboxen, Batteriespeicher, Energieberatung, Sanierungsfahrplan/iSFP. */
@media (min-width: 601px) and (max-width: 1100px) {
#more-services-track > .more-card:nth-child(1) { order: 3; }
#more-services-track > .more-card:nth-child(2) { order: 2; }
#more-services-track > .more-card:nth-child(3) { order: 1; }
#more-services-track > .more-card:nth-child(4) { order: 4; }
}
/* Smart Home auf Tablets (601-1100px): Text links, Handy-Abbildung deutlich
kleiner rechts daneben statt gross darunter. */
@media (min-width: 601px) and (max-width: 1100px) {
#smart-home .smart-home-details {
grid-template-columns: minmax(0, 1fr) 260px;
gap: 32px;
align-items: center;
}
#smart-home .smart-home-details .smart-phone-demo {
width: 100%;
max-width: 260px;
margin: 0;
justify-self: end;
}
}
/* Komplettpaket auf Tablets (601-1100px): eigenes Bild (package-static-tablet.jpg,
1327 x 1186), Geraete rechts, links freie dunkle Flaeche. Eyebrow, Ueberschrift,
Text und Knopf stehen links komplett im Bild; die Sektion hat das
Bildverhaeltnis, das separate Bild darunter entfaellt. */
@media (min-width: 601px) and (max-width: 1100px) {
main > #komplettpaket {
background: #141c1e url("assets/package-static-tablet.jpg") center top / 100% auto no-repeat;
min-height: calc(var(--vw) * 89.4);
display: block;
padding: 0;
}
#komplettpaket .package-static { display: none; }
#komplettpaket .package-layout {
position: relative;
inset: auto;
display: flex;
align-items: center;
min-height: calc(var(--vw) * 89.4);
height: auto;
padding: 40px 40px;
}
#komplettpaket .package-copy {
width: 46%;
max-width: none;
margin: 0;
padding: 0;
}
#komplettpaket .package-copy h2 { font-size: clamp(30px, calc(var(--vw) * 4.2), 42px) !important; margin-bottom: 18px; }
#komplettpaket .package-description { display: block; font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
#komplettpaket .package-points { display: none; }
}
/* Desktop: Menueleiste (Loesungen, Komplettpaket, ...) vorerst ausgeblendet.
Bleiben: Logo, Telefonnummer, "Beratung anfragen". Auf Handy und Tablet
bleibt das Menue hinter dem Menue-Knopf erhalten. */
@media (min-width: 1001px) {
.hero .site-header nav,
:root[data-theme] .hero .site-header nav { display: none; }
}
/* Einleitungstext ueber dem Energiecheck auch auf Tablets ausgeblendet. */
@media (min-width: 601px) and (max-width: 1100px) {
.funnel-lead { display: none; }
}
/* Smart Home auf Tablets: Handy-Abbildung etwas groesser (320px), bleibt rechts
neben dem Text. */
@media (min-width: 601px) and (max-width: 1100px) {
#smart-home .smart-home-details { grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; }
#smart-home .smart-home-details .smart-phone-demo { max-width: 320px; }
}
/* Menue (Handy und Tablet): vorerst nur Telefonnummer mit Oeffnungszeiten und
der Knopf "Beratung anfragen"; die Menuepunkte darueber sind ausgeblendet. */
@media (max-width: 1000px) {
:root[data-theme] .hero .site-header nav.open > a:not(.nav-logo):not(.nav-cta) { display: none; }
:root[data-theme] .hero .site-header nav.open .nav-contact { display: block; margin-top: 0; padding-top: 6px; }
:root[data-theme] .hero .site-header nav.open .nav-cta {
display: flex; justify-content: center; width: 100%;
margin-top: 18px; padding: 18px 24px; font-size: 16px; border-radius: 999px; color: #fff;
}
:root[data-theme] .hero .site-header nav.open .nav-contact a { display: grid; gap: 3px; padding-left: 34px; position: relative; color: inherit; text-decoration: none; }
:root[data-theme] .hero .site-header nav.open .nav-contact a::before { content: "☏"; position: absolute; left: 0; top: 0; font-size: 22px; line-height: 1; color: #c9a94a; }
:root[data-theme] .hero .site-header nav.open .nav-contact strong { font-size: 18px; font-weight: 600; }
:root[data-theme] .hero .site-header nav.open .nav-contact span { font-size: 13px; opacity: .75; }
}
/* Auf dem Tablet ist der Menue-Kasten dunkel: Telefonblock weiss */
@media (min-width: 601px) and (max-width: 1000px) {
:root[data-theme] .hero .site-header nav.open { padding: 22px 30px 28px; }
:root[data-theme] .hero .site-header nav.open .nav-contact a { color: #fff; }
}
/* Desktop: Ohne Menueleiste stand die Telefonnummer mittig im Kopf. Jetzt
rueckt sie direkt neben den goldenen Knopf an den rechten Rand. */
@media (min-width: 1001px) {
.hero .site-header { justify-content: flex-start; }
.hero .site-header .header-phone { margin-left: auto; margin-right: 0; }
.hero .site-header .header-cta { margin-left: 14px; }
}
/* Neues Hausbild (smart-home-house.jpg) hat einen fast weissen Hintergrund;
Multiplizieren blendet ihn in die Sektionsfarbe ein. */
#smart-home .smart-home-visual img { mix-blend-mode: multiply; }
/* Smart Home auf Tablets: Handy-Abbildung nochmals etwas groesser (360px). */
@media (min-width: 601px) and (max-width: 1100px) {
#smart-home .smart-home-details { grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; }
#smart-home .smart-home-details .smart-phone-demo { max-width: 360px; }
}
/* Tablet: kein Menue-Knopf; Telefonnummer und "Beratung anfragen" stehen dort
ohnehin in der Kopfzeile. Das Menue bleibt nur auf dem Handy. */
@media (min-width: 601px) and (max-width: 1000px) {
.hero .site-header .menu-toggle,
:root[data-theme] .hero .site-header .menu-toggle { display: none; }
.hero .site-header .header-cta { margin-left: 14px; }
}
/* Neue, laengere Hero-Ueberschrift: Schriftgroessen so angepasst, dass die
drei Zeilen auf allen Ansichten ohne Wortbruch passen. */
.hero-copy h1 { font-size: clamp(40px, calc(var(--vw) * 4.4), 62px); line-height: 1.08; letter-spacing: -.03em; }
@media (max-width: 1100px) { .hero-copy h1 { font-size: clamp(38px, calc(var(--vw) * 5.2), 54px); } }
@media (max-width: 600px) {
.hero-copy h1 { font-size: clamp(30px, calc(var(--vw) * 8.6), 40px); line-height: 1.12; }
}
/* Hero-Ueberschrift, zweiter Anlauf mit hoeherer Spezifitaet: fruehere Regeln
setzen die Groesse ueber vw und gewannen. Mobil ohne feste Zeilenumbrueche. */
:root[data-theme] .hero .hero-copy h1 { font-size: clamp(40px, calc(var(--vw) * 4.3), 60px); line-height: 1.08; letter-spacing: -.03em; }
@media (max-width: 1100px) { :root[data-theme] .hero .hero-copy h1 { font-size: clamp(36px, calc(var(--vw) * 5), 52px); } }
@media (max-width: 600px) {
:root[data-theme] .hero .hero-copy h1 { font-size: clamp(30px, calc(var(--vw) * 9), 36px); line-height: 1.12; }
:root[data-theme] .hero .hero-copy h1 br { display: none; }
}
/* Drei Stichpunkte im Hero unter dem Einleitungstext, goldener Haken. */
.hero-copy .hero-points {
list-style: none;
margin: -8px 0 26px;
padding: 0;
display: grid;
gap: 10px;
color: #fff;
font-size: 16px;
font-weight: 500;
}
.hero-copy .hero-points li { display: flex; align-items: flex-start; gap: 11px; line-height: 1.45; }
.hero-copy .hero-points li::before { content: "✓"; color: #c9a94a; font-weight: 700; flex-shrink: 0; }
@media (max-width: 600px) {
.hero-copy .hero-points { font-size: 15px; gap: 8px; margin: -4px 0 22px; }
}
/* Wechselrichter-Box in der Energie-Animation, kraeftigere Fassung nach Vorbild
sigenergy: dunkler Korpus mit Verlauf, goldener Rand, leuchtender Kern mit
pulsierender Aura, helles Geraet mit gluehender LED. */
.energy-controller .controller-aura { fill: #e0b64a; opacity: .38; filter: blur(22px); animation: controller-breathe 2.6s ease-in-out infinite; }
.energy-controller .controller-shadow { fill: #000; opacity: .35; filter: blur(12px); }
.energy-controller .controller-glass { fill: url(#ctl-body); stroke: none; filter: none; }
.energy-controller .controller-rim { fill: none; stroke: url(#ctl-rim); stroke-width: 1.6; opacity: .95; }
.energy-controller .controller-core { fill: url(#ctl-glow); opacity: .9; animation: controller-breathe 2.6s ease-in-out infinite; }
.energy-controller .controller-ring { fill: none; stroke: #f3dc8f; stroke-width: 1.4; opacity: .85; filter: drop-shadow(0 0 6px #e0b64a); }
.energy-controller .controller-device { fill: #fff8e6; stroke: #f0d27a; stroke-width: 1.6; filter: drop-shadow(0 0 8px #e6c25a); }
.energy-controller .controller-symbol { fill: none; stroke: #9a7c22; stroke-width: 2; stroke-linecap: round; }
.energy-controller .controller-led { fill: #ffd54a; filter: drop-shadow(0 0 6px #ffcc33) drop-shadow(0 0 12px #e0b64a); animation: controller-led 1.3s ease-in-out infinite; }
@keyframes controller-breathe { 0%,100% { opacity: .32; transform: scale(1); } 50% { opacity: .55; transform: scale(1.08); } }
@keyframes controller-led { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
.energy-controller .controller-aura, .energy-controller .controller-core, .energy-controller .controller-led { animation: none; }
}
/* Funnel-Kopf auf allen Ansichten gleich: Ueberschrift "In 60 Sekunden ..."
entfaellt, Google-Bewertung unter der Beraterin. Jetzt auch Desktop. */
#energiecheck .funnel-panel { display: flex; flex-direction: column; }
#energiecheck .funnel-panel > * { order: 3; }
#energiecheck .funnel-main-title { display: none; }
#energiecheck .funnel-panel > .funnel-advisor { order: 1; }
#energiecheck .funnel-panel > .funnel-google { order: 2; margin: 0 auto 24px; }
#energiecheck .funnel-panel > .funnel-meter { width: 100%; align-self: stretch; }
/* Komplettpaket auf Desktop: fuellt den gesamten Bildschirm, das Bild steht
fest im Hintergrund und die Seite scrollt darueber (Parallax per
background-attachment: fixed). Das separate Bild darunter entfaellt; der
Textblock wird vertikal zentriert. */
@media (min-width: 1101px) {
main > #komplettpaket {
/* fuellt den Bildschirm trotz Seitenmassstab */
min-height: calc(100vh / var(--seitenzoom));
min-height: calc(100svh / var(--seitenzoom));
background-color: #101818;
/* Bild im 16:9-Format mit Geraeten rechts der Mitte: contain statt cover,
damit Modul, Wechselrichter und Waermepumpe nie angeschnitten werden.
Restflaechen oben/unten uebernimmt die Hintergrundfarbe des Bildrands. */
background-image: url("assets/package-static-desktop.jpg");
background-size: 100% auto;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
display: flex;
align-items: center;
}
#komplettpaket .package-static { display: none; }
#komplettpaket .package-layout {
position: relative;
inset: auto;
width: 100%;
height: auto;
min-height: calc(100vh / .9);
min-height: calc(100svh / .9);
display: flex;
align-items: center;
padding-block: 80px;
box-sizing: border-box;
}
}
/* Kartenreihenfolge "Weitere Leistungen" jetzt auch auf Desktop (ab 1101px):
Wallboxen, Batteriespeicher, Energieberatung, Sanierungsfahrplan/iSFP. */
@media (min-width: 1101px) {
#more-services-track > .more-card:nth-child(1) { order: 3; }
#more-services-track > .more-card:nth-child(2) { order: 2; }
#more-services-track > .more-card:nth-child(3) { order: 1; }
#more-services-track > .more-card:nth-child(4) { order: 4; }
}
/* Komplettpaket mobil: mehr Luft ueber dem Eyebrow. */
@media (max-width: 600px) {
main > #komplettpaket { padding-top: 84px; }
}
/* Loesungskarten in der Handyansicht: Auf Touch-Geraeten bleibt :hover nach
dem Antippen haengen, dadurch schloss ein zweites Tippen die Karte nicht.
Hier zaehlt nur noch .is-open. Der Hinweis "Details anzeigen +" verschwindet,
sobald eine Karte einmal geoeffnet wurde. */
@media (max-width: 600px) {
.solution-card:not(.is-open):hover .card-body p,
.solution-card:not(.is-open):focus-within .card-body p { opacity: 0; transform: translateY(16px); visibility: hidden; }
.solution-card:not(.is-open):hover .circle-link,
.solution-card:not(.is-open):focus-within .circle-link { opacity: 0; transform: translateY(16px); visibility: hidden; }
.solution-card:not(.is-open):hover .card-image:before,
.solution-card:not(.is-open):focus-within .card-image:before { opacity: 1; }
.solution-card:not(.is-open):hover .card-image:after,
.solution-card:not(.is-open):focus-within .card-image:after { opacity: 0; }
.solution-card:not(.is-open):hover .card-body:after { display: block; }
.solution-card.was-open .card-body:after { display: none; }
}
/* Footer: alle Texte in derselben Schrift wie Telefonnummer und E-Mail
(14px, dunkel). Telefon- und E-Mail-Zeile mit Symbol davor. */
.site-footer .footer-columns p,
.site-footer .footer-columns address,
.site-footer .footer-brand p { color: #222; font-size: 14px; line-height: 1.8; }
.site-footer .footer-columns a.footer-line { display: inline-flex; align-items: center; gap: 9px; }
.site-footer .footer-ico { width: 16px; height: 16px; flex-shrink: 0; color: #9d8322; }
/* Fester Umbruch im Loesungen-Einleitungssatz nur auf Desktop; mobil und
Tablet brechen die Zeilen natuerlich. */
@media (max-width: 1100px) {
#loesungen .intro-copy p br { display: none; }
}
/* Loesungen-Einleitung auf Desktop: Textspalte etwas breiter, damit die
zweite Zeile ("die auf Ihr Gebaeude ... abgestimmt sind.") in einer Zeile
bleibt und kein einzelnes Wort in eine dritte Zeile faellt. */
@media (min-width: 1101px) {
/* .88fr statt .82fr: Bei .82fr war die Textspalte rund vier Pixel schmaler
als "Viele Moeglichkeiten.", wodurch die Zeile umbrach. Die rechte Spalte
bleibt unveraendert, weil .intro-copy ohnehin auf 560px begrenzt ist. */
#loesungen.intro { grid-template-columns: .88fr 1.12fr; }
#loesungen .intro-copy { max-width: 560px; }
}
/* Oeffnungszeiten im Footer mit Uhr-Symbol, gleiche Zeile wie Telefon/E-Mail. */
.site-footer .footer-columns p.footer-line { display: inline-flex; align-items: center; gap: 9px; margin: 0; }
/* Beraterin-Zeile: Umbruch nach "Jenny," nur in der Handyansicht, damit
"Ihre persoenliche Beraterin" zusammen in der zweiten Zeile steht. */
.advisor-break { display: none; }
@media (max-width: 600px) { .advisor-break { display: inline; } }
/* ---------------------------------------------------------------------------
Kopfbereich des Funnels nach Vorlage: linksbuendig statt zentriert.
Reihenfolge Beraterin -> Google-Bewertung -> Trennlinie -> Schrittanzeige
-> Fortschritt -> Frage. Die Reihenfolge selbst steuern die weiter oben
gesetzten order-Werte auf .funnel-panel; hier geht es um Ausrichtung,
Trennlinie und die Unterteilung des Fortschrittsbalkens.
--------------------------------------------------------------------------- */
#energiecheck .funnel-advisor { justify-content: flex-start; text-align: left; }
#energiecheck .funnel-panel > .funnel-google {
justify-content: flex-start;
margin: 0 auto 0 0;
}
/* Trennlinie zwischen Vorstellung und Schrittanzeige, wie in der Vorlage. */
#energiecheck .funnel-panel > .funnel-status {
justify-content: flex-start;
border-top: 1px solid #e8e5dd;
margin-top: 22px;
padding-top: 22px;
}
#energiecheck .funnel-time { margin-left: auto; }
/* Fortschritt ueber die volle Breite und in Abschnitte unterteilt. Die Luecken
zeichnet eine Deckschicht in Panel-Weiss ueber den durchgehenden Balken,
damit die von funnel.js gesetzte Breite unveraendert weiterfunktioniert. */
#energiecheck .funnel-meter {
position: relative;
max-width: none;
margin: 16px 0 30px;
height: 7px;
border-radius: 4px;
}
#energiecheck .funnel-meter > span { border-radius: 4px; }
#energiecheck .funnel-meter::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(to right,
transparent 0 calc(25% - 5px), #fff calc(25% - 5px) calc(25% + 5px),
transparent calc(25% + 5px) calc(50% - 5px), #fff calc(50% - 5px) calc(50% + 5px),
transparent calc(50% + 5px) calc(75% - 5px), #fff calc(75% - 5px) calc(75% + 5px),
transparent calc(75% + 5px) 100%);
}
/* Frage und Unterzeile ebenfalls linksbuendig. */
#energiecheck .funnel-step h3,
#energiecheck .funnel-subtitle { text-align: left; }
#energiecheck .funnel-subtitle { margin-left: 0; margin-right: 0; }
/* Einleitungstext ueber der Schrittanzeige: linksbuendig wie der uebrige
Kopfbereich und ab Tablet sichtbar. Bisher war er zwischen 601 und 1100 px
ausgeblendet, wodurch er in schmaleren Desktop-Fenstern fehlte. In der
Handyansicht bleibt er ausgeblendet, damit die Fragen dort ohne langes
Scrollen erreichbar sind. */
@media (min-width: 601px) {
#energiecheck .funnel-lead { display: block; }
}
#energiecheck .funnel-lead {
text-align: left;
max-width: 760px;
margin: 0 0 4px;
font-size: 17px;
}
/* Google-Bewertung steht jetzt im Textblock der Beraterin, direkt unter
"Ich begleite Sie bei Ihrem Vorhaben." Dadurch ist sie automatisch buendig
zu diesem Text statt ueber einen festen Abstand ausgerichtet. */
#energiecheck .funnel-advisor .funnel-google {
justify-content: flex-start;
margin: 9px 0 0;
}
/* In der Handyansicht ist die Textspalte neben dem Foto zu schmal fuer die
Bewertung in einer Zeile. min-width:0 laesst die Spalte ueberhaupt
schrumpfen, der Umbruch schiebt "Google Bewertungen" in die zweite Zeile. */
@media (max-width: 650px) {
#energiecheck .funnel-advisor > div { min-width: 0; }
#energiecheck .funnel-advisor .funnel-google { flex-wrap: wrap; row-gap: 2px; }
}
/* ---------------------------------------------------------------------------
Weitere Leistungen: beim Ueberfahren einer Kachel erscheint eine dunkle
Flaeche mit einer kurzen Erklaerung und einem Hinweis zur Beratung.
Bewusst nur auf Geraeten mit echtem Mauszeiger - auf Touchgeraeten gibt es
kein Hover, dort fuehrt ein Tipp wie bisher direkt zum Funnel.
--------------------------------------------------------------------------- */
.more-card-hover {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 16px;
padding: 34px 30px;
background: linear-gradient(180deg, rgba(14, 18, 21, .82) 0%, rgba(10, 13, 15, .95) 100%);
opacity: 0;
visibility: hidden;
transition: opacity .3s ease, visibility .3s;
}
.more-card-hover h4 {
font-size: 23px;
font-weight: 500;
letter-spacing: -.02em;
line-height: 1.25;
color: #e3c25f;
}
.more-card-hover p {
font-size: 15px;
line-height: 1.65;
color: #eef1f3;
}
.more-card-cta {
font-size: 14px;
font-weight: 600;
color: #fff;
}
@media (hover: hover) and (pointer: fine) {
.more-card:hover .more-card-hover,
.more-card:focus-visible .more-card-hover { opacity: 1; visibility: visible; }
.more-card:hover .more-card-caption,
.more-card:focus-visible .more-card-caption { opacity: 0; }
.more-card-caption { transition: opacity .25s ease; }
}
/* Ohne Mauszeiger (Handy, Tablet) gibt es kein Hover. Dort erscheint die
Erklaerung auf Tipp - wie bei den Loesungs-Kacheln weiter oben. Den Wechsel
setzt app.js ueber die Klasse is-open; der zweite Tipp folgt dem Link. */
@media not all and (hover: hover) {
.more-card-hover { opacity: 0; visibility: hidden; }
.more-card.is-open .more-card-hover { opacity: 1; visibility: visible; }
.more-card-caption { transition: opacity .25s ease; }
.more-card.is-open .more-card-caption { opacity: 0; }
/* Hinweis als schlichtes Pluszeichen in der oberen rechten Ecke. Bewusst ueber
das vorhandene Eck-Element statt ueber .more-card::after - dort liegt schon
der dunkle Verlauf, den ein zweites ::after ueberschreiben wuerde.
Doppelte Klasse, weil die globale Ausblendung der Pfeile weiter unten steht. */
.more-card .more-card-arrow {
display: block;
z-index: 3;
top: 18px;
right: 22px;
width: auto;
height: auto;
background: transparent;
border-radius: 0;
color: #fff;
font-size: 30px;
font-weight: 300;
line-height: 1;
opacity: 1;
transform: none;
text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
transition: opacity .25s ease;
}
.more-card .more-card-arrow svg { display: none; }
.more-card .more-card-arrow::before { content: "+"; }
.more-card.is-open .more-card-arrow { opacity: 0; }
}
/* Pfeil-Symbol auf den Kacheln vorerst ausgeblendet. Das Markup bleibt
erhalten, damit es sich jederzeit wieder einblenden laesst. */
.more-card-arrow { display: none; }
/* Die Textzeile links in der Steuerleiste ist entfallen; ohne sie wuerde
space-between die Blaetterknoepfe nach links ziehen. */
.more-controls { justify-content: flex-end; }
/* ---------------------------------------------------------------------------
Aktions-Hinweis auf der Startseite, nach Kundenvorlage. Nutzt das native
dialog-Element, damit Escape, Fokusfang und Tastaturbedienung ohne eigenen
Code stimmen. Geoeffnet und gemerkt wird er in app.js.
--------------------------------------------------------------------------- */
dialog.promo-dialog {
padding: 0;
/* 1180px, damit die beiden Knoepfe nebeneinander Platz haben. */
max-width: 1180px;
width: calc(100% - 40px);
border-radius: 18px;
overflow: hidden;
background: #fff;
color: var(--ink);
}
/* minmax(0,1fr) statt 1fr: Sonst waechst die Textspalte ueber die Haelfte
hinaus, weil lange Woerter wie "Einspeiseverguetung" eine Mindestbreite
erzwingen. */
.promo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.promo-figure { position: relative; margin: 0; min-height: 430px; }
.promo-figure img { width: 100%; height: 100%; object-fit: cover; }
/* Dunkler Verlauf im unteren Bildbereich: Ohne ihn ist die weisse Schrift auf
dem hellen Dach kaum zu lesen; ein Textschatten allein reicht nicht. */
.promo-figure::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 58%;
background: linear-gradient(transparent, rgba(8, 12, 15, .85));
pointer-events: none;
}
.promo-figure figcaption { position: absolute; z-index: 1; left: 30px; right: 24px; bottom: 28px; color: #fff; }
.promo-tag {
display: inline-block;
background: var(--action-gold, #9d8322);
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: .07em;
padding: 11px 20px;
border-radius: 30px;
margin-bottom: 16px;
}
.promo-figure figcaption p {
font-size: 16px;
font-weight: 500;
text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
}
.promo-body { position: relative; padding: 42px 46px; display: flex; flex-direction: column; gap: 17px; }
.promo-badge {
align-self: flex-start;
background: #d92d20;
color: #fff;
font-size: 14px;
font-weight: 700;
letter-spacing: .09em;
padding: 11px 22px;
border-radius: 30px;
margin: 0;
}
/* !important ist hier noetig: Die Theme-Regel :root[data-theme] body h2 setzt
Schriftgroesse und Zeilenhoehe selbst mit !important, dagegen reicht hoehere
Spezifitaet allein nicht aus. */
#aktion-dialog h2, #foerder-dialog h2 {
font-size: clamp(27px, calc(var(--vw) * 2.6), 36px) !important;
/* Auch die Schriftstaerke setzt die Theme-Regel mit !important auf 400. */
font-weight: 700 !important;
line-height: 1.17 !important;
letter-spacing: -.025em;
color: #1c2428;
margin: 0;
/* Keine eigene Breitenbegrenzung: Die Spalte gibt die Zeilenlaenge vor,
sonst bricht die Ueberschrift frueher um als in der Vorlage. */
}
.promo-sub { font-size: 19px; font-weight: 700; line-height: 1.4; margin: 0; color: var(--ink); }
.promo-text { font-size: 16px; line-height: 1.6; color: #77828a; margin: 0; max-width: 46ch; }
.promo-points { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 10px; }
.promo-points li { display: flex; align-items: baseline; gap: 13px; font-size: 16px; line-height: 1.45; }
.promo-points li::before { content: "✓"; color: var(--ink); font-size: 15px; }
.promo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.promo-cta,
.promo-phone {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
min-height: 56px;
padding: 15px 30px;
border-radius: 40px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: transform .2s, background .2s;
}
.promo-cta { background: var(--action-gold, #9d8322); color: #fff; }
.promo-phone { background: #fff; color: var(--ink); border: 1px solid #d9dde0; }
.promo-cta:hover, .promo-phone:hover { transform: translateY(-2px); }
.promo-phone svg { flex: 0 0 auto; }
.promo-dialog .dialog-close {
position: absolute;
top: 26px; right: 26px;
width: 46px; height: 46px;
border-radius: 50%;
background: #fff;
border: 1px solid #e4e7e9;
color: #1d2a31;
font-size: 24px;
line-height: 1;
display: grid;
place-items: center;
box-shadow: 0 4px 14px rgba(14, 22, 28, .1);
}
@media (max-width: 820px) {
.promo-grid { grid-template-columns: 1fr; }
.promo-figure { min-height: 200px; }
.promo-figure figcaption { left: 20px; right: 20px; bottom: 18px; }
.promo-tag { font-size: 12px; padding: 9px 15px; margin-bottom: 11px; }
.promo-figure figcaption p { font-size: 14px; }
.promo-body { padding: 26px 22px 30px; gap: 13px; }
.promo-badge { font-size: 12px; padding: 9px 17px; }
#aktion-dialog h2, #foerder-dialog h2 { font-size: 25px !important; }
.promo-sub { font-size: 16px; }
.promo-text { font-size: 15px; }
.promo-points li { font-size: 15px; }
.promo-actions { gap: 10px; }
.promo-cta, .promo-phone { width: 100%; min-height: 52px; font-size: 15px; }
.promo-dialog .dialog-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 21px; }
}
/* Unterstreichung des Kernsatzes, etwas Abstand zur Grundlinie. */
.promo-underline { text-decoration: underline; text-decoration-thickness: 4px;
text-underline-offset: 7px; text-decoration-skip-ink: none; }
/* Auftritt des Aktions-Hinweises: kurzes Aufpoppen, danach alle paar Sekunden
ein kurzes Wackeln, damit er die Aufmerksamkeit haelt.
Wer im Betriebssystem reduzierte Bewegung eingestellt hat, bekommt nur das
ruhige Einblenden - dauerhaftes Wackeln kann dort Beschwerden ausloesen. */
@keyframes promo-auftritt {
0% { transform: scale(.86); opacity: 0; }
55% { transform: scale(1.04); opacity: 1; }
75% { transform: scale(.985); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes promo-wackeln {
0%, 84%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
86% { transform: translate3d(-7px, 0, 0) rotate(-.6deg) scale(1.012); }
88% { transform: translate3d(7px, 0, 0) rotate(.6deg) scale(1.012); }
90% { transform: translate3d(-6px, 0, 0) rotate(-.45deg) scale(1.008); }
92% { transform: translate3d(6px, 0, 0) rotate(.45deg) scale(1.008); }
94% { transform: translate3d(-4px, 0, 0) rotate(0deg) scale(1.004); }
96% { transform: translate3d(4px, 0, 0) rotate(0deg) scale(1.004); }
98% { transform: translate3d(-2px, 0, 0) rotate(0deg) scale(1); }
}
@keyframes promo-hintergrund {
from { opacity: 0; }
to { opacity: 1; }
}
dialog.promo-dialog[open] {
animation: promo-auftritt .55s cubic-bezier(.2, .9, .3, 1.25) both,
promo-wackeln 5s 1.2s ease-in-out infinite;
}
dialog.promo-dialog[open]::backdrop { animation: promo-hintergrund .45s ease both; }
@media (prefers-reduced-motion: reduce) {
dialog.promo-dialog[open] { animation: promo-hintergrund .3s ease both; }
}
/* ---------------------------------------------------------------------------
Einblendungen beim Scrollen, angelehnt an trinasolar.com: Inhalte starten
unsichtbar und leicht versetzt und gleiten mit einer sanften Ausrollkurve an
ihren Platz; Elemente einer Gruppe folgen zeitversetzt.
Bewegt wird ueber die Einzeleigenschaften translate und scale statt ueber
transform, damit vorhandene Transformationen der Elemente erhalten bleiben.
Versteckt wird nur, wenn app.js die Klasse einblenden-bereit gesetzt hat -
ohne JavaScript bleibt alles sichtbar. Nach dem Einblenden entfernt app.js
die Markierung wieder, sodass Hover-Uebergaenge unberuehrt bleiben.
--------------------------------------------------------------------------- */
@keyframes einblenden-hoch {
from { opacity: 0; translate: 0 34px; }
to { opacity: 1; translate: 0 0; }
}
@keyframes einblenden-bild {
from { opacity: 0; scale: 1.045; }
to { opacity: 1; scale: 1; }
}
html.einblenden-bereit [data-einblenden]:not(.ist-eingeblendet) { opacity: 0; }
html.einblenden-bereit [data-einblenden].ist-eingeblendet {
animation: einblenden-hoch .75s cubic-bezier(.61, 1, .88, 1) var(--einblenden-verzug, 0s) both;
}
html.einblenden-bereit [data-einblenden="bild"].ist-eingeblendet {
animation-name: einblenden-bild;
animation-duration: 1.25s;
}
/* ===========================================================================
Funnel nach Kundenvorlage (Okt. 2026): ohne Kasten direkt auf dem hellblauen
Hintergrund, Dachzeile in Gold, grosse Ueberschrift, darunter Frage und
quadratische weisse Kacheln mit weichem Schatten. Beraterin, Google-Bewertung,
Schrittanzeige und Fortschritt sind in der Vorlage nicht enthalten und werden
ausgeblendet - funnel.js schreibt weiter hinein, deshalb bleiben sie im HTML.
Die Schatten sind von der Kundin ausdruecklich gewuenscht (Vorlage 1:1),
abweichend von der fruehen Projektvorgabe "keine neuen Schatten".
Masse aus der Vorlage bei rund 1480px Fensterbreite abgelesen.
=========================================================================== */
.energy-funnel { background: linear-gradient(160deg, #e7eff4 0%, #eef4f7 45%, #f6f9fa 100%) !important; }
body.funnel-page { background: linear-gradient(160deg, #e7eff4 0%, #eef4f7 45%, #f6f9fa 100%) fixed; }
.funnel-page .energy-funnel { background: transparent !important; }
#energiecheck .funnel-panel {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
align-items: center;
text-align: center;
}
#energiecheck .funnel-panel > .funnel-advisor,
#energiecheck .funnel-panel > .funnel-status,
#energiecheck .funnel-panel > .funnel-meter { display: none !important; }
#energiecheck .funnel-eyebrow {
order: 3;
margin: 0 0 18px;
font-size: 17px;
font-weight: 500;
line-height: 1.4;
color: var(--action-gold, #9d8322);
}
#energiecheck .funnel-main-title {
display: block !important;
font-size: clamp(32px, calc(var(--vw) * 4.2), 50px) !important;
font-weight: 700 !important;
letter-spacing: -.045em !important;
line-height: 1.12 !important;
color: #1c2428;
margin: 0 0 26px !important;
text-align: center;
}
#energiecheck .funnel-lead {
display: block !important;
text-align: center !important;
max-width: 640px !important;
margin: 0 auto !important;
font-size: 17px !important;
line-height: 1.78 !important;
color: #5d666c;
}
#energiecheck .funnel-panel > form { align-self: stretch; width: 100%; margin-top: 52px; }
#energiecheck .funnel-step h3 {
font-size: clamp(24px, calc(var(--vw) * 2.6), 31px) !important;
font-weight: 700 !important;
letter-spacing: -.035em !important;
text-align: center !important;
color: #1c2428;
margin-bottom: 0 !important;
}
#energiecheck .funnel-subtitle { display: none !important; }
#energiecheck .funnel-contact-fields { text-align: left; max-width: 760px; margin-inline: auto; }
#energiecheck .funnel-navigation { justify-content: center !important; margin-top: 56px !important; }
@media (min-width: 651px) {
#energiecheck .funnel-step .funnel-choices {
grid-template-columns: repeat(4, minmax(0, 188px)) !important;
justify-content: center;
gap: clamp(16px, calc(var(--vw) * 2.6), 34px) !important;
max-width: none !important;
margin: 42px auto 0 !important;
}
#energiecheck .funnel-step[data-step="2"] .funnel-choices { grid-template-columns: repeat(3, minmax(0, 188px)) !important; }
#energiecheck .funnel-choice { min-height: 0 !important; background: transparent !important; border-radius: 0 !important; }
#energiecheck .funnel-choice input { opacity: 0 !important; }
#energiecheck[data-funnel-entry] a.funnel-choice::after { display: none !important; }
#energiecheck .choice-content {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
gap: 18px !important;
min-height: 0 !important;
align-items: center !important;
}
#energiecheck .choice-content img,
#energiecheck .choice-content .ownership-symbol {
width: 100% !important;
max-width: 188px;
height: auto !important;
aspect-ratio: 1;
box-sizing: border-box;
padding: 34px !important;
background: #fff !important;
border-radius: 18px !important;
border: 2px solid transparent !important;
object-fit: contain !important;
box-shadow: 0 10px 30px rgba(20, 40, 55, .07);
transition: border-color .2s ease, box-shadow .2s ease;
}
#energiecheck .choice-content .ownership-symbol { display: grid !important; place-items: center; font-size: 44px !important; }
#energiecheck .funnel-choice:hover .choice-content img,
#energiecheck .funnel-choice:hover .choice-content .ownership-symbol,
#energiecheck .funnel-choice input:checked + .choice-content img,
#energiecheck .funnel-choice input:checked + .choice-content .ownership-symbol,
#energiecheck .funnel-choice input:focus-visible + .choice-content img,
#energiecheck .funnel-choice input:focus-visible + .choice-content .ownership-symbol {
border-color: var(--action-gold, #9d8322) !important;
box-shadow: 0 12px 32px rgba(157, 131, 34, .2);
}
#energiecheck .choice-content strong { font-size: 16px !important; font-weight: 700 !important; color: #1c2428; }
}
@media (min-width: 651px) and (max-width: 959px) {
#energiecheck .funnel-step:not([data-step="2"]) .funnel-choices { grid-template-columns: repeat(2, minmax(0, 188px)) !important; }
}
@media (min-width: 1101px) {
#energiecheck .funnel-step .funnel-choices { gap: 34px !important; }
}
@media (max-width: 650px) {
#energiecheck .funnel-main-title { font-size: 30px !important; }
#energiecheck .funnel-eyebrow { font-size: 15px; margin-bottom: 12px; }
#energiecheck .funnel-panel > form { margin-top: 34px; }
#energiecheck .funnel-navigation { margin-top: 30px !important; }
}
/* Abstaende wie in der Vorlage; der Verlauf liegt auf html, damit er auch
unterhalb einer kurzen Seite weiterlaeuft statt in Weiss zu enden. */
html:has(> body.funnel-page) { background: linear-gradient(160deg, #e7eff4 0%, #eef4f7 45%, #f6f9fa 100%) fixed; }
.funnel-page .energy-funnel { padding-top: 86px !important; padding-bottom: 120px !important; }
@media (max-width: 650px) { .funnel-page .energy-funnel { padding-top: 40px !important; padding-bottom: 56px !important; } }
/* Frage mit gleichem Abstand nach oben (zur Einleitung) und nach unten (zu den
Kacheln). Auf der Startseite gibt es kein Formular um die Schritte, deshalb
sitzt der Abstand an der Frage selbst statt am Formular. */
#energiecheck .funnel-panel > form { margin-top: 0 !important; }
#energiecheck .funnel-step h3 { margin-top: 56px !important; }
@media (min-width: 651px) {
#energiecheck .funnel-step .funnel-choices { margin-top: 56px !important; }
}
@media (max-width: 650px) {
#energiecheck .funnel-step h3 { margin-top: 32px !important; }
#energiecheck .funnel-step .funnel-choices { margin-top: 32px !important; }
}
/* Beraterin als weisse Pille zwischen Einleitung und Frage (Kundenvorlage).
Reihenfolge ueber order: Dachzeile, Ueberschrift, Einleitung (3), Pille (4),
alles Weitere (5). Die Google-Bewertung in der Pille bleibt ausgeblendet. */
#energiecheck .funnel-panel > * { order: 5; }
#energiecheck .funnel-panel > .funnel-eyebrow,
#energiecheck .funnel-panel > .funnel-main-title,
#energiecheck .funnel-panel > .funnel-lead { order: 3; }
#energiecheck .funnel-panel > .funnel-advisor {
display: flex !important;
order: 4;
align-self: center;
align-items: center;
gap: 18px;
max-width: 100%;
margin: 40px auto 0 !important;
padding: 12px 34px 12px 12px !important;
background: #fff;
border: 0 !important;
border-radius: 999px !important;
box-shadow: 0 10px 30px rgba(20, 40, 55, .08);
text-align: left;
}
#energiecheck .funnel-advisor .advisor-avatar.advisor-jenny { width: 74px; height: 74px; flex: 0 0 74px; }
#energiecheck .funnel-advisor > div { min-width: 0; }
#energiecheck .funnel-advisor .funnel-google { display: none !important; }
#energiecheck .funnel-advisor .advisor-zeile { margin: 0; font-size: 17px; line-height: 1.4; color: #2a3236; }
#energiecheck .funnel-advisor .advisor-zeile strong { font-size: inherit !important; font-weight: 700; color: #1c2428; }
#energiecheck .funnel-advisor .advisor-status {
display: flex;
align-items: center;
gap: 10px;
margin: 6px 0 0;
font-size: 17px;
line-height: 1.4;
color: #7a8388;
}
#energiecheck .online-punkt { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; background: #2fb457; }
@media (max-width: 650px) {
#energiecheck .funnel-panel > .funnel-advisor { gap: 12px; margin-top: 26px !important; padding: 10px 20px 10px 10px !important; border-radius: 40px !important; }
#energiecheck .funnel-advisor .advisor-avatar.advisor-jenny { width: 54px; height: 54px; flex-basis: 54px; }
#energiecheck .funnel-advisor .advisor-zeile,
#energiecheck .funnel-advisor .advisor-status { font-size: 13.5px; }
#energiecheck .funnel-step h3 { margin-top: 32px !important; }
}
/* Smart Home: Handy ist freigestellt (transparentes PNG) und steht ohne
eigenen Bildhintergrund direkt auf der Sektion. */
#smart-home .smart-phone-photo { mix-blend-mode: normal; background: none; border-radius: 0; }
/* Funnel mobil: Einleitungstext entfaellt, Jenny folgt direkt auf die Ueberschrift. */
@media (max-width: 650px) {
#energiecheck .funnel-panel > .funnel-lead { display: none !important; }
#energiecheck .funnel-panel > .funnel-advisor { margin-top: 6px !important; }
#energiecheck .funnel-advisor .advisor-status { display: none !important; }
#energiecheck .funnel-advisor .advisor-zeile::before {
content: "online"; display: block; margin: 0 0 3px; padding-left: 15px;
font-size: 12.5px; font-weight: 500; line-height: 1.3; color: #2a9a4c;
background: radial-gradient(circle at 4.5px 50%, #2fb457 4.5px, transparent 5px) no-repeat;
}
}
/* PV-Zusatzfrage (nur bei Photovoltaik): fuenf Kacheln in einer Reihe,
Fragezeichen-Kachel dunkel wie in der Vorlage. */
@media (min-width: 960px) {
#energiecheck .funnel-step[data-step="pv-zusatz"] .funnel-choices,
#energiecheck .funnel-step[data-step="wp-zusatz"] .funnel-choices {
grid-template-columns: repeat(5, minmax(0, 176px)) !important;
gap: clamp(16px, calc(var(--vw) * 2), 30px) !important;
}
}
@media (min-width: 651px) and (max-width: 959px) {
#energiecheck .funnel-step[data-step="pv-zusatz"] .funnel-choices,
#energiecheck .funnel-step[data-step="wp-zusatz"] .funnel-choices { grid-template-columns: repeat(3, minmax(0, 188px)) !important; }
}
#energiecheck .extras-choices { align-items: start !important; }
#energiecheck .extras-frage { color: #1c2428 !important; }
#energiecheck .extras-frage svg { width: 46px; height: 46px; display: block; }
@media (max-width: 650px) {
#energiecheck .extras-frage { height: 68px !important; display: grid !important; place-items: center; }
#energiecheck .extras-frage svg { width: 34px; height: 34px; }
}
@media (min-width: 651px) {
#energiecheck .choice-content .extras-frage { margin-bottom: 12px !important; }
}
#energiecheck .extras-frage.extras-nein { color: #d63a3a !important; }
/* Popup: goldene Eyebrow ueber der Ueberschrift, im Stil der Sektions-Eyebrows. */
#aktion-dialog .promo-eyebrow, #foerder-dialog .promo-eyebrow {
margin: 0 0 14px;
font-size: 14px;
font-weight: 600;
letter-spacing: .14em;
line-height: 1.5;
text-transform: uppercase;
color: #9d8322;
}
@media (max-width: 820px) {
#aktion-dialog .promo-eyebrow, #foerder-dialog .promo-eyebrow { font-size: 12px; margin-bottom: 10px; padding-right: 46px; }
}
/* Feste Zeilen am Desktop: Die Umbrueche kommen nur aus den
im Markup
(Loesungen 2, Vision 3, Footer 2 Zeilen). */
@media (min-width: 1101px) {
#loesungen h2, #vision-title, #footer-offer-title { white-space: nowrap; }
}
/* Funnel: eigener Schritt nur fuer die E-Mail-Adresse, ein Feld mittig. */
#energiecheck .funnel-email-field { grid-template-columns: 1fr; max-width: 460px; }
#energiecheck .funnel-hinweis { margin: 14px auto 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: #5d666c; text-align: center; }
@media (max-width: 650px) { #energiecheck .funnel-hinweis { font-size: 14px; } }
/* Funnel-Abschluss: Adressfelder wie in der Vorlage, nur Platzhalter, Nachricht ueber volle Breite. */
#energiecheck .funnel-adresse { gap: 16px; margin-top: 28px; }
#energiecheck .funnel-adresse input,
#energiecheck .funnel-adresse textarea {
display: block; width: 100%; margin: 0; padding: 16px 18px;
border: 1px solid #d5dbdf; border-radius: 12px; background: #fff;
color: #222; font: inherit; font-size: 16px; line-height: 1.4;
}
#energiecheck .funnel-adresse textarea { grid-column: 1 / -1; min-height: 88px; resize: vertical; }
#energiecheck .funnel-adresse input:focus,
#energiecheck .funnel-adresse textarea:focus { outline: 2px solid #9d8322; outline-offset: 2px; }
/* Einheitliche Kachelgroesse am Desktop: alle Fragen wie die Zusatzfrage (176 px). */
@media (min-width: 960px) {
#energiecheck .funnel-step .funnel-choices { grid-template-columns: repeat(4, minmax(0, 176px)) !important; }
#energiecheck .funnel-step[data-step="2"] .funnel-choices { grid-template-columns: repeat(3, minmax(0, 176px)) !important; }
}
@media (min-width: 960px) {
#energiecheck .funnel-step[data-step="pv-zusatz"] .funnel-choices,
#energiecheck .funnel-step[data-step="wp-zusatz"] .funnel-choices { gap: 18px !important; }
}
/* Keine einzelnen Woerter allein in der letzten Zeile (Hinweise, Fragen, Einleitung). */
#energiecheck .funnel-hinweis { max-width: 720px; text-wrap: balance; }
#energiecheck .funnel-step h3,
#energiecheck .funnel-main-title { text-wrap: balance; }
#energiecheck .funnel-lead { text-wrap: pretty; }
@media (min-width: 651px) {
#energiecheck .funnel-panel > .funnel-advisor { margin-top: 56px !important; }
}
#energiecheck .funnel-advisor .advisor-zeile { text-wrap: balance; }
/* Wohnflaechen-Frage (Waermepumpe): drei Kacheln wie die Eigentumsfrage. */
@media (min-width: 651px) {
#energiecheck .funnel-step[data-step="wp-flaeche"] .funnel-choices { grid-template-columns: repeat(3, minmax(0, 188px)) !important; }
}
@media (min-width: 960px) {
#energiecheck .funnel-step[data-step="wp-flaeche"] .funnel-choices { grid-template-columns: repeat(3, minmax(0, 176px)) !important; }
}
/* Einblicke: Projektfotos als seitlich scrollbare Galerie (vor den FAQ). */
.einblicke { background: #f3f7fa; padding: 110px 0 100px; }
.einblicke-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.einblicke-insta { display: inline-flex; align-items: center; gap: 22px; padding-bottom: 8px; border-bottom: 1px solid #c9d1d5; font-size: 15px; color: #2a3236; white-space: nowrap; }
.einblicke-insta:hover { border-color: #9d8322; color: #9d8322; }
.einblicke-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #9d8322 transparent; padding-bottom: 18px; }
.einblicke-track:focus-visible { outline: 2px solid #9d8322; outline-offset: 4px; }
.einblick { position: relative; flex: 0 0 auto; height: 540px; margin: 0; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background: #dde4e8; }
.einblick img { display: block; height: 100%; width: auto; max-width: none; object-fit: cover; }
.einblick::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(10, 20, 26, .72)); pointer-events: none; }
.einblick figcaption { position: absolute; z-index: 1; left: 32px; right: 28px; bottom: 30px; color: #fff; }
.einblick figcaption span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .16em; }
.einblick figcaption h3 { margin: 10px 0 0; font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.einblicke-controls { margin-top: 10px; }
@media (max-width: 700px) {
.einblicke { padding: 70px 0 60px; }
.einblicke-kopf { display: block; margin-bottom: 30px; }
.einblicke-insta { margin-top: 22px; }
.einblick { width: calc(var(--vw) * 82); height: 420px; }
.einblick img { width: 100%; }
.einblick figcaption { left: 22px; right: 20px; bottom: 22px; }
.einblick figcaption h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .einblicke-track { scroll-behavior: auto; } }
/* Kacheln schweben beim Ueberfahren bzw. Antippen sanft nach oben (ohne Schatten).
Gilt fuer Kundenstimmen, Loesungen, weitere Leistungen und Einblicke. */
.review-card, .solution-card, .more-card, .einblick {
transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}
@media (hover: hover) {
.review-card:hover, .solution-card:hover, .more-card:hover, .einblick:hover { transform: translateY(-10px); }
}
.review-card:active, .solution-card:active, .more-card:active, .einblick:active,
.solution-card.is-open, .more-card.is-open,
.more-card:focus-visible, .solution-card:focus-within { transform: translateY(-10px); }
.einblick img { transition: transform .65s ease; }
.einblick:hover img, .einblick:active img { transform: scale(1.035); }
/* Platz nach oben in den seitlich scrollbaren Leisten, damit nichts abgeschnitten wird. */
.more-track { padding-top: 14px; margin-top: -14px; }
.einblicke-track { padding-top: 14px; margin-top: -14px; }
@media (prefers-reduced-motion: reduce) {
.review-card, .solution-card, .more-card, .einblick, .einblick img { transition: none; transform: none !important; }
}
@media (max-width: 600px) {
#kundenstimmen .reviews-grid { padding-top: 14px; margin-top: -14px; }
}
/* Vision-Bild schwebt ebenso. */
.vision-heading-image { transition: transform .55s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) { .vision-heading-image:hover { transform: translateY(-10px); } }
.vision-heading-image:active { transform: translateY(-10px); }
@media (prefers-reduced-motion: reduce) { .vision-heading-image { transition: none; transform: none !important; } }
/* Runde Ecken beim Schweben erhalten: Browser verlieren waehrend Transform +
Bild-Zoom kurz das Abrunden ueber overflow, dann ragt das dunkle Overlay
eckig heraus. clip-path schneidet die Kachel immer auf ihre Form zu. */
.more-card { clip-path: inset(0 round 15px); isolation: isolate; }
.solution-card { clip-path: inset(0 round 20px); isolation: isolate; }
.einblick { clip-path: inset(0 round 16px); isolation: isolate; }
/* Gewerbe: Abschluss-Sektion der Startseite mit Drohnenvideo in Schleife. */
.gewerbe { background: #fff; padding: 110px 0 120px; }
.gewerbe-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: end; margin-bottom: 48px; }
.gewerbe-text p { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: #5d666c; max-width: 520px; }
.gewerbe-video { margin: 0; border-radius: 20px; overflow: hidden; clip-path: inset(0 round 20px); background: #1b2328; aspect-ratio: 16 / 9; }
.gewerbe-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 820px) {
.gewerbe { padding: 70px 0 80px; }
.gewerbe-kopf { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
.gewerbe-video { border-radius: 16px; clip-path: inset(0 round 16px); aspect-ratio: 4 / 3; }
}
/* Partner: zentrierte Ueberschrift in einem Rahmen aus Punkten, darunter Logos. */
.partner { background: #fff; padding: 40px 0 110px; }
.partner-rahmen { position: relative; padding: 110px 40px 120px; text-align: center; }
.partner-rahmen::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(circle, #c5cdd3 2.4px, transparent 2.9px) 0 0 / 48px 48px;
-webkit-mask: linear-gradient(#000 0 0) top / 100% 72px no-repeat, linear-gradient(#000 0 0) bottom / 100% 72px no-repeat,
linear-gradient(#000 0 0) left / 72px 100% no-repeat, linear-gradient(#000 0 0) right / 72px 100% no-repeat;
mask: linear-gradient(#000 0 0) top / 100% 72px no-repeat, linear-gradient(#000 0 0) bottom / 100% 72px no-repeat,
linear-gradient(#000 0 0) left / 72px 100% no-repeat, linear-gradient(#000 0 0) right / 72px 100% no-repeat; }
.partner-rahmen > * { position: relative; }
.partner-rahmen h2 { margin: 18px auto 0; max-width: none; text-wrap: balance; }
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 64px; margin-top: 56px; }
.partner-logos:empty { display: none; }
.partner-logos img { display: block; height: 52px; width: auto; max-width: 170px; object-fit: contain; }
@media (max-width: 700px) {
.partner { padding: 20px 0 70px; }
.partner-rahmen { padding: 76px 22px 84px; }
.partner-rahmen::before { background-size: 32px 32px; -webkit-mask-size: 100% 48px, 100% 48px, 48px 100%, 48px 100%; mask-size: 100% 48px, 100% 48px, 48px 100%, 48px 100%; }
.partner-logos { gap: 28px 36px; margin-top: 40px; }
.partner-logos img { height: 40px; max-width: 130px; }
}
/* Partner-Laufband auf der Startseite: Logos laufen langsam endlos durch. */
.partner-band { margin-top: 52px; overflow: hidden;
-webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.partner-laufband { display: flex; align-items: center; gap: 88px; width: max-content; margin: 0; padding: 6px 0; list-style: none;
animation: partner-lauf 70s linear infinite; }
.partner-laufband li { flex: 0 0 auto; }
.partner-laufband img { display: block; height: 54px; width: auto; max-width: 260px; object-fit: contain; }
.partner-band:hover .partner-laufband { animation-play-state: paused; }
@keyframes partner-lauf { to { transform: translateX(calc(-50% - 44px)); } }
.partner-button { margin-top: 48px; }
@media (max-width: 700px) {
.partner-laufband { gap: 44px; animation-duration: 55s; }
@keyframes partner-lauf { to { transform: translateX(calc(-50% - 22px)); } }
.partner-laufband img { height: 40px; max-width: 190px; }
.partner-button { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.partner-band { -webkit-mask: none; mask: none; }
.partner-laufband { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 28px 44px; }
.partner-laufband li[aria-hidden] { display: none; }
}
/* Partner-Sektion zweispaltig: Text links, Logo-Laufband rechts auf Titelhoehe. */
.partner-rahmen { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; text-align: left; padding: 96px 72px 100px; }
.partner-rahmen h2 { margin: 16px 0 0; max-width: none; }
.partner-text .partner-button { margin-top: 32px; }
.partner-band { margin-top: 0; }
.partner-laufband { gap: 56px; animation-duration: 60s; }
@keyframes partner-lauf { to { transform: translateX(calc(-50% - 28px)); } }
.partner-laufband img { height: 34px; max-width: 160px; }
@media (max-width: 900px) {
.partner-rahmen { grid-template-columns: 1fr; gap: 36px; padding: 76px 32px 84px; }
.partner-band { order: 2; }
}
@media (max-width: 700px) {
.partner-rahmen { padding: 64px 22px 72px; }
.partner-laufband { gap: 40px; }
@keyframes partner-lauf { to { transform: translateX(calc(-50% - 20px)); } }
.partner-laufband img { height: 28px; max-width: 130px; }
}
@media (min-width: 1100px) {
.partner-rahmen { grid-template-columns: auto minmax(0, 1fr); gap: 64px; }
}
.partner-rahmen { row-gap: 32px; }
.partner-rahmen > .partner-button { grid-column: 1; justify-self: start; margin-top: 0; }
@media (max-width: 900px) { .partner-rahmen > .partner-button { grid-column: auto; order: 3; } }
/* Smart-Home-Steuerung (Symbol ueber dem Haus) dezenter: hell, kleiner, kaum Leuchten. */
.energy-controller .controller-aura { fill: #e0c27a; opacity: .14; filter: blur(16px); animation: none; }
.energy-controller .controller-shadow { opacity: .06; filter: blur(10px); }
.energy-controller .controller-glass { fill: #fbf8f1; stroke: #e6d7ab; stroke-width: 1; }
.energy-controller .controller-rim { stroke: #dccb92; stroke-width: 1; opacity: .7; }
.energy-controller .controller-core { opacity: .18; animation: none; }
.energy-controller .controller-ring { stroke: #d6bd6e; stroke-width: 1; opacity: .55; filter: none; }
.energy-controller .controller-device { fill: #fff; stroke: #dcc278; stroke-width: 1.2; filter: none; }
.energy-controller .controller-symbol { stroke: #a88c34; stroke-width: 1.6; }
.energy-controller .controller-led { fill: #e2bb4c; filter: none; animation: none; }
/* Partner-Sektion ohne Punkte-Rahmen, Abstaende wie die uebrigen Sektionen. */
.partner { padding: 110px 0; }
.partner-rahmen::before { content: none; }
.partner-rahmen { padding: 0; }
@media (max-width: 900px) { .partner { padding: 80px 0; } .partner-rahmen { padding: 0; } }
@media (max-width: 700px) { .partner { padding: 64px 0; } .partner-rahmen { padding: 0; } }
/* Partner-Laufband: Logos etwas groesser. */
.partner-laufband img { height: 42px; max-width: 200px; }
@media (max-width: 700px) { .partner-laufband img { height: 32px; max-width: 150px; } }
/* Partner-Sektion zentriert untereinander: Eyebrow, Titel, Logo-Laufband, Button. */
.partner-rahmen, .partner-rahmen:is(*) { grid-template-columns: minmax(0, 1fr) !important; justify-items: center; text-align: center; row-gap: 44px; }
.partner-rahmen h2 { margin-left: auto; margin-right: auto; }
.partner-rahmen .partner-band { width: 100%; }
.partner-rahmen > .partner-button { grid-column: auto; justify-self: center; }
@media (max-width: 700px) { .partner-rahmen { row-gap: 32px; } }
/* Vision-Vorteile: Ueberschriften immer genau zweizeilig (Umbruch per
). */
.vision-benefits h3 { white-space: nowrap; }
/* Popup mobil: Erklaersatz ausblenden, damit alles ohne Scrollen passt. */
@media (max-width: 600px) { #aktion-dialog .promo-text, #foerder-dialog .promo-text { display: none; } }
/* Ablauf als Zeitstrahl (nach Vorbild merdic-bau.de): Nummern mittig auf einer
Linie, Inhalte abwechselnd links/rechts; aktiver Schritt dunkel, Linie gold. */
.ablauf-zeitstrahl { list-style: none; margin: 72px auto 0; padding: 0; max-width: 1040px; }
.ablauf-schritt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); align-items: start; min-height: 230px; }
.ablauf-nummer { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; padding: 0 0 18px; background: #fff; font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: #1c2428; transition: color .5s ease; }
.ablauf-schritt::before { content: ""; position: absolute; left: 50%; top: 70px; bottom: 10px; width: 2px; margin-left: -1px; background: #e7eaec; }
.ablauf-schritt::after { content: ""; position: absolute; left: 50%; top: 70px; bottom: 10px; width: 2px; margin-left: -1px; background: #9d8322; transform-origin: top; transform: scaleY(1); transition: transform .8s ease; }
.ablauf-inhalt { grid-row: 1; padding-top: 74px; transition: opacity .6s ease, transform .6s ease; }
.ablauf-schritt:nth-child(odd) .ablauf-inhalt { grid-column: 1; text-align: right; padding-right: 8px; }
.ablauf-schritt:nth-child(even) .ablauf-inhalt { grid-column: 3; padding-left: 8px; }
.ablauf-inhalt h3 { margin: 0 0 12px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: #1c2428; }
.ablauf-inhalt p { margin: 0; max-width: 380px; font-size: 16px; line-height: 1.7; color: #5d666c; }
.ablauf-schritt:nth-child(odd) .ablauf-inhalt p { margin-left: auto; }
/* Animierter Zustand: noch nicht erreichte Schritte blass */
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt .ablauf-nummer { color: #d3d8db; }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt .ablauf-inhalt { opacity: .18; transform: translateY(16px); }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt::after { transform: scaleY(0); }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt.ist-erreicht .ablauf-nummer { color: #1c2428; }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt.ist-aktiv .ablauf-nummer { color: #9d8322; }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt.ist-erreicht .ablauf-inhalt { opacity: 1; transform: none; }
.ablauf-zeitstrahl.ist-animiert .ablauf-schritt.ist-erreicht::after { transform: scaleY(1); }
/* Pfeil vom letzten Schritt zum Formular */
.ablauf-pfeil { display: flex; flex-direction: column; align-items: center; margin: -10px auto 0; padding-bottom: 36px; color: #9d8322; }
.ablauf-pfeil-linie { display: block; width: 2px; height: 90px; background: #e7eaec; position: relative; overflow: hidden; }
.ablauf-pfeil-linie::after { content: ""; position: absolute; inset: 0; background: #9d8322; transform-origin: top; transform: scaleY(0); transition: transform .8s ease .2s; }
.ablauf-pfeil.ist-erreicht .ablauf-pfeil-linie::after { transform: scaleY(1); }
.ablauf-pfeil svg { display: block; margin-top: -2px; opacity: .25; transition: opacity .5s ease .7s; }
.ablauf-pfeil.ist-erreicht svg { opacity: 1; }
/* Mobil: Linie links, Nummer und Inhalt untereinander rechts davon */
@media (max-width: 760px) {
.ablauf-zeitstrahl { margin-top: 44px; }
.ablauf-schritt { grid-template-columns: 64px minmax(0, 1fr); min-height: 0; padding-bottom: 40px; }
.ablauf-nummer { grid-column: 1; justify-self: start; font-size: 34px; padding-bottom: 10px; }
.ablauf-schritt::before, .ablauf-schritt::after { left: 20px; top: 46px; bottom: 6px; }
.ablauf-schritt:nth-child(odd) .ablauf-inhalt, .ablauf-schritt:nth-child(even) .ablauf-inhalt { grid-column: 2; text-align: left; padding: 2px 0 0; }
.ablauf-schritt:nth-child(odd) .ablauf-inhalt p { margin-left: 0; }
.ablauf-inhalt h3 { font-size: 21px; }
.ablauf-pfeil { align-items: flex-start; padding-left: 9px; margin-top: -30px; }
.ablauf-pfeil-linie { height: 60px; margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.ablauf-nummer, .ablauf-inhalt, .ablauf-schritt::after, .ablauf-pfeil-linie::after, .ablauf-pfeil svg { transition: none; }
}
/* Mobil: kein Pfeil unter dem Ablauf. */
@media (max-width: 760px) { .ablauf-pfeil { display: none; } }
/* Mobil: Berater-Bild mit Google-Badge unter dem Kontaktformular. */
@media (max-width: 850px) { #kontakt .contact-energy-photo { order: 2; margin-top: 12px; } }
/* Mobil: deutlich mehr Abstand zwischen Ablauf und Kontaktformular. */
@media (max-width: 760px) {
.ablauf-zeitstrahl .ablauf-schritt:last-child { padding-bottom: 0; }
.ablauf-zeitstrahl .ablauf-schritt:last-child::before, .ablauf-zeitstrahl .ablauf-schritt:last-child::after { bottom: 0; }
#ablauf #kontakt { padding-top: 96px; }
}
/* Mobil: Pfeilspitze direkt am Ende der goldenen Linie unter Schritt 04. */
@media (max-width: 760px) {
.ablauf-pfeil { display: block; margin: -2px 0 0; padding: 0 0 0 var(--ablauf-pfeil-x, 28px); }
.ablauf-pfeil .ablauf-pfeil-linie { display: none; }
.ablauf-pfeil svg { margin: 0; }
}
/* Loesungskarten: beim Verlassen schnell zurueck (0,18 s), beim Hovern weiter weich. */
.solution-card .card-image::before, .solution-card .card-image::after { transition: opacity .06s linear, background .06s linear; }
.solution-card .card-body p, .solution-card .circle-link { transition: opacity .05s linear, transform .05s linear, visibility .05s; }
@media (hover: hover) {
.solution-card:hover .card-image::before, .solution-card:hover .card-image::after { transition-duration: .45s; }
.solution-card:hover .card-body p, .solution-card:hover .circle-link { transition-duration: .3s; }
}
/* Smart-Home-Handy groesser: auf Tablet/kleinem Laptop eigene Spalte statt 360 px,
am Desktop ueber die volle halbe Breite. */
@media (min-width: 601px) and (max-width: 1100px) {
#smart-home .smart-home-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; }
#smart-home .smart-home-details .smart-phone-demo { max-width: none; width: 100%; }
}
@media (min-width: 1101px) {
#smart-home .smart-home-details { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#smart-home .smart-home-details .smart-phone-demo { max-width: none; width: 100%; }
}
/* Einheitliche Buttons (Massstab: "Beratung starten" im Funnel):
52 px hoch, mind. 220 px breit, 13 px / 550. Der kleine Header-Button bleibt. */
:root[data-theme] body a.button.solid:not(.header-cta):not(.nav-cta),
:root[data-theme] body button.button.solid,
:root[data-theme] body .hero .button.light:not(.header-cta),
:root[data-theme] body .promo-cta {
display: inline-flex !important; align-items: center; justify-content: center; gap: 10px;
min-height: 62px !important; min-width: 220px; padding: 0 32px !important;
font-size: 13px !important; font-weight: 550 !important; line-height: 1.2 !important;
box-sizing: border-box;
}
:root[data-theme] body .promo-phone { min-height: 62px; padding-top: 0 !important; padding-bottom: 0 !important; font-size: 13px !important; }
@media (max-width: 600px) {
:root[data-theme] body a.button.solid:not(.header-cta):not(.nav-cta),
:root[data-theme] body button.button.solid,
:root[data-theme] body .promo-cta { min-height: 62px !important; font-size: 13px !important; }
}
/* Funnel-Kacheln: Bilder aller Loesungen auf gleicher Hoehe, Beschriftung darunter. */
#energiecheck .funnel-choices { align-items: start !important; }
/* Beraterin wieder ohne weissen Kasten. */
#energiecheck .funnel-panel > .funnel-advisor { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
/* Header-Button wie alle anderen Buttons (62 px, 13 px, mind. 220 px); Telefon-Pille gleich hoch. */
@media (min-width: 601px) {
:root[data-theme] body .site-header .header-cta {
align-items: center; justify-content: center;
min-height: 62px !important; min-width: 220px; padding: 0 32px !important;
font-size: 13px !important; font-weight: 550 !important; line-height: 1.2 !important; box-sizing: border-box;
}
:root[data-theme] body .site-header .header-phone { min-height: 62px; box-sizing: border-box; }
}
/* Loesungen: nur noch die Ueberschrift, kein Einleitungstext daneben. */
#loesungen.intro { display: block; }
#loesungen.intro { padding-bottom: 56px; }
@media (max-width: 700px) { #loesungen.intro { padding-bottom: 32px; } }
/* Hero: Google-Badge zweizeilig – G links, oben "4,9 ★★★★★", darunter Kundenzahl. */
.hero .hero-google { display: grid !important; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; justify-content: start; }
.hero .hero-google .google-letter { grid-row: 1 / span 2; font-size: 52px !important; line-height: 1; }
.hero .hero-google .hero-google-zeile { display: flex; align-items: center; gap: 12px; }
.hero .hero-google .hero-google-zeile strong { font-size: 24px; font-weight: 600; color: #fff; }
.hero .hero-google .google-review-stars { font-size: 24px; letter-spacing: 3px; color: #f5b82e; }
.hero .hero-google .hero-google-sub { font-size: 15px; color: rgba(255, 255, 255, .9); white-space: nowrap; }
@media (max-width: 600px) {
.hero .hero-google .google-letter { font-size: 44px !important; }
.hero .hero-google .hero-google-zeile strong, .hero .hero-google .google-review-stars { font-size: 20px; }
.hero .hero-google .hero-google-sub { font-size: 14px; }
}
/* Kundenstimmen im Google-Stil: zentrierter Kopf, Bewertungszeile, gleich hohe Karten
mit Avatar, Name, Leistung und G-Symbol oben, darunter Sterne und Zitat. */
#kundenstimmen .reviews-heading { text-align: center; }
#kundenstimmen .reviews-heading h2 { margin-left: auto; margin-right: auto; }
#kundenstimmen .reviews-sub { margin: 18px auto 0; max-width: 620px; font-size: 17px; line-height: 1.6; color: #5d666c; }
#kundenstimmen .reviews-summary { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 36px auto 52px; }
#kundenstimmen .reviews-summary .summary-g { font-size: 40px !important; line-height: 1; }
#kundenstimmen .reviews-summary strong { font-size: 22px; font-weight: 600; color: #1c2428; }
#kundenstimmen .review-stars { color: #f5b82e !important; letter-spacing: 3px; font-size: 20px; }
#kundenstimmen .reviews-summary-text { font-size: 16px; color: #2a3236; }
#kundenstimmen .reviews-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 24px !important; }
#kundenstimmen .review-card, #kundenstimmen .review-card:nth-child(2) { display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 30px !important; border: 1px solid #e6eaec; border-radius: 18px; background: #fff; }
#kundenstimmen .review-kopf { display: flex; align-items: center; gap: 14px; }
#kundenstimmen .review-kopf .review-avatar { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff !important; font-size: 20px; font-weight: 600; }
#kundenstimmen .review-kopf figcaption { display: grid; gap: 2px; min-width: 0; margin: 0; }
#kundenstimmen .review-kopf figcaption strong { font-size: 17px; font-weight: 600; color: #1c2428; }
#kundenstimmen .review-kopf figcaption span { font-size: 14px; color: #7a8388; }
#kundenstimmen .review-kopf .review-g { margin-left: auto; font-size: 28px !important; line-height: 1; }
#kundenstimmen .review-card blockquote { margin: 0; font-size: 16px; line-height: 1.75; color: #2a3236; }
@media (max-width: 900px) { #kundenstimmen .reviews-grid { grid-template-columns: 1fr !important; } }
@media (max-width: 600px) {
#kundenstimmen .reviews-summary { margin: 26px auto 34px; }
#kundenstimmen .reviews-summary .summary-g { font-size: 34px !important; }
#kundenstimmen .review-card, #kundenstimmen .review-card:nth-child(2) { padding: 24px !important; }
}
@media (min-width: 700px) { #kundenstimmen .reviews-heading h2 { max-width: none; white-space: nowrap; } }
/* Mobil: CTA-Kachel "Starte jetzt dein Energieprojekt" ueber die volle Breite,
ohne beigen Rand und ohne Rundung. */
@media (max-width: 700px) {
:root[data-theme] body .site-footer { padding-top: 0 !important; }
:root[data-theme] body .site-footer .footer-offer { width: 100% !important; max-width: none !important; margin: 0 0 55px !important; border-radius: 0 !important; clip-path: none !important; overflow: hidden; }
:root[data-theme] body .site-footer .footer-offer-copy { padding: 44px 24px 40px !important; }
:root[data-theme] body .site-footer .footer-offer-visual, :root[data-theme] body .site-footer .footer-offer-visual img { border-radius: 0 !important; }
}
/* Google-Badge unter dem Berater: zweizeilig wie im Hero, auf hellem Grund. */
#kontakt .google-zweizeilig { display: grid !important; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: center; justify-content: center; width: fit-content; margin: 18px auto 0 !important; }
#kontakt .google-zweizeilig .google-letter { grid-row: 1 / span 2; font-size: 52px !important; line-height: 1; }
#kontakt .google-zweizeilig .google-zeile { display: flex; align-items: center; gap: 12px; }
#kontakt .google-zweizeilig .google-zeile strong { font-size: 24px; font-weight: 600; color: #1c2428; }
#kontakt .google-zweizeilig .google-review-stars { font-size: 24px; letter-spacing: 3px; color: #f5b82e !important; }
#kontakt .google-zweizeilig .google-sub { font-size: 15px; color: #2a3236; white-space: nowrap; }
@media (max-width: 600px) {
#kontakt .google-zweizeilig .google-letter { font-size: 44px !important; }
#kontakt .google-zweizeilig .google-zeile strong, #kontakt .google-zweizeilig .google-review-stars { font-size: 20px; }
#kontakt .google-zweizeilig .google-sub { font-size: 14px; }
}
/* Touch-Geraete: Nach dem Zuklappen sofort wieder dunkel. Auf dem Handy bleibt
:hover/:focus nach dem Antippen haengen - massgeblich ist nur .is-open. */
@media (hover: none) {
.solution-card:not(.is-open):hover .card-image::before,
.solution-card:not(.is-open):focus-within .card-image::before { opacity: 1 !important; }
.solution-card:not(.is-open):hover .card-image::after,
.solution-card:not(.is-open):focus-within .card-image::after { opacity: 0 !important; }
.solution-card:not(.is-open):hover .card-body p,
.solution-card:not(.is-open):focus-within .card-body p,
.solution-card:not(.is-open):hover .circle-link,
.solution-card:not(.is-open):focus-within .circle-link { opacity: 0 !important; visibility: hidden !important; transform: translateY(16px) !important; }
.solution-card:not(.is-open):hover .card-image img { transform: none !important; }
}
/* Mobil: Jenny-Zeile als Block mittig zentriert. */
@media (max-width: 650px) {
#energiecheck .funnel-panel > .funnel-advisor { width: fit-content !important; max-width: 100%; margin-left: auto !important; margin-right: auto !important; justify-content: center; }
}
@media (max-width: 650px) {
/* Foto neben dem Text, die ganze Gruppe mittig. */
#energiecheck .funnel-panel > .funnel-advisor { flex-direction: row; align-items: center; gap: 12px !important; text-align: left; }
#energiecheck .funnel-advisor > div { max-width: 230px; text-align: left; }
}
/* Touch: Loesungskarten oeffnen und schliessen im selben Tempo wie die Kacheln
bei "Weitere Leistungen" (0,3 s, ohne Verzoegerung). */
@media (hover: none) {
.solution-card .card-image::before, .solution-card .card-image::after,
.solution-card .card-body p, .solution-card .circle-link {
transition: opacity .3s ease, transform .3s ease, visibility .3s, background .3s ease !important;
transition-delay: 0s !important;
}
}
/* ===================== Photovoltaik-Seite =====================
Neue Bausteine der Unterseite. Schrift, Eyebrows, H2, Buttons, Abstaende und
Animationen kommen aus den Regeln der Startseite; hier nur das Layout. */
.funnel-choice[hidden] { display: none !important; }
@media (min-width: 651px) {
#energiecheck .funnel-step .funnel-choices.drei-kacheln { grid-template-columns: repeat(3, minmax(0, 188px)) !important; }
}
@media (min-width: 960px) {
#energiecheck .funnel-step .funnel-choices.drei-kacheln { grid-template-columns: repeat(3, minmax(0, 176px)) !important; }
}
#energiecheck .drei-kacheln .choice-content strong { text-wrap: balance; }
@media (min-width: 701px) { .pv-seite .more-services { padding-bottom: 90px; } }
/* Foerderung: Akkordeon links, Bild rechts */
.pv-foerderung { background: #f3f7fa; color: #222; }
.pv-foerder-kopf { margin-bottom: 50px; }
.pv-foerder-kopf h2 { margin-bottom: 0; }
.pv-foerder-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 70px; align-items: stretch; }
.pv-tab { border-top: 1px solid var(--line); }
.pv-tab:last-of-type { border-bottom: 1px solid var(--line); }
.pv-tab-knopf { display: flex; align-items: flex-start; gap: 20px; width: 100%; padding: 24px 0; background: none; color: #222; text-align: left; }
.pv-tab-nummer { padding-top: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gold); }
.pv-tab-text { flex: 1; min-width: 0; }
.pv-tab-text strong { display: block; font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -.03em; transition: color .2s; }
.pv-tab-text > span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: #5d666c; }
.pv-tab-zeichen { position: relative; flex: 0 0 18px; width: 18px; height: 18px; margin-top: 8px; color: #5d666c; }
.pv-tab-zeichen::before, .pv-tab-zeichen::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .25s ease; }
.pv-tab-zeichen::after { transform: rotate(90deg); }
.pv-tab.ist-offen .pv-tab-zeichen::after { transform: rotate(0); }
.pv-tab.ist-offen .pv-tab-text strong, .pv-tab.ist-offen .pv-tab-zeichen { color: var(--gold); }
.pv-tab-knopf:hover .pv-tab-text strong { color: var(--gold); }
.pv-tab-inhalt { padding: 0 38px 26px 40px; }
.pv-tab-inhalt p { font-size: 16px; line-height: 1.75; color: #5d666c; }
.pv-tab-inhalt .pv-tab-quelle { margin-top: 10px; font-size: 13px; color: #8a9296; }
.pv-foerder-tabs > .button { margin-top: 34px; }
.pv-foerder-stand { margin-top: 16px; font-size: 13px; line-height: 1.6; color: #8a9296; }
.pv-foerder-bild { position: relative; min-height: 520px; margin: 0; border-radius: 18px; overflow: hidden; }
.pv-foerder-bild img { position: absolute; inset: 0; object-position: 58% center; }
.pv-foerder-bild::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(9, 23, 26, .72)); }
.pv-foerder-bild figcaption { position: absolute; z-index: 1; left: 34px; right: 28px; bottom: 32px; color: #fff; }
.pv-foerder-bild figcaption > span { font-size: 11px; letter-spacing: .14em; color: #ede1bb; }
.pv-foerder-bild figcaption p { margin-top: 12px; font-size: 30px; line-height: 1.25; letter-spacing: -.035em; color: #fff; }
/* Intro mit Preiskarte */
.pv-intro { background: #fff; color: #222; }
.pv-intro-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; }
.pv-intro-media { position: relative; min-height: 520px; }
.pv-intro-media > img { position: absolute; inset: 0; border-radius: 18px; }
.pv-preiskarte { position: absolute; z-index: 2; right: -60px; bottom: 64px; width: 300px; padding: 26px 28px; background: #fff; border: 1px solid #e3e7e9; border-radius: 18px; }
.pv-preiskarte > p { margin-bottom: 16px; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; color: var(--gold); }
.pv-preis-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pv-preis-zeile span { font-size: 14px; color: #5d666c; }
.pv-preis-zeile strong { font-size: 22px; font-weight: 500; letter-spacing: -.03em; white-space: nowrap; color: #222; }
.pv-preis-zeile strong.ist-gold { color: var(--gold); }
.pv-preis-balken { height: 8px; margin-bottom: 18px; border-radius: 99px; background: #eef3f6; overflow: hidden; }
.pv-preis-balken:last-child { margin-bottom: 0; }
.pv-preis-balken i { display: block; height: 100%; border-radius: inherit; background: #222; }
.pv-preis-balken i.ist-gold { background: var(--gold); }
.pv-intro-copy { padding-left: 120px; }
.pv-intro-copy h2 { margin-bottom: 26px; }
.pv-intro-copy > p:not(.eyebrow) { max-width: 540px; margin-bottom: 18px; color: #5d666c; }
.pv-intro-copy .button { margin-top: 18px; }
/* 5 Vorteile, Aufbau wie die Saeulen der Vision */
.pv-vorteile { background: #f3f7fa; color: #222; }
.pv-vorteile-kopf { max-width: 900px; margin: 0 auto 64px; text-align: center; }
.pv-vorteile-kopf h2 { margin-bottom: 22px; }
.pv-vorteile-kopf > p:last-child { max-width: 680px; margin: 0 auto; color: #5d666c; text-wrap: balance; }
.pv-vorteile-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pv-vorteile-grid article { min-width: 0; padding: 12px 26px 0; border-left: 1px solid #2223; }
.pv-vorteile-grid article:first-child { padding-left: 0; border-left: 0; }
.pv-vorteile-grid article:last-child { padding-right: 0; }
.pv-vorteile-grid svg { display: block; width: 44px; height: 44px; margin-bottom: 34px; color: var(--gold); }
.pv-vorteile-grid h3 { margin-bottom: 18px; font-size: clamp(19px, calc(var(--vw) * 1.65), 23px); font-weight: 400; line-height: 1.25; letter-spacing: -.025em; }
.pv-vorteile-grid p { font-size: 16px; line-height: 1.65; color: #61676a; text-wrap: pretty; }
.pv-vorteile-grid p a { text-decoration: underline; text-decoration-color: #c8bb8c; text-underline-offset: 3px; }
.pv-vorteile-grid p a:hover { color: var(--gold); }
.pv-vorteile-cta { display: flex; justify-content: center; margin-top: 60px; }
/* Module und Wechselrichter: Text + Bild, darunter Hersteller-Karussell */
.pv-marken { background: #fff; color: #222; overflow: hidden; }
.pv-marken-hell { background: #f3f7fa; }
.pv-marken-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.pv-marken-text h2 { margin-bottom: 26px; }
.pv-marken-text > p:not(.eyebrow) { max-width: 600px; color: #5d666c; }
.pv-marken-text > p + p { margin-top: 18px; }
.pv-marken-text strong { font-weight: 600; color: #222; }
.pv-marken-bild { margin: 0; }
.pv-marken-bild img { height: auto; max-height: 500px; object-fit: contain; }
.pv-marken-slider { margin-top: 80px; }
.pv-marken-track { display: flex; gap: 48px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pv-marken-track::-webkit-scrollbar { display: none; }
.pv-marke { flex: 0 0 calc((100% - 96px) / 3); min-width: 0; scroll-snap-align: start; }
.pv-marke-logo { display: flex; align-items: center; height: 64px; margin-bottom: 26px; padding-bottom: 22px; border-bottom: 1px solid var(--line); box-sizing: content-box; }
.pv-marke-logo img { width: auto; height: 40px; max-width: 200px; object-fit: contain; object-position: left center; }
.pv-marke h3 { margin-bottom: 14px; font-size: 26px; font-weight: 400; }
.pv-marke p { font-size: 16px; line-height: 1.7; color: #5d666c; }
.pv-marken-pfeile { margin-top: 34px; }
/* Speicher-Rechnung */
.pv-speicher { background: #f3f7fa; color: #222; }
.pv-speicher-kopf { margin-bottom: 56px; }
.pv-speicher-kopf h2 { margin-bottom: 0; }
.pv-speicher-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 60px; align-items: start; }
.pv-diagramm { --hoehe: 280px; margin: 0; }
.pv-diagramm-legende { display: flex; gap: 20px; margin-bottom: 28px; font-size: 13px; color: #5d666c; }
.pv-diagramm-legende span { display: inline-flex; align-items: center; gap: 8px; }
.pv-diagramm-legende i { width: 12px; height: 12px; border-radius: 3px; }
.pv-diagramm .ist-kosten { background: #222; }
.pv-diagramm .ist-ersparnis { background: var(--gold); }
.pv-diagramm-flaeche { display: flex; }
.pv-diagramm-achse { position: relative; flex: 0 0 64px; height: var(--hoehe); border-right: 1px solid #c9d3d8; font-size: 12px; color: #8a8f92; }
.pv-diagramm-achse span { position: absolute; right: 12px; transform: translateY(-50%); white-space: nowrap; }
.pv-diagramm-achse span:nth-child(1) { top: 0; }
.pv-diagramm-achse span:nth-child(2) { top: 25%; }
.pv-diagramm-achse span:nth-child(3) { top: 50%; }
.pv-diagramm-achse span:nth-child(4) { top: 75%; }
.pv-diagramm-achse span:nth-child(5) { top: 100%; }
.pv-diagramm-saeulen { position: relative; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-left: 16px; }
.pv-diagramm-saeulen::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--hoehe); background: repeating-linear-gradient(to bottom, #d6dee2 0 1px, transparent 1px 25%); background-size: 100% 100%; }
.pv-saeule { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; }
.pv-saeule-balken { display: flex; flex-direction: column; justify-content: flex-end; width: 100%; max-width: 84px; height: var(--hoehe); margin-bottom: 12px; }
.pv-saeule-balken span { display: block; width: 100%; }
.pv-saeule-balken span:first-child { border-radius: 8px 8px 0 0; }
.pv-saeule-balken .ist-ersparnis + .ist-kosten { margin-top: 2px; }
.pv-saeule strong { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pv-saeule small { font-size: 13px; color: #5d666c; }
.pv-diagramm figcaption { margin-top: 24px; font-size: 12px; line-height: 1.6; color: #8a8f92; }
.pv-speicher-box { padding: 32px 30px; background: #fff; border-radius: 18px; }
.pv-speicher-box .pv-speicher-label { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; color: var(--gold); }
.pv-speicher-box p:not(.pv-speicher-label) { color: #5d666c; }
.pv-speicher-box .button { margin-top: 26px; }
@media (max-width: 1100px) {
.pv-intro-copy { padding-left: 90px; }
.pv-preiskarte { right: -45px; }
.pv-vorteile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 48px; }
.pv-vorteile-grid article:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.pv-vorteile-grid article:nth-child(3n) { padding-right: 0; }
}
@media (max-width: 1000px) {
.pv-foerder-layout, .pv-marken-kopf, .pv-speicher-layout { grid-template-columns: 1fr; gap: 40px; }
.pv-foerder-bild { min-height: 440px; }
.pv-marken-bild img { max-height: 380px; }
.pv-marke { flex-basis: calc((100% - 48px) / 2); }
.pv-speicher-box { max-width: 560px; }
}
@media (max-width: 900px) {
.pv-intro-grid { grid-template-columns: 1fr; }
.pv-intro-media { min-height: 440px; }
.pv-preiskarte { right: 20px; bottom: 20px; }
.pv-intro-copy { padding: 50px 0 0; }
}
@media (max-width: 700px) {
.pv-foerder-kopf, .pv-speicher-kopf { margin-bottom: 34px; }
.pv-tab-knopf { gap: 14px; padding: 20px 0; }
.pv-tab-text strong { font-size: 21px; }
.pv-tab-inhalt { padding: 0 0 22px 34px; }
.pv-foerder-tabs > .button { width: 100%; }
.pv-foerder-bild { min-height: 340px; }
.pv-foerder-bild figcaption { left: 22px; right: 22px; bottom: 24px; }
.pv-foerder-bild figcaption p { font-size: 24px; }
.pv-intro-media { min-height: 360px; }
.pv-preiskarte { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 20px 22px; }
.pv-intro-copy { padding-top: 40px; }
.pv-intro-copy .button, .pv-vorteile-cta .button, .pv-speicher-box .button { width: 100%; }
.pv-vorteile-kopf { margin-bottom: 40px; text-align: left; }
.pv-vorteile-kopf > p:last-child { margin: 0; }
.pv-vorteile-grid { grid-template-columns: 1fr; row-gap: 30px; }
.pv-vorteile-grid article, .pv-vorteile-grid article:nth-child(3n+1) { padding: 30px 0 0; border-left: 0; border-top: 1px solid #2223; }
.pv-vorteile-grid article:first-child { padding-top: 0; border-top: 0; }
.pv-vorteile-grid svg { margin-bottom: 22px; }
.pv-vorteile-cta { margin-top: 44px; }
.pv-marken-slider { margin-top: 56px; }
.pv-marken-track { gap: 24px; }
.pv-marke { flex-basis: 82%; }
.pv-marke h3 { font-size: 23px; }
.pv-diagramm { --hoehe: 240px; }
.pv-diagramm-achse { flex-basis: 54px; font-size: 11px; }
.pv-diagramm-achse span { right: 8px; }
.pv-diagramm-saeulen { gap: 12px; padding-left: 10px; }
.pv-saeule strong { font-size: 13px; }
.pv-saeule small { font-size: 12px; }
.pv-speicher-box { padding: 26px 22px; }
}
/* PV-Seite: Erweiterungen in der Reihenfolge Speicher, Wallbox, Waermepumpe;
drei Kacheln fuellen am Desktop die volle Breite, die Pfeile entfallen dort. */
.pv-seite #more-services-track > .more-card { order: 0; }
@media (min-width: 1101px) {
.pv-seite #more-services-track > .more-card { flex: 1 1 0; }
.pv-seite .more-services .more-controls { display: none; }
}
.pv-seite .pv-foerderung { background: #fff; }
.pv-seite .pv-intro { background: #f3f7fa; }
.pv-seite .pv-vorteile { background: #fff; }
/* PV-Intro: Ueberschrift am Desktop immer in drei Zeilen (Umbrueche nur aus dem Markup). */
@media (min-width: 901px) {
#pv-intro-title { white-space: nowrap; }
.pv-intro-copy { padding-left: clamp(80px, calc(var(--vw) * 7), 85px); }
.pv-preiskarte { right: -40px; }
}
/* PV-Vorteile wie in der Vorlage: zentriert, ohne Trennlinien, kraeftigere Titel. */
#vorteile-title { white-space: nowrap; }
.pv-vorteile-grid { gap: 24px; }
.pv-vorteile-grid article,
.pv-vorteile-grid article:first-child,
.pv-vorteile-grid article:last-child,
.pv-vorteile-grid article:nth-child(n) { padding: 0; border: 0; text-align: center; }
.pv-vorteile-grid svg { width: 40px; height: 40px; margin: 0 auto 25px; }
.pv-vorteile-grid h3 { min-height: 3.9em; margin-bottom: 18px; font-size: 20px; font-weight: 550; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.pv-vorteile-grid p { font-size: 15px; line-height: 1.75; text-wrap: balance; }
.pv-vorteile-cta { margin-top: 54px; }
@media (max-width: 1100px) {
.pv-vorteile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 42px 32px; }
.pv-vorteile-grid h3 { min-height: 2.6em; font-size: 21px; }
}
@media (max-width: 900px) {
#vorteile-title { white-space: normal; }
}
@media (max-width: 760px) {
.pv-vorteile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 30px; }
.pv-vorteile-grid article:last-child { grid-column: 1 / -1; max-width: 340px; margin-inline: auto; }
.pv-vorteile-grid p { font-size: 16px; }
}
@media (max-width: 600px) {
.pv-vorteile-kopf { text-align: center; }
.pv-vorteile-kopf > p:last-child { margin: 0 auto; }
.pv-vorteile-grid { grid-template-columns: 1fr; gap: 36px; }
.pv-vorteile-grid article, .pv-vorteile-grid article:last-child { max-width: 380px; margin-inline: auto; }
.pv-vorteile-grid h3 { min-height: 0; font-size: 23px; margin-bottom: 13px; }
.pv-vorteile-grid svg { width: 36px; height: 36px; margin-bottom: 18px; }
}
@media (max-width: 700px) {
.pv-vorteile-kopf { text-align: center; }
.pv-vorteile-kopf > p:last-child { margin: 0 auto; }
}
/* Tablet: 3 + 2 Vorteile, zweite Reihe mittig. */
@media (min-width: 761px) and (max-width: 1100px) {
.pv-vorteile-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.pv-vorteile-grid article { flex: 0 0 calc((100% - 64px) / 3); }
}
/* PV-Hersteller: Pfeile oberhalb der Marken, rechtsbuendig (wie in der Vorlage). */
.pv-marken-slider { display: flex; flex-direction: column; }
.pv-marken-slider .pv-marken-pfeile { order: -1; justify-content: flex-end; margin: 0 0 28px; }
/* Foerderung: anfangs alles zugeklappt, der zuletzt gewaehlte Punkt bleibt gold.
Am Desktop endet das Bild mit der linken Spalte (Hinweis "Stand ..."). */
.pv-tab.ist-aktiv .pv-tab-text strong, .pv-tab.ist-aktiv .pv-tab-nummer { color: var(--gold); }
@media (min-width: 1001px) {
.pv-foerder-bild { min-height: 0; }
}
/* PV-Hero mobil: drei feste Zeilen "Photovoltaik in NRW: / Dein Ansprechpartner /
in der Region." - Schrift skaliert leicht mit, damit Zeile 2 auch auf kleinen Handys passt. */
@media (max-width: 600px) {
body.pv-seite .hero-copy h1 { font-size: min(33.75px, calc(var(--vw) * 8.5)) !important; }
body.pv-seite .hero-copy h1 br { display: inline !important; }
body.pv-seite .hero-copy h1 em { white-space: nowrap; }
}
/* PV-Intro einspaltig (Tablet/Handy): Bild mit Preiskarte unter dem Button. */
@media (max-width: 900px) {
.pv-intro-media { order: 2; margin-top: 44px; }
.pv-intro-copy { padding-top: 0 !important; }
}
/* PV "Erweitere deine Anlage": mobil "Erweitere deine Anlage / zum ganzheitlichen /
Energiesystem." - Schrift passt sich der Breite an, damit Zeile 1 nicht umbricht. */
@media (max-width: 600px) {
.pv-seite #more-services-title { font-size: min(36px, calc((calc(var(--vw) * 100) - 44px) / 10)) !important; }
.pv-seite #more-services-title br { display: none; }
}
/* Startseite mobil: Hero-Punkte (30 Jahre ... Handwerksstaette) ausblenden. */
@media (max-width: 600px) {
.hero-copy .hero-points { display: none !important; }
}
/* PV-Speicher mobil: zwei Zeilen "Solarstrom Tag & Nacht / nutzen. Es lohnt sich." */
@media (max-width: 600px) {
.pv-seite #speicher-title { font-size: min(36px, calc((calc(var(--vw) * 100) - 44px) / 10.2)) !important; }
}
@media (max-width: 530px) {
.pv-seite #speicher-title br { display: none; }
}
/* PV-Foerderung: "Stand Oktober 2026" bleibt zusammen; mobil ohne Trennpunkt am Zeilenende. */
.pv-kein-umbruch { white-space: nowrap; }
@media (max-width: 600px) { .pv-eyebrow-punkt { display: none; } }
/* Waermepumpen-Hinweis: Hochformat-Foto, mobil auf feste Hoehe zugeschnitten. */
@media (max-width: 820px) {
#foerder-dialog .promo-figure { height: 230px; min-height: 0; }
}
/* PV-Vorteile Desktop: Spalte 2 und 5 etwas schmaler, damit sie eine Zeile laenger
laufen und optisch zu den anderen passen. */
@media (min-width: 1201px) {
.pv-vorteile-grid article:nth-child(2) p,
.pv-vorteile-grid article:nth-child(5) p { max-width: 86%; margin-inline: auto; }
}
/* Touch: Hinweis unten auf den Loesungskarten nennt das Thema. */
@media (hover: none) { .solution-card .card-body[data-hinweis]::after { content: attr(data-hinweis); } }
/* FAQ Desktop: linke Spalte (Eyebrow, Ueberschrift, Link) bleibt beim Scrollen
durch die Fragen stehen, unterhalb des festen Headers. */
@media (min-width: 821px) {
.faq-section { align-items: start; }
.faq-section > div:first-child { position: sticky; top: 150px; }
}
/* Waermepumpen-Hinweis Desktop: Bild fuellt nur die Hoehe der Textspalte, damit
oben (bis zur Eyebrow) und unten (unter den Buttons) gleich viel Luft bleibt. */
@media (min-width: 821px) {
#foerder-dialog .promo-figure { min-height: 0; }
#foerder-dialog .promo-figure img { position: absolute; inset: 0; }
}
/* PV-Foerderung mobil: Bild ohne Text und ohne dunklen Verlauf. */
@media (max-width: 700px) {
.pv-foerder-bild figcaption { display: none !important; }
.pv-foerder-bild::after { content: none; }
}
/* Funnel-Einstieg mobil (Startseite, PV-Seite): flachere Kacheln, damit alle
Antworten auf einen Blick sichtbar sind. */
@media (max-width: 650px) {
#energiecheck[data-funnel-entry] .funnel-choices { gap: 8px !important; }
#energiecheck[data-funnel-entry] .choice-content { padding-top: 7px !important; padding-bottom: 7px !important; min-height: 0 !important; }
#energiecheck[data-funnel-entry] .choice-content img { width: 64px !important; height: 46px !important; }
}
/* Funnel-Seite mobil: alle Fragen mit denselben flachen Kacheln wie der Einstieg. */
@media (max-width: 650px) {
#energiecheck .funnel-choices { gap: 8px !important; }
#energiecheck .choice-content { padding-top: 7px !important; padding-bottom: 7px !important; min-height: 0 !important; }
#energiecheck .choice-content img { width: 64px !important; height: 46px !important; }
#energiecheck .choice-content .ownership-symbol,
#energiecheck .extras-frage { height: 46px !important; }
}
/* Komplettpaket: Ueberschrift komplett weiss, ohne goldene Hervorhebung. */
:root[data-theme] body #komplettpaket h2 span, #komplettpaket h2 span { color: #fff !important; }
/* ===================== Waermepumpen-Seite =====================
Nutzt die Bausteine der Startseite und der PV-Seite (body.pv-seite.wp-seite);
hier nur die neuen Sektionen. */
.wp-seite .wp-intro { background: #fff; }
.wp-seite .wp-foerderung { background: #f3f7fa; }
.wp-haken-liste { list-style: none; margin: 6px 0 30px; padding: 0; display: grid; gap: 16px; }
.wp-haken-liste li { display: flex; align-items: flex-start; gap: 14px; }
.wp-haken { flex: 0 0 22px; font-size: 21px; line-height: 1.15; color: #222; }
.wp-haken-liste strong { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; color: #222; }
.wp-haken-liste p { margin-top: 4px; font-size: 16px; line-height: 1.65; color: #5d666c; }
.wp-haken-kurz { gap: 10px; }
.wp-intro .pv-intro-copy .button { margin-top: 4px; }
/* Foerderung: Infografik statt Foto, transparent und ohne Verlauf */
.wp-foerder-grafik { margin: 0; align-self: center; }
.wp-foerder-grafik img { width: 100%; height: auto; object-fit: contain; }
@media (min-width: 1001px) { .wp-foerder-grafik { position: sticky; top: 140px; } .wp-foerder-grafik img { transform: scale(1.08); transform-origin: center; } }
/* Kombination mit Photovoltaik */
.wp-kombi { background: #f3f7fa; color: #222; }
.wp-kombi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: stretch; }
.wp-kombi-bild { position: relative; margin: 0; min-height: 460px; border-radius: 18px; overflow: hidden; }
.wp-kombi-bild img { position: absolute; inset: 0; }
.wp-kombi-text { display: flex; flex-direction: column; justify-content: center; }
.wp-kombi-text h2 { margin-bottom: 24px; }
.wp-kombi-text > p:not(.eyebrow) { margin-bottom: 24px; color: #5d666c; }
.wp-kombi-aktionen { display: flex; flex-wrap: wrap; gap: 14px; }
:root[data-theme] body a.button.solid.wp-umriss { background: transparent !important; color: #222 !important; border: 1.5px solid #c9d3d8 !important; }
:root[data-theme] body a.button.solid.wp-umriss:hover { border-color: #222 !important; }
/* Waermepumpenarten: Umschalter + Panel */
.wp-arten { background: #fff; color: #222; }
.wp-arten-kopf { max-width: 860px; margin: 0 auto 40px; text-align: center; }
.wp-arten-kopf h2 { margin-bottom: 22px; }
.wp-arten-kopf > p:last-child { color: #5d666c; text-wrap: balance; }
.wp-art-knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 56px; }
.wp-art-knopf { min-height: 50px; padding: 0 28px; border: 1.5px solid #dedfd9; border-radius: 999px; background: transparent; color: #222; font-size: 15px; font-weight: 550; transition: background .2s, color .2s, border-color .2s; }
.wp-art-knopf:hover { border-color: #9d8322; }
.wp-art-knopf.ist-aktiv { background: var(--action-gold, #9d8322); border-color: var(--action-gold, #9d8322); color: #fff; }
.wp-art-panel { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 56px; align-items: center; }
.wp-art-panel[hidden] { display: none; }
.wp-art-nummer { margin-bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; color: #9d8322; }
.wp-art-text h3 { margin-bottom: 16px; font-size: clamp(28px, calc(var(--vw) * 2.6), 38px); font-weight: 400; line-height: 1.12; letter-spacing: -.03em; }
.wp-art-text > p:not(.wp-art-nummer) { margin-bottom: 30px; color: #5d666c; }
.wp-art-geeignet { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 16px; margin-bottom: 32px; }
.wp-art-geeignet i { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: #9d8322; }
.wp-art-geeignet strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; }
.wp-art-geeignet p { font-size: 16px; line-height: 1.65; color: #5d666c; }
.wp-art-bild { margin: 0; }
.wp-art-bild img { width: 100%; height: auto; max-height: 560px; object-fit: contain; }
/* Kosten */
.wp-kosten { background: #f3f7fa; color: #222; }
.wp-kosten-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 80px; align-items: start; }
.wp-kosten-kopf h2 { margin-bottom: 0; }
.wp-kosten-text p { margin-bottom: 20px; color: #5d666c; }
.wp-kosten-text .button { margin-top: 12px; }
@media (min-width: 1001px) { .wp-kosten-kopf { position: sticky; top: 140px; } }
@media (max-width: 1000px) {
.wp-kombi-grid, .wp-kosten-grid { grid-template-columns: 1fr; gap: 40px; }
.wp-kombi-bild { min-height: 380px; }
.wp-art-panel { grid-template-columns: 1fr; gap: 32px; }
.wp-art-bild { order: -1; max-width: 520px; margin: 0 auto; }
}
@media (max-width: 700px) {
.wp-kombi-bild { min-height: 300px; }
.wp-kombi-aktionen .button, .wp-art-text .button, .wp-kosten-text .button { width: 100%; }
.wp-art-knoepfe { gap: 8px; margin-bottom: 36px; }
.wp-art-knopf { min-height: 44px; padding: 0 18px; font-size: 14px; }
.wp-arten-kopf { text-align: left; margin-bottom: 28px; }
.wp-haken-liste strong { font-size: 16px; }
}
/* WP-Intro: Bild ueber die volle Spaltenhoehe, Ueberschrift am Desktop in drei Zeilen. */
.wp-intro .pv-intro-grid { align-items: stretch; }
.wp-intro .pv-intro-media { min-height: 560px; }
@media (min-width: 901px) { #wp-intro-title { white-space: nowrap; } }
/* WP-Kosten: Ueberschrift, darunter normaler Fliesstext; erst der erste Absatz,
der Rest per "Mehr anzeigen". */
.wp-kosten-grid { display: block; }
.wp-kosten-kopf { position: static !important; margin-bottom: 36px; }
.wp-kosten-text { max-width: 780px; }
@media (min-width: 1001px) { #wp-kosten-title { white-space: nowrap; } }
.wp-mehr-knopf { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 28px; padding: 0 0 4px; background: none; border: 0; border-bottom: 1px solid #c9d3d8; color: #222; font-size: 15px; font-weight: 600; }
.wp-mehr-knopf::after { content: "+"; font-weight: 400; font-size: 18px; line-height: 1; }
.wp-mehr-knopf[aria-expanded="true"]::after { content: "−"; }
.wp-mehr-knopf:hover { border-color: #9d8322; }
.wp-kosten-text .button { display: flex; width: fit-content; margin-top: 0; }
/* WP-Seite: Ueberschriften ausgewogen umbrechen (kein einzelnes Wort allein). */
.wp-seite main h2 { text-wrap: balance; }
/* Zeilenumbruch nur auf dem Handy. */
br.nur-mobil { display: none; }
@media (max-width: 600px) { br.nur-mobil { display: inline; } }
@media (max-width: 360px) { .wp-seite #wp-intro-title { font-size: 31px !important; } }
/* WP-Intro mobil: die drei Vorteile als seitlich wischbare Karten. */
@media (max-width: 700px) {
.wp-intro .wp-haken-liste {
display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
margin: 8px -20px 30px; padding: 0 20px 4px; scroll-padding-left: 20px;
}
.wp-intro .wp-haken-liste::-webkit-scrollbar { display: none; }
.wp-intro .wp-haken-liste li {
flex: 0 0 78%; scroll-snap-align: start; flex-direction: column; gap: 12px;
padding: 22px 20px; border-radius: 14px; background: #f3f7fa;
}
.wp-intro .wp-haken { font-size: 20px; line-height: 1; }
}
.wp-intro .pv-intro-grid > * { min-width: 0; }
/* WP-Intro einspaltig (Tablet/Handy): Familienfoto im Querformat statt hochkant. */
@media (max-width: 900px) {
.wp-intro .pv-intro-media { min-height: 0 !important; height: 0; padding-top: 66.667%; }
}
@media (max-width: 600px) { .wp-seite #kombi-title { font-size: min(36px, calc((calc(var(--vw) * 100) - 40px) / 9.6)) !important; } }
@media (max-width: 600px) { br.nur-desktop { display: none; } }
/* WP-Arten mobil: Umschalter in einer seitlich wischbaren Reihe. */
@media (max-width: 700px) {
.wp-art-knoepfe { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-inline: -20px; padding: 2px 20px; scroll-padding-left: 20px; scroll-snap-type: x proximity; }
.wp-art-knoepfe::-webkit-scrollbar { display: none; }
.wp-art-knopf { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.wp-arten .wrap > * { min-width: 0; }
}
@media (max-width: 700px) { .wp-arten-kopf > p:last-child { display: none; } .wp-arten-kopf h2 { margin-bottom: 0; } }
/* WP-Kosten: "Mehr anzeigen" nur auf dem Handy. Ab Tablet der volle Text wie zuvor:
Ueberschrift ueber die ganze Breite, Text rechts daneben. */
.wp-mehr-knopf { display: flex; width: fit-content; }
@media (min-width: 701px) {
.wp-kosten-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 80px; }
.wp-kosten-kopf { grid-column: 1 / -1; }
.wp-kosten-text { grid-column: 2; max-width: none; }
.wp-kosten-text .wp-mehr-inhalt[hidden] { display: block; }
.wp-kosten-text .wp-mehr-knopf { display: none; }
.wp-kosten-text .button { margin-top: 12px; }
}
@media (min-width: 701px) and (max-width: 1000px) {
.wp-kosten-grid { grid-template-columns: 1fr; }
.wp-kosten-text { grid-column: 1; }
}
@media (max-width: 700px) { .wp-kosten-text .button { display: none !important; } .wp-kosten-text .wp-mehr-knopf { margin-bottom: 0; } }
/* WP-Intro: Ueberschrift auf grossen Bildschirmen etwas kleiner, damit beide Zeilen in die Spalte passen. */
@media (min-width: 1201px) { :root[data-theme] body.wp-seite #wp-intro-title { font-size: min(54px, calc(var(--vw) * 3.75)) !important; } }
/* Hoehere Spezifitaet noetig, weil die globale Button-Regel display mit !important setzt. */
@media (max-width: 700px) { :root[data-theme] body #wp-kosten .wp-kosten-text a.button.solid { display: none !important; } }
/* Menueleiste im Header (Desktop): Photovoltaik und Waermepumpen. Mobil stehen
die beiden Links oben in der Menue-Schublade. */
.header-menue { display: none; }
@media (min-width: 1001px) {
.site-header .header-menue { display: flex; align-items: center; gap: 36px; margin-left: auto; margin-right: 18px; }
.site-header .header-menue a { position: relative; padding: 8px 0; color: inherit; font-size: 15px; font-weight: 550; letter-spacing: -.005em; white-space: nowrap; }
.site-header .header-menue a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--gold, #9d8322); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.site-header .header-menue a:hover::after, .site-header .header-menue a[aria-current="page"]::after { transform: scaleX(1); }
.hero .site-header .header-menue ~ .header-phone { margin-left: 0; }
}
#navigation a[aria-current="page"] { color: var(--gold, #9d8322); }
/* Menue-Schublade (Handy/Tablet): Photovoltaik und Waermepumpen als erste Punkte. */
@media (max-width: 1000px) {
:root[data-theme] .hero .site-header nav.open > a.nav-leistung { display: block !important; padding: 14px 0; border-bottom: 1px solid rgba(127,127,127,.25); font-size: 20px; font-weight: 500; color: inherit; }
:root[data-theme] .hero .site-header nav.open > a.nav-leistung[aria-current="page"] { color: var(--gold, #9d8322); }
:root[data-theme] .hero .site-header nav.open > a.nav-leistung + .nav-contact { margin-top: 18px; }
}
@media (min-width: 1001px) and (max-width: 1100px) { .site-header .header-menue { gap: 24px; margin-right: 10px; } .site-header .header-menue a { font-size: 14px; } }
/* ===================== Kontaktseite ===================== */
.kontakt-seite .kontakt-formular { background: #fff; color: #222; }
.kontakt-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: start; }
.kontakt-text h2 { margin-bottom: 28px; }
.kontakt-text > p:not(.eyebrow) { color: #222; }
.kontakt-form .contact-fields { margin-bottom: 26px; }
.kontakt-form .contact-message-field { grid-column: 1 / -1; }
.kontakt-form .contact-fields textarea { min-height: 120px; }
.kontakt-form .contact-form-note { margin-top: 12px; font-size: 13px; color: #5d666c; }
.kontakt-form .button { margin-top: 10px; }
.kontakt-form .hp-field { position: absolute; left: -9999px; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 600px) { .kontakt-form .button { width: 100%; } }
:root[data-theme] body.kontakt-seite .site-footer { padding-top: 0 !important; }
/* Desktop: Telefonnummer im Header ausgeblendet, Menueleiste steht direkt vor "Beratung anfragen". */
@media (min-width: 1001px) {
:root[data-theme] body .site-header .header-phone { display: none !important; }
.site-header .header-menue { margin-right: 22px; }
}
/* Menueleiste mittig im Header. */
@media (min-width: 1001px) {
.hero .site-header .header-menue { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; }
.hero .site-header .header-cta { margin-left: auto !important; }
}
.wp-arten-kopf h2 { margin-bottom: 0 !important; }
/* Foerder-Akkordeon mobil: ohne Nummern, Text buendig links. */
@media (max-width: 700px) {
.pv-tab-nummer { display: none; }
.pv-tab-inhalt { padding-left: 0 !important; }
}
/* WP-Arten mobil: Grafik unter dem Text. */
@media (max-width: 700px) { .wp-art-bild { order: 0; } }
/* WP-Arten: mobil Text, Grafik, dann Button. */
:root[data-theme] body #wp-arten .wp-art-panel a.button.wp-art-knopf-mobil { display: none !important; }
@media (max-width: 700px) {
:root[data-theme] body #wp-arten .wp-art-panel a.button.wp-art-knopf-desktop { display: none !important; }
:root[data-theme] body #wp-arten .wp-art-panel a.button.wp-art-knopf-mobil { display: flex !important; width: 100%; order: 2; }
.wp-art-text { order: 0; }
.wp-art-bild { order: 1; }
}
/* WP-Arten mobil: kleine Grafik oben, darunter Text und Button. */
@media (max-width: 700px) {
.wp-art-bild { order: -1 !important; max-width: 240px; margin: 0 auto; }
.wp-art-bild img { max-height: 240px; }
.wp-art-panel { gap: 12px; }
}
/* Kontaktbereich mobil: Berater-Illustration ausgeblendet, Google-Bewertung bleibt. */
@media (max-width: 700px) {
#kontakt .contact-energy-photo > img { display: none !important; }
#kontakt .contact-energy-photo { margin-top: 8px; }
}
/* Glanz-Effekt: alle paar Sekunden laeuft ein heller, schraeger Lichtstreifen
ueber die goldenen Buttons (wie bei vielen Shop-Buttons). Bei "Bewegung
reduzieren" aus. */
:root[data-theme] body a.button.solid, :root[data-theme] body button.button.solid,
:root[data-theme] body .header-cta, :root[data-theme] body .promo-cta {
position: relative; overflow: hidden; isolation: isolate;
}
:root[data-theme] body a.button.solid::after, :root[data-theme] body button.button.solid::after,
:root[data-theme] body .header-cta::after, :root[data-theme] body .promo-cta::after {
content: ""; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: 0; width: 46%;
background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.14) 28%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.14) 72%, rgba(255,255,255,0) 100%);
transform: translateX(-160%) skewX(-18deg);
animation: knopf-glanz 4.2s ease-in-out infinite;
pointer-events: none;
}
/* versetzt, damit nicht alle Buttons gleichzeitig glaenzen */
:root[data-theme] body .header-cta::after { animation-delay: 1.4s; }
:root[data-theme] body .promo-cta::after { animation-delay: .6s; }
@keyframes knopf-glanz {
0%, 62% { transform: translateX(-160%) skewX(-18deg); }
100% { transform: translateX(330%) skewX(-18deg); }
}
/* Umriss-Button ("Mehr zu Photovoltaik") ohne Glanz */
:root[data-theme] body a.button.solid.wp-umriss::after { content: none; }
@media (prefers-reduced-motion: reduce) {
:root[data-theme] body a.button.solid::after, :root[data-theme] body button.button.solid::after,
:root[data-theme] body .header-cta::after, :root[data-theme] body .promo-cta::after { animation: none; display: none; }
}
/* WP-Kosten Desktop: Textspalte weiter links (kleinere Luecke). */
@media (min-width: 1001px) {
.wp-kosten-grid { grid-template-columns: minmax(0, .45fr) minmax(0, 1.55fr) !important; column-gap: 48px !important; }
.wp-kosten-text { max-width: 860px !important; }
}
/* Foerderung (PV + WP): Eyebrow und Ueberschrift mittig. */
.pv-foerder-kopf { text-align: center; }
.pv-foerder-kopf h2 { margin-left: auto; margin-right: auto; }
/* PV-Seite: neue Reihenfolge, Hintergruende wechseln weiter ab
(Vorteile weiss, Module hellblau, Wechselrichter weiss, Foerderung hellblau, Intro weiss). */
body.pv-seite:not(.wp-seite) #module { background: #f3f7fa; }
body.pv-seite:not(.wp-seite) #wechselrichter { background: #fff; }
body.pv-seite:not(.wp-seite) #foerderung { background: #f3f7fa; }
body.pv-seite:not(.wp-seite) #pv-intro { background: #fff; }
/* Kontaktbereich mobil: Bild und Google-Bewertung komplett ausblenden. */
@media (max-width: 700px) { #kontakt .contact-energy-photo { display: none !important; } }
/* PV-Foerderung mobil: zwei Zeilen, Schrift passt sich der Breite an. */
@media (max-width: 600px) { body.pv-seite:not(.wp-seite) #foerderung-title { font-size: min(36px, calc((100vw - 44px) / 10.3)) !important; } }
/* WP-Seite: neue Reihenfolge, Hintergruende wechseln ab
(Intro weiss, Geraete hellblau, Foerderung weiss, Vorteile hellblau, Kombi beige). */
body.wp-seite #foerderung { background: #f3f7fa; }
body.wp-seite #vorteile { background: #fff; }
body.wp-seite #geraete { background: #f3f7fa; }
body.wp-seite #wp-kombi { background: #f8f6f0; }
/* Popups: Ueberschrift in derselben Schriftstaerke wie die H2 der Seiten (400). */
#aktion-dialog h2, #foerder-dialog h2 { font-weight: 400 !important; letter-spacing: -.035em !important; }
/* Eyebrow nicht unter das Schliessen-X laufen lassen. */
@media (max-width: 820px) { #aktion-dialog .promo-eyebrow, #foerder-dialog .promo-eyebrow { padding-right: 58px !important; } }
/* Einblicke: die ersten beiden Bilder gleich gross nebeneinander (je 50 %). */
@media (min-width: 701px) {
.einblick.einblick-halb { flex: 0 0 calc((100% - 24px) / 2); }
.einblick.einblick-halb img { width: 100%; }
}
/* PV-Foerderung: freigestellte Illustration statt Foto, ohne Rahmen und Verlauf. */
.pv-foerder-bild.pv-foerder-illu { min-height: 0; border-radius: 0; overflow: visible; background: none; display: flex; align-items: center; justify-content: center; }
.pv-foerder-bild.pv-foerder-illu::after { content: none; }
.pv-foerder-bild.pv-foerder-illu img { position: static; width: 100%; max-width: 560px; height: auto; object-fit: contain; }
@media (max-width: 1000px) { .pv-foerder-bild.pv-foerder-illu img { max-width: 420px; } }
/* PV-Seite: Kundenprojekt / Referenz */
.pv-referenz { background: #fff; color: #222; }
.pv-referenz-kopf { margin-bottom: 48px; }
.pv-referenz-kopf h2 { margin-bottom: 0; }
.pv-referenz-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.pv-referenz-bild { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 5; }
.pv-referenz-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
.pv-referenz-label { margin-bottom: 18px; font-size: 12px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; color: #9d8322; }
.pv-referenz-text h3 { margin-bottom: 32px; font-size: clamp(30px, calc(var(--vw) * 3), 44px); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; }
.pv-referenz-text blockquote { margin: 0 0 26px; font-size: 19px; line-height: 1.65; color: #222; }
.pv-referenz-quelle { font-size: 15px; color: #5d666c; }
.pv-referenz-daten { margin: 36px 0 40px; border-top: 1px solid var(--line); }
.pv-referenz-daten div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pv-referenz-daten dt { font-size: 15px; color: #5d666c; }
.pv-referenz-daten dd { margin: 0; font-size: 15px; color: #222; }
.pv-referenz-link { color: #9d8322; border-color: #9d8322; }
@media (max-width: 900px) {
.pv-referenz-raster { grid-template-columns: 1fr; gap: 40px; }
.pv-referenz-bild { aspect-ratio: 4 / 5; max-width: 560px; }
}
@media (max-width: 600px) {
.pv-referenz-kopf { margin-bottom: 30px; }
.pv-referenz-text blockquote { font-size: 17px; }
.pv-referenz-daten div { grid-template-columns: 110px minmax(0, 1fr); }
}
/* Hintergruende: Referenz weiss, Foerderung danach hellblau (bleibt). */
/* Referenz: zweites Foto (Waermepumpe) schraeg ueber die rechte untere Ecke. */
.pv-referenz-bilder { position: relative; padding: 0 0 48px; }
.pv-referenz-bild2 { position: absolute; z-index: 2; right: -36px; bottom: 0; width: 42%; margin: 0; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; border: 6px solid #fff; transform: rotate(5deg); transform-origin: center; }
.pv-referenz-bild2 img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
@media (max-width: 900px) { .pv-referenz-bilder { max-width: 560px; } .pv-referenz-bild2 { right: -12px; width: 44%; } }
@media (max-width: 600px) { .pv-referenz-bilder { padding-bottom: 36px; margin-right: 14px; } .pv-referenz-bild2 { right: -14px; width: 46%; border-width: 4px; } }
/* WP-Seite: Waermepumpenfoto gross, PV-Foto als schraeges Zusatzbild */
.wp-seite .pv-referenz-bild img { object-position: center 75%; }
.wp-seite .pv-referenz-bild2 img { object-position: center 62%; }
/* Vision-Vorteile (Desktop): alle vier Spalten mit gleich breitem Inhalt,
auch wenn die erste und letzte Spalte nur auf einer Seite Innenabstand haben. */
@media (min-width: 1001px) {
.vision-fullscreen .vision-benefits { display: flex; }
.vision-fullscreen .vision-benefits article { flex: 1 1 0; min-width: 0; box-sizing: content-box; }
}