/* =========================================================
   Homepage process experience — v1.6.33
   One cohesive sticky composition: intro, navigation, copy and visual.
   ========================================================= */
.ac-process{
  --ac-process-bg:var(--ink);
  --ac-process-text:#fff;
  --ac-process-muted:rgba(255,255,255,.68);
  --ac-process-line:rgba(255,255,255,.16);
  --ac-process-panel:#121a20;
  --ac-process-panel-2:#0d1318;
  --ac-process-ease:cubic-bezier(.22,.75,.18,1);
  position:relative;
  background:var(--ac-process-bg);
  color:var(--ac-process-text);
}

/* One cohesive sticky composition: intro top-left, process navigation and
   changing copy lower-left, visual scene lower-right. */
.ac-process__scroll{
  position:relative;
  height:305vh;
}
.ac-process__sticky{
  position:sticky;
  top:0;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  padding:clamp(54px,6vh,80px) 0 clamp(30px,4vh,48px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.ac-process__composition{
  width:min(calc(100% - 64px),var(--content-max));
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(390px,42%) minmax(0,58%);
  grid-template-areas:
    "intro empty"
    "text visual";
  grid-template-rows:auto auto;
  column-gap:clamp(56px,5.5vw,104px);
  row-gap:clamp(38px,4.5vh,58px);
  align-items:start;
  align-content:center;
}

.ac-process__intro-block{
  grid-area:intro;
  align-self:start;
  min-width:0;
  max-width:620px;
}
.ac-process__intro-block h2{
  margin:0;
  max-width:15.8ch;
  color:var(--ac-process-text);
  font-size:clamp(3.25rem,4.5vw,4.85rem);
  line-height:.94;
  letter-spacing:var(--ls-h2);
  -webkit-hyphens:none;
  hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}
.ac-process__intro-block h2 span,
.ac-process__intro-block h2 em{display:block}
.ac-process__intro-block h2 em{
  margin-top:.06em;
  color:var(--olive);
  font-style:normal;
  font-weight:340;
}
.ac-process__intro{
  margin:20px 0 0;
  max-width:560px;
  color:var(--ac-process-muted);
  font-size:clamp(15px,.95vw,17px);
  line-height:1.6;
}

/* Lower-left editorial block. */
.ac-process__textcol{
  grid-area:text;
  position:relative;
  min-width:0;
  align-self:start;
}
.ac-process__nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(18px,2vw,30px);
  row-gap:14px;
  margin:0;
  padding:0 0 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.ac-process__nav button{
  position:relative;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  padding:0;
  text-align:left;
  cursor:pointer;
  font-size:clamp(11px,.82vw,13px);
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .3s ease;
  width:100%;
}
.ac-process__nav button:before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin:0 8px 1px 0;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  transition:background .3s ease,box-shadow .3s ease;
}
.ac-process__nav button.is-active{color:rgba(255,255,255,.96)}
.ac-process__nav button.is-active:before{
  background:var(--olive);
  box-shadow:0 0 10px rgba(211,228,205,.26);
}
.ac-process__nav button:focus-visible{
  outline:2px solid var(--olive);
  outline-offset:6px;
  border-radius:2px;
}
.ac-process__copy-window{
  position:relative;
  display:grid;
  min-height:310px;
  margin-top:30px;
  border:0;
  padding:0;
  overflow:visible;
}
.ac-process__copy{
  position:relative;
  grid-area:1 / 1;
  align-self:start;
  opacity:0;
  transform:translateY(20px);
  pointer-events:none;
  transition:opacity .45s ease,transform .65s var(--ac-process-ease);
}
.ac-process__copy.is-active{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.ac-process__copy h3{
  margin:0;
  max-width:15.5ch;
  color:var(--ac-process-text);
  font-size:clamp(2rem,2.55vw,3.15rem);
  line-height:.99;
  letter-spacing:-.045em;
}
.ac-process__copy h3 em{
  color:var(--olive);
  font-style:normal;
  font-weight:430;
}
.ac-process__copy p{
  margin:22px 0 0;
  max-width:520px;
  color:var(--ac-process-muted);
  font-size:clamp(14px,.92vw,17px);
  line-height:1.65;
}

/* Lower-right visual. */
.ac-process__visual{
  grid-area:visual;
  min-width:0;
  align-self:start;
  position:relative;
}
.ac-process__click-hint{
  position:absolute;
  z-index:8;
  top:auto;
  bottom:calc(100% + 10px);
  left:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  min-width:180px;
  padding:10px 13px 11px;
  border-radius:12px;
  background:var(--theme-olive);
  color:#3d3d3d;
  box-shadow:0 12px 30px var(--theme-shadow);
  font-size:var(--fs-micro);
  line-height:1.2;
  letter-spacing:.035em;
  text-align:left;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-5px) scale(.98);
  transform-origin:top left;
  transition:opacity .28s ease,transform .28s ease,visibility 0s linear .28s;
}
.ac-process__click-hint::before{
  content:"";
  position:absolute;
  top:auto;
  bottom:-5px;
  left:18px;
  width:10px;
  height:10px;
  background:inherit;
  transform:rotate(45deg);
}
.ac-process__click-hint span{
  position:relative;
  z-index:1;
  opacity:1;
  color:#585b57;
}
.ac-process__click-hint strong{
  position:relative;
  z-index:1;
  color:#3d3d3d;
  font-size:var(--fs-label);
  line-height:1.15;
  font-weight:700;
  letter-spacing:.02em;
}
.ac-process__click-hint.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition-delay:0s;
}

.ac-process__scene{
  position:relative;
  width:100%;
  aspect-ratio:1.30 / 1;
  max-height:68vh;
  min-height:520px;
  perspective:1600px;
  transform-style:preserve-3d;
}
.ac-process__stage{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
}
.ac-process__frame{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
}
.ac-process__frame.is-active{opacity:1}



/* Generic browser chrome ---------------------------------- */
.ac-process .chrome-top{
  height:36px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
}
.ac-process .chrome-top i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.30);
}

/* 01 — Konzeption ----------------------------------------- */
.ac-process .concept .paper-wrap{
  position:absolute;
  left:16%;
  top:15%;
  width:58%;
  height:54%;
  transform-style:preserve-3d;
  transform:translateZ(48px) rotateX(4deg) rotateY(-9deg) rotateZ(-4deg);
}
.ac-process .concept .paper-shadow{
  position:absolute;
  inset:7% -2% -4% 7%;
  background:rgba(0,0,0,.28);
  filter:blur(26px);
  border-radius:24px;
  transform:translateZ(-20px);
}
.ac-process .concept .paper{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.35);
  border-radius:18px;
  background:linear-gradient(180deg,#f5f2e9,#f0ede4);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.ac-process .concept .paper:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.42),transparent 18%),
    radial-gradient(circle at 20% 25%,rgba(0,0,0,.025),transparent 22%),
    radial-gradient(circle at 82% 68%,rgba(0,0,0,.03),transparent 20%);
  mix-blend-mode:multiply;
  opacity:.7;
}
.ac-process .concept .scribble-svg{
  position:absolute;
  inset:6% 7% 7% 6%;
  width:87%;
  height:87%;
}
.ac-process .concept .scribble-svg path,
.ac-process .concept .scribble-svg rect,
.ac-process .concept .scribble-svg circle{
  fill:none;
  stroke:#5f5d57;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.ac-process .concept .scribble-svg .sketch{stroke-width:3.3;stroke-dasharray:420;stroke-dashoffset:420}
.ac-process .concept .scribble-svg .fine{stroke-width:2;stroke-dasharray:240;stroke-dashoffset:240}
.ac-process .concept .scribble-svg .soft{stroke:#8d8b86;stroke-width:2.5;stroke-dasharray:200;stroke-dashoffset:200}
.ac-process .concept .pencil{
  position:absolute;
  right:-1%;
  top:20%;
  width:154px;
  height:18px;
  border-radius:10px;
  background:linear-gradient(90deg,#dfbf63 0%,#f0d378 56%,#22272c 56%,#22272c 72%,#d9b65d 72%,#d9b65d 80%,#f1cdc5 80%,#f1cdc5 100%);
  box-shadow:0 18px 28px rgba(0,0,0,.18);
  transform-origin:22px 50%;
  opacity:0;
}
.ac-process .concept .pencil:before{
  content:"";
  position:absolute;
  left:-17px;
  top:0;
  border-top:9px solid transparent;
  border-bottom:9px solid transparent;
  border-right:17px solid #d0b06a;
}
.ac-process .concept .pencil:after{
  content:"";
  position:absolute;
  left:-24px;
  top:5px;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-right:8px solid #2b2b2b;
}
.ac-process .concept .pencil .wood{
  position:absolute;
  left:-7px;
  top:2px;
  width:10px;
  height:14px;
  border-radius:10px 0 0 10px;
  background:#e7cf9b;
  transform:skewX(-15deg);
}
.ac-process .concept .shadow-stroke{
  position:absolute;
  left:32%;
  top:55%;
  width:22%;
  height:3px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  filter:blur(4px);
  opacity:0;
}
.ac-process .concept.is-active .pencil{opacity:1;animation:acProcessPencil 4.6s var(--ac-process-ease) forwards}
.ac-process .concept.is-active .shadow-stroke{opacity:1;animation:acProcessShadow 4.6s var(--ac-process-ease) forwards}
.ac-process .concept.is-active .scribble-svg .sketch.s1{animation:acProcessDraw 1.05s ease forwards .2s}
.ac-process .concept.is-active .scribble-svg .sketch.s2{animation:acProcessDraw 1s ease forwards .95s}
.ac-process .concept.is-active .scribble-svg .fine.f1{animation:acProcessDraw .72s ease forwards 1.85s}
.ac-process .concept.is-active .scribble-svg .fine.f2{animation:acProcessDraw .72s ease forwards 2.02s}
.ac-process .concept.is-active .scribble-svg .fine.f3{animation:acProcessDraw .72s ease forwards 2.18s}
.ac-process .concept.is-active .scribble-svg .soft.s3{animation:acProcessDraw .92s ease forwards 2.56s}
.ac-process .concept.is-active .scribble-svg .soft.s4{animation:acProcessDraw .92s ease forwards 2.96s}
.ac-process .concept.is-active .scribble-svg .fine.f4{animation:acProcessDraw .68s ease forwards 3.38s}
.ac-process .concept.is-active .scribble-svg .fine.f5{animation:acProcessDraw .68s ease forwards 3.55s}
.ac-process .concept.is-active .scribble-svg .fine.f6{animation:acProcessDraw .68s ease forwards 3.74s}
@keyframes acProcessDraw{to{stroke-dashoffset:0}}
@keyframes acProcessPencil{
  0%{transform:translate(20px,6px) rotate(-14deg)}
  20%{transform:translate(-18px,-16px) rotate(-17deg)}
  36%{transform:translate(18px,10px) rotate(-12deg)}
  54%{transform:translate(-42px,34px) rotate(-17deg)}
  72%{transform:translate(36px,48px) rotate(-9deg)}
  86%{transform:translate(50px,36px) rotate(-5deg)}
  100%{transform:translate(54px,40px) rotate(-5deg)}
}
@keyframes acProcessShadow{0%{transform:scaleX(.7);opacity:.08}55%{transform:scaleX(1);opacity:.18}100%{transform:scaleX(.82);opacity:.10}}

/* 02 — Webdesign ------------------------------------------ */
.ac-process .design .browser-wrap,
.ac-process .care .browser-wrap{
  position:absolute;
  left:10%;
  top:13%;
  width:78%;
  height:60%;
  transform:translateZ(42px) rotateX(2deg) rotateY(-4deg);
}
.ac-process .design .browser-window,
.ac-process .care .browser-window{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg,#131c22,#111920);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.ac-process .design .browser-body,
.ac-process .care .browser-body{
  height:calc(100% - 36px);
  padding:16px;
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:12px;
}
.ac-process .design .left-panel,
.ac-process .design .hero-panel,
.ac-process .design .cards-panel>div,
.ac-process .care .left-panel,
.ac-process .care .hero-panel,
.ac-process .care .cards-panel>div{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background:rgba(255,255,255,.025);
}
.ac-process .design .left-panel,
.ac-process .care .left-panel{
  padding:12px;
  display:grid;
  align-content:start;
  gap:10px;
}
.ac-process .design .chip,
.ac-process .care .chip{
  width:72%;
  height:26px;
  border:1px solid rgba(156,173,206,.22);
  border-radius:999px;
  background:rgba(156,173,206,.14);
  opacity:0;
  transform:translateX(-20px);
}
.ac-process .design .swatches,
.ac-process .care .swatches{display:flex;gap:9px;padding-top:2px}
.ac-process .design .swatches span,
.ac-process .care .swatches span{
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  opacity:0;
  transform:scale(.3);
}
.ac-process .design .swatches span:nth-child(1),.ac-process .care .swatches span:nth-child(1){background:var(--blue)}
.ac-process .design .swatches span:nth-child(2),.ac-process .care .swatches span:nth-child(2){background:var(--olive)}
.ac-process .design .swatches span:nth-child(3),.ac-process .care .swatches span:nth-child(3){background:#f3f4ef}
.ac-process .design .type-sample,
.ac-process .care .type-sample{display:grid;gap:8px;padding-top:6px}
.ac-process .design .type-sample i,
.ac-process .care .type-sample i{
  display:block;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  opacity:0;
  transform:translateX(-16px);
}
.ac-process .design .type-sample i:nth-child(1),.ac-process .care .type-sample i:nth-child(1){height:12px;width:86%;background:rgba(255,255,255,.62)}
.ac-process .design .type-sample i:nth-child(2),.ac-process .care .type-sample i:nth-child(2){width:58%}
.ac-process .design .type-sample i:nth-child(3),.ac-process .care .type-sample i:nth-child(3){width:76%}
.ac-process .design .type-sample i:nth-child(4),.ac-process .care .type-sample i:nth-child(4){width:67%}
.ac-process .design .canvas-stack,
.ac-process .care .canvas-stack{display:grid;grid-template-rows:44% 1fr;gap:12px}
.ac-process .design .hero-panel,
.ac-process .care .hero-panel{padding:14px;background:linear-gradient(145deg,rgba(156,173,206,.14),rgba(255,255,255,.025))}
.ac-process .design .hero-panel .title,
.ac-process .care .hero-panel .title{width:42%;height:11px;border-radius:999px;background:#fff;opacity:0;transform:translateY(-10px)}
.ac-process .design .hero-panel .lead,
.ac-process .care .hero-panel .lead{width:66%;height:7px;margin-top:10px;border-radius:999px;background:rgba(255,255,255,.18);opacity:0;transform:translateY(-10px)}
.ac-process .design .hero-panel .cta,
.ac-process .care .hero-panel .cta{width:110px;height:30px;margin-top:16px;border:1px solid rgba(211,228,205,.3);border-radius:999px;background:rgba(211,228,205,.16);opacity:0;transform:translateY(14px)}
.ac-process .design .cards-panel,
.ac-process .care .cards-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ac-process .design .cards-panel>div,
.ac-process .care .cards-panel>div{min-height:118px;padding:12px;display:grid;align-content:end;opacity:0;transform:translateY(30px)}
.ac-process .design .cards-panel>div i,
.ac-process .care .cards-panel>div i{display:block;height:54px;margin-bottom:10px;border-radius:10px;background:linear-gradient(160deg,rgba(211,228,205,.2),rgba(156,173,206,.08))}
.ac-process .design .cards-panel>div span,
.ac-process .care .cards-panel>div span{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.17)}
.ac-process .design .cards-panel>div span+span,
.ac-process .care .cards-panel>div span+span{width:70%;margin-top:6px}
.ac-process .design .focus-outline{
  position:absolute;
  left:54%;
  top:29%;
  width:21%;
  height:13%;
  border:1px solid rgba(211,228,205,.45);
  border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
  opacity:0;
}
.ac-process .design.is-active .chip,
.ac-process .design.is-active .type-sample i,
.ac-process .design.is-active .hero-panel .title,
.ac-process .design.is-active .hero-panel .lead,
.ac-process .design.is-active .hero-panel .cta,
.ac-process .design.is-active .cards-panel>div,
.ac-process .design.is-active .swatches span,
.ac-process .design.is-active .focus-outline{opacity:1}
.ac-process .design.is-active .browser-window{animation:acProcessDesignShell 6.2s ease-in-out infinite}
.ac-process .design.is-active .chip{animation:acProcessUpFade 5.8s var(--ac-process-ease) infinite .06s}
.ac-process .design.is-active .swatches span:nth-child(1){animation:acProcessScale 5.8s var(--ac-process-ease) infinite .18s}
.ac-process .design.is-active .swatches span:nth-child(2){animation:acProcessScale 5.8s var(--ac-process-ease) infinite .28s}
.ac-process .design.is-active .swatches span:nth-child(3){animation:acProcessScale 5.8s var(--ac-process-ease) infinite .38s}
.ac-process .design.is-active .type-sample i:nth-child(1){animation:acProcessLeftLine 5.8s var(--ac-process-ease) infinite .36s}
.ac-process .design.is-active .type-sample i:nth-child(2){animation:acProcessLeftLine 5.8s var(--ac-process-ease) infinite .44s}
.ac-process .design.is-active .type-sample i:nth-child(3){animation:acProcessLeftLine 5.8s var(--ac-process-ease) infinite .52s}
.ac-process .design.is-active .type-sample i:nth-child(4){animation:acProcessLeftLine 5.8s var(--ac-process-ease) infinite .60s}
.ac-process .design.is-active .hero-panel{animation:acProcessPanelFloat 5.8s ease-in-out infinite .1s}
.ac-process .design.is-active .hero-panel .title{animation:acProcessUpFade 5.8s var(--ac-process-ease) infinite .26s}
.ac-process .design.is-active .hero-panel .lead{animation:acProcessUpFade 5.8s var(--ac-process-ease) infinite .40s}
.ac-process .design.is-active .hero-panel .cta{animation:acProcessCta 5.8s var(--ac-process-ease) infinite .54s}
.ac-process .design.is-active .cards-panel>div:nth-child(1){animation:acProcessCard 5.8s var(--ac-process-ease) infinite .72s}
.ac-process .design.is-active .cards-panel>div:nth-child(2){animation:acProcessCard 5.8s var(--ac-process-ease) infinite .88s}
.ac-process .design.is-active .cards-panel>div:nth-child(3){animation:acProcessCard 5.8s var(--ac-process-ease) infinite 1.04s}
.ac-process .design.is-active .focus-outline{animation:acProcessFocus 5.8s var(--ac-process-ease) infinite .8s}
@keyframes acProcessDesignShell{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes acProcessPanelFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes acProcessUpFade{0%,8%{opacity:0;transform:translateY(18px)}16%,72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes acProcessLeftLine{0%,10%{opacity:0;transform:translateX(-18px)}18%,74%{opacity:1;transform:translateX(0)}86%,100%{opacity:0;transform:translateX(12px)}}
@keyframes acProcessScale{0%,10%{opacity:0;transform:scale(.35)}18%,74%{opacity:1;transform:scale(1)}86%,100%{opacity:0;transform:scale(.84)}}
@keyframes acProcessCta{0%,12%{opacity:0;transform:translateY(18px) scale(.92)}20%,70%{opacity:1;transform:translateY(0) scale(1)}78%{opacity:1;transform:translateY(0) scale(1.03)}88%,100%{opacity:0;transform:translateY(-8px) scale(.96)}}
@keyframes acProcessCard{0%,14%{opacity:0;transform:translateY(32px)}24%,72%{opacity:1;transform:translateY(0)}84%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes acProcessFocus{0%,12%{opacity:0;transform:translate(0,12px)}20%,34%{opacity:1;transform:translate(0,0)}44%,58%{opacity:1;transform:translate(-38%,126%)}66%,78%{opacity:1;transform:translate(-2%,126%)}88%,100%{opacity:0;transform:translate(30%,126%)}}

/* 03 — Webentwicklung ------------------------------------- */
.ac-process .dev .editor-wrap{
  position:absolute;
  left:11%;
  top:12%;
  width:76%;
  height:62%;
  transform:translateZ(46px) rotateX(2deg) rotateY(-4deg);
}
.ac-process .dev .editor{
  position:absolute;
  inset:0;
  overflow:hidden;
  border:1px solid rgba(156,173,206,.28);
  border-radius:22px;
  background:#0d1318;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.ac-process .dev .editor-top{
  height:38px;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
}
.ac-process .dev .tabs{display:flex;gap:8px}
.ac-process .dev .tabs span{padding:7px 10px;border-radius:8px;background:rgba(255,255,255,.04);font-size:11px;color:var(--ac-process-muted)}
.ac-process .dev .tabs span.active{background:rgba(156,173,206,.14);color:#fff}
.ac-process .dev .led{display:flex;gap:7px}
.ac-process .dev .led i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}
.ac-process .dev .editor-body{height:calc(100% - 38px);display:grid;grid-template-columns:56px 1fr}
.ac-process .dev .gutter{padding:16px 12px 16px 16px;border-right:1px solid rgba(255,255,255,.06);display:grid;align-content:start;gap:8px;color:rgba(255,255,255,.22);font-size:12px}
.ac-process .dev .code-scroll{position:relative;overflow:hidden;padding:16px 18px}
.ac-process .dev .code-inner{display:grid;gap:9px;transform:translateY(0)}
.ac-process .dev .code-row{display:flex;gap:8px;align-items:center;opacity:0;transform:translateY(10px)}
.ac-process .dev .token{display:block;height:7px;border-radius:999px;background:rgba(255,255,255,.18)}
.ac-process .dev .t-key{background:rgba(156,173,206,.7)}
.ac-process .dev .t-str{background:rgba(211,228,205,.58)}
.ac-process .dev .t-fn{background:rgba(255,255,255,.78)}
.ac-process .dev .t-sm{width:48px}.ac-process .dev .t-md{width:92px}.ac-process .dev .t-lg{width:146px}.ac-process .dev .t-xl{width:200px}
.ac-process .dev .cursor{width:8px;height:18px;border-radius:2px;background:rgba(211,228,205,.8);opacity:0}
.ac-process .dev .build-line{position:absolute;left:11%;right:13%;bottom:12%;height:1px;background:rgba(255,255,255,.08)}
.ac-process .dev .build-line:before{content:"";position:absolute;left:0;top:-1px;width:0;height:3px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--olive));box-shadow:0 0 18px rgba(211,228,205,.22)}
.ac-process .dev .build-line:after{content:"Deploy / Sync / Schnittstellen";position:absolute;right:-8%;top:-18px;color:rgba(255,255,255,.34);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase}
.ac-process .dev.is-active .code-row{opacity:1;transform:none;transition:opacity .35s ease,transform .35s ease}
.ac-process .dev.is-active .code-row:nth-child(1){transition-delay:.06s}.ac-process .dev.is-active .code-row:nth-child(2){transition-delay:.14s}.ac-process .dev.is-active .code-row:nth-child(3){transition-delay:.22s}.ac-process .dev.is-active .code-row:nth-child(4){transition-delay:.30s}.ac-process .dev.is-active .code-row:nth-child(5){transition-delay:.38s}.ac-process .dev.is-active .code-row:nth-child(6){transition-delay:.46s}.ac-process .dev.is-active .code-row:nth-child(7){transition-delay:.54s}.ac-process .dev.is-active .code-row:nth-child(8){transition-delay:.62s}.ac-process .dev.is-active .code-row:nth-child(9){transition-delay:.70s}.ac-process .dev.is-active .code-row:nth-child(10){transition-delay:.78s}.ac-process .dev.is-active .code-row:nth-child(11){transition-delay:.86s}.ac-process .dev.is-active .code-row:nth-child(12){transition-delay:.94s}
.ac-process .dev.is-active .cursor{opacity:1;animation:acProcessBlink 1s steps(1) infinite .8s}
.ac-process .dev.is-active .code-inner{animation:acProcessCodeShift 5.5s ease-in-out infinite 1.1s}
.ac-process .dev.is-active .build-line:before{animation:acProcessBuild 2.4s var(--ac-process-ease) forwards .9s,acProcessPulseBar 2s ease-in-out infinite 3.4s}
@keyframes acProcessBlink{50%{opacity:0}}
@keyframes acProcessCodeShift{0%,22%{transform:translateY(0)}50%{transform:translateY(-32px)}78%{transform:translateY(-16px)}100%{transform:translateY(0)}}
@keyframes acProcessBuild{to{width:100%}}
@keyframes acProcessPulseBar{50%{opacity:.7}}

/* 04 — Betreuung ------------------------------------------ */
.ac-process .care .browser-wrap{opacity:.96}
.ac-process .care .browser-window{background:linear-gradient(180deg,#121b22,#10181f)}
.ac-process .care .hero-panel .title,
.ac-process .care .hero-panel .lead,
.ac-process .care .hero-panel .cta,
.ac-process .care .chip,
.ac-process .care .swatches span,
.ac-process .care .type-sample i,
.ac-process .care .cards-panel>div{opacity:1;transform:none}
.ac-process .care .status-strip{
  position:absolute;
  left:14%;
  right:10%;
  bottom:13%;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  opacity:0;
  transform:translateY(10px);
}
.ac-process .care .status-strip div{
  position:relative;
  display:grid;
  gap:7px;
  padding:11px 0 0 18px;
  border-top:1px solid rgba(255,255,255,.10);
  background:transparent;
}
.ac-process .care .status-strip div:before{
  content:"✓";
  position:absolute;
  left:0;
  top:8px;
  color:var(--olive);
  font-size:11px;
  font-weight:700;
  opacity:.82;
}
.ac-process .care .status-strip strong{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.ac-process .care .status-strip span{display:block;width:64%;height:4px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden}
.ac-process .care .status-strip span:after{content:"";display:block;width:0;height:100%;border-radius:inherit;background:rgba(211,228,205,.55)}
.ac-process .care .status-strip span+span{width:46%}
.ac-process .care.is-active .status-strip{opacity:1;transform:none;transition:opacity .55s ease .28s,transform .7s var(--ac-process-ease) .28s}
.ac-process .care.is-active .status-strip div:nth-child(1) span:after{animation:acProcessCareCheck 4.6s var(--ac-process-ease) infinite .45s}
.ac-process .care.is-active .status-strip div:nth-child(2) span:after{animation:acProcessCareCheck 4.6s var(--ac-process-ease) infinite .75s}
.ac-process .care.is-active .status-strip div:nth-child(3) span:after{animation:acProcessCareCheck 4.6s var(--ac-process-ease) infinite 1.05s}
.ac-process .care.is-active .status-strip div:nth-child(4) span:after{animation:acProcessCareCheck 4.6s var(--ac-process-ease) infinite 1.35s}
.ac-process .care.is-active .browser-window{animation:acProcessCareBreath 5.4s ease-in-out infinite}
.ac-process .care.is-active .hero-panel{animation:acProcessCarePanel 5.4s ease-in-out infinite .25s}
.ac-process .care.is-active .cards-panel>div:nth-child(1){animation:acProcessCarePanel 5.4s ease-in-out infinite .5s}
.ac-process .care.is-active .cards-panel>div:nth-child(2){animation:acProcessCarePanel 5.4s ease-in-out infinite .75s}
.ac-process .care.is-active .cards-panel>div:nth-child(3){animation:acProcessCarePanel 5.4s ease-in-out infinite 1s}
@keyframes acProcessCareCheck{0%,12%{width:0}42%,78%{width:100%}100%{width:0}}
@keyframes acProcessCareBreath{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes acProcessCarePanel{0%,100%{border-color:rgba(255,255,255,.08)}50%{border-color:rgba(211,228,205,.22)}}

/* Dark mode: preserve the same editorial hierarchy while blending into the
   site's deep background. */
html[data-theme="dark"] .ac-process{
  --ac-process-bg:var(--theme-bg-deep);
  --ac-process-text:var(--theme-text);
  --ac-process-muted:rgba(247,248,245,.68);
  --ac-process-line:rgba(255,255,255,.16);
}
html[data-theme="dark"] .ac-process__intro-block h2,
html[data-theme="dark"] .ac-process__copy h3{color:#f7f8f5}
html[data-theme="dark"] .ac-process__intro-block h2 em,
html[data-theme="dark"] .ac-process__copy h3 em{color:var(--olive)}
html[data-theme="dark"] .ac-process__click-hint{color:#f1f3ef}
html[data-theme="dark"] .ac-process__click-hint span{color:#d5d9d2}
html[data-theme="dark"] .ac-process__click-hint strong{color:#f1f3ef}

/* Desktop tuning: keep the whole composition together without allowing the
   lower row to overlap the intro on shorter viewports. */
@media (min-width:992px){
  .ac-process__scene{
    min-height:440px;
    max-height:52vh;
  }
}

@media (min-width:992px) and (max-width:1199.98px){
  .ac-process__composition{
    grid-template-columns:minmax(330px,40%) minmax(0,60%);
    column-gap:clamp(38px,4vw,60px);
    row-gap:32px;
  }
  .ac-process__intro-block h2{font-size:clamp(3rem,4.8vw,4.25rem)}
  .ac-process__nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:18px;
    row-gap:13px;
  }
  .ac-process__copy-window{margin-top:24px;min-height:285px}
  .ac-process__scene{min-height:410px;max-height:50vh}
}

@media (min-width:992px) and (max-height:850px){
  .ac-process__sticky{padding-top:58px;padding-bottom:24px}
  .ac-process__composition{row-gap:24px}
  .ac-process__intro-block h2{font-size:clamp(2.65rem,4vw,3.9rem)}
  .ac-process__intro{margin-top:14px;font-size:14px}
  .ac-process__copy-window{min-height:245px;margin-top:20px}
  .ac-process__copy h3{font-size:clamp(1.75rem,2.2vw,2.6rem)}
  .ac-process__copy p{margin-top:16px;font-size:14px}
  .ac-process__scene{min-height:350px;max-height:46vh}
}

/* Tablet/mobile: one content block, no long pinned scroll and no visual scene. */
@media (max-width:991.98px){
  .ac-process__scroll{height:auto}
  .ac-process__sticky{
    position:relative;
    top:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    padding:88px 0 82px;
    display:block;
  }
  .ac-process__composition{
    width:calc(100% - 32px);
    height:auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    gap:0;
  }
  .ac-process__intro-block h2{max-width:12.5ch}
  .ac-process__intro{margin-top:22px}
  .ac-process__textcol{display:flex;flex-direction:column;margin-top:56px;padding:0}
  .ac-process__visual{display:none!important}
  .ac-process__nav{order:1;margin:0 0 26px;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:14px;padding-bottom:16px}
  .ac-process__nav button{white-space:normal;font-size:11px;padding:5px 0}
  .ac-process__click-hint{
    position:relative;
    top:auto;
    right:auto;
    left:auto;
    order:2;
    justify-self:start;
    width:max-content;
    max-width:min(100%,280px);
    min-width:0;
    margin:-12px 0 28px;
    white-space:normal;
    transform-origin:top left;
  }
  .ac-process__click-hint::before{top:-5px;bottom:auto;left:18px;right:auto}
  .ac-process__copy-window{order:3;margin-top:0;min-height:270px;padding-top:0}
  .ac-process__copy h3{max-width:21ch}
  .ac-process__scene{display:none!important}
}

@media (max-width:650px){
  .ac-process__sticky{padding:76px 0 70px}
  .ac-process__composition{width:calc(100% - 28px)}
  .ac-process__intro-block h2{max-width:none}
  .ac-process__intro{font-size:15px}
  .ac-process__textcol{margin-top:48px}
  .ac-process__copy-window{min-height:330px;padding-top:0}
  .ac-process__copy h3{font-size:clamp(2rem,9vw,2.65rem);max-width:18ch}
}

@media (prefers-reduced-motion:reduce){
  .ac-process *,
  .ac-process *:before,
  .ac-process *:after{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .ac-process .concept .scribble-svg .sketch,
  .ac-process .concept .scribble-svg .fine,
  .ac-process .concept .scribble-svg .soft{stroke-dashoffset:0}
  .ac-process .concept .pencil,
  .ac-process .design .chip,
  .ac-process .design .swatches span,
  .ac-process .design .type-sample i,
  .ac-process .design .hero-panel .title,
  .ac-process .design .hero-panel .lead,
  .ac-process .design .hero-panel .cta,
  .ac-process .design .cards-panel>div,
  .ac-process .design .focus-outline,
  .ac-process .dev .code-row,
  .ac-process .dev .cursor,
  .ac-process .care .status-strip{opacity:1!important;transform:none!important}
  .ac-process .dev .build-line:before{width:100%}
}

.ac-process.is-paused .ac-process__frame *,
.ac-process.is-paused .ac-process__frame *:before,
.ac-process.is-paused .ac-process__frame *:after{
  animation-play-state:paused!important;
}