/* Ein Hintergrund je Entwurf. Alle Inhaltsflächen liegen frei darauf. */
.studio{--canvas:#edf2fa;--surface:#ffffff;--surface-shadow:0 16px 42px #263f6e0c,0 3px 9px #263f6e05;background:var(--canvas)}
.personal{--canvas:#f3e6dd;--surface:#fffaf6;--surface-shadow:0 18px 46px #604c3910,0 3px 8px #604c3906;background:var(--canvas)}
.curious{--canvas:#eeebf7;--surface:#fff;--surface-shadow:0 18px 46px #4931850d,0 3px 8px #49318505;background:var(--canvas)}
:is(.studio,.personal,.curious) .site-header{background:var(--surface);height:auto;min-height:88px;margin-top:24px;padding:20px 28px;border-radius:24px;box-shadow:var(--surface-shadow)}
:is(.studio,.personal,.curious) .section{padding:24px 0}
:is(.studio,.personal,.curious) .section>.wrap,
:is(.studio,.personal,.curious) .personal-hero>.wrap,
:is(.studio,.personal,.curious) .contact-inner,
:is(.studio,.personal,.curious) .studio-hero,
:is(.studio,.personal,.curious) .curious-hero{background:var(--surface);padding:56px;border-radius:32px;box-shadow:var(--surface-shadow)}
:is(.studio,.personal,.curious) .studio-hero,
:is(.studio,.personal,.curious) .curious-hero{margin-top:36px;margin-bottom:18px;min-height:620px;gap:45px}
.studio .studio-hero h1{font-size:clamp(3rem,5vw,5.1rem)}
.studio .hero-work{height:400px}
:is(.studio,.personal,.curious) .about-band,
:is(.studio,.personal,.curious) .work-area,
.personal .personal-hero,
:is(.studio,.personal,.curious) .contact-band,
:is(.studio,.personal,.curious) .intro-strip{background:transparent}
.personal .personal-hero{padding:36px 0 0}
.personal .personal-hero-grid{gap:65px}
.personal .personal-hero h1{font-size:clamp(3rem,5.2vw,5.2rem)}
.studio .intro-strip{padding:20px 0 0}
.studio .intro-strip>.wrap{background:var(--surface);padding:20px 32px;border-radius:22px;box-shadow:var(--surface-shadow)}
:is(.studio,.personal,.curious) .contact-band{padding:24px 0;color:var(--ink)}
:is(.studio,.personal,.curious) .contact-inner p{color:var(--muted)}
:is(.studio,.personal,.curious) .contact-inner .button{background:var(--accent);border-color:var(--accent);color:white}
:is(.studio,.personal,.curious) .footer{padding-top:25px}
.personal .name-object{box-shadow:0 14px 20px #183f4508;border:0}
:is(.studio,.personal,.curious) .project-shot{box-shadow:0 8px 18px #14244209}
:is(.studio,.personal,.curious) .ludonect{box-shadow:0 8px 18px #14244207;border-radius:18px}
.personal .ludonect{background:#f5e9e0}
.personal .personal-interests article{padding:24px;background:#f2f6f3;border-radius:16px}
.curious .experiment{box-shadow:0 12px 22px #4931850a}
@media(max-width:1000px){
 :is(.studio,.personal,.curious) .section>.wrap,
 :is(.studio,.personal,.curious) .personal-hero>.wrap,
 :is(.studio,.personal,.curious) .contact-inner,
 :is(.studio,.personal,.curious) .studio-hero,
 :is(.studio,.personal,.curious) .curious-hero{padding:36px}
 .personal .personal-hero-grid{gap:35px}
}
@media(max-width:760px){
 :is(.studio,.personal,.curious) .site-header{margin-top:16px;padding:20px;gap:18px;border-radius:20px}
 :is(.studio,.personal,.curious) .section{padding:15px 0}
 :is(.studio,.personal,.curious) .section>.wrap,
 :is(.studio,.personal,.curious) .personal-hero>.wrap,
 :is(.studio,.personal,.curious) .contact-inner,
 :is(.studio,.personal,.curious) .studio-hero,
 :is(.studio,.personal,.curious) .curious-hero{padding:30px 24px;border-radius:24px}
 :is(.studio,.personal,.curious) .studio-hero,
 :is(.studio,.personal,.curious) .curious-hero{margin-top:24px;margin-bottom:0;gap:38px;min-height:0}
 .studio .studio-hero h1{font-size:clamp(2.5rem,8vw,3.9rem)}
 .studio .hero-work{height:340px}
 .personal .personal-hero{padding:24px 0 0}
 .personal .personal-hero h1{font-size:clamp(2.6rem,8vw,3.9rem)}
 .personal .personal-hero-grid{gap:40px}
 .curious .curious-hero h1{font-size:clamp(2.15rem,7.1vw,3.7rem)}
 .curious .experiment{padding:18px}
 .curious .mini-content{grid-template-columns:1fr;padding:22px;min-height:200px}
 .curious .mini-copy strong{max-width:12ch;font-size:25px}
 .curious .mini-art{display:none}
 .curious .experiment-title{flex-wrap:wrap;gap:4px}
 .studio .intro-strip>.wrap{padding:18px 24px}
 :is(.studio,.personal,.curious) .about-grid,
 :is(.studio,.personal,.curious) .process,
 .personal .story-grid{gap:26px}
 :is(.studio,.personal,.curious) h2{font-size:2rem}
 :is(.studio,.personal,.curious) .ludonect{padding:24px 18px}
 :is(.studio,.personal,.curious) .project-shot{padding:14px}
 :is(.studio,.personal,.curious) .project-heading{align-items:flex-start;flex-direction:column;gap:6px}
 .personal .personal-interests{gap:18px}
 .personal .personal-interests article{padding:20px;grid-template-columns:28px 1fr;gap:0 12px}
 .personal .personal-interests h3{font-size:23px}
 .personal .personal-interests .interest-icon{font-size:24px}
}
@media(max-width:400px){
 :is(.studio,.personal,.curious) .site-header{padding:18px 14px}
 :is(.studio,.personal,.curious) .nav{font-size:11px;gap:6px}
 :is(.studio,.personal,.curious) .nav .button{font-size:11px;padding:8px}
 .studio .hero-work{height:270px}
 .curious .curious-hero h1{font-size:2.02rem}
 :is(.studio,.personal,.curious) .section>.wrap,
 :is(.studio,.personal,.curious) .personal-hero>.wrap,
 :is(.studio,.personal,.curious) .contact-inner,
 :is(.studio,.personal,.curious) .studio-hero,
 :is(.studio,.personal,.curious) .curious-hero{padding:28px 20px}
 :is(.studio,.personal,.curious) h2{font-size:1.8rem;overflow-wrap:break-word}
 :is(.studio,.personal,.curious) .in-progress{gap:12px}
 :is(.studio,.personal,.curious) .in-progress img{width:62px}
}