/* Cybersecurity-Seite: Scroll-Hero (statischer Nachbau von FullScreenScrollFX) und Inhaltsbausteine.
   Baut auf service-page.css auf. */

/* ---------- Scroll-Hero ---------- */
.fx{--fx-n:6;--fx-text:#f0f5ff;--fx-dim:rgba(240,245,255,.38);--fx-mint:#00c9a7;--fx-red:#ff5a6a;--fx-blue:#4f8cff;--fx-d:.7s;position:relative;width:100%;background:#050912;color:var(--fx-text);font-family:'Space Grotesk',system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.fx-fixed-section{position:relative;height:calc((var(--fx-n) + 1) * 100vh)}
.fx-fixed{position:sticky;top:0;height:100vh;height:100svh;width:100%;overflow:hidden;background:#050912}

/* Hintergründe */
.fx-bgs{position:absolute;inset:0;z-index:1}
.fx-bg{position:absolute;inset:-6% 0;opacity:0;transform:scale(1.04) translateY(var(--fx-drift,1%));transition:opacity var(--fx-d) cubic-bezier(.22,.61,.36,1),transform var(--fx-d) cubic-bezier(.22,.61,.36,1);will-change:opacity,transform;background:var(--fx-bg-fill)}
.fx-bg.is-active{opacity:1;transform:none}
.fx-bg.is-prev{opacity:0;transform:translateY(var(--fx-leave,-4%))}
.fx--up .fx-bg{--fx-drift:-1%}
.fx--up .fx-bg.is-prev{--fx-leave:4%}
.fx-bg::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,201,167,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(0,201,167,.07) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 20%,transparent 75%)}
.fx-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,9,18,.55),rgba(5,9,18,.15) 40%,rgba(5,9,18,.7))}
.fx-bg svg{position:absolute;left:50%;top:50%;width:min(78vh,92vw);height:auto;transform:translate(-50%,-50%);opacity:.22;fill:none;stroke:var(--fx-glyph,var(--fx-mint));stroke-width:.6}
.fx-bg .fx-scan{position:absolute;left:0;right:0;height:22vh;top:-22vh;background:linear-gradient(180deg,transparent,rgba(0,201,167,.08),transparent);animation:fx-scan 7s linear infinite}
@keyframes fx-scan{to{transform:translateY(150vh)}}
.fx-bg--c{--fx-bg-fill:radial-gradient(circle at 30% 35%,rgba(0,201,167,.28),transparent 55%),radial-gradient(circle at 80% 80%,rgba(79,140,255,.18),transparent 50%),#060b16}
.fx-bg--i{--fx-bg-fill:radial-gradient(circle at 70% 30%,rgba(79,140,255,.3),transparent 55%),radial-gradient(circle at 20% 85%,rgba(0,201,167,.16),transparent 50%),#060a17;--fx-glyph:#7aa8ff}
.fx-bg--a{--fx-bg-fill:radial-gradient(circle at 50% 60%,rgba(0,201,167,.26),transparent 60%),#050c14}
.fx-bg--red{--fx-bg-fill:radial-gradient(circle at 35% 40%,rgba(255,90,106,.3),transparent 55%),radial-gradient(circle at 85% 85%,rgba(255,140,90,.12),transparent 50%),#10070b;--fx-glyph:#ff7a87}
.fx-bg--blue{--fx-bg-fill:radial-gradient(circle at 65% 40%,rgba(79,140,255,.34),transparent 55%),radial-gradient(circle at 15% 80%,rgba(0,201,167,.14),transparent 50%),#050a18;--fx-glyph:#8fb4ff}
.fx-bg--duel{--fx-bg-fill:radial-gradient(circle at 18% 50%,rgba(255,90,106,.28),transparent 50%),radial-gradient(circle at 82% 50%,rgba(79,140,255,.3),transparent 50%),#080a16;--fx-glyph:#c9d5ff}
.fx-bg--alarm{--fx-bg-fill:radial-gradient(circle at 50% 45%,rgba(255,90,106,.22),transparent 45%),radial-gradient(circle at 50% 45%,rgba(0,201,167,.18),transparent 70%),#08080f;--fx-glyph:#ff8f9a}
.fx-bg--red::before,.fx-bg--alarm::before{background-image:linear-gradient(rgba(255,90,106,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,90,106,.07) 1px,transparent 1px)}

/* Raster */
.fx-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:0 2rem}
.fx-header{align-self:start;padding-top:5vh;margin:0;text-align:center;font-weight:700;font-size:clamp(2.6rem,11vw,10rem);line-height:.84;letter-spacing:-.045em;color:var(--fx-text);max-width:none}
.fx-header span{display:block;color:var(--fx-text)}
.fx-header span:last-child{color:transparent;-webkit-text-stroke:1.5px var(--fx-mint)}
.fx-content{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.3fr 1fr;align-items:center;padding:0 2rem;pointer-events:none}
.fx-left,.fx-right{height:46vh;overflow:hidden;display:grid;align-content:center;pointer-events:auto;mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.fx-left{justify-items:start}
.fx-right{justify-items:end}
.fx-track{display:grid;transition:transform calc(var(--fx-d) * .9) cubic-bezier(.22,.61,.36,1);will-change:transform}
.fx-left .fx-track{justify-items:start}
.fx-right .fx-track{justify-items:end}
.fx-item{position:relative;margin:5px 0;padding:0;border:0;background:none;color:var(--fx-text);font:700 clamp(.95rem,1.9vw,1.55rem)/1.15 'Space Grotesk',sans-serif;text-transform:uppercase;letter-spacing:0;opacity:.35;cursor:pointer;transition:opacity .45s ease,transform .45s ease,padding .45s ease}
.fx-item:hover{opacity:.7}
.fx-item.active{opacity:1}
.fx-left .fx-item.active{transform:translateX(10px);padding-left:16px}
.fx-right .fx-item.active{transform:translateX(-10px);padding-right:16px}
.fx-left .fx-item.active::before,.fx-right .fx-item.active::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--fx-mint);box-shadow:0 0 12px var(--fx-mint)}
.fx-left .fx-item.active::before{left:0}
.fx-right .fx-item.active::after{right:0}
.fx-item:focus-visible{outline:2px solid var(--fx-mint);outline-offset:4px}
.fx-right .fx-item{font-family:'JetBrains Mono',monospace;font-weight:500;font-size:clamp(.75rem,1.2vw,1rem);letter-spacing:.06em}
.fx-center{position:relative;display:grid;place-items:center;height:46vh;text-align:center}
.fx-featured{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden}
.fx-featured.active,.fx-featured.is-leaving{visibility:visible}
.fx-featured-title{margin:0;font-weight:700;font-size:clamp(2rem,6.6vw,5.6rem);line-height:.95;letter-spacing:-.03em;color:var(--fx-text);text-wrap:balance;max-width:none}
.fx-word-mask{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.04em 0}
.fx-word{display:inline-block;transform:translateY(105%);opacity:0;transition:transform var(--fx-d) cubic-bezier(.22,.61,.36,1),opacity var(--fx-d) ease;transition-delay:calc(var(--i,0) * 50ms)}
.fx--up .fx-word{transform:translateY(-105%)}
.fx-featured.active .fx-word{transform:none;opacity:1}
.fx-featured.is-leaving .fx-word{transform:translateY(-105%);opacity:0;transition-duration:calc(var(--fx-d) * .6);transition-delay:calc(var(--i,0) * 30ms)}
.fx--up .fx-featured.is-leaving .fx-word{transform:translateY(105%)}
.fx-footer{align-self:end;padding-bottom:4.5vh;text-align:center;font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:.04em}
.fx-hint{display:block;font-size:.78rem;color:var(--fx-dim);margin-bottom:1.1rem}
.fx-progress{position:relative;width:200px;height:2px;margin:1.4rem auto 0;background:rgba(240,245,255,.22)}
.fx-progress-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--fx-mint);transition:width .3s ease}
.fx-progress-numbers{position:absolute;left:0;right:0;bottom:calc(100% + 6px);display:flex;justify-content:space-between;font-size:.78rem;color:var(--fx-text)}

/* Ohne JavaScript oder mit reduzierter Bewegung: ein Bildschirm, kein Scroll-Pinning, Wechsel per Klick */
.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fx:not(.fx--ready) .fx-fixed-section,.fx--static .fx-fixed-section{height:auto}
.fx:not(.fx--ready) .fx-fixed,.fx--static .fx-fixed{position:relative;height:auto;min-height:100vh;min-height:100svh}
.fx:not(.fx--ready) .fx-content,.fx--static .fx-content{position:relative;inset:auto;padding:5vh 0}
.fx:not(.fx--ready) .fx-bg:first-child{opacity:1;transform:none}
.fx:not(.fx--ready) .fx-featured:first-child{visibility:visible}
.fx:not(.fx--ready) .fx-item{opacity:.8}
.fx--static .fx-bg,.fx--static .fx-track,.fx--static .fx-word,.fx--static .fx-item{transition:none!important}
.fx--static .fx-scan{display:none}

@media (max-width:900px){
  .fx-grid{padding:0 1.1rem}
  .fx-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;align-content:center;row-gap:2.2vh;padding:0 1.1rem;place-items:center}
  .fx-left,.fx-right,.fx-center{height:auto;mask-image:none;-webkit-mask-image:none}
  .fx-center{height:30vh;width:100%}
  .fx-left,.fx-right{justify-items:center}
  .fx-track{transform:none!important}
  .fx-item{display:none}
  .fx-item.active,.fx--static .fx-item,.fx:not(.fx--ready) .fx-item{display:block;transform:none!important;padding:0!important}
  .fx-item.active::before,.fx-item.active::after{display:none}
  .fx-header{padding-top:4vh}
}
@media (prefers-reduced-motion:reduce){.fx-scan{display:none}}

/* ---------- Inhalte ---------- */
.wrap h2,.wrap h3{hyphens:manual}
.cs-intro{padding:64px 0 40px}
.cs-intro h2{max-width:900px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin:30px 0 0}
.cs-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:linear-gradient(180deg,rgba(16,23,42,.7),rgba(8,13,24,.4))}
.cs-card h3{font-size:21px;margin:6px 0 10px}
.cs-card p{margin:0;color:#c1ccda;font-size:15px}
.cs-card p+p{margin-top:10px}
.cs-card .cs-tag{font:12px 'JetBrains Mono',monospace;color:var(--mint);text-transform:uppercase;letter-spacing:.08em}
.cs-card--wide{grid-column:1/-1}
.cs-card ul{margin:12px 0 0;padding-left:20px;color:#c1ccda;font-size:15px}
.cs-card li{padding:3px 0}
.cs-subhead{font-size:25px;margin:44px 0 0}

.cs-triad{display:grid;grid-template-columns:minmax(260px,420px) 1fr;gap:48px;align-items:center;margin-top:24px}
.cs-triad svg{width:100%;height:auto;overflow:visible}
.cs-triad .tri-edge{fill:rgba(0,201,167,.06);stroke:var(--mint);stroke-width:1.5}
.cs-triad .tri-inner{fill:none;stroke:rgba(0,201,167,.35);stroke-dasharray:4 6}
.cs-triad .tri-node{fill:#0b1324;stroke:var(--mint);stroke-width:2}
.cs-triad .tri-letter{fill:var(--mint);font:700 26px 'Space Grotesk',sans-serif;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.cs-triad .tri-label{fill:#f3f6fa;font:600 15px 'Space Grotesk',sans-serif;text-anchor:middle}
.cs-triad .tri-sub{fill:#afbbca;font:11px 'JetBrains Mono',monospace;text-anchor:middle;letter-spacing:.06em}
.cs-triad .tri-core{fill:#f3f6fa;font:600 14px 'Space Grotesk',sans-serif;text-anchor:middle}
.cs-triad g[data-tri]{cursor:default}
.cs-triad .tri-node,.cs-triad .tri-letter{transition:fill .25s ease}
.cs-triad g[data-tri]:hover .tri-node,.cs-triad g[data-tri].is-hot .tri-node{fill:var(--mint)}
.cs-triad g[data-tri]:hover .tri-letter,.cs-triad g[data-tri].is-hot .tri-letter{fill:#00261f}
.cs-triad-list{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.cs-triad-list li{border-left:2px solid var(--line);padding:6px 0 6px 20px;transition:border-color .25s ease}
.cs-triad-list li.is-hot{border-color:var(--mint)}
.cs-triad-list strong{display:block;font:600 20px 'Space Grotesk',sans-serif;color:var(--ink)}
.cs-triad-list span{display:block;color:#c1ccda;font-size:15px}
.cs-triad-list em{font-style:normal;font:12px 'JetBrains Mono',monospace;color:var(--mint)}

.cs-steps{counter-reset:step;list-style:none;margin:30px 0 0;padding:0;max-width:900px}
.cs-steps li{counter-increment:step;position:relative;padding:0 0 26px 56px;color:#c1ccda}
.cs-steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:0;font:14px 'JetBrains Mono',monospace;color:var(--mint)}
.cs-steps li::after{content:"";position:absolute;left:9px;top:28px;bottom:4px;width:1px;background:var(--line)}
.cs-steps li:last-child::after{display:none}
.cs-steps strong{display:block;color:var(--ink);font:600 19px 'Space Grotesk',sans-serif;margin-bottom:4px}
.cs-steps li.is-twist strong{color:#ff7a87}
.cs-steps li.is-twist::before{color:#ff7a87}

.cs-callout{margin:30px 0 0;padding:22px 24px;border:1px solid rgba(0,201,167,.35);border-radius:14px;background:rgba(0,201,167,.06);max-width:900px}
.cs-callout p{margin:0;color:#d4dde8}
.cs-callout p+p{margin-top:10px}
.cs-callout--red{border-color:rgba(255,90,106,.4);background:rgba(255,90,106,.06)}

.cs-code{font:13px/1.6 'JetBrains Mono',monospace;background:#0b1222;border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:14px 0 0;color:#c9d5e3;overflow-x:auto;white-space:pre}
.cs-code .bad{color:#ff8f9a}
.cs-code .ok{color:var(--mint)}
.cs-code .c{color:#6f7d92}

.cs-emergency{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin:30px 0 0;padding:28px;border-radius:16px;border:1px solid rgba(255,90,106,.45);background:radial-gradient(circle at 0 0,rgba(255,90,106,.14),transparent 60%),#0d0a12}
.cs-emergency h3{margin:0 0 6px}
.cs-emergency p{margin:0;color:#c1ccda}
.cs-emergency .button{background:#ff5a6a;color:#1a0306}
.cs-emergency .button:hover{background:#ff7a87;color:#1a0306}

@media (max-width:820px){
  .cs-triad{grid-template-columns:1fr;gap:28px}
  .cs-triad svg{max-width:380px;margin:auto}
  .cs-emergency{grid-template-columns:1fr}
}