/* Bright electric-blue identity with the existing yellow price signature. */
:root{
 --paper:#fbfcfe;--surface:#f1f5ff;--surface-strong:#e7efff;--line:#e0e6f0;--line-strong:#c8d3e5;
 --r-ctl:8px;--r-host:14px;
 --df-ink:#15243f;--df-text:#3c4658;--df-accent:#2457ff;--df-pale:#f6f9ff;--df-line:#dce5f2;--df-line-soft:#eaf0f7;
 --df-shadow:0 3px 8px rgba(24,48,85,.025),0 12px 28px rgba(24,48,85,.045);
}
body{background:var(--paper)}
body .hd,body .hd-mob{background:#fbfcfe}
body .sound-hero{background:radial-gradient(ellipse at 6% 38%,rgba(83,184,224,.05),transparent 45%)}
body .btn{border-radius:8px;box-shadow:0 2px 4px rgba(24,55,142,.06),0 6px 14px rgba(36,87,255,.13)}
body .btn:hover{box-shadow:0 7px 18px rgba(36,87,255,.17);transform:translateY(-1px)}
body .btn:active{transform:translateY(0);box-shadow:0 2px 5px rgba(36,87,255,.12)}
body .btn--ghost,body .btn--onink{border-color:#bdcce8;box-shadow:none}
body .btn--ghost:hover,body .btn--onink:hover{box-shadow:none}
body :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #2457ff;outline-offset:3px}
body .sound-stage{background:#eaf1ff;border:1px solid #dce6fb;border-radius:20px;box-shadow:0 12px 32px rgba(25,64,130,.04)}
body .sample-card{border-color:#e3eaf7;border-radius:14px;box-shadow:var(--df-shadow)}
body .sample-choices button{border-radius:8px}
body .sample-choices button:hover{background:#ffffffb3}
body .genpanel{border:1px solid #d8e3f4;border-radius:14px;box-shadow:var(--df-shadow)}
body .template-section{background:#f0f4fa}
body .template-examples article{background:#fff;border:1px solid #dce5f2;border-radius:14px;box-shadow:var(--df-shadow)}
body .template-example-top{color:#58667d}
body .template-pills button{background:#fff;border-color:#d9e3f3;border-radius:8px}
body .template-pills button:hover,body .template-pills button[aria-pressed=true]{background:#eef4ff;border-color:#a6bee9}
body .closing-section{background:linear-gradient(115deg,#2457ff,#1949df)}
body :is(.card,.pricebox,.note,.callout){border-color:#dce5f2;border-radius:14px;box-shadow:var(--df-shadow)}
body .card{background:#fff}
body .card:hover{border-color:#b1c7e8;box-shadow:0 8px 22px rgba(24,48,85,.07)}
body :is(input[type=text],input[type=email],textarea,select){border-color:#c1d0e5;border-radius:8px}
body .toc a{background:#edf3ff;border-radius:8px}
body .toc a:hover{background:#e2ecff}
body .ft{border-color:#dfe7f1;background:#f6f9fd}
@media(prefers-reduced-motion:reduce){body :is(.btn,.card,.sample-choices button){transition:none}}

/* Shared FAQ component: same construction and states on every page. */
body .faq{border:0;background:none;box-shadow:none;max-width:60rem}
body .faq .df-faq{border:1px solid var(--df-line);border-radius:14px;box-shadow:var(--df-shadow);background:#fff;overflow:hidden;margin-top:24px}
body .faq .df-faq details{border:0;border-bottom:1px solid var(--df-line-soft);border-radius:0;box-shadow:none;background:#fff;margin:0;padding:0;overflow:hidden}
body .faq .df-faq details:last-child{border-bottom:0}
body .faq .df-faq summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:19.2px 27.2px;margin:0;min-height:63px;list-style:none;cursor:pointer;color:var(--df-ink);background:none;font-size:1.02rem;font-weight:500;letter-spacing:normal;line-height:1.4;border:0;box-shadow:none;transition:background .2s}
body .faq .df-faq summary::-webkit-details-marker{display:none}
body .faq .df-faq summary::after,body .faq .df-faq summary::before{content:none}
body .faq .df-faq summary:hover,body .faq .df-faq details[open]{background:var(--df-pale)}
body .faq .df-faq summary:focus-visible{outline:3px solid var(--df-accent);outline-offset:-3px}
body .faq .df-faq .df-faq-sign{display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;width:25px;height:25px;border:1px solid var(--df-accent);border-radius:50%;color:var(--df-accent);font-size:17px;font-weight:400;line-height:1;background:none;transition:transform .2s,background .2s,color .2s}
body .faq .df-faq details[open] .df-faq-sign{transform:rotate(45deg);color:#fff;background:var(--df-accent)}
body .faq .df-faq :is(.faq-text,.faq-a){max-width:74ch;padding:0 27.2px 22.4px;margin:0;border:0;color:var(--df-text);font-size:.97rem;line-height:1.72;font-weight:400;letter-spacing:normal}
body .faq .df-faq :is(.faq-text,.faq-a) p{font:inherit;color:inherit;margin:0;padding:0}
body .faq .df-faq :is(.faq-text,.faq-a) p+p{margin-top:.8rem}
body .faq .df-faq a{color:var(--df-ink);text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){body .faq .df-faq :is(summary,.df-faq-sign){transition:none}}

/* Klassisches gelbes Preisschild, auf allen Seiten derselbe Baustein. */
.retail-price, .hero-price, .closing-price {
 position:relative; isolation:isolate; background:transparent; border:0; border-radius:0;
 color:var(--ink-deep, #101828); font-variant-numeric:tabular-nums;
}
.retail-price::before, .hero-price::before, .closing-price::before {
 content:""; position:absolute; inset:0; z-index:-1; background:var(--yellow, #FFD84D);
 -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M18%200H222C222%2022%20240%2028%20240%2050S222%2078%20222%20100H18C18%2078%200%2072%200%2050S18%2022%2018%200Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20100%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M18%200H222C222%2022%20240%2028%20240%2050S222%2078%20222%20100H18C18%2078%200%2072%200%2050S18%2022%2018%200Z%22%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
}
.retail-price {
 display:inline-block; white-space:nowrap; padding:.12em .65em .16em;
 line-height:1.3; font-weight:800; letter-spacing:-.035em; vertical-align:baseline;
}
.hero-price, .closing-price { align-items:center; text-align:center; padding:13px 26px 12px; }
.hero-price strong, .closing-price b { font-weight:800; letter-spacing:-.04em; }
.hero-price > span, .closing-price > span { text-align:center; }
.btn:has(> .retail-price) { flex-wrap:wrap; }
.df-faq-question { min-width:0; }
@media (max-width:720px) {
 .hero-price, .closing-price { padding:12px 23px 11px; }
 .hd-mob-price .retail-price { margin-right:.15em; }
}

/* 13.09.2026: clearer hierarchy and a composed audio stage.
   Manrope, electric blue, yellow retail label and all content remain. */
:root{--paper:#fff;--ink:#15213b;--ink-deep:#101828;--text:#48556b;--muted:#626e81;--line:#e0e6ef;--surface:#f3f6fc;--df-ink:#15213b;--df-text:#48556b;--df-line:#dde5ef;--df-line-soft:#e9edf4;--df-pale:#f5f8fd;--df-shadow:0 5px 20px #14284b06}
body{background:#fff}
body h1,body h2,body h3{letter-spacing:-.035em}
body .hd{background:#fff;border-bottom:1px solid #e9edf4;box-shadow:none}
body .hd-in{min-height:88px}
body .hd-nav a{font-size:14px}
body .brand-symbol{transform:none;border-radius:9px}
body .btn{border-radius:8px;box-shadow:0 4px 12px #2457ff16;min-height:52px;padding:14px 23px;transition:background .18s,box-shadow .18s}
body .btn:hover{transform:none;box-shadow:0 5px 16px #2457ff22}
body .btn:active{transform:none}
body .btn--sm{min-height:44px;padding:10px 17px}
body .btn--ghost,body .btn--onink{box-shadow:none}
body .eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700}
body .sound-hero{background:#fff;padding-top:clamp(54px,5vw,80px)}
body .hero-layout{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(40px,5vw,78px)}
body .hero-copy h1{font-size:clamp(49px,4.8vw,70px);line-height:1.09;letter-spacing:-.052em;margin-top:27px}
body .hero-description{font-size:17px;line-height:1.85;margin-top:28px;max-width:42ch}
body .hero-actions{margin-top:34px;gap:24px;flex-wrap:wrap}
body .hero-footnote{margin-top:22px;font-size:13px}

/* A single audio surface, aligned and still fully interactive. */
body .sound-stage{background:linear-gradient(145deg,#172d58,#112344);padding:27px 30px 24px;border:1px solid #253c65;border-radius:18px;box-shadow:0 22px 48px -23px #10244f70}
body .stage-heading{color:#c0cce0;margin-bottom:28px;font-size:11px;letter-spacing:.1em}
body .stage-heading .live-dot{background:#8cafff}
body .sample-card{background:transparent;border:0;border-radius:0;padding:0;transform:none;box-shadow:none}
body .sample-top{margin-bottom:24px}
body .sample-tag{color:#c0cce0;font-size:11px;font-weight:600;letter-spacing:.12em}
body .sample-format{color:#c0cce0;border-color:#647692;font-size:11px;padding:2px 7px}
body .sample-card h2{color:#fff;font-size:28px;letter-spacing:-.03em;line-height:1.3}
body #sample-voice{color:#c0cce0;font-size:14px;margin-top:10px}
body .wave-player{height:104px;gap:23px;margin-top:24px}
body .main-play{width:64px;height:64px;background:#fff;color:#2457ff;box-shadow:none}
body .main-play:hover{background:#eaf0ff;transform:none}
body .waveform{height:84px;gap:3px}
body .waveform i{background:#5b709b;border-radius:2px}
body .waveform i:nth-child(-n+12){background:#97b5ff}
body .waveform.is-playing i{background:#97b5ff}
body .sample-timing{color:#c0cce0;font-size:12px;margin-top:10px}
body .audio-seek{accent-color:#9dbaff}
body .audio-seek::-webkit-slider-runnable-track{background:#526789}
body .audio-seek::-webkit-slider-thumb{background:#b2c8ff}
body .audio-seek::-moz-range-track{background:#526789}
body .audio-seek::-moz-range-thumb{background:#b2c8ff}
body .sample-card blockquote{color:#d3dded;border-color:#435a7d;font-size:13px;line-height:1.8;margin-top:17px;padding-top:20px;min-height:90px}
body .sample-choices{gap:7px;justify-content:stretch;margin-top:23px}
body .sample-choices button{flex:1;color:#d3dded;border:1px solid #526789;border-radius:6px;min-height:44px;font-size:12px;padding:7px 9px}
body .sample-choices button:hover{color:#fff;background:#ffffff12}
body .sample-choices button[aria-pressed=true]{color:#15213b;background:#fff;border-color:#fff;box-shadow:none}
body .stage-caption{color:#c0cce0;font-size:12px;margin-top:18px}
body .sound-stage :is(button,input):focus-visible{outline-color:#a8c3ff;outline-offset:4px}
body .value-strip{padding-block:26px;margin-top:64px;border-color:#e0e6ef}
body .value-strip>div{font-size:13px;font-weight:500}

body .composer-section{padding-top:clamp(64px,7vw,104px)}
body .section-intro{margin-bottom:38px}
body .section-intro h2{font-size:clamp(32px,3.3vw,46px);font-weight:700}
body .genpanel{max-width:none;background:#fff;border:1px solid #d9e2ef;border-radius:14px;box-shadow:0 10px 32px #14284b05}
body .genoffer{padding:clamp(30px,4vw,56px);gap:clamp(32px,5vw,72px);grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
body .genoffer h3{font-size:clamp(24px,2.1vw,30px);line-height:1.35;font-weight:650;letter-spacing:-.025em}
body .genoffer p{font-size:16px;line-height:1.8}
body .genoffer-side{background:#f5f8fd;border:0;border-radius:8px;padding:30px}
body .genoffer-lbl{font-size:11px;letter-spacing:.12em;color:#52617a}
body .genoffer-list li{font-size:14px;padding-block:12px}
body .genoffer-list li+li{border-color:#dde5f1}
body .how-section{padding-block:64px 90px}
body .how-grid{gap:44px;margin-top:32px}
body .how-grid>div{padding-top:23px;border-top-color:#cdd9ec}
body .how-number{font-size:36px;line-height:1.2;font-weight:500;letter-spacing:-.04em;color:#2457ff}
body .how-grid h3{font-size:21px;margin-top:18px;font-weight:650;letter-spacing:-.025em}
body .how-grid p{font-size:15px;line-height:1.8;max-width:33ch}
body .template-section{background:#f4f7fc;border-block:1px solid #e8edf5;padding-block:clamp(64px,6vw,88px)}
body .template-intro h2,body .faq-layout h2{font-size:clamp(35px,3.2vw,46px);line-height:1.18;letter-spacing:-.045em}
body .template-intro>p:not(.eyebrow){font-size:15px;max-width:30ch;line-height:1.8}
body .template-examples{gap:22px}
body .template-examples article{padding:30px 28px;background:#fff;border:1px solid #dfe6f0;border-radius:10px;box-shadow:0 3px 12px #14284b03}
body .template-examples article:hover{border-color:#aabde0}
body .template-example-top{font-size:11px;letter-spacing:.1em;color:#56647b}
body .template-example-top>span:last-child{font-size:20px;color:#2457ff}
body .template-examples h3{font-size:22px;font-weight:650;letter-spacing:-.025em;margin-top:26px}
body .template-examples article>p{font-size:15px;line-height:1.7;margin-bottom:25px}
body .template-examples .tlink{font-size:13px}
body .faq-section{padding-block:clamp(64px,7vw,104px)}
body .faq .df-faq{border-radius:10px;box-shadow:none}
body .faq .df-faq summary{padding:22px 26px;font-size:15px;min-height:70px}
body .faq .df-faq .df-faq-sign{width:24px;height:24px;border-color:#a8badb;font-size:16px}
body .faq .df-faq :is(.faq-text,.faq-a){padding:0 26px 25px;font-size:15px}
body .closing-section{background:linear-gradient(110deg,#1b49e6,#2457ff);padding-block:66px}
body .closing-section h2{font-size:clamp(36px,4vw,56px);line-height:1.15}
body .closing-section>.wrap>div:nth-child(2){margin-right:0}
body .closing-section .btn{box-shadow:none}
body .closing-wave{opacity:.035}
body .ft{background:#fff;border-top:1px solid #e2e8f1;padding-top:54px}
body .footer-brand{padding-bottom:30px}

/* Shared subpage elements follow the same spacing, borders and type. */
body .phead{background:#fff;padding-block:38px 46px}
body .phead h1{font-size:clamp(36px,4vw,56px);line-height:1.16;letter-spacing:-.045em;max-width:24ch}
body .phead .answer{font-size:18px;line-height:1.8;max-width:65ch;margin-top:22px}
body :is(.card,.pricebox,.note,.callout){border-color:#dde5ef;border-radius:10px;box-shadow:0 3px 14px #14284b04}
body .card:hover{box-shadow:0 5px 18px #14284b08;border-color:#abbfdf}
body .toc a{background:#f1f5fc;border:1px solid #e2e9f5;border-radius:6px}

@media(max-width:1100px){
 body .hero-layout{gap:32px}
 body .hero-copy h1{font-size:clamp(45px,5.2vw,58px)}
 body .sound-stage{padding:24px}
 body .sample-card h2{font-size:25px}
 body .hero-actions{gap:18px}
 body .sample-choices{flex-wrap:wrap}
 body .sample-choices button{flex:1 1 auto}
 body .template-layout,body .faq-layout{gap:40px}
}
@media(max-width:900px){
 body .hero-layout{grid-template-columns:minmax(0,1fr);gap:40px}
 body .hero-copy h1{font-size:clamp(44px,7vw,65px);max-width:660px}
 body .sound-stage{max-width:660px;width:100%}
 body .hero-description{font-size:17px}
 body .genoffer{grid-template-columns:minmax(0,1fr)}
 body .genoffer-side{padding:26px}
 body .genoffer-cta{flex-direction:row;align-items:center}
 body .genoffer-cta .btn{width:auto}
 body .how-grid{gap:26px}
 body .template-layout,body .faq-layout{grid-template-columns:minmax(0,1fr);gap:34px}
 body .template-intro>p:not(.eyebrow){max-width:45ch}
 body .closing-section>.wrap{align-items:flex-start}
}
@media(max-width:600px){
 body .hd-in{min-height:76px}
 body .sound-hero{padding-top:38px}
 body .hero-copy h1{font-size:clamp(37px,10.2vw,52px);line-height:1.12;letter-spacing:-.045em;margin-top:22px}
 body .hero-copy .eyebrow{font-size:10px}
 body .hero-description{font-size:16px
 line-height:1.75;}
 body .hero-actions{align-items:center;gap:19px}
 body .hero-actions .btn{font-size:13px;padding:14px 17px}
 body .sound-stage{padding:25px 21px 22px;border-radius:14px}
 body .stage-heading{font-size:10px;letter-spacing:.06em;gap:8px}
 body .sample-card h2{font-size:26px}
 body .sample-tag{font-size:10px}
 body .wave-player{gap:16px}
 body .main-play{width:56px;height:56px}
 body .sample-choices{gap:6px}
 body .sample-choices button{font-size:11px;padding-inline:8px}
 body .sample-card blockquote{min-height:0}
 body .value-strip{margin-top:40px;gap:16px;padding-block:24px}
 body .genoffer{padding:27px 22px;gap:28px}
 body .genoffer h3{font-size:24px}
 body .genoffer p{font-size:15px}
 body .genoffer-side{padding:24px 20px}
 body .genoffer-cta{gap:16px}
 body .how-grid{grid-template-columns:minmax(0,1fr);gap:29px}
 body .how-grid>div{display:grid;grid-template-columns:45px minmax(0,1fr);gap:10px 17px}
 body .how-number{grid-row:1/3;font-size:27px}
 body .how-grid h3{margin:0;font-size:20px}
 body .how-grid p{grid-column:2;margin:0;max-width:none;font-size:14px
 line-height:1.7;}
 body .template-examples{grid-template-columns:minmax(0,1fr);gap:18px}
 body .template-examples article{padding:27px}
 body .faq .df-faq summary{padding:20px;gap:14px;font-size:14px}
 body .faq .df-faq :is(.faq-text,.faq-a){padding:0 20px 23px;font-size:14px}
 body .closing-section{padding-block:48px}
 body .closing-section>.wrap{flex-direction:column;align-items:flex-start;gap:28px}
 body .phead .answer{font-size:16px}
}
@media(prefers-reduced-motion:reduce){body .waveform.is-playing i{animation:none}body .btn{transition:none}}

/* Finetuning 13.09.2026: component relationships and responsive constraints. */

body .template-examples article{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
body .template-examples article>p{flex:1}
body .template-examples .tlink{margin-top:auto;min-height:44px;display:inline-flex;align-items:center}
body .template-examples h3{line-height:1.3;text-wrap:balance}
body .sample-timing{font-variant-numeric:tabular-nums}
body .how-grid h3{line-height:1.35}
body .ft a,body .ft-linkbtn{line-height:1.65}
body .phead .answer{line-height:1.7}
@media(min-width:901px){body .how-grid h3{min-height:2.7em}}
@media(max-width:600px){body .template-examples article{padding:25px 23px}}

/* Explicit placement avoids pseudo-elements participating in grid auto-placement. */
@media(max-width:650px){
 body .how-grid>div>.how-number{grid-column:1;grid-row:1/3}
 body .how-grid>div>h3{grid-column:2;grid-row:1}
 body .how-grid>div>p{grid-column:2;grid-row:2}
}

/* The mobile step grid owns the number position; remove inherited absolute offsets. */
@media(max-width:650px){body .how-grid>div{padding-left:0}body .how-grid>div>.how-number{position:static;inset:auto;align-self:start;line-height:1;font-variant-numeric:tabular-nums}}