html{font-size:75%}:root{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:#172033;background:#f4f6f9;line-height:1.5}*{box-sizing:border-box}body{margin:0}header,footer{display:flex;align-items:center;gap:1.25rem;padding:1rem clamp(1rem,4vw,4rem);background:#0f1a2e;color:#fff}header{justify-content:space-between}header nav{display:flex;gap:1rem}a{color:#1859a9}header a,footer a{color:#fff}.brand{font-size:1.25rem;font-weight:800;text-decoration:none}.brand span{font-size:.8rem;font-weight:500}.container,main{width:min(1180px,calc(100% - 2rem));margin:2rem auto}.public main{margin-top:0}.hero{padding:clamp(4rem,10vw,9rem) 0;max-width:850px}.hero h1{font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.02;margin:.4rem 0 1rem}.hero p{font-size:1.15rem}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800}.button,button{display:inline-block;border:0;border-radius:.55rem;background:#1558b0;color:#fff;padding:.75rem 1rem;text-decoration:none;font:inherit;font-weight:700;cursor:pointer}.secondary{background:#fff;color:#0f1a2e}.link{background:transparent;padding:0}.cards,.stats,.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.cards article,.stats article,.panel{background:#fff;border:1px solid #dbe2ea;border-radius:.8rem;padding:1.25rem}.stats strong{display:block;font-size:2rem}.stats span{color:#526175}.narrow{max-width:480px;margin:5rem auto}.title-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}label{display:block;font-weight:700;margin-bottom:1rem}input,select,textarea{width:100%;padding:.7rem;border:1px solid #aeb9c7;border-radius:.45rem;background:#fff;font:inherit;margin-top:.35rem}.check input{width:auto}.code{font-family:ui-monospace,monospace;background:#111827;color:#e5e7eb}.warning{color:#805a00}.alert,.success{padding:1rem;border-radius:.5rem;margin:1rem 0}.alert{background:#fee2e2}.success{background:#dcfce7}.danger{border-color:#d97706}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;padding:.7rem;border-bottom:1px solid #e5e7eb;vertical-align:top}footer{margin-top:4rem;flex-wrap:wrap}@media(max-width:700px){header{align-items:flex-start;flex-wrap:wrap}header nav{order:3;width:100%}.title-row{align-items:flex-start;flex-direction:column}table{display:block;overflow:auto}}
.inline-form,.rule-row,.pattern-row{display:grid;grid-template-columns:minmax(180px,1fr) auto auto auto auto;gap:.75rem;align-items:end}.rule-list{display:grid;gap:1rem}.rule-row,.pattern-row{padding:1rem;border:1px solid #e1e7ef;border-radius:.65rem;background:#f8fafc}.pattern-row{grid-template-columns:minmax(150px,.8fr) minmax(130px,.7fr) minmax(260px,2fr) minmax(100px,.5fr) auto auto auto}.rule-row label,.pattern-row label,.inline-form label{margin-bottom:0}.danger-button{background:#a61b1b}.wide{grid-column:auto}.rule-form{align-items:end}.rule-form label{margin-bottom:0}@media(max-width:900px){.inline-form,.rule-row,.pattern-row{grid-template-columns:1fr 1fr}.wide{grid-column:1/-1}}@media(max-width:560px){.inline-form,.rule-row,.pattern-row{grid-template-columns:1fr}}
.grouped-rules{display:grid;gap:1.25rem}.rule-group-card{padding:0;overflow:hidden}.rule-group-header{padding:1.1rem 1.25rem;background:#eef3f8;border-bottom:1px solid #dbe2ea}.rule-group-form{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto auto;gap:.75rem;align-items:end}.rule-group-form label{margin-bottom:0}.pattern-count{align-self:center;font-weight:700;color:#526175;white-space:nowrap}.group-patterns{display:grid;gap:.75rem;padding:1rem 1.25rem 1.25rem}.grouped-pattern-row{grid-template-columns:minmax(145px,.7fr) minmax(280px,2.2fr) minmax(100px,.45fr) auto auto auto;margin:0}.empty-state{padding:1.25rem;margin:0;color:#526175}@media(max-width:980px){.rule-group-form,.grouped-pattern-row{grid-template-columns:1fr 1fr}.grouped-pattern-row .wide{grid-column:1/-1}}@media(max-width:600px){.rule-group-form,.grouped-pattern-row{grid-template-columns:1fr}}
.main-rules-panel{margin-bottom:1.25rem}.rule-explanation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem;margin:1rem 0 1.25rem}.rule-explanation-grid article{display:grid;gap:.35rem;padding:1rem;border:1px solid #dbe2ea;border-radius:.65rem;background:#f8fafc}.rule-explanation-grid span{color:#526175}.site-rule-list{display:grid;gap:1rem}.site-main-rule-form{display:grid;grid-template-columns:minmax(190px,1.2fr) auto repeat(5,minmax(110px,.7fr)) auto;gap:.75rem;align-items:end;padding:1rem;border:1px solid #dbe2ea;border-radius:.65rem;background:#f8fafc}.site-main-rule-form label{margin:0}.site-rule-title{display:grid;gap:.15rem}.site-rule-title span{color:#526175}@media(max-width:1200px){.site-main-rule-form{grid-template-columns:repeat(3,1fr)}.site-rule-title{grid-column:1/-1}}@media(max-width:650px){.site-main-rule-form{grid-template-columns:1fr}}
/* Landingpage Variante 3 */
.public{background:#020b1d;color:#eef6ff}.public-header{position:relative;z-index:5;background:rgba(2,11,29,.94);border-bottom:1px solid rgba(55,139,255,.18);padding:1.25rem clamp(1.2rem,5vw,5rem)}.landing-brand{display:flex;align-items:center;gap:.8rem;font-size:1.6rem}.landing-brand strong{color:#2889ff}.landing-brand small{display:block;font-size:.62rem;font-weight:500;color:#a8bad2;letter-spacing:.04em}.brand-shield{display:grid;place-items:center;width:3rem;height:3.4rem;border:2px solid #2889ff;clip-path:polygon(50% 0,95% 16%,88% 72%,50% 100%,12% 72%,5% 16%);color:#52d7ff}.public-nav{display:flex;gap:2.4rem;margin-left:auto;margin-right:2rem}.public-nav a{text-decoration:none;color:#dce9f8;font-weight:700}.login-button{background:transparent;border:1px solid #2584ff;color:#55a5ff;padding:.8rem 1.4rem}.public main{width:100%;margin:0}.landing-hero{position:relative;display:grid;grid-template-columns:minmax(320px,.88fr) minmax(440px,1.12fr);min-height:610px;max-width:1500px;margin:auto;padding:5rem clamp(1.5rem,6vw,6rem) 3rem;overflow:hidden}.landing-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 68% 48%,rgba(14,91,215,.23),transparent 38%),linear-gradient(180deg,rgba(4,16,43,.3),transparent);pointer-events:none}.landing-copy{position:relative;z-index:2;align-self:center;max-width:650px}.security-badge{display:inline-flex;align-items:center;gap:.55rem;border:1px solid #1b78de;border-radius:999px;padding:.5rem .9rem;color:#5fe4ff;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.security-badge span{width:.55rem;height:.55rem;border-radius:50%;background:#38edb4;box-shadow:0 0 12px #38edb4}.landing-copy h1{font-size:clamp(3rem,5vw,5.4rem);line-height:1.06;margin:1.4rem 0 1.2rem;color:#fff}.landing-copy h1 strong{color:#2382ff}.landing-lead{max-width:610px;font-size:1.22rem;color:#bdcce0;line-height:1.75}.landing-actions{display:flex;gap:1rem;margin:2.2rem 0}.landing-primary{background:linear-gradient(135deg,#1472ec,#238cff);padding:1rem 1.6rem}.landing-secondary{background:transparent;border:1px solid #2c79d1;color:#eaf4ff;padding:1rem 1.6rem}.landing-facts{display:flex;gap:2.2rem;list-style:none;padding:0;margin:2.7rem 0 0;flex-wrap:wrap}.landing-facts li{display:grid;border-left:1px solid rgba(66,139,229,.28);padding-left:1rem}.landing-facts strong{color:#f1f7ff}.landing-facts span{font-size:.82rem;color:#8fa5bf}.firewall-visual{position:relative;min-height:530px}.firewall-visual canvas{position:absolute;inset:0;width:100%;height:100%}.shield-core{position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:235px;height:275px;clip-path:polygon(50% 0,94% 16%,88% 69%,50% 100%,12% 69%,6% 16%);background:linear-gradient(145deg,rgba(34,140,255,.95),rgba(7,35,101,.88));box-shadow:0 0 55px #087dff}.shield-core:before{content:"";position:absolute;inset:10px;clip-path:inherit;background:linear-gradient(145deg,#071b47,#092a68)}.shield-core span{position:relative;font-size:7rem;color:#8be7ff;text-shadow:0 0 26px #39aaff}.attack-labels,.defence-labels{position:absolute;display:grid;gap:2.3rem;font-size:.83rem;font-weight:800;letter-spacing:.05em}.attack-labels{left:1%;top:30%;color:#ff675a}.defence-labels{right:0;top:31%;color:#42efb0}.landing-section{border-top:1px solid rgba(47,129,224,.2);padding:4.6rem clamp(1.5rem,6vw,6rem);background:linear-gradient(180deg,#03142c,#021024);scroll-margin-top:5rem}.section-heading{text-align:center;margin-bottom:2.7rem}.section-heading p{margin:0;color:#41a3ff;text-transform:uppercase;letter-spacing:.15em;font-weight:800;font-size:.76rem}.section-heading h2{font-size:2.5rem;margin:.45rem 0}.process-grid,.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;max-width:1280px;margin:auto}.process-grid article,.benefit-grid article{position:relative;text-align:center;padding:1.6rem;color:#dce8f8}.process-grid article:not(:last-child):after{content:"→";position:absolute;right:-1rem;top:4.4rem;color:#2584ff;font-size:2rem}.step-number{position:absolute;right:22%;top:.8rem;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;background:#217cea;font-weight:800}.step-icon,.benefit-icon{display:grid;place-items:center;width:82px;height:82px;margin:0 auto 1.2rem;border:1px solid #2584ff;border-radius:50%;font-size:2.5rem;color:#50c6ff;box-shadow:inset 0 0 25px rgba(24,119,255,.15),0 0 18px rgba(24,119,255,.12)}.process-grid h3,.benefit-grid h3{font-size:1.2rem;margin:.5rem}.process-grid p,.benefit-grid p{color:#a9bad0}.benefits-section{background:#020c20}.benefit-grid{grid-template-columns:repeat(5,1fr)}.benefit-grid article{border-right:1px solid rgba(48,118,199,.18)}.benefit-icon{border:0;box-shadow:none;font-size:2.8rem}.landing-footer{background:#020816;border-top:1px solid rgba(47,129,224,.2)}.muted{color:#64748b}.dashboard-status-panel{margin-top:1.25rem}.status-legend{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0;padding:.8rem 1rem;background:#f8fafc;border:1px solid #dbe2ea;border-radius:.6rem}.status-legend span{display:flex;align-items:center;gap:.4rem}.status-dot,.site-status i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%}.status-dot.green,.site-status.green i{background:#1f9d55;box-shadow:0 0 0 3px rgba(31,157,85,.13)}.status-dot.yellow,.site-status.yellow i{background:#d99b00;box-shadow:0 0 0 3px rgba(217,155,0,.14)}.status-dot.red,.site-status.red i{background:#cf3030;box-shadow:0 0 0 3px rgba(207,48,48,.13)}.site-status{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;white-space:nowrap}.site-status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.9rem}.site-status-card{display:grid;gap:.3rem;padding:1rem;border:1px solid #dbe2ea;border-radius:.7rem;text-decoration:none;color:#172033;background:#f8fafc}.site-status-card strong{font-size:1.05rem}.site-status-card small{color:#64748b}
@media(max-width:1000px){.landing-hero{grid-template-columns:1fr;min-height:auto}.firewall-visual{min-height:430px}.process-grid{grid-template-columns:1fr 1fr}.benefit-grid{grid-template-columns:repeat(2,1fr)}.process-grid article:after{display:none}}@media(max-width:720px){.public-nav{display:none}.landing-hero{padding-top:3rem}.landing-copy h1{font-size:3rem}.firewall-visual{min-height:350px}.shield-core{width:165px;height:195px}.shield-core span{font-size:5rem}.attack-labels,.defence-labels{font-size:.65rem;gap:1.5rem}.process-grid,.benefit-grid{grid-template-columns:1fr}.landing-facts{gap:1rem}.landing-actions{flex-direction:column;align-items:flex-start}}
.dashboard-heading-row{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;margin-bottom:1.25rem}.dashboard-heading-row h1{margin:0}.self-protection-card{display:flex;align-items:center;gap:1rem;min-width:330px;padding:.85rem 1rem;border:1px solid #dbe2ea;border-radius:.7rem;background:#fff;color:#172033;text-decoration:none}.self-protection-copy{display:grid;gap:.15rem}.self-protection-copy strong{font-size:1rem}.self-protection-copy small{color:#64748b}@media(max-width:760px){.dashboard-heading-row{align-items:stretch;flex-direction:column}.self-protection-card{min-width:0;width:100%}}
/* Loginseite */
.public{min-height:100vh;display:flex;flex-direction:column}
.public>main{flex:1}
.public>footer{margin-top:auto}
.public .login-panel{width:min(520px,calc(100% - 2rem));max-width:none;margin:clamp(3rem,9vh,7rem) auto;padding:clamp(2rem,4vw,3rem);border-color:#cbd5e1;box-shadow:0 24px 70px rgba(0,0,0,.28);color:#172033}
.public .login-panel h1{margin:.2rem 0 .5rem;color:#0f1a2e;font-size:clamp(2rem,4vw,2.7rem);line-height:1.15}
.public .login-eyebrow{margin:0;color:#1558b0;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.public .login-intro{margin:0 0 1.7rem;color:#475569;font-size:1rem}
.public .login-form{display:grid;gap:.55rem}
.public .login-form label{margin:0;color:#1e293b;font-weight:750}
.public .login-form input{margin:0 0 .75rem;min-height:46px;border-color:#94a3b8;color:#0f172a;background:#fff}
.public .login-form input:focus{outline:3px solid rgba(37,132,255,.28);outline-offset:2px;border-color:#1558b0}
.public .login-form button{justify-self:start;min-width:130px;margin-top:.25rem}
.public .login-panel .alert{color:#7f1d1d;border:1px solid #fecaca;background:#fee2e2}
@media(max-width:700px){.public .login-panel{margin:2rem auto;padding:1.5rem}.public-header .login-button{display:none}}