/* Kinderwunsch-Bereich (README §71). Animation von Dr. Kumposcht unten, eigene Bausteine hier. */
.wh-typo .wh-eyebrow.kw-over{display:block;margin-bottom:8px}
.wh-typo p.wh-eyebrow{display:block;font-family:var(--wh-font-alt);font-size:13px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--wh-accent);margin:0 0 12px}
.wh-typo .wh-iconstrip__title{font-size:36px;line-height:1.2}
.wh-typo .wh-iconstrip__label{font-size:20px;line-height:1.3;margin:0 0 6px}
.wh-typo .wh-iconstrip__text{font-size:15.5px;line-height:1.45;margin:0 auto}
.wh-typo p.kw-strip-intro{font-size:17px;line-height:1.5;margin:12px auto 0;max-width:640px;color:var(--wh-ink-soft)}
.wh-iconstrip.kw-animwrap{padding:0}
.kw-animwrap .wh-card{text-align:left}
.kw-animwrap .wh-card__icon svg{width:30px;height:30px;overflow:visible}
.kw-notes{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.wh-typo p.kw-note{margin:0!important;padding:24px 26px;background:var(--wh-accent-subtle);border-radius:var(--wh-radius-lg);font-size:17px;line-height:1.5}
.kw-strip-fuss{max-width:760px;margin:30px auto 0;text-align:center}
.wh-typo .kw-strip-fuss p{font-size:16px;line-height:1.55;color:var(--wh-ink-soft)}
.kw-weiter{text-align:center;margin:26px 0 0!important}
.kw-faktoren{margin-top:56px}
.kw-team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.kw-doc{display:flex;flex-direction:column;align-items:flex-start;background:var(--wh-surface);border:1px solid var(--wh-outline);border-radius:var(--wh-radius-lg);padding:22px}
.kw-doc__img{width:100%;aspect-ratio:8/9;margin:0 0 14px;border-radius:var(--wh-radius);background:var(--wh-accent-subtle);overflow:hidden}
.wh-typo .kw-doc__img img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 100%;border-radius:0;box-shadow:none}
.wh-typo .kw-doc h3{font-size:19px;line-height:1.3;margin:4px 0 2px}
.wh-typo .kw-doc p{font-size:15.5px;line-height:1.5;margin:0 0 12px}
.wh-typo .kw-doc p.kw-doc__rolle{font-size:14px;color:var(--wh-ink-muted);margin-bottom:10px}
.wh-typo .kw-doc .wh-button{margin-top:auto}
@media (max-width:991px){.kw-team{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.kw-notes{grid-template-columns:1fr}.wh-typo .wh-iconstrip__title{font-size:27px}.wh-typo .wh-iconstrip__label{font-size:18px;hyphens:manual;-webkit-hyphens:manual}}
@media (max-width:520px){.kw-team{grid-template-columns:1fr}.kw-doc__img{max-width:260px}}
.kw-anim{color:var(--ink);font:16px/1.55 var(--sans);text-align:left}
.kw-anim{--ink: #352c33; --muted: #61545c; --accent: #87447d; --accent-hover: #713567; --gold: #bfa26e; --paper: #fdfbf7; --line: #e9ddd7; --blush: #f4e9f1; --cream: #faf4e9; --display:var(--wh-font-alt); --sans:var(--wh-font-body,inherit);}
.kw-anim *,.kw-anim *::before,.kw-anim *::after{box-sizing: border-box;}
.kw-anim [hidden]{display: none !important;}
.kw-anim button{font: inherit; color: inherit; cursor: pointer;}
.kw-anim button:disabled{cursor: default; opacity: .42;}
.kw-anim a{color: var(--accent); text-underline-offset: .22em;}
.kw-anim :focus-visible{outline: 3px solid var(--accent); outline-offset: 4px;}
.kw-anim h2,.kw-anim h3,.kw-anim p{margin-top: 0;}
.kw-anim h2,.kw-anim h3{line-height: 1.1;}
.kw-anim .player{overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: 0 12px 38px #6b3f5320;}
.kw-anim .scene{display: grid; grid-template-columns: minmax(0, 1.53fr) minmax(0, 1fr);}
.kw-anim .illustration{min-width: 0; margin: 0; background: radial-gradient(ellipse at 50% 41%, #fffcf6, #f3e8da 80%); display: flex; flex-direction: column; justify-content: space-between; position: relative;}
.kw-anim .illustration-top,.kw-anim figcaption{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 20px;}
.kw-anim .illustration-top{padding-bottom: 0;}
.kw-anim .scene-badge{display: inline-flex; align-items: center; gap: 7px; border: 1px solid #e4d6c5; background: #fffcf8; border-radius: 100px; padding: 4px 10px; font-size: 11.52px; font-weight: 720;}
.kw-anim .scene-badge::before{content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);}
.kw-anim .anatomy{display: block; width: 100%; max-height: 355px; height: auto; overflow: visible;}
.kw-anim figcaption{flex-wrap: wrap; font-size: 11.52px; color: var(--muted); padding-top: 0;}
.kw-anim .key{display: inline-flex; align-items: center; gap: 7px; font-weight: 650; color: var(--ink);}
.kw-anim .swatch{width: 10px; height: 10px; border-radius: 50%; border: 1px solid #ad5370; background: #da8ca6;}
.kw-anim .narration{display: flex; flex-direction: column; padding: 27px clamp(22px, 3vw, 40px) 25px; min-width: 0;}
.kw-anim .chapter{display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 12.16px; font-weight: 750; margin-bottom: 13px;}
.kw-anim .chapter b{display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--blush); font: 700 13.76px var(--sans);}
.kw-anim .narration h3{margin-bottom: 10px; font: 500 clamp(29.6px, 3.5vw, 40.8px)/1.08 var(--display); letter-spacing: -.035em;}
.kw-anim .narration .body{margin-bottom: 15px; font-size: 15.68px; color: var(--muted);}
.kw-anim .fact{margin: 0 0 15px; padding: 10px 13px; background: var(--cream); border-radius: 11px; font-size: 12.96px; color: var(--muted);}
.kw-anim .fact strong{display: block; margin-bottom: 2px; color: var(--accent);}
.kw-anim .outcomes{border: 0; min-width: 0; margin: 0 0 13px; padding: 0;}
.kw-anim .outcomes legend{margin-bottom: 5px; padding: 0; font-size: 11.68px; font-weight: 740; color: var(--muted);}
.kw-anim .choice-row{display: flex; flex-wrap: wrap; gap: 5px;}
.kw-anim .choice-row button{background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 9px; font-size: 12.16px; font-weight: 690;}
.kw-anim .choice-row [aria-pressed="true"]{background: var(--blush); border-color: var(--accent);}
.kw-anim .controls{display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 3px;}
.kw-anim .play,.kw-anim .arrow{display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font-weight: 690;}
.kw-anim .play{gap: 8px; padding: 0 13px; border: 1px solid var(--accent); background: var(--accent); color: white; font-size: 13.28px;}
.kw-anim .play:hover{background: var(--accent-hover);}
.kw-anim .arrow{width: 44px; padding: 0; border: 1px solid var(--line); background: white;}
.kw-anim .arrow:hover:not(:disabled),.kw-anim .choice-row button:not([aria-pressed="true"]):hover{background: var(--cream);}
.kw-anim .play svg,.kw-anim .arrow svg{flex: none; width: 18px; height: 18px;}
.kw-anim .timeline{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line);}
.kw-anim .step{position: relative; min-height: 69px; padding: 10px 12px; border: 0; border-right: 1px solid var(--line); background: #fff; text-align: left; font-size: 13.12px; font-weight: 690;}
.kw-anim .step:last-child{border-right: 0;}
.kw-anim .step:hover{background: var(--cream);}
.kw-anim .step[aria-current="step"]{color: var(--accent); background: var(--blush);}
.kw-anim .step[aria-current="step"]::after{content: ""; position: absolute; inset: 0 auto auto 0; width: var(--progress, 100%); height: 3px; background: var(--accent);}
.kw-anim .step:focus-visible{outline-offset: -5px; z-index: 1;}
.kw-anim .step span{display: block; margin-bottom: 1px; font-size: 11.04px; font-weight: 750; color: var(--muted);}
.kw-anim .timing{margin: 13px 0 0; color: var(--muted); font-size: 12.8px;}
.kw-anim .cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; align-items: start;}
.kw-anim .cards details{border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden;}
.kw-anim .cards summary{list-style: none; display: grid; grid-template-columns: 36px 1fr 18px; gap: 10px; align-items: center; padding: 13px; cursor: pointer; min-height: 69px;}
.kw-anim .cards summary::-webkit-details-marker{display: none;}
.kw-anim .cards summary:focus-visible{outline-offset: -5px;}
.kw-anim .cards summary:hover,.kw-anim .cards details[open] summary{background: var(--cream);}
.kw-anim .cards summary strong{font-size: 13.92px; line-height: 1.3;}
.kw-anim .cards summary small{display: block; font-size: 11.52px; font-weight: 550; color: var(--muted); margin-top: 2px;}
.kw-anim .card-icon{display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--blush); color: var(--accent);}
.kw-anim .card-icon svg{width: 21px; height: 21px;}
.kw-anim .plus{color: var(--accent); font-size: 19.68px; font-weight: 450; text-align: center;}
.kw-anim .plus::before{content: "+";}
.kw-anim details[open] .plus::before{content: "−";}
.kw-anim .cards details p{padding: 12px 15px 15px; margin: 0; color: var(--muted); font-size: 13.76px;}
.kw-anim .factor-diagram{display: block; width: calc(100% - 30px); height: auto; margin: 0 15px 15px; border-radius: 9px; background: var(--cream);}
.kw-anim .factor-diagram text{font: 650 13px var(--sans); fill: var(--ink);}
.kw-anim .sources{margin-bottom: 32px; border-top: 1px solid var(--line); padding-top: 15px; font-size: 12.8px; color: var(--muted);}
.kw-anim .sources summary{cursor: pointer; width: fit-content; font-weight: 700; color: var(--accent);}
.kw-anim .sources ul{margin: 9px 0 0; padding-left: 20px;}
.kw-anim .sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;}
.kw-anim .anatomy .label{font: 650 16px var(--sans); fill: var(--ink);}
.kw-anim .anatomy .leader{fill: none; stroke: #8e767d; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round;}
.kw-anim .anatomy .anchor{fill: #8e767d;}
.kw-anim .hormone-signal{color: var(--accent);}
.kw-anim .hormone-signal[data-hormone="progesterone"]{color: #785323;}
.kw-anim .hormone-signal .label{fill: currentColor;}
.kw-anim .hormone-initial{font: 750 20px var(--sans); fill: #fff;}
.kw-anim .anatomy [hidden]{display: none;}
@media (max-width: 900px){.kw-anim .scene{grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);}.kw-anim .narration{padding-inline: 20px;}.kw-anim .cards{grid-template-columns: repeat(2, minmax(0, 1fr));}}
@media (max-width: 710px){.kw-anim .scene{grid-template-columns: minmax(0, 1fr);}.kw-anim .narration{padding: 18px 20px 19px;}.kw-anim .chapter{margin-bottom: 9px;}.kw-anim .illustration-top{padding: 12px 14px 0;}.kw-anim figcaption{padding: 0 14px 11px;}.kw-anim .anatomy{max-height: 305px;}.kw-anim .step{min-height: 61px; padding: 8px 5px; text-align: center; font-size: clamp(10.56px, 2.2vw, 13.12px); hyphens: auto; line-height: 1.25;}}
@media (max-width: 440px){.kw-anim .player{border-radius: 17px;}.kw-anim .narration{padding-inline: 14px;}.kw-anim .anatomy .label{font-size: 20px;}.kw-anim .cards{grid-template-columns: 1fr;}}
.kw-anim h3{margin-top:0;color:var(--ink)}
.kw-anim .sources ul{list-style:disc}.kw-anim .sources li{padding:0;margin:0 0 4px;font-size:13px}
.kw-anim .sources li:before{content:none;display:none}
.kw-anim .narration p,.kw-anim .cards p{line-height:1.55}
.kw-anim .timeline{margin:0;padding:0;height:auto;min-height:0;background:none}
.kw-anim .timeline:before,.kw-anim .timeline:after{content:none;display:none}
.kw-anim .sources{margin-top:26px}
