@media(max-width:600px){#ueberblick .how-actions{flex-direction:column;gap:18px}}
/* Shared presentation for the general and music lesson guides. */
/* Clip the moving devices without creating a nested scroll container on touch screens. */
.how-page .device-showcase{padding:48px 0 80px;background:linear-gradient(#f5f5f7,#fff);overflow:clip}
.how-page .device-stage{position:relative;width:100%;min-width:0;aspect-ratio:1.31;margin:0 auto;isolation:isolate;overflow-anchor:none}
.how-page .device-stage::before{content:"";position:absolute;inset:16% 2% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(90,90,90,.16),rgba(180,180,180,.13) 42%,transparent 70%);filter:blur(24px);z-index:-1}
.how-page .device-laptop{position:absolute;left:0;top:6%;width:81%;aspect-ratio:1.56;transform-origin:50% 75%}
.how-page .device-laptop-screen{position:absolute;inset:0 2.4% 7.5%;border:clamp(6px,.8vw,10px) solid #101317;border-bottom-width:clamp(9px,1vw,13px);border-radius:clamp(15px,2vw,25px) clamp(15px,2vw,25px) 10px 10px;background:#f5f5f7;overflow:hidden;box-shadow:0 24px 54px #00000024}
.how-page .device-laptop-screen::after{content:"";position:absolute;top:0;left:43%;width:14%;height:3.5%;border-radius:0 0 16px 16px;background:#0b0e11;pointer-events:none}
.how-page .device-laptop-base{position:absolute;bottom:0;inset-inline:0;height:8%;border-radius:2px 2px 36px 36px;background:linear-gradient(#8c969e,#dce0e3 32%,#b6bfc6 60%,#838f98);box-shadow:0 18px 24px #00000026}
.how-page .device-laptop-base::after{content:"";position:absolute;left:43%;width:14%;height:28%;background:#8f989f;border-radius:0 0 14px 14px}
.how-page .device-phone{position:absolute;right:1%;top:23%;width:25.5%;aspect-ratio:390/844;border:clamp(4px,.55vw,7px) solid #101317;border-radius:clamp(18px,2.8vw,36px);background:#101317;box-shadow:0 32px 58px #00000038;overflow:hidden;z-index:2}
.how-page .device-phone::after{content:"";position:absolute;top:1.3%;left:29%;width:42%;height:4%;border-radius:40px;background:#07090b;pointer-events:none}
/* These muted demo clips are decorative; swipes belong to the page. */
.how-page .device-showcase video{display:block;width:100%;height:100%;object-fit:cover;background:#f5f5f7;pointer-events:none}
.how-page .device-phone video{border-radius:clamp(13px,2.2vw,29px)}
.how-page .device-caption{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
 .device-showcase.device-motion:not(.device-visible) :is(.device-laptop,.device-phone){opacity:0}
}
@media print{.how-page .device-showcase :is(.device-laptop,.device-phone){animation:none!important;filter:none!important}}
@media(max-width:600px){.how-page .device-showcase{padding:28px 0 48px}.how-page .device-stage{width:100%;aspect-ratio:1.08}.how-page .device-laptop{top:9%;width:85%}.how-page .device-phone{top:30%;right:1%;width:29%}}
@media print{.how-page .device-showcase :is(.device-laptop,.device-phone){opacity:1!important;transform:none!important}}


/* Explanation and live demo form one responsive section above Ablauf. */
.how-page .device-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:56px;align-items:center}
body.how-page .device-showcase .how-window-explanation{display:block;max-width:none;margin:0;text-align:left}
body.how-page .device-showcase .how-window-explanation h2{font-size:clamp(28px,3vw,38px);margin-bottom:22px}
body.how-page .device-showcase .how-window-explanation p{font-size:17px;line-height:1.75}
@media(max-width:900px){.how-page .device-layout{grid-template-columns:minmax(0,1fr);gap:32px}.how-page .device-stage{max-width:640px}body.how-page .device-showcase .how-window-explanation{max-width:640px;margin-inline:auto}}


/* Continuous gliding paths; only composited transforms and opacity are animated. */
.how-page .device-orbit{position:absolute;inset:0}
.how-page .device-phone{transform-origin:50% 65%}
@media(prefers-reduced-motion:no-preference){
 .device-parallax .device-orbit{transform:translate3d(0,var(--scene-lift,0px),0)}
 .device-parallax .device-laptop{transform:translate3d(var(--laptop-exit,0px),var(--laptop-shift,0px),0) scale(var(--laptop-scale,1));opacity:var(--laptop-opacity,1);will-change:transform,opacity}
 .device-parallax .device-phone{transform:translate3d(var(--phone-slide,0px),var(--phone-shift,0px),0) scale(var(--phone-scale,1));opacity:var(--phone-opacity,1);will-change:transform,opacity}
 .device-parallax .device-stage::before{opacity:var(--shadow-opacity,1);transform:translate3d(var(--shadow-shift,0px),0,0)}
}
@media(prefers-reduced-motion:reduce){.how-page .device-orbit,.how-page :is(.device-laptop,.device-phone){transform:none;opacity:1}}
@media print{.how-page .device-orbit,.how-page :is(.device-laptop,.device-phone){transform:none!important;opacity:1!important}.how-page .device-stage::before{opacity:1!important;transform:none!important}}

/* Topic guides share the reference layout, including a balanced final card row. */
.topic-page .how-method:last-child:nth-child(odd){grid-column:1/-1}
.topic-page .how-method:last-child:nth-child(odd) p{max-width:800px}

/* Mint-to-blue metric accent, adjusted for the white report background. */
.how-page .how-metric>strong{color:#377f87}
.how-page .how-metric>strong>span{color:inherit}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .how-page .how-metric>strong{display:inline-block;background:linear-gradient(110deg,#398f86 0%,#477f96 52%,#536d8d 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(forced-colors:active){.how-page .how-metric>strong{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
@media print{.how-page .how-metric>strong{background:none;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f}}

/* Mint-to-blue video heading coordinated with the video action. */
.how-page .how-videos h2{color:#b9dedf}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .how-page .how-videos h2{background:linear-gradient(110deg,#c7efea 0%,#7eafbf 52%,#6f8fb1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(forced-colors:active){.how-page .how-videos h2{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
@media print{.how-page .how-videos h2{background:none;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f}}

/* Green video action with lighter tones on the dark background. */
body.how-page:not(.solver-page) .how-video-start{color:#8ad2b5;text-shadow:none}
body.how-page:not(.solver-page) .how-video-start>span{background:linear-gradient(110deg,#66c5a3,#b8ddcf);-webkit-background-clip:text;background-clip:text}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 body.how-page:not(.solver-page) .how-video-start>span{color:transparent;-webkit-text-fill-color:transparent}
}
body.how-page:not(.solver-page) .how-video-start svg{filter:none}
body.how-page:not(.solver-page) .how-video-start:is(:hover,:focus-visible){color:#c7eedc;text-shadow:none}
@media(forced-colors:active){body.how-page:not(.solver-page) .how-video-start{color:ButtonText;text-shadow:none}body.how-page:not(.solver-page) .how-video-start>span{background:none;color:ButtonText;-webkit-text-fill-color:ButtonText}body.how-page:not(.solver-page) .how-video-start svg{filter:none}}
@media print{body.how-page:not(.solver-page) .how-video-start{color:#1d1d1f;text-shadow:none}body.how-page:not(.solver-page) .how-video-start>span{background:none;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f}body.how-page:not(.solver-page) .how-video-start svg{filter:none}}

/* Deep green hero link matching the reference, with a subtle gradient. */
body.how-page .how-actions .how-link[href="#videos"]{color:#17634f;text-shadow:none;text-decoration-color:#17634f}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 body.how-page .how-actions .how-link[href="#videos"]{background:linear-gradient(110deg,#17634f,#23816a);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
body.how-page .how-actions .how-link[href="#videos"]:is(:hover,:focus-visible){text-shadow:none;text-decoration:underline;text-underline-offset:4px}
@media(forced-colors:active){body.how-page .how-actions .how-link[href="#videos"]{background:none;color:LinkText;-webkit-text-fill-color:LinkText;text-shadow:none}}
@media print{body.how-page .how-actions .how-link[href="#videos"]{background:none;color:#1d1d1f;-webkit-text-fill-color:#1d1d1f;text-shadow:none}}

/* Keep primary actions opaque even when the gradient is not painted. */
body.how-page .how-button,body.how-page .how-button:hover{background-color:#111827}

/* Blue accents for the three process steps, shared by both guides. */
.how-page .how-process .how-step-number{color:#0071e3}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .how-page .how-process .how-step-number{background:linear-gradient(135deg,#40b9f5 0%,#007aff 55%,#3454d1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@media(forced-colors:active){.how-page .how-process .how-step-number{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}
@media print{.how-page .how-process .how-step-number{background:none;color:#0071e3;-webkit-text-fill-color:#0071e3}}

/* Orange text and matching gradient outlines for the planning labels. */
.how-page .how-method-tag{position:relative;color:#c6530b;border-color:#eb7c16}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
 .how-page .how-method-tag{background:linear-gradient(110deg,#ce4e08,#c47700);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
 .how-page .how-method-tag{border-color:transparent}
 .how-page .how-method-tag::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(110deg,#ff6b18,#ffac0a);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
}
@media(forced-colors:active){.how-page .how-method-tag{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText;border-color:CanvasText}.how-page .how-method-tag::before{display:none}}
@media print{.how-page .how-method-tag{background:none;color:#c6530b;-webkit-text-fill-color:#c6530b;border-color:#c6530b}.how-page .how-method-tag::before{display:none}}

/* Reveal the process steps in a readable 01 → 02 → 03 rhythm. */
@media(prefers-reduced-motion:no-preference){
 .how-page.page-motion .how-steps>li.page-reveal:nth-child(1){transition-delay:0ms}
 .how-page.page-motion .how-steps>li.page-reveal:nth-child(2){transition-delay:250ms}
 .how-page.page-motion .how-steps>li.page-reveal:nth-child(3){transition-delay:500ms}
 .how-page.page-motion .how-steps>li.page-reveal:focus-within{transition-delay:0ms}
}