:root{--green:#07523d;--green2:#064733;--accent:#0a7554;--bg:#f7f9f8;--border:#e2e8e5;--text:#24312b;--muted:#738079;--red:#ef151d;--orange:#ff620f}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:18px 14px 20px;background:linear-gradient(180deg,#07523d 0%,#064733 58%,#053d2d 100%);color:#fff;display:flex;flex-direction:column;box-shadow:8px 0 28px rgba(3,55,39,.08)}
.brand{padding:4px 7px 18px;border-bottom:1px solid rgba(255,255,255,.13)}.brand img{width:178px;height:74px;object-fit:contain;background:#fff;border-radius:11px;padding:5px 9px;box-shadow:0 7px 18px rgba(0,0,0,.1)}
.product{display:flex;align-items:center;gap:10px;padding:15px 10px 8px}.product-icon{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:20px}.product strong,.product small{display:block}.product small{opacity:.55;font-size:11px}
nav{display:flex;flex-direction:column;gap:3px;padding-top:6px}nav a{color:rgba(255,255,255,.8);text-decoration:none;padding:10px 12px;border-radius:9px;display:flex;gap:11px;align-items:center;font-weight:600}nav a:hover{background:rgba(255,255,255,.09);color:#fff}nav a.active{background:#fff;color:var(--green);box-shadow:0 6px 16px rgba(0,0,0,.1);font-weight:800}.nav-label{font-size:10px;letter-spacing:.12em;opacity:.45;margin:18px 11px 5px}.side-footer{margin-top:auto;padding:16px 10px 0;border-top:1px solid rgba(255,255,255,.12);font-size:11px;line-height:1.6;opacity:.55}
.workspace{min-width:0}.topbar{height:76px;background:#fff;border-bottom:1px solid #e5e9e7;display:flex;align-items:center;justify-content:space-between;padding:12px 28px;position:sticky;top:0;z-index:10}.topbar strong{display:block;font-size:18px}.eyebrow{font-size:10px;letter-spacing:.12em;font-weight:850;color:#0b7956}.status-dot{display:flex;align-items:center;gap:8px;color:#627069;font-size:12px}.status-dot i{width:9px;height:9px;border-radius:50%;background:#22a06b;box-shadow:0 0 0 4px #e6f5ef}
main{padding:26px 28px 46px;max-width:1500px}.hero{min-height:225px;background:#fff;border:1px solid var(--border);border-radius:15px;padding:34px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 3px 14px rgba(16,44,32,.04);overflow:hidden}.hero h1,.page-head h1{font-size:30px;margin:7px 0 8px;color:#18352a}.hero p,.page-head p{max-width:720px;color:var(--muted);line-height:1.6}.hero img{width:300px;height:150px;object-fit:contain}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}.stat{background:#fff;border:1px solid var(--border);border-radius:13px;padding:21px;text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(16,44,32,.03)}.stat small,.stat strong,.stat span{display:block}.stat small{color:var(--muted);font-weight:700}.stat strong{font-size:31px;color:var(--green);margin:8px 0}.stat span{font-size:12px;color:#7c8882}.stat .ok{font-size:22px;color:#15945e}
.panel{background:#fff;border:1px solid var(--border);border-radius:13px;padding:21px;margin-top:18px;box-shadow:0 2px 10px rgba(16,44,32,.03)}.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.panel h2,.panel-head h2{margin:0;font-size:18px}.page-head{margin:2px 0 20px}.page-head h1{margin-bottom:3px}
.button{border:0;border-radius:9px;padding:10px 15px;text-decoration:none;font-weight:750;cursor:pointer}.button.primary{background:var(--green);color:#fff}.button.primary:hover{background:#096247}
table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden}th{text-align:left;background:#f7faf8;color:#65716b;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:11px 12px;border-bottom:1px solid var(--border)}td{padding:13px 12px;border-bottom:1px solid #edf0ee}tbody tr:hover td{background:#fbfdfc}
.pill{display:inline-block;border-radius:999px;padding:5px 9px;background:#eef1ef;color:#69736e;font-size:11px;font-weight:750}.pill.on{background:#e7f6ed;color:#167346}.count{background:#edf3ef;border-radius:999px;padding:5px 9px;font-size:11px;color:var(--green);font-weight:800}.empty{padding:24px;background:#f8faf9;border:1px dashed #ccd8d2;border-radius:10px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid.three{grid-template-columns:repeat(3,1fr)}label{font-size:12px;font-weight:750;color:#526159}input,select,textarea{display:block;width:100%;margin-top:6px;min-height:42px;border:1px solid #d8dfdb;border-radius:9px;background:#fff;padding:9px 11px;font:inherit;color:var(--text);outline:none}textarea{min-height:86px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:#63a98c;box-shadow:0 0 0 3px rgba(0,114,79,.1)}.wide{grid-column:1/-1}.form-action{display:flex;align-items:end}.switch{width:48px;height:27px;border:0;border-radius:20px;background:#cbd3cf;padding:3px;cursor:pointer}.switch span{display:block;width:21px;height:21px;border-radius:50%;background:#fff;transition:.2s}.switch.enabled{background:#16935e}.switch.enabled span{transform:translateX(21px)}
.package-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.package{background:#fff;border:1px solid var(--border);border-radius:15px;padding:25px;box-shadow:0 3px 14px rgba(16,44,32,.04);position:relative}.package.featured{border:2px solid var(--green);transform:translateY(-4px)}.package h2{font-size:21px;margin:10px 0}.price{padding:16px 0;border-bottom:1px solid var(--border)}.price strong{display:block;font-size:31px;color:var(--green)}.price small{color:var(--muted)}.package ul{list-style:none;padding:10px 0 0;margin:0}.package li{padding:8px 0;border-bottom:1px solid #f0f2f1}.package li:before{content:"✓";color:#16895a;font-weight:900;margin-right:8px}.recommended{display:inline-block;background:var(--green);color:#fff;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:850;letter-spacing:.08em}.pricing-note{display:grid;grid-template-columns:1fr 1fr;gap:18px}.pricing-note div{padding:15px;background:#f7faf8;border-radius:10px}.pricing-note small,.pricing-note strong{display:block}.pricing-note strong{font-size:20px;color:var(--green);margin-top:5px}.pricing-note p{grid-column:1/-1;color:var(--muted);font-size:12px}
@media(max-width:900px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.brand img{width:150px}.workspace{width:100%}.stats,.package-grid,.form-grid.three{grid-template-columns:1fr}.hero img{display:none}.form-grid{grid-template-columns:1fr}.topbar{position:relative}main{padding:18px}}

/* ===== PN-API Public Login / One-Pager - Patch 006 ===== */
.login-body{margin:0;background:#f4f7f5;color:#18352b;font-family:Inter,Segoe UI,Arial,sans-serif}
.login-page{min-height:100vh;background:radial-gradient(circle at 50% 42%,#fff 0,#f5f8f6 46%,#edf3ef 100%)}
.login-head{min-height:82px;padding:14px 5vw;display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dfe8e2;box-shadow:0 3px 16px rgba(18,61,43,.05)}
.login-head>img{width:150px;height:58px;object-fit:contain}
.login-form{display:flex;gap:9px;align-items:center}
.login-form input{width:165px;padding:11px 13px;border:1px solid #cad9d0;border-radius:8px;background:#f9fbfa;outline:none}
.login-form input:focus{border-color:#176a49;box-shadow:0 0 0 3px rgba(23,106,73,.09)}
.login-form button{padding:11px 18px;border:0;border-radius:8px;background:#176a49;color:#fff;font-weight:700;cursor:pointer}
.login-form button:hover{background:#105b3e}
.login-error{font-size:12px;color:#a42b2b;margin-top:5px;text-align:right}
.public-main{width:min(1180px,92vw);margin:auto;padding:55px 0 36px}
.public-intro{text-align:center;max-width:790px;margin:0 auto 32px}
.public-intro h1{font-size:clamp(30px,4vw,52px);line-height:1.06;margin:9px 0 14px;color:#123d2c}
.public-intro p{font-size:17px;line-height:1.65;color:#5a6f65;margin:0}
.hub-stage{position:relative;height:460px;max-width:900px;margin:10px auto 38px}
.hub-core,.hub-node{position:absolute;z-index:3;background:#fff;border:1px solid #d9e6de;box-shadow:0 12px 35px rgba(19,69,48,.10)}
.hub-core{left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:150px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #2b805e}
.hub-core img{width:145px;max-height:78px;object-fit:contain}.hub-core small{color:#668076;margin-top:4px}
.hub-node{width:155px;padding:16px 13px;border-radius:16px;text-align:center}
.hub-node strong{display:block;color:#155f43;font-size:16px}.hub-node small{display:block;color:#71857c;margin-top:4px;font-size:12px}
.n1{left:3%;top:7%}.n2{right:3%;top:7%}.n3{left:0;top:44%}.n4{right:0;top:44%}.n5{left:8%;bottom:3%}.n6{right:8%;bottom:3%}
.hub-lines{position:absolute;inset:0;z-index:1}.line{position:absolute;left:50%;top:50%;width:310px;height:2px;background:linear-gradient(90deg,#76a893,#d6e5dd);transform-origin:0 50%}
.l1{transform:rotate(-145deg)}.l2{transform:rotate(-35deg)}.l3{transform:rotate(180deg)}.l4{transform:rotate(0deg)}.l5{transform:rotate(145deg)}.l6{transform:rotate(35deg)}
.pulse{position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;background:#e46b2f;box-shadow:0 0 0 5px rgba(228,107,47,.12);animation:dataPulse 3.2s infinite ease-in-out}
.p2{animation-delay:1.05s;background:#27865f}.p3{animation-delay:2.1s;background:#d84d45}
@keyframes dataPulse{0%{transform:translate(-5px,-5px);opacity:0}15%{opacity:1}50%{transform:translate(205px,-5px);opacity:1}100%{transform:translate(300px,-5px);opacity:0}}
.public-features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.public-features article{background:#fff;border:1px solid #dfe9e3;border-radius:15px;padding:22px;box-shadow:0 8px 25px rgba(19,69,48,.05)}
.public-features strong{font-size:17px;color:#155f43}.public-features p{color:#667a71;line-height:1.55;margin:8px 0 0}
.public-footer{text-align:center;color:#819087;font-size:12px;padding:20px 0 30px}
@media(max-width:760px){
 .login-head{flex-direction:column;gap:12px;padding:12px}.login-form{flex-wrap:wrap;justify-content:center}.login-form input{width:135px}
 .public-main{padding-top:34px}.hub-stage{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
 .hub-lines{display:none}.hub-core,.hub-node{position:static;transform:none;width:auto;height:auto}
 .hub-core{grid-column:1/-1;padding:22px}.public-features{grid-template-columns:1fr}.n1,.n2,.n3,.n4,.n5,.n6{position:static}
}

/* =========================================================
   PN-API PATCH 007 - Public Premium Landingpage
   ========================================================= */
.pn7-body{margin:0;background:#071a13;color:#eff9f4;font-family:Inter,"Segoe UI",Arial,sans-serif}
.pn7-body *{box-sizing:border-box}
.pn7-shell{min-height:100vh;overflow:hidden;background:
 radial-gradient(circle at 72% 18%,rgba(30,126,88,.19),transparent 30%),
 radial-gradient(circle at 12% 52%,rgba(154,54,42,.07),transparent 28%),
 linear-gradient(180deg,#0a2018 0,#071812 56%,#091d16 100%)}
.pn7-header{height:102px;display:flex;align-items:center;justify-content:space-between;padding:0 max(4vw,35px);border-bottom:1px solid rgba(159,212,187,.12);background:rgba(6,25,18,.74);backdrop-filter:blur(18px);position:relative;z-index:30}
.pn7-brand img{width:158px;height:70px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.15))}
.pn7-loginbox{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.pn7-login-label{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7fa695;display:flex;align-items:center;gap:7px}
.pn7-login-label span{width:6px;height:6px;border-radius:50%;background:#5ee0a2;box-shadow:0 0 9px #5ee0a2}
.pn7-login{display:flex;gap:8px}
.pn7-login input{height:38px;width:150px;border:1px solid rgba(152,207,181,.18);border-radius:7px;background:rgba(255,255,255,.055);color:#eef8f3;padding:0 12px;outline:none}
.pn7-login input::placeholder{color:#759387}.pn7-login input:focus{border-color:#4ab17f;box-shadow:0 0 0 3px rgba(74,177,127,.08)}
.pn7-login button{height:38px;border:0;border-radius:7px;padding:0 16px;background:#e8f4ee;color:#0e4a33;font-weight:800;cursor:pointer}.pn7-login button b{margin-left:7px}
.pn7-error{font-size:11px;color:#ff9b91}

.pn7-hero{width:min(1440px,94vw);min-height:680px;margin:auto;display:grid;grid-template-columns:.78fr 1.22fr;align-items:center;position:relative}
.pn7-copy{padding:50px 0 70px 2vw;position:relative;z-index:4}
.pn7-kicker,.pn7-section-tag{font-size:11px;font-weight:800;letter-spacing:.22em;color:#6ec99e}.pn7-kicker i{display:inline-block;width:28px;height:1px;background:#6ec99e;vertical-align:middle;margin-right:10px}
.pn7-copy h1{font-size:clamp(48px,5.3vw,82px);line-height:.97;letter-spacing:-.045em;margin:20px 0 25px;font-weight:760}.pn7-copy h1 span{color:#61c596}
.pn7-copy>p{max-width:570px;font-size:18px;line-height:1.7;color:#9db7ab}
.pn7-flow-mini{display:flex;align-items:center;gap:12px;margin-top:35px}
.pn7-flow-mini div{display:flex;flex-direction:column;gap:3px}.pn7-flow-mini strong{font-size:10px;color:#4fae81;letter-spacing:.1em}.pn7-flow-mini span{font-size:13px;color:#d6e7df}.pn7-flow-mini em{font-style:normal;color:#365e4c}

.pn7-network-wrap{position:relative;height:650px}
.pn7-network{position:absolute;width:760px;height:620px;left:50%;top:50%;transform:translate(-50%,-50%) scale(.94)}
.pn7-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pn7-base-lines line{stroke:url(#pn7line);stroke-width:1.2;stroke-dasharray:3 5}
.pn7-beams .beam{stroke:url(#pn7beam);stroke-width:5;stroke-linecap:round;stroke-dasharray:48 520;stroke-dashoffset:0;opacity:.95;animation:pn7Beam 3.8s linear infinite}
.pn7-beams .b2{animation-delay:-.45s}.pn7-beams .b3{animation-delay:-1.25s}.pn7-beams .b4{animation-delay:-2.1s}.pn7-beams .b5{animation-delay:-.9s}.pn7-beams .b6{animation-delay:-2.75s}.pn7-beams .b7{animation-delay:-1.7s}.pn7-beams .b8{animation-delay:-3.2s}.pn7-beams .b9{animation-delay:-.2s}
@keyframes pn7Beam{0%{stroke-dashoffset:0;opacity:.08}12%{opacity:1}75%{opacity:.9}100%{stroke-dashoffset:-570;opacity:.08}}

.pn7-core{position:absolute;left:380px;top:310px;width:190px;height:190px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;z-index:8}
.pn7-core:before{content:"";position:absolute;width:138px;height:138px;border-radius:50%;background:radial-gradient(circle,rgba(83,216,155,.22),rgba(21,88,61,.12) 55%,transparent 72%);box-shadow:0 0 55px rgba(70,215,150,.22)}
.pn7-core-ring{position:absolute;border:1px solid rgba(103,221,165,.23);border-radius:50%;animation:pn7Ring 3.4s ease-out infinite}.pn7-core-ring.r1{width:160px;height:160px}.pn7-core-ring.r2{width:190px;height:190px;animation-delay:1.7s}
@keyframes pn7Ring{0%{transform:scale(.68);opacity:0}30%{opacity:.75}100%{transform:scale(1.16);opacity:0}}
.pn7-core-inner{width:132px;height:132px;border-radius:50%;background:linear-gradient(145deg,#f8fbf9,#e7f1ec);display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid rgba(86,195,143,.75);box-shadow:0 0 0 7px rgba(35,111,78,.22),0 18px 50px rgba(0,0,0,.34)}
.pn7-core-inner img{width:100px;height:64px;object-fit:contain}.pn7-core-inner span{font-size:8px;font-weight:900;letter-spacing:.22em;color:#31664e;margin-top:-4px}

.pn7-node{position:absolute;z-index:10;min-width:150px;display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(116,190,155,.20);border-radius:12px;background:linear-gradient(135deg,rgba(19,57,42,.96),rgba(10,37,27,.96));box-shadow:0 12px 35px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035)}
.pn7-node:after{content:"";position:absolute;inset:-1px;border-radius:12px;box-shadow:0 0 0 rgba(81,225,157,0);animation:pn7NodeGlow 3.8s infinite}
@keyframes pn7NodeGlow{0%,72%,100%{box-shadow:0 0 0 rgba(81,225,157,0)}82%{box-shadow:0 0 24px rgba(81,225,157,.18)}}
.pn7-node .ico{width:31px;height:31px;border-radius:8px;background:rgba(74,174,126,.11);color:#6bd6a3;display:grid;place-items:center;font-size:14px;font-weight:800}
.pn7-node b{display:block;font-size:13px;color:#eff9f4}.pn7-node small{display:block;font-size:9px;color:#76998a;margin-top:2px}
.node1{left:76px;top:57px}.node2{left:305px;top:13px}.node3{right:6px;top:57px}.node4{right:-40px;top:198px}.node5{right:-35px;top:390px}.node6{right:58px;bottom:11px}.node7{left:139px;bottom:11px}.node8{left:-37px;top:390px}.node9{left:-45px;top:198px}
.node2:after{animation-delay:.5s}.node3:after{animation-delay:1.2s}.node4:after{animation-delay:2.1s}.node5:after{animation-delay:.9s}.node6:after{animation-delay:2.8s}.node7:after{animation-delay:1.7s}.node8:after{animation-delay:3.2s}.node9:after{animation-delay:.2s}

.pn7-statement{text-align:center;width:min(820px,90vw);margin:40px auto 55px}.pn7-statement>span{font-size:11px;letter-spacing:.25em;color:#60c493;font-weight:800}.pn7-statement h2{font-size:clamp(34px,4vw,58px);line-height:1.04;letter-spacing:-.035em;margin:12px 0 18px}.pn7-statement p{font-size:17px;line-height:1.7;color:#91ac9f;margin:auto;max-width:700px}
.pn7-process{width:min(1160px,90vw);margin:0 auto 100px;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(124,184,157,.14);border-radius:18px;overflow:hidden;background:rgba(255,255,255,.018)}
.pn7-process article{padding:32px 31px;position:relative;min-height:230px}.pn7-process article+article{border-left:1px solid rgba(124,184,157,.14)}
.pn7-num{font-size:10px;color:#4ba879;font-weight:800;letter-spacing:.12em}.pn7-icon{font-size:26px;color:#72d8a8;margin:23px 0 16px}.pn7-process h3{font-size:19px;margin:0 0 10px}.pn7-process p{font-size:14px;line-height:1.65;color:#7f9c8e;margin:0}

.pn7-flex{width:min(1160px,90vw);margin:0 auto 90px;padding:52px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;border-radius:22px;background:linear-gradient(120deg,rgba(30,86,61,.42),rgba(11,40,29,.52));border:1px solid rgba(110,188,151,.13)}
.pn7-flex h2{font-size:38px;line-height:1.08;margin:12px 0 17px}.pn7-flex p{color:#8ca99a;line-height:1.7;max-width:500px}
.pn7-techgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.pn7-techgrid span{padding:14px 8px;text-align:center;border-radius:9px;border:1px solid rgba(113,190,153,.16);background:rgba(255,255,255,.025);font-size:12px;color:#b7cec3}
.pn7-footer{min-height:100px;border-top:1px solid rgba(137,190,166,.12);display:flex;align-items:center;gap:20px;padding:20px max(5vw,40px);color:#718f80}.pn7-footer img{width:100px;height:50px;object-fit:contain}.pn7-footer span{font-size:12px}.pn7-footer small{margin-left:auto}

@media(max-width:1150px){
 .pn7-hero{grid-template-columns:1fr;min-height:auto}.pn7-copy{text-align:center;padding:70px 5vw 10px}.pn7-copy>p{margin-left:auto;margin-right:auto}.pn7-flow-mini{justify-content:center}
 .pn7-network-wrap{height:650px}.pn7-network{transform:translate(-50%,-50%) scale(.88)}
}
@media(max-width:760px){
 .pn7-header{height:auto;min-height:150px;flex-direction:column;padding:14px;gap:8px}.pn7-loginbox{align-items:center}.pn7-login{flex-wrap:wrap;justify-content:center}.pn7-login input{width:135px}
 .pn7-copy{padding-top:48px}.pn7-copy h1{font-size:46px}.pn7-copy>p{font-size:16px}
 .pn7-network-wrap{height:720px}.pn7-network{width:100%;height:auto;position:relative;left:auto;top:auto;transform:none;display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:210px}
 .pn7-svg{display:none}.pn7-core{left:50%;top:95px}.pn7-node{position:static;min-width:0}.pn7-node small{font-size:8px}
 .pn7-process{grid-template-columns:1fr}.pn7-process article+article{border-left:0;border-top:1px solid rgba(124,184,157,.14)}
 .pn7-flex{grid-template-columns:1fr;padding:30px;gap:25px}.pn7-techgrid{grid-template-columns:repeat(2,1fr)}
 .pn7-footer{flex-wrap:wrap}.pn7-footer small{margin-left:0;width:100%}
}
@media(prefers-reduced-motion:reduce){
 .pn7-beams .beam,.pn7-core-ring,.pn7-node:after{animation:none}
}

/* =========================================================
   PN-API PATCH 008 - Lichtbalken vom Hub zu jedem System
   ========================================================= */
.pn8-svg{overflow:visible}
.pn8-lines path{
  fill:none;
  stroke:url(#pn8Base);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:4 6;
  opacity:.72;
}
.pn8-run{
  fill:none;
  stroke:#8dffd0;
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:54 500;
  stroke-dashoffset:0;
  opacity:.96;
  animation:pn8Out 2.9s linear infinite;
}
.pn8-run.r2{animation-delay:-.35s}
.pn8-run.r3{animation-delay:-.70s}
.pn8-run.r4{animation-delay:-1.05s}
.pn8-run.r5{animation-delay:-1.40s}
.pn8-run.r6{animation-delay:-1.75s}
.pn8-run.r7{animation-delay:-2.10s}
.pn8-run.r8{animation-delay:-2.45s}
.pn8-run.r9{animation-delay:-2.80s}
@keyframes pn8Out{
  0%{stroke-dashoffset:0;opacity:.10}
  8%{opacity:1}
  88%{opacity:1}
  100%{stroke-dashoffset:-554;opacity:.08}
}
.pn8-packets circle{
  fill:#effff7;
  stroke:#64e7aa;
  stroke-width:2;
}
.pn8-centerpulse{
  fill:#eafff4;
  stroke:#62dda5;
  stroke-width:3;
  transform-origin:380px 310px;
  animation:pn8Center 1.7s ease-out infinite;
  filter:drop-shadow(0 0 8px #67e5aa);
}
@keyframes pn8Center{
  0%{opacity:.95;transform:scale(.65)}
  55%{opacity:.7;transform:scale(1.35)}
  100%{opacity:.15;transform:scale(2)}
}

/* Die Systemkarten reagieren dezent auf den ankommenden Datenfluss. */
.pn7-node{
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.pn7-node:after{
  animation:pn8Target 3s ease-in-out infinite;
}
.node1:after{animation-delay:2.25s}
.node2:after{animation-delay:2.60s}
.node3:after{animation-delay:2.95s}
.node4:after{animation-delay:3.30s}
.node5:after{animation-delay:3.65s}
.node6:after{animation-delay:4.00s}
.node7:after{animation-delay:4.35s}
.node8:after{animation-delay:4.70s}
.node9:after{animation-delay:5.05s}
@keyframes pn8Target{
  0%,72%,100%{box-shadow:0 0 0 rgba(99,231,169,0)}
  82%{box-shadow:0 0 28px rgba(99,231,169,.34),inset 0 0 15px rgba(99,231,169,.06)}
}

@media(prefers-reduced-motion:reduce){
  .pn8-run,.pn8-packets circle,.pn8-centerpulse,.pn7-node:after{animation:none}
}

/* =========================================================
   PN-API PATCH 009
   Weisser Login-Header + sichere CRM-Verbindung
   ========================================================= */

/* Oberer Bereich komplett weiss */
.pn7-header{
  background:#ffffff !important;
  border-bottom:1px solid #dfe8e3 !important;
  box-shadow:0 5px 22px rgba(7,42,29,.08) !important;
  backdrop-filter:none !important;
}

/* Login-Beschriftung auf weissem Hintergrund */
.pn7-login-label{
  color:#557166 !important;
}
.pn7-login-label span{
  background:#2fa873 !important;
  box-shadow:0 0 8px rgba(47,168,115,.45) !important;
}

/* Eingabefelder hell und sauber */
.pn7-login input{
  background:#f7faf8 !important;
  color:#173e2e !important;
  border:1px solid #ccdcd3 !important;
  box-shadow:none !important;
}
.pn7-login input::placeholder{
  color:#7a9187 !important;
}
.pn7-login input:focus{
  background:#ffffff !important;
  border-color:#2c9568 !important;
  box-shadow:0 0 0 3px rgba(44,149,104,.10) !important;
}

/* Loginbutton im PN-Gruen */
.pn7-login button{
  background:#176a49 !important;
  color:#ffffff !important;
  box-shadow:0 5px 14px rgba(23,106,73,.18) !important;
}
.pn7-login button:hover{
  background:#10583d !important;
}
.pn7-error{
  color:#b33232 !important;
}

/* CRM-Verbindung explizit sichtbar */
.pn9-crm-base{
  stroke:#54d39a;
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:4 6;
  opacity:.78;
}
.pn9-crm-beam{
  stroke:#a0ffda;
  stroke-width:7;
  stroke-linecap:round;
  stroke-dasharray:52 340;
  stroke-dashoffset:0;
  opacity:.96;
  animation:pn9CRMBeam 2.8s linear infinite;
}
.pn9-crm-packet{
  fill:#ffffff;
  stroke:#68efb1;
  stroke-width:2;
  filter:drop-shadow(0 0 7px #66e8ad);
}
@keyframes pn9CRMBeam{
  0%{
    stroke-dashoffset:0;
    opacity:.12;
  }
  10%{
    opacity:1;
  }
  88%{
    opacity:1;
  }
  100%{
    stroke-dashoffset:-390;
    opacity:.10;
  }
}

/* CRM-Karte erhaelt passend zum eintreffenden Licht einen Glow */
.node2:after{
  animation:pn9CRMTarget 2.8s ease-in-out infinite !important;
}
@keyframes pn9CRMTarget{
  0%,72%,100%{
    box-shadow:0 0 0 rgba(99,231,169,0);
  }
  84%{
    box-shadow:
      0 0 30px rgba(99,231,169,.38),
      inset 0 0 15px rgba(99,231,169,.07);
  }
}

@media(max-width:760px){
  .pn7-header{
    background:#ffffff !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .pn9-crm-beam,
  .pn9-crm-packet,
  .node2:after{
    animation:none !important;
  }
}

/* =========================================================
   PN-API PATCH 010
   Weisser Abschnitt: Eine Schnittstelle. Viele Moeglichkeiten.
   ========================================================= */

/* Der Bereich wird optisch zu einer hellen Produktsektion */
.pn7-statement{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:75px max(5vw,40px) 42px !important;
  background:#ffffff !important;
  color:#173e2e !important;
  position:relative;
}

.pn7-statement > span{
  display:block;
  color:#25835d !important;
}

.pn7-statement h2{
  color:#123d2c !important;
}

.pn7-statement p{
  color:#647a70 !important;
}

/* Drei Kaestchen ebenfalls im weissen Abschnitt */
.pn7-process{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 max(5vw,40px) 80px !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:18px !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  background:#ffffff !important;
}

/* Einzelne Karten */
.pn7-process article{
  min-height:245px !important;
  padding:30px 30px !important;
  background:#f7faf8 !important;
  border:1px solid #dce8e1 !important;
  border-radius:16px !important;
  box-shadow:0 10px 30px rgba(20,74,51,.07) !important;
  color:#173e2e !important;
}

/* Alte Trennlinien entfernen */
.pn7-process article + article{
  border-left:1px solid #dce8e1 !important;
  border-top:1px solid #dce8e1 !important;
}

.pn7-process .pn7-num{
  color:#2a9367 !important;
}

.pn7-process .pn7-icon{
  color:#23865e !important;
}

.pn7-process h3{
  color:#173e2e !important;
}

.pn7-process p{
  color:#657b70 !important;
}

/* Kleiner Hover-Effekt */
.pn7-process article{
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.pn7-process article:hover{
  transform:translateY(-3px);
  border-color:#bdd9ca !important;
  box-shadow:0 15px 38px rgba(20,74,51,.11) !important;
}

@media(max-width:760px){
  .pn7-statement{
    padding:55px 24px 32px !important;
  }

  .pn7-process{
    grid-template-columns:1fr !important;
    padding:0 24px 55px !important;
  }

  .pn7-process article + article{
    border-left:1px solid #dce8e1 !important;
  }
}

/* =========================================================
   PN-API PATCH 012
   Heller Informationsbereich ueber volle Browserbreite
   ========================================================= */

/*
   Die Landingpage liegt teilweise in begrenzten Containern.
   Mit 100vw + calc() ziehen wir Statement und Karten bis
   exakt an den linken und rechten Browserrand.
*/
.pn7-statement,
.pn7-process{
  width:100vw !important;
  max-width:none !important;
  position:relative !important;
  left:50% !important;
  right:50% !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  background:#ffffff !important;
}

/* Ueberschrift bleibt sauber zentriert und nicht uebermaessig breit */
.pn7-statement{
  padding:78px max(5vw,40px) 42px !important;
  text-align:center !important;
}

.pn7-statement h2,
.pn7-statement p{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Die drei Karten nutzen die volle weisse Flaeche,
   bleiben inhaltlich aber angenehm begrenzt. */
.pn7-process{
  padding:0 max(calc((100vw - 1160px)/2),40px) 82px !important;
  gap:18px !important;
}

/* Kein dunkler Spalt zwischen Ueberschrift und Karten */
.pn7-statement + .pn7-process{
  margin-top:0 !important;
}

@media(max-width:760px){
  .pn7-statement{
    padding:55px 24px 32px !important;
  }
  .pn7-process{
    padding:0 24px 55px !important;
  }
}

/* =========================================================
   PN-API PATCH 013
   ECHTE Full-Bleed Hintergrundflaeche
   ========================================================= */

/* Wichtig: Eltern duerfen den 100vw-Hintergrund nicht abschneiden */
.pn7-shell,
.pn7-body,
.pn7-body main{
  overflow-x:clip !important;
}

/* Inhalt wieder normal positionieren */
.pn7-statement,
.pn7-process{
  width:auto !important;
  max-width:none !important;
  left:auto !important;
  right:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
  position:relative !important;
  z-index:1 !important;
}

/* Full-Bleed Weiss unabhaengig von der Breite des Content-Containers */
.pn7-statement::before,
.pn7-process::before{
  content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:100vw !important;
  margin-left:-50vw !important;
  background:#ffffff !important;
  pointer-events:none !important;
}

/* Statement */
.pn7-statement{
  background:#ffffff !important;
  padding:78px 40px 42px !important;
  text-align:center !important;
  max-width:1160px !important;
}

.pn7-statement h2,
.pn7-statement p{
  max-width:820px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Drei Karten */
.pn7-process{
  background:#ffffff !important;
  width:min(1160px,90vw) !important;
  padding:0 0 82px !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  gap:18px !important;
}

/* Weisser Uebergang ohne sichtbare Luecke */
.pn7-statement::before{
  bottom:-2px !important;
}
.pn7-process::before{
  top:-2px !important;
}

/* Falls ein uebergeordneter Container einen eigenen dunklen Hintergrund hat:
   links/rechts zusaetzliche feste Weissflaeche erzwingen */
.pn7-statement::after{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  top:0 !important;
  left:calc(50% - 50vw) !important;
  width:100vw !important;
  height:calc(100% + 2px) !important;
  background:#ffffff !important;
  pointer-events:none !important;
}

.pn7-process::after{
  content:"" !important;
  position:absolute !important;
  z-index:-2 !important;
  top:-2px !important;
  left:calc(50% - 50vw) !important;
  width:100vw !important;
  height:calc(100% + 2px) !important;
  background:#ffffff !important;
  pointer-events:none !important;
}

@media(max-width:760px){
  .pn7-statement{
    padding:55px 24px 32px !important;
  }
  .pn7-process{
    width:calc(100% - 48px) !important;
    padding-bottom:55px !important;
  }
}


/* =========================================================
   PN-API PATCH 014 FIX2
   Echter Full-Width Wrapper
   ========================================================= */

.pn14-white-band{
  width:100vw !important;
  max-width:none !important;
  position:relative !important;
  left:50% !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding:0 !important;
  background:#ffffff !important;
  box-sizing:border-box !important;
}

.pn14-white-band .pn7-statement::before,
.pn14-white-band .pn7-statement::after,
.pn14-white-band .pn7-process::before,
.pn14-white-band .pn7-process::after{
  display:none !important;
  content:none !important;
}

.pn14-white-band .pn7-statement{
  width:min(1160px,90vw) !important;
  max-width:1160px !important;
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  padding:78px 20px 42px !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

.pn14-white-band .pn7-process{
  width:min(1160px,90vw) !important;
  max-width:1160px !important;
  margin:0 auto !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
  padding:0 0 82px !important;
  background:transparent !important;
  box-sizing:border-box !important;
}

.pn7-body main,
.pn7-shell{
  max-width:none !important;
}

@media(max-width:760px){
  .pn14-white-band .pn7-statement{
    width:100% !important;
    padding:55px 24px 32px !important;
  }

  .pn14-white-band .pn7-process{
    width:100% !important;
    padding:0 24px 55px !important;
  }
}


/* =========================================================
   PN-API PATCH 015
   Prozesskarten: staerker, gruener, zentriert
   ========================================================= */

.pn14-white-band .pn7-process > *{
  border:4px solid #0f6b46 !important;
  border-radius:18px !important;
  background:#ffffff !important;
  text-align:center !important;
  padding:34px 28px 32px !important;
  box-shadow:0 10px 28px rgba(15,107,70,.10) !important;
  box-sizing:border-box !important;
}

/* 01 / 02 / 03 */
.pn14-white-band .pn7-process > * > :first-child{
  display:block !important;
  width:100% !important;
  margin:0 auto 18px !important;
  text-align:center !important;
  font-size:54px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-2px !important;
  color:#0f6b46 !important;
}

/* Ueberschriften */
.pn14-white-band .pn7-process h3,
.pn14-white-band .pn7-process h4{
  width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
  font-weight:800 !important;
}

/* Beschreibungstexte / Pfeile / sonstige Inhalte */
.pn14-white-band .pn7-process p,
.pn14-white-band .pn7-process span,
.pn14-white-band .pn7-process div{
  text-align:center !important;
}

/* Falls die Nummer selbst ein div/span ist, Zentrierung beibehalten */
.pn14-white-band .pn7-process > * > div:first-child,
.pn14-white-band .pn7-process > * > span:first-child{
  font-size:54px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#0f6b46 !important;
  text-align:center !important;
}

/* Hover nur dezent */
.pn14-white-band .pn7-process > *:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 34px rgba(15,107,70,.16) !important;
}

@media(max-width:760px){
  .pn14-white-band .pn7-process > *{
    padding:30px 22px !important;
  }

  .pn14-white-band .pn7-process > * > :first-child{
    font-size:48px !important;
  }
}


/* =========================================================
   PN-API PATCH 016
   MODULAR & FLEXIBEL - Abstand + volle Hintergrundbreite
   ========================================================= */

.pn7-flex{
  position:relative !important;

  /* Mehr Luft zum weissen Bereich darueber */
  margin-top:70px !important;

  /* Inhalt bleibt angenehm begrenzt */
  width:min(1160px,90vw) !important;
  max-width:1160px !important;
  margin-left:auto !important;
  margin-right:auto !important;

  /* Eigener Hintergrund des Inhalts transparent,
     Full-Width-Flaeche kommt ueber ::before */
  background:transparent !important;
  z-index:1 !important;
}

/* Hintergrund von ganz links bis ganz rechts */
.pn7-flex::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  z-index:-1 !important;

  /* Der Abstand nach oben gehoert optisch bereits zum Bereich */
  top:-70px !important;
  bottom:0 !important;

  left:50% !important;
  width:100vw !important;
  margin-left:-50vw !important;

  background:#0d3f2f !important;
  pointer-events:none !important;
}

/* Falls der Bereich bereits Pseudoelemente nutzt, volle Breite erzwingen */
.pn7-flex{
  box-sizing:border-box !important;
}

/* Etwas mehr Innenabstand oben fuer die Ueberschrift */
.pn7-flex{
  padding-top:70px !important;
}

@media(max-width:760px){
  .pn7-flex{
    margin-top:50px !important;
    padding-top:55px !important;
  }

  .pn7-flex::before{
    top:-50px !important;
  }
}


/* =========================================================
   PN-API PATCH 017 - Abmelden
   ========================================================= */

.pn17-logout{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  margin-left:auto !important;
  padding:10px 16px !important;
  border:2px solid #0f6b46 !important;
  border-radius:10px !important;
  color:#0f6b46 !important;
  background:#ffffff !important;
  text-decoration:none !important;
  font-weight:800 !important;
  line-height:1 !important;
  transition:.18s ease !important;
}

.pn17-logout:hover{
  color:#ffffff !important;
  background:#0f6b46 !important;
  transform:translateY(-1px) !important;
}

.pn17-logout-icon{
  font-size:20px !important;
  font-weight:900 !important;
}

@media(max-width:760px){
  .pn17-logout{
    padding:9px 12px !important;
    font-size:14px !important;
  }
}


/* =========================================================
   PN-API PATCH 018
   MODULAR & FLEXIBEL - weisse Karten mit PN-Gruen
   ========================================================= */

/* Alle direkten Karten/Boxen innerhalb des Flex-Bereichs */
.pn7-flex .pn7-tech-grid > *,
.pn7-flex .pn7-flex-grid > *,
.pn7-flex .pn7-tech > *,
.pn7-flex .tech-grid > *,
.pn7-flex .flex-grid > *{
  background:#ffffff !important;
  border:4px solid #0f6b46 !important;
  border-radius:18px !important;
  color:#173e2e !important;
  box-shadow:0 10px 28px rgba(15,107,70,.12) !important;
  box-sizing:border-box !important;
  transition:.18s ease !important;
}

/* Texte innerhalb der Karten dunkel lesbar */
.pn7-flex .pn7-tech-grid > * h3,
.pn7-flex .pn7-tech-grid > * h4,
.pn7-flex .pn7-tech-grid > * p,
.pn7-flex .pn7-tech-grid > * span,
.pn7-flex .pn7-flex-grid > * h3,
.pn7-flex .pn7-flex-grid > * h4,
.pn7-flex .pn7-flex-grid > * p,
.pn7-flex .pn7-flex-grid > * span,
.pn7-flex .pn7-tech > * h3,
.pn7-flex .pn7-tech > * h4,
.pn7-flex .pn7-tech > * p,
.pn7-flex .pn7-tech > * span,
.pn7-flex .tech-grid > * h3,
.pn7-flex .tech-grid > * h4,
.pn7-flex .tech-grid > * p,
.pn7-flex .tech-grid > * span,
.pn7-flex .flex-grid > * h3,
.pn7-flex .flex-grid > * h4,
.pn7-flex .flex-grid > * p,
.pn7-flex .flex-grid > * span{
  color:#173e2e !important;
}

/* Gruene Akzente / Icons */
.pn7-flex .pn7-tech-grid > * strong,
.pn7-flex .pn7-flex-grid > * strong,
.pn7-flex .pn7-tech > * strong,
.pn7-flex .tech-grid > * strong,
.pn7-flex .flex-grid > * strong{
  color:#0f6b46 !important;
}

/* Dezenter Hover wie bei den oberen Karten */
.pn7-flex .pn7-tech-grid > *:hover,
.pn7-flex .pn7-flex-grid > *:hover,
.pn7-flex .pn7-tech > *:hover,
.pn7-flex .tech-grid > *:hover,
.pn7-flex .flex-grid > *:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 14px 34px rgba(15,107,70,.18) !important;
}



/* =========================================================
   PN-API PATCH 019
   FIX: korrekte Klasse .pn7-techgrid
   ========================================================= */

.pn7-flex .pn7-techgrid span{
  background:#ffffff !important;
  border:4px solid #0f6b46 !important;
  border-radius:14px !important;
  color:#173e2e !important;
  padding:18px 10px !important;
  text-align:center !important;
  font-size:13px !important;
  font-weight:800 !important;
  box-shadow:0 8px 22px rgba(15,107,70,.12) !important;
  box-sizing:border-box !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.pn7-flex .pn7-techgrid span:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 13px 28px rgba(15,107,70,.20) !important;
}