/* pexora.net - eigenstaendig, PX UI 1.0.1 (Stil M1, Marke #5b3a8c). Keine externen Abrufe. */
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-Medium-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Poppins;src:url(/assets/fonts/poppins-SemiBold-latin.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{
 color-scheme:dark;
 --bg:#0c0c0e;--bgimg:radial-gradient(75% 65% at 50% 46%,rgba(74,45,122,.34) 0%,rgba(59,34,102,.12) 55%,transparent 80%),#0c0c0e;
 --text:#eceef4;--mut:#a7a5b2;--link:#c4b0ee;--linie:#2a2833;--ring:#b08cf0;
 --px:#fff;--halo:rgba(169,139,224,.30);--halo2:rgba(91,58,140,.12);
 --k1:rgba(190,165,240,.28);--k2:rgba(210,190,255,.5);--k3:#fff;--kg:rgba(180,150,240,.9);--lin:rgba(255,255,255,.4);
 --gs:#6a3fa0;--glut:190,160,255;--fdim:.34;
}
@media (prefers-color-scheme:light){:root{
 color-scheme:light;
 --bg:#f4f3f7;--bgimg:radial-gradient(75% 65% at 50% 46%,rgba(169,139,224,.22) 0%,rgba(169,139,224,.07) 55%,transparent 80%),#f4f3f7;
 --text:#1c1a24;--mut:#5a5668;--link:#5b3a8c;--linie:#d9d6e2;--ring:#5b3a8c;
 --px:#5b3a8c;--halo:rgba(91,58,140,.16);--halo2:rgba(91,58,140,.05);
 --k1:rgba(91,58,140,.25);--k2:rgba(60,30,110,.5);--k3:#2a1450;--kg:rgba(120,80,190,.7);--lin:rgba(91,58,140,.45);
 --gs:#fff;--glut:91,58,140;--fdim:.2;
}}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--bgimg);color:var(--text);font:500 1rem/1.6 Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--link);text-underline-offset:.2em}
a:focus-visible{outline:2px solid var(--ring);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--bg);padding:.5rem 1rem;z-index:9}
/* Startseite */
.buehne{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(20px,5vh,40px);padding:2rem 1rem 1rem;text-align:center;overflow:hidden}
.wrap{position:relative;display:flex;align-items:center;justify-content:center;width:min(70vw,420px)}
.marke{width:100%;aspect-ratio:313/166;overflow:visible;display:block;position:relative}
.satz{margin:0;max-width:30ch;text-wrap:balance;font-size:clamp(1.125rem,4.6vw,1.5rem);line-height:1.5;color:var(--text);opacity:0;animation:ein 1.2s ease 2s forwards}
@keyframes ein{to{opacity:1}}
.fuss{padding:1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;gap:1.75rem;font-size:.8125rem}
.fuss a{color:var(--mut);text-decoration:none;padding:.5rem .25rem}
.fuss a:hover{color:var(--text);text-decoration:underline}
/* Lichtlauf (V1a) */
.halo{position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,var(--halo),var(--halo2) 50%,transparent 75%);opacity:0;animation:halo-ein 1s ease 1.2s forwards,atmen 4.2s ease-in-out 2.2s infinite;pointer-events:none}
@keyframes halo-ein{to{opacity:1}}
@keyframes atmen{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1}50%{transform:translate(-50%,-50%) scale(1.12);opacity:.55}}
.marke path{stroke-linejoin:round;stroke-linecap:round}
.lin{fill:none;stroke:var(--lin);stroke-width:1;stroke-dasharray:1 2;animation:zeich 1.25s both,lin-aus .6s ease 1.25s forwards}
@keyframes zeich{0%{stroke-dashoffset:1;animation-timing-function:cubic-bezier(.65,0,.35,1)}87.7%,100%{stroke-dashoffset:0}}
@keyframes lin-aus{to{stroke-opacity:0}}
.c{fill:none;animation-duration:1.25s,.1s;animation-delay:0s,1.3s;animation-fill-mode:both,forwards}
@keyframes kaus{to{opacity:0}}
.c1{stroke:var(--k1);stroke-width:2;stroke-dasharray:.2 2;animation-name:lauf1,kaus}
.c2{stroke:var(--k2);stroke-width:2;stroke-dasharray:.11 2;animation-name:lauf2,kaus}
.c3{stroke:var(--k3);stroke-width:2.6;stroke-dasharray:.04 2;animation-name:lauf3,kaus}
.cg{filter:url(#gw)}
.cg .c{stroke:var(--kg);stroke-width:5}
.fdim{fill:var(--px);fill-opacity:0;animation:fdim .5s ease .95s forwards}
@keyframes fdim{to{fill-opacity:var(--fdim)}}
.wisch{clip-path:inset(-10% 100% -10% -10%);animation:wisch .85s cubic-bezier(.5,0,.2,1) 1.3s forwards}
@keyframes wisch{to{clip-path:inset(-10% -10% -10% -10%)}}
.wisch path{fill:var(--px)}
.gl1{fill:url(#gg);transform:translateX(-130px) skewX(-22deg);animation:gl 1s cubic-bezier(.5,0,.2,1) 1.3s both}
@keyframes gl{from{transform:translateX(-130px) skewX(-22deg)}to{transform:translateX(480px) skewX(-22deg)}}
.gl2{fill:url(#gs);transform:translateX(-130px) skewX(-22deg);animation:gl2 7s linear 4.2s infinite}
@keyframes gl2{0%{transform:translateX(-130px) skewX(-22deg)}16%,100%{transform:translateX(480px) skewX(-22deg)}}
.aus-glut{animation:glut 4.2s ease-in-out 2.4s infinite}
@keyframes glut{0%,100%{filter:drop-shadow(0 0 4px rgba(var(--glut),.25))}50%{filter:drop-shadow(0 0 16px rgba(var(--glut),.6))}}
.blitz{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.3);background:radial-gradient(closest-side,rgba(255,255,255,.55),rgba(190,160,255,.18) 50%,transparent 72%);opacity:0;animation:blitz .9s ease-out 1.55s;pointer-events:none}
@media (prefers-color-scheme:light){.blitz{background:radial-gradient(closest-side,rgba(169,139,224,.45),rgba(169,139,224,.12) 50%,transparent 72%)}}
@keyframes blitz{0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes lauf1{0%{stroke-dashoffset:.2;animation-timing-function:cubic-bezier(.65,0,.35,1)}87.7%{stroke-dashoffset:-.8;animation-timing-function:ease-out}100%{stroke-dashoffset:-.9}}
@keyframes lauf2{0%{stroke-dashoffset:.11;animation-timing-function:cubic-bezier(.65,0,.35,1)}87.7%{stroke-dashoffset:-.89;animation-timing-function:ease-out}100%{stroke-dashoffset:-.99}}
@keyframes lauf3{0%{stroke-dashoffset:.04;animation-timing-function:cubic-bezier(.65,0,.35,1)}87.7%{stroke-dashoffset:-.96;animation-timing-function:ease-out}100%{stroke-dashoffset:-1.06}}
@media (prefers-reduced-motion:reduce){
 .halo,.blitz,.nur-bewegung{display:none!important}
 .marke,.aus-glut{animation:none!important}
 .wisch{clip-path:none;animation:none!important}
 .fdim{animation:none!important;fill-opacity:0}
 .satz{animation:ein .6s ease both!important}
 @keyframes ein{from{opacity:0}to{opacity:1}}
}
/* Rechtsseiten */
.seite{flex:1;width:100%;max-width:44rem;margin:0 auto;padding:1.5rem 1.25rem 2rem}
.seite .kopf{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}
.seite .kopf img{width:44px;height:auto;display:block}
.seite .kopf a{display:inline-flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none;font-size:.9375rem;padding:.25rem}
.seite .kopf .px{width:44px;aspect-ratio:313/166;background:var(--px);-webkit-mask:url(/assets/px-maske.svg) center/contain no-repeat;mask:url(/assets/px-maske.svg) center/contain no-repeat}
h1{font-weight:600;font-size:clamp(1.5rem,6vw,2rem);line-height:1.25;margin:0 0 .5rem}
h2{font-weight:600;font-size:1.125rem;line-height:1.35;margin:2rem 0 .5rem}
.seite p,.seite li{color:var(--text)}
.seite .stand,.seite .hinweis{color:var(--mut);font-size:.875rem}
.seite ul{padding-left:1.25rem}
.ph{background:rgba(176,140,240,.18);border-radius:3px;padding:0 .25em;font-weight:600;white-space:nowrap}
.seite .zurueck{display:inline-block;margin-top:2rem}
.s0{stop-color:var(--gs);stop-opacity:0}.s1{stop-color:var(--gs);stop-opacity:.3}
