:root{--navy:#071f49;--blue:#0869df;--blue2:#034ca5;--green:#20b53a;--green2:#0b9327;--purple:#9b39d4;--red:#d81f2a;--red2:#a4141d;--text:#10203d;--muted:#62708a;--line:#dce4ef;--soft:#f5f9ff;--white:#fff;--shadow:0 20px 55px rgba(20,50,95,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:#fff;line-height:1.6}a{color:inherit;text-decoration:none}.container{width:min(1160px,calc(100% - 40px));margin:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(215,225,238,.8)}.header-inner{height:82px;display:flex;align-items:center;gap:32px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand-mark{width:46px;height:46px;color:var(--navy)}.brand-mark svg{width:100%;height:100%;display:block}.footer-brand .brand-mark{color:#fff}.store-badge{display:inline-block;margin-top:22px}.store-badge img{height:40px;width:auto;display:block}.brand-text{font-size:18px;font-weight:700;line-height:1.15}.brand-text strong{display:block;color:var(--red)}.main-nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:14px;font-weight:600}.main-nav a:hover{color:var(--blue)}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:16px 22px;border-radius:12px;background:linear-gradient(135deg,var(--red),var(--red2));color:white;font-weight:800;box-shadow:0 12px 25px rgba(216,31,42,.25);transition:.25s transform,.25s box-shadow}.button:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(216,31,42,.32)}.button-small{padding:12px 17px;border-radius:10px;font-size:14px}.menu-button{display:none;background:none;border:0;padding:8px}.menu-button span{display:block;width:24px;height:2px;background:var(--navy);margin:5px}.hero{position:relative;overflow:hidden;padding:58px 0 40px;background:radial-gradient(circle at 86% 15%,rgba(66,187,70,.14),transparent 22%),radial-gradient(circle at 80% 88%,rgba(11,102,245,.12),transparent 24%),#fff}.hero:before{content:"";display:none}.hero .container{width:min(1480px,calc(100% - 64px))}.hero-grid{position:relative;display:grid;grid-template-columns:44% 56%;align-items:center;gap:15px}.hero-copy{padding-bottom:40px}.eyebrow{margin:0 0 14px;text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800;color:var(--blue)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(37px,4.3vw,68px);line-height:.98;letter-spacing:-.055em;margin-bottom:28px;color:var(--navy)}h1 span{color:var(--green)}h2 span{font-family:Caveat,cursive;color:var(--blue2);font-size:1.22em;line-height:1;padding:0 .06em .12em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 9' preserveAspectRatio='none'%3E%3Cpath d='M3 6.5 Q30 2.5 60 5 T117 3.5' fill='none' stroke='%2320b53a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;background-size:100% 9px;background-position:center bottom .22em}.hero-lead{font-size:19px;max-width:470px;color:#4e5e79}.hero-actions{display:flex;align-items:center;gap:28px;margin-top:34px}.video-link{font-weight:700;color:var(--navy)}.play{display:inline-grid;place-items:center;width:40px;height:40px;margin-right:8px;border:2px solid #bdd0e8;border-radius:50%;color:var(--blue);font-size:13px}.trust-points{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;font-size:14px;font-weight:600}.trust-points i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#def7e3;color:var(--green2);margin-right:7px}.hero-visual{position:relative;min-height:555px}.hero-panel{position:absolute;inset:0 0 0 22%;border-radius:42px 0 0 160px;background:linear-gradient(145deg,#0a5ec1,#072b68);box-shadow:var(--shadow);overflow:hidden}.hero-panel:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;background:rgba(255,255,255,.07);right:-90px;bottom:-100px}.scribble{position:absolute;z-index:2;left:38%;bottom:14px;color:#fff;font-family:Caveat,cursive;font-size:23px;font-weight:700;line-height:1.25;transform:rotate(-3deg);text-align:left}.privacy-card{position:absolute;z-index:2;right:24px;bottom:24px;width:190px;padding:16px 18px;background:white;border-radius:24px;display:grid;grid-template-columns:40px 1fr;column-gap:10px;box-shadow:0 16px 40px rgba(0,0,0,.18);font-size:13px;line-height:1.2}.privacy-card span{grid-row:1/3;font-size:27px}.privacy-card small{color:var(--muted);font-size:11px}.phone{position:absolute;left:-5%;top:18%;width:238px;padding:10px;border-radius:44px;background:linear-gradient(145deg,#111,#464646 35%,#050505 75%);box-shadow:0 32px 70px rgba(0,0,0,.34);transform:rotate(4deg)}.phone-screen{position:relative;background:#fff;border-radius:35px;padding:38px 18px 18px;min-height:520px;overflow:hidden}.phone-notch{position:absolute;z-index:2;top:18px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:20px;background:#050505}.app-top,.row{display:flex;justify-content:space-between;align-items:center}.app-top{font-size:12px;margin-bottom:20px}.steps-mini{display:flex;align-items:center;justify-content:center;margin-bottom:24px}.steps-mini b,.steps-mini i{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;font-size:10px;font-style:normal;background:#e9eef5}.steps-mini b{background:var(--blue);color:#fff}.steps-mini span{width:46px;height:2px;background:#dce4ef}.section-label{font-size:12px;font-weight:800}.phone label{display:block;font-size:9px;font-weight:700;margin:9px 0 4px}.input-fake{font-size:10px;padding:9px;border:1px solid #dbe3ee;border-radius:7px;background:#fff}.input-fake small{font-size:8px}.switch-fake{display:grid;grid-template-columns:1fr 1fr;border:1px solid #dbe3ee;border-radius:7px;overflow:hidden;font-size:9px;text-align:center}.switch-fake span{padding:8px;background:var(--blue);color:#fff}.switch-fake em{padding:8px;font-style:normal}.phone button{width:100%;border:0;border-radius:8px;padding:11px;margin-top:15px;background:linear-gradient(90deg,var(--blue),#0955bd);color:white;font-weight:700}.hero-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.3}.hero-glow-one{width:320px;height:320px;background:#bfe9c8;left:-170px;top:160px}.hero-glow-two{width:250px;height:250px;background:#b9d9ff;right:33%;bottom:-160px}.logos{padding:34px 0;border-top:1px solid #e7edf5;border-bottom:1px solid #e7edf5;background:#f7faff;text-align:center}.logos p{font-size:13px;color:var(--muted)}.logo-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:25px;color:#6a7f9e;font-weight:700;font-size:14px}.section{padding:100px 0}.section-heading{text-align:center;max-width:760px;margin:0 auto 48px}.section-heading.left{text-align:left;margin:0}.section-heading h2,.split-copy h2,.pricing-card h2{font-size:clamp(34px,4vw,52px);line-height:1.15;letter-spacing:-.04em;color:var(--navy);margin-bottom:20px}.section-heading>p:last-child,.split-copy>p{color:var(--muted)}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}.feature-card{padding:34px 28px;border:1px solid var(--line);border-radius:20px;background:white;text-align:center;box-shadow:0 12px 35px rgba(18,51,93,.07);transition:.25s}.feature-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.feature-card h3{font-size:18px}.feature-card p{font-size:14px;color:var(--muted);margin-bottom:0}.icon{display:grid;place-items:center;margin:0 auto 24px}.icon.green{color:var(--green2)}.icon.blue{color:var(--blue)}.icon.purple{color:var(--purple)}.icon.mint{color:#12944a}.icon svg{width:46px;height:46px}.split-section{background:linear-gradient(135deg,#f7fbff,#eef5ff)}.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.check-list{list-style:none;padding:0;margin:30px 0 0}.check-list li{position:relative;padding:11px 0 11px 34px;font-weight:600}.check-list li:before{content:"✓";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#def7e3;color:var(--green2);font-size:12px}.dashboard-card{padding:32px;border-radius:28px;background:white;box-shadow:var(--shadow)}.dashboard-head{display:flex;justify-content:space-between;padding-bottom:22px;border-bottom:1px solid var(--line)}.dashboard-head span{font-size:12px;color:var(--muted)}.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.stats-row div{padding:16px;border-radius:16px;background:#f4f8fd;text-align:center}.stats-row b{display:block;font-size:28px;color:var(--navy)}.stats-row small{color:var(--muted)}.progress-block{margin:18px 0}.progress-block span{display:flex;justify-content:space-between;margin-bottom:8px}.progress-block small{color:var(--muted)}.progress-block i{display:block;height:8px;border-radius:10px;background:#e7edf5;overflow:hidden}.progress-block i:after{content:"";display:block;width:var(--progress);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--green))}.workflow-section{overflow:hidden}.workflow-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.workflow-grid:before{content:"";position:absolute;top:28px;left:12%;right:12%;border-top:2px dashed #b8cee9}.workflow-item{position:relative;text-align:center}.workflow-item>b{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;margin:0 auto 22px;background:var(--blue);color:white;font-size:18px;border:8px solid white}.workflow-item:nth-child(2)>b{background:#165fc4}.workflow-item:nth-child(3)>b{background:var(--purple)}.workflow-item:nth-child(4)>b{background:var(--green)}.workflow-icon{font-size:37px;color:var(--blue);margin-bottom:12px}.workflow-item h3{font-size:17px}.workflow-item p{font-size:14px;color:var(--muted)}.pricing-section{padding-top:20px}.pricing-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:48px 54px;border-radius:30px;background:linear-gradient(120deg,#041a3f,#0757b7);color:white;box-shadow:0 25px 50px rgba(4,34,79,.22)}.pricing-card h2{color:white;margin-bottom:10px}.pricing-card p{margin-bottom:0;color:#d5e5fb}.eyebrow.light{color:#7ee58d}.button-light{background:linear-gradient(135deg,#ef4d57,var(--red2));min-width:max-content}.faq-section{padding-top:70px}.faq-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:80px}.accordion details{border-bottom:1px solid var(--line);padding:20px 0}.accordion summary{cursor:pointer;font-weight:800;color:var(--navy);list-style:none}.accordion summary::-webkit-details-marker{display:none}.accordion summary:after{content:"+";float:right;color:var(--blue);font-size:22px}.accordion details[open] summary:after{content:"–"}.accordion p{padding-top:12px;color:var(--muted)}.site-footer{padding:60px 0 22px;background:#061a3b;color:#dce7f8}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px}.site-footer p a:not(.brand){display:inline;margin:0;color:#dce7f8;text-decoration:underline}.footer-brand{color:white}.site-footer p{max-width:420px;color:#9eb1cb;margin-top:20px}.site-footer h3{font-size:14px;color:white}.site-footer a:not(.brand){display:block;margin:8px 0;color:#adbed4;font-size:14px}.footer-bottom{display:flex;justify-content:space-between;margin-top:45px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;color:#8298b6}.reveal{opacity:0;transform:translateY(20px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){.main-nav{position:fixed;top:82px;left:20px;right:20px;display:none;flex-direction:column;align-items:flex-start;padding:24px;background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.menu-button{display:block;margin-left:auto}.header-cta{display:none}.hero-grid,.split-grid,.faq-grid{grid-template-columns:1fr}.hero{padding-top:55px}.hero-visual{min-height:420px}.phone{left:4%;top:12%}.feature-grid{grid-template-columns:repeat(2,1fr)}.workflow-grid{grid-template-columns:repeat(2,1fr);row-gap:50px}.workflow-grid:before{display:none}.faq-grid{gap:25px}.section-heading.left{text-align:center;margin:auto}.pricing-card{align-items:flex-start;flex-direction:column}.logo-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.container{width:min(100% - 28px,1160px)}.header-inner{height:72px}.brand-text{font-size:15px}.brand-mark{width:38px;height:38px}.main-nav{top:72px}.hero{padding:44px 0 0}.hero-copy{padding-bottom:44px}.hero:before{width:460px;height:460px;right:-30%;top:auto;bottom:-6%}.hero-actions{align-items:stretch;flex-direction:column;gap:16px}.video-link{text-align:center}.trust-points{gap:14px}.hero-visual{min-height:auto}.hero-panel{inset:35px -80px 0 12%;border-radius:40px 0 0 110px}.scribble{display:none}.privacy-card{position:static;width:auto;max-width:280px;margin:28px auto 0}.hero-tablet{display:none}.hero-mockup{width:118%;max-width:none;margin-left:-9%;transform:none}.hero-visual{justify-content:center;min-height:auto}.phone{left:50%;top:18px;width:225px;transform:translateX(-50%) rotate(2deg)}.phone-screen{min-height:440px;padding:35px 14px 14px}.hero-visual{min-height:auto}.feature-grid,.workflow-grid,.logo-row,.footer-grid{grid-template-columns:1fr}.section{padding:72px 0}.feature-card{padding:28px 22px}.pricing-card{padding:34px 26px}.pricing-card>div{min-width:0}.pricing-card h2{font-size:29px;overflow-wrap:break-word;hyphens:auto}.footer-bottom{gap:12px;align-items:flex-start;flex-direction:column}.logo-row span{padding:10px}.section-heading h2,.split-copy h2{font-size:34px}}

/* ---------- Formulare (kontakt.html, testen.html) ---------- */
.form-section{padding:64px 0 100px;background:linear-gradient(180deg,#fff 0,#f8fbff 100%)}
.form-head{max-width:680px;margin-bottom:36px}
.form-head h1{font-size:clamp(34px,4.6vw,54px)}
.form-head p{color:var(--muted);font-size:17px}
.fcard{max-width:780px;background:#fff;border:1px solid var(--line);border-radius:24px;padding:38px 42px;box-shadow:0 12px 35px rgba(18,51,93,.07)}
.fgrp{padding:24px 0;border-bottom:1px solid var(--line)}
.fgrp:first-child{padding-top:0}
.fgrp.fgrp-last{border-bottom:0}
.fgh{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.fgn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e2f8e6;color:var(--green2);font-weight:800;font-size:14px;flex:none}
.fgt{font-size:18px;margin:0;color:var(--navy)}
.flab{display:block;font-size:14px;font-weight:600;margin:14px 0 0;color:var(--navy)}
.fin{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;color:var(--text);background:#fff}
.fin:focus{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
textarea.fin{min-height:140px;resize:vertical}
select.fin{appearance:auto}
.f2col{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.frads{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.frad{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600;cursor:pointer}
.frad:has(input:checked){border-color:var(--green);background:#e2f8e6;color:var(--green2)}
.req{color:#c43d3d}
.opt{color:var(--muted);font-weight:400;font-size:12.5px}
.cfrage{font-weight:800;color:var(--blue2)}
.hp{position:absolute;left:-9999px;top:-9999px}
.fbtn-row{margin-top:28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fhint{font-size:13.5px;color:var(--muted)}
.fmsg{display:none;margin-top:18px;padding:14px 16px;border-radius:10px;font-size:14.5px;font-weight:600}
.fmsg--ok{display:block;background:#e2f8e6;color:#0b6d23}
.fmsg--err{display:block;background:#fdeaea;color:#a02222}
button.button{border:0;cursor:pointer;font:inherit;font-weight:800}
@media(max-width:620px){.fcard{padding:26px 20px}.f2col{grid-template-columns:1fr}.form-section{padding:44px 0 72px}}

/* ---------- App-Galerie ---------- */
.gallery-section{background:linear-gradient(180deg,#fff 0,#f8fbff 100%);padding-top:80px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1060px;margin:0 auto}
.g-item{margin:0;text-align:center}
.hero-tablet{position:absolute;z-index:1;right:0;top:26px;width:min(430px,86%);padding:12px;border-radius:26px;background:linear-gradient(145deg,#1b1b1f,#3d3d44 40%,#101013 80%);box-shadow:0 26px 60px rgba(0,0,0,.32);transform:rotate(-2deg)}
.hero-tablet img{display:block;width:100%;height:auto;border-radius:16px}
.phone{z-index:2}
.phone-shot img{display:block;width:100%;height:auto;border-radius:34px}
.split-grid>*{min-width:0}
.split-tablet{display:flex;justify-content:center;min-width:0;max-width:100%}
.g-tablet{width:100%;max-width:100%;box-sizing:border-box;border-radius:22px;padding:10px;background:linear-gradient(145deg,#1b1b1f,#3d3d44 40%,#101013 80%);box-shadow:0 18px 40px rgba(9,25,52,.22)}
.g-tablet img{display:block;width:100%;height:auto;border-radius:14px}
.g-phone{border-radius:26px;padding:9px;background:linear-gradient(145deg,#1b1b1f,#3d3d44 40%,#101013 80%);box-shadow:0 18px 40px rgba(9,25,52,.22)}
.g-phone img{display:block;width:100%;height:auto;border-radius:18px}
.g-item figcaption{margin-top:14px;font-size:14.5px;font-weight:700;color:var(--navy)}
.gallery-note{margin:36px auto 0;text-align:center;font-size:13.5px;color:var(--muted);max-width:560px}
/* ---------- Kundenstimmen ---------- */
.quotes-section{padding-top:70px}
.quotes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.quote-card{margin:0;padding:30px 28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(18,51,93,.07);display:flex;flex-direction:column;gap:16px}
.quote-card p{margin:0;font-size:16px;line-height:1.65;color:var(--text);font-weight:500}
.quote-card p:first-letter{font-family:Caveat,cursive}
.quote-card footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}
.accordion p a{color:var(--blue2);text-decoration:underline}
@media(max-width:980px){.gallery-grid{grid-template-columns:repeat(2,1fr);max-width:560px}.quotes-grid{grid-template-columns:1fr;max-width:640px;margin:0 auto}}
@media(max-width:620px){.gallery-grid{grid-template-columns:repeat(2,1fr);gap:16px}}

.hero-mockup{display:block;width:100%;max-width:860px;height:auto;margin:0 auto;filter:drop-shadow(0 34px 48px rgba(20,30,50,.25));transform:none}
.hero-visual{display:flex;align-items:center;justify-content:flex-end}
/* Audience-Karte (Zielgruppen mit Icons) */
.logos{background:#fff;border:0;padding:14px 0 46px}
.audience-card{background:#f6f9fd;border:1px solid #e7edf5;border-radius:24px;padding:38px 44px;text-align:center}
.audience-card>p{font-size:16px;font-weight:700;color:var(--navy);margin:0 0 30px}
.aud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.aud-item{display:flex;align-items:center;justify-content:center;gap:15px;text-align:left;padding:4px 10px}
.aud-item+.aud-item{border-left:1px solid #e2e9f3}
.aud-item svg{width:46px;height:46px;flex:0 0 auto}
.aud-item.green svg{color:var(--green2)}
.aud-item.blue svg{color:var(--blue)}
.aud-item strong{display:block;font-size:16px;color:var(--navy);margin-bottom:3px}
.aud-item small{color:var(--muted);font-size:13px;line-height:1.35}
@media(max-width:980px){.aud-grid{grid-template-columns:repeat(2,1fr);gap:22px}.aud-item+.aud-item{border-left:0}.aud-item{justify-content:flex-start}}
@media(max-width:620px){.aud-grid{grid-template-columns:1fr}.audience-card{padding:26px 20px}}

/* Feature-Icons: Staffel-Animation (8s-Zyklus, Icon 1-4 nacheinander) */
@media (prefers-reduced-motion: no-preference){
.icons-live .anim-1 svg{transform-origin:50% 88%;animation:icoWiggle 8s ease-in-out infinite}
@keyframes icoWiggle{0%,14%,100%{transform:rotate(0)}2%{transform:rotate(-5deg)}4%{transform:rotate(5deg)}6%{transform:rotate(-4deg)}8%{transform:rotate(4deg)}10%{transform:rotate(-2deg)}12%{transform:rotate(2deg)}}
.icons-live .anim-2 .cam-lens{transform-box:fill-box;transform-origin:center;animation:icoLens 8s ease-in-out infinite}
@keyframes icoLens{0%,25%,40%,100%{transform:scale(1)}29%{transform:scale(.78)}34%{transform:scale(1.12)}}
.icons-live .anim-2 svg{animation:icoFlash 8s linear infinite}
@keyframes icoFlash{0%,33%,37%,100%{opacity:1}34.5%{opacity:.25}}
.icons-live .anim-3 .doc-arrow{animation:icoArrow 8s ease-in-out infinite}
@keyframes icoArrow{0%,50%,66%,100%{transform:translateY(0)}54%{transform:translateY(5px)}58%{transform:translateY(0)}62%{transform:translateY(5px)}}
.icons-live .anim-4 .shield-check{stroke-dasharray:21;animation:icoCheck 8s ease-out infinite}
@keyframes icoCheck{0%,74.5%{stroke-dashoffset:0}75%{stroke-dashoffset:21}90%,100%{stroke-dashoffset:0}}
.icons-live .anim-1{animation:icoFocus1 8s ease-in-out infinite}
.icons-live .anim-2{animation:icoFocus2 8s ease-in-out infinite}
.icons-live .anim-3{animation:icoFocus3 8s ease-in-out infinite}
.icons-live .anim-4{animation:icoFocus4 8s ease-in-out infinite}
@keyframes icoFocus1{0%{filter:none}4%,10%{filter:saturate(1.7) brightness(.9)}16%,100%{filter:none}}
@keyframes icoFocus2{0%,25%{filter:none}29%,35%{filter:saturate(1.7) brightness(.9)}41%,100%{filter:none}}
@keyframes icoFocus3{0%,50%{filter:none}54%,60%{filter:saturate(1.7) brightness(.9)}66%,100%{filter:none}}
@keyframes icoFocus4{0%,75%{filter:none}79%,85%{filter:saturate(1.7) brightness(.9)}91%,100%{filter:none}}
/* Karten-Rahmen pulsiert mit, wenn das eigene Icon aktiv ist */
.icons-live .feature-card:nth-child(1){animation:cardGlow1 8s ease-in-out infinite}
.icons-live .feature-card:nth-child(2){animation:cardGlow2 8s ease-in-out infinite}
.icons-live .feature-card:nth-child(3){animation:cardGlow3 8s ease-in-out infinite}
.icons-live .feature-card:nth-child(4){animation:cardGlow4 8s ease-in-out infinite}
@keyframes cardGlow1{0%,16%,100%{border-color:var(--line);box-shadow:0 12px 35px rgba(18,51,93,.07)}4%,10%{border-color:rgba(11,147,39,.5);box-shadow:0 0 0 3px rgba(11,147,39,.12),0 12px 35px rgba(11,147,39,.16)}}
@keyframes cardGlow2{0%,25%,41%,100%{border-color:var(--line);box-shadow:0 12px 35px rgba(18,51,93,.07)}29%,35%{border-color:rgba(8,105,223,.5);box-shadow:0 0 0 3px rgba(8,105,223,.12),0 12px 35px rgba(8,105,223,.16)}}
@keyframes cardGlow3{0%,50%,66%,100%{border-color:var(--line);box-shadow:0 12px 35px rgba(18,51,93,.07)}54%,60%{border-color:rgba(155,57,212,.5);box-shadow:0 0 0 3px rgba(155,57,212,.12),0 12px 35px rgba(155,57,212,.16)}}
@keyframes cardGlow4{0%,75%,91%,100%{border-color:var(--line);box-shadow:0 12px 35px rgba(18,51,93,.07)}79%,85%{border-color:rgba(18,148,74,.5);box-shadow:0 0 0 3px rgba(18,148,74,.12),0 12px 35px rgba(18,148,74,.16)}}
}

/* Ablauf-Sektion: Line-Icons + Staffel-Animation (Nummer → Icon → Zünder zur nächsten) */
.workflow-icon svg{width:42px;height:42px}
@media (min-width:981px){
.workflow-item:not(:nth-child(4))::after{content:"";position:absolute;top:26.5px;left:calc(50% + 36px);width:calc(100% - 48px);height:3px;border-radius:3px;transform:scaleX(0);transform-origin:left;opacity:0}
.workflow-item:nth-child(1)::after{background:linear-gradient(90deg,#0869df,#165fc4)}
.workflow-item:nth-child(2)::after{background:linear-gradient(90deg,#165fc4,#9b39d4)}
.workflow-item:nth-child(3)::after{background:linear-gradient(90deg,#9b39d4,#20b53a)}
}
@media (prefers-reduced-motion: no-preference){
/* Nummern-Puls, je Schritt im eigenen Zeitfenster (8s-Loop) */
.wf-live .workflow-item:nth-child(1)>b{animation:wfNum1 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(2)>b{animation:wfNum2 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(3)>b{animation:wfNum3 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(4)>b{animation:wfNum4 8s ease-in-out infinite}
@keyframes wfNum1{0%,14%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(8,105,223,0)}3%,10%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(8,105,223,.18)}}
@keyframes wfNum2{0%,25%,39%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(22,95,196,0)}28%,35%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(22,95,196,.18)}}
@keyframes wfNum3{0%,50%,64%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(155,57,212,0)}53%,60%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(155,57,212,.18)}}
@keyframes wfNum4{0%,75%,89%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(32,181,58,0)}78%,85%{transform:scale(1.18);box-shadow:0 0 0 10px rgba(32,181,58,.2)}}
/* Zünder-Linien zwischen den Nummern */
.wf-live .workflow-item:nth-child(1)::after{animation:wfFuse1 8s linear infinite}
.wf-live .workflow-item:nth-child(2)::after{animation:wfFuse2 8s linear infinite}
.wf-live .workflow-item:nth-child(3)::after{animation:wfFuse3 8s linear infinite}
@keyframes wfFuse1{0%,14%{transform:scaleX(0);opacity:1}25%{transform:scaleX(1);opacity:1}30%,99%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes wfFuse2{0%,39%{transform:scaleX(0);opacity:1}50%{transform:scaleX(1);opacity:1}55%,99%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
@keyframes wfFuse3{0%,64%{transform:scaleX(0);opacity:1}75%{transform:scaleX(1);opacity:1}80%,99%{transform:scaleX(1);opacity:0}100%{transform:scaleX(0);opacity:0}}
/* Icon-Bewegungen im jeweiligen Fenster */
.wf-live .workflow-item .wf-plus{transform-box:fill-box;transform-origin:center;animation:wfPlus 8s ease-in-out infinite}
@keyframes wfPlus{0%,100%{transform:scale(1)}2%{transform:scale(0)}6%{transform:scale(1.3)}9%{transform:scale(1)}}
.wf-live .workflow-item .wf-row{stroke-dasharray:18}
.wf-live .workflow-item .wf-r1{animation:wfRow1 8s ease-out infinite}
.wf-live .workflow-item .wf-r2{animation:wfRow2 8s ease-out infinite}
.wf-live .workflow-item .wf-r3{animation:wfRow3 8s ease-out infinite}
@keyframes wfRow1{0%,25.5%{stroke-dashoffset:0}26%{stroke-dashoffset:18}30%,100%{stroke-dashoffset:0}}
@keyframes wfRow2{0%,27.5%{stroke-dashoffset:0}28%{stroke-dashoffset:18}32%,100%{stroke-dashoffset:0}}
@keyframes wfRow3{0%,29.5%{stroke-dashoffset:0}30%{stroke-dashoffset:18}34%,100%{stroke-dashoffset:0}}
.wf-live .workflow-item .wf-sun{transform-box:fill-box;transform-origin:center;animation:wfSun 8s ease-in-out infinite}
@keyframes wfSun{0%,52%,62%,100%{transform:scale(1)}55%{transform:scale(1.4)}58%{transform:scale(.85)}}
.wf-live .workflow-item:nth-child(3) svg{animation:wfFlash 8s linear infinite}
@keyframes wfFlash{0%,55%,59%,100%{opacity:1}56.5%{opacity:.25}}
.wf-live .workflow-item .wf-plane{animation:wfPlane 8s ease-in-out infinite}
@keyframes wfPlane{0%,77%,90%,100%{transform:translate(0,0)}80%{transform:translate(-2.5px,2.5px)}85%{transform:translate(4px,-4px)}}
/* aktives Icon leicht betonen */
.wf-live .workflow-item:nth-child(1) .workflow-icon{animation:wfFoc1 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(2) .workflow-icon{animation:wfFoc2 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(3) .workflow-icon{animation:wfFoc3 8s ease-in-out infinite}
.wf-live .workflow-item:nth-child(4) .workflow-icon{animation:wfFoc4 8s ease-in-out infinite}
@keyframes wfFoc1{0%{filter:none}3%,10%{filter:saturate(1.7) brightness(.9)}16%,100%{filter:none}}
@keyframes wfFoc2{0%,25%{filter:none}28%,35%{filter:saturate(1.7) brightness(.9)}41%,100%{filter:none}}
@keyframes wfFoc3{0%,50%{filter:none}53%,60%{filter:saturate(1.7) brightness(.9)}66%,100%{filter:none}}
@keyframes wfFoc4{0%,75%{filter:none}78%,85%{filter:saturate(1.7) brightness(.9)}91%,100%{filter:none}}
}

/* Ablauf: Abschlusszeile + CTA */
.workflow-cta{text-align:center;max-width:620px;margin:64px auto 0}
.workflow-cta p{color:var(--muted);font-size:16px;margin-bottom:26px}

/* ---------- Preis-Kacheln (#preise) ---------- */
.pricing-section .section-heading{margin-bottom:54px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;padding:34px 28px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(18,51,93,.07);transition:.25s}
.price-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}
.price-card.active{border:2px solid var(--red);box-shadow:0 14px 38px rgba(216,31,42,.14)}
.price-card.active .price-cta.ghost{background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;border-color:transparent;box-shadow:0 12px 25px rgba(216,31,42,.25)}
.price-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:5px 14px;border-radius:99px}
.price-card h3{font-size:17px;margin-bottom:0;color:var(--navy);text-align:center}
.price-value{font-size:40px;font-weight:800;letter-spacing:-.03em;color:var(--navy);margin:12px 0 0;text-align:center}
.price-note{font-size:13.5px;color:var(--muted);margin:4px 0 0;text-align:center}
.price-list{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:11px;flex:1}
.price-list li{position:relative;padding-left:30px;font-size:14.5px;font-weight:600}
.price-list li:before{position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px}
.price-list li.yes:before{content:"✓";background:#def7e3;color:var(--green2)}
.price-list li.no{color:#8b98ad;font-weight:500}
.price-list li.no:before{content:"–";background:#eef2f7;color:#9aa7bb}
.price-cta{display:block;margin-top:26px;text-align:center;padding:14px 24px;border-radius:12px;font-size:15px;font-weight:800;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;box-shadow:0 12px 25px rgba(216,31,42,.25);transition:.25s transform,.25s box-shadow}
.price-cta:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(216,31,42,.32)}
.price-cta.ghost{background:#fff;color:var(--navy);border:1px solid var(--line);box-shadow:none}
.price-cta.ghost:hover{border-color:var(--red);color:var(--red2)}
.price-fine{margin:24px 0 64px;font-size:13.5px;color:var(--muted);text-align:center}
/* Mobil: Preis-Karussell nach emodat-Muster (Snap + Pfeil-Navigation) */
/* min-width:0 ist Pflicht: als Grid-Item waechst der Wrapper sonst mit dem
   Inhalt und die 100%-breiten Karten werden riesig. */
.snap-wrap{position:relative;min-width:0}
.snap-nav{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:38px;height:38px;border-radius:99px;background:rgba(255,255,255,.94);border:1px solid var(--line);color:var(--red2);align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 6px 16px -6px rgba(18,51,93,.4)}
.snap-nav:active{background:#fdeeef}
.snap-prev{left:0}.snap-next{right:0}
@media(max-width:980px){.price-grid{grid-template-columns:1fr;max-width:440px;margin:0 auto}.price-card.featured{order:-1}}
@media(max-width:640px){
  /* padding-top laesst Platz fuer das „Beliebt“-Label, das durch
     overflow-x sonst oben abgeschnitten wuerde */
  .price-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px;max-width:none;margin:0;padding:18px 2px 4px}
  .price-grid::-webkit-scrollbar{display:none}
  .price-card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}
  .price-card.featured{order:0}
  .price-card:hover{transform:none}
  .snap-wrap .snap-nav{display:flex}
}

/* eMODAT-Wortmarke (Logo-Variante 1: Wortmarke + rote Linie + Untertitel) */
.brand-word{display:block;font-size:23px;font-weight:800;letter-spacing:-.015em;line-height:1;color:var(--navy);padding-bottom:5px;border-bottom:2px solid var(--red)}
.brand-word .brand-o{height:.88em;width:auto;vertical-align:-.06em;margin:0 .015em}
.brand-text strong{display:block;margin-top:4px;font-size:11.5px;font-weight:700;letter-spacing:.005em;color:var(--navy)}
.footer-brand .brand-word,.footer-brand .brand-text strong{color:#fff}
@media(max-width:620px){.brand-word{font-size:19px}.brand-text strong{font-size:10px}}

/* Hero auf Standard-Container-Breite (bündig mit unteren Sektionen) */
.hero .container{width:min(1160px,calc(100% - 40px))}
@media(min-width:981px){
  .hero h1{font-size:clamp(37px,3.4vw,48px)}
  .hero-visual{margin-right:-14px}
  .hero-mockup{max-width:660px}
  .video-link{display:inline-flex;align-items:center;padding:14px 24px 14px 16px;border:1px solid #d7e1ee;border-radius:12px;background:#fff;box-shadow:0 8px 20px rgba(18,51,93,.08);transition:.25s transform,.25s box-shadow}
  .video-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(18,51,93,.12)}
}

/* Video-Sektion: Click-to-Load-Fassade (emodat-Muster) */
.video-facade{position:relative;margin:44px auto 0;max-width:920px;aspect-ratio:16/9;border-radius:20px;overflow:hidden;cursor:pointer;background:#0c1020;box-shadow:0 24px 60px -24px rgba(16,20,37,.28)}
.video-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-shade{position:absolute;inset:0;background:rgba(12,16,32,.18);transition:background .25s}
.video-facade:hover .video-shade{background:rgba(12,16,32,.06)}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:99px;background:var(--red);box-shadow:0 18px 40px -10px rgba(216,31,42,.55);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .25s}
.video-facade:hover .video-play{transform:translate(-50%,-50%) scale(1.07);background:var(--red2)}
.video-play span{display:block;width:0;height:0;border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:7px}
.video-note{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;font-size:13px;color:rgba(255,255,255,.85);background:linear-gradient(0deg,rgba(12,16,32,.75),transparent);text-align:center}
@media(max-width:620px){.video-facade{border-radius:14px}.video-play{width:64px;height:64px}.video-play span{border-left-width:20px;border-top-width:12px;border-bottom-width:12px;margin-left:5px}.video-note{font-size:11.5px;padding:10px 12px}}

/* iPad-Live-Mockup in der Vorteile-Sektion (animiertes iframe im g-tablet-Rahmen) */
.ipad-live{position:relative;width:100%;max-width:100%;aspect-ratio:670/510;overflow:hidden;border-radius:14px;background:#101116;container-type:inline-size}
.ipad-live iframe{position:absolute;left:0;top:0;width:670px;max-width:none;height:510px;border:0;background:transparent;transform-origin:0 0;pointer-events:none;transform:scale(tan(atan2(100cqw,670px)))}

/* Galerie: Scan-Highlight laeuft gestaffelt ueber die vier Screens (12s-Loop) */
@media (prefers-reduced-motion: no-preference){
  .gallery-grid.g-live .g-phone{position:relative;overflow:hidden}
  .gallery-grid.g-live .g-phone::after{
    content:"";position:absolute;left:9px;right:9px;top:0;height:22%;
    border-radius:14px;pointer-events:none;opacity:0;
    background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 35%,rgba(255,255,255,.26) 50%,rgba(255,255,255,.10) 65%,rgba(255,255,255,0) 100%);
    box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55), 0 0 18px rgba(255,255,255,.30);
    animation:gScan 12s linear infinite;
  }
  .gallery-grid.g-live .g-item:nth-child(1) .g-phone::after{animation-delay:0s}
  .gallery-grid.g-live .g-item:nth-child(2) .g-phone::after{animation-delay:3s}
  .gallery-grid.g-live .g-item:nth-child(3) .g-phone::after{animation-delay:6s}
  .gallery-grid.g-live .g-item:nth-child(4) .g-phone::after{animation-delay:9s}
  .gallery-grid.g-live .g-phone{animation:gFrame 12s linear infinite}
  .gallery-grid.g-live .g-item:nth-child(1) .g-phone{animation-delay:0s}
  .gallery-grid.g-live .g-item:nth-child(2) .g-phone{animation-delay:3s}
  .gallery-grid.g-live .g-item:nth-child(3) .g-phone{animation-delay:6s}
  .gallery-grid.g-live .g-item:nth-child(4) .g-phone{animation-delay:9s}
  @keyframes gScan{
    0%{opacity:0;transform:translateY(-100%)}
    2%{opacity:1}
    21%{opacity:1}
    24%{opacity:0;transform:translateY(455%)}
    100%{opacity:0;transform:translateY(455%)}
  }
  @keyframes gFrame{
    0%,24%,100%{box-shadow:0 18px 40px rgba(9,25,52,.22)}
    4%,20%{box-shadow:0 18px 40px rgba(9,25,52,.22), 0 0 0 2px rgba(255,255,255,.75), 0 0 26px rgba(255,255,255,.35)}
  }
}

/* ---------- Vorher / Nachher ---------- */
.compare-section{padding-top:0}
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
.compare-card{padding:34px 32px;border-radius:22px;border:1px solid var(--line);background:#fff}
.compare-card h3{font-size:19px;line-height:1.35;color:var(--navy);margin-bottom:6px}
.compare-tag{display:block;margin-bottom:8px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.compare-old{background:#f6f7f9;border-color:#e2e5ea}
.compare-old h3{color:#5d6879}
.compare-old .compare-tag{color:#8b97a8}
.compare-new{box-shadow:0 14px 40px rgba(18,51,93,.10);border-color:#cfe0f6}
.compare-new .compare-tag{color:var(--green2)}
.compare-list{list-style:none;padding:0;margin:20px 0 0}
.compare-list li{position:relative;padding:10px 0 10px 32px;font-size:15px;line-height:1.5}
.compare-old .compare-list li{color:#67717f}
.compare-old .compare-list li:before{content:"×";position:absolute;left:0;top:10px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#e5e8ed;color:#8b97a8;font-size:14px;font-weight:700}
.compare-new .compare-list li{font-weight:600}
.compare-new .compare-list li:before{content:"✓";position:absolute;left:0;top:10px;width:21px;height:21px;border-radius:50%;display:grid;place-items:center;background:#def7e3;color:var(--green2);font-size:12px}
@media(max-width:820px){.compare-grid{grid-template-columns:1fr}.compare-card{padding:28px 24px}}

/* ---------- Preise: Zielgruppe + Erklaerlink ---------- */
.price-for{margin:-4px 0 18px;font-size:13.5px;line-height:1.45;color:var(--muted);text-align:center}
.price-info{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:5px;border-radius:50%;background:#e7edf5;color:var(--blue2);font-size:11px;font-weight:800;vertical-align:1px}
.price-info:hover{background:var(--blue);color:#fff}

/* Anker nicht unter dem Sticky-Header verstecken */
section[id]{scroll-margin-top:96px}

/* ---------- Muster-Protokoll (Das Ergebnis) ---------- */
.sample-section{background:linear-gradient(180deg,#f8fbff 0,#eef5ff 100%)}
.sample-grid{display:grid;grid-template-columns:1fr .82fr;gap:64px;align-items:center}
.sample-copy h2{font-size:clamp(32px,3.6vw,46px);line-height:1.15;letter-spacing:-.04em;color:var(--navy);margin-bottom:18px}
.sample-copy>p{color:var(--muted)}
.sample-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.sample-hint{font-size:13.5px;color:var(--muted)}
.sample-sheet{position:relative;z-index:0;display:block;border-radius:8px;background:#fff;box-shadow:0 26px 60px rgba(9,25,52,.20);transition:.3s transform,.3s box-shadow}
.sample-sheet:before,.sample-sheet:after{content:"";position:absolute;inset:0;border-radius:8px;background:#fff;box-shadow:0 14px 34px rgba(9,25,52,.13);z-index:-1}
.sample-sheet:before{transform:rotate(-2.2deg) translate(-9px,5px)}
.sample-sheet:after{transform:rotate(1.6deg) translate(8px,9px)}
.sample-sheet img{display:block;width:100%;height:auto;border-radius:8px}
.sample-sheet:hover{transform:translateY(-6px);box-shadow:0 34px 70px rgba(9,25,52,.26)}
.sample-badge{position:absolute;right:-12px;bottom:20px;padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-size:13px;font-weight:800;box-shadow:0 12px 25px rgba(216,31,42,.28)}
@media(max-width:980px){.sample-grid{grid-template-columns:1fr;gap:46px}.sample-visual{max-width:460px;margin:0 auto}}
@media(max-width:620px){.sample-actions{align-items:stretch;flex-direction:column;gap:12px}.sample-hint{text-align:center}.sample-visual{padding:0 12px}.sample-badge{right:6px}}

/* --- Zweiter Conversion-Weg: Demo-Termin / Rueckruf --- */
.button-ghost{background:none;color:var(--navy);border:2px solid var(--line);box-shadow:none;padding:14px 20px}
.button-ghost:hover{border-color:var(--red);color:var(--red2);box-shadow:none;transform:translateY(-2px)}
.workflow-cta .button-ghost{margin-left:12px}
.card-actions{display:flex;flex-direction:column;gap:12px;min-width:max-content}
.button-outline-light{background:none;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:none}
.button-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1);box-shadow:none}
.card-call{margin-top:16px;font-size:14px;color:#d5e5fb}
.card-call a{font-weight:800;color:#fff;text-decoration:underline}
.demo-points{list-style:none;padding:0;margin:0 0 18px;max-width:680px}
.demo-points li{position:relative;padding:9px 0 9px 32px;font-size:16px;color:var(--muted)}
.demo-points li strong{color:var(--text)}
.demo-points li:before{content:"✓";position:absolute;left:0;top:11px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fde3e5;color:var(--red2);font-size:12px;font-weight:800}
.demo-call{margin:0 0 32px;font-size:15px;color:var(--muted)}
.demo-call a{font-weight:800;color:var(--red2);text-decoration:underline}
.demo-alt{margin-top:26px;font-size:15px;color:var(--muted)}
.demo-alt a{font-weight:800;color:var(--red2);text-decoration:underline}
@media (max-width:820px){
  .hero-actions{flex-wrap:wrap;gap:14px}
  .card-actions{width:100%}
  .workflow-cta .button-ghost{margin-left:0;margin-top:12px}
}
.hero-second{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:22px 0 0;font-size:15px;color:var(--muted)}
.hero-second a,.hero-demo-link{display:inline-flex;align-items:center;gap:9px;padding:9px 17px;border:1.5px solid rgba(216,31,42,.3);border-radius:999px;font-size:14.5px;font-weight:800;color:var(--red2);text-decoration:none;white-space:nowrap;transition:.22s background,.22s border-color,.22s transform}
.hero-second a span,.hero-demo-link span{transition:.22s transform}
.hero-second a:hover,.hero-demo-link:hover{background:rgba(216,31,42,.07);border-color:var(--red2)}
.hero-second a:hover span,.hero-demo-link:hover span{transform:translateX(3px)}

/* Hero-CTAs gestapelt, beide gleich breit */
.hero-cta-stack{flex-direction:column;align-items:stretch;width:max-content;max-width:100%;gap:14px}
.hero-cta-stack .button{width:100%}
.hero-demo-link{justify-content:center;width:100%;padding:13px 22px}
@media (max-width:620px){.hero-cta-stack{width:100%}}

/* Lichtreflex von links nach rechts auf dem Primaer-Button */
.button-shine{position:relative;overflow:hidden;isolation:isolate}
@media (prefers-reduced-motion:no-preference){
  .button-shine:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:btnShine 3.4s ease-in-out infinite;pointer-events:none}
  @keyframes btnShine{0%{left:-70%}55%,100%{left:135%}}
}
@media (max-width:620px){
  .hero-second{flex-direction:column;align-items:stretch;text-align:center;gap:12px;margin-top:20px}
  .hero-second a{justify-content:center;padding:13px 18px;font-size:15px}
}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;background:var(--navy);color:#fff;font-weight:800;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
main:focus{outline:none}

/* ---------- Editionen-Vergleichstabelle ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cmp{margin-top:56px}
.cmp-head{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;color:var(--navy);text-align:center;margin-bottom:12px}
.cmp-all{max-width:720px;margin:0 auto 30px;text-align:center;font-size:15px;color:var(--muted)}
.cmp-all strong{color:var(--navy)}
.cmp-tabs{display:none;gap:8px;margin:0 0 16px}
.cmp-tab{flex:1 1 0;padding:11px 8px;border:1px solid var(--line);border-radius:11px;background:#fff;font:inherit;font-size:14px;font-weight:800;color:var(--navy);cursor:pointer}
.cmp-tab.is-active{background:linear-gradient(135deg,var(--red),var(--red2));border-color:transparent;color:#fff;box-shadow:0 10px 22px rgba(216,31,42,.22)}
.cmp-scroll{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:0 12px 35px rgba(18,51,93,.07);overflow:hidden}
.cmp-table{width:100%;border-collapse:collapse;font-size:15px}
.cmp-table th,.cmp-table td{padding:15px 18px;text-align:center;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table thead th{background:var(--soft);font-size:14px;font-weight:800;color:var(--navy);text-transform:uppercase;letter-spacing:.06em}
.cmp-table thead th:first-child,.cmp-table tbody th{text-align:left;font-weight:700;color:var(--navy)}
.cmp-table tbody th{width:38%;font-size:15px}
.cmp-table tbody tr:nth-child(even) th,.cmp-table tbody tr:nth-child(even) td{background:#fbfdff}
.cmp-table .is-featured{background:rgba(216,31,42,.045)}
.cmp-table tbody tr:nth-child(even) .is-featured{background:rgba(216,31,42,.075)}
.cmp-table thead .is-featured{background:rgba(216,31,42,.1);color:var(--red2)}
.cmp-hint{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted)}
.cmp-sub{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.cmp-yes{color:var(--green2);font-weight:800}
.cmp-no{color:#b7c2d3;font-weight:800}
.cmp-foot{max-width:880px;margin:22px auto 0;text-align:center;font-size:13px;line-height:1.75;color:var(--muted)}
.pricing-section .pricing-card{margin-top:64px}
@media (max-width:620px){.pricing-section .pricing-card{margin-top:44px}}
@media(max-width:760px){
  .cmp-tabs{display:flex}
  .cmp-scroll{border-radius:16px}
  .cmp-table{font-size:14.5px}
  .cmp-table th,.cmp-table td{padding:13px 14px}
  .cmp-table tbody th{width:auto}
  .cmp-table thead th:first-child{font-size:12px}
  .cmp-table th:nth-child(2),.cmp-table td:nth-child(2),
  .cmp-table th:nth-child(3),.cmp-table td:nth-child(3),
  .cmp-table th:nth-child(4),.cmp-table td:nth-child(4){display:none}
  .cmp-table[data-col="1"] th:nth-child(2),.cmp-table[data-col="1"] td:nth-child(2),
  .cmp-table[data-col="2"] th:nth-child(3),.cmp-table[data-col="2"] td:nth-child(3),
  .cmp-table[data-col="3"] th:nth-child(4),.cmp-table[data-col="3"] td:nth-child(4){display:table-cell}
}

/* Hero-Trustpoints: symmetrisches 2x2-Raster */
.trust-points{display:grid;grid-template-columns:repeat(2,max-content);gap:16px 34px;align-items:center}
.trust-points span{display:flex;align-items:center}
@media(max-width:620px){.trust-points{grid-template-columns:1fr 1fr;gap:14px 10px;font-size:13.5px}.trust-points i{flex:0 0 22px}}

/* ---------- Muster-Protokoll: Seiten-Blätterer (17.08.2026) ---------- */
.sample-stage{position:relative;width:100%}
.sample-page{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s ease;pointer-events:none}
.sample-page:first-child{position:relative;inset:auto;height:auto}
.sample-page.is-active{opacity:1}
.sample-nav{position:absolute;right:-12px;bottom:20px;z-index:3;display:flex;align-items:center;gap:8px}
.sample-nav .sample-badge{position:static;right:auto;bottom:auto;white-space:nowrap}
.sample-arrow{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 12px 25px rgba(216,31,42,.28);transition:.2s transform,.2s box-shadow}
.sample-arrow svg{width:20px;height:20px}
.sample-arrow:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(216,31,42,.36)}
.sample-arrow:active{transform:translateY(0)}
.sample-arrow:focus-visible{outline:3px solid rgba(216,31,42,.45);outline-offset:2px}
@media(max-width:620px){.sample-nav{right:6px;bottom:12px;gap:6px}.sample-arrow{width:34px;height:34px;flex-basis:34px}}

/* Kontaktseite: zweispaltiges Layout mit Info-Spalte statt weisser Flaeche */
.form-section{position:relative;overflow:hidden}
.form-section:before,.form-section:after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.form-section:before{width:520px;height:520px;background:radial-gradient(circle,rgba(11,102,245,.13),transparent 68%);right:-170px;top:-160px}
.form-section:after{width:460px;height:460px;background:radial-gradient(circle,rgba(66,187,70,.13),transparent 68%);left:-190px;bottom:0}
.form-section .container{position:relative;z-index:1}
.form-layout{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:34px;align-items:start}
.form-layout .fcard{max-width:none}
.kside{display:flex;flex-direction:column;gap:18px;position:sticky;top:104px}
.kcard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 24px 26px;box-shadow:0 12px 35px rgba(18,51,93,.07)}
.kcard-t{font-size:16px;margin:0 0 16px;color:var(--navy);letter-spacing:-.01em}
.kcontact{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.kcontact li{display:flex;align-items:flex-start;gap:13px}
.kcontact small{display:block;font-size:12px;color:var(--muted);margin-bottom:2px}
.kcontact a,.kcontact b{font-size:15.5px;font-weight:700;color:var(--navy);text-decoration:none}
.kcontact a:hover{color:var(--red)}
.kico{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:#fdeaec;color:var(--red)}
.kico svg{width:21px;height:21px}
.kico-blue{background:#e7f0ff;color:var(--blue)}
.kico-purple{background:#f0ecfd;color:var(--purple)}
.kpoints{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.kpoints li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5;color:var(--text)}
.kpoints li:before{content:"✓";position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;background:#def7e3;color:var(--green2);font-size:11px}
.kcard-cta{background:linear-gradient(140deg,#041a3f,#0757b7);border-color:transparent;color:#fff;box-shadow:0 20px 40px rgba(4,34,79,.22)}
.kcard-cta .kcard-t{color:#fff}
.kcard-cta p{font-size:14.5px;line-height:1.6;color:#d5e5fb;margin:0 0 18px}
@media(max-width:1020px){
  .form-layout{grid-template-columns:1fr;gap:24px}
  .kside{position:static}
  .form-section:before,.form-section:after{display:none}
}
@media(min-width:1021px) and (max-width:1160px){.form-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}}

/* Datenschutzhinweis unter den Formularen (Art. 13 DSGVO) */
.fprivacy{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}
.fprivacy a{color:var(--blue2);text-decoration:underline}
.fprivacy a:hover{color:var(--red)}

/* ---- Funktions-Unterseiten (fx-*) ---------------------------------- */
.fx-crumb{font-size:14px;color:#62708a;margin:0 0 26px}
.fx-crumb a{color:#62708a;text-decoration:none}
.fx-crumb a:hover{color:var(--red);text-decoration:underline}
.fx-crumb span{margin:0 6px;color:#aab4c6}
.fx-hero{padding-top:56px;padding-bottom:26px}
.fx-hero-grid{display:grid;grid-template-columns:1fr 150px;gap:36px;align-items:center}
.fx-hero h1{font-size:clamp(32px,4.4vw,50px);line-height:1.12;margin:6px 0 18px}
.fx-lead{font-size:19px;line-height:1.65;color:#4d5b74;max-width:640px;margin:0 0 30px}
.fx-hero-icon .icon{width:118px;height:118px;justify-self:end}
.fx-hero-icon svg{width:100%;height:100%}
.fx-narrow{max-width:820px}
.fx-text{padding-top:22px;padding-bottom:22px}
.fx-text h2,.fx-steps-section h2{font-size:clamp(24px,3vw,32px);line-height:1.25;margin:0 0 20px}
.fx-text p{font-size:17px;line-height:1.75;color:#4d5b74;margin:0 0 16px}
.fx-text a{color:var(--red);text-decoration:underline}
.fx-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.fx-steps li{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:20px 22px;box-shadow:0 10px 26px rgba(20,50,95,.05)}
.fx-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red2));color:#fff;font-weight:800;font-size:15px}
.fx-steps h3{margin:2px 0 6px;font-size:18px}
.fx-steps p{margin:0;color:#4d5b74;line-height:1.65}
.fx-cta{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.fx-cta h2{margin:0 0 10px}
.fx-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
.fx-next-head{grid-column:1/-1;font-size:22px;margin:0 0 2px}
.fx-next{display:block;background:#fff;border:1px solid #e6ecf5;border-radius:16px;padding:20px 22px;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.fx-next:hover{transform:translateY(-3px);border-color:#d6e0ef;box-shadow:0 16px 34px rgba(20,50,95,.09)}
.fx-next strong{display:block;color:#071f49;font-size:17px;margin-bottom:6px}
.fx-next span{display:block;color:#62708a;font-size:15px;line-height:1.55}
@media (max-width:900px){
  .fx-hero-grid{grid-template-columns:1fr}
  .fx-hero-icon{display:none}
  .fx-next-grid{grid-template-columns:1fr;margin-top:40px}
}

/* Feature-Karten der Startseite als Link */
/* Spalte statt Block, damit der Button per margin-top:auto am Kartenfuss
   sitzt. Sonst haengt er direkt am Text und rutscht bei zweizeiliger
   Ueberschrift (Karte 4) tiefer als bei den anderen drei. */
a.feature-card{text-decoration:none;color:inherit;display:flex;flex-direction:column}
a.feature-card h3{color:#071f49}
a.feature-card p{margin-bottom:18px}
a.feature-card .feature-more{margin-top:auto;align-self:center}
.feature-more{display:inline-flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;padding:9px 16px;border-radius:9px;white-space:nowrap;font-size:13.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--red),var(--red2));box-shadow:0 8px 18px rgba(216,31,42,.22);transition:.25s transform,.25s box-shadow}
a.feature-card:hover .feature-more{transform:translateY(-2px);box-shadow:0 12px 24px rgba(216,31,42,.3)}
/* Lichtstreifen im Button, synchron zum Glow-Fenster der jeweiligen Karte */
@media (prefers-reduced-motion:no-preference){
  .feature-more{position:relative;overflow:hidden;isolation:isolate}
  .feature-more:after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);pointer-events:none}
  .icons-live .feature-card:nth-child(1) .feature-more:after{animation:moreShine1 8s linear infinite}
  .icons-live .feature-card:nth-child(2) .feature-more:after{animation:moreShine2 8s linear infinite}
  .icons-live .feature-card:nth-child(3) .feature-more:after{animation:moreShine3 8s linear infinite}
  .icons-live .feature-card:nth-child(4) .feature-more:after{animation:moreShine4 8s linear infinite}
  @keyframes moreShine1{0%,3%{left:-70%}11%,100%{left:135%}}
  @keyframes moreShine2{0%,28%{left:-70%}36%,100%{left:135%}}
  @keyframes moreShine3{0%,53%{left:-70%}61%,100%{left:135%}}
  @keyframes moreShine4{0%,78%{left:-70%}86%,100%{left:135%}}
}
.fx-cta .hero-demo-link{color:#fff;border-color:rgba(255,255,255,.55)}
.fx-cta .hero-demo-link:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.12)}

/* Hauptnavigation: Dropdown */
.nav-drop{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.nav-drop-toggle svg{width:15px;height:15px;transition:transform .22s}
.nav-drop.open>.nav-drop-toggle,.nav-drop-toggle:hover{color:var(--blue)}
.nav-drop.open>.nav-drop-toggle svg{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:calc(100% + 18px);left:50%;transform:translate(-50%,8px);width:246px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px rgba(18,51,93,.16);opacity:0;visibility:hidden;transition:.2s}
.nav-drop-menu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.nav-drop.open>.nav-drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:600;line-height:1.35;transition:.18s background,.18s color}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:#f2f7ff;color:var(--blue)}
.nav-drop-menu a[aria-current="page"]{background:#f2f7ff;color:var(--blue)}
@media(min-width:981px){.nav-drop:hover>.nav-drop-menu,.nav-drop:focus-within>.nav-drop-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}}
@media(max-width:980px){
  .nav-drop{width:100%}
  .nav-drop-toggle{width:100%;justify-content:space-between}
  .nav-drop-menu{position:static;transform:none;width:100%;padding:8px 0 2px 18px;margin-left:4px;border:0;border-left:2px solid #e2ebf7;box-shadow:none;display:none;opacity:1;visibility:visible}
  .nav-drop.open>.nav-drop-menu{display:block;transform:none}
  .nav-drop-menu:before{display:none}
  .nav-drop-menu a{padding:9px 12px;background:#f7faff;margin-bottom:6px}
}

/* --- Animiertes Hero-Element: Maengel im Grundriss (Funktionsseite) -------- */
.fx-hero-grid.has-visual{grid-template-columns:1fr 400px}
.fx-hero-visual{justify-self:end;width:100%;max-width:400px}
.mangel-viz{position:relative;width:100%;aspect-ratio:360/250}
.mv-plan{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mv-room{font:600 11px/1 Inter,system-ui,sans-serif;fill:#9aa8bd;text-anchor:middle;letter-spacing:.02em}
.mv-pin .mv-dot{fill:var(--red);stroke:#fff;stroke-width:2}
.mv-pin .mv-ring{fill:none;stroke:var(--red);stroke-width:1.6;opacity:0}
.mv-card{position:absolute;display:flex;gap:10px;align-items:center;width:58%;
  background:#fff;border:1px solid #e3ebf5;border-radius:12px;padding:9px 11px;
  box-shadow:0 12px 28px rgba(20,50,95,.13);opacity:0}
.mv-card .mv-thumb{position:relative;flex:0 0 34px;width:34px;height:34px;border-radius:7px;
  background:#f2f6fb;display:grid;place-items:center;overflow:hidden}
.mv-thumb svg{width:26px;height:26px}
.mv-text{min-width:0;display:block}
.mv-card strong{display:block;font-size:12.5px;line-height:1.3;color:#071f49;font-weight:700}
.mv-meta{display:block;font-size:11px;color:#78869c;margin-top:2px}
.mv-c1{left:11%;top:42%}
.mv-c2{left:25%;top:52%}
.mv-c3{left:40%;top:34%}
/* Zaehler: Varianten gestapelt in einer Grid-Zelle, damit die Pille nicht springt */
.mv-count{position:absolute;right:1%;bottom:-3%;display:inline-grid;background:#fff;
  border:1px solid #e3ebf5;border-radius:999px;padding:6px 13px;box-shadow:0 8px 20px rgba(20,50,95,.1)}
.mv-n{grid-area:1/1;font-size:11.5px;font-weight:700;color:#071f49;white-space:nowrap;opacity:0}
/* Ruhezustand ohne Animation: erster Mangel sichtbar, Endstand im Zaehler */
.mangel-viz .mv-c1{opacity:1}
.mangel-viz .mv-n3{opacity:1}

@media (prefers-reduced-motion:no-preference){
  .mangel-viz.mv-live .mv-c1,.mangel-viz.mv-live .mv-n3{opacity:0}
  .mangel-viz.mv-live .mv-n{animation:mvNum1 12s linear infinite}
  .mangel-viz.mv-live .mv-n2{animation-name:mvNum2}
  .mangel-viz.mv-live .mv-n3{animation-name:mvNum3}
  .mangel-viz.mv-live .mv-card{animation:mvCard1 12s ease-out infinite}
  .mangel-viz.mv-live .mv-c2{animation-name:mvCard2}
  .mangel-viz.mv-live .mv-c3{animation-name:mvCard3}
  .mangel-viz.mv-live .mv-thumb:after{content:"";position:absolute;inset:0;background:#fff;
    opacity:0;animation:mvFlash1 12s linear infinite}
  .mangel-viz.mv-live .mv-c2 .mv-thumb:after{animation-name:mvFlash2}
  .mangel-viz.mv-live .mv-c3 .mv-thumb:after{animation-name:mvFlash3}
  .mangel-viz.mv-live .mv-dot{opacity:0;animation:mvDot1 12s ease-out infinite}
  .mangel-viz.mv-live .mv-p2 .mv-dot{animation-name:mvDot2}
  .mangel-viz.mv-live .mv-p3 .mv-dot{animation-name:mvDot3}
  .mangel-viz.mv-live .mv-ring{animation:mvRing1 12s ease-out infinite}
  .mangel-viz.mv-live .mv-p2 .mv-ring{animation-name:mvRing2}
  .mangel-viz.mv-live .mv-p3 .mv-ring{animation-name:mvRing3}
}
/* Karten: eine nach der anderen, je ~4s */
@keyframes mvCard1{0%,1%{opacity:0;transform:translateY(10px) scale(.95)}
  5%,28%{opacity:1;transform:none}32%,100%{opacity:0;transform:none}}
@keyframes mvCard2{0%,34%{opacity:0;transform:translateY(10px) scale(.95)}
  38%,61%{opacity:1;transform:none}65%,100%{opacity:0;transform:none}}
@keyframes mvCard3{0%,67%{opacity:0;transform:translateY(10px) scale(.95)}
  71%,95%{opacity:1;transform:none}99%,100%{opacity:0;transform:none}}
/* Kamera-Blitz auf der Miniatur */
@keyframes mvFlash1{0%,2%{opacity:0}4%{opacity:.85}9%,100%{opacity:0}}
@keyframes mvFlash2{0%,35%{opacity:0}37%{opacity:.85}42%,100%{opacity:0}}
@keyframes mvFlash3{0%,68%{opacity:0}70%{opacity:.85}75%,100%{opacity:0}}
/* Pins setzen sich nacheinander und bleiben dann stehen */
@keyframes mvDot1{0%,1%{opacity:0;transform:scale(.5)}4%{opacity:1;transform:scale(1.4)}
  8%,100%{opacity:1;transform:scale(1)}}
@keyframes mvDot2{0%,34%{opacity:0;transform:scale(.5)}37%{opacity:1;transform:scale(1.4)}
  41%,100%{opacity:1;transform:scale(1)}}
@keyframes mvDot3{0%,67%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.4)}
  74%,100%{opacity:1;transform:scale(1)}}
@keyframes mvRing1{0%,0.9%{opacity:0;transform:scale(.5)}1%{opacity:.55;transform:scale(.5)}
  14%{opacity:0;transform:scale(2.4)}15%,100%{opacity:0;transform:scale(.5)}}
@keyframes mvRing2{0%,33.9%{opacity:0;transform:scale(.5)}34%{opacity:.55;transform:scale(.5)}
  47%{opacity:0;transform:scale(2.4)}48%,100%{opacity:0;transform:scale(.5)}}
@keyframes mvRing3{0%,66.9%{opacity:0;transform:scale(.5)}67%{opacity:.55;transform:scale(.5)}
  80%{opacity:0;transform:scale(2.4)}81%,100%{opacity:0;transform:scale(.5)}}
/* Zaehler laeuft mit: 1 -> 2 -> 3 */
@keyframes mvNum1{0%,3%{opacity:0}5%,31%{opacity:1}33%,100%{opacity:0}}
@keyframes mvNum2{0%,36%{opacity:0}38%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes mvNum3{0%,69%{opacity:0}71%,100%{opacity:1}}
@media (max-width:900px){
  .fx-hero-grid.has-visual{grid-template-columns:1fr}
  .fx-hero-visual{display:block;justify-self:stretch;max-width:420px;margin:10px auto 34px}
}

/* --- Animiertes Hero-Element: PDF entsteht und wird zugestellt ------------- */
.pdf-viz{position:relative;width:100%;aspect-ratio:360/250}
.pv-doc{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pv-sheet{fill:#fff;stroke:#e2eaf5;stroke-width:2}
.pv-front rect:first-child{filter:drop-shadow(0 8px 18px rgba(20,50,95,.1))}
.pv-sign{stroke-dasharray:100;stroke-dashoffset:0}
.pv-badge{position:absolute;left:33%;top:9%;background:var(--purple);color:#fff;font-size:9.5px;
  font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:5px;opacity:0}
.pv-pages{position:absolute;left:2%;bottom:0;display:inline-grid;background:#fff;
  border:1px solid #e3ebf5;border-radius:999px;padding:6px 13px;box-shadow:0 8px 20px rgba(20,50,95,.1)}
.pv-p{grid-area:1/1;font-size:11.5px;font-weight:700;color:#071f49;white-space:nowrap;opacity:0}
.pv-chip{position:absolute;left:52%;display:flex;align-items:center;justify-content:space-between;
  gap:8px;width:44%;background:#fff;border:1px solid #e3ebf5;border-radius:10px;padding:8px 11px;
  font-size:12px;font-weight:700;color:#071f49;box-shadow:0 10px 22px rgba(20,50,95,.1);opacity:0}
.pv-chip svg{flex:none;width:15px;height:15px;color:var(--green2)}
.pv-chip svg path{stroke-dasharray:100;stroke-dashoffset:100}
.pv-k1{top:16%}
.pv-k2{top:38%}
.pv-k3{top:60%}
.pv-done{position:absolute;right:1%;bottom:0;background:#e8f9ec;border:1px solid #bfe9c9;
  border-radius:999px;padding:6px 13px;font-size:11.5px;font-weight:700;color:var(--green2);
  white-space:nowrap;opacity:0}
/* Ruhezustand ohne Animation: fertig zugestellt */
.pdf-viz .pv-badge,.pdf-viz .pv-chip,.pdf-viz .pv-done,.pdf-viz .pv-p5{opacity:1}
.pdf-viz .pv-chip svg path{stroke-dashoffset:0}

@media (prefers-reduced-motion:no-preference){
  .pdf-viz.pv-live .pv-badge,.pdf-viz.pv-live .pv-chip,
  .pdf-viz.pv-live .pv-done,.pdf-viz.pv-live .pv-p5{opacity:0}
  .pdf-viz.pv-live .pv-sign{animation:pvSign 12s ease-in-out infinite}
  .pdf-viz.pv-live .pv-s2{animation:pvSheet2 12s ease-out infinite}
  .pdf-viz.pv-live .pv-s3{animation:pvSheet3 12s ease-out infinite}
  .pdf-viz.pv-live .pv-badge{animation:pvBadge 12s ease-out infinite}
  .pdf-viz.pv-live .pv-p{animation:pvPage1 12s linear infinite}
  .pdf-viz.pv-live .pv-p2{animation-name:pvPage2}
  .pdf-viz.pv-live .pv-p3{animation-name:pvPage3}
  .pdf-viz.pv-live .pv-p4{animation-name:pvPage4}
  .pdf-viz.pv-live .pv-p5{animation-name:pvPage5}
  .pdf-viz.pv-live .pv-chip{animation:pvChip1 12s ease-out infinite}
  .pdf-viz.pv-live .pv-k2{animation-name:pvChip2}
  .pdf-viz.pv-live .pv-k3{animation-name:pvChip3}
  .pdf-viz.pv-live .pv-k1 svg path{animation:pvTick1 12s ease-out infinite}
  .pdf-viz.pv-live .pv-k2 svg path{animation:pvTick2 12s ease-out infinite}
  .pdf-viz.pv-live .pv-k3 svg path{animation:pvTick3 12s ease-out infinite}
  .pdf-viz.pv-live .pv-done{animation:pvDone 12s ease-out infinite}
}
/* 1. Unterschrift zeichnet sich */
@keyframes pvSign{0%,3%{stroke-dashoffset:100}22%,100%{stroke-dashoffset:0}}
/* 2. Seiten fahren aus dem Deckblatt, Zaehler laeuft mit */
@keyframes pvSheet2{0%,25%{transform:translate(0,0)}38%,100%{transform:translate(11px,-9px)}}
@keyframes pvSheet3{0%,27%{transform:translate(0,0)}42%,100%{transform:translate(19px,-16px)}}
@keyframes pvBadge{0%,28%{opacity:0;transform:scale(.7)}33%,100%{opacity:1;transform:none}}
@keyframes pvPage1{0%,25%{opacity:0}27%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes pvPage2{0%,30%{opacity:0}32%,33%{opacity:1}35%,100%{opacity:0}}
@keyframes pvPage3{0%,34%{opacity:0}36%,37%{opacity:1}39%,100%{opacity:0}}
@keyframes pvPage4{0%,38%{opacity:0}40%,41%{opacity:1}43%,100%{opacity:0}}
@keyframes pvPage5{0%,42%{opacity:0}44%,100%{opacity:1}}
/* 3. Empfaenger erhalten das PDF, je mit Haken */
@keyframes pvChip1{0%,46%{opacity:0;transform:translateX(-14px)}51%,100%{opacity:1;transform:none}}
@keyframes pvChip2{0%,57%{opacity:0;transform:translateX(-14px)}62%,100%{opacity:1;transform:none}}
@keyframes pvChip3{0%,68%{opacity:0;transform:translateX(-14px)}73%,100%{opacity:1;transform:none}}
@keyframes pvTick1{0%,53%{stroke-dashoffset:100}58%,100%{stroke-dashoffset:0}}
@keyframes pvTick2{0%,64%{stroke-dashoffset:100}69%,100%{stroke-dashoffset:0}}
@keyframes pvTick3{0%,75%{stroke-dashoffset:100}80%,100%{stroke-dashoffset:0}}
@keyframes pvDone{0%,82%{opacity:0;transform:translateY(6px)}87%,100%{opacity:1;transform:none}}


/* --- Animiertes Hero-Element: offline erfassen, dann zum Server senden ----- */
.app-viz{position:relative;width:100%;aspect-ratio:360/250}
.av-stage{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.av-dev rect:first-child{filter:drop-shadow(0 10px 20px rgba(20,50,95,.08))}
.av-ring{fill:none;stroke:var(--green2);stroke-width:2.4;opacity:1}
.av-arc{stroke:#bfe3cb}
.av-dot{offset-path:path("M96 92C140 36 216 36 262 90");offset-rotate:0deg;opacity:0;
  filter:drop-shadow(0 4px 10px rgba(216,31,42,.45))}
.av-off{opacity:0}
.av-state{position:absolute;right:0;top:-2%;display:inline-grid;justify-items:end}
.av-s{grid-area:1/1;justify-self:end;white-space:nowrap;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:6px 13px;opacity:0}
.av-s1{background:#f4f7fb;border:1px solid #e3ebf5;color:#78869c}
.av-s2{background:#e8f9ec;border:1px solid #bfe9c9;color:var(--green2);opacity:1}
.av-tag{position:absolute;top:91%;font:700 11px/1 Inter,system-ui,sans-serif;
  color:#93a1b4;letter-spacing:.02em;white-space:nowrap}
.av-t1{left:0}
.av-t3{right:0}

@media (prefers-reduced-motion:no-preference){
  .app-viz.av-live .av-s2,.app-viz.av-live .av-ring{opacity:0}
  .app-viz.av-live .av-arc{stroke:#dbe5f2;animation:avArc 12s ease-out infinite}
  .app-viz.av-live .av-fill{clip-path:inset(0 0 100% 0);animation:avFill1 12s ease-out infinite}
  .app-viz.av-live .av-d3 .av-fill{animation-name:avFill3}
  .app-viz.av-live .av-off{opacity:1;animation:avOff 12s steps(1,end) infinite}
  .app-viz.av-live .av-on{opacity:0;animation:avOn 12s ease-out infinite}
  .app-viz.av-live .av-badge{animation:avBadge 12s ease-out infinite}
  .app-viz.av-live .av-dot{animation:avDot 12s cubic-bezier(.5,0,.5,1) infinite}
  .app-viz.av-live .av-ring{animation:avRing3 12s ease-out infinite}
  .app-viz.av-live .av-s{animation:avState1 12s linear infinite}
  .app-viz.av-live .av-s2{animation-name:avState2}
}
/* Protokoll wird auf dem Smartphone erfasst, der Server fuellt sich erst am Ende */
@keyframes avFill1{0%,3%{clip-path:inset(0 0 100% 0)}26%,100%{clip-path:inset(0 0 0 0)}}
@keyframes avFill3{0%,70%{clip-path:inset(0 0 100% 0)}86%,100%{clip-path:inset(0 0 0 0)}}
/* Symbol auf der Linie: erst kein Netz, ab 38% Empfang */
@keyframes avOff{0%,37.9%{opacity:1}38%,100%{opacity:0}}
@keyframes avOn{0%,37.9%{opacity:0}38%{opacity:1}100%{opacity:1}}
@keyframes avBadge{0%,36%{transform:translate(178px,50px) scale(1)}
  40%{transform:translate(178px,50px) scale(1.18)}44%,100%{transform:translate(178px,50px) scale(1)}}
@keyframes avArc{0%,37%{stroke:#dbe5f2}42%,100%{stroke:#bfe3cb}}
/* Das Protokoll wandert als roter Punkt zum Server */
@keyframes avDot{0%,44%{offset-distance:0%;opacity:0}
  46%{offset-distance:2%;opacity:1}
  68%{offset-distance:98%;opacity:1}
  70%{offset-distance:100%;opacity:1}
  73%,100%{offset-distance:100%;opacity:0}}
/* Server quittiert den Eingang */
@keyframes avRing3{0%,70%{opacity:0}75%,100%{opacity:1}}
/* Statuspille: offline erfasst -> synchronisiert */
@keyframes avState1{0%,2%{opacity:0}5%,66%{opacity:1}70%,100%{opacity:0}}
@keyframes avState2{0%,74%{opacity:0}78%,100%{opacity:1}}

@media (max-width:900px){
  .app-viz{max-width:400px;margin-inline:auto}
}


/* --- Animiertes Hero-Element: Daten bleiben in Deutschland ----------------- */
.dsgvo-viz{position:relative;width:100%;aspect-ratio:360/250}
.dg-map{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dg-dots circle{fill:#dde6f2}
.dg-de circle{fill:var(--green2)}
.dg-pin{filter:drop-shadow(0 6px 12px rgba(18,148,74,.35))}
.dg-ring{fill:none;stroke:var(--green2);stroke-width:2.4;opacity:0}
.dg-way{opacity:0}
.dg-pack{offset-path:path("M18 30C64 34 100 78 138 137");offset-rotate:0deg;opacity:0;
  filter:drop-shadow(0 5px 12px rgba(20,50,95,.16))}
.dg-pack-out{offset-path:path("M138 137C190 122 244 118 292 98")}
.dg-deny{opacity:0}
.dg-state{position:absolute;right:0;top:-2%;display:inline-grid;justify-items:end}
.dg-s{grid-area:1/1;justify-self:end;white-space:nowrap;font-size:11.5px;font-weight:700;
  border-radius:999px;padding:6px 13px;opacity:0}
.dg-s1{background:#f4f7fb;border:1px solid #e3ebf5;color:#78869c}
.dg-s2{background:#fdeef0;border:1px solid #f3ccd1;color:var(--red2)}
.dg-s3{background:#e8f9ec;border:1px solid #bfe9c9;color:var(--green2);opacity:1}

@media (prefers-reduced-motion:no-preference){
  .dsgvo-viz.dg-live .dg-de circle{fill:#dde6f2;animation:dgDe 12s steps(1,end) infinite}
  .dsgvo-viz.dg-live .dg-way{animation:dgWay 12s ease-out infinite}
  .dsgvo-viz.dg-live .dg-way-out{animation-name:dgWayOut}
  .dsgvo-viz.dg-live .dg-pin{opacity:0;animation:dgPin 12s cubic-bezier(.34,1.56,.64,1) infinite}
  .dsgvo-viz.dg-live .dg-ring{animation:dgRing 12s ease-out infinite}
  .dsgvo-viz.dg-live .dg-pack{animation:dgPack 12s cubic-bezier(.5,0,.5,1) infinite}
  .dsgvo-viz.dg-live .dg-pack-out{animation-name:dgPackOut}
  .dsgvo-viz.dg-live .dg-deny{animation:dgDeny 12s cubic-bezier(.34,1.56,.64,1) infinite}
  .dsgvo-viz.dg-live .dg-s3{opacity:0}
  .dsgvo-viz.dg-live .dg-s1{animation:dgS1 12s linear infinite}
  .dsgvo-viz.dg-live .dg-s2{animation:dgS2 12s linear infinite}
  .dsgvo-viz.dg-live .dg-s3{animation:dgS3 12s linear infinite}
}
/* Weg herein, ab 42% der Weg nach draussen */
@keyframes dgWay{0%,2%{opacity:0}8%,34%{opacity:1}40%,100%{opacity:0}}
@keyframes dgWayOut{0%,42%{opacity:0}48%,70%{opacity:1}76%,100%{opacity:0}}
/* Das Protokoll erreicht den Standort und wird dort aufgenommen */
@keyframes dgPack{0%,5%{offset-distance:0%;opacity:0}
  8%{offset-distance:4%;opacity:1}28%{offset-distance:100%;opacity:1}
  32%,100%{offset-distance:100%;opacity:0}}
@keyframes dgPin{0%,29%{opacity:0;transform:translate(138px,137px) scale(.4)}
  36%{opacity:1;transform:translate(138px,137px) scale(1.12)}
  40%,100%{opacity:1;transform:translate(138px,137px) scale(1)}}
@keyframes dgRing{0%,31.9%{opacity:0;r:10}32%{opacity:.5;r:10}44%,100%{opacity:0;r:26}}
@keyframes dgDe{0%,33.9%{fill:#dde6f2}34%,100%{fill:#12944a}}
/* Versuch nach draussen: wird auf halbem Weg abgewiesen und kehrt zurueck */
@keyframes dgPackOut{0%,44%{offset-distance:0%;opacity:0}
  47%{offset-distance:6%;opacity:1}58%{offset-distance:78%;opacity:1}
  62%{offset-distance:78%;opacity:1}70%{offset-distance:0%;opacity:1}
  73%,100%{offset-distance:0%;opacity:0}}
@keyframes dgDeny{0%,57%{opacity:0;transform:translate(292px,98px) scale(.5)}
  62%{opacity:1;transform:translate(292px,98px) scale(1.1)}
  66%,72%{opacity:1;transform:translate(292px,98px) scale(1)}
  77%,100%{opacity:0;transform:translate(292px,98px) scale(1)}}
/* Statuspille: Uebertragung -> abgewiesen -> gespeichert */
@keyframes dgS1{0%,3%{opacity:0}7%,36%{opacity:1}41%,100%{opacity:0}}
@keyframes dgS2{0%,56%{opacity:0}60%,74%{opacity:1}78%,100%{opacity:0}}
@keyframes dgS3{0%,79%{opacity:0}83%,100%{opacity:1}}

@media (max-width:900px){
  .dsgvo-viz{max-width:400px;margin-inline:auto}
}