@import url("assets/fonts/fonts.css");
/* Tokens: Snapshot aus tokens/tokens.css. Der Ordner site/ ist eigenständig deploybar. */
:root {
  --aplai-color-graphit: #14161A;
  --aplai-color-anthrazit: #1B1E23;
  --aplai-color-linie: #2A2E34;
  --aplai-color-sand: #D8C3A0;
  --aplai-color-sand-dunkel: #8A6E3E;
  --aplai-color-kalk: #EDEEF0;
  --aplai-color-zink: #8C949B;
  --aplai-color-zink-dunkel: #79818A;
  --aplai-color-weiss: #FFFFFF;
  --aplai-font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --aplai-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --aplai-size-display: clamp(44px, 6.2vw, 84px);
  --aplai-size-h2: clamp(30px, 3.4vw, 42px);
  --aplai-size-h3: 20px;
  --aplai-size-lead: 20px;
  --aplai-size-body: 17px;
  --aplai-size-small: 14px;
  --aplai-size-label: 12px;
  --aplai-weight-light: 300;
  --aplai-weight-regular: 400;
  --aplai-weight-medium: 500;
  --aplai-space-1: 4px;
  --aplai-space-2: 8px;
  --aplai-space-3: 12px;
  --aplai-space-4: 16px;
  --aplai-space-5: 24px;
  --aplai-space-6: 32px;
  --aplai-space-7: 48px;
  --aplai-space-8: 64px;
  --aplai-space-9: 96px;
  --aplai-space-10: 128px;
  --aplai-layout-max: 1120px;
  --aplai-layout-gutter: 28px;
  --aplai-layout-measure: 66ch;
  --aplai-radius-none: 0;
}

:root{--aplai-layout-gutter:clamp(28px,4vw,40px);--aplai-space-section:clamp(64px,9vw,128px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--aplai-color-graphit);color:var(--aplai-color-kalk);font-family:var(--aplai-font-sans);font-size:var(--aplai-size-body);line-height:1.55;font-weight:300;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:300;line-height:1.1;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--aplai-color-sand)}
a:hover{color:#E4D3B6}
:focus-visible{outline:2px solid var(--aplai-color-sand);outline-offset:3px}
.wrap{max-width:var(--aplai-layout-max);margin:0 auto;padding:0 var(--aplai-layout-gutter)}
.label{font-family:var(--aplai-font-mono);font-size:var(--aplai-size-label);letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--aplai-color-sand)}
.label.q{color:var(--aplai-color-zink)}
.muted{color:var(--aplai-color-zink)}
.btn{display:inline-flex;align-items:center;height:48px;padding:0 30px 0 22px;font:500 15px/1 var(--aplai-font-sans);text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:var(--aplai-color-sand);color:var(--aplai-color-graphit);border-top-right-radius:48px}
.btn-primary:hover{background:#E4D3B6;color:var(--aplai-color-graphit)}
.btn-secondary{background:transparent;color:var(--aplai-color-kalk);box-shadow:inset 0 0 0 1px var(--aplai-color-linie);padding:0 22px}
.btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--aplai-color-zink);color:var(--aplai-color-kalk)}
/* Kopfzeile */
.site-head{position:sticky;top:0;z-index:30;background:var(--aplai-color-graphit);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.stuck{border-bottom-color:var(--aplai-color-linie)}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:20px}
.head-in img{height:26px;width:auto;display:block}
.nav{display:flex;gap:28px;align-items:center;font-size:14.5px;font-weight:400}
.nav a{color:var(--aplai-color-kalk);text-decoration:none}
.nav a:hover{color:var(--aplai-color-sand)}
.lang{font-family:var(--aplai-font-mono);font-size:12px;letter-spacing:.1em;color:var(--aplai-color-zink);display:flex;gap:6px}
.lang a{color:var(--aplai-color-zink);text-decoration:none}
.lang a:hover{color:var(--aplai-color-kalk)}
.lang b{color:var(--aplai-color-kalk);font-weight:500}
/* Opener */
.hero{min-height:max(560px,86vh);display:flex;flex-direction:column;justify-content:space-between;padding-bottom:40px;animation:fade .7s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero-in{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;max-width:760px;padding:40px 0}
.hero h1{font-size:clamp(40px,5.2vw,72px);letter-spacing:-.03em}
.hero .lead{font-size:var(--aplai-size-lead);color:#B9BFC5;max-width:46ch}
.cue{display:inline-flex;align-items:center;gap:12px;color:var(--aplai-color-zink);text-decoration:none;font-family:var(--aplai-font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;align-self:flex-start}
.cue:hover{color:var(--aplai-color-kalk)}
/* Abschnitte */
section[id]{scroll-margin-top:74px}
.sec{padding-block:var(--aplai-space-section)}
.sec-line{border-top:1px solid var(--aplai-color-linie)}
.head-block{max-width:780px;display:flex;flex-direction:column;gap:14px}
.head-block h2{font-size:var(--aplai-size-h2);letter-spacing:-.015em}
.head-block .lead{font-size:var(--aplai-size-lead);color:#C6CBD0;max-width:58ch}
.grid-1px{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--aplai-color-linie);margin-top:48px}
.grid-1px article{background:var(--aplai-color-graphit);padding:30px 26px;display:flex;flex-direction:column;gap:12px}
.grid-1px h3{font-size:20px;font-weight:500}
/* Angebot: Dachleistung über drei Schritten */
.offer{margin-top:48px}
.umbrella{background:var(--aplai-color-anthrazit);border:1px solid var(--aplai-color-linie);padding:38px 34px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:34px;align-items:start}
.umbrella h3{font-size:clamp(24px,2.4vw,30px);font-weight:400;letter-spacing:-.015em;margin:12px 0 14px}
.umbrella p{color:#C6CBD0;font-size:16.5px}
.u-note{border-left:1px solid var(--aplai-color-sand-dunkel);padding-left:18px;font-size:15.5px}
.brace{position:relative;height:38px}
.brace::before{content:"";position:absolute;left:16.6%;right:16.6%;top:18px;height:1px;background:var(--aplai-color-linie)}
.brace i{position:absolute;width:1px;background:var(--aplai-color-linie)}
.brace i:nth-child(1){left:50%;top:0;height:18px}
.brace i:nth-child(2){left:16.6%;top:18px;bottom:0}
.brace i:nth-child(3){left:50%;top:18px;bottom:0}
.brace i:nth-child(4){left:83.4%;top:18px;bottom:0}
.steps{list-style:none;margin:0;padding:0;border:1px solid var(--aplai-color-linie);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--aplai-color-linie)}
.steps li{position:relative;background:var(--aplai-color-graphit);padding:30px 26px;display:flex;flex-direction:column;gap:12px}
.steps h3{font-size:20px;font-weight:500}
.steps p{color:#B9BFC5;font-size:15.5px}
.steps .n{font-family:var(--aplai-font-mono);font-size:13px;letter-spacing:.12em;color:var(--aplai-color-sand)}
.steps li+li::before{content:"";position:absolute;left:-5px;top:38px;width:9px;height:9px;border-top:1px solid var(--aplai-color-sand-dunkel);border-right:1px solid var(--aplai-color-sand-dunkel);transform:rotate(45deg);background:var(--aplai-color-graphit)}
.grid-1px p{color:#B9BFC5;font-size:15.5px}
.principles{margin-top:24px}
.sub-label{margin-top:72px}
.principles p{color:#C6CBD0;font-size:16px}
.proofs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px}
.proofs article{background:var(--aplai-color-anthrazit);padding:26px;display:flex;flex-direction:column;gap:10px}
.proofs h3{font-size:18px;font-weight:500}
.proofs.fade{margin-top:24px;-webkit-mask-image:linear-gradient(#000 10%,rgba(0,0,0,.22));mask-image:linear-gradient(#000 10%,rgba(0,0,0,.22))}
.proofs p{color:#B9BFC5;font-size:15px}
/* Gründer */
.founder{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:56px;align-items:start}
.founder .txt{display:flex;flex-direction:column;gap:16px;max-width:60ch}
.founder h2{font-size:var(--aplai-size-h2);letter-spacing:-.015em}
.founder p{color:#C6CBD0}
.stations{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--aplai-color-linie)}
.stations li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr);gap:20px;padding:14px 0;border-bottom:1px solid var(--aplai-color-linie);align-items:baseline}
.stations .st{font-family:var(--aplai-font-mono);font-size:13px;letter-spacing:.04em;color:var(--aplai-color-kalk)}
.stations .st b{display:block;font-weight:500}
.stations .st span{color:var(--aplai-color-zink);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.stations p{font-size:15px;color:#B9BFC5}
.ph{aspect-ratio:4/5;background:var(--aplai-color-anthrazit);background-image:repeating-linear-gradient(135deg,var(--aplai-color-linie) 0 1px,transparent 1px 9px);display:flex;align-items:flex-end;padding:16px}
.ph span{font-family:var(--aplai-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--aplai-color-zink)}
/* Kontakt */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.contact .txt{display:flex;flex-direction:column;gap:16px}
.contact h2{font-size:var(--aplai-size-h2);letter-spacing:-.015em}
.contact .lead{font-size:var(--aplai-size-lead);color:#C6CBD0;max-width:52ch}
.contact dl{margin:0;display:flex;flex-direction:column;border-top:1px solid var(--aplai-color-linie)}
.contact dl>div{display:grid;grid-template-columns:120px 1fr;padding:12px 0;border-bottom:1px solid var(--aplai-color-linie);font-size:15.5px}
.contact dd{margin:0;color:#C6CBD0}
.contact dd a{color:var(--aplai-color-sand);text-decoration:none}
/* Fußzeile */
.site-foot{border-top:1px solid var(--aplai-color-linie);margin-top:var(--aplai-space-section)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px;font-size:14px;color:var(--aplai-color-zink);flex-wrap:wrap}
.foot-in img{height:18px;width:auto;display:block}
.foot-l{display:flex;align-items:center;gap:12px}
.foot-r{display:flex;align-items:center;gap:24px}
.foot-r a{color:var(--aplai-color-zink);text-decoration:none}
.foot-r a:hover{color:var(--aplai-color-kalk)}
/* 3D-Journey */
.journey{height:500vh;position:relative}
.stage{position:sticky;top:0;height:100vh;max-width:1200px;margin:0 auto;padding:74px var(--aplai-layout-gutter) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:center;gap:40px;overflow:hidden}
.caps{position:relative;min-height:250px}
.caps ol{list-style:none;margin:0;padding:0}
.cap{position:absolute;left:0;top:0;max-width:40ch;opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.cap.on{opacity:1;transform:none}
.cap .n{font-family:var(--aplai-font-mono);font-size:13px;color:var(--aplai-color-sand)}
.cap h3{font-size:30px;font-weight:300;letter-spacing:-.01em;margin:10px 0 12px}
.cap p{color:#B9BFC5;font-size:17px}
.ticks{position:absolute;left:0;bottom:0;display:flex;gap:6px}
.ticks i{display:block;width:30px;height:2px;background:var(--aplai-color-linie);transition:background .3s}
.ticks i.on{background:var(--aplai-color-sand)}
.scene{perspective:1600px;display:grid;place-items:center}
.world{position:relative;width:min(440px,64vw);aspect-ratio:1;transform-style:preserve-3d;will-change:transform}
.world .grid{position:absolute;inset:0;border:1px solid var(--aplai-color-linie);opacity:var(--g,.25);background-image:linear-gradient(var(--aplai-color-linie) 1px,transparent 1px),linear-gradient(90deg,var(--aplai-color-linie) 1px,transparent 1px);background-size:25% 25%}
.base{position:absolute;inset:-5%;background:var(--aplai-color-anthrazit);border:1px solid var(--aplai-color-linie);transform:translateZ(-18px);opacity:var(--b,0)}
.cell{position:absolute;width:25%;height:25%;transform-style:preserve-3d}
.tile{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(var(--z,0px))}
.tile svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.face .o{fill:none;stroke:var(--aplai-color-sand);stroke-opacity:.38;stroke-width:1.2;vector-effect:non-scaling-stroke}
.face .f{fill:var(--aplai-color-sand);fill-opacity:var(--f,0)}
.side{opacity:var(--f,0)}
.side path{fill:var(--aplai-color-sand-dunkel)}
.s1{transform:translateZ(-5px)}
.s2{transform:translateZ(-10px)}
.no-js .journey,.rm .journey{height:auto}
.no-js .stage,.rm .stage{position:static;height:auto;padding:40px var(--aplai-layout-gutter);grid-template-columns:1fr}
.no-js .cap,.rm .cap{position:static;opacity:1;transform:none;margin-bottom:28px}
.no-js .caps,.rm .caps{min-height:0}
.no-js .ticks,.rm .ticks{display:none}
.no-js .face .f{fill-opacity:1}
@media (max-width:900px){
.grid-1px,.proofs,.founder,.contact,.umbrella,.steps{grid-template-columns:1fr}
.brace{display:none}
.steps{margin-top:1px}
.principles{margin-top:24px}
.steps li+li::before{display:none}
.u-note{border-left:0;border-top:1px solid var(--aplai-color-sand-dunkel);padding:14px 0 0}
.founder,.contact{gap:32px}
.stations li{grid-template-columns:1fr;gap:6px}
.proofs{gap:1px;background:var(--aplai-color-linie)}
.stage{grid-template-columns:1fr;align-content:center;gap:24px}
.caps{min-height:200px;order:2}
.nav{gap:18px}
.nav .n-hide{display:none}
.ph{max-width:340px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cap{transition:none}.hero{animation:none}}