*{margin:0;box-sizing:border-box}
html,body{overflow-x:hidden}
/* Metric-adjusted fallback so layout does not shift when Outfit swaps in */
@font-face{font-family:'Outfit Fallback';src:local('Arial');size-adjust:101%;ascent-override:94.5%;descent-override:24%;line-gap-override:0%}
body{font-family:'Outfit','Outfit Fallback',sans-serif;color:#1e293b;background:#fff;font-weight:300;letter-spacing:.01em}
a{text-decoration:none;color:inherit}
.grd{background:linear-gradient(to right,#9333ea,#d946ef,#ec4899)}
.grd-text{background:linear-gradient(to right,#9333ea,#d946ef,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.grd-border{border:2px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(to right,#9333ea,#d946ef,#ec4899) border-box}

.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s}
.nav.scrolled{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav-link{font-size:clamp(9px,0.9vw,11px);font-weight:500;color:#475569;text-decoration:none;transition:color .15s;text-transform:uppercase;letter-spacing:.1em}
.nav-link:hover,.nav-link.active{color:#9333ea}
.nav-cta{padding:10px 24px;border-radius:12px;font-size:13px;font-weight:400;letter-spacing:.02em;color:#fff;border:none;cursor:pointer;transition:all .2s;display:inline-block;text-decoration:none}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(147,51,234,.3)}

.section{padding:clamp(40px,6vw,72px) 24px}
.section-title{font-size:clamp(28px,4vw,48px);font-weight:200;letter-spacing:-.02em;line-height:1.15;margin-bottom:16px}
.section-sub{font-size:clamp(15px,1.8vw,18px);font-weight:300;color:#475569;line-height:1.6;max-width:600px}

.card{background:#fff;border-radius:20px;border:1px solid #e5e7eb;padding:32px;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(124,58,237,.12),0 0 0 1px rgba(147,51,234,.08)}
.card-icon{width:48px;height:48px;border-radius:14px;background:#f3e8ff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:#9333ea}

.btn-primary{padding:14px 36px;border-radius:14px;font-size:15px;font-weight:400;color:#fff;border:none;cursor:pointer;transition:all .25s;box-shadow:0 8px 32px rgba(147,51,234,.25);display:inline-block;text-align:center;text-decoration:none}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 48px rgba(147,51,234,.35)}
.btn-ghost{padding:14px 36px;border-radius:14px;font-size:15px;font-weight:400;color:#9333ea;background:transparent;border:1.5px solid #d8b4fe;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-ghost:hover{background:#faf5ff;border-color:#a855f7}

.page-header{padding:140px 24px 8px;text-align:center;position:relative;overflow:hidden;background:#fff}
.page-header .label{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#9333ea;font-weight:500;margin-bottom:12px}
.page-header h1{font-size:clamp(32px,5vw,56px);font-weight:200;letter-spacing:-.02em;line-height:1.1;margin-bottom:8px}
.page-header p{font-size:clamp(15px,1.8vw,18px);font-weight:300;color:#475569;max-width:600px;margin:0 auto;line-height:1.6}

.cta-section{padding:80px 24px;text-align:center;position:relative;overflow:hidden;max-width:1100px;margin:0 auto;border-radius:28px}
.cta-section::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#9333ea,#c026d3,#ec4899);z-index:0;border-radius:28px}
.cta-section>*{position:relative;z-index:1}

footer{background:#fff;color:#475569;padding:60px 24px 32px;border-top:1px solid #f1f5f9}
footer a{color:#475569;text-decoration:none;transition:color .15s;font-weight:300}
footer a:hover{color:#9333ea}
.footer-heading{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:#9333ea;margin-bottom:16px;font-weight:500}

/* Funktionen dropdown (hover). Wrapper uses display:contents so the link is a direct flex child
   of .nav-links (no horizontal shift). Dropdown anchors to .nav-links (position:relative inline);
   JS centers it under #nav-features. */
.nav-funktionen{display:contents}
.nav-dropdown{position:absolute;top:100%;left:var(--dd-x,50%);transform:translateX(-50%) translateY(-10px);background:#fff;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 16px 48px rgba(124,58,237,.12),0 0 0 1px rgba(0,0,0,.04);padding:10px;min-width:300px;opacity:0;pointer-events:none;transition:opacity .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);z-index:200;margin-top:8px}
.nav-dropdown::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-funktionen:hover .nav-dropdown,.nav-funktionen:focus-within .nav-dropdown,#nav-features:hover ~ .nav-dropdown,.nav-dropdown:hover{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-dropdown a{display:block;padding:10px 12px;border-radius:10px;color:#1e293b;font-size:13px;font-weight:400;text-decoration:none;transition:background .15s;text-transform:none;letter-spacing:0;line-height:1.35}
.nav-dropdown a:hover{background:#faf5ff;color:#9333ea}
.nav-dropdown a small{display:block;font-size:11px;color:#475569;font-weight:300;margin-top:2px;letter-spacing:0;text-transform:none}
@media(max-width:768px){.nav-dropdown{display:none}}

/* Feature page sections */
.feat-hero{padding:140px 24px 40px;text-align:center;background:#fff;position:relative;overflow:hidden}
.feat-hero .label{font-size:11px;text-transform:uppercase;letter-spacing:.15em;color:#9333ea;font-weight:500;margin-bottom:12px}
.feat-hero h1{font-size:clamp(32px,5vw,56px);font-weight:200;letter-spacing:-.02em;line-height:1.1;margin-bottom:16px;max-width:780px;margin-left:auto;margin-right:auto}
.feat-hero p.sub{font-size:clamp(15px,1.8vw,18px);font-weight:300;color:#475569;max-width:620px;margin:0 auto 28px;line-height:1.6}
.feat-highlights{padding:40px 24px 60px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.feat-card{background:#fff;border-radius:18px;border:1px solid #e5e7eb;padding:24px;transition:all .25s cubic-bezier(.16,1,.3,1);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.feat-card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(124,58,237,.1),0 0 0 1px rgba(147,51,234,.08)}
.feat-card .feat-icon{width:42px;height:42px;border-radius:12px;background:#f3e8ff;color:#9333ea;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.feat-card h3{font-size:16px;font-weight:500;color:#1e293b;margin-bottom:6px;letter-spacing:-.005em}
.feat-card p{font-size:13.5px;color:#475569;font-weight:300;line-height:1.6}
.feat-shot{max-width:1100px;margin:20px auto;padding:0 24px}
.feat-shot-frame{border-radius:20px;overflow:hidden;box-shadow:0 25px 80px rgba(124,58,237,.12),0 0 0 1px rgba(0,0,0,.04);background:#fff}
.feat-shot-bar{height:32px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);display:flex;align-items:center;padding:0 12px;gap:6px;border-bottom:1px solid #e5e7eb}
.feat-shot-bar .dot{width:7px;height:7px;border-radius:50%}
.feat-shot-bar span{flex:1;text-align:center;font-size:10px;color:#475569;font-weight:300}
.feat-shot-body{background:#f8fafc;min-height:300px;display:flex;align-items:center;justify-content:center;position:relative}
.feat-shot-body img{width:100%;display:block}
.feat-shot-placeholder{padding:80px 24px;text-align:center;color:#94a3b8;font-size:13px;font-weight:300}
.feat-shot-placeholder svg{width:48px;height:48px;margin:0 auto 12px;color:#cbd5e1;display:block}
.feat-shot-caption{text-align:center;font-size:12px;color:#475569;font-weight:300;margin-top:14px;font-style:italic}
.feat-status{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;padding:8px 18px;border-radius:99px;background:linear-gradient(to right,#9333ea,#d946ef,#ec4899);color:#fff;text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;box-shadow:0 8px 24px rgba(147,51,234,.28),0 0 0 1px rgba(255,255,255,.06) inset}
.feat-status::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25);animation:featPulse 2s ease-in-out infinite}
@keyframes featPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.25)}50%{box-shadow:0 0 0 8px rgba(255,255,255,0)}}

/* Scroll-triggered fade-in. Tuned for smooth scroll feel:
   - opacity-only on default .anim (no Y-translation = no motion conflict
     with scroll direction, much less jittery perception)
   - smaller transforms on variants for subtlety
   - shorter duration .55s + ease-out-cubic = gentle, not snappy
   - no permanent will-change (browser auto-promotes during transition;
     keeping 30+ composite layers permanently hurts scroll perf) */
.anim,.anim-scale,.anim-left,.anim-right{opacity:0;transition:opacity .55s cubic-bezier(.215,.61,.355,1),transform .55s cubic-bezier(.215,.61,.355,1)}
.anim-scale{transform:scale(.97)}
.anim-left{transform:translateX(-12px)}
.anim-right{transform:translateX(12px)}
.anim.visible,.anim-scale.visible,.anim-left.visible,.anim-right.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim,.anim-scale,.anim-left,.anim-right{opacity:1;transform:none;transition:none}}

/* Soft page-load entry for content containers without explicit .anim markers
   (articles, legal pages, service pages, contact). CSS keyframe - no JS,
   works automatically on any page that uses these standard wrappers.

   IMPORTANT: only transform is animated, NOT opacity. CSS `opacity:0` on a
   parent visually hides the entire subtree (including h1 inside), which
   would delay LCP measurement until the fade finishes. By animating only
   transform, the container slides up smoothly while h1 stays painted from
   the very first frame - Lighthouse / CrUX report LCP at first paint. */
@keyframes adonContentEnter{from{transform:translateY(16px)}to{transform:none}}
.page-header,.article-header,.article-content{animation:adonContentEnter .7s cubic-bezier(.16,1,.3,1) both}
.article-content{animation-delay:.15s}
@media (prefers-reduced-motion:reduce){.page-header,.article-header,.article-content{animation:none}}

.mobile-menu{display:none;position:fixed;inset:0;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);z-index:200;flex-direction:column;align-items:center;justify-content:center;gap:32px}
.mobile-menu.open{display:flex}

.legal-content{max-width:800px;margin:0 auto;padding:0 24px 60px}
.legal-content>*:first-child,.legal-content>div.anim>*:first-child{margin-top:0}
.legal-content h2{font-size:22px;font-weight:400;margin:32px 0 12px;color:#1e293b}
.legal-content h3{font-size:17px;font-weight:400;margin:24px 0 8px;color:#374151}
.legal-content p{font-size:14px;font-weight:300;line-height:1.8;color:#475569;margin-bottom:12px}
.legal-content ul{padding-left:20px;margin-bottom:12px}
.legal-content li{font-size:14px;font-weight:300;line-height:1.8;color:#475569;margin-bottom:4px}
.legal-content a{color:#9333ea;text-decoration:underline}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}

@media(max-width:768px){
.nav-links{display:none!important}
.nav-cta-desk{display:none!important}
.hamburger{display:flex!important}
.page-header{padding:100px 20px 40px}
.contact-grid{grid-template-columns:1fr!important}
.crm-features-grid{grid-template-columns:repeat(2,1fr)!important}
.cta-section{margin-left:16px;margin-right:16px}
}
@media(max-width:480px){
.crm-features-grid{grid-template-columns:1fr!important}
}
@media(min-width:769px){
.hamburger{display:none!important}
}