:root{--navy:#0b1f4f;--navy-dark:#06122e;--blue:#274b9f;--paper:#f2efe7;--white:#fff;--sand:#d9cdb9;--ink:#10141d;--muted:#59606b;--line:rgba(16,20,29,.17);--shell:min(100% - 2 * clamp(1.2rem,5vw,5rem),88rem);--font:"Avenir Next",Avenir,"Helvetica Neue",Arial,sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.55}a{color:inherit}button{font:inherit}:focus-visible{outline:3px solid #c2410c;outline-offset:4px}.skip-link{position:fixed;z-index:100;left:1rem;top:1rem;padding:.8rem 1rem;background:#fff;transform:translateY(-180%)}.skip-link:focus{transform:none}.section-shell{width:var(--shell);margin-inline:auto} .site-header{height:92px;padding-inline:clamp(1.2rem,5vw,5rem);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:40;background:rgba(242,239,231,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;text-decoration:none}.brand img{display:block;width:clamp(145px,13vw,190px);height:72px;object-fit:contain;object-position:left center}.main-nav{display:flex;align-items:center;gap:clamp(1.25rem,2.7vw,2.8rem);font-size:.75rem;font-weight:750;letter-spacing:.13em;text-transform:uppercase}.main-nav>a,.nav-dropdown,.nav-termin{padding:.8rem 0;border:0;background:none;text-decoration:none;cursor:pointer}.main-nav a:hover,.nav-dropdown:hover,.nav-termin:hover{color:var(--blue)}.nav-phone{padding:.82rem 1.1rem!important;background:var(--navy);color:#fff}.nav-phone:hover{background:var(--blue);color:#fff!important}.nav-group{position:relative}.nav-dropdown span{display:inline-block;margin-left:.3rem;transition:transform .2s}.nav-dropdown[aria-expanded=true] span{transform:rotate(180deg)}.dropdown-panel{display:none;position:absolute;right:-9rem;top:calc(100% + 1rem);width:min(650px,86vw);grid-template-columns:1fr 1fr;background:#fff;box-shadow:0 25px 70px rgba(6,18,46,.22);border:1px solid rgba(11,31,79,.12)}.dropdown-panel.open{display:grid}.dropdown-panel>div{padding:1.7rem 2rem 2rem}.dropdown-panel>div:first-child{background:var(--navy);color:#fff}.dropdown-label{margin:0 0 .8rem;font-size:.65rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.7}.dropdown-panel a{display:block;padding:.42rem 0;text-decoration:none;text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:500}.menu-toggle{display:none;align-items:center;border:0;background:none;padding:.7rem 0;font-weight:700}.menu-toggle i,.menu-toggle i:after{content:"";display:block;width:24px;height:2px;margin-left:.7rem;background:var(--ink);transition:.2s}.menu-toggle i:after{margin:6px 0 0}.menu-toggle[aria-expanded=true] i{transform:rotate(45deg)}.menu-toggle[aria-expanded=true] i:after{margin-top:0;transform:rotate(-90deg)} .hero{min-height:calc(100svh - 92px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(460px,.95fr);position:relative;background:var(--paper);overflow:hidden}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(4.5rem,8vw,8rem) clamp(2rem,5vw,6rem) clamp(5rem,8vw,8rem) max(1.2rem,calc((100vw - 88rem)/2 + 5rem))}.eyebrow,.section-index{margin:0;color:var(--blue);font-size:.67rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.hero h1{max-width:830px;margin:1.2rem 0 1.8rem;color:var(--navy);font-size:clamp(3.6rem,7.2vw,8rem);font-weight:650;letter-spacing:-.075em;line-height:.88}.hero h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--navy)}.hero-lead{max-width:40rem;margin:0;color:#414955;font-size:clamp(1.05rem,1.35vw,1.3rem)}.hero-phone{width:min(100%,430px);display:grid;grid-template-columns:1fr auto;margin-top:2.5rem;padding:1rem 0;border-block:2px solid var(--navy);text-decoration:none}.hero-phone span{font-size:.7rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase}.hero-phone strong{grid-column:1;margin-top:.4rem;color:var(--navy);font-size:clamp(1.25rem,2vw,1.75rem)}.hero-phone i{grid-column:2;grid-row:1/3;align-self:center;font-style:normal;font-size:2rem}.hero-phone:hover{color:var(--blue)} .hero-explorer{min-height:100%;display:flex;flex-direction:column;padding:clamp(2rem,4vw,4.5rem);background:var(--navy);color:#fff;position:relative;isolation:isolate}.hero-explorer:before{content:"";position:absolute;inset:1.5rem;border:1px solid rgba(255,255,255,.14);z-index:-1}.explorer-head{display:flex;justify-content:space-between;gap:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.22);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase}.explorer-head p{margin:0}.explorer-tabs{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(2rem,5vh,4rem);border:1px solid rgba(255,255,255,.3)}.explorer-tabs button{min-height:62px;border:0;background:transparent;color:#fff;font-weight:750;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}.explorer-tabs button+button{border-left:1px solid rgba(255,255,255,.3)}.explorer-tabs button[aria-selected=true]{background:var(--sand);color:var(--navy)}.explorer-panel{display:flex;flex:1;flex-direction:column;justify-content:center;padding:clamp(2rem,5vh,4rem) 0}.explorer-panel[hidden]{display:none}.panel-kicker{margin:0 0 1rem;color:#aebee9;font-size:.67rem;font-weight:750;letter-spacing:.15em;text-transform:uppercase}.explorer-panel h2{max-width:550px;margin:0 0 1.5rem;font-size:clamp(2.5rem,4.2vw,4.8rem);font-weight:600;letter-spacing:-.06em;line-height:.92}.explorer-panel ul{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid rgba(255,255,255,.2)}.explorer-panel li{padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.2);font-size:.9rem}.explorer-panel>a{width:max-content;font-weight:750;text-underline-offset:.35rem}.explorer-panel>a span{margin-left:.5rem}.explorer-foot{display:flex;justify-content:space-between;gap:2rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.22);font-size:.6rem;letter-spacing:.18em}.scroll-cue{position:absolute;left:50%;bottom:1.4rem;display:flex;align-items:center;gap:.7rem;transform:translateX(-50%);font-size:.65rem;font-weight:750;letter-spacing:.14em;text-decoration:none;text-transform:uppercase}.scroll-cue i{font-style:normal;font-size:1rem} .services{position:relative;padding-block:clamp(5.5rem,9vw,9rem)}.services-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,9vw,10rem)}.services-heading{position:sticky;top:130px;align-self:start}.services-heading h2{margin:1.2rem 0 1.4rem;font-size:clamp(2.7rem,4.7vw,5rem);font-weight:600;letter-spacing:-.06em;line-height:.94}.services-heading>p:last-of-type{max-width:27rem}.inline-phone{display:inline-block;margin-top:1rem;font-size:.82rem;font-weight:750;text-underline-offset:.35rem}.inline-phone span{margin-left:.4rem}.services-build{background:#fff;color:var(--navy);overflow:hidden}.services-build .services-heading h2{color:var(--navy)} .services-design{background:var(--navy-dark);color:#fff;overflow:hidden}.services-design .eyebrow{color:#9eb4eb}.services-design .services-heading>p:last-of-type{color:#b5bfd6}.design-word{position:absolute;right:-2vw;top:-3rem;color:rgba(255,255,255,.03);font-size:clamp(10rem,27vw,27rem);font-weight:800;letter-spacing:-.1em;line-height:1;pointer-events:none}.build-word{color:rgba(11,31,79,.045)}.design-fields{position:relative;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(255,255,255,.25);border-left:1px solid rgba(255,255,255,.25)}.design-fields a{min-height:210px;display:grid;grid-template-columns:1fr auto;align-content:space-between;padding:1.5rem;border-right:1px solid rgba(255,255,255,.25);border-bottom:1px solid rgba(255,255,255,.25);text-decoration:none;transition:background .2s,color .2s}.design-fields a:last-child{grid-column:1/-1}.design-fields a:hover,.design-fields a:focus-visible{background:var(--sand);color:var(--navy)}.design-fields span{font-size:.65rem;letter-spacing:.15em}.design-fields strong{grid-column:1/-1;margin-top:2.5rem;font-size:clamp(1.5rem,2.4vw,2.5rem);font-weight:550;letter-spacing:-.04em}.design-fields small{align-self:end;margin-top:.8rem;opacity:.68}.design-fields i{grid-column:2;grid-row:1/4;align-self:start;font-style:normal;font-size:1.4rem}.build-fields{border-color:rgba(11,31,79,.24)}.build-fields a{color:var(--navy);border-color:rgba(11,31,79,.24)}.build-fields span{color:var(--blue)}.build-fields a:hover,.build-fields a:focus-visible{background:var(--navy);color:#fff}.build-fields a:hover span,.build-fields a:focus-visible span{color:#fff} .process{padding-block:clamp(5.5rem,10vw,10rem);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(3rem,9vw,10rem)}.process h2{max-width:560px;margin:1.1rem 0 0;color:var(--navy);font-size:clamp(2.8rem,5vw,5.4rem);font-weight:600;letter-spacing:-.065em;line-height:.94}.process-steps{border-top:2px solid var(--navy)}.process article{display:grid;grid-template-columns:3.2rem 1fr;padding:1.5rem 0;border-bottom:1px solid var(--line)}.process article>span{color:var(--blue);font-size:.65rem;letter-spacing:.15em}.process h3{margin:0;color:var(--navy);font-size:1.45rem;font-weight:600;letter-spacing:-.03em}.process article p{margin:.4rem 0 0;color:var(--muted)} .faq{padding-block:clamp(5.5rem,9vw,9rem);background:#fff}.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,9vw,10rem)}.faq-heading{position:sticky;top:130px;align-self:start}.faq-heading h2{margin:1.1rem 0 1.35rem;color:var(--navy);font-size:clamp(2.8rem,4.8vw,5.2rem);font-weight:600;letter-spacing:-.06em;line-height:.94}.faq-heading>p:last-child{max-width:28rem;margin:0;color:var(--muted)}.faq-list{border-top:2px solid var(--navy)}.faq-list details{border-bottom:1px solid var(--line)}.faq-list summary{min-height:92px;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary strong{color:var(--navy);font-size:clamp(1.1rem,1.6vw,1.45rem);font-weight:600;letter-spacing:-.025em}.faq-list summary i{width:2.35rem;height:2.35rem;display:grid;place-items:center;border:1px solid rgba(11,31,79,.25);border-radius:50%;font-style:normal;font-size:1.2rem;transition:transform .2s ease,background-color .2s ease,color .2s ease}.faq-list details[open] summary i{transform:rotate(45deg);background:var(--navy);color:#fff}.faq-list details>div{max-width:46rem;padding:0 4rem 1.6rem 0}.faq-list details p{margin:0;color:var(--muted)} .contact-form-section{position:relative;padding-block:clamp(5.5rem,9vw,9rem);overflow:hidden;background:var(--navy-dark);color:#fff}.contact-word{position:absolute;right:-.04em;top:-.18em;color:rgba(255,255,255,.025);font-size:clamp(10rem,25vw,25rem);font-weight:800;letter-spacing:-.1em;line-height:1;pointer-events:none}.contact-form-layout{position:relative;display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(3rem,9vw,10rem);align-items:start}.contact-form-intro{position:sticky;top:130px}.contact-form-intro .section-index{color:#9eb4eb}.contact-form-intro h2{margin:1.1rem 0 1.5rem;color:#fff;font-size:clamp(3rem,5.2vw,5.8rem);font-weight:650;letter-spacing:-.065em;line-height:.9}.contact-form-intro h2 span{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.92)}.contact-form-intro>p:last-of-type{max-width:29rem;color:#b5bfd6}.contact-phone{width:min(100%,360px);display:grid;justify-items:center;text-align:center;gap:.3rem;margin-top:2rem;padding:1.1rem 1.6rem;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));background:#fff;color:var(--navy);text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.18);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease}.contact-phone small{font-size:.64rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;opacity:.7}.contact-phone strong{margin-top:.4rem;font-size:clamp(1.2rem,2vw,1.65rem);letter-spacing:.02em}.contact-phone:hover{transform:translateY(-2px);background:var(--sand);box-shadow:0 12px 28px rgba(0,0,0,.22)}.contact-phone:focus-visible{clip-path:none} .project-form{position:relative;padding:clamp(1.4rem,3vw,2.8rem);background:#fff;color:var(--navy);box-shadow:0 28px 70px rgba(0,0,0,.18)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.form-field{display:grid;gap:.55rem}.form-field-full{grid-column:1/-1}.form-field label{font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.form-field label span{color:var(--muted);font-size:.62rem;font-weight:600;letter-spacing:.02em;text-transform:none}.form-field input,.form-field select,.form-field textarea{width:100%;min-height:54px;padding:.85rem 1rem;border:1px solid rgba(11,31,79,.24);border-radius:0;background:#f7f4ee;color:var(--navy);font:inherit;font-size:1rem}.form-field textarea{min-height:155px;resize:vertical}.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:var(--navy)}.form-note{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid rgba(11,31,79,.15);color:var(--muted);font-size:.78rem}.form-submit{min-width:210px;min-height:58px;margin-top:1.4rem;padding:.9rem 1.4rem;border:0;background:var(--navy);color:#fff;font-weight:800;letter-spacing:.05em;cursor:pointer;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));transition:background-color .2s ease,transform .2s ease}.form-submit:hover{transform:translateY(-2px);background:var(--blue)}.form-submit:focus-visible{clip-path:none}.form-result{margin-top:1.6rem;padding:1.35rem;background:var(--paper);border-left:4px solid var(--blue);color:var(--navy)}.form-result h3{margin:0;font-size:1.25rem}.form-result>p{margin:.4rem 0 1rem;color:var(--muted)}.form-result dl{display:grid;gap:.8rem;margin:0 0 1.1rem}.form-result dl>div{min-width:0;padding-bottom:.65rem;border-bottom:1px solid rgba(11,31,79,.14)}.form-result dt{font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.form-result dd{margin:.2rem 0 0;overflow-wrap:anywhere;white-space:pre-wrap}.form-result>a{font-weight:750;text-underline-offset:.3rem} .footer{padding-block:3.5rem;background:var(--paper);border-top:1px solid var(--line)}.footer .section-shell{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.brand-footer img{width:190px;height:auto}.footer p{margin:0;color:var(--muted)}.footer-links{grid-column:1/-1;display:flex;justify-content:space-between;padding-top:1.4rem;border-top:1px solid var(--line);color:var(--muted);font-size:.76rem}.footer-links a{text-underline-offset:.3rem} @media(max-width:980px){html{scroll-padding-top:82px}.site-header{height:82px}.brand img{width:135px;height:64px}.menu-toggle{display:flex}.main-nav{display:none;position:absolute;top:82px;left:0;right:0;max-height:calc(100vh - 82px);overflow:auto;flex-direction:column;align-items:stretch;gap:0;padding:1rem 1.2rem 2rem;background:var(--paper);border-bottom:1px solid var(--line)}.main-nav.open{display:flex}.main-nav>a,.nav-dropdown,.nav-termin{display:block;width:100%;padding:1rem 0;text-align:left;border-bottom:1px solid var(--line)}.nav-phone{margin-top:1rem;text-align:center!important}.dropdown-panel{position:static;width:100%;grid-template-columns:1fr;box-shadow:none;border:0}.dropdown-panel>div{padding:1.2rem}.hero{grid-template-columns:1fr;min-height:auto}.hero-copy{min-height:calc(100svh - 82px);padding:5rem 1.2rem 6rem}.hero-explorer{min-height:680px}.scroll-cue{display:none}.services-layout,.process,.faq-layout,.contact-form-layout{grid-template-columns:1fr}.services-heading,.faq-heading,.contact-form-intro{position:static}.design-fields{grid-template-columns:1fr 1fr}.footer .section-shell{grid-template-columns:1fr}.footer-links{flex-direction:column;gap:.8rem}} @media(max-width:560px){.hero-copy{min-height:calc(100svh - 82px);justify-content:center}.hero h1{font-size:clamp(3.25rem,16vw,5rem)}.hero-explorer{min-height:620px;padding:2rem 1.2rem}.hero-explorer:before{inset:.75rem}.explorer-panel h2{font-size:2.65rem}.design-fields{grid-template-columns:1fr}.design-fields a,.design-fields a:last-child{grid-column:auto;min-height:170px}.faq-list summary{min-height:82px;gap:1rem}.faq-list details>div{padding-right:0}.contact-form-intro h2{font-size:clamp(3.2rem,14vw,4.8rem)}.project-form{padding:1.2rem}.form-grid{grid-template-columns:1fr}.form-field-full{grid-column:auto}.form-submit{width:100%}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}} /* Flyer-Hero */ .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important} .flyer-hero{min-height:calc(100svh - 92px);display:grid;grid-template-columns:1fr 1fr;position:relative;overflow:hidden;background:var(--paper)} .flyer-half{min-width:0;display:flex;flex-direction:column;padding:clamp(3rem,6vw,6.5rem) clamp(1.5rem,5vw,5.5rem) clamp(13rem,18vw,16rem);position:relative;text-decoration:none;transition:background-color .3s ease} .flyer-half:after{content:"";position:absolute;inset:1.4rem;border:1px solid currentColor;opacity:.16;pointer-events:none} .flyer-design{background:var(--navy);color:#fff}.flyer-design:hover,.flyer-design:focus-visible{background:#153578}.flyer-build{background:#f8f7f3;color:var(--navy)}.flyer-build:hover,.flyer-build:focus-visible{background:#e7dfd0} .flyer-half-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:1rem;border-bottom:1px solid currentColor}.flyer-half-head p{margin:0;font-size:clamp(2.4rem,5.2vw,6.2rem);font-weight:650;letter-spacing:-.07em;line-height:.8;text-transform:uppercase}.flyer-half-head span{font-size:.64rem;font-weight:800;letter-spacing:.16em}.flyer-subline{margin:1rem 0 1.4rem;font-size:.68rem;font-weight:750;letter-spacing:.16em;text-transform:uppercase;opacity:.7}.flyer-half ul{list-style:none;margin:0;padding:0;position:relative;z-index:1}.flyer-half li{display:flex;align-items:center;gap:.8rem;padding:.47rem 0;border-bottom:1px solid currentColor;font-size:clamp(.88rem,1.15vw,1.1rem);border-color:color-mix(in srgb,currentColor 20%,transparent);transition:padding-left .2s ease}.flyer-half li:before{content:"";width:.32rem;height:.32rem;flex:0 0 auto;border-radius:50%;background:currentColor}.flyer-half:hover li{padding-left:.35rem}.flyer-action{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin-top:auto;padding-top:1.5rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.flyer-action i{font-style:normal;font-size:1.8rem;font-weight:300} .flyer-logo{width:clamp(250px,29vw,430px);aspect-ratio:1681/935;position:absolute;left:50%;bottom:2.7rem;z-index:6;transform:translateX(-50%);pointer-events:none}.flyer-logo img{display:block;width:100%;height:100%;object-fit:contain;clip-path:inset(0 0 0 50%)}.flyer-logo:before{content:"";position:absolute;inset:0;background:url("assets/leonardo-logo.png") center/contain no-repeat;filter:brightness(0) invert(1);clip-path:inset(0 50% 0 0)} .flyer-phone{position:absolute;left:50%;bottom:.8rem;z-index:7;display:flex;align-items:center;gap:.7rem;transform:translateX(-50%);text-decoration:none;white-space:nowrap;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.flyer-phone span{color:#fff}.flyer-phone strong{color:var(--navy);font-size:.8rem}.flyer-phone:hover{text-decoration:underline;text-underline-offset:.25rem} @media(max-width:980px){.flyer-hero{min-height:calc(100svh - 82px)}.flyer-half{padding:clamp(2.5rem,7vw,4rem) clamp(1.2rem,4vw,3rem) clamp(12rem,22vw,14rem)}.flyer-logo{width:clamp(230px,36vw,340px)}} @media(max-width:560px){.flyer-hero{min-height:max(calc(100svh - 82px),650px)}.flyer-half{padding:2.2rem .85rem 10.5rem}.flyer-half:after{inset:.55rem}.flyer-half-head{padding-bottom:.7rem}.flyer-half-head p{font-size:clamp(1.8rem,10vw,3rem)}.flyer-subline{min-height:2.2em;margin:.75rem 0 1rem;font-size:.53rem;letter-spacing:.1em}.flyer-half li{gap:.45rem;padding:.36rem 0;font-size:clamp(.66rem,3.1vw,.82rem);line-height:1.25}.flyer-half li:before{width:.22rem;height:.22rem}.flyer-action{font-size:.52rem;letter-spacing:.05em}.flyer-action i{font-size:1.2rem}.flyer-logo{width:min(64vw,250px);bottom:2.5rem}.flyer-phone{bottom:.65rem;gap:.45rem;font-size:.52rem}.flyer-phone strong{font-size:.62rem}} /* Runde und kantige Aktionsformen */ .flyer-action{width:max-content;min-width:clamp(150px,16vw,220px);min-height:58px;align-items:center;justify-content:center;margin-top:auto;padding:1rem 1.2rem;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-align:center;transition:transform .22s ease,background-color .22s ease,color .22s ease} .flyer-action i{font-size:1.3rem}.flyer-action-round{background:#fff;color:var(--navy);border-radius:0;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.flyer-action-angular{background:var(--navy);color:#fff;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}.flyer-half:hover .flyer-action{transform:translateY(-5px)}.flyer-design:hover .flyer-action-round{background:var(--sand)}.flyer-build:hover .flyer-action-angular{background:var(--blue)}.flyer-action:focus-visible{clip-path:none} .flyer-logo{bottom:.9rem} .services-build .inline-phone,.services-design .inline-phone{padding:.85rem 1.1rem;border-radius:999px;background:transparent;text-decoration:none}.services-build .inline-phone{border:1px solid rgba(11,31,79,.5);color:var(--navy)}.services-design .inline-phone{border:1px solid rgba(255,255,255,.5)}.services-build .inline-phone:hover{background:var(--navy);color:#fff}.services-design .inline-phone:hover{background:#fff;color:var(--navy)} @media(max-width:560px){.flyer-action{min-width:0;width:100%;min-height:44px;padding:.65rem .7rem;font-size:.48rem;letter-spacing:.04em}.flyer-action i{font-size:.9rem}.flyer-action-angular,.flyer-action-round{clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}.flyer-logo{bottom:.45rem}} /* Header-Überarbeitung */ .site-header,.main-nav,.nav-dropdown,.nav-termin,.nav-phone{font-family:var(--font)} .main-nav{gap:clamp(1.2rem,2.3vw,2.5rem);font-size:.88rem;font-weight:600;letter-spacing:-.01em;text-transform:none} .main-nav>a:not(.nav-phone),.nav-dropdown,.nav-termin{position:relative;padding:.85rem .1rem}.main-nav>a:not(.nav-phone):after,.nav-dropdown:after,.nav-termin:after{content:"";position:absolute;left:0;right:100%;bottom:.5rem;height:1px;background:var(--navy);transition:right .2s ease}.main-nav>a:not(.nav-phone):hover:after,.nav-dropdown:hover:after,.nav-termin:hover:after,.nav-dropdown[aria-expanded=true]:after{right:0} .nav-phone{min-width:210px;min-height:60px;display:flex!important;align-items:center;gap:.8rem;padding:.55rem 1rem .55rem .6rem!important;border-radius:999px;background:var(--navy);color:#fff;text-align:left!important;line-height:1;text-transform:none;box-shadow:0 8px 24px rgba(11,31,79,.16);transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease} .nav-phone:hover{transform:translateY(-2px);background:var(--blue);box-shadow:0 12px 28px rgba(11,31,79,.24)}.phone-copy{display:grid;gap:.28rem}.phone-copy small{font-size:.61rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;opacity:.78}.phone-copy strong{font-size:1rem;font-weight:650;letter-spacing:.015em;font-variant-numeric:tabular-nums} @media(max-width:980px){.main-nav{font-size:1rem}.nav-phone{width:100%;justify-content:center;margin-top:1rem!important;border-radius:14px}.phone-copy{min-width:140px}.main-nav>a:not(.nav-phone):after,.nav-dropdown:after,.nav-termin:after{display:none}} /* Header-Anruf: Form unveraendert, aber in der Formsprache der uebrigen Buttons der Seite - solide Navy-Flaeche, abgeschnittene Ecken oben rechts und unten links. Fuellung und Rand laufen ueber zwei Variablen, damit Hover und Tastaturfokus nur eine Farbe tauschen. */ .nav-phone{ --phone-shape:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px)); --phone-fill:var(--navy); --phone-rim:var(--navy); min-width:218px; min-height:58px; padding:.62rem 1.45rem!important; justify-content:center; text-align:center!important; position:relative; isolation:isolate; border:0; border-radius:0; clip-path:var(--phone-shape); background:var(--phone-rim)!important; color:#fff; box-shadow:none; transition:transform .2s ease } .nav-phone::before{ content:""; position:absolute; inset:1px; z-index:0; clip-path:var(--phone-shape); background:var(--phone-fill); transition:background-color .2s ease,inset .15s ease } .nav-phone .phone-copy{position:relative;z-index:1} .phone-copy{gap:.3rem} .phone-copy small{color:#9eb4eb;font-size:.575rem;font-weight:750;letter-spacing:.17em;opacity:1;transition:color .2s ease} .phone-copy strong{color:#fff;font-size:1.1rem;font-weight:700;letter-spacing:.005em;font-variant-numeric:tabular-nums} .nav-phone:hover{--phone-fill:#2d5ed9;transform:translateY(-2px);box-shadow:none} .nav-phone:hover .phone-copy small{color:rgba(255,255,255,.85)} /* Tastaturfokus: Ring in der Buttonform statt eines abgeschnittenen Outlines */ .nav-phone:focus-visible{--phone-rim:#2d5ed9;outline:none} .nav-phone:focus-visible::before{inset:3px} @media(max-width:980px){.nav-phone{min-height:64px;border-radius:0}.phone-copy{min-width:145px}} /* Leistungsunterseiten sind vollständig in service-pages.css gekapselt. */ /* Startseite: Leistungsfelder ohne Richtungspfeile und Designnummern */ .design-fields a{grid-template-columns:1fr} .services-design .design-fields strong{margin-top:0} /* Kompakte Leistungsboards: je Bereich vollständig in einer Desktop-Ansicht */ .nav-phone{min-width:228px;min-height:64px} @media(min-width:981px){ .services{min-height:calc(100svh - 92px);display:flex;align-items:center;padding-block:clamp(2.25rem,4vh,3.5rem)} .services-layout{grid-template-columns:minmax(220px,.48fr) minmax(0,1.52fr);gap:clamp(2.5rem,5vw,5rem);align-items:center} .services-heading{position:static} .services-heading h2{margin:.85rem 0 1rem;font-size:clamp(2.65rem,4vw,4.5rem)} .design-fields a{min-height:clamp(145px,19vh,180px);padding:clamp(1rem,1.6vw,1.4rem)} .design-fields strong{margin-top:clamp(.7rem,1.8vh,1.2rem);font-size:clamp(1.2rem,1.8vw,2rem);line-height:1;overflow-wrap:anywhere} .design-fields small{margin-top:.5rem;font-size:.72rem} .services-build .design-fields{grid-template-columns:repeat(12,minmax(0,1fr))} .services-build .design-fields a{grid-column:span 3} .services-build .design-fields a:nth-child(n+5){grid-column:span 4} .services-design .design-fields{grid-template-columns:repeat(6,minmax(0,1fr))} .services-design .design-fields a{grid-column:span 2} .services-design .design-fields a:nth-child(n+4){grid-column:span 3} .services-design .design-fields strong{margin-top:0} } /* Referenzdesign: Individuelles Design auf der Startseite */ .services-design{ --design-electric:#2d5ed9; --design-slant:clamp(24px,4.2vw,68px); background:var(--paper); color:var(--navy) } .services-design>.design-word{display:none} .services-design .eyebrow{color:var(--design-electric)} .services-design .services-heading>p:last-of-type{color:var(--muted)} .services-design .inline-phone{display:inline-flex;align-items:center;justify-content:center;gap:1.1rem;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:#fff;color:var(--navy);white-space:nowrap;transition:transform .2s ease,background-color .2s ease,color .2s ease} .services-design .inline-phone:hover{transform:translateY(-2px);background:var(--sand);color:var(--navy)} .services-design .inline-phone:focus-visible{clip-path:none} .services-design .design-cta-arrow{margin:0;font-size:1rem;font-weight:500;line-height:1} .services-design .design-fields{border:0;gap:clamp(8px,1vw,14px)} .services-design .design-fields a{ --card-shape:polygon(0 0,100% 0,calc(100% - var(--design-slant)) 100%,0 100%); --card-shape-inner:polygon(5px 5px,calc(100% - 5px) 5px,calc(100% - var(--design-slant) - 5px) calc(100% - 5px),5px calc(100% - 5px)); --card-image:none; --card-position:center; --card-overlay:linear-gradient(0deg,rgba(11,31,79,.84) 0%,rgba(11,31,79,.58) 66%,rgba(11,31,79,.48) 100%); --card-text-shadow:0 1px 12px rgba(3,12,34,.38); min-width:0; position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.3rem,2.2vw,2.2rem) calc(var(--design-slant) + clamp(.8rem,1.2vw,1.25rem)) clamp(1.3rem,2.2vw,2.2rem) clamp(1.35rem,2.4vw,2.4rem); border:0; background:transparent; color:#fff; text-decoration:none; clip-path:var(--card-shape) } .services-design .design-fields a:nth-child(2), .services-design .design-fields a:nth-child(3), .services-design .design-fields a:nth-child(5){ --card-shape:polygon(var(--design-slant) 0,100% 0,calc(100% - var(--design-slant)) 100%,0 100%); --card-shape-inner:polygon(calc(var(--design-slant) + 5px) 5px,calc(100% - 5px) 5px,calc(100% - var(--design-slant) - 5px) calc(100% - 5px),5px calc(100% - 5px)); padding-left:calc(var(--design-slant) + clamp(.8rem,1.2vw,1.25rem)) } .services-design .design-fields a::before, .services-design .design-fields a::after{ content:""; position:absolute; inset:0; pointer-events:none; transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .3s ease } .services-design .design-fields a::before{ z-index:0; background-image:var(--card-image); background-position:var(--card-position); background-size:cover; background-repeat:no-repeat } .services-design .design-fields a::after{z-index:1;background:var(--card-overlay)} #design-boeden{ --card-image:url("assets/design/webp/boeden-v1.webp"); --card-position:center 68% } #wandpaneele{ --card-image:url("assets/design/webp/wandpaneele-v1.webp"); --card-position:center 52% } #uhren{ --card-image:url("assets/design/webp/uhren-v1.webp"); --card-position:center 48%; --card-overlay:linear-gradient(0deg,rgba(45,94,217,.82) 0%,rgba(45,94,217,.58) 67%,rgba(45,94,217,.43) 100%) } #tische{ --card-image:url("assets/design/webp/tische-v1.webp"); --card-position:center 55% } #accessoires{ --card-image:url("assets/design/webp/wohnaccessoires-v1.webp"); --card-position:center 56% } .services-design .design-fields a:nth-child(2), .services-design .design-fields a:nth-child(4){ --card-overlay:linear-gradient(0deg,rgba(246,243,236,.92) 0%,rgba(246,243,236,.72) 68%,rgba(246,243,236,.6) 100%); --card-text-shadow:none; color:var(--navy) } .services-design .design-fields a>*{position:relative;z-index:2;text-shadow:var(--card-text-shadow)} .services-design .design-fields .design-card-number{margin:0;color:#79a1ff;font-size:.78rem;font-weight:500;letter-spacing:.02em} .services-design .design-fields a:nth-child(2) .design-card-number, .services-design .design-fields a:nth-child(4) .design-card-number{color:var(--design-electric)} .services-design .design-fields strong{margin:0;font-size:clamp(1.55rem,2.35vw,2.5rem);font-weight:650;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere;transition:transform .35s cubic-bezier(.22,.61,.36,1)} @media(hover:hover) and (pointer:fine){ .services-design .design-fields a:hover::before{transform:scale(1.06)} .services-design .design-fields a:hover::after{opacity:.88} .services-design .design-fields a:hover strong{transform:translateX(6px)} } .services-design .design-fields a:focus-visible{outline:none;background:currentColor} .services-design .design-fields a:focus-visible::before, .services-design .design-fields a:focus-visible::after{clip-path:var(--card-shape-inner);transform:none} @media(min-width:981px){ .services-design{padding-block:clamp(3rem,6vh,5rem)} .services-design .services-layout{display:block} .services-design .services-heading{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label action" "title action" "copy action"; align-items:center; column-gap:clamp(3rem,8vw,9rem); margin-bottom:clamp(2.5rem,5vh,4rem) } .services-design .services-heading .eyebrow{grid-area:label} .services-design .services-heading h2{grid-area:title;max-width:none;margin:.9rem 0 1rem;color:var(--navy);font-size:clamp(3.2rem,5vw,5rem);line-height:.92;white-space:nowrap} .services-design .services-heading>p:last-of-type{grid-area:copy;margin:0} .services-design .services-heading .inline-phone{grid-area:action;min-width:245px;min-height:60px;margin:0;padding:1rem 1.7rem} .services-design .design-fields a{min-height:clamp(165px,20vh,195px)} } @media(max-width:980px){ .services-design{padding-block:clamp(4rem,8vw,6rem)} .services-design .services-layout{display:block} .services-design .services-heading{display:block;margin-bottom:clamp(2.2rem,6vw,3.5rem)} .services-design .services-heading h2{max-width:12ch;margin:1rem 0 1.2rem;color:var(--navy);font-size:clamp(3rem,8vw,4.8rem);line-height:.94} .services-design .services-heading .inline-phone{min-height:56px;margin-top:1.4rem;padding:.9rem 1.35rem} .services-design .design-fields a{min-height:170px} } @media(max-width:560px){ .services-design{--design-slant:22px;padding-block:3.5rem} .services-design .services-heading h2{font-size:clamp(3rem,14vw,4.3rem)} .services-design .design-fields{gap:8px} .services-design .design-fields a{min-height:145px;padding:1.25rem calc(var(--design-slant) + 1rem) 1.25rem 1.25rem} .services-design .design-fields a:nth-child(2), .services-design .design-fields a:nth-child(3), .services-design .design-fields a:nth-child(5){padding-left:calc(var(--design-slant) + 1rem)} .services-design .design-fields strong{font-size:clamp(1.55rem,8vw,2.2rem)} } @media(prefers-reduced-motion:reduce){ .services-design .design-fields a:hover::before, .services-design .design-fields a:hover strong{transform:none} } /* Referenzdesign: Bau / Haus / Objekt auf der Startseite */ .services-build{ --build-electric:#2d5ed9; --build-slant:clamp(20px,2.5vw,48px); background:#fff; color:var(--navy) } .services-build>.build-word{display:none} .services-build .eyebrow{color:var(--build-electric)} .services-build .services-heading>p:last-of-type{color:var(--muted)} .services-build .inline-phone{display:inline-flex;align-items:center;justify-content:center;gap:1.1rem;border:0;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));background:var(--navy);color:#fff;white-space:nowrap;transition:transform .2s ease,background-color .2s ease,color .2s ease} .services-build .inline-phone:hover{transform:translateY(-2px);background:var(--blue);color:#fff} .services-build .inline-phone:focus-visible{clip-path:none} .services-build .build-cta-arrow{margin:0;font-size:1rem;font-weight:500;line-height:1} .services-build .build-fields{border:0;gap:clamp(8px,.85vw,12px)} .services-build .build-fields a{ --card-shape:polygon(0 0,100% 0,calc(100% - var(--build-slant)) 100%,0 100%); --card-shape-inner:polygon(5px 5px,calc(100% - 5px) 5px,calc(100% - var(--build-slant) - 5px) calc(100% - 5px),5px calc(100% - 5px)); --card-surface:var(--navy); --card-image:none; --card-overlay:linear-gradient(180deg,rgba(7,25,65,.48),rgba(5,20,54,.84)); --card-text-shadow:0 1px 12px rgba(0,0,0,.28); min-width:0; position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(1.2rem,1.8vw,1.8rem) calc(var(--build-slant) + clamp(.7rem,1vw,1.05rem)) clamp(1.2rem,1.8vw,1.8rem) clamp(1.2rem,1.8vw,1.8rem); border:0; background:transparent; color:#fff; text-decoration:none; clip-path:var(--card-shape) } .services-build .build-fields a:nth-child(2), .services-build .build-fields a:nth-child(3), .services-build .build-fields a:nth-child(4), .services-build .build-fields a:nth-child(6), .services-build .build-fields a:nth-child(7){ --card-shape:polygon(var(--build-slant) 0,100% 0,calc(100% - var(--build-slant)) 100%,0 100%); --card-shape-inner:polygon(calc(var(--build-slant) + 5px) 5px,calc(100% - 5px) 5px,calc(100% - var(--build-slant) - 5px) calc(100% - 5px),5px calc(100% - 5px)); padding-left:calc(var(--build-slant) + clamp(.7rem,1vw,1.05rem)) } .services-build .build-fields #bodenbelaege{--card-image:url("assets/leistungen/webp/bodenbelaege-v1.webp");--card-position:center 64%} .services-build .build-fields #montage{--card-image:url("assets/leistungen/webp/montagearbeiten-v1.webp");--card-position:center} .services-build .build-fields #renovierung{--card-image:url("assets/leistungen/webp/renovierung-v1.webp");--card-position:center 58%} .services-build .build-fields #sanierung{--card-image:url("assets/leistungen/webp/sanierung-v1.webp");--card-position:center} .services-build .build-fields #trockenbau{--card-image:url("assets/leistungen/webp/trockenbau-v1.webp");--card-position:center} .services-build .build-fields #fussleisten{--card-image:url("assets/leistungen/webp/fussleisten-v1.webp");--card-position:center 62%} .services-build .build-fields #objektservice{--card-image:url("assets/leistungen/webp/objektservice-v1.webp");--card-position:center 56%} .services-build .build-fields a::before, .services-build .build-fields a::after{ content:""; position:absolute; z-index:0; inset:0; pointer-events:none; transition:transform .55s cubic-bezier(.22,.61,.36,1),opacity .3s ease } .services-build .build-fields a::before{ background-color:var(--card-surface); background-image:var(--card-image); background-position:var(--card-position,center); background-size:cover } .services-build .build-fields a::after{z-index:1;background:var(--card-overlay)} .services-build .build-fields a:nth-child(2), .services-build .build-fields a:nth-child(5){ --card-overlay:linear-gradient(180deg,rgba(255,255,255,.7),rgba(249,250,252,.9)); --card-text-shadow:none; color:var(--navy) } .services-build .build-fields a:nth-child(5){--card-overlay:linear-gradient(180deg,rgba(221,231,249,.38),rgba(246,248,252,.72))} .services-build .build-fields a:nth-child(3), .services-build .build-fields a:nth-child(6){ --card-surface:var(--build-electric); --card-overlay:linear-gradient(180deg,rgba(36,87,211,.46),rgba(25,67,172,.82)) } .services-build .build-fields a>*{position:relative;z-index:2} .services-build .build-fields .build-card-number{margin:0;color:#79a1ff;font-size:.75rem;font-weight:500;letter-spacing:.02em} .services-build .build-fields a:nth-child(2) .build-card-number, .services-build .build-fields a:nth-child(5) .build-card-number{color:var(--build-electric)} .services-build .build-fields strong{margin:0;font-size:clamp(1.2rem,1.55vw,1.75rem);font-weight:650;letter-spacing:-.045em;line-height:1.05;overflow-wrap:anywhere;text-shadow:var(--card-text-shadow);transition:transform .35s cubic-bezier(.22,.61,.36,1)} /* Ruhiger Hover: die Kartenform steht still, nur das Bild zoomt langsam, der Farbschleier wird etwas leichter und der Titel rueckt ein Stueck ein. */ @media(hover:hover) and (pointer:fine){ .services-build .build-fields a:hover::before{transform:scale(1.06)} .services-build .build-fields a:hover::after{opacity:.88} .services-build .build-fields a:hover strong{transform:translateX(6px)} } /* Tastaturfokus: eigener Ring entlang der Kartenform (ein normaler Outline liegt unter dem Farbschleier und waere unsichtbar). */ .services-build .build-fields a:focus-visible{outline:none;background:currentColor} .services-build .build-fields a:focus-visible::before, .services-build .build-fields a:focus-visible::after{clip-path:var(--card-shape-inner);transform:none} @media(min-width:981px){ .services-build{padding-block:clamp(3rem,5vh,4.5rem)} .services-build .services-layout{display:block} .services-build .services-heading{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"label action" "title action" "copy action"; align-items:center; column-gap:clamp(3rem,8vw,9rem); margin-bottom:clamp(2rem,4vh,3rem) } .services-build .services-heading .eyebrow{grid-area:label} .services-build .services-heading h2{grid-area:title;max-width:none;margin:.8rem 0 .9rem;color:var(--navy);font-size:clamp(3rem,4.6vw,4.6rem);line-height:.92;white-space:nowrap} .services-build .services-heading>p:last-of-type{grid-area:copy;margin:0} .services-build .services-heading .inline-phone{grid-area:action;min-width:245px;min-height:60px;margin:0;padding:1rem 1.7rem} .services-build .build-fields a{min-height:clamp(175px,20vh,195px)} } @media(max-width:980px){ .services-build{padding-block:clamp(4rem,8vw,6rem)} .services-build .services-layout{display:block} .services-build .services-heading{display:block;margin-bottom:clamp(2.2rem,6vw,3.5rem)} .services-build .services-heading h2{max-width:12ch;margin:1rem 0 1.2rem;color:var(--navy);font-size:clamp(3rem,8vw,4.8rem);line-height:.94} .services-build .services-heading .inline-phone{min-height:56px;margin-top:1.4rem;padding:.9rem 1.35rem} .services-build .build-fields a{min-height:170px} } @media(max-width:560px){ .services-build{--build-slant:22px;padding-block:3.5rem} .services-build .services-heading h2{font-size:clamp(3rem,14vw,4.3rem)} .services-build .build-fields{gap:8px} .services-build .build-fields a{min-height:145px;padding:1.25rem calc(var(--build-slant) + 1rem) 1.25rem 1.25rem} .services-build .build-fields a:nth-child(2), .services-build .build-fields a:nth-child(3), .services-build .build-fields a:nth-child(4), .services-build .build-fields a:nth-child(6), .services-build .build-fields a:nth-child(7){padding-left:calc(var(--build-slant) + 1rem)} .services-build .build-fields strong{font-size:clamp(1.45rem,7.5vw,2rem)} } @media(prefers-reduced-motion:reduce){ .services-build .build-fields a:hover::before, .services-build .build-fields a:hover strong{transform:none} } /* Referenzdesign: So beginnt Ihr Projekt */ .process-reference{ --process-electric:#2259d6; --process-intro:var(--navy); --process-panel:#06132f; --process-card:#0a214d; --process-paper:#f3f0e8; --process-cut:clamp(18px,1.7vw,28px); --process-step-gap:clamp(1rem,2.4vh,1.5rem); width:100%; min-height:calc(100svh - 92px); margin:0; padding:0; display:grid; grid-template-columns:minmax(320px,32.5%) minmax(0,1fr); gap:0; overflow:hidden; background:var(--process-panel) } .process-reference>header{ min-width:0; display:flex; flex-direction:column; justify-content:center; padding:clamp(3rem,6vh,5rem) clamp(2rem,5.25vw,5.25rem); padding-bottom:clamp(6rem,16vh,10rem); background:var(--process-intro); color:#fff } .process-reference>header .section-index{ color:#fff; font-size:.7rem; letter-spacing:.26em; opacity:.9 } .process-reference>header h2{ max-width:370px; margin:1.65rem 0 0; color:#fff; font-size:clamp(2.75rem,4.25vw,4.25rem); font-weight:650; letter-spacing:-.055em; line-height:1.08 } .process-reference .process-steps{ min-width:0; display:grid; grid-template-rows:repeat(3,minmax(145px,22vh)); align-content:center; justify-items:center; gap:var(--process-step-gap); padding:clamp(2rem,4.9vh,2.75rem) clamp(2rem,4.4vw,4.4rem); border:0; background:var(--process-panel) } .process-reference .process-steps article{ --process-image:none; --process-position:center; --process-overlay:linear-gradient(90deg,rgba(10,33,77,.9) 0%,rgba(10,33,77,.72) 58%,rgba(10,33,77,.52) 100%); --process-text-shadow:0 1px 12px rgba(3,12,34,.42); width:100%; min-width:0; min-height:0; position:relative; isolation:isolate; overflow:hidden; display:block; margin-inline:0; padding:clamp(1.65rem,2.15vw,2.15rem) calc(clamp(1.65rem,2.15vw,2.15rem) + var(--process-cut)); border:0; clip-path:polygon(var(--process-cut) 0,100% 0,calc(100% - var(--process-cut)) 100%,0 100%); background:var(--process-card); color:#fff } .process-reference .process-steps article::before, .process-reference .process-steps article::after{ content:""; position:absolute; inset:0; pointer-events:none } .process-reference .process-steps article::before{ z-index:0; background-image:var(--process-image); background-position:var(--process-position); background-size:cover; background-repeat:no-repeat; transition:transform .55s cubic-bezier(.22,.61,.36,1) } .process-reference .process-steps article::after{ z-index:1; background:var(--process-overlay); transition:opacity .3s ease } .process-reference .process-steps article>*{ position:relative; z-index:2; text-shadow:var(--process-text-shadow) } .process-reference .process-steps article:first-child{ --process-image:url("assets/ablauf/webp/bereich-waehlen-v1.webp"); --process-position:center 58%; border:0 } .process-reference .process-steps article:nth-child(2){ --process-image:url("assets/ablauf/webp/vorhaben-schildern-v1.webp"); --process-position:center 55%; --process-overlay:linear-gradient(90deg,rgba(34,89,214,.88) 0%,rgba(34,89,214,.7) 58%,rgba(34,89,214,.48) 100%); background:var(--process-electric) } .process-reference .process-steps article:nth-child(3){ --process-image:url("assets/ablauf/webp/details-abstimmen-v1.webp"); --process-position:center 56%; --process-overlay:linear-gradient(90deg,rgba(243,240,232,.95) 0%,rgba(243,240,232,.8) 60%,rgba(243,240,232,.62) 100%); --process-text-shadow:none; background:var(--process-paper); color:var(--navy) } .process-reference .process-steps article>span{ display:block; color:#79a1ff; font-size:clamp(.82rem,1vw,1rem); font-weight:500; letter-spacing:.02em; line-height:1.2 } .process-reference .process-steps article:nth-child(2)>span{color:#dce7ff} .process-reference .process-steps article:nth-child(3)>span{color:var(--process-electric)} .process-reference .process-steps h3{ margin:clamp(1.35rem,2.5vh,1.75rem) 0 .55rem; color:inherit; font-size:clamp(1.75rem,2.4vw,2.5rem); font-weight:650; letter-spacing:-.035em; line-height:1.08 } .process-reference .process-steps p{ margin:0; color:#b8c0d0; font-size:clamp(.92rem,1.08vw,1.08rem); line-height:1.5 } .process-reference .process-steps article:nth-child(2) p{color:#e4eafa} .process-reference .process-steps article:nth-child(3) p{color:#647083} .process-reference .process-steps article>div{transition:transform .35s cubic-bezier(.22,.61,.36,1)} @media(hover:hover) and (pointer:fine){ /* Gleiche ruhige Handschrift wie bei den Leistungskarten */ .process-reference .process-steps article:hover::before{transform:scale(1.06)} .process-reference .process-steps article:hover::after{opacity:.88} .process-reference .process-steps article:hover>div{transform:translateX(6px)} } @media(max-width:980px){ .process-reference{ min-height:auto; grid-template-columns:1fr } .process-reference>header{ min-height:420px; padding:4.5rem clamp(1.2rem,8vw,4rem) } .process-reference>header h2{ max-width:370px; font-size:clamp(3.4rem,9vw,5rem) } .process-reference .process-steps{ grid-template-rows:none; --process-step-gap:1rem; padding:clamp(2rem,7vw,4rem) clamp(1.2rem,7vw,4rem) } .process-reference .process-steps article{ min-height:170px; padding:1.6rem calc(1.6rem + var(--process-cut)) } } @media(max-width:560px){ .process-reference{--process-cut:16px} .process-reference>header{ min-height:390px; padding:3.75rem 1.2rem } .process-reference>header h2{ font-size:clamp(3.15rem,16vw,4.3rem) } .process-reference .process-steps{padding:1.5rem 1.2rem 2.5rem} .process-reference .process-steps article{ min-height:165px; padding:1.4rem calc(1.4rem + var(--process-cut)) } .process-reference .process-steps h3{font-size:clamp(1.7rem,8vw,2.2rem)} } @media(prefers-reduced-motion:reduce){ .process-reference .process-steps article:hover>div, .process-reference .process-steps article:hover::before{transform:none} } /* Kompakter Startbereich: Logo und beide Aktionen im ersten Viewport */ .flyer-hero{ min-height:min(calc(100svh - 124px),44rem) } .flyer-half{ display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; align-content:stretch; padding:clamp(2.2rem,3.5vw,3.75rem) clamp(1.5rem,5vw,5.5rem) clamp(12.5rem,15vw,13.5rem) } .flyer-half-head p{ font-size:clamp(2.1rem,4.2vw,4.75rem); line-height:.84 } .flyer-subline{ margin:.7rem 0 1rem } .flyer-half ul{ align-self:stretch; display:grid; grid-auto-rows:1fr } .flyer-half li{ padding:.28rem 0; font-size:clamp(.78rem,.92vw,.95rem); line-height:1.35 } .flyer-action{ min-height:54px; align-self:end; margin-top:clamp(.75rem,2vh,1.25rem) } .flyer-logo{ width:clamp(210px,22vw,320px); bottom:-1.25rem } @media(max-width:980px){ .flyer-hero{min-height:calc(100svh - 114px)} .flyer-half{ padding:clamp(1.9rem,5vw,2.5rem) clamp(.85rem,3.5vw,1.5rem) clamp(10rem,20vw,12rem) } .flyer-logo{ width:clamp(210px,32vw,280px); bottom:-.75rem } } @media(max-width:560px){ .flyer-hero{min-height:calc(100svh - 114px)} .flyer-half{padding:1.65rem .85rem 8.5rem} .flyer-half-head p{ font-size:clamp(1.65rem,8.5vw,2.5rem); line-height:.84 } .flyer-subline{ min-height:0; margin:.55rem 0 .75rem } .flyer-half li{ padding:.25rem 0; font-size:clamp(.61rem,2.7vw,.76rem); line-height:1.25 } .flyer-action{min-height:42px} .flyer-logo{ width:min(58vw,220px); bottom:-.5rem } } /* Reines Bauangebot: kompakter Einspalten-Dropdown */ .dropdown-panel{ right:0; width:min(350px,calc(100vw - 2.4rem)); grid-template-columns:minmax(0,1fr) } .dropdown-panel>div{ min-width:0 } /* Reines Bauangebot: Hero im Verhältnis 2/3 Leistungen zu 1/3 Logo */ .split-build-hero{ min-height:calc(100svh - 92px); display:grid; grid-template-columns:minmax(0,2fr) minmax(300px,1fr); position:relative; overflow:hidden; background:url("assets/hero/bau-innenausbau-v1.webp") center/cover no-repeat } .split-build-services, .split-build-logo-panel{ position:relative } .split-build-services::before, .split-build-logo-panel::before{ content:""; position:absolute; inset:clamp(.75rem,1.5vw,1.5rem); border:1px solid currentColor; opacity:.14; pointer-events:none } .split-build-services{ display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; align-content:stretch; padding:clamp(2.75rem,5vw,5.5rem) max(clamp(2rem,5vw,5.5rem),calc((100vw - 88rem)/2 + 5rem)) clamp(2.5rem,4vw,4.5rem); background:linear-gradient(135deg,rgba(11,31,79,.86),rgba(6,18,46,.83)); color:#fff } .split-build-kicker{ margin:0 0 .75rem; color:#9eb4eb; font-size:.67rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase } .split-build-services h1{ margin:.7cm 0 clamp(1.25rem,2.5vh,2rem); color:#fff; font-size:clamp(3.25rem,6vw,6.5rem); font-weight:650; letter-spacing:-.07em; line-height:.86 } .split-build-services ul{ width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; column-gap:clamp(2rem,6vw,7rem); list-style:none; margin:0; padding:0 } .split-build-services li{ border-bottom:1px solid rgba(255,255,255,.24) } .split-build-services li:nth-child(-n+2){ border-top:1px solid rgba(255,255,255,.24) } .split-build-services li:nth-child(odd):last-child{ grid-column:1/-1 } .split-build-services li a{ min-height:46px; display:flex; align-items:center; gap:.75rem; color:#fff; font-size:clamp(.82rem,1.05vw,1rem); text-decoration:none; transition:padding-left .2s ease,color .2s ease } .split-build-services li a::before{ content:""; width:.3rem; height:.3rem; flex:0 0 auto; border-radius:50%; background:#9eb4eb } .split-build-services li a:hover{ padding-left:.4rem; color:#dce7ff } .split-build-cta{ width:max-content; min-width:245px; min-height:58px; display:inline-flex; align-items:center; justify-content:center; gap:1.2rem; padding:.9rem 1.5rem; clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); margin-top:clamp(1.25rem,2.5vh,2rem); background:#fff; color:var(--navy); font-size:.75rem; font-weight:750; text-decoration:none; transition:transform .2s ease,background-color .2s ease } .split-build-cta:hover{ transform:translateY(-3px); background:var(--sand) } .split-build-cta:focus-visible{ clip-path:none } .split-build-logo-panel{ display:grid; place-items:center; padding:clamp(2rem,4vw,4.5rem); background: radial-gradient(circle at 50% 50%,rgba(255,255,255,.36),transparent 22rem), linear-gradient(rgba(242,239,231,.78),rgba(242,239,231,.84)), url("assets/hero/leonardo-hero-tisch-v1.webp") center/cover no-repeat; color:var(--navy) } .split-build-logo-content{ width:min(100%,30rem); display:grid; justify-items:center; gap:clamp(1.25rem,2vw,2rem) } .split-build-logo-panel img{ width:100%; height:auto; display:block } .epoxy-hero-cta{ width:201px; height:35px; position:relative; justify-self:start; margin-left:calc((100% - 201px)/2); display:grid; grid-template-columns:156px 35px; column-gap:10px; align-items:center; /* Dunkelblau statt Weiss: der Schriftzug steht auf dem hellen Schleier des Panels, weiss war dort kontrastarm. Der Pfeil im Kreis behaelt sein Weiss ueber .epoxy-hero-cta-arrow. */ color:var(--navy); font-family:Arial,Helvetica,sans-serif; font-size:18px; font-weight:400; letter-spacing:-.025em; line-height:1; white-space:nowrap; text-decoration:none } .epoxy-hero-cta-label{ width:156px; height:35px; position:relative; display:flex; align-items:center; padding:0 0 9px } .epoxy-hero-cta-label::after{ position:absolute; right:-2px; bottom:0; left:-2px; height:10px; background:#265bb8; -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat; mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M3 5.5 C60 4.6,140 4.6,197 5 L197 5.6 C140 5.2,70 5.7,3 8.6 Z' fill='%23000'/%3E%3C/svg%3E") left bottom / 100% 100% no-repeat; content:"" } .epoxy-hero-cta-arrow{ width:35px; height:35px; display:grid; place-items:center; border-radius:50%; background:#265bb8; color:#fff; transition:transform .2s ease,background-color .2s ease } .epoxy-hero-cta-arrow svg{ width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round } .epoxy-hero-cta:hover .epoxy-hero-cta-arrow{ transform:translateX(4px); background:#1f4f9f } .epoxy-hero-cta:focus-visible{ outline-offset:.5rem } @media(max-width:980px){ .dropdown-panel{ width:100% } .split-build-hero{ min-height:calc(100svh - 82px); grid-template-columns:minmax(0,2fr) minmax(230px,1fr) } .split-build-services{ padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem) } .split-build-services h1{ font-size:clamp(3rem,7vw,4.5rem) } .split-build-services ul{ grid-template-columns:1fr; align-content:center } .split-build-services li:nth-child(2){ border-top:0 } .split-build-services li:nth-child(odd):last-child{ grid-column:auto } .split-build-services li a{ min-height:40px } } @media(max-width:560px){ .split-build-hero{ min-height:calc(100svh - 82px); grid-template-columns:1fr; grid-template-rows:minmax(0,1.8fr) minmax(175px,1fr) } .split-build-services{ padding:1.65rem 1.25rem 1.4rem } .split-build-services h1{ margin-bottom:.9rem; font-size:clamp(2.6rem,13vw,3.6rem) } .split-build-services li a{ min-height:31px; font-size:.75rem } .split-build-cta{ width:100%; min-width:0; min-height:46px; margin-top:1rem } .split-build-logo-panel{ padding:1.25rem 2rem } .split-build-logo-panel img{ width:min(76vw,19rem) } } /* ============================================================ HANDYMODUS Grundlagen fuer Touch, Menue als echtes Drawer, feste Anruf-Leiste, Trefferflaechen und Mindestschriftgroessen. ============================================================ */ :root{ --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px); --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px) } html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overscroll-behavior-x:none} /* Solange das Menue offen ist, steht die Seite dahinter still. */ html.nav-open{overflow:hidden} /* Touch hat kein Hover: statt des blauen Systemblitzes ein eigenes Druck-Feedback. */ @media(hover:none){ a,button,summary,label,input,select,textarea{-webkit-tap-highlight-color:transparent} .nav-phone:active,.inline-phone:active,.form-submit:active,.contact-phone:active, .flyer-action:active{transform:translateY(1px)} .build-fields a:active::after, .process-steps article:active::after{opacity:.78} .main-nav>a:active,.nav-dropdown:active,.dropdown-panel a:active{background:rgba(11,31,79,.06)} } /* Notch, Dynamic Island und Landscape-Kerben freihalten. */ .site-header{ height:calc(92px + var(--safe-t)); padding-top:var(--safe-t); padding-left:calc(clamp(1.2rem,5vw,5rem) + var(--safe-l)); padding-right:calc(clamp(1.2rem,5vw,5rem) + var(--safe-r)) } @media(max-width:980px){ html{ scroll-padding-top:calc(82px + var(--safe-t)) } .site-header{height:calc(82px + var(--safe-t))} /* --- Menue --- */ .main-nav{ top:100%; max-height:calc(100dvh - 82px - var(--safe-t)); overscroll-behavior:contain; padding:.75rem calc(1.2rem + var(--safe-r)) calc(2rem + var(--safe-b)) calc(1.2rem + var(--safe-l)) } html.nav-open body::before{ content:""; position:fixed; inset:0; z-index:35; background:rgba(6,18,46,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px) } .menu-toggle{min-height:48px;padding-inline:.25rem} .menu-toggle:focus-visible{outline:3px solid var(--navy);outline-offset:2px} .main-nav>a:not(.nav-phone),.nav-dropdown,.nav-termin{ min-height:56px; display:flex; align-items:center; padding:.9rem 0; font-size:1.02rem } .dropdown-panel>div{padding:1rem 1.1rem} .dropdown-panel a{min-height:52px;display:flex;align-items:center;padding:.35rem 0} /* --- Mindestschriftgroessen (nichts unter 12px) --- */ .eyebrow,.section-index,.split-build-kicker{font-size:.75rem;letter-spacing:.17em} .process-reference>header .section-index{font-size:.78rem;letter-spacing:.22em} .form-field label{font-size:.8rem} .form-field label span,.contact-phone small,.form-note,.footer-links{font-size:.78rem} /* --- Trefferflaechen --- */ .footer-links a{display:inline-flex;align-items:center;min-height:48px} .split-build-services li a{display:flex;align-items:center;min-height:48px} .faq-list summary{min-height:56px} /* --- Ablauf: der Kopf verbrauchte einen ganzen Screen Leerraum --- */ .process-reference>header{min-height:auto;padding:3.25rem clamp(1.2rem,8vw,4rem) 2.75rem} } @media(max-width:560px){ .process-reference>header{min-height:auto;padding:2.75rem 1.2rem 2.25rem} } /* Querformat: wenig Hoehe, darum das Menue verdichten. */ @media(max-width:980px) and (orientation:landscape) and (max-height:560px){ .main-nav{padding-top:.35rem;padding-bottom:calc(.6rem + var(--safe-b))} .main-nav>a:not(.nav-phone),.nav-dropdown,.nav-termin{min-height:46px;padding:.45rem 0;font-size:.98rem} .main-nav .nav-phone{min-height:52px;margin-top:.7rem!important} .dropdown-panel a{min-height:44px} } /* ============================================================ HANDYMODUS - eigene Gestaltung Der Handymodus folgt bewusst nicht dem Desktop-Aufbau: eigenes Burger-Menue, dunkles Drawer, Hero ohne Logotafel, und alle geschnittenen Kaesten in einer einzigen Form. ============================================================ */ @media(max-width:980px){ /* --- Burger als echter Button in der Formsprache der Seite --- */ .menu-toggle{ min-height:52px; gap:.75rem; padding:.55rem 1.15rem; border:0; clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); background:var(--navy); color:#fff; font-size:.76rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; transition:background-color .2s ease } /* Drei Striche: der mittlere ist das selbst, oben und unten je ein Pseudo-Element. Beim Oeffnen verschwindet der mittlere, die beiden aeusseren fahren zusammen und kippen zum X. */ .menu-toggle i{ width:22px; height:2px; position:relative; margin-left:0; background:#fff; transition:background-color .2s ease } .menu-toggle i::before, .menu-toggle i::after{ content:""; position:absolute; left:0; width:22px; height:2px; margin:0; background:#fff; transition:transform .25s ease } .menu-toggle i::before{top:-7px} .menu-toggle i::after{top:7px} .menu-toggle[aria-expanded=true]{background:#2d5ed9} .menu-toggle[aria-expanded=true] i{transform:none;background:transparent} .menu-toggle[aria-expanded=true] i::before{transform:translateY(7px) rotate(45deg)} .menu-toggle[aria-expanded=true] i::after{transform:translateY(-7px) rotate(-45deg)} .menu-toggle:focus-visible{outline:3px solid var(--navy);outline-offset:3px;clip-path:none} /* --- Drawer: dunkle Flaeche statt Papier --- */ .main-nav{background:var(--navy-dark);border-bottom:0;color:#fff} .main-nav>a:not(.nav-phone), .nav-dropdown, .nav-termin{ color:#fff; border-bottom:1px solid rgba(255,255,255,.16); font-size:1.05rem; letter-spacing:.05em } .nav-dropdown span{color:#9eb4eb} .dropdown-panel, .dropdown-panel>div, .dropdown-panel>div:first-child{background:transparent;color:#fff} .dropdown-panel>div{padding:.85rem 0 1.1rem} .dropdown-label{color:#9eb4eb;opacity:1;font-size:.75rem} .dropdown-panel a{color:#fff;border-bottom:1px solid rgba(255,255,255,.1)} .main-nav>a:active, .nav-dropdown:active, .dropdown-panel a:active{background:rgba(255,255,255,.09)} /* Anruf-Button im dunklen Drawer umgekehrt: helle Flaeche, Navy-Schrift */ .main-nav .nav-phone{--phone-fill:#fff;--phone-rim:#fff} .main-nav .nav-phone .phone-copy small{color:var(--blue)} .main-nav .nav-phone .phone-copy strong{color:var(--navy)} .main-nav .nav-phone:hover{--phone-fill:var(--sand)} .main-nav .nav-phone:focus-visible{--phone-rim:#2d5ed9} /* --- Hero: die Epoxidharz-Tafel kommt als zweite Reihe zurueck (Karte #239, Wunsch Constantin). Hintergrundfoto, Knopf und Text sind dieselben wie im Desktop; nur das LOGO darin bleibt aus - es steht wenige Pixel darueber schon im Header, und genau deshalb war die Tafel hier urspruenglich ganz ausgeblendet. Dabei fiel die Epoxidharz-Werbung mit weg, das war der Fehler. Die Leistungsliste behaelt ihre volle Bildschirmhoehe - die Mindesthoehe wandert dafuer vom Hero auf die Liste. Die Tafel haengt sich darunter, der Hero wird also hoeher als ein Bildschirm. Diese Regeln stehen NACH dem 560px-Block weiter oben und gewinnen dort deshalb; das ist so gewollt. --- */ .split-build-hero{ grid-template-columns:1fr; grid-template-rows:auto auto; min-height:0 } .split-build-services{ min-height:calc(100svh - 82px - var(--safe-t)) } .split-build-logo-panel{ display:grid; min-height:clamp(12rem,30svh,18rem); padding:1.75rem calc(1.35rem + var(--safe-r)) calc(1.75rem + var(--safe-b)) calc(1.35rem + var(--safe-l)) } .split-build-logo-panel img{display:none} .split-build-services{ padding:2.25rem calc(1.35rem + var(--safe-r)) 2rem calc(1.35rem + var(--safe-l)) } .split-build-services h1{margin-top:.35rem} /* Die Leistungsliste fuellt den freien Raum, statt ihn als Loch stehen zu lassen - jede Zeile wird dadurch zugleich groesser antippbar. */ .split-build-services ul{ align-content:stretch; grid-auto-rows:minmax(52px,1fr) } .split-build-services li{display:flex} .split-build-services li a{width:100%;min-height:52px;font-size:.95rem} /* Auf Touch bleibt der Hover-Zustand nach dem Tippen haengen: im dunklen Drawer waere Navy-Blau auf Navy unlesbar. */ .main-nav>a:not(.nav-phone):hover, .nav-dropdown:hover, .dropdown-panel a:hover{color:#9eb4eb} /* Riesenwoerter im Hintergrund sind Desktop-Schmuck. */ .contact-word{display:none} /* --- Eine Kartenform fuer alles: Kante links, Schraege rechts --- */ .services-build .build-fields a, .services-build .build-fields a:nth-child(2), .services-build .build-fields a:nth-child(3), .services-build .build-fields a:nth-child(4), .services-build .build-fields a:nth-child(6), .services-build .build-fields a:nth-child(7){ --card-shape:polygon(0 0,100% 0,calc(100% - var(--build-slant)) 100%,0 100%); --card-shape-inner:polygon(5px 5px,calc(100% - 5px) 5px,calc(100% - var(--build-slant) - 5px) calc(100% - 5px),5px calc(100% - 5px)); padding-left:clamp(1.2rem,1.8vw,1.8rem) } .process-reference .process-steps article{ clip-path:polygon(0 0,100% 0,calc(100% - var(--process-cut)) 100%,0 100%); padding-left:1.6rem } } @media(max-width:560px){ .services-build .build-fields a, .services-build .build-fields a:nth-child(2), .services-build .build-fields a:nth-child(3), .services-build .build-fields a:nth-child(4), .services-build .build-fields a:nth-child(6), .services-build .build-fields a:nth-child(7){padding-left:1.25rem} .process-reference .process-steps article{padding-left:1.4rem} .split-build-services{padding:1.9rem 1.25rem 1.6rem} } /* Sehr niedrige Displays (iPhone SE u. ae.): Zeilen etwas kompakter, damit moeglichst viel vom Hero ohne Scrollen sichtbar bleibt. */ @media(max-width:980px) and (max-height:640px){ .split-build-services ul{grid-auto-rows:minmax(46px,1fr)} .split-build-services li a{min-height:46px} .split-build-services h1{font-size:clamp(2.4rem,11vw,3.2rem)} } /* Gleiche Silbentrennung auf der Startseite. */ @media(max-width:980px){ .services-build .build-fields strong, .services-design .design-fields strong, .split-build-services h1, .services-heading h2, .faq-heading h2, .contact-form-intro h2, .process-reference>header h2{ overflow-wrap:break-word; hyphens:auto } } /* ============================================================ HANDYMODUS - Menue ohne Aufklapper Die Leistungen stehen direkt im Menue, es gibt keine feste Leiste mehr: alles sitzt hinter dem Burger-Button. ============================================================ */ .dropdown-label-phone{display:none} @media(max-width:980px){ .nav-dropdown{display:none} .dropdown-label-desktop{display:none} .dropdown-label-phone{display:block} /* Panel ist im Handymodus immer offen - kein Auf- und Zuklappen. */ .dropdown-panel{display:grid;width:100%} .dropdown-panel>div{padding:0} .dropdown-panel .dropdown-label{ margin:1.4rem 0 .2rem; color:#9eb4eb; font-size:.75rem; font-weight:800; letter-spacing:.18em; opacity:1 } .dropdown-panel a{ min-height:52px; display:flex; align-items:center; padding:.35rem 0; border-bottom:1px solid rgba(255,255,255,.12); color:#fff; font-size:1rem; letter-spacing:.01em } .dropdown-panel a:last-child{border-bottom:0} /* Der Anruf-Button schliesst das Menue ab. */ .main-nav .nav-phone{margin-top:1.4rem!important} } /* ============================================================ Kontaktformular in der Formsprache der Buttons ------------------------------------------------------------ Die Seite schneidet bei Buttons die Ecken oben rechts und unten links ab (.nav-phone, .split-build-cta, .contact-phone, .form-submit). Das Formular war als einziger Block noch rein rechteckig. Eingabefelder koennen kein ::before tragen, deshalb liegt die Schraege auf der Huelle .field-shape: aussen der Rand, innen das Feld - dasselbe Muster wie bei .nav-phone. Rand laeuft ueber eine Variable, damit Hover und Fokus nur eine Farbe tauschen und die Feldgroesse dabei gleich bleibt. ============================================================ */ .field-shape{ --feld-schraege:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px)); --feld-rand:rgba(11,31,79,.26); display:block; padding:2px; clip-path:var(--feld-schraege); background:var(--feld-rand); transition:background-color .2s ease } .field-shape:hover{--feld-rand:var(--navy)} /* Tastaturfokus: der Rand uebernimmt die Fokusfarbe der Seite, weil ein echtes outline von der Schraege abgeschnitten wuerde. */ .field-shape:focus-within{--feld-rand:#c2410c} .form-field .field-shape input, .form-field .field-shape select, .form-field .field-shape textarea{ display:block; width:100%; border:0; clip-path:var(--feld-schraege); background-color:#f7f4ee; outline:none } /* Eigener Pfeil, damit das Auswahlfeld nicht als Fremdkoerper im Systemdesign steht. */ .form-field .field-shape select{ appearance:none; padding-right:2.8rem; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%230b1f4f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1.15rem center; background-size:12px 8px; cursor:pointer } /* Die Karte selbst bekommt die gleiche Ecke, nur groesser. clip-path wuerde einen box-shadow abschneiden, drop-shadow folgt dagegen der beschnittenen Form. */ .project-form{ clip-path:polygon(0 0,calc(100% - 30px) 0,100% 30px,100% 100%,30px 100%,0 calc(100% - 30px)); box-shadow:none; filter:drop-shadow(0 24px 44px rgba(0,0,0,.22)) } /* Ergebnisblock: die blaue Kante links wich der umlaufenden Randform, sonst haette die abgeschnittene Ecke sie angeschnitten. */ .form-result{ --ergebnis-schraege:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px)); position:relative; isolation:isolate; border-left:0; padding:1.5rem; clip-path:var(--ergebnis-schraege); background:var(--blue) } .form-result::before{ content:""; position:absolute; inset:3px; z-index:0; clip-path:var(--ergebnis-schraege); background:var(--paper) } .form-result>*{position:relative;z-index:1} @media(max-width:560px){ .project-form{ clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px)) } } /* ============================================================ Terminkalender-Widget ------------------------------------------------------------ Gleiche Formsprache wie der Rest: abgeschnittene Ecken oben rechts und unten links. Rand und Fuellung laufen ueber Variablen, damit Hover und Fokus nur eine Farbe tauschen und die Groesse dabei stehen bleibt (Muster von .nav-phone). ============================================================ */ /* Der Termin-Eintrag traegt keine eigene Optik: er haengt in den Link-Regeln der Navigation weiter oben mit drin und sieht damit aus wie Start, Leistungen und Ablauf. Einzige Ausnahme: erbt die Textfarbe ueber die Grundregel a{color:inherit}, ein