/* ───────────────────────────────────────────
   Startseite – baut auf site.css auf
   ─────────────────────────────────────────── */

/* ═════════════ HERO: Vollbild-Video ═════════════ */
.hero{
  position:relative; min-height:max(34rem, 100svh); overflow:hidden;
  display:flex; align-items:flex-end;
}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to bottom, color-mix(in oklab, var(--c-dark) 60%, transparent), transparent 22%),
    linear-gradient(to top, color-mix(in oklab, var(--c-dark) 92%, transparent) 0%, color-mix(in oklab, var(--c-dark) 55%, transparent) 38%, transparent 72%),
    linear-gradient(to right, color-mix(in oklab, var(--c-dark) 55%, transparent), transparent 60%);
}
.hero__inner{ position:relative; z-index:2; width:100%; padding-bottom:clamp(1.75rem, 5vh, 3rem); }
.hero__h1{
  font-size:clamp(2.6rem, 5.8vw, 6.2rem); font-weight:800;
  line-height:.98; letter-spacing:-.04em; margin:0 0 1.6rem; max-width:none; text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.25);
}
.hero__hl{ color:var(--hi); }
.hero__sub{ font-size:clamp(1.05rem, 1.35vw, 1.25rem); line-height:1.6; color:color-mix(in oklab, var(--fg) 86%, transparent); max-width:44ch; margin:0 0 2rem; }
.hero__sub .hand{ font-size:1.12em; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.6rem; }
.hero__cta .tlink{ color:var(--fg); }
.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:1.6rem; translate:-50% 0;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.7rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-2);
}
.hero__scroll i{ width:1px; height:2.6rem; background:linear-gradient(var(--hi), transparent); transform-origin:top; animation:hint 2.2s var(--ease-out) infinite; }
.hero__scroll:hover{ color:var(--fg); }
@keyframes hint{ 0%{ transform:scaleY(0) } 60%{ transform:scaleY(1); opacity:1 } 100%{ transform:scaleY(1); opacity:0 } }
@media (max-width:560px){
  .hero__cta .btn{ flex:1 1 auto; justify-content:center; padding:1rem 1.1rem; font-size:.92rem; }
  .hero__scroll{ display:none; }
}


/* ═════════════ FORMATE (Morph) ═════════════ */
.fmt{ position:relative; height:420vh;
  background:radial-gradient(45% 55% at 70% 50%, color-mix(in oklab, var(--c-accent) 9%, transparent), transparent 70%), var(--bg); }
.fmt__pin{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center; }
.fmt__grid{ display:grid; width:100%; gap:2rem 4rem; align-items:center; }
@media (min-width:900px){ .fmt__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.fmt h2{ margin-bottom:clamp(1.6rem, 4vh, 3rem); }
.fmt__steps{ list-style:none; margin:0; padding:0; position:relative; min-height:12.5rem; }
.fstep{ position:absolute; inset:0 0 auto 0; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .45s var(--ease-out), transform .45s var(--ease-out), visibility .45s; }
.fstep.is-on{ opacity:1; visibility:visible; transform:none; }
.no-js .fmt{ height:auto; }
.no-js .fmt__pin{ position:relative; height:auto; padding:var(--sp) 0; }
.no-js .fmt__steps{ min-height:0; display:grid; gap:1.4rem; }
.no-js .fstep{ position:static; opacity:1; visibility:visible; transform:none; }
.no-js .fmt__stage{ height:auto; container-type:normal; }
.no-js .fmt__stage .dv{ position:relative; inset:auto; width:100%; height:auto; }
.no-js .fmt__phone, .no-js .plat{ display:none; }
.fstep h3{ display:flex; align-items:baseline; gap:.7rem; font-size:clamp(1.4rem, 2.4vw, 2rem); font-weight:800; letter-spacing:-.025em; margin-bottom:.8rem; }
.fstep h3 b{ font-weight:800; padding:.15em .45em; border-radius:var(--sh-xs); background:var(--c-accent); color:var(--c-on-accent); font-size:.8em; }
.fstep p{ color:var(--fg-2); font-size:clamp(1rem, 1.3vw, 1.15rem); max-width:40ch; margin:0; }
.fmt__bar{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.35rem; margin-top:1.6rem; max-width:22rem; }
.fmt__bar span{ display:none; }
.fmt__bar i{ height:3px; border-radius:2px; background:var(--line); transition:background .35s; }
.fmt__bar i.is-on{ background:var(--hi); }

.fmt__stage{ position:relative; height:min(84svh, 48rem); }
.fmt__stage{ container-type:size; }
.fmt__stage .dv{ position:absolute; inset:0; margin:auto; width:min(100cqw, calc(100cqh * var(--arn))); height:min(100cqh, calc(100cqw / var(--arn))); }
.fmt__phone .dv__screen{ background:#FAFAF8; }
.dev__media{ --mt:11.5%; --mh:56.4%; position:absolute; left:0; right:0; top:var(--mt); height:var(--mh); overflow:hidden; background:#000; }
.dev__media video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.dev__v--reel{ opacity:0; }
.dev__media .dev__v--reel{ object-fit:contain; object-position:50% 50%; } /* volle Breite, Untertitel nicht abschneiden */
.dev__feedtop{ position:absolute; left:5%; right:5%; top:6.2%; height:4%; display:flex; align-items:center; gap:4%; }
.dev__feedbot{ position:absolute; inset:0; pointer-events:none; }
.dev__reel{ opacity:0; }
.dev__reel > i{ width:8%; }
.plat{ list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none; }
.plat li{
  position:absolute; display:flex; align-items:center; gap:.6rem;
  padding:.65rem .95rem .65rem .7rem; border-radius:14px;
  background:var(--c-ink-d); color:var(--c-ink-l);
  font-weight:700; font-size:.92rem;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.55);
  opacity:0;
}
.plat li i{ width:1.6rem; height:1.6rem; color:var(--c-dark); }
.plat--tt{ left:4%; top:16%; }
.plat--ig{ right:2%; top:42%; }
.plat--li{ left:8%; bottom:14%; }
.dev__label{
  position:absolute; right:0; top:0; margin:0;
  font-family:var(--display); font-weight:800; font-size:clamp(1.3rem, 2.2vw, 1.9rem); letter-spacing:-.02em;
  line-height:1; padding:.08em .3em .12em; border-radius:.16em;
  background:var(--c-accent); color:var(--c-on-accent);
}
@media (max-width:899px){
  .fmt__pin{ flex-direction:column; align-items:stretch; padding:clamp(5rem, 10vh, 6.5rem) 0 1rem; }
  .fmt__grid{ flex:1; min-height:0; display:flex; flex-direction:column; align-items:stretch; gap:1.2rem; }
  .fmt__stage{ flex:1; min-height:0; height:auto; }
  .fmt h2{ font-size:clamp(2rem, 8vw, 3rem); margin-bottom:1rem; }
  .fmt__steps{ min-height:8.6rem; }
  .fstep h3{ font-size:1.3rem; margin-bottom:.5rem; }
  .fstep p{ font-size:.95rem; }
  .fmt__bar{ margin-top:.6rem; }
  .dev__label{ font-size:1.1rem; }
  .plat li{ font-size:.78rem; padding:.45rem .7rem .45rem .5rem; }
  .plat li i{ width:1.2rem; height:1.2rem; }
}

/* ═════════════ LEISTUNGEN: Karten legen sich beim Scrollen übereinander ═════════════ */
.svc{ padding:var(--sp) 0; }
.stack{ display:grid; gap:clamp(1.5rem, 4vh, 2.5rem); }
.scard{
  position:sticky; top:calc(6.2rem + var(--i) * 1.1rem);
  display:grid; gap:1.6rem 3rem; align-items:center;
  min-height:min(68vh, 34rem); padding:clamp(1.5rem, 3vw, 2.6rem);
  border-radius:var(--sh); background:var(--c-light-p);
  box-shadow:0 0 0 1px var(--line), 0 -18px 50px -30px rgba(14,36,29,.35);
  transform-origin:50% 0; backface-visibility:hidden;
}
@media (min-width:900px){ .scard{ grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); } }
.scard__n{ display:block; margin-bottom:1rem; font-family:var(--serif); font-size:1.1rem; color:var(--hi); }
.scard__t{ font-size:clamp(1.7rem, 3vw, 2.6rem); font-weight:800; letter-spacing:-.03em; line-height:1.05; margin-bottom:1.1rem; }
.scard__t small{ display:block; margin-top:.5rem; font-family:var(--body); font-size:.86rem; font-weight:600; letter-spacing:.03em; color:var(--fg-3); }
.scard__text > p{ color:var(--fg-2); font-size:1.05rem; max-width:44ch; }
.scard__text ul{ list-style:none; margin:1.2rem 0 0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.scard__text li{ position:relative; padding-left:1.6rem; font-size:.97rem; }
.scard__text li::before{ content:""; position:absolute; left:0; top:.32em; width:1rem; height:1rem; border-radius:50%; background:radial-gradient(circle, var(--c-on-accent) 0 22%, var(--c-accent) 24%); }
.scard__media{ position:relative; aspect-ratio:16 / 9; border-radius:var(--sh-in); overflow:hidden; background:#000; }
.scard__media video{ width:100%; height:100%; object-fit:cover; }
.scard__media--tall{ background:radial-gradient(60% 80% at 50% 100%, color-mix(in oklab, var(--c-accent) 16%, transparent), transparent 70%), var(--c-dark); }
.scard__media--tall video{ position:absolute; top:6%; left:50%; translate:-50% 0; height:88%; width:auto; aspect-ratio:9 / 16; border-radius:12px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); }
.scard__photos{ display:grid; grid-template-columns:1.35fr 1fr; grid-template-rows:1fr 1fr; gap:6px; background:none; }
.scard__photos img{ width:100%; height:100%; min-height:0; object-fit:cover; border-radius:10px 0 10px 0; }
.scard__photos img:first-child{ grid-row:span 2; }
.scard__photos img{ transition:transform .7s var(--ease-out); }
@media (hover:hover){ .scard__photos:hover img{ transform:scale(1.025); } }
.scard__photos:focus-visible{ outline:2px solid var(--c-accent); outline-offset:4px; }
/* Kleine Bildschirme: normal untereinander, kein Stapeln (Karten wären höher als der Bildschirm) */
@media (max-width:699px), (max-height:620px){ .scard{ position:relative; top:auto; min-height:0; } }

/* Cases-Teaser */
.cteaser{ margin-top:clamp(4rem, 8vw, 6rem); }
.cteaser__head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem 2rem; margin-bottom:1.6rem; }
.cteaser__head h3{ font-size:clamp(1.8rem, 3.4vw, 2.8rem); font-weight:800; letter-spacing:-.03em; }
.cteaser__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:1000px){ .cteaser__list{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.cteaser__list a{ display:flex; flex-direction:column; gap:.35rem; }
.cteaser__img{ display:block; aspect-ratio:4 / 3; overflow:hidden; border-radius:var(--sh); margin-bottom:.6rem; background:var(--c-dark); }
.cteaser__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.cteaser__list a:hover .cteaser__img img{ transform:scale(1.05); }
.cteaser__cat{ font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.cteaser__list b{ font-family:var(--display); font-size:1.2rem; letter-spacing:-.02em; line-height:1.2; }
.cteaser__list a:hover b{ color:var(--hi); }

/* ═════════════ EIN ANSPRECHPARTNER (Tagline, Wort für Wort) ═════════════ */
.tagline{ padding:var(--sp) 0; }
.tagline__text{
  font-size:clamp(2.2rem, 5vw, 4.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.05;
  max-width:24ch; margin-bottom:clamp(3rem, 6vw, 4.5rem); text-wrap:balance;
}
.tagline__text .w{ color:color-mix(in oklab, var(--fg) 22%, var(--bg)); transition:color .6s var(--ease-out); }
.tagline__text .w.is-on{ color:var(--fg); }
@media (max-width:699px){ .tagline__br{ display:none; } } /* Umbruch nach dem ersten Satz nur auf grossen Bildschirmen */
.tagline__text mark{
  color:inherit; padding:0 .05em;
  background:linear-gradient(var(--c-accent), var(--c-accent)) 0 88% / 0% 34% no-repeat;
  transition:background-size .8s var(--ease-out);
}
.tagline__text mark.is-on{ background-size:100% 34%; }
.no-js .tagline__text .w{ color:inherit; }
.no-js .tagline__text mark{ background-size:100% 34%; }
.points{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
@media (min-width:1100px){ .points{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.points li{ padding:clamp(1.4rem, 2.4vw, 2rem); border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.points h3{ font-size:1.25rem; margin-bottom:.6rem; }
.points p{ color:var(--fg-2); font-size:.97rem; margin:0; }

/* ═════════════ PREISE (Beispielprojekte + Tagesansätze) ═════════════ */
.prices{ padding:var(--sp) 0; }
.projs{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
@media (min-width:600px){ .projs{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .projs{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
.proj{
  display:flex; flex-direction:column; padding:clamp(1.4rem, 2.2vw, 1.9rem); border-radius:var(--sh);
  background:var(--panel); box-shadow:0 0 0 1px var(--line);
}
.proj h3{ font-size:1.35rem; margin-bottom:.6rem; }
.proj > p{ color:var(--fg-2); font-size:.97rem; margin:0 0 1.6rem; text-wrap:pretty; }
.proj__price{ margin-top:auto; font-family:var(--display); font-weight:800; font-size:clamp(1.8rem, 2.6vw, 2.3rem); letter-spacing:-.035em; line-height:1; color:var(--hi); font-variant-numeric:tabular-nums; }
.proj__price small{ font-family:var(--body); font-size:.95rem; font-weight:700; letter-spacing:0; color:var(--fg-2); margin-right:.15em; }
.proj__days{ list-style:none; margin:1.1rem 0 0; padding:1rem 0 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:.4rem; }
.proj__days li{ padding:.3rem .65rem; border-radius:var(--sh-xs); background:var(--panel-2); font-size:.84rem; font-weight:600; color:var(--fg-2); }
.addon{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem 1.4rem; align-items:center; margin-bottom:1rem;
  padding:clamp(1.3rem, 2.2vw, 1.8rem); border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line);
}
@media (min-width:980px){ .addon{ grid-template-columns:auto minmax(0,1fr) auto; } .addon__plus{ align-self:center; } }
.addon__plus{ align-self:start; position:relative; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--c-accent); }
.addon__plus::before, .addon__plus::after{ content:""; position:absolute; left:50%; top:50%; width:42%; height:2.5px; border-radius:2px; background:var(--c-on-accent); translate:-50% -50%; }
.addon__plus::after{ rotate:90deg; }
.addon__text h3{ font-size:1.25rem; margin-bottom:.35rem; }
.addon__text p{ margin:0; color:var(--fg-2); font-size:.95rem; max-width:60ch; text-wrap:pretty; }
.addon__list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; grid-column:1 / -1; }
@media (min-width:980px){ .addon__list{ grid-column:auto; justify-content:flex-end; max-width:24rem; } }
.addon__list li{ padding:.35rem .75rem; border-radius:var(--sh-xs); background:var(--panel-2); font-size:.86rem; font-weight:600; }
.proj__price small{ order:0; }
.proj__price small.per{ margin:0 0 0 .2em; }
.ptabs{ display:inline-flex; gap:4px; padding:4px; margin:0 0 1.6rem; border-radius:var(--sh-sm); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.ptabs button{ padding:.7rem 1.3rem; border-radius:var(--sh-xs); font-weight:700; font-size:.95rem; color:var(--fg-2); transition:background .3s var(--ease-out), color .3s; }
.ptabs button:hover{ color:var(--fg); }
.ptabs button[aria-selected="true"]{ background:var(--c-accent); color:var(--c-on-accent); }
.ppanel[hidden]{ display:none; }
.ppanel:focus-visible{ outline:2px solid var(--hi); outline-offset:6px; }
.ppanel.is-in{ animation:panelIn .5s var(--ease-out) both; }
@keyframes panelIn{ from{ opacity:0; translate:0 10px; } to{ opacity:1; translate:0 0; } }
@media (min-width:600px){ .projs--ret{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .projs--ret{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.retinc{ margin-bottom:1rem; padding:clamp(1.3rem, 2.2vw, 1.8rem); border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line); }
.retinc h3{ font-size:1.25rem; margin-bottom:1rem; }
.retinc .checks{ margin:0; }
.prices__foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 2rem; margin-top:1.6rem; }
.prices__foot p{ margin:0; color:var(--fg-2); font-size:.95rem; max-width:60ch; }

/* ═════════════ ABLAUF ═════════════ */
.steps{ padding:var(--sp) 0; }
.steps__list{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); }
.step{ display:flex; flex-direction:column; overflow:hidden; border-radius:var(--sh); background:var(--panel); box-shadow:0 0 0 1px var(--line), 0 24px 48px -36px rgba(14,36,29,.45); }
.step__body{ padding:clamp(1.4rem, 2.2vw, 1.9rem); }
.step__n{ display:grid; place-items:center; width:2.4rem; height:2.4rem; border-radius:50%; margin-bottom:1rem; font-family:var(--display); font-weight:800; font-size:1rem; background:var(--c-dark); color:var(--c-accent); }
.step h3{ font-size:1.3rem; margin-bottom:.7rem; }
.step h3 em{ display:inline-block; font-style:normal; font-family:var(--body); font-weight:700; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--hi); color:var(--hi); padding:.25rem .5rem; border-radius:var(--sh-xs); margin-left:.3rem; position:relative; top:-.2em; }
.step p{ color:var(--fg-2); font-size:.96rem; margin:0; }

/* ═════════════ HOI ═════════════ */
.hello{ padding:var(--sp) 0; }
.hello__grid{ display:grid; gap:clamp(2rem, 5vw, 5rem); }
@media (min-width:900px){ .hello__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); align-items:center; } }
.hello__img{ margin:0; overflow:hidden; aspect-ratio:5 / 4; border-radius:var(--sh); }
.hello__img img{ width:100%; height:100%; object-fit:cover; object-position:40% 30%; }
.hello h2{ margin-bottom:1.6rem; }
.hello h2 .hand{ font-size:1.05em; margin-right:.15em; }
.hello p{ color:var(--fg-2); font-size:clamp(1.02rem, 1.25vw, 1.14rem); max-width:44ch; }


/* ═════════════ Ablauf-Grafiken (animiertes SVG, folgt der Palette) ═════════════ */
.step__art{
  aspect-ratio:2 / 1; display:grid; place-items:center; padding:5% 4%;
  background:radial-gradient(70% 90% at 50% 100%, color-mix(in oklab, var(--c-accent) 14%, transparent), transparent 70%), var(--c-dark);
  --s-line:color-mix(in oklab, var(--c-ink-d) 24%, transparent);
  --s-soft:color-mix(in oklab, var(--c-ink-d) 7%, transparent);
  --s-fg:color-mix(in oklab, var(--c-ink-d) 62%, var(--c-dark));
  --s-body:color-mix(in oklab, var(--c-ink-d) 13%, var(--c-dark));
}
.art{ width:100%; height:100%; overflow:visible; }
.art *{ transform-box:fill-box; }
.art text{ font-family:var(--body); font-weight:700; text-anchor:middle; }

/* 1 Erstgespräch: zwei Videokacheln, abwechselnd sprechend */
.a-panel{ fill:var(--s-soft); stroke:var(--s-line); stroke-width:1; }
.a-frame{ fill:var(--s-soft); stroke:var(--s-line); stroke-width:1.5; }
.a-fg{ fill:var(--s-fg); }
.a-tile--a .a-frame{ animation:talkA 4s infinite; }
.a-tile--b .a-frame{ animation:talkB 4s infinite; }
.a-tile--a .a-wave{ animation:speakA 4s infinite; }
.a-tile--b .a-wave{ animation:speakB 4s infinite; }
.a-wave rect{ fill:var(--c-accent); transform-origin:center; animation:wave .45s ease-in-out infinite alternate; }
.a-wave rect:nth-child(2){ animation-delay:.15s; } .a-wave rect:nth-child(3){ animation-delay:.3s; }
.a-chip rect{ fill:var(--c-accent); }
.a-chip text{ fill:var(--c-on-accent); font-size:12px; }
@keyframes talkA{ 0%,46%{ stroke:var(--c-accent); stroke-width:2.5 } 50%,100%{ stroke:var(--s-line); stroke-width:1.5 } }
@keyframes talkB{ 0%,46%{ stroke:var(--s-line); stroke-width:1.5 } 50%,96%{ stroke:var(--c-accent); stroke-width:2.5 } 100%{ stroke:var(--s-line) } }
@keyframes speakA{ 0%,46%{ opacity:1 } 50%,100%{ opacity:0 } }
@keyframes speakB{ 0%,46%{ opacity:0 } 50%,96%{ opacity:1 } 100%{ opacity:0 } }
@keyframes wave{ from{ transform:scaleY(.3) } to{ transform:scaleY(1.15) } }

/* 2 Briefing: Drehplan schreibt sich, Haken */
.a-paper{ fill:var(--c-ink-d); }
.a-l{ fill:color-mix(in oklab, var(--c-dark) 28%, var(--c-ink-d)); transform-origin:left center; animation:write 5s var(--d, 0s) infinite both; }
.a-l--1{ fill:var(--c-dark); --d:0s; } .a-l--2{ --d:.3s; } .a-l--3{ --d:.5s; } .a-l--4{ --d:.7s; } .a-l--5{ --d:.9s; }
.a-price rect{ fill:var(--c-dark); }
.a-price text{ fill:var(--c-accent); font-size:11px; }
.a-price{ transform-origin:center; animation:pop 5s 1.3s infinite both; }
.a-check circle{ fill:var(--c-accent); }
.a-check path{ fill:none; stroke:var(--c-on-accent); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round; }
.a-check{ transform-origin:center; animation:pop 5s 1.8s infinite both; }
@keyframes write{ 0%{ transform:scaleX(0); opacity:1 } 12%,84%{ transform:scaleX(1); opacity:1 } 94%,100%{ transform:scaleX(1); opacity:0 } }
@keyframes pop{ 0%{ opacity:0; transform:scale(.6) } 7%{ opacity:1; transform:scale(1.08) } 11%,62%{ opacity:1; transform:scale(1) } 70%,100%{ opacity:0; transform:scale(1) } }

/* 3 Drehtag: Filmklappe schlägt zu, Kamera auf Stativ mit Tally-Licht */
.a-floor{ fill:none; stroke:var(--s-line); stroke-width:1.5; stroke-linecap:round; }
.a-tripod{ fill:none; stroke:var(--s-line); stroke-width:3; stroke-linecap:round; }
.a-cbody{ fill:var(--s-body); stroke:var(--s-line); stroke-width:1.5; }
.a-clens{ fill:color-mix(in oklab, var(--c-dark) 75%, #000); stroke:var(--s-line); stroke-width:1.5; stroke-linejoin:round; }
.a-tally{ fill:var(--rec); animation:blink 1.1s steps(2, jump-none) infinite; }
.a-kboard{ fill:var(--s-body); stroke:var(--s-line); stroke-width:1.5; }
.a-kline{ fill:none; stroke:var(--s-line); stroke-width:1.2; }
.a-ktxt{ fill:var(--c-ink-d); font-size:10px; letter-spacing:.08em; text-anchor:start; }
.art .a-ktxt{ text-anchor:start; }
.a-ktxt--sm{ font-size:7px; fill:var(--s-fg); }
.a-knum{ fill:var(--c-accent); font-family:var(--display); font-weight:800; font-size:17px; }
.art .a-knum{ text-anchor:start; }
.a-kfill{ fill:var(--s-fg); opacity:.6; }
.a-kbar{ fill:var(--c-ink-d); }
.a-kbar-s{ fill:url(#kstripe); }
.a-kstripe{ fill:var(--c-dark); }
.a-khinge{ fill:var(--s-fg); }
/* Kamera-Rig (Drehtag) */
/* Rig-Gruppe: Skalierung an der Zeichenfläche ausrichten (nicht am eigenen Rahmen, siehe .art *) */
.art .a-rwrap{ transform-box:view-box; transform-origin:0 0; }
.a-rm1{ stop-color:color-mix(in oklab, var(--c-ink-d) 46%, var(--c-dark)); }
.a-rm2{ stop-color:color-mix(in oklab, var(--c-ink-d) 22%, var(--c-dark)); }
.a-rm3{ stop-color:color-mix(in oklab, var(--c-ink-d) 10%, var(--c-dark)); }
.a-rs1{ stop-color:color-mix(in oklab, var(--c-accent) 55%, var(--c-dark)); }
.a-rs2{ stop-color:color-mix(in oklab, var(--c-accent) 18%, var(--c-dark)); }
.a-rbody{ fill:url(#rmetal); stroke:var(--s-line); stroke-width:1; }
.a-rgrip{ fill:color-mix(in oklab, var(--c-ink-d) 6%, var(--c-dark)); }
.a-rbtn{ fill:#E5484D; }
.a-rdial{ fill:color-mix(in oklab, var(--c-ink-d) 8%, var(--c-dark)); stroke:var(--s-line); stroke-width:1; }
.a-rdial2{ fill:var(--s-fg); opacity:.5; }
.a-rcage{ fill:none; stroke:var(--s-fg); stroke-width:1.8; opacity:.9; }
.a-rhole{ fill:color-mix(in oklab, var(--c-dark) 70%, #000); }
.a-rmount{ fill:var(--s-fg); opacity:.75; }
.a-rlens{ fill:color-mix(in oklab, var(--c-dark) 65%, #000); stroke:var(--s-line); stroke-width:1; }
.a-rribs{ fill:none; stroke:color-mix(in oklab, var(--c-ink-d) 20%, transparent); stroke-width:1.1; }
.a-rribs--fine{ stroke-width:.7; }
.a-rlensline{ fill:none; stroke:#E5484D; stroke-width:1; opacity:.85; }
.a-rhood{ fill:color-mix(in oklab, var(--c-dark) 55%, #000); stroke:var(--s-line); stroke-width:1; stroke-linejoin:round; }
.a-rglass{ fill:none; stroke:color-mix(in oklab, var(--c-accent) 70%, transparent); stroke-width:1.4; stroke-linecap:round; opacity:.8; }
.a-rnato{ fill:var(--s-fg); opacity:.85; }
.a-rnotch{ fill:none; stroke:color-mix(in oklab, var(--c-dark) 75%, transparent); stroke-width:1; }
.a-rpost{ fill:none; stroke:var(--s-fg); stroke-width:3; }
.a-rhandle{ fill:color-mix(in oklab, var(--c-ink-d) 10%, var(--c-dark)); stroke:var(--s-line); stroke-width:1; }
.a-rknurl{ fill:none; stroke:color-mix(in oklab, var(--c-ink-d) 16%, transparent); stroke-width:.8; }
.a-rshoe{ fill:var(--s-fg); }
.a-rsmount{ fill:none; stroke:var(--s-fg); stroke-width:1.4; stroke-linecap:round; }
.a-rring{ fill:none; stroke:var(--s-fg); stroke-width:1.2; }
.a-rtube{ fill:url(#rmetal); stroke:var(--s-line); stroke-width:1; }
.a-rslots{ fill:none; stroke:color-mix(in oklab, var(--c-dark) 70%, #000); stroke-width:1; }
.a-rcable{ fill:none; stroke:color-mix(in oklab, var(--c-ink-d) 30%, var(--c-dark)); stroke-width:1.4; stroke-linecap:round; }
.a-rarm{ fill:none; stroke:var(--s-fg); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.a-rjoint{ fill:color-mix(in oklab, var(--c-ink-d) 10%, var(--c-dark)); stroke:var(--s-fg); stroke-width:1; }
.a-rmonbody{ fill:color-mix(in oklab, var(--c-dark) 60%, #000); stroke:var(--s-line); stroke-width:1; }
.a-rscr{ fill:color-mix(in oklab, var(--c-dark) 80%, #000); }
.a-rsubj{ fill:color-mix(in oklab, var(--c-ink-d) 70%, var(--c-dark)); }
.a-rgrid{ fill:none; stroke:rgba(255,255,255,.18); stroke-width:.5; }
.a-rrec{ fill:#E5484D; animation:blink 1.1s steps(2, jump-none) infinite; }
.a-rmeter{ fill:var(--c-accent); transform-origin:50% 100%; animation:meter 1.3s ease-in-out infinite alternate; }
.a-rmeter--2{ animation-duration:.9s; animation-delay:-.4s; }
.a-rshotpan{ animation:shotpan 6s ease-in-out infinite alternate; }
.a-rleg{ fill:none; stroke:color-mix(in oklab, var(--c-ink-d) 40%, var(--c-dark)); stroke-width:5.6; stroke-linecap:round; }
.a-rleg--low{ stroke-width:4; stroke:color-mix(in oklab, var(--c-ink-d) 52%, var(--c-dark)); }
.a-rleg--back{ stroke-width:4.4; opacity:.5; }
.a-rlock{ fill:color-mix(in oklab, var(--c-dark) 55%, #000); stroke:var(--s-fg); stroke-width:1; }
.a-rfoot{ fill:none; stroke:color-mix(in oklab, var(--c-dark) 50%, #000); stroke-width:3.4; stroke-linecap:round; }
.a-rknob{ fill:color-mix(in oklab, var(--c-dark) 55%, #000); stroke:var(--s-line); stroke-width:1; }
.a-rspread{ fill:none; stroke:var(--s-fg); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.a-rhead{ fill:url(#rmetal); stroke:var(--s-line); stroke-width:1; }
.a-rpan{ fill:none; stroke:var(--s-fg); stroke-width:3.4; stroke-linecap:round; }
.a-rpangrip{ fill:none; stroke:color-mix(in oklab, var(--c-dark) 50%, #000); stroke-width:5.2; stroke-linecap:round; }
.a-rplate{ fill:var(--s-fg); opacity:.7; }
@keyframes meter{ from{ transform:scaleY(.25); } to{ transform:scaleY(1); } }
@keyframes shotpan{ from{ transform:translateX(-3px); } to{ transform:translateX(3px); } }
.a-karm{ transform-origin:left bottom; animation:clap 2.8s infinite; }
.a-burst{ opacity:0; transform-origin:left center; animation:burst 2.8s infinite; }
.a-burst path{ fill:none; stroke:var(--c-accent); stroke-width:3; stroke-linecap:round; }
.a-klappe{ animation:klappe 2.8s infinite; }
@keyframes clap{
  0%{ transform:rotate(-26deg); animation-timing-function:ease-in-out; }
  42%{ transform:rotate(-26deg); animation-timing-function:cubic-bezier(.55,0,.9,.4); }
  52%{ transform:rotate(0deg); }
  78%{ transform:rotate(0deg); animation-timing-function:cubic-bezier(.22,1,.36,1); }
  100%{ transform:rotate(-26deg); }
}
@keyframes burst{ 0%,51%{ opacity:0; transform:scale(.6); } 55%{ opacity:1; transform:scale(1.1); } 70%,100%{ opacity:0; transform:scale(1.25); } }
@keyframes klappe{ 0%,51%{ transform:none; } 54%{ transform:translateY(1.5px); } 60%,100%{ transform:none; } }
@keyframes blink{ 0%{ opacity:1 } 100%{ opacity:.15 } }

/* 4 Schnitt & Lieferung: Playhead läuft, Formate kommen raus */
.a-out rect{ fill:var(--s-soft); stroke:var(--c-accent); stroke-width:2; }
.a-out text{ fill:var(--c-accent); font-family:var(--display); font-weight:800; font-size:11px; }
.a-out{ transform-origin:center bottom; animation:out 4.8s var(--d, 0s) infinite both; }
.a-out--1{ --d:.9s; } .a-out--2{ --d:1.7s; } .a-out--3{ --d:2.5s; }
.a-track{ fill:var(--s-soft); stroke:var(--s-line); stroke-width:1; }
.a-clip{ fill:color-mix(in oklab, var(--c-ink-d) 30%, transparent); }
.a-clip--hi{ fill:var(--c-accent); opacity:.9; }
.a-audio{ fill:none; stroke:color-mix(in oklab, var(--c-ink-d) 45%, transparent); stroke-width:1.5; stroke-linejoin:round; }
.a-head{ fill:var(--rec); animation:head 4.8s linear infinite; }
@keyframes out{ 0%{ opacity:0; transform:translateY(8px) scale(.9) } 8%,62%{ opacity:1; transform:none } 72%,100%{ opacity:0; transform:none } }
@keyframes head{ from{ transform:translateX(0) } to{ transform:translateX(226px) } }

@media (prefers-reduced-motion: reduce){
  .art *{ animation:none !important; }
  .a-out, .a-price, .a-check{ opacity:1; }
  .a-karm{ transform:none; }
  .a-rmeter, .a-rshotpan, .a-rrec{ animation:none; }
  .tagline__text .w{ transition:none; }
}

/* Link ins Portfolio unter den Kacheln */


/* Beleg in der Kundenstimmen-Karte */
.scard__proof{ display:inline-flex; align-items:baseline; gap:.7rem; margin-top:1.4rem; padding:.8rem 1.1rem; border-radius:var(--sh-sm); background:var(--c-dark); color:var(--c-ink-d); transition:transform .4s var(--ease-out); }
.scard__proof:hover{ transform:translateY(-2px); }
.scard__proof b{ font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.03em; line-height:1; color:var(--c-accent); }
.scard__proof span{ font-size:.92rem; font-weight:600; max-width:30ch; }