@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:Figtree;src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--nacht:#2a0a4a;--pink:#ff3d9a;--tuerkis:#19d8c6;--flieder:#c9b5ff;--lila:#6b3bd6;--creme:#fff6fb;--weiss:#fff;
--display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:Figtree,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--nacht);font:400 1.15rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}a:focus-visible{outline:4px solid var(--pink);outline-offset:3px}
.wrap{max-width:1040px;margin:0 auto;padding:0 1.5rem;position:relative}
/* Kopf mit großer Bühne */
.top{background:var(--nacht);color:var(--weiss);position:relative;overflow:hidden}
.brand{padding:1.5rem 0 0;font:800 1.2rem var(--display);letter-spacing:-.01em;color:var(--tuerkis)}
.hero{padding:4rem 0 7rem;position:relative}
h1{font:800 clamp(3rem,10vw,7rem)/.95 var(--display);letter-spacing:-.045em;margin:0 0 1.8rem;max-width:11ch}
.hero p{max-width:34ch;margin:0 0 1rem;font-size:1.3rem;color:#efe7ff}
.hero .small{color:var(--flieder);font-size:1.08rem}
.k{position:absolute;border-radius:50%;pointer-events:none}
.k1{width:520px;height:520px;background:var(--pink);right:-140px;top:-120px}
.k2{width:300px;height:300px;border:46px solid var(--tuerkis);right:140px;bottom:-130px}
.k3{width:120px;height:120px;background:var(--flieder);right:60px;bottom:90px}
.k4{width:70px;height:70px;background:var(--lila);right:420px;top:60px}
.welle{display:block;width:100%;height:64px;margin-top:-1px;position:absolute;bottom:-1px;left:0}
/* Kontakt */
.kontakt{padding:4.5rem 0 5rem}
h2{font:800 clamp(2rem,5vw,3.2rem)/1 var(--display);letter-spacing:-.03em;margin:0 0 .8rem}
.lead{margin:0 0 2.4rem;max-width:44ch;font-size:1.2rem}
.people{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;padding:0;margin:0;list-style:none}
.people li{border-radius:30px;padding:2rem 2rem 1.9rem;display:flex;flex-direction:column;gap:1.1rem;min-height:190px;justify-content:space-between}
.people li:nth-child(1){background:var(--pink);color:var(--nacht)}
.people li:nth-child(2){background:var(--tuerkis);color:var(--nacht)}
.people li:nth-child(3){background:var(--flieder);color:var(--nacht)}
.people li:nth-child(4){background:var(--lila);color:var(--weiss)}
.people b{font:800 clamp(1.7rem,3.4vw,2.3rem)/1.05 var(--display);letter-spacing:-.025em}
.mail{align-self:flex-start;background:var(--weiss);color:var(--nacht);border-radius:999px;padding:.6rem 1.2rem;font-weight:700;font-size:1.05rem;text-decoration:none;word-break:break-all;transition:transform .15s}
.mail:hover{transform:translateY(-2px)}
/* Wohnort */
.ort{background:var(--tuerkis);padding:4.5rem 0;position:relative;overflow:hidden}
.ort h2{font-size:clamp(2.2rem,6vw,4rem)}
.ort p{margin:0;max-width:44ch;font-size:1.25rem}
.ort .k{width:240px;height:240px;border:40px solid var(--pink);right:-60px;top:-70px}
/* Fuß */
footer{background:var(--nacht);color:var(--flieder);padding:1.8rem 0 2.2rem;font-size:1rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
footer a{color:var(--weiss);text-decoration-color:var(--pink);text-underline-offset:3px;text-decoration-thickness:2px}
/* Unterseite Datenschutz */
.page{padding:3rem 0 5rem}.page h1{font-size:clamp(2.2rem,6vw,3.6rem);max-width:none;margin-bottom:1rem}
.page h2{font-size:1.4rem;letter-spacing:-.01em;margin:2rem 0 .4rem}.page p{max-width:66ch;margin:0 0 1rem}
.page .top{padding-bottom:1.2rem}
@media(max-width:760px){
 .people{grid-template-columns:1fr}.hero{padding:2.6rem 0 6rem}
 .k1{width:340px;height:340px;right:-170px;top:-110px}.k2{width:200px;height:200px;border-width:30px;right:-40px;bottom:-110px}.k3{display:none}.k4{display:none}
 .kontakt{padding:3.2rem 0 3.6rem}.ort{padding:3.2rem 0}
}
@media(prefers-reduced-motion:reduce){.mail{transition:none}}
