:root{--navy:#09243c;--navy2:#0d3351;--petrol:#16869b;--teal:#1f9ba4;--ink:#143047;--muted:#5b6c78;--light:#f3f7f8;--line:#dbe5e9;--white:#fff;--shadow:0 22px 70px rgba(12,47,70,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65;background:white}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:Arial,Helvetica,sans-serif;line-height:1.17;letter-spacing:-.045em}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--petrol);outline-offset:4px}.container{width:min(1180px,calc(100% - 64px));margin-inline:auto}.section{padding:105px 0}.skip{position:absolute;top:-90px;left:12px;background:white;padding:10px;z-index:100}.skip:focus{top:12px}.topline{background:var(--navy);color:#cddce5;font-size:11px;letter-spacing:.035em}.topline-inner{display:flex;justify-content:space-between;padding:8px 0}.site-header{background:rgba(255,255,255,.96);position:sticky;top:0;z-index:50;border-bottom:1px solid #ecf0f2;backdrop-filter:blur(14px)}.nav-wrap{height:88px;display:flex;align-items:center;justify-content:space-between;gap:30px}.brand{display:flex;align-items:center}.brand img{width:242px;height:auto;display:block}.nav{display:flex;align-items:center;gap:31px}.nav>a:not(.btn){font-weight:700;font-size:13px;color:#344a5b;transition:color .2s}.nav>a:hover{color:var(--petrol)}.btn{background:var(--petrol);color:white;display:inline-flex;align-items:center;justify-content:center;gap:23px;border:1px solid var(--petrol);border-radius:6px;padding:16px 24px;font-size:13px;font-weight:700;box-shadow:0 7px 19px rgba(22,134,155,.14);transition:background .2s,transform .2s}.btn:hover{background:#116d80;transform:translateY(-2px)}.btn-small{padding:12px 17px;gap:15px}.menu-toggle{display:none}.hero{background:radial-gradient(circle at 88% 32%,#dfeff0 0,transparent 34%),linear-gradient(110deg,#fff 10%,#f5fafb 100%);padding:96px 0 96px;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.02fr 1fr;align-items:center;gap:60px}.eyebrow,.section-label{font-size:11px;font-weight:800;letter-spacing:.19em;color:var(--petrol);margin:0 0 25px}.eyebrow{display:flex;align-items:center;gap:12px}.eyebrow-line{display:inline-block;width:26px;height:2px;background:var(--petrol)}.hero h1{font-size:clamp(47px,5vw,70px);font-weight:800;max-width:700px;margin-bottom:28px}.hero h1 em{font-style:normal;color:var(--petrol)}.hero-lead{color:#556976;font-size:17px;line-height:1.85;max-width:525px}.hero-actions{display:flex;align-items:center;gap:29px;margin-top:31px}.text-link{font-size:13px;font-weight:800;display:inline-flex;align-items:center;gap:14px;color:var(--navy)}.text-link:hover{color:var(--petrol)}.hero-proof{display:flex;flex-wrap:wrap;gap:20px;margin-top:44px;color:#637582;font-size:11px;font-weight:700}.check{color:var(--petrol);margin-right:5px}.hero-art{min-height:480px;position:relative;display:flex;align-items:center;justify-content:center}.aura{position:absolute;width:480px;height:480px;background:#dceef1;border-radius:50%;filter:blur(5px);right:0}.browser-card{position:relative;z-index:1;width:520px;background:white;border:1px solid #e0e8ed;border-radius:13px;box-shadow:0 35px 100px rgba(8,47,69,.18);transform:rotate(-3deg);overflow:hidden}.browser-bar{height:35px;background:#f0f4f5;border-bottom:1px solid #e6edef;display:flex;align-items:center;justify-content:space-between;padding:0 17px;color:#8296a0;font-size:9px}.dots{display:flex;gap:5px}.dots i,.work-bar i{width:7px;height:7px;border-radius:50%;background:#cbd5da}.dots i:first-child,.work-bar i:first-child{background:#efb8a9}.dots i:nth-child(2),.work-bar i:nth-child(2){background:#eed6a3}.browser-lock{font-size:18px}.demo-nav{height:65px;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.demo-logo{display:flex;align-items:center;gap:9px;font:800 12px Arial;color:#15334a}.demo-logo i{width:23px;height:23px;border-radius:5px;background:var(--petrol)}.demo-links{display:flex;gap:12px}.demo-links i{display:block;width:35px;height:4px;background:#dbe5e6;border-radius:3px}.demo-pill{width:67px;height:20px;border-radius:3px;background:var(--navy)}.demo-body{padding:26px 28px 28px;display:grid;grid-template-columns:1.2fr 1fr;gap:20px;background:#f8fbfb}.demo-left{padding-top:20px}.demo-kicker{width:75px;height:7px;background:#4c9aa7;border-radius:3px;margin-bottom:19px}.demo-heading{height:17px;background:#1b3952;border-radius:3px;margin-bottom:8px}.demo-heading.one{width:90%}.demo-heading.two{width:98%}.demo-heading.three{width:74%}.demo-paragraph{height:5px;background:#b8cbd0;margin-top:23px;width:100%;border-radius:3px}.demo-paragraph.short{width:82%;margin-top:7px}.demo-button{width:94px;height:25px;background:var(--petrol);border-radius:3px;margin-top:24px}.demo-photo{height:235px;border-radius:4px;position:relative;background:linear-gradient(140deg,#bedde2,#71a8b5);overflow:hidden}.photo-circle{position:absolute;background:#eaf8f5;width:155px;height:155px;border-radius:50%;top:15px;right:-25px;opacity:.75}.photo-arch{position:absolute;width:125px;height:230px;background:#174c65;border-radius:78px 78px 0 0;left:28px;bottom:-95px;transform:rotate(-17deg)}.photo-glow{position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.34);left:-45px;bottom:-80px}.demo-bottom{height:85px;display:flex;align-items:center;justify-content:space-around;padding:13px 20px}.demo-bottom>div{display:flex;align-items:center;gap:8px}.demo-bottom i{width:22px;height:22px;background:#d3e8eb;border-radius:5px}.demo-bottom span{width:60px;height:6px;background:#dee8e9;border-radius:3px}.floating-label{position:absolute;z-index:3;background:white;border:1px solid #e8eff0;box-shadow:0 13px 36px rgba(9,36,60,.12);border-radius:7px;padding:12px 17px;font-size:11px;font-weight:800;color:var(--navy)}.top-float{top:18px;right:-5px}.bottom-float{bottom:24px;left:0}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#56b79f;margin-right:7px}.device-icon{font-size:21px;color:var(--petrol);margin-right:7px;vertical-align:middle}.trust-strip{border-bottom:1px solid var(--line);border-top:1px solid var(--line);background:#fff}.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);padding:28px 0;gap:36px}.trust-grid>div{display:flex;flex-direction:column;border-left:2px solid #d6e9e9;padding-left:24px}.trust-grid strong{font-size:13px}.trust-grid span{color:#697b87;font-size:12px}.section-top{display:flex;justify-content:space-between;gap:75px;align-items:end;margin-bottom:42px}.section-top h2,.faq-grid h2{font-size:clamp(34px,4vw,51px);margin:0}.section-intro{max-width:410px;color:var(--muted);font-size:15px;line-height:1.85;margin-bottom:0}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px}.service-card{padding:30px 25px 21px;border:1px solid var(--line);border-radius:7px;transition:transform .2s,box-shadow .2s;background:#fff;display:flex;flex-direction:column;min-height:272px}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-icon{width:48px;height:48px;border-radius:7px;background:#e9f5f5;color:var(--petrol);font-size:26px;display:grid;place-items:center;margin-bottom:25px}.service-card h3{font-size:17px;margin-bottom:10px}.service-card p{font-size:13px;color:var(--muted);line-height:1.75;flex:1}.service-card>span{font-size:10px;font-weight:800;color:#93a5ad;letter-spacing:.09em}.portfolio-section{background:var(--light)}.portfolio-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:19px}.work-card{grid-column:span 2;overflow:hidden;border-radius:8px;background:white;box-shadow:0 7px 25px rgba(12,47,70,.035)}.work-card.featured{grid-column:span 3}.work-preview{height:295px;padding:31px 42px 0;overflow:hidden}.work-preview.consulting{background:linear-gradient(120deg,#d9e2e8,#b7c9d7)}.work-preview.village{background:linear-gradient(120deg,#c5dac9,#f0e2c8)}.work-browser{height:300px;background:white;border-radius:7px 7px 0 0;box-shadow:0 15px 50px #123a4e2f;transform:rotate(-3deg);overflow:hidden}.village .work-browser{transform:rotate(3deg)}.work-bar{height:24px;background:#eff3f4;display:flex;align-items:center;padding:0 11px;gap:4px}.work-bar i{width:5px;height:5px}.work-bar span{color:#8599a0;font-size:8px;margin-left:auto;margin-right:auto}.work-content{height:260px;background:#fff;padding:27px 31px;display:flex;flex-direction:column;align-items:flex-start}.consulting .work-content{background:linear-gradient(105deg,#fff 45%,#d0e2eb)}.village .work-content{background:linear-gradient(105deg,#f7f9f1 47%,#a7c7ab)}.work-content>span:first-child{font-size:8px;font-weight:800;letter-spacing:.16em;color:var(--petrol)}.work-content b{font:800 25px/1.25 Arial;color:var(--navy);margin:17px 0}.work-lines i{display:block;width:160px;height:5px;background:#cad5dc;margin-bottom:7px;border-radius:3px}.work-lines i:nth-child(2){width:115px}.work-cta{background:var(--navy);color:white;font-size:8px;padding:8px 10px;margin-top:13px}.work-meta{min-height:133px;display:flex;justify-content:space-between;gap:10px;padding:22px 25px}.work-type{display:block;font-size:9px;color:var(--petrol);letter-spacing:.11em;font-weight:800;margin-bottom:7px}.work-meta h3{font-size:18px;margin:0 0 5px}.work-meta p{color:var(--muted);font-size:12px;margin:0}.work-meta>a{flex-shrink:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;height:34px;width:34px;font-size:19px;color:var(--petrol)}.work-meta>a:hover{background:var(--petrol);color:white}.concept-art{height:195px;padding:22px;display:flex;flex-direction:column;align-items:flex-start;position:relative;overflow:hidden}.concept-art>span{font-size:9px;letter-spacing:.17em;font-weight:800;margin-bottom:10px;z-index:1}.concept-art strong{font:800 23px/1.18 Arial;letter-spacing:-.05em;z-index:1}.concept-number{position:absolute;right:-14px;bottom:-49px;font:800 170px/1 Arial;opacity:.10}.concept-art i{width:38px;height:3px;background:currentColor;margin-top:19px}.concept-one{background:#e2e9ee;color:#193c50}.concept-two{background:#f0d9c8;color:#633d34}.concept-three{background:#dce8e2;color:#1e5046}.concept-four{background:#d9e6ee;color:#2e5575}.concept-five{background:#eee6d1;color:#6e562d}.portfolio-note{font-size:11px;color:#6f828a;margin:25px 0 0}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:18px;margin-top:55px}.price-card{position:relative;border:1px solid var(--line);border-radius:8px;padding:34px 30px 29px;display:flex;flex-direction:column}.price-card.popular{border:2px solid var(--petrol);box-shadow:0 25px 65px rgba(16,92,111,.1);padding:33px 29px 28px}.popular-tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--petrol);color:white;padding:6px 14px;border-radius:3px;font-size:10px;font-weight:800;letter-spacing:.11em}.package-label{font-size:10px;font-weight:800;color:var(--petrol);letter-spacing:.17em;margin-bottom:15px}.price-card h3{font-size:21px;margin-bottom:12px}.package-desc{font-size:13px;color:var(--muted);line-height:1.75;min-height:68px}.price{font:800 39px Arial;letter-spacing:-.065em;margin:20px 0 24px;white-space:nowrap}.price small{font-size:15px;color:var(--muted);letter-spacing:0}.price span{display:block;font:500 11px Arial;letter-spacing:0;color:var(--muted);margin-top:1px}.price-rule{height:1px;background:var(--line);margin-bottom:25px}.price-card ul{margin:0 0 28px;padding:0;list-style:none;flex:1}.price-card li{font-size:12px;line-height:1.55;margin-bottom:14px;padding-left:23px;position:relative}.price-card li:before{content:'✓';color:var(--petrol);font-weight:800;position:absolute;left:0}.price-card .btn{width:100%}.btn-outline{background:white;color:var(--navy);border-color:#cbdde2;box-shadow:none}.btn-outline:hover{color:white}.price-note,.care-fine{color:var(--muted);font-size:11px;margin-top:22px;line-height:1.7}.care-wrap{margin-top:70px;padding:40px 43px;background:#f3f8f9;border-radius:8px}.care-heading{display:flex;justify-content:space-between;gap:35px;align-items:center}.care-heading .section-label{margin-bottom:11px}.care-heading h3{font-size:25px;margin:0}.care-heading>p{max-width:390px;font-size:13px;color:var(--muted)}.care-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:27px;gap:14px}.care-grid>div{background:white;padding:23px;border:1px solid #e5edf0;border-radius:6px}.care-grid span{font-size:10px;letter-spacing:.13em;font-weight:800;color:var(--petrol)}.care-grid strong{font:800 30px Arial;display:block;margin:10px 0 6px}.care-grid small{font:500 12px Arial;color:var(--muted)}.care-grid p{font-size:12px;color:var(--muted);margin:0}.care-fine{margin:14px 0 0}.process-section{background:var(--navy);color:white}.process-section .section-intro{color:#adc2ce}.process-section .section-label{color:#6bd0d2}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:27px;margin-top:55px}.steps>div{border-top:1px solid #4d6879;padding-top:23px}.steps span{font:800 34px Arial;color:#62c3ca;display:block;margin-bottom:24px}.steps h3{font-size:17px;margin-bottom:10px}.steps p{font-size:13px;color:#abc0ce;line-height:1.8}.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:100px}.faq-intro{font-size:14px;color:var(--muted);margin:20px 0 23px;max-width:280px}.faq-items{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line);padding:0 0}summary{list-style:none;cursor:pointer;padding:21px 30px 21px 0;font-size:14px;font-weight:800;position:relative}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:3px;top:17px;color:var(--petrol);font-size:22px;font-weight:400}details[open] summary:after{content:'−'}details p{color:var(--muted);font-size:13px;padding-right:45px;margin:0 0 22px}.contact-section{background:linear-gradient(130deg,#0a2c46,#0c4660);color:white}.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:center}.section-label.light{color:#76d3d4}.contact-copy h2{font-size:clamp(36px,4.2vw,56px);margin-bottom:24px}.contact-copy>p:not(.section-label){color:#bdd3dd;font-size:15px;line-height:1.85}.contact-benefits{display:flex;flex-direction:column;gap:12px;margin-top:35px;font-size:13px;color:#d7e6e9}.form-card{background:white;color:var(--ink);padding:39px;border-radius:8px;box-shadow:0 30px 60px #05172545}.form-card h3{font-size:24px;margin-bottom:8px}.form-card>p{font-size:13px;color:var(--muted);margin-bottom:24px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}form label{display:block;font-size:11px;font-weight:800;margin-bottom:17px}form input:not([type=checkbox]),form textarea,form select{display:block;width:100%;border:1px solid #d5e1e7;background:#fbfdfd;padding:12px 13px;margin-top:7px;border-radius:4px;color:var(--ink);font-size:13px;outline-offset:2px}form textarea{resize:vertical}form input::placeholder,form textarea::placeholder{color:#a1afb6}.consent{display:flex;gap:11px;align-items:flex-start;font-size:11px;font-weight:400;color:var(--muted);line-height:1.6}.consent input{margin-top:3px;accent-color:var(--petrol)}.consent a{text-decoration:underline;color:var(--petrol)}.form-submit{border:0;width:100%}.form-note{font-size:10px!important;color:#71838e!important;text-align:center;margin:12px 0 0}.footer{background:#f8fafb;padding:62px 0 21px}.footer-main{display:grid;grid-template-columns:2.4fr 1fr 1fr;gap:80px;padding-bottom:52px}.footer-brand img{width:230px;height:auto}.footer-main p{max-width:335px;font-size:13px;color:var(--muted);margin:20px 0 0}.footer-main h3{font-size:13px;margin-bottom:15px;letter-spacing:0}.footer-main>div:not(:first-child){display:flex;flex-direction:column;gap:10px}.footer-main a:not(.footer-brand){font-size:12px;color:#566b79}.footer-main a:hover{color:var(--petrol)}.footer-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:#8798a3;font-size:11px}.legal{max-width:800px;margin:70px auto;padding:0 25px 80px}.legal h1{font-size:45px}.legal h2{font-size:22px;margin-top:35px}.legal p,.legal li{color:var(--muted)}.legal-warning{padding:20px;background:#fff3de;border:1px solid #e6c899;border-radius:5px}
@media(max-width:1050px){.nav{gap:17px}.brand img{width:210px}.hero-grid{gap:18px}.browser-card{width:455px}.hero-proof{gap:10px}.service-grid{grid-template-columns:repeat(2,1fr)}.contact-grid{gap:40px}.price-card{padding:27px 21px}.price-card.popular{padding:26px 20px}.price{font-size:32px}}
@media(max-width:760px){.container{width:min(100% - 36px,540px)}.section{padding:72px 0}.topline-inner span:last-child{display:none}.topline{font-size:10px}.nav-wrap{height:70px}.brand img{width:205px}.menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;background:transparent;border:0;padding:9px}.menu-toggle span{width:23px;height:2px;background:var(--navy)}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:white;box-shadow:0 17px 20px #09243c14;padding:20px 23px 25px;flex-direction:column;align-items:stretch;gap:20px}.nav.open{display:flex}.nav .btn{align-self:stretch}.hero{padding:62px 0}.hero-grid{grid-template-columns:1fr}.hero h1{font-size:clamp(40px,9vw,56px)}.hero-art{min-height:350px;margin-top:10px}.aura{width:320px;height:320px}.browser-card{width:min(430px,92%)}.top-float{top:8px;right:0}.bottom-float{bottom:0}.trust-grid{grid-template-columns:1fr;gap:19px}.trust-grid>div{padding-left:17px}.section-top{display:block;margin-bottom:30px}.section-top h2,.faq-grid h2{font-size:37px}.section-intro{margin-top:20px}.portfolio-grid{grid-template-columns:1fr 1fr}.work-card,.work-card.featured{grid-column:span 2}.work-card.concept{grid-column:span 1}.work-preview{height:270px}.concept-art{height:175px}.concept-art strong{font-size:19px}.work-meta{padding:16px;min-height:139px}.work-card.concept .work-meta{min-height:165px}.work-meta h3{font-size:15px}.pricing-grid,.care-grid,.steps,.faq-grid,.contact-grid{grid-template-columns:1fr}.pricing-grid{gap:25px}.package-desc{min-height:auto}.price{font-size:39px}.care-wrap{padding:28px 22px}.care-heading{display:block}.care-heading>p{margin-top:12px}.care-grid{gap:10px}.steps{gap:18px}.steps span{margin-bottom:14px}.faq-grid{gap:28px}.contact-grid{gap:30px}.footer-main{grid-template-columns:1fr 1fr;gap:30px}.footer-main>div:first-child{grid-column:span 2}.footer-bottom{flex-wrap:wrap}}
@media(max-width:430px){.hero-actions{align-items:flex-start;flex-direction:column;gap:20px}.hero-art{min-height:290px}.browser-card{width:100%;transform:rotate(-2deg)}.demo-body{padding:15px;gap:8px}.demo-photo{height:190px}.demo-nav{padding:0 15px}.demo-links{display:none}.demo-left{padding-top:10px}.work-card.concept{grid-column:span 2}.work-card.concept .work-meta{min-height:auto}.form-card{padding:27px 19px}.form-row{grid-template-columns:1fr;gap:0}.hero-proof{flex-direction:column}.footer-bottom span:nth-child(2){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Vorschaubild der beispielhaften Webseite: identische Breite wie die ursprüngliche Browsergrafik. */
.hero-example-image{position:relative;z-index:1;display:block;width:min(520px,100%);max-width:100%;height:auto;border:1px solid #e0e8ed;border-radius:13px;box-shadow:0 35px 100px rgba(8,47,69,.18);transform:rotate(-3deg)}
@media(max-width:1050px){.hero-example-image{width:min(455px,100%)}}
@media(max-width:430px){.hero-example-image{width:100%;transform:rotate(-2deg)}}
/* Fünf statt sieben Referenzen: die letzte Reihe auf breiten Bildschirmen mittig setzen. */
@media(min-width:761px){#beispiele .portfolio-grid>.work-card:nth-last-child(2){grid-column:2 / span 2}#beispiele .portfolio-grid>.work-card:last-child{grid-column:4 / span 2}}