*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#202427;--blue:#202427;--blue-brand:#b7f000;--blue-bright:#b7f000;--navy2:#121517;--light:#f4f6f2;--white:#ffffff;--text:#202427;--muted:#4A5550;--accent:#b7f000;--accent-hover:#9fd600;--graphite:#202427;--dark:#121517;--bg:#f4f6f2;--textgray:#4A5550}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;color:var(--text);background:var(--white);overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* NAV */
.vantix-nav{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(32,36,39,0.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,0.08);padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between;transition:box-shadow .3s}
.vantix-nav.scrolled{box-shadow:0 4px 32px rgba(0,0,0,0.3)}
.nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav-logo img{height:32px;width:auto;object-fit:contain}
.nav-logo-text{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.25rem;color:var(--white);letter-spacing:-0.02em}
.nav-logo-text span{color:var(--blue-bright)}
.nav-links{display:flex;align-items:center;gap:36px;list-style:none}
.nav-hamburger{display:none}
.nav-links a{font-size:0.925rem;font-weight:500;color:rgba(255,255,255,0.8);text-decoration:none;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:2px;background:var(--accent);border-radius:2px;transition:width .25s}
.nav-links a:hover,.nav-links .current-menu-item a,.nav-links a.active{color:var(--white)}
.nav-links a:hover::after,.nav-links .current-menu-item a::after,.nav-links a.active::after{width:100%}
.nav-cta{background:var(--accent)!important;color:var(--graphite)!important;padding:10px 22px;border-radius:8px;white-space:nowrap;flex-shrink:0}
.nav-cta::after{display:none!important}
.nav-cta:hover{background:#9fd600!important}

/* BUTTONS */
.btn-primary{display:inline-block;background:var(--graphite);color:var(--accent);padding:15px 32px;border-radius:10px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;text-decoration:none;transition:background .2s ease,color .2s ease,transform .2s ease;border:2px solid var(--accent);cursor:pointer}
.btn-primary:hover{background:var(--accent);color:var(--graphite);transform:translateY(-2px);text-decoration:none}
.cta-hover-lift{transition:background-color 180ms ease,box-shadow 180ms ease,transform 180ms ease}
.cta-hover-lift:active{transform:translateY(0)}
.cta-hover-lift:focus-visible{outline:2px solid #B7F000;outline-offset:3px}
.btn-ghost{color:var(--navy);font-family:'Outfit',sans-serif;font-size:1rem;font-weight:500;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:gap .2s,color .2s}
.btn-ghost:hover{color:var(--blue);gap:12px;text-decoration:none}
.practice-link{position:relative;color:#202427;text-decoration:none;font-weight:600;transition:color .2s ease,text-shadow .2s ease,filter .2s ease}
.practice-link::after{content:'';position:absolute;left:0;bottom:-3px;width:100%;height:2px;background:#B7F000;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.practice-link:hover::after{transform:scaleX(1)}
.practice-link:hover{color:#2D2D2D;gap:8px;text-decoration:none}
@media(hover:hover) and (pointer:fine){.practice-link:hover{color:#202427;gap:8px;text-decoration:none;text-shadow:0 0 12px rgba(183,240,0,0.6),0 0 24px rgba(183,240,0,0.3);filter:drop-shadow(0 0 4px rgba(183,240,0,0.28))}}
.btn-ghost.practice-link:focus-visible{color:#2D2D2D;outline:2px solid #B7F000;outline-offset:4px;border-radius:4px}

/* SHARED */
.section-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:block}
.section-title{font-family:'Outfit',sans-serif;font-size:clamp(1.8rem,3vw,2.6rem);font-weight:800;letter-spacing:-0.03em;line-height:1.15;color:var(--navy);margin-bottom:16px}
.section-title span{color:var(--blue)}
.section-title em{color:var(--blue);font-style:normal}
.section-sub{font-size:1.05rem;color:var(--muted);line-height:1.7;max-width:560px}
.section-header{margin-bottom:64px}

/* HERO */
.hero{min-height:100vh;padding-top:72px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg-deco{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.hero-bg::after{content:'';position:absolute;inset:0;z-index:0;background:linear-gradient(105deg,rgba(255,255,255,0.92) 45%,rgba(244,246,242,0.5) 100%)}
@media(max-width:768px){.hero-deco-mobile-hide{display:none}.hero-bg-deco{opacity:.55}}
.hero-content{position:relative;z-index:2;padding:80px 64px 80px 80px}
.hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(183,240,0,0.1);border:1px solid rgba(183,240,0,0.25);color:var(--blue);font-family:'Outfit',sans-serif;font-size:0.78rem;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:28px;animation:fadeUp .7s ease both;max-width:100%;white-space:normal;line-height:1.4}
.hero-tag::before{content:'';width:6px;height:6px;background:var(--accent);border-radius:50%}
.hero-title{font-family:'Outfit',sans-serif;font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;line-height:1.1;color:var(--navy);letter-spacing:-0.03em;margin-bottom:24px;animation:fadeUp .7s .1s ease both}
.hero-title em{font-style:normal;color:var(--blue)}
.hero-sub{font-size:1.1rem;color:var(--muted);line-height:1.7;max-width:460px;margin-bottom:40px;animation:fadeUp .7s .2s ease both}
.hero-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;animation:fadeUp .7s .3s ease both}
.hero-stats{display:flex;gap:40px;margin-top:56px;padding-top:32px;border-top:1px solid rgba(32,36,39,0.1);animation:fadeUp .7s .4s ease both}
.hero-stat-num{font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;color:var(--navy);letter-spacing:-0.03em}
.hero-stat-num span{color:var(--blue)}
.hero-stat-label{font-size:0.82rem;color:var(--muted);margin-top:2px}
.hero-image{position:relative;z-index:2;padding:80px 80px 80px 0;display:flex;align-items:center;justify-content:center;animation:fadeIn .9s .2s ease both}
.hero-image-wrap{position:relative;width:100%;max-width:440px}
.hero-image-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;background:radial-gradient(circle,rgba(183,240,0,0.18) 0%,transparent 70%);border-radius:50%}
.hero-image img{position:relative;z-index:2}
.hero-logo-img{width:340px;height:auto;filter:drop-shadow(0 12px 40px rgba(0,0,0,0.35)) drop-shadow(0 3px 10px rgba(0,0,0,0.2));transform:perspective(700px) rotateY(-6deg) rotateX(2deg) scale(1.02);transition:transform .4s ease,filter .4s ease}
.hero-logo-img:hover{transform:perspective(700px) rotateY(0deg) rotateX(0deg) scale(1.05);filter:drop-shadow(0 16px 50px rgba(0,0,0,0.4)) drop-shadow(0 4px 16px rgba(183,240,0,0.25))}
@media(max-width:768px){.hero-logo-img{width:260px}}

/* CARDS */
.leistungen-section{background:var(--light);padding:100px 80px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.card{background:var(--graphite);border-radius:16px;padding:40px 36px;border:1px solid rgba(255,255,255,0.10);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;position:relative;overflow:hidden;display:flex;flex-direction:column;backface-visibility:hidden}
.card::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--angle,0deg),transparent 0deg,#b7f000 60deg,transparent 120deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s ease;z-index:0;pointer-events:none}
.card:not(.service-card):hover{transform:translateY(-4px) scale(1.03);box-shadow:0 16px 48px rgba(32,36,39,0.22);border-color:rgba(183,240,0,0.2)}
.card:not(.service-card):hover::before{opacity:1;animation:card-rotate 3s linear infinite}
.card>*{position:relative;z-index:1}
@keyframes card-rotate{to{--angle:360deg}}
.card-icon{width:48px;height:48px;border-radius:12px;background:rgba(183,240,0,0.08);border:1px solid rgba(183,240,0,0.18);display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.card-icon svg{width:28px;height:28px;shape-rendering:geometricPrecision;image-rendering:crisp-edges}
.card-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;color:#ffffff;letter-spacing:-0.02em;margin-bottom:12px}
.card-text{font-size:0.92rem;color:rgba(255,255,255,0.72);line-height:1.7}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:24px;font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:600;color:var(--accent);text-decoration:none;transition:gap .2s}
.card-link:hover{gap:10px;text-decoration:none}
.service-card{position:relative;overflow:hidden;transition:transform 220ms ease,border-color 220ms ease,box-shadow 220ms ease,background-color 220ms ease}
.service-card::before{content:"";position:absolute;inset:0 auto auto 12%;width:76%;height:1px;padding:0;border-radius:0;background:linear-gradient(90deg,transparent,rgba(183,240,0,0.85),transparent);-webkit-mask:none;mask:none;opacity:0;transition:opacity 220ms ease;pointer-events:none;z-index:2}
.service-card:focus-within{border-color:rgba(183,240,0,0.72);box-shadow:0 0 0 2px rgba(183,240,0,0.20),0 0 30px rgba(183,240,0,0.14)}
@media(hover:hover) and (pointer:fine){
  .service-card:hover,.service-card.visible:hover,.js .service-card.visible:hover{transform:translateY(-4px);border-color:rgba(183,240,0,0.72);background-color:#202528;box-shadow:0 0 0 1px rgba(183,240,0,0.22),0 10px 28px rgba(22,28,24,0.28),0 0 28px rgba(183,240,0,0.20),0 0 60px rgba(183,240,0,0.09)}
  .service-card:hover::before{opacity:1;animation:none}
  .service-card:hover .card-icon{border-color:rgba(183,240,0,0.38);background:rgba(183,240,0,0.11)}
  .service-card:hover .card-link{color:#C8FF1A}
}

/* DAS SYSTEM PREVIEW */
.das-system-section{background:var(--navy);color:#ffffff;padding:100px 80px;position:relative;overflow:hidden;isolation:isolate}
.das-system-section::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,rgba(183,240,0,0.08) 0%,transparent 70%);border-radius:50%;pointer-events:none}
.das-system-section .section-title{color:#ffffff}
.das-system-section .section-sub{color:rgba(255,255,255,0.7);max-width:640px}
.das-system-section .section-label{color:var(--blue-bright)}
.system-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.system-steps{display:flex;flex-direction:column}
.step{display:flex;gap:20px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,0.08)}
.step:last-child{border-bottom:none}
.step-num{font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:800;letter-spacing:0.1em;color:var(--blue);min-width:32px;padding-top:3px}
.step-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:#ffffff;margin-bottom:6px}
.step-text{font-size:0.88rem;color:rgba(255,255,255,0.7);line-height:1.65}
.system-right{display:flex;flex-direction:column;gap:24px}
.system-box{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:32px}
.system-box-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--white);margin-bottom:8px}
.system-box-text{font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.65}
.system-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.tool-tag{background:rgba(183,240,0,0.15);border:1px solid rgba(183,240,0,0.3);color:var(--blue-bright);font-family:'Outfit',sans-serif;font-size:0.78rem;font-weight:600;padding:5px 12px;border-radius:100px}

/* REFERENZEN */
.referenzen-section{background:var(--white);padding:100px 80px}
.ref-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.ref-card{background:var(--light);border-radius:16px;padding:40px;border-left:4px solid var(--accent)}
.ref-label{font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:14px;display:block}
.ref-title{font-family:'Outfit',sans-serif;font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.ref-text{font-size:0.92rem;color:var(--muted);line-height:1.7}
.ref-result{display:inline-flex;align-items:center;gap:8px;margin-top:20px;background:rgba(183,240,0,0.08);border-radius:100px;padding:7px 14px;font-family:'Outfit',sans-serif;font-size:0.8rem;font-weight:700;color:var(--navy)}
.ref-result::before{content:'✓';color:var(--blue);font-weight:800}

/* CTA */
.cta-section{background:#202427;text-align:center;padding:100px 80px;position:relative;isolation:isolate}
.cta-section .section-label,.cta-section .section-title,.cta-section .section-sub,.cta-section .btn-primary{position:relative;z-index:1}
.cta-section .section-title{color:var(--white);max-width:640px;margin:0 auto 16px}
.cta-section .section-label{color:var(--blue-bright)}
.cta-section .section-sub{color:rgba(255,255,255,0.75);margin:0 auto 48px}
.cta-section .btn-primary{background:var(--accent);font-size:1.05rem;padding:17px 40px}
.cta-section .btn-primary:hover{background:#9fd600}

/* PAGE HERO */
.page-hero{padding:160px 80px 80px;background:#202427;position:relative;overflow:hidden}
.page-hero.dark{background:var(--navy)}
.page-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:400px;height:400px;background:radial-gradient(circle,rgba(183,240,0,0.1) 0%,transparent 70%);border-radius:50%}
.page-hero-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:16px;display:block}
.page-hero.dark .page-hero-label,.page-hero .page-hero-label{color:var(--blue-bright)}
.page-hero-title{font-family:'Outfit',sans-serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:800;letter-spacing:-0.03em;color:#ffffff;margin-bottom:20px;line-height:1.1}
.page-hero.dark .page-hero-title{color:var(--white)}
.page-hero-sub{font-size:1.1rem;color:rgba(255,255,255,0.75);line-height:1.7;max-width:560px}
.page-hero.dark .page-hero-sub{color:rgba(255,255,255,0.65)}

/* LEISTUNGEN DETAIL */
.leistung-block{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding:80px}
.leistung-block+.leistung-block{border-top:1px solid rgba(32,36,39,0.08)}
.leistung-block.bg-light{background:var(--light)}
.leistung-block.reverse .leistung-visual{order:-1}
.leistung-label{font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block}
.leistung-title{font-family:'Outfit',sans-serif;font-size:1.8rem;font-weight:800;letter-spacing:-0.03em;color:var(--navy);margin-bottom:16px}
.leistung-text{font-size:0.95rem;color:var(--muted);line-height:1.75;margin-bottom:28px}
.leistung-list{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.leistung-list li{font-size:0.92rem;color:var(--text);line-height:1.5;padding-left:26px;position:relative}
.leistung-list li::before{content:'✓';position:absolute;left:0;color:var(--blue);font-weight:800}
.leistung-visual{background:var(--light);border-radius:20px;padding:48px;display:flex;align-items:center;justify-content:center;min-height:280px}
.leistung-block.bg-light .leistung-visual{background:var(--white)}
.visual-icon svg{width:100px;height:100px}
.leistung-visual{position:relative;overflow:hidden;isolation:isolate;background:#202427}
.leistung-block.bg-light .leistung-visual{background:#202427}
.leistung-visual::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(183,240,0,0.11),rgba(183,240,0,0.035) 34%,transparent 68%);pointer-events:none;z-index:0}
.leistung-visual::after{content:"";position:absolute;inset:18px;border:1px solid rgba(183,240,0,0.08);border-radius:16px;pointer-events:none;z-index:0}
.visual-icon{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;max-width:170px}
.visual-icon svg.leistung-illustration{width:clamp(154px,18vw,190px);height:auto;display:block;overflow:visible}
@media(max-width:768px){.visual-icon svg.leistung-illustration{width:clamp(140px,46vw,168px)}}

/* PROCESS */
.process-section{padding:80px}
.process-timeline{position:relative;max-width:800px;margin:64px auto 0}
.process-timeline::before{content:'';position:absolute;left:28px;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--accent) 0%,var(--navy) 100%)}
.process-step{display:flex;gap:40px;margin-bottom:56px;position:relative}
.process-step:last-child{margin-bottom:0}
.step-dot{width:56px;height:56px;border-radius:50%;background:var(--navy);border:3px solid var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.step-dot-num{font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:800;color:var(--white)}
.step-body{padding-top:12px}
.step-body-title{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.step-body-text{font-size:0.95rem;color:var(--muted);line-height:1.7;max-width:540px}
.step-detail{margin-top:16px;padding:16px 20px;background:var(--light);border-radius:10px;border-left:3px solid var(--accent);font-size:0.88rem;color:var(--text);line-height:1.6}

/* TOOLS */
.tools-section{background:var(--light);padding:80px}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.tool-card{background:var(--white);border-radius:14px;padding:28px;border:1px solid rgba(32,36,39,0.08)}
.tool-card-name{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.tool-card-text{font-size:0.85rem;color:var(--muted);line-height:1.6}
.tool-tag-dot{display:inline-block;width:8px;height:8px;background:var(--accent);border-radius:50%;margin-right:8px}

/* WARUM */
.warum-section{background:var(--navy);padding:80px;overflow:hidden;isolation:isolate}
.warum-section .section-title{color:var(--white)}
.warum-section .section-sub{color:rgba(255,255,255,0.6)}
.warum-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:56px}
.warum-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:32px;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s}
.warum-card:hover{transform:scale(1.03) translateY(-4px) !important;box-shadow:0 16px 48px rgba(32,36,39,0.14) !important;border-color:rgba(183,240,0,0.3) !important}
.warum-card-icon{font-size:1.5rem;margin-bottom:16px}
.warum-card-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--white);margin-bottom:8px}
.warum-card-text{font-size:0.88rem;color:rgba(255,255,255,0.55);line-height:1.65}

/* KONTAKT */

.kontakt-title{font-family:'Outfit',sans-serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:800;letter-spacing:-0.03em;color:var(--navy);margin-bottom:20px;line-height:1.1}
.kontakt-sub{font-size:1rem;color:var(--muted);line-height:1.75;margin-bottom:48px;max-width:440px}
.contact-items{display:flex;flex-direction:column;gap:24px;margin-bottom:48px}
.contact-item{display:flex;align-items:flex-start;gap:16px}
.contact-item-icon{width:44px;height:44px;background:rgba(183,240,0,0.1);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-item-icon svg{width:20px;height:20px}
.contact-item-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--blue);margin-bottom:4px;display:block}
.contact-item-value{font-size:0.95rem;color:var(--text);font-weight:500}
.contact-item-value a{color:var(--text);text-decoration:none;transition:color .2s}
.contact-item-value a:hover{color:var(--blue)}
.trust-box{background:var(--light);border-radius:16px;padding:28px;border-left:4px solid var(--accent)}
.trust-box-title{font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.trust-box-text{font-size:0.85rem;color:var(--muted);line-height:1.65}

.form-title{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-sub{font-size:0.88rem;color:var(--muted);margin-bottom:32px;line-height:1.6}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-family:'Outfit',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 16px;border:2px solid rgba(32,36,39,0.12);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:0.95rem;color:var(--text);background:var(--white);outline:none;transition:border-color .2s,box-shadow .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(183,240,0,0.1)}
.form-group textarea{resize:vertical;min-height:120px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-submit{width:100%;padding:16px;background:var(--navy);color:var(--white);border:none;border-radius:10px;font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:background .2s,transform .2s;margin-top:8px}
.form-submit:hover{background:var(--accent);transform:translateY(-2px)}
.form-notice{font-size:0.78rem;color:var(--muted);margin-top:12px;text-align:center;line-height:1.5}
.form-notice a{color:var(--blue);text-decoration:underline;text-decoration-color:#B7F000;text-underline-offset:2px;transition:color .2s ease}
.form-notice a:hover{color:#647D00}
.form-success{display:none;text-align:center;padding:40px 20px}
.form-success.show{display:block}
.form-success-icon{font-size:3rem;margin-bottom:16px}
.form-success-title{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.form-success-text{font-size:0.9rem;color:var(--muted);line-height:1.65}

/* FOOTER */
.vantix-footer{background:#202427;color:rgba(255,255,255,0.5);padding:48px 80px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-copy{border-top:none;background:#202427;}
.footer-logo{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.1rem;color:var(--white)}
.footer-logo span{color:var(--blue)}
.vantix-footer a{color:rgba(255,255,255,0.5);text-decoration:none;font-size:0.85rem;transition:color .2s}
.vantix-footer a:hover{color:var(--blue)}
.footer-links{display:flex;gap:24px}
.footer-copy{font-size:0.82rem}

/* ANIMATIONS */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Anker-Links: scroll-margin damit fixed Nav den Inhalt nicht verdeckt */
section[id], main[id], .ablauf-section, .leistungen-section, .home-preview-section,
.home-system-section, .cta-section, .preise-section, .beispiel-section,
.warum-section, .referenzen-section {
  scroll-margin-top: 90px;
}
html { scroll-padding-top: 90px; }

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Progressive Enhancement: ohne JS bleibt alles sichtbar.
   Wenn JS aktiv: html.js wird gesetzt -> reveal versteckt bis observer triggert. */
.reveal{opacity:1;transform:none;transition:opacity .65s ease,transform .65s ease}
.js .reveal{opacity:0;transform:translateY(28px)}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce) {
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* RESPONSIVE */
@media(max-width:900px){
  .vantix-nav{padding:0 24px}

  /* Hamburger Button */
  .nav-hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
  .nav-hamburger span{display:block;width:24px;height:2px;background:var(--white);border-radius:2px;transition:transform .25s,opacity .25s}
  .nav-hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-hamburger.is-open span:nth-child(2){opacity:0}
  .nav-hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* Mobile Menü */
  .nav-links{
    display:flex;flex-direction:column;align-items:flex-start;gap:0;
    position:fixed;top:72px;left:0;right:0;
    background:rgba(18,21,23,0.98);backdrop-filter:blur(16px);
    border-top:1px solid rgba(255,255,255,0.08);
    padding:0;list-style:none;
    max-height:0;overflow:hidden;
    transition:max-height .32s ease,padding .32s ease;
  }
  .nav-links.nav-open{max-height:80vh;max-height:calc(100svh - 72px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 0 calc(34px + env(safe-area-inset-bottom, 0px))}
  .nav-links li{width:100%}
  .nav-links li a{display:block;padding:10px 28px;font-size:1rem;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.05)}
  .nav-links li a:hover{color:var(--white);background:rgba(183,240,0,0.08)}
  .nav-links li a::after{display:none}
  .nav-links .nav-cta{
    display:inline-block !important;margin:12px 28px 12px;padding:12px 24px !important;
    border-radius:8px;width:auto !important;border:2px solid #B7F000 !important;
    text-align:center;
  }

  /* Hero-Logo kleiner */
  .hero-image-wrap{max-width:220px;margin:0 auto}
  .hero-image{padding:10px 24px 32px}

  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-content{padding:40px 24px}
  .hero-stats{gap:24px;flex-wrap:wrap}
  .leistungen-section,.das-system-section,.referenzen-section,.cta-section{padding:64px 24px}
  .cards-grid{grid-template-columns:1fr}
  .system-grid{grid-template-columns:1fr;gap:40px}
  .ref-grid{grid-template-columns:1fr}
  .leistung-block{grid-template-columns:1fr;gap:32px;padding:40px 24px}
  .leistung-visual{order:0 !important}
  .leistung-content{order:1 !important}
  .leistung-block.reverse .leistung-visual{order:0}
  .process-section,.tools-section,.warum-section{padding:56px 24px}
  .tools-grid{grid-template-columns:1fr}
  .warum-grid{grid-template-columns:1fr}
  .kontakt-main{grid-template-columns:1fr;gap:40px;padding:48px 24px 60px}
  .form-row{grid-template-columns:1fr}
  .kontakt-form-wrap{padding:28px 20px}
  .vantix-footer{padding:32px 24px;flex-direction:column;align-items:center;text-align:center}
  
  .das-system-left{display:block !important;width:100% !important;padding-right:0 !important;margin-bottom:32px}
  .das-system-right{display:block !important;width:100% !important;padding-left:0 !important}
}

/* BEISPIELE – Mobile */
@media(max-width:900px){
  .beispiele-content{flex-direction:column !important}
  .beispiele-img{order:0 !important;width:100% !important;min-width:unset !important}
  .beispiele-text{order:1 !important;width:100% !important;min-width:unset !important}
}

/* FIX: Leistungen mobil - Icon/Visual immer über Text */
@media (max-width: 768px) {
  body .leistung-block,
  body .leistung-block.reverse,
  body .leistung-block.bg-light {
    display: flex !important;
    flex-direction: column !important;
  }

  body .leistung-block > .leistung-visual,
  body .leistung-block.reverse > .leistung-visual,
  body .leistung-block.bg-light > .leistung-visual {
    order: 1 !important;
    width: 100% !important;
  }

  body .leistung-block > .leistung-content,
  body .leistung-block.reverse > .leistung-content,
  body .leistung-block.bg-light > .leistung-content {
    order: 2 !important;
    width: 100% !important;
  }
}

/* FIX: Mobile Überschneidung bei langen Leistungstiteln */
@media (max-width: 768px) {

  .leistung-card h3,
  .leistung-content h3 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 12px !important;
  }

  .leistung-card,
  .leistung-content {
    overflow: hidden !important;
  }

}

/* FIX: Beispiele mobil - lange Ablauf-/Ergebnistexte nicht überlappen lassen */
@media (max-width: 768px) {
  .beispiele-text div[style*="display:flex"] {
    gap: 16px !important;
  }

  .beispiele-text span {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 390px) {
  .beispiele-text div[style*="min-width:120px"] {
    min-width: 100% !important;
  }
}

/* FIX V5: Beispiele mobil - Ablauf und Ergebnis untereinander, keine Überschneidung */
@media (max-width: 768px) {
  .beispiele-text > div[style*="margin-bottom:8px"][style*="display:flex"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .beispiele-text > div[style*="margin-bottom:8px"][style*="display:flex"] > div {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .beispiele-text > div[style*="margin-bottom:8px"][style*="display:flex"] span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}

/* V6: Beispiele mobil stabilisieren */
.vx-example-split { align-items: flex-start; }
@media (max-width: 768px) {
  .vx-example-split {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .vx-example-split > div {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }
  .vx-example-split span {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.4 !important;
  }
}

/* V6: bessere Lesbarkeit und Fokus-Sichtbarkeit */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #b7f000 !important;
  outline-offset: 3px !important;
}

.hero-title { max-width: 920px; }
.hero-sub, .section-sub, .page-hero-sub { max-width: 760px; }

/* V7: Startseite Hero-Text klarer trennen */
.hero-title-structured {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 760px;
  margin-bottom: 22px;
}

.hero-title-structured span,
.hero-title-structured em {
  display: block;
}

/* "und Solo-Selbständige." etwas kleiner als der Rest der H1 (em-relativ → skaliert an jedem Breakpoint) */
.hero-title-structured span:last-child {
  font-size: 0.85em;
}

.hero-title-structured em {
  position: relative;
}

.hero-title-structured em::after {
  content: '';
  display: block;
  width: 160px;
  height: 4px;
  background: var(--accent);
  border-radius: 99px;
  margin-top: 14px;
}

.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 760px;
  margin: 0 0 34px;
  animation: fadeUp .7s .25s ease both;
}

.hero-benefit {
  background: var(--graphite);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 16px 16px 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

.hero-benefit strong {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}

.hero-benefit span {
  display: block;
  font-size: 0.86rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.72);
}

@media (max-width: 1024px) {
  .hero-benefits { grid-template-columns: 1fr; max-width: 540px; }
}

@media (max-width: 768px) {
  .hero-title-structured { gap: 0; margin-bottom: 18px; }
  .hero-title-structured em::after { width: 110px; height: 3px; margin-top: 10px; }
  .hero-sub { margin-bottom: 22px; }
  .hero-benefits { gap: 10px; margin-bottom: 28px; }
  .hero-benefit { padding: 14px; }
}

/* V9 FINAL: Leistungen-Layout eindeutig setzen
   Desktop: sauberes Zig-Zag. Mobil: Icon/Visual immer über Text. */
@media (min-width: 769px) {
  .leistung-block {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
  }

  .leistung-block > .leistung-content,
  .leistung-block > .leistung-visual {
    width: 100% !important;
  }

  .leistung-block:not(.reverse) > .leistung-content {
    order: 1 !important;
  }

  .leistung-block:not(.reverse) > .leistung-visual {
    order: 2 !important;
  }

  .leistung-block.reverse > .leistung-visual {
    order: 1 !important;
  }

  .leistung-block.reverse > .leistung-content {
    order: 2 !important;
  }
}

@media (max-width: 768px) {
  .leistung-block,
  .leistung-block.reverse,
  .leistung-block.bg-light {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .leistung-block > .leistung-visual,
  .leistung-block.reverse > .leistung-visual,
  .leistung-block.bg-light > .leistung-visual {
    order: 1 !important;
    width: 100% !important;
  }

  .leistung-block > .leistung-content,
  .leistung-block.reverse > .leistung-content,
  .leistung-block.bg-light > .leistung-content {
    order: 2 !important;
    width: 100% !important;
  }
}

/* V11: Hero-Logo nicht gestaucht anzeigen */
.hero-image-wrap {
  max-width: 430px !important;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  max-width: 430px;
  max-height: 430px;
  object-fit: contain !important;
}
@media (max-width: 1024px) {
  .hero-image-wrap { max-width: 340px !important; }
  .hero-image img { max-width: 340px; max-height: 340px; }
}
@media (max-width: 768px) {
  .hero-image-wrap { max-width: 240px !important; margin: 0 auto; }
  .hero-image img { max-width: 240px; max-height: 240px; }
}

/* V18: Mobile Startseite ohne großes Hero-Logo
   Der erste Bildschirm zeigt direkt Nutzen, Karten und Einstieg. Das 3D-Logo bleibt auf Desktop erhalten. */
@media (max-width: 768px) {
  .hero {
    display: block !important;
    padding-top: 72px !important;
    min-height: auto !important;
    background: #ffffff !important;
  }

  .hero-bg,
  .hero-image,
  .hero-image-wrap,
  .hero-image-glow {
    display: none !important;
  }

  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 36px 20px 40px !important;
    text-align: left !important;
  }

  .hero-tag {
    max-width: 100% !important;
    margin-bottom: 18px !important;
  }

  .hero-title,
  .hero-title-structured {
    max-width: 100% !important;
    margin-bottom: 14px !important;
    font-size: clamp(2rem, 7.5vw, 2.8rem) !important;
  }

  .hero-sub {
    max-width: 100% !important;
    margin-bottom: 18px !important;
    font-size: 1rem !important;
  }

  .hero-actions {
    gap: 12px !important;
    margin-bottom: 4px !important;
  }

  .hero-actions .btn-primary {
    width: 100%;
    text-align: center;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
  }

  .hero-actions .btn-ghost {
    font-size: 0.9rem !important;
  }

  .section-header {
    margin-bottom: 32px !important;
  }
}

@media (max-width: 390px) {
  .hero-content {
    padding: 38px 18px 42px !important;
  }
}

/* ── PRICING SECTION (v2 – alle Variablen korrigiert) ───────────────── */
.preise-section{padding:80px 80px 60px;background:var(--light)}
.preise-section .section-sub{max-width:640px}
.preise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:48px 0 28px}
.preis-card{background:var(--white);border:1.5px solid rgba(32,36,39,0.1);border-radius:16px;padding:36px 32px;position:relative;display:flex;flex-direction:column;box-shadow:0 2px 12px rgba(32,36,39,0.06);transition:transform .25s,box-shadow .25s}
.preis-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(32,36,39,0.12)}
.preis-card--featured{border-color:var(--accent);border-width:2px;box-shadow:0 4px 24px rgba(183,240,0,0.18)}
.preis-card--featured:hover{box-shadow:0 12px 40px rgba(183,240,0,0.25)}
.preis-badge{position:absolute;top:-14px;left:24px;background:var(--accent);color:#202427;font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:20px}
.preis-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.preis-amount{font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:4px}
.preis-type{font-size:0.82rem;color:var(--muted);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(32,36,39,0.08)}
.preis-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.preis-list li{font-size:0.875rem;color:var(--text);padding-left:22px;position:relative;line-height:1.5}
.preis-list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--blue);font-weight:700;font-size:0.85rem}
.preis-note{font-size:0.8rem;color:var(--muted);line-height:1.6;margin-top:auto;padding-top:16px;border-top:1px solid rgba(32,36,39,0.08)}
.preise-foerder-hint{font-size:0.88rem;color:var(--muted);text-align:center;max-width:620px;margin:0 auto;line-height:1.7}
.preise-foerder-hint strong{color:var(--navy)}
.preise-foerder-hint a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.preise-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.preise-grid{grid-template-columns:1fr}.preis-card--featured{order:-1}}
@media(max-width:768px){.preise-section{padding:56px 24px 40px}}

/* ── BLOG INDEX (home.php) ─────────────────────────────────────────────── */
.blog-hero{padding:80px 80px 72px}
.blog-index-section{padding:72px 80px 56px;background:var(--light)}
.blog-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-bottom:48px}
.blog-index-card{background:var(--white);border-radius:16px;padding:36px 32px;border:1px solid rgba(32,36,39,0.08);display:flex;flex-direction:column;gap:0;transition:transform .25s,box-shadow .25s;cursor:pointer}
.blog-index-card:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(32,36,39,0.12);border-color:rgba(183,240,0,0.2)}
.blog-index-date{font-family:'Outfit',sans-serif;font-size:0.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:12px;display:block}
.blog-index-title{font-family:'Outfit',sans-serif;font-size:1.1rem;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:14px}
.blog-index-title a{color:inherit;text-decoration:none;transition:color .2s}
.blog-index-card:hover .blog-index-title a{color:var(--blue)}
.blog-index-excerpt{font-size:0.875rem;color:var(--muted);line-height:1.7;flex:1;margin-bottom:20px}
.blog-index-link{font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;color:var(--blue);text-decoration:none;display:inline-flex;align-items:center;gap:6px;margin-top:auto;transition:gap .2s}
.blog-index-card:hover .blog-index-link{gap:10px}
.blog-index-card-top{display:flex;flex-direction:column;flex:1}
.blog-index-pagination{text-align:center}
.blog-index-pagination .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.blog-index-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;background:var(--white);border:1px solid rgba(32,36,39,0.12);color:var(--navy);font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:600;text-decoration:none;transition:all .2s}
.blog-index-pagination .page-numbers.current,.blog-index-pagination .page-numbers:hover{background:var(--navy);color:var(--white);border-color:var(--navy)}
.blog-index-empty{color:var(--muted);font-size:1rem;text-align:center;padding:40px 0}

/* ── BLOG SINGLE (single.php) ──────────────────────────────────────────── */
.blog-single-hero{padding:80px 80px 72px}
.blog-single-wrap{max-width:760px;margin:0 auto;padding:64px 40px}
.blog-single-content h2{font-family:'Outfit',sans-serif;font-size:1.4rem;font-weight:700;color:var(--navy);margin:36px 0 14px;letter-spacing:-.02em}
.blog-single-content p{font-size:1rem;color:var(--text);line-height:1.8;margin-bottom:18px}
.blog-single-content ul,.blog-single-content ol{margin:0 0 20px 20px}
.blog-single-content li{font-size:0.95rem;color:var(--text);line-height:1.75;margin-bottom:6px}
.blog-single-content a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.blog-single-content a:not(.btn-primary){transition:color .2s ease,text-decoration-color .2s ease}
.blog-single-content a:not(.btn-primary):hover{color:#647D00;text-decoration-color:#647D00}
.blog-single-content strong{color:var(--navy);font-weight:600}
.blog-single-content hr{border:none;border-top:1px solid rgba(32,36,39,0.1);margin:32px 0}
.blog-single-back{margin-top:40px;padding-top:32px;border-top:1px solid rgba(32,36,39,0.08)}
.blog-back-link{color:var(--blue);font-size:0.875rem;text-decoration:none;transition:color .2s}
.blog-back-link:hover{color:var(--navy)}
.blog-single-cta{margin-top:0}
@media(max-width:768px){.blog-single-wrap{padding:40px 24px}.blog-single-hero{padding:56px 24px 48px}}

/* ── PRICING CARDS v3 – clickable anchor cards ─────────────────────────── */
.preis-card-link{display:flex;flex-direction:column;background:var(--white);border:1.5px solid rgba(32,36,39,0.1);border-radius:16px;padding:36px 32px;text-decoration:none;color:inherit;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;box-shadow:0 2px 12px rgba(32,36,39,0.06);position:relative}
.preis-card-link:hover,.preis-card-link.visible:hover{transform:scale(1.03) translateY(-4px)!important;box-shadow:0 16px 48px rgba(32,36,39,0.14);border-color:rgba(183,240,0,0.3);text-decoration:none;color:inherit}
.preis-card-link--featured{border-color:var(--accent);border-width:2px;box-shadow:0 4px 24px rgba(183,240,0,0.18)}
.preis-card-link--featured:hover,.preis-card-link--featured.visible:hover{transform:scale(1.04) translateY(-6px)!important;box-shadow:0 20px 56px rgba(183,240,0,0.28);border-color:var(--accent)}
.preis-cta-btn{display:inline-block;margin-top:20px;padding:11px 24px;background:#202427;color:#B7F000;border:2px solid #B7F000;border-radius:8px;font-family:'Outfit',sans-serif;font-size:0.875rem;font-weight:600;text-align:center;transition:background .25s ease,color .25s ease,box-shadow .35s ease}
.preis-card-link:hover .preis-cta-btn{background:#B7F000;color:#202427;box-shadow:0 0 20px rgba(183,240,0,.5),0 0 44px rgba(183,240,0,.28)}
.preis-cta-btn--featured{background:#202427}
.preis-card-link:hover .preis-cta-btn--featured{background:#B7F000;color:#202427;box-shadow:0 0 20px rgba(183,240,0,.5),0 0 44px rgba(183,240,0,.28)}
/* Remove old .preis-card div hover since cards are now <a> tags */
.preis-card-link .preis-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.preis-card-link .preis-amount{font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;color:var(--navy);line-height:1;margin-bottom:4px}
.preis-card-link .preis-type{font-size:0.82rem;color:var(--muted);margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid rgba(32,36,39,0.08)}
.preis-card-link .preis-list{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.preis-card-link .preis-list li{font-size:0.875rem;color:var(--text);padding-left:22px;position:relative;line-height:1.5}
.preis-card-link .preis-list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--blue);font-weight:700;font-size:0.85rem}
.preis-card-link .preis-note{font-size:0.8rem;color:var(--muted);line-height:1.6;padding-top:16px;border-top:1px solid rgba(32,36,39,0.08);margin-bottom:0}
.preis-card-link .preis-badge{position:absolute;top:-14px;left:24px;background:var(--accent);color:#202427;font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 14px;border-radius:20px}
@media(max-width:768px){.blog-index-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.blog-index-section{padding:48px 24px 40px}.blog-hero{padding:56px 24px 48px}}
@media(max-width:480px){.blog-index-grid{grid-template-columns:1fr}}
/* vx 2026-06-03: blog card mobile readability + image overflow safety */
.blog-index-card img.wp-post-image{max-width:100%;height:auto}
@media(max-width:768px){.blog-index-card{padding:28px 24px}.blog-index-title{font-size:1.125rem}.blog-index-excerpt{font-size:1rem}.blog-index-link{font-size:1rem}.blog-index-card .wp-post-image{height:200px;object-fit:cover}}

/* ═══════════════════════════════════════════════════════
   AUDIT-UPDATE v31 – Neue Sektionen & Overwrites
   Alle Blöcke mit Kommentar für schnelle Navigation
═══════════════════════════════════════════════════════ */

/* ── HERO: Trust-Row ─────────────────────────────────── */
.hero-trust-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;padding-top:24px;border-top:1px solid rgba(32,36,39,0.1);}
.hero-trust-item{display:flex;align-items:center;gap:7px;font-size:0.8rem;color:var(--muted);font-family:'Outfit',sans-serif;font-weight:500;}

/* ── TOOL-KOMPATIBILITÄT (Startseite + Beispiele) ──── */

/* ── PRAXISBEISPIEL-VORSCHAU (Startseite) ────────────── */
.home-preview-section{padding:80px 80px 60px;background:var(--white);}
.preview-examples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.preview-example-card{background:var(--light);border-radius:16px;padding:32px 28px;border:1px solid rgba(32,36,39,0.07);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column;}
.preview-example-card:hover{transform:translateY(-4px);border-color:rgba(183,240,0,0.5);box-shadow:0 12px 40px rgba(32,36,39,0.12),0 0 22px rgba(183,240,0,0.28),0 0 52px rgba(183,240,0,0.14);}
.practice-icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 48px;
  border-radius: 12px;
  background: #202427;
  border: 1px solid rgba(183, 240, 0, 0.24);
  box-shadow: 0 8px 20px rgba(32, 36, 39, 0.10);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}
.home-preview-section .practice-icon{margin-bottom:14px;}
.practice-icon svg {
  width: 30px;
  height: 30px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: #B7F000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.practice-icon svg path,
.practice-icon svg rect,
.practice-icon svg circle,
.practice-icon svg line,
.practice-icon svg polyline {
  fill: none;
  stroke: #B7F000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) and (pointer: fine) {
  .preview-example-card:hover .practice-icon {
    border-color: rgba(183, 240, 0, 0.68);
    box-shadow:
      0 0 0 1px rgba(183, 240, 0, 0.18),
      0 0 22px rgba(183, 240, 0, 0.18),
      0 10px 24px rgba(32, 36, 39, 0.14);
    transform: translateY(-1px);
  }
}
.preview-example-title{font-family:'Outfit',sans-serif;font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:10px;line-height:1.35;}
.preview-example-text{font-size:0.88rem;color:var(--muted);line-height:1.7;max-width:100%;}
.preview-example-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
@media(min-width:901px){.preview-example-text{min-height:7.5em}.preview-example-badges{margin-top:auto;padding-top:18px;}}

/* Badges – Zeit & Fehlerersparnis */
.badge-time{display:inline-flex;align-items:center;gap:5px;background:rgba(183,240,0,0.18);border:1.5px solid rgba(183,240,0,0.55);color:#202427;font-family:'Outfit',sans-serif;font-size:0.82rem;font-weight:600;padding:4px 12px;border-radius:20px;}
.badge-error{display:inline-flex;align-items:center;gap:5px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);color:#166534;font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:600;padding:5px 10px;border-radius:100px;}
.badge-icon{width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 14px;color:currentColor}
.badge-icon svg{width:14px;height:14px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}
.badge-icon svg path,.badge-icon svg rect,.badge-icon svg circle,.badge-icon svg line,.badge-icon svg polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* ── ABLAUF-TIMELINE (defensiv: !important auf Sichtbarkeits-kritische Props) ── */
.ablauf-section{background:var(--light)!important;padding:140px 0 80px!important;display:block!important;}
.ablauf-header{text-align:center!important;max-width:880px!important;margin:0 auto 56px!important;padding:0 20px!important;display:block!important;opacity:1!important;visibility:visible!important;}
.ablauf-eyebrow{display:inline-block!important;font-family:'Outfit',sans-serif!important;font-size:0.82rem!important;font-weight:700!important;letter-spacing:0.16em!important;text-transform:uppercase!important;color:var(--accent)!important;background:var(--graphite)!important;padding:8px 18px!important;border-radius:100px!important;margin-bottom:24px!important;opacity:1!important;visibility:visible!important;}
.ablauf-title{font-family:'Outfit',sans-serif!important;font-size:clamp(1.8rem,3.2vw,2.5rem)!important;font-weight:800!important;letter-spacing:-0.025em!important;line-height:1.2!important;color:var(--navy)!important;margin:0 0 18px!important;text-wrap:balance;display:block!important;opacity:1!important;visibility:visible!important;}
.ablauf-title em{color:var(--blue)!important;font-style:normal!important;font-weight:800!important;}
.ablauf-sub{font-size:1.05rem!important;color:var(--muted)!important;line-height:1.6!important;margin:0 auto!important;max-width:580px!important;display:block!important;opacity:1!important;visibility:visible!important;}
.ablauf-inner{max-width:820px;margin:0 auto;padding:0 80px;}
.ablauf-timeline{margin-top:48px;}
.ablauf-step{display:grid;grid-template-columns:64px 1fr;gap:24px;align-items:start;}
.ablauf-step-num{width:64px;height:64px;border-radius:50%;background:var(--white);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:0.8rem;font-weight:800;color:var(--blue);flex-shrink:0;box-shadow:0 0 0 6px rgba(183,240,0,0.07);}
.ablauf-step-num--active{background:var(--navy);color:var(--accent);border-color:var(--navy);box-shadow:0 0 0 6px rgba(32,36,39,0.08),0 4px 20px rgba(32,36,39,0.2);}
.ablauf-step-badge{display:inline-block;font-family:'Outfit',sans-serif;font-size:0.68rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:6px;}
.ablauf-step-title{font-family:'Outfit',sans-serif;font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px;line-height:1.25;}
.ablauf-step-text{font-size:0.9rem;color:var(--muted);line-height:1.55;}
.ablauf-step p,.ablauf-step-text{margin-bottom:0;}
.ablauf-step-detail{margin-top:12px;padding:10px 16px;background:rgba(183,240,0,0.08);border-left:3px solid var(--accent);border-radius:0 6px 6px 0;font-size:0.82rem;color:var(--navy);font-family:'Outfit',sans-serif;}
.ablauf-connector{padding:0 0 0 31px;margin:-4px 0;line-height:0;display:block;}
.ablauf-connector svg{display:block;}

/* ── HOME-SYSTEM-SECTION: CSS-Grid statt display:table ── */
.home-system-section .section-title{color:#ffffff}
.home-system-section .section-label{color:var(--blue)}
.home-system-section{background:var(--navy);padding:80px 0;position:relative;overflow:hidden;isolation:isolate;}
.home-system-section::before{content:'';position:absolute;top:-120px;right:-120px;width:500px;height:500px;background:radial-gradient(circle,rgba(183,240,0,0.07) 0%,transparent 70%);border-radius:50%;pointer-events:none;}
.home-system-inner{max-width:1200px;margin:0 auto;padding:0 80px;display:flex;flex-direction:column;gap:0;align-items:stretch;}
.home-system-steps{display:flex;flex-direction:column;gap:0;}
.home-system-step{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.08);}
.home-system-step:last-child{border-bottom:none;}
.home-system-step-num{font-family:'Outfit',sans-serif;font-size:0.7rem;font-weight:800;letter-spacing:0.1em;color:var(--blue);min-width:28px;padding-top:2px;}
.home-system-step-title{font-family:'Outfit',sans-serif;font-weight:700;color:#ffffff;margin-bottom:4px;}
.home-system-step-text{font-size:0.88rem;color:rgba(255,255,255,0.6);line-height:1.65;margin-bottom:0!important}
.home-system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.home-system-box{background:rgba(183,240,0,0.06);border:1px solid rgba(183,240,0,0.25);border-radius:16px;padding:28px;display:flex;flex-direction:column;height:100%;}
.home-system-box--highlight {
  position: relative;
  overflow: hidden;
  background: rgba(183,240,0,0.08);
  border: none;
}
.home-system-box--highlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--angle, 0deg),
    transparent 0deg,
    #b7f000 60deg,
    transparent 120deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box,
                linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate 3s linear infinite;
  opacity: 1;
  z-index: 0;
}
.home-system-box--highlight > * {
  position: relative;
  z-index: 1;
}
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes rotate { to { --angle: 360deg; } }
.home-system-box-title{font-family:'Outfit',sans-serif;font-weight:700;color:#ffffff;margin-bottom:10px;}
.home-system-box-text{font-size:0.85rem;color:rgba(255,255,255,0.55);line-height:1.65;}
.home-system-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.home-system-section .tool-tag,.home-system-tags .tool-tag{background:rgba(183,240,0,0.15);border:1px solid rgba(183,240,0,0.3);color:var(--blue);font-family:'Outfit',sans-serif;font-size:0.78rem;font-weight:600;padding:5px 12px;border-radius:100px;}

/* ── BEISPIELE-SEITE ─────────────────────────────────── */
.beispiele-stats-section{background:var(--navy);padding:40px 80px;}
.beispiele-stats-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;text-align:center;}
.beispiele-stat strong{font-family:'Outfit',sans-serif;font-size:2.2rem;font-weight:800;color:var(--blue);display:block;line-height:1;}
.beispiele-stat span{font-size:0.85rem;color:rgba(255,255,255,0.6);margin-top:8px;display:block;line-height:1.5;}

.beispiel-section{padding:80px 0;}
.beispiel-section--white{background:var(--white);}
.beispiel-section--light{background:var(--light);}
.beispiel-container{max-width:1200px;margin:0 auto;padding:0 80px;}
.beispiel-meta{margin-bottom:40px;}
.beispiel-layout{display:grid;grid-template-columns:340px 1fr;gap:56px;align-items:center;}
.beispiel-layout--reverse{grid-template-columns:1fr 340px;}
.beispiel-layout--reverse .beispiel-text{order:2;}
.beispiel-layout--reverse .beispiel-img-wrap{order:1;}

.beispiel-szenario{background:rgba(183,240,0,0.06);border:1px solid rgba(183,240,0,0.15);border-radius:10px;padding:20px 24px;margin-bottom:20px;}
.beispiel-szenario-title{font-family:'Outfit',sans-serif;font-size:0.72rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:8px;}
.beispiel-szenario p{font-size:0.88rem;color:var(--text);line-height:1.7;}

.beispiel-badges{display:flex;flex-wrap:wrap;gap:8px;}

.beispiel-tool-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;align-items:center;}

/* Flow-Diagramm für Beispiel 3 */
.beispiel-visual-box{display:flex;align-items:center;justify-content:center;}
.beispiel-flow{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--white);border:1px solid rgba(32,36,39,0.08);border-radius:16px;padding:34px 40px;width:100%;max-width:340px;box-shadow:0 4px 24px rgba(32,36,39,0.06);}
.beispiel-flow-step{display:flex;align-items:center;gap:14px;width:100%;padding:16px 18px;border-radius:10px;border:1px solid rgba(32,36,39,0.08);}
.beispiel-flow-step--active{background:var(--navy);border-color:var(--navy);}
.beispiel-flow-step--active .beispiel-flow-label{color:#ffffff;}
.beispiel-flow-icon{font-size:1.3rem;flex-shrink:0;}
.beispiel-flow-label{font-family:'Outfit',sans-serif;font-size:0.85rem;font-weight:600;color:var(--navy);}
.beispiel-flow-arrow{font-size:1.2rem;color:var(--blue);padding:8px 0;font-weight:700;}

/* ── BÜRO-CHECK MULTI-STEP FORM ────────────────────────── */
.bcheck-steps{display:flex;align-items:center;margin-bottom:28px;gap:0;}
.bcheck-step{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.bcheck-step-num{width:28px;height:28px;border-radius:50%;background:rgba(32,36,39,0.08);border:2px solid rgba(32,36,39,0.15);display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:800;color:var(--muted);transition:.25s;}
.bcheck-step-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:600;color:var(--muted);transition:.25s;}
.bcheck-step--active .bcheck-step-num{background:var(--navy);border-color:var(--navy);color:#fff;}
.bcheck-step--active .bcheck-step-label{color:var(--navy);}
.bcheck-step--done .bcheck-step-num{background:var(--accent);border-color:var(--accent);color:#fff;}
.bcheck-step-line{flex:1;height:2px;background:rgba(32,36,39,0.1);margin:0 8px;}
.bcheck-panel{animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.bcheck-fieldset{border:none;padding:0;margin:0 0 20px;}
.bcheck-legend{font-family:'Outfit',sans-serif;font-size:0.95rem;font-weight:700;color:var(--navy);margin-bottom:18px;display:block;line-height:1.4;}
.bcheck-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bcheck-options--check{grid-template-columns:1fr 1fr;}
.bcheck-option{cursor:pointer;}
.bcheck-option input{position:absolute;opacity:0;width:0;height:0;}

.bcheck-option:hover .bcheck-option-inner,.bcheck-option input:focus-visible + .bcheck-option-inner{border-color:rgba(183,240,0,0.4);}
.bcheck-option input:checked + .bcheck-option-inner,.bcheck-option--selected .bcheck-option-inner{border-color:var(--accent);border-width:2px;background:rgba(183,240,0,0.08);box-shadow:0 0 0 3px rgba(183,240,0,0.12),0 10px 24px rgba(183,240,0,0.12);}
.bcheck-option-icon{font-size:1.3rem;flex-shrink:0;line-height:1.2;}
.bcheck-option-text{font-family:'DM Sans',sans-serif;font-size:0.87rem;font-weight:600;color:var(--navy);line-height:1.3;}
.bcheck-option-text small{font-weight:400;color:var(--muted);display:block;font-size:0.78rem;margin-top:2px;}
.bcheck-next{background:var(--accent);color:#fff;border:none;border-radius:8px;padding:12px 28px;font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;cursor:pointer;transition:background .2s,opacity .2s,transform .2s,box-shadow .2s;margin-top:4px;margin-left:auto;box-shadow:0 10px 24px rgba(183,240,0,0.22);}
.bcheck-next:hover:not(:disabled){background:var(--navy);transform:translateY(-1px);}
.bcheck-next:disabled{background:rgba(32,36,39,0.10);color:rgba(32,36,39,0.45);box-shadow:none;opacity:1;cursor:not-allowed;}
.bcheck-back{background:transparent;color:var(--muted);border:1px solid rgba(32,36,39,0.15);border-radius:8px;padding:12px 20px;font-family:'Outfit',sans-serif;font-size:0.9rem;cursor:pointer;transition:.2s;}
.bcheck-back:hover{color:var(--navy);border-color:rgba(32,36,39,0.3);}

/* ── KONTAKT: Timeline-Schritte ──────────────────────── */
.kontakt-timeline{display:flex;flex-direction:column;gap:0;margin-bottom:36px;}
.kontakt-timeline-step{display:flex;align-items:center;gap:14px;padding:12px 0;}
.kontakt-timeline-dot{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#fff;font-family:'Outfit',sans-serif;font-size:0.82rem;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.kontakt-timeline-step strong{font-family:'Outfit',sans-serif;font-size:0.9rem;font-weight:700;color:var(--navy);display:block;}
.kontakt-timeline-step span{font-size:0.8rem;color:var(--muted);}
.kontakt-timeline-line{width:2px;height:20px;background:rgba(183,240,0,0.25);margin-left:15px;}

.branch-link{color:var(--accent);text-decoration:none;font-weight:700;}
.branch-link:hover{text-decoration:underline;}

/* ── MOBILE RESPONSIVE – ALLE NEUEN BLÖCKE ──────────── */
@media(max-width:900px){
  .preview-examples-grid{grid-template-columns:1fr 1fr;}
  .beispiele-stats-grid{grid-template-columns:1fr;}
  .home-system-inner{grid-template-columns:1fr;}
  .beispiel-layout,.beispiel-layout--reverse{grid-template-columns:1fr;}
  .beispiel-layout--reverse .beispiel-text,.beispiel-layout--reverse .beispiel-img-wrap{order:unset;}
}

@media(max-width:768px){
  /* Tools */
  
  
  
  

  /* Preview */
  .home-preview-section{padding:56px 20px 40px;}
  .preview-examples-grid{grid-template-columns:1fr;}

  /* Ablauf */
  .ablauf-section{padding:72px 0 48px;}
  .ablauf-inner{padding:0 20px;}
  .ablauf-header{margin-bottom:32px;padding:0 4px;}
  .ablauf-eyebrow{font-size:0.7rem;padding:5px 12px;margin-bottom:14px;}
  .ablauf-title{font-size:clamp(1.4rem,5.5vw,1.85rem);margin-bottom:10px;}
  .ablauf-sub{font-size:0.9rem;}
  .ablauf-timeline{margin-top:28px;}
  .ablauf-step-text{
    font-size:0.875rem!important;
    line-height:1.5!important;
    -webkit-text-size-adjust:none;
  }
  .ablauf-step-title{
    font-size:1rem!important;
    line-height:1.2!important;
  }
  .ablauf-step{grid-template-columns:48px 1fr;gap:16px;}
  .ablauf-step-num{width:48px;height:48px;font-size:0.72rem;}
  .ablauf-connector{padding:0 0 0 23px;margin:-3px 0;}
  .ablauf-step-detail{margin-top:8px;padding:8px 12px;font-size:0.78rem;}

  /* System */
  .home-system-inner{padding:0 20px;gap:40px;}
  .home-system-section{padding:56px 0;}

  /* Beispiele */
  .beispiele-stats-section{padding:32px 20px;}
  .beispiel-container{padding:0 20px;}
  .beispiel-section{padding:56px 0;}
  .beispiel-flow{padding:28px 22px;max-width:100%;gap:14px;}
  .beispiel-flow-step{padding:18px 16px;margin:2px 0;}
  .beispiel-flow-arrow{padding:10px 0;}

  /* Büro-Check Form */
  .bcheck-options,.bcheck-options--check{grid-template-columns:1fr;}
  .bcheck-steps{overflow:hidden;}
  .bcheck-step-label{display:none;}

  /* Kontakt */
  .kontakt-main{padding:40px 20px 60px;grid-template-columns:1fr;gap:40px;}
  .kontakt-form-wrap{padding:28px 20px;}

  /* Badges */
  .badge-time,.badge-error{font-size:0.72rem;}
}

@media(max-width:480px){
  .hero-trust-row{gap:12px;}
  .hero-trust-item{font-size:0.75rem;}
  .preview-example-card{padding:24px 20px;}
  .ablauf-step{grid-template-columns:40px 1fr;gap:12px;}
  .ablauf-step-num{width:40px;height:40px;font-size:0.68rem;}
  .ablauf-connector{padding:0 0 0 19px;margin:-3px 0;}
  .bcheck-option-inner{padding:12px 12px;}
  .bcheck-option-icon{font-size:1.1rem;}
}

/* ── v31.1 UPDATE: Studio/Salon Erweiterungen ───────────── */

/* Tool-Logo Shore/Treatwell – Pink/Teal Hover */

/* Salon-Beispiel Flow-Step Icons */
.beispiel-flow-step .beispiel-flow-icon { font-size: 1.4rem; }

/* ── v31.2 BUG-FIXES: Missing class rules ─────────── */

/* ablauf-step-body: flex column container within the grid step */
.ablauf-step-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* home-system-header / home-system-grid: header + boxes grid styling */
.home-system-header {
  display: flex;
  flex-direction: column;
  max-width: 680px;
}
.home-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

/* ── v31.2: page-das-system.php tool-card Shore/Treatwell ─ */
.tool-card { transition: transform .2s, box-shadow .2s; }
.tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(32,36,39,0.1);
}

/* ── v31.2: Kontakt-Form – 5-option grid fix (overrides .bcheck-options) */

/* Last child spans if odd number */


/* ── v31.2: Hero trust row – prevent overflow on small screens */
@media (max-width: 480px) {
  .hero-trust-row {
    flex-direction: column;
    gap: 8px;
  }
}

/* ── v31.3 FIX 6: Beispiele – workflow-thumb & img-inner (aus Inline-Style) ── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.workflow-thumb{width:100%;background:none;border:none;padding:0;cursor:zoom-in;display:block;text-align:left;}
.workflow-thumb:focus-visible > .beispiel-img-inner{outline:3px solid #b7f000;outline-offset:3px;border-radius:14px;}
.workflow-thumb:hover > .beispiel-img-inner{transform:scale(1.015);box-shadow:0 20px 64px rgba(32,36,39,0.22)!important;}
.beispiel-img-inner{border-radius:14px;overflow:hidden;box-shadow:0 12px 48px rgba(32,36,39,0.15);border:1px solid rgba(32,36,39,0.08);transition:transform .25s,box-shadow .25s;}
.beispiel-img-inner img,.beispiel-img-inner picture{display:block;width:100%;height:auto;max-width:100%;}

/* ══════════════════════════════════════════════════
   v31.3 FINAL RENDER-FIXES
══════════════════════════════════════════════════ */

/* FIX: home-system-inner mobile padding */
@media(max-width:900px) {
  .home-system-inner { padding: 0 40px; gap: 48px; }
}
@media(max-width:768px) {
  .home-system-inner { 
    grid-template-columns: 1fr !important;
    padding: 0 20px !important;
    gap: 32px !important;
  }
  .home-system-grid { grid-template-columns: 1fr !important; }
}

/* FIX: leistungen-section cards – mobile wrap */
@media(max-width:900px) {
  .cards-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
}

/* FIX: preview-examples-grid 900px */
@media(max-width:900px) {
  .preview-examples-grid { grid-template-columns: 1fr !important; }
}

/* FIX: hero-benefit strong → kein margin-bottom, sicherer Abstand */
.hero-benefit strong { display:block; margin-bottom:4px; }
.hero-benefit span { display:block; }

/* FIX: ablauf-step auf sehr kleinen Screens */
@media(max-width:360px) {
  .ablauf-step { grid-template-columns: 36px 1fr; gap: 10px; }
  .ablauf-step-num { width: 36px; height: 36px; font-size: 0.65rem; }
  .ablauf-step-title { font-size: 0.95rem; }
  .ablauf-connector { padding: 0 0 0 17px; margin: -3px 0; }
}

/* FIX: beispiel-layout mobile padding */
@media(max-width:768px) {
  .beispiel-container { padding: 0 20px !important; }
  .beispiel-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .beispiel-layout--reverse { grid-template-columns: 1fr !important; }
  .beispiel-layout--reverse .beispiel-text,
  .beispiel-layout--reverse .beispiel-img-wrap { order: unset !important; }
  .beispiel-stat { padding: 0 12px; }
}

/* FIX: kontakt-form-wrap mobile */
@media(max-width:600px) {
  .kontakt-form-wrap { padding: 24px 16px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .bcheck-steps { gap: 0; }
}


/* FIX: page-hero padding auf Mobile */
@media(max-width:768px) {
  .page-hero { padding: 100px 20px 48px !important; }
  .page-hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
}

/* FIX: cta-section mobile */
@media(max-width:768px) {
  .cta-section { padding: 64px 20px !important; }
  .cta-section .section-title { font-size: clamp(1.65rem, 7vw, 2.1rem) !important; }
}

.bcheck-next--active:not(:disabled),
.bcheck-next:not(:disabled){
  background:var(--accent);
  color:#fff;
  box-shadow:0 10px 24px rgba(183,240,0,0.24);
  opacity:1;
  cursor:pointer;
}
.bcheck-next--active:hover:not(:disabled){
  background:var(--navy);
  transform:translateY(-1px);
}
.bcheck-option--selected .bcheck-option-inner,
.bcheck-option input:checked + .bcheck-option-inner{
  border:2px solid var(--accent);
  background:rgba(183,240,0,0.08);
  box-shadow:0 0 0 3px rgba(183,240,0,0.12),0 10px 24px rgba(183,240,0,0.12);
}

@media(max-width:768px){
  .beispiel-flow{
    gap:14px;
    padding:18px 16px;
  }
  .beispiel-flow-step{
    padding:17px 15px;
    margin:0 0 2px;
  }
  .beispiel-flow-arrow{
    margin:0;
    line-height:1.4;
  }
  .beispiel-tool-row{
    gap:10px;
  }
  
}

/* ══════════════════════════════════════════════════
   v31.5 UI-FIX: echte Brand-Assets, Kontaktformular, Mobile Flow
══════════════════════════════════════════════════ */

/* Kontaktformular: sauberes Grid, keine versetzte fünfte Kachel */

.kontakt-form-wrap *,
.kontakt-form-wrap *::before,
.kontakt-form-wrap *::after{
  box-sizing:border-box;
}


.bcheck-option{
  display:block;
  min-width:0;
}

.bcheck-option input:checked + .bcheck-option-inner,
.bcheck-option--selected .bcheck-option-inner{
  border-color:var(--accent)!important;
  background:rgba(183,240,0,0.08)!important;
  box-shadow:0 0 0 3px rgba(183,240,0,0.14),0 10px 24px rgba(183,240,0,0.10)!important;
}
.bcheck-option input:focus-visible + .bcheck-option-inner{
  outline:3px solid rgba(183,240,0,0.28);
  outline-offset:2px;
}
.bcheck-next:not(:disabled),
.bcheck-next--active{
  background:var(--accent)!important;
  color:#fff!important;
  border:none!important;
  opacity:1!important;
  box-shadow:0 10px 24px rgba(183,240,0,0.24)!important;
  cursor:pointer!important;
}
.bcheck-next:hover:not(:disabled),
.bcheck-next--active:hover:not(:disabled){
  background:var(--navy)!important;
}
.bcheck-next:disabled{
  background:rgba(32,36,39,0.10)!important;
  color:rgba(32,36,39,0.44)!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
.form-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.form-group,
.form-group input,
.form-group textarea{
  min-width:0;
  width:100%;
}

/* Praxisbeispiel 03: Flowchart auf Mobile stärker getrennt */

@media(max-width:768px){
  
  
  .beispiel-flow{
    gap:20px!important;
    padding:26px 18px!important;
  }
  .beispiel-flow-step{
    padding:20px 16px!important;
    margin:0!important;
  }
  .beispiel-flow-arrow{
    padding:0!important;
    margin:-8px 0!important;
    line-height:1.1!important;
  }
}
@media(max-width:600px){
  .bcheck-options,
  .bcheck-options--check{
    grid-template-columns:1fr!important;
  }
  .form-row{
    grid-template-columns:1fr!important;
  }
  .bcheck-option-inner{
    min-height:64px;
  }
  
}
@media(max-width:420px){
  
  
  .beispiel-flow{
    gap:22px!important;
    padding:24px 14px!important;
  }
  .beispiel-flow-step{
    padding:18px 14px!important;
  }
}

/* ══════════════════════════════════════════════════
   v31.6 UI-FIX: reale Logoquellen, Praxisbeispiel, Büro-Check Layout
══════════════════════════════════════════════════ */

/* Logo-Chips: echte Bildmarken sauber skalieren; Text nur bei Icon-Logos sichtbar */
/* Praxisbeispiel 03: weniger Textdruck, größere Visualisierung */
.beispiel-layout{
  grid-template-columns:minmax(280px,.78fr) minmax(420px,1.22fr);
  gap:76px;
  align-items:center;
}
.beispiel-text{
  min-width:0;
  max-width:430px;
}
.beispiel-visual-box{
  width:100%;
  min-width:0;
  justify-content:center;
}
.beispiel-flow{
  width:100%;
  max-width:460px;
  gap:17px;
  padding:42px 44px;
  border-radius:20px;
  box-shadow:0 16px 42px rgba(32,36,39,0.08);
}
.beispiel-flow-step{
  width:100%;
  min-height:64px;
  padding:18px 22px;
  border-radius:12px;
}
.beispiel-flow-label{
  font-size:.9rem;
  line-height:1.35;
}
.beispiel-flow-arrow{
  padding:4px 0;
  margin:0;
  line-height:1;
}

/* Kontakt/Büro-Check: kein horizontales Wegschieben, saubere Desktop- und Tablet-Breite */
.kontakt-main{
  width:100%;
  max-width:1160px;
  margin:0 auto;
  padding:96px 32px 120px;
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,760px);
  gap:56px;
  align-items:start;
  box-sizing:border-box;
  overflow:visible;
}
.kontakt-main > *{min-width:0;}
.kontakt-form-wrap{
  width:100%;
  max-width:760px;
  margin:0;
  padding:42px 38px;
  border-radius:22px;
  box-sizing:border-box;
  overflow:hidden;
}
.kontakt-form-wrap *{box-sizing:border-box;}

.bcheck-options,
.bcheck-options--check{
  min-width:0;
}
.bcheck-option-inner{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  min-width:0;
  min-height:78px;
  padding:16px 14px;
  background:#fff;
  border:1px solid rgba(32,36,39,0.16);
  border-radius:10px;
  box-sizing:border-box;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bcheck-option-text{
  min-width:0;
  overflow-wrap:anywhere;
}
.bcheck-option input:checked + .bcheck-option-inner,
.bcheck-option--selected .bcheck-option-inner{
  border:2px solid var(--accent)!important;
  background:rgba(183,240,0,0.09)!important;
  box-shadow:0 0 0 3px rgba(183,240,0,0.14),0 12px 26px rgba(32,36,39,0.08)!important;
}
.bcheck-next:not(:disabled),
.bcheck-next--active{
  background:var(--accent)!important;
  color:#fff!important;
  opacity:1!important;
  box-shadow:0 10px 24px rgba(183,240,0,0.24)!important;
}
.bcheck-next:disabled{
  background:#dbe0d8!important;
  color:rgba(32,36,39,.48)!important;
}

@media(max-width:1180px){
  .kontakt-main{
    max-width:880px;
    grid-template-columns:1fr;
    gap:34px;
    padding:76px 28px 110px;
  }
  .kontakt-form-wrap{
    max-width:860px;
  }
  .kontakt-intro{
    max-width:720px;
  }
}
@media(max-width:980px){
  .beispiel-layout{
    grid-template-columns:1fr;
    gap:36px;
  }
  .beispiel-text{
    max-width:680px;
  }
  .beispiel-flow{
    max-width:560px;
  }
}
@media(max-width:768px){
  .kontakt-main{
    padding:60px 18px 90px;
  }
  .kontakt-form-wrap{
    padding:30px 18px;
    border-radius:18px;
  }
  .bcheck-options,
  .bcheck-options--check{
    grid-template-columns:1fr!important;
  }
  .bcheck-option-inner{
    min-height:66px;
  }
  .beispiel-flow{
    max-width:100%;
    gap:24px!important;
    padding:28px 18px!important;
  }
  .beispiel-flow-step{
    min-height:72px;
    padding:20px 18px!important;
  }
  .beispiel-flow-arrow{
    margin:-5px 0!important;
    padding:0!important;
  }
}

@media(max-width:400px){
  
  .kontakt-form-wrap{padding:26px 14px;}
}
.kontakt-info{min-width:0;max-width:720px;}
@media(max-width:1180px){.kontakt-info{max-width:720px;}}

/* ══════════════════════════════════════════════════
   v31.9 UX & A11Y VERBESSERUNGEN
   Skip-Link, Focus-States, Sticky-CTA, Form-Errors
══════════════════════════════════════════════════ */

/* Visually-hidden Utility (für Screenreader-Only Headings) */
.vh{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Skip-Link – sichtbar nur bei Tastatur-Fokus */
.skip-link{
  position:absolute;
  top:-100px;
  left:8px;
  z-index:9999;
  background:var(--navy,#202427);
  color:#fff;
  padding:12px 20px;
  border-radius:0 0 8px 8px;
  font-family:'Outfit',sans-serif;
  font-weight:600;
  font-size:0.9rem;
  text-decoration:none;
  transition:top .2s;
}
.skip-link:focus{
  top:0;
  outline:3px solid #b7f000;
  outline-offset:2px;
}

/* Globale :focus-visible für alle interaktiven Elemente */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #b7f000;
  outline-offset:2px;
  border-radius:4px;
}
/* Sonderfall: Buttons haben oft eigenes Border-Radius */
.btn-primary:focus-visible,
.btn-ghost:focus-visible,
.form-submit:focus-visible,
.bcheck-next:focus-visible,
.bcheck-back:focus-visible,
.nav-cta:focus-visible{
  outline-offset:3px;
}
/* Nav-Links Focus */
.nav-links a:focus-visible{
  outline-offset:4px;
  border-radius:3px;
}
/* Cards Focus (über Card-Links) */
.card a:focus-visible{
  outline-offset:4px;
}

/* aria-current für aktive Nav-Items – sanfter Indikator */
.nav-links a[aria-current="page"]{
  position:relative;
}
.nav-links a[aria-current="page"]::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-6px;
  transform:translateX(-50%);
  width:18px;
  height:2px;
  background:#b7f000;
  border-radius:2px;
}

/* Form-Error Inline-Box (statt alert()) */
.form-error{
  background:#fef2f2;
  border:1px solid #fecaca;
  border-left:4px solid #dc2626;
  color:#7f1d1d;
  padding:12px 16px;
  border-radius:6px;
  font-size:0.9rem;
  line-height:1.5;
  margin-bottom:14px;
  font-family:'DM Sans','Outfit',sans-serif;
}
.form-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}

/* ═══ STICKY MOBILE CTA – Conversion-Boost für Handwerker/KMU ═══ */
.mobile-sticky-cta{
  display:none;
}
@media(max-width:768px){
  .mobile-sticky-cta{
    display:block;
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:90;
    background:#fff;
    border-top:1px solid rgba(32,36,39,0.1);
    box-shadow:0 -4px 20px rgba(32,36,39,0.08);
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .mobile-sticky-cta.is-visible{
    transform:translateY(0);
  }
  .mobile-sticky-cta a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    background:var(--navy);
    color:#B7F000;
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:1rem;
    padding:14px 20px;
    border-radius:10px;
    text-decoration:none;
    box-shadow:0 4px 16px rgba(183,240,0,0.3);
  }
  .mobile-sticky-cta a::after{
    content:'→';
    font-weight:400;
    transition:transform .2s;
  }
  .mobile-sticky-cta a:hover::after,
  .mobile-sticky-cta a:focus-visible::after{
    transform:translateX(4px);
  }
  /* Body Padding damit Content nicht von Sticky verdeckt wird */
  body.has-sticky-cta{
    padding-bottom:72px;
  }
  /* Auf Kontaktseite NICHT zeigen (User ist schon da) */
  body.page-kontakt .mobile-sticky-cta{
    display:none;
  }
  body.page-kontakt.has-sticky-cta{
    padding-bottom:0;
  }
}

/* Reduced motion respektieren */
@media(prefers-reduced-motion:reduce){
  .mobile-sticky-cta{
    transition:none;
  }
  .skip-link{
    transition:none;
  }
}

/* ══════════════════════════════════════════════════════════
   v31.10 – BEISPIELE, BLOG, KONTAKT REDESIGN
══════════════════════════════════════════════════════════ */

/* ── BEISPIELE: neues konsistentes Layout ───────────── */
.beispiel-container { max-width:1140px; margin:0 auto; padding:0 60px; }
.beispiel-section   { padding:72px 0; }
.beispiel-section--white { background:#fff; }
.beispiel-section--light  { background:var(--light,#f4f6f2); }

/* Eyebrow: Nummer + Branche */
.beispiel-eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}
.beispiel-num {
  font-family:'Outfit',sans-serif;
  font-size:0.72rem;
  font-weight:800;
  letter-spacing:0.14em;
  color:#fff;
  background:var(--navy,#202427);
  border-radius:4px;
  padding:3px 8px;
  line-height:1.4;
}
.beispiel-branche {
  font-family:'Outfit',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue,#b7f000);
}

.beispiel-title {
  font-family:'Outfit',sans-serif;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:800;
  color:var(--navy,#202427);
  line-height:1.2;
  margin-bottom:36px;
  max-width:800px;
}

/* Zwei-Spalten Grid: Text + Visual – BEIDE RICHTUNGEN GLEICH (kein --reverse) */
.beispiel-two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:center;
}

/* Text-Seite */
.beispiel-lead {
  font-size:0.95rem;
  color:var(--muted,#4A5550);
  line-height:1.8;
  margin-bottom:20px;
}
.beispiel-results { margin-bottom:20px; }
.beispiel-results-label {
  font-family:'Outfit',sans-serif;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue,#b7f000);
  margin-bottom:10px;
}
.beispiel-result-row {
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(32,36,39,0.06);
  font-size:0.88rem;
  color:var(--text,#202427);
  font-family:'DM Sans',sans-serif;
}
.result-check { width:16px; height:16px; flex-shrink:0; margin-top:1px; }

/* Vorher/Nachher Vergleich */
.beispiel-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:20px;
}
.compare-col-label {
  font-family:'Outfit',sans-serif;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.compare-col-label--bad  { color:#DC2626; }
.compare-col-label--good { color:var(--blue,#b7f000); }
.compare-row {
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid rgba(32,36,39,0.06);
  font-size:0.84rem;
  color:var(--text,#202427);
  font-family:'DM Sans',sans-serif;
}
.compare-icon { width:14px; height:14px; flex-shrink:0; margin-top:2px; }

.beispiel-footer { margin-top:20px; }
.beispiel-badges { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.beispiel-tags   { display:flex; flex-wrap:wrap; gap:6px; }

/* Zoom-Hint */
.zoom-hint { font-size:0.73rem; color:var(--muted,#4A5550); text-align:center; margin-top:10px; font-style:italic; }

/* Visual-Seite: beide kalibriert */
.beispiel-visual { position:relative; }

/* ── SVG-Flow-Diagramm (Beispiel 03) ──────────────── */
.beispiel-flow-card {
  background:#fff;
  border:1px solid rgba(32,36,39,0.1);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 6px 32px rgba(32,36,39,0.07);
}
.bfc-title {
  background:var(--navy,#202427);
  color:#fff;
  font-family:'Outfit',sans-serif;
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  padding:12px 20px;
}
.bfc-steps { padding:12px 20px 20px; display:flex; flex-direction:column; gap:0; }

.bfc-step {
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:12px;
  align-items:center;
  background:var(--light,#f4f6f2);
  border:1px solid rgba(32,36,39,0.08);
  border-radius:10px;
  padding:12px 14px;
}
.bfc-step--active {
  background:var(--navy,#202427);
  border-color:var(--navy,#202427);
}
.bfc-step-icon {
  width:36px; height:36px;
  border-radius:8px;
  background:rgba(32,36,39,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.bfc-step--active .bfc-step-icon {
  background:rgba(255,255,255,0.15);
}
.bfc-step-icon svg { width:18px; height:18px; }

.bfc-step-body { min-width:0; }
.bfc-step-label {
  font-family:'Outfit',sans-serif;
  font-size:0.85rem;
  font-weight:700;
  color:var(--navy,#202427);
  line-height:1.2;
}
.bfc-step--active .bfc-step-label { color:#fff; }
.bfc-step-sub {
  font-size:0.75rem;
  color:var(--muted,#4A5550);
  margin-top:2px;
  line-height:1.4;
}
.bfc-step--active .bfc-step-sub { color:rgba(255,255,255,0.7); }

.bfc-step-status {
  font-family:'Outfit',sans-serif;
  font-size:0.65rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted,#4A5550);
  background:rgba(32,36,39,0.06);
  border-radius:100px;
  padding:3px 8px;
  white-space:nowrap;
}
.bfc-step-status--active {
  color:var(--blue,#b7f000);
  background:rgba(183,240,0,0.15);
}

.bfc-connector {
  display:flex;
  justify-content:center;
  padding:4px 0;
}
.bfc-connector svg { width:24px; height:16px; }

/* ── BLOG: Karten-Verbesserung ─────────────────── */
.blog-index-card {
  transition:transform .22s, box-shadow .22s;
}
.blog-index-card:hover {
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(32,36,39,0.1);
}
.blog-index-date {
  display:block;
  font-family:'Outfit',sans-serif;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--blue,#b7f000);
  margin-bottom:10px;
}

/* ── KONTAKT: Hero + Layout ────────────────────── */
.kontakt-hero {
  padding-bottom:40px!important;
}
.kontakt-hero .page-hero-title {
  font-size:clamp(2.2rem,5vw,3.2rem)!important;
}
.kontakt-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:1140px;
  margin:0 auto;
  padding:48px 60px 80px;
  align-items:start;
}
.kontakt-info {
  padding-right:48px;
  border-right:1px solid rgba(32,36,39,0.08);
}
.kontakt-form-wrap {
  padding-left:48px;
  background:transparent;
  box-shadow:none;
  border:none;
  border-radius:0;
}
.form-title {
  font-family:'Outfit',sans-serif;
  font-size:1.15rem;
  font-weight:800;
  color:var(--navy,#202427);
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:2px solid rgba(183,240,0,0.2);
}
.kontakt-sub {
  font-size:0.92rem;
  color:var(--muted,#4A5550);
  line-height:1.7;
  margin-bottom:28px;
}

/* MOBILE responsive */
@media(max-width:900px) {
  .beispiel-two-col    { grid-template-columns:1fr; gap:32px; }
  .beispiel-container  { padding:0 24px; }
  .beispiel-compare    { grid-template-columns:1fr; gap:0; }
  .kontakt-main {
    grid-template-columns:1fr;
    padding:32px 20px 60px;
    gap:48px;
  }
  .kontakt-info { padding-right:0; border-right:none; border-bottom:1px solid rgba(32,36,39,0.08); padding-bottom:40px; }
  .kontakt-form-wrap { padding-left:0; }
  .bfc-step { grid-template-columns:36px 1fr auto; gap:10px; }
}
@media(max-width:600px) {
  .beispiel-section { padding:48px 0; }
  .beispiel-title   { font-size:1.4rem; }
  .bfc-step-status  { display:none; }
  .bfc-step { grid-template-columns:32px 1fr; gap:10px; }
}
.beispiel-body{display:flex;flex-direction:column;}
/* ══ BÜRO-CHECK: 5-Optionen Grid – final, sauber ══
   Desktop: 2-Spalten, 5. Item zentriert über beide
   Mobile:  1 Spalte, alle Items gleichmäßig      */
.bcheck-options--five {
  grid-template-columns: 1fr 1fr;
}
.bcheck-options--five .bcheck-option:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
}
.bcheck-options--five .bcheck-option:last-child:nth-child(odd) .bcheck-option-inner {
  width: 50%;
}
@media (max-width: 768px) {
  .bcheck-options--five {
    grid-template-columns: 1fr !important;
  }
  .bcheck-options--five .bcheck-option:last-child:nth-child(odd) .bcheck-option-inner {
    width: 100%;
  }
}

/* Weiter-Button rechts ausrichten */
.bcheck-btn-row{
  display:flex;
  align-items:center;
  margin-top:4px;
}

/* ══ ÜBER UNS: Foto mobile zentriert ══ */
@media(max-width:768px){
  .founder-layout{
    flex-direction:column!important;
    align-items:center!important;
    gap:32px!important;
  }
  .founder-photo-wrap{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  .founder-photo-wrap picture,
  .founder-photo-wrap img{
    margin:0 auto!important;
  }
}

/* ══════════════════════════════════════════════════
   v31.25 CONSOLIDATED DISPLAY FIXES
   Desktop + Mobile — Front Page, Sections, Overflow
══════════════════════════════════════════════════ */

/* GLOBAL: Prevent horizontal overflow on all major sections */
.hero,
.leistungen-section,
.home-preview-section,
.ablauf-section,
.home-system-section,
.cta-section,
.page-hero,
.preise-section,
.beispiel-section,
.warum-section,
.referenzen-section {
  overflow-x: hidden;
}
.leistungen-section{overflow:visible}

/* Desktop: section-header spacing */
@media (min-width: 769px) {
  .section-header { margin-bottom: 56px; }
}

/* Tablet: tighter spacing */
@media (max-width: 900px) {
  .leistungen-section { padding: 56px 24px !important; }
  .section-header { margin-bottom: 36px !important; }
}

/* Mobile: all sections */
@media (max-width: 768px) {
  /* Leistungen cards */
  .leistungen-section { padding: 48px 20px !important; }

  /* Preview section */
  .preview-example-title { font-size: 0.95rem !important; }
  .preview-example-text { font-size: 0.84rem !important; }

  /* Ablauf section */
  .ablauf-step-badge { font-size: 0.64rem !important; }

  /* Home system section */
  .home-system-section { padding: 48px 0 !important; }
  .home-system-box { padding: 22px !important; }
  .home-system-box-title { font-size: 0.95rem !important; }
  .home-system-box-text { font-size: 0.82rem !important; line-height: 1.6 !important; }
  .home-system-step-text { font-size: 0.84rem !important; }

  /* CTA section */
  .cta-section .section-sub { font-size: 0.95rem !important; max-width: 100% !important; }
  .cta-section .btn-primary { padding: 14px 28px !important; font-size: 0.95rem !important; }

  /* Footer */
  .vantix-footer { padding: 36px 24px !important; gap: 16px !important; }
  .footer-links { justify-content: center !important; flex-wrap: wrap !important; gap: 16px !important; }
  .footer-copy { text-align: center !important; }

  /* Hero trust row */
  .hero-trust-row { margin-top: 20px !important; padding-top: 16px !important; gap: 10px !important; }

  /* Hero benefits cards */
  .hero-benefit { padding: 12px 14px !important; }
  .hero-benefit strong { font-size: 0.88rem !important; }
  .hero-benefit span { font-size: 0.82rem !important; }

  /* Card section */
  .card { padding: 28px 24px !important; }
  .card-title { font-size: 1.05rem !important; }
  .card-text { font-size: 0.88rem !important; }
}

/* Small Mobile */
@media (max-width: 480px) {
  .hero-content { padding: 32px 16px 36px !important; }
  .hero-tag { font-size: 0.72rem !important; padding: 5px 12px !important; }
  .section-title { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; }
  .section-sub { font-size: 0.92rem !important; }
  .home-system-inner { padding: 0 16px !important; }
  .home-system-box { padding: 18px !important; }
  .tool-tag { font-size: 0.72rem !important; padding: 4px 10px !important; }
  .ablauf-inner { padding: 0 16px !important; }
}

/* Extra small */
@media (max-width: 360px) {
  .hero-content { padding: 28px 14px 32px !important; }
  .hero-title, .hero-title-structured { font-size: 1.75rem !important; }
  .hero-sub { font-size: 0.92rem !important; }
  .btn-primary { padding: 12px 20px !important; font-size: 0.9rem !important; }
  .section-title { font-size: 1.4rem !important; }
}

/* ── BLOG SINGLE: Eyebrow + Tabelle + Button ── */
.blog-hero-eyebrow{display:block;font-family:'Outfit',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#b7f000;margin-bottom:10px}
.blog-single-hero .page-hero-title{font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1.2}

/* Tabelle Modern */
.blog-single-content table{width:100%;border-collapse:collapse;margin:28px 0;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(32,36,39,0.08)}
.blog-single-content thead tr{background:var(--navy)}
.blog-single-content thead th{padding:14px 20px;text-align:left;font-family:'Outfit',sans-serif;font-size:0.8rem;font-weight:700;letter-spacing:0.10em;text-transform:uppercase;color:rgba(255,255,255,0.85);border:none}
.blog-single-content tbody tr{background:#fff;border-bottom:1px solid rgba(32,36,39,0.06);transition:background .15s}
.blog-single-content tbody tr:last-child{border-bottom:none}
.blog-single-content tbody tr:nth-child(even){background:#f4f6f2}
.blog-single-content tbody tr:hover{background:rgba(183,240,0,0.04)}
.blog-single-content td{padding:13px 20px;font-size:0.93rem;color:var(--text);vertical-align:top;line-height:1.6}
.blog-single-content td:first-child{font-family:'Outfit',sans-serif;font-weight:600;color:var(--navy);white-space:nowrap;min-width:120px}

/* Button in Blog-Content: weißer Text */
.blog-single-content a.btn-primary,.blog-single-content .btn-primary{background:#202427!important;color:#B7F000!important;border:2px solid #B7F000!important;text-decoration:none!important;display:inline-block;transition:background .25s ease,color .25s ease,box-shadow .35s ease,transform .25s ease!important}
.blog-single-content a.btn-primary:hover{background:#B7F000!important;color:#202427!important;box-shadow:0 0 22px rgba(183,240,0,.55),0 0 60px rgba(183,240,0,.32),0 8px 24px rgba(0,0,0,.22)!important;transform:translateY(-3px) scale(1.03)!important}


/* === BLOG: Checkliste modern === */
.blog-single-content ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:8px}
.blog-single-content ul li{position:relative;padding:11px 16px 11px 50px;background:#f4f6f2;border-radius:10px;border:1px solid rgba(183,240,0,0.12);font-size:0.93rem;color:var(--text);line-height:1.6;margin-bottom:0}
.blog-single-content ul li::before{content:✓;position:absolute;left:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:#b7f000;color:#fff;border-radius:50%;font-size:12px;font-weight:900;line-height:24px;text-align:center}

/* === BLOG: Fehler-Blöcke mit pulsierendem X === */
.blog-single-content p.vx-fehler{position:relative;padding:12px 16px 12px 50px;background:rgba(231,76,60,0.05);border-radius:10px;border-left:3px solid rgba(231,76,60,0.25);margin:20px 0 6px}
.blog-single-content p.vx-fehler::before{content:✕;position:absolute;left:11px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:#e74c3c;color:#fff;border-radius:50%;font-size:11px;font-weight:900;line-height:24px;text-align:center;animation:xPulse 2s ease infinite}
@keyframes xPulse{0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,0.45)}50%{box-shadow:0 0 0 6px rgba(231,76,60,0)}}
.blog-single-content p.vx-fehler strong{color:var(--navy)}

/* === BLOG: Hero zentriert === */
.blog-single-hero{text-align:center}
.blog-single-hero .page-hero-label,.blog-single-hero .blog-hero-eyebrow{text-align:center;display:block}
.blog-single-hero .page-hero-title{text-align:center}

/* === FIX: Checkliste Hover (grüner Check animiert) === */
.blog-single-content ul li{transition:background .2s,border-color .2s,transform .18s;cursor:default}
.blog-single-content ul li:hover{background:#f0fdf4;border-color:rgba(34,197,94,0.4);transform:translateX(5px)}
.blog-single-content ul li::before{transition:background .2s,transform .2s}
.blog-single-content ul li:hover::before{background:#1D9E75;transform:translateY(-50%) scale(1.25);animation:checkPop .3s cubic-bezier(.4,0,.2,1)}
@keyframes checkPop{0%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.5)}100%{transform:translateY(-50%) scale(1.25)}}

/* === FIX: Fehler — stärker + X rechts === */
.blog-single-content p.vx-fehler{background:rgba(231,76,60,0.10);border-left:4px solid #e74c3c;border-radius:10px;padding:13px 52px 13px 16px!important}
.blog-single-content p.vx-fehler::before{left:auto!important;right:12px;width:26px;height:26px;font-size:13px;background:#e74c3c;box-shadow:0 2px 8px rgba(231,76,60,0.4);animation:xPulse2 1.6s ease infinite}
@keyframes xPulse2{0%,100%{box-shadow:0 2px 8px rgba(231,76,60,0.4),0 0 0 0 rgba(231,76,60,0.4)}50%{box-shadow:0 2px 8px rgba(231,76,60,0.4),0 0 0 7px rgba(231,76,60,0)}}

/* === FIX: Datum links, Eyebrow + H1 zentriert === */
.blog-single-hero .page-hero-label{text-align:left!important;display:block}
.blog-single-hero .blog-hero-eyebrow{text-align:center;display:block}
.blog-single-hero .page-hero-title{text-align:center}

/* === ICON FIX: display:flex für sichtbare ::before Icons === */

/* Checkliste: ✓ Haken */
.blog-single-content ul li{position:relative!important;padding:11px 16px 11px 52px!important}
.blog-single-content ul li::before{
  content:'\2713'!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  left:12px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:26px!important;
  height:26px!important;
  background:#b7f000!important;
  color:#fff!important;
  border-radius:50%!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  transition:background .2s,transform .2s!important;
}
.blog-single-content ul li:hover::before{
  background:#1D9E75!important;
  transform:translateY(-50%) scale(1.2)!important;
}

/* Fehler: ✕ X rechts */
.blog-single-content p.vx-fehler{
  position:relative!important;
  padding:13px 52px 13px 16px!important;
  background:rgba(231,76,60,0.10)!important;
  border-left:4px solid #e74c3c!important;
  border-radius:10px!important;
}
.blog-single-content p.vx-fehler::before{
  content:'\00D7'!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  right:12px!important;
  left:auto!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:26px!important;
  height:26px!important;
  background:#e74c3c!important;
  color:#fff!important;
  border-radius:50%!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1!important;
  box-shadow:0 2px 8px rgba(231,76,60,0.4)!important;
  animation:xPulse2 1.6s ease infinite!important;
}

/* === ICON FIX FINAL === */
.blog-single-content ul li{position:relative!important;padding:11px 16px 11px 52px!important;list-style:none!important}
.blog-single-content ul li::before{
  content:'\2713'!important;
  position:absolute!important;
  left:12px!important;top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;height:26px!important;
  background:#b7f000!important;
  color:#fff!important;
  border-radius:50%!important;
  font-size:14px!important;font-weight:900!important;line-height:1!important;
  transition:background .2s,transform .2s!important;
}
.blog-single-content ul li:hover{background:#f0fdf4!important;border-color:rgba(34,197,94,0.4)!important;transform:translateX(5px)!important}
.blog-single-content ul li:hover::before{background:#1D9E75!important;transform:translateY(-50%) scale(1.25)!important}

.blog-single-content p.vx-fehler{
  position:relative!important;
  padding:13px 52px 13px 16px!important;
  background:rgba(231,76,60,0.10)!important;
  border-left:4px solid #e74c3c!important;
  border-radius:10px!important;
}
.blog-single-content p.vx-fehler::before{
  content:'\00D7'!important;
  position:absolute!important;
  right:12px!important;left:auto!important;
  top:50%!important;transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:26px!important;height:26px!important;
  background:#e74c3c!important;
  color:#fff!important;
  border-radius:50%!important;
  font-size:16px!important;font-weight:900!important;line-height:1!important;
  box-shadow:0 2px 8px rgba(231,76,60,0.5)!important;
  animation:xPulse3 1.6s ease infinite!important;
}
@keyframes xPulse3{
  0%,100%{box-shadow:0 2px 8px rgba(231,76,60,0.5),0 0 0 0 rgba(231,76,60,0.4)}
  50%{box-shadow:0 2px 8px rgba(231,76,60,0.5),0 0 0 8px rgba(231,76,60,0)}
}

/* === FIX 1: Hero weniger Leerraum === */
.blog-single-hero{padding:52px 80px 40px!important}
@media(max-width:768px){.blog-single-hero{padding:44px 24px 32px!important}}

/* === FIX 2: Nummerierte Liste mit blauen Kreisen === */
.blog-single-content ol.vx-numlist{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:vx-counter}
.blog-single-content ol.vx-numlist li{position:relative;padding:12px 16px 12px 54px;background:#f4f6f2;border-radius:10px;border:1px solid rgba(183,240,0,0.12);font-size:0.93rem;color:var(--text);line-height:1.6;counter-increment:vx-counter}
.blog-single-content ol.vx-numlist li::before{content:counter(vx-counter);position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:26px;height:26px;background:var(--navy);color:#fff;border-radius:50%;font-family:'Outfit',sans-serif;font-size:12px;font-weight:800;line-height:1}
.blog-single-content ol.vx-numlist li:hover{background:#f4f6f2;border-color:rgba(183,240,0,0.3);transform:translateX(4px);transition:all .18s}

/* === FIX 3: Szenario Vergleich === */
.vx-compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media(max-width:600px){.vx-compare{grid-template-columns:1fr}}
.vx-compare-card{border-radius:12px;padding:20px;position:relative}
.vx-compare-card p{font-size:0.88rem;line-height:1.65;margin:0;color:var(--text)}
.vx-compare-label{font-family:'Outfit',sans-serif;font-size:0.75rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:12px;padding:5px 10px;border-radius:6px;display:inline-block}
.vx-compare--bad{background:rgba(231,76,60,0.06);border:1.5px solid rgba(231,76,60,0.2)}
.vx-compare--bad .vx-compare-label{background:rgba(231,76,60,0.12);color:#c0392b}
.vx-compare--good{background:rgba(159,214,0,0.06);border:1.5px solid rgba(159,214,0,0.25)}
.vx-compare--good .vx-compare-label{background:rgba(159,214,0,0.12);color:#202427}

/* === FIX 5: Zurück zum Blog — besserer Link === */
.blog-single-back a.blog-back-link{display:inline-flex;align-items:center;gap:6px;color:var(--blue);font-weight:600;font-size:0.9rem;text-decoration:none;padding:8px 0;transition:gap .2s,color .2s}
.blog-single-back a.blog-back-link:hover{gap:10px;color:var(--navy)}
.blog-single-back a.blog-back-link::before{content:'←';transition:transform .2s}
.blog-single-back a.blog-back-link:hover::before{transform:translateX(-4px)}

/* === FIX 1: Hero Trust Items größer === */
.hero-trust-item{font-size:1rem!important;font-weight:600!important;color:rgba(255,255,255,0.92)!important;gap:10px!important;padding:6px 14px;background:rgba(255,255,255,0.08);border-radius:100px;border:1px solid rgba(255,255,255,0.15)}
.hero-trust-item svg{width:20px!important;height:20px!important;flex-shrink:0}
.hero-trust-row{gap:12px!important;margin-top:32px!important}

/* === FIX 2: Szenario-Vergleich übersichtlicher === */
.vx-compare{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0!important;align-items:stretch}
@media(max-width:600px){.vx-compare{grid-template-columns:1fr}}
.vx-compare-card{border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px}
.vx-compare-label{font-family:'Outfit',sans-serif;font-size:0.82rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:7px 14px;border-radius:8px;display:inline-flex;align-items:center;gap:8px;width:fit-content}
.vx-compare-label-icon{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 15px}
.vx-compare-label-icon svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}
.vx-compare-label-icon svg path,.vx-compare-label-icon svg rect,.vx-compare-label-icon svg circle,.vx-compare-label-icon svg line,.vx-compare-label-icon svg polyline{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.vx-compare-card p{font-size:0.95rem;line-height:1.75;margin:0;color:var(--text)}
.vx-compare--bad{background:rgba(231,76,60,0.07);border:2px solid rgba(231,76,60,0.25)}
.vx-compare--bad .vx-compare-label{background:rgba(231,76,60,0.15);color:#b91c1c;border:1px solid rgba(231,76,60,0.2)}
.vx-compare--good{background:rgba(159,214,0,0.07);border:2px solid rgba(159,214,0,0.3)}
.vx-compare--good .vx-compare-label{background:rgba(159,214,0,0.15);color:#202427;border:1px solid rgba(159,214,0,0.25)}

/* === FIX 3: Gesamte Blog-Card klickbar === */
.blog-index-card{position:relative!important;cursor:pointer}
.blog-index-card:hover{box-shadow:0 8px 32px rgba(32,36,39,0.14)!important;transform:translateY(-3px)!important}
.blog-index-title a::after{content:'';position:absolute;inset:0;z-index:1}
.blog-index-link{position:relative;z-index:2}
.blog-index-card *{position:relative}
.blog-index-title a{position:static}

/* === Blog Card: ganzer Block klickbar als <a> === */
a.blog-index-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;transition:transform .2s,box-shadow .2s}
a.blog-index-card:hover{transform:translateY(-4px);box-shadow:0 10px 36px rgba(32,36,39,0.15);text-decoration:none;color:inherit}
a.blog-index-card .blog-index-title{color:var(--navy)}
a.blog-index-card:hover .blog-index-title{color:var(--blue)}
a.blog-index-card .blog-index-link{color:var(--blue);font-weight:600;font-size:0.9rem;margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:4px;transition:gap .2s}
a.blog-index-card:hover .blog-index-link{gap:8px}

/* FIX: Trust Items — Farbe auf Navy (war weiß = unsichtbar) */
.hero-trust-item{
  color:var(--navy)!important;
  font-size:0.95rem!important;
  font-weight:600!important;
  gap:9px!important;
  background:rgba(255,255,255,0.85)!important;
  border:1px solid rgba(32,36,39,0.12)!important;
  padding:5px 14px!important;
  border-radius:100px!important;
}
.hero-trust-item svg{width:18px!important;height:18px!important}

/* FIX: Szenario — Schritte vertikal, größerer Text */
.vx-compare-card p{
  font-size:0.93rem!important;
  line-height:1.4!important;
}
.vx-step-flow{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none;
}
.vx-step-flow li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:0.88rem;
  line-height:1.5;
  color:var(--text);
}
.vx-step-flow li::before{
  content:'→';
  flex-shrink:0;
  font-weight:700;
  margin-top:1px;
}
.vx-step-flow li:first-child::before{
  content:'📥';
  font-size:0.85rem;
}
.vx-compare--bad .vx-step-flow li::before{color:#b91c1c}
.vx-compare--good .vx-step-flow li::before{color:#202427}
.vx-compare--good .vx-step-flow li:last-child::before{content:'✓';color:#15803d;font-weight:900}

/* === TRUST FIX: dunklere Graphite-Badges (Brand) === */
.hero-trust-item{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#202427!important;background:rgba(32,36,39,0.10)!important;border:1.5px solid rgba(32,36,39,0.20)!important;font-weight:600!important;padding:8px 16px!important;border-radius:999px!important;font-size:0.95rem!important}
.hero-trust-item svg{width:20px!important;height:20px!important;flex-shrink:0!important}

/* === SZENARIO FIX: Schritte als Zeilen === */
.vx-compare-card p{font-size:0.93rem!important;line-height:1.5!important}
.vx-compare-step{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:0.9rem;color:var(--text);line-height:1.5;border-bottom:1px solid rgba(0,0,0,0.05)}
.vx-compare-step:last-child{border-bottom:none}
.vx-compare-step-arrow{color:rgba(0,0,0,0.25);font-size:0.8rem;margin-top:2px;flex-shrink:0}
.vx-compare--bad .vx-compare-step-arrow{color:rgba(231,76,60,0.4)}
.vx-compare--good .vx-compare-step-arrow{color:rgba(159,214,0,0.5)}
.vx-compare-steps{display:flex;flex-direction:column;gap:2px;margin:0}

/* === vx-step-flow: Schritte als Zeilen mit Pfeilen === */
.vx-compare-card ul.vx-step-flow{list-style:none!important;margin:0!important;padding:0!important;display:flex;flex-direction:column;gap:0}
.vx-compare-card ul.vx-step-flow li{position:relative;padding:6px 8px 6px 24px;font-size:0.9rem;line-height:1.45;color:var(--text);border-bottom:1px solid rgba(0,0,0,0.05)}
.vx-compare-card ul.vx-step-flow li:last-child{border-bottom:none}
.vx-compare-card ul.vx-step-flow li::before{content:'→';position:absolute;left:4px;top:6px;font-size:0.8rem;font-weight:700;opacity:0.5}
.vx-compare--bad ul.vx-step-flow li::before{color:#e74c3c}
.vx-compare--good ul.vx-step-flow li::before{color:#202427}

/* === MOBILE: Beispiele Vorher=Rot / Nachher=Grün === */
@media(max-width:768px){
  .compare-col{
    border-radius:12px;
    padding:16px!important;
    margin-bottom:12px;
  }
  .compare-col:has(.compare-col-label--bad){
    background:rgba(231,76,60,0.07)!important;
    border:2px solid rgba(231,76,60,0.35)!important;
  }
  .compare-col:has(.compare-col-label--good){
    background:rgba(34,197,94,0.07)!important;
    border:2px solid rgba(34,197,94,0.35)!important;
  }
  .compare-col-label--bad{
    background:rgba(231,76,60,0.15)!important;
    color:#b91c1c!important;
    border-radius:6px;
    padding:4px 10px;
    font-weight:700;
    font-size:0.8rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:10px;
  }
  .compare-col-label--good{
    background:rgba(34,197,94,0.15)!important;
    color:#15803d!important;
    border-radius:6px;
    padding:4px 10px;
    font-weight:700;
    font-size:0.8rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    display:inline-block;
    margin-bottom:10px;
  }
}

/* === HD glyph-free status icons === */
.blog-single-content ul li::before{
  content:''!important;
}
.blog-single-content ul li::after{
  content:''!important;
  position:absolute!important;
  left:21px!important;
  top:50%!important;
  width:7px!important;
  height:12px!important;
  border:solid #fff!important;
  border-width:0 2px 2px 0!important;
  transform:translateY(-62%) rotate(45deg)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.blog-single-content ul li:hover::after{
  transform:translateY(-62%) rotate(45deg) scale(1.08)!important;
}
.blog-single-content p.vx-fehler::before{
  content:''!important;
}
.blog-single-content p.vx-fehler::after{
  content:''!important;
  position:absolute!important;
  right:19px!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  transform:translateY(-50%)!important;
  background:
    linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%)!important;
  pointer-events:none!important;
  z-index:1!important;
}

/* vx 2026-06-03 mobile hardening — blog single post (img/headings/tables) */
.blog-single-content img{max-width:100%;height:auto}
.blog-single-content h2,.blog-single-content h3{overflow-wrap:break-word;word-wrap:break-word}
@media(max-width:600px){.blog-single-content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}}

/* footer-center+sep 2026-06-05 */
.vantix-footer{position:relative}
.footer-sep{color:rgba(255,255,255,0.3);font-size:14px;margin:0 4px}
@media(min-width:901px){
  .footer-links{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}

/* ── Founder-Section Mobile-Polish 2026-06-05 ── */
@media(max-width:768px){
  .founder-section{ padding:56px 20px 64px !important; }
  .founder-section [style*="min-width:280px"]{ min-width:0 !important; }
}

/* A11y WCAG-AA Kontrast-Fixes 2026-06-05 */
.section-label{color:#202427}
.cta-section .section-label,.foerd-cta-section .section-label,.foerd-quiz-section .section-label,.home-system-section .section-label,.warum-section .section-label{color:#b7f000}
.footer-logo span{color:#b7f000}
.footer-links a,.footer-copy{color:#aeb5b0}

/* A11y WCAG-AA Kontrast-Fixes 2026-06-07 */
.hero-tag,
.ablauf-step-badge,
.leistung-label,
.blog-index-link,
a.blog-index-card .blog-index-link,
.blog-single-content a,
.blog-single-back a.blog-back-link,
.blog-back-link,
.preise-foerder-hint a,
.contact-item-label,
.foerd-card-link,
.bsp-case-num {
  color: var(--blue) !important;
}

.nav-cta,
.cta-section .btn-primary,
.form-submit:hover,
.bcheck-next,
.kontakt-timeline-dot,
.bcheck-step--done .bcheck-step-num,
.bsp-cta-btn {
  background: var(--accent) !important;
  color: var(--graphite) !important;
}

.nav-cta:hover,
.cta-section .btn-primary:hover,
.form-submit:hover,
.bcheck-next:hover {
  background: #9fd600 !important;
}

@media(hover:hover) and (pointer:fine){
  .cta-section .btn-primary.cta-hover-lift:hover{
    background-color:#C8FF1A!important;
    box-shadow:0 0 0 1px rgba(183,240,0,0.25),0 8px 22px rgba(183,240,0,0.20);
    transform:translateY(-1px);
  }
}

.bsp-screenshot-label {
  color: #fff !important;
}

.bsp-ba-label-before,
.bsp-ba-icon-r {
  color: #d63f3e !important;
}

.bsp-ba-label-after,
.bsp-ba-icon-g {
  color: #06875e !important;
}

.bsp-ba-icon{width:18px!important;height:18px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin-top:2px!important;flex:0 0 18px!important;font-size:0!important;line-height:0!important}
.bsp-ba-icon svg{width:18px!important;height:18px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;shape-rendering:geometricPrecision!important}
.bsp-ba-icon svg path,.bsp-ba-icon svg rect,.bsp-ba-icon svg circle,.bsp-ba-icon svg line,.bsp-ba-icon svg polyline{fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important}
.bsp-badge{display:inline-flex!important;align-items:center!important;gap:6px!important}
.bsp-badge-icon{width:16px!important;height:16px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 16px!important;color:currentColor!important}
.bsp-badge-icon svg{width:16px!important;height:16px!important;display:block!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;shape-rendering:geometricPrecision!important}
.bsp-badge-icon svg path,.bsp-badge-icon svg rect,.bsp-badge-icon svg circle,.bsp-badge-icon svg line,.bsp-badge-icon svg polyline{fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;vector-effect:non-scaling-stroke!important}

.bsp-badge {
  color: var(--text) !important;
}

.bsp-stat-num {
  color: #b7f000 !important;
}

.bsp-stat-label {
  color: #e9ece6 !important;
}

.bsp-hero-label {
  color: #b7f000 !important;
}

.bsp-guarantee {
  color: #dbe0d8 !important;
}

.page-hero.dark .page-hero-label,
.page-hero.dark .blog-hero-eyebrow,
.das-system-section .section-label,
.cta-section .section-label,
.home-system-section .section-label,
.home-system-section .tool-tag,
.home-system-tags .tool-tag,
.footer-logo span,
.vantix-footer a:hover {
  color: var(--blue-bright) !important;
}

.das-system-section .section-sub,
.system-box-text,
.step-text,
.cta-section .section-sub {
  color: rgba(255,255,255,0.78) !important;
}

.tool-tag,
.home-system-section .tool-tag,
.home-system-tags .tool-tag {
  background: rgba(183,240,0,0.15) !important;
  border-color: rgba(183,240,0,0.32) !important;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--graphite) !important;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover {
  background: #9fd600 !important;
  border-color: #9fd600 !important;
}


/* === HD-Audit 07.06.2026: Font-Smoothing === */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{text-rendering:optimizeLegibility}


/* Blog 07.06.2026: Hero-Eck-Glow entfernt + CTA-Button-Glow + Zurueck-zum-Blog-Pill */
.page-hero::before{display:none}
.cta-section .btn-primary{background:#202427!important;color:#B7F000!important;border:2px solid #B7F000!important;transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease!important}
.cta-section .btn-primary:hover,.cta-section .btn-primary.visible:hover{background:#b7f000!important;color:#202427!important;transform:translateY(-3px) scale(1.03)!important;box-shadow:0 0 22px rgba(183,240,0,.55),0 0 60px rgba(183,240,0,.32),0 8px 24px rgba(0,0,0,.22)!important}
.blog-single-back a.blog-back-link{display:inline-block;background:#202427!important;color:#B7F000!important;padding:10px 22px;border-radius:100px;transition:box-shadow .35s ease,transform .25s ease,background .2s ease}
.blog-single-back a.blog-back-link:hover{background:#B7F000!important;color:#202427!important;box-shadow:0 0 20px rgba(183,240,0,.5),0 0 44px rgba(183,240,0,.28)!important;transform:translateY(-2px)}

/* Nav-CTA Hover-Glow (07.06.2026) */
.nav-cta{background:#202427!important;color:#B7F000!important;border:2px solid #B7F000!important;transition:background .25s ease,color .25s ease,box-shadow .35s ease,transform .2s ease!important}
.nav-cta:hover{background:#b7f000!important;color:#202427!important;box-shadow:0 0 18px rgba(183,240,0,.6),0 0 40px rgba(183,240,0,.32)!important;transform:translateY(-1px)}

.blog-single-cta .btn-primary,
body.blog .cta-section .btn-primary{
  background:#202427!important;
  color:#B7F000!important;
  border:2px solid #B7F000!important;
  box-shadow:none!important;
  transition:background .25s ease,color .25s ease,transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .4s ease!important;
}
.blog-single-cta .btn-primary:hover,
.blog-single-cta .btn-primary.visible:hover,
body.blog .cta-section .btn-primary:hover,
body.blog .cta-section .btn-primary.visible:hover{
  background:#B7F000!important;
  color:#202427!important;
  transform:translateY(-3px) scale(1.03)!important;
  box-shadow:0 0 22px rgba(183,240,0,.55),0 0 60px rgba(183,240,0,.32),0 8px 24px rgba(0,0,0,.22)!important;
}

body.postid-620 .blog-single-content ol.vx-numlist li::before{
  background:#202427!important;
  color:#B7F000!important;
  border:1px solid rgba(183,240,0,.45)!important;
  box-shadow:0 0 0 1px rgba(183,240,0,.10)!important;
  transition:background .2s ease,color .2s ease,box-shadow .28s ease,transform .22s ease!important;
}
body.postid-620 .blog-single-content ol.vx-numlist li:hover::before{
  color:#B7F000!important;
  box-shadow:0 0 0 1px rgba(183,240,0,.35),0 0 18px rgba(183,240,0,.55),0 0 38px rgba(183,240,0,.24)!important;
  transform:translateY(-50%) scale(1.08)!important;
}
body.postid-620 .blog-single-content table tbody tr,
body.postid-620 .blog-single-content table tbody td{
  transition:background .2s ease,color .2s ease,box-shadow .28s ease,border-color .2s ease!important;
}
body.postid-620 .blog-single-content table tbody tr:hover{
  background:rgba(183,240,0,.09)!important;
  box-shadow:inset 0 0 0 1px rgba(183,240,0,.38),0 0 22px rgba(183,240,0,.18)!important;
}
body.postid-620 .blog-single-content table tbody tr:hover td{
  color:#202427!important;
  background:rgba(183,240,0,.08)!important;
}
body.postid-620 .blog-single-content table tbody tr:hover td:first-child{
  color:#647D00!important;
  text-shadow:0 0 12px rgba(183,240,0,.45)!important;
}

/* Beispiele CTA 08.06.2026: graphite+lime, hover lime+graphite+glow */
.bsp-cta-btn{background:#202427!important;color:#B7F000!important;border:2px solid #B7F000!important;transition:background .25s ease,color .25s ease,box-shadow .35s ease,transform .25s ease!important}
.bsp-cta-btn:hover{background:#B7F000!important;color:#202427!important;box-shadow:0 0 20px rgba(183,240,0,.5),0 0 44px rgba(183,240,0,.28)!important;transform:translateY(-2px)!important}

/* Mobile-Menü offen: Cookie-Banner ausblenden + Menü zuverlässig obenauf (robust, ohne :has/dvh) */
body.vantix-menu-open .vantix-nav{z-index:100000}
body.vantix-menu-open #cmplz-cookiebanner-container,
body.vantix-menu-open .cmplz-cookiebanner{display:none !important}