@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/montserrat-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/inter-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}

:root{
  --ivory:#F8F6F2; --paper-0:#FFFFFF; --paper-2:#F1EFEA; --stone:#D9D7D1;
  --line-1:#E2E0DA; --graphite:#6B6B6B; --ink-4:#9A9A98; --ink-2:#3A3A39;
  --charcoal:#0E0E0E; --forest-4:#2E4A3F; --forest-1:#EAEEEB;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:var(--ivory);color:var(--ink-2);font-family:"Inter",system-ui,sans-serif;
     font-weight:300;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:"Montserrat",system-ui,sans-serif;font-weight:300;letter-spacing:.04em;
         color:var(--charcoal)}
.eyebrow{font-family:"Inter",sans-serif;font-weight:500;font-size:clamp(9px,1.5vw,11px);
         letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
.rule{width:48px;height:1px;background:var(--stone)}

/* ---------- 3D-Bühne ---------- */
#scene{position:fixed;inset:0;z-index:0}
#scene canvas{display:block;width:100%;height:100%}
#stage{position:fixed;inset:0;z-index:2;pointer-events:none;
       display:flex;align-items:center;justify-content:center;padding:0 7vw}
#scrim{position:absolute;inset:0;opacity:0;pointer-events:none}
.beat{position:absolute;max-width:min(760px,86vw);text-align:center;opacity:0;will-change:opacity,transform}
.beat .eyebrow{margin-bottom:clamp(14px,2.4vh,22px)}
.beat h1{font-size:clamp(30px,6.4vw,74px);line-height:1.12;margin-bottom:clamp(14px,2.4vh,22px)}
.beat h2{font-size:clamp(24px,5vw,54px);line-height:1.16;margin-bottom:clamp(12px,2vh,20px)}
.beat p{font-size:clamp(13px,1.9vw,18px);color:var(--graphite);max-width:46ch;margin:0 auto}
.beat h1,.beat h2,.beat .brandline{transition:none}
#stage.dark .beat h1,#stage.dark .beat h2,#stage.dark .brandline{color:#fff}
#stage.dark .beat p{color:#C6C6C3}
#stage.dark .beat .eyebrow{color:#9A9A98}
#stage.dark .beat .rule{background:var(--forest-4)}
#stage.dark .cta{background:#fff;color:var(--charcoal)}
.beat .rule{margin:0 auto clamp(14px,2.4vh,22px)}

.brandline{font-family:"Montserrat",sans-serif;font-weight:500;
           font-size:clamp(17px,3.6vw,36px);letter-spacing:.3em;text-transform:uppercase;
           color:var(--charcoal)}
.cta{display:inline-block;margin-top:clamp(18px,3vh,30px);padding:14px 26px;border-radius:2px;
     background:var(--charcoal);color:#fff;text-decoration:none;font-weight:500;
     font-size:clamp(10px,1.5vw,12px);letter-spacing:.1em;text-transform:uppercase}
#spacer{height:640vh;position:relative;z-index:1}

/* Navigation */
#nav{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;
     justify-content:space-between;padding:clamp(16px,2.4vh,24px) clamp(20px,5vw,48px);
     mix-blend-mode:normal;transition:color .5s ease}
#nav .mark{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:.3em;
           text-transform:uppercase;font-size:clamp(9px,1.5vw,12px);color:var(--charcoal);
           transition:color .5s ease}
#nav .lnk{font-weight:500;font-size:clamp(9px,1.4vw,11px);letter-spacing:.12em;
          text-transform:uppercase;color:var(--graphite);text-decoration:none;transition:color .5s ease}
#nav.on-dark .mark{color:#fff}
#nav.on-dark .lnk{color:#A8A8A6}

/* Scroll-Hinweis */
#cue{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(20px,4vh,40px);z-index:4;
     font-weight:500;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4)}
#cue .bar{display:block;width:1px;height:34px;background:var(--stone);margin:10px auto 0;
          transform-origin:top;animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{transform:scaleY(.2)}45%{transform:scaleY(1)}100%{transform:scaleY(.2)}}

/* ---------- Inhalt über der Szene ---------- */
#content{position:relative;z-index:3;background:var(--ivory)}
.sec{padding:clamp(64px,13vh,140px) clamp(20px,6vw,64px);max-width:1120px;margin:0 auto}
.sec h2{font-size:clamp(24px,4.4vw,46px);line-height:1.18;margin:16px 0 clamp(26px,4vh,46px)}
.lead{font-size:clamp(13px,1.9vw,17px);color:var(--graphite);max-width:52ch}
.cards{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:1fr}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.tilt{background:var(--paper-0);border:1px solid var(--line-1);border-radius:4px;
      padding:clamp(22px,3.2vw,34px);will-change:transform,opacity;transform-style:preserve-3d}
.tilt .n{font-weight:500;font-size:10px;letter-spacing:.2em;color:var(--ink-4);margin-bottom:18px}
.tilt h3{font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(14px,1.9vw,18px);
         margin-bottom:10px}
.tilt p{font-size:clamp(12.5px,1.6vw,14px);color:var(--graphite)}
.facts{display:flex;border-top:1px solid var(--line-1);border-bottom:1px solid var(--line-1)}
.fact{flex:1;padding:clamp(22px,3.4vh,34px) 10px;text-align:center;border-right:1px solid var(--line-1)}
.fact:last-child{border-right:0}
.fact .n{font-family:"Montserrat",sans-serif;font-weight:300;font-size:clamp(22px,3.6vw,38px);
         color:var(--charcoal)}
.fact .l{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:6px}
.inv{background:var(--charcoal);color:#fff}
.inv .sec{padding-top:clamp(64px,12vh,120px);padding-bottom:clamp(64px,12vh,120px)}
.inv h2{color:#fff}
.inv .lead{color:#BFBFBD}
.inv .rule{background:var(--forest-4)}
.inv .cta{background:#fff;color:var(--charcoal)}
footer{background:var(--charcoal);color:#8A8A88;padding:clamp(34px,6vh,58px) clamp(20px,6vw,64px);
       font-size:12px;position:relative;z-index:3}
footer .mark{font-family:"Montserrat",sans-serif;font-weight:500;letter-spacing:.3em;
             text-transform:uppercase;color:#fff;font-size:11px;display:block;margin-bottom:18px}
footer .legal{margin-top:22px;padding-top:16px;border-top:1px solid #262626;font-size:10.5px;color:#6B6B69}

/* ---------- Sprunglink und Fokus ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--charcoal);color:#fff;
      padding:12px 18px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--forest-4);outline-offset:3px}
.inv a:focus-visible,footer a:focus-visible{outline-color:#fff}

/* ---------- Kontaktformular ---------- */
.form{margin-top:clamp(28px,4.5vh,44px);max-width:660px}
.f2{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.f2{grid-template-columns:1fr 1fr}}
.fld{display:block;margin-bottom:14px}
.fld>span{display:block;font-family:"Inter",sans-serif;font-weight:500;font-size:10px;
          letter-spacing:.16em;text-transform:uppercase;color:#9A9A98;margin-bottom:7px}
.fld input,.fld textarea{width:100%;background:transparent;color:#fff;
  border:1px solid #33352F;border-radius:2px;padding:12px 13px;
  font-family:"Inter",sans-serif;font-weight:300;font-size:14px;line-height:1.5}
.fld textarea{resize:vertical;min-height:120px}
.fld input:hover,.fld textarea:hover{border-color:#4A4D45}
.fld input:focus,.fld textarea:focus{border-color:var(--forest-4)}
.fld input[aria-invalid="true"],.fld textarea[aria-invalid="true"]{border-color:#8E3A2C}
.fldmsg{display:block;margin-top:6px;font-size:11.5px;color:#C98679}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.chk{display:flex;gap:11px;align-items:flex-start;margin:18px 0 4px;
     font-size:12.5px;color:#BFBFBD;line-height:1.55}
.chk input{margin-top:3px;width:15px;height:15px;accent-color:var(--forest-4);flex:none}
.chk a{color:#fff;text-underline-offset:3px}
.form .cta{margin-top:22px;border:0;cursor:pointer;font-family:"Inter",sans-serif}
.form .cta[disabled]{opacity:.5;cursor:default}
.formnote{margin-top:16px;font-size:12.5px;color:#BFBFBD;min-height:1.2em}
.formnote.ok{color:#C3D0C9}
.formnote.err{color:#C98679}

/* ---------- Fußbereich ---------- */
.flinks{margin-top:16px;display:flex;gap:20px}
.flinks a{color:#A8A8A6;text-decoration:none;font-size:11.5px;padding:0}
.flinks a:hover{color:#fff}

/* ---------- Rechtstextseiten ---------- */
.doc{max-width:760px;margin:0 auto;padding:clamp(88px,14vh,140px) clamp(20px,6vw,64px) clamp(56px,10vh,110px)}
.doc h1{font-size:clamp(26px,4.6vw,44px);line-height:1.18;margin:14px 0 clamp(26px,4vh,40px)}
.doc h2{font-family:"Montserrat",sans-serif;font-weight:500;font-size:clamp(15px,2.1vw,19px);
        letter-spacing:.04em;margin:clamp(30px,4.4vh,44px) 0 10px}
.doc h3{font-family:"Inter",sans-serif;font-weight:500;font-size:13.5px;letter-spacing:.04em;
        margin:22px 0 6px;color:var(--ink-2)}
.doc p,.doc li{font-size:14px;color:var(--graphite);margin-bottom:10px}
.doc ul{margin:0 0 10px 18px}
.doc a{color:var(--ink-2);text-underline-offset:3px}
.doc .back{display:inline-block;margin-top:clamp(34px,5vh,52px);font-weight:500;font-size:10px;
           letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);text-decoration:none}
.doc .back:hover{color:var(--charcoal)}
mark.ph{background:#F3E7D8;color:#6B5330;padding:1px 4px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  #cue .bar{animation:none}
  .beat{transition:none}
}