/* Each topic has its own visual rhythm, with ordinary vertical scrolling. */
.focus-section-divider{height:clamp(32px,4vw,56px);background:linear-gradient(110deg,#edf7f5,#faf7f2)}
.focus-scene-art .scene-fine,.focus-scene-art .scene-dashed,.focus-scene-art .scene-bright,.focus-scene-art .scene-grid,.focus-scene-art .scene-track-fill{fill:none;stroke:#7abbbe;stroke-width:1.2}
.focus-scene-art .scene-grid{opacity:.15}.focus-scene-art .scene-dashed{stroke-dasharray:3 8;opacity:.65}
.focus-scene-art .scene-bright{stroke:#83ded3;stroke-width:2}.scene-soft-fill{fill:#559d9930}
.scene-bright-fill{fill:#a0f2e3}.scene-coral-fill{fill:#efaa8d}.scene-targets{fill:#80d4ce;stroke:#143b47;stroke-width:3}
.scene-horizon{transform-origin:200px 160px;transform:rotate(calc(14deg - var(--story-progress,0)*14deg))}
#inhalt .story-balance.story-active .owned-story-panel{border-radius:180px 180px 24px 24px;padding-top:30px;text-align:center;background:radial-gradient(circle at 50% 32%,#20515d,#0b2635 75%)}
#inhalt .story-balance .owned-story-art{max-height:310px}

/* Vision: the gaze travels across a field; the scene sits on the right. */
#inhalt .story-vision.story-active{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
#inhalt .story-vision.story-active .owned-story-panel{grid-column:2;grid-row:1;border-radius:32px;background:radial-gradient(ellipse at 85% 20%,#2b555b,#102631 74%);border-color:#6bbdb64a}
#inhalt .story-vision.story-active .owned-story-steps{grid-column:1;grid-row:1}
.scene-lens-fill{fill:#23535cc9}
.scene-focus{transform:translate(calc(-70px + var(--story-progress,0)*140px),calc(30px - var(--story-progress,0)*60px))}
#inhalt .story-vision .owned-story-art{max-height:340px}

/* Pain: a lit path connects alternating original cards, no repeated side panel. */
#inhalt .story-timeline.story-active{display:block}
#inhalt .story-timeline.story-active .owned-story-panel{display:none}
#inhalt .story-timeline.story-active .owned-story-steps{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px 72px;padding:10px 0}
#inhalt .story-timeline.story-active .owned-story-steps::before,#inhalt .story-timeline.story-active .owned-story-steps::after{content:"";display:block;position:absolute;left:50%;top:0;width:2px;height:100%;background:#c6dddd;transform:translateX(-1px)}
#inhalt .story-timeline.story-active .owned-story-steps::after{background:#28867e;transform:translateX(-1px) scaleY(var(--story-progress,0));transform-origin:top}
#inhalt .story-timeline.story-active .owned-story-step{grid-column:1;grid-row:calc(var(--step-index) + 1);min-height:185px;border:1px solid #d4e5e5;box-shadow:0 14px 30px #23464a08}
#inhalt .story-timeline.story-active .owned-story-step:nth-child(even){grid-column:2}
#inhalt .story-timeline.story-active .owned-story-step.story-current{border-color:#499f95;box-shadow:0 16px 40px #2475701c}

/* Performance: a wide reaction track stays above the changing chapters. */
#inhalt .story-runway.story-active{display:block}
#inhalt .story-runway.story-active .owned-story-panel{top:12px;z-index:3;display:grid;grid-template-columns:1.6fr 1fr;align-items:center;gap:20px;border-radius:18px;padding:22px 28px;margin-bottom:42px;background:#102c39}
#inhalt .story-runway .owned-story-art{width:100%;max-height:150px}
#inhalt .story-runway .owned-story-readout{min-height:0;padding:0}
#inhalt .story-runway .owned-story-label{font-size:26px;margin-top:7px}
.story-runway .owned-story-dots{grid-column:1/-1;padding:0}
.scene-track-fill{stroke:#82d9d0!important;stroke-width:3!important;stroke-dasharray:100;stroke-dashoffset:var(--story-trace,100)}
.scene-runner{transform:translateX(calc(var(--story-progress,0)*700px))}
#inhalt .story-runway.story-active .owned-story-steps{width:min(100%,820px);margin:auto;gap:44px}
#inhalt .story-runway.story-active .owned-story-step{min-height:220px;padding:38px 36px 38px 88px}

/* Regulation: separated translucent layers gradually settle into alignment. */
#inhalt .story-layers.story-active .owned-story-panel{background:radial-gradient(ellipse at 25% 30%,#d9efeb,#f8faf9 85%);border:1px solid #c3deda;box-shadow:none;border-radius:50% 50% 22px 22px;padding-top:25px}
#inhalt .story-layers .owned-story-number{color:#2b7672}
#inhalt .story-layers .owned-story-label{color:#193f4a}
.story-layers .owned-story-dots span{background:#c6ddda}.story-layers .owned-story-dots .story-dot-done{background:#348d82}
.scene-layer{fill:#348c8610;stroke:#35877f;stroke-width:1.5;transform-origin:200px 160px}
.scene-layer path{fill:none}.layer-one{opacity:.35;transform:translate(calc(-38px + var(--story-progress,0)*38px),calc(-22px + var(--story-progress,0)*22px)) rotate(calc(-16deg + var(--story-progress,0)*16deg))}
.layer-two{opacity:.55;transform:translate(calc(35px - var(--story-progress,0)*35px),calc(25px - var(--story-progress,0)*25px)) rotate(calc(14deg - var(--story-progress,0)*14deg))}
.layer-three{fill:#499e9730;stroke-width:2}

/* Learning: the four original cards build up as a quiet stack. */
#inhalt #klk-inhalte .klk-inhalte__focus{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1100px){#inhalt #klk-inhalte .klk-inhalte__focus{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#inhalt #klk-inhalte .klk-inhalte__focus{grid-template-columns:1fr}}
#inhalt #klk-verstehen{padding-block:clamp(44px,5vw,64px)}
#inhalt .story-stack.story-active{display:block;margin:28px 0}
#inhalt .story-stack.story-active .owned-story-panel{display:none}
#inhalt .story-stack.story-active .owned-story-steps{display:block;max-width:850px;margin:auto;padding:0 0 20px}
#inhalt .story-stack.story-active .owned-story-step{position:sticky;top:calc(20px + var(--step-index)*14px);display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px 18px;align-content:start;align-items:center;min-height:0;padding:26px 30px;margin-bottom:clamp(24px,4vh,40px);background:#f3f9f7;border:1px solid #c8deda;border-top:4px solid #45958b;border-radius:22px;box-shadow:0 -10px 30px #183b4710,0 18px 50px #183b4712}
#inhalt #klk-verstehen .klk-verstehen__card h3{font-size:clamp(22px,2.3vw,28px)!important;line-height:1.25!important;margin:0}
#inhalt #klk-verstehen .klk-verstehen__card p{font-size:clamp(17px,1.7vw,20px)!important;line-height:1.6!important}
#inhalt .story-stack.story-active .owned-story-step>h3{grid-column:2}
#inhalt .story-stack.story-active .owned-story-step>p{grid-column:2}
#inhalt .story-stack.story-active .owned-story-step:nth-child(2){background:#edf5f6;border-top-color:#527b94}
#inhalt .story-stack.story-active .owned-story-step:nth-child(3){background:#faf5ef;border-top-color:#c59d80}
#inhalt .story-stack.story-active .owned-story-step:nth-child(4){background:#e9f3ef;border-top-color:#358879}
#inhalt .story-stack.story-active .owned-story-step:last-child{margin-bottom:0}
#inhalt .story-stack.story-active .owned-story-step>span{position:static;margin:0;grid-column:1;grid-row:1}

@media(max-width:760px){
 #inhalt .story-balance.story-active .owned-story-panel,#inhalt .story-vision.story-active .owned-story-panel,#inhalt .story-layers.story-active .owned-story-panel{border-radius:18px;padding:12px;grid-template-columns:90px 1fr;text-align:left}
 #inhalt .story-balance .owned-story-art,#inhalt .story-vision .owned-story-art,#inhalt .story-layers .owned-story-art{height:90px}
 #inhalt .story-timeline.story-active .owned-story-steps{grid-template-columns:1fr;gap:24px;padding:0 0 0 22px}
 #inhalt .story-timeline.story-active .owned-story-steps::before,#inhalt .story-timeline.story-active .owned-story-steps::after{left:0}
 #inhalt .story-timeline.story-active .owned-story-step:nth-child(n){grid-column:1;min-height:190px}
 #inhalt .story-runway.story-active .owned-story-panel{grid-template-columns:1fr;gap:10px;top:8px;padding:16px 18px;margin-bottom:28px}
 #inhalt .story-runway .owned-story-art{height:48px}
 #inhalt .story-runway .owned-story-readout{display:flex;gap:14px;align-items:center;min-height:0;padding:0}
 #inhalt .story-runway .owned-story-label{font-size:21px;margin:0}
 #inhalt .story-runway.story-active .owned-story-step{padding:68px 24px 30px;min-height:210px}
 #inhalt .story-stack.story-active .owned-story-step{top:calc(12px + var(--step-index)*10px);padding:20px;gap:14px 12px;border-radius:17px}
 #inhalt .story-stack.story-active .owned-story-step>p{grid-column:1/-1}
}
@media(max-height:600px){#inhalt .story-stack.story-active .owned-story-step,#inhalt .story-runway.story-active .owned-story-panel{position:relative;top:0}}
@media(prefers-reduced-motion:reduce){.focus-scene-art *{transform:none!important}#inhalt .story-active .owned-story-panel{display:none}#inhalt .story-stack.story-active .owned-story-step{position:relative;top:0;margin-bottom:20px}}
