/* Scrollytelling (13.11.2026) — nur bananacrm.de „Ein paar Minuten …“ (#so-gehts); bananacrm.pl behält
   seine drei Geräte nebeneinander (Korrektur 13.11.2026). Prinzip wie safina.ai/de: ab Tablet-Breite zwei Spalten — links eine
   stehende Bühne (sticky, eine Bildschirmhöhe) mit ALLEN Bildern übereinander, rechts die Texte, die ganz
   normal scrollen. js/scrolly.js setzt nur die Klasse .aktiv (Bild weich einblenden, Text hervorheben) und
   den Fortschritt. Am Handy: nur die Texte untereinander und dreimal der Demo-Link (.sc-demo), keine Bilder. */

.sc{position:relative;margin-top:48px}
/* Keine Scrollbalken — nur auf der Bühne (Handy), nie an den Texten (13.11.2026). */
.sc-buehne,.sc-buehne *{scrollbar-width:none}
.sc-buehne::-webkit-scrollbar,.sc-buehne ::-webkit-scrollbar{display:none}
/* Textspalte: nie breiter als ihr Platz, lange Wörter brechen um statt abgeschnitten zu werden. */
.sc-texte,.sc-texte>li.sc-text{min-width:0}
.sc-texte{overflow-wrap:break-word}
.sc-demo{display:none}

/* ---------- Ab Tablet-Breite: Scrollytelling ---------- */
@media (min-width:768px){
  .sc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);column-gap:clamp(32px,6vw,96px);align-items:start}
  /* Bühne: klebt oben bündig, genau eine Bildschirmhöhe, Inhalt senkrecht mittig. */
  .sc-buehne{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;grid-column:1;grid-row:1}
  /* Alle Bilder übereinander in derselben Zelle; Breite so, dass das Handy in die Bildschirmhöhe passt. */
  .sc-stapel{display:grid;width:min(300px,100%,calc((100vh - 120px) / 2.25));width:min(300px,100%,calc((100dvh - 120px) / 2.25));padding:0}
  .sc-stapel>.n-bild{grid-area:1/1;margin:0;width:100%}
  .sc .n-bild{display:block}
  .sc-bild{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
  .sc-bild.aktiv{opacity:1;visibility:visible;transition:opacity .5s ease,visibility 0s}
  /* Fortschritt: schmaler Balken am rechten Rand der Bühne, also direkt neben den Texten. */
  .sc-fortschritt{position:absolute;right:0;top:50%;width:2px;height:min(60vh,560px);height:min(60dvh,560px);transform:translateY(-50%);border-radius:2px;background:#e6e6e6;overflow:hidden}
  .sc-fortschritt span{display:block;width:100%;height:100%;border-radius:2px;background:var(--ink,#111);transform-origin:50% 0;transform:scaleY(var(--fortschritt,0));transition:transform .5s ease}
  /* Texte: jeder Abschnitt eine Bildschirmhöhe, Inhalt mittig; der aktive voll, die anderen zurückgenommen. */
  .sc-texte{grid-column:2;grid-row:1;list-style:none;margin:0;padding:0;border:0;display:block}
  .sc .sc-texte>li.sc-text{min-height:100vh;min-height:100dvh;margin:0;display:flex;flex-direction:column;justify-content:center;max-width:520px}
  .sc.an .sc-text{opacity:.35;transition:opacity .5s ease}
  .sc.an .sc-text.aktiv{opacity:1}
}

/* ---------- Handy: nur die Texte, schlicht untereinander ---------- */
@media (max-width:767.98px){
  .sc-buehne{display:none}
  .sc-texte{list-style:none;margin:0;padding:0;border:0;display:grid;gap:40px}
  .sc .sc-texte>li.sc-text{margin:0;opacity:1}
  .sc-demo{display:inline-block;margin:0 0 32px}
  .sc-texte .sc-demo{margin:20px 0 0}
  .sc-texte+.sc-demo{margin:32px 0 0}
}

@media (prefers-reduced-motion:reduce){
  .sc-bild,.sc-bild.aktiv,.sc.an .sc-text,.sc-fortschritt span{transition:none}
}