/* Webtechnik Mueller - responsive original website design. No third-party resources. */
:root {
  --ink:#132232; --ink2:#1d3142; --muted:#647482; --paper:#f8f8f4;
  --white:#fff; --line:#e2e7e8; --blue:#3d5aee; --blue-dark:#314be0;
  --mint:#a8e1cd; --light:#edf2f4; --night:#112231;
  --radius:18px; --radius-lg:28px;
}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:95px}
body {margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection {background:#a8e1cd;color:var(--ink)}
a {color:inherit;text-decoration:none}
button,input,textarea {font:inherit}
img {max-width:100%;height:auto}
:focus-visible {outline:3px solid #2e69ff;outline-offset:4px}
.container {width:min(1200px,calc(100% - 48px));margin:0 auto}
.narrow {max-width:1020px}
.skip-link {position:absolute;left:16px;top:-70px;z-index:999;background:white;padding:14px 20px;border-radius:0 0 12px 12px}
.skip-link:focus {top:0}
.topline {background:var(--night);color:#ccd7df;font-size:11px;letter-spacing:.095em;font-weight:700}
.topline-content {min-height:35px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topline-right {color:#8b9ba8}
.status-dot {display:inline-block;width:7px;height:7px;background:#98dec5;border-radius:50%;margin-right:7px}
.site-header {position:relative;z-index:30;background:#fff;border-bottom:1px solid #e9edef}
.navigation {display:flex;min-height:89px;align-items:center;gap:28px}
.logo {display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
.logo-symbol {width:44px;height:44px;border-radius:12px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:26px;font-weight:900;position:relative;letter-spacing:-.12em}
.logo-symbol>span:first-child {transform:translateX(-2px)}
.logo-cross {position:absolute;right:4px;top:1px;line-height:1;color:var(--mint);font-size:15px;font-weight:500}
.logo-words {display:flex;flex-direction:column;line-height:1.06;letter-spacing:.11em}
.logo-words strong {font-size:15px;font-weight:900;letter-spacing:.058em}
.logo-words small {font-size:15px;font-weight:900;letter-spacing:.27em;margin-top:3px}
.logo-dot {color:var(--blue)}
.desktop-nav {display:flex;gap:31px;align-items:center;margin-left:auto}
.desktop-nav a {position:relative;color:#4f5c65;font-size:13px;font-weight:750;transition:color .2s}
.desktop-nav a:hover,.desktop-nav a[aria-current=page] {color:var(--ink)}
.desktop-nav a[aria-current=page]:after {content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;background:var(--blue)}
.btn {display:inline-flex;align-items:center;justify-content:space-between;gap:28px;padding:15px 20px;border-radius:10px;font-size:13px;letter-spacing:.01em;font-weight:800;min-height:49px;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover {transform:translateY(-2px)}
.btn span {font-size:18px;line-height:1}
.btn-dark {background:var(--ink);color:#fff}
.btn-dark:hover {background:#253d50;box-shadow:0 10px 25px #13223222}
.btn-primary {color:white;background:var(--blue);padding:18px 24px;min-height:58px;box-shadow:0 12px 22px #3d5aee28}
.btn-primary:hover {background:var(--blue-dark)}
.btn-light {background:var(--mint);color:var(--ink);min-width:205px}
.btn-light:hover {background:#c4eddc}
.nav-action {margin-left:8px}
.mobile-nav {display:none;margin-left:auto;position:relative}
.mobile-nav summary {list-style:none;width:44px;height:44px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;border:1px solid var(--line);border-radius:9px}
.mobile-nav summary::-webkit-details-marker {display:none}
.mobile-nav summary span {height:2px;width:19px;background:var(--ink);display:block}
.mobile-nav nav {position:absolute;z-index:20;right:0;top:53px;display:grid;min-width:min(310px,calc(100vw - 40px));background:white;border:1px solid var(--line);border-radius:14px;padding:10px;box-shadow:0 18px 46px #13223219}
.mobile-nav nav a {padding:13px 15px;border-radius:8px;font-weight:750;font-size:14px}
.mobile-nav nav a:hover,.mobile-nav nav a[aria-current=page] {background:#f1f4f6}
.eyebrow {display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;font-weight:900;color:#4a67b2;text-transform:uppercase}
.eyebrow-rule {width:24px;height:2px;background:var(--blue)}
.eyebrow-light {color:var(--mint)}
h1,h2,h3,p {margin-top:0}
h1,h2,h3 {letter-spacing:-.055em}
h1,h2 {line-height:1.04}
h2 em,h1 em {font-weight:400;color:#62798b;font-style:normal}
h2 {font-size:clamp(39px,4.5vw,68px);font-weight:800;margin:15px 0 24px}
h3 {line-height:1.15}
p {color:var(--muted)}
.hero {overflow:hidden;background:linear-gradient(135deg,#fff 1%,#f8faf8 58%,#ecf0f3 100%)}
.hero-grid {display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);min-height:665px;align-items:stretch}
.hero-content {padding:90px 10px 70px 0;position:relative;z-index:1}
.hero h1 {font-size:clamp(57px,6.3vw,94px);font-weight:850;line-height:.99;letter-spacing:-.077em;margin:31px 0 26px}
.highlight-word {position:relative;isolation:isolate}
.highlight-word:after {content:"";position:absolute;left:-4px;right:-3px;bottom:5px;height:16px;background:var(--mint);z-index:-1;transform:rotate(-1.5deg)}
.accent-dot {color:var(--blue)}
.hero-lead {font-size:17px;line-height:1.78;max-width:485px;margin-bottom:29px}
.hero-actions {display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.text-link {display:inline-flex;gap:10px;align-items:center;font-size:13px;font-weight:850;position:relative}
.text-link:hover {color:var(--blue)}
.text-link span {font-size:20px}
.hero-proof {display:flex;align-items:center;gap:13px;margin-top:72px}
.proof-icon {width:39px;height:39px;display:grid;place-items:center;border-radius:50%;border:1px solid #bddbcc;background:#eef8f2;color:#28644d;font-weight:800}
.hero-proof strong,.hero-proof span {display:block;font-size:12px}
.hero-proof strong {color:var(--ink)}
.hero-proof span {font-size:11px;color:#7a8994;margin-top:2px}
.hero-art {position:relative;min-height:665px;overflow:hidden;background:radial-gradient(circle at 30% 35%,#25465c 0,#142b3d 52%,#102130 95%);display:flex;flex-direction:column;padding:34px 31px 19px}
.hero-art:before {content:"";position:absolute;inset:0;opacity:.2;background-image:linear-gradient(#ffffff20 1px,transparent 1px),linear-gradient(90deg,#ffffff20 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(#000,#0005)}
.hero-art:after {content:"";position:absolute;right:-160px;top:10%;width:440px;height:440px;border:1px solid #ffffff20;border-radius:50%;box-shadow:0 0 0 65px #ffffff07,0 0 0 130px #ffffff05}
.hero-art-top,.art-bottom {display:flex;position:relative;z-index:2;justify-content:space-between;align-items:center;color:#e9f2f6;font-size:9px;letter-spacing:.17em;font-weight:800}
.art-tag {display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff26;border-radius:99px;padding:8px 10px;background:#ffffff0d}
.art-tag span {background:var(--mint);width:5px;height:5px;border-radius:50%}
.art-coordinate {color:#8c9fad}
.art-browser {width:min(100%,510px);position:relative;z-index:3;margin:auto auto;transform:rotate(-4deg);filter:drop-shadow(10px 28px 24px #05132188);border:1px solid #c8d3d9;border-radius:14px;overflow:hidden;background:#fff}
.browser-bar {height:37px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid #e5ebed;background:#f9fbfb}
.browser-dots {display:flex;gap:5px}
.browser-dots i {width:7px;height:7px;border-radius:50%;background:#ccd7dd}
.browser-dots i:first-child {background:#ffb59b}
.browser-address {background:#eef3f6;color:#90a0a9;border-radius:5px;padding:4px 32px;font-size:9px}
.browser-lock {font-size:12px;color:#798f9b}
.browser-page {padding:21px 25px 25px}
.browser-logo {display:flex;gap:7px;align-items:center;font-weight:900;font-size:10px;letter-spacing:.08em;color:#152738}
.browser-square {width:15px;height:15px;background:var(--blue);border-radius:4px}
.browser-nav {font-weight:500;font-size:7px;color:#a0b0b7;margin-left:auto;letter-spacing:0}
.browser-content {margin-top:30px;display:grid;grid-template-columns:1.05fr .95fr;gap:10px;min-height:181px}
.browser-copy {padding-top:14px}
.browser-overline {display:block;width:60px;height:7px;background:#a2ceba;border-radius:4px;margin-bottom:15px}
.browser-title-line {height:21px;background:#172b3c;border-radius:3px;margin:0 0 7px}
.browser-title-line.wide {width:92%}
.browser-title-line.medium {width:64%}
.browser-paragraph {background:#c7d4da;height:5px;border-radius:6px;width:82%;margin-top:15px}
.browser-paragraph.short {width:62%;margin-top:7px}
.browser-button {display:block;background:#3d5aee;border-radius:5px;width:82px;height:26px;margin-top:19px}
.browser-visual {background:#e5eee9;border-radius:12px;position:relative;overflow:hidden}
.browser-shape {position:absolute;width:130px;height:170px;background:#88bac0;transform:rotate(38deg);border-radius:20px}
.bs1 {top:0;right:5px}
.bs2 {background:#234d64;bottom:-90px;left:-30px;transform:rotate(-25deg)}
.browser-visual-dot {position:absolute;width:70px;height:70px;border-radius:50%;background:#c6e4cc;right:-15px;bottom:-10px}
.browser-cards {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:13px}
.browser-cards span {height:46px;background:#eaf0f1;border-radius:7px}
.browser-cards span:nth-child(2) {background:#dce9e9}
.browser-cards span:nth-child(3) {background:#e8ecf4}
.floating-card {position:absolute;z-index:5;bottom:105px;left:15px;background:#fff;border-radius:12px;display:flex;align-items:center;gap:12px;padding:13px 17px;box-shadow:0 20px 40px #07182749;transform:rotate(4deg)}
.floating-circle {width:37px;height:37px;display:grid;place-items:center;border-radius:50%;background:var(--mint);color:#12372a;font-size:19px}
.floating-card b {font-size:11px;display:block}
.floating-card small {display:block;font-size:9px;color:#87949d;margin-top:2px}
.art-bottom {color:#8ea1ad}
.art-bottom span:last-child {font-size:20px;color:var(--mint)}
.trust-strip {background:#fff;border-block:1px solid #e5eaed}
.trust-items {display:flex;justify-content:space-between;align-items:center;min-height:72px;gap:20px;font-size:10px;letter-spacing:.15em;font-weight:900;color:#687b8a}
.trust-items i {height:5px;width:5px;border-radius:50%;background:#a6c5b9}
.section {padding:105px 0}
.section-heading {display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:45px}
.section-heading h2 {margin:15px 0 0}
.section-heading>p {max-width:375px;line-height:1.78;font-size:15px;margin:0 0 5px}
.services-overview {background:#f8f8f4}
.services-grid {display:grid;grid-template-columns:1.16fr 1fr 1fr;gap:16px}
.service-card {min-height:388px;border:1px solid var(--line);border-radius:16px;padding:27px;background:#fff;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.service-card:hover {transform:translateY(-5px);box-shadow:0 18px 35px #0c253b12;border-color:#c4d1d6}
.service-feature {background:#e4eafc;border-color:#d8e0fc}
.service-number {font-size:10px;font-weight:900;letter-spacing:.12em;color:#637e94}
.service-card h3 {font-size:clamp(25px,2.2vw,35px);margin:14px 0}
.service-card p {font-size:13px;line-height:1.75;max-width:260px;margin-bottom:0}
.service-card>div:last-child {margin-top:auto}
.service-feature .service-graphic {height:138px;display:flex;gap:8px;align-items:flex-end;padding:20px 0}
.service-graphic span {display:block;height:95px;width:31%;background:#a4b6f8;border-radius:9px 9px 0 0}
.service-graphic span:nth-child(2) {height:124px;background:#546fe4}
.service-graphic span:nth-child(3) {height:70px;background:#bfcef5}
.service-card-icon {font-size:63px;line-height:1;margin:45px 0 57px;color:#a5b9c5;font-weight:300;letter-spacing:-.08em}
.round-arrow {position:absolute;bottom:20px;right:22px;font-size:19px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid #cfdbdf}
.outline-link {display:flex;justify-content:space-between;align-items:center;width:fit-content;min-width:285px;margin-top:30px;border-bottom:1px solid #a2b1bb;padding:0 4px 12px;font-size:13px;font-weight:800}
.outline-link span {font-size:19px}
.outline-link:hover {color:var(--blue)}
.dark-section {background:var(--night);color:#fff;position:relative;overflow:hidden}
.dark-section:after {content:"";position:absolute;right:-250px;bottom:-360px;width:650px;height:650px;border:1px solid #ffffff15;border-radius:50%;box-shadow:0 0 0 85px #ffffff05,0 0 0 170px #ffffff04}
.feature-grid {display:grid;grid-template-columns:1.02fr .98fr;gap:100px;position:relative;z-index:1}
.dark-section h2 {font-size:clamp(43px,4.8vw,70px)}
.dark-section h2 em {color:var(--mint)}
.dark-section p {color:#a7b6c1;font-size:15px;line-height:1.8;max-width:420px}
.dark-section .btn {margin-top:22px}
.feature-list>div {display:flex;gap:25px;border-bottom:1px solid #ffffff23;padding:26px 0}
.feature-list>div:first-child {padding-top:0}
.feature-list>div>span {color:var(--mint);font-size:11px;font-weight:900;padding-top:7px}
.feature-list h3 {font-size:22px;letter-spacing:-.04em;margin:0 0 9px}
.feature-list p {font-size:13px;margin:0}
.showcase {background:#fff}
.showcase-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.showcase-item {display:block}
.showcase-preview {height:320px;display:grid;place-items:center;overflow:hidden;border-radius:17px}
.showroom-blue {background:linear-gradient(125deg,#dcebf0,#cad9e0)}
.showroom-sand {background:linear-gradient(125deg,#ece7dd,#ddd0bf)}
.showcase-preview img {width:81%;height:auto;filter:drop-shadow(0 22px 24px #1b344b29);transition:transform .3s}
.showcase-item:hover img {transform:translateY(-8px) scale(1.02)}
.showcase-meta {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 2px}
.showcase-meta span:first-child {font-size:10px;font-weight:900;color:#627d91;letter-spacing:.12em}
.showcase-meta h3 {font-size:23px;margin:5px 0}
.showcase-arrow {width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:19px}
.process {background:var(--paper)}
.process-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.process-grid>div {padding-top:25px;border-top:2px solid #c9d3d8}
.process-grid>div>span {display:block;color:var(--blue);font-size:11px;font-weight:900}
.process-grid h3 {font-size:25px;margin:27px 0 12px}
.process-grid p {line-height:1.75;font-size:13px}
.page-hero {padding:105px 0 96px;background:linear-gradient(120deg,#fff,#eef3f5)}
.page-hero h1 {font-size:clamp(53px,7.1vw,100px);font-weight:850;margin:26px 0 26px;line-height:1.01}
.page-hero p {font-size:18px;line-height:1.75;max-width:720px;margin-bottom:0}
.service-detail {padding:55px 0;display:grid;grid-template-columns:1fr 1.9fr;gap:50px;border-top:1px solid #dce3e6}
.service-detail:first-child {border-top:0;padding-top:0}
.detail-index {font-size:11px;letter-spacing:.14em;color:#557188;font-weight:900;padding-top:15px}
.service-detail h2 {font-size:clamp(38px,4vw,60px);margin:0 0 20px}
.service-detail p {line-height:1.8;max-width:700px;font-size:16px}
.tag-list {display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}
.tag-list span {border-radius:99px;border:1px solid #cbd8df;background:#fff;color:#446074;padding:10px 14px;font-size:12px;font-weight:750}
.muted-section {background:#eaf0f2}
.faq-list {max-width:850px}
.faq-list details {padding:21px 0;border-bottom:1px solid #c9d4d9}
.faq-list summary {cursor:pointer;font-size:18px;font-weight:780;padding-right:35px;position:relative;list-style:none}
.faq-list summary::-webkit-details-marker {display:none}
.faq-list summary:after {content:"+";position:absolute;right:5px;font-size:24px;font-weight:400;top:-4px}
.faq-list details[open] summary:after {content:"−"}
.faq-list p {max-width:720px;line-height:1.75;padding-top:12px;margin-bottom:0}
.project-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.project-card {background:white;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:transform .25s,box-shadow .25s}
.project-card:hover {transform:translateY(-5px);box-shadow:0 18px 35px #10273912}
.project-image {background:#e6edf0;height:222px;display:grid;place-items:center;overflow:hidden}
.project-card:nth-child(2) .project-image,.project-card:nth-child(5) .project-image {background:#e9e2d9}
.project-card:nth-child(3) .project-image {background:#d8e1e9}
.project-card:nth-child(4) .project-image {background:#e8e6d9}
.project-image img {width:83%;max-height:205px;filter:drop-shadow(0 14px 17px #11263925);transition:transform .2s}
.project-card:hover img {transform:scale(1.04)}
.project-content {padding:22px}
.project-brow {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:10px;letter-spacing:.12em;font-weight:900;color:#557188}
.project-link-arrow {font-size:21px;color:var(--ink)}
.project-card h2 {font-size:24px;margin:10px 0}
.project-card p {font-size:13px;line-height:1.7;min-height:65px}
.project-action {display:block;padding-top:14px;font-size:12px;font-weight:800}
.demo-note {max-width:800px}
.demo-note p {font-size:16px;line-height:1.8}
.about-layout {display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center}
.about-visual {background:#183347;color:#fff;min-height:470px;border-radius:20px;position:relative;overflow:hidden;padding:30px;display:flex;flex-direction:column;justify-content:space-between}
.about-visual:before {content:"";position:absolute;top:-130px;right:-150px;width:420px;height:420px;border-radius:50%;background:#98c9c424;box-shadow:0 0 0 60px #98c9c411}
.about-visual-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;position:relative}
.about-visual-grid span {min-height:125px;display:grid;place-items:center;border:1px solid #ffffff2b;border-radius:10px;font-weight:900;letter-spacing:-.07em;font-size:35px}
.about-visual-grid span:nth-child(2),.about-visual-grid span:nth-child(4) {color:var(--mint);font-weight:300;font-size:70px}
.about-visual-caption {position:relative;font-size:10px;line-height:1.8;letter-spacing:.18em;color:#cee0e4;font-weight:900}
.about-content p {font-size:16px;line-height:1.85}
.about-values {display:grid;gap:14px;margin-top:30px}
.about-values div {border-top:1px solid var(--line);padding-top:13px}
.about-values b {display:block;font-size:15px}
.about-values span {font-size:13px;color:var(--muted)}
.contact-layout {display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.contact-layout h2 {font-size:clamp(39px,4.2vw,64px)}
.contact-layout p {font-size:16px;line-height:1.85}
.contact-points {margin-top:35px}
.contact-points>div {border-top:1px solid var(--line);padding:17px 0;display:flex;gap:20px;font-size:14px}
.contact-points span {font-size:11px;color:var(--blue);font-weight:900}
.contact-panel {background:var(--night);color:white;border-radius:18px;padding:48px 38px;min-height:380px;display:flex;flex-direction:column}
.contact-panel h3 {font-size:36px;margin:25px 0 18px}
.contact-panel p {color:#b8c7ce;font-size:15px}
.contact-panel-footer {border-top:1px solid #ffffff27;margin-top:auto;padding-top:25px;display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;font-weight:900}
.contact-panel-footer span {font-size:19px;color:var(--mint)}
.legal-heading {padding-bottom:70px}
.legal-content {max-width:880px}
.legal-content h2 {font-size:34px}
.legal-content p {line-height:1.8;font-size:16px}
.prefooter {background:#25495a;color:#fff;padding:75px 0}
.prefooter-inner {display:flex;align-items:center;justify-content:space-between;gap:40px}
.prefooter h2 {font-size:clamp(36px,4vw,58px)}
.prefooter h2 em {color:var(--mint)}
.prefooter p {color:#c1d0d6;max-width:600px;line-height:1.8;margin-bottom:0}
.site-footer {background:var(--night);color:#fff;padding:65px 0 25px}
.footer-grid {display:grid;grid-template-columns:2fr 1fr 1fr;gap:65px}
.footer-logo .logo-symbol {background:#ffffff17}
.footer-about p {max-width:390px;color:#a8b7c0;font-size:13px;line-height:1.8;margin:25px 0}
.footer-grid h3 {font-size:14px;letter-spacing:.02em;margin:0 0 23px}
.footer-grid>div:not(:first-child) a {display:block;font-size:13px;color:#a8b7c0;margin-bottom:14px}
.footer-grid a:hover {color:var(--mint)}
.footer-bottom {display:flex;justify-content:space-between;gap:20px;color:#7f94a2;border-top:1px solid #ffffff16;padding-top:25px;margin-top:55px;font-size:11px}
@media (max-width:1100px) {
  .desktop-nav{gap:16px}.navigation{gap:16px}
  .hero-grid{grid-template-columns:1fr 1fr}.hero h1{font-size:clamp(55px,6.4vw,79px)}
  .hero-content{padding-top:75px}.hero-art{min-height:615px}
  .feature-grid{gap:50px}.about-layout{gap:45px}.contact-layout{gap:45px}
}
@media (max-width:900px) {
  .nav-action,.desktop-nav{display:none}
  .mobile-nav{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-content{padding:65px 0}.hero-art{min-height:490px}
  .hero-proof{margin-top:38px}
  .art-browser{width:min(80%,490px)}
  .floating-card{left:15%}
  .services-grid{grid-template-columns:1fr 1fr}
  .service-feature{grid-column:1/-1;min-height:370px}
  .service-feature .service-graphic{height:130px}
  .section-heading{align-items:start;flex-direction:column;gap:20px}
  .section-heading>p{max-width:650px}
  .feature-grid{grid-template-columns:1fr;gap:55px}
  .project-grid{grid-template-columns:repeat(2,1fr)}
  .about-layout,.contact-layout{grid-template-columns:1fr;gap:40px}
  .about-visual{min-height:410px}
  .trust-items{flex-wrap:wrap;justify-content:center;padding:23px 0}
  .process-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1.5fr 1fr 1fr;gap:25px}
  .prefooter-inner{align-items:start;flex-direction:column}
}
@media (max-width:620px) {
  .container{width:min(100% - 34px,1200px)}
  .topline-content{font-size:9px;min-height:31px}
  .topline-right{display:none}
  .navigation{min-height:77px}
  .logo-symbol{width:39px;height:39px;font-size:22px}
  .logo-words strong{font-size:12px}
  .logo-words small{font-size:12px}
  .hero-content{padding:59px 0 47px}
  .hero h1{font-size:clamp(51px,13vw,75px);margin-top:23px}
  .hero-lead{font-size:15px}
  .hero-art{min-height:390px;padding:17px}
  .art-browser{width:92%}
  .floating-card{bottom:63px;left:6px;transform:scale(.8) rotate(4deg);transform-origin:left bottom}
  .browser-content{min-height:130px;margin-top:16px}
  .browser-title-line{height:15px}
  .browser-page{padding:14px}
  .browser-visual{min-height:110px}
  .browser-cards span{height:29px}
  .art-coordinate{display:none}
  .trust-items{gap:11px;font-size:8px}
  .section{padding:69px 0}
  h2{font-size:clamp(38px,10vw,50px)}
  .services-grid,.showcase-grid,.project-grid{grid-template-columns:1fr}
  .service-feature{grid-column:auto}
  .service-card{min-height:305px}
  .service-card-icon{margin:30px 0 35px}
  .showcase-preview{height:240px}
  .process-grid{grid-template-columns:1fr 1fr;gap:26px 16px}
  .process-grid h3{font-size:21px}
  .page-hero{padding:67px 0 65px}
  .page-hero h1{font-size:clamp(48px,12.4vw,70px)}
  .page-hero p{font-size:16px}
  .service-detail{grid-template-columns:1fr;gap:15px;padding:42px 0}
  .service-detail h2{font-size:42px}
  .project-image{height:200px}
  .about-visual{min-height:360px}
  .about-visual-grid span{min-height:105px;font-size:27px}
  .contact-panel{padding:34px 25px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:34px}
  .footer-about{grid-column:1/-1}
  .footer-bottom{flex-direction:column}
  .prefooter{padding:60px 0}
  .outline-link{width:100%;min-width:0}
}
@media (prefers-reduced-motion:reduce) {
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
/* ===========================================================
   WEBTECHNIK MUELLER · BLUE ORBIT DESIGN SYSTEM / V2
   Original user-supplied logo, midnight navy and electric cyan.
   No tracking scripts or third-party font/CDN dependencies.
   =========================================================== */
:root {
 --ink:#eef8ff;--ink2:#d0e9ff;--muted:#b1c4d8;--paper:#041529;--white:#071d37;
 --line:#17486e;--blue:#05bafe;--blue-dark:#0876f9;--mint:#05c5ff;--light:#09243e;
 --night:#030f20;--cyan:#00c5ff;--surface:#061b34;--subtle:#09233e;
}
html{scroll-padding-top:90px}
body{background:#031427;color:#f3f9ff}
::selection{background:#02adff;color:#021429}
a{transition:color .16s}
p{color:#b3c4d7}
.site-header{position:sticky;top:0;background:#031427ed;border-bottom:1px solid #0e426a;box-shadow:0 10px 35px #0005;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:50}
.navigation{min-height:84px}
.brand-image-link{width:245px;display:flex;align-items:center;overflow:hidden;min-width:0}
.brand-logo{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:screen}
.desktop-nav{gap:31px}
.desktop-nav a{color:#e1eef7;font-size:13px}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:#29c6ff}
.desktop-nav a[aria-current=page]:after{bottom:-14px;background:#00b9ff;box-shadow:0 0 13px #00b9ff}
.btn-primary,.btn-dark{background:linear-gradient(120deg,#09cafa,#0566e8);color:#fff;border:1px solid #14c8ff;box-shadow:0 4px 23px #04a4fb45}
.btn-primary:hover,.btn-dark:hover{background:linear-gradient(120deg,#1bcfff,#197bff);box-shadow:0 5px 30px #03b9ff75}
.btn-outline{background:#06172baa;border:1px solid #d4e8f9;color:#fff;box-shadow:inset 0 0 12px #ffffff0b}
.btn-outline:hover{border-color:#06bcff;color:#fff;background:#0a294d}
.btn{gap:13px;border-radius:11px;white-space:normal}
.btn span{font-size:17px}
.nav-action{margin-left:15px;min-height:42px;padding:10px 16px;font-size:12px}
.mobile-nav summary{border-color:#14699b;background:#0a2a46}
.mobile-nav summary span{background:#ecfaff}
.mobile-nav nav{background:#061d35;border-color:#155c81;box-shadow:0 20px 50px #000a}
.mobile-nav nav a:hover,.mobile-nav nav a[aria-current=page]{background:#0b3655}
.eyebrow,.detail-index{color:#07c7ff;letter-spacing:.16em}
.eyebrow-light{color:#1bd8ff}
.eyebrow:after{content:"";display:inline-block;width:36px;height:2px;margin-left:6px;background:#08c9ff;box-shadow:0 0 10px #04b9ff}
h1,h2,h3{color:#f9fcff;letter-spacing:-.045em}
h1 em,h2 em{color:#1ac4ff;font-style:normal;font-weight:inherit}
.section-heading>p{color:#a9bfd3}
.hero-blue{position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 33%,#063666 0,#061f3e 32%,#020e1d 74%),#021024}
.hero-blue:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.36;background:radial-gradient(ellipse at 22% 40%,#0389f124,transparent 44%),radial-gradient(ellipse at 91% 67%,#00b4ff20,transparent 35%)}
.hero-blue .container{width:min(1380px,calc(100% - 62px))}
.hero-blue .hero-grid{position:relative;z-index:2;min-height:685px;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);align-items:center;gap:30px}
.hero-blue .hero-content{padding:70px 0 95px;min-width:0}
.hero-brand{margin-bottom:10px;width:min(100%,590px)}
.hero-brand img{width:100%;height:auto;display:block;mix-blend-mode:screen;-webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
.hero-brandline{font-size:11px;font-weight:800;color:#eff9ff;letter-spacing:.26em;margin:4px 0 36px}
.hero-brandline b{color:#05b9ff;padding:0 7px}
.hero-blue h1{font-size:clamp(35px,3.1vw,53px);line-height:1.13;letter-spacing:-.048em;font-weight:850;margin:0 0 20px;max-width:690px}
.hero-blue h1 span{color:#1bb8ff}
.hero-blue .hero-lead{font-size:15px;line-height:1.84;max-width:600px;color:#c3d6e6;margin:0 0 29px}
.hero-blue .hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hero-blue .hero-actions .btn{padding:13px 18px;min-height:53px}
.hero-benefits{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin-top:43px;font-size:11px;color:#e5f4ff;font-weight:750}
.hero-benefits>span{display:flex;align-items:center;gap:10px}
.hero-benefits>span:not(:first-child){border-left:1px solid #537895;padding-left:20px}
.hero-benefits i{font-style:normal;color:#04c3ff;font-size:21px;text-shadow:0 0 14px #05c5ff88}
.hero-device-wrap{position:relative;height:565px;display:flex;align-items:center;justify-content:center;min-width:0}
.hero-device-wrap:after{content:"";position:absolute;z-index:0;inset:33% 0 12%;border-radius:50%;background:#0b93f54f;filter:blur(85px)}
.blue-orbit{position:absolute;z-index:0;border:2px solid #00b7ff99;border-radius:50%;box-shadow:0 0 24px #09afff, inset 0 0 18px #039eff66;transform:rotate(-21deg)}
.orbit-a{width:110%;height:65%;top:7%;right:-12%;border-bottom-color:transparent}
.orbit-b{width:125%;height:42%;bottom:9%;left:-10%;border-top-color:transparent;transform:rotate(-12deg)}
.hero-device{width:min(100%,640px);transform:perspective(1000px) rotateY(-11deg) rotateX(3deg);position:relative;z-index:2;filter:drop-shadow(0 38px 27px #000b)}
.device-screen{border:9px solid #17293f;background:#04152a;box-shadow:inset 0 0 0 2px #5989b3,0 0 0 1px #7abaff7a,0 0 28px #068fff7a;aspect-ratio:1.56;overflow:hidden;border-radius:14px 14px 3px 3px;position:relative}
.device-navbar{height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;font-size:9px;color:#e5f4ff;gap:10px;background:#031429}
.mini-brand{font-weight:900;letter-spacing:.08em}
.mini-brand-dot{display:inline-block;width:9px;height:9px;background:#04b9ff;transform:skew(-9deg);margin-right:3px}
.device-links{color:#afc9df;font-size:7px}
.device-action{background:#03aafb;color:white;border-radius:3px;font-size:7px;padding:4px 9px}
.device-photo{height:62%;position:relative;overflow:hidden;background:linear-gradient(165deg,#102848,#38658c 59%,#081a2d)}
.device-photo:after{position:absolute;content:"";inset:0;background:linear-gradient(90deg,#031526e3 0,#06162fa6 57%,#16375415 100%)}
.device-mountain{position:absolute;inset:18% -10% -25% 26%;background:linear-gradient(145deg,#bedbf2 0,#477397 30%,#0b3358 74%);clip-path:polygon(0 100%,33% 13%,41% 31%,60% 0,100% 100%)}
.mountain-front{inset:40% -10% -25% 22%;background:linear-gradient(130deg,#748dab,#193453);clip-path:polygon(0 100%,25% 21%,37% 43%,52% 12%,75% 65%,100% 33%,100% 100%)}
.device-copy{position:relative;z-index:3;padding:14% 10%;color:white;display:flex;flex-direction:column;align-items:start;gap:9px}
.device-copy small{font-size:7px;letter-spacing:.15em;color:#22d1ff}
.device-copy strong{font-size:clamp(13px,1.55vw,24px);line-height:1.12;letter-spacing:-.04em}
.device-copy em{font-style:normal;color:#04c9ff}
.device-copy>span{font-size:8px;color:#c7d8e7}
.device-copy i{display:block;width:75px;height:18px;border-radius:4px;background:linear-gradient(90deg,#03cbff,#0875ff)}
.device-tiles{height:calc(38% - 34px);padding:12px 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.device-tiles>span{border:1px solid #10416a;border-radius:4px;color:#b7d9ef;font-size:8px;padding:8px 6px;display:flex;flex-direction:column;gap:7px}
.device-tiles b{font-weight:700;color:#00c4ff;font-size:18px}
.device-base{width:117%;height:20px;margin-left:-8.5%;border-radius:0 0 52% 52%;background:linear-gradient(#829fb7,#213e58 30%,#9bb8c5 72%,#294056);box-shadow:0 8px 12px #0008;position:relative}
.device-base span{display:block;background:#233c55;width:22%;height:4px;position:absolute;left:39%;top:1px;border-radius:0 0 8px 8px}
.hero-glow-label{position:absolute;bottom:17px;right:0;font-size:9px;letter-spacing:.18em;color:#8ec4e6}
.hero-wave{position:absolute;bottom:-180px;left:-10%;width:125%;height:265px;border-top:3px solid #08cfff;border-radius:50%;transform:rotate(-3deg);box-shadow:0 -9px 22px #02b9ff90;pointer-events:none}
.section{padding:85px 0;background:#03152a}
.section-heading{margin-bottom:32px}
.section-heading h2{font-size:clamp(33px,3.4vw,51px);margin:12px 0 0}
.section-heading h2 em{color:#f2f8ff}
.services-overview{background:linear-gradient(180deg,#041729,#061e38)}
.services-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.service-feature{grid-column:auto}
.service-card,.service-feature{min-height:295px;background:linear-gradient(155deg,#0d3457,#051b33 72%);border:1px solid #087cb4;border-radius:13px;box-shadow:inset 0 0 18px #0667be15;overflow:hidden}
.service-card:after{content:"";position:absolute;width:110%;height:80px;border-top:2px solid #00bdff;bottom:-52px;left:-5%;border-radius:50%;transform:rotate(-8deg);box-shadow:0 -5px 18px #008eff50}
.service-card:hover{border-color:#0bcaff;box-shadow:0 12px 34px #0198e12c}
.service-number{color:#89b5d4;font-size:10px}
.service-card-icon,.service-feature .service-graphic{font-size:42px;line-height:1;margin:22px 0 26px;color:#00baff;text-shadow:0 0 20px #018afc7a;height:auto}
.service-card h3{font-size:27px;margin:8px 0 10px}
.service-card p{color:#adc6da;font-size:13px;max-width:none}
.service-more{display:block;color:#eaf8ff;font-size:12px;font-weight:800;margin-top:25px}
.service-more span{font-size:17px;color:#05c6ff;margin-left:6px}
.round-arrow{color:#05c6ff;border-color:#176899}
.benefits-section{background:linear-gradient(180deg,#051c34,#03152a)}
.benefits-section h2{font-size:clamp(35px,3.4vw,52px)}
.benefits-section .section-intro{max-width:700px;font-size:15px;color:#b8cede}
.benefits-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:31px}
.benefits-grid>div{padding:0 25px;border-right:1px solid #265679}
.benefits-grid>div:first-child{padding-left:0}
.benefits-grid>div:last-child{border:0}
.benefit-icon{color:#00baff;font-size:36px;line-height:1;display:block;margin-bottom:16px;text-shadow:0 0 16px #018dfc8c}
.benefits-grid h3{font-size:17px;letter-spacing:-.025em;margin:0 0 9px}
.benefits-grid p{font-size:12px;line-height:1.66;color:#aec5d9}
.showcase{background:#04182d;border-top:1px solid #11699b}
.showcase .section-heading-link{align-items:end}
.showcase .section-heading-link>div p{max-width:750px;font-size:15px;margin-top:14px}
.showcase-grid.showcase-three{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.showcase-item{border:1px solid #0a679a;border-radius:12px;overflow:hidden;background:linear-gradient(180deg,#10395d,#05203c);box-shadow:inset 0 0 20px #088cfa11}
.showcase-item:hover{border-color:#09c8ff}
.showcase-preview{height:210px;border-radius:0;background:linear-gradient(155deg,#0c4162,#062444);overflow:hidden}
.showcase-preview img{width:86%;filter:drop-shadow(0 12px 17px #0008)}
.showroom-sand{background:linear-gradient(140deg,#12445c,#14304f)}
.showroom-steel{background:linear-gradient(140deg,#102a46,#1a5177)}
.showcase-meta{align-items:start;padding:16px 18px}
.showcase-meta span:first-child{color:#2dc9ff;font-size:10px}
.showcase-meta h3{color:#f2faff;font-size:19px;margin:5px 0 7px}
.showcase-meta p{font-size:12px;margin:0;line-height:1.65}
.showcase-arrow{color:#00c7ff;border-color:#196c9d}
.page-hero{background:radial-gradient(ellipse at 80% 30%,#12447a,#061d39 55%,#041124);border-bottom:1px solid #0769a1}
.page-hero h1{font-size:clamp(43px,6vw,82px)}
.page-hero p{color:#bfd4e4}
.service-detail{border-color:#135381}
.tag-list span{background:#092b4b;border:1px solid #176e9d;color:#bddff3}
.muted-section{background:#09233d}
.faq-list details{border-color:#24618a}
.faq-list summary{color:#fff}
.project-card{background:#0a2948;border-color:#175b84}
.project-card:hover{border-color:#00bdff}
.project-image,.project-card:nth-child(2) .project-image,.project-card:nth-child(3) .project-image,.project-card:nth-child(4) .project-image,.project-card:nth-child(5) .project-image{background:linear-gradient(145deg,#174362,#061e35)}
.project-brow{color:#15baff}
.project-card p{color:#b7ccdd}
.about-visual{background:radial-gradient(circle at 80% 20%,#084a88,#031c34)}
.about-visual-grid span:nth-child(2),.about-visual-grid span:nth-child(4){color:#00c5ff}
.about-content p,.demo-note p{color:#c0d0df}
.about-values div,.contact-points>div{border-color:#1c4c76}
.about-values span{color:#b0c7d9}
.contact-panel{background:linear-gradient(145deg,#0a3b69,#031329);border:1px solid #126f9f}
.contact-panel p{color:#c2d4e0}
.contact-panel-footer span{color:#00c5ff}
.legal-content p{color:#bcd1e1}
.prefooter{background:linear-gradient(160deg,#063d66,#051b33 80%);position:relative;overflow:hidden;border-top:1px solid #0c9bdb;border-bottom:1px solid #0c8cc3;padding:44px 0}
.prefooter:after{position:absolute;content:"";height:150px;width:130%;left:-15%;bottom:-115px;border-radius:50%;border-top:2px solid #06caff;box-shadow:0 -8px 20px #00a3ff77;pointer-events:none}
.prefooter-inner{position:relative;z-index:1;gap:22px}
.prefooter-inner .cta-icon{width:66px;height:66px;display:grid;place-items:center;flex-shrink:0;color:#00caff;font-size:33px;border:1px solid #00aaff;border-radius:12px;box-shadow:0 0 22px #0084ee33}
.prefooter-inner .cta-message{flex:1}
.prefooter h2{font-size:clamp(26px,2.7vw,38px);margin:5px 0}
.prefooter p{font-size:13px;max-width:650px;color:#c7dbea}
.prefooter .btn{flex-shrink:0}
.site-footer{background:#031021;border-top:1px solid #0d4166}
.footer-grid{grid-template-columns:1.6fr .8fr .8fr;gap:50px}
.footer-logo{max-width:330px}
.footer-about p{color:#a0bfd3;margin:10px 0}
.footer-grid h3{font-size:13px}
.footer-grid>div:not(:first-child) a{color:#a3bfd4}
.footer-grid a:hover{color:#00bdff}
.footer-bottom{border-color:#1e425e}
:focus-visible{outline:3px solid #00cbff;outline-offset:4px}
@media(max-width:1080px){
  .brand-image-link{width:215px}
  .desktop-nav{gap:17px}
  .hero-blue .hero-grid{gap:10px}
  .hero-blue h1{font-size:clamp(32px,3.5vw,46px)}
  .hero-benefits{gap:12px}
  .hero-benefits>span:not(:first-child){padding-left:12px}
}
@media(max-width:900px){
  .navigation{min-height:76px}
  .desktop-nav,.nav-action{display:none}
  .mobile-nav{display:block}
  .hero-blue .hero-grid{grid-template-columns:1fr;min-height:auto}
  .hero-blue .hero-content{padding:45px 0 15px}
  .hero-brand{width:min(100%,560px)}
  .hero-blue h1{font-size:clamp(36px,5vw,52px)}
  .hero-device-wrap{height:445px;max-width:710px;width:100%;margin:auto}
  .hero-device{max-width:520px}
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services-grid .service-card:last-child{grid-column:1/-1}
  .benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .benefits-grid>div:nth-child(2){border-right:0}
  .benefits-grid>div:nth-child(3){padding-left:0}
  .showcase-grid.showcase-three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .showcase-grid.showcase-three .showcase-item:last-child{grid-column:1/-1}
  .prefooter-inner{flex-wrap:wrap}
}
@media(max-width:620px){
  .navigation{min-height:67px}
  .brand-image-link{width:198px}
  .hero-blue .container{width:calc(100% - 32px)}
  .hero-blue .hero-content{padding:35px 0 15px}
  .hero-brandline{font-size:9px;letter-spacing:.13em;line-height:1.7;margin-bottom:22px}
  .hero-brandline b{padding:0 3px}
  .hero-blue h1{font-size:clamp(31px,8.9vw,45px)}
  .hero-blue .hero-lead{font-size:14px}
  .hero-blue .hero-actions .btn{width:100%;justify-content:center}
  .hero-benefits{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hero-benefits>span:not(:first-child){padding:0;border:0}
  .hero-device-wrap{height:300px;margin:5px auto 30px}
  .hero-device{max-width:370px}
  .device-screen{border-width:6px}
  .device-navbar{height:25px;padding:0 8px}
  .device-copy{padding:11% 8%;gap:4px}
  .device-copy strong{font-size:16px}
  .device-copy>span{font-size:6px}
  .device-copy i{height:11px;width:60px}
  .device-tiles{padding:6px;gap:4px}
  .device-tiles>span{font-size:6px;padding:4px}
  .device-tiles b{font-size:11px}
  .device-base{height:12px}
  .hero-glow-label{font-size:8px;bottom:6px}
  .section{padding:64px 0}
  .section-heading h2{font-size:34px}
  .services-grid,.showcase-grid.showcase-three{grid-template-columns:1fr}
  .services-grid .service-card:last-child,.showcase-grid.showcase-three .showcase-item:last-child{grid-column:auto}
  .service-card{min-height:255px}
  .service-card-icon{margin:18px 0}
  .benefits-grid{grid-template-columns:1fr;gap:0}
  .benefits-grid>div{padding:20px 0!important;border-right:0!important;border-bottom:1px solid #20527d!important}
  .showcase-preview{height:210px}
  .prefooter-inner{align-items:start}
  .prefooter-inner .cta-icon{width:52px;height:52px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-about{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.hero-blue *, .site-header *{animation:none!important;transition:none!important}}