/* Fallstudien: gemeinsame Gestaltung aller Seiten unter /erfahrungen/<name>.
   Quelle: Claude Design, Fallstudie Christian Version 13 (20.10.2026). */
.fs-root a{color:#7E5A1E}.fs-root a:hover{color:#2A2620}
.kl-navlinks{display:flex}
@media (max-width: 900px){.kl-navlinks{display:none}}
.kl-chapters{scrollbar-width:none}
.kl-chapters::-webkit-scrollbar{display:none}
.kl-chap:hover{color:#2A2620}
.kl-focus:focus-visible{outline:2px solid #CDA04A;outline-offset:3px}
.kl-btn{transition:transform 250ms cubic-bezier(0.19,1,0.22,1),box-shadow 250ms}
.kl-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(205,160,74,0.35)}
.kl-btn .kl-arr{transition:transform 250ms}
.kl-btn:hover .kl-arr{transform:translateX(4px)}
.kl-strike{position:relative;display:inline-block}
.kl-strike::after{content:"";position:absolute;left:-3%;right:-3%;top:58%;height:0.07em;min-height:3px;background:#CDA04A;transform:scaleX(0);transform-origin:left center}
.is-revealed .kl-strike::after{animation:klStrike 700ms 800ms cubic-bezier(0.19,1,0.22,1) forwards}
.is-revealed .kl-in1{animation:klIn 1000ms 100ms cubic-bezier(0.19,1,0.22,1) both}
.is-revealed .kl-in2{animation:klIn 1000ms 350ms cubic-bezier(0.19,1,0.22,1) both}
.is-revealed .kl-in3{animation:klIn 1000ms 600ms cubic-bezier(0.19,1,0.22,1) both}
.is-revealed .kl-in4{animation:klIn 1000ms 900ms cubic-bezier(0.19,1,0.22,1) both}
.is-revealed .kl-calm{animation:klCalm 1100ms 1250ms cubic-bezier(0.19,1,0.22,1) both}
.kl-cue{animation:klBob 2200ms ease-in-out infinite}
.kl-swap{animation:klSwap 500ms cubic-bezier(0.19,1,0.22,1) both}
.kl-flow{stroke-dasharray:3 10;animation:klFlow 1300ms linear infinite}
.kl-htext{position:relative;z-index:2;max-width:1280px;margin:0 auto;box-sizing:border-box;padding:clamp(48px,6vw,88px) clamp(16px,5vw,64px) clamp(32px,4vw,48px)}
.kl-vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 28px;align-items:stretch}
@media (max-width: 860px){.kl-vgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width: 480px){.kl-vq{margin-left:0 !important}}
.kl-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 48px}
.kl-st{position:relative;padding-top:44px}
.kl-sdot{position:absolute;top:0;left:0}
.kl-vline{display:none}
.kl-stick{position:sticky;top:88px}
.kl-fan{position:relative;width:100%;aspect-ratio:16/10}
.kl-fan1{position:absolute;left:0;top:4%;width:46%;margin:0;transform:rotate(-4deg)}
.kl-fan2{position:absolute;right:0;top:22%;width:60%;margin:0;transform:rotate(3deg)}
.kl-wm{font-size:17px}
.kl-pills{display:grid;grid-template-columns:repeat(4,max-content);gap:8px}
.kl-card2{min-height:220px}
@media (max-width: 860px){.kl-stick{position:static}}
@media (max-width: 480px){.kl-hide-s{display:none}.kl-wm{font-size:15px}.kl-pills{grid-template-columns:repeat(2,minmax(0,1fr))}.kl-card2{min-height:0}}
@media (max-width: 760px){
.kl-hline{display:none}
.kl-vline{display:block}
.kl-g3{grid-template-columns:1fr;gap:36px}
.kl-st{padding-top:0;padding-left:40px}
.kl-sdot{top:5px}
.kl-fan{aspect-ratio:auto;display:flex;flex-direction:column;gap:32px}
.kl-fan1,.kl-fan2{position:relative;left:auto;right:auto;top:auto;width:92%}
.kl-fan2{align-self:flex-end}
}
.kl-fill{background-image:linear-gradient(180deg,#2A2620 0%,#2A2620 50%,rgba(42,38,32,0.16) 50%,rgba(42,38,32,0.16) 100%);background-size:100% 200%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.kl-fill-d{background-image:linear-gradient(180deg,#F5F0E8 0%,#F5F0E8 50%,rgba(244,237,225,0.18) 50%,rgba(244,237,225,0.18) 100%);background-size:100% 200%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes klIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes klStrike{to{transform:scaleX(1)}}
@keyframes klCalm{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes klBob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes klSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes klFlow{to{stroke-dashoffset:-26}}
@keyframes klHint{0%{box-shadow:0 0 0 0 rgba(205,160,74,0.55)}70%{box-shadow:0 0 0 12px rgba(205,160,74,0)}100%{box-shadow:0 0 0 0 rgba(205,160,74,0)}}
@keyframes klX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes klFill{from{background-position:0 100%}to{background-position:0 0}}
@keyframes klPar1{from{transform:translateY(56px) rotate(-7deg)}to{transform:translateY(-28px) rotate(-3deg)}}
@keyframes klPar2{from{transform:translateY(96px) rotate(6deg)}to{transform:translateY(-40px) rotate(2deg)}}
@supports (animation-timeline: view()){
@media (prefers-reduced-motion: no-preference){
.kl-rv{animation:klIn linear both;animation-timeline:view();animation-range:entry 0% cover 24%}
.kl-rvx{transform-origin:left center;animation:klX linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
.kl-fill,.kl-fill-d{animation:klFill linear both;animation-timeline:view();animation-range:entry 35% cover 58%}
.kl-prog{animation:klX linear both;animation-timeline:scroll(nearest block)}
}
@media (prefers-reduced-motion: no-preference) and (min-width: 761px){
.kl-par1{animation:klPar1 linear both;animation-timeline:view()}
.kl-par2{animation:klPar2 linear both;animation-timeline:view()}
}
}
@media (prefers-reduced-motion: reduce){
.fs-root *,.fs-root *::before,.fs-root *::after{animation:none !important;transition:none !important}
.kl-strike::after{transform:scaleX(1)}
}

/* ---------- Website integration (fallstudie.js) ---------- */
.fs-root{font-size:16px}
.fs-root h1,.fs-root h2,.fs-root h3{font-family:'Playfair Display',Georgia,serif}
.fs-hero{padding-top:92px}
@media (max-width: 980px){.fs-hero{padding-top:95px}}
.fs-chapters{top:var(--fs-navh,76px) !important}
/* Drawdown pills */
.fs-pill{border:1px solid rgba(42,38,32,0.22);background:transparent;color:#2A2620}
.fs-pill[aria-pressed="true"]{border-color:#2A2620;background:#2A2620;color:#F5F0E8}
/* Voice notes */
.fs-play{background:transparent;color:#CDA968}
.fs-play:hover{background:rgba(205,160,74,0.12)}
.fs-ico-pause{display:none}
.fs-note.is-on:not(.is-paused) .fs-play{background:#CDA04A;color:#14110C}
.fs-note.is-on.is-paused .fs-play{background:rgba(205,160,74,0.16)}
.fs-note.is-on:not(.is-paused) .fs-ico-play{display:none}
.fs-note.is-on:not(.is-paused) .fs-ico-pause{display:block}
.fs-fill{clip-path:inset(0 100% 0 0)}
.fs-note.is-done .fs-fill{clip-path:inset(0 0 0 0)}
.fs-q{color:rgba(244,237,225,0.8)}
.fs-note.is-on .fs-q,.fs-note.is-done .fs-q{color:#F5F0E8}
.fs-note.is-on .fs-w{color:rgba(244,237,225,0.34)}
.fs-note.is-on .fs-w.is-said{animation:klVw 700ms cubic-bezier(0.2,0.7,0.2,1) both}
.is-revealed .fs-voices:not(.was-played) .fs-note[data-clip="1"] .fs-play{animation:klHint 2400ms ease-in-out 1800ms 3}
@keyframes klVw{0%{color:rgba(244,237,225,0.34)}30%{color:#E6C988}100%{color:#F5F0E8}}
@media (prefers-reduced-motion: reduce){.is-revealed .fs-voices .fs-play{animation:none !important}}
/* Fibonacci-Rechner (Matthias und Sonja): vier Marken in einer Zeile, auch am Handy */
@media (max-width: 480px){.kl-pills.kl-pills-4s{grid-template-columns:repeat(4,minmax(0,1fr))}.kl-pills-4s .fs-pill{padding:0 4px !important;font-size:13px !important}}