@font-face{font-family:ServiceDM;src:url('../hero-assets/DMSans.ttf');font-weight:100 1000;font-display:swap}@font-face{font-family:ServiceAnton;src:url('../hero-assets/Anton-Regular.ttf');font-display:swap}
:root{color-scheme:dark;--paper:#f6f1ee;--muted:#c5bdc7;--ground:#000000;--purple:#b69bd6;scrollbar-color:var(--purple) var(--ground)}*{box-sizing:border-box}body{margin:0;background:var(--ground);color:var(--paper);font-family:ServiceDM,sans-serif}::selection{background:var(--purple);color:var(--ground)}a{color:inherit;text-underline-offset:5px}a:focus-visible{outline:3px solid #ff4b33;outline-offset:6px}.top,main,footer{max-width:1320px;margin:auto;padding:32px clamp(22px,5vw,72px)}.top{display:flex;justify-content:space-between;gap:24px;border-bottom:1px solid #514650}.top a{min-height:44px;display:flex;align-items:center}.top span{align-self:center}h1,h2{font-family:ServiceAnton,sans-serif;font-weight:400;line-height:1.14;overflow-wrap:break-word;hyphens:auto}h1{font-size:clamp(44px,7.4vw,96px);margin:40px 0 24px}h2{font-size:clamp(30px,4vw,48px);margin:0}.lead{font-size:clamp(24px,3vw,36px);max-width:28ch;line-height:1.35}.intro{font-size:20px;line-height:1.65;max-width:65ch}.hero{margin:64px 0}.hero img{display:block;width:100%;height:auto;max-height:860px;object-fit:contain}.hero figcaption,figcaption{font-size:14px;line-height:1.5;color:var(--muted);margin-top:14px}.details{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;padding:56px 0;border-top:1px solid #514650}.details ul,.details ol{margin:0;padding-left:24px;font-size:20px;line-height:1.65}.details li+li{margin-top:16px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:50px 0}.gallery figure{margin:0}.gallery img{width:100%;height:auto;display:block}.end{margin:70px 0 30px;font-size:22px}.end a{display:inline-flex;align-items:center;gap:18px;min-height:48px}
.service-page .end a{transition:color .2s,text-shadow .2s}
.service-page .end a:is(:hover,:focus-visible,:active){color:#ff4b33;text-shadow:0 0 12px #ff4b3370,0 1px 2px #0009}
@media(prefers-reduced-motion:reduce){.service-page .end a{transition:none}}
svg{width:22px;height:22px}footer{color:var(--muted);font-size:14px;line-height:1.6;border-top:1px solid #514650}@media(max-width:700px){.top{font-size:14px}.details{grid-template-columns:1fr;gap:24px}.gallery{grid-template-columns:1fr}.intro,.details ul,.details ol{font-size:18px}.hero{margin:40px 0}h1{margin-top:24px}}

/* Image bounds follow the actual motif, so portrait images also have rounded corners. */
@media(min-width:1000px){.workflow-image{max-width:760px;margin-inline:auto}}
.brand-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.content-gallery{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}
.content-gallery img{width:auto;max-width:100%;height:auto;max-height:100%;border-radius:16px}
.content-gallery figure{aspect-ratio:3/4;display:flex;align-items:center;justify-content:center}
@media(min-width:701px){.content-gallery figure{aspect-ratio:auto}.content-gallery img{height:min(30vw,420px);width:auto;max-height:none}}
.device-composition{margin:80px 0 50px}
.service-composition{max-width:900px;margin-inline:auto}
.device-composition iframe{display:block;width:100%;height:auto;aspect-ratio:1850/1510;border:0;border-radius:16px}
@media(max-width:700px){.content-gallery{grid-template-columns:1fr}.device-composition{margin-top:48px}}
.content-campaign{display:contents}
@media(min-width:1000px){
 .content-campaign{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:28px;margin:50px 0}
 .content-campaign .content-gallery{gap:18px;margin:0}
 .content-campaign .content-gallery figure{aspect-ratio:3/4;min-width:0}
 .content-campaign .content-gallery img{width:100%;height:100%;max-height:none;object-fit:cover}
 .content-campaign .service-composition{width:100%;max-width:none;min-width:0;margin:0}
}
.web-detail{grid-template-areas:"heading list" "image list";grid-template-rows:auto 1fr;row-gap:32px}
.web-detail h2{grid-area:heading}
.web-detail>ul,.web-detail>ol{grid-area:list}
.web-detail-image{grid-area:image;margin:0;align-self:start}
@media(min-width:701px){
 .web-detail:has(.develop-heading){row-gap:56px}
 .web-detail:has(.web-development-laptop){grid-template-areas:"heading list" "image list" ". list";grid-template-rows:1fr auto 1fr}
 .web-detail:has(.web-development-laptop)>ul{align-self:center}
 #so-gehen-wir-vor{grid-template-areas:"heading heading" "image list"}
 #so-gehen-wir-vor>:is(ol,figure){align-self:center}
}
.web-detail-image img{display:block;width:83.333%;height:auto;margin-inline:auto;border-radius:16px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
.content-detail .web-detail-image img{width:min(100%,360px)}
@media(hover:hover) and (pointer:fine){.web-detail-image img:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 36px #0005}}
@media(prefers-reduced-motion:reduce){.web-detail-image img{transition:none}.web-detail-image img:hover{transform:none}}
@media(max-width:700px){.web-detail{grid-template-areas:"heading" "list";grid-template-rows:auto}.web-mobile-images{display:grid;gap:32px}.web-mobile-images .web-detail-image{grid-area:auto}}
@media(max-width:700px){.content-detail{grid-template-areas:"heading" "list" "image"}}
.brand-gallery img{width:100%;aspect-ratio:3/4;object-fit:contain}
@media(max-width:700px){.brand-gallery{grid-template-columns:1fr}}
.details .develop-heading{font-size:clamp(24px,3.3vw,44px)}
.develop-heading .heading-line{white-space:nowrap}
@media(max-width:700px){.details .develop-heading{font-size:clamp(24px,7vw,44px)}}
.brand-signet{display:block;flex:none;width:48px;height:55px;background:url('../hero-assets/dsgn-fctry-signet-offwhite.svg') center / contain no-repeat}
.top a{margin-left:auto;text-align:right}
.strategy-color{color:#b79ad3}.research-color{color:#ff4b33}
.details h2{color:transparent;-webkit-text-stroke:1.2px var(--paper)}
.details h2{line-height:1.4}
.heading-highlight{position:relative;display:inline-block;isolation:isolate;white-space:nowrap;color:var(--ground);-webkit-text-stroke:0;padding:0 .16em}
.heading-highlight svg{position:absolute;left:-5%;top:-8%;width:116%;height:116%;z-index:-1;pointer-events:none}
@media(forced-colors:active){.heading-highlight{color:CanvasText}.heading-highlight svg{display:none}}
.strategy-page .hero{max-width:720px;margin:48px auto}
.strategy-page .hero img{max-height:480px}
.strategy-intro{position:relative;display:flow-root}
.strategy-ink{display:none}
@media(min-width:1000px){
 .strategy-page main{position:relative}
 .strategy-intro{min-height:570px}
 .strategy-copy{position:relative;z-index:2;pointer-events:none}
 .strategy-page .hero{position:absolute;top:88px;right:clamp(22px,5vw,72px);width:32%;max-width:360px;margin:0;z-index:1}
 .strategy-page .hero img{width:100%;max-height:none}
 .strategy-ink{display:block;position:absolute;inset:0;z-index:3;pointer-events:none;clip-path:inset(100%)}
 .strategy-ink,.strategy-ink .strategy-color,.strategy-ink .research-color{color:#000}
}
@media(forced-colors:active){.details h2{color:CanvasText;-webkit-text-stroke:0}}
.hero img{width:auto;max-width:100%;margin-inline:auto}
.hero img,.gallery img{border-radius:16px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease}
@media(hover:hover) and (pointer:fine){.hero img:hover,.gallery img:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 36px #0005}}
@media(prefers-reduced-motion:reduce){.hero img,.gallery img{transition:none}.hero img:hover,.gallery img:hover{transform:none}}
h1,h2,h3,h4,h5,h6{hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}

/* Keep project pages that share this stylesheet at their approved text sizes. */
.service-page .lead{font-size:clamp(26px,3.2vw,38px)}
.service-page .intro,.service-page .details ul,.service-page .details ol{font-size:22px}
.service-page figcaption{font-size:16px}
@media(max-width:700px){.service-page .intro,.service-page .details ul,.service-page .details ol{font-size:20px}}

/* Service headlines reuse the approved paint-mask treatment, keeping live text underneath. */
.service-page main{container-type:inline-size}
.service-page h1{line-height:1.2;text-transform:uppercase}
.service-page .title-opening,.service-page .title-paint{display:inline-block;white-space:nowrap}
.service-page .title-join{color:transparent;-webkit-text-stroke:clamp(1.4px,.028em,3px) #f7f7f5}
.service-page .lead{color:#969696;font-weight:700;font-variation-settings:"wght" 700}
.service-page .details h2 .heading-solid{color:#f7f7f5;-webkit-text-stroke:0}
.service-page .strategy-ink .title-join{-webkit-text-stroke-color:#000}
.service-page .strategy-ink .lead{color:#000}
@supports(mask-mode:luminance){
 .service-page .title-paint{position:relative;width:var(--paint-width);-webkit-text-fill-color:transparent}
 .service-page .title-paint::after{content:"";position:absolute;left:0;top:var(--paint-top);width:100%;height:var(--paint-height);background:currentColor;mask-image:var(--paint-image);mask-mode:luminance;mask-repeat:no-repeat;mask-size:var(--paint-size);mask-position:var(--paint-position);pointer-events:none}
 .service-page [data-paint="strategie"]{--paint-image:url("services-titles-first.web.webp");--paint-width:5.5337em;--paint-top:-0.0057em;--paint-height:1.0011em;--paint-size:131.6364% 545.7286%;--paint-position:50.8621% 4.2841%}
 .service-page [data-paint="brand"]{--paint-image:url("services-titles-first.web.webp");--paint-width:3.6384em;--paint-top:0.0216em;--paint-height:0.9673em;--paint-size:195.4116% 551.2690%;--paint-position:50.2122% 27.1091%}
 .service-page [data-paint="web"]{--paint-image:url("services-titles-first.web.webp");--paint-width:2.4946em;--paint-top:0.0063em;--paint-height:0.9731em;--paint-size:286.7327% 551.2690%;--paint-position:50.9014% 49.2688%}
 .service-page [data-paint="content"]{--paint-image:url("services-titles-first.web.webp");--paint-width:4.7017em;--paint-top:0.0081em;--paint-height:0.9850em;--paint-size:149.4324% 534.9754%;--paint-position:50.5219% 71.9139%}
 .service-page [data-paint="workflow"]{--paint-image:url("services-titles-first.web.webp");--paint-width:6.0963em;--paint-top:0.0124em;--paint-height:0.9957em;--paint-size:115.9327% 532.3529%;--paint-position:49.7487% 95.0113%}
 .service-page [data-paint="research"]{--paint-image:url("services-titles-second.web.webp");--paint-width:5.2337em;--paint-top:-0.0221em;--paint-height:1.0511em;--paint-size:152.2608% 568.5864%;--paint-position:50.7042% 7.7095%}
 .service-page [data-paint="design"]{--paint-image:url("services-titles-second.web.webp");--paint-width:3.6792em;--paint-top:0.0129em;--paint-height:0.9872em;--paint-size:212.3167% 593.4426%;--paint-position:49.7389% 30.3433%}
 .service-page [data-paint="e-commerce"]{--paint-image:url("services-titles-second.web.webp");--paint-width:6.2991em;--paint-top:0.0195em;--paint-height:0.9851em;--paint-size:122.4007% 587.0270%;--paint-position:51.3208% 52.4972%}
 .service-page [data-paint="vermarktung"]{--paint-image:url("services-titles-second.web.webp");--paint-width:7.1574em;--paint-top:0.0231em;--paint-height:0.9612em;--paint-size:109.8634% 613.5593%;--paint-position:50.7692% 74.2574%}
 .service-page [data-paint="automatisierung"]{--paint-image:url("services-titles-second.web.webp");--paint-width:8.5219em;--paint-top:0.0128em;--paint-height:0.9840em;--paint-size:103.2074% 670.3704%;--paint-position:51.1111% 93.7229%}
}
@media(max-width:700px){
 .service-page h1{margin-top:40px;font-size:clamp(32px,13.8cqi,58px)}
 .service-page .workflow-title{font-size:clamp(28px,11.3cqi,48px)}
}
@media(forced-colors:active){
 .service-page .title-paint{-webkit-text-fill-color:CanvasText}
 .service-page .title-paint::after{display:none}
 .service-page .title-join{color:CanvasText;-webkit-text-stroke:0}
}

/* Keep the approved content position below the shared desktop navigation. */
@media(min-width:901px){.service-page>.top{visibility:hidden;border-color:transparent}}

@media (max-width:900px){
  .brand-signet{background-image:url("../hero-assets/dsgn-fctry-signet-farbig.png")}
}