/* UNFALLX Startseite – Konzern-Design: Schwarz, Horizont-Licht, Glas, Dynamic Island. Laedt als letzte Datei nur auf der Startseite (body#ux) und ueberlagert das bisherige Design. Island-Navigation und Scroll-Effekte steuert assets/glass.js; ohne JavaScript bleibt alles lesbar. */ @property --beam{syntax:"";inherits:false;initial-value:0deg} html{background:#000;color-scheme:dark;interpolate-size:allow-keywords} #ux{--bg:#000;--foot-bg:#000;--fog:#f5f5f7;--steel:#a1a1a6;--dim:#86868b;--redt:#ff4d4d;--line:rgba(255,255,255,.08);--grid:rgba(255,255,255,.055);--grid-strong:rgba(255,255,255,.1);--spot-grid:rgba(255,255,255,.16); --chip-bg:rgba(255,255,255,.05);--chip-bd:rgba(255,255,255,.1);--chip-fg:#d2d2d7;--chip-bg2:rgba(255,255,255,.08);--chip-bd2:rgba(255,255,255,.18);--chip-bg3:rgba(255,255,255,.14);--chip-bd3:rgba(255,255,255,.3); --card-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 44px 90px -44px rgba(0,0,0,1);--card-edge:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 30%,rgba(255,255,255,.02) 60%,rgba(255,70,60,.25)); --num-fade:rgba(255,255,255,.16);--frame:#161618;--frame-dot:rgba(255,255,255,.3);--panel:rgba(18,18,20,.86);--option-bg:#111;--band-stroke:rgba(255,255,255,.34);--band-stroke2:rgba(255,255,255,.2);--band-fill2:rgba(255,255,255,.09); --spring:cubic-bezier(.34,1.32,.64,1);--ease:cubic-bezier(.16,1,.3,1); --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --glass:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 50%,rgba(255,255,255,.035)); --blur:blur(24px) saturate(170%); background:var(--bg);color:var(--fog);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} #ux ::selection{background:#ff0000;color:#fff} #ux :focus-visible{outline:2px solid #ff4d4d;outline-offset:3px} /* Typografie */ #ux h1,#ux h2,#ux h3{color:var(--fog);font-family:var(--font);text-wrap:balance} #ux main h2{font-size:clamp(38px,5.4vw,80px);line-height:1;letter-spacing:-.055em;font-weight:800} #ux p,#ux li{color:var(--steel)} #ux strong{color:var(--fog)} #ux main p{font-size:17px;line-height:1.65} #ux .design-section-heading{max-width:900px;margin-inline:auto;text-align:center} #ux .design-section-heading>p{font-size:clamp(17px,1.4vw,20px);color:var(--steel);max-width:680px;margin-inline:auto} #ux .design-hero h1 span:not(.gx-ln):not(.gx-li),#ux .design-section-heading h2 span:not(.gx-ln):not(.gx-li),#ux .native-app-heading h2 span:not(.gx-ln):not(.gx-li),#ux .gx-trust-head h2 span:not(.gx-ln):not(.gx-li){ background:linear-gradient(100deg,transparent 0 42%,rgba(255,232,229,.9) 50%,transparent 58% 100%) no-repeat,linear-gradient(180deg,#ff6a5f 0%,#ff0000 48%,#c40000 100%); background-size:260% 100%,100% 100%;background-position:160% 0,0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} #ux.gx-js .design-hero h1 span:not(.gx-ln):not(.gx-li){animation:gx-sheen 6s ease-in-out 2.4s infinite} #ux main h2.gx-up span:not(.gx-ln):not(.gx-li){animation:gx-sheen 2.4s ease-in-out .7s 1 both} @keyframes gx-sheen{0%{background-position:160% 0,0 0}32%,100%{background-position:-60% 0,0 0}} #ux .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-bd); box-shadow:none;color:var(--chip-fg);font-size:11px;letter-spacing:.12em;font-weight:650;line-height:1.2} #ux .eyebrow::before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:#ff0000;box-shadow:0 0 10px #ff0000} #ux .design-text-link,#ux .text-link{color:var(--redt);font-weight:650} #ux .design-text-link:hover,#ux .text-link:hover{color:#fff} /* Erscheinen: weich, aus der Unschaerfe */ #ux .gx-rv{opacity:0;translate:0 34px;filter:blur(12px);transition:opacity 1s var(--ease) var(--d,0s),translate 1.1s var(--ease) var(--d,0s),filter 1s var(--ease) var(--d,0s)} #ux .gx-rv.gx-in{opacity:1;translate:none;filter:none} /* Buttons */ #ux .btn,#ux #main .btn{position:relative;overflow:hidden;border-radius:999px;min-height:52px;padding:0 26px;gap:14px;font-size:15px;font-weight:650;letter-spacing:-.01em;color:#fff; background:#ff0000;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px rgba(255,90,80,.55),0 12px 32px -10px rgba(255,0,0,.7); transition:background .25s,box-shadow .3s,transform .25s,translate .5s var(--spring)} #ux .btn:hover,#ux #main .btn:hover{background:#ff2a1f;transform:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 1px rgba(255,110,100,.7),0 18px 46px -10px rgba(255,0,0,.9)} #ux .btn.design-outline,#ux #main .btn.design-outline,#ux .btn.btn-outline,#ux #main .btn.btn-outline{background:var(--chip-bg2);color:var(--fog); box-shadow:inset 0 0 0 1px var(--chip-bd2);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)} #ux .btn.design-outline:hover,#ux #main .btn.design-outline:hover,#ux .btn.btn-outline:hover,#ux #main .btn.btn-outline:hover{background:var(--chip-bg3);box-shadow:inset 0 0 0 1px var(--chip-bd3)} /* Glas-Flaechen mit Lichtkante und umlaufendem Lichtstrahl */ #ux .gx-checklist,#ux .gx-photoguide,#ux .gx-audience-grid article,#ux .gx-svc,#ux .gx-hall,#ux .design-paths article,#ux .design-workflow li,#ux .design-benefits article,#ux .design-team-screens figure,#ux .connect-wallet-demo,#ux .connect-faq-list, #ux .native-availability,#ux .connect-join-action,#ux .general-contact .portal-card,#ux .about-home-teaser{ position:relative;color:var(--fog);border:1px solid transparent;border-radius:28px; background:radial-gradient(560px circle at var(--mx,16%) var(--my,-10%),rgba(255,255,255,.09),transparent 46%),var(--glass); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); box-shadow:var(--card-shadow); transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .8s var(--ease),box-shadow .5s} #ux .gx-checklist::before,#ux .gx-photoguide::before,#ux .gx-audience-grid article::before,#ux .gx-svc::before,#ux .gx-hall::before,#ux .design-paths article::before,#ux .design-workflow li::before,#ux .design-benefits article::before,#ux .design-team-screens figure::before,#ux .connect-wallet-demo::before,#ux .connect-faq-list::before, #ux .native-availability::before,#ux .connect-join-action::before,#ux .general-contact .portal-card::before,#ux .about-home-teaser::before, #ux .gx-checklist::after,#ux .gx-photoguide::after,#ux .gx-audience-grid article::after,#ux .gx-svc::after,#ux .gx-hall::after,#ux .design-paths article::after,#ux .design-workflow li::after,#ux .design-benefits article::after,#ux .design-team-screens figure::after,#ux .connect-wallet-demo::after, #ux .native-availability::after,#ux .connect-join-action::after,#ux .about-home-teaser::after{ content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;display:block; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} #ux .gx-checklist::before,#ux .gx-photoguide::before,#ux .gx-audience-grid article::before,#ux .gx-svc::before,#ux .gx-hall::before,#ux .design-paths article::before,#ux .design-workflow li::before,#ux .design-benefits article::before,#ux .design-team-screens figure::before,#ux .connect-wallet-demo::before,#ux .connect-faq-list::before, #ux .native-availability::before,#ux .connect-join-action::before,#ux .general-contact .portal-card::before,#ux .about-home-teaser::before{ background:var(--card-edge)} #ux .gx-checklist::after,#ux .gx-photoguide::after,#ux .gx-audience-grid article::after,#ux .gx-svc::after,#ux .gx-hall::after,#ux .design-paths article::after,#ux .design-workflow li::after,#ux .design-benefits article::after,#ux .design-team-screens figure::after,#ux .connect-wallet-demo::after, #ux .native-availability::after,#ux .connect-join-action::after,#ux .about-home-teaser::after{ background:conic-gradient(from var(--beam),transparent 0 64%,rgba(255,40,30,.9) 76%,#fff 80%,rgba(255,40,30,.9) 84%,transparent 95%);opacity:0;transition:opacity .5s} #ux .gx-hot::after{opacity:1;animation:gx-beam 3s linear infinite} @keyframes gx-beam{to{--beam:360deg}} #ux .gx-hot{transition:transform .25s ease-out,box-shadow .5s} /* Dynamic Island */ #ux .ux-header.site-header{position:fixed;z-index:1000;top:calc(12px + env(safe-area-inset-top,0px));left:50%;right:auto;bottom:auto;translate:-50% 0;margin:0;padding:0; width:min(960px,calc(100% - 24px));max-width:none;height:56px;border-radius:28px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px #000,0 18px 50px -12px rgba(0,0,0,.95),0 0 40px -14px rgba(255,0,0,.4); transition:width .75s var(--spring),height .75s var(--spring),border-radius .75s var(--spring),box-shadow .4s} #ux.gx-js .ux-header.site-header{animation:gx-island 1.1s var(--spring) .15s backwards} @keyframes gx-island{from{width:46px;height:46px;opacity:0}} #ux .ux-header .nav{position:relative;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0 8px 0 22px;gap:14px;display:flex;align-items:center;justify-content:space-between; transition:opacity .3s ease,filter .4s ease,scale .55s var(--spring)} #ux .ux-header .logo{color:#fff;flex:none} #ux .ux-header .logo .mark{color:#ff0000} #ux .ux-header .logo .wordmark{color:#fff;width:128px} #ux .ux-primary-nav{gap:2px;margin:0 auto} #ux .ux-primary-nav>a{color:rgba(245,245,247,.74);font-size:13.5px;font-weight:550;padding:9px 13px;border-radius:999px;background:transparent} #ux .ux-primary-nav>a:hover,#ux .ux-primary-nav>a[aria-current]{color:#fff;background:rgba(255,255,255,.1)} #ux .ux-header-actions{flex:none;gap:8px} #ux .ux-header-actions .ux-login{background:#ff0000;color:#fff;border:0;border-radius:999px;padding:10px 16px;font-size:13px;font-weight:650;box-shadow:0 0 0 1px rgba(255,90,80,.6),0 8px 20px -8px rgba(255,0,0,.9)} #ux .ux-header-actions .ux-login:hover{background:#ff2a1f;transform:none} #ux .ux-header .nav-toggle{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.1);border:0;color:#fff} #ux .gx-isl{position:absolute;inset:0;display:flex;align-items:center;gap:10px;padding:0 12px 0 16px;color:#fff;cursor:pointer; opacity:0;filter:blur(6px);scale:1.08;pointer-events:none;transition:opacity .3s ease,filter .4s ease,scale .55s var(--spring)} #ux .gx-isl-mark{width:18px;height:18px;flex:none;color:#ff0000;filter:drop-shadow(0 0 6px rgba(255,0,0,.7))} #ux .gx-isl-label{flex:1;min-width:0;font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center} #ux .gx-isl-label.gx-swap{animation:gx-label .5s var(--ease)} @keyframes gx-label{from{opacity:0;translate:0 7px;filter:blur(4px)}} #ux .gx-isl-ring{width:22px;height:22px;flex:none;rotate:-90deg} #ux .gx-isl-ring circle{fill:none;stroke-width:2.6} #ux .gx-isl-ring .bg{stroke:rgba(255,255,255,.16)} #ux .gx-isl-ring .fg{stroke:#ff0000;stroke-linecap:round;stroke-dasharray:56.55;stroke-dashoffset:calc(56.55px * (1 - var(--pg,0)))} @media (hover:hover){ #ux .ux-header.site-header.gx-compact:not(:hover):not(.gx-open){width:300px;height:44px;border-radius:22px;transition-delay:.18s} #ux .ux-header.gx-compact:not(:hover):not(.gx-open) .nav{opacity:0;filter:blur(6px);scale:.94;pointer-events:none;transition-delay:.18s} #ux .ux-header.gx-compact:not(:hover):not(.gx-open) .gx-isl{opacity:1;filter:none;scale:1;pointer-events:auto;transition-delay:.22s} } @media (hover:none){ #ux .ux-header.site-header.gx-compact:not(.gx-open):not(.gx-peek){width:244px;height:44px;border-radius:22px} #ux .ux-header.gx-compact:not(.gx-open):not(.gx-peek) .nav{opacity:0;filter:blur(6px);scale:.94;pointer-events:none} #ux .ux-header.gx-compact:not(.gx-open):not(.gx-peek) .gx-isl{opacity:1;filter:none;scale:1;pointer-events:auto} } #ux .ux-header.site-header.gx-compact:has(:focus-visible){width:min(960px,calc(100% - 24px));height:56px} #ux .ux-header.gx-compact:has(:focus-visible) .nav{opacity:1;filter:none;scale:1;pointer-events:auto} #ux .ux-header.gx-compact:has(:focus-visible) .gx-isl{opacity:0} #ux .ux-mobile-menu.mobile-menu{z-index:999;top:calc(env(safe-area-inset-top,0px) + 74px);left:10px;right:10px;bottom:auto;max-height:calc(100svh - env(safe-area-inset-top,0px) - 90px); padding:20px 18px 22px;border-radius:30px;background:#000;border:1px solid rgba(255,255,255,.13);box-shadow:0 30px 90px -20px rgba(0,0,0,1),0 0 50px -20px rgba(255,0,0,.4); color:#fff;transform-origin:50% 0;transition:opacity .3s ease,scale .6s var(--spring),translate .6s var(--spring),visibility 0s linear .6s} #ux .ux-mobile-menu.mobile-menu[data-open="false"]{opacity:0;scale:.55 .25;translate:0 -36px;transform:none;visibility:hidden} #ux .ux-mobile-menu.mobile-menu[data-open="true"]{opacity:1;scale:1;translate:0 0;transform:none;visibility:visible;transition-delay:0s} #ux .ux-menu-label{color:var(--dim);letter-spacing:.12em} #ux .ux-mobile-shortcuts a{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);color:#fff;border-radius:18px} #ux .ux-mobile-shortcuts a span{color:var(--redt)} #ux .ux-menu-contact{border-top-color:var(--line)} #ux .ux-menu-contact a{color:#fff} #ux .home-reading-progress{display:none} #ux .skip-link{background:#ff0000;color:#fff;z-index:1001} /* Hero: Keynote-Buehne mit Horizont */ #ux .design-hero{position:relative;display:flex;flex-direction:column;height:auto;max-height:none;min-height:100vh;min-height:100svh;padding:calc(132px + env(safe-area-inset-top,0px)) 0 0;overflow:hidden;isolation:isolate;--hz:84px; background:radial-gradient(ellipse 72% 62% at 50% 34%,transparent 0%,var(--bg) 74%),linear-gradient(var(--grid) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 50% 0/72px 72px,var(--bg)} #ux .design-hero-backdrop{display:none} #ux .gx-spot{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .6s; background:radial-gradient(260px circle at var(--cx,50%) var(--cy,50%),rgba(255,40,30,.1),transparent 70%),linear-gradient(var(--spot-grid) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,var(--spot-grid) 1px,transparent 1px) 50% 0/72px 72px; -webkit-mask:radial-gradient(230px circle at var(--cx,50%) var(--cy,50%),#000,transparent 72%);mask:radial-gradient(230px circle at var(--cx,50%) var(--cy,50%),#000,transparent 72%)} #ux .gx-spot.on{opacity:1} #ux .design-hero-grid{position:static;z-index:auto;flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:0;min-height:auto;text-align:center;padding-bottom:calc(var(--hz) + 46px)} #ux .design-hero-copy{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;max-width:1000px;opacity:calc(1 - var(--sp,0) * 1.6);translate:0 calc(var(--sp,0) * -40px);scale:calc(1 + var(--sp,0) * .1);filter:blur(calc(var(--sp,0) * 12px))} #ux .design-hero-copy>.eyebrow{display:inline-flex;padding:7px 13px 7px 11px;background:var(--chip-bg);border:1px solid var(--chip-bd)} #ux .design-hero-copy>.eyebrow::before{display:block} #ux .design-hero h1{font-size:clamp(46px,6.7vw,108px);line-height:.94;letter-spacing:-.06em;font-weight:800;margin:24px 0 22px} #ux .design-hero-copy>p{font-size:clamp(16px,1.4vw,20px);line-height:1.6;color:var(--steel);max-width:640px;margin:0 auto} #ux .design-hero .partner-actions{justify-content:center;gap:12px;margin-top:32px} #ux .design-hero-notes{justify-content:center;gap:10px;margin-top:20px} #ux .design-hero-notes span{padding:6px 12px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--steel);font-size:12px} #ux .design-hero-app{position:static;flex:none;width:min(720px,100%);min-height:0;height:auto;margin:40px auto 0;padding:0;perspective:none} #ux .design-phones{position:relative;z-index:2;display:flex;justify-content:center;align-items:flex-start;gap:0;padding:0;transform-style:preserve-3d; translate:0 calc(var(--sp,0) * -60px);scale:calc(1 + var(--sp,0) * .08);transform:perspective(1900px) rotateX(calc(var(--srx,0deg) + 10deg - var(--sp,0) * 10deg)) rotateY(var(--sry,0deg));transition:transform 1s var(--ease)} #ux .design-phones .design-phone-back{width:250px;max-width:none;margin-right:-54px;transform:translate3d(0,48px,-150px) rotateY(22deg) rotateZ(-2deg)} #ux .design-phones .design-phone-front{width:282px;max-width:none;transform:translate3d(0,0,40px) rotateY(-12deg) rotateZ(1deg)} #ux.gx-js .design-phone-back{animation:gx-rise 1.8s var(--ease) .35s backwards} #ux.gx-js .design-phone-front{animation:gx-rise 1.8s var(--ease) .5s backwards} @keyframes gx-rise{from{translate:0 360px}} #ux .design-hero-shade{display:block;position:absolute;z-index:3;inset:auto;left:50%;bottom:calc(var(--hz) - 3200px);width:3200px;height:3200px;margin-left:-1600px;border-radius:50%;pointer-events:none; background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.8),0 -1px 12px rgba(255,170,160,.55),0 -6px 30px rgba(255,40,30,.35);transform-origin:50% 0;scale:calc(1 + var(--sp,0) * .3)} #ux.gx-js .design-hero-shade{animation:gx-horizon 1.7s var(--ease) .15s backwards} @keyframes gx-horizon{from{clip-path:inset(-400px 50% 0 50%)}to{clip-path:inset(-400px 0 0 0)}} #ux .design-red-glow{display:block;position:absolute;z-index:1;inset:auto;left:50%;bottom:calc(var(--hz) - 200px);width:min(1600px,160vw);height:560px;translate:-50% 0;pointer-events:none; background:radial-gradient(ellipse 34% 26% at 50% 64%,rgba(255,215,205,.22),transparent 70%),radial-gradient(ellipse 50% 50% at 50% 66%,rgba(255,40,30,.5),rgba(255,0,0,.14) 46%,transparent 72%);filter:none;opacity:.9;animation:gx-ignite 2s var(--ease) .45s backwards,gx-breathe 7s ease-in-out 2.5s infinite alternate} @keyframes gx-ignite{from{opacity:0;scale:.5 .2}} @keyframes gx-breathe{from{opacity:.7}to{opacity:1}} #ux .design-hero-app figcaption{position:absolute;z-index:4;left:50%;bottom:calc(var(--hz) - 60px);translate:-50% 0;margin:0;padding:0;width:max-content;max-width:calc(100% - 32px); background:none;border:0;color:var(--steel);font-size:12px;line-height:1.5;text-align:center} #ux .design-hero-app figcaption>span{display:inline;color:var(--fog);font-size:11px;letter-spacing:.16em;margin-right:8px} #ux .design-hero-app figcaption small{display:block;color:var(--dim);font-size:10px;margin-top:3px} #ux .design-discover{display:none} /* Geraete: iPhone-Rahmen ohne Beschnitt */ #ux .design-phone,#ux .native-phone{position:relative;display:block;overflow:hidden;background:#000;border:6px solid #050506;outline:0;border-radius:46px; box-shadow:0 0 0 1.5px #3c3c41,0 0 0 3px #0b0b0d,0 50px 100px -40px rgba(0,0,0,1),0 0 80px -30px rgba(255,0,0,.35)} #ux .design-phone img,#ux .native-phone img{display:block;width:100%;height:auto;aspect-ratio:1206/2622;object-fit:cover;border-radius:40px} #ux .design-hero .design-phone::after{content:"";position:absolute;inset:0;border-radius:40px;pointer-events:none;mix-blend-mode:screen; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 44%,rgba(255,255,255,.04) 52%,transparent 62%);background-size:260% 100%;background-position:var(--shine,62%) 0;transition:background-position 1.2s var(--ease)} #ux .design-hero .design-phone-back::after{--shine:28%} /* Partner: zwei Rollen und Statement */ #ux .design-partner-intro{padding-block:150px 40px;background:radial-gradient(ellipse 46% 36% at 50% 62%,rgba(255,255,255,.05),transparent 72%)} #ux .design-partner-intro .design-section-heading{max-width:1000px} #ux .design-partner-intro .design-section-heading>p{font-size:clamp(22px,2.5vw,36px);line-height:1.3;letter-spacing:-.025em;font-weight:650;color:var(--fog);max-width:960px;margin-top:30px} #ux .gx-w{opacity:clamp(.16,calc(var(--scrub,1) * var(--n,1) - var(--i,0)),1);transition:opacity .25s linear} #ux .design-partner-intro .design-paths{gap:24px;padding-top:70px} #ux .design-paths article,#ux .design-partner-intro .design-paths article+article{padding:42px 42px 36px;border-left:1px solid transparent;transition:transform .35s ease-out,box-shadow .5s; transform:perspective(1200px) translateX(calc((1 - var(--e,1)) * var(--sx,0px))) rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + (1 - var(--e,1)) * var(--sw,0deg)))} #ux .design-paths article:first-child{--sw:26deg;--sx:70px} #ux .design-paths article+article{--sw:-26deg;--sx:-70px} #ux .design-paths article+article{background:radial-gradient(560px circle at var(--mx,86%) var(--my,-10%),rgba(255,255,255,.09),transparent 46%),linear-gradient(160deg,rgba(255,40,28,.18),rgba(255,0,0,.04) 55%,rgba(255,255,255,.03))} #ux .design-role-label{display:inline-block;padding:7px 12px;border-radius:999px;background:var(--chip-bg2);border:1px solid var(--chip-bd);color:var(--fog);font-size:11px;letter-spacing:.1em} #ux .design-paths article+article .design-role-label{background:rgba(255,0,0,.18);border-color:rgba(255,90,80,.45)} #ux .design-paths h3{font-size:clamp(26px,2.4vw,34px);letter-spacing:-.04em;margin:22px 0 14px} #ux .design-paths p{font-size:16px} #ux .design-paths li{color:var(--chip-fg);font-size:15px;padding:10px 0 10px 34px;border-top:1px solid var(--line)} #ux .design-paths li::before{content:"✓";display:grid;place-items:center;width:22px;height:22px;top:10px;border-radius:50%;font-size:11px;color:#fff; background:rgba(255,0,0,.28);border:1px solid rgba(255,90,80,.55);box-shadow:0 0 12px rgba(255,0,0,.35)} /* Ablauf: Schritte leuchten nacheinander auf */ #ux .design-workflow{padding-block:110px 130px} #ux .design-workflow ol{position:relative;gap:18px;margin-top:70px;perspective:1700px;--flow:1} #ux.gx-js .design-workflow ol{--flow:0} #ux .design-workflow ol::before,#ux .design-workflow ol::after{content:"";position:absolute;left:3%;right:3%;top:66px;height:2px;border-radius:2px;z-index:-1;pointer-events:none} #ux .design-workflow ol::before{background:var(--chip-bd)} #ux .design-workflow ol::after{background:linear-gradient(90deg,#ff0000,#ff6a5f 70%,#fff);box-shadow:0 0 18px rgba(255,0,0,.8);transform:scaleX(var(--flow));transform-origin:left;transition:transform .25s linear} #ux .design-workflow{overflow-x:clip} #ux .design-workflow li{padding:30px 26px 32px;border-radius:24px;transition:box-shadow .6s; transform:translate3d(0,calc((1 - var(--e,1)) * 90px),calc((1 - var(--e,1)) * -460px)) rotateX(calc((1 - var(--e,1)) * 34deg)) rotateY(var(--arc,0deg));opacity:clamp(0,calc(var(--e,1) * 2.2 - .2),1)} #ux .design-workflow li:nth-child(1){--arc:10deg} #ux .design-workflow li:nth-child(2){--arc:3.5deg} #ux .design-workflow li:nth-child(3){--arc:-3.5deg} #ux .design-workflow li:nth-child(4){--arc:-10deg} #ux .design-workflow li>b{border:0;padding:0;font-size:56px;line-height:1;font-weight:800;letter-spacing:-.06em;gap:14px; background:linear-gradient(180deg,var(--fog),var(--num-fade));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;transition:filter .6s} #ux .design-workflow li.is-on>b{background:linear-gradient(180deg,#ff7a70,#ff0000 55%,#a80000);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 18px rgba(255,0,0,.45))} #ux .design-workflow li.is-on{box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 44px 90px -44px rgba(0,0,0,1),0 0 70px -24px rgba(255,0,0,.55)} #ux .design-workflow li>b small{-webkit-text-fill-color:var(--redt);color:var(--redt);font-size:11px;letter-spacing:.1em;padding:6px 10px;border-radius:999px;background:rgba(255,0,0,.12);border:1px solid rgba(255,90,80,.35)} #ux .design-workflow h3{font-size:21px;letter-spacing:-.03em;margin-top:26px} #ux .design-workflow p{font-size:15px} /* App-Verbindung: Laptop klappt auf, Portal laeuft live durch */ #ux .design-connect{padding:120px 0 110px;border:0;background:radial-gradient(ellipse 60% 40% at 50% 34%,rgba(255,30,20,.11),transparent 70%),transparent} #ux .design-connection-scene{perspective:2200px;margin-top:76px;transform-origin:50% 0;transform:perspective(2400px) rotateX(calc((1 - var(--land,1)) * 36deg)) scale(calc(.84 + var(--land,1) * .16))} #ux .design-connection-phone{rotate:y 14deg} #ux .design-connection-phone .design-phone{width:200px;border-width:5px;border-radius:34px} #ux .design-connection-phone .design-phone img{border-radius:29px} #ux .design-laptop{rotate:y -7deg;transform-origin:30% 50%;perspective:1500px} #ux .design-laptop-screen{position:relative;border:10px solid #0b0b0d;border-bottom-width:14px;border-radius:20px 20px 6px 6px;background:#0b0b0d;overflow:hidden; box-shadow:0 0 0 1.5px #3c3c41,0 60px 110px -40px rgba(0,0,0,1),0 0 130px -40px rgba(255,0,0,.4);transform-origin:50% 100%;rotate:x calc((1 - var(--lid,1)) * -62deg)} #ux .design-browser-chrome{background:#161618;border-bottom:1px solid rgba(255,255,255,.06)} #ux .design-browser-chrome i{background:#3a3a3e} #ux .design-browser-chrome span{color:var(--dim)} #ux .design-workspace-shot{display:block;border-radius:0 0 6px 6px;overflow:hidden;background:#fff} #ux .design-workspace-shot img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;animation:gx-pan 28s ease-in-out infinite alternate;animation-play-state:paused} #ux .design-connect.is-home-visible .design-workspace-shot img{animation-play-state:running} #ux .design-workspace-shot:hover img{animation-play-state:paused} @keyframes gx-pan{0%,10%{object-position:50% 0}90%,100%{object-position:50% 100%}} #ux .design-laptop-base{height:16px;margin:0 -7%;background:linear-gradient(#4a4a50,#1c1c1f 70%);border-radius:2px 2px 18px 18px/2px 2px 12px 12px;box-shadow:0 22px 40px rgba(0,0,0,.8)} #ux .design-connection-scene figcaption{color:var(--dim);font-size:12px} #ux .design-transfer{color:#30d158} #ux .design-transfer span{background:rgba(48,209,88,.12);border:1px solid rgba(48,209,88,.4);box-shadow:0 0 18px rgba(48,209,88,.25)} #ux .design-transfer i{position:relative;background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 4px,transparent 4px 8px)} #ux .design-transfer i::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px #ff3b30;opacity:0} #ux .design-transfer i::before{content:"";position:absolute;top:-1.5px;left:0;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px #ff3b30;opacity:0} #ux .design-connect.is-home-visible .design-transfer i::after{animation:gx-transfer 2.4s cubic-bezier(.6,0,.4,1) infinite} #ux .design-connect.is-home-visible .design-transfer i::before{animation:gx-transfer 2.4s cubic-bezier(.6,0,.4,1) 1.2s infinite} @keyframes gx-transfer{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 5px);opacity:0}} #ux .design-team-screens{grid-template-columns:minmax(0,.618fr) minmax(0,1fr);gap:26px;align-items:start;max-width:1200px;margin-top:90px} #ux .design-team-screens figure{padding:12px 12px 24px;border-radius:30px} #ux .design-team-screen{position:relative;display:block;padding-top:30px;border:0;border-radius:18px;background:var(--frame);overflow:hidden;box-shadow:0 0 0 1px var(--chip-bd)} #ux .design-team-screen::before{content:"";position:absolute;top:11px;left:14px;width:44px;height:8px; background:radial-gradient(circle,var(--frame-dot) 3.5px,transparent 4px) 0 0/16px 8px repeat-x} #ux .design-team-screen>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain} #ux .design-team-screen:hover{transform:none} #ux .design-team-screen>img{transition:scale .8s var(--ease)} #ux .design-team-screen:hover>img{scale:1.02} #ux .design-team-screen span{background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff} #ux .design-team-screens figcaption{padding:22px 14px 0} #ux .design-team-screens figcaption>span{color:var(--redt);letter-spacing:.12em} #ux .design-team-screens h3{font-size:24px;letter-spacing:-.03em} #ux .design-example-note{color:var(--dim);font-size:12px} #ux .design-benefits{gap:20px} #ux .design-benefits article{padding:30px 28px;border-radius:24px} #ux .design-benefits b{width:44px;height:44px;border-radius:14px;color:#fff;font-size:19px;background:linear-gradient(160deg,rgba(255,60,50,.5),rgba(255,0,0,.15));border:1px solid rgba(255,110,100,.5);box-shadow:0 0 22px rgba(255,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)} #ux .design-benefits h3{font-size:20px;margin:6px 0 10px} #ux .design-benefits p{font-size:15px} #ux .design-center{gap:26px} /* Provision */ #ux .connect-earnings{padding-block:130px;gap:70px} #ux .connect-earnings-copy>p{font-size:17px;color:var(--steel)} #ux .connect-earnings li::before{color:var(--redt)} #ux .connect-earnings li strong{color:var(--fog);font-size:16px} #ux .connect-earnings li span{color:var(--steel);font-size:15px} #ux .connect-wallet-demo{overflow:hidden;border-radius:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 60px 120px -50px rgba(0,0,0,1),0 0 160px -40px rgba(255,0,0,.4)} #ux .connect-wallet-top,#ux .connect-wallet-main,#ux .connect-wallet-bottom{background:transparent;color:#fff} #ux .connect-wallet-top{border-bottom:1px solid var(--line)} #ux .connect-wallet-top b{border-color:rgba(255,255,255,.22);color:#d2d2d7} #ux .connect-wallet-main>span{color:var(--steel)} #ux .connect-wallet-demo strong{font-variant-numeric:tabular-nums} #ux .connect-wallet-main>strong{font-size:clamp(44px,4.6vw,66px);letter-spacing:-.04em;background:linear-gradient(180deg,#fff 30%,#9a9aa2);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent} #ux .connect-wallet-main strong small{color:#9a9aa2;-webkit-text-fill-color:#9a9aa2} #ux .connect-wallet-main p{color:var(--dim);font-size:13px} #ux .connect-wallet-bottom{background:rgba(255,255,255,.035);border-block:1px solid var(--line)} #ux .connect-wallet-bottom i{color:#ff4d4d} #ux .connect-wallet-bottom span{color:var(--steel)} #ux .connect-wallet-case{border-bottom-color:var(--line);color:#d2d2d7} #ux .connect-wallet-case small{color:var(--dim)} #ux .connect-wallet-disclaimer{color:var(--dim)!important} /* FAQ */ #ux .connect-faq{padding-block:20px 140px} #ux .connect-faq>div>p{color:var(--steel)} #ux .connect-faq-list{border-top:0;padding:10px 30px;border-radius:30px} #ux .connect-faq details{border-bottom:1px solid var(--line)} #ux .connect-faq details:last-child{border-bottom:0} #ux .connect-faq summary{position:relative;list-style:none;color:var(--fog);font-size:16px;padding:24px 50px 24px 0} #ux .connect-faq summary::-webkit-details-marker{display:none} #ux .connect-faq summary::after{content:"+";position:absolute;right:0;top:50%;width:30px;height:30px;margin-top:-15px;display:grid;place-items:center;border-radius:50%; background:var(--chip-bg2);border:1px solid var(--chip-bd2);color:var(--fog);font-size:18px;font-weight:400;transition:transform .45s var(--spring),background .25s} #ux .connect-faq details[open] summary::after{transform:rotate(45deg);background:rgba(255,0,0,.3);border-color:rgba(255,90,80,.6)} #ux .connect-faq details p{font-size:15px;color:var(--steel)} #ux .connect-faq details::details-content{block-size:0;overflow:hidden;transition:block-size .5s var(--ease),content-visibility .5s allow-discrete} #ux .connect-faq details[open]::details-content{block-size:auto} /* iPhone-App: Galerie faechert sich beim Scrollen auf */ #ux .native-app-section{padding:130px 0 120px;background:radial-gradient(ellipse 55% 40% at 50% 55%,rgba(255,255,255,.045),transparent 70%),transparent} #ux .native-app-intro p{font-size:17px;color:var(--steel)} #ux .native-app-labels span{background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-fg);font-size:12px} #ux .native-gallery-bar p{color:var(--fog)} #ux .native-gallery-bar span{color:var(--dim)} #ux .native-gallery{perspective:2000px;gap:28px;padding-block:24px 10px} #ux .native-shot{position:relative;transform:translateX(calc((1.5 - var(--i,0)) * (100% + 28px) * (1 - var(--fan,1)))) translateZ(calc(var(--depth,0px) * var(--fan,1))); rotate:y calc(var(--arc,0deg) * var(--fan,1))} #ux .native-shot figcaption{opacity:calc(var(--fan,1) * 1.6 - .6)} #ux .native-shot:nth-child(1){--i:0;--arc:14deg;--depth:-50px;z-index:1} #ux .native-shot:nth-child(2){--i:1;--arc:5deg;z-index:3} #ux .native-shot:nth-child(3){--i:2;--arc:-5deg;z-index:2} #ux .native-shot:nth-child(4){--i:3;--arc:-14deg;--depth:-50px;z-index:1} #ux .native-phone{border-radius:44px} #ux .native-phone img{border-radius:38px} #ux .native-phone::after{background:rgba(0,0,0,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff} #ux .native-shot figcaption>span{color:var(--redt)} #ux .native-shot h3{font-size:21px;letter-spacing:-.03em} #ux .native-shot p{font-size:14px} #ux .native-gallery-note{color:var(--dim);font-size:12px} #ux .native-availability{padding:46px;border-radius:32px;margin-top:60px} #ux .native-availability h3{font-size:clamp(28px,2.6vw,38px);letter-spacing:-.04em;color:var(--fog)} #ux .native-availability p{font-size:15px;color:var(--steel)} #ux .native-availability .native-status{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;padding:7px 12px;border-radius:999px;background:rgba(255,0,0,.12);border:1px solid rgba(255,90,80,.38);color:#ffb3ad;font-size:11px} #ux .native-status i{width:7px;height:7px;border-radius:50%;background:#ff3b30;box-shadow:0 0 10px #ff0000} #ux .native-app-section.is-home-visible .native-status i{animation:gx-pulse 2s ease-in-out infinite} @keyframes gx-pulse{50%{box-shadow:0 0 0 6px rgba(255,0,0,.15),0 0 16px #ff0000}} #ux .native-availability a:not(.btn){color:var(--redt)} #ux .native-platform{background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--fog);border-radius:16px} #ux .native-platform>span{color:var(--fog)} #ux .native-platform small{color:var(--dim)} #ux .native-payout-note{color:var(--dim)} /* Abschluss mit 3D-Bildmarke hinter Glas */ #ux .design-final-cta{padding:140px 0;overflow:hidden;background:transparent;border:0} #ux .design-final-cta::before{background:radial-gradient(ellipse 38% 40% at 64% 50%,rgba(220,0,0,.38),transparent 72%),radial-gradient(ellipse 26% 30% at 16% 62%,rgba(140,0,0,.26),transparent 72%)} #ux .design-final-cta>.wrap{position:relative} #ux .design-final-cta h2{font-size:clamp(40px,4.8vw,70px)} #ux .connect-earnings-copy h2,#ux .connect-faq>div h2,#ux .native-app-heading h2{font-size:clamp(36px,4.3vw,64px)} #ux .design-final-cta p{color:#c7c7cc;font-size:17px} #ux .connect-join-copy,#ux .connect-join-action{position:relative;z-index:1} #ux .connect-join-action{padding:36px 38px;border-radius:30px;background:radial-gradient(520px circle at var(--mx,80%) var(--my,-10%),rgba(255,255,255,.12),transparent 46%),linear-gradient(160deg,rgba(255,60,50,.16),rgba(255,255,255,.03) 60%)} #ux .connect-join-action>span{color:#ffb3ad} #ux .connect-join-action h3{font-size:26px} #ux .connect-join-login{color:#d2d2d7!important} #ux .gx-mark{position:absolute;z-index:0;left:calc(54% + 67px);top:50%;width:270px;height:270px;margin:-135px 0 0 -135px;perspective:900px;pointer-events:none} #ux .gx-mark::before{content:"";position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,rgba(255,0,0,.45),transparent 62%);filter:blur(20px)} #ux .gx-mark-body{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s var(--ease); transform:rotateX(calc(12deg + var(--mpx,0deg))) rotateY(calc(-28deg + var(--mpy,0deg) + (var(--mspin,.5) - .5) * 70deg))} #ux .gx-mark-l{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(var(--z,0px));overflow:visible} /* Kontakt */ #ux .general-contact{padding-block:130px 90px} #ux .general-contact h2{font-size:clamp(36px,4vw,58px)} #ux .general-contact p{font-size:16px;color:var(--steel)} #ux .general-contact>div>a,#ux .general-contact>div p>a{color:var(--fog);font-size:18px;font-weight:650} #ux .general-contact .portal-card{padding:34px;border-radius:30px;transform:none} #ux .general-contact label{color:#c7c7cc;font-size:13px;font-weight:600} #ux .general-contact input,#ux .general-contact select,#ux .general-contact textarea{background:var(--chip-bg);border:1px solid var(--chip-bd2);color:var(--fog);border-radius:14px; box-shadow:none;transition:border-color .2s,box-shadow .2s} #ux .general-contact input:focus,#ux .general-contact select:focus,#ux .general-contact textarea:focus{outline:0;border-color:rgba(255,90,80,.8);box-shadow:0 0 0 4px rgba(255,0,0,.18)} #ux .general-contact select option{background:var(--option-bg);color:var(--fog)} #ux .general-contact .portal-check{color:var(--steel)} #ux .general-contact .portal-check a{color:var(--redt)} #ux .general-contact .portal-check input{accent-color:#ff0000} #ux #contact-message{color:var(--fog)} /* Ueber-uns-Hinweis */ #ux .about-home-teaser{margin-block:10px 130px;padding:46px 50px;border-radius:32px;align-items:center;gap:40px} #ux .about-home-teaser h2{font-size:clamp(30px,3.2vw,46px)} #ux .about-home-teaser p{color:var(--steel)} /* Footer: Konzern-Struktur mit grossem Abbinder */ #ux .connect-footer{position:relative;background:var(--foot-bg);border-top:0;padding:110px 0 calc(30px + env(safe-area-inset-bottom,0px));overflow:hidden;isolation:isolate} #ux .connect-footer::before{content:"";position:absolute;z-index:-1;top:0;left:50%;width:min(1200px,92%);height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,var(--chip-bd2) 18%,#ff2a1f 50%,var(--chip-bd2) 82%,transparent)} #ux .connect-footer::after{content:"";position:absolute;z-index:-1;top:-170px;left:50%;width:min(940px,92%);height:340px;translate:-50% 0;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,30,20,.16),transparent)} #ux .connect-footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px;align-items:start} #ux .connect-footer-brand{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);grid-template-areas:"logo logo" "tag desc" "tag social";column-gap:64px;row-gap:18px;padding-bottom:64px;border-bottom:1px solid var(--line)} #ux .connect-brand{grid-area:logo;display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:24px} #ux .connect-brand img:last-child{filter:brightness(0) invert(1)} #ux .connect-footer-brand>p{grid-area:tag;margin:0;font-size:clamp(40px,5.4vw,82px);line-height:.98;letter-spacing:-.055em;font-weight:800;color:var(--fog)} #ux .connect-footer-brand>span{grid-area:desc;align-self:end;max-width:400px;font-size:16px;line-height:1.6;color:var(--steel)} #ux .connect-footer-social{grid-area:social;align-self:start;display:flex;flex-wrap:wrap;gap:10px;margin:0} #ux .connect-footer-social a{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--fog);transition:background .25s,border-color .25s,translate .45s var(--spring)} #ux .connect-footer-social a:hover{background:var(--chip-bg2);border-color:var(--chip-bd2);translate:0 -2px;color:var(--fog)} #ux .connect-footer-social small{color:var(--dim)} #ux .connect-footer nav,#ux .connect-footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:0;border-top:0;padding-top:0} #ux .connect-footer h2{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:11.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--fog)} #ux .connect-footer h2::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff0000;box-shadow:0 0 10px #ff0000} #ux .connect-footer nav a,#ux .connect-footer-contact a{display:inline-block;padding:7px 0;font-size:15px;line-height:1.3;color:var(--steel);text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 3px)/0 1px no-repeat;transition:color .25s,background-size .45s var(--ease)} #ux .connect-footer nav a:hover,#ux .connect-footer-contact a:hover{color:var(--fog);background-size:100% 1px;text-decoration:none} #ux .connect-footer-contact a{font-size:17px;font-weight:600;color:var(--fog)} #ux .connect-footer-contact p{margin:14px 0 0;font-size:14px;line-height:1.7;color:var(--dim)} #ux .connect-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 28px;margin-top:80px;padding-top:26px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)} #ux .connect-footer-bottom nav{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 22px} #ux .connect-footer-bottom nav a,#ux .connect-footer-bottom>nav>button{padding:4px 0;font-size:13px;color:var(--steel);border:0;cursor:pointer;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat} #ux .connect-footer-bottom>nav>button{background:none} #ux .connect-footer-bottom nav a:hover,#ux .connect-footer-bottom>nav>button:hover{color:var(--fog)} #ux .connect-footer-credit{margin-top:16px;font-size:11.5px;color:var(--dim)} /* Umschalter Hell/Dunkel */ #ux .gx-theme{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-bd)} #ux .gx-theme button,#ux .connect-footer-bottom .gx-theme button{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:0;border-radius:999px;background:transparent;color:var(--steel);font:600 12.5px/1 var(--font);cursor:pointer;transition:background .3s,color .3s} #ux .gx-theme button svg{width:14px;height:14px;flex:none} #ux .gx-theme button[aria-pressed="true"],#ux .connect-footer-bottom .gx-theme button[aria-pressed="true"]{background:var(--fog);color:var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.2)} #ux .gx-theme-btn{display:inline-grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer} #ux .gx-theme-btn:hover{background:rgba(255,255,255,.2)} #ux .gx-theme-btn svg{width:17px;height:17px} #ux .gx-theme-btn .gx-moon,html.gx-light #ux .gx-theme-btn .gx-sun{display:none} html.gx-light #ux .gx-theme-btn .gx-moon{display:block} #ux .gx-menu-theme{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);color:#86868b;font-size:13px} ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal} /* Einwilligung, Dialoge, Nach-oben */ #ux .consent-banner,#ux .consent-dialog,#ux .photo-dialog{background:var(--panel);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%); color:var(--fog);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 100px -30px rgba(0,0,0,1)} #ux .consent-banner{border-radius:24px} #ux .consent-banner strong,#ux .consent-dialog h2{color:var(--fog)} #ux .consent-banner p,#ux .consent-dialog p,#ux .consent-option span{color:var(--steel)} #ux .consent-actions button,#ux .consent-close{background:var(--chip-bg2);border:1px solid var(--chip-bd2);color:var(--fog);border-radius:999px} #ux .consent-actions button:hover,#ux .consent-close:hover{background:var(--chip-bg3)} #ux .consent-banner a,#ux .consent-dialog a{color:var(--redt)} #ux .consent-option{border-color:rgba(255,255,255,.12)} #ux .photo-dialog-wide .photo-dialog-bar{background:var(--panel)} #ux .photo-dialog button{background:var(--chip-bg2);border-color:var(--chip-bd2);color:var(--fog)} #ux .back-to-top{background:#000;border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:0 14px 34px -12px rgba(0,0,0,.9)} /* Ueberschriften steigen Zeile fuer Zeile aus einer unsichtbaren Kante */ #ux .gx-ln{display:block;overflow:hidden;padding:.08em .05em .16em;margin:-.08em -.05em -.16em} #ux main h1 .gx-ln,#ux main h1 .gx-li,#ux main h2 .gx-ln,#ux main h2 .gx-li{color:inherit;-webkit-text-fill-color:currentColor;background:none;filter:none} #ux .gx-li{display:block;translate:0 118%;transition:translate 1.2s var(--ease) var(--ld,0s)} #ux .gx-up .gx-li{translate:none} /* Statement bleibt stehen und leuchtet Wort fuer Wort auf */ #ux .gx-pinned{padding-top:0} #ux .design-partner-intro{overflow-x:clip} #ux .gx-pin{position:relative;height:230vh} #ux .gx-pin-in{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center} #ux .gx-pin .design-section-heading>p{font-size:clamp(26px,3.3vw,52px);line-height:1.22;letter-spacing:-.03em;max-width:1100px} /* Riesiges Typo-Band aus den vier Schritten, laeuft mit dem Scrollen */ #ux .gx-band{position:relative;overflow:hidden;padding:52px 0;background:var(--bg);pointer-events:none;user-select:none; -webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} #ux .gx-row{display:flex;width:max-content;white-space:nowrap;transform:translate3d(var(--bx,0px),0,0);will-change:transform} #ux .gx-row+.gx-row{margin-top:6px} #ux .gx-item{display:inline-flex;align-items:center;gap:.36em;padding-right:.36em;font-size:clamp(42px,7.4vw,124px);font-weight:800;letter-spacing:-.055em;line-height:1.08;color:var(--fog)} #ux .gx-item.gx-o{color:transparent;-webkit-text-stroke:1.5px var(--band-stroke)} #ux .gx-r2 .gx-item{color:transparent;-webkit-text-stroke:1.2px var(--band-stroke2)} #ux .gx-r2 .gx-item.gx-o{color:var(--band-fill2);-webkit-text-stroke:0} #ux .gx-sep{width:.38em;height:.38em;flex:none;color:#ff0000;filter:drop-shadow(0 0 14px rgba(255,0,0,.7))} #ux .gx-r2 .gx-sep{opacity:.45} /* Gigantischer Schriftzug im Footer mit Lichtlauf */ #ux .gx-giant{width:min(1400px,calc(100% - 40px));margin:64px auto 0;color:var(--fog);translate:0 calc((1 - var(--fe,1)) * 35%); -webkit-mask-image:linear-gradient(100deg,rgba(0,0,0,.13) 0 40%,rgba(0,0,0,.95) 50%,rgba(0,0,0,.13) 60% 100%);mask-image:linear-gradient(100deg,rgba(0,0,0,.13) 0 40%,rgba(0,0,0,.95) 50%,rgba(0,0,0,.13) 60% 100%); -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-position:100% 0;mask-position:100% 0;animation:gx-giant 8s ease-in-out 1s infinite} #ux .gx-giant svg{display:block;width:100%;height:auto} @keyframes gx-giant{0%{-webkit-mask-position:100% 0;mask-position:100% 0}55%,100%{-webkit-mask-position:0% 0;mask-position:0% 0}} /* Insel: Live-Aktivitaet mit Partner-Button ab dem Verguetungs-Abschnitt */ #ux .gx-isl-cta{display:inline-flex;align-items:center;flex:none;height:30px;max-width:0;padding:0;margin-left:0;overflow:hidden;opacity:0;white-space:nowrap;border-radius:999px; background:#ff0000;color:#fff;font-size:12px;font-weight:650;box-shadow:0 0 16px -4px rgba(255,0,0,.9); transition:max-width .6s var(--spring),padding .6s var(--spring),margin .6s var(--spring),opacity .3s} #ux .gx-live .gx-isl-cta{max-width:170px;padding:0 13px;margin-left:2px;opacity:1} #ux .gx-isl-cta:hover{background:#ff2a1f} @media (hover:hover){#ux .ux-header.site-header.gx-compact.gx-live:not(:hover):not(.gx-open){width:430px}} @media (hover:none){#ux .ux-header.site-header.gx-compact.gx-live:not(.gx-open):not(.gx-peek){width:338px}} /* Fuer deinen Betrieb: Einsatzbilder und Upload-Fakten */ #ux .gx-audience{padding-block:140px 30px} #ux .gx-audience-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:64px} #ux .gx-audience-grid article{padding:34px 30px 32px;border-radius:28px} #ux .gx-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(160deg,rgba(255,60,50,.6),rgba(255,0,0,.2)); border:1px solid rgba(255,110,100,.55);box-shadow:0 0 26px rgba(255,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)} #ux .gx-ico svg{width:24px;height:24px} #ux .gx-audience h3,#ux .gx-svc h3{font-size:23px;line-height:1.15;letter-spacing:-.03em;margin:24px 0 10px} #ux .gx-audience-grid p,#ux .gx-svc p{font-size:15px;line-height:1.6} #ux .gx-specs{display:flex;align-items:center;gap:28px;margin-top:22px;padding:20px 28px;border-radius:22px;border:1px solid var(--line);background:var(--chip-bg)} #ux .gx-specs>b{flex:none;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)} #ux .gx-specs ul{flex:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 22px;margin:0;padding:0;list-style:none} #ux .gx-specs li,#ux .gx-hall li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.4;color:var(--chip-fg)} #ux .gx-specs svg,#ux .gx-hall li svg{width:18px;height:18px;flex:none;color:#ff3b30} /* Leistungen mit Hallen-Karte */ #ux .gx-services{padding-block:140px 40px} #ux .gx-services-grid{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));gap:22px;margin-top:64px} #ux .gx-svc{padding:32px 30px;border-radius:28px} #ux .gx-hall{grid-row:span 2;display:flex;flex-direction:column;justify-content:flex-end;min-height:540px;padding:40px 38px;border-radius:32px;overflow:hidden} #ux .gx-floor{position:absolute;left:-25%;right:-25%;top:0;height:64%;pointer-events:none;transform-origin:50% 0;transform:perspective(520px) rotateX(56deg); background:linear-gradient(var(--grid-strong) 1px,transparent 1px) 50% 0/52px 52px,linear-gradient(90deg,var(--grid-strong) 1px,transparent 1px) 50% 0/52px 52px; -webkit-mask:linear-gradient(180deg,#000,transparent 88%);mask:linear-gradient(180deg,#000,transparent 88%)} #ux .gx-scan{position:absolute;left:8%;right:8%;top:8%;height:2px;border-radius:2px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,#ff2a1f 18%,#fff 50%,#ff2a1f 82%,transparent);box-shadow:0 0 22px 3px rgba(255,0,0,.55)} #ux .gx-services.is-home-visible .gx-scan{animation:gx-scan 4.8s cubic-bezier(.6,0,.4,1) infinite} @keyframes gx-scan{0%{top:8%;opacity:0}12%{opacity:1}58%{opacity:1}70%,100%{top:56%;opacity:0}} #ux .gx-hall-tag{position:relative;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(255,0,0,.14);border:1px solid rgba(255,90,80,.42);color:var(--redt);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #ux .gx-hall h3{position:relative;font-size:clamp(28px,2.6vw,38px);line-height:1.05;letter-spacing:-.045em;margin:18px 0 12px} #ux .gx-hall p{position:relative;font-size:15.5px;line-height:1.6;max-width:460px} #ux .gx-hall ul{position:relative;display:grid;gap:10px;margin:22px 0 0;padding:0;list-style:none} #ux .gx-hall small{position:relative;display:block;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)} #ux .gx-services-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:26px;padding:22px 28px;border-radius:22px;border:1px solid var(--line);background:var(--chip-bg)} #ux .gx-services-foot p{margin:0;font-size:15px} #ux .gx-services-foot strong{color:var(--fog)} /* Vertrauen & Transparenz */ #ux .gx-trust{padding-block:130px 30px} #ux .gx-trust-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px} #ux .gx-trust-head h2{margin:18px 0 0} #ux .gx-trust-head>p{max-width:380px;margin:0;font-size:16px;color:var(--steel)} #ux .gx-trust-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:56px 0 0;padding:0;list-style:none;border-block:1px solid var(--line)} #ux .gx-trust-list li{padding:32px 24px 32px 0;color:var(--steel)} #ux .gx-trust-list li+li{padding-left:24px;border-left:1px solid var(--line)} #ux .gx-trust-list svg{width:26px;height:26px;color:#ff2a1f;filter:drop-shadow(0 0 10px rgba(255,0,0,.35))} #ux .gx-trust-list strong{display:block;margin:18px 0 8px;font-size:16px;letter-spacing:-.01em;color:var(--fog)} #ux .gx-trust-list span{display:block;font-size:14px;line-height:1.55} /* Abschluss: drei Schritte */ #ux .gx-steps{list-style:none;margin:20px 0 28px;padding:0;display:grid;gap:14px} #ux .gx-steps li{position:relative;display:flex;align-items:center;gap:14px;font-size:15.5px;line-height:1.35;color:var(--fog)} #ux .gx-steps li:not(:last-child)::before{content:"";position:absolute;left:15px;top:31px;height:14px;width:1px;background:rgba(255,90,80,.5)} #ux .gx-steps b{display:grid;place-items:center;width:31px;height:31px;flex:none;border-radius:50%;font-size:13px;font-weight:700;color:#fff; background:rgba(255,0,0,.24);border:1px solid rgba(255,90,80,.6);box-shadow:0 0 16px rgba(255,0,0,.35)} /* Navigation: aktueller Abschnitt */ #ux .ux-primary-nav>a.is-current{color:#fff;background:rgba(255,255,255,.12)} /* Feinschliff: Silbentrennung, ruhige Zeilenenden, pausierte Animationen ausserhalb des Bildes */ #ux main p,#ux main li,#ux .connect-footer p{-webkit-hyphens:auto;hyphens:auto;text-wrap:pretty} #ux .gx-giant{animation-play-state:paused} #ux .gx-giant.gx-vis{animation-play-state:running} #ux .design-hero:not(.is-home-visible) .design-red-glow,#ux .design-hero:not(.is-home-visible) h1 span:not(.gx-ln):not(.gx-li){animation-play-state:paused} /* Barrierefreiheit: weniger Transparenz, mehr Kontrast */ @media (prefers-reduced-transparency:reduce){ #ux *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} #ux{--glass:linear-gradient(var(--bg),var(--bg));--panel:var(--bg)} } @media (prefers-contrast:more){ #ux{--steel:#d2d2d7;--dim:#c7c7cc;--line:rgba(255,255,255,.24);--chip-bd:rgba(255,255,255,.3)} html.gx-light #ux{--steel:#3a3a3c;--dim:#48484a;--line:rgba(0,0,0,.28);--chip-bd:rgba(0,0,0,.3)} } /* Neue Abschnitte responsiv */ @media (max-width:1100px){ #ux .gx-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #ux .gx-hall{grid-column:1/-1;grid-row:auto;min-height:440px} #ux .gx-trust-list{grid-template-columns:repeat(2,minmax(0,1fr))} #ux .gx-trust-list li,#ux .gx-trust-list li+li{padding:28px 22px;border-left:0;border-top:1px solid var(--line)} #ux .gx-trust-list li:nth-child(-n+2){border-top:0} #ux .gx-trust-list li:nth-child(even){border-left:1px solid var(--line)} #ux .gx-specs{flex-direction:column;align-items:flex-start} #ux .gx-specs ul{grid-template-columns:repeat(2,minmax(0,1fr));width:100%} } @media (max-width:760px){ #ux .gx-audience{padding-block:80px 10px} #ux .gx-audience-grid,#ux .gx-services-grid{grid-template-columns:1fr;gap:14px;margin-top:40px} #ux .gx-audience-grid article,#ux .gx-svc{padding:26px 22px;border-radius:24px} #ux .gx-audience h3,#ux .gx-svc h3{font-size:21px;margin-top:18px} #ux .gx-specs{padding:18px 20px;gap:16px} #ux .gx-specs ul{grid-template-columns:1fr} #ux .gx-services{padding-block:80px 20px} #ux .gx-hall{min-height:0;padding:150px 22px 26px;border-radius:24px} #ux .gx-services-foot{flex-direction:column;align-items:flex-start;padding:20px} #ux .gx-trust{padding-block:80px 20px} #ux .gx-trust-head{flex-direction:column;align-items:flex-start;gap:16px} #ux .gx-trust-list{grid-template-columns:1fr;margin-top:36px} #ux .gx-trust-list li,#ux .gx-trust-list li+li,#ux .gx-trust-list li:nth-child(even){padding:24px 0;border-left:0;border-top:1px solid var(--line)} #ux .gx-trust-list li:first-child{border-top:0} } /* Desktop: Text links, iPhones vollstaendig rechts ueber dem Horizont */ @media (min-width:861px){ #ux .design-hero{padding-top:calc(104px + env(safe-area-inset-top,0px));--hz:78px} #ux .design-hero-grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);align-items:center;gap:40px;text-align:left;padding-bottom:calc(var(--hz) + 40px)} #ux .design-hero-copy{align-items:flex-start} #ux .design-hero h1{font-size:clamp(56px,5.7vw,96px)} #ux .design-hero-copy>p{margin:0;max-width:520px} #ux .design-hero .partner-actions,#ux .design-hero-notes{justify-content:flex-start} #ux .design-hero-app{flex:none;width:100%;min-height:0;margin:0} #ux .design-phones{translate:0 calc(var(--sp,0) * -120px)} #ux .design-phones .design-phone-back{width:clamp(176px,16.5vw,232px);margin-right:-60px} #ux .design-phones .design-phone-front{width:clamp(198px,18.6vw,262px)} #ux .design-red-glow{left:73%;width:1100px} } /* Tablet */ @media (max-width:1100px){ #ux .design-workflow ol{grid-template-columns:1fr 1fr} #ux .design-workflow li:nth-child(n){--arc:0deg} #ux .design-workflow ol::before,#ux .design-workflow ol::after{display:none} #ux .gx-mark{left:auto;right:-40px;top:60px;margin:0;width:220px;height:220px} } /* Handy */ @media (max-width:760px){ #ux{--blur:blur(16px) saturate(160%)} #ux main p{font-size:15px} #ux main h2{font-size:clamp(34px,9.6vw,46px)} #ux .ux-header.site-header{top:calc(10px + env(safe-area-inset-top,0px));width:calc(100% - 20px);height:54px;border-radius:27px} #ux .ux-header .nav{padding:0 7px 0 16px;gap:8px} #ux .ux-header .logo .wordmark{width:108px} #ux .ux-header-actions .ux-login{padding:9px 13px;font-size:12px} #ux .design-hero{padding-top:calc(100px + env(safe-area-inset-top,0px));--hz:70px;background-size:auto,48px 48px,48px 48px,auto} #ux .design-hero h1{font-size:clamp(40px,11.6vw,56px);margin:18px 0 16px} #ux .design-hero-copy>p{font-size:15px;padding-inline:4px} #ux .design-hero .partner-actions{margin-top:24px} #ux .design-hero .btn{min-height:50px;padding:0 20px;font-size:14px} #ux .design-hero-notes{margin-top:16px} #ux .design-hero-notes span{font-size:11px} #ux .design-hero-app{margin-top:30px} #ux .design-phones .design-phone-back{width:158px;margin-right:-36px;transform:translate3d(0,30px,-110px) rotateY(20deg) rotateZ(-2deg)} #ux .design-phones .design-phone-front{width:178px;transform:translate3d(0,0,30px) rotateY(-11deg) rotateZ(1deg)} #ux .design-phone,#ux .native-phone{border-width:4px;border-radius:30px} #ux .design-phone img,#ux .native-phone img,#ux .design-hero .design-phone::after{border-radius:26px} #ux .design-hero-app figcaption{bottom:calc(var(--hz) - 58px);font-size:11px} #ux .design-partner-intro{padding-block:90px 20px} #ux .design-partner-intro .design-section-heading>p{font-size:clamp(21px,6vw,27px);margin-top:22px} #ux .design-partner-intro .design-paths{padding-top:44px;gap:16px} #ux .design-paths article,#ux .design-partner-intro .design-paths article+article{padding:28px 22px 22px} #ux .design-paths li{font-size:14px} #ux .design-workflow{padding-block:60px 80px} #ux .design-workflow ol{gap:12px;margin-top:38px} #ux .design-workflow li{padding:22px 18px;border-radius:20px} #ux .design-workflow li>b{font-size:40px;flex-direction:column;align-items:flex-start;gap:10px} #ux .design-workflow li>b small{font-size:9px;padding:5px 8px} #ux .design-workflow h3{font-size:17px;margin-top:16px} #ux .design-workflow p{font-size:13px} #ux .design-connect{padding:80px 0} #ux .design-connection-scene{margin-top:40px} #ux .design-connection-phone{rotate:y 8deg} #ux .design-connection-phone .design-phone{width:86px;border-width:3px;border-radius:15px} #ux .design-connection-phone .design-phone img{border-radius:12px} #ux .design-laptop{rotate:y -5deg} #ux .design-laptop-screen{border-width:5px;border-bottom-width:8px;border-radius:10px 10px 4px 4px} #ux .design-team-screens{grid-template-columns:1fr;gap:18px;margin-top:50px} #ux .design-team-screens figure{padding:10px 10px 20px;border-radius:24px} #ux .design-team-screen{padding-top:24px;border-radius:14px} #ux .design-team-screen::before{top:8px;left:11px} #ux .design-team-screens h3{font-size:20px} #ux .design-benefits{gap:12px} #ux .design-benefits article{padding:22px 20px 22px 76px;border-radius:20px} #ux .design-benefits b{left:20px;top:22px;width:40px;height:40px} #ux .connect-earnings{padding-block:80px;gap:40px} #ux .connect-faq{padding-block:0 90px;gap:30px} #ux .connect-faq-list{padding:4px 18px;border-radius:24px} #ux .connect-faq summary{font-size:15px;padding:20px 44px 20px 0} #ux .native-app-section{padding:80px 0} #ux .native-gallery{perspective:900px;padding:18px 12% 30px;scroll-padding-inline:12%} #ux .native-shot,#ux .native-shot:nth-child(n){transform:none;rotate:y calc(var(--cf,0) * -26deg);scale:calc(1 - var(--cfa,0) * .1)} #ux .native-shot figcaption{opacity:1} #ux .native-availability{padding:26px 20px;border-radius:24px;margin-top:30px} #ux .design-final-cta{padding:90px 0 80px} #ux .design-final-cta h2{font-size:clamp(32px,9vw,44px)} #ux .connect-join-copy{padding-top:120px} #ux .gx-mark{left:50%;right:auto;top:-10px;width:170px;height:170px;margin:0 0 0 -85px} #ux .connect-join-action{padding:26px 22px;border-radius:24px} #ux .general-contact{padding-block:80px 50px} #ux .general-contact .portal-card{padding:22px 18px;border-radius:24px} #ux .about-home-teaser{flex-direction:column;align-items:flex-start;padding:30px 22px;margin-bottom:80px;gap:24px;border-radius:24px} #ux .gx-pin{height:200vh} #ux .gx-pinned{padding-top:0} #ux .gx-pin .design-section-heading>p{font-size:clamp(23px,6.6vw,30px)} #ux .gx-band{padding:40px 0} #ux .gx-item.gx-o{-webkit-text-stroke-width:1px} #ux .gx-giant{width:calc(100% - 24px);margin-top:36px} #ux .design-paths article:first-child,#ux .design-paths article+article{--sw:0deg;--sx:0px} } /* Ruhige Darstellung */ @media (prefers-reduced-motion:reduce){ #ux .design-paths article,#ux .design-benefits article,#ux .design-team-screens figure,#ux .connect-wallet-demo,#ux .native-availability,#ux .connect-join-action,#ux .about-home-teaser{transform:none} #ux .design-phones{transform:none;translate:none} #ux .design-workspace-shot img,#ux .gx-mark-body,#ux .design-red-glow,#ux .gx-giant{animation:none} #ux .gx-giant{-webkit-mask-position:50% 0;mask-position:50% 0} } @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ #ux .design-paths article,#ux .design-workflow li,#ux .design-benefits article,#ux .design-team-screens figure,#ux .connect-wallet-demo,#ux .connect-faq-list, #ux .native-availability,#ux .connect-join-action,#ux .general-contact .portal-card,#ux .about-home-teaser,#ux .consent-banner{background-color:rgba(20,20,22,.94)} } /* Helle Version: gleiche Struktur, eigene Token. Island, Menue, Provisionskarte und Abschluss bleiben dunkel. */ html.gx-light{background:#fbfbfd;color-scheme:light} html.gx-light #ux{--bg:#fbfbfd;--foot-bg:#f5f5f7;--fog:#1d1d1f;--steel:#6e6e73;--dim:#86868b;--redt:#d70015;--line:rgba(0,0,0,.08);--grid:rgba(0,0,0,.05);--grid-strong:rgba(0,0,0,.09);--spot-grid:rgba(0,0,0,.13); --chip-bg:rgba(0,0,0,.035);--chip-bd:rgba(0,0,0,.08);--chip-fg:#3a3a3c;--chip-bg2:rgba(0,0,0,.05);--chip-bd2:rgba(0,0,0,.12);--chip-bg3:rgba(0,0,0,.08);--chip-bd3:rgba(0,0,0,.2); --card-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.04),0 34px 70px -38px rgba(0,0,0,.26);--card-edge:linear-gradient(150deg,#fff,rgba(0,0,0,.08) 32%,rgba(0,0,0,.04) 62%,rgba(255,60,50,.32)); --glass:linear-gradient(165deg,rgba(255,255,255,.96),rgba(255,255,255,.74));--num-fade:rgba(0,0,0,.14);--frame:#e8e8ed;--frame-dot:rgba(0,0,0,.18);--panel:rgba(255,255,255,.9);--option-bg:#fff; --band-stroke:rgba(0,0,0,.26);--band-stroke2:rgba(0,0,0,.14);--band-fill2:rgba(0,0,0,.05)} html.gx-light #ux .connect-wallet-demo,html.gx-light #ux .design-final-cta,html.gx-light #ux .ux-mobile-menu{--bg:#000;--fog:#f5f5f7;--steel:#a1a1a6;--dim:#86868b;--redt:#ff4d4d;--line:rgba(255,255,255,.08); --chip-bg:rgba(255,255,255,.05);--chip-bd:rgba(255,255,255,.1);--chip-fg:#d2d2d7;--chip-bg2:rgba(255,255,255,.08);--chip-bd2:rgba(255,255,255,.18);--chip-bg3:rgba(255,255,255,.14);--chip-bd3:rgba(255,255,255,.3); --card-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 44px 90px -44px rgba(0,0,0,1);--card-edge:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.07) 30%,rgba(255,255,255,.02) 60%,rgba(255,70,60,.25)); --glass:linear-gradient(165deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 50%,rgba(255,255,255,.035));color:#f5f5f7} html.gx-light #ux .design-final-cta{background:#000} html.gx-light #ux .connect-wallet-demo{background:radial-gradient(560px circle at var(--mx,16%) var(--my,-10%),rgba(255,255,255,.09),transparent 46%),linear-gradient(160deg,#1d1d1f,#0b0b0c);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 50px 100px -40px rgba(0,0,0,.45),0 0 140px -40px rgba(255,0,0,.3)} html.gx-light #ux .design-hero-shade{background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 -1px 14px rgba(255,90,80,.42),0 -8px 44px rgba(255,40,30,.2)} html.gx-light #ux .design-red-glow{filter:opacity(.6)} html.gx-light #ux .design-phone,html.gx-light #ux .native-phone{box-shadow:0 0 0 1.5px #3c3c41,0 0 0 3px #0b0b0d,0 50px 90px -40px rgba(0,0,0,.42),0 0 70px -30px rgba(255,0,0,.25)} html.gx-light #ux .design-laptop-screen{box-shadow:0 0 0 1.5px #3c3c41,0 50px 100px -40px rgba(0,0,0,.4),0 0 120px -40px rgba(255,0,0,.25)} html.gx-light #ux .native-availability .native-status{color:#b3000c;background:rgba(255,0,0,.07)} html.gx-light #ux .connect-brand img:last-child{filter:brightness(0)} html.gx-light #ux .design-workflow li.is-on{box-shadow:var(--card-shadow),0 0 60px -26px rgba(255,0,0,.45)} /* Footer responsiv */ @media (max-width:900px){ #ux .connect-footer-grid{grid-template-columns:1fr 1fr;gap:44px 28px} #ux .connect-footer-brand{grid-template-columns:1fr;grid-template-areas:"logo" "tag" "desc" "social";row-gap:20px;padding-bottom:48px} #ux .connect-footer-contact{grid-column:1/-1;border-top:1px solid var(--line);padding-top:30px} } @media (max-width:760px){ #ux .connect-footer{padding-top:80px} #ux .connect-footer-brand>p{font-size:clamp(40px,12.5vw,58px)} #ux .connect-footer-bottom{flex-direction:column;align-items:flex-start;margin-top:56px} } html.gx-light #ux .gx-ico,html.gx-light #ux .design-benefits b{background:linear-gradient(160deg,#ff3b30,#d70015);border-color:rgba(215,0,21,.35);box-shadow:0 10px 24px -8px rgba(255,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)} html.gx-light #ux .gx-hall-tag{background:rgba(255,0,0,.07);border-color:rgba(215,0,21,.25)} /* ===== Effekt-Ebene 4: 3D-Auto, Datenstrom, Lichtkegel, Scan-Labels, Licht-Schienen ===== */ /* Fortschrittslinie im Ablauf bekommt einen leuchtenden Kopf */ #ux .gx-flowhead{position:absolute;z-index:-1;top:62px;left:calc(3% + var(--flow,1) * 94%);width:10px;height:10px;margin-left:-5px;border-radius:50%;pointer-events:none; background:#fff;box-shadow:0 0 0 4px rgba(255,0,0,.25),0 0 22px 5px #ff2a1f;opacity:clamp(0,calc(var(--flow,1) * 12),1)} /* Datenstrom vom iPhone zum Laptop */ #ux .gx-stream{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3} #ux .gx-stream path{fill:none;stroke:rgba(255,90,80,.35);stroke-width:1.5;stroke-dasharray:3 6} #ux .gx-stream circle{fill:#fff;filter:drop-shadow(0 0 4px #ff2a1f) drop-shadow(0 0 10px rgba(255,0,0,.8))} #ux .gx-streamed .design-transfer i::before,#ux .gx-streamed .design-transfer i::after{display:none} #ux .gx-streamed .design-transfer i{background:none} /* Lichtkegel folgt der Maus (dunkel, Desktop) */ #ux .gx-cursor{position:fixed;z-index:-1;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .6s; background:radial-gradient(circle,rgba(255,40,30,.11),rgba(255,40,30,.035) 38%,transparent 66%);will-change:transform} #ux .gx-cursor.on{opacity:1} html.gx-light #ux .gx-cursor{display:none} /* Licht-Schienen zwischen den Abschnitten */ #ux .gx-rail{position:relative;width:min(1200px,92%);height:1px;margin:0 auto;overflow:visible;pointer-events:none; background:linear-gradient(90deg,transparent,var(--line) 14%,var(--line) 86%,transparent)} #ux .gx-rail i{position:absolute;top:-1px;left:0;width:24%;height:3px;border-radius:3px;opacity:0; background:linear-gradient(90deg,transparent,#ff2a1f 45%,#fff 70%,transparent);box-shadow:0 0 18px 2px rgba(255,0,0,.5)} #ux .gx-rail.gx-on i{animation:gx-rail 2.2s var(--ease) forwards} @keyframes gx-rail{0%{left:0;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:76%;opacity:0}} /* Screenshots werden per Scan aufgedeckt */ #ux .gx-scanimg{position:relative} #ux .gx-scanimg img{clip-path:inset(0 0 100% 0);transition:clip-path 1.4s var(--ease) .1s,scale .8s var(--ease)} #ux .gx-scanimg.gx-in img{clip-path:inset(0 0 0 0)} #ux .gx-wipe{position:absolute;z-index:2;left:0;right:0;top:0;height:2px;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,#ff2a1f 15%,#fff 50%,#ff2a1f 85%,transparent);box-shadow:0 0 16px 3px rgba(255,0,0,.6)} #ux .gx-scanimg.gx-in .gx-wipe{animation:gx-wipe 1.5s var(--ease) .1s forwards} @keyframes gx-wipe{0%{top:0;opacity:1}85%{opacity:1}100%{top:100%;opacity:0}} /* Klick-Welle auf Buttons */ #ux .ux-header-actions .ux-login,#ux .gx-isl-cta{position:relative;overflow:hidden} #ux .gx-ripple{position:absolute;left:var(--rx0,50%);top:var(--ry0,50%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none; background:rgba(255,255,255,.55);animation:gx-ripple .75s var(--ease) forwards} @keyframes gx-ripple{to{transform:scale(34);opacity:0}} /* Typo-Band neigt sich mit der Scrollgeschwindigkeit */ #ux .gx-row{transform:translate3d(var(--bx,0px),0,0) skewX(var(--skew,0deg))} /* Hero-iPhones schweben, auf Touch-Geraeten laeuft der Glanz von selbst */ #ux.gx-js .design-phone-back{animation:gx-rise 1.8s var(--ease) .35s backwards,gx-float 7s ease-in-out 2.4s infinite alternate} #ux.gx-js .design-phone-front{animation:gx-rise 1.8s var(--ease) .5s backwards,gx-float 6s ease-in-out 2.3s infinite alternate-reverse} @keyframes gx-float{from{translate:0 0}to{translate:0 -12px}} #ux .design-hero:not(.is-home-visible) .design-phone{animation-play-state:paused} @media (hover:none){ #ux .design-hero .design-phone::after{animation:gx-glint 6.5s ease-in-out 3s infinite} @keyframes gx-glint{0%,55%{background-position:140% 0}100%{background-position:-50% 0}} } /* Galerie: iPhones heben sich beim Darueberfahren */ @media (hover:hover){ #ux .native-phone{transition:translate .6s var(--spring),scale .6s var(--spring),box-shadow .4s} #ux .native-shot:hover .native-phone{translate:0 -12px;scale:1.035;box-shadow:0 0 0 1.5px #3c3c41,0 0 0 3px #0b0b0d,0 60px 110px -40px rgba(0,0,0,1),0 0 90px -20px rgba(255,0,0,.5)} } @media (max-width:1100px){#ux .gx-flowhead{display:none}} @media (max-width:760px){ #ux .gx-cursor{display:none} } @media (prefers-reduced-motion:reduce){ #ux .gx-scanimg img{clip-path:none} } #ux .gx-streamed{position:relative} /* ===== Ebene 5: Orientierung und vollstaendige Aufnahme ===== */ /* Live-Status im Hero */ #ux .design-hero-notes .gx-live{display:inline-flex;align-items:center;gap:8px;color:var(--fog);border-color:rgba(48,209,88,.35);background:rgba(48,209,88,.08)} #ux .gx-live i{width:7px;height:7px;border-radius:50%;background:#30d158;box-shadow:0 0 0 3px rgba(48,209,88,.18),0 0 10px #30d158} #ux .design-hero.is-home-visible .gx-live i{animation:gx-live 2.4s ease-in-out infinite} @keyframes gx-live{50%{box-shadow:0 0 0 6px rgba(48,209,88,.08),0 0 14px #30d158}} /* Eine Aufnahme. Alles drin. */ #ux .gx-intake{padding-block:130px 40px} #ux .gx-intake-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:22px;margin-top:64px;align-items:stretch} #ux .gx-checklist,#ux .gx-photoguide{padding:36px 34px;border-radius:30px} #ux .gx-card-tag{display:inline-block;margin-bottom:22px;padding:7px 12px;border-radius:999px;background:var(--chip-bg2);border:1px solid var(--chip-bd);color:var(--fog);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase} #ux .gx-checklist ol{margin:0;padding:0;list-style:none;display:grid;gap:0} #ux .gx-checklist li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--line);color:var(--steel);font-size:14.5px;line-height:1.5} #ux .gx-checklist li:first-child{border-top:0;padding-top:4px} #ux .gx-checklist li>svg{flex:none;width:22px;height:22px;margin-top:1px;padding:4px;border-radius:50%;color:#fff;background:rgba(255,0,0,.28);border:1px solid rgba(255,90,80,.55);box-shadow:0 0 12px rgba(255,0,0,.3)} #ux .gx-checklist strong{display:block;font-size:15.5px;color:var(--fog);margin-bottom:2px} #ux .gx-topview{display:block;width:100%;max-width:420px;height:auto;margin:0 auto 10px;overflow:visible} #ux .gx-topview .gx-orbit{stroke:var(--chip-bd);stroke-dasharray:2 7} #ux .gx-topline .gx-tb{stroke:var(--fog);stroke-width:1.5;fill:var(--chip-bg)} #ux .gx-topline .gx-tc{stroke:var(--fog);stroke-width:1.1;opacity:.75;fill:var(--chip-bg)} #ux .gx-topline .gx-tr{stroke:var(--fog);stroke-width:1;opacity:.5} #ux .gx-topline :is(.gx-tw,.gx-tl){stroke:var(--fog);stroke-width:1.1;fill:var(--bg);opacity:.85} #ux .gx-topline .gx-tlamp{stroke:#ff2a1f;stroke-width:2} #ux .gx-topline .gx-taxis{stroke:var(--chip-bd2);stroke-dasharray:4 5} #ux .gx-cam line{stroke:var(--chip-bd2);stroke-dasharray:3 5} #ux .gx-cam circle{fill:var(--bg);stroke:var(--chip-bd2);stroke-width:1.4} #ux .gx-cam text{fill:var(--steel);font:700 11px var(--font);text-anchor:middle;dominant-baseline:central} #ux .gx-tips{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:12px} #ux .gx-tips li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--steel)} #ux .gx-tips b{flex:none;display:grid;place-items:center;min-width:34px;height:24px;padding:0 6px;border-radius:999px;font-size:11px;letter-spacing:.02em;color:var(--fog);background:var(--chip-bg2);border:1px solid var(--chip-bd)} /* Kapitel-Leiste am rechten Rand */ #ux .gx-chapters{position:fixed;z-index:900;right:22px;top:50%;translate:0 -50%;display:flex;flex-direction:column;gap:6px;opacity:0;pointer-events:none;transition:opacity .5s} #ux .gx-chapters.on{opacity:1;pointer-events:auto} #ux .gx-chapters a{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:22px;padding-left:14px;color:var(--steel);text-decoration:none} #ux .gx-chapters a::after{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--chip-bd2);transition:background .3s,transform .4s var(--spring),box-shadow .3s} #ux .gx-chapters span{font-size:12px;font-weight:600;white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--panel);border:1px solid var(--chip-bd); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;translate:8px 0;transition:opacity .25s,translate .35s var(--ease)} #ux .gx-chapters:hover span,#ux .gx-chapters a:focus-visible span{opacity:1;translate:0 0} #ux .gx-chapters a[aria-current]::after{background:#ff2a1f;transform:scale(1.6);box-shadow:0 0 0 3px rgba(255,0,0,.18),0 0 12px #ff0000} #ux .gx-chapters a[aria-current] span{color:var(--fog)} @media (max-width:1199px){#ux .gx-chapters{display:none}} @media (max-width:1100px){ #ux .gx-intake-grid{grid-template-columns:1fr} } @media (max-width:760px){ #ux .gx-intake{padding-block:80px 20px} #ux .gx-intake-grid{margin-top:40px;gap:14px} #ux .gx-checklist,#ux .gx-photoguide{padding:26px 20px;border-radius:24px} #ux .gx-checklist li{font-size:14px} } #ux .gx-tips b.gx-dot{min-width:34px;background:none;border:0} #ux .gx-tips b.gx-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#ff2a1f;box-shadow:0 0 10px rgba(255,0,0,.7)} html.gx-light #ux .gx-checklist li>svg,html.gx-light #ux .design-paths li::before{background:#ff2a1f;border-color:#d70015;box-shadow:0 6px 14px -6px rgba(255,0,0,.6)} /* ===================================================================== UNTERSEITEN: Ueber uns, Impressum, Datenschutz, Nutzungsbedingungen, Fehlerseite ===================================================================== */ /* Gemeinsamer Seitenkopf mit Raster, roter Glut und 3D-Bildmarke */ #ux .page-head,#ux main.partner-public,#ux .centerpiece{ --hero-bg:radial-gradient(ellipse 55% 75% at 78% 28%,rgba(255,30,20,.17),transparent 70%),radial-gradient(ellipse 80% 70% at 50% 30%,transparent 0%,var(--bg) 78%), linear-gradient(var(--grid) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 50% 0/72px 72px} #ux .page-head{position:relative;isolation:isolate;overflow:hidden;margin:0;border:0;padding:calc(168px + env(safe-area-inset-top,0px)) 0 84px;background:var(--hero-bg),var(--bg)} #ux .page-head .wrap{position:relative} #ux .page-head h1{margin:0;max-width:13ch;font-size:clamp(48px,7.4vw,112px);line-height:.95;letter-spacing:-.06em;font-weight:800;color:var(--fog)} #ux .page-head p{margin:22px 0 0;max-width:560px;font-size:18px;line-height:1.6;color:var(--steel)} #ux .page-head::after,#ux .gx-subrail{content:"";position:absolute;left:50%;bottom:0;width:min(1200px,92%);height:1px;translate:-50% 0; background:linear-gradient(90deg,transparent,var(--chip-bd2) 18%,#ff2a1f 50%,var(--chip-bd2) 82%,transparent)} #ux .gx-headmark{position:absolute;z-index:-1;right:clamp(10px,6vw,90px);top:50%;left:auto;width:clamp(150px,22vw,300px);height:auto;aspect-ratio:1;margin:0;translate:0 -46%;opacity:.95} #ux .gx-headmark .gx-mark-body{animation:gx-sway2 8s ease-in-out infinite alternate} @keyframes gx-sway2{from{rotate:y -24deg}to{rotate:y 24deg}} /* Rechtstexte als Glas-Dokument */ #ux .page-head+.wrap{position:relative;z-index:1;margin-top:-34px} #ux .page-head+.wrap>.prose{max-width:880px;margin:0 auto 120px;padding:clamp(30px,5vw,62px) clamp(22px,5vw,66px);border-radius:32px; background:var(--glass);border:1px solid var(--chip-bd);box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)} #ux .page-head+.wrap>.prose h2{font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:750;margin:50px 0 14px;padding-top:32px;border-top:1px solid var(--line);scroll-margin-top:120px} #ux .page-head+.wrap>.prose h2:first-child{margin-top:0;padding-top:0;border-top:0} #ux .page-head+.wrap>.prose h3,#ux .learning-article h3{font-size:19px;line-height:1.3;letter-spacing:-.02em;margin:28px 0 8px;color:var(--fog)} #ux .page-head+.wrap>.prose :is(p,li,address,td),#ux .learning-article :is(p,li){font-size:16px;line-height:1.75;color:var(--steel);font-style:normal} #ux .page-head+.wrap>.prose strong,#ux .learning-article strong{color:var(--fog)} #ux .page-head+.wrap>.prose a,#ux .learning-article a:not(.btn){color:var(--redt);text-decoration:underline;text-decoration-color:rgba(255,77,77,.4);text-underline-offset:3px} #ux .page-head+.wrap>.prose ul,#ux .learning-article ul{list-style:none;margin:12px 0;padding:0} #ux .page-head+.wrap>.prose ul li,#ux .learning-article ul li{position:relative;margin:6px 0;padding-left:22px} #ux .page-head+.wrap>.prose ul li::before,#ux .learning-article ul li::before{content:"";position:absolute;left:4px;top:.72em;width:6px;height:6px;border-radius:50%;background:#ff2a1f;box-shadow:0 0 8px rgba(255,0,0,.6)} #ux .page-head+.wrap>.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px} #ux .page-head+.wrap>.prose :is(th,td){padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top} #ux .page-head+.wrap>.prose th{color:var(--fog)} /* Nutzungsbedingungen */ #ux main.partner-public{position:relative;isolation:isolate;overflow-x:clip;padding:calc(160px + env(safe-area-inset-top,0px)) 0 120px;background:var(--hero-bg) top/100% 760px no-repeat,var(--bg)} #ux .learning-article,#ux .learning-article.registration{position:relative;max-width:900px;margin:0 auto;padding:0 clamp(18px,4vw,24px);background:none;border:0;box-shadow:none} #ux .learning-article>h1{margin:22px 0 0;max-width:none;padding-right:0;font-size:clamp(34px,4.8vw,68px);line-height:.96;letter-spacing:-.06em;font-weight:800;color:var(--fog)} #ux .learning-article>.partner-lead{margin:22px 0 64px;max-width:600px;font-size:18px;line-height:1.6;color:var(--steel)} #ux .learning-article>section{margin:0 0 14px;padding:30px clamp(22px,4vw,44px);border-radius:26px;background:var(--glass);border:1px solid var(--chip-bd); box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);scroll-margin-top:110px} #ux .learning-article>section h2{margin:0 0 12px;font-size:clamp(21px,2.2vw,27px);line-height:1.2;letter-spacing:-.03em;font-weight:750} #ux .learning-article>section p+p{margin-top:12px} /* Fehlerseite */ #ux .centerpiece{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;display:grid;place-items:center;text-align:center;max-width:none;width:auto; padding:calc(130px + env(safe-area-inset-top,0px)) 20px 70px;background:var(--hero-bg),var(--bg)} #ux .centerpiece::before{content:"404";position:absolute;z-index:-1;left:50%;top:44%;translate:-50% -50%;font-size:clamp(180px,34vw,520px);font-weight:900;letter-spacing:-.08em;line-height:1; color:transparent;-webkit-text-stroke:1.5px var(--chip-bd2);pointer-events:none} #ux .centerpiece h1{margin:20px auto 0;max-width:14ch;font-size:clamp(42px,6.4vw,92px);line-height:.98;letter-spacing:-.055em;font-weight:800} #ux .centerpiece .lead{max-width:540px;margin:20px auto 30px;font-size:18px;color:var(--steel)} /* Ueber uns: Hero mit Portrait in Glas und 3D-Neigung */ #ux.about-page main{overflow-x:clip} #ux .connect-about{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(32px,5vw,84px);align-items:center; padding:calc(150px + env(safe-area-inset-top,0px)) 0 90px;border:0} #ux .connect-about::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;translate:-50% 0;pointer-events:none; background:radial-gradient(ellipse 50% 70% at 25% 40%,rgba(255,30,20,.16),transparent 70%),radial-gradient(ellipse 80% 75% at 50% 35%,transparent 0%,var(--bg) 80%), linear-gradient(var(--grid) 1px,transparent 1px) 50% 0/72px 72px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 50% 0/72px 72px} #ux .connect-about figure{position:relative;margin:0;border-radius:32px;overflow:hidden;background:#0d0d0f;aspect-ratio:4/5; box-shadow:0 0 0 1px var(--chip-bd2),0 60px 120px -50px rgba(0,0,0,.9),0 0 150px -50px rgba(255,0,0,.5);transform:perspective(1300px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease)} #ux .connect-about figure img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} #ux .connect-about figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55)),radial-gradient(600px circle at var(--mx,30%) var(--my,0%),rgba(255,255,255,.14),transparent 45%)} #ux .connect-about figcaption{position:absolute;z-index:1;left:16px;right:16px;bottom:16px;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:18px; background:rgba(10,10,12,.5);border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);color:#fff} #ux .connect-about figcaption strong{color:#fff;font-size:16px} #ux .connect-about figcaption span{color:rgba(255,255,255,.7);font-size:13px} #ux .connect-about h1{margin:20px 0 22px;font-size:clamp(36px,4.4vw,66px);line-height:.98;letter-spacing:-.055em;font-weight:800;color:var(--fog)} #ux .connect-about h1 .gx-ln~.gx-ln .gx-li,#ux .about-group-head h2 .gx-ln~.gx-ln .gx-li,#ux .about-contact h2 .gx-ln~.gx-ln .gx-li,#ux #standort h2 .gx-ln~.gx-ln .gx-li,#ux .page-head h1 .gx-li,#ux .learning-article>h1 .gx-li{ background:linear-gradient(100deg,#ff2a1f 0%,#ff0000 40%,#b00000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} #ux .connect-about>div>p{font-size:17px;line-height:1.7;max-width:620px} #ux .connect-about-services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0;padding:0;border:0} #ux .connect-about-services>div{display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:20px;background:var(--chip-bg);border:1px solid var(--chip-bd)} #ux .connect-about-services strong{color:var(--fog);font-size:15px} #ux .connect-about-services span{color:var(--steel);font-size:14px;line-height:1.5} #ux .connect-about .partner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px} /* Ueber uns: Themen-Leiste klebt unter der Insel */ #ux .about-toc{position:sticky;z-index:40;top:calc(78px + env(safe-area-inset-top,0px));display:flex;flex-wrap:wrap;gap:4px;width:max-content;max-width:calc(100% - 24px);margin:0 auto;padding:5px;border-radius:999px; background:var(--panel);border:1px solid var(--chip-bd);-webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)} #ux .about-toc a{padding:9px 15px;border-radius:999px;font-size:13px;font-weight:600;color:var(--steel);text-decoration:none;background:transparent;border:1px solid transparent;transition:color .25s,background .25s,border-color .25s} #ux .about-toc a:hover{color:var(--fog);background:var(--chip-bg2)} #ux .about-toc a.is-current{color:#fff;background:#ff0000;border-color:#ff0000;box-shadow:0 8px 24px -8px rgba(255,0,0,.8)} /* Ueber uns: Gruppen mit Glas-Akkordeons */ #ux .about-group{padding:110px 0 20px;border:0;scroll-margin-top:90px} #ux .about-group-head{max-width:820px} #ux .about-group-head h2,#ux .about-contact h2,#ux .section-head h2{font-size:clamp(36px,4.8vw,70px)} #ux .about-group-head p,#ux .section-head .lead{font-size:17px;line-height:1.65;color:var(--steel);max-width:640px} #ux .about-topics{display:grid;gap:12px;margin-top:44px} #ux .about-topic{position:relative;border-radius:24px;background:var(--glass);border:1px solid var(--chip-bd);box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); transition:border-color .4s,box-shadow .5s;scroll-margin-top:150px} #ux .about-topic[open]{border-color:rgba(255,80,70,.45);box-shadow:var(--card-shadow),0 0 70px -30px rgba(255,0,0,.45)} #ux .about-topic summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 28px;cursor:pointer;list-style:none} #ux .about-topic summary::-webkit-details-marker{display:none} #ux .about-topic summary strong{display:block;font-size:19px;letter-spacing:-.02em;color:var(--fog)} #ux .about-topic summary small{display:block;margin-top:4px;font-size:14px;color:var(--steel)} #ux .about-topic summary b{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:20px;font-weight:400;color:var(--fog); background:var(--chip-bg2);border:1px solid var(--chip-bd2);transition:transform .5s var(--spring),background .3s,color .3s} #ux .about-topic[open] summary b{transform:rotate(45deg);background:#ff0000;border-color:#ff0000;color:#fff} #ux .about-topic-body{padding:4px 28px 34px;color:var(--steel)} /* Bausteine in den Artikeln */ #ux .about-topic-body :is(section,.section-soft){padding:34px 0 0;margin:0;border:0;background:none} #ux .about-topic-body .wrap{width:auto;max-width:none;margin:0;padding:0} #ux .about-topic-body :is(h2,h3){font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-.035em;font-weight:780;margin:12px 0 12px;color:var(--fog)} #ux .about-topic-body h4{font-size:17px;color:var(--fog);margin:0 0 6px} #ux .about-topic-body p,#ux .about-topic-body li{font-size:15.5px;line-height:1.7;color:var(--steel)} #ux .about-topic-body a:not(.btn){color:var(--redt)} #ux .page-lead{font-size:clamp(17px,1.5vw,19px)!important;line-height:1.65;color:var(--fog)!important} #ux .about-topic-photo,#ux .about-topic-body figure{margin:24px 0;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--chip-bd),0 40px 90px -40px rgba(0,0,0,.8)} #ux .about-topic-photo img,#ux .about-topic-body figure img{display:block;width:100%;height:auto} #ux .two-col{display:grid;grid-template-columns:minmax(0,1fr);gap:24px} #ux :is(.card,.why-card,.check-item,.area-card,.damage-card){position:relative;border-radius:22px;background:var(--glass);border:1px solid var(--chip-bd);box-shadow:var(--card-shadow);color:var(--steel); -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),border-color .3s} #ux :is(.card,.why-card,.check-item,.area-card):hover{border-color:var(--chip-bd2)} #ux :is(.card,.why-card,.check-item,.area-card) :is(h3,h4,strong){color:var(--fog)} #ux :is(.card-icon,.ic){display:grid;place-items:center;color:#fff;background:linear-gradient(160deg,rgba(255,60,50,.6),rgba(255,0,0,.2));border:1px solid rgba(255,110,100,.55); box-shadow:0 0 22px rgba(255,0,0,.3),inset 0 1px 0 rgba(255,255,255,.3)} #ux .check-item svg,#ux .checklist svg{color:#ff3b30} #ux .step-num{background:#ff0000;color:#fff;box-shadow:0 0 0 4px rgba(255,0,0,.18),0 0 18px rgba(255,0,0,.6)} #ux .step :is(h3,h4,strong){color:var(--fog)} #ux .steps::before,#ux .step::before{background:var(--line)!important} #ux .faq details{border-radius:18px;background:var(--glass);border:1px solid var(--chip-bd);box-shadow:none;-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur)} #ux .faq details[open]{border-color:rgba(255,80,70,.4)} #ux .faq summary{color:var(--fog)} #ux .faq-body,#ux .faq-body p{color:var(--steel)} #ux .cta-inline{border-radius:26px;border:1px solid rgba(255,80,70,.35);color:var(--steel); background:radial-gradient(ellipse 80% 120% at 0% 0%,rgba(255,30,20,.22),transparent 60%),var(--glass);box-shadow:var(--card-shadow),0 0 80px -40px rgba(255,0,0,.6)} #ux .cta-inline :is(h3,h4,strong){color:var(--fog)} #ux .btn-glass,#ux #main .btn-glass{background:var(--chip-bg2);color:var(--fog);border:0;box-shadow:inset 0 0 0 1px var(--chip-bd2)} #ux .btn-whatsapp,#ux #main .btn-whatsapp{border:0} #ux .linklist a{border-radius:16px;background:var(--glass);border:1px solid var(--chip-bd);color:var(--fog);transition:border-color .25s,translate .45s var(--spring)} #ux .linklist a:hover{border-color:rgba(255,80,70,.5);translate:4px 0} #ux .place-links a{background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--steel)} #ux .place-links a:hover{color:var(--fog);border-color:var(--chip-bd2)} #ux .disclaimer{border-left:2px solid #ff2a1f;color:var(--dim)} #ux .intro-fact :is(strong,b){color:var(--fog)} #ux .photo-band{position:relative;isolation:isolate;overflow:hidden;margin:34px 0;padding:0;min-height:380px;display:flex;align-items:flex-end;border-radius:26px; box-shadow:0 0 0 1px var(--chip-bd),0 50px 100px -50px rgba(0,0,0,.9)} #ux .photo-band>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)} #ux .photo-band:hover>img{transform:scale(1.08)} #ux .photo-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.08) 20%,rgba(0,0,0,.82))} #ux .photo-band .wrap{width:100%;padding:32px clamp(22px,4vw,40px)} #ux .photo-band :is(h2,h3){color:#fff;font-size:clamp(24px,2.6vw,36px)} #ux .photo-band p{color:rgba(255,255,255,.78)} #ux .photo-band .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff} /* Schadensgalerie, Standort, Kontakt */ #ux :is(.damage-section,.section-soft){background:none;border:0} #ux .damage-section{padding:110px 0 30px} #ux .damage-card{overflow:hidden} #ux .damage-card .cinema-frame{display:block;overflow:hidden;border-radius:0} #ux .damage-card img{transition:transform 1.2s var(--ease)} #ux .damage-card:hover img{transform:scale(1.05)} #ux .damage-card figcaption{padding:22px 24px 26px} #ux .damage-card h3{color:var(--fog);font-size:19px;letter-spacing:-.02em} #ux .damage-card p{font-size:14.5px} #ux .photo-index{color:var(--redt)} #ux .photo-expand{background:rgba(0,0,0,.55);color:#fff;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} #ux #standort{padding:110px 0 30px} #ux .location-option{border-radius:22px;background:var(--glass);border:1px solid var(--chip-bd);box-shadow:none;color:var(--steel);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);transition:border-color .3s,box-shadow .4s} #ux .location-option strong{color:var(--fog)} #ux .location-option[aria-pressed="true"]{border-color:rgba(255,80,70,.6);box-shadow:inset 3px 0 0 #ff0000,0 0 60px -26px rgba(255,0,0,.6)} #ux .location-copy{color:var(--steel)} #ux .map-shell{border-radius:26px;overflow:hidden;background:var(--glass);border:1px solid var(--chip-bd);box-shadow:var(--card-shadow)} #ux .map-placeholder{background:radial-gradient(ellipse 70% 80% at 30% 10%,rgba(255,30,20,.16),transparent 70%),transparent} #ux .map-placeholder :is(strong,h3){color:var(--fog)} #ux .map-placeholder p{color:var(--steel)} #ux .about-contact{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center;gap:40px;margin:90px auto 110px; padding:clamp(34px,5vw,64px);border:1px solid rgba(255,80,70,.3);border-radius:36px;overflow:hidden; background:radial-gradient(ellipse 70% 120% at 100% 0%,rgba(255,30,20,.24),transparent 60%),var(--glass);box-shadow:var(--card-shadow),0 0 120px -50px rgba(255,0,0,.6)} #ux .about-contact-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px} #ux .about-contact-actions .btn{justify-content:center} #ux .about-contact-actions .design-text-link{align-self:center} /* Fahrzeug-Pruefung in „Leistungen" */ #ux .learning-article>.gx-headmark{top:-30px;right:0;translate:0 0;width:clamp(130px,17vw,230px)} /* Unterseiten responsiv */ @media (max-width:900px){ #ux .connect-about{grid-template-columns:1fr;padding-top:calc(118px + env(safe-area-inset-top,0px))} #ux .connect-about figure{max-width:440px;aspect-ratio:4/4.4} #ux .about-contact{grid-template-columns:1fr} } @media (max-width:760px){ #ux .page-head{padding:calc(124px + env(safe-area-inset-top,0px)) 0 64px} #ux .gx-headmark{right:-30px;width:150px;opacity:.5} #ux .page-head+.wrap>.prose{border-radius:24px;margin-bottom:80px} #ux main.partner-public{padding-top:calc(120px + env(safe-area-inset-top,0px))} #ux .learning-article>section{border-radius:20px} #ux .connect-about-services{grid-template-columns:1fr} #ux .about-toc{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:auto;max-width:none;margin:0 -4px} #ux .about-toc::-webkit-scrollbar{display:none} #ux .about-toc a{flex:none} #ux .about-group{padding-top:76px} #ux .about-topic summary{padding:18px 18px} #ux .about-topic-body{padding:2px 18px 26px} #ux .photo-band{min-height:300px;border-radius:20px} #ux .about-contact{border-radius:26px;margin:60px auto 80px} #ux .centerpiece::before{font-size:46vw;top:30%} } html.gx-light #ux :is(.card-icon,.ic){background:linear-gradient(160deg,#ff3b30,#d70015);border-color:rgba(215,0,21,.35);box-shadow:0 10px 24px -8px rgba(255,0,0,.5),inset 0 1px 0 rgba(255,255,255,.35)} html.gx-light #ux .connect-about figcaption{background:rgba(255,255,255,.72);color:#1d1d1f;border-color:rgba(0,0,0,.08)} html.gx-light #ux .connect-about figcaption strong{color:#1d1d1f} html.gx-light #ux .connect-about figcaption span{color:#6e6e73} #ux .learning-article>h1,#ux .page-head h1,#ux .centerpiece h1,#ux .connect-about h1{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word} /* ===================================================================== SOCIAL MEDIA: Instagram & TikTok in Markenoptik ===================================================================== */ #ux{--ig-grad:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);--tt-cyan:#25f4ee;--tt-red:#fe2c55} /* Footer: Marken-Kacheln */ #ux .connect-footer-social{gap:12px} #ux .connect-footer-social a{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:18px;overflow:hidden; background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--fog);text-decoration:none;transition:border-color .35s,box-shadow .45s,translate .5s var(--spring),background .35s} #ux .connect-footer-social a>svg{flex:none;width:40px;height:40px;padding:9px;border-radius:12px;box-sizing:border-box;color:#fff;background:#111;stroke-width:1.9} #ux .connect-footer-social a.gx-ig>svg,#ux .connect-footer-social a[href*="instagram"]>svg{background:var(--ig-grad)} #ux .connect-footer-social a.gx-tt>svg,#ux .connect-footer-social a[href*="tiktok"]>svg{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} #ux .connect-footer-social span{display:flex;flex-direction:column;gap:1px;font-size:14px;font-weight:650;line-height:1.2} #ux .connect-footer-social small{font-size:12px;font-weight:500;color:var(--dim)} #ux .connect-footer-social b{display:grid;place-items:center;width:26px;height:26px;margin-left:6px;border-radius:50%;font-size:12px;font-weight:600;color:var(--fog); background:var(--chip-bg2);transition:transform .5s var(--spring),background .3s,color .3s} #ux .connect-footer-social a:hover{translate:0 -3px;color:var(--fog)} #ux .connect-footer-social a:hover b{transform:translate(2px,-2px);color:#fff} #ux .connect-footer-social a.gx-ig:hover{border-color:rgba(214,36,159,.55);box-shadow:0 18px 40px -18px rgba(214,36,159,.7),0 0 0 1px rgba(253,89,73,.25)} #ux .connect-footer-social a.gx-ig:hover b{background:var(--ig-grad)} #ux .connect-footer-social a.gx-tt:hover{border-color:rgba(254,44,85,.5);box-shadow:-10px 14px 36px -18px rgba(37,244,238,.65),10px 18px 40px -18px rgba(254,44,85,.7)} #ux .connect-footer-social a.gx-tt:hover b{background:#000;color:#fff;box-shadow:-1.5px -1px 0 var(--tt-cyan),1.5px 1px 0 var(--tt-red)} /* Kompakte Markenbuttons (Kontakt, Handy-Menue) */ #ux .gx-social-mini{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px} #ux .gx-social-mini>span{width:100%;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} #ux .gx-sm{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:999px;text-decoration:none;font-size:14px;font-weight:650;color:var(--fog); background:var(--chip-bg);border:1px solid var(--chip-bd);transition:translate .45s var(--spring),border-color .3s,box-shadow .4s} #ux .gx-sm i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff} #ux .gx-sm i svg{width:17px;height:17px} #ux .gx-sm.gx-ig i{background:var(--ig-grad)} #ux .gx-sm.gx-tt i{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} #ux .gx-sm:hover{translate:0 -2px} #ux .gx-sm.gx-ig:hover{border-color:rgba(214,36,159,.5);box-shadow:0 14px 30px -16px rgba(214,36,159,.7)} #ux .gx-sm.gx-tt:hover{border-color:rgba(254,44,85,.45);box-shadow:-8px 12px 28px -16px rgba(37,244,238,.6),8px 14px 30px -16px rgba(254,44,85,.65)} #ux .gx-menu-social{display:flex;gap:10px;margin-top:14px} #ux .gx-menu-social .gx-sm{flex:1;justify-content:flex-start;color:#fff;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)} /* Grosser Abschnitt auf Ueber uns: zwei Marken-Karten mit QR-Code */ #ux .gx-social{padding:110px 0 10px} #ux .gx-social-head{max-width:760px} #ux .gx-social-head h2{font-size:clamp(36px,4.8vw,70px)} #ux .gx-social-head h2 .gx-ln~.gx-ln .gx-li{background:linear-gradient(100deg,#ff2a1f 0%,#ff0000 40%,#b00000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} #ux .gx-social-head p{max-width:560px} #ux .gx-social-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:48px} #ux .gx-sc{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr auto;gap:18px 26px;min-height:280px;padding:32px;border-radius:32px; text-decoration:none;color:var(--fog);background:var(--glass);border:1px solid var(--chip-bd);box-shadow:var(--card-shadow);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur); transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease),border-color .4s,box-shadow .5s} #ux .gx-sc::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.55;transition:opacity .5s} #ux .gx-sc-ig::before{background:radial-gradient(ellipse 70% 90% at 0% 100%,rgba(253,89,73,.32),transparent 60%),radial-gradient(ellipse 60% 80% at 100% 0%,rgba(40,90,235,.25),transparent 60%),radial-gradient(ellipse 50% 60% at 40% 60%,rgba(214,36,159,.18),transparent 70%)} #ux .gx-sc-tt{background:linear-gradient(160deg,#121214,#050506);border-color:rgba(255,255,255,.1);color:#f5f5f7} #ux .gx-sc-tt::before{background:radial-gradient(ellipse 60% 80% at 0% 0%,rgba(37,244,238,.22),transparent 60%),radial-gradient(ellipse 60% 80% at 100% 100%,rgba(254,44,85,.28),transparent 60%)} #ux .gx-sc:hover::before{opacity:1} #ux .gx-sc-ig:hover{border-color:rgba(214,36,159,.5);box-shadow:var(--card-shadow),0 30px 80px -40px rgba(214,36,159,.8)} #ux .gx-sc-tt:hover{border-color:rgba(254,44,85,.45);box-shadow:var(--card-shadow),-20px 30px 70px -40px rgba(37,244,238,.6),20px 30px 80px -40px rgba(254,44,85,.75)} #ux .gx-sc-ico{grid-column:1;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;color:#fff} #ux .gx-sc-ico svg{width:32px;height:32px} #ux .gx-sc-ig .gx-sc-ico{background:var(--ig-grad);box-shadow:0 14px 34px -12px rgba(214,36,159,.8)} #ux .gx-sc-tt .gx-sc-ico{background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 14px 34px -12px rgba(254,44,85,.6)} #ux .gx-sc-txt{grid-column:1;align-self:end;display:flex;flex-direction:column;gap:4px} #ux .gx-sc-txt strong{font-size:clamp(28px,2.8vw,40px);line-height:1;letter-spacing:-.04em;font-weight:800;color:inherit} #ux .gx-sc-txt small{font-size:16px;font-weight:600;color:inherit;opacity:.65} #ux .gx-sc-cta{grid-column:1;align-self:end;display:inline-flex;align-items:center;gap:10px;width:max-content;padding:10px 18px;border-radius:999px;font-size:14px;font-weight:650;color:#fff} #ux .gx-sc-ig .gx-sc-cta{background:var(--ig-grad);box-shadow:0 10px 26px -10px rgba(214,36,159,.8)} #ux .gx-sc-tt .gx-sc-cta{background:#fff;color:#000;box-shadow:-2px -1.5px 0 var(--tt-cyan),2px 1.5px 0 var(--tt-red)} #ux .gx-sc-cta b{transition:transform .5s var(--spring)} #ux .gx-sc:hover .gx-sc-cta b{transform:translate(3px,-3px)} #ux .gx-sc-qr{grid-column:2;grid-row:1/4;align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px} #ux .gx-sc-qr svg{display:block;width:138px;height:138px;padding:10px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 20px 40px -20px rgba(0,0,0,.6)} #ux .gx-sc-qr em{font-style:normal;font-size:12px;font-weight:600;opacity:.6} @media (max-width:900px){ #ux .gx-social-grid{grid-template-columns:1fr} } @media (hover:none),(max-width:600px){ #ux .gx-sc{grid-template-columns:1fr;min-height:0} #ux .gx-sc-qr{display:none} } @media (max-width:760px){ #ux .gx-social{padding-top:76px} #ux .gx-sc{padding:24px;border-radius:26px;gap:14px} #ux .gx-sc-ico{width:54px;height:54px;border-radius:16px} } /* ===================================================================== LOGIN-BEREICH: Partner-Login, Passwort, Registrierung als Inszenierung ===================================================================== */ #ux.auth-page{--card-bg:linear-gradient(165deg,rgba(30,30,33,.72),rgba(10,10,12,.8));--card-bd:rgba(255,255,255,.11);--card-fg:#f5f5f7;--card-mute:#a1a1a6; --field-bg:rgba(255,255,255,.05);--field-bd:rgba(255,255,255,.13);--field-fg:#fff; min-height:100svh;margin:0;background:var(--bg);color:var(--fog);overflow-x:hidden} html.gx-light #ux.auth-page{--card-bg:linear-gradient(165deg,rgba(255,255,255,.82),rgba(255,255,255,.66));--card-bd:rgba(0,0,0,.08);--card-fg:#1d1d1f;--card-mute:#6e6e73; --field-bg:rgba(0,0,0,.035);--field-bd:rgba(0,0,0,.12);--field-fg:#1d1d1f} /* Buehne: Rasterboden, rote Glut, Lichtkegel am Zeiger */ #ux.auth-page::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background:radial-gradient(ellipse 70% 55% at 30% 100%,rgba(255,30,20,.12),transparent 70%),radial-gradient(ellipse 60% 60% at 80% 10%,rgba(255,255,255,.035),transparent 70%),var(--bg)} #ux.auth-page::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(460px circle at var(--cx,72%) var(--cy,40%),rgba(255,40,30,.11),transparent 70%)} #ux .auth-frame{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:0;min-height:100svh;width:auto;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none} /* Linke Seite: Slogan, Zeitleiste, 3D-Fahrzeug */ #ux .auth-context{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:100svh;margin:0;padding:clamp(26px,3.4vw,46px) clamp(28px,4vw,60px); overflow:hidden;border:0;border-radius:0;box-shadow:none;color:var(--fog); background:none} #ux .auth-brand{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;width:max-content} #ux .auth-brand img:last-child{filter:brightness(0) invert(1)} html.gx-light #ux .auth-brand img:last-child{filter:brightness(0)} #ux .auth-context-copy{position:relative;z-index:2;max-width:560px;margin:0} #ux .auth-overline{display:inline-flex;align-items:center;gap:9px;padding:7px 13px 7px 11px;border-radius:999px;background:var(--chip-bg);border:1px solid var(--chip-bd);color:var(--chip-fg); font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} #ux .auth-overline::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff0000;box-shadow:0 0 10px #ff0000} #ux .auth-context h2{margin:22px 0 16px;font-size:clamp(40px,4.6vw,72px);line-height:.95;letter-spacing:-.058em;font-weight:800;color:var(--fog)} #ux .auth-context h2 span{background:linear-gradient(100deg,#ff2a1f 0%,#ff0000 40%,#b00000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} #ux .auth-context-copy>p{max-width:460px;font-size:17px;line-height:1.65;color:var(--steel)} #ux .auth-context ol{position:relative;display:grid;gap:2px;margin:24px 0 0;padding:0;list-style:none} #ux .auth-context ol::before{content:"";position:absolute;left:17px;top:22px;bottom:22px;width:1px;background:linear-gradient(180deg,rgba(255,60,50,.7),rgba(255,60,50,.12))} #ux .auth-context ol li{position:relative;display:flex;align-items:center;gap:16px;padding:8px 0;border:0;color:var(--fog);font-size:15.5px;font-weight:550;background:none} #ux .auth-context ol li span{display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:50%;font-size:12px;font-weight:750;color:#fff; background:#120607;border:1px solid rgba(255,90,80,.6);box-shadow:0 0 16px rgba(255,0,0,.35)} #ux.gx-js.auth-page .auth-context ol li span{animation:gx-step 6s ease-in-out infinite} #ux.gx-js.auth-page .auth-context ol li:nth-child(2) span{animation-delay:2s} #ux.gx-js.auth-page .auth-context ol li:nth-child(3) span{animation-delay:4s} @keyframes gx-step{0%,8%,40%,100%{background:#120607;box-shadow:0 0 16px rgba(255,0,0,.35)}16%,30%{background:#ff0000;box-shadow:0 0 0 6px rgba(255,0,0,.16),0 0 30px #ff0000}} #ux .auth-context-foot{position:relative;z-index:2;display:inline-flex;align-items:center;gap:10px;width:max-content;padding:10px 16px;border-radius:999px;font-size:13px;color:var(--chip-fg); background:var(--panel);border:1px solid var(--chip-bd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} #ux .auth-context-foot svg{width:16px;height:16px;color:#30d158} #ux .auth-context,#ux .auth-entry{position:relative;z-index:1} /* Rechte Seite: schwarze Glas-Karte mit umlaufendem Lichtstrahl */ #ux .auth-entry,#ux .auth-simple-main{background:none} #ux .auth-entry{display:grid;place-items:center;min-height:100svh;padding:clamp(18px,3vw,40px) clamp(20px,4vw,60px)} #ux .auth-entry-inner,#ux .auth-simple-main{position:relative;isolation:isolate;width:min(480px,100%);margin:0 auto;padding:clamp(28px,3.4vw,46px);border-radius:34px;color:var(--card-fg); background:var(--card-bg);border:1px solid var(--card-bd);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 60px 120px -40px rgba(0,0,0,.9),0 0 140px -50px rgba(255,0,0,.45); -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s var(--ease)} html.gx-light #ux .auth-entry-inner,html.gx-light #ux .auth-simple-main{box-shadow:inset 0 1px 0 #fff,0 50px 100px -50px rgba(0,0,0,.3),0 0 120px -50px rgba(255,0,0,.3)} #ux .auth-entry-inner::before,#ux .auth-simple-main::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:1.5px;pointer-events:none; background:conic-gradient(from var(--beam,0deg),transparent 0 66%,rgba(255,60,50,.95) 78%,#fff 82%,rgba(255,60,50,.95) 86%,transparent 96%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:gx-beam 6s linear infinite} #ux .auth-entry-inner::after,#ux .auth-simple-main::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none; background:radial-gradient(520px circle at var(--mx,30%) var(--my,-10%),rgba(255,255,255,.09),transparent 46%)} #ux.gx-js .auth-entry-inner,#ux.gx-js .auth-simple-main{animation:gx-cardin .45s var(--ease) both} @keyframes gx-cardin{from{opacity:0;transform:perspective(1400px) translateY(26px) scale(.985);filter:blur(8px)}} #ux .auth-mobile-brand{display:none} #ux .workspace-label{display:inline-flex;align-items:center;gap:9px;margin:0;padding:7px 13px 7px 11px;border-radius:999px;background:rgba(255,0,0,.12);border:1px solid rgba(255,80,70,.4); color:var(--card-fg);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} #ux .workspace-label::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff0000;box-shadow:0 0 10px #ff0000} #ux .auth-entry h1,#ux .auth-simple-main h1{margin:18px 0 10px;font-size:clamp(34px,3.3vw,48px);line-height:1.02;letter-spacing:-.048em;font-weight:800;color:var(--card-fg)} #ux .workspace-intro{margin:0;font-size:15.5px;line-height:1.6;color:var(--card-mute)} #ux .workspace-card{margin:22px 0 0;padding:0;background:none;border:0;box-shadow:none} #ux.auth-page label{display:grid;gap:7px;margin:0;font-size:13px;font-weight:650;color:var(--card-mute)} #ux.auth-page .workspace-card form,#ux.auth-page .auth-alternative form{display:grid;gap:14px;margin:0} #ux.auth-page .workspace-card input{margin:0} #ux .auth-context,#ux .auth-entry,#ux .auth-entry-inner,#ux .auth-simple-main{box-sizing:border-box} #ux.auth-page input:not([type="checkbox"]):not([type="radio"]),#ux.auth-page select,#ux.auth-page textarea{width:100%;height:54px;padding:0 16px;border-radius:16px;font-size:16px; color:var(--field-fg);background:var(--field-bg);border:1px solid var(--field-bd);box-shadow:none;transition:border-color .25s,box-shadow .35s,background .25s} #ux.auth-page textarea{height:auto;padding:14px 16px} #ux.auth-page input::placeholder{color:#6e6e73} #ux.auth-page input:focus,#ux.auth-page select:focus,#ux.auth-page textarea:focus{outline:none;border-color:rgba(255,70,60,.9);background:var(--field-bg); box-shadow:0 0 0 4px rgba(255,0,0,.16),0 0 34px -6px rgba(255,0,0,.6)} #ux .auth-password-field{position:relative} #ux .password-toggle{color:var(--card-mute);background:none;border:0} #ux .password-toggle:hover{color:var(--card-fg)} #ux.auth-page .btn-block,#ux.auth-page .workspace-card .btn{position:relative;overflow:hidden;width:100%;height:56px;margin-top:4px;border-radius:16px;font-size:16px;justify-content:center; box-shadow:0 18px 40px -16px rgba(255,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25)} #ux.auth-page .btn-block::after,#ux.auth-page .workspace-card .btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);animation:gx-shimmer 3.6s ease-in-out 1.8s infinite} @keyframes gx-shimmer{0%,55%{left:-40%}85%,100%{left:120%}} #ux.auth-page .btn-block.gx-busy{pointer-events:none;filter:saturate(.8)} #ux.auth-page .btn-block.gx-busy::after{animation-duration:1s;animation-delay:0s} #ux .workspace-reset{margin:16px 0 0;text-align:center} #ux .workspace-reset a,#ux .auth-back,#ux .auth-back a{color:var(--card-mute);font-size:14px;text-decoration:none} #ux .workspace-reset a:hover,#ux .auth-back a:hover{color:var(--card-fg)} #ux .auth-alternative{margin-top:22px;padding:0;border-radius:18px;background:var(--field-bg);border:1px solid var(--field-bd)} #ux .auth-alternative summary{padding:14px 18px;font-size:14px;font-weight:600;color:var(--card-fg);cursor:pointer} #ux .auth-alternative form{padding:0 18px 18px} #ux .auth-alternative .portal-button{width:100%;height:48px;border-radius:14px;background:var(--chip-bg2);color:var(--card-fg);border:1px solid var(--field-bd)} #ux .auth-divider{color:var(--card-mute)} #ux #auth-message{min-height:0;margin:14px 0 0;font-size:14px;color:var(--card-mute)} #ux #auth-message.portal-error{padding:12px 14px;border-radius:14px;color:#ffb3ad;background:rgba(255,0,0,.12);border:1px solid rgba(255,80,70,.45)} html.gx-light #ux #auth-message.portal-error{color:#b3000c} #ux .auth-entry-inner.gx-shake,#ux .auth-simple-main.gx-shake{animation:gx-shake .55s cubic-bezier(.36,.07,.19,.97) both} @keyframes gx-shake{10%,90%{translate:-2px 0}20%,80%{translate:4px 0}30%,50%,70%{translate:-8px 0}40%,60%{translate:8px 0}} #ux .workspace-enrollment{margin:24px 0 0;padding-top:20px;border-top:1px solid var(--card-bd);text-align:center;font-size:14px;color:var(--card-mute)} #ux .workspace-enrollment a{margin-left:6px;color:#ff4d4d;font-weight:650;text-decoration:none} html.gx-light #ux .workspace-enrollment a{color:#d70015} #ux .workspace-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;margin:18px 0 0;padding:0;border:0;background:none} #ux .workspace-legal a{font-size:12.5px;color:var(--card-mute);text-decoration:none} #ux .workspace-legal a:hover{color:var(--card-fg)} /* Passwort & Registrierung */ #ux .auth-simple-header{position:relative;z-index:2;display:flex;justify-content:center;padding:calc(26px + env(safe-area-inset-top,0px)) 20px 10px;background:none;border:0} #ux .auth-simple-main{margin:20px auto 70px} #ux.auth-registration .auth-simple-main{width:min(680px,100%)} #ux .portal-check{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--card-mute)} /* Theme-Schalter auf den Login-Seiten */ #ux .gx-auth-theme{position:fixed;z-index:50;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%; color:var(--fog);background:var(--panel);border:1px solid var(--chip-bd);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer} #ux .gx-auth-theme svg{width:18px;height:18px} #ux .gx-auth-theme .gx-moon,html.gx-light #ux .gx-auth-theme .gx-sun{display:none} html.gx-light #ux .gx-auth-theme .gx-moon{display:block} /* Handy: 3D-Buehne oben, Karte darunter */ @media (max-width:900px){ #ux .auth-frame{grid-template-columns:1fr} #ux .auth-context{display:block;min-height:0;height:auto;padding:calc(22px + env(safe-area-inset-top,0px)) 22px 18px;background:none} #ux .auth-context::after,#ux .auth-context-copy,#ux .auth-context-foot{display:none} #ux .auth-entry{min-height:0;place-items:start center;padding:0 14px 40px} #ux .auth-entry-inner{margin-top:-6px} } @media (max-width:520px){ #ux .auth-entry-inner,#ux .auth-simple-main{padding:26px 20px;border-radius:28px} #ux .gx-auth-theme{top:calc(20px + env(safe-area-inset-top,0px));bottom:auto;right:20px;width:38px;height:38px} } @media (prefers-reduced-motion:reduce){ #ux .auth-entry-inner::before,#ux .auth-simple-main::before,#ux.auth-page .btn-block::after{animation:none} #ux.gx-js .auth-entry-inner,#ux.gx-js .auth-simple-main{animation:none} } #ux .gx-auth-theme.gx-auth-theme-inline{position:static;margin-left:10px;width:38px;height:38px} #ux .auth-simple-header{align-items:center;gap:10px} @media (max-width:520px){ #ux .auth-simple-header{justify-content:space-between;gap:6px;padding-left:16px;padding-right:16px} #ux .auth-simple-header .auth-brand img:last-child{width:120px;height:auto} #ux .auth-simple-header>a:not(.auth-brand){flex:none;white-space:nowrap} #ux .gx-auth-theme.gx-auth-theme-inline{flex:none;margin-left:0} } #ux.auth-page main h2{margin:28px 0 8px;font-size:clamp(22px,2.2vw,28px);line-height:1.15;letter-spacing:-.03em;font-weight:750;color:var(--card-fg)} #ux.auth-page main h2 .gx-li{translate:none} /* ===================================================================== FINALER SCHLIFF: ruhig und unaufdringlich Keine Pillen-Labels mit Punkt, keine Leuchtraender, kein Verlaufstext, keine Glanz- und Glimmeffekte. Rot nur als ruhiger Akzent (Logo-Rot). ===================================================================== */ #ux{--brand-red:#ff0000} /* Labels ueber Ueberschriften: schlichter Text statt Pille mit rotem Punkt */ #ux .eyebrow,#ux .design-hero-copy>.eyebrow,#ux .gx-card-tag,#ux .gx-hall-tag,#ux .design-role-label,#ux .design-paths article+article .design-role-label, #ux .native-availability .native-status,#ux .auth-overline,#ux .workspace-label{ display:inline-block;padding:0;margin-bottom:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none; font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} #ux .eyebrow::before,#ux .auth-overline::before,#ux .workspace-label::before,#ux .native-availability .native-status::before{content:none;display:none} #ux .gx-card-tag{margin-bottom:18px} #ux .gx-hall-tag,#ux .design-paths article+article .design-role-label,#ux .native-availability .native-status{color:var(--redt)} #ux .design-workflow li>b small{padding:0;border:0;border-radius:0;background:none;letter-spacing:.12em} html.gx-light #ux .gx-hall-tag{background:none} /* Hero-Hinweise als ruhige Textzeile */ #ux .design-hero-notes{gap:6px 22px} #ux .design-hero-notes span{padding:0;border:0;border-radius:0;background:none;color:var(--steel)} /* Rote Hervorhebung als Vollton statt Farbverlauf mit Glanzlauf */ #ux .design-hero h1 span:not(.gx-ln):not(.gx-li),#ux .design-section-heading h2 span:not(.gx-ln):not(.gx-li),#ux .native-app-heading h2 span:not(.gx-ln):not(.gx-li), #ux .gx-trust-head h2 span:not(.gx-ln):not(.gx-li),#ux .connect-about h1 .gx-ln~.gx-ln .gx-li,#ux .about-group-head h2 .gx-ln~.gx-ln .gx-li,#ux .about-contact h2 .gx-ln~.gx-ln .gx-li, #ux #standort h2 .gx-ln~.gx-ln .gx-li,#ux .gx-social-head h2 .gx-ln~.gx-ln .gx-li,#ux .auth-context h2 span,#ux .connect-footer-brand>p span{ background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--brand-red);color:var(--brand-red);filter:none;animation:none} #ux.gx-js .design-hero h1 span:not(.gx-ln):not(.gx-li),#ux main h2.gx-up span:not(.gx-ln):not(.gx-li){animation:none} /* Seitentitel der Unterseiten in Schriftfarbe */ #ux .page-head h1 .gx-li,#ux .learning-article>h1 .gx-li{background:none;-webkit-text-fill-color:currentColor;color:var(--fog)} #ux .page-head h1,#ux .learning-article>h1{color:var(--fog)} /* Buttons ohne Glimmen */ #ux .btn,#ux #main .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} #ux .btn:hover,#ux #main .btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.28)} #ux .btn.design-outline,#ux #main .btn.design-outline,#ux .btn.btn-outline,#ux #main .btn.btn-outline{box-shadow:inset 0 0 0 1px var(--chip-bd2)} /* Symbole, Nummern und Haekchen flach statt leuchtend */ #ux .gx-ico,#ux :is(.card-icon,.ic),#ux .design-benefits b{background:var(--chip-bg2);border:1px solid var(--chip-bd);color:var(--brand-red);box-shadow:none} html.gx-light #ux .gx-ico,html.gx-light #ux :is(.card-icon,.ic),html.gx-light #ux .design-benefits b{background:rgba(255,0,0,.06);border-color:rgba(255,0,0,.18);color:#e00000;box-shadow:none} #ux .gx-checklist li>svg,#ux .design-paths li::before{background:none;border:1px solid var(--chip-bd2);color:var(--brand-red);box-shadow:none} html.gx-light #ux .gx-checklist li>svg,html.gx-light #ux .design-paths li::before{background:none;border-color:rgba(0,0,0,.18);color:#e00000;box-shadow:none} #ux .gx-steps b,#ux .step-num{background:none;border:1px solid var(--chip-bd2);color:var(--fog);box-shadow:none} #ux .gx-trust-list svg,#ux .gx-sep,#ux .gx-specs svg,#ux .gx-hall li svg{filter:none} #ux .design-workflow li.is-on{box-shadow:var(--card-shadow)} #ux .gx-flowhead{box-shadow:0 0 0 3px rgba(255,0,0,.18)} /* Keine rotierenden Lichtraender beim Darueberfahren, kein Lichtschein an der Maus */ #ux .gx-hot::after{animation:none!important} #ux .gx-cursor{display:none} /* Login: ohne Leuchtrand, Label, Glanz-Lauf und Blinken */ #ux.auth-page .workspace-label,#ux.auth-page .auth-overline{display:none} #ux .auth-entry-inner::before,#ux .auth-simple-main::before{content:none} #ux .auth-entry-inner,#ux .auth-simple-main{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.8)} html.gx-light #ux .auth-entry-inner,html.gx-light #ux .auth-simple-main{box-shadow:0 30px 70px -40px rgba(0,0,0,.28)} #ux.auth-page .btn-block::after,#ux.auth-page .workspace-card .btn::after{content:none} #ux.auth-page .btn-block,#ux.auth-page .workspace-card .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.22)} #ux.gx-js.auth-page .auth-context ol li span,#ux.gx-js.auth-page .auth-context ol li:nth-child(n) span{animation:none} #ux .auth-context ol li span,html.gx-light #ux .auth-context ol li span{background:transparent;border:1px solid rgba(255,255,255,.4);box-shadow:none} #ux .auth-context ol::before{background:rgba(255,255,255,.22)} #ux .auth-context-foot svg{color:currentColor} #ux.auth-page input:focus,#ux.auth-page select:focus,#ux.auth-page textarea:focus{box-shadow:0 0 0 3px rgba(255,0,0,.14)} #ux .auth-entry h1,#ux .auth-simple-main h1{margin-top:0} /* Login-Hintergrund: fliessendes Linienfeld statt Foto */ #ux .gx-lines{position:fixed;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none} #ux .auth-context-copy>p{color:var(--steel)} @media (max-width:900px){ #ux .auth-context .auth-brand{margin-bottom:4px} } /* Login: Hintergrund ueber html, damit Linienfeld und Tiefe sichtbar sind */ #ux.auth-page{background:transparent} html.gx-light #ux .auth-context ol li span{border-color:rgba(0,0,0,.24);color:#1d1d1f} html.gx-light #ux .auth-context ol::before{background:rgba(0,0,0,.14)} #ux .auth-context::before,#ux .auth-context::after{content:none;display:none}