/* /zusammenarbeit/: der Weg vom persönlichen Link bis zur Übergabe im Kundenportal.
   Baut auf styles-v2.css und service.css auf (Seitenklasse .sp). Die Bildschirmfotos
   stammen aus dem Kundenportal mit erfundenen Beispieldaten. */

/* Einstieg mit dem Video */
.za-hero .sp-lead{max-width:720px;margin-bottom:1.8rem}
.za-video{margin:2.4rem 0 0;max-width:960px}
/* Über dem Button am Schluss des Videos liegt ein echter Link (zusammenarbeit.js). Lage und
   Grösse sind im Film gemessen (marketing/video/zusammenarbeit, Outro, 1920x1080). */
.za-video-frame{position:relative}
.za-video-cta{position:absolute;left:39.17%;top:49.54%;width:21.67%;height:7.5%;border-radius:999px;color:transparent;font-size:1px;transition:box-shadow .2s}
.za-video-cta[hidden]{display:none}
/* Auf dem Handy ist der Button im Video klein: die Tippfläche reicht darüber hinaus. */
.za-video-cta::before{content:"";position:absolute;inset:-14px -10px}
.za-video-cta:hover,.za-video-cta:focus-visible{box-shadow:0 0 0 3px var(--sage,#78bb8b);outline:none}
.za-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;background:#111;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.za-hero .sp-cta-row{margin-top:2.2rem}

/* Die Stationen: links der Text, rechts das Bild */
.za-journey{padding:clamp(3.5rem,9vh,6.5rem) 0}
.za-journey .sp-h2{margin-bottom:.8rem}
.za-journey-intro{color:var(--ink-soft);font-size:1.1rem;max-width:640px;margin-bottom:3rem}
.za-stop{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1.6rem 4rem;align-items:center;padding:3.2rem 0;border-top:1px solid var(--line-light)}
.za-stop:last-child{padding-bottom:0}
.za-stop h2{font-size:clamp(1.6rem,2.8vw,2.2rem);letter-spacing:-.04em;line-height:1.08;text-wrap:balance;margin-bottom:1rem}
.za-stop .sp-text p{font-size:1.05rem}
.za-num{display:block;font-size:.9rem;font-weight:700;color:#3d7a4f;margin-bottom:.9rem;letter-spacing:.02em}
.za-status{display:inline-block;margin:0 0 .8rem;padding:.25rem .7rem;border-radius:999px;background:rgba(120,187,139,.18);color:#2f6b45;font-size:.82rem;font-weight:700}

/* Bildträger */
.za-media{min-width:0}
.za-browser{border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px #d6d6d2,0 24px 60px rgba(20,20,20,.14)}
.za-browser .proj-bar{padding:clamp(6px,.6vw,9px) 0}
.za-browser .proj-url{font-size:clamp(12px,.9vw,13px)}
.za-browser img{width:100%;height:auto;display:block}
/* Bühne: Laptop und Handy liegen in derselben Rasterzelle, ohne absolute Positionierung */
.za-stage{display:grid;grid-template-columns:minmax(0,1fr);aspect-ratio:16/10;border-radius:18px;background:linear-gradient(160deg,#e9ebe6,#d9ded8 70%)}
.za-stage>*{grid-area:1/1}
.za-stage .za-browser{width:80%;margin:7% 0 0 5%;align-self:start}
.za-stage .za-phone{width:21%;justify-self:end;align-self:end;margin:0 4% 3% 0}
.za-phone{display:block;width:min(100%,280px);margin:0 auto;border-radius:22px;border:4px solid #0b0b0b;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 22px 50px rgba(20,20,20,.22);overflow:hidden;background:#0b0b0b}
.za-phone img{display:block;width:100%;height:auto;border-radius:18px}
.za-phone-pair{display:flex;gap:1.2rem;justify-content:center;align-items:flex-start}
.za-phone-pair .za-phone{width:min(48%,260px);margin:0}
.za-phone-pair .za-phone:last-child{margin-top:2.4rem}
.za-shot{display:block;width:100%;height:auto;border-radius:14px;border:1px solid #d6d6d2;box-shadow:0 18px 44px rgba(20,20,20,.12)}
.za-media figcaption{margin-top:.8rem;font-size:.88rem;color:var(--ink-soft)}
/* Auf dem Handy zeigt jede Station die Handy-Ansicht des Portals; die Laptop-Ansicht wäre dort unlesbar klein */
.za-phone-m{display:none}

/* Zugänge: gezeichnete Vorschau statt Bildschirmfoto, weil der Teil noch im Bau ist */
.za-mock{background:#fff;border:1px solid #d6d6d2;border-radius:16px;padding:1.3rem 1.3rem 1.2rem;box-shadow:0 24px 60px rgba(20,20,20,.12);max-width:520px;font-size:.95rem;color:var(--ink)}
.za-mock-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-bottom:.9rem;border-bottom:1px solid var(--line-light)}
.za-mock-head strong{font-size:1.05rem;letter-spacing:-.02em}
.za-mock-head span{font-size:.8rem;color:var(--ink-soft);white-space:nowrap}
.za-mock ol{list-style:none;margin:1rem 0 0;padding:0;counter-reset:zs}
.za-mock ol li{position:relative;padding:.55rem 0 .55rem 2.2rem;color:var(--ink-soft);line-height:1.45}
.za-mock ol li::before{counter-increment:zs;content:counter(zs);position:absolute;left:0;top:.55rem;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(120,187,139,.22);color:#2f6b45;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.za-mock ol li b{color:var(--ink);font-weight:700}
.za-mock-lock{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.8rem .9rem;border-radius:10px;background:var(--paper);color:var(--ink-soft);font-size:.92rem;line-height:1.45}
.za-mock-lock svg{width:1.1rem;height:1.1rem;flex-shrink:0;margin-top:.15rem;color:#2f6b45}
.za-mock-foot{margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line-light);display:flex;flex-wrap:wrap;gap:.6rem}
.za-mock-foot span{padding:.3rem .7rem;border-radius:999px;border:1px solid var(--line-light);font-size:.8rem;color:var(--ink-soft)}
.za-mock-foot span.on{border-color:#141414;background:#141414;color:#fff}

/* Handy: Text, dann Bild; Browser-Rahmen volle Breite, Handy-Rahmen schmaler */
@media(max-width:900px){
  .za-stop{grid-template-columns:1fr;gap:1.4rem;padding:2.4rem 0}
  .za-stage{display:block;aspect-ratio:auto;background:none;border-radius:0}
  .za-browser{display:none}
  .za-stage .za-phone,.za-phone-m{display:block;width:min(100%,250px);margin:0 auto}
  .za-mock-head{flex-direction:column;gap:.3rem}
  .za-mock-head span{white-space:normal}
  .za-phone{width:min(100%,250px)}
  .za-phone-pair .za-phone{width:min(48%,250px)}
  .za-phone-pair .za-phone:last-child{margin-top:1.6rem}
  .za-mock{max-width:none;padding:1.1rem 1rem 1rem}
}
@media(max-width:760px){
  .za-video{margin-top:1.8rem}
  .za-video video{border-radius:10px}
  .za-journey-intro{margin-bottom:1.6rem}
}