/* Complete theme tokens and the shared moving backdrop. */
:root,[data-theme="light"]{color-scheme:light;--scene:#cdddee;--panel:#f9fbfe;--panel-alt:#e7effa;--ink:#1a304d;--muted:#49617f;--blue:#315f9f;--line:#b9cbe1;--chip:#dce8f6;--control:#fff;--selected:#254f88;--selected-text:#fff;--demo:#d7e7fa;--demo-ink:#203f68;--deep:#203f68;--deep-text:#e9f2ff;--shadow:#183c6210}
[data-theme="dark"]{color-scheme:dark;--scene:#10233c;--panel:#192f4b;--panel-alt:#203c5e;--ink:#e5effd;--muted:#b6cbe5;--blue:#a3c6f6;--line:#476385;--chip:#2c486a;--control:#203b5c;--selected:#a8cafa;--selected-text:#132b49;--demo:#294b72;--demo-ink:#e0edff;--deep:#102741;--deep-text:#e9f2ff;--shadow:#06142625}
html{overflow-x:clip}body{background:var(--scene);color:var(--ink);transition:background-color .25s,color .25s}.digital-background{position:fixed;inset:0;width:100%;height:100vh!important;z-index:0;opacity:1;mask-image:none}.header,main,footer{position:relative;z-index:1}.hero::before,#leistungen::before,.approach::before,.process::before,footer::before{display:none}.wrap{width:min(1320px,calc(100% - 96px))}.header{height:auto;min-height:106px;gap:24px;flex-wrap:wrap;color:var(--ink);padding-block:22px}.header nav{gap:23px}.header .nav-contact{border-color:var(--line)}.header .nav-contact span,.header nav a:hover{color:var(--blue)}.header .brand-mark i{background:var(--blue)}.preferences{display:flex;gap:12px}.segmented{display:flex;padding:3px;gap:2px;border:1px solid var(--line);border-radius:7px;background:var(--control)}button{font:inherit;cursor:pointer}.segmented button{border:0;border-radius:4px;padding:6px 9px;font-size:13px;background:transparent;color:var(--ink);min-height:34px}.segmented button[aria-pressed="true"]{background:var(--selected);color:var(--selected-text)}button:focus-visible{outline:3px solid var(--blue);outline-offset:4px}.menu-toggle{display:none;border:1px solid var(--line);border-radius:6px;background:var(--control);color:var(--ink);padding:8px 12px}.hero{color:var(--ink);padding:50px 0 0;margin-bottom:100px}.hero>.eyebrow{color:var(--muted)}.small-line{background:var(--blue)}.hero .blue{color:var(--blue)}.hero-bottom p{color:var(--muted)}.hero .button{background:var(--selected);color:var(--selected-text)}.hero .button:hover{background:var(--selected);filter:brightness(1.1)}.hero .button span{background:#ffffff18}.hero-copy{background:color-mix(in srgb,var(--scene) 85%,transparent);border-radius:8px;padding:20px;margin:-20px}.hero-system{background:var(--panel);border-color:var(--line);border-radius:8px;padding-inline:20px}.system-item strong,.system-hub{color:var(--ink)}.system-item>span:last-child,.system-number,.hero-foot{color:var(--muted)}.system-hub{border-color:var(--line)}.system-hub .hub-icon{color:var(--blue)}.identity-panel{background:color-mix(in srgb,var(--panel-alt) 78%,transparent);border-color:var(--line);backdrop-filter:none}.studio-identity{color:var(--ink)}.identity-symbol,.identity-pixel{color:var(--blue)}.identity-pixel{background:var(--blue)}.identity-subtitle,.art-meta,.art-bottom{color:var(--muted)}.art-arrow{color:var(--blue)}.hero h1{font-size:clamp(52px,5.65vw,86px)}
#leistungen,.solutions,.approach,.process,.contact{width:min(1400px,calc(100% - 64px));margin:100px auto;padding:76px 54px;border:1px solid var(--line);border-radius:12px;background:var(--panel);box-shadow:0 16px 60px var(--shadow)}#leistungen{gap:70px}.solutions{background:var(--panel-alt)}.solutions>.wrap,.contact>.wrap{width:100%}.approach,.process{background:var(--panel)}.contact{background:var(--deep);color:var(--deep-text);border-color:var(--line)}.contact::after{display:none}.contact .eyebrow,.contact p:not(.eyebrow),.private-note{color:#c4d8f1}.contact-status{border-color:#617da2}.outline-icon{color:#adcdf5}.eyebrow,.concept-label{color:var(--muted)}.service p,.concept p,.section-heading>p:last-child:not(.eyebrow),.approach-text p,.steps p{color:var(--muted)}.approach-text .large-copy,.approach-note p{color:var(--ink)}.service,.service:last-child,.approach-note,.steps,.steps li{border-color:var(--line)}.service-symbol{color:var(--blue)}.tags span{background:var(--chip);color:var(--ink)}.concept-grid{grid-template-columns:1.12fr 1fr}.web-demo,.workflow-demo{background:var(--demo);color:var(--demo-ink)}.demo-web-button{background:var(--selected);color:var(--selected-text)}.demo-web-line{background:var(--line)}.demo-web-bottom{border-color:var(--line)}.workflow-demo .demo-top{color:var(--muted)}.flow-node{background:var(--panel);border-color:var(--line);color:var(--ink)}.flow-node small{color:var(--muted)}.flow-node.active{background:var(--selected);border-color:var(--selected);color:var(--selected-text)}.flow-node.active .node-symbol,.flow-node.active small{color:var(--selected-text)}.data-demo{background:var(--deep);color:var(--deep-text)}.chart-title span,.data-demo .demo-top,.chart-axis,.chart-key{color:#c4d7ed}.chart b,.chart-key span:last-child i{background:#7694b9}.chart i,.chart-key i{background:#aacdfb}.chart{border-color:#6581a5}.flow-check,.node-symbol{color:var(--blue)}footer{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:32px;margin:90px auto 30px}.footer-top>span,.footer-bottom{color:var(--muted)}.footer-bottom{border-color:var(--line)}.reading-progress{background:var(--blue)}.skip{background:var(--panel);color:var(--ink)}.intro{background:#254e80}
@media(max-width:1180px){.header{gap:18px}.header nav{gap:18px}.preferences{margin-left:auto}.header .nav-contact{display:none}.header .logo{margin-right:auto}#leistungen{gap:40px}.system-hub{font-size:11px}.system-item>span:last-child{font-size:11px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.header{padding-block:18px;gap:15px;min-height:120px}.header .logo{font-size:26px}.menu-toggle{display:block}.preferences{flex-basis:100%;justify-content:space-between;margin-left:0}.segmented button{min-width:43px;min-height:37px}.header nav{display:none;order:4;flex-basis:100%;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:7px;justify-content:space-between;font-size:14px}.header.menu-open nav{display:flex}.hero{padding-top:30px;margin-bottom:65px}.hero-composition{display:block}.hero h1{font-size:clamp(49px,12vw,76px)}.hero-copy{padding:12px;margin:-12px}.hero>.eyebrow{font-size:9px}.hero-system{padding-inline:12px}.system-hub,.system-item:nth-child(3){border-color:var(--line)}.system-item strong{font-size:24px}.system-hub{font-size:10px}.hero-foot{font-size:10px}.identity-subtitle{font-size:8px;letter-spacing:1px}#leistungen,.solutions,.approach,.process,.contact{width:calc(100% - 24px);margin:65px auto;padding:38px 23px;border-radius:9px}.section-heading{margin-bottom:28px}h2,#leistungen .section-heading h2{font-size:32px}.concept-grid{display:block}.service{grid-template-columns:22px 1fr 20px;gap:6px}.service h3{font-size:20px}.service p{font-size:15px}.concept:first-child .concept-visual{padding:21px;height:350px}.concept:first-child .demo-web-title{font-size:39px}.concept:first-child .demo-top{font-size:9px}.flow-node{padding:10px 8px;gap:6px;font-size:11px}.flow-node small{font-size:9px}.concept-visual{padding:18px}.concept h3{font-size:22px}.concept p{font-size:15px}.concept-label{font-size:9px}.steps{gap:27px 19px}.steps h3{font-size:18px;overflow-wrap:anywhere}.steps p{font-size:14px}.contact h2{font-size:35px}.contact-status h3{font-size:22px}.footer-top{gap:17px}footer{width:calc(100% - 24px);padding:25px;margin-top:65px}.footer-bottom{font-size:11px}}
@media(prefers-reduced-motion:reduce){body{transition:none}.digital-background{opacity:.55}}
html[lang="en"] .concept:first-child .demo-web-title{font-size:48px;line-height:1.18}
@media(max-width:760px){html[lang="en"] .concept:first-child .demo-web-title{font-size:32px;letter-spacing:-1.5px}.concept-visual .demo-top{flex-wrap:wrap}}
@media(max-width:760px){.data-demo{height:315px}.data-demo .demo-top{gap:6px}.chart-title{gap:10px}}

/* Screenshot-approved original lettering; original upper identity symbol retained. */
.precision-wordmark{display:block;width:154px;height:auto;color:#142b49;flex-shrink:0}
[data-theme="dark"] .precision-wordmark{color:#e0ecfa}
[data-theme="dark"] .precision-accent{stroke:#65acff}
.identity-word{width:82%;max-width:340px;display:flex;align-items:flex-start;justify-content:center;line-height:1}
.identity-word .precision-wordmark{width:100%}
.footer-top .precision-wordmark{width:172px}
@media(max-width:760px){.header .precision-wordmark{width:143px}.identity-word{max-width:310px}}

/* Match the original symbol to the lettering, with one blue terminal. */
.identity-symbol{color:#142b49}
[data-theme="dark"] .identity-symbol{color:#e0ecfa}
[data-theme="dark"] .identity-symbol .identity-tip{stroke:#65acff}

/* Reveal the existing animated network behind the assembling wordmark. */
.intro{background:transparent}
.intro-caption{color:var(--muted)}
.entrance-enabled:not(.entrance-ready) .header,
.entrance-enabled:not(.entrance-ready) main,
.entrance-enabled:not(.entrance-ready) footer{visibility:hidden}


/* Contact panel and accessible local validation. */
html{scroll-behavior:smooth}#kontakt{scroll-margin-top:24px}
.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:60px;align-items:start}
.contact-form{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:10px;color:var(--ink);min-width:0}
.contact-form h3{font-size:26px;margin:0 0 10px}.contact .contact-form p{color:var(--muted)}
.contact-form .form-note{font-size:13px;line-height:1.6;margin:0 0 20px}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form-field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;min-width:0}.form-field label{font-size:14px;font-weight:600}
.form-field input,.form-field textarea{box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--control);color:var(--ink);padding:12px 14px;font:inherit;font-size:16px;line-height:1.5}.form-field textarea{resize:vertical;min-height:145px}
.form-field input:focus-visible,.form-field textarea:focus-visible{outline:2px solid var(--blue);outline-offset:3px}.form-field [aria-invalid="true"]{border-color:var(--blue)}
.contact-form .button{border:0;margin-top:0;background:var(--selected);color:var(--selected-text);font-size:15px}.contact-form .form-result{font-size:14px;margin:16px 0 0}.form-result:empty{display:none}
@media(max-width:760px){.contact-grid{display:grid;grid-template-columns:1fr;gap:30px}.contact-form{padding:22px}.name-fields{grid-template-columns:1fr;gap:0}.header nav{flex-wrap:wrap;gap:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Quiet blue translucent surfaces, keeping labels and controls crisp. */
.contact{background:color-mix(in srgb,var(--deep) 92%,transparent)}
.contact-form{background:rgba(222,236,250,.91);border-color:rgba(177,204,232,.68);box-shadow:0 8px 24px #102b4810}
.form-field input,.form-field textarea{background:rgba(246,250,255,.64);border-color:#587394}
[data-theme="dark"] .contact-form{background:rgba(36,62,92,.76);border-color:rgba(143,179,220,.32);box-shadow:0 8px 24px #06142618}
[data-theme="dark"] .form-field input,[data-theme="dark"] .form-field textarea{background:rgba(21,43,69,.56);border-color:#829cba}
.form-field input:focus-visible,.form-field textarea:focus-visible{border-color:var(--blue);outline:2px solid var(--blue);outline-offset:3px}
.form-field [aria-invalid="true"]{border-color:var(--blue);border-width:2px}

.legal-links{display:flex;gap:24px;flex-wrap:wrap;padding:0 0 22px;font-size:14px}.legal-links a{text-decoration:underline;text-underline-offset:4px}

/* Shared geometry across languages; footer surface follows the contact surface. */
footer.wrap{width:min(1400px,calc(100% - 64px));padding:32px 54px}
.header .logo{display:grid;grid-template-columns:auto auto;column-gap:9px;row-gap:5px}
.header .brand-mark{grid-column:2;grid-row:1}
.brand-caption{grid-column:1/-1;font:500 11px/1.3 var(--font);letter-spacing:1.6px;color:var(--muted)}
.hero-composition{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(48px,5.65vw,86px);line-height:1.06}
.hero-bottom p{font-family:var(--font);font-weight:400;font-size:17px;line-height:1.7;min-height:5lh}
.contact{padding-block:48px}
.contact-grid{gap:40px}
.contact h2{font-size:clamp(32px,3.15vw,46px);line-height:1.15;margin-bottom:20px}
.contact-grid>div>p:last-child{font-size:15px;line-height:1.65}
.contact-form{padding:24px}
.contact-form h3{font-size:22px;margin-bottom:6px}
.contact-form .form-note{margin-bottom:14px;line-height:1.5}
.form-field{gap:6px;margin-bottom:14px}
.form-field input,.form-field textarea{padding:9px 12px;min-height:44px}
.form-field textarea{min-height:112px}
.contact-form .button{min-height:44px;padding:10px 16px;font-size:14px}
@media(max-width:760px){
  footer.wrap{width:calc(100% - 24px);padding:25px 23px}
  .hero h1{font-size:clamp(42px,11.5vw,76px);line-height:1.06}
  .hero-bottom p{font-size:16px;min-height:5lh}
  .contact{padding-block:32px}
  .contact-grid{gap:24px}
  .contact h2{font-size:32px}
  .contact-form{padding:18px}
  .name-fields{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:359px){.hero-bottom p{min-height:6lh}.name-fields{grid-template-columns:1fr;gap:0}}

.hero-bottom .button{min-width:244px;justify-content:space-between}
@media(max-width:760px){.system-grid{grid-auto-rows:minmax(108px,auto)}}

/* A quieter form, balanced by practical guidance rather than empty space. */
.brand-caption{font-size:14px;line-height:1.35;letter-spacing:1.1px}
.header .logo{row-gap:6px}
.contact-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,500px);justify-content:space-between;gap:clamp(32px,5vw,80px)}
.contact-form{width:100%;max-width:500px;justify-self:end}
.contact-guide{margin-top:36px;max-width:390px}
.contact-guide h3{font:500 16px/1.5 var(--font);margin:0 0 16px;letter-spacing:0}
.contact-guide dl{margin:0}
.contact-guide dl>div{padding:12px 0;border-top:1px solid #adcdf538}
.contact-guide dt{font-size:14px;font-weight:600;line-height:1.5}
.contact-guide dd{margin:4px 0 0;font-size:14px;line-height:1.5;color:#c4d8f1}
.contact .contact-guide p{font-size:13px;line-height:1.5;margin:12px 0 0}
.form-field input{max-width:100%;text-overflow:clip}
.form-field textarea{height:116px;max-height:220px;overflow-y:auto;overflow-wrap:anywhere;white-space:pre-wrap;resize:vertical}
@media(max-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr);gap:28px}.contact-form{justify-self:start}.contact-guide{margin-top:24px;max-width:500px}}
@media(max-width:760px){.brand-caption{font-size:13px;letter-spacing:1px}.contact-guide dl>div{padding:10px 0}.contact-guide h3{font-size:15px;margin-bottom:12px}}

.contact>.contact-grid{max-width:1100px;margin-inline:auto;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:64px}
@media(max-width:1100px){.contact>.contact-grid{gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,440px)}}
@media(max-width:900px){.contact>.contact-grid{grid-template-columns:minmax(0,1fr);gap:28px;max-width:500px}}

/* Shared navigation for the home page and the static DE/EN page pairs. */
.header nav{gap:18px;font-size:13px}
.header nav a[aria-current="page"]{color:var(--blue);text-decoration:underline;text-underline-offset:6px}
.segmented a{display:flex;align-items:center;justify-content:center;border-radius:4px;padding:6px 9px;font-size:13px;min-height:34px;color:var(--ink)}
.segmented a[aria-current="page"]{background:var(--selected);color:var(--selected-text)}
@media(max-width:1100px){
  .header .menu-toggle{display:block}
  .header nav{display:none;order:4;flex-basis:100%;padding:16px;background:var(--panel);border:1px solid var(--line);border-radius:7px;gap:4px 16px}
  .header.menu-open nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .header nav a{min-height:44px;display:flex;align-items:center}
}
@media(max-width:760px){.header.menu-open nav{grid-template-columns:repeat(2,minmax(0,1fr))}.segmented a{min-width:43px;min-height:37px}}

/* The signature follows the right edge of the approved lettering. */
footer .logo{display:grid;grid-template-columns:auto auto;column-gap:9px;row-gap:6px}
footer .logo .brand-mark{grid-column:2;grid-row:1}
footer .logo .brand-caption{grid-column:1;justify-self:end;font-size:13px;line-height:1.35;letter-spacing:1px}
.intro .intro-caption{left:50%;top:calc(46% + min(6.93vw,67.61px) + 12px);width:min(82vw,800px);transform:translateX(-50%);text-align:right;margin:0;font:500 clamp(22px,3.5vw,38px)/1.25 var(--font);letter-spacing:.08em;color:var(--ink);opacity:0}

/* Approved compact brand card, scaled to its own column. */
.hero .identity-panel{container-type:inline-size;width:100%;height:auto;min-height:260px;aspect-ratio:41/27;align-self:center;border-radius:5px}
.identity-panel .art-meta{left:clamp(16px,4.39cqw,36px);right:clamp(16px,4.39cqw,36px);top:clamp(16px,3.66cqw,30px);gap:12px;font-size:clamp(9px,1.585cqw,13px);font-weight:500;line-height:1.5;letter-spacing:clamp(1px,.244cqw,2px)}
.identity-panel .studio-identity{padding-bottom:clamp(6px,1.22cqw,10px)}
.identity-panel .identity-symbol{width:clamp(44px,10.49cqw,86px);height:clamp(44px,10.49cqw,86px);margin-bottom:clamp(12px,3.05cqw,25px);flex-shrink:0}
.identity-panel .identity-word{width:58.54%;max-width:480px;line-height:1}
.identity-panel .identity-subtitle{width:58.54%;max-width:480px;text-align:right;margin-top:clamp(9px,1.22cqw,10px);font:400 clamp(13px,2.683cqw,22px)/1.4 var(--font);letter-spacing:.055em;color:var(--muted)}
.identity-panel .art-bottom{left:clamp(16px,4.39cqw,36px);right:clamp(16px,4.39cqw,36px);bottom:clamp(16px,3.66cqw,30px);gap:20px;font-size:clamp(11px,1.951cqw,16px);line-height:1.55}
.identity-panel .art-arrow{font-size:clamp(32px,6.951cqw,57px);line-height:1;font-weight:400}

/* Match the header signature alignment to the footer wordmark. */
.header .logo .brand-caption{grid-column:1;justify-self:end;text-align:right;font-size:13px;line-height:1.35;letter-spacing:1px}

/* One optional, explicitly illustrative walkthrough. */
.demo-detail{margin-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.65}
.demo-detail summary{padding:12px 0;min-height:44px;cursor:pointer;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.demo-detail summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.concept .demo-detail .demo-disclaimer{font-size:13px;line-height:1.6;margin:4px 0 18px;color:var(--muted)}
.demo-detail dl{margin:0}.demo-detail dl>div{margin-bottom:16px}.demo-detail dt{font-weight:600;color:var(--ink)}
.demo-detail dd{margin:4px 0 0;color:var(--muted)}
.form-privacy-link{display:block;font-size:13px;text-decoration:underline;text-underline-offset:3px;margin:0 0 16px}

/* Clear, accessible confirmation after accepted delivery. */
.contact-form .form-result.is-success{display:block;padding:20px 22px;border:1px solid #8ac8ad;border-radius:10px;background:#eaf8f0;color:#174d35;font-size:18px;font-weight:600;line-height:1.5;margin:0 0 16px;outline-offset:4px}
.contact-form .form-result.is-success::before{content:'✓';display:inline-block;margin-right:10px;font-size:24px;font-weight:700}
.contact-form .form-another{margin:0 0 24px;background:transparent;color:inherit;border:1px solid currentColor;padding:10px 16px;border-radius:6px;cursor:pointer}
.contact-form .form-challenge{width:300px;max-width:100%;margin:12px 0}
.contact-form [hidden]{display:none!important}