:root{--ink:#151317;--cream:#d3cdc7;--orange:#fc7923;--pink:#e363b1;--line:#55434b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ink);color:#f8f0e7;font-family:Impact,'Arial Narrow',system-ui,sans-serif}p{font-family:system-ui,Arial,sans-serif;line-height:1.62}a{color:inherit}em,i{font-style:normal;color:var(--orange)}.wrap{max-width:1200px;margin:auto;padding:0 30px}.top{height:86px;background:#151317;display:flex;align-items:center;justify-content:space-between;padding:9px clamp(18px,4vw,65px);gap:20px;border-bottom:1px solid #55404b}.brand{text-decoration:none;display:flex;align-items:center;gap:15px}.brand img{width:64px;height:64px;object-fit:contain;border-radius:50%}.brand b{display:block;font-size:25px;letter-spacing:.4px}.brand small{font:12px system-ui;color:#d8ccd3}.top nav{display:flex;gap:25px}.top nav a{text-decoration:none;font:700 13px system-ui}.top nav a:hover{color:var(--orange)}.hero{min-height:590px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-photo{position:absolute;inset:0;background-image:url('assets/hero.webp');background-size:cover;background-position:center center;filter:contrast(1.09) saturate(.94)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101014 0%,rgba(15,14,22,.93) 27%,rgba(17,13,24,.67) 48%,rgba(10,9,20,.10) 100%)}.hero:after,.dark:before{pointer-events:none;content:'';position:absolute;inset:0;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}.hero-body{position:relative;z-index:1;width:min(690px,100%);margin-left:max(30px,calc((100vw - 1140px)/2));padding:55px 20px 60px 0}.eyebrow,.kicker{letter-spacing:2px;font:bold 12px system-ui;color:var(--orange)}h1{font-size:clamp(64px,8vw,119px);line-height:.92;margin:22px 0 20px;letter-spacing:-2px;transform:rotate(-1deg);font-weight:1000;text-shadow:2px 3px 0 #22151e}h1 span{color:var(--orange)}.lead{font-weight:700;max-width:455px;font-size:19px}.facts{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}.facts span{border:1px solid #ff882f;padding:9px 11px;background:#1010169c;font:bold 11px system-ui}.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;background:var(--orange);color:#171011;text-decoration:none;padding:18px 24px;border-radius:4px;font-size:22px;font-weight:1000;box-shadow:5px 5px 0 #3a1c17}.cta:hover{transform:translateY(-2px)}.mini{font:italic 15px system-ui;color:#fbd1b0}.paper{background:var(--cream);color:#151317;background-image:repeating-linear-gradient(100deg,transparent 0,transparent 5px,#443a3210 6px,transparent 7px)}section{padding:70px 0}h2{font-size:clamp(43px,6vw,72px);line-height:1;margin:12px 0 34px;letter-spacing:-1px}.paper h2 i{color:#d85819}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.steps article{border-top:4px solid #141116;padding-top:16px}.num{display:inline-flex;background:var(--orange);border-radius:100%;width:44px;height:44px;align-items:center;justify-content:center;color:#141116;font-size:20px}.steps h3{font-size:23px;margin:14px 0 5px}.steps p{font-size:14px;margin:0}.dark{position:relative;background:#18131c}.dark>.wrap{position:relative;z-index:1}.studio-grid{display:grid;grid-template-columns:44% 1fr;align-items:center;gap:60px}.image-back{margin:0}.image-back img{width:100%;height:480px;object-fit:cover;object-position:center 48%;filter:grain(1);border:1px solid #6e5163}.image-back figcaption{font:700 12px system-ui;letter-spacing:2px;color:var(--orange);margin-top:10px}.studio-grid p,.stripe p{max-width:540px;color:#e1d8d9}.stroke{font:italic 24px Georgia,serif;color:var(--orange);margin:25px 0}.stripe{display:grid;grid-template-columns:1fr 240px;gap:35px;align-items:center;margin-top:55px;border-top:1px solid #6c5059;padding-top:35px}.stripe img{width:100%;height:210px;object-fit:cover;object-position:50% 20%;filter:contrast(1.15) saturate(.7)}.stripe figure{margin:0}.stripe h3{font-size:42px;margin:12px 0}.booking-intro{font-size:17px}.booking-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:30px 0}.booking-card{border:2px solid #19141b;background:#18131c;color:white;text-decoration:none;padding:30px;display:flex;flex-direction:column;gap:12px;transition:background .2s}.booking-card:hover{background:#382130}.booking-card span{font-size:28px;color:var(--orange)}.booking-card strong{font-size:clamp(35px,4.5vw,59px);line-height:1}.booking-card small{font:13px system-ui}.booking-card b{background:var(--orange);color:#151313;width:max-content;padding:12px 16px;margin-top:10px}.booking-note{border-left:7px solid var(--orange);padding:8px 24px;background:#ddd0c3}.booking-note h3,.contact h3{margin:7px 0;font-size:25px}.booking-note p,.contact p{font-size:14px}.contact{border-top:2px solid #1b1519;margin-top:34px;padding-top:20px}.pending{display:inline-block;background:#1e1920;color:white;padding:10px 14px;font:13px system-ui}.last{padding:65px 0 75px}.last p{max-width:750px}.last details{max-width:850px;border-top:1px solid #675461;padding:22px 0;font:15px system-ui}.last details:last-child{border-bottom:1px solid #675461}.last summary{cursor:pointer;font-weight:800;font-size:17px}.last details a{color:#ffc28d}footer{background:#e9e0d3;color:#171218;padding:32px 0 16px}.foot{display:flex;justify-content:space-between;gap:30px}.foot strong{font-size:25px}.foot p{margin:8px 0;font-size:12px}.foot>div:last-child{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.foot a{font:12px system-ui}.legal{margin:25px auto 0;max-width:1200px;padding:12px 30px;border-top:1px solid #bca99b;color:#6e584d;font-size:11px}@media(max-width:820px){.top{height:auto;flex-wrap:wrap}.top nav{width:100%;justify-content:space-between;gap:12px;padding-bottom:10px}.hero{min-height:620px}.hero-photo{background-position:61% center}.hero-shade{background:linear-gradient(90deg,#151019ee,#16101bd0 55%,#17102150)}.hero-body{margin-left:24px;margin-right:20px}.steps{grid-template-columns:repeat(2,1fr)}.studio-grid{grid-template-columns:1fr;gap:30px}.image-back img{height:340px}.stripe{grid-template-columns:1fr 170px}}@media(max-width:540px){.wrap{padding:0 20px}.brand img{width:50px;height:50px}.brand b{font-size:20px}.brand small{font-size:10px}.top nav a{font-size:11px}.hero{min-height:620px;align-items:end}.hero-body{padding:35px 0 45px}.hero-shade{background:linear-gradient(0deg,#120e18 7%,#17101bdc 45%,#17101b77 100%)}h1{font-size:61px}.facts{gap:6px}.facts span{font-size:9px}.cta{font-size:19px}.steps{gap:22px 13px}.steps h3{font-size:20px}.studio-grid p{font-size:14px}.stripe{grid-template-columns:1fr}.stripe figure img{height:270px}.booking-grid{grid-template-columns:1fr}.booking-card strong{font-size:44px}.foot{display:block}.foot>div:last-child{margin-top:20px}}

/* V2: original photo composition, keep upper lighting visible */
.image-back img{object-position:center top;filter:contrast(1.12) saturate(.82)}
.stripe{grid-template-columns:1fr 300px}
.stripe img{height:360px;object-fit:contain;object-position:center top;filter:contrast(1.1) saturate(.83);background:#14101a}
.refs{background:#242026;color:#f5e8e0;border-top:1px solid #7b5366;border-bottom:1px solid #7b5366}
.refs p{max-width:720px}
.paper .steps article:nth-child(2){border-top-color:#d35d29}
@media(max-width:820px){.stripe{grid-template-columns:1fr 180px}.stripe img{height:325px}}
@media(max-width:540px){.stripe{grid-template-columns:1fr}.stripe img{height:420px;width:100%}}

/* V3: organic studio texture, original images retained, expanded editorial sections */
.inline-link{color:#c84c18;font-weight:800;text-decoration-thickness:2px;text-underline-offset:4px}.dark .inline-link,.production .inline-link{color:#ffa057}.pill-link{display:inline-block;margin-top:10px;background:var(--orange);padding:14px 20px;color:#171118;font:900 15px system-ui;text-decoration:none;border-radius:3px}.pill-link:hover{filter:brightness(1.12)}.production{background:#25202a;position:relative;overflow:hidden}.production:before{content:'';position:absolute;inset:0;opacity:.075;background:repeating-linear-gradient(0deg,transparent 0,transparent 29px,#f8b280 30px,transparent 31px),repeating-linear-gradient(90deg,transparent 0,transparent 75px,#f8b280 76px,transparent 77px);pointer-events:none}.production .wrap{position:relative}.process-grid{display:grid;grid-template-columns:1.6fr .7fr;gap:70px}.process-grid h3{font-size:27px}.process-grid p{color:#e5dadb}.process-aside{border:1px solid #c56c40;padding:30px;align-self:start;background:#16141aaa}.process-aside span{font:800 12px system-ui;color:#ff9850;letter-spacing:1px}.process-aside h3{font-size:38px}.encouragement{background:#d4c6b6;color:#21191c}.encouragement p{font-size:clamp(17px,2vw,21px);max-width:860px}.encouragement .stroke{color:#8c2a26}.gear{background:#16131a}.gear> .wrap>p:not(.kicker){max-width:740px}.gear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}.gear-grid>div{border:1px solid #614c58;padding:24px;background:linear-gradient(140deg,#342733,#17131b)}.gear-grid b{color:#f78c4e;font:800 11px system-ui;letter-spacing:1px}.gear-grid strong{display:block;font-size:24px;margin:14px 0}.gear-grid span{font:13px/1.5 system-ui;color:#c9b7c1}.steps article:nth-child(3) a{display:inline-block;margin-top:8px}@media(max-width:820px){.process-grid{grid-template-columns:1fr;gap:20px}.gear-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:540px){.gear-grid{grid-template-columns:1fr}}

/* V4: restrained studio-cockpit treatments, HERO UNCHANGED */
.cockpit-paper{position:relative;isolation:isolate;overflow:hidden}
.cockpit-paper:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(213,204,194,.94),rgba(213,204,194,.88)),url('assets/plugin-focusrite.webp') center 40% / cover;opacity:.98;z-index:-1}
.cockpit-paper .steps article{background:rgba(219,211,201,.68);padding:16px 14px 20px;border-top-color:#282027;backdrop-filter:blur(1px)}
.cockpit-paper .steps article:nth-child(2){border-top-color:#c85b28}
.cockpit-production:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#25202a 3%,rgba(37,32,42,.93) 48%,rgba(37,32,42,.77) 100%),url('assets/plugin-mixer.webp') center/cover;opacity:.65;pointer-events:none}
.cockpit-production .wrap{z-index:1}
.cockpit-gear{position:relative;isolation:isolate;overflow:hidden}
.cockpit-gear:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,26,.96),rgba(20,18,26,.88)),url('assets/studio-lights.webp') center/cover;z-index:-1}
.gear-showcase{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:12px;margin:30px 0 26px}
.gear-showcase figure{margin:0;position:relative;overflow:hidden;height:175px;border:1px solid #745764;background:#211923}
.gear-showcase img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) saturate(.72);transition:filter .25s,transform .25s}
.gear-showcase figure:hover img{filter:contrast(1.12) saturate(.95);transform:scale(1.035)}
.gear-showcase figcaption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#130f19e9);padding:30px 12px 10px;color:#ffb27d;letter-spacing:1px;font:800 11px system-ui}
.cockpit-gear .gear-grid>div{background:linear-gradient(140deg,rgba(60,46,60,.87),rgba(22,19,27,.9))}
@media(max-width:640px){.gear-showcase{grid-template-columns:1fr 1fr}.gear-showcase figure{height:125px}.gear-showcase figure:last-child{display:none}.cockpit-paper .steps article{padding:13px 10px 16px}}


/* V5: more layered depth across light sections, cleaner gear area */
.layered-booking,.layered-encouragement,.layered-refs,.layered-last{position:relative;isolation:isolate;overflow:hidden}
.layered-booking:before{content:"";position:absolute;inset:0;z-index:-2;background:
linear-gradient(90deg,rgba(217,209,201,.95),rgba(217,209,201,.88)),
url('assets/plugin-amek.webp') center/cover;}
.layered-booking:after{content:"";position:absolute;right:-5%;top:8%;width:42%;height:72%;z-index:-1;opacity:.12;
background:url('assets/studio-lights.webp') center/cover no-repeat;filter:grayscale(1) contrast(1.05)}
.layered-booking .booking-card{position:relative;overflow:hidden;background:#18131c}
.layered-booking .booking-card:before{content:"";position:absolute;inset:0;opacity:.16;background:url('assets/plugin-mixer.webp') center/cover;mix-blend-mode:screen}
.layered-booking .booking-card>*{position:relative}
.layered-booking .booking-note,.layered-booking .contact{background:rgba(231,220,208,.72);backdrop-filter:blur(1px)}
.layered-booking .contact{padding:20px 22px 6px;border:1px solid rgba(26,21,25,.18)}

.layered-refs:before{content:"";position:absolute;inset:0;z-index:-2;background:
linear-gradient(90deg,rgba(29,25,33,.93),rgba(29,25,33,.82)),
url('assets/control.webp') center top/cover no-repeat;filter:grayscale(.45)}
.layered-refs:after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;z-index:-1;opacity:.24;background:url('assets/studio-lights.webp') center/cover no-repeat;mix-blend-mode:screen}

.layered-encouragement:before{content:"";position:absolute;inset:0;z-index:-2;background:
linear-gradient(90deg,rgba(212,198,182,.96),rgba(212,198,182,.90)),
url('assets/victory.webp') 82% 18%/560px auto no-repeat;filter:grayscale(1) contrast(1.06)}
.layered-encouragement:after{content:"";position:absolute;left:-4%;top:0;width:36%;height:100%;z-index:-1;opacity:.10;background:url('assets/plugin-focusrite.webp') center/cover no-repeat;mix-blend-mode:multiply}

.layered-last:before{content:"";position:absolute;inset:0;z-index:-2;background:
linear-gradient(90deg,rgba(24,19,28,.96),rgba(24,19,28,.90)),
url('assets/plugin-focusrite.webp') center/cover no-repeat}
.layered-last:after{content:"";position:absolute;right:0;top:0;width:36%;height:100%;z-index:-1;opacity:.18;background:url('assets/studio-lights.webp') center/cover no-repeat;filter:grayscale(.4)}
.layered-last details{background:rgba(19,16,23,.32);padding-left:14px;padding-right:14px}

/* cleaner gear section: plugin texture inside cards instead of separate labeled strip */
.cockpit-gear .gear-grid>div{position:relative;overflow:hidden;isolation:isolate;min-height:180px;display:flex;flex-direction:column;justify-content:flex-end}
.cockpit-gear .gear-grid>div:before{content:"";position:absolute;inset:0;z-index:-2;opacity:.28;background-size:cover;background-position:center}
.cockpit-gear .gear-grid>div:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(22,18,26,.18),rgba(22,18,26,.90) 58%,rgba(22,18,26,.97))}
.cockpit-gear .gear-grid>div:nth-child(1):before{background-image:url('assets/plugin-focusrite.webp')}
.cockpit-gear .gear-grid>div:nth-child(2):before{background-image:url('assets/plugin-iron.webp')}
.cockpit-gear .gear-grid>div:nth-child(3):before{background-image:url('assets/plugin-mixer.webp')}
.cockpit-gear .gear-grid>div:nth-child(4):before{background-image:url('assets/plugin-amek.webp')}
.cockpit-gear .gear-grid strong,.cockpit-gear .gear-grid span,.cockpit-gear .gear-grid b{position:relative}
.cockpit-gear .gear-grid strong{max-width:14ch}

/* white / paper areas generally less office-like */
.paper h2,.encouragement h2{text-shadow:1px 1px 0 rgba(255,255,255,.15)}
.paper .kicker,.encouragement .kicker{position:relative;display:inline-block;padding-right:18px}
.paper .kicker:after,.encouragement .kicker:after{content:"";position:absolute;left:100%;top:50%;width:55px;height:2px;background:rgba(216,88,25,.45)}

@media(max-width:820px){
  .layered-booking:after{width:60%;opacity:.1}
  .layered-encouragement:before{background-size:420px auto;background-position:95% 22%}
}
@media(max-width:540px){
  .layered-booking .booking-note,.layered-booking .contact{background:rgba(231,220,208,.82)}
  .layered-encouragement:before{background-size:300px auto;background-position:122% 12%}
  .layered-encouragement:after{width:70%;opacity:.08}
  .layered-last details{padding-left:10px;padding-right:10px}
  .cockpit-gear .gear-grid>div{min-height:150px}
}


/* V6 cleanup: one background theme per section, no stacked boxes */
#studio{position:relative;isolation:isolate;overflow:hidden}
#studio:before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(24,19,28,.94),rgba(24,19,28,.88)),
             url('assets/studio-lights.webp') center/cover no-repeat;
  opacity:.95;filter:grayscale(.18) saturate(.95)}
#studio>.wrap{position:relative;z-index:1}

.layered-booking,.layered-refs,.layered-encouragement,.layered-last{isolation:isolate;overflow:hidden}

/* BOOKING: one image only, remove inner box overlays */
.layered-booking:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(233,224,211,.96),rgba(233,224,211,.92)),
             url('assets/plugin-mixer.webp') center/cover no-repeat;
  opacity:1}
.layered-booking:after{display:none!important}
.layered-booking .booking-card:before{display:none!important}
.layered-booking .booking-note,
.layered-booking .contact{background:transparent;border:none;backdrop-filter:none;padding-left:0;padding-right:0}
.layered-booking .booking-note{border-left:7px solid var(--orange);padding:8px 0 0 24px;margin-top:10px}
.layered-booking .contact{border-top:2px solid rgba(28,21,25,.25);padding-top:22px}

/* REFS: only one layer */
.layered-refs:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(29,25,33,.94),rgba(29,25,33,.88)),
             url('assets/control.webp') center/cover no-repeat;
  opacity:1;filter:grayscale(.5)}
.layered-refs:after{display:none!important}

/* ENCOURAGEMENT: only one layer */
.layered-encouragement:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(212,198,182,.965),rgba(212,198,182,.93)),
             url('assets/victory.webp') 92% center/560px auto no-repeat;
  opacity:1;filter:grayscale(1) contrast(1.03)}
.layered-encouragement:after{display:none!important}

/* LAST / TIPPS: one layer only, no shaded detail boxes */
.layered-last:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(24,19,28,.965),rgba(24,19,28,.91)),
             url('assets/studio-lights.webp') right center/cover no-repeat;
  opacity:1;filter:grayscale(.22)}
.layered-last:after{display:none!important}
.layered-last details{background:transparent;padding-left:0;padding-right:0}
.layered-last summary{padding-left:12px}
.layered-last details p{padding-left:12px;padding-right:12px}

/* CALMER surfaces in white areas */
.paper{background-image:none}
.cockpit-paper{position:relative;isolation:isolate;overflow:hidden}
.cockpit-paper:before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(233,224,211,.97),rgba(233,224,211,.95)),
             url('assets/plugin-focusrite.webp') center/cover no-repeat;
  opacity:1;filter:grayscale(.55) contrast(.95)}

/* gear cards keep depth but without messy stacking */
.cockpit-gear .gear-grid>div:before{opacity:.22}
.cockpit-gear .gear-grid>div:after{background:linear-gradient(180deg,rgba(22,18,26,.10),rgba(22,18,26,.84) 60%,rgba(22,18,26,.95))}

/* production keep one visual system only */
.production:before{opacity:.045}

@media(max-width:820px){
  .layered-encouragement:before{background-size:420px auto;background-position:112% center}
}
@media(max-width:540px){
  .layered-encouragement:before{background-size:300px auto;background-position:130% 18%}
  .layered-last summary,.layered-last details p{padding-left:6px;padding-right:6px}
  .layered-booking .booking-note{padding-left:16px}
}


/* V7: Feinschliff auf Basis von V6 — Header/Hero absichtlich UNVERÄNDERT. */

/* 01 — So läuft's: ein erkennbarer, einzelner Focusrite-Studio-Layer. */
.cockpit-paper:before{
  background:
    linear-gradient(90deg,rgba(227,216,204,.88) 0%,rgba(226,215,205,.81) 100%),
    url('assets/plugin-focusrite.webp') center 44%/cover no-repeat;
  opacity:1;
  filter:none;
}
.cockpit-paper .steps article{
  background:rgba(236,226,216,.35);
  backdrop-filter:none;
  border-top-color:rgba(26,21,27,.85);
}
.cockpit-paper .steps article:nth-child(2){border-top-color:#c85b28}

/* 02 — 'Deine Idee zählt' + 'Nicht glatt': stronger lights, higher in the frame. */
#studio:before{
  background:
    linear-gradient(90deg,rgba(24,19,28,.82) 0%,rgba(24,19,28,.75) 48%,rgba(24,19,28,.63) 100%),
    url('assets/studio-lights.webp') center 17%/cover no-repeat;
  opacity:1;
  filter:saturate(1.3) contrast(1.05);
}
#studio .stripe{grid-template-columns:minmax(0,1fr) 380px;align-items:center;gap:36px}
#studio .stripe figure{margin:0 18px 0 0;overflow:visible}
#studio .stripe img{
  width:100%;height:420px;object-fit:cover;object-position:50% 8%;
  background:transparent;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 11%,black 97%);
  mask-image:linear-gradient(to right,transparent 0%,black 11%,black 97%);
}

/* 03 — booking: keep original transparent cards; add one simple fair-play rule. */
.fairplay{display:flex;align-items:flex-start;gap:17px;max-width:1040px;
  font-size:14px;line-height:1.5;margin:20px 0 6px;padding:12px 0;
  border-block:1px solid rgba(28,21,25,.25);}
.fairplay strong{font:900 15px system-ui,Arial,sans-serif;letter-spacing:.03em;color:#b74618;white-space:nowrap}
.fairplay span{font-family:system-ui,Arial,sans-serif}

/* 06 — the actual victory image becomes an unmistakable, wider background motif. */
.layered-encouragement{isolation:isolate;position:relative;overflow:hidden;background:#cbb8b2}
.layered-encouragement:before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:1;filter:none;
  background:
    linear-gradient(90deg,rgba(211,199,186,.97) 0%,rgba(211,199,186,.91) 43%,rgba(211,199,186,.44) 76%,rgba(211,199,186,.24) 100%),
    url('assets/victory.webp') 82% 22%/auto 125% no-repeat;
}
.layered-encouragement:after{display:none!important}
.layered-encouragement p{max-width:770px}
.layered-encouragement .stroke{max-width:740px}

/* 07 — gear panel: one relevant genuine source per individual card. */
.cockpit-gear .gear-grid>div{min-height:245px;gap:0;justify-content:flex-end}
.cockpit-gear .gear-grid>div:before{
  content:"";inset:0;opacity:1;z-index:-2;background-repeat:no-repeat;
  background-size:cover;background-position:center;
}
.cockpit-gear .gear-grid>div:after{
  content:"";inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(14,11,18,.03) 0%,rgba(14,11,18,.14) 22%,rgba(14,11,18,.88) 63%,#141019 100%);
}
.cockpit-gear .gear-grid>div:nth-child(1):before{background-image:url('assets/mic-lewitt.webp');background-position:center 39%}
.cockpit-gear .gear-grid>div:nth-child(2):before{background-image:url('assets/processor-autotune.webp');background-size:cover;background-position:50% 12%;}
.cockpit-gear .gear-grid>div:nth-child(3):before{background-image:url('assets/ableton-mixer.webp');background-position:center 51%}
.cockpit-gear .gear-grid>div:nth-child(4):before{background-image:url('assets/plugin-alliance-screen.webp');background-position:center 42%}
.cockpit-gear .gear-grid strong{max-width:none;font-size:clamp(19px,2vw,24px);line-height:1.05;text-wrap:balance}
.cockpit-gear .gear-grid b{color:#ffaa6c;text-shadow:0 1px 5px rgba(0,0,0,.65)}
.cockpit-gear .gear-grid span{color:#efe3e3;text-shadow:0 1px 5px rgba(0,0,0,.7)}

@media(max-width:900px){
 #studio .stripe{grid-template-columns:minmax(0,1fr) 270px;gap:23px}
 #studio .stripe img{height:355px}
 .layered-encouragement:before{background-position:96% 22%;background-size:auto 115%}
 .layered-encouragement p{max-width:72%}
 .fairplay{display:block}
 .fairplay strong{display:block;margin-bottom:7px}
}
@media(max-width:600px){
 #studio .stripe{grid-template-columns:1fr}
 #studio .stripe figure{margin:0 auto;width:min(100%,350px)}
 #studio .stripe img{height:400px}
 .layered-encouragement:before{
  background:
   linear-gradient(90deg,rgba(211,199,186,.93),rgba(211,199,186,.72)),
   url('assets/victory.webp') 91% 18%/auto 105% no-repeat;
 }
 .layered-encouragement p,.layered-encouragement .stroke{max-width:100%}
 .cockpit-paper .steps article{background:rgba(236,226,216,.44)}
 .cockpit-gear .gear-grid>div{min-height:210px}
 .fairplay{font-size:13px}
}


/* V8 – gezieltes Finetuning: V7-Layout und der gesamte Hero bleiben unverändert. */

/* 01: dezenter zusätzlicher CTA direkt im ersten Schritt; keine zweite riesige Taste. */
.step-cta{display:inline-block;margin-top:13px;color:#161117;background:var(--orange);
  padding:9px 11px;font:900 11px/1.2 system-ui,Arial,sans-serif;
  letter-spacing:.04em;text-decoration:none;transition:transform .15s,background .15s}
.step-cta:hover,.step-cta:focus-visible{background:#ff9948;transform:translateY(-2px)}
.cockpit-paper .steps article{background:rgba(236,226,216,.20)}

/* 02 – studio photo with finger points upwards, warm lighting stays in frame. */
#studio .image-back img{object-fit:cover;object-position:center 8%;height:485px;
  filter:contrast(1.09) saturate(1.03);}
#studio:before{
  background:linear-gradient(90deg,rgba(24,19,28,.81),rgba(24,19,28,.72) 45%,rgba(24,19,28,.56)),
  url('assets/studio-lights.webp') center 2%/cover no-repeat;
  filter:saturate(1.38) contrast(1.08)
}

/* 02b – authentic expressive blue singer, no artificial vintage borders. */
#studio .stripe{grid-template-columns:minmax(0,1fr) minmax(330px,42%);gap:42px;margin-top:48px}
#studio .stripe figure.singer-figure{margin:0;width:100%;overflow:hidden;position:relative}
#studio .stripe figure.singer-figure img{
 width:100%;height:435px;object-fit:cover;object-position:50% 28%;background:transparent;
 filter:contrast(1.09) saturate(1.1);border:0;
 -webkit-mask-image:linear-gradient(90deg,transparent 0,black 12%,black 100%);
 mask-image:linear-gradient(90deg,transparent 0,black 12%,black 100%);
}
#studio .stripe .singer-figure figcaption{
 font:900 11px system-ui,Arial,sans-serif;letter-spacing:.14em;color:#ed83b7;
 margin-top:5px;padding-left:10%;
}

/* 04 – preserve the actual studio photograph, lamp gets a gentle, localized warm beam. */
.layered-refs:before{
 background:
  radial-gradient(ellipse 26% 76% at 78% 3%,rgba(242,181,110,.32) 0%,rgba(241,158,127,.12) 26%,transparent 83%),
  linear-gradient(90deg,rgba(29,25,33,.94),rgba(29,25,33,.84) 68%,rgba(29,25,33,.78)),
  url('assets/control.webp') center/cover no-repeat;
 filter:none;
}

/* 05 – a small turquoise water surface for the 'Kein Druck' relief moment. */
.process-aside{isolation:isolate;position:relative;overflow:hidden;
 background:linear-gradient(90deg,rgba(12,30,38,.89),rgba(10,41,46,.80)),
   url('assets/water-ripples.webp') center/cover no-repeat;
 border-color:rgba(113,220,217,.48);
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.process-aside h3{color:#e1faf5}
.process-aside span{color:#a2f4e9}
.process-aside p{color:#eef9f8}

/* 06 – portrait has its own column; no seam through copy and no reused male Victory photo. */
.layered-encouragement{background:#d0c0b6}
.layered-encouragement:before{display:none!important}
.layered-encouragement:after{display:none!important}
.voice-grid{display:grid;grid-template-columns:minmax(0,1.14fr) minmax(310px,.86fr);
 gap:clamp(24px,5vw,74px);align-items:center;min-height:565px;}
.voice-copy{position:relative;z-index:2;padding:8px 0}
.voice-copy h2{font-size:clamp(43px,4.8vw,67px);max-width:680px}
.voice-copy p{font-size:clamp(16px,1.5vw,19px);max-width:660px;line-height:1.6}
.voice-copy .stroke{font-size:22px;max-width:610px}
.voice-portrait{position:relative;align-self:stretch;margin:0;
 display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;}
.voice-portrait img{width:100%;height:100%;max-height:620px;object-fit:cover;object-position:50% 35%;
 filter:contrast(1.04) saturate(.88);
 -webkit-mask-image:linear-gradient(90deg,transparent 0,black 11%,black 100%);
 mask-image:linear-gradient(90deg,transparent 0,black 11%,black 100%);
}

/* 07 – maintain real equipment graphics, whisper of colored light below. */
.cockpit-gear{position:relative;isolation:isolate;overflow:hidden}
.cockpit-gear:before{content:'';position:absolute;inset:0;z-index:-1;
 background:linear-gradient(0deg,rgba(23,17,27,.84),rgba(23,17,27,.96)),
 url('assets/studio-lights.webp') center 80%/cover no-repeat;
 filter:saturate(1.22)}

/* 08 – more visible points of light rising from the bottom-right; still one photo-theme. */
.layered-last:before{
 background:linear-gradient(90deg,rgba(24,19,28,.94) 0%,rgba(24,19,28,.84) 50%,rgba(24,19,28,.57) 100%),
 url('assets/studio-lights.webp') right 92%/cover no-repeat;
 filter:saturate(1.5) contrast(1.04);opacity:1;
}
.layered-last:after{display:none!important}

@media(max-width:960px){
 .voice-grid{grid-template-columns:minmax(0,1fr) minmax(275px,.8fr);gap:24px}
 .voice-copy h2{font-size:clamp(42px,5.3vw,58px)}
 #studio .stripe{grid-template-columns:minmax(0,1fr) minmax(280px,40%);gap:26px}
 #studio .stripe figure.singer-figure img{height:390px}
}
@media(max-width:720px){
 .voice-grid{grid-template-columns:1fr;gap:14px;min-height:0}
 .voice-portrait{max-width:420px;width:100%;justify-self:center;min-height:370px;max-height:440px}
 .voice-portrait img{height:440px;object-position:center 23%;
   -webkit-mask-image:linear-gradient(0deg,transparent,black 10%,black 95%);
   mask-image:linear-gradient(0deg,transparent,black 10%,black 95%)}
 #studio .stripe{grid-template-columns:1fr;gap:12px}
 #studio .stripe figure.singer-figure{max-width:480px;justify-self:center;margin:auto}
 #studio .stripe figure.singer-figure img{height:440px}
 #studio .image-back img{height:390px;object-position:50% 7%}
}
@media(max-width:540px){
 .step-cta{font-size:10px;padding:8px 9px}
 .voice-copy .stroke{font-size:20px}
 .layered-last:before{background:linear-gradient(90deg,rgba(24,19,28,.94),rgba(24,19,28,.80)),
 url('assets/studio-lights.webp') 88% bottom/auto 110% no-repeat}
 .voice-portrait{min-height:330px;max-height:410px}
 .voice-portrait img{height:410px}
}

/* Final subtle portrait-edge blending and light-angle fine-tune */
.voice-portrait img{
 -webkit-mask-image:radial-gradient(ellipse 76% 76% at 52% 50%,black 54%,transparent 100%);
 mask-image:radial-gradient(ellipse 76% 76% at 52% 50%,black 54%,transparent 100%);
}
@media(max-width:720px){
 .voice-portrait img{
 -webkit-mask-image:radial-gradient(ellipse 76% 76% at 52% 48%,black 54%,transparent 100%);
 mask-image:radial-gradient(ellipse 76% 76% at 52% 48%,black 54%,transparent 100%);
 }
}
.layered-last:before{inset:-7%;transform:rotate(6deg) scale(1.04);transform-origin:80% 80%}
@media(max-width:540px){.layered-last:before{inset:-4%;transform:rotate(3deg) scale(1.07)}}

/* V9: one continuous 90-degree rotated studio-lights motif across sections 07+08 */
.continuous-cockpit{position:relative;isolation:isolate;overflow:hidden;background:#17111b}
.continuous-cockpit:before{content:"";position:absolute;z-index:-1;inset:-34% -27%;background:linear-gradient(90deg,rgba(23,17,27,.9),rgba(23,17,27,.72)),url('assets/studio-lights.webp') center / cover no-repeat;transform:rotate(90deg) scale(1.1);filter:saturate(1.5);pointer-events:none}
.continuous-cockpit .cockpit-gear,.continuous-cockpit .layered-last{background:transparent;isolation:auto;overflow:visible}
.continuous-cockpit .cockpit-gear:before,.continuous-cockpit .layered-last:before,.continuous-cockpit .layered-last:after{display:none!important}
.continuous-cockpit .layered-last{border-top:0}
.continuous-cockpit .cockpit-gear .wrap,.continuous-cockpit .layered-last .wrap{position:relative;z-index:1}
.brand-reveal{margin-top:16px;padding-top:10px;border-top:1px solid rgba(255,255,255,.27);position:relative;z-index:2}
.brand-reveal summary{font-size:12px;font-weight:800;cursor:pointer;letter-spacing:.06em;color:#ff852d;list-style:none}
.brand-reveal summary::-webkit-details-marker{display:none}
.brand-reveal figure{margin:15px 0 0;background:#ece8e2;padding:12px;border-radius:4px}
.brand-reveal img{width:100%;height:auto;display:block;filter:contrast(1.06)}
.brand-reveal figcaption{font:12px/1.5 system-ui,sans-serif;color:#252027;margin-top:8px}
.blog-teaser{background:linear-gradient(180deg,rgba(7,26,24,.28) 0%,rgba(7,26,24,.18) 24%,rgba(7,26,24,.08) 42%,rgba(7,26,24,0) 52%),linear-gradient(90deg,rgba(21,17,27,.60) 0%,rgba(21,17,27,.42) 34%,rgba(21,17,27,.18) 58%,rgba(21,17,27,.08) 100%),url('assets/blog-live-mixer.webp') center/cover;color:#f7f0e8;padding:clamp(55px,7vw,100px) 0}
.blog-teaser h2{font-size:clamp(44px,6vw,84px);line-height:1;margin:15px 0}
.blog-teaser h2 i{font-style:normal;color:#ff7928}
.blog-teaser p:not(.kicker){max-width:580px;line-height:1.7}
.blog-teaser .pill-link{display:inline-block;margin-top:16px}
@media(max-width:700px){.continuous-cockpit:before{inset:-20% -100%;transform:rotate(90deg) scale(1.25)}.brand-reveal figure{padding:8px}}

.subpage{background:linear-gradient(110deg,rgba(22,17,28,.94),rgba(22,17,28,.81)),url('assets/plugin-focusrite.webp') center/cover;color:#f6efe8;min-height:75vh;padding:80px 0 100px}
.subpage .wrap{max-width:1160px}
.subpage h1{font-size:clamp(50px,8vw,110px);margin:10px 0 24px;line-height:1}
.subpage h1 em{font-style:normal;color:#ff7b29}
.subpage h2{margin:35px 0 12px;font-size:clamp(22px,3vw,36px)}
.subpage p{line-height:1.75;max-width:780px}
.subpage a{color:#ff963f}
.page-intro{font-size:clamp(18px,2.6vw,24px);max-width:720px}
.blog-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:45px}
.blog-cards article{background:rgba(16,14,21,.78);border:1px solid rgba(255,255,255,.18);padding:28px 22px;min-height:230px}
.blog-cards article span{color:#ff812e;font-size:12px;letter-spacing:.13em;font-weight:800}
.blog-cards article h2{font-size:clamp(24px,2.4vw,32px);margin:17px 0}
.blog-cards article p{font-size:16px;color:#e2d9d4}
.subnote{border-left:4px solid #ff7b29;padding:12px 0 12px 20px;margin-top:45px;background:rgba(0,0,0,.1)}
@media(max-width:750px){.subpage{padding:45px 0}.blog-cards{grid-template-columns:1fr}.blog-cards article{min-height:0}}


/* V10: selected source image layers, three real articles and footer navigation. */
/* Water image is now visible, with protective shade ensuring contrast. */
.process-aside{background:linear-gradient(90deg,rgba(6,36,43,.88),rgba(5,53,57,.62)),url('assets/turquoise-water.webp') center / cover no-repeat;border-color:rgba(120,223,207,.56)}
/* Green natural aurora and Milky Way behind text; girl's original portrait stays unchanged. */
.layered-encouragement{position:relative;isolation:isolate;overflow:hidden;background:#0a141c;color:#f5f0e9}
.layered-encouragement:before{display:block!important;content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,16,26,.96) 0%,rgba(7,16,26,.89) 37%,rgba(7,16,26,.50) 70%,rgba(7,16,26,.56) 100%),url('assets/aurora-stars.webp') center 58% / cover no-repeat;opacity:1;filter:none}
.layered-encouragement .kicker{color:#ff8537}
.layered-encouragement .stroke{color:#ffc79d}
.layered-encouragement h2,.layered-encouragement h2 i{color:inherit;text-shadow:none}
.layered-encouragement h2 i{color:#ff8a38}
.layered-encouragement .voice-portrait img{filter:contrast(1.05) saturate(.91);-webkit-mask-image:radial-gradient(ellipse 79% 83% at 53% 50%,black 54%,transparent 100%);mask-image:radial-gradient(ellipse 79% 83% at 53% 50%,black 54%,transparent 100%)}
/* One uninterrupted light image for sections 07 and 08: luminaires at lower left, beams rising. */
.continuous-cockpit{background:#081c1c}
.continuous-cockpit:before{display:block;inset:0;transform:none;background:linear-gradient(90deg,rgba(8,20,22,.86) 0%,rgba(8,20,22,.72) 50%,rgba(8,20,22,.60) 100%),url('assets/studio-lightbeams.webp') left bottom / cover no-repeat;filter:none;opacity:1}
.continuous-cockpit .cockpit-gear{padding-bottom:clamp(36px,5vw,72px)}
.continuous-cockpit .layered-last{padding-top:clamp(38px,5vw,76px)}
.continuous-cockpit .layered-last details{background:rgba(9,17,21,.6)}
/* Return-navigation within subpages and footer. */
.back-link{display:inline-flex;align-items:center;gap:8px;color:#f8ac70!important;font:800 14px/1.3 system-ui,sans-serif;text-decoration:none;border-bottom:1px solid rgba(255,158,71,.48);padding:8px 0}
.back-link:hover,.back-link:focus-visible{color:#fff!important;border-color:#fff}
.page-return{margin-top:60px}
.bottom-back{margin-top:14px;padding-bottom:26px}
.social-link{display:inline-block;color:#fff!important;border:1px solid rgba(255,255,255,.5);padding:12px 17px;margin:12px 0 0 12px;font:800 14px/1.2 system-ui,sans-serif;text-decoration:none}
.social-link:hover{background:#ffffff22}
/* Blog cards and full article typography. */
.blog-cards article{display:flex;flex-direction:column}
.blog-cards article h2{overflow-wrap:anywhere}
.card-read{margin-top:auto;padding-top:18px;color:#ff9c56!important;font:900 13px/1.5 system-ui,sans-serif;text-decoration:none;letter-spacing:.05em}
.card-read:hover{text-decoration:underline}
.blog-upcoming{margin-top:58px;border-top:1px solid rgba(255,255,255,.22);padding-top:22px}
.blog-upcoming h2{font-size:27px!important}
.article-page{background:linear-gradient(115deg,rgba(14,17,26,.98),rgba(14,17,26,.90)),url('assets/control.webp') top center / auto 900px no-repeat}
.article-page .wrap{max-width:980px}
.article-page h1{font-size:clamp(41px,6vw,76px);line-height:1.07;margin-top:16px}
.article-page .page-intro{font-size:clamp(18px,2.3vw,23px);line-height:1.6;color:#ffca9d;margin-bottom:38px}
.article-body{padding:clamp(20px,4.5vw,55px);background:rgba(7,10,17,.65);border:1px solid rgba(255,255,255,.13);color:#f0e9e5}
.article-body h2{margin:42px 0 15px;font-size:clamp(22px,3vw,32px);line-height:1.25;color:#ffa15c}
.article-body h2:first-child{margin-top:0}
.article-body p{font-size:clamp(16px,1.45vw,19px);line-height:1.82;margin:0 0 18px;max-width:100%}
.article-body strong{color:#ffcd9f}
.article-body hr{border:0;border-top:1px solid rgba(255,255,255,.26);margin:38px 0}
.article-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px;margin-top:32px}
@media(max-width:720px){.layered-encouragement:before{background:linear-gradient(180deg,rgba(7,16,26,.96),rgba(7,16,26,.84) 60%,rgba(7,16,26,.55)),url('assets/aurora-stars.webp') 50% 0% / auto 100% no-repeat}.continuous-cockpit:before{inset:0;transform:none;background:linear-gradient(90deg,rgba(6,18,20,.84),rgba(6,18,20,.66)),url('assets/studio-lightbeams.webp') 22% bottom/auto 100% no-repeat}.social-link{margin-left:0;display:table}.article-body{padding:23px}.article-actions{align-items:flex-start;flex-direction:column}}
/* Keep all seven menu links comfortably inside narrow phones. */
@media(max-width:700px){.top nav{flex-wrap:wrap;justify-content:flex-start;column-gap:15px;row-gap:11px}.top nav a{white-space:nowrap}}

/* V12: the portrait carries its own long, gradual alpha fade. */
.layered-encouragement .voice-portrait img{-webkit-mask-image:none;mask-image:none}

/* V13 minimal: preserve complete transparent portrait edges, including responsive layouts. */
.layered-encouragement .voice-portrait img{object-fit:contain;object-position:center center;-webkit-mask-image:none;mask-image:none}
