/* Nach intro.css laden. Alle Inhalte bleiben ohne motion.js sichtbar. */

/* Der Displayinhalt verliert beim Annähern bewusst seine Lesbarkeit. */
.is-immersive .intro-screen > * {
  filter: blur(clamp(0px, calc((var(--intro-progress, 0) - .17) * 38px), 16px));
}
.intro-portal { display: none; }
.is-immersive .intro-portal { display: block; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: var(--intro-portal, 0); background: radial-gradient(ellipse at 65% 40%, #c8ae8685, transparent 70%), linear-gradient(135deg, #e8dcc7, #dfceb0 55%, #e5d8c2); }
.is-immersive .intro-device { opacity: 1; }
.is-immersive .intro-scene {
  opacity: clamp(0, calc((.99 - var(--intro-progress, 0)) / .06), 1);
}

/* Paket-Unboxing: echte Preiskarten, keine zweite Preisübersicht. */
.package-stage { position: relative; isolation: isolate; }
.package-case { display: none; }
.package-stage .pricing-grid { position: relative; }

@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .package-stage.is-unboxing .pricing-grid {
    clip-path: inset(0 -40px calc(100% - var(--pack-window, 100%)) -40px);
    perspective: 1400px;
  }
  html:not([data-motion="off"]) .package-stage.is-unboxing .package-case {
    display: block;
    position: absolute;
    z-index: 4;
    top: 80px;
    left: 50%;
    width: min(62%, 650px);
    height: 160px;
    pointer-events: none;
    transform: translateX(-50%) rotateY(var(--case-yaw, 0deg));
    perspective: 1000px;
    opacity: var(--case-opacity, 1);
  }
  .package-case-back {
    position: absolute;
    inset: 18px 12px 0;
    border: 1px solid #75603f;
    border-radius: 14px;
    background: linear-gradient(160deg, #7c6649, #302a21 65%);
    box-shadow: 0 25px 40px #46321c24;
  }
  .package-case-front {
    position: absolute;
    inset: 50px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border: 1px solid #c9b691;
    border-radius: 4px 4px 15px 15px;
    color: #4d3e29;
    background: linear-gradient(120deg, #e6d7be, #cbb18a);
    box-shadow: inset 0 1px #fff5df, 0 16px 35px #62472620;
    transform: translateY(var(--case-drop, 0px));
  }
  .package-case-front strong { font: 600 18px/1 var(--font); letter-spacing: -.04em; }
  .package-case-front span { font: 500 9px/1.6 var(--font); letter-spacing: .12em; text-align: right; }
  .package-case-lid {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto;
    height: 76px;
    display: grid;
    place-items: center;
    border: 1px solid #d3bd97;
    border-radius: 15px 15px 5px 5px;
    color: #59462a;
    background: linear-gradient(150deg, #f0e5d0, #d2bb96);
    box-shadow: 0 8px 12px #44301b20, inset 0 1px #fff8e9;
    transform-origin: 50% 0;
    transform: translateY(var(--case-lift, 0px)) rotateX(var(--case-angle, 0deg));
    backface-visibility: hidden;
  }
  .package-case-lid span { font: 500 10px/1 var(--font); letter-spacing: .2em; }
  html:not([data-motion="off"]) .package-stage.is-unboxing .price-card {
    z-index: var(--pack-layer, 2);
    opacity: var(--pack-opacity, 1);
    transform: translate3d(var(--pack-x, 0px), var(--pack-y, 0px), var(--pack-z, 0px))
      rotateY(var(--pack-yaw, 0deg)) rotate(var(--pack-rotation, 0deg)) scale(var(--pack-scale, 1));
    transform-origin: 50% 0;
    clip-path: inset(0 0 var(--pack-mask, 0%) 0 round 26px);
    transition: none;
  }
}

.package-case-halo { position: absolute; inset: -140px -65px -100px; border-radius: 50%; background: radial-gradient(ellipse, #e8cd936b, #c6a16424 40%, transparent 70%); transform: scale(calc(.8 + var(--case-glow, 0) * .5)); opacity: var(--case-glow, 0); }
.package-preview { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 24px; }
.package-preview > span { color: #6c583c; font: 500 9px/1.6 var(--font); letter-spacing: .12em; }
.package-preview button { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 15px; border: 1px solid #ad9775; border-radius: 99px; background: #eadcc5; color: #51412d; font: 500 11px/1.3 var(--font); cursor: pointer; }
.package-preview button span { font-size: 18px; }
.package-preview button:focus-visible { outline: 3px solid #80622d; outline-offset: 4px; }

/* Ein Modellwechsel, keine versteckten monatlichen Kosten im Einmalprojekt. */
.purchase-entry { display: inline-flex; gap: 14px; margin-top: 24px; color: #66533c; font-size: 13px; text-underline-offset: 5px; }
.purchase-entry:hover { text-decoration: underline; }
.pricing-switch { display: flex; width: fit-content; max-width: 100%; gap: 5px; margin: 12px auto 34px; padding: 6px; border: 1px solid #b9a484; border-radius: 100px; background: #d5c5aa75; box-shadow: inset 0 1px 3px #62482910; }
.pricing-switch button { border: 0; padding: 17px 28px; border-radius: 100px; color: #574733; background: transparent; cursor: pointer; font: 500 14px/1.3 var(--font); transition: background .25s, color .25s, box-shadow .25s; }
.pricing-switch button[aria-selected="true"] { color: #faf3e8; background: #2c2924; box-shadow: 0 5px 14px #4b392929; }
.pricing-switch button span { margin-left: 8px; }
.pricing-switch button small { display: block; margin-top: 5px; font-size: 9px; line-height: 1.5; font-weight: 400; }
.oneoff-entry { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 28px; margin-bottom: 22px; border: 1px solid #b9a484; border-radius: 19px; background: linear-gradient(120deg, #ecdfc9, #e0ccaa); color: #4b3d29; text-decoration: none; }
.oneoff-entry strong { display: block; font-size: 15px; font-weight: 550; letter-spacing: -.02em; }
.oneoff-entry small { display: block; max-width: 580px; margin-top: 7px; color: #65543e; font-size: 12px; line-height: 1.65; }
.oneoff-entry-action { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; font-size: 12px; }
.oneoff-entry-action i { font-style: normal; font-size: 20px; }
.oneoff-entry:hover { border-color: #7e6038; }
.oneoff-entry:focus-visible { outline: 3px solid #80622d; outline-offset: 4px; }
.pricing-switch button:focus-visible, .scene-controls button:focus-visible { outline: 3px solid #80622d; outline-offset: 4px; }
.model-label { margin: 0 0 22px; color: #655039; font: 600 10px/1.5 var(--font); letter-spacing: .14em; }
.pricing-panel { scroll-margin-top: 110px; }
.pricing-panel:focus-visible { outline: 2px solid #80622d; outline-offset: 8px; }
.purchase-panel { margin-top: 54px; }
.story-ready .purchase-panel { margin-top: 0; }
.purchase-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin: 0 0 36px; }
.purchase-intro h3 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.12; letter-spacing: -.05em; }
.purchase-intro > p { margin: 0; color: #645848; font-size: 15px; line-height: 1.75; }
.purchase-intro-caption { margin: 20px 0 0; color: #645848; font-size: 14px; line-height: 1.7; max-width: 340px; }
.purchase-explanation { max-width: 840px; margin: 0 0 36px; color: #645848; font-size: 14px; line-height: 1.8; }
.oneoff-object { position: relative; justify-self: center; width: min(100%, 340px); height: 300px; perspective: 1200px; }
.oneoff-sheet { position: absolute; inset: 40px 32px 24px; padding: 24px; border: 1px solid #b39b76; border-radius: 15px; transform-origin: 50% 95%; }
.oneoff-sheet > span { display: block; font-size: 7px; letter-spacing: .16em; font-weight: 600; }
.sheet-back { background: #d5bd98; color: #635035; transform: translate(-45px, -20px) rotate(-13deg); }
.sheet-back i { display: block; height: 30px; width: 75%; margin-top: 18px; border: 1px solid #a88c65; border-radius: 6px; }
.sheet-middle { background: linear-gradient(135deg, #c8ab7d, #ad8a57); color: #382a17; transform: translate(48px, -5px) rotate(14deg); }
.sheet-middle b { display: block; margin-top: 30px; font-size: 23px; line-height: 1.2; letter-spacing: -.04em; }
.sheet-front { background: linear-gradient(140deg, #f0e5d0, #deccac); color: #483720; box-shadow: 0 20px 34px #55402821; }
.sheet-front > strong { display: block; margin-top: 24px; font: 500 31px/1.07 var(--font); letter-spacing: -.055em; }
.sheet-front em { color: #80602f; font-style: normal; }
.sheet-front small { display: block; margin-top: 25px; font-size: 7px; letter-spacing: .1em; }
.purchase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.purchase-card .purchase-price { margin: 28px 0 22px; font-size: clamp(26px, 2.8vw, 37px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.purchase-price small { display: block; margin-top: 16px; font-size: 9px; font-weight: 500; line-height: 1.5; letter-spacing: .08em; color: #6d5c44; }
.featured .purchase-price small { color: #d5c2a1; }
.purchase-card > p { min-height: 132px; }
.purchase-card ul { margin-bottom: 32px; }
.purchase-card .price-button { margin-top: auto; font-size: 12px; }
.purchase-terms { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; padding: 32px 0; margin-top: 30px; border-top: 1px solid #bca989; color: #584b3b; }
.purchase-terms span { font-size: 9px; font-weight: 600; letter-spacing: .12em; }
.purchase-terms h4 { margin: 15px 0 0; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -.035em; }
.purchase-terms p { margin: 0 0 12px; font-size: 13px; line-height: 1.8; }
.purchase-terms small { display: block; font-size: 11px; line-height: 1.7; }

/* Die Szenen sind ohne JavaScript fertig zusammengesetzt und lesbar. */
.outcomes { overflow: visible; }
.scroll-scene { position: relative; margin-top: 60px; margin-bottom: 60px; }
.scene-sticky { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 40px; min-height: 620px; }
.scene-copy { position: relative; z-index: 2; }
.scene-copy h2 { margin: 20px 0 24px; font-size: clamp(32px, 3.7vw, 47px); line-height: 1.09; letter-spacing: -.055em; }
.scene-copy h2 em { color: #8a693d; font-style: normal; }
.scene-copy > p:not(.section-tag) { max-width: 400px; color: #645848; font-size: 15px; line-height: 1.8; }
.scene-copy > small { display: block; max-width: 390px; color: #70604b; font-size: 11px; line-height: 1.7; }
.scene-notes { list-style: none; padding: 0; margin: 28px 0 20px; }
.scene-notes li { display: flex; gap: 17px; align-items: baseline; margin-top: 14px; color: #483e32; font-size: 13px; line-height: 1.6; }
.scene-notes span { color: #8a693d; font-size: 10px; font-weight: 600; }
.scene-notes li.is-current { font-weight: 600; }
.scene-notes li.is-current span { border-bottom: 2px solid #8a693d; }
.scene-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 24px; }
.scene-controls button { border: 1px solid #bda788; border-radius: 100px; width: 44px; height: 44px; color: #625039; background: #eee3cf; font: 500 11px/1 var(--font); cursor: pointer; }
.scene-controls button[aria-pressed="true"] { color: #f5e9d4; background: #373028; border-color: #373028; }
.scene-controls .scene-resume { width: auto; padding: 0 14px; font-size: 10px; }
.scene-visual { position: relative; min-width: 0; display: grid; place-items: center; height: 580px; }
.scene-visual::before { content: ""; position: absolute; width: 100%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(ellipse, #b6996a29, #d9c7a916 50%, transparent 72%); pointer-events: none; }
.demo-toolbar { display: flex; height: 38px; padding: 0 17px; align-items: center; justify-content: space-between; border-bottom: 1px solid #88724f26; color: #66563e; }
.demo-toolbar > span { display: flex; gap: 4px; }
.demo-toolbar i { width: 5px; height: 5px; border-radius: 50%; background: #b8a586; }
.demo-toolbar small { font-size: 7px; font-weight: 600; letter-spacing: .12em; }
.demo-toolbar b { font-size: 12px; font-weight: 400; }
.assembly-stack { position: relative; width: 92%; max-width: 510px; aspect-ratio: 1.22; perspective: 1300px; }
.assembly-sleeve { display: none; }
.assembly-sleeve-front, .assembly-sleeve-lid { position: absolute; inset: 0; border: 1px solid #ad9167; border-radius: 12px; background: linear-gradient(125deg, #e1cba5, #c2a06e); }
.assembly-sleeve-front { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 24px; box-shadow: 0 12px 28px #55402525; }
.assembly-sleeve-front strong { font-size: 9px; letter-spacing: .13em; font-weight: 600; color: #4c391e; }
.assembly-sleeve-front span { color: #5d472a; font-size: 11px; }
.assembly-sleeve-lid { inset: -80px 0 auto; height: 90px; border-radius: 15px 15px 0 0; transform-origin: 50% 100%; transform: rotateX(var(--sleeve-angle, 0deg)); background: linear-gradient(135deg, #f0e0c2, #ceb186); }
.assembly-layer { position: absolute; inset: 0; border: 1px solid #bca685; border-radius: 18px; transform-origin: center; }
.layer-tech { background: linear-gradient(135deg, #f4ead8, #e5d5ba); box-shadow: 0 25px 55px #62452622; transform: translate3d(var(--tech-x, 0px), var(--tech-y, 0px), 0) rotateY(var(--layer-yaw, 0deg)) rotateX(var(--layer-tilt, 0deg)); }
.assembly-blueprint { position: absolute; inset: 65px 28px 28px; background: linear-gradient(#a88c6633 1px, transparent 1px), linear-gradient(90deg, #a88c6633 1px, transparent 1px); background-size: 25px 25px; opacity: var(--layer-spread, 0); }
.layer-design { background: rgb(237 223 196 / calc(var(--layer-spread, 0) * .9)); border-color: rgb(189 164 124 / var(--layer-spread, 0)); transform: translate3d(var(--design-x, 0px), var(--design-y, 0px), 0) rotateY(var(--layer-yaw, 0deg)) rotateX(var(--layer-tilt, 0deg)); }
.assembly-art { position: absolute; right: 22px; top: 64px; bottom: 22px; width: 37%; overflow: hidden; border-radius: 100px 100px 12px 12px; background: linear-gradient(145deg, #d4b986, #907449); }
.assembly-art i { position: absolute; width: 90%; height: 83%; border-radius: 100%; border: 1px solid #f6e6c89c; transform: rotate(-25deg); }
.assembly-art i:nth-child(1) { left: 25%; top: -20%; background: #f3d8ab42; }
.assembly-art i:nth-child(2) { left: -35%; top: 20%; }
.assembly-art i:nth-child(3) { left: 15%; top: 60%; background: #77603940; }
.layer-content { border-color: transparent; background: transparent; transform: translate3d(var(--content-x, 0px), var(--content-y, 0px), 0) rotateY(var(--layer-yaw, 0deg)) rotateX(var(--layer-tilt, 0deg)); }
.assembly-content { padding: 76px 30px 25px; }
.assembly-content > small { font-size: 8px; font-weight: 600; letter-spacing: .12em; color: #705735; }
.assembly-content > strong { display: block; margin-top: 22px; font-size: clamp(32px, 3.7vw, 48px); letter-spacing: -.065em; line-height: 1.07; font-weight: 500; color: #332c22; }
.assembly-content > p { max-width: 160px; margin: 16px 0 22px; font-size: 10px; line-height: 1.6; color: #66523a; }
.assembly-content > span { display: inline-block; padding: 11px 17px; border-radius: 24px; color: #f8ecda; background: #373027; font-size: 9px; }
.layer-tag { position: absolute; bottom: -30px; left: 15px; border: 1px solid #b29b7a; padding: 7px 12px; border-radius: 100px; background: #eadcc3; color: #665035; font-size: 8px; letter-spacing: .1em; opacity: var(--layer-spread, 0); }
.layer-design .layer-tag { bottom: auto; top: -30px; right: 12px; left: auto; }
.layer-content .layer-tag { bottom: auto; top: -30px; }
.assembly-seal { position: absolute; bottom: 20px; display: flex; align-items: center; gap: 16px; font-size: 8px; letter-spacing: .14em; color: #685333; }
.assembly-seal span { font-size: 14px; color: #a28658; }
.care-browser { position: relative; width: 83%; max-width: 430px; border: 1px solid #b9a17a; border-radius: 19px; overflow: hidden; background: linear-gradient(140deg, #f6eddc, #e7d7bb); box-shadow: 0 26px 65px #5a3f2024; transform: perspective(1200px) rotateY(var(--care-yaw, 0deg)) rotateX(var(--care-tilt, 0deg)); }
.care-preview { padding: 26px; }
.care-preview > small { display: block; font-size: 7px; letter-spacing: .09em; line-height: 1.6; color: #786342; }
.care-preview > strong { display: block; margin-top: 12px; font-size: 39px; font-weight: 500; line-height: 1; letter-spacing: -.06em; color: #352e23; }
.care-picture { position: relative; height: 115px; overflow: hidden; border-radius: 10px; margin-top: 20px; background: #bcac91; }
.care-picture-before, .care-picture-after { position: absolute; inset: 0; }
.care-picture-before { background: linear-gradient(145deg, #bba98c, #e3d5bd); }
.care-picture-after { background: radial-gradient(ellipse at 78% 95%, #695339 0 22%, transparent 22.5%), radial-gradient(ellipse at 45% 110%, #ba9461 0 48%, transparent 48.5%), linear-gradient(140deg, #e9d7b7, #c0a170); opacity: var(--care-image, 1); transform: scale(var(--care-image-scale, 1)); }
.care-picture > span { position: absolute; top: 15px; left: 15px; max-width: 125px; font-size: 10px; line-height: 1.5; font-weight: 500; color: #493823; }
.care-new-service { position: relative; margin-top: 12px; padding: 15px 18px; border: 1px solid #c8b392; border-radius: 10px; background: #f0e4cf; opacity: var(--care-service, 1); transform: translateY(var(--care-service-y, 0px)); }
.care-new-service > span { display: block; font-size: 7px; letter-spacing: .1em; color: #745b3b; }
.care-new-service strong { display: block; margin-top: 8px; color: #51402b; font-size: 15px; line-height: 1.2; font-weight: 500; letter-spacing: -.03em; }
.care-new-service i { position: absolute; top: 35px; right: 20px; font-style: normal; color: #8c6a3b; }
.care-cta { display: flex; justify-content: space-between; margin-top: 12px; padding: 15px 18px; border-radius: 25px; background: #302a22; color: #f8edd8; font-size: 10px; opacity: var(--care-contact, 1); transform: translateY(var(--care-contact-y, 0px)) scale(var(--care-contact-scale, 1)); }
.care-update { position: absolute; bottom: 4px; right: 3%; display: flex; align-items: center; gap: 10px; padding: 15px 20px; border: 1px solid #bea584; border-radius: 50px; background: #f1e5d0; color: #5c472f; box-shadow: 0 12px 30px #5c412218; font-size: 10px; transform: translateY(var(--care-contact-y, 0px)); opacity: var(--care-contact, 1); }
.care-update i { width: 6px; height: 6px; border-radius: 100%; background: #8a7147; }
.care-update b { margin-left: 6px; font-weight: 400; }
.scene-manual .assembly-layer, .scene-manual .care-browser,
.scene-manual .care-picture-after, .scene-manual .care-new-service,
.scene-manual .care-cta, .scene-manual .care-update { transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .65s ease, background .65s ease, border-color .65s ease; }
.scene-manual .layer-tag, .scene-manual .assembly-blueprint { transition: opacity .6s ease; }

@media (min-width: 901px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]).story-ready .assembly-sleeve { display: block; position: absolute; z-index: 5; left: -3%; right: -3%; bottom: -30px; height: 145px; pointer-events: none; transform: translateY(var(--sleeve-drop, 0px)); opacity: var(--sleeve-opacity, 0); }
  html:not([data-motion="off"]).story-ready .scroll-scene { min-height: 1200px; height: calc(100svh + 620px); }
  html:not([data-motion="off"]).story-ready .scene-sticky { position: sticky; top: 90px; height: calc(100svh - 100px); min-height: 590px; max-height: 820px; }
}
@media (max-width: 900px) {
  .oneoff-entry { align-items: flex-start; flex-direction: column; gap: 14px; padding: 20px; }
  .oneoff-entry-action { font-size: 11px; }
  .pricing-switch button { padding: 15px 20px; font-size: 12px; }
  .purchase-intro, .purchase-terms { grid-template-columns: 1fr; gap: 22px; }
  .purchase-grid { grid-template-columns: 1fr; }
  .purchase-card > p { min-height: 0; }
  .purchase-card .purchase-price { font-size: 36px; }
  .scene-sticky { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .scene-copy h2 { font-size: clamp(31px, 6vw, 43px); }
  .scene-copy > p:not(.section-tag), .scene-copy > small { max-width: 600px; }
  .scene-visual { width: 100%; max-width: 620px; margin-inline: auto; }
  .assembly-visual { height: 500px; }
  .assembly-stack { max-width: 490px; }
  .assembly-content > strong { font-size: 42px; }
  .scroll-scene { margin-top: 36px; margin-bottom: 40px; }
}
@media (max-width: 480px) {
  .oneoff-object { height: 275px; width: min(100%, 280px); }
  .oneoff-sheet { inset: 38px 30px 18px; padding: 20px; }
  .sheet-back { transform: translate(-18px, -15px) rotate(-8deg); }
  .sheet-middle { transform: translate(18px, -3px) rotate(8deg); }
  .sheet-front > strong { font-size: 28px; }
  .purchase-card .price-button { font-size: 11px; }
  .pricing-switch { width: 100%; }
  .pricing-switch button { flex: 1; padding: 14px 9px; font-size: 11px; }
  .pricing-switch button span { display: none; }
  .purchase-entry { font-size: 11px; line-height: 1.7; }
  .purchase-terms { padding-top: 24px; }
  .assembly-visual { height: 355px; }
  .assembly-stack { width: 100%; aspect-ratio: 1.13; }
  .assembly-content { padding: 60px 22px 20px; }
  .assembly-content > strong { font-size: 33px; margin-top: 14px; }
  .assembly-content > p { max-width: 130px; font-size: 9px; margin: 12px 0 15px; }
  .assembly-art { right: 16px; width: 34%; top: 58px; }
  .assembly-seal { font-size: 7px; gap: 10px; bottom: 5px; }
  .care-visual { height: 570px; }
  .care-browser { width: 100%; }
  .care-preview { padding: 23px; }
  .care-update { right: 3%; bottom: 2px; font-size: 9px; padding: 14px 16px; }
}

/* Kurze Einzelauftritte, danach bleiben Text und Bedienung ruhig. */
html:not([data-motion="off"]) .story-reveal {
  transition: opacity .75s ease, transform .95s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
html:not([data-motion="off"]) .story-reveal.story-pending {
  opacity: 0;
  transform: perspective(1200px) translate3d(0, 60px, 0) rotateX(8deg) scale(.96);
}
html:not([data-motion="off"]) .story-reveal[data-story="step"].story-pending {
  transform: perspective(1200px) translate3d(0, 36px, 0) rotateY(-9deg);
}
.story-reveal:focus-within {
  opacity: 1 !important;
  transform: none !important;
}

/* Eine Linie führt sichtbar durch den Ablauf. */
.process-grid.story-process { position: relative; }
.story-process::before {
  content: "";
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #7e6034, #bea171);
  transform: scaleX(var(--process-progress, 1));
  transform-origin: left;
}

/* Leise Betonung des Stimm-Prinzips. */
.manifesto.story-statement h2 em { position: relative; z-index: 0; }
.story-statement h2 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -.06em -.03em;
  height: .15em;
  border-radius: 99px;
  background: #a07c454d;
  transform: scaleX(var(--statement-progress, 1));
  transform-origin: left;
}

/* Zusätzliche Scroll-Momente: Projektbox, Designebenen und räumliche Details. */
.process-case { display: none; }
.process-grid > article { display: flex; flex-direction: column; }
.process-grid > article > strong { position: static; margin-top: auto; padding-top: 24px; }
.process-grid.story-process > article { background: linear-gradient(135deg, #eaddc7, #e1cead); border: 1px solid #bca584; }
.manifesto { position: relative; isolation: isolate; overflow: hidden; }
.manifesto::before { content: ""; position: absolute; z-index: -1; top: -15%; left: 20%; width: 65%; height: 130%; border-radius: 50%; background: radial-gradient(ellipse, #b78f5233, #d9bf931c 45%, transparent 70%); pointer-events: none; }
.service-list .service { position: relative; }
.service-list .service::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, #97713c, #c7ac8177, transparent); transform-origin: left; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]).story-ready .sheet-back { transform: translate(calc(-18px - var(--depth-enter, 1) * 27px), calc(-8px - var(--depth-enter, 1) * 12px)) rotate(calc(-3deg - var(--depth-enter, 1) * 10deg)); }
  html:not([data-motion="off"]).story-ready .sheet-middle { transform: translate(calc(18px + var(--depth-enter, 1) * 30px), -5px) rotate(calc(3deg + var(--depth-enter, 1) * 11deg)); }
  html:not([data-motion="off"]).story-ready .sheet-front { transform: translateY(calc(var(--depth-drift, 0px) * -.45)); }
  html:not([data-motion="off"]).story-ready [data-scroll-depth="outcomes"] .clarity-demo { transform: translateY(var(--depth-drift, 0px)) rotate(calc((1 - var(--depth-enter, 1)) * -14deg)); }
  html:not([data-motion="off"]).story-ready [data-scroll-depth="outcomes"] .search-demo { transform: translateX(calc(var(--depth-drift, 0px) * -.65)); }
  html:not([data-motion="off"]).story-ready [data-scroll-depth="outcomes"] .pulse-demo { transform: translateY(calc(var(--depth-drift, 0px) * -.55)); }
  html:not([data-motion="off"]).story-ready [data-scroll-depth="outcomes"] .conversion-demo > div { transform: translateY(calc(var(--depth-drift, 0px) * var(--drift-factor, 1))); }
  .conversion-demo > div:nth-of-type(2) { --drift-factor: -.5; }
  .conversion-demo > div:nth-of-type(3) { --drift-factor: .25; }
  html:not([data-motion="off"]).story-ready .manifesto::before { transform: translateX(calc(var(--depth-drift, 0px) * 4)); }
  html:not([data-motion="off"]).story-ready .service-list .service::after { transform: scaleX(var(--depth-enter, 1)); }
  html:not([data-motion="off"]).story-ready .service-list .service > div { transform: translateX(calc((1 - var(--depth-enter, 1)) * 26px)); }
  html:not([data-motion="off"]).story-ready .keyword-panel li { transform: translateX(calc((1 - var(--depth-enter, 1)) * var(--keyword-shift, 22px))); }
  .keyword-panel li:nth-child(even) { --keyword-shift: -22px; }
}
@media (min-width: 1101px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]).story-ready .story-process > article { position: relative; z-index: 2; opacity: 1; transform: translate(var(--step-x, 0px), var(--step-y, 0px)) rotate(var(--step-rotate, 0deg)); transition: box-shadow .3s; }
  html:not([data-motion="off"]).story-ready .process-case { display: block; position: absolute; z-index: 3; top: 95px; left: 20%; right: 20%; height: 150px; pointer-events: none; opacity: clamp(0, calc((.52 - var(--process-progress, 1)) / .22), 1); perspective: 1000px; }
  .process-case div { position: absolute; inset: 38px 0 0; display: flex; align-items: center; justify-content: space-between; padding: 22px; color: #634928; border: 1px solid #b99a6c; border-radius: 4px 4px 14px 14px; background: linear-gradient(120deg, #e6d2af, #c7a679); box-shadow: 0 18px 35px #5f431b22; }
  .process-case strong { font: 600 12px/1.3 var(--font); letter-spacing: .05em; }
  .process-case span { font: 500 8px/1.5 var(--font); letter-spacing: .1em; }
  .process-case i { position: absolute; inset: -20px 0 auto; height: 72px; border: 1px solid #c6aa80; border-radius: 12px 12px 3px 3px; background: linear-gradient(125deg, #efe2c9, #d4b98e); transform-origin: top; transform: translateY(calc(var(--process-progress, 1) * -110px)) rotateX(calc(var(--process-progress, 1) * -125deg)); }
}
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]).story-ready .sheet-back { transform: translate(-18px, -15px) rotate(calc(-3deg - var(--depth-enter, 1) * 5deg)); }
  html:not([data-motion="off"]).story-ready .sheet-middle { transform: translate(18px, -3px) rotate(calc(3deg + var(--depth-enter, 1) * 5deg)); }
}

@media (max-width: 900px) {
  .story-process::before { display: none; }
  html:not([data-motion="off"]) .story-reveal.story-pending,
  html:not([data-motion="off"]) .story-reveal[data-story="step"].story-pending {
    transform: translateY(24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-immersive .intro-screen > * { filter: none; }
  .package-case { display: none !important; }
  .package-stage .price-card, .story-reveal.story-pending {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .story-process::before, .story-statement h2 em::after { transform: none; }
}
html[data-motion="off"] .story-reveal.story-pending {
  opacity: 1;
  transform: none;
}

/* Druckansicht: kein dekorativer Einstieg und keine versteckten Karten. */
@media print {
  .process-case, .assembly-sleeve, .package-preview { display: none !important; }
  .story-process > article { transform: none !important; }
  .pricing-switch, .scene-controls, .scroll-scene { display: none !important; }
  .pricing-panel[hidden] { display: block !important; }
  .laptop-intro, .package-case { display: none !important; }
  .package-stage .pricing-grid { clip-path: none !important; }
  .package-stage .price-card, .story-reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}