/* =========================================================================
   FOKALiS – nur Seite „AI Software“
   1. Drehbuch-Seite im Seitenkopf (Zeilen werden ruhig nacheinander „getippt“)
   2. „Erst der Plan. Dann der Code.“ – Vom Drehbuch zur Premiere:
      Links die vier Schritte, rechts eine Beispiel-App, die beim Scrollen
      von der Notiz über den Entwurf (Drahtgitter) bis zur fertigen App scharf wird.
   3. Eigene Software (FokaOffice) als Beleg
   Bewegungswerte nach DESIGN-KONZEPT.md (1,4 s, --ease-glide, kleine Wege).
   ========================================================================= */

/* ---------- 1. DREHBUCH ------------------------------------------------- */
.script{margin:0;align-self:end;min-width:0;border-radius:var(--radius);overflow:hidden;
  background:rgba(243,243,243,.95);color:var(--anth);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.script-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 22px;
  border-bottom:1px solid rgba(34,35,35,.14);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-light-muted)}
.script-note{flex:none;padding:4px 9px;border:1px solid rgba(34,35,35,.3);border-radius:999px;letter-spacing:.16em}
.script-page{display:grid;gap:12px;padding:24px 26px 28px;font-size:14px;line-height:1.55}
.sc-slug{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12.5px}
.sc-action{color:#3A3A3A}
.sc-char{justify-self:center;margin-top:4px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
.sc-dialog{justify-self:center;max-width:26ch;margin-top:-8px;text-align:center;font-family:var(--font-head);font-weight:300;font-size:22px;line-height:1.25;text-transform:uppercase;color:var(--anth)}
.sc-cut{justify-self:end;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
  padding:3px 10px;background:var(--gold);border-radius:2px}
.sc-action--end{color:var(--anth);font-weight:400}
/* Zeilen werden nacheinander „geschrieben“ – Wischblende von links, sehr ruhig */
.js .sc-line{clip-path:inset(0 100% 0 0);animation:sc-type 1.6s var(--ease-cine) forwards;animation-delay:calc(1.8s + var(--n) * .8s)}
@keyframes sc-type{to{clip-path:inset(0 0 0 0)}}
@media (max-width:1020px){.script{max-width:560px;width:100%}}
@media (min-width:1021px) and (max-height:760px){
  .script-page{gap:9px;padding:18px 22px 20px;font-size:13px;line-height:1.5}
  .sc-dialog{font-size:19px}
}
@media (max-width:760px){.script-page{padding:20px 18px 22px;font-size:13.5px}.script-head{padding:12px 16px}}

/* ---------- 2. VOM DREHBUCH ZUR PREMIERE ------------------------------ */
.story .section-head{margin-bottom:clamp(24px,3vw,48px)}
.story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0 clamp(40px,5vw,96px);align-items:start}
.story-steps{list-style:none}
.story-step{min-height:68vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px;padding-block:40px;
  transition:opacity 1.4s var(--ease-glide)}
.story-step+.story-step{border-top:1px solid var(--line-dark)}
.story-num{font-family:var(--font-head);font-weight:200;font-size:clamp(56px,5vw,84px);line-height:.85;color:var(--on-dark-muted);transition:color 1.4s var(--ease-glide)}
.story-step h3{font-size:clamp(30px,3vw,46px);font-weight:400;text-transform:uppercase;line-height:1.05;letter-spacing:.01em;color:var(--white)}
.story-who{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
  border:1px solid rgba(236,176,20,.5);color:var(--gold)}
.story-step p{max-width:46ch;color:#BDBDBD}
/* mit JS: nur der aktuelle Schritt ist voll da */
.story-live .story-step{opacity:.3}
.story-live .story-step.is-active{opacity:1}
.story-step.is-active .story-num{color:var(--gold)}

.story-stage{position:sticky;top:calc(var(--header-h) + 7vh);display:grid;gap:14px;padding-top:12vh}
.story-caption{font-size:12.5px;color:var(--on-dark-muted);letter-spacing:.04em}

/* --- Beispiel-App (Maße in cqw = Prozent der App-Breite, skaliert also mit) --- */
.mk{container-type:inline-size;position:relative;border-radius:6px;overflow:hidden;background:var(--white);color:var(--anth);
  box-shadow:0 40px 100px rgba(0,0,0,.45);font-family:var(--font-body);line-height:1.3}
.mk-in{aspect-ratio:16 / 9.8;display:grid;grid-template-rows:auto minmax(0,1fr)}
.mk b{font-weight:inherit;border-radius:.4cqw;transition:color 1.2s var(--ease-glide),background-color 1.2s var(--ease-glide)}
.mk-bar{display:flex;align-items:center;gap:2cqw;padding:1.5cqw 2.2cqw;background:var(--paper);border-bottom:1px solid rgba(34,35,35,.1);
  font-size:1.45cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-light-muted)}
.mk-dots{display:flex;gap:.8cqw}
.mk-dots i{width:1.1cqw;height:1.1cqw;border-radius:50%;background:rgba(34,35,35,.18)}
.mk-url{flex:1;padding:.6cqw 1.6cqw;background:var(--white);border-radius:999px;letter-spacing:.04em;text-transform:none;font-weight:500}
.mk-state{display:grid;justify-items:end}
.mk-state>span{grid-area:1 / 1;display:flex;align-items:center;gap:.8cqw;opacity:0;transition:opacity 1s var(--ease-glide)}
.mk[data-stage="1"] .mk-state>span:nth-child(1),.mk[data-stage="2"] .mk-state>span:nth-child(2),
.mk[data-stage="3"] .mk-state>span:nth-child(3),.mk[data-stage="4"] .mk-state>span:nth-child(4){opacity:1}
.mk-live{color:var(--anth)}
.mk-live::before{content:"";width:1cqw;height:1cqw;border-radius:50%;background:var(--gold)}

.mk-body{display:grid;grid-template-columns:21% minmax(0,1fr);min-height:0;transition:opacity 1.4s var(--ease-glide),filter 1.6s var(--ease-glide)}
.mk-side{display:flex;flex-direction:column;gap:.6cqw;padding:2.4cqw 1.6cqw;background:var(--anth);color:var(--on-dark);font-size:1.5cqw;
  border-right:1px solid transparent;transition:background-color 1.4s var(--ease-glide),border-color 1.4s var(--ease-glide)}
.mk-logo{width:3.2cqw;height:3.2cqw;margin:0 0 1.8cqw .9cqw;border-radius:50%;border:.5cqw solid var(--gold);transition:border-color 1.4s var(--ease-glide)}
.mk-nav{padding:.9cqw 1cqw;border-radius:.6cqw}
.mk-nav.is-on{background:rgba(255,255,255,.08)}
.mk-main{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:2.4cqw;padding:2.6cqw 3cqw;min-width:0}
.mk-head{display:flex;align-items:center;gap:1.6cqw}
.mk-h{margin-right:auto;font-family:var(--font-head);font-weight:400;font-size:3.1cqw;text-transform:uppercase;letter-spacing:.01em;line-height:1.1}
.mk-search{width:22cqw;padding:.8cqw 1.6cqw;border:1px solid rgba(34,35,35,.16);border-radius:999px;font-size:1.4cqw;color:var(--on-light-muted);transition:border-color 1.2s}
.mk-btn{padding:.9cqw 1.8cqw;border-radius:999px;background:var(--gold);border:1px solid transparent;font-size:1.4cqw;font-weight:600;
  transition:background-color 1.2s var(--ease-glide),border-color 1.2s var(--ease-glide)}
.mk-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw}
.mk-tile{display:grid;gap:.8cqw;justify-items:start;padding:1.6cqw 1.8cqw;border:1px solid rgba(34,35,35,.12);border-radius:.8cqw;transition:border-color 1.2s}
.mk-k{font-size:1.3cqw;font-weight:500;color:var(--on-light-muted)}
.mk-v{font-family:var(--font-head);font-weight:200;font-size:5cqw;line-height:1}
.mk-rows{list-style:none;align-self:start}
.mk-rows li{display:flex;justify-content:space-between;align-items:center;gap:2cqw;padding:1.15cqw 0;border-bottom:1px solid rgba(34,35,35,.08);font-size:1.5cqw}
.mk-st{padding:.4cqw 1.1cqw;border-radius:999px!important;background:var(--paper);font-size:1.2cqw;font-weight:600;color:var(--on-light-muted)}
.mk-st--gold{background:rgba(236,176,20,.25);color:var(--anth)}

/* Stufe 1 + 2: Entwurf als Drahtgitter – Texte werden zu grauen Balken */
.mk:is([data-stage="1"],[data-stage="2"]) .mk-body b{color:transparent;background-color:rgba(34,35,35,.1)}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-side{background:var(--white);border-right-color:rgba(34,35,35,.14)}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-nav.is-on{background:transparent}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-logo{border-color:rgba(34,35,35,.2)}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-btn{background:transparent;border:1px dashed rgba(34,35,35,.35)}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-tile,.mk:is([data-stage="1"],[data-stage="2"]) .mk-search{border-style:dashed;border-color:rgba(34,35,35,.25)}
.mk:is([data-stage="1"],[data-stage="2"]) .mk-st{background-color:rgba(34,35,35,.07)}
/* Stufe 1: nur die Notiz, die App ist noch kaum zu ahnen */
.mk[data-stage="1"] .mk-body{opacity:.35;filter:blur(2px)}
/* Stufe 3: in Arbeit – noch leicht unscharf, Prüfung läuft */
.mk[data-stage="3"] .mk-body{filter:blur(2.5px)}

/* Drehbuch-Notiz */
.mk-plan{position:absolute;left:50%;top:55%;width:60cqw;padding:3.2cqw 3.6cqw;background:var(--paper);border:1px solid rgba(34,35,35,.16);border-radius:.6cqw;
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.18);transform:translate(-50%,-46%);opacity:0;
  transition:opacity 1.2s var(--ease-glide),transform 1.4s var(--ease-glide)}
.mk[data-stage="1"] .mk-plan{opacity:1;transform:translate(-50%,-50%)}
.mk-plan-title{display:block;margin-bottom:1.6cqw;font-size:1.4cqw;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--on-light-muted)}
.mk-plan ol{list-style:none;counter-reset:mkp;display:grid}
.mk-plan li{counter-increment:mkp;display:flex;align-items:baseline;gap:2cqw;padding:1.1cqw 0;border-top:1px solid rgba(34,35,35,.12);
  font-family:var(--font-head);font-weight:300;font-size:3cqw;text-transform:uppercase;line-height:1.15}
.mk-plan li::before{content:counter(mkp,decimal-leading-zero);font-family:var(--font-body);font-size:1.3cqw;font-weight:600;letter-spacing:.1em;color:var(--on-light-muted)}

/* Prüf-Chips in Stufe 3 */
.mk-check{position:absolute;right:3cqw;bottom:3cqw;list-style:none;display:grid;gap:1cqw;justify-items:end}
.mk-check li{display:flex;align-items:center;gap:1.2cqw;padding:1cqw 1.8cqw;border-radius:999px;background:var(--anth);color:var(--white);
  font-size:1.5cqw;font-weight:500;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25);opacity:0;transform:translate3d(0,1.4cqw,0);
  transition:opacity 1s var(--ease-glide),transform 1.4s var(--ease-glide)}
.mk-check li::before{content:"";flex:none;width:1.4cqw;height:.7cqw;border-left:.25cqw solid var(--gold);border-bottom:.25cqw solid var(--gold);transform:translateY(-.25cqw) rotate(-45deg)}
.mk-check span{font-size:1.15cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)}
.mk[data-stage="3"] .mk-check li{opacity:1;transform:none}
.mk[data-stage="3"] .mk-check li:nth-child(2){transition-delay:.5s}
.mk[data-stage="3"] .mk-check li:nth-child(3){transition-delay:1s}

/* Hochkant / Tablet: App klebt oben, die Schritte laufen darunter durch */
@media (max-width:1020px){
  .story-grid{grid-template-columns:1fr}
  .story-stage{order:-1;z-index:2;top:var(--header-h);padding:12px var(--gutter) 18px;margin-inline:calc(var(--gutter) * -1);
    background:linear-gradient(180deg,var(--anth) calc(100% - 14px),rgba(34,35,35,0));
    box-shadow:0 calc(var(--header-h) * -1) 0 var(--anth)} /* deckt auch den Streifen darüber ab, wenn die Kopfzeile wegfährt */
  .mk{width:100%;max-width:min(560px,calc((100svh - var(--header-h)) * .62));margin-inline:auto}
  .story-caption{text-align:center}
  .story-step{min-height:52vh;padding-block:32px}
}
@media (max-width:760px){.story-caption{display:none}}

/* ---------- 3. EIGENE SOFTWARE ----------------------------------------- */
.own{overflow:hidden}
.own .drift-word{position:absolute;top:clamp(24px,4vw,56px);left:0}
.own-inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px clamp(40px,6vw,112px);align-items:center;padding-top:clamp(64px,9vw,150px)}
.own-text{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;justify-items:start}
.own-text .h2{width:100%} /* volle Spaltenbreite, damit fit-lines.js richtig einpasst */
.own-text .lead{color:#CFCFCF}
.own-text .link-arrow{color:var(--on-dark)}
.own-text .link-arrow:hover{color:var(--gold)}
.own-duo{list-style:none;display:grid;gap:14px;width:100%;padding-top:8px;border-top:1px solid var(--line-dark)}
.own-duo li{display:flex;align-items:center;gap:16px;padding-top:6px}
.own-duo img{width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:50% 20%;flex:none}
.own-duo-agent img{filter:grayscale(1) brightness(.8);transition:filter 1.6s var(--ease-glide)}
.own-duo-agent:hover img{filter:none}
.own-duo li>span{display:grid;gap:2px;font-size:14px;line-height:1.4;color:var(--on-dark-muted)}
.own-duo b{font-family:var(--font-head);font-weight:400;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--white)}

.own-product{display:grid;min-width:0}
.own-screen{position:relative;padding:14px;border:1px solid var(--line-dark);border-radius:var(--radius);background:#121212}
.own-screen img{width:100%;height:auto;border-radius:2px}
.own-corners{position:absolute;inset:-8px;pointer-events:none;--c:var(--gold);--l:26px;
  background:
    linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
    linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
.own-card{position:relative;z-index:1;width:min(86%,560px);justify-self:end;margin-top:-72px;margin-right:-1px;display:grid;gap:18px;
  padding:clamp(24px,2.6vw,36px);background:var(--anth);border:1px solid var(--line-dark);border-radius:var(--radius);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.own-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.own-card-kind{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-dark-muted)}
.own-card h3{font-size:clamp(30px,3vw,44px);font-weight:400;text-transform:uppercase;line-height:1.05;color:var(--white)}
.own-card>p{color:#CFCFCF;font-size:15.5px}
.own-modules{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.own-modules li{display:flex;align-items:center;gap:8px;padding:7px 13px;border:1px solid rgba(255,255,255,.2);border-radius:999px;font-size:13px;color:var(--on-dark)}
.own-modules li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.own-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;padding-top:6px}
.own-actions .link-arrow{color:var(--on-dark)}
.own-actions .link-arrow:hover{color:var(--gold)}
.own-note{font-size:13.5px;color:var(--on-dark-muted)}
@media (max-width:1020px){
  .own-inner{grid-template-columns:1fr}
  .own-product{order:-1}
}
@media (max-width:640px){
  .own-card{width:100%;margin-top:-24px;justify-self:stretch}
  .own-actions .btn{width:100%;justify-content:space-between}
}

/* ---------- Weniger Bewegung ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .js .sc-line{clip-path:none;animation:none}
}