/* --- /funktionen: the public feature page, the price list's bigger sister ----------------
   Only variables. Fixed values live exclusively as tokens in :root / [data-theme="console"],
   the same ones .auth uses for the login backdrop. No JS, nothing external. Three keyframes
   on the whole page (fx-sweep, fx-flow, fx-rise), all off under prefers-reduced-motion. */
:root{
  --fx-hero-bg:#1d0e42;--fx-hero-fg:#fff;--fx-hero-fg-2:rgba(255,255,255,.72);
  --fx-hero-line:rgba(255,255,255,.3);--fx-hero-btn-hover:rgba(255,255,255,.08);
  --fx-hero-glow-1:rgba(54,212,255,.35);--fx-hero-glow-2:rgba(63,224,143,.22);
  --fx-radar:var(--cyan);--fx-radar-alpha:.16;
  --fx-demo-shadow:0 24px 60px rgba(29,14,66,.35);
  --fx-wire:var(--brand);--fx-node:var(--surface);--fx-stage-alt:var(--surface-2);
}
[data-theme="console"]{
  --fx-hero-bg:#050709;--fx-hero-fg:#d7e3ea;--fx-hero-fg-2:#9fb0bd;
  --fx-hero-line:rgba(215,227,234,.3);--fx-hero-btn-hover:rgba(63,224,143,.08);
  --fx-hero-glow-1:rgba(63,224,143,.18);--fx-hero-glow-2:rgba(54,212,255,.08);
  --fx-radar:var(--accent);--fx-radar-alpha:.14;
  --fx-demo-shadow:0 0 0 1px rgba(63,224,143,.12);
  --fx-wire:var(--accent);--fx-node:var(--surface-2);--fx-stage-alt:#0b1016;
}

/* frame */
.fx-main{max-width:none;margin:0;padding:0}
.fx-inner{max-width:1040px;margin:0 auto;padding:0 1.5rem}
.fx-section{padding:clamp(3.5rem,8vw,6rem) 0;border-top:1px solid var(--line);scroll-margin-top:5rem}
.fx-section.fx-alt{background:var(--fx-stage-alt)}
.doc-foot .fx-inner{padding-top:0}

/* typography: one statement, one lead, nothing else */
.fx-head{max-width:62ch}
.fx-head.fx-center{text-align:center;margin:0 auto}
.fx-kicker{margin:0 0 1rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fx-statement{margin:0;max-width:24ch;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.1;letter-spacing:-.02em;text-transform:none;font-weight:700;color:var(--brand);text-wrap:balance}
.fx-head.fx-center .fx-statement{margin:0 auto}
.fx-lead{margin:1.3rem 0 0;max-width:62ch;font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.6;color:var(--fg-2)}
.fx-head.fx-center .fx-lead{margin-left:auto;margin-right:auto}
.fx-copy{margin:0 0 1.4rem;max-width:60ch;font-size:1rem;line-height:1.65;color:var(--fg-2)}
.fx-center{margin-left:auto;margin-right:auto;text-align:center}
.fx-note{margin:1.6rem 0 0;max-width:56ch;font-size:.9rem;line-height:1.55;color:var(--muted)}
.fx-num{display:block;font-size:clamp(3.2rem,8vw,5.5rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.fx-num.fx-word{font-size:clamp(1.5rem,2.7vw,2.15rem);letter-spacing:-.02em}  /* «wöchentlich» in a quarter of 900px: measured, 3rem collided */
.fx-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2.5rem 3rem;align-items:start;margin-top:2.8rem}
.fx-split.fx-even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.fx-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem;margin-top:2.8rem;align-items:start}
.fx-quad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem;margin-top:2.8rem;align-items:start}

/* hero */
.fx-hero{position:relative;overflow:hidden;background:var(--fx-hero-bg);color:var(--fx-hero-fg);
  background-image:radial-gradient(ellipse 60% 50% at 80% 20%,var(--fx-hero-glow-1),transparent 60%),
                   radial-gradient(ellipse 50% 40% at 10% 90%,var(--fx-hero-glow-2),transparent 60%)}
.fx-hero-inner{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:3rem;align-items:center;padding:clamp(3.5rem,9vw,6.5rem) 1.5rem}
.fx-hero .fx-kicker{color:var(--fx-hero-fg-2)}
.fx-hero .fx-statement{margin:0;max-width:20ch;color:var(--fx-hero-fg);text-align:left}
.fx-hero .fx-lead{margin:1.2rem 0 0;color:var(--fx-hero-fg-2);text-align:left}
.fx-hero .fx-note{color:var(--fx-hero-fg-2);margin-top:1rem}
.fx-actions{display:flex;align-items:center;gap:.8rem 1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.fx-actions .btn{padding:.7rem 1.4rem;font-size:.98rem}
.fx-hero .btn:not(.accent){background:transparent;border-color:var(--fx-hero-line);color:var(--fx-hero-fg)}
.fx-hero .btn:not(.accent):hover{background:var(--fx-hero-btn-hover);border-color:var(--fx-hero-fg)}
.fx-radar{position:absolute;right:-6%;top:50%;width:clamp(260px,34vw,460px);height:auto;transform:translateY(-50%);color:var(--fx-radar);opacity:var(--fx-radar-alpha);pointer-events:none}
.fx-sweep{transform-box:view-box;transform-origin:100px 100px;animation:fx-sweep 14s linear infinite}
@keyframes fx-sweep{to{transform:rotate(360deg)}}

/* the dark band: the SOC, in the hero's colours, with the screens lit inside it */
.fx-section.fx-dark{background:var(--fx-hero-bg);color:var(--fx-hero-fg);border-top:0;
  background-image:radial-gradient(ellipse 50% 40% at 90% 10%,var(--fx-hero-glow-1),transparent 60%)}
.fx-dark .fx-kicker{color:var(--fx-hero-fg-2)}
.fx-dark .fx-statement{color:var(--fx-hero-fg)}
.fx-dark .fx-lead{color:var(--fx-hero-fg-2)}
.fx-dark .fx-figure{color:var(--fx-hero-fg)}
.fx-dark .fx-fan-legend{color:var(--fx-hero-fg-2)}

/* mock-up frame: an app card, never clickable */
.fx-demo{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:var(--shadow);padding:1rem 1.1rem;font-size:.86rem;color:var(--fg);pointer-events:none;user-select:none;min-width:0}
.fx-hero .fx-demo{border-color:var(--fx-hero-line);box-shadow:var(--fx-demo-shadow)}
.fx-demo-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding-bottom:.6rem;margin-bottom:.6rem;border-bottom:1px solid var(--line);font-weight:600}
.fx-demo-head>span:first-child{display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fx-demo-head code{font-size:.78rem;font-weight:400}
.fx-screen-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;padding:.4rem 0}
.fx-screen-who{font-size:.8rem;color:var(--fg-2)}
.fx-screen-foot{margin:.6rem 0 0;padding-top:.6rem;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted);display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.fx-scroll{overflow-x:auto}
.fx-kv{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:0 .8rem;margin:.4rem 0 0;font-family:var(--mono);font-size:.78rem}
.fx-kv-wide{grid-template-columns:7rem minmax(0,1fr);font-family:var(--body-font);font-size:.84rem}
.fx-kv dt,.fx-kv dd{margin:0;padding:.32rem 0;border-top:1px solid var(--line);min-width:0}
.fx-kv dt{color:var(--muted)}
.fx-kv dd{color:var(--fg);overflow-wrap:anywhere}
.fx-kv dt:first-of-type,.fx-kv dd:first-of-type{border-top:0}
.fx-kv dd.hot{box-shadow:inset 3px 0 0 var(--red-700);padding-left:.55rem;font-weight:600}
.fx-log{list-style:none;margin:.6rem 0 0;padding:.6rem 0 0;border-top:1px solid var(--line);font-size:.8rem}
.fx-log li{display:flex;align-items:center;gap:.45rem;padding:.2rem 0}
.fx-log .ok{color:var(--green-700);font-weight:700}
.fx-log code{margin-left:auto;font-size:.76rem;color:var(--muted)}

/* the terminal: a record as it sits in the table */
.fx-term{background:var(--fx-stage-alt);padding:.9rem 1rem}
.fx-section.fx-alt .fx-term{background:var(--surface)}
.fx-term .fx-kv{grid-template-columns:minmax(9rem,auto) minmax(0,1fr)}
.fx-term-meta{margin:.6rem 0 0;display:flex;gap:.4rem;flex-wrap:wrap}
.fx-term-meta span{border:1px solid var(--line-2);border-radius:999px;padding:.1rem .55rem;font-size:.74rem;color:var(--fg-2)}
.fx-term-foot{margin:.6rem 0 0;font-size:.74rem;color:var(--muted);line-height:1.5}
.fx-term-foot+.fx-term-foot{margin-top:.25rem}
.fx-term-foot strong{color:var(--fg-2)}

/* the alerts table inside a screen */
.fx-alerts{width:100%;border-collapse:collapse;font-size:.82rem}
.fx-alerts td{padding:.45rem .4rem;border-top:1px solid var(--line);white-space:nowrap;vertical-align:middle}
.fx-alerts tr:first-child td{border-top:0}
.fx-alerts code{font-size:.78rem}

/* hero tile: four numbers */
.fx-tile{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.fx-tile-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-weight:600}
.fx-tile-head code{font-size:.8rem}
.fx-tile-cell{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .7rem;background:var(--surface-2)}
.fx-tile-cell strong{display:block;font-size:1.5rem;letter-spacing:-.02em;line-height:1.1}
.fx-tile-cell span{font-size:.72rem;color:var(--muted)}
.fx-tile-cell.crit strong{color:var(--red-700)}

/* diagrams: lines in the wire colour, shapes on the node colour, words as text */
.fx-figure{margin:2.6rem 0 0;color:var(--fx-wire)}
.fx-dia{display:block;width:100%;height:auto}
.fx-dia text{font:600 13px var(--body-font);fill:currentColor}
.fx-node-shape{fill:var(--fx-node);stroke:currentColor;stroke-width:2}
.fx-node-shape.fx-dashed{stroke-dasharray:4 4}
.fx-node.hot{color:var(--red-700)}
.fx-flow{animation:fx-flow 1.6s linear infinite}
@keyframes fx-flow{to{stroke-dashoffset:-18}}
.fx-sweep-sm{transform-box:fill-box;transform-origin:0% 100%;animation:fx-sweep 6s linear infinite}
.fx-wire-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:.6rem 0 0;padding:0;list-style:none;font-size:.78rem;line-height:1.45;color:var(--fg-2);counter-reset:wire}
.fx-wire-legend li{padding-top:.5rem;border-top:1px solid var(--line);text-align:center}
.fx-wire-legend li:last-child{color:var(--red-700)}
.fx-map{margin-top:0}
.fx-map .fx-dia{max-width:420px;margin:0 auto}
.fx-map-center{font-size:15px}
.fx-map-host{font-size:11px;font-weight:400;opacity:.8}
.fx-hosts circle{fill:currentColor}
.fx-ports line{stroke:var(--cyan);stroke-width:3;stroke-linecap:round}
.fx-port-hot{stroke:var(--red-700);stroke-width:3;stroke-linecap:round}
.fx-ghosts circle{fill:none;stroke:var(--amber-700);stroke-dasharray:3 3;stroke-width:1.5}
.fx-shields text{font-size:12px}
.fx-shields .ok{fill:var(--green-700)}
.fx-shields .fail{fill:var(--red-700)}
.fx-sweep-slow{transform-origin:200px 200px;animation-duration:20s}
.fx-map-legend{list-style:none;margin:1rem 0 0;padding:0;font-size:.8rem;color:var(--fg-2);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .8rem}
.fx-map-legend li{padding-left:.9rem;position:relative}
.fx-map-legend li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;background:currentColor;opacity:.6}
.fx-fan{margin-top:0}
.fx-fan-legend{display:flex;flex-direction:column;gap:.3rem;margin-top:.6rem;font-size:.8rem;color:var(--fg-2)}
.fx-fan-legend>span{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.fx-line{display:inline-block;width:1.6rem;height:0;border-top:2px solid currentColor}
.fx-line.dashed{border-top-style:dashed}

/* the timeline after a find */
.fx-steps{list-style:none;margin:.4rem 0 0;padding:0;position:relative}
.fx-steps::before{content:"";position:absolute;left:.95rem;top:.6rem;bottom:.6rem;width:2px;background:var(--line-2)}
.fx-steps li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem;padding:.55rem 0;position:relative}
.fx-step-no{width:2rem;height:2rem;border-radius:50%;border:2px solid var(--brand);background:var(--surface);color:var(--brand);font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.fx-steps li.pro .fx-step-no{border-style:dashed}
.fx-steps strong{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--fg);padding-top:.35rem}
.fx-steps div>span{display:block;color:var(--fg-2);font-size:.9rem;line-height:1.5;margin-top:.15rem}

/* the three levels as stairs */
.fx-stairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;align-items:end}
.fx-stair{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:1rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:var(--shadow)}
.fx-stair-3{min-height:16rem}.fx-stair-2{min-height:13.5rem}.fx-stair-1{min-height:11rem}
.fx-stair strong{color:var(--fg);font-size:.98rem}
.fx-stair-text{font-size:.82rem;color:var(--fg-2);line-height:1.45}
.fx-stair .sev{align-self:flex-start;margin-top:auto}

/* facts as words */
.fx-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px;margin:2.6rem auto 0;text-align:center}
.fx-fact{padding:.6rem 1rem}
.fx-fact+.fx-fact{border-left:1px solid var(--line)}
.fx-fact-label{display:block;margin-top:.5rem;font-size:.86rem;color:var(--fg-2)}
.fx-rhythm .fx-note{margin-top:2.2rem}

/* how the immediate measures work: six short terms under the stealer chapter */
.fx-how{margin-top:2.4rem;padding:1.4rem 1.6rem 1.6rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.fx-how h3{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0 0 1.1rem;font-size:1.05rem;letter-spacing:-.01em}
.fx-how dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem 1.6rem;margin:0}
.fx-how dt{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-2)}
.fx-how dd{margin:.3rem 0 0;font-size:.92rem;line-height:1.55;color:var(--fg)}

/* term list (MSSP) */
.fx-list{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0 1.8rem;margin:0;padding:0}
.fx-list dt,.fx-list dd{margin:0;padding:1rem 0;border-top:1px solid var(--line)}
.fx-list dt{font-weight:600;color:var(--fg);display:flex;align-items:flex-start;gap:.4rem;flex-wrap:wrap}
.fx-list dd{color:var(--fg-2);line-height:1.6}
.fx-list dt:first-of-type,.fx-list dd:first-of-type{border-top:0}

/* row lists inside screens */
.fx-rows{list-style:none;margin:0;padding:0}
.fx-rows li{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.45rem 0;border-top:1px solid var(--line);min-width:0}
.fx-rows li:first-child{border-top:0}
.fx-rows code{font-size:.8rem;overflow-wrap:anywhere}
.fx-group+.fx-group{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line-2)}
.fx-group-title{margin:0 0 .2rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fx-clients .name{font-weight:600;flex:1 1 auto}
.fx-clients .btn.sm{pointer-events:none}
.fx-banner{margin:0 0 .5rem;padding:.35rem .6rem;border-radius:var(--r);background:var(--chip);color:var(--chip-fg);font-size:.8rem}
.fx-deliveries .fx-channel{font-weight:600;flex:0 0 6.5rem}
.fx-deliveries .muted{flex:1 1 auto}
.fx-rise{animation:fx-rise .4s ease-out both}
.fx-deliveries li:nth-child(2){animation-delay:.12s}.fx-deliveries li:nth-child(3){animation-delay:.24s}.fx-deliveries li:nth-child(4){animation-delay:.36s}.fx-deliveries li:nth-child(5){animation-delay:.48s}.fx-deliveries li:nth-child(6){animation-delay:.6s}
@keyframes fx-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* where the browser can drive an animation by scroll, the log rises as it comes into view
   instead of on page load, when nobody is looking at it; the stagger is a range per row */
@supports (animation-timeline:view()){
  .fx-deliveries .fx-rise{animation-timeline:view();animation-delay:0s;animation-range:entry 5% entry 45%}
  .fx-deliveries li:nth-child(2){animation-range:entry 15% entry 55%}.fx-deliveries li:nth-child(3){animation-range:entry 25% entry 65%}
  .fx-deliveries li:nth-child(4){animation-range:entry 35% entry 75%}.fx-deliveries li:nth-child(5){animation-range:entry 45% entry 85%}.fx-deliveries li:nth-child(6){animation-range:entry 55% entry 95%}
}
.fx-sso{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.fx-sso .btn.sm{pointer-events:none}
.fx-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.fx-chips .chip{border:1px solid var(--line-2);border-radius:999px;padding:.12rem .6rem;font-size:.76rem;color:var(--fg-2)}

/* prices as typography: three figures, a hairline between */
.fx-prices{display:grid;grid-template-columns:repeat(4,1fr);max-width:1000px;margin:2.8rem auto 0;text-align:center}.fx-price-word{font-size:1.35rem!important;letter-spacing:0!important}
.fx-price{padding:.6rem 1rem}
.fx-price+.fx-price{border-left:1px solid var(--line)}
.fx-price-name{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fx-price-amount{display:block;margin:.35rem 0 0;font-size:clamp(1.9rem,3.8vw,2.6rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--brand)}
.fx-price-amount small{display:block;margin-top:.15rem;font-size:.78rem;font-weight:500;letter-spacing:0;color:var(--muted)}
.fx-price-scope{display:block;margin-top:.5rem;font-size:.9rem;color:var(--fg-2)}
.fx-tiers{list-style:none;max-width:640px;margin:1.8rem auto 0;padding:0;font-size:.9rem;color:var(--fg-2)}
.fx-tiers li{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;padding:.55rem 0;border-top:1px solid var(--line)}
.fx-tiers li:last-child{border-bottom:1px solid var(--line)}
.fx-price-link{display:block;margin-top:1.4rem;text-align:center;font-size:.92rem}
.fx-access .fx-note{margin:2rem auto 0;text-align:center}
.fx-access .fx-actions{justify-content:center;margin-top:1.8rem}
.fx-access .support-box{max-width:420px;margin:2.2rem auto 0}

/* responsive */
@media (max-width:880px){
  .fx-how dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fx-hero-inner{grid-template-columns:minmax(0,1fr);gap:2rem}
  .fx-radar{display:none}
  .fx-split,.fx-split.fx-even,.fx-quad{grid-template-columns:minmax(0,1fr);gap:1.6rem}
  .fx-trio{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .fx-prices{grid-template-columns:1fr 1fr}
  .fx-how dl{grid-template-columns:minmax(0,1fr)}
  .fx-trio,.fx-stairs{grid-template-columns:minmax(0,1fr)}
  .fx-stair-3,.fx-stair-2,.fx-stair-1{min-height:0}
  .fx-stair{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
  .fx-stair .fx-num{font-size:2.6rem;flex:0 0 3rem}
  .fx-stair strong{flex:1 1 auto}
  .fx-stair-text{flex:1 1 100%}
  .fx-facts{grid-template-columns:minmax(0,1fr)}
  .fx-fact+.fx-fact{border-left:0;border-top:1px solid var(--line)}
  .fx-dia text{display:none}
  .fx-wire-legend{grid-template-columns:minmax(0,1fr);counter-reset:wire}
  .fx-wire-legend li{text-align:left;counter-increment:wire}
  .fx-wire-legend li::before{content:counter(wire) " · ";font-weight:700}
  .fx-map-legend{grid-template-columns:minmax(0,1fr)}
  .fx-fan .fx-dia{max-height:220px}
  .fx-list{grid-template-columns:minmax(0,1fr);gap:0}
  .fx-list dt{padding-bottom:.2rem}
  .fx-list dd{padding-top:0;border-top:0}
  .fx-prices{grid-template-columns:minmax(0,1fr)}
  .fx-price{padding:1.2rem 0}
  .fx-price+.fx-price{border-left:0;border-top:1px solid var(--line)}
  .fx-actions .btn{width:100%;text-align:center}
  .doc-topnav .langs{display:none}
}
@media (max-width:420px){
  .fx-kv,.fx-term .fx-kv,.fx-kv-wide{grid-template-columns:minmax(0,1fr);gap:0}
  .fx-kv dt{padding-bottom:0;border-top:1px solid var(--line)}
  .fx-kv dd{border-top:0;padding-top:.1rem}
  .fx-kv dt:first-of-type{border-top:0}
  .fx-demo{padding:.8rem}
  .fx-num{font-size:2.6rem}
  .fx-deliveries .fx-channel{flex-basis:4.5rem}
}
@media (prefers-reduced-motion:reduce){
  .fx-sweep,.fx-sweep-sm,.fx-flow,.fx-rise{animation:none}
  .fx-main *{transition:none!important}
}