@font-face{font-family:Geist;src:url("assets/geist-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  color-scheme:dark;
  --base:#111411;
  --surface:#181d17;
  --lift:#20271e;
  --text:#f1f4e9;
  --muted:#b7c0b2;
  --accent:#cefb69;
  --accent-ink:#18200b;
  --line:#394337;
  --bright-line:#65745d;
  --shell:1320px;
  --pad:clamp(18px,5.4vw,78px);
  color:var(--text);
  background:var(--base);
  font:16px/1.5 Geist,system-ui,sans-serif;
  font-synthesis:none;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body,h1,h2,h3,p,figure{margin:0}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.55}
:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
section[id],article[id]{scroll-margin-top:90px}
.shell{width:min(var(--shell),calc(100% - 2 * var(--pad)));margin-inline:auto}
.section-space{padding-block:clamp(63px,9vw,136px);border-bottom:1px solid var(--line)}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip{position:fixed;top:10px;left:10px;z-index:20;transform:translateY(-160%);padding:10px 13px;background:var(--accent);color:var(--accent-ink)}
.skip:focus{transform:none}
.header-frame{position:sticky;top:0;z-index:5;background:#111411eb;backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.read-progress{position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;pointer-events:none}
.site-header,.site-footer{display:flex;align-items:center;justify-content:space-between;gap:clamp(12px,3vw,38px);min-height:74px}
.wordmark{display:inline-flex;align-items:center;white-space:nowrap;letter-spacing:-.087em;font-size:clamp(23px,3vw,32px);font-weight:750;line-height:1}
.mark{display:inline-block;width:23px;height:23px;margin-right:9px;background:var(--accent);clip-path:polygon(0 0,50% 0,50% 50%,100% 50%,100% 100%,50% 100%,50% 50%,0 50%)}
.dot{color:var(--accent)}
.site-header nav,.site-footer nav{display:flex;gap:clamp(13px,2.8vw,37px);font-size:.86rem;font-weight:610}
.site-header nav a,.site-footer nav a{padding-block:8px}
.site-header nav a:hover,.site-footer nav a:hover,.text-link:hover{color:var(--accent)}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:20px;min-height:50px;padding:11px 17px;border:1px solid transparent;border-radius:3px;font-size:.87rem;font-weight:700;line-height:1.2;transition:background .18s,border-color .18s,color .18s}
.button span{font-size:1.15rem;line-height:1}
.button-outline{border-color:var(--bright-line);background:transparent;color:var(--text);min-height:42px}
.button-outline:hover{border-color:var(--accent);color:var(--accent)}
.button-primary{background:var(--accent);color:var(--accent-ink)}
.button-primary:hover{background:#e3ffac}
.text-link{display:inline-flex;align-items:center;gap:9px;font-size:.88rem;font-weight:630;text-underline-offset:5px;text-decoration:underline;text-decoration-color:var(--bright-line)}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:clamp(.66rem,.9vw,.77rem);font-weight:680;text-transform:uppercase;letter-spacing:.125em;color:var(--accent)}
.eyebrow i{height:8px;width:8px;background:currentColor;flex:none}
.hero{position:relative;isolation:isolate;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 80% 43%,#202b19 0%,var(--base) 66%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:clamp(570px,52vw,760px);align-items:center}
.hero-content{z-index:1;padding-block:clamp(55px,8vw,112px)}
.hero h1,.section-heading h2,.contact-layout h2,.legal h1{font-weight:710;line-height:.9;letter-spacing:-.082em;text-wrap:balance}
.hero h1{font-size:clamp(52px,8.25vw,133px);margin:23px 0 25px;white-space:nowrap}
.hero h1 span,.contact-layout h2 span{color:var(--accent)}
.hero-copy,.section-heading>p,.contact-layout>div>p:not(.eyebrow){font-size:clamp(16px,1.5vw,20px);color:var(--muted);max-width:40ch}
.hero-actions{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin-top:30px}
.hero-visual{position:absolute;inset:18px 0 18px 39%;overflow:hidden;pointer-events:none}
.hero-visual img{width:100%;height:100%;object-fit:contain;object-position:right center}
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--base) 0%,#11141132 23%,transparent 53%),linear-gradient(0deg,var(--base) 0%,transparent 14%,transparent 85%,var(--base) 100%);pointer-events:none}
.section-heading{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(16px,5vw,72px);align-items:end;margin-bottom:clamp(25px,4vw,52px)}
.section-heading h2,.contact-layout h2{font-size:clamp(44px,6.8vw,101px);margin-top:12px}
.section-heading>p{padding-bottom:3px}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,2vw,22px)}
.service-grid article{min-width:0;padding:clamp(17px,2.6vw,35px);border:1px solid var(--line);background:var(--surface);display:flex;align-items:start;flex-direction:column;transition:background .2s,border-color .2s}
.service-grid article:hover,.service-grid article:focus-within{background:var(--lift);border-color:var(--bright-line)}
.service-grid h3{font-size:clamp(21px,2.55vw,38px);font-weight:670;letter-spacing:-.055em;line-height:1.1;margin-bottom:10px;overflow-wrap:anywhere}
.service-grid p{color:var(--muted);max-width:33ch;margin-bottom:21px}
.service-grid .text-link{margin-top:auto}
.service-symbol{width:34px;height:34px;display:block;margin-bottom:24px;position:relative;color:var(--accent)}
.symbol-web{border:2px solid;width:33px;height:26px;margin-top:4px;margin-bottom:28px;border-radius:3px}
.symbol-web::before{content:"";position:absolute;inset:6px 0 auto;border-top:2px solid}
.symbol-web::after{content:"";position:absolute;top:2px;left:3px;width:2px;height:2px;background:currentColor;box-shadow:4px 0 currentColor,8px 0 currentColor}
.symbol-app{background:linear-gradient(currentColor,currentColor) left top/14px 14px no-repeat,linear-gradient(currentColor,currentColor) right top/14px 14px no-repeat,linear-gradient(currentColor,currentColor) left bottom/14px 14px no-repeat}
.symbol-app::after{content:"";position:absolute;width:14px;height:14px;bottom:0;right:0;border:2px solid}
.symbol-flow{background:radial-gradient(circle,currentColor 3px,transparent 3.5px) left center/8px 8px no-repeat,radial-gradient(circle,currentColor 3px,transparent 3.5px) right top/8px 8px no-repeat,radial-gradient(circle,currentColor 3px,transparent 3.5px) right bottom/8px 8px no-repeat}
.symbol-flow::after{content:"";position:absolute;inset:4px 4px 4px 8px;background:linear-gradient(currentColor,currentColor) left center/12px 2px no-repeat;border:2px solid;border-left:none;border-right:none}
.symbol-flow::before{content:"";position:absolute;inset:4px auto 4px 17px;border-left:2px solid}
.project-switcher{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.project-switcher button{padding:9px 14px;min-height:42px;border:1px solid var(--line);border-radius:3px;color:var(--muted);background:var(--surface);font-size:.86rem;font-weight:650}
.project-switcher button:hover{border-color:var(--bright-line);color:var(--text)}
.project-switcher button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.project-list{display:grid;gap:16px}
.case{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);min-height:clamp(410px,39vw,545px);border:1px solid var(--line);background:var(--surface);isolation:isolate}
.case-copy{z-index:1;display:flex;align-items:flex-start;justify-content:center;flex-direction:column;padding:clamp(22px,4vw,64px)}
.case h3{font-size:clamp(37px,5.5vw,83px);font-weight:700;line-height:.92;letter-spacing:-.075em;margin:12px 0 14px}
.case-copy>p:not(.eyebrow){color:var(--muted);max-width:40ch;margin-bottom:20px}
.case-image{position:relative;overflow:hidden;min-height:100%;display:block}
.case-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,transparent 33%);pointer-events:none}
.case-image img{height:100%;object-fit:cover;transition:transform .4s}
.case-image:hover img{transform:scale(1.035)}
.case-kante img{object-position:66% center}.case-rundlauf img{object-position:60% center}.case-bonbon img{object-position:63% center}.case-kraftwerk img{object-position:67% center}.case-bluetenwerk img{object-position:59% center}
.case[role=tabpanel]:not([hidden]){animation:case-in .32s ease-out}
@keyframes case-in{from{opacity:.45;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.extra-concept{margin-top:20px;color:var(--muted)}
.extra-concept summary,.process-list summary{cursor:pointer;list-style:none}
.extra-concept summary::-webkit-details-marker,.process-list summary::-webkit-details-marker{display:none}
.extra-concept summary{font-size:.88rem;font-weight:650;padding-block:10px}
.extra-concept summary::before{content:"+";color:var(--accent);margin-right:8px}
.extra-concept[open] summary::before{content:"−"}
.extra-concept p{max-width:65ch}
.process-list{border-top:1px solid var(--line)}
.process-list details{border-bottom:1px solid var(--line);padding:0 clamp(1px,3vw,38px)}
.process-list details[open]{background:var(--surface)}
.process-list summary{display:grid;grid-template-columns:minmax(38px,.22fr) 1fr auto;align-items:center;gap:12px;padding-block:clamp(17px,2.9vw,34px);font-size:clamp(18px,3.1vw,38px);font-weight:620;letter-spacing:-.045em}
.step-index{color:var(--accent);font-variant-numeric:tabular-nums;font-size:.82em}
.process-list summary::after{content:"+";color:var(--accent);font-weight:500}
.process-list details[open] summary::after{content:"−"}
.process-list p{color:var(--muted);max-width:69ch;padding-bottom:24px}
.contact-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,5vw,84px);align-items:center;padding:clamp(19px,4.6vw,68px);border:1px solid var(--line);background:var(--surface)}
.contact-layout>div>p:not(.eyebrow){margin-top:18px}
.contact-email{display:inline-block;margin-top:13px;text-decoration:underline;text-decoration-color:var(--bright-line);text-underline-offset:5px;color:var(--accent);overflow-wrap:anywhere;font-size:.92rem}
.brief{display:grid;gap:7px;min-width:0}
.brief label{font-size:.85rem;font-weight:660}
.brief label:not(:first-child){margin-top:7px}
.brief select,.brief textarea{width:100%;min-width:0;border:1px solid var(--bright-line);border-radius:3px;padding:10px 12px;background:var(--base);color:var(--text)}
.brief textarea{resize:vertical;min-height:107px}
.brief textarea::placeholder{color:#a6b1a1}
.brief button{justify-self:start;margin-top:8px}
.form-note{font-size:.77rem;color:var(--muted)}
.site-footer{min-height:105px}
.site-footer p{color:var(--muted);font-size:.84rem}
.legal{max-width:760px;padding-block:62px 105px;min-height:65vh}
.legal h1{font-size:clamp(44px,7vw,79px);margin-bottom:30px}
.legal h2{font-size:25px;line-height:1.2;letter-spacing:-.035em;margin:28px 0 9px}
.legal p,.legal address{font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:12px;font-style:normal}
.legal a:not(.button){text-decoration:underline;text-underline-offset:3px}
@media(max-width:850px){.hero h1{font-size:clamp(50px,9.9vw,93px)}.hero-visual{inset-inline-start:36%}.case{min-height:380px}.contact-layout h2{font-size:clamp(39px,6.4vw,78px)}}
@media(max-width:660px){
  section[id],article[id]{scroll-margin-top:114px}
  .site-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 9px;padding-block:9px 4px}
  .site-header nav{grid-row:2;grid-column:1/-1;gap:22px;padding-top:4px}
  .header-cta{grid-row:1;grid-column:2;min-height:36px;padding:6px 9px;gap:8px;font-size:.75rem}
  .wordmark{font-size:25px}.mark{width:19px;height:19px;margin-right:6px}
  .hero-grid{min-height:auto;grid-template-columns:1fr}
  .hero-content{padding-block:48px 0}
  .hero h1{font-size:clamp(43px,11.45vw,75px);margin-block:14px}
  .hero-visual{position:relative;inset:auto;margin-top:0;min-height:0;aspect-ratio:1.9}
  .hero-visual img{object-fit:cover;object-position:center 55%}
  .hero-visual::after{background:linear-gradient(0deg,var(--base),transparent 20%,transparent 76%,var(--base) 100%)}
  .hero-actions{margin-top:20px;gap:12px 17px}
  .section-heading,.service-grid,.case,.contact-layout{grid-template-columns:1fr}
  .case{min-height:0}.case-copy{padding-bottom:18px}.case-image{min-height:0;aspect-ratio:1.6}
  .case-image::after{background:linear-gradient(180deg,var(--surface),transparent 26%)}
  .site-footer{justify-content:flex-start;flex-wrap:wrap;padding-block:25px;gap:13px 20px}
  .site-footer nav{width:100%}
}
@media(max-width:355px){.header-cta{font-size:.69rem}.wordmark{font-size:23px}.hero h1{font-size:39px}.hero-actions .button{font-size:.79rem}.project-switcher button{padding-inline:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.read-progress{display:none}}
.site-header nav a[aria-current=page]{color:var(--accent);text-decoration:underline;text-underline-offset:5px}
.portfolio-link{margin-top:21px}
.portfolio-link+.extra-concept{margin-top:9px}
.portfolio{padding-block:clamp(46px,8vw,112px) 35px;border-bottom:1px solid var(--line)}
.portfolio-intro{margin-bottom:clamp(28px,5vw,62px)}
.portfolio-intro h1{font-size:clamp(49px,8.5vw,124px);letter-spacing:-.082em;font-weight:710;line-height:.94;max-width:10ch;margin-block:15px 20px}
.portfolio-intro h1 span{color:var(--accent)}
.portfolio-intro>p:not(.eyebrow){color:var(--muted);max-width:48ch;font-size:clamp(16px,1.6vw,20px)}
.portfolio-filters button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,27px)}
.portfolio-grid .case{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0}
.portfolio-grid .case-copy{grid-row:2;justify-content:start;padding:clamp(17px,3vw,35px)}
.portfolio-grid .case h3{font-size:clamp(31px,4.3vw,61px)}
.portfolio-grid .case-copy .button{margin-top:auto}
.portfolio-grid .case-image{grid-row:1;min-height:0;aspect-ratio:1.77}
.portfolio-grid .case-image::after{background:linear-gradient(0deg,var(--surface),transparent 25%)}
.portfolio-contact{margin-top:25px}
@media(max-width:660px){.portfolio-grid{grid-template-columns:1fr}.portfolio-intro h1{font-size:clamp(44px,11vw,67px);max-width:none;overflow-wrap:anywhere}}
.hero-visual{mask-image:linear-gradient(90deg,transparent 0%,#000 15%,#000 93%,transparent)}
.flow-demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 28px;align-items:center;background:var(--surface);border:1px solid var(--line);padding:clamp(14px,3vw,30px);margin-top:15px}
.flow-description h3{color:var(--text);font-size:clamp(22px,3.2vw,36px);letter-spacing:-.04em;margin:4px 0 7px}
.flow-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;color:var(--muted);font-size:.82rem}
.flow-steps li{border-top:2px solid var(--line);padding-top:8px;overflow-wrap:anywhere}
.flow-steps li[aria-current],.flow-steps li.done{color:var(--accent);border-color:var(--accent)}
.flow-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:660px){.flow-demo{grid-template-columns:1fr}.hero-visual{margin-top:8px;mask-image:none}}

.hero-spot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:right center;mask-image:linear-gradient(90deg,transparent 12%,#000 40%);opacity:0;transition:opacity .45s ease}
.hero-visual img{transition:opacity .45s ease}
.hero-visual.is-playing img{opacity:.18}
.hero-visual.is-playing .hero-spot{opacity:.74}
.hero-video-toggle{position:absolute;z-index:2;right:0;bottom:18px;min-height:44px;padding:8px 13px;border:1px solid var(--bright-line);border-radius:3px;background:var(--base);color:var(--text);font-size:.76rem;font-weight:650}
.hero-video-toggle:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:660px){
  .hero-spot{object-position:center;mask-image:none}
  .hero-visual.is-playing .hero-spot{opacity:.82}
  .hero-video-toggle{bottom:8px}
}