/* ============================================================ toolwahl.de — FUTURISTIC THEME Loaded after styles.css. Activated by . ============================================================ */ body.future{ --primary:#a78bfa; --primary-600:#8b5cf6; --primary-700:#7c3aed; --accent-bg:rgba(167,139,250,.12); --bg:#07060e; --text:#f4f3fb; --muted:#9a98b8; --border:rgba(167,139,250,.16); --border-strong:rgba(167,139,250,.30); --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.05); --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 16px 40px rgba(0,0,0,.5); --shadow-lg:0 30px 80px rgba(0,0,0,.6); --neon:linear-gradient(110deg,#c4b5fd 0%,#a78bfa 35%,#7dd3fc 100%); background:var(--bg); color:var(--text); } /* ---- ambient background now handled by (.gradient-bg) ---- */ /* ---- nav ---- */ /* NOTE: no backdrop-filter here — a sticky nav with backdrop-blur over the animated, blurred background blobs triggers a Chromium compositing bug that smears the page title below the nav. A near-opaque bg gives the same look. */ body.future .nav{background:rgba(10,8,20,.82)} body.future .nav--scrolled{border-bottom-color:var(--border); box-shadow:0 1px 30px rgba(124,58,237,.12)} body.future .brand__name{color:#fff} body.future .nav__links a{color:#c7c5e0} body.future .nav__links a:hover{color:#fff;text-shadow:0 0 14px rgba(167,139,250,.7)} /* ---- buttons ---- */ body.future .btn--primary{ background:linear-gradient(110deg,#8b5cf6,#7c3aed);color:#fff; border:1px solid rgba(196,181,253,.5); box-shadow:0 0 0 1px rgba(124,58,237,.32), 0 6px 22px rgba(124,58,237,.3), inset 0 1px 0 rgba(255,255,255,.25)} body.future .btn--primary:hover,body.future .fluid-btn:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(167,139,250,.6), 0 16px 40px rgba(124,58,237,.5), inset 0 1px 0 rgba(255,255,255,.32)} body.future .btn--ghost{color:#efedfd;border-color:rgba(167,139,250,.45); background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02) 55%),rgba(17,12,34,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 24px rgba(9,6,20,.4)} body.future .btn--ghost:hover{border-color:rgba(196,181,253,.75);color:#fff; background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04) 55%),rgba(24,17,46,.6); box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 30px rgba(9,6,20,.5),0 0 26px rgba(167,139,250,.28)} body.future .btn--onDark{background:#fff;color:#5b21b6; box-shadow:0 0 40px rgba(255,255,255,.35)} /* ---- hero ---- */ body.future .hero{background:transparent} body.future .hero__badge{background:rgba(38,28,68,.7);border:1px solid var(--border-strong); color:#d6ccff;box-shadow:0 0 30px rgba(124,58,237,.25)} body.future .hero__title{ background:linear-gradient(110deg,#e9e3ff 0%,#a78bfa 30%,#c4b5fd 55%,#a78bfa 80%,#e9e3ff 100%); background-size:220% auto; -webkit-background-clip:text;background-clip:text;color:transparent; filter:drop-shadow(0 4px 30px rgba(124,58,237,.3)); animation:hero-shimmer 7s linear infinite} @keyframes hero-shimmer{to{background-position:220% center}} body.future .hero__title em{ -webkit-text-fill-color:transparent; background:linear-gradient(110deg,#a78bfa,#7c3aed);-webkit-background-clip:text;background-clip:text} @media(prefers-reduced-motion:reduce){body.future .hero__title{animation:none}} body.future .hero__sub{color:#b7b5d4} /* floating glow blobs in hero */ body.future .hero__blob{position:absolute;border-radius:50%;filter:blur(64px);z-index:0; pointer-events:none;opacity:.28} body.future .hero__blob--a{width:420px;height:420px;top:-120px;left:8%; background:radial-gradient(circle,#7c3aed,transparent 70%);animation:floaty 9s ease-in-out infinite} body.future .hero__blob--b{width:360px;height:360px;top:-40px;right:6%; background:radial-gradient(circle,#8b5cf6,transparent 70%);animation:floaty 11s ease-in-out infinite reverse} body.future .hero__inner{position:relative;z-index:2} /* subtle drifting ambient glow — dezent, fadet nach unten weich aus */ body.future .hero__aurora{position:absolute;inset:-20% -12% 0;z-index:0;pointer-events:none; background: radial-gradient(40% 50% at 20% 22%,rgba(124,58,237,.22),transparent 72%), radial-gradient(36% 46% at 82% 24%,rgba(139,92,246,.13),transparent 72%), radial-gradient(34% 44% at 60% 60%,rgba(109,90,205,.11),transparent 72%); background-size:180% 180%; opacity:.55;animation:aurora-drift 26s ease-in-out infinite; -webkit-mask:linear-gradient(#000 50%,transparent 92%);mask:linear-gradient(#000 50%,transparent 92%)} @keyframes aurora-drift{ 0%,100%{background-position:0% 0%,100% 0%,50% 60%} 50%{background-position:25% 18%,72% 26%,45% 55%}} /* perspective grid floor — sehr dezent */ body.future .hero__grid{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden; -webkit-mask:radial-gradient(75% 60% at 50% 32%,#000,transparent 78%); mask:radial-gradient(75% 60% at 50% 32%,#000,transparent 78%)} body.future .hero__grid::before{content:'';position:absolute;left:-50%;right:-50%;top:0;bottom:0; background-image: linear-gradient(rgba(167,139,250,.05) 1px,transparent 1px), linear-gradient(90deg,rgba(167,139,250,.05) 1px,transparent 1px); background-size:58px 58px; animation:grid-pan 26s linear infinite} @keyframes grid-pan{to{background-position:0 58px,58px 0}} @media(prefers-reduced-motion:reduce){ body.future .hero__blob,body.future .hero__aurora,body.future .hero__grid::before{animation:none}} /* primary CTA — sanfter atmender Glow + leichter Light-Sweep */ body.future .fluid-btn{animation:btn-breathe 3.6s ease-in-out infinite} @keyframes btn-breathe{ 0%,100%{box-shadow:0 10px 36px rgba(124,58,237,.45),0 0 0 1px rgba(124,58,237,.32),inset 0 1px 0 rgba(255,255,255,.26)} 50%{box-shadow:0 13px 44px rgba(139,92,246,.6),0 0 0 1px rgba(167,139,250,.45),inset 0 1px 0 rgba(255,255,255,.3)}} body.future .fluid-btn::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%); transform:translateX(-130%);animation:btn-shine 6s ease-in-out infinite} @keyframes btn-shine{0%,28%{transform:translateX(-130%)}52%,100%{transform:translateX(130%)}} @media(prefers-reduced-motion:reduce){body.future .fluid-btn,body.future .fluid-btn::after{animation:none}} /* ---- stats glass panel ---- */ body.future .stats{background:none;border:none;box-shadow:none} body.future .stat__num{background:var(--neon);-webkit-background-clip:text;background-clip:text;color:transparent} body.future .stat__div{background:var(--border)} /* ---- sections ---- */ body.future .section--alt{background:linear-gradient(180deg,rgba(124,58,237,.05),transparent); border-block-color:var(--border)} body.future .eyebrow{color:#a78bfa;text-shadow:0 0 18px rgba(167,139,250,.5)} body.future .sec-title{color:#fff} body.future .sec-link{color:#bfa9ff} /* ---- tool cards (glass) ---- */ body.future .tool-card{background:var(--glass);border:1px solid var(--border); backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(255,255,255,.04) inset} body.future .tool-card:hover{border-color:var(--border-strong); box-shadow:var(--shadow-md), 0 0 0 1px rgba(167,139,250,.25), 0 0 40px rgba(124,58,237,.18); background:var(--glass-2)} body.future .tool-card__name{color:#fff} body.future .tool-card__desc{color:#a9a7c6} body.future .tool-card::after{background:radial-gradient(160px 90px at var(--mx,50%) 0, rgba(167,139,250,.18),transparent 70%)} /* badges on dark */ body.future .badge--free{background:transparent;border:1px solid rgba(74,222,128,.32);color:rgba(134,239,172,.9)} body.future .badge--freemium{background:transparent;border:1px solid rgba(251,191,36,.3);color:rgba(253,224,138,.85)} body.future .badge--paid{background:transparent;border:1px solid rgba(255,255,255,.16);color:rgba(199,197,224,.85)} body.future .cat-tag{background:rgba(255,255,255,.05);color:#c7c5e0;border-color:var(--border)} /* ---- quiz CTA: neon slab mit driftender Aurora ---- */ body.future .quizcta{ background-color:#0c0a1c; background-image: radial-gradient(48% 58% at 18% 8%,rgba(139,92,246,.5),transparent 70%), radial-gradient(44% 54% at 85% 22%,rgba(34,211,238,.26),transparent 70%), radial-gradient(58% 68% at 62% 112%,rgba(236,72,153,.2),transparent 70%); background-size:170% 170%; border:1px solid rgba(167,139,250,.28); box-shadow:0 0 90px rgba(124,58,237,.4), inset 0 1px 0 rgba(255,255,255,.1); animation:quizcta-drift 22s ease-in-out infinite} @keyframes quizcta-drift{ 0%,100%{background-position:0% 0%,100% 0%,50% 100%} 50%{background-position:25% 18%,72% 26%,45% 78%}} @media(prefers-reduced-motion:reduce){body.future .quizcta{animation:none}} body.future .quizcta__sub{color:#dcd7f5} body.future .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)} body.future .chip:hover{background:rgba(255,255,255,.11);border-color:rgba(167,139,250,.42); box-shadow:0 6px 20px rgba(124,58,237,.22)} body.future .chip__num{background:linear-gradient(135deg,#8b5cf6,#7c3aed); box-shadow:0 2px 8px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.25)} /* ---- category tiles ---- */ body.future .cat-tile{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px)} body.future .cat-tile:hover{border-color:var(--cat-col,var(--primary)); box-shadow:0 0 30px rgba(124,58,237,.25);background:var(--glass-2)} body.future .cat-tile__name{color:#fff} body.future .cat-tile__count{color:#9a98b8} body.future .cat-tile__icon{filter:brightness(1.1)} /* ---- steps ---- */ body.future .step{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px)} body.future .step__icon{ background:linear-gradient(135deg,rgba(139,92,246,.85),rgba(6,182,212,.85)); box-shadow:0 6px 22px rgba(124,58,237,.45)} body.future .step:hover .step__icon{box-shadow:0 12px 32px rgba(124,58,237,.55)} body.future .step__num{background:linear-gradient(135deg,rgba(139,92,246,.7),rgba(6,182,212,.7));color:#fff; box-shadow:0 0 16px rgba(124,58,237,.35)} body.future .step__title{color:#fff} body.future .step__desc{color:#a9a7c6} body.future .step__line{background:rgba(167,139,250,.12);border-color:var(--border-strong);color:#a78bfa} /* ---- testimonial ---- */ body.future .testimonial{background:var(--glass);border:1px solid var(--border); backdrop-filter:blur(12px);box-shadow:var(--shadow-md)} body.future .testimonial::before{color:#a78bfa} body.future .testimonial__quote{color:#ece9fb} body.future .testimonial__author{color:#9a98b8} /* ---- newsletter ---- */ body.future .news{background:linear-gradient(135deg,#3b0f8a 0%,#5b21b6 50%,#0c5b72 100%); box-shadow:0 20px 60px rgba(91,33,182,.4);border:1px solid rgba(167,139,250,.2)} body.future .news .sec-title{color:#fff} body.future .news__sub{color:rgba(224,214,255,.8)} body.future .news__form input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff} body.future .news__form input::placeholder{color:rgba(255,255,255,.4)} body.future .news__form .btn{background:#c4b5fd;color:#3b0f8a;border-color:#c4b5fd} body.future .news__form .btn:hover{background:#ddd6fe} body.future .news__done{background:rgba(255,255,255,.1);color:#e9d5ff;border-color:rgba(196,181,253,.3)} /* ---- footer ---- */ body.future .legal-page{background:linear-gradient(180deg,rgba(14,11,28,.98) 0%,var(--bg) 100%)} body.future .footer{background:linear-gradient(180deg,rgba(12,10,22,.95) 0%,rgba(7,6,14,1) 100%)} body.future .footer__links a{color:#c7c5e0} body.future .footer__tag,body.future .footer__copy,body.future .footer__badge{color:#8b89a8} body.future .footer__nav-link{color:#c7c5e0} body.future .footer__nav-link:hover{color:#a78bfa} /* ---- quiz modal ---- */ body.future .qz-overlay,body.future .dr-overlay{background:rgba(4,3,10,.7)} body.future .qz-modal,body.future .drawer{ background:linear-gradient(180deg,rgba(22,18,38,.96),rgba(12,10,24,.98)); border:1px solid var(--border-strong); box-shadow:var(--shadow-lg),0 0 90px rgba(124,58,237,.25), inset 0 1px 0 rgba(255,255,255,.05)} body.future .qz-close{background:rgba(255,255,255,.06);border-color:var(--border);color:#c7c5e0} body.future .qz-close:hover{background:rgba(255,255,255,.12);color:#fff} body.future .qz-title{color:#fff} body.future .qz-hint,body.future .qz-step-label{color:#9a98b8} body.future .qz-prog__seg{background:rgba(255,255,255,.12)} body.future .qz-prog__seg.is-on{background:var(--primary);box-shadow:0 0 12px rgba(167,139,250,.7)} body.future .qz-opt{background:rgba(255,255,255,.04);border-color:var(--border)} body.future .qz-opt:hover{background:rgba(167,139,250,.08);border-color:var(--border-strong)} body.future .qz-opt.is-active{background:rgba(167,139,250,.14);border-color:var(--primary); box-shadow:0 0 0 3px rgba(167,139,250,.18),0 0 24px rgba(124,58,237,.25)} body.future .qz-opt__label{color:#f4f3fb} body.future .qz-opt__sub{color:#9a98b8} body.future .qz-think__ring{border-color:rgba(167,139,250,.18);border-top-color:#a78bfa} body.future .qz-result__badge{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:var(--border-strong)} body.future .qz-result__name{color:#fff} body.future .qz-result__reason{background:rgba(255,255,255,.04);border-color:var(--border);color:#cdcbe6} body.future .qz-alts{border-top-color:var(--border)} body.future .qz-alt{background:rgba(255,255,255,.04);border-color:var(--border)} body.future .qz-alt:hover{border-color:var(--border-strong);box-shadow:0 0 24px rgba(124,58,237,.2)} body.future .qz-alt__name{color:#f4f3fb} body.future .qz-back,body.future .qz-restart{color:#9a98b8} body.future .qz-back:hover,body.future .qz-restart:hover{color:#fff} /* drawer */ body.future .drawer__name{color:#fff; background:linear-gradient(110deg,#fff 0%,#d8ccff 50%,#a9d9ff 80%,#fff 100%); background-size:220% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 2px 16px rgba(124,58,237,.3));animation:hero-shimmer 8s linear infinite} @media(prefers-reduced-motion:reduce){body.future .drawer__name{animation:none}} body.future .drawer__desc{color:#cdcbe6} /* Info-Karte: Glas + Glow + Akzentlinie */ body.future .drawer__rows{position:relative;overflow:hidden; background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(124,58,237,.08)); border-color:rgba(167,139,250,.28); box-shadow:0 0 0 1px rgba(124,58,237,.12),0 12px 36px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)} body.future .drawer__rows::before{content:'';position:absolute;inset:0 0 auto;height:2px;border-radius:14px 14px 0 0; background:linear-gradient(90deg,transparent,rgba(167,139,250,.7),rgba(125,211,252,.5),transparent);opacity:.85;pointer-events:none} body.future .drawer__row{transition:background .16s ease} body.future .drawer__row:hover{background:rgba(124,58,237,.09)} body.future .drawer__row+.drawer__row{border-top-color:rgba(255,255,255,.07)} body.future .drawer__row span{color:#9a98b8} body.future .drawer__row strong{color:#fff} body.future .drawer__aff{color:#8b89a8} /* ============================================================ COMPOSITING FIX — no backdrop-filter on inline glass surfaces. A backdrop-blurred element layered over the animated, blur-filtered background blobs triggers a Chromium compositing bug: it samples a displaced region and smears nearby headings/text (seen on page titles and section headers). The semi-opaque rgba glass backgrounds read as the same frosted card over the dark aurora, so we simply drop the blur here. Full-screen modal/overlay dimmers (.qz-overlay, .dr-overlay, .mobnav) keep their blur — they have no adjacent text to smear. These selectors repeat the originals' specificity and win by order. ============================================================ */ body.future .btn--ghost, body.future .stats, body.future .tool-card, body.future .cat-tile, body.future .step, body.future .testimonial, body.future .news, body.future .soc, body.future .search, body.future .pc__col, body.future .tier, body.future .td-fact, body.future .cc__body{ backdrop-filter:none; -webkit-backdrop-filter:none; } /* scrollbar accent */ body.future ::-webkit-scrollbar{width:11px} body.future ::-webkit-scrollbar-track{background:#0a0814} body.future ::-webkit-scrollbar-thumb{background:rgba(167,139,250,.3);border-radius:8px; border:3px solid #0a0814} body.future ::-webkit-scrollbar-thumb:hover{background:rgba(167,139,250,.5)}