/* AXODREN — Company-Seite (04.09.2026) */

/* Regelwand: Punktraster, das sich beim Scrollen (oder von selbst) zum Wort fügt; Maus tuscht zusätzlich */
.wall{position:relative;background:#fff;min-height:calc(100vh + 60vh)}
.wall__pin{position:sticky;top:var(--nav-h,57px);height:calc(100vh - var(--nav-h,57px));overflow:hidden}
.wall canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wall__copy{position:absolute;left:clamp(1.2rem,4vw,4rem);bottom:clamp(1.4rem,6vh,3.6rem);max-width:30rem;pointer-events:none}
.wall__eyebrow{margin:0 0 1rem;font:700 .72rem/1 var(--read);letter-spacing:.22em;text-transform:uppercase;color:#77777e}
.wall h1{margin:0 0 1rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.08;letter-spacing:-.01em}
.wall h1 .xf{font-family:"Axodren Display Ext","Axodren Display",sans-serif}
.wall__copy p:last-child{margin:0;color:#55555c;font-size:1rem;line-height:1.6}
@media (max-width:880px){.wall{min-height:calc(100vh + 40vh)}}
@media (prefers-reduced-motion:reduce){.wall{min-height:0}.wall__pin{position:static;height:min(80vh,720px)}}

/* Manifest-Header (nicht mehr genutzt, Baustein bleibt) */
.manifest{background:#fff;min-height:min(86vh,820px);display:grid;align-items:center;padding:clamp(3rem,8vh,5rem) 0}
.manifest .inner{max-width:76rem}
.manifest__eyebrow{margin:0 0 1.6rem;font:700 .72rem/1 var(--read);letter-spacing:.22em;text-transform:uppercase;color:#77777e}
.manifest__line{margin:0;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,5.2vw,5.2rem);line-height:1.04;letter-spacing:-.015em;color:var(--ink);opacity:0;transform:translateY(.35em);transition:opacity .7s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.manifest__line+.manifest__line{margin-top:.35em}
.manifest__line.on{opacity:1;transform:none}
.manifest__line .xf{font-family:"Axodren Display Ext","Axodren Display",sans-serif}
.manifest__line--soft{color:#9a9aa0}
.manifest__sub{margin:2rem 0 0;max-width:34rem;color:var(--mut);font-size:1rem;line-height:1.65;opacity:0;transition:opacity .7s ease .3s}
.manifest__sub.on{opacity:1}

/* Prinzipien (schwarz): vier Kacheln, Hover zeigt das System dahinter */
.princ{background:var(--ink);color:var(--bone);padding:clamp(3rem,8vh,5rem) 0}
.princ h2{margin:0 0 .8rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;max-width:34rem}
.princ__lead{margin:0 0 clamp(2rem,5vh,3rem);color:#b9b9c0;font-size:.98rem;line-height:1.65;max-width:38rem}
.princ__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.2rem,2.4vw,2rem)}
.princ__item{position:relative;display:block;color:inherit}
.princ__vis{position:relative;overflow:hidden;border-radius:.6rem;background:#000;aspect-ratio:1}
.princ__vis img{display:block;width:100%;height:100%;object-fit:cover;filter:invert(1);transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease}
.princ__vis .ph{position:absolute;inset:0;aspect-ratio:auto}
.princ__log{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.6rem .9rem .9rem;list-style:none;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.78) 55%,rgba(0,0,0,0) 100%);font:400 .68rem/1.6 var(--mono);letter-spacing:.03em;color:#f2f1ef}
.princ__log li{opacity:0;transform:translateX(-.4rem);transition:opacity .35s ease,transform .45s ease;transition-delay:calc(var(--d)*.5s + .25s)}
.princ__log li::before{content:"› ";color:#9a9aa0}
.princ__item.is-live .princ__log li{opacity:1;transform:none}
.princ__stamp{position:absolute;top:.8rem;right:.8rem;padding:.4rem .6rem;border:2px solid #f2f1ef;border-radius:.2rem;background:rgba(0,0,0,.85);font:700 .68rem/1 var(--read);letter-spacing:.16em;text-transform:uppercase;color:#f2f1ef;opacity:0;transform:rotate(-8deg) scale(1.8);transition:opacity .25s ease,transform .35s cubic-bezier(.2,1.4,.4,1);transition-delay:1.9s}
.princ__item.is-live .princ__stamp{opacity:1;transform:rotate(-8deg) scale(1)}
.princ__item{cursor:pointer}
.princ__item:hover .princ__vis img,.princ__item:focus-within .princ__vis img{transform:scale(1.04)}
.princ__no{margin:1rem 0 .3rem;display:flex;justify-content:space-between;align-items:center;font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:#9a9aa0}
.princ__no::after{content:"+";font:400 1.1rem/1 var(--mono);color:#f2f1ef;transition:transform .3s ease}
.princ__item.is-open .princ__no::after{transform:rotate(45deg)}
.princ__more{margin:0;max-height:0;overflow:hidden;opacity:0;color:#b9b9c0;font-size:.88rem;line-height:1.55;transition:max-height .5s cubic-bezier(.16,1,.3,1),opacity .4s ease,margin .4s ease}
.princ__more b{display:block;font:700 .7rem/1 var(--read);letter-spacing:.18em;text-transform:uppercase;color:#9a9aa0;margin-bottom:.4rem}
.princ__item.is-open .princ__more{max-height:16rem;opacity:1;margin-top:.8rem}
.princ h3{margin:0 0 .4rem;font-family:var(--disp);font-weight:700;font-size:1.15rem;line-height:1.25}
.princ__item>p{margin:0;color:#b9b9c0;font-size:.9rem;line-height:1.6}

/* TRACE — das Verfahren: links haften die Buchstaben, die sich beim Scrollen zum Wort fügen */
.trace{position:relative;background:var(--ink);color:var(--bone);padding:clamp(3rem,8vh,5rem) 0;--trace-gap:clamp(2rem,6vw,7rem)}
.trace::before{content:"";position:absolute;top:0;bottom:0;left:0;background:#fff;width:calc(max(var(--pad),(100% - 76rem)/2) + (min(76rem,100% - 2*var(--pad)) - var(--trace-gap))*5/12 + var(--trace-gap)/2)}
.trace .inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--trace-gap);align-items:start}
.trace__side{position:sticky;top:clamp(4.5rem,12vh,7rem);color:var(--ink)}
.trace__side h2{margin:0 0 1rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;color:var(--ink)}
.trace__word{margin:0 0 1rem;display:flex;gap:.02em;font-family:var(--disp);font-weight:700;font-size:clamp(4rem,9vw,8rem);line-height:1;letter-spacing:-.02em}
.trace__word span{color:transparent;-webkit-text-stroke:2px #c9c9cf;transition:color .4s ease,-webkit-text-stroke-color .4s ease}
.trace__word span.on{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.trace__word span.cur{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.trace__lead{margin:0;max-width:24rem;color:#55555c;font-size:.95rem;line-height:1.6}
.trace__meter{position:relative;height:2px;margin-top:1.4rem;background:#e2e2e6;overflow:hidden}
.trace__meter i{position:absolute;inset:0;background:var(--ink);transform-origin:left;transform:scaleX(.2);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.trace__steps{display:grid;gap:clamp(2.5rem,7vh,5rem)}
.trace__step{min-height:min(56vh,520px);display:grid;align-content:center;opacity:.38;transition:opacity .5s ease}
.trace__step.on{opacity:1}
.trace__ltr{margin:0 0 .4rem;font-family:var(--disp);font-weight:700;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;letter-spacing:-.02em;color:#f2f1ef}
.trace__ltr small{display:inline-block;margin-left:.6rem;font:400 .74rem/1 var(--mono);letter-spacing:.08em;color:#9a9aa0;vertical-align:middle}
.trace__step h3{margin:0 0 .6rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.15}
.trace__step p{margin:0;color:#b9b9c0;font-size:.95rem;line-height:1.65;max-width:30rem}
.trace__step p b{display:block;margin-top:.9rem;font:700 .7rem/1 var(--read);letter-spacing:.18em;text-transform:uppercase;color:#f2f1ef}
.trace__step p span{display:block;color:#b9b9c0}

/* Womit wir arbeiten — Label ist Pflicht */
.tools{background:#fff;padding:clamp(3rem,8vh,5rem) 0 clamp(3.2rem,8vh,5.2rem);overflow:hidden}
.tools .inner{margin-bottom:clamp(1.8rem,4vh,2.6rem)}
.tools h2{margin:0 0 .6rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em}
.tools__lead{margin:0;color:var(--mut);font-size:.98rem;line-height:1.65;max-width:40rem}

/* Was Sie von uns nicht bekommen (weiß) */
.nope{position:relative;background:#fff;color:var(--ink);padding:clamp(3rem,8vh,5rem) 0;--nope-gap:clamp(2rem,6vw,7rem)}
.nope::before{content:"";position:absolute;top:0;bottom:0;left:0;background:var(--ink);width:calc(max(var(--pad),(100% - 76rem)/2) + (min(76rem,100% - 2*var(--pad)) - var(--nope-gap))*5/12 + var(--nope-gap)/2)}
.nope .inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--nope-gap);align-items:start}
.nope__head{position:sticky;top:calc(var(--nav-h,57px) + 2rem);color:#f2f1ef}
.nope h2{margin:0 0 .8rem;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,3.1vw,3rem);line-height:1.08;letter-spacing:-.01em;color:#f2f1ef}
.nope__lead{margin:0;color:#b9b9c0;font-size:.98rem;line-height:1.65;max-width:26rem}
.nope ol{list-style:none;margin:0;padding:0;counter-reset:nope}
.nope li{counter-increment:nope;display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem 1rem;padding:1.4rem 0;border-top:1px solid #e2e2e6;cursor:pointer}
.nope li:last-child{border-bottom:1px solid #e2e2e6}
.nope li::before{content:counter(nope,decimal-leading-zero);grid-column:1;grid-row:1/3;font:400 .74rem/1.9 var(--mono);letter-spacing:.06em;color:#9a9aa0}
.nope__pitch{grid-column:2;margin:0 0 .4rem;font-family:var(--disp);font-weight:700;font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.2;letter-spacing:-.01em;color:#111;min-height:1.2em;transition:color .5s}
.nope__txt{position:relative;display:inline;background-image:linear-gradient(#111,#111);background-repeat:no-repeat;background-size:0% 3px;background-position:0 62%;transition:background-size .55s cubic-bezier(.7,0,.3,1)}
.nope__txt::after{content:"";display:inline-block;width:.08em;height:.95em;background:#111;vertical-align:-.12em;margin-left:.06em;opacity:0}
.nope li.is-typing .nope__txt::after{opacity:1;animation:nopeBlink .7s steps(1) infinite}
@keyframes nopeBlink{50%{opacity:0}}
.nope li.is-struck .nope__pitch{color:#9a9aa0}
.nope li.is-struck .nope__txt{background-size:100% 3px}
.nope__strike{display:none}
.nope__real{grid-column:2;opacity:0;transform:translateY(.5rem);transition:opacity .5s .15s,transform .5s .15s}
.nope li.is-done .nope__real{opacity:1;transform:none}
.nope__real b{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;line-height:1.25;margin-bottom:.3rem}
.nope__real b::before{content:"Stattdessen: ";font:400 .72rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#9a9aa0;display:block;margin-bottom:.35rem}
.nope__real span{color:#55555c;font-size:.92rem;line-height:1.55}
@media (prefers-reduced-motion:reduce){
  .nope li .nope__pitch{color:#9a9aa0}
  .nope li .nope__txt{background-size:100% 3px;transition:none}
  .nope li .nope__real{opacity:1;transform:none;transition:none}
  .nope li .nope__txt::after{display:none}
}
.nope b{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;line-height:1.25;margin-bottom:.3rem}
.nope span{color:#55555c;font-size:.92rem;line-height:1.55}

@media (max-width:880px){
  .princ__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trace::before{display:none}
  .trace .inner{grid-template-columns:1fr;gap:1.6rem}
  .trace__side{position:static;background:#fff;padding:1.4rem var(--pad);margin:0 calc(-1*var(--pad))}
  .trace__word{font-size:3.4rem}
  .trace__step{min-height:0;opacity:1}
  .nope::before{display:none}
  .nope .inner{grid-template-columns:1fr;gap:1.6rem}
  .nope__head{position:static;background:var(--ink);padding:1.4rem var(--pad);margin:0 calc(-1*var(--pad))}
}
@media (max-width:560px){.princ__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.manifest__line,.manifest__sub{opacity:1;transform:none;transition:none}.trace__word span,.trace__step,.trace__meter i,.princ__vis img,.princ__out{transition:none}.trace__step{opacity:1}.trace__word span{color:var(--ink);-webkit-text-stroke-color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.princ__log li,.princ__stamp,.princ__more,.princ__no::after{transition:none}}