/* DDoS-Protection (Präfix dd-), baut auf ui.css auf. */
.dd-hero{background:var(--ui-ink);color:#fff;padding:80px 0 0;overflow:hidden;font-family:var(--ui-font)}
html[data-theme-mode='dark'] .dd-hero{background:#070a11;border-bottom:1px solid var(--ui-line)}
.dd-hero h1{font-weight:700;font-size:clamp(2rem,4.2vw,3rem);line-height:1.12;margin:0 0 1rem;color:#fff}
.dd-lead{color:#c9ccd4;max-width:560px;font-size:1.05rem}
.dd-link{color:var(--ui-y);font-weight:600;text-decoration:none;position:relative}
.dd-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ui-y);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.dd-link:hover,.dd-link:focus-visible{color:#fff}
.dd-link:hover::after,.dd-link:focus-visible::after{transform:scaleX(1)}

/* Schild-Grafik (Canvas, public/assets/js/ddos-shield.js) */
.dd-shield{position:relative;height:300px;border-radius:18px;background:#0f141f;border:1px solid #232a3a;overflow:hidden}
.dd-shield canvas{position:absolute;inset:0;width:100%;height:100%}
.dd-logo{position:absolute;left:58%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0 10px rgba(255,204,2,.55))}
.dd-caption{position:absolute;left:58%;bottom:14px;transform:translateX(-50%);font-size:.75rem;color:#c9ccd4;white-space:nowrap;font-weight:500}
.dd-caption b{color:var(--ui-y);font-weight:600}
.dd-server{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:52px;height:74px;border-radius:12px;background:#1b2232;border:1px solid #2d3548;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem}
.dd-server-label{position:absolute;right:12px;bottom:14px;font-size:.72rem;color:#9aa0ad}
.dd-legend{position:absolute;left:16px;top:14px;display:flex;gap:14px;font-size:.72rem;color:#9aa0ad}
.dd-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.35rem}
.dd-legend-attack{background:#ff5a5a}
.dd-legend-good{background:#35c27a}

/* Kennzahlen */
.dd-stats{margin-top:56px;border-top:1px solid #232a3a;display:grid;grid-template-columns:repeat(4,1fr)}
.dd-stats div{padding:24px 18px;border-right:1px solid #232a3a}
.dd-stats div:last-child{border-right:0}
.dd-stats b{display:block;font-size:1.7rem;font-weight:700;color:var(--ui-y)}
.dd-stats span{font-size:.82rem;color:#c9ccd4}
@media (max-width:767px){.dd-stats{grid-template-columns:1fr 1fr}.dd-stats div:nth-child(2){border-right:0}.dd-stats div:nth-child(-n+2){border-bottom:1px solid #232a3a}}

/* Drei Stufen */
.dd-plan{border:1px solid var(--ui-line);border-radius:18px;background:var(--ui-card);padding:24px;height:100%;display:flex;flex-direction:column;color:var(--ui-text)}
.dd-plan--highlight{border:2px solid var(--ui-y);box-shadow:0 18px 40px rgba(255,204,2,.15)}
.dd-badge{align-self:flex-start;font-size:.75rem;font-weight:600;padding:.18rem .6rem;border-radius:6px;background:var(--ui-bg-soft);color:var(--ui-text)}
.dd-badge--included{background:var(--ui-ok);color:#fff}
.dd-plan h3{font-weight:700;font-size:1.2rem;margin:.9rem 0 .4rem;color:var(--ui-text)}
.dd-plan>p{color:var(--ui-mute);font-size:.9rem}
.dd-plan ul{list-style:none;padding:0;margin:.4rem 0 1.2rem;flex:1}
.dd-plan li{display:flex;gap:.6rem;padding:.35rem 0;font-size:.9rem}
.dd-plan li i{margin-top:4px;color:var(--ui-ok)}
.dd-plan-missing{color:var(--ui-mute)}
.dd-plan li.dd-plan-missing i{color:var(--ui-mute)}
.dd-plan .ui-btn{align-self:flex-start}
.dd-plan-active{font-size:.875rem;color:var(--ui-mute)}
.dd-plan-active i{color:var(--ui-ok)}
.dd-h3{font-size:1rem;font-weight:600;margin-bottom:.6rem;color:var(--ui-text)}
.dd-profiles-more{font-size:.875rem;margin:.6rem 0 0}

/* Drei Schritte mit Pfeilen */
.dd-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.dd-step{position:relative;background:var(--ui-card);border:1px solid var(--ui-line);border-radius:16px;padding:22px;color:var(--ui-text)}
.dd-step+.dd-step::before{content:"\f061";font-family:"Font Awesome 6 Free";font-weight:900;position:absolute;left:-29px;top:50%;transform:translateY(-50%);color:var(--ui-mute)}
.dd-step-num{width:34px;height:34px;border-radius:50%;background:var(--ui-ink);color:var(--ui-y);display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:12px}
html[data-theme-mode='dark'] .dd-step-num{background:var(--ui-y);color:#000}
.dd-step h3{font-size:1rem;font-weight:600;color:var(--ui-text)}
.dd-step p{font-size:.88rem;color:var(--ui-mute);margin:0}
@media (max-width:991px){.dd-steps{grid-template-columns:1fr;gap:34px}.dd-step+.dd-step::before{content:"\f063";left:50%;top:-29px;transform:translateX(-50%)}}

/* Under Attack */
.dd-attack{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--ui-ink);color:#fff;border-radius:18px;padding:28px 32px}
html[data-theme-mode='dark'] .dd-attack{background:var(--ui-card);border:1px solid var(--ui-line)}
.dd-attack h2{font-weight:700;font-size:1.5rem;margin:0 0 .3rem;color:#fff}
.dd-attack h2 i{color:var(--ui-y)}
.dd-attack p{color:#c9ccd4;margin:0}

@media (prefers-reduced-motion:reduce){.dd-link::after{transition:none}}