/* One continuous production painting. The hero and body use adjacent parts
   of the same raster, so their joining pixel row is identical. Original photo,
   original hero threads/pearls and unchanged upper text remain above it. */
body#start.costs-sideflow .costs-sideflow-stage{padding-bottom:max(110px,6cqw);clip-path:none}
body#start.costs-sideflow .costs-sideflow-stage>.costs-intro-bridge{margin-top:0}
body#start.costs-sideflow .costs-sideflow-art{inset:0;background:url(costs-unified-sideflow-v1.webp) center bottom/100% 123.09202453987731% no-repeat;mask-image:none}
body#start.costs-sideflow .costs-sf-thread{position:absolute;display:block;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
body#start.costs-sideflow .costs-sf-pearl{--pearl-size:18px;position:absolute;display:block;width:var(--pearl-size);height:var(--pearl-size);border-radius:50%;transform:translate(-50%,-50%);background-image:url(parents-selected02-paint-v1.webp);background-size:calc(var(--pearl-size)*27.757576) auto;background-position:calc(var(--pearl-size)*-6.136364) calc(var(--pearl-size)*-40.621212);background-repeat:no-repeat;mask-image:radial-gradient(circle,#000 60%,transparent 69%);pointer-events:none;filter:saturate(.84) brightness(.97)}
body#start.costs-sideflow .costs-sf-pearl.p1{left:93.9226519%;top:8.0776870%;--pearl-size:20px}
body#start.costs-sideflow .costs-sf-pearl.p2{left:97.3756906%;top:30.7465681%;--pearl-size:15px}
body#start.costs-sideflow .costs-sf-pearl.p3{left:92.9558011%;top:67.5835000%;--pearl-size:18px}
body#start.costs-sideflow .costs-sf-pearl.p4{left:94.1988950%;top:84.5851608%;--pearl-size:20px}
body#start.costs-sideflow .costs-sf-pearl.p5{left:75.9668508%;top:98.4698505%;--pearl-size:18px}
body#start.costs-sideflow #haeufigkeit h2::after{content:"";display:block;width:100px;height:16px;margin-top:14px;background:url(costs-title-stroke-v1.svg) left center/contain no-repeat}
@media(min-width:1321px){
 body#start.costs-sideflow .costs-copper-art{z-index:2;background:url(costs-unified-sideflow-v1.webp) center top/100% auto no-repeat;mask-image:none}
 body#start.costs-sideflow .adult-header,body#start.costs-sideflow .practice-photo-opening{z-index:3}
 body#start.costs-sideflow .costs-copper-art img{mask-image:url(costs-hero-photo-mask-v1.svg);mask-size:100% 100%;mask-repeat:no-repeat}
}
@media(max-width:1320px){
 body#start.costs-sideflow .practice-photo-opening{z-index:3}
 body#start.costs-sideflow .practice-photo-opening .opening-art{width:100cqw;left:calc((100% - 100cqw)/2);right:auto}
 body#start.costs-sideflow .practice-photo-opening .hero-room{background:url(costs-unified-sideflow-v1.webp) center top/100% auto no-repeat;mask-image:linear-gradient(transparent,#000 3%);mask-size:100% 100%;mask-repeat:no-repeat}
 body#start.costs-sideflow .practice-photo-opening .hero-room>img{width:100%;margin-left:0;mask-image:url(costs-hero-photo-mask-v1.svg);mask-size:100% 100%;mask-repeat:no-repeat}
}
@media(max-width:850px){
 body#start.costs-sideflow .practice-photo-opening .hero-room{background-size:100% 540cqw}
 body#start.costs-sideflow .practice-photo-opening .hero-room>img{width:180%;margin-left:-80%}
 body#start.costs-sideflow .costs-sf-pearl.p1,body#start.costs-sideflow .costs-sf-pearl.p4{--pearl-size:14px}
 body#start.costs-sideflow .costs-sf-pearl.p2{--pearl-size:10px}
 body#start.costs-sideflow .costs-sf-pearl.p3,body#start.costs-sideflow .costs-sf-pearl.p5{--pearl-size:12px}
 body#start.costs-sideflow #haeufigkeit h2::after{width:80px;height:13px;margin-top:10px}
}
@media(max-width:600px){
 body#start.costs-sideflow .costs-sideflow-stage{padding-bottom:140px}
 body#start.costs-sideflow .costs-sf-pearl.p1,body#start.costs-sideflow .costs-sf-pearl.p4{--pearl-size:11px}
 body#start.costs-sideflow .costs-sf-pearl.p2{--pearl-size:8px}
 body#start.costs-sideflow .costs-sf-pearl.p3,body#start.costs-sideflow .costs-sf-pearl.p5{--pearl-size:10px}
}
/* The narrow phone leaves the opening turn free before readable text begins. */
@media(max-width:850px){body#start.costs-sideflow .costs-sideflow-stage>.costs-intro-bridge{padding-top:66px}}
@media(max-width:600px){body#start.costs-sideflow .costs-sideflow-stage>.costs-intro-bridge{padding-top:135px}}
/* Expanded answers lengthen the canvas; reserve the painted bottom sweep. */
body#start.costs-sideflow .costs-sideflow-stage:has(details[open]){padding-bottom:200px}
@media(max-width:600px){body#start.costs-sideflow .costs-sideflow-stage:has(details[open]){padding-bottom:280px}}