/* ============================================================
   toolwahl.de — styles
   ============================================================ */
:root{
  --primary:#7c3aed;
  --ring-track:#e5e7eb;
  --primary-600:#6d28d9;
  --primary-700:#5b21b6;
  --accent-bg:#f3f0ff;
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --border-strong:#d8dadf;
  --shadow-sm:0 1px 3px rgba(17,24,39,.08);
  --shadow-md:0 8px 24px rgba(17,24,39,.10);
  --shadow-lg:0 24px 60px rgba(17,24,39,.16);
  --r:12px;
  --maxw:1120px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.app-scroll{min-height:100vh}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
em{font-style:normal;color:var(--primary)}

/* ---- buttons ---- */
.btn{
  font-family:inherit;font-weight:600;font-size:15px;
  border:1px solid transparent;border-radius:10px;
  padding:11px 18px;cursor:pointer;line-height:1;
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .16s var(--ease-out), box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
@media(prefers-reduced-motion:reduce){.btn:active{transform:none}}
.btn--primary{background:var(--primary);color:#fff;box-shadow:0 1px 2px rgba(124,58,237,.35);
  position:relative;overflow:hidden;isolation:isolate}
.btn--primary:hover{background:var(--primary-600);box-shadow:0 6px 18px rgba(124,58,237,.32)}
/* glanz-sweep on hover */
.btn--primary::before{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
.btn--primary:hover::before{transform:translateX(120%)}
.btn--ghost{background:linear-gradient(180deg,#fff,#f7f5fe);color:var(--text);border-color:rgba(124,58,237,.32);
  box-shadow:inset 0 1px 0 #fff,0 4px 14px rgba(30,20,70,.08)}
/* Deutlich sichtbares Hover-Feedback im Light-Mode (vorher #fff→#f3f0ff = quasi unsichtbar) */
.btn--ghost:hover{border-color:var(--primary);color:var(--primary);background:linear-gradient(180deg,#fbfaff,#efe9fd);
  box-shadow:inset 0 1px 0 #fff,0 8px 22px rgba(124,58,237,.16);transform:translateY(-1px)}
.btn--onDark{background:#fff;color:var(--primary-700);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.btn--onDark:hover{background:#f6f4ff}

/* ---- nav ---- */
/* ============================================================
   Brand lockup (animated logo)
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.025em;
  -webkit-tap-highlight-color:transparent}
.brand--md{font-size:20px}
.brand--lg{font-size:23px}
.brand__mark{position:relative;display:inline-grid;place-items:center;flex-shrink:0}
.brand--md .brand__mark{width:34px;height:34px}
.brand--lg .brand__mark{width:40px;height:40px}
.brand__svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 4px 10px rgba(124,58,237,.35));transition:transform .25s ease}
.brand__check{stroke-dasharray:34;stroke-dashoffset:34;
  animation:brandDraw .9s .25s cubic-bezier(.6,0,.2,1) forwards}
@keyframes brandDraw{to{stroke-dashoffset:0}}
/* radar-pulse ring behind the mark */
.brand__ring{position:absolute;inset:0;border-radius:12px;border:2px solid var(--primary);
  opacity:0;transform:scale(.9);pointer-events:none}
/* subtle, professional hover: a calm scale only — no rotation, radar ring or
   checkmark redraw (those read as gimmicky). */
.brand:hover .brand__svg{transform:scale(1.04)}
@keyframes brandPulse{0%{opacity:.5;transform:scale(.92)}100%{opacity:0;transform:scale(1.45)}}
.brand__name{color:var(--text);line-height:1}
.brand__accent{background:linear-gradient(100deg,#a78bfa,#7c3aed);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.future .brand__name{color:#fff}
body.future .brand__accent{background:linear-gradient(100deg,#c4b5fd,#7dd3fc);
  -webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-reduced-motion:reduce){
  .brand__check{animation:none;stroke-dashoffset:0}
  .brand:hover .brand__svg{transform:none}
  .brand:hover .brand__ring{animation:none}
}

/* ============================================================
   Interactive animated gradient background (both themes)
   ============================================================ */
.gradient-bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}
.gb-blob{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
.gb-blob--1{width:46vw;height:46vw;top:-12vw;left:-6vw;
  background:radial-gradient(circle, color-mix(in srgb,var(--primary) 38%, transparent), transparent 68%);
  animation:gbDrift1 22s ease-in-out infinite alternate}
.gb-blob--2{width:40vw;height:40vw;top:-8vw;right:-8vw;
  background:radial-gradient(circle, var(--gb-c2), transparent 68%);
  animation:gbDrift2 26s ease-in-out infinite alternate}
.gb-blob--3{width:44vw;height:44vw;bottom:-16vw;right:6vw;
  background:radial-gradient(circle, var(--gb-c3), transparent 68%);
  animation:gbDrift3 30s ease-in-out infinite alternate}
.gb-blob--4{width:38vw;height:38vw;bottom:-14vw;left:-4vw;
  background:radial-gradient(circle, var(--gb-c4), transparent 68%);
  animation:gbDrift1 28s ease-in-out infinite alternate-reverse}
/* cursor-following blob */
.gb-cursor{position:absolute;width:34vw;height:34vw;border-radius:50%;filter:blur(80px);
  left:var(--gx,50%);top:var(--gy,30%);transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb,var(--primary) 30%, transparent), transparent 65%);
  transition:left .5s cubic-bezier(.2,.8,.2,1), top .5s cubic-bezier(.2,.8,.2,1)}
/* subtle grid + edge fade */
.gb-grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--gb-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gb-grid) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 38%,transparent 80%);
  mask-image:radial-gradient(120% 95% at 50% 0%,#000 38%,transparent 80%)}

/* light-theme blob colors (soft, airy) */
:root,body:not(.future){
  --gb-c2:color-mix(in srgb,#93c5fd 42%, transparent);
  --gb-c3:color-mix(in srgb,#f0abfc 34%, transparent);
  --gb-c4:color-mix(in srgb,#a5b4fc 38%, transparent);
  --gb-grid:rgba(124,58,237,.05);
}
body:not(.future) .gradient-bg{background:#ffffff}
body:not(.future) .gb-blob{filter:blur(80px);opacity:.7}
/* dark-theme blob colors (neon aurora) */
body.future{
  --ring-track:rgba(255,255,255,.1);
  --gb-c2:color-mix(in srgb,#22d3ee 30%, transparent);
  --gb-c3:color-mix(in srgb,#a78bfa 36%, transparent);
  --gb-c4:color-mix(in srgb,#6366f1 32%, transparent);
  --gb-grid:rgba(167,139,250,.06);
}
body.future .gradient-bg{background:#07060e}
body.future .gb-blob{opacity:.5}
body.future .gb-cursor{opacity:.45}

@keyframes gbDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vw,5vw) scale(1.12)}}
@keyframes gbDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-7vw,6vw) scale(1.08)}}
@keyframes gbDrift3{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-5vw,-6vw) scale(1.14)}}
@media(prefers-reduced-motion:reduce){
  .gb-blob,.gb-cursor{animation:none;transition:none}
}

/* no backdrop-filter: a sticky backdrop-blurred nav over the animated blurred
   background blobs triggers a Chromium bug that smears the title below it.
   A near-opaque bg reads as the same frosted bar. */
@keyframes nav-shimmer{0%{background-position:200% 50%}100%{background-position:-200% 50%}}
@keyframes logo-pulse{0%,100%{box-shadow:0 2px 10px rgba(124,58,237,.45)}50%{box-shadow:0 2px 22px rgba(124,58,237,.75),0 0 40px rgba(124,58,237,.2)}}

.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transition:border-color .3s,box-shadow .3s,background .3s,backdrop-filter .3s}
.nav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,#a78bfa 30%,#7dd3fc 60%,#a78bfa 80%,transparent 100%);
  background-size:300% 100%;
  opacity:0;transition:opacity .4s;
  animation:nav-shimmer 4s linear infinite}
body.future .nav{background:rgba(7,6,14,.78)}
/* Scroll: kompakter + klarer abgesetzter, stärker geblurter Hintergrund */
.nav--scrolled{box-shadow:0 6px 26px rgba(17,24,39,.12);background:rgba(255,255,255,.96);
  backdrop-filter:blur(24px) saturate(1.4);-webkit-backdrop-filter:blur(24px) saturate(1.4)}
.nav--scrolled::after{opacity:1}
body.future .nav--scrolled{box-shadow:0 6px 34px rgba(0,0,0,.55);background:rgba(6,5,12,.92);
  backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3)}
body.future .nav--scrolled::after{opacity:.7}
/* Marke schrumpft beim Scrollen dezent mit */
.nav__inner .brand__mark{transition:transform .35s cubic-bezier(.4,0,.2,1)}
.nav--scrolled .brand__mark{transform:scale(.9)}

.nav__inner{max-width:var(--maxw);margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;gap:0;
  transition:padding .35s cubic-bezier(.4,0,.2,1)}
.nav--scrolled .nav__inner{padding-top:6px;padding-bottom:6px}

.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;
  transition:opacity .2s}
.brand:hover{opacity:.85}
.brand__mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 10px rgba(124,58,237,.45);
  transition:box-shadow .3s,transform .3s}
.brand:hover .brand__mark{box-shadow:0 0 0 3px rgba(167,139,250,.2),0 4px 20px rgba(124,58,237,.6);transform:scale(1.08)}
body.future .brand:hover .brand__mark{animation:logo-pulse 2s ease-in-out infinite}
.brand__name{color:var(--text)}

.nav__divider{width:1px;height:18px;background:linear-gradient(180deg,transparent,var(--border-strong),transparent);
  margin:0 20px;flex-shrink:0;opacity:.7}
body.future .nav__divider{background:linear-gradient(180deg,transparent,rgba(167,139,250,.4),transparent)}

.nav__links{display:flex;gap:2px;font-weight:500;font-size:14.5px}
/* Hinweis: Desktop-Nav wird bewusst vom Plugin (PillNav v1.0, tw-pn) übernommen —
   .nav__links wird dort per visibility:hidden ausgeblendet und durch die animierte
   Pill-Nav ersetzt (baut Pills aus Tools/Vergleiche/Ratgeber). Hier NICHT überschreiben. */
.nav__links button,.nav__links a{
  position:relative;color:var(--muted);border-radius:8px;padding:7px 16px;
  transition:color .2s,background .2s;background:transparent;overflow:hidden}
.nav__links button::before,.nav__links a::before{
  content:'';position:absolute;inset:0;border-radius:8px;opacity:0;
  background:linear-gradient(135deg,rgba(167,139,250,.15),rgba(125,211,252,.1));
  transition:opacity .2s}
.nav__links button:hover,.nav__links a:hover{color:var(--text)}
.nav__links button:hover::before,.nav__links a:hover::before{opacity:1}
.nav__links button.is-active,.nav__links a.is-active{color:var(--primary);font-weight:600}
.nav__links button.is-active::before,.nav__links a.is-active::before{opacity:1}
.nav__links button.is-active::after,.nav__links a.is-active::after{
  content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;border-radius:999px;
  background:linear-gradient(90deg,#a78bfa,#7dd3fc)}
body.future .nav__links button,body.future .nav__links a{color:rgba(196,181,253,.55)}
body.future .nav__links button:hover,body.future .nav__links a:hover{color:#e9e7fb}
body.future .nav__links button.is-active,body.future .nav__links a.is-active{color:#c4b5fd}
body.future .nav__links button::before,body.future .nav__links a::before{
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(125,211,252,.1))}

.nav .btn{margin-left:auto}
.nav__actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.nav__actions .btn{margin-left:0}

/* hamburger (mobile only) */
.burger{display:none;width:42px;height:42px;border:1px solid var(--border-strong);border-radius:11px;
  background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
body.future .burger{background:rgba(30,24,52,.88)}
.burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);
  transition:transform .25s, opacity .2s}
body.future .burger span{background:#e9e7fb}
.burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.mobnav{position:fixed;inset:0;top:0;z-index:39;overflow:hidden;pointer-events:none}
.mobnav__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.1);pointer-events:auto;cursor:pointer}
body.future .mobnav__backdrop{background:rgba(0,0,0,.22)}
.mobnav__panel{
  position:absolute;top:0;right:0;width:min(78vw,270px);height:100%;
  display:flex;flex-direction:column;gap:4px;
  pointer-events:auto;overflow-y:auto;
  padding:20px 18px 36px;
  /* dot grid background */
  background-color:rgba(252,251,255,.97);
  background-image:radial-gradient(circle, rgba(124,58,237,.13) 1.3px, transparent 1.3px);
  background-size:22px 22px;
  backdrop-filter:blur(28px) saturate(180%);
  box-shadow:-6px 0 40px rgba(0,0,0,.08),-1px 0 0 rgba(124,58,237,.1)
}
body.future .mobnav__panel{
  background-color:rgba(8,6,20,.97);
  background-image:radial-gradient(circle, rgba(124,58,237,.26) 1.3px, transparent 1.3px);
  box-shadow:-6px 0 50px rgba(0,0,0,.5),-1px 0 0 rgba(124,58,237,.2)
}
.mobnav__head{display:flex;align-items:center;justify-content:space-between;
  padding:4px 0 16px;flex-shrink:0}
.mobnav__close{width:34px;height:34px;border:1px solid var(--border-strong);border-radius:9px;
  background:rgba(255,255,255,.8);cursor:pointer;display:flex;align-items:center;
  justify-content:center;position:relative;flex-shrink:0;transition:background .15s,border-color .15s}
.mobnav__close:hover{background:#fff;border-color:var(--primary)}
body.future .mobnav__close{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.25)}
body.future .mobnav__close:hover{background:rgba(124,58,237,.2)}
.mobnav__close span{position:absolute;width:13px;height:1.5px;
  background:var(--text);border-radius:2px}
body.future .mobnav__close span{background:#c4b5fd}
.mobnav__close span:first-child{transform:rotate(45deg)}
.mobnav__close span:last-child{transform:rotate(-45deg)}
.mobnav__divider{height:1px;background:rgba(124,58,237,.1);margin:8px 0;flex-shrink:0}
body.future .mobnav__divider{background:rgba(124,58,237,.18)}
.mobnav__panel a,.mobnav__link{font-size:18px;font-weight:600;padding:13px 12px;
  border-radius:10px;color:var(--text);text-align:left;width:100%;border:none;
  background:none;cursor:pointer;display:block;font-family:inherit;text-decoration:none}
.mobnav__panel a:hover,.mobnav__link:hover{background:rgba(124,58,237,.07);color:var(--primary)}
body.future .mobnav__panel a,body.future .mobnav__link{color:#e9e7fb}
body.future .mobnav__panel a:hover,body.future .mobnav__link:hover{background:rgba(124,58,237,.14);color:#fff}
.mobnav__panel .btn{margin-top:8px;justify-content:center;padding:14px;width:100%;font-size:16px}

/* theme toggle */
.theme-toggle{border:none;background:none;padding:0;cursor:pointer;display:inline-flex;line-height:0}
.theme-toggle__track{position:relative;width:58px;height:30px;border-radius:999px;
  background:#e9eaf0;border:1px solid var(--border-strong);display:inline-flex;align-items:center;
  transition:background .25s, border-color .25s}
.theme-toggle.is-dark .theme-toggle__track{background:rgba(167,139,250,.18);border-color:var(--border-strong)}
.theme-toggle__icon{position:absolute;top:50%;transform:translateY(-50%);display:inline-flex;
  align-items:center;justify-content:center;transition:opacity .25s, color .25s}
.theme-toggle__icon--sun{left:7px;color:#f59e0b;opacity:1}
.theme-toggle__icon--moon{right:7px;color:#6d28d9;opacity:.65}
.theme-toggle.is-dark .theme-toggle__icon--sun{opacity:.4}
.theme-toggle.is-dark .theme-toggle__icon--moon{color:#c4b5fd;opacity:1}
.theme-toggle__knob{position:absolute;top:2px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.theme-toggle.is-dark .theme-toggle__knob{transform:translateX(26px);
  background:linear-gradient(135deg,#a78bfa,#7c3aed);box-shadow:0 0 12px rgba(167,139,250,.7)}
@media(max-width:620px){
  .theme-toggle__track{width:52px;height:28px}
  .theme-toggle__knob{top:1px}
  .theme-toggle.is-dark .theme-toggle__knob{transform:translateX(20px)}
}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;
  background:transparent;
  padding:92px 0 64px}
.hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero__badge{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;
  color:var(--primary-700);background:#fff;border:1px solid #e7defc;
  padding:7px 14px;border-radius:999px;box-shadow:var(--shadow-sm);white-space:nowrap}
.hero__badge .dot{width:7px;height:7px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.hero__title{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-.035em;
  font-weight:800;margin:22px 0 0}
.hero__sub{font-size:clamp(16px,2vw,20px);color:var(--muted);max-width:560px;margin:20px 0 0;line-height:1.55}
.hero__cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.hero__cta .btn{padding:13px 22px;font-size:16px}

/* ---- stats ---- */
.stats{margin-top:46px;display:flex;align-items:stretch;gap:0;
  background:none;border:none;border-radius:0;box-shadow:none;padding:0}
.stat{padding:18px 34px;text-align:center;min-width:150px}
.stat__num{font-size:30px;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(110deg,#7c3aed,#06b6d4);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat__label{font-size:13.5px;color:var(--muted);margin-top:4px}
.stat__div{width:1px;background:linear-gradient(180deg,transparent,rgba(167,139,250,.3),transparent);margin:14px 0}

/* ---- section scaffolding ---- */
.section{padding:96px 0}
.section--alt{background:linear-gradient(#faf9ff,#faf9ff);border-block:1px solid var(--border)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:28px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary)}
.sec-title{font-size:clamp(26px,3.4vw,36px);font-weight:800;letter-spacing:-.025em;margin:6px 0 0}
.sec-link{font-weight:600;font-size:14.5px;color:var(--primary);white-space:nowrap}
.sec-link:hover{color:var(--primary-700)}

/* ---- tool cards ---- */
@keyframes fadeUpCard{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tool-card{font-family:inherit;text-align:left;cursor:pointer;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--border);border-radius:var(--r);
  box-shadow:var(--shadow-sm);padding:20px;display:flex;flex-direction:column;gap:12px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
  animation:fadeUpCard .5s ease both}
.tool-grid .tool-card:nth-child(1){animation-delay:.05s}
.tool-grid .tool-card:nth-child(2){animation-delay:.1s}
.tool-grid .tool-card:nth-child(3){animation-delay:.15s}
.tool-grid .tool-card:nth-child(4){animation-delay:.2s}
.tool-grid .tool-card:nth-child(5){animation-delay:.25s}
.tool-grid .tool-card:nth-child(6){animation-delay:.3s}
.tool-card:hover{transform:translateY(-5px) scale(1.015);
  box-shadow:0 16px 40px rgba(124,58,237,.12), 0 0 0 1px rgba(167,139,250,.3);
  border-color:rgba(167,139,250,.4)}
.tool-card__top{display:flex;align-items:center;justify-content:space-between}
.tool-card__logo{display:inline-flex;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.tool-card:hover .tool-card__logo{transform:scale(1.07) rotate(-2deg)}
.tool-card__name{font-weight:700;font-size:17px;letter-spacing:-.01em;transition:color .2s}
.tool-card__desc{margin:0;color:var(--muted);font-size:14px;line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tool-card__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-card__foot .cat-tag{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tool-card__arrow{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--accent-bg);color:var(--primary);
  transform:translateX(-2px) scale(.92);opacity:.5;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .24s ease,background .24s ease}
.tool-card:hover .tool-card__arrow{opacity:1;transform:translateX(0) scale(1);
  background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:#fff;
  box-shadow:0 4px 14px rgba(124,58,237,.4)}
.tool-card:hover .tool-card__arrow svg{animation:arrow-nudge .5s ease}
@keyframes arrow-nudge{50%{transform:translateX(3px)}}

/* badges */
.badge{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1.2;white-space:nowrap}
.badge--free{background:transparent;border:1px solid rgba(22,163,74,.35);color:#15803d}
.badge--freemium{background:transparent;border:1px solid rgba(217,119,6,.35);color:#b45309}
.badge--paid{background:transparent;border:1px solid rgba(107,114,128,.35);color:#6b7280}
.cat-tag{font-size:12px;font-weight:600;color:#4b5563;background:#f5f5f7;
  border:1px solid var(--border);padding:4px 10px;border-radius:999px}

/* ---- quiz CTA band ---- */
.quizcta{position:relative;overflow:hidden;border-radius:24px;text-align:center;
  background:linear-gradient(135deg,#6d28d9 0%,#7c3aed 45%,#5b21b6 100%);
  color:#fff;padding:60px 36px 52px}
.quizcta__glow{position:absolute;inset:-50% -10% auto;height:380px;
  background:radial-gradient(55% 65% at 20% 0,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.quizcta__dots{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 30%,transparent 80%)}
.quizcta__body{position:relative}
.quizcta__badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:5px 16px;font-size:13px;font-weight:600;
  letter-spacing:.01em;margin-bottom:20px;backdrop-filter:blur(6px)}
.quizcta__title{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.03em;
  margin:0;position:relative;line-height:1.12}
.quizcta__sub{margin:14px auto 28px;color:rgba(233,226,251,.9);font-size:clamp(15px,1.8vw,18px);
  max-width:480px;position:relative;line-height:1.55}
.quizcta .btn{padding:15px 28px;font-size:16px;position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.25)}
.quizcta__chips{display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:36px;flex-wrap:wrap;position:relative}
/* chip cards */
.chip{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);
  padding:11px 16px;border-radius:14px;
  backdrop-filter:blur(10px);
  transition:background .2s,border-color .2s,transform .22s cubic-bezier(.2,.8,.2,1);
}
.chip:hover{background:rgba(255,255,255,.21);border-color:rgba(255,255,255,.38);transform:translateY(-2px)}
.chip__num{width:21px;height:21px;border-radius:6px;
  background:rgba(255,255,255,.22);color:#fff;
  font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chip__icon{display:flex;align-items:center;flex-shrink:0}
.chip__label{white-space:nowrap}
.chip__e{font-size:15px}
.chip__arrow{display:flex;align-items:center;color:rgba(255,255,255,.4)}

/* ---- category grid ---- */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.cat-tile{background:#fff;border:1.5px solid var(--border);border-radius:20px;
  padding:28px 18px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  width:100%;height:100%;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
  animation:fadeUpCard .5s ease both}
body.future .cat-tile{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07)}
.cat-grid .cat-tile:nth-child(1){animation-delay:.05s}
.cat-grid .cat-tile:nth-child(2){animation-delay:.1s}
.cat-grid .cat-tile:nth-child(3){animation-delay:.15s}
.cat-grid .cat-tile:nth-child(4){animation-delay:.2s}
.cat-grid .cat-tile:nth-child(5){animation-delay:.25s}
.cat-grid .cat-tile:nth-child(6){animation-delay:.3s}
.cat-grid .cat-tile:nth-child(7){animation-delay:.35s}
.cat-grid .cat-tile:nth-child(8){animation-delay:.4s}
.cat-tile:hover{transform:translateY(-6px) scale(1.04);
  border-color:var(--cat-col,rgba(167,139,250,.5));
  box-shadow:0 14px 36px rgba(0,0,0,.1)}
body.future .cat-tile:hover{box-shadow:0 14px 40px rgba(0,0,0,.4);background:rgba(255,255,255,.07);border-color:var(--cat-col,rgba(167,139,250,.4))}
.cat-tile__icon{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-size:30px;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease;flex-shrink:0}
.cat-tile:hover .cat-tile__icon{transform:scale(1.1) rotate(-6deg);box-shadow:0 8px 20px rgba(0,0,0,.13)}
.cat-tile__name{font-weight:800;font-size:16px;letter-spacing:-.025em;color:var(--text)}
body.future .cat-tile__name{color:#eae8fb}
.cat-tile__count{font-size:11.5px;font-weight:600;color:var(--muted);background:var(--accent-bg);border-radius:20px;padding:3px 11px;line-height:1.5}
body.future .cat-tile__count{background:rgba(167,139,250,.1);color:rgba(196,181,253,.55)}
.cat-tile--soon{opacity:.5}
.cat-tile--soon:hover{transform:none;box-shadow:none}

/* ---- how it works ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.step{position:relative;background:#fff;border:1px solid var(--border);border-radius:18px;
  padding:28px 26px 26px;box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;
  animation:fadeUpCard .5s ease both}
.steps .step:nth-child(1){animation-delay:.08s}
.steps .step:nth-child(2){animation-delay:.18s}
.steps .step:nth-child(3){animation-delay:.28s}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md)}
.step__top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.step__icon{
  width:56px;height:56px;border-radius:16px;flex-shrink:0;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(124,58,237,.3);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease}
.step:hover .step__icon{transform:scale(1.1) rotate(-6deg);box-shadow:0 10px 26px rgba(124,58,237,.4)}
.step__num{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#8b5cf6,#06b6d4);color:#fff;
  font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(124,58,237,.28);flex-shrink:0}
.step__title{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.02em}
.step__desc{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.step__line{display:none}
.steps__cta{text-align:center;margin-top:34px}
/* tablet: 3 cols but tighter */
@media(max-width:900px) and (min-width:561px){
  .steps{gap:14px}
  .step{padding:22px 18px 20px}
  .step__icon{width:48px;height:48px}
  .step__title{font-size:16px}
}

/* ---- testimonials grid ---- */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.testimonial{margin:0;background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:30px;box-shadow:var(--shadow-md);display:flex;flex-direction:column;
  position:relative;overflow:hidden}
.testimonial::before{content:'\201C';position:absolute;top:-4px;right:18px;
  font-size:88px;font-weight:900;color:var(--primary);opacity:.07;line-height:1;
  font-family:Georgia,serif;pointer-events:none}
.testimonial::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#8b5cf6,#7dd3fc);border-radius:20px 20px 0 0}
.stars{color:#f59e0b;font-size:16px;letter-spacing:1.5px}
.testimonial__quote{font-size:clamp(15px,1.6vw,17px);line-height:1.65;font-weight:500;
  letter-spacing:-.01em;margin:14px 0 20px;flex:1;color:#1f1535}
.testimonial__author{display:inline-flex;align-items:center;gap:12px;color:var(--muted);font-size:14.5px;margin-top:auto}
.testimonial__avatar{width:40px;height:40px;border-radius:50%;color:#fff;
  font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18)}
.testimonial__author strong{color:var(--text)}
@media(max-width:760px){.testimonials{grid-template-columns:1fr}}

/* ---- newsletter (Style A — Centered Bold) ---- */
.nl-section{padding:96px 0}
.nl{text-align:center;max-width:560px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0}
.nl__eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--primary);margin:0 0 18px}
.nl__title{font-size:clamp(38px,5vw,60px);font-weight:900;letter-spacing:-.04em;line-height:1.05;
  margin:0 0 20px;color:var(--text)}
.nl__sub{font-size:16px;color:var(--muted);line-height:1.6;margin:0 0 36px}
.nl__form{width:100%;max-width:420px}
.nl__row{display:flex;gap:0;background:var(--bg);
  border:1.5px solid var(--border);border-radius:999px;
  padding:5px 5px 5px 20px;
  box-shadow:0 2px 16px rgba(0,0,0,.06);
  transition:border-color .2s,box-shadow .2s}
.nl__row:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.nl__input{flex:1;border:none;outline:none;background:transparent;
  font-family:inherit;font-size:15px;color:var(--text);min-width:0}
.nl__input::placeholder{color:var(--muted)}
.nl__btn{flex-shrink:0;background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;
  border:none;border-radius:999px;padding:11px 22px;
  font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;
  transition:opacity .15s,transform .15s;white-space:nowrap}
.nl__btn:hover:not(:disabled){opacity:.9;transform:translateY(-1px)}
.nl__btn:disabled{opacity:.6;cursor:not-allowed}
.nl__error{font-size:13px;color:#ef4444;margin:10px 0 0;text-align:center}
.nl__done{display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#f0fdf4,#ecfdf5);
  border:1.5px solid #86efac;border-radius:16px;
  padding:16px 24px;font-weight:700;color:#15803d;font-size:15px}
.nl__done-icon{width:28px;height:28px;background:#22c55e;color:#fff;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0}
.nl__trust{display:flex;align-items:center;gap:10px;margin-top:18px;
  font-size:12.5px;color:var(--muted)}
.nl__dot{opacity:.4}
.nl__privacy{margin-top:10px;font-size:11px;color:var(--muted);opacity:.75;line-height:1.5}
.nl__privacy a{color:inherit;text-decoration:underline}

/* ── Exit-Intent-Newsletter-Popup ─────────────────────────────────────────── */
@keyframes nlpFade{from{opacity:0}to{opacity:1}}
@keyframes nlpUp{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.nlp-overlay{position:fixed;inset:0;background:rgba(10,8,20,.62);backdrop-filter:blur(4px);
  z-index:10050;display:flex;align-items:center;justify-content:center;padding:20px;
  animation:nlpFade .25s ease}
.nlp-card{position:relative;width:100%;max-width:420px;background:#fff;border-radius:18px;
  padding:32px 28px 22px;text-align:center;box-shadow:0 24px 70px rgba(20,10,50,.45);
  animation:nlpUp .32s cubic-bezier(.22,1,.36,1)}
.nlp-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border:none;border-radius:50%;
  background:rgba(0,0,0,.06);color:#666;font-size:13px;cursor:pointer;line-height:1}
.nlp-close:hover{background:rgba(0,0,0,.12)}
.nlp-emoji{font-size:34px;margin-bottom:8px}
.nlp-title{margin:0 0 8px;font-size:21px;font-weight:800;letter-spacing:-.02em;color:#1a1a24}
.nlp-sub{margin:0 0 18px;font-size:14px;line-height:1.55;color:#55555f}
.nlp-form{display:flex;gap:8px}
.nlp-input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1.5px solid #e2e0ec;
  font-size:14px;outline:none;color:#1a1a24;background:#fff}
.nlp-input:focus{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.nlp-btn{padding:12px 18px;border:none;border-radius:10px;cursor:pointer;font-weight:700;font-size:14px;
  color:#fff;background:linear-gradient(135deg,#7c3aed,#a78bfa);white-space:nowrap}
.nlp-btn:hover:not(:disabled){filter:brightness(1.08)}
.nlp-btn:disabled{opacity:.6;cursor:wait}
.nlp-done{padding:14px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;
  color:#166534;font-size:14px;font-weight:600}
.nlp-error{margin:10px 0 0;font-size:12.5px;color:#dc2626}
.nlp-hint{margin:14px 0 0;font-size:11px;color:#8a8a99;line-height:1.5}
.nlp-hint a{color:inherit;text-decoration:underline}
body.future .nlp-card{background:#17141f;box-shadow:0 24px 70px rgba(0,0,0,.6);border:1px solid rgba(167,139,250,.25)}
body.future .nlp-title{color:#f2f0fa}
body.future .nlp-sub{color:#b9b5c9}
body.future .nlp-input{background:rgba(255,255,255,.05);border-color:rgba(167,139,250,.3);color:#f2f0fa}
body.future .nlp-close{background:rgba(255,255,255,.08);color:#aaa}
body.future .nlp-done{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#4ade80}
body.future .nlp-hint{color:#8a8598}
@media (max-width:480px){.nlp-form{flex-direction:column}.nlp-card{padding:26px 20px 18px}}
body.future .nl__row{background:rgba(255,255,255,.05);border-color:rgba(167,139,250,.2)}
body.future .nl__row:focus-within{border-color:rgba(167,139,250,.6);
  box-shadow:0 0 0 3px rgba(124,58,237,.22),0 0 28px rgba(124,58,237,.3)}
body.future .nl__btn{background:linear-gradient(135deg,#8b5cf6,#7c3aed);
  box-shadow:0 4px 18px rgba(124,58,237,.5),inset 0 1px 0 rgba(255,255,255,.25)}
body.future .nl__btn:hover:not(:disabled){box-shadow:0 6px 26px rgba(139,92,246,.7),inset 0 1px 0 rgba(255,255,255,.3)}
body.future .nl__done{background:rgba(22,163,74,.1);border-color:rgba(134,239,172,.3);color:#4ade80}

/* ---- footer ---- */
.footer{padding:56px 0 40px;position:relative;
  background:linear-gradient(180deg,#ede8fb 0%,#e8e0f8 100%)}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(124,58,237,.3) 20%,rgba(167,139,250,.55) 50%,rgba(6,182,212,.3) 80%,transparent)}
/* Brand-Zeile: Logo + Claim links, Socials rechts — Link-Spalten darunter */
.footer__brandrow{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:30px;margin-bottom:38px;position:relative}
.footer__brandrow::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,rgba(124,58,237,.4),rgba(167,139,250,.18) 45%,rgba(6,182,212,.12) 75%,transparent)}
.footer__brandrow .socials{margin-top:0}
.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
@media(max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px 24px}
  .footer__brandrow{padding-bottom:24px;margin-bottom:30px}
}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr;gap:26px}}
.footer__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer__tag{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.footer__col-title{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(110deg,#7c3aed,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 14px}
.footer__nav-link{display:block;background:none;border:none;cursor:pointer;padding:0;
  font-size:14.5px;color:#374151;font-weight:500;text-align:left;text-decoration:none;
  position:relative;width:fit-content;transition:color .18s ease,transform .18s ease}
.footer__nav-link:hover{transform:translateX(3px)}
.footer__nav-link::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:1.5px;
  background:linear-gradient(90deg,#7c3aed,#06b6d4);transition:width .22s cubic-bezier(.2,.8,.2,1)}
.footer__nav-link:hover{color:var(--primary)}
.footer__nav-link:hover::after{width:100%}
.footer__bottom{margin-top:44px;padding-top:20px;position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer__bottom::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(167,139,250,.25),rgba(6,182,212,.15))}
.footer__copy{color:var(--muted);font-size:13.5px}
.footer__badge{font-size:12px;color:#9ca3af;display:flex;align-items:center;gap:6px}
.footer__badge span{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,#7c3aed,#06b6d4);box-shadow:0 0 6px rgba(124,58,237,.5)}

/* social card-buttons */
.socials{display:flex;gap:10px;margin-top:16px}
.soc{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border);color:#6b7280;
  transition:transform .16s ease, box-shadow .18s ease, color .18s, border-color .18s, background .18s}
.soc:hover{transform:translateY(-3px);color:#fff;background:var(--soc);border-color:var(--soc);
  box-shadow:0 8px 20px color-mix(in srgb, var(--soc) 40%, transparent)}
body.future .soc{background:var(--glass);border-color:var(--border);color:#c7c5e0;backdrop-filter:blur(8px)}
body.future .soc:hover{color:#fff;background:var(--soc);border-color:var(--soc);
  box-shadow:0 0 22px color-mix(in srgb, var(--soc) 55%, transparent)}

/* cookie consent (DSGVO) */
@keyframes ccUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cc{position:fixed;left:0;right:0;bottom:0;z-index:9000;padding:16px;
  display:flex;justify-content:center;animation:ccUp .35s cubic-bezier(.2,.8,.2,1)}
.cc__body{width:100%;max-width:720px;background:#fff;border:1px solid var(--border-strong);
  border-radius:20px;box-shadow:0 8px 48px rgba(0,0,0,.14),0 0 0 1px rgba(124,58,237,.06);
  padding:24px 28px;overflow:hidden}
.cc__head{margin-bottom:12px}
.cc__head strong{font-size:16px;font-weight:700;color:var(--text);display:block}
.cc__head p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.cc__link{background:none;border:none;padding:0;cursor:pointer;color:var(--primary);
  font-size:inherit;font-weight:600;text-decoration:underline}
.cc__actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.cc__btn{padding:10px 18px;font-size:14px;white-space:nowrap}
.cc__btn--settings{background:none;border:1px solid var(--border-strong);color:var(--text);
  border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;
  transition:border-color .18s,background .18s;display:flex;align-items:center;gap:6px}
.cc__btn--settings:hover{border-color:var(--primary);background:rgba(124,58,237,.05)}
/* settings panel */
.cc__settings{margin-top:18px;border-top:1px solid var(--border);padding-top:18px;
  display:flex;flex-direction:column;gap:14px}
.cc__cat{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cc__cat-info{flex:1}
.cc__cat-name{font-size:14.5px;font-weight:700;color:var(--text);display:block;margin-bottom:3px}
.cc__cat-desc{font-size:12.5px;color:var(--muted);line-height:1.5}
/* toggle switch */
.cc__toggle{display:flex;align-items:center;gap:8px;flex-shrink:0;cursor:pointer}
.cc__toggle input{position:absolute;opacity:0;width:0;height:0}
.cc__toggle-track{width:44px;height:24px;border-radius:999px;background:#e5e7eb;
  position:relative;transition:background .2s ease;flex-shrink:0}
.cc__toggle-track--on{background:linear-gradient(90deg,#7c3aed,#6d28d9)}
.cc__toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:transform .2s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.2)}
.cc__toggle-track--on .cc__toggle-knob{transform:translateX(20px)}
.cc__toggle--locked{cursor:default;opacity:.7}
.cc__toggle-label{font-size:12px;color:var(--muted);white-space:nowrap}
/* floating re-open button */
.cc__fab{position:fixed;bottom:20px;left:20px;z-index:8999;
  width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;
  background:#fff;border:1px solid var(--border-strong);color:#6b7280;
  box-shadow:0 4px 16px rgba(0,0,0,.12);transition:transform .18s ease,box-shadow .18s ease;
  display:flex;align-items:center;justify-content:center}
.cc__fab:hover{transform:scale(1.08);box-shadow:0 6px 22px rgba(124,58,237,.2);color:var(--primary)}
body.future .cc__body{background:linear-gradient(180deg,rgba(22,18,38,.98),rgba(10,8,22,.99));
  border-color:rgba(167,139,250,.3);box-shadow:0 8px 48px rgba(0,0,0,.5),0 0 40px rgba(124,58,237,.15);
  backdrop-filter:blur(16px)}
body.future .cc__head strong{color:#f0eeff}
body.future .cc__head p,body.future .cc__cat-desc,body.future .cc__toggle-label{color:#9a98b8}
body.future .cc__cat-name{color:#e8e5ff}
body.future .cc__toggle-track{background:#2d2b3d}
body.future .cc__btn--settings{border-color:rgba(167,139,250,.3);color:#e0ddff}
body.future .cc__btn--settings:hover{background:rgba(124,58,237,.1);border-color:#7c3aed}
body.future .cc__settings{border-color:rgba(167,139,250,.15)}
body.future .cc__fab{background:rgba(22,18,38,.95);border-color:rgba(167,139,250,.3);color:#a78bfa;
  box-shadow:0 4px 16px rgba(0,0,0,.5)}
@media(max-width:620px){
  .cc__body{padding:20px 18px;border-radius:16px 16px 0 0;border-bottom:none}
  .cc{padding:0}
  .cc__actions{flex-direction:column}
  .cc__btn,.cc__btn--settings{width:100%;justify-content:center;text-align:center}
}
.footer__links{display:flex;gap:22px;font-size:14.5px;color:#374151;font-weight:500}
.footer__links a:hover{color:var(--primary)}
.footer__copy{color:var(--muted);font-size:13.5px}

/* ============================================================
   Quiz overlay
   ============================================================ */
.qz-overlay,.dr-overlay{position:fixed;inset:0;z-index:60;
  background:rgba(17,24,39,.5);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.qz-modal{position:relative;width:100%;max-width:560px;background:#fff;border-radius:22px;
  box-shadow:var(--shadow-lg);padding:38px;overflow:hidden;animation:pop .26s cubic-bezier(.2,.9,.3,1.2)}
@media(max-width:560px){.qz-modal{padding:24px 20px;border-radius:16px}}
@keyframes pop{from{transform:translateY(14px) scale(.97)}to{transform:none}}
.qz-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:9px;
  border:1px solid var(--border);background:#fff;color:var(--muted);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;transition:.15s}
.qz-close:hover{background:#f5f5f7;color:var(--text)}

.qz-head{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.qz-prog{display:flex;gap:6px}
.qz-prog__seg{height:6px;flex:1;border-radius:999px;background:var(--border);transition:background .3s}
.qz-prog__seg.is-on{background:linear-gradient(90deg,#7c3aed,#a78bfa);box-shadow:0 0 10px rgba(124,58,237,.45)}
.qz-step-label{font-size:13px;font-weight:600;color:var(--muted)}
.qz-title{font-size:25px;font-weight:800;letter-spacing:-.02em;margin:0}
.qz-hint{margin:8px 0 22px;color:var(--muted);font-size:15px}

.qz-opts{display:grid;grid-template-columns:1fr;gap:10px}
.qz-opts--two{grid-template-columns:1fr 1fr}
.qz-opt{font-family:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:13px;
  background:#fff;border:1.5px solid var(--border);border-radius:13px;padding:15px 16px;
  transition:border-color .14s, background .14s, transform .12s, box-shadow .14s}
.qz-opt:hover{border-color:#c9b8f5;background:#faf8ff}
.qz-opt.is-active{border-color:var(--primary);background:var(--accent-bg);box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.qz-opt__emoji{font-size:24px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;color:var(--primary)}
.qz-opt__emoji svg{width:24px;height:24px}
.qz-opt__body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.qz-opt__label{font-weight:600;font-size:15.5px}
.qz-opt__sub{font-size:13px;color:var(--muted)}
.qz-opt__check{width:22px;height:22px;border-radius:50%;background:var(--primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  opacity:0;transform:scale(.6);transition:.16s}
.qz-opt.is-active .qz-opt__check{opacity:1;transform:none}
.qz-back{margin-top:18px;background:none;border:none;color:var(--muted);font-family:inherit;
  font-size:14px;font-weight:600;cursor:pointer;padding:6px 0}
.qz-back:hover{color:var(--text)}

/* thinking */
.qz-think{text-align:center;padding:24px 0 8px}
.qz-think__ring{width:52px;height:52px;margin:6px auto 22px;border-radius:50%;
  border:4px solid var(--accent-bg);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* result */
.qz-result__badge{display:inline-flex;font-size:13px;font-weight:700;color:var(--primary-700);
  background:var(--accent-bg);border:1px solid #e7defc;padding:6px 13px;border-radius:999px}
.qz-result__hero{display:flex;align-items:center;gap:16px;margin:18px 0 16px}
.qz-result__name{font-size:24px;font-weight:800;letter-spacing:-.02em}
.qz-result__meta{display:flex;gap:8px;margin-top:7px;flex-wrap:wrap}
.qz-result__reason{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:#374151;
  background:#faf9ff;border:1px solid #eee9fb;border-radius:14px;padding:16px 18px}
.qz-result__go{width:100%;justify-content:center;padding:14px;font-size:16px}
.qz-alts{margin-top:24px;border-top:1px solid var(--border);padding-top:20px}
.qz-alts__label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:12px}
.qz-alts__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qz-alt{font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 12px;
  transition:border-color .14s, box-shadow .14s, transform .12s}
.qz-alt:hover{border-color:#d8caf8;box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.qz-alt__name{font-weight:600;font-size:14.5px;flex:1;text-align:left}
.qz-restart{margin:20px auto 0;display:block;background:none;border:none;color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:600;cursor:pointer}
.qz-restart:hover{color:var(--primary)}

/* 🎁 Ergebnis sichern (E-Mail + PDF) */
.qz-save{margin:22px auto 0;max-width:440px;padding:16px 16px 14px;border-radius:16px;
  border:1px solid rgba(124,58,237,.25);background:linear-gradient(160deg,rgba(124,58,237,.10),rgba(124,58,237,.02))}
.qz-save__title{font-weight:800;font-size:15px;margin-bottom:4px;color:var(--text,#e0ddf5)}
.qz-save__note{font-size:12.5px;color:var(--muted,#9ca3af);margin-bottom:12px;line-height:1.4}
.qz-save__row{display:flex;gap:8px;flex-wrap:wrap}
.qz-save__input{flex:1;min-width:160px;padding:11px 13px;border-radius:10px;border:1px solid rgba(124,58,237,.3);
  background:rgba(20,12,46,.55);color:var(--text,#e0ddf5);font-size:14px;font-family:inherit}
.qz-save__input:focus{outline:none;border-color:#8b5cf6}
.qz-save__btn{padding:11px 16px;border-radius:10px;border:none;background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  color:#fff;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.qz-save__btn:disabled{opacity:.6;cursor:default}
.qz-save__consent{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:12.5px;
  line-height:1.4;color:var(--muted,#9ca3af);text-align:left;cursor:pointer}
.qz-save__consent input{margin-top:2px;flex-shrink:0;accent-color:#7c3aed}
.qz-save__consent a{color:#a78bfa;text-decoration:underline}
.qz-save__err{margin-top:8px;font-size:12.5px;color:#f87171}
.qz-save__done{text-align:center;padding:14px 8px}
.qz-save__done-txt{font-weight:700;color:#4ade80;font-size:15px;margin-bottom:14px}
.qz-save__go{display:inline-block;padding:12px 22px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);
  color:#fff;font-weight:700;font-size:14.5px;text-decoration:none}
.qz-save__done-hint{margin-top:12px;font-size:12px;color:var(--muted,#9ca3af)}
.qz-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;pointer-events:none}
body.light .qz-save__input{background:#fff;color:#1a0f3c}
body.light .qz-save__title{color:#1a0f3c}

/* ---- tool drawer ---- */
.dr-overlay{justify-content:flex-end;padding:0}
.drawer{position:relative;width:100%;max-width:420px;height:100%;background:#fff;
  box-shadow:var(--shadow-lg);padding:40px 32px;overflow-y:auto;
  animation:slideIn .28s cubic-bezier(.2,.8,.2,1)}
@keyframes slideIn{from{transform:translateX(40px)}to{transform:none}}
.drawer__head{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.drawer__name{font-size:22px;font-weight:800;letter-spacing:-.02em}
.drawer__desc{color:#374151;font-size:15.5px;line-height:1.6;margin:0 0 20px}
.drawer__rows{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin:0 0 16px}
.drawer__row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 16px;font-size:14px}
.drawer__row strong{font-weight:600;text-align:right;overflow-wrap:anywhere;letter-spacing:-.01em}
.drawer__row+.drawer__row{border-top:1px solid var(--border)}
.drawer__row span{color:var(--muted)}
.drawer__go{width:100%;justify-content:center;padding:14px;font-size:16px}
.drawer__more{display:block;text-align:center;margin-top:12px;font-size:14.5px;font-weight:600;color:var(--primary)}
.drawer__more:hover{color:var(--primary-700)}
body.future .drawer__more{color:#bfa9ff}

/* ── Drawer Maximum: Aurora, Logo-Glow, Tagline, Score, Ideal-für ── */
.drawer{position:relative;overflow-x:hidden}
.drawer__aurora{position:absolute;inset:0 0 auto;height:240px;z-index:0;pointer-events:none;
  background:radial-gradient(60% 70% at 22% 0,rgba(124,58,237,.30),transparent 70%),radial-gradient(50% 60% at 92% 8%,rgba(34,211,238,.15),transparent 70%);
  -webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent)}
.drawer>*:not(.drawer__aurora){position:relative;z-index:1}
.drawer__logo-wrap{position:relative;display:inline-flex;flex-shrink:0}
body.future .drawer__logo-wrap{box-shadow:0 0 30px rgba(124,58,237,.45);border-radius:16px}
.drawer__tagline{font-size:13.5px;font-weight:600;color:var(--primary);margin:12px 0 0;line-height:1.5;letter-spacing:.01em}
body.future .drawer__tagline{color:#c4b5fd}
.drawer__score{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--border)}
body.future .drawer__score{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(124,58,237,.1));
  border-color:rgba(167,139,250,.24);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 8px 24px rgba(0,0,0,.25)}
.drawer__score-text{display:flex;flex-direction:column;line-height:1.05}
.drawer__score-text strong{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
body.future .drawer__score-text strong{color:#fff}
.drawer__score-text span{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:3px}
.drawer__since{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.drawer__bestfor{display:flex;flex-direction:column;gap:5px;margin:0 0 18px;padding:15px 16px;border-radius:14px;
  border:1px solid var(--border);background:rgba(124,58,237,.04)}
body.future .drawer__bestfor{background:rgba(124,58,237,.1);border-color:rgba(167,139,250,.25)}
.drawer__bestfor-k{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.drawer__bestfor-v{font-size:14px;line-height:1.5;color:var(--text)}
body.future .drawer__bestfor-v{color:#e9e7fb}
.drawer__aff{text-align:center;color:var(--muted);font-size:12.5px;margin:12px 0 0}

/* ============================================================
   Responsive
   ============================================================ */
/* ===== Tablet & below: burger nav, 2-col grids ===== */
@media(max-width:980px){
  .nav__links{display:none}
  .burger{display:flex}
  .tool-grid{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:760px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr}
  .hero__cta{width:100%}
  .nl__title{font-size:clamp(32px,8vw,48px)}
}
/* ===== Mobile ===== */
@media(max-width:560px){
  .nav__inner{gap:10px;padding:12px 18px}
  .nav__actions{gap:10px}
  .nav__actions .btn--primary{display:none}  /* CTA lives in the drawer on phones */
  .container{padding:0 18px}
  .hero{padding:56px 0 44px}
  .stats{flex-direction:column}
  .stat__div{width:auto;height:1px;margin:0 24px}
  .stat{padding:15px}
  .tool-grid{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .qz-opts--two{grid-template-columns:1fr}
  .qz-modal{padding:26px 20px}
  .quizcta{padding:44px 24px 40px}
  .nl-section{padding:64px 0}
  .nl__row{padding:4px 4px 4px 16px}
  .nl__btn{padding:10px 18px;font-size:13.5px}
  .testimonial{padding:32px 24px}
  .footer__inner{flex-direction:column;align-items:flex-start;gap:18px}
  .section{padding:64px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ============================================================
   Subpages: /tools, /quiz, /tool
   ============================================================ */
.pg-hero{position:relative;overflow:hidden;padding:72px 0 36px}
.pg-hero__inner{position:relative;z-index:2}
.pg-title{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-.03em;margin:8px 0 0}
.pg-sub{color:var(--muted);font-size:clamp(15px,2vw,19px);margin:14px 0 0;max-width:620px;line-height:1.55}
body.future .pg-title{
  background:linear-gradient(110deg,#e9e3ff 0%,#a78bfa 30%,#7dd3fc 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,.4));
  animation:hero-shimmer 7s linear infinite}
@media(prefers-reduced-motion:reduce){body.future .pg-title{animation:none}}
body.future .pg-sub{color:#b7b5d4}

.tool-grid--wide{grid-template-columns:repeat(3,1fr)}

/* toolbar */
.filters{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:8px 0 18px}
.search{display:flex;align-items:center;gap:9px;flex:1;min-width:220px;
  background:#fff;border:1px solid var(--border-strong);border-radius:11px;padding:11px 14px;color:var(--muted)}
.search input{border:none;outline:none;font-family:inherit;font-size:15px;width:100%;background:transparent;color:var(--text)}
.search{transition:border-color .2s ease, box-shadow .2s ease}
.search:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
body.future .search{background:rgba(255,255,255,.05);backdrop-filter:blur(8px)}
body.future .search:focus-within{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 3px rgba(124,58,237,.22),0 0 24px rgba(124,58,237,.25)}
.seg{display:flex;background:#f3f4f6;border:1px solid var(--border);border-radius:11px;padding:3px;gap:2px}
body.future .seg{background:rgba(255,255,255,.05)}
.seg__btn{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);
  background:none;border:none;padding:8px 13px;border-radius:8px;cursor:pointer;transition:.14s}
.seg__btn:hover{color:var(--text)}
body.future .seg__btn:hover:not(.is-on){background:rgba(255,255,255,.05);color:#e9e7fb}
.seg__btn.is-on{background:#fff;color:var(--primary-700);box-shadow:var(--shadow-sm)}
body.future .seg__btn.is-on{background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(124,58,237,.2));color:#fff;box-shadow:0 0 18px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.sort{font-family:inherit;font-size:14px;font-weight:600;color:var(--text);cursor:pointer;
  background:#fff;border:1px solid var(--border-strong);border-radius:11px;padding:11px 14px;
  transition:border-color .2s ease,box-shadow .2s ease}
.sort:hover,.sort:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.15)}
body.future .sort{background:rgba(255,255,255,.05);color:#e9e7fb}
body.future .sort:hover,body.future .sort:focus{border-color:rgba(167,139,250,.6);box-shadow:0 0 0 3px rgba(124,58,237,.2),0 0 18px rgba(124,58,237,.2)}
body.future .sort option{background:#16122a;color:#fff}

.chips-row{display:flex;gap:9px;flex-wrap:nowrap;overflow-x:auto;margin-bottom:18px;padding:2px 2px 8px;
  scrollbar-width:none;-webkit-mask:linear-gradient(90deg,#000 0,#000 94%,transparent);mask:linear-gradient(90deg,#000 0,#000 94%,transparent);
  scroll-snap-type:x proximity}
.chips-row::-webkit-scrollbar{display:none}
.chips-row .fchip{flex-shrink:0;scroll-snap-align:start;white-space:nowrap}
.fchip{font-family:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer;
  background:#fff;border:1px solid var(--border);border-radius:999px;padding:8px 15px;transition:.14s}
.fchip:hover{border-color:var(--primary);color:var(--primary)}
.fchip.is-on{background:var(--primary);color:#fff;border-color:var(--primary)}
body.future .fchip{background:rgba(255,255,255,.04);color:#c7c5e0}
body.future .fchip.is-on{background:linear-gradient(110deg,#8b5cf6,#7c3aed);color:#fff;
  box-shadow:0 0 24px rgba(124,58,237,.4)}

.count{color:var(--muted);font-size:14px;font-weight:600;margin-bottom:16px}
.empty{padding:60px 0;text-align:center;color:var(--muted);font-size:16px}
.link-btn{background:none;border:none;color:var(--primary);font-family:inherit;font-weight:700;
  font-size:16px;cursor:pointer;margin-left:8px}

/* ---- /quiz full-screen flow ---- */
.qp{min-height:calc(100dvh - 76px);display:flex;flex-direction:column}
.qp__bar{height:4px;background:var(--border)}
.qp__bar span{display:block;height:100%;background:linear-gradient(90deg,#8b5cf6,#7dd3fc);
  border-radius:0 4px 4px 0;transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 14px rgba(167,139,250,.6)}
.qp__main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 24px}
.qp__stage{width:100%;max-width:620px}
.qp__card{animation:qpIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes qpIn{from{transform:translateY(16px)}to{transform:none}}
.qp__step{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--primary)}
body.future .qp__step{color:#a78bfa;text-shadow:0 0 16px rgba(167,139,250,.5)}
.qp__q{font-size:clamp(28px,4.4vw,42px);font-weight:800;letter-spacing:-.025em;margin:10px 0 0;text-wrap:balance}
body.future .qp__q{color:#fff}
.qp__hint{color:var(--muted);font-size:clamp(15px,2vw,18px);margin:14px 0 30px;line-height:1.5}
body.future .qp__hint{color:#b7b5d4}
.qp__opts{display:grid;grid-template-columns:1fr;gap:12px}
.qp__opts--two{grid-template-columns:1fr 1fr}
.qp__opts .qz-opt{padding:18px 18px}
.qp__opts .qz-opt__emoji{font-size:28px}
.qp__opts .qz-opt__emoji svg{width:28px;height:28px}
.qp__opts .qz-opt__label{font-size:16.5px}
.qp__think{text-align:center;padding:30px 0}
.qp__result{max-width:560px;margin-inline:auto}
.qp__result .qz-result__reason{font-size:16px}

@media(max-width:620px){
  .qp__opts--two{grid-template-columns:1fr}
  .qz-alts__grid{grid-template-columns:1fr}
}

/* ---- /tool detail page ---- */
.td-hero{position:relative;overflow:hidden;padding:32px 0 40px;
  border-bottom:1px solid var(--border)}
.td-hero__inner{position:relative;z-index:2}
.td-back{display:inline-block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:22px}
.td-back:hover{color:var(--primary)}
.td-head{display:flex;gap:22px;align-items:center}
.td-head__top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.td-name{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;margin:0}
body.future .td-name{color:#fff}
body.future .td-name{
  background:linear-gradient(110deg,#fff 0%,#d8ccff 45%,#a9d9ff 75%,#fff 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 24px rgba(124,58,237,.35));
  animation:hero-shimmer 8s linear infinite}
@media(prefers-reduced-motion:reduce){body.future .td-name{animation:none}}
body.future .td-hero .hero__aurora{opacity:.5}
body.future .td-hero .hero__grid{opacity:.7}
.td-tagline{font-size:clamp(16px,2.2vw,20px);color:var(--muted);margin:10px 0 0;line-height:1.45;max-width:620px}
body.future .td-tagline{color:#c0bedb}
.td-meta{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;font-size:14.5px;color:var(--muted)}
.td-dot{opacity:.5}
.td-cta{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.td-cta__go{padding:13px 22px;font-size:16px}
.td-aff{display:block;font-size:11.5px;color:var(--muted);text-align:center;margin-top:6px;}

.td-grid{display:grid;grid-template-columns:1fr 320px;gap:38px;padding-top:42px;align-items:start}
.td-main{min-width:0;overflow-x:hidden}
@media(max-width:860px){
  .td-grid{grid-template-columns:1fr;gap:28px}
  .td-side{position:static!important;top:auto;min-width:0;max-height:none;overflow-y:visible;padding:0;margin:0}
}
.td-block{margin-bottom:40px}
.td-h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:0 0 16px;display:flex;align-items:center;gap:10px}
.td-h2::before{content:'';width:4px;height:20px;border-radius:2px;background:var(--primary);flex-shrink:0}
body.future .td-h2{color:#fff}
body.future .td-h2::before{background:linear-gradient(180deg,#a78bfa,#7c3aed)}
.td-long{font-size:16px;line-height:1.7;color:#374151;margin:0;word-break:break-word;overflow-wrap:break-word}
body.future .td-long{color:#cdcbe6}
.td-long--clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.td-long--p + .td-long--p{margin-top:10px}
.td-read-more{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--primary);padding:8px 0 0;display:block}
body.future .td-read-more{color:#a78bfa}
.td-bestfor{display:flex;flex-direction:column;gap:5px;margin-top:18px;
  background:linear-gradient(135deg,var(--accent-bg),rgba(124,58,237,.04));
  border:1.5px solid rgba(124,58,237,.18);border-radius:14px;padding:16px 18px}
body.future .td-bestfor{background:rgba(124,58,237,.1);border-color:rgba(167,139,250,.25)}
.td-bestfor__k{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.td-bestfor__v{font-size:15px;color:var(--text);line-height:1.5}
body.future .td-bestfor__v{color:#e9e7fb}

/* ── Stärken & Schwächen ─────────────────────────────────────────────────── */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:580px){.pc{grid-template-columns:1fr}}
.pc__col{border-radius:20px;overflow:hidden;border:1.5px solid var(--border);box-shadow:0 1px 8px rgba(0,0,0,.04);transition:box-shadow .2s,transform .2s}
.pc__col:hover{box-shadow:0 8px 28px rgba(0,0,0,.07);transform:translateY(-2px)}
.pc__col--pro{border-color:rgba(34,197,94,.3)}
.pc__col--con{border-color:rgba(239,68,68,.22)}
body.future .pc__col{background:rgba(255,255,255,.04);backdrop-filter:blur(12px)}
body.future .pc__col--pro{border-color:rgba(74,222,128,.22)}
body.future .pc__col--con{border-color:rgba(248,113,113,.18)}
.pc__head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;padding:16px 20px;border-bottom:1px solid transparent}
.pc__col--pro .pc__head{background:linear-gradient(135deg,rgba(34,197,94,.1) 0%,rgba(34,197,94,.04) 100%);color:#15803d;border-bottom-color:rgba(34,197,94,.15)}
.pc__col--con .pc__head{background:linear-gradient(135deg,rgba(239,68,68,.08) 0%,rgba(239,68,68,.03) 100%);color:#dc2626;border-bottom-color:rgba(239,68,68,.12)}
body.future .pc__col--pro .pc__head{background:linear-gradient(135deg,rgba(74,222,128,.1) 0%,rgba(74,222,128,.04) 100%);color:#4ade80;border-bottom-color:rgba(74,222,128,.15)}
body.future .pc__col--con .pc__head{background:linear-gradient(135deg,rgba(248,113,113,.09) 0%,rgba(248,113,113,.03) 100%);color:#f87171;border-bottom-color:rgba(248,113,113,.12)}
.pc__head-icon{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pc__col--pro .pc__head-icon{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}
.pc__col--con .pc__head-icon{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}
.pc__body{padding:16px 20px}
.pc__col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.pc__col li{font-size:14.5px;line-height:1.5;color:#374151;padding-left:26px;position:relative}
body.future .pc__col li{color:rgba(196,181,253,.8)}
.pc__col--pro li::before{content:'✓';position:absolute;left:0;top:0;font-size:13.5px;font-weight:900;color:#22c55e}
.pc__col--con li::before{content:'✕';position:absolute;left:1px;top:0;font-size:12px;font-weight:900;color:#ef4444}
body.future .pc__col--pro li::before{color:#4ade80}
body.future .pc__col--con li::before{color:#f87171}

/* ── Pricing – Option B Plan Card Style ─────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.tier{background:#fff;border:1.5px solid var(--border);border-radius:20px;display:flex;flex-direction:column;overflow:hidden;transition:box-shadow .2s,transform .2s;box-shadow:0 1px 8px rgba(0,0,0,.04)}
.tier:hover{box-shadow:0 10px 32px rgba(0,0,0,.08);transform:translateY(-3px)}
body.future .tier{background:rgba(255,255,255,.04);backdrop-filter:blur(12px)}
.tier--first{border-color:var(--primary);box-shadow:0 2px 24px rgba(124,58,237,.14)}
body.future .tier--first{box-shadow:0 0 0 1.5px var(--primary),0 0 36px rgba(124,58,237,.2)}
/* Plan header */
.tier__header{padding:22px 22px 18px;border-bottom:1px solid var(--border)}
.tier--first .tier__header{background:linear-gradient(160deg,rgba(124,58,237,.06) 0%,transparent 100%)}
body.future .tier__header{border-bottom-color:rgba(255,255,255,.07)}
body.future .tier--first .tier__header{background:rgba(124,58,237,.12)}
.tier__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
/* Neues Karten-Layout: Name klein oben, Preis groß darunter (kein tier__top-Row mehr) */
.tier__header>.tier__name{margin-bottom:7px}
.tier__header>.tier__price{margin-top:2px}
.tier__incl{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 12px}
body.future .tier__incl{color:rgba(196,181,253,.4)}
.tier__name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}
.tier--first .tier__name{color:var(--primary)}
body.future .tier__name{color:rgba(196,181,253,.45)}
body.future .tier--first .tier__name{color:#a78bfa}
.tier__popular{background:var(--primary);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:3px 9px}
body.future .tier__popular{background:rgba(167,139,250,.25);color:#c4b5fd}
.tier__price{font-size:clamp(17px,3.8vw,24px);font-weight:900;letter-spacing:-.03em;line-height:1.2;color:var(--text);word-break:break-word}
.tier--first .tier__price{color:var(--primary)}
body.future .tier__price{color:#fff}
body.future .tier--first .tier__price{color:#c4b5fd}
/* Kein Betrag verfügbar: kleiner Hinweis statt Riesen-Preis-Typo im Preis-Slot */
.tier__price-na{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:0;line-height:1.5;color:var(--muted);max-width:170px}
body.future .tier__price-na{color:rgba(196,181,253,.75)}
/* Alte Markup-Variante (Preis rechts neben Name): Hinweis rechtsbündig */
.tier__top .tier__price-na{text-align:right;max-width:150px}
/* "Für:"-Zeile als Karten-Footer — ans Ende gepinnt, dezent abgesetzt */
.tier__for{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12.5px;line-height:1.55;color:var(--muted)}
.tier__for strong{color:var(--text);font-weight:700}
body.future .tier__for{border-top-color:rgba(255,255,255,.07);color:rgba(196,181,253,.65)}
body.future .tier__for strong{color:rgba(233,231,251,.9)}
.tier__body .tier__for{margin-top:auto;padding-top:14px}
.tier__body .tier__features{flex:0 0 auto}
.tier__body{gap:0}
/* Plan body + features */
.tier__body{padding:18px 22px 20px;flex:1;display:flex;flex-direction:column}
.tier__divider{display:none}
.tier__features{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;flex:1}
.tier__features li{font-size:14px;color:#374151;padding-left:24px;position:relative;line-height:1.5}
body.future .tier__features li{color:rgba(196,181,253,.8)}
.tier__features li::before{content:'✓';position:absolute;left:0;top:0;color:#22c55e;font-size:13.5px;font-weight:800}
.tier--first .tier__features li::before{color:var(--primary)}
body.future .tier--first .tier__features li::before{color:#a78bfa}
/* CTA Button */
.tier__cta{margin-top:18px;display:block;text-align:center;background:var(--border);color:var(--text);border-radius:12px;padding:11px 16px;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s,color .15s}
.tier__cta:hover{background:var(--border-strong);color:var(--text)}
.tier--first .tier__cta{background:var(--primary);color:#fff}
.tier--first .tier__cta:hover{background:var(--primary-600);color:#fff}
body.future .tier__cta{background:rgba(255,255,255,.08);color:#e9e7fb}
body.future .tier--first .tier__cta{background:var(--primary);color:#fff}

/* Rating ring */
.rating-ring{display:inline-flex;flex-shrink:0}
.rating-ring svg{display:block;overflow:visible}
.rating-ring text{font-family:inherit}

/* Sidebar — max-height + eigenes Scrollen: sonst ist der untere Teil einer
   Sidebar, die höher als der Viewport ist, erst nach Durchscrollen des
   Hauptcontents erreichbar. Padding/Margin-Ausgleich lässt Karten-Schatten
   trotz overflow sichtbar. */
.td-side{position:sticky;top:90px;max-height:calc(100vh - 102px);overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
  padding:2px 12px 16px;margin:-2px -12px 0;
  scrollbar-width:thin;scrollbar-color:rgba(124,58,237,.35) transparent}
/* Flex-Kinder dürfen im Scroll-Container nicht stauchen */
.td-side>*{flex-shrink:0}
/* Eigene Karten-Margins stapeln sich sonst mit dem Flex-Gap (14+16=30px) */
.td-side .td-seealso,.td-side .td-author{margin-top:0}
.td-side .td-aff{margin-top:-6px}
/* Card */
.td-fact{background:#fff;border:1.5px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.04)}
body.future .td-fact{background:linear-gradient(145deg,rgba(255,255,255,.05),rgba(124,58,237,.08));backdrop-filter:blur(24px);border-color:rgba(167,139,250,.28);box-shadow:0 0 0 1px rgba(124,58,237,.14),0 16px 46px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);position:relative}
/* Top-Akzent-Linie */
body.future .td-fact::before{content:'';position:absolute;inset:0 0 auto;height:2px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,transparent,rgba(167,139,250,.7),rgba(125,211,252,.5),transparent);opacity:.8;pointer-events:none;z-index:1}
/* Header */
.td-fact__header{display:flex;align-items:center;gap:8px;padding:15px 18px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--primary);background:rgba(124,58,237,.04);border-bottom:1px solid rgba(124,58,237,.1)}
body.future .td-fact__header{color:#c4b5fd;background:rgba(124,58,237,.14);border-bottom-color:rgba(167,139,250,.18)}
body.future .td-fact__icon{color:#a78bfa;opacity:1;filter:drop-shadow(0 0 6px rgba(167,139,250,.6))}
.td-fact__icon{font-size:13px;opacity:.75}
/* Rows */
.td-fact__row{padding:13px 18px;transition:background .14s}
.td-fact__row:hover{background:rgba(124,58,237,.04)}
body.future .td-fact__row:hover{background:rgba(124,58,237,.09)}
.td-fact__row+.td-fact__row{border-top:1px solid var(--border)}
body.future .td-fact__row+.td-fact__row{border-top-color:rgba(255,255,255,.06)}
/* Cell — horizontal: label left, value right */
.td-fact__cell{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.td-fact__lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);flex-shrink:0;white-space:nowrap}
body.future .td-fact__lbl{color:rgba(196,181,253,.45)}
.td-fact__val{font-size:14px;font-weight:600;color:var(--text);text-align:right}
body.future .td-fact__val{color:#e9e7fb}
/* Category chip — right side */
.td-fact__val--cat{background:rgba(124,58,237,.08);color:var(--primary);border-radius:6px;padding:3px 9px;font-size:12px;font-weight:600;text-align:right;line-height:1.5;word-break:break-word;max-width:165px}
body.future .td-fact__val--cat{background:rgba(124,58,237,.2);color:#c4b5fd}
.td-fact__val--price{flex-shrink:0}
/* Rating — ring right, label left */
.td-fact__rating-wrap{display:flex;align-items:center;gap:8px}
.td-fact__rating-text{display:flex;flex-direction:column;gap:1px;text-align:right}
.td-fact__rating-text strong{font-size:19px;font-weight:900;letter-spacing:-.03em;color:var(--text);line-height:1}
body.future .td-fact__rating-text strong{color:#fff}
.td-fact__rating-text span{font-size:11px;color:var(--muted)}
/* Klickbarer Score-Ring → Kriterien-Aufklappung */
.td-fact__rating-wrap--clickable{cursor:pointer;border-radius:12px;padding:5px 7px;margin:-5px -7px;transition:background .16s ease,box-shadow .16s ease}
.td-fact__rating-wrap--clickable:hover{background:rgba(124,58,237,.10)}
.td-fact__rating-wrap--clickable:focus-visible{outline:2px solid var(--primary,#a78bfa);outline-offset:2px}
.td-fact__chev{margin-left:6px;font-size:13px;color:var(--primary,#a78bfa);transition:transform .25s ease}
.td-fact__chev--open{transform:rotate(180deg)}
/* Deutlich sichtbarer Aufklapp-Button unter dem Ring */
.td-scoreb__toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:11px;padding:8px 12px;
  font-size:12.5px;font-weight:700;font-family:inherit;color:var(--primary,#a78bfa);cursor:pointer;
  background:rgba(124,58,237,.09);border:1px solid rgba(124,58,237,.28);border-radius:10px;transition:background .16s ease,border-color .16s ease,transform .1s ease}
.td-scoreb__toggle:hover{background:rgba(124,58,237,.16);border-color:rgba(124,58,237,.45)}
/* Light-Mode: Text dunkler (#6d28d9 ~7:1 statt ~5.9:1) + kräftigerer Grund für klarere Affordanz */
body:not(.future) .td-scoreb__toggle{color:#6d28d9;background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.34)}
body:not(.future) .td-scoreb__toggle:hover{background:rgba(124,58,237,.2)}
.td-scoreb__toggle:active{transform:scale(.98)}
.td-scoreb__toggle:focus-visible{outline:2px solid var(--primary,#a78bfa);outline-offset:2px}
.td-scoreb__toggle-chev{font-size:12px;transition:transform .25s ease}
.td-scoreb__toggle--open .td-scoreb__toggle-chev{transform:rotate(180deg)}
.td-scoreb{width:100%;margin-top:14px;padding-top:14px;border-top:1px solid rgba(124,58,237,.16);display:flex;flex-direction:column;gap:11px;animation:scorebIn .32s cubic-bezier(.22,1,.36,1)}
@keyframes scorebIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.td-scoreb__row{display:grid;grid-template-columns:minmax(0,1fr) 96px 28px;align-items:center;gap:10px;transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.td-scoreb__lbl{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-scoreb__track{height:8px;border-radius:99px;background:rgba(124,58,237,.15);overflow:hidden}
.td-scoreb__fill{display:block;height:100%;width:0;border-radius:99px;transition:width 1.05s cubic-bezier(.22,1,.36,1)}
.td-scoreb__val{font-size:13px;font-weight:800;color:var(--text);text-align:right;font-variant-numeric:tabular-nums}
body.future .td-scoreb__val{color:#fff}
.td-scoreb__more{grid-column:1/-1;font-size:11.5px;font-weight:700;color:var(--primary,#a78bfa);text-decoration:none;margin-top:2px}
.td-scoreb__more:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.td-scoreb__row{transition:none}.td-scoreb__fill{transition:none}}
/* Link */
.td-fact__method{display:block;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);text-decoration:none;padding:11px 0 3px;margin-top:12px;border-top:1px solid var(--border,rgba(167,139,250,.14));transition:color .15s ease}
.td-fact__method:hover{color:var(--primary)}
.td-fact__link{display:inline-flex;align-items:center;gap:4px;font-size:13.5px;font-weight:700;color:var(--primary);text-decoration:none;transition:color .15s}
.td-fact__link:hover{color:var(--primary-700)}
body.future .td-fact__link{color:#a78bfa}
body.future .td-fact__link:hover{color:#c4b5fd}
.td-side__go{justify-content:center;padding:14px;font-size:16px;width:100%}

@media(max-width:860px){
  .td-grid{grid-template-columns:1fr}
  .td-side{position:static;max-height:none;overflow-y:visible;padding:0;margin:0}
}
@media(max-width:640px){
  .tiers{grid-template-columns:1fr 1fr}
  .tier{padding:18px 16px 16px}
  .tier__price{font-size:17px}
}
@media(max-width:560px){
  .td-head{flex-direction:column;align-items:flex-start;gap:16px}
  .pc{grid-template-columns:1fr}
  .td-cta{width:100%}
  .td-cta .btn{flex:1;justify-content:center}
  .tiers{grid-template-columns:1fr}
}

/* ============================================================
   Subpages responsive
   ============================================================ */
@media(max-width:980px){
  .tool-grid--wide{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .tool-grid--wide{grid-template-columns:1fr}
  .filters{flex-direction:column;align-items:stretch}
  .seg{overflow-x:auto}
  .sort{width:100%}
}

/* ============================================================
   Animations
   ============================================================ */
/* scroll reveal (transform-only so content is never hidden if frames freeze) */
.reveal{transform:translateY(var(--rv-y,18px));
  transition:transform .6s cubic-bezier(.22,.7,.2,1)}
.reveal.is-in{transform:none}
@media(prefers-reduced-motion:reduce){.reveal{transform:none;transition:none}}

/* hero entrance (transform-only; content stays visible even if frames freeze) */
@keyframes rise{from{transform:translateY(22px)}to{transform:none}}
@keyframes riseSm{from{transform:translateY(12px)}to{transform:none}}
.hero__badge{animation:riseSm .6s .05s}
.hero__title{animation:rise .7s .12s}
.hero__sub{animation:rise .7s .22s}
.hero__cta{animation:rise .7s .32s}
.stats{animation:rise .7s .44s}
@media(prefers-reduced-motion:reduce){
  .hero__badge,.hero__title,.hero__sub,.hero__cta,.stats{animation:none}
}

/* floating hero glow */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* live status dot pulse */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.hero__badge .dot{animation:pulse 2.2s ease-out infinite}

/* number count-up baseline (JS toggles) */
.stat__num{font-variant-numeric:tabular-nums}

/* card sheen on hover */
.tool-card,.cat-tile,.step{position:relative}
.tool-card::after,.cat-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(140px 80px at var(--mx,50%) 0,rgba(124,58,237,.08),transparent 70%);
  opacity:0;transition:opacity .25s;pointer-events:none}
.tool-card:hover::after,.cat-tile:hover::after{opacity:1}

/* chip arrow nudge */
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.chip__arrow{animation:nudge 2s ease-in-out infinite}
/* mobile chips: stack vertically, hide arrows */
@media(max-width:600px){
  .quizcta__chips{flex-direction:column;align-items:center;gap:8px}
  .chip__arrow{display:none}
  .chip{width:100%;max-width:280px;justify-content:flex-start}
}

/* primary button arrow slide */
.btn--primary span,.sec-link span,.qz-result__go,.drawer__go{transition:transform .15s}
.btn:hover span{transform:translateX(3px)}
.sec-link:hover span{transform:translateX(3px)}

/* result pop-in stagger (transform-only) */
@keyframes resIn{from{transform:translateY(14px)}to{transform:none}}
.qz-result>*{animation:resIn .5s}
.qz-result__badge{animation-delay:.02s}
.qz-result__hero{animation-delay:.10s}
.qz-result__reason{animation-delay:.18s}
.qz-result__go{animation-delay:.26s}
.qz-alts{animation-delay:.34s}
.qz-restart{animation-delay:.42s}
@media(prefers-reduced-motion:reduce){.qz-result>*{animation:none}}

/* ============================================================
   legal / prose pages (Impressum, Datenschutz)
   ============================================================ */
.legal-page{background:linear-gradient(180deg,#faf8ff 0%,#ffffff 100%);min-height:60vh}
.legal{max-width:780px;margin:0 auto;padding:52px 24px 88px}
.legal__back{display:inline-block;font-size:14px;font-weight:600;color:var(--muted);margin-bottom:26px;white-space:nowrap}
.legal__back:hover{color:var(--primary)}
.legal__eyebrow{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--primary);margin-bottom:10px}
.legal__title{font-size:clamp(30px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;margin:0}
body.future .legal__title{color:#fff}
body.future .legal__title:not(.kontakt-title){
  background:linear-gradient(110deg,#fff 0%,#d8ccff 50%,#a9d9ff 80%,#fff 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 22px rgba(124,58,237,.3));
  animation:hero-shimmer 8s linear infinite}
@media(prefers-reduced-motion:reduce){body.future .legal__title:not(.kontakt-title){animation:none}}
.legal__updated{font-size:14px;color:var(--muted);margin:12px 0 22px;padding-bottom:24px;
  border-bottom:1px solid var(--border)}
.legal h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin:38px 0 12px}
body.future .legal h2{color:#fff}
.legal h3{font-size:16.5px;font-weight:700;margin:24px 0 8px;color:var(--text)}
body.future .legal h3{color:#ece9fb}
.legal p{font-size:15.5px;line-height:1.72;color:#374151;margin:0 0 13px}
body.future .legal p{color:#c0bedb}
.legal a{color:var(--primary);font-weight:600}
.legal a:hover{text-decoration:underline}
.legal ul{margin:0 0 15px;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.legal li{font-size:15.5px;line-height:1.62;color:#374151}
body.future .legal li{color:#c0bedb}
.legal strong{color:var(--text);font-weight:700}
body.future .legal strong{color:#f4f3fb}
.legal address{font-style:normal;line-height:1.72}
/* fill-in placeholder pill */
.legal__ph{font-style:normal;font-weight:600;color:var(--primary);
  background:rgba(167,139,250,.14);border:1px solid var(--border-strong);
  border-radius:6px;padding:1px 7px;white-space:nowrap}
/* editorial note banner */
.legal__note{display:flex;gap:12px;align-items:flex-start;margin:0 0 30px;
  background:rgba(245,158,11,.10);border:1px solid rgba(245,158,11,.35);
  border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.55;color:#92600a}
body.future .legal__note{color:#fcd9a3}
.legal__note strong{color:inherit}
.legal__note-ico{font-size:17px;line-height:1.4}

/* ============================================================
   Kontakt-Seite
   ============================================================ */

/* Page wrapper */
.kontakt-page{background:linear-gradient(180deg,#faf8ff 0%,#ffffff 100%)}
body.future .kontakt-page{background:none}

/* Back button — always block so eyebrow goes below */
.kontakt-nav{display:block;margin-bottom:44px}

/* Hero header */
.kontakt-article{max-width:960px}
.kontakt-hero{margin-bottom:44px}
.kontakt-eyebrow{display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.18);border-radius:100px;
  padding:6px 14px;margin-bottom:18px}
body.future .kontakt-eyebrow{background:rgba(124,58,237,.15);border-color:rgba(167,139,250,.3);color:#c4b5fd}
.kontakt-eyebrow__dot{width:7px;height:7px;border-radius:50%;
  background:var(--primary);opacity:.7;flex-shrink:0}
body.future .kontakt-eyebrow__dot{background:#a78bfa}
.kontakt-title{margin-bottom:14px}
.kontakt-brand{background:linear-gradient(135deg,#a78bfa 0%,#7c3aed 60%,#6366f1 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.kontakt-sub{margin:0 0 0;color:var(--muted);font-size:16px;line-height:1.75;max-width:540px}

/* 2-column grid */
.kontakt-grid{display:grid;grid-template-columns:1fr 1.65fr;gap:32px;align-items:start}
@media(max-width:720px){.kontakt-grid{grid-template-columns:1fr}}

/* Info cards (left column) */
.kontakt-left{display:flex;flex-direction:column;gap:12px}
.contact-card{display:flex;align-items:flex-start;gap:14px;
  background:#fff;border:1px solid rgba(124,58,237,.12);
  border-radius:16px;padding:18px 20px;
  transition:border-color .18s,box-shadow .18s,transform .18s}
.contact-card:hover{border-color:rgba(124,58,237,.28);
  box-shadow:0 4px 20px rgba(124,58,237,.08);transform:translateY(-1px)}
body.future .contact-card{background:rgba(255,255,255,.04);border-color:rgba(167,139,250,.12)}
body.future .contact-card:hover{border-color:rgba(167,139,250,.42);
  box-shadow:0 12px 32px rgba(124,58,237,.22);transform:translateY(-3px)}
.contact-card__icon-wrap{width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(124,58,237,.08);display:flex;align-items:center;justify-content:center;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease}
body.future .contact-card__icon-wrap{background:linear-gradient(140deg,rgba(139,92,246,.4),rgba(124,58,237,.14));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
body.future .contact-card:hover .contact-card__icon-wrap{transform:scale(1.09) rotate(-3deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 5px 14px rgba(124,58,237,.3)}
.contact-card__icon{font-size:18px;line-height:1}
.contact-card__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.contact-card__label{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}
.contact-card__link{font-size:14.5px;color:var(--primary);text-decoration:none;
  font-weight:600;display:block;margin-top:1px}
.contact-card__link:hover{text-decoration:underline}
.contact-card__text{font-size:14.5px;color:var(--text);font-weight:600;display:block;margin-top:1px}
body.future .contact-card__text{color:#e2deff}
.contact-card__sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}

/* Form (right column) */
.contact-form{display:flex;flex-direction:column;gap:18px;
  background:#fff;border:1px solid rgba(124,58,237,.1);border-radius:20px;
  padding:28px 28px 28px}
body.future .contact-form{background:rgba(255,255,255,.04);border-color:rgba(167,139,250,.1)}
@media(max-width:520px){.contact-form{padding:22px 18px}}
.contact-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.contact-row{grid-template-columns:1fr}}
.contact-field{display:flex;flex-direction:column;gap:6px}
.contact-label{font-size:13.5px;font-weight:600;color:var(--text);letter-spacing:-.01em}
body.future .contact-label{color:#d4cff5}
.contact-label span{color:var(--primary)}
.contact-input{width:100%;padding:11px 14px;font-size:14.5px;font-family:inherit;
  background:#f8f7ff;border:1.5px solid rgba(124,58,237,.14);border-radius:10px;
  color:var(--text);outline:none;transition:border-color .18s,box-shadow .18s,background .18s;
  box-sizing:border-box;-webkit-appearance:none;appearance:none}
.contact-input:focus{border-color:var(--primary);background:#fff;
  box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.contact-input::placeholder{color:#a78bfa88}
body.future .contact-input{background:rgba(255,255,255,.06);border-color:rgba(167,139,250,.18);color:#f0eeff}
body.future .contact-input:focus{border-color:rgba(167,139,250,.6);background:rgba(255,255,255,.09);
  box-shadow:0 0 0 3px rgba(124,58,237,.22),0 0 22px rgba(124,58,237,.22)}
body.future .contact-input::placeholder{color:rgba(167,139,250,.4)}
.contact-select{cursor:pointer;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%239ca3af' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:11px 7px}
.contact-textarea{resize:vertical;min-height:148px;line-height:1.65}

.contact-submit{align-self:flex-start;padding:13px 30px;font-size:15px;
  display:inline-flex;align-items:center;gap:8px}
.contact-submit:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:520px){.contact-submit{width:100%;justify-content:center}}
.contact-submit__spinner{width:15px;height:15px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

.contact-success{display:flex;align-items:flex-start;gap:14px;
  background:linear-gradient(135deg,#f0fdf4,#ecfdf5);
  border:1.5px solid #86efac;border-radius:16px;padding:24px}
.contact-success svg{color:#16a34a;flex-shrink:0;margin-top:2px}
.contact-success strong{font-size:16px;font-weight:700;color:#15803d;display:block;margin-bottom:5px}
.contact-success p{margin:0;font-size:14px;color:#166534;line-height:1.5}
body.future .contact-success{background:rgba(22,163,74,.1);border-color:rgba(134,239,172,.3)}
body.future .contact-success strong{color:#4ade80}
body.future .contact-success p{color:#86efac}

.contact-error{background:#fef2f2;border:1.5px solid #fca5a5;border-radius:10px;
  padding:12px 16px;font-size:14px;color:#dc2626;line-height:1.45}
body.future .contact-error{background:rgba(220,38,38,.12);border-color:rgba(252,165,165,.3);color:#f87171}

/* ---- Logo Marquee ---- */
.logo-strip{padding:30px 0 8px}
.logo-strip__label{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:20px}
.logo-strip__label .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.logo-marquee{
  overflow:hidden;
  padding:10px 0 6px;
  background:transparent;
  -webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  /* leichte Kurve (Curved-Marquee): 3D-Kippung des Bandes, Inhalt scrollt normal */
  transform:perspective(1100px) rotateX(9deg);
  transform-origin:50% 100%;
}
@media(prefers-reduced-motion:reduce){.logo-marquee{transform:none}}
.logo-marquee__track{
  display:flex;
  align-items:center;
  gap:36px;
  width:max-content;
  animation:logo-scroll 64s linear infinite;
}
.logo-marquee:hover .logo-marquee__track{animation-play-state:paused}
@keyframes logo-scroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}
.logo-marquee__item{
  display:flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  opacity:.55;
  filter:grayscale(1) brightness(.92);
  transition:opacity .25s ease, filter .25s ease, transform .25s ease;
  user-select:none;
}
.logo-marquee__item:hover{opacity:1;filter:grayscale(0) brightness(1);transform:translateY(-2px)}
.logo-marquee__name{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.01em;
}

/* ---- Testimonial Dual-Row Marquee ---- */
/* Trust-Band: echte Zahlen statt Fake-Testimonials */
.trustband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.trustband__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:28px 22px 24px;border-radius:18px;overflow:hidden;
  background:linear-gradient(165deg,rgba(124,58,237,.09),rgba(15,10,32,.35) 55%,rgba(34,211,238,.04));
  border:1px solid rgba(139,92,246,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,border-color .22s ease}
.trustband__card::before{content:'';position:absolute;top:0;left:12%;right:12%;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--tb-col,#a78bfa),transparent);opacity:.55;transition:opacity .22s}
.trustband__card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 38px rgba(9,6,20,.5),0 0 24px rgba(124,58,237,.14)}
.trustband__card:hover::before{opacity:1}
.trustband__icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  color:var(--tb-col,#a78bfa);background:color-mix(in srgb,var(--tb-col,#a78bfa) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--tb-col,#a78bfa) 35%,transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--tb-col,#a78bfa) 25%,transparent),inset 0 0 12px color-mix(in srgb,var(--tb-col,#a78bfa) 10%,transparent);
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.trustband__card:hover .trustband__icon{transform:scale(1.08)}
body:not(.future) .trustband__icon{color:var(--tb-col-l,var(--tb-col));background:color-mix(in srgb,var(--tb-col-l,var(--tb-col)) 8%,transparent);border-color:color-mix(in srgb,var(--tb-col-l,var(--tb-col)) 28%,transparent);box-shadow:none}
.trustband__big{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--tb-col,#a78bfa)}
.trustband__txt{font-size:13.5px;line-height:1.6;color:var(--muted)}
body:not(.future) .trustband__card{background:linear-gradient(165deg,rgba(124,58,237,.05),#fff 55%);border-color:rgba(124,58,237,.16);box-shadow:0 2px 10px rgba(15,10,40,.05)}
body:not(.future) .trustband__card:hover{box-shadow:0 14px 30px rgba(15,10,40,.12)}
body:not(.future) .trustband__big{color:var(--tb-col-l,var(--tb-col))}
.trustband__more{text-align:center;margin:22px 0 0;font-size:13.5px;color:var(--muted)}
.trustband__more a{color:var(--primary);font-weight:600}
@media(max-width:900px){.trustband{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.trustband{grid-template-columns:1fr}}

.tmarquee-section{overflow:hidden}
.tmarquee{
  display:flex;flex-direction:column;gap:16px;
  padding:28px 0 4px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.tmarquee__row{
  display:flex;gap:16px;width:max-content;
}
.tmarquee__row--left{animation:tm-left 55s linear infinite}
.tmarquee__row--right{animation:tm-right 55s linear infinite}
.tmarquee:hover .tmarquee__row{animation-play-state:paused}
@keyframes tm-left{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes tm-right{0%{transform:translateX(-50%)}100%{transform:translateX(0)}}

.tcard{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:18px;
  padding:22px 24px;
  width:300px;
  flex-shrink:0;
  display:flex;flex-direction:column;gap:12px;
  box-shadow:0 1px 10px rgba(0,0,0,.04);
  transition:box-shadow .2s,transform .2s;
  margin:0;
}
.tcard:hover{box-shadow:0 8px 28px rgba(0,0,0,.09);transform:translateY(-2px)}
.tcard__stars{color:#f59e0b;font-size:13px;letter-spacing:1px}
.tcard__quote{font-size:14.5px;line-height:1.6;color:var(--text);margin:0;font-style:normal}
.tcard__author{display:flex;align-items:center;gap:11px;margin-top:4px}
.tcard__avatar{
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:12.5px;font-weight:700;flex-shrink:0;
}
.tcard__meta{display:flex;flex-direction:column;gap:1px}
.tcard__meta strong{font-size:13.5px;font-weight:700;color:var(--text)}
.tcard__meta span{font-size:12px;color:var(--muted)}

/* dark mode tcard — poliert: Zitat-Akzent, Glow-Hover, Avatar-Ring */
body.future .tcard{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid rgba(167,139,250,.16);
  position:relative;overflow:hidden;
  box-shadow:0 2px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
  transition:box-shadow .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease}
body.future .tcard::before{content:'\201C';position:absolute;top:-22px;right:14px;
  font-size:92px;line-height:1;font-family:Georgia,serif;
  color:rgba(167,139,250,.10);pointer-events:none}
body.future .tcard:hover{transform:translateY(-4px);
  border-color:rgba(167,139,250,.42);
  box-shadow:0 16px 38px rgba(124,58,237,.24),0 0 0 1px rgba(167,139,250,.22),inset 0 1px 0 rgba(255,255,255,.06)}
body.future .tcard__avatar{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 3px 10px rgba(0,0,0,.35)}
body.future .tcard__stars{filter:drop-shadow(0 0 7px rgba(245,158,11,.45))}
body.future .tcard__quote{color:#e9e7fb}

/* ---- Vergleichs-/Roundup-Seite (.cmp) ---- */
.cmp-inner{max-width:900px;margin:0 auto}
.cmp-intro{max-width:720px;margin:0 auto 48px;text-align:center;color:var(--text-2,var(--muted));font-size:1.06rem;line-height:1.75}
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:20px;margin-bottom:56px;background:var(--glass,rgba(255,255,255,.02));box-shadow:0 8px 30px rgba(0,0,0,.12)}
.cmp-table{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp-table th{text-align:left;padding:15px 18px;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);border-bottom:1px solid var(--border);white-space:nowrap}
.cmp-table td{padding:15px 18px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle}
.cmp-table tbody tr{transition:background .18s ease}
.cmp-table tbody tr:hover{background:color-mix(in srgb,var(--tc,#8b5cf6) 8%,transparent)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-row-win td{background:color-mix(in srgb,var(--tc,#8b5cf6) 10%,transparent)}
.cmp-rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-weight:800;font-size:.82rem;color:#fff;background:color-mix(in srgb,var(--tc,#8b5cf6) 82%,#000);box-shadow:0 2px 8px color-mix(in srgb,var(--tc,#8b5cf6) 40%,transparent)}
.cmp-tool{white-space:nowrap;font-weight:600;vertical-align:middle}
.cmp-tool__inner{display:inline-flex;align-items:center;gap:10px}
.cmp-tool__logo{display:inline-flex;flex-shrink:0}
.cmp-stars{color:#f59e0b;font-weight:700;white-space:nowrap}
.cmp-for{color:var(--muted);font-size:.9rem}
.cmp-details{color:var(--primary,#8b5cf6);font-weight:600;text-decoration:none;white-space:nowrap}
.cmp-details:hover{text-decoration:underline}

.cmp-card{position:relative;background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-radius:20px;padding:26px 24px;margin-bottom:18px;transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease,border-color .25s ease}
.cmp-card::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--tc,#8b5cf6),transparent);opacity:.55}
@media(hover:hover) and (pointer:fine){
  .cmp-card:hover{transform:translateY(-3px);box-shadow:0 14px 40px color-mix(in srgb,var(--tc,#8b5cf6) 22%,rgba(0,0,0,.28));border-color:color-mix(in srgb,var(--tc,#8b5cf6) 35%,var(--border))}
}
.cmp-card--winner{border-color:color-mix(in srgb,#f59e0b 45%,var(--border));box-shadow:0 10px 34px rgba(245,158,11,.14)}
.cmp-badge-win{position:absolute;top:-11px;left:24px;display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#3a2500;background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 4px 14px rgba(245,158,11,.4)}
.cmp-card__head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cmp-card__rank{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex-shrink:0;border-radius:10px;font-size:1rem;font-weight:800;color:#fff;background:color-mix(in srgb,var(--tc,#8b5cf6) 85%,#000);box-shadow:0 3px 12px color-mix(in srgb,var(--tc,#8b5cf6) 40%,transparent)}
.cmp-card--winner .cmp-card__rank{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#3a2500}
.cmp-card__logo{display:inline-flex;flex-shrink:0}
.cmp-card__title{min-width:0}
.cmp-card__title h3{margin:0;font-size:1.28rem;letter-spacing:-.02em;color:var(--text)}
.cmp-card__meta{display:flex;align-items:center;gap:8px;margin-top:5px;color:var(--muted);font-size:.9rem}
.cmp-dot{color:var(--muted)}
.cmp-card__cta{margin-left:auto;flex-shrink:0;text-decoration:none;transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.cmp-card__cta:active{transform:scale(.97)}
.cmp-card__desc{color:var(--text-2,var(--muted));line-height:1.72;margin:18px 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cmp-card__more{display:inline-block;color:var(--primary,#8b5cf6);font-weight:600;text-decoration:none;font-size:.92rem}
.cmp-card__more:hover{text-decoration:underline}
@media(max-width:640px){
  .cmp-card__cta{margin-left:0;width:100%;justify-content:center;margin-top:6px}
  .cmp-card__desc{-webkit-line-clamp:4}
}

/* ---- .cmp Premium-Pass: Sterne, Trust, Hero, Ghost-Ziffern ---- */
.cmp-rating{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cmp-rating__stars{position:relative;display:inline-block;line-height:1;letter-spacing:1.5px}
.cmp-rating__base{color:rgba(140,140,165,.38)}
.cmp-rating__fill{position:absolute;top:0;left:0;overflow:hidden;color:#f59e0b;white-space:nowrap}
.cmp-rating__num{color:var(--text);font-weight:700;font-size:.92em}

.cmp-trust{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:-24px 0 22px;color:var(--muted);font-size:.9rem}
.cmp-trust b{color:var(--text);font-weight:700}
.cmp-disclosure{max-width:720px;margin:0 auto 40px;font-size:.78rem;line-height:1.6;color:var(--muted);opacity:.85;text-align:center;padding:0 12px}
.cmp-disclosure a{color:inherit;text-decoration:underline}
.cmp-trust__sep{width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.5}

.cmp-hero{position:relative;overflow:hidden;border-radius:24px;padding:30px;margin-bottom:54px;background:var(--glass,rgba(255,255,255,.02));border:1px solid color-mix(in srgb,var(--tc,#8b5cf6) 40%,var(--border))}
.cmp-hero__glow{position:absolute;inset:0;background:radial-gradient(120% 92% at 14% 0%,color-mix(in srgb,var(--tc,#8b5cf6) 26%,transparent),transparent 62%);pointer-events:none}
.cmp-hero__badge{position:relative;display:inline-flex;align-items:center;gap:6px;padding:6px 15px;border-radius:999px;font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#3a2500;background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 4px 16px rgba(245,158,11,.4);margin-bottom:22px}
.cmp-hero__body{position:relative;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cmp-hero__logo{flex-shrink:0}
.cmp-hero__main{flex:1;min-width:230px}
.cmp-hero__main h3{margin:0;font-size:1.7rem;letter-spacing:-.025em;color:var(--text)}
.cmp-hero__meta{display:flex;align-items:center;gap:10px;margin:9px 0 11px;color:var(--muted)}
.cmp-hero__desc{margin:0;color:var(--text-2,var(--muted));line-height:1.66;font-size:1.02rem}
.cmp-hero__actions{display:flex;flex-direction:column;gap:11px;align-items:flex-start;flex-shrink:0}
.cmp-hero__cta{text-decoration:none;font-size:1rem;padding:13px 24px;transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.cmp-hero__cta:active{transform:scale(.97)}
.cmp-hero__test{color:var(--primary,#8b5cf6);font-weight:600;text-decoration:none;font-size:.9rem}
.cmp-hero__test:hover{text-decoration:underline}

.cmp-card__ghost{position:absolute;bottom:10px;right:24px;font-size:4.4rem;font-weight:900;line-height:1;letter-spacing:-.05em;color:color-mix(in srgb,var(--tc,#8b5cf6) 11%,transparent);pointer-events:none;user-select:none;z-index:0}
.cmp-card__head,.cmp-card__desc,.cmp-card__more{position:relative;z-index:1}
.cmp-card__win-tag{display:inline-block;margin-left:10px;padding:3px 9px;border-radius:6px;font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a2500;background:linear-gradient(135deg,#fde68a,#f59e0b);vertical-align:middle}

@media(max-width:640px){
  .cmp-hero{padding:24px 20px}
  .cmp-hero__main h3{font-size:1.45rem}
  .cmp-hero__actions{width:100%}
  .cmp-hero__cta{width:100%;justify-content:center}
  .cmp-card__ghost{font-size:3.4rem;bottom:8px;right:16px}
}

/* ---- Vergleich: Head-to-Head-Zweikampf (genau 2 Tools) ---- */
.cmp-duel{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:0;margin-bottom:54px}
.cmp-duel__col{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:11px;padding:30px 26px 26px;background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-radius:22px}
.cmp-duel__col--win{border-color:color-mix(in srgb,#f59e0b 45%,var(--border));box-shadow:0 12px 40px rgba(245,158,11,.14)}
.cmp-duel__col::before{content:"";position:absolute;top:0;left:26px;right:26px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--tc,#8b5cf6),transparent);opacity:.55}
.cmp-duel__badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:5px;padding:5px 14px;border-radius:999px;font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3a2500;background:linear-gradient(135deg,#fde68a,#f59e0b);box-shadow:0 4px 16px rgba(245,158,11,.4);white-space:nowrap}
.cmp-duel__logo{margin-top:4px}
.cmp-duel__name{margin:2px 0 0;font-size:1.4rem;letter-spacing:-.02em;color:var(--text)}
.cmp-duel__meta{display:flex;align-items:center;gap:9px;color:var(--muted)}
.cmp-duel__desc{margin:2px 0 0;color:var(--text-2,var(--muted));line-height:1.6;font-size:.96rem}
.cmp-duel__best{margin:0;font-size:.86rem;color:var(--muted);line-height:1.55}
.cmp-duel__best strong{color:var(--text)}
.cmp-duel__list{list-style:none;margin:6px 0 4px;padding:0;width:100%;display:flex;flex-direction:column;gap:7px;text-align:left}
.cmp-duel__list li{display:flex;align-items:flex-start;gap:9px;font-size:.9rem;line-height:1.45;color:var(--text-2,var(--muted))}
.cmp-duel__list li span{flex-shrink:0;width:18px;height:18px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:.7rem;font-weight:800}
.cmp-duel__pro span{color:#10b981;background:rgba(16,185,129,.14)}
.cmp-duel__con span{color:#ef7676;background:rgba(239,118,118,.14)}
.cmp-duel__cta{margin-top:auto;text-decoration:none;width:100%;justify-content:center;padding:12px 22px}
.cmp-duel__test{color:var(--primary,#8b5cf6);font-weight:600;text-decoration:none;font-size:.86rem}
.cmp-duel__test:hover{text-decoration:underline}
body:not(.future) .cmp-duel__test{color:#7c3aed}
/* Light-Mode: Vergleichs-Karten sichtbar machen (glass-bg war auf Weiß unsichtbar) */
body:not(.future) .cmp-card{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)!important}
body:not(.future) .cmp-card--winner{border-color:rgba(245,158,11,.5)!important;box-shadow:0 6px 24px rgba(245,158,11,.14)!important}
body:not(.future) .cmp-hero{background:linear-gradient(135deg,#f4efff,#fdfbff)!important;border-color:rgba(124,58,237,.22)!important;box-shadow:0 8px 30px rgba(124,58,237,.1)!important}
body:not(.future) .cmp-duel__col{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)!important}
body:not(.future) .cmp-duel__vs span{background:#fff!important;border-color:rgba(124,58,237,.22)!important}
.cmp-duel__vs{display:flex;align-items:center;justify-content:center;padding:0 6px}
.cmp-duel__vs span{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;font-weight:900;font-size:1rem;letter-spacing:.02em;color:var(--text);background:var(--glass,rgba(255,255,255,.03));border:1px solid var(--border);box-shadow:0 6px 22px rgba(0,0,0,.22)}
@media(max-width:720px){
  .cmp-duel{grid-template-columns:1fr;gap:0;row-gap:34px}
  .cmp-duel__vs{padding:0}
  .cmp-duel__vs span{width:46px;height:46px}
}

/* ---- Head-to-Head: Detail-Vergleichstabelle ---- */
.cmp-dueltable{margin-bottom:54px;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--glass,rgba(255,255,255,.02))}
.cmp-dueltable__row{display:grid;grid-template-columns:1.1fr 1fr 1fr;align-items:center}
.cmp-dueltable__row:not(:last-child){border-bottom:1px solid var(--border)}
.cmp-dueltable__row--head{background:color-mix(in srgb,var(--primary,#8b5cf6) 10%,transparent);font-weight:800}
.cmp-dueltable__lbl{padding:15px 20px;font-size:.9rem;font-weight:700;color:var(--muted)}
.cmp-dueltable__tool{padding:15px 20px;display:flex;align-items:center;gap:9px;font-size:1rem;font-weight:800;color:var(--text)}
.cmp-dueltable__val{padding:15px 20px;font-size:.94rem;color:var(--text-2,var(--muted));line-height:1.45;border-left:1px solid var(--border)}
.cmp-dueltable__val.is-win{color:var(--text);font-weight:700}
.cmp-dueltable__val b{color:#f59e0b}
body:not(.future) .cmp-dueltable{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)}
body:not(.future) .cmp-dueltable__row:not(:last-child),body:not(.future) .cmp-dueltable__val{border-color:rgba(124,58,237,.12)!important}

/* ---- Head-to-Head: "Wann welches?"-Fazit ---- */
.cmp-verdict{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:54px}
.cmp-verdict__card{position:relative;padding:24px;border-radius:18px;background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-top:3px solid var(--tc,#8b5cf6);display:flex;flex-direction:column;gap:12px}
.cmp-verdict__head{display:flex;align-items:center;gap:12px}
.cmp-verdict__head h4{margin:0;font-size:1.12rem;letter-spacing:-.01em;color:var(--text)}
.cmp-verdict__card p{margin:0;color:var(--text-2,var(--muted));line-height:1.6;font-size:.96rem;flex:1}
.cmp-verdict__cta{align-self:flex-start;color:var(--tc,#8b5cf6);font-weight:700;text-decoration:none;font-size:.94rem}
.cmp-verdict__cta:hover{text-decoration:underline}
body:not(.future) .cmp-verdict__card{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)}

/* ---- Head-to-Head: TL;DR-Fazit oben ---- */
.cmp-tldr{max-width:780px;margin:0 auto 30px;padding:16px 22px;border-radius:14px;border:1px solid color-mix(in srgb,var(--primary,#8b5cf6) 28%,var(--border));border-left:3px solid var(--primary,#8b5cf6);background:color-mix(in srgb,var(--primary,#8b5cf6) 7%,transparent);font-size:1rem;line-height:1.6;color:var(--text-2,var(--muted))}
.cmp-tldr strong{color:var(--primary,#8b5cf6);font-weight:800;margin-right:4px}
.cmp-tldr b{color:var(--text);font-weight:700}
body:not(.future) .cmp-tldr{background:rgba(124,58,237,.05)!important;border-color:rgba(124,58,237,.22)!important}
body:not(.future) .cmp-tldr strong{color:#7c3aed}

/* ---- Head-to-Head: Preis-Vergleich ---- */
.cmp-price{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:54px}
.cmp-price__col{display:flex;flex-direction:column;gap:10px;padding:22px;border-radius:18px;background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-top:3px solid var(--tc,#8b5cf6)}
.cmp-price__head{display:flex;align-items:center;gap:11px;font-size:1.12rem;font-weight:800;color:var(--text);margin-bottom:4px}
.cmp-price__tier{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)}
.cmp-price__tname{font-size:.95rem;font-weight:600;color:var(--text-2,var(--muted))}
.cmp-price__tname em{font-style:normal;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--tc,#8b5cf6)}
.cmp-price__tprice{font-size:1.02rem;font-weight:800;color:var(--text);white-space:nowrap}
.cmp-price__cta{margin-top:auto;text-decoration:none;text-align:center;justify-content:center;padding:11px 20px}
body:not(.future) .cmp-price__col{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)}
body:not(.future) .cmp-price__tier{border-color:rgba(124,58,237,.12)!important}

/* ---- Roundup: Quick-Picks (Testsieger/Gratis/Preis-Leistung) ---- */
.cmp-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:44px}
.cmp-picks__card{display:flex;flex-direction:column;gap:11px;padding:18px;border-radius:16px;text-decoration:none;background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-top:3px solid var(--tc,#8b5cf6);transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
@media(hover:hover){.cmp-picks__card:hover{transform:translateY(-3px);box-shadow:0 12px 30px color-mix(in srgb,var(--tc,#8b5cf6) 20%,rgba(0,0,0,.25))}}
.cmp-picks__tag{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--tc,#8b5cf6)}
.cmp-picks__body{display:flex;align-items:center;gap:11px}
.cmp-picks__name{font-size:1.12rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.cmp-picks__meta{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.85rem}
body:not(.future) .cmp-picks__card{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)}

/* ---- Roundup: Übersichtstabelle "Auf einen Blick" ---- */
.cmp-table{margin-bottom:54px;border:1px solid var(--border);border-radius:16px;overflow:hidden;background:var(--glass,rgba(255,255,255,.02))}
.cmp-table__row{display:grid;grid-template-columns:44px 1.4fr .9fr .9fr 1.6fr;align-items:center;text-decoration:none;color:var(--text)}
.cmp-table__row:not(:last-child){border-bottom:1px solid var(--border)}
.cmp-table__row--head{background:color-mix(in srgb,var(--primary,#8b5cf6) 10%,transparent);font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cmp-table__row--head span{padding:14px 16px}
.cmp-table__row:not(.cmp-table__row--head)>span{padding:17px 16px;font-size:.92rem}
.cmp-table__row.is-win{background:color-mix(in srgb,#f59e0b 8%,transparent)}
@media(hover:hover){.cmp-table__row:not(.cmp-table__row--head):hover{background:color-mix(in srgb,var(--primary,#8b5cf6) 7%,transparent)}}
.cmp-table__rank{text-align:center;font-weight:800}
.cmp-table__tool{display:flex;align-items:center;gap:9px;font-weight:700}
.cmp-table__for{color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
body:not(.future) .cmp-table{background:#fff!important;border-color:rgba(124,58,237,.16)!important;box-shadow:0 4px 20px rgba(24,21,38,.06)}
body:not(.future) .cmp-table__row:not(:last-child){border-color:rgba(124,58,237,.1)!important}

/* ---- Roundup: Pros/Contra in Detail-Karten ---- */
.cmp-card__pc{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:12px 0 6px;position:relative;z-index:1}
.cmp-card__pros,.cmp-card__cons{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.cmp-card__pc li{display:flex;align-items:flex-start;gap:8px;font-size:.9rem;line-height:1.4;color:var(--text-2,var(--muted))}
.cmp-card__pc li span{flex-shrink:0;width:17px;height:17px;margin-top:1px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;font-size:.68rem;font-weight:800}
.cmp-card__pros li span{color:#10b981;background:rgba(16,185,129,.14)}
.cmp-card__cons li span{color:#ef7676;background:rgba(239,118,118,.14)}

@media(max-width:640px){
  .cmp-dueltable__row{grid-template-columns:1fr 1fr;grid-template-areas:'lbl lbl' 'va vb'}
  .cmp-dueltable__lbl{grid-area:lbl;padding-bottom:4px}
  .cmp-dueltable__row--head .cmp-dueltable__lbl{display:none}
  .cmp-dueltable__val{border-left:none;padding-top:6px}
  .cmp-verdict,.cmp-price{grid-template-columns:1fr}
  .cmp-card__pc{grid-template-columns:1fr}
  .cmp-table__row{grid-template-columns:32px 1.3fr .8fr;grid-template-areas:'r tool tool' 'r rate price'}
  .cmp-table__for,.cmp-table__row--head .cmp-table__for{display:none}
  .cmp-table__rank{grid-area:r}.cmp-table__tool{grid-area:tool}
}

/* ---- Tool-Seite: "Siehe auch"-Vergleichslinks (interne Verlinkung) ---- */
/* Inhaltsverzeichnis (Sidebar) — Sprungmarken zu den Content-Sektionen */
/* Sticky Kapitel-Leiste unterm Hero: klebt unter der Nav (top setzt JS live,
   Nav-Höhe ist dynamisch), z 39 = unter Nav (40). Rail seitlich wischbar
   (Mobile), Kanten weich ausmaskiert, Scrollbar versteckt. */
.td-chap{position:sticky;top:63px;z-index:39;background:rgba(255,255,255,.92);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 10px 26px rgba(17,24,39,.07);animation:tdchap-in .45s cubic-bezier(.22,1,.36,1)}
body.future .td-chap{background:rgba(8,6,16,.84);box-shadow:0 12px 32px rgba(0,0,0,.4)}
@keyframes tdchap-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Edle Gradient-Haarlinie als Unterkante statt harter Border */
.td-chap::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(167,139,250,.55) 25%,rgba(125,211,252,.4) 55%,rgba(167,139,250,.55) 80%,transparent 100%);pointer-events:none}
/* Periodischer Licht-Sweep: schmaler Schein wandert alle ~8s über die Leiste —
   wie Licht auf Glas, bewusst kaum wahrnehmbar */
.td-chap::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 42%,rgba(124,58,237,.05) 50%,transparent 58%);transform:translateX(-100%);animation:tdchap-sweep 8s ease-in-out 2.2s infinite}
body.future .td-chap::before{background:linear-gradient(105deg,transparent 42%,rgba(233,229,252,.07) 50%,transparent 58%)}
@keyframes tdchap-sweep{0%{transform:translateX(-100%)}26%{transform:translateX(100%)}100%{transform:translateX(100%)}}
.td-chap__rail{position:relative;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:9px max(20px,calc((100% - var(--maxw))/2 + 24px)) 9px;-webkit-mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);mask:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.td-chap__rail::-webkit-scrollbar{display:none}
/* Gleitende Aktiv-Pille: schwebt per Feder-Kurve zwischen den Kapiteln,
   Position/Maße setzt JS vom aktiven Chip. Liegt UNTER den Chips (z 0/1). */
.td-chap__ind{position:absolute;left:0;top:0;opacity:0;border-radius:999px;background:linear-gradient(160deg,#8b5cf6,#6d28d9 78%);border:1px solid rgba(196,181,253,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 16px rgba(124,58,237,.42),0 1px 4px rgba(0,0,0,.18);transition:transform .42s cubic-bezier(.3,1.35,.4,1),width .42s cubic-bezier(.3,1.35,.4,1),opacity .25s;pointer-events:none;animation:tdind-breathe 3.4s ease-in-out infinite alternate}
/* Aktiv-Pille atmet langsam — lebendig, ohne zu blinken */
@keyframes tdind-breathe{from{box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 16px rgba(124,58,237,.38),0 1px 4px rgba(0,0,0,.18)}to{box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 4px 26px rgba(124,58,237,.6),0 0 44px rgba(139,92,246,.28),0 1px 4px rgba(0,0,0,.18)}}
/* Inaktive Chips als dezente Glas-Pillen — vorher transparent und auf dunklem
   Grund kaum sichtbar; Hairline + Verlaufs-Füllung + Inset-Licht = sichtbar,
   ohne der aktiven Gleit-Pille die Show zu stehlen */
.td-chap__chip{position:relative;z-index:1;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;color:#4b5563;border:1px solid rgba(17,24,39,.1);background:rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 3px rgba(17,24,39,.05);transition:color .22s,background .18s,border-color .18s,box-shadow .18s,transform .18s cubic-bezier(.22,1,.36,1);white-space:nowrap;animation:tdchip-in .55s cubic-bezier(.22,1,.36,1) both}
/* Cascade-Einzug: Chips erscheinen nacheinander. translate/scale-Properties
   statt transform — kollidiert nicht mit dem Hover-translateY */
@keyframes tdchip-in{from{opacity:0;translate:0 8px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.td-chap__chip:nth-child(2){animation-delay:.04s}
.td-chap__chip:nth-child(3){animation-delay:.09s}
.td-chap__chip:nth-child(4){animation-delay:.14s}
.td-chap__chip:nth-child(5){animation-delay:.19s}
.td-chap__chip:nth-child(6){animation-delay:.24s}
.td-chap__chip:nth-child(7){animation-delay:.29s}
.td-chap__chip:nth-child(8){animation-delay:.34s}
.td-chap__chip:nth-child(9){animation-delay:.39s}
.td-chap__chip:nth-child(10){animation-delay:.44s}
.td-chap__chip:nth-child(11){animation-delay:.49s}
.td-chap__chip:hover{color:var(--text,#111);background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.22);transform:translateY(-1px)}
body.future .td-chap__chip{color:rgba(233,229,252,.85);background:linear-gradient(180deg,rgba(167,139,250,.1),rgba(167,139,250,.04));border-color:rgba(167,139,250,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 4px rgba(0,0,0,.3)}
body.future .td-chap__chip:hover{color:#fff;background:linear-gradient(180deg,rgba(167,139,250,.2),rgba(124,58,237,.12));border-color:rgba(167,139,250,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 12px rgba(124,58,237,.32)}
/* Aktiv: Chip selbst bleibt transparent — die Pille darunter trägt Farbe+Glow.
   body.future-Regeln haben höhere Spezifität, daher eigener Dark-Override. */
.td-chap__chip.is-active,body.future .td-chap__chip.is-active{color:#fff;background:transparent;border-color:transparent;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.td-chap__chip.is-active:hover,body.future .td-chap__chip.is-active:hover{transform:none;background:transparent;border-color:transparent;box-shadow:none}
.td-chap__ico{display:inline-flex;align-items:center;opacity:.7;transition:opacity .2s}
body.future .td-chap__ico{color:#c4b5fd}
.td-chap__chip:hover .td-chap__ico,.td-chap__chip.is-active .td-chap__ico{opacity:1}
@media(max-width:640px){.td-chap__chip{padding:6px 12px;font-size:12.5px}.td-chap__rail{gap:6px;padding-top:8px;padding-bottom:8px}}
@media (prefers-reduced-motion:reduce){.td-chap{animation:none}.td-chap__ind{transition:opacity .25s;animation:none}.td-chap__chip{animation:none}.td-chap::before{animation:none;transform:translateX(-100%)}}

/* Lesefortschritt: feine Linie an der Oberkante der Kapitel-Leiste.
   Gradient sitzt fix auf Viewport-Breite (100vw) und wird per width aufgedeckt;
   Funke = leuchtender Kopf am Balkenende, Sheen = wandernder Lichtstreif. */
.td-progress{position:absolute;top:0;left:0;right:0;height:8px;pointer-events:none;opacity:0;transition:opacity .35s ease}
.td-progress.is-visible{opacity:1}
.td-progress__bar{position:absolute;top:0;left:0;height:3px;width:0;border-radius:0 3px 3px 0;overflow:visible;background:linear-gradient(90deg,#4c1d95,#7c3aed 35%,#a78bfa 62%,#38bdf8 85%,#22d3ee) 0 0/100vw 100% no-repeat;box-shadow:0 0 10px rgba(124,58,237,.55),0 1px 16px rgba(34,211,238,.28)}
.td-progress__sheen{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.td-progress__sheen::after{content:'';position:absolute;top:0;bottom:0;width:72px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:tdp-sheen 4.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes tdp-sheen{0%{transform:translateX(0)}60%,100%{transform:translateX(calc(100vw + 160px))}}
.td-progress__spark{position:absolute;top:50%;right:-3px;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:radial-gradient(circle,#fff 0%,#c4b5fd 38%,rgba(124,58,237,0) 72%);filter:drop-shadow(0 0 7px rgba(167,139,250,.95)) drop-shadow(0 0 14px rgba(34,211,238,.5));transition:opacity .4s}
.td-progress.is-done .td-progress__spark{opacity:0}
.td-progress.is-done .td-progress__bar{animation:tdp-done .9s ease-out 1}
@keyframes tdp-done{0%{box-shadow:0 0 10px rgba(124,58,237,.55)}35%{box-shadow:0 0 22px rgba(34,211,238,.95),0 2px 30px rgba(167,139,250,.8)}100%{box-shadow:0 0 10px rgba(124,58,237,.55),0 1px 16px rgba(34,211,238,.28)}}
@media (prefers-reduced-motion:reduce){.td-progress__sheen::after{animation:none;display:none}.td-progress.is-done .td-progress__bar{animation:none}}
.tw-section{scroll-margin-top:90px}
.td-seealso{margin-top:16px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--glass,rgba(255,255,255,.02));display:flex;flex-direction:column;gap:9px}
.td-seealso__lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.td-seealso__link{color:var(--primary,#8b5cf6);font-weight:600;text-decoration:none;font-size:.92rem}
.td-seealso__link:hover{text-decoration:underline}
body:not(.future) .td-seealso__link{color:#7c3aed}

/* ---- Homepage: Tool-Vergleiche-Grid (Premium) ---- */
.cmpgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cmpgrid__tile{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;padding:22px;min-height:150px;border:1px solid var(--border);border-radius:18px;background:var(--glass,rgba(255,255,255,.02));text-decoration:none;transition:transform .25s cubic-bezier(.23,1,.32,1),border-color .25s ease,box-shadow .25s ease}
.cmpgrid__tile::before{content:"";position:absolute;top:0;left:22px;right:22px;height:2px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,transparent,var(--tc,#8b5cf6),transparent);opacity:.55}
.cmpgrid__glow{position:absolute;top:-45px;right:-45px;width:135px;height:135px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc,#8b5cf6) 26%,transparent),transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .cmpgrid__tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tc,#8b5cf6) 42%,var(--border));box-shadow:0 16px 42px color-mix(in srgb,var(--tc,#8b5cf6) 22%,rgba(0,0,0,.3))}
  .cmpgrid__tile:hover .cmpgrid__glow{opacity:1}
  .cmpgrid__tile:hover .cmpgrid__arrow{transform:translateX(4px)}
  .cmpgrid__tile:hover .cmpgrid__icon{transform:scale(1.06) rotate(-4deg)}
}
.cmpgrid__icon{position:relative;width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--tc,#8b5cf6);background:linear-gradient(145deg,color-mix(in srgb,var(--tc,#8b5cf6) 30%,transparent),color-mix(in srgb,var(--tc,#8b5cf6) 11%,transparent));border:1px solid color-mix(in srgb,var(--tc,#8b5cf6) 34%,transparent);box-shadow:inset 0 1px 0 color-mix(in srgb,var(--tc,#8b5cf6) 38%,transparent),0 5px 16px color-mix(in srgb,var(--tc,#8b5cf6) 20%,transparent);transition:transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.cmpgrid__icon svg{position:relative;z-index:1;width:25px;height:25px;stroke-width:2.1}
.cmpgrid__icon::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.22),transparent 60%);pointer-events:none}
/* "Weitere/Weniger Vergleiche"-Button: im Light-Mode dunkleres Lila (heller Text war auf Weiß unlesbar) */
body:not(.future) .cmpgrid__more-link{color:#6d28d9!important;border-color:rgba(124,58,237,.45)!important;background:rgba(124,58,237,.07)!important}
.cmpgrid__media{position:relative;margin:-22px -22px 6px;border-radius:18px 18px 0 0;overflow:hidden;aspect-ratio:16/10;display:block;background:color-mix(in srgb,var(--tc,#8b5cf6) 8%,transparent)}
.cmpgrid__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s cubic-bezier(.23,1,.32,1)}
@media(hover:hover){.cmpgrid__tile--img:hover .cmpgrid__img{transform:scale(1.04)}}
.cmpgrid__body{position:relative;display:flex;flex-direction:column;gap:3px}
.cmpgrid__name{font-weight:700;font-size:1.1rem;letter-spacing:-.015em;color:var(--text)}
.cmpgrid__count{font-size:.82rem;color:var(--muted)}
.cmpgrid__go{position:relative;font-size:.9rem;font-weight:600;color:var(--primary,#8b5cf6);margin-top:auto;display:inline-flex;align-items:center;gap:5px}
.cmpgrid__arrow{transition:transform .2s cubic-bezier(.23,1,.32,1);display:inline-block}
body:not(.future) .cmpgrid__go{color:#7c3aed}
@media(max-width:900px){.cmpgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cmpgrid{grid-template-columns:1fr}}

/* ---- Übersichtsseiten (Vergleiche / Ratgeber) — Kachel-Grid mit Bild ---- */
.ovhero{padding-bottom:8px}
.ovhero__sub{max-width:600px;margin:10px auto 0;text-align:center;font-size:1.05rem;line-height:1.6;color:var(--muted)}
.ov-empty{text-align:center;color:var(--muted);padding:40px 0;font-size:1rem}
/* Kündigungs-Helfer */
.kh{padding-top:48px}
.kh__head{max-width:640px;margin:0 auto 28px;text-align:center}
.kh__eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary,#a78bfa);margin-bottom:12px}
.kh__eyebrow .dot{width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.kh__title{font-size:clamp(30px,5vw,46px);font-weight:900;letter-spacing:-.03em;margin:0 0 12px}
.kh__sub{color:var(--muted);line-height:1.65;font-size:15.5px;margin:0}
.kh__picker{max-width:520px;margin:0 auto 26px;display:flex;flex-direction:column;gap:8px}
.kh__label{font-size:13px;font-weight:700;color:var(--muted)}
.kh__select{width:100%;padding:14px 16px;font-size:16px;font-family:inherit;color:var(--text);background:var(--glass-2,rgba(255,255,255,.04));border:1px solid var(--border);border-radius:13px;outline:none;cursor:pointer;transition:border-color .15s}
.kh__select:focus{border-color:var(--primary,#a78bfa)}
.kh__result{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px;animation:khIn .35s cubic-bezier(.22,1,.36,1)}
@keyframes khIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kh__card{background:var(--glass,rgba(255,255,255,.02));border:1px solid var(--border);border-radius:18px;padding:22px}
.kh__card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.kh__card h2{font-size:18px;font-weight:800;margin:0 0 14px}
.kh__card-head h2{margin:0}
.kh__copy{padding:8px 16px;font-size:13px;font-weight:700;font-family:inherit;color:var(--primary,#a78bfa);background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.28);border-radius:9px;cursor:pointer;transition:background .15s;flex-shrink:0}
.kh__copy:hover{background:rgba(124,58,237,.18)}
.kh__email{white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;line-height:1.6;color:var(--text);background:var(--glass-2,rgba(0,0,0,.15));border:1px solid var(--border);border-radius:12px;padding:16px;margin:0 0 12px}
.kh__hint,.kh__deadline{font-size:13px;color:var(--muted);line-height:1.6;margin:12px 0 0}
.kh__deadline{background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.22);border-radius:11px;padding:11px 14px}
.kh__steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:14.5px;line-height:1.55;color:var(--text)}
.kh__alt{display:flex;flex-direction:column;gap:4px;padding:18px 22px;background:linear-gradient(120deg,rgba(124,58,237,.14),rgba(124,58,237,.05));border:1px solid rgba(124,58,237,.28);border-radius:16px;text-decoration:none;transition:transform .15s,border-color .15s}
.kh__alt:hover{transform:translateY(-2px);border-color:rgba(124,58,237,.5)}
.kh__alt-lbl{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kh__alt-main{font-size:17px;font-weight:700;color:var(--text)}
.kh__alt-arrow{color:var(--primary,#a78bfa)}
@media(max-width:560px){.kh__email{font-size:12.5px}}
.ovgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ovtile{position:relative;overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:20px;background:var(--glass,rgba(255,255,255,.02));text-decoration:none;transition:transform .25s cubic-bezier(.23,1,.32,1),border-color .25s ease,box-shadow .25s ease}
.ovtile__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--tc,#8b5cf6) 14%,transparent),transparent 70%);display:flex;align-items:center;justify-content:center}
.ovtile__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s cubic-bezier(.23,1,.32,1)}
/* Dark/Light-Kachelbild-Auto-Wechsel: Dark ist Standard (body.future), Light-Variante nur ohne .future */
.tw-timg--light{display:none!important}
body:not(.future) .tw-timg--dark{display:none!important}
body:not(.future) .tw-timg--light{display:block!important}
.ovtile__icon{width:72px;height:72px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 22px color-mix(in srgb,var(--tc,#8b5cf6) 20%,transparent);transition:transform .25s cubic-bezier(.23,1,.32,1)}
.ovtile__body{position:relative;display:flex;flex-direction:column;gap:5px;padding:18px 20px 20px}
.ovtile__name{font-weight:700;font-size:1.12rem;letter-spacing:-.015em;color:var(--text);line-height:1.3}
.ovtile__meta{font-size:.85rem;color:var(--muted);line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ovtile__go{font-size:.9rem;font-weight:600;color:var(--primary,#8b5cf6);margin-top:8px;display:inline-flex;align-items:center;gap:5px}
.ovtile__arrow{transition:transform .2s cubic-bezier(.23,1,.32,1);display:inline-block}
body:not(.future) .ovtile__go{color:#7c3aed}
@media(hover:hover) and (pointer:fine){
  .ovtile:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--tc,#8b5cf6) 42%,var(--border));box-shadow:0 18px 46px color-mix(in srgb,var(--tc,#8b5cf6) 20%,rgba(0,0,0,.3))}
  .ovtile:hover .ovtile__img{transform:scale(1.05)}
  .ovtile:hover .ovtile__icon{transform:scale(1.08) rotate(-4deg)}
  .ovtile:hover .ovtile__arrow{transform:translateX(4px)}
}
@media(max-width:900px){.ovgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ovgrid{grid-template-columns:1fr}}

/* ---- Getestet-von Author-Card (Tool-Seiten-Sidebar) ---- */
.td-author{margin-top:16px;padding:16px;border-radius:16px;border:1px solid var(--border,rgba(167,139,250,.16));background:linear-gradient(150deg,rgba(124,58,237,.10),rgba(124,58,237,.02) 60%,transparent)}
body:not(.future) .td-author{background:linear-gradient(150deg,rgba(124,58,237,.06),rgba(124,58,237,.015) 60%,transparent);border-color:rgba(124,58,237,.16)}
.td-author__lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:12px}
.td-author__head{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text)}
.td-author__head:hover .td-author__avatar{transform:scale(1.05)}
.td-author__avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#7c3aed,#a78bfa);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0;box-shadow:0 0 0 2px rgba(167,139,250,.28),0 6px 16px rgba(124,58,237,.30);transition:transform .18s ease}
.td-author__id{display:flex;flex-direction:column;gap:1px;min-width:0}
.td-author__id strong{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.td-author__id span{font-size:11.5px;color:var(--muted)}
.td-author__bio{font-size:12.5px;line-height:1.6;color:var(--muted);margin:11px 0 0}
.td-author__more{display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;color:var(--primary,#a78bfa);text-decoration:none}
.td-author__more:hover{text-decoration:underline}
/* Tablet/Mobile: Sidebar wird full-width — Karte horizontal ausbalancieren */
@media(max-width:860px){
  .td-author{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:16px 18px}
  .td-author__lbl{width:100%;margin-bottom:8px}
  .td-author__bio{flex:1;min-width:230px;margin:0}
  .td-author__more{margin-top:2px;width:100%}
}

/* ── Task-Seiten Live-Block: Tool-Empfehlungs-Karten ([toolwahl_task]) ── */
.tw-task-rec{margin:34px 0}
.tw-task-rec .twp-h2{margin-bottom:16px}
.tw-task-rec__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:stretch}
.tw-task-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px 16px 16px;border:1px solid var(--border);border-radius:14px;background:var(--card,rgba(255,255,255,.03))}
.tw-task-card--win{border-color:var(--primary,#7c3aed);box-shadow:0 0 0 1px var(--primary,#7c3aed),0 8px 28px rgba(124,58,237,.14)}
.tw-task-card__badge{position:absolute;top:-11px;left:14px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px;background:var(--primary,#7c3aed);color:#fff;letter-spacing:.02em}
.tw-task-card__head{display:flex;align-items:center;gap:12px}
.tw-task-card__name{font-weight:700;font-size:15.5px}
.tw-task-card__meta{font-size:12px;opacity:.75;margin-top:2px}
.tw-task-card__for{font-size:13px;line-height:1.5;opacity:.85;margin:0}
.tw-task-card__pros{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.tw-task-card__pros li{padding-left:20px;position:relative;line-height:1.45}
.tw-task-card__pros li::before{content:"✓";position:absolute;left:0;color:#4ade80;font-weight:700}
.tw-task-card__actions{margin-top:auto;display:flex;flex-direction:column;gap:7px;padding-top:6px}
.tw-task-card__cta{display:block;text-align:center;font-weight:700;font-size:13.5px;padding:10px 14px;border-radius:10px;background:var(--primary,#7c3aed);color:#fff !important;text-decoration:none;transition:transform .14s ease,box-shadow .14s ease}
.tw-task-card__cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,.35)}
.tw-task-card__test{display:block;text-align:center;font-size:12.5px;opacity:.8;text-decoration:underline;color:inherit}
.tw-task-rec .td-aff{display:block;margin-top:10px;text-align:center}
.tw-task-tools__ssr{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:6px}
@media (max-width:560px){.tw-task-rec__grid{grid-template-columns:1fr}}

/* ── CRO: Kauf-CTA nach dem Preisblock (Tool-Seiten, JS-injiziert) ── */
.td-price-cta{margin:22px 0 8px;text-align:center}
.td-price-cta__btn{display:inline-block;font-weight:700;font-size:15px;padding:13px 30px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff !important;text-decoration:none;box-shadow:0 6px 22px rgba(124,58,237,.28);transition:transform .14s ease,box-shadow .14s ease}
.td-price-cta__btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(124,58,237,.42)}
.td-price-cta .td-aff{display:block;margin-top:8px}

/* ── CRO: Sticky-Kauf-Leiste (nur Mobile) ── */
.td-sticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(12,10,24,.92);backdrop-filter:blur(14px);border-top:1px solid rgba(124,58,237,.35);transform:translateY(110%);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.td-sticky.is-on{transform:translateY(0)}
.td-sticky__info{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.td-sticky__info b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.td-sticky__info span{font-size:11px;opacity:.65}
.td-sticky__btn{flex-shrink:0;font-weight:700;font-size:13px;padding:10px 16px;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff !important;text-decoration:none}
.td-sticky__x{flex-shrink:0;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer;opacity:.7}
@media (max-width:860px){.td-sticky{display:flex}}
body:not(.future) .td-sticky{background:rgba(255,255,255,.94);border-top-color:rgba(124,58,237,.25)}

/* ── Duell-Vertiefung: redaktionelle Sektionen ── */
.cmp-ed__intro{font-size:16.5px;line-height:1.7;max-width:760px;margin:52px auto 46px;text-align:center;opacity:.92}
.cmp-ed__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:10px 0 56px}
.cmp-ed__card{padding:20px 20px 18px;border:1px solid var(--border);border-radius:14px;background:var(--card,rgba(255,255,255,.03))}
.cmp-ed__card h3{margin:0 0 8px;font-size:15.5px}
.cmp-ed__card p{margin:0;font-size:14px;line-height:1.65;opacity:.88}
.cmp-ed__types{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:10px 0 56px}
.cmp-ed__type{padding:16px;border:1px solid var(--border);border-left:3px solid var(--tc);border-radius:12px;background:var(--card,rgba(255,255,255,.03))}
.cmp-ed__type-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.cmp-ed__type-label{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;opacity:.65}
.cmp-ed__type-head b{font-size:14px}
.cmp-ed__type p{margin:0;font-size:13px;line-height:1.6;opacity:.85}
@media (max-width:560px){.cmp-ed__grid,.cmp-ed__types{grid-template-columns:1fr}}

/* ── SpecularButton (React Bits): WebGL-Licht-Rand folgt der Maus ── */
.specular-button{--sb-radius:18px;--sb-tint:#ffffff;--sb-tint-opacity:0;--sb-blur:0px;--sb-text-color:#f5f5f5;
  position:relative;display:inline-flex;align-items:center;justify-content:center;border:none;margin:0;
  font-family:inherit;font-weight:500;letter-spacing:.01em;line-height:1;color:var(--sb-text-color);
  background:color-mix(in srgb,var(--sb-tint) calc(var(--sb-tint-opacity)*100%),transparent);
  border-radius:var(--sb-radius);backdrop-filter:blur(var(--sb-blur));-webkit-backdrop-filter:blur(var(--sb-blur));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 24px rgba(0,0,0,.25);
  cursor:pointer;outline:none;transition:transform .15s ease}
.specular-button:active{transform:scale(.97)}
.specular-button:focus-visible{outline:2px solid color-mix(in srgb,var(--sb-text-color) 60%,transparent);outline-offset:3px}
.specular-button:disabled{opacity:.55;cursor:default}
.specular-button:disabled:active{transform:none}
.specular-button--sm{font-size:.85rem;padding:10px 22px}
.specular-button--md{font-size:1rem;padding:14px 30px}
.specular-button--lg{font-size:1.15rem;padding:18px 40px}
.specular-button__fx{position:absolute;inset:-20px;pointer-events:none;z-index:1}
.specular-button__fx canvas{display:block;width:100%;height:100%}
.specular-button__label{position:relative;z-index:2}
/* Marken-CTA: lila Verlauf wie der bisherige FluidBtn, Licht-Rand obendrauf */
.specular-button--brand{height:58px;padding:0 46px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;
  background:linear-gradient(110deg,#8b5cf6,#7c3aed 58%,#6d28d9);
  box-shadow:0 4px 16px rgba(124,58,237,.30),inset 0 1px 0 rgba(255,255,255,.22)}
@media(hover:hover) and (pointer:fine){
  .specular-button--brand:hover{box-shadow:0 8px 26px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.26)}
}
body:not(.future) .specular-button--brand{box-shadow:0 6px 20px rgba(124,58,237,.35),inset 0 1px 0 rgba(255,255,255,.25)}

/* ── Hero-Suche: große Pill + Beispiel-Chips (zeigen, WAS man suchen kann) ── */
.hero__search{display:flex;flex-direction:column;align-items:center;gap:13px;margin:26px auto 6px;max-width:560px;width:100%}
/* Wrapper trägt die umlaufende Licht-Border (tw-eborder) — Premium-Sprache der CTAs */
.hero__search-wrap{display:block;width:100%;max-width:520px;border-radius:999px}
.hero__search-pill{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;width:100%;height:54px;padding:0 20px;border-radius:999px;
  font:inherit;font-size:15px;color:var(--muted);text-align:left;cursor:pointer;
  border:1px solid rgba(167,139,250,.42);
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 45%),linear-gradient(140deg,rgba(139,92,246,.14),rgba(34,211,238,.05) 80%),rgba(13,9,26,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 14px 40px rgba(9,6,20,.55),0 0 30px rgba(124,58,237,.14);
  transition:border-color .18s ease,box-shadow .18s ease,color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.hero__search-pill:active{transform:scale(.985)}
.hero__search-pill:focus-visible{outline:2px solid var(--primary);outline-offset:3px}
.hero__search-pill>svg{flex-shrink:0;color:#a78bfa;filter:drop-shadow(0 0 6px rgba(167,139,250,.45))}
.hero__search-pill>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.85;flex:1}
.hero__search-kbd{flex-shrink:0;font:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;color:inherit;opacity:.75;
  padding:3px 9px;border-radius:7px;border:1px solid rgba(167,139,250,.4);
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.3);display:none}
@media(min-width:760px){.hero__search-kbd{display:inline-block}}
.hero__search-chips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.hero__search-chips-label{font-size:12px;font-weight:600;color:var(--muted);opacity:.7;margin-right:2px}
.hero__search-chip{font:inherit;font-size:12.5px;font-weight:600;color:#d6c9ff;cursor:pointer;padding:6px 13px;border-radius:999px;
  border:1px solid rgba(167,139,250,.36);
  background:linear-gradient(180deg,rgba(139,92,246,.16),rgba(124,58,237,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s cubic-bezier(.23,1,.32,1)}
.hero__search-chip:active{transform:scale(.95)}
.hero__search-chip:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
@media(hover:hover) and (pointer:fine){
  .hero__search-pill:hover{border-color:rgba(167,139,250,.7);color:var(--text);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 16px 44px rgba(9,6,20,.6),0 0 40px rgba(124,58,237,.26)}
  .hero__search-chip:hover{background:linear-gradient(180deg,rgba(139,92,246,.26),rgba(124,58,237,.13));border-color:rgba(167,139,250,.6);color:#ece7ff;transform:translateY(-1px)}
}
body:not(.future) .hero__search-pill{background:linear-gradient(180deg,#fff,#faf9ff);border-color:rgba(124,58,237,.28);box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(30,20,70,.10),0 0 24px rgba(124,58,237,.06)}
body:not(.future) .hero__search-pill>svg{filter:none}
body:not(.future) .hero__search-kbd{border-color:rgba(124,58,237,.24);background:linear-gradient(180deg,#faf9ff,#f1eefb);box-shadow:0 1px 2px rgba(30,20,70,.08)}
body:not(.future) .hero__search-chip{color:#6d28d9;background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.22)}
@media(hover:hover) and (pointer:fine){
  body:not(.future) .hero__search-pill:hover{border-color:var(--primary);box-shadow:inset 0 1px 0 #fff,0 12px 34px rgba(30,20,70,.14),0 0 30px rgba(124,58,237,.1)}
  body:not(.future) .hero__search-chip:hover{background:rgba(124,58,237,.13);color:#5b21b6}
}
@media(max-width:560px){.hero__search{margin-top:20px}.hero__search-pill{height:48px;font-size:13.5px;padding:0 17px}.hero__search-chips{gap:6px}.hero__search-chips-label{display:none}.hero__search-chip{font-size:11.5px;padding:5px 11px}}

/* ── Header-Suche (Desktop/Tablet/Mobile identisches Overlay) ── */
/* Desktop: offenes Pill-Suchfeld · Tablet: nur Lupe · Mobile: über Burger-Menü */
.nav__search{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px;border-radius:999px;
  border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--muted);cursor:pointer;
  transition:all .18s;flex-shrink:0;font:inherit;min-width:230px;text-align:left}
.nav__search-txt{font-size:12.5px;font-weight:500;color:inherit;opacity:.75;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}
.nav__search:hover{color:var(--primary);border-color:var(--primary);background:rgba(124,58,237,.07);box-shadow:0 0 0 3px rgba(124,58,237,.07)}
body.future .nav__search{border-color:rgba(167,139,250,.28);background:rgba(255,255,255,.045);color:#c7c5e0}
body.future .nav__search:hover{color:#e2ddf6;border-color:rgba(167,139,250,.6);background:rgba(124,58,237,.14);box-shadow:0 0 18px rgba(124,58,237,.18)}
.nav__search-txt--short{display:none;font-size:12.5px;font-weight:500;color:inherit;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;text-align:left}
/* Startseite: Pill unsichtbar solange die Hero-Suche im Viewport ist (Platz bleibt — kein Layout-Sprung) */
.nav__search--hidden{opacity:0;visibility:hidden;pointer-events:none}
.nav__search{transition:opacity .25s ease,visibility .25s ease,border-color .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}
/* Tipp-Cursor in der Header-Pill */
.nav__search-caret{display:inline-block;width:1.5px;height:.95em;background:currentColor;margin-left:1px;vertical-align:-2px;animation:tw-caret 1s step-end infinite;font-style:normal}
@keyframes tw-caret{0%,100%{opacity:1}50%{opacity:0}}
/* Die Lupe „sucht" mit: neigt sich alle paar Sekunden kurz zur Seite */
.nav__search>svg{animation:tw-peek 7s ease-in-out infinite;transform-origin:60% 60%}
@keyframes tw-peek{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-14deg) scale(1.08)}93%{transform:rotate(9deg)}96%{transform:rotate(-4deg)}}
/* Glanz-Sweep über die Pill — alle paar Sekunden ein dezenter Lichtstreif */
.nav__search{position:relative;overflow:hidden}
.nav__search::before{content:'';position:absolute;top:0;bottom:0;width:36px;left:-50px;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(167,139,250,.28),transparent);
  animation:tw-shine 6.5s ease-in-out infinite}
@keyframes tw-shine{0%,72%{left:-50px}88%,100%{left:calc(100% + 20px)}}
/* Such-Overlay: federnder Einstieg + gestaffelt einfliegende Treffer */
.twsearch{animation:tw-fade .18s ease-out}
.twsearch__box{animation:tw-pop .32s cubic-bezier(.22,1.4,.36,1)}
@keyframes tw-fade{from{opacity:0}to{opacity:1}}
@keyframes tw-pop{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.twsearch__item{animation:tw-item-in .28s cubic-bezier(.22,1,.36,1) backwards}
@keyframes tw-item-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .nav__search::before,.nav__search-caret,.nav__search>svg{animation:none}
  .twsearch,.twsearch__box,.twsearch__item{animation:none}
}
@media(max-width:1120px){.nav__search{min-width:0;width:38px;padding:0;justify-content:center}.nav__search-txt{display:none}}
/* Mobil & Tablet (sobald die Nav-Links im Burger stecken): Suche als offenes,
   flexibles Feld in der Header-Zeile — füllt den verfügbaren Platz auf jeder Gerätebreite */
@media(max-width:980px){
  .nav__search{display:inline-flex;flex:1;min-width:0;width:auto;height:36px;padding:0 12px;justify-content:flex-start}
  .nav__search-txt{display:none}
  .nav__search-txt--short{display:block}
  .nav__actions{flex:1;min-width:0;gap:8px}
  .nav__divider{display:none}
}
.twsearch__ico img{width:100%;height:100%;border-radius:inherit;object-fit:contain;background:#fff;display:block;padding:3px}
.twsearch{position:fixed;inset:0;z-index:120;background:rgba(8,6,16,.66);backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;padding:max(10vh,64px) 16px 16px;animation:tws-in .14s ease}
@keyframes tws-in{from{opacity:0}to{opacity:1}}
.twsearch__box{width:min(600px,100%);background:linear-gradient(180deg,#fff,#fbfaff);border:1px solid rgba(124,58,237,.25);border-radius:18px;
  box-shadow:0 28px 90px rgba(0,0,0,.45);overflow:hidden;animation:tws-pop .18s cubic-bezier(.22,1,.36,1)}
@keyframes tws-pop{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}
body.future .twsearch__box{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 120px),#0e0c1c;border-color:rgba(167,139,250,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 80px rgba(0,0,0,.6),0 0 40px rgba(124,58,237,.12)}
.twsearch__row{display:flex;align-items:center;gap:12px;padding:16px 18px;color:var(--primary)}
.twsearch__row input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:16px;font-family:inherit;color:inherit}
body.future .twsearch__row input{color:#efeaff}
body:not(.future) .twsearch__row input{color:#1a1230}
.twsearch__row input::placeholder{color:rgba(120,113,160,.55)}
.twsearch__close{border:none;background:rgba(124,58,237,.08);color:inherit;width:30px;height:30px;border-radius:9px;cursor:pointer;font-size:13px;flex-shrink:0}
.twsearch__list{border-top:1px solid rgba(124,58,237,.12);max-height:min(52vh,420px);overflow-y:auto;padding:6px}
.twsearch__item{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px;text-decoration:none;transition:background .12s ease}
.twsearch__item:hover{background:linear-gradient(120deg,rgba(124,58,237,.13),rgba(124,58,237,.05))}
.twsearch__ico{font-size:16px;flex-shrink:0;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#fff;border:1px solid rgba(124,58,237,.16);box-shadow:0 2px 6px rgba(30,20,70,.08)}
body.future .twsearch__ico{border-color:rgba(167,139,250,.28);box-shadow:0 2px 8px rgba(0,0,0,.35)}
/* Duell-/Ratgeber-Kachelbilder sind 16:10-quer — breites Thumb statt gequetschtem Quadrat */
.twsearch__ico--wide{width:58px;height:36px;border-radius:8px;background:#17102f}
.twsearch__ico--wide img{object-fit:cover;padding:0;background:transparent}
/* Pfeil erscheint beim Hover — sonst unsichtbar, kein Platzverlust */
.twsearch__go{flex-shrink:0;width:0;overflow:hidden;font-size:15px;font-weight:700;color:#a78bfa;opacity:0;transform:translateX(-4px);
  transition:opacity .15s ease,transform .15s cubic-bezier(.23,1,.32,1)}
.twsearch__item:hover .twsearch__go{width:auto;opacity:1;transform:none}
.twsearch__label{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:#241a3f;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.twsearch__label em{font-style:normal;font-size:11px;font-weight:500;color:rgba(120,113,160,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.future .twsearch__label{color:#eae6fb}
body.future .twsearch__label em{color:rgba(190,185,220,.55)}
.twsearch__type{flex-shrink:0;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary);
  background:rgba(124,58,237,.09);border:1px solid rgba(124,58,237,.2);border-radius:999px;padding:3px 9px}
.twsearch__empty,.twsearch__hint{padding:20px 18px;font-size:12.5px;color:rgba(120,113,160,.8)}
body.future .twsearch__empty,body.future .twsearch__hint{color:rgba(190,185,220,.55)}
.twsearch__hint{border-top:1px solid rgba(124,58,237,.1);font-size:11px}
@media(max-width:560px){.twsearch{padding:12px}.twsearch__box{border-radius:14px}.twsearch__row{padding:13px 14px}.twsearch__row input{font-size:16px}}

/* ── Command-Center: Split-View (Liste + Detail-Panel) ab 900px ── */
.twsearch__item.is-act{background:linear-gradient(120deg,rgba(124,58,237,.16),rgba(124,58,237,.06))}
.twsearch__item.is-act .twsearch__go{width:auto;opacity:1;transform:none}
.twsearch__rate{flex-shrink:0;font-size:11.5px;font-weight:800;color:#a78bfa;white-space:nowrap}
body:not(.future) .twsearch__rate{color:#6d28d9}
.twsearch__panel{display:none}
.twsearch__foot{display:none}
@media(min-width:900px){
  .twsearch__box{width:min(880px,94vw)}
  .twsearch__body{display:flex;align-items:stretch}
  .twsearch__body .twsearch__list{flex:0 0 46%;border-right:1px solid rgba(124,58,237,.12);max-height:min(56vh,460px);
    scrollbar-width:thin;scrollbar-color:rgba(139,92,246,.35) transparent}
  .twsearch__body .twsearch__list::-webkit-scrollbar{width:6px}
  .twsearch__body .twsearch__list::-webkit-scrollbar-thumb{background:rgba(139,92,246,.35);border-radius:99px}
  .twsearch__body .twsearch__list::-webkit-scrollbar-track{background:transparent}
  /* Fade am Listenboden als Scroll-Hinweis — sticky, wandert beim Scrollen mit */
  .twsearch__body .twsearch__list::after{content:'';position:sticky;bottom:-6px;display:block;height:26px;margin-top:-26px;pointer-events:none;
    background:linear-gradient(transparent,#fff)}
  body.future .twsearch__body .twsearch__list::after{background:linear-gradient(transparent,#0e0c1c)}
  body.future .twsearch__body .twsearch__list{border-right-color:rgba(167,139,250,.14)}
  .twsearch__panel{display:flex;flex:1;padding:22px 24px;max-height:min(56vh,460px);overflow-y:auto}
  .twsearch__panel-in{display:flex;flex-direction:column;gap:12px;align-items:flex-start;animation:twp-in .16s ease-out;width:100%;min-height:100%}
  @keyframes twp-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .twsearch__pico{width:72px;height:72px;border-radius:16px;background:#fff;border:1px solid rgba(124,58,237,.18);
    box-shadow:0 6px 18px rgba(30,20,70,.12);display:flex;align-items:center;justify-content:center;overflow:hidden}
  .twsearch__pico img{width:100%;height:100%;object-fit:contain;padding:8px}
  .twsearch__pimg{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid rgba(167,139,250,.25);
    box-shadow:0 10px 26px rgba(9,6,20,.35)}
  .twsearch__ptitle{font-size:19px;font-weight:800;letter-spacing:-.015em;color:#241a3f;line-height:1.25}
  body.future .twsearch__ptitle{color:#f1edff}
  .twsearch__pstars{display:flex;align-items:center;font-size:15px;letter-spacing:1px}
  .twsearch__pstars-track{position:relative;color:rgba(120,113,160,.35);white-space:nowrap}
  .twsearch__pstars-fill{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#fbbf24}
  .twsearch__pstars em{font-style:normal;font-size:12.5px;font-weight:700;color:rgba(120,113,160,.9);margin-left:9px;letter-spacing:0}
  body.future .twsearch__pstars em{color:rgba(190,185,220,.75)}
  .twsearch__pbest{font-size:12.5px;line-height:1.55;color:#4b4463;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .twsearch__pbest span{display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a78bfa;margin-bottom:3px}
  body.future .twsearch__pbest{color:#b6b0d4}
  .twsearch__pdesc{margin:0;font-size:13.5px;line-height:1.6;color:#4b4463;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  body.future .twsearch__pdesc{color:#b6b0d4}
  .twsearch__pbadges{display:flex;gap:7px;flex-wrap:wrap}
  .twsearch__pbadge{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--primary);background:rgba(124,58,237,.09);
    border:1px solid rgba(124,58,237,.2);border-radius:999px;padding:3px 10px}
  body.future .twsearch__pbadge{color:#c4b5fd;border-color:rgba(167,139,250,.3);background:rgba(139,92,246,.12)}
  .twsearch__pcta{margin-top:auto;flex-shrink:0;display:inline-flex;align-items:center;gap:7px;padding:11px 22px;border-radius:11px;
    font-size:14px;font-weight:700;text-decoration:none;color:#fff;
    background:linear-gradient(110deg,#8b5cf6,#7c3aed 58%,#6d28d9);
    box-shadow:0 4px 14px rgba(124,58,237,.3),inset 0 1px 0 rgba(255,255,255,.22);
    transition:box-shadow .15s ease,transform .15s cubic-bezier(.23,1,.32,1)}
  .twsearch__pcta:hover{box-shadow:0 8px 22px rgba(124,58,237,.45),inset 0 1px 0 rgba(255,255,255,.26)}
  .twsearch__pcta:active{transform:scale(.97)}
  .twsearch__foot{display:flex;align-items:center;gap:6px;justify-content:center;padding:9px;border-top:1px solid rgba(124,58,237,.12);
    font-size:11px;color:rgba(96,89,134,.95)}
  body.future .twsearch__foot{border-top-color:rgba(167,139,250,.14);color:rgba(190,185,220,.7)}
  .twsearch__foot kbd{font-family:inherit;font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;
    border:1px solid rgba(124,58,237,.25);background:rgba(124,58,237,.06)}
  body.future .twsearch__foot kbd{border-color:rgba(167,139,250,.3);background:rgba(139,92,246,.1)}
}
@media(prefers-reduced-motion:reduce){.twsearch__panel-in{animation:none}}

/* Kleine Bereiche als kompakte Chips unter dem Kategorien-Grid */
.cat-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:18px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--text);
  background:rgba(255,255,255,.02);border:1px solid var(--border);transition:all .16s}
.cat-chip:hover{border-color:var(--cat-col,#7c3aed);background:color-mix(in srgb,var(--cat-col,#7c3aed) 10%,transparent);transform:translateY(-1px)}
.cat-chip__ico{display:inline-flex;align-items:center}
.cat-chip__ico svg{width:15px;height:15px}
.cat-chip__n{font-size:10.5px;font-weight:800;color:var(--cat-col,#7c3aed);background:color-mix(in srgb,var(--cat-col,#7c3aed) 14%,transparent);border-radius:999px;padding:1px 7px}

/* Gemeinsamer "Mehr ansehen"-Button: Hover-Lift + Glow + Pfeil-Slide */
.tw-morebtn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(139,92,246,.35);background:rgba(139,92,246,.08);color:#c4b5fd;
  font:inherit;font-weight:600;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .2s cubic-bezier(.22,1,.36,1),box-shadow .2s,border-color .2s,background .2s}
.tw-morebtn::after{content:'';position:absolute;inset:0;left:-100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);transition:left .45s}
.tw-morebtn:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.7);
  background:rgba(139,92,246,.16);box-shadow:0 8px 28px rgba(124,58,237,.3)}
.tw-morebtn:hover::after{left:100%}
.tw-morebtn:active{transform:translateY(0)}
.tw-morebtn__arrow{display:inline-block;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.tw-morebtn:hover .tw-morebtn__arrow{transform:translateX(4px)}
body:not(.future) .tw-morebtn{color:#6d28d9;border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.07)}
body:not(.future) .tw-morebtn:hover{background:rgba(124,58,237,.13);box-shadow:0 8px 24px rgba(124,58,237,.22)}

/* Trust-Band Light Mode: dunkle Farbvarianten (helles Cyan/Gelb auf Weiß war unlesbar) */
body:not(.future) .trustband__card{border-top-color:var(--tb-col-l,var(--tb-col));background:#fff;box-shadow:0 2px 12px rgba(26,18,48,.05)}
body:not(.future) .trustband__big{color:var(--tb-col-l,var(--tb-col))}
body:not(.future) .trustband__card:hover{border-color:var(--tb-col-l,var(--tb-col));box-shadow:0 10px 28px rgba(26,18,48,.12)}

/* Such-Vorschläge im Leer-Zustand */
.twsearch__group{padding:10px 14px 5px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(120,113,160,.6)}
body.future .twsearch__group{color:rgba(190,185,220,.45)}
.twsearch__chips{display:flex;flex-wrap:wrap;gap:7px;padding:4px 14px 14px}
.twsearch__chip{border:1px solid rgba(124,58,237,.25);background:rgba(124,58,237,.06);color:var(--primary);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .14s}
.twsearch__chip:hover{background:rgba(124,58,237,.14);border-color:rgba(124,58,237,.5);transform:translateY(-1px)}
body.future .twsearch__chip{color:#c4b5fd}

/* Footer Arc Reactor — identisch zum Dashboard-Sidebar-Orb */
.footer__badge--orb{display:inline-flex;align-items:center;gap:11px}
.ft-arc-r1{animation:ft-arc 5s linear infinite;transform-origin:15px 15px}
.ft-arc-r2{animation:ft-arc-rev 8s linear infinite;transform-origin:15px 15px}
.ft-arc-ping{animation:ft-ping 2.2s ease-out infinite;transform-origin:15px 15px}
@keyframes ft-arc{to{transform:rotate(360deg)}}
@keyframes ft-arc-rev{to{transform:rotate(-360deg)}}
@keyframes ft-ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@media (prefers-reduced-motion: reduce){.ft-arc-r1,.ft-arc-r2,.ft-arc-ping{animation:none}}

/* Frische Anleitungen (Homepage) */
.fresh-guides{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fresh-guide{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;text-decoration:none;
  background:rgba(255,255,255,.02);border:1px solid var(--border);transition:transform .2s,box-shadow .2s,border-color .2s}
.fresh-guide:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5);box-shadow:0 12px 32px rgba(124,58,237,.18)}
.fresh-guide__media{aspect-ratio:16/9;background:rgba(124,58,237,.08);display:flex;align-items:center;justify-content:center;overflow:hidden}
.fresh-guide__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.fresh-guide:hover .fresh-guide__media img{transform:scale(1.04)}
.fresh-guide__icon{font-size:34px}
.fresh-guide__name{padding:13px 15px 4px;font-size:14.5px;font-weight:700;color:var(--text);line-height:1.4}
.fresh-guide__go{padding:0 15px 14px;font-size:12px;font-weight:600;color:var(--primary)}
@media(max-width:900px){.fresh-guides{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fresh-guides{grid-template-columns:1fr}}

/* ============================================================
   Such-Overlay Premium-Polish (überschreibt Basis via Kaskade)
   ============================================================ */
/* Backdrop: tieferer Blur + violetter Schimmer von oben */
.twsearch{background:radial-gradient(60% 40% at 50% 0%, rgba(124,58,237,.16), transparent 70%), rgba(8,6,16,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
/* Box: Gradient-Rahmen + tiefer Glow + Lichtkante oben */
.twsearch__box{position:relative;border:1px solid transparent;background-clip:padding-box;
  box-shadow:0 34px 110px rgba(0,0,0,.55), 0 0 0 1px rgba(167,139,250,.22), 0 0 60px rgba(124,58,237,.18)}
.twsearch__box::before{content:'';position:absolute;inset:0;border-radius:18px;padding:1.5px;pointer-events:none;
  background:linear-gradient(135deg, rgba(167,139,250,.65), rgba(6,182,212,.35) 40%, rgba(124,58,237,.15) 70%, rgba(167,139,250,.5));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
/* Suchzeile: Lupe im Gradient-Chip, größerer Input, animierte Fokus-Linie */
.twsearch__row{padding:18px 20px;position:relative}
.twsearch__row>svg{width:34px;height:34px;padding:8px;border-radius:11px;flex-shrink:0;color:#fff;
  background:linear-gradient(135deg,#7c3aed,#6d28d9 60%,#0ea5e9 160%);box-shadow:0 4px 14px rgba(124,58,237,.35)}
.twsearch__row::after{content:'';position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#7c3aed,#a78bfa,#06b6d4,#7c3aed);background-size:220% 100%;
  opacity:0;transition:opacity .25s;animation:tws-flow 3.2s linear infinite}
.twsearch__row:focus-within::after{opacity:.75}
@keyframes tws-flow{to{background-position:220% 0}}
.twsearch__row input{font-size:17px;font-weight:500}
/* Treffer: Hover mit Verlauf, sanftem Einrücken + Pfeil */
.twsearch__item{position:relative;transition:background .16s, transform .16s;border:1px solid transparent}
.twsearch__item:hover{background:linear-gradient(90deg, rgba(124,58,237,.13), rgba(6,182,212,.05));border-color:rgba(167,139,250,.18);transform:translateX(3px)}
.twsearch__item::after{content:'→';position:absolute;right:12px;top:50%;transform:translate(-6px,-50%);opacity:0;
  font-weight:800;color:var(--primary);transition:opacity .16s, transform .16s;pointer-events:none}
.twsearch__item:hover::after{opacity:.8;transform:translate(0,-50%)}
.twsearch__item:hover .twsearch__type{opacity:0}
.twsearch__ico img{box-shadow:0 0 0 1.5px rgba(167,139,250,.25), 0 2px 8px rgba(0,0,0,.25)}
/* Typ-Badges: eigene Farbwelt pro Inhaltstyp */
.twsearch__type{transition:opacity .16s}
.twsearch__type--duell{color:#fb923c;background:rgba(251,146,60,.1);border-color:rgba(251,146,60,.3)}
.twsearch__type--ratgeber{color:#34d399;background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.3)}
.twsearch__type--vergleich{color:#fbbf24;background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.3)}
/* Oft-gesucht-Chips: Lift + Glow beim Hover, gestaffeltes Erscheinen */
.twsearch__chip{transition:transform .16s, box-shadow .16s, border-color .16s, background .16s;animation:tw-item-in .3s cubic-bezier(.22,1,.36,1) backwards}
.twsearch__chips .twsearch__chip:nth-child(1){animation-delay:.04s}
.twsearch__chips .twsearch__chip:nth-child(2){animation-delay:.08s}
.twsearch__chips .twsearch__chip:nth-child(3){animation-delay:.12s}
.twsearch__chips .twsearch__chip:nth-child(4){animation-delay:.16s}
.twsearch__chips .twsearch__chip:nth-child(5){animation-delay:.2s}
.twsearch__chip:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.55);box-shadow:0 6px 18px rgba(124,58,237,.22);background:rgba(124,58,237,.12)}
/* Dezente Scrollbar in der Trefferliste */
.twsearch__list::-webkit-scrollbar{width:8px}
.twsearch__list::-webkit-scrollbar-thumb{background:rgba(124,58,237,.25);border-radius:4px}
.twsearch__list::-webkit-scrollbar-track{background:transparent}
@media(prefers-reduced-motion:reduce){
  .twsearch__row::after,.twsearch__chip{animation:none}
  .twsearch__item,.twsearch__item::after,.twsearch__chip{transition:none}
}

/* ── ⚡ Electric Border — rotierender Glüh-Rahmen für Conversion-CTAs ── */
@property --tw-eb-angle { syntax:'<angle>'; initial-value:0deg; inherits:false }
@keyframes tw-eb-spin { to { --tw-eb-angle:360deg } }
.tw-eborder{position:relative;isolation:isolate}
.tw-eborder::before,.tw-eborder::after{content:'';position:absolute;inset:-2.5px;border-radius:inherit;padding:2.5px;background:conic-gradient(from var(--tw-eb-angle),transparent 0 40%,#a78bfa 47%,#22d3ee 50%,#a78bfa 53%,transparent 60% 100%);z-index:1;pointer-events:none;animation:tw-eb-spin 3.2s linear infinite;-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,linear-gradient(#000 0 0);mask-composite:exclude}
.tw-eborder::after{filter:blur(7px);opacity:.8}
@supports not (background:conic-gradient(from var(--tw-eb-angle),red,blue)){
  .tw-eborder::before,.tw-eborder::after{background:conic-gradient(transparent 0 40%,#a78bfa 47%,#22d3ee 50%,#a78bfa 53%,transparent 60% 100%);animation:none}
}
@media (prefers-reduced-motion:reduce){.tw-eborder::before,.tw-eborder::after{animation:none}}

/* CTA-Konsistenz: Sidebar-/Quiz-Button so fett wie der Preis-CTA (Inline-Style überstimmen) */
.td-side__go,.qz-result__go{font-weight:700!important}

/* ── 🃏 Quiz Swipe-Stack ─────────────────────────────────── */
.qz-stack{position:relative;height:134px;margin:6px 0 40px}
/* Deckende Karten-Fläche statt backdrop-filter: Blur unter Spring-Animation +
   Drag erzwang Dauer-Repaint (Lag) — Farbfläche + Schatten wirken gleich, kosten nichts */
.qz-stack__card{position:absolute;inset:0 0 auto 0;height:108px;display:flex;align-items:center;gap:14px;padding:0 20px;border-radius:18px;
  background:linear-gradient(140deg,rgba(139,92,246,.16),rgba(124,58,237,.04) 60%),var(--qz-card,#17102f);
  border:1px solid rgba(167,139,250,.3);
  box-shadow:0 12px 28px rgba(8,5,20,.35),inset 0 1px 0 rgba(255,255,255,.05);
  cursor:grab;touch-action:pan-y;will-change:transform}
.qz-stack__card.is-front{border-color:rgba(167,139,250,.55);box-shadow:0 16px 36px rgba(8,5,20,.45),inset 0 1px 0 rgba(255,255,255,.07),0 0 22px rgba(124,58,237,.12)}
.qz-stack__card:active{cursor:grabbing}
.qz-stack__card:not(.is-front){cursor:pointer}
.qz-stack__info{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:5px}
.qz-stack__top{font-size:.6rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#a78bfa}
.qz-stack__name{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qz-stack__meta{display:flex;gap:8px;flex-wrap:wrap}
.qz-stack__side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:7px;flex-shrink:0}
.qz-stack__rating{font-size:.78rem;font-weight:800;color:#c4b5fd;background:rgba(139,92,246,.14);border:1px solid rgba(167,139,250,.3);padding:3px 10px;border-radius:99px;white-space:nowrap}
.qz-stack__hint{font-size:1rem;line-height:1;opacity:.45;animation:qz-hint-nudge 2.2s ease-in-out infinite}
@keyframes qz-hint-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
.qz-stack__dots{position:absolute;left:0;right:0;bottom:-28px;display:flex;justify-content:center;gap:7px}
.qz-stack__dots button{width:8px;height:8px;border-radius:50%;border:none;background:rgba(167,139,250,.3);cursor:pointer;padding:0;transition:all .2s}
.qz-stack__dots button.on{background:#8b5cf6;width:22px;border-radius:99px}
body.light .qz-stack__card,body:not(.future) .qz-stack__card{--qz-card:#fff;border-color:rgba(124,58,237,.22);box-shadow:0 10px 24px rgba(30,20,70,.10)}
body.light .qz-stack__card.is-front,body:not(.future) .qz-stack__card.is-front{border-color:rgba(124,58,237,.4);box-shadow:0 14px 30px rgba(30,20,70,.14)}
body.light .qz-stack__rating,body:not(.future) .qz-stack__rating{color:#6d28d9;background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.25)}
body.light .qz-stack__top,body:not(.future) .qz-stack__top{color:#6d28d9}
@media (prefers-reduced-motion:reduce){.qz-stack__hint{animation:none}}

/* Silbentrennung für Fließtexte — lange deutsche Komposita (Sozialversicherungs-
   meldungen) brechen sauber statt aus schmalen Karten zu laufen (lang=de) */
#toolwahl-root p,#toolwahl-root li,.td-main p,.td-main li{-webkit-hyphens:auto;hyphens:auto}
/* Kurze zentrierte UI-Texte (Hero) nie trennen — „die KI fin-det" sieht kaputt aus */
#toolwahl-root .hero__sub{-webkit-hyphens:none;hyphens:none}

/* ── Tool-Stack-Datenbank (Newsletter-Bonus) ─────────────────────────────── */
.stackdb{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px;margin-top:10px}
.stackdb-card{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.22);border-radius:18px;padding:24px 24px 20px;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,border-color .18s ease}
.stackdb-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5)}
.stackdb-card__title{font-size:1.12rem;font-weight:800;margin:0;line-height:1.35}
.stackdb-card__aud{font-size:.82rem;color:var(--accent,#a78bfa);font-weight:600;margin:0}
.stackdb-card__play{font-size:.9rem;line-height:1.65;color:var(--muted);margin:0;flex:1}
.stackdb-card__tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.stackdb-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 7px;border-radius:99px;border:1px solid rgba(124,58,237,.3);background:rgba(124,58,237,.1);font-size:.82rem;font-weight:700;color:inherit;text-decoration:none;transition:background .15s,border-color .15s}
.stackdb-chip:hover{background:rgba(124,58,237,.22);border-color:rgba(139,92,246,.6)}
.stackdb-card__cost{font-size:.8rem;color:var(--muted);margin:4px 0 0;border-top:1px dashed rgba(124,58,237,.25);padding-top:10px}
body.light .stackdb-card{background:#fff;border-color:rgba(124,58,237,.18)}
body.light .stackdb-card__aud{color:#6d28d9}
body.light .stackdb-chip{background:rgba(124,58,237,.08)}
.nl__bonus{max-width:460px;margin:6px auto 18px;padding:20px 24px;background:linear-gradient(165deg,rgba(124,58,237,.16),rgba(124,58,237,.05));border:1px solid rgba(139,92,246,.32);border-radius:14px;text-align:center;-webkit-hyphens:none;hyphens:none}
.nl__bonus-eyebrow{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#a78bfa;margin-bottom:7px}
.nl__bonus-title{display:block;font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-.01em;margin-bottom:6px}
.nl__bonus-text{display:block;font-size:.84rem;color:var(--muted);line-height:1.6}
body.light .nl__bonus{background:linear-gradient(165deg,rgba(124,58,237,.09),rgba(124,58,237,.03));border-color:rgba(124,58,237,.22)}
body.light .nl__bonus-eyebrow{color:#6d28d9}

/* Erfolgs-Karte nach NL-Anmeldung: ersetzt Bonus+Formular+Trust (klare Reihenfolge) */
.nl__done--card{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:460px;margin:10px auto 0;padding:26px 28px;background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.3);border-radius:14px;text-align:center}
.nl__done--card .nl__done-icon{width:auto;height:auto;background:none;font-size:30px;line-height:1}
.nl__done-title{font-size:1.05rem;font-weight:800;color:var(--text);letter-spacing:-.01em}
.nl__done-text{font-size:.86rem;color:var(--muted);line-height:1.6;-webkit-hyphens:none;hyphens:none}

/* ── Frisch getestet (Homepage) ──────────────────────────────────────────── */
.freshtest{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:8px}
.freshtest-card{position:relative;display:flex;flex-direction:column;gap:13px;padding:20px 20px 16px;border-radius:18px;text-decoration:none;color:inherit;overflow:hidden;
  background:linear-gradient(155deg,rgba(124,58,237,.1),rgba(15,10,32,.35) 55%,rgba(34,211,238,.04));
  border:1px solid rgba(139,92,246,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease}
.freshtest-card::before{content:'';position:absolute;top:0;left:8%;right:8%;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),rgba(34,211,238,.4),transparent);opacity:0;transition:opacity .22s}
.freshtest-card:hover{transform:translateY(-4px);border-color:rgba(167,139,250,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 38px rgba(9,6,20,.5),0 0 24px rgba(124,58,237,.14)}
.freshtest-card:hover::before{opacity:1}
.freshtest-card__date{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#86efac;opacity:.9}
.freshtest-card__dot{width:6px;height:6px;border-radius:50%;background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.7);flex-shrink:0}
.freshtest-card__head{display:flex;align-items:center;gap:12px}
.freshtest-card__head img{transition:transform .22s cubic-bezier(.22,1,.36,1)}
.freshtest-card:hover .freshtest-card__head img{transform:scale(1.07)}
.freshtest-card__id{display:flex;flex-direction:column;gap:3px;min-width:0}
.freshtest-card__id strong{font-size:1.02rem;letter-spacing:-.015em}
.freshtest-card__meta{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);white-space:nowrap;min-width:0}
.freshtest-card__cat{overflow:hidden;text-overflow:ellipsis;min-width:0}
.freshtest-card__go{display:flex;align-items:center;gap:5px;font-size:.78rem;font-weight:700;color:var(--accent,#a78bfa);margin-top:auto;padding-top:11px;border-top:1px solid rgba(139,92,246,.14);transition:gap .18s}
.freshtest-card:hover .freshtest-card__go{gap:9px}
body:not(.future) .freshtest-card{background:linear-gradient(155deg,rgba(124,58,237,.05),#fff 55%);border-color:rgba(124,58,237,.16);box-shadow:0 2px 10px rgba(15,10,40,.05)}
body:not(.future) .freshtest-card:hover{box-shadow:0 14px 30px rgba(15,10,40,.12)}
body:not(.future) .freshtest-card__date{color:#15803d}
body:not(.future) .freshtest-card__go{border-top-color:rgba(124,58,237,.12);color:#6d28d9}

/* ── Newsletter-CTA in der Tool-Sidebar ──────────────────────────────────── */
.td-nlcta{display:flex;flex-direction:column;gap:9px;padding:18px;background:linear-gradient(165deg,rgba(124,58,237,.14),rgba(124,58,237,.05));border:1px solid rgba(139,92,246,.3);border-radius:14px;-webkit-hyphens:none;hyphens:none}
.td-nlcta__eyebrow{font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a78bfa}
.td-nlcta__text{font-size:.8rem;line-height:1.6;color:var(--muted);margin:0}
.td-nlcta__text strong{color:var(--text)}
.td-nlcta__form{display:flex;flex-direction:column;gap:8px}
.td-nlcta__input{width:100%;box-sizing:border-box;padding:10px 13px;border-radius:10px;border:1px solid rgba(139,92,246,.35);background:rgba(10,8,20,.45);color:var(--text);font-size:.85rem;outline:none}
.td-nlcta__input:focus{border-color:#8b5cf6}
.td-nlcta__btn{padding:10px 14px;border:none;border-radius:10px;background:linear-gradient(135deg,#7c3aed,#8b5cf6);color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;box-shadow:0 4px 12px rgba(124,58,237,.25)}
.td-nlcta__btn:hover{filter:brightness(1.08)}
.td-nlcta__done{font-size:.8rem;color:#4ade80;font-weight:600;margin:0;line-height:1.55}
.td-nlcta__err{font-size:.74rem;color:#fb7185;margin:0}
.td-nlcta__hint{font-size:.68rem;color:var(--muted);opacity:.8}
body.light .td-nlcta{background:linear-gradient(165deg,rgba(124,58,237,.08),rgba(124,58,237,.03));border-color:rgba(124,58,237,.2)}
body.light .td-nlcta__input{background:#fff;color:#1a0f3c}
body.light .td-nlcta__eyebrow{color:#6d28d9}
body.light .td-nlcta__done{color:#15803d}
.stat__num--icon{display:flex;align-items:center;justify-content:center;color:#a78bfa;height:45px}
.stat__num--icon svg{display:block}
body.light .stat__num--icon{color:#6d28d9}

#toolwahl-root .td-nlcta__text,#toolwahl-root .td-nlcta__done{-webkit-hyphens:none;hyphens:none}
.td-nlcta__title{display:block;font-size:.88rem;font-weight:800;color:var(--text);letter-spacing:-.01em;line-height:1.45}

/* ── Software-Lexikon ────────────────────────────────────────────────────── */
.glos-nav{display:flex;flex-direction:column;gap:14px;align-items:center;margin:6px 0 26px}
.glos-search{width:100%;max-width:440px;padding:12px 18px;border-radius:12px;border:1px solid rgba(139,92,246,.3);background:rgba(124,58,237,.06);color:var(--text);font-size:.92rem;outline:none}
.glos-search:focus{border-color:#8b5cf6}
.glos-letters{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.glos-letter{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;border:1px solid rgba(139,92,246,.25);background:rgba(124,58,237,.07);color:var(--text);font-size:.78rem;font-weight:700;text-decoration:none;transition:background .15s,border-color .15s;cursor:pointer;font-family:inherit}
.glos-letter:hover{background:rgba(124,58,237,.2);border-color:#8b5cf6}
.glos-group{display:flex;gap:20px;margin-bottom:26px;scroll-margin-top:90px}
.glos-group__letter{flex-shrink:0;width:44px;font-size:1.7rem;font-weight:800;color:#a78bfa;opacity:.75;line-height:1.2}
.glos-grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.glos-card{background:rgba(124,58,237,.05);border:1px solid rgba(124,58,237,.18);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:8px}
.glos-card__term{font-size:1rem;font-weight:800;margin:0;letter-spacing:-.01em}
.glos-card__def{font-size:.86rem;line-height:1.65;color:var(--muted);margin:0;flex:1}
.glos-card__tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
body.light .glos-card{background:#fff;border-color:rgba(124,58,237,.15)}
body.light .glos-search{background:#fff;color:#1a0f3c}
@media(max-width:640px){.glos-group{flex-direction:column;gap:8px}.glos-group__letter{width:auto}}

/* ── Homepage-Split: Inhalt links, sticky Top-5-Rail rechts (Desktop) ────── */
.home-split{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;max-width:1280px;margin:0 auto;padding:0 20px;align-items:start}
.home-split__main{min-width:0}
.home-split__main .container{padding-left:0;padding-right:0;max-width:none}
.home-split__side{position:sticky;top:92px}
.toprail{position:relative;overflow:hidden;border-radius:18px;padding:20px 18px 12px;display:flex;flex-direction:column;gap:3px;margin-top:74px;
  background:linear-gradient(165deg,rgba(124,58,237,.12),rgba(15,10,32,.4) 50%,rgba(34,211,238,.05));
  border:1px solid rgba(139,92,246,.26);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 34px rgba(9,6,20,.35)}
.toprail::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1.5px;border-radius:2px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.6),rgba(34,211,238,.45),transparent)}
.toprail__eyebrow{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#a78bfa;padding:0 6px 3px}
.toprail__head{font-size:.94rem;font-weight:800;letter-spacing:-.01em;color:var(--text);padding:0 6px 12px}
.toprail__row{display:flex;align-items:center;gap:11px;padding:9px 8px;border-radius:12px;text-decoration:none;color:inherit;border-top:1px solid rgba(139,92,246,.1);transition:background .15s,transform .15s}
.toprail__row:first-of-type{border-top:none}
.toprail__row:hover{background:rgba(124,58,237,.14);transform:translateX(2px)}
.toprail__rank{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0;
  color:#c4b5fd;background:rgba(139,92,246,.12);border:1px solid rgba(139,92,246,.3)}
.toprail__rank--1{color:#0c0a18;background:linear-gradient(140deg,#fde047,#f59e0b);border-color:rgba(253,224,71,.6);box-shadow:0 0 10px rgba(245,158,11,.35)}
.toprail__rank--2{color:#0c0a18;background:linear-gradient(140deg,#e5e7eb,#9ca3af);border-color:rgba(229,231,235,.5)}
.toprail__rank--3{color:#fff;background:linear-gradient(140deg,#d97706,#92400e);border-color:rgba(217,119,6,.5)}
.toprail__id{display:flex;flex-direction:column;min-width:0;flex:1}
.toprail__id strong{font-size:.86rem;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toprail__meta{font-size:.68rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toprail__score{display:inline-flex;align-items:center;font-size:.74rem;font-weight:800;color:#fcd34d;flex-shrink:0;font-variant-numeric:tabular-nums;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.22);border-radius:999px;padding:2px 9px}
.toprail__all{margin-top:9px;padding:11px 9px 6px;text-align:center;font-size:.78rem;font-weight:700;color:var(--accent,#a78bfa);text-decoration:none;border-top:1px solid rgba(139,92,246,.18)}
body:not(.future) .toprail{background:linear-gradient(165deg,rgba(124,58,237,.06),#fff 50%);border-color:rgba(124,58,237,.16);box-shadow:0 4px 18px rgba(15,10,40,.07)}
body:not(.future) .toprail__row{border-top-color:rgba(124,58,237,.08)}
body:not(.future) .toprail__score{color:#b45309;background:rgba(251,191,36,.12)}
body:not(.future) .toprail__rank:not(.toprail__rank--1):not(.toprail__rank--2):not(.toprail__rank--3){color:#6d28d9;background:rgba(109,40,217,.08);border-color:rgba(109,40,217,.35)}
body:not(.future) .toprail__all{color:#6d28d9}
body:not(.future) .toprail__eyebrow{color:#6d28d9}
/* Mobil: Rail ist ein Desktop-Begleiter — eingereiht wäre sie nur eine lange Liste */
@media(max-width:1080px){.home-split{display:block;padding:0}.home-split__side{display:none}}
/* Mobil: 3 statt 6 Frisch-getestet-Karten (Scroll-Länge) */
@media(max-width:720px){.freshtest>div:nth-child(n+4){display:none}}

/* ── Themen-Hubs ─────────────────────────────────────────────────────────── */
.hubs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:18px;margin-top:8px}
.hub-card{display:flex;flex-direction:column;gap:9px;padding:24px 24px 20px;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.22);border-radius:18px;text-decoration:none;color:inherit;transition:transform .18s ease,border-color .18s ease}
.hub-card:hover{transform:translateY(-3px);border-color:rgba(139,92,246,.5)}
.hub-card__emoji{font-size:1.6rem;line-height:1}
.hub-card__title{font-size:1.08rem;font-weight:800;margin:0;letter-spacing:-.01em;line-height:1.4}
.hub-card__intro{font-size:.85rem;line-height:1.6;color:var(--muted);margin:0;flex:1}
.hub-card__meta{font-size:.72rem;color:var(--muted);opacity:.85}
.hub-card__go{font-size:.8rem;font-weight:700;color:var(--accent,#a78bfa)}
.hub-steps{max-width:640px;margin:0 auto 30px;padding:20px 26px;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.2);border-radius:16px}
.hub-steps__title{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a78bfa;margin-bottom:10px}
.hub-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.hub-steps li{font-size:.9rem;line-height:1.6;color:var(--text)}
.hub-links{max-width:640px;margin:26px auto 0;padding:20px 26px;background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.2);border-radius:16px;display:flex;flex-direction:column;gap:8px}
.hub-links__item{font-size:.9rem;font-weight:600;color:var(--text);text-decoration:none;padding:4px 0}
.hub-links__item:hover{color:#a78bfa}
body.light .hub-card,body.light .hub-steps,body.light .hub-links{background:#fff;border-color:rgba(124,58,237,.16)}
/* Gleiche Kartenhöhen: Reveal-Wrapper füllt die Grid-Zeile, Karte den Wrapper */
.hubs-grid>div,.freshtest>div,.stackdb>div{height:100%}
.hub-card,.freshtest-card,.stackdb-card{height:100%;box-sizing:border-box}
.freshtest-card__new{font-size:.64rem;font-weight:800;letter-spacing:.08em;color:#c4b5fd;background:rgba(139,92,246,.18);border:1px solid rgba(139,92,246,.4);border-radius:99px;padding:3px 9px}
/* Mobil: je 2 Duelle/Bereichs-Vergleiche statt 3 — "Alle ansehen"-Links führen weiter */
@media(max-width:720px){.cmpgrid>*:nth-child(n+3){display:none}}
@media(max-width:720px){.fresh-guides>*:nth-child(n+3){display:none}}

/* Bewertung auf Tool-Karten: wichtigste Kaufinfo, dezent in Amber */
.tool-card__rating{display:flex;align-items:baseline;gap:5px;margin:2px 0 4px;color:#f5b50a;font-size:13px}
.tool-card__rating svg{align-self:center}
.tool-card__rating strong{font-weight:800;color:var(--text);letter-spacing:-.01em}
.tool-card__rating-max{font-size:11px;color:var(--muted)}
/* Toolbar: eine Höhe, ein Radius für Suche/Segment/Sortierung */
.filters .search,.filters .seg,.filters .sort{height:46px;box-sizing:border-box;border-radius:12px}
.filters .seg{align-items:center}
/* Score-Ring-Zahl folgt dem Theme LIVE (JS-berechnete Farbe blieb beim Switch stehen) */
.rating-ring__num{fill:#1e1b4b}
body.future .rating-ring__num{fill:#f5f3ff}