/* ═════════════════════════════════════════════════════════════════
   Story3D · gemeinsames Stylesheet (Startseite + 3D-Webdesign-Seite)
   Aufbau: .story3d  →  .story3d__stage (sticky, Canvas)  +  n × .story3d__step (sticky Text).
   Der Canvas liegt IN der Story (eigener Stacking-Kontext, z-index 0), der Text darüber (z 2).
   Dadurch hängt die Sichtbarkeit nie von html-/body-Hintergründen ab (frühere Ursache für den
   unsichtbaren Canvas: z-index:-1 hinter deckendem body). Text steht links auf ruhigem Grund,
   das Motiv rechts (Hochformat: Motiv oben, Text unten) — Text und Partikel überlagern sich nie.
   ═════════════════════════════════════════════════════════════════ */
.story3d{position:relative;isolation:isolate;background:var(--bg,#0A0D0B);color:var(--cream,#EDEADD)}
.story3d__stage{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;pointer-events:none}
.story3d__canvas{display:block;width:100%;height:100%}
.story3d__step{position:relative;z-index:1;height:180vh;margin:0;padding:0}   /* 80vh gepinnt lesen + 100vh Übergabe an den nächsten Schritt */
.story3d--compact .story3d__step{height:140vh}
.story3d__stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:clip}   /* minmax(0,1fr): nowrap-Inhalt (Chips) darf den Textblock nie breiter als den Viewport ziehen */
.story3d__copy{position:relative;z-index:2;min-width:0;max-width:34rem;margin-left:clamp(24px,7vw,128px);padding-right:24px}
/* Lesbarkeits-Scrim hängt am Textblock (läuft mit ihm weg) — kein großer Vorhang, der beim Schrittwechsel das Motiv zudeckt */
.story3d__copy > *{position:relative;z-index:1}
.story3d__copy::before{content:"";position:absolute;z-index:0;pointer-events:none;top:-16vh;bottom:-16vh;left:calc(-1 * clamp(24px,7vw,128px));right:-16vw;
  background:linear-gradient(90deg,rgba(10,13,11,.92) 0%,rgba(10,13,11,.84) 60%,rgba(10,13,11,0) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.story3d__kicker{display:inline-flex;align-items:center;gap:.65em;font-weight:800;font-size:clamp(.9rem,1.6vw,1.2rem);letter-spacing:.13em;text-transform:uppercase;color:var(--lime,#B8E834);margin:0 0 1rem}
.story3d__kicker::before{content:"";width:5px;height:1.25em;border-radius:3px;background:var(--lime,#B8E834);box-shadow:0 0 18px rgba(184,232,52,.9)}
.story3d .story3d__display.story3d__display{text-transform:uppercase;line-height:.98;font-size:clamp(2.3rem,5.4vw,4.6rem);letter-spacing:.01em;margin:0;max-width:13ch;color:var(--cream,#EDEADD)}
/* Markenschrift: globale Regeln (`h3:not(.display):not(.hero-title):not([class*=brush])` mit !important, Spezifität 0,3,1) würden sie sonst überschreiben */
.story3d .story3d__display.story3d__display.story3d__display{font-family:'Anton','Oswald',Impact,sans-serif!important;font-weight:400!important}
.story3d .story3d__display .l{color:var(--lime,#B8E834)}.story3d .story3d__display .o{color:var(--orange,#FF8A1F)}
.story3d__lede{margin:1.1rem 0 0;color:rgba(237,234,221,.92);font-size:clamp(1rem,1.5vw,1.25rem);max-width:34ch}
.story3d__feats{list-style:none;margin:1.4rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.55rem}
.story3d__feats li{display:inline-flex;align-items:center;gap:.5em;padding:.5em 1.05em;border-radius:999px;border:1px solid rgba(184,232,52,.38);background:rgba(15,20,17,.72);font-weight:600;font-size:.92rem}
.story3d__feats li::before{content:"✓";color:var(--lime,#B8E834);font-weight:800}
.story3d__cta{display:inline-flex;align-items:center;gap:.55em;margin-top:1.5rem;padding:.9em 1.5em;min-height:48px;border-radius:12px;background:var(--lime,#B8E834);color:#142007;font-weight:800;text-decoration:none;box-shadow:0 8px 28px rgba(184,232,52,.18)}
.story3d__cta:hover{background:#c7f25a}
.story3d__cta:focus-visible{outline:3px solid var(--cream,#EDEADD);outline-offset:3px}
.story3d__note{margin:1.4rem 0 0;max-width:36ch;font-size:.95rem;color:rgba(237,234,221,.78)}.story3d__note b{color:var(--cream,#EDEADD)}
.story3d__poster{display:none}
/* Hochformat / schmal: Motiv oben, Text unten */
@media (max-aspect-ratio:23/20),(max-width:899px){
  .story3d__stick{align-items:end}
  .story3d__copy{margin:0;padding:0 20px calc(104px + env(safe-area-inset-bottom,0px));max-width:36rem}   /* unten Platz für Gehirnflug-Pille, Chat-Knopf und Mobil-Leiste */
  .story3d__copy::before{top:-22vh;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(10,13,11,.97) 0%,rgba(10,13,11,.9) 62%,rgba(10,13,11,0) 100%);-webkit-mask-image:none;mask-image:none}
  .story3d .story3d__display.story3d__display{font-size:clamp(1.8rem,8.2vw,2.9rem);max-width:16ch}
  .story3d__kevin{margin-top:1rem}.story3d__kevin p{font-size:.85rem}.story3d__kevin img{flex-basis:44px;width:44px;height:44px}
  .story3d__lede{margin-top:.8rem;font-size:1rem}
  .story3d__feats{margin:.9rem -20px 0 0;padding-right:20px;gap:.4rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}   /* eine Zeile, seitlich wischbar — alle Punkte bleiben erreichbar */
  .story3d__feats::-webkit-scrollbar{display:none}
  .story3d__feats li{flex:0 0 auto;font-size:.8rem;padding:.4em .85em}
  .story3d__cta{margin-top:1.1rem}
  .story3d__lede,.story3d__note,.story3d__kevin p{padding-right:76px}   /* Fließtext läuft nicht unter den Chat-Knopf (rechts unten) */
}
/* Fallback: statisches Partikelbild je Schritt, kein Pin (Reduced Motion, kein WebGL, schwaches Gerät, Kill-Switch, Context-Loss) */
.story3d.is-static .story3d__stage{display:none}
.story3d.is-static .story3d__step{height:auto}
.story3d.is-static .story3d__stick{position:relative;height:auto;min-height:100vh;min-height:100svh;overflow:visible}
.story3d.is-static .story3d__poster{display:block;position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:min(44vw,60vh);height:auto;aspect-ratio:1;z-index:0;opacity:.95}
@media (max-aspect-ratio:23/20),(max-width:899px){.story3d.is-static .story3d__poster{right:auto;left:50%;top:7vh;transform:translateX(-50%);width:min(72vw,40vh)}}
@media (prefers-reduced-motion:reduce){
  .story3d__stage{display:none}.story3d__step{height:auto}
  .story3d__stick{position:relative;height:auto;min-height:100vh;min-height:100svh;overflow:visible}
  .story3d__poster{display:block;position:absolute;right:6vw;top:50%;transform:translateY(-50%);width:min(44vw,60vh);height:auto;aspect-ratio:1;z-index:0;opacity:.95}
  .story3d__cta{transition:none}
}
@media (prefers-reduced-motion:reduce) and (max-aspect-ratio:23/20),(prefers-reduced-motion:reduce) and (max-width:899px){.story3d__poster{right:auto;left:50%;top:7vh;transform:translateX(-50%);width:min(72vw,40vh)}}
.story3d__kevin{display:flex;gap:.9rem;align-items:flex-start;margin:1.4rem 0 0;max-width:36ch}
.story3d__kevin img{flex:0 0 54px;width:54px;height:54px;border-radius:50%;object-fit:cover;border:2px solid var(--lime,#B8E834)}
.story3d__kevin p{margin:0;font-size:.95rem;color:rgba(237,234,221,.78)}.story3d__kevin b{color:var(--cream,#EDEADD)}

/* Robuster Text-Fallback: bleibt kompakt lesbar, wenn ein Story-Modul nicht geladen werden kann. */
.story3d:not(.is-live):not(.is-static) .story3d__stage{display:none}
.story3d:not(.is-live):not(.is-static) .story3d__step{height:auto}
.story3d:not(.is-live):not(.is-static) .story3d__stick{position:relative;height:auto;min-height:70vh;min-height:70svh;overflow:visible}
.story3d:not(.is-live):not(.is-static) .story3d__poster{display:none}

/* Prozess-Variante (3D-Webdesign-Seite): Liste statt Abschnitte, etwas kleinere Überschrift */
.story3d__steps{list-style:none;margin:0;padding:0}
.story3d--process .story3d__display.story3d__display{font-size:clamp(2.2rem,4.6vw,4rem);max-width:12ch}
@media (max-aspect-ratio:23/20),(max-width:899px){.story3d--process .story3d__display.story3d__display{font-size:clamp(1.9rem,8.6vw,3rem)}}

/* Pause-Schalter (WCAG 2.2.2): sitzt mitlaufend oben rechts unter der Kopfleiste; nur sichtbar, solange die Animation läuft oder bewusst pausiert ist */
.story3d__ctl{position:sticky;top:88px;height:0;z-index:6;display:flex;justify-content:flex-end;padding-right:16px;pointer-events:none}
.story3d__pause{pointer-events:auto;min-height:44px;padding:.55em 1.1em;border-radius:999px;border:1px solid rgba(237,234,221,.35);background:rgba(10,13,11,.84);color:var(--cream,#EDEADD);font:600 .78rem/1 Inter,system-ui,-apple-system,sans-serif;cursor:pointer}
.story3d__pause[hidden]{display:none}
.story3d__pause[aria-pressed=true]{border-color:var(--lime,#B8E834);color:var(--lime,#B8E834)}
.story3d__pause:hover{border-color:var(--lime,#B8E834)}
.story3d__pause:focus-visible{outline:3px solid var(--cream,#EDEADD);outline-offset:3px}