/* =====================================================================
   WF Design – Hero-Scrollytelling (Startseite)
   Gepinnte Bühne, Frame-Sequenz auf Canvas, Leistung farbig / Rest abgedunkelt
   ===================================================================== */

.story {
  --card-w: min(470px, 34vw);
  position: relative; height: 100svh; min-height: 600px; margin-top: calc(-1 * var(--header-h));
  background: var(--bg-0); color: var(--text); overflow: hidden; isolation: isolate;
}
.story__stage { position: absolute; inset: 0; overflow: hidden; }
.story__poster, .story__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.story__poster img { width: 100%; height: 100%; object-fit: cover; }
.story__color { opacity: 0; }
.story__dim { opacity: 0; filter: grayscale(1) sepia(.7) hue-rotate(178deg) saturate(1.7) brightness(.47) contrast(1.1); transition: filter .45s var(--ease-out); will-change: opacity; }
.story.is-live .story__color { opacity: 1; }
.story.is-live .story__poster { visibility: hidden; }
.story.is-hot { cursor: pointer; }
.story.is-hot .story__dim { filter: grayscale(1) sepia(.7) hue-rotate(178deg) saturate(1.7) brightness(.3) contrast(1.1); }

/* Lesbarkeit: oben unter dem Header, unten und links für die Headline */
.story__shade {
  position: absolute; inset: 0; pointer-events: none; transition: opacity .6s var(--ease-out);
  background:
    linear-gradient(180deg, rgba(7,10,16,.6) 0%, rgba(7,10,16,0) 22%),
    linear-gradient(0deg, var(--bg-0) 0%, rgba(7,10,16,.78) 16%, rgba(7,10,16,0) 58%),
    linear-gradient(90deg, rgba(7,10,16,.55) 0%, rgba(7,10,16,0) 58%);
}
.story.is-scrolled .story__shade { opacity: .45; }

/* ---------- Brush-Labels direkt an der Leistung ---------- */
.story__tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.story__tag { position: absolute; left: 0; top: 0; will-change: transform; }
.story__tag .tape {
  display: block; white-space: nowrap; font-size: clamp(11px, .95vw, 15px); padding: .85em 1.6em;
  opacity: 0; transform: translate(-8%, -50%) scale(.5) rotate(-9deg); transform-origin: left center;
  transition: opacity .25s var(--ease-out), transform .3s var(--ease-out);
}
.story__tag.is-active .tape { opacity: 1; transform: translate(-8%, -50%) scale(1) rotate(-2.5deg); transition: opacity .4s var(--ease-out) .18s, transform .7s cubic-bezier(.2, 1.5, .4, 1) .18s; }
.story__tag:nth-child(even).is-active .tape { transform: translate(-8%, -50%) scale(1) rotate(2deg); transition-delay: .3s; }
.story.is-hot .story__tag.is-active .tape { transform: translate(-8%, -50%) scale(1.14) rotate(-1deg); transition: transform .45s cubic-bezier(.2, 1.5, .4, 1); }
.story__tag.is-off .tape { opacity: 0 !important; }

/* ---------- Texte: an der Inhaltsbreite der Seite ausgerichtet ---------- */
.story__ui { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.story__wrap { position: relative; height: 100%; }
.story [data-stop] {
  position: absolute; bottom: calc(var(--slant) + clamp(36px, 7vh, 84px)); pointer-events: none;
  opacity: 0; transform: translateY(26px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.story [data-stop].is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .6s var(--ease-out) .08s, transform .8s var(--ease-out) .08s, background .3s, box-shadow .3s; }

.story__intro { left: 0; max-width: min(900px, 78%); bottom: clamp(44px, 8vh, 96px) !important; }
.story__intro h1 { font-size: clamp(32px, 5.3vw, 94px); max-width: 14ch; text-shadow: 0 6px 40px rgba(0,0,0,.45); }
.story__intro h1 .line { display: block; overflow: hidden; }
.story__intro h1 .line > span { display: inline-block; }
.story__intro .lead { margin-top: 24px; max-width: 54ch; }
.story__intro .btn-row { margin-top: 32px; }

.story__step, .story__outro {
  width: var(--card-w); display: block; color: var(--text);
  background: rgba(11,15,23,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 8px; padding: clamp(22px, 2vw, 32px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}
.story__step[data-side="l"] { left: 0; }
.story__step[data-side="r"], .story__outro { right: 0; }
/* Karte 01: um die eigene Breite + 10 % nach rechts – höchstens bis vor die Fassadengrafik (liegt bei 60 % der Bildbreite) */
.story__step[data-shift] {
  --wrap-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  left: max(0px, min(calc(var(--card-w) * 1.1), calc(max(60vw, 50vw + 17.68svh) - 20px - var(--card-w) - var(--wrap-left))));
}
.story__step .n { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.story__step .n b { background: var(--tape); color: var(--ink); padding: 6px 10px; border-radius: 3px; font-weight: 700; }
.story__step h2 { font-size: clamp(24px, 2.5vw, 40px); margin: 16px 0 12px; line-height: 1; transition: color .3s; }
.story__step p { font-size: clamp(15px, 1.05vw, 17px); color: #d3d8e1; line-height: 1.5; }
.story__step .val { display: flex; gap: 28px; margin-top: 16px; }
.story__step .val b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.2vw, 34px); line-height: 1; color: var(--tape); }
.story__step .val > span { display: block; }
.story__step .val span span { display: block; font-weight: 700; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* Hover (per Skript, nur bei echter Mausbewegung): Karte hebt sich, Pfeil erscheint – ohne Text-CTA */
.story__more { position: absolute; right: 18px; top: 18px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--tape); color: var(--ink); opacity: 0; transform: scale(.4) rotate(-45deg); transition: opacity .3s, transform .45s cubic-bezier(.2, 1.5, .4, 1); }
.story__more svg { width: 20px; height: 20px; }
.story__step.is-active:focus-visible, .story__step.is-hot { background: rgba(21,29,42,.95); box-shadow: 0 50px 100px -30px rgba(0,0,0,.9), 0 0 0 3px var(--tape); transform: translateY(-6px); }
.story__step.is-active:focus-visible h2, .story__step.is-hot h2 { color: var(--tape); }
.story__step.is-active:focus-visible .story__more, .story__step.is-hot .story__more { opacity: 1; transform: none; }

.story__outro { width: min(520px, 38vw); }
.story__outro h2 { margin-top: 20px; font-size: clamp(28px, 3vw, 52px); line-height: .98; }
.story__outro p { margin-top: 14px; font-size: clamp(15px, 1.05vw, 17px); color: #d3d8e1; line-height: 1.5; }
.story__outro .btn-row { margin-top: 22px; gap: 10px; }
.story__outro .btn { padding: 16px 20px; font-size: 14px; min-height: 52px; }

/* ---------- Fortschritt (Linien sind hier erlaubt), liegt oberhalb der Schräge ---------- */
.story__prog { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--slant) + 14px); transform: translateX(-50%); display: flex; align-items: center; gap: 16px; opacity: 0; transition: opacity .4s; pointer-events: none; }
.story.is-scrolled .story__prog { opacity: 1; pointer-events: auto; }
.story.is-end .story__prog { opacity: 0; pointer-events: none; }
.story__count { font-weight: 700; font-size: 12px; letter-spacing: .12em; color: var(--text); min-width: 56px; }
.story__dots { display: flex; gap: 8px; }
.story__dot { width: 44px; height: 24px; position: relative; padding: 0; }
.story__dot::before, .story__dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 5px; margin-top: -2.5px; border-radius: 3px; }
.story__dot::before { background: rgba(255,255,255,.26); transition: background .3s; }
.story__dot i { background: var(--tape); transform: scaleX(0); transform-origin: left center; }
.story__dot:hover::before { background: rgba(255,255,255,.55); }

.story__go { position: absolute; z-index: 4; right: 0; bottom: clamp(44px, 8vh, 96px); width: 56px; height: 56px; display: grid; place-items: center; color: var(--ink); background: var(--tape); border-radius: 50%; pointer-events: auto; transition: opacity .4s, transform .4s var(--ease-out); }
.story__go svg { width: 26px; height: 26px; animation: chev 1.6s var(--ease-in-out) infinite; }
.story.is-scrolled .story__go { opacity: 0; transform: scale(.6); pointer-events: none; }

/* ---------- Mobil: Bühne oben, Text darunter ---------- */
@media (max-width: 760px) {
  .story { min-height: 560px; --card-w: 100%; }
  .story__stage { bottom: auto; height: 60svh; }
  .story__shade { background: linear-gradient(180deg, rgba(7,10,16,.6) 0%, rgba(7,10,16,0) 26%), linear-gradient(0deg, var(--bg-0) 0%, rgba(7,10,16,.7) 18%, rgba(7,10,16,0) 50%); }
  .story.is-scrolled .story__shade { opacity: .8; }
  .story [data-stop] { left: 0 !important; right: 0 !important; width: auto; max-width: none; bottom: calc(106px + env(safe-area-inset-bottom)) !important; }
  .story__intro h1 { font-size: clamp(30px, 9.1vw, 45px); }
  .story__intro .lead { margin-top: 14px; font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .story__intro .btn-row { margin-top: 18px; }
  .story__intro .btn--ghost { display: none; }
  .story__intro .btn--lg { padding: 16px 22px; font-size: 15px; min-height: 52px; }
  .story__step, .story__outro { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 20px; box-shadow: none; }
  .story__step h2 { font-size: clamp(22px, 6.4vw, 30px); margin: 12px 0 8px; }
  .story__step p { font-size: 15px; }
  .story__step .val { margin-top: 12px; }
  .story__more { opacity: 1; transform: none; width: 36px; height: 36px; right: 14px; top: 14px; }
  .story__outro h2 { font-size: clamp(26px, 7.6vw, 36px); margin-top: 14px; }
  .story__outro p { font-size: 15px; margin-top: 10px; }
  .story__outro .btn-row { margin-top: 16px; }
  .story__outro .btn--ghost { display: none; }
  .story__tag .tape { font-size: 11px; }
  .story__prog { left: 0; right: 0; bottom: calc(68px + env(safe-area-inset-bottom)); transform: none; justify-content: space-between; gap: 10px; }
  .story__dots { flex: 1; justify-content: flex-end; }
  .story__dot { width: 40px; }
  .story__count { min-width: 0; }
  .story__go { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .story__intro .lead { display: none; }
  .story__step p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ---------- Ohne Animation (reduced motion / kein JS-Pinning) ---------- */
.story--static { height: auto; min-height: 0; overflow: visible; }
.story--static .story__stage { position: relative; height: min(72svh, 56.5vw); min-height: 320px; }
.story--static .story__ui { position: relative; inset: auto; padding: 48px 0 calc(var(--pad) + var(--slant)); pointer-events: auto; }
.story--static .story__wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; height: auto; }
.story--static [data-stop] { position: static !important; opacity: 1; transform: none; pointer-events: auto; width: auto; max-width: none; }
.story--static .story__intro, .story--static .story__outro { grid-column: 1 / -1; }
.story--static .story__intro { margin-bottom: 24px; }
.story--static .story__outro { margin-top: 32px; }
.story--static .story__step, .story--static .story__outro { background: var(--bg-2); backdrop-filter: none; box-shadow: none; }
.story--static .story__tags, .story--static .story__prog, .story--static .story__go, .story--static .story__shade { display: none; }
@media (max-width: 760px) { .story--static .story__wrap { grid-template-columns: 1fr; } }

/* ---------- Illustrations-Szene (Startseite) ----------
   Die gezeichnete Szene ist hell. Abgedunkelt erscheint sie als Negativ in Blau (weiße Linien auf dunklem Grund),
   die jeweilige Leistung steht davor auf Papier und in Farbe. */
.story--sketch .story__dim { filter: grayscale(1) invert(1) sepia(.7) hue-rotate(178deg) saturate(1.7) brightness(.62) contrast(1.06); }
.story--sketch.is-hot .story__dim { filter: grayscale(1) invert(1) sepia(.7) hue-rotate(178deg) saturate(1.7) brightness(.42) contrast(1.06); }