@font-face{font-family:Spinnaker;src:url(Spinnaker-Regular.ttf) format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--font-body:16px;--font-intro:16px;--cream:#fff3df;--ink:#153c3e;--copper:#b24a20;--copper-dark:#943814;--petrol:#124547}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.6 Spinnaker,Arial,sans-serif}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:5px}a:focus-visible,summary:focus-visible{outline:3px solid #b56b37;outline-offset:5px}h1,h2,p,figure{margin:0}h1,h2{font-weight:400}.skip-link{position:fixed;left:18px;top:-80px;z-index:50;background:var(--cream);border:1px solid var(--copper);padding:10px 15px}.skip-link:focus{top:15px}
/* Eine zusammenhängende Malereiebene. Texte und Originalmotiv sind eigenständig. */
.page-shell{position:relative;container-type:inline-size;width:min(100%,1586px);margin-inline:auto;overflow-x:clip}.page-canvas{position:relative;isolation:isolate;min-height:62.55cqw}.page-paint{position:absolute;inset:0;z-index:-2;background:url(B-paint-production.png) center top/100% 100% no-repeat;pointer-events:none}
/* Proportionaler Desktopaufbau auf Basis der B-Referenz 1586 × 992. */
.site-header{position:absolute;z-index:20;inset:0 0 auto;height:9cqw}.brand{position:absolute;left:4.006%;top:2.377cqw;display:block;line-height:1.4}.brand:hover{text-decoration:none}.brand-name{display:block;font-size:2.151cqw;line-height:1.15;letter-spacing:-.025em;margin-bottom:.38cqw}.keep-phrase{white-space:nowrap}.brand-description,.brand-audience{display:block;font-size:.95cqw;line-height:1.5}.desktop-nav{position:absolute;left:39.61%;top:2.744cqw;width:53.56%;display:flex;align-items:center;justify-content:space-between;gap:.9cqw;font-size:.95cqw;line-height:1.4;white-space:nowrap}.desktop-nav a{padding:.12cqw 0}.mobile-menu{display:none}.mobile-menu summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu nav{position:absolute;right:5%;top:90px;display:flex;flex-direction:column;gap:15px;min-width:245px;max-width:90vw;padding:24px;background:var(--cream);border:1px solid #d7b48a;border-radius:12px;box-shadow:0 10px 28px #163f3c21;font-size:14px}
.hero{position:relative;height:37.537cqw}.hero-copy{position:absolute;z-index:5;left:4.006%;top:14.317cqw;width:40.5%}.hero-copy h1{font-size:3.042cqw;line-height:1.25;letter-spacing:-.02em;white-space:nowrap}.hero-copy p{width:36cqw;max-width:100%;margin-top:.963cqw;font-size:var(--font-intro);line-height:1.5}.hero-actions{display:flex;gap:1.1cqw;flex-wrap:wrap;margin-top:1.99cqw}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:1.1cqw;min-height:3.338cqw;padding:.58cqw 1.85cqw;border:1px solid var(--copper);border-radius:4cqw;font:400 1.261cqw/1.4 Spinnaker,Arial,sans-serif;white-space:nowrap}.button:hover{text-decoration:none;filter:brightness(.96)}.button span{font-family:Arial,sans-serif;font-size:1.4cqw;line-height:1}.button-primary{color:#fff6e6;background:linear-gradient(155deg,#c85e2d,#af451b)}.button-secondary{color:var(--copper-dark);background:#fff3dfb3}
.keyvisual{position:absolute;z-index:3;left:46.29%;top:8.53cqw;width:46.5%;isolation:isolate}.keyvisual-original{position:relative;z-index:1;display:block;width:100%;height:auto;mask-image:url(original-protection.svg);mask-size:100% 100%;mask-repeat:no-repeat}.kv-thread-extensions{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.audiences{position:relative;height:25.013cqw;z-index:4}.audience-grid{position:relative;width:100%;height:100%}.audience{position:absolute;top:0;display:block;scroll-margin-top:25px}.audience-adults{left:4.006%;width:25.3%}.audience-adults:after{content:"";position:absolute;right:-3.6cqw;top:0;bottom:-.4cqw;width:1px;background:linear-gradient(transparent,#d9aa7666 8%,#d9aa7666 92%,transparent)}.audience-parents{left:35.83%;width:26.1%}.audience-youth{left:69.065%;width:27.2%;color:#fff3df;isolation:isolate}.audience h2{font-size:2.151cqw;line-height:1.3;letter-spacing:-.025em}.audience p{font-size:var(--font-body);line-height:1.6;margin-top:1.208cqw}.audience>.button{min-height:3.264cqw;margin-top:1.122cqw}.audience-adults>.button{min-width:15.58cqw}.audience-parents>.button{min-width:15.1cqw}.audience-youth>.button{min-width:17.4cqw}.audience-heading{display:flex;align-items:center;gap:.9cqw;white-space:nowrap}.coming-soon{display:inline-block;border:1px solid #c4d6cd55;border-radius:2cqw;padding:.25cqw .75cqw;background:#487b7a66;color:#fff6e4;font-size:1.02cqw;line-height:1.3;white-space:nowrap}.mobile-youth-art{display:none}
/* B05: kleinere runde Perlen; weicher Originalreflex statt harter Glanzspitze. */
.relationship-flow{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.relationship-flow path{stroke-width:1.65;stroke-linecap:round;vector-effect:non-scaling-stroke}
.extra-pearl{position:absolute;z-index:6;display:block;width:1.41cqw;height:1.41cqw;border-radius:50%;overflow:hidden;transform:translate(-50%,-50%);pointer-events:none;box-shadow:.04cqw .09cqw .15cqw #5b351c38;background:radial-gradient(circle at 38% 29%,var(--pearl-light),var(--pearl-mid) 42%,var(--pearl-shade) 78%,var(--pearl-edge))}
.extra-pearl.copper{--pearl-light:#f3c5a0;--pearl-mid:#c85b29;--pearl-shade:#9a351c;--pearl-edge:#783322}
.extra-pearl.gold{--pearl-light:#f5d7a2;--pearl-mid:#d99b43;--pearl-shade:#a66b2a;--pearl-edge:#814a23}
.extra-pearl.petrol{--pearl-light:#bed8cb;--pearl-mid:#4c9b98;--pearl-shade:#20616a;--pearl-edge:#19414b}
.extra-pearl:before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:url(keyvisual-v7.png);background-size:2882.758621% 1622.413793%;background-position:74.287485% 3.171008%;filter:blur(.18px) contrast(.93) saturate(.96);pointer-events:none}
.extra-pearl.copper:before{background-size:3483.333333% 1960.416667%;background-position:34.605911% 9.182531%}
.extra-pearl.petrol:before{filter:blur(.18px) hue-rotate(137deg) saturate(.65) contrast(.93) brightness(.93)}
/* Die helle Reflexkante bleibt bei Normalansicht wahrnehmbar. Keine breite Aura. */
.relationship-flow path.thread-highlight{stroke-width:.7;transform:translateY(-.3px)}
.kv-thread-extensions path.thread-highlight{transform:translateY(-.55px)}
.pearl-left{left:37.201%;top:30.454cqw}
.pearl-middle{left:59.647%;top:34.678cqw;width:1.19cqw;height:1.19cqw}
.pearl-upper-right{left:93.758%;top:34.048cqw;width:1.56cqw;height:1.56cqw}
.pearl-lower-right{left:93.001%;top:54.792cqw;width:2.08cqw;height:2.08cqw}
@media(min-width:1587px){.page-paint{mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}}
/* Tablet und Mobil verwenden dieselbe lesbare, gestapelte Komposition. */
@media(max-width:1100px){
 .page-canvas{min-height:0}.page-paint{display:none}.desktop-nav,.desktop-break,.relationship-flow,.extra-pearl,.audience-adults:after{display:none}
 .site-header{position:relative;height:auto;min-height:111px;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 6% 16px;gap:15px;background:transparent}.brand{position:relative;top:auto;left:auto;max-width:calc(100% - 32px)}.brand-name{font-size:24px;letter-spacing:-.7px;line-height:1.2;margin-bottom:6px}.brand-description,.brand-audience{font-size:10px;line-height:1.5;max-width:340px}.mobile-menu{display:block;position:static;margin-top:8px;font-size:0;flex-shrink:0}.mobile-menu summary span{font-size:0}.mobile-menu nav{right:6%;top:100px;font-size:14px}
 .hero{display:flex;flex-direction:column;height:auto;padding:0 6%}.keyvisual{position:relative;top:auto;left:auto;width:100%;max-width:580px;margin:24px auto 0;order:0}.keyvisual:before{content:"";position:absolute;z-index:-1;left:-19%;top:-20%;width:138%;height:140%;background:url(kv-surround-empty.png) center/100% 100% no-repeat;mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),linear-gradient(transparent,#000 9%,#000 68%,transparent 90%);mask-composite:intersect}.hero-copy{position:relative;top:auto;left:auto;width:100%;max-width:580px;margin:10px auto 0;order:1}.hero-copy h1{font-size:32px;line-height:1.25;letter-spacing:-.7px;white-space:normal}.hero-copy p{width:auto;max-width:460px;font-size:var(--font-intro);line-height:1.65;margin-top:15px}.hero-actions{margin-top:22px;gap:12px}.button{font-size:14px;min-height:43px;padding:9px 21px;gap:26px;border-radius:26px}.button span{font-size:20px}
 .audiences{height:auto;padding:37px 8% 105px}.audience-grid{display:flex;flex-direction:column;gap:32px;height:auto}.audience{position:relative;top:auto;left:auto;display:block;max-width:560px;width:100%;margin-inline:auto}.audience h2{font-size:26px;line-height:1.3;margin:0}.audience p{font-size:var(--font-body);line-height:1.65;margin:15px 0 19px}.audience>.button{font-size:14px;margin:0;min-height:43px;min-width:0;padding:9px 21px;gap:25px}.audience-youth{padding:31px 0 25px;margin-top:8px}.audience-heading{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;white-space:normal}.coming-soon{font-size:10px;line-height:1.4;border-radius:18px;padding:3px 8px}.mobile-youth-art{position:absolute;z-index:-1;display:block;inset:-75px -25vw -65px -55vw;background:url(youth-paint.png) center/100% 100% no-repeat;pointer-events:none}
}
@media(max-width:380px){
 .brand-name{font-size:21px}.brand-description,.brand-audience{font-size:9px}.hero-copy h1{font-size:29px}.hero-actions{gap:10px}.button,.audience>.button{font-size:13px;padding:9px 18px;gap:21px}.audience-heading{gap:9px;flex-wrap:wrap}.audience h2{font-size:25px}
}