/* wedigo its — Website-Stylesheet
   Geradlinig: Raster mit durchgehenden Linien, rechte Winkel, flache Farben.
   Farben aus dem Originallogo (Petrolblau #044f76, Gold #e9b945).
   Keine externen Abhängigkeiten: Systemschriften, Inline-SVG, CSS-Animationen. */

:root {
  --petrol-950: #021f30;
  --petrol-900: #032f47;
  --petrol-800: #044f76;
  --petrol-700: #0f567c;
  --petrol-600: #1e6184;
  --petrol-400: #5587a2;
  --petrol-100: #dfeaf1;
  --petrol-50: #f2f6f9;
  --gold: #e9b945;
  --gold-dark: #c99a26;
  --gold-text: #8a6400;
  --ink: #10222f;
  --text: #33434f;
  --muted: #5e6d78;
  --line: #d6dfe5;
  --line-strong: #10222f;
  --bg: #ffffff;
  --bg-alt: #f4f7f9;
  --scene: #07182a;
  --scene-2: #0c2238;
  --green: #2fbf71;
  --red: #e5484d;
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
  --max: 1200px;
  --gutter: 32px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol-800); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--petrol-600); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -0.025em; }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.lead { font-size: 1.2rem; color: var(--text); max-width: 680px; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--gold); color: var(--ink); padding: 8px 14px; z-index: 100; font-weight: 700; }
.skip:focus { left: 8px; }

/* Raster: durchgehende senkrechte Linien links und rechts */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
section { border-bottom: 1px solid var(--line); }
.pad { padding-top: 88px; padding-bottom: 88px; }
.alt { background: var(--bg-alt); }

/* Kleine Beschriftungen */
.label { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.label::before { content: ""; display: block; width: 40px; height: 3px; background: var(--gold); margin-bottom: 14px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 22px; border: 1px solid transparent; border-radius: 0; font: 600 1rem/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { text-decoration: none; }
.btn .arr { transition: transform .15s ease; }
.ic-arrow { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; }
.btn:hover .arr { transform: translateX(3px); }
.btn-buy { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn-buy:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--ink); }
.btn-dark { background: var(--petrol-800); color: #fff; border-color: var(--petrol-800); }
.btn-dark:hover { background: var(--petrol-900); border-color: var(--petrol-900); color: #fff; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-line:hover { background: var(--ink); color: #fff; }
.on-dark .btn-line { color: #fff; border-color: rgba(255, 255, 255, .6); }
.on-dark .btn-line:hover { background: #fff; color: var(--ink); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }

/* ---------- Kopfzeile ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.logo { display: block; flex: none; }
.logo img { height: 46px; width: auto; }
.nav { display: flex; align-items: stretch; height: 100%; }
.nav a { display: flex; align-items: center; padding: 0 14px; color: var(--text); font-size: .95rem; font-weight: 500; text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
.nav a.cta { margin: 16px 0 16px 14px; padding: 0 18px; background: var(--petrol-800); color: #fff; border: 0; }
.nav a.cta:hover { background: var(--petrol-900); }
.nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); width: 44px; height: 44px; cursor: pointer; color: var(--ink); padding: 0; }
.nav-toggle svg { width: 22px; height: 22px; margin: 0 auto; }

/* ---------- Hero ---------- */
.hero .wrap { padding-top: 96px; }
.hero h1 { max-width: 880px; }
.hero h1 span { display: block; color: var(--petrol-800); font-size: .52em; letter-spacing: -0.01em; line-height: 1.25; margin-top: .45em; font-weight: 600; }
.hero .lead { margin-top: 8px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 72px calc(-1 * var(--gutter)) 0; border-top: 1px solid var(--line); }
.facts div { padding: 20px var(--gutter); border-left: 1px solid var(--line); }
.facts div:first-child { border-left: 0; }
.facts strong { display: block; color: var(--ink); font-size: 1.05rem; }
.facts span { font-size: .9rem; color: var(--muted); }

/* Produktindex */
.index { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 calc(-1 * var(--gutter)); border-top: 2px solid var(--line-strong); }
.index a { display: flex; flex-direction: column; gap: 8px; padding: 28px var(--gutter) 30px; border-left: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .15s ease; }
.index a:first-child { border-left: 0; }
.index a:hover { background: var(--bg-alt); }
.index .no { font: 600 .85rem var(--mono); color: var(--gold-text); }
.index h3 { margin: 0; font-size: 1.35rem; }
.index p { margin: 0; font-size: .95rem; flex: 1; }
.index .meta { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol-800); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; display: flex; justify-content: space-between; }
.index a:hover .meta { color: var(--ink); }

/* ---------- Produktabschnitte ---------- */
.sec-head { display: flex; align-items: baseline; gap: 20px; border-top: 2px solid var(--line-strong); padding-top: 14px; margin-bottom: 48px; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.sec-head .no { font-family: var(--mono); color: var(--gold-text); letter-spacing: 0; }
.sec-head .name { color: var(--ink); }
.sec-head .meta { margin-left: auto; letter-spacing: .06em; }
.product .grid > *, .contact .grid > * { min-width: 0; }
.product .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.product h2 { max-width: 560px; }
.features { list-style: none; margin: 28px 0 0; padding: 0; border-bottom: 1px solid var(--line); }
.features li { padding: 14px 0 14px 26px; border-top: 1px solid var(--line); position: relative; font-size: .98rem; }
.features li::before { content: ""; position: absolute; left: 0; top: 23px; width: 10px; height: 10px; background: var(--petrol-800); }
.features strong { color: var(--ink); display: block; }
.specs { margin: 20px 0 0; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.specs span + span::before { content: "/"; margin: 0 10px; color: var(--line); }
.buy-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.buy-row .note { font-size: .9rem; color: var(--muted); }

/* ---------- Szenen (animierte Produktszenen) ---------- */
.scene { background: var(--scene); color: #fff; border: 1px solid var(--line-strong); font-size: 13px; }
.scene .bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12); font: 12px var(--mono); color: rgba(255, 255, 255, .62); }
.scene .bar b { color: #fff; font-weight: 600; }
.scene .bar .live { display: inline-flex; align-items: center; gap: 7px; }
.scene .bar .live::before { content: ""; width: 7px; height: 7px; background: var(--green); animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.scene .body { padding: 18px; }
.caption { font-size: .88rem; color: var(--muted); margin: 14px 0 0; padding-left: 14px; border-left: 3px solid var(--gold); }

/* Acmefyer: Zertifikats-Pipeline */
.acme .steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 16px; }
.acme .step { padding: 10px 12px; font-size: 12px; position: relative; border-left: 1px solid rgba(255, 255, 255, .12); }
.acme .step:first-child { border-left: 0; }
.acme .step b { display: block; font-size: 10.5px; color: rgba(255, 255, 255, .55); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; }
.acme .step::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; animation: stepfill 12s linear infinite; }
.acme .step:nth-child(2)::after { animation-delay: 3s; }
.acme .step:nth-child(3)::after { animation-delay: 6s; }
.acme .step:nth-child(4)::after { animation-delay: 9s; }
@keyframes stepfill { 0% { transform: scaleX(0); } 20%, 100% { transform: scaleX(1); } }
.acme .log { list-style: none; margin: 0; padding: 12px 14px; background: rgba(0, 0, 0, .3); font: 11.5px/1.75 var(--mono); min-height: 158px; }
.acme .log li { opacity: 0; animation: logline 12s linear infinite; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acme .log li:nth-child(1) { animation-delay: .3s; }
.acme .log li:nth-child(2) { animation-delay: 1.6s; }
.acme .log li:nth-child(3) { animation-delay: 3.3s; }
.acme .log li:nth-child(4) { animation-delay: 4.8s; }
.acme .log li:nth-child(5) { animation-delay: 6.3s; }
.acme .log li:nth-child(6) { animation-delay: 7.6s; }
.acme .log li:nth-child(7) { animation-delay: 9.2s; }
.acme .log li:nth-child(8) { animation-delay: 10.4s; }
@keyframes logline { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }
.acme .ok { color: var(--green); } .acme .hl { color: var(--gold); } .acme .dim { color: rgba(255, 255, 255, .42); }
.acme .certs { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.acme .cert { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.acme .cert .d { font: 12px var(--mono); }
.acme .cert .exp { grid-column: 1 / -1; height: 3px; background: rgba(255, 255, 255, .1); }
.acme .cert .exp i { display: block; height: 100%; background: var(--green); width: var(--w, 50%); }
.acme .cert.renew .exp i { animation: renewbar 12s linear infinite; }
@keyframes renewbar { 0%, 70% { width: 12%; background: var(--gold); } 80%, 100% { width: 100%; background: var(--green); } }
.acme .pill { font: 600 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--green); }
.acme .cert.renew .pill { animation: pillswap 12s linear infinite; }
@keyframes pillswap { 0%, 70% { color: var(--gold); } 80%, 100% { color: var(--green); } }

/* Spherifyer: Datastores + Verlauf */
.sph .kpis { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 16px; }
.sph .kpi { padding: 10px 12px; border-left: 1px solid rgba(255, 255, 255, .12); }
.sph .kpi:first-child { border-left: 0; }
.sph .kpi b { display: block; font-size: 18px; color: #7fb6e0; font-variant-numeric: tabular-nums; }
.sph .kpi span { font-size: 11px; color: rgba(255, 255, 255, .55); }
.sph .ds { display: grid; gap: 10px; }
.sph .ds .row { display: grid; grid-template-columns: 110px 1fr 46px; gap: 10px; align-items: center; font-size: 12px; }
.sph .ds .name { font-family: var(--mono); color: rgba(255, 255, 255, .85); }
.sph .ds .track { height: 8px; background: rgba(255, 255, 255, .1); }
.sph .ds .fill { height: 100%; width: 0; background: #5aa2d6; animation: grow 10s ease-out infinite; }
.sph .ds .warn .fill { background: var(--gold); }
.sph .ds .crit .fill { background: var(--red); }
.sph .ds .pct { text-align: right; font-family: var(--mono); color: rgba(255, 255, 255, .7); }
@keyframes grow { 0% { width: 0; } 25%, 92% { width: var(--w); } 100% { width: 0; } }
.sph .chart { margin-top: 16px; background: rgba(0, 0, 0, .25); padding: 10px 10px 6px; }
.sph .chart svg { width: 100%; height: 110px; overflow: visible; }
.sph .chart .grid line { stroke: rgba(255, 255, 255, .08); }
.sph .chart .area { fill: rgba(90, 162, 214, .22); opacity: 0; animation: fadein 10s linear infinite; }
.sph .chart .line { fill: none; stroke: #7fb6e0; stroke-width: 2; stroke-dasharray: 600; stroke-dashoffset: 600; animation: draw 10s ease-out infinite; }
.sph .chart .thr { stroke: var(--gold); stroke-dasharray: 4 4; stroke-width: 1.2; }
.sph .chart text { fill: rgba(255, 255, 255, .5); font-size: 9px; font-family: var(--mono); }

/* Spherifyer: Ausfallsimulation (12-s-Zyklus). esx01 fällt aus, seine VMs verschwinden
   und starten als goldene Kacheln auf den übrigen Hosts neu, die RAM-Balken wachsen,
   dann erscheint das Urteil. Läuft wie die Szenen bei Acmefyer und i-Tracker auch bei
   reduzierter Bewegung: jede animation-Angabe trägt !important. Grundzustand ohne
   Animation = nach dem Ausfall (alle neuen Kacheln sichtbar, Urteil steht). */
.fsim .fs-hosts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fsim .fs-host { border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); padding: 10px; display: grid; gap: 8px; align-content: start; }
.fsim .fs-host .hd { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 600 12px var(--mono); color: rgba(255, 255, 255, .85); }
.fsim .fs-host em { font: 700 9px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--red); font-style: normal; opacity: 0; animation: fs-badge 12s linear infinite !important; }
.fsim .track { height: 6px; background: rgba(255, 255, 255, .1); }
.fsim .track i { display: block; height: 100%; background: #5aa2d6; width: 45%; }
.fsim .down .track i { animation: fs-b1 12s ease-in-out infinite !important; }
.fsim .track i.b2 { animation: fs-b2 12s ease-in-out infinite !important; }
.fsim .track i.b3 { animation: fs-b3 12s ease-in-out infinite !important; }
.fsim .track i.b4 { animation: fs-b4 12s ease-in-out infinite !important; }
.fsim .vms { display: flex; flex-wrap: wrap; gap: 4px; min-height: 40px; align-content: flex-start; }
.fsim .vms i { width: 12px; height: 12px; background: #5aa2d6; }
.fsim .down { animation: fs-down 12s linear infinite !important; }
.fsim .down .vms i { animation: fs-out 12s ease-in infinite !important; }
.fsim .vms i.n { background: var(--gold); opacity: 0; animation: fs-in 12s ease-out infinite !important; }
.fsim .vms i.d2 { animation-delay: .25s !important; } .fsim .vms i.d3 { animation-delay: .5s !important; }
.fsim .vms i.d4 { animation-delay: .75s !important; }
.fsim .fs-verdict { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 12px; border-left: 3px solid var(--green);
                    background: rgba(47, 191, 113, .1); font-size: 12px; opacity: 0; animation: fs-verdict 12s linear infinite !important; }
.fsim .fs-verdict svg { flex: none; color: var(--green); }
@keyframes fs-down { 0%, 22% { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
  26%, 90% { border-color: var(--red); background: rgba(229, 72, 77, .12); } 96%, 100% { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); } }
@keyframes fs-badge { 0%, 24% { opacity: 0; } 27%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@keyframes fs-out { 0%, 23% { opacity: 1; transform: none; background: #5aa2d6; } 27% { background: var(--red); transform: scale(1.15); opacity: 1; }
  34%, 92% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes fs-in { 0%, 33% { opacity: 0; transform: translateX(-14px) scale(.4); } 38% { opacity: 1; transform: scale(1.2); } 42%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: none; } }
@keyframes fs-b1 { 0%, 23% { width: 62%; } 30%, 92% { width: 0; } 100% { width: 62%; } }
@keyframes fs-b2 { 0%, 34% { width: 48%; } 44%, 92% { width: 71%; } 100% { width: 48%; } }
@keyframes fs-b3 { 0%, 34% { width: 40%; } 44%, 92% { width: 70%; } 100% { width: 40%; } }
@keyframes fs-b4 { 0%, 34% { width: 52%; } 44%, 92% { width: 74%; } 100% { width: 52%; } }
@keyframes fs-verdict { 0%, 46% { opacity: 0; } 52%, 90% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (max-width: 560px) { .fsim .fs-hosts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@keyframes draw { 0% { stroke-dashoffset: 600; } 35%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 600; } }
@keyframes fadein { 0%, 20% { opacity: 0; } 40%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* i-Tracker: ein iperf3-Test läuft (12-s-Zyklus): Verbindung, 10 s Messung mit Kurve und
   Sekundenzeilen, Ergebnis, danach der Traceroute Hop für Hop. Läuft wie die Rollout-Beispiele
   auch bei reduzierter Bewegung (Wunsch 2026-10-12), daher !important. */
.itr .prog { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font: 11px var(--mono); color: rgba(255, 255, 255, .6); margin-bottom: 12px; }
.itr .prog .track { height: 6px; background: rgba(255, 255, 255, .1); }
.itr .prog .track i { display: block; height: 100%; width: 0; background: var(--green); animation: itr-prog 12s linear infinite !important; }
.itr .chart { background: rgba(0, 0, 0, .25); padding: 8px 10px 4px; margin-bottom: 12px; }
.itr .chart svg { width: 100%; height: 92px; overflow: visible; }
.itr .chart .grid line { stroke: rgba(255, 255, 255, .08); }
.itr .chart .line { fill: none; stroke: #7fb6e0; stroke-width: 2; stroke-dasharray: 360; stroke-dashoffset: 360; animation: itr-draw 12s linear infinite !important; }
.itr .chart .area { fill: rgba(90, 162, 214, .18); opacity: 0; animation: itr-area 12s linear infinite !important; }
.itr .chart text { fill: rgba(255, 255, 255, .5); font-size: 9px; font-family: var(--mono); }
.itr .log { list-style: none; margin: 0; padding: 10px 14px; background: rgba(0, 0, 0, .3); font: 11px/1.7 var(--mono); min-height: 152px; }
.itr .log li { opacity: 0; white-space: pre; overflow: hidden; text-overflow: ellipsis; animation: itr-l1 12s linear infinite !important; }
.itr .log li:nth-child(2) { animation-name: itr-l2 !important; }
.itr .log li:nth-child(3) { animation-name: itr-l3 !important; }
.itr .log li:nth-child(4) { animation-name: itr-l4 !important; }
.itr .log li:nth-child(5) { animation-name: itr-l5 !important; }
.itr .log li:nth-child(6) { animation-name: itr-l6 !important; }
.itr .log li:nth-child(7) { animation-name: itr-l7 !important; }
.itr .log li:nth-child(8) { animation-name: itr-l8 !important; }
.itr .ok { color: var(--green); } .itr .hl { color: var(--gold); } .itr .dim { color: rgba(255, 255, 255, .42); }
.itr .result { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255, 255, 255, .12); margin-top: 12px; opacity: 0; animation: itr-result 12s linear infinite !important; }
.itr .result div { padding: 8px 12px; border-left: 1px solid rgba(255, 255, 255, .12); }
.itr .result div:first-child { border-left: 0; }
.itr .result b { display: block; font-size: 17px; color: #7fb6e0; font-variant-numeric: tabular-nums; }
.itr .result span { font-size: 11px; color: rgba(255, 255, 255, .55); }
.itr .path { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 11px var(--mono); flex-wrap: wrap; }
.itr .path .hop { padding: 3px 8px; border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .35); animation: itr-hop 12s linear infinite !important; }
.itr .path .hop:nth-of-type(2) { animation-name: itr-hop2 !important; }
.itr .path .hop:nth-of-type(3) { animation-name: itr-hop3 !important; }
.itr .path .hop:nth-of-type(4) { animation-name: itr-hop4 !important; }
.itr .path .sep { width: 12px; height: 1px; background: rgba(255, 255, 255, .3); }
.itr .path .lbl { color: rgba(255, 255, 255, .42); margin-right: 4px; }
@media (max-width: 560px) { .itr .log { font-size: 9.5px; padding: 10px; } }
@keyframes itr-l1 { 0%, 1.7% { opacity: 0; } 2.7%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l2 { 0%, 12.5% { opacity: 0; } 13.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l3 { 0%, 22.5% { opacity: 0; } 23.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l4 { 0%, 32.5% { opacity: 0; } 33.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l5 { 0%, 42.5% { opacity: 0; } 43.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l6 { 0%, 52.5% { opacity: 0; } 53.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l7 { 0%, 62.5% { opacity: 0; } 63.5%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-l8 { 0%, 76% { opacity: 0; } 77%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes itr-prog { 0%, 4% { width: 0; } 75%, 96% { width: 100%; } 100% { width: 0; } }
@keyframes itr-draw { 0%, 4% { stroke-dashoffset: 360; } 75%, 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 360; } }
@keyframes itr-area { 0%, 70% { opacity: 0; } 76%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes itr-result { 0%, 75% { opacity: 0; } 78%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes itr-hop { 0%, 80% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } 82%, 97% { color: #fff; border-color: var(--gold); } 99%, 100% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } }
@keyframes itr-hop2 { 0%, 84% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } 86%, 97% { color: #fff; border-color: var(--gold); } 99%, 100% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } }
@keyframes itr-hop3 { 0%, 88% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } 90%, 97% { color: #fff; border-color: var(--gold); } 99%, 100% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } }
@keyframes itr-hop4 { 0%, 91% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } 93%, 97% { color: #fff; border-color: var(--gold); } 99%, 100% { color: rgba(255, 255, 255, .35); border-color: rgba(255, 255, 255, .18); } }
.sph .alert { margin-top: 12px; padding: 9px 12px; border-left: 3px solid var(--gold); background: rgba(233, 185, 69, .1); font-size: 12px; opacity: 0; animation: alertin 10s linear infinite; }
@keyframes alertin { 0%, 30% { opacity: 0; } 38%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* GoDesk: verschlüsselte Sitzung */
.gd svg { width: 100%; height: auto; }
.gd .path { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.5; }
.gd .path.active { stroke: var(--gold); stroke-dasharray: 8 8; animation: dash 3s linear infinite; }
.gd .relay { opacity: .45; }
.gd text { font-family: var(--font); font-size: 12px; fill: rgba(255, 255, 255, .88); font-weight: 600; }
.gd text.sub { font-size: 10px; fill: rgba(255, 255, 255, .5); font-weight: 400; }
.gd .box { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .35); }
.gd .screen { fill: var(--scene-2); }
@keyframes dash { to { stroke-dashoffset: -96; } }
.gd .session { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .14); font-size: 12px; }
.gd .session .live { display: inline-flex; align-items: center; gap: 8px; }
.gd .session .live::before { content: ""; width: 7px; height: 7px; background: var(--green); animation: blink 2s steps(1) infinite; }
.gd .session .bw { font-family: var(--mono); color: #7fb6e0; }
.gd .session .stop { font: 700 11px var(--font); color: #fff; background: var(--red); padding: 5px 10px; }
.gd .meter { margin-top: 10px; display: grid; grid-template-columns: 90px 1fr 110px; gap: 10px; align-items: center; font-size: 11px; color: rgba(255, 255, 255, .6); }
.gd .meter .track { height: 4px; background: rgba(255, 255, 255, .1); }
.gd .meter .fill { height: 100%; background: var(--gold); animation: bw 8s ease-in-out infinite; }
.gd .meter .val { font-family: var(--mono); text-align: right; color: #fff; white-space: nowrap; }
@keyframes bw { 0%, 15% { width: 3%; } 25% { width: 72%; } 45% { width: 58%; } 55%, 100% { width: 3%; } }

/* Acmefyer: maximale Laufzeit öffentlicher TLS-Zertifikate (CA/B Forum SC-081v3) */
.lifetime { display: grid; gap: 14px; margin: 0; }
.lifetime .lt-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 80px; gap: 14px; align-items: center; }
.lifetime .lt-date { font-size: .88rem; color: var(--text); }
.lifetime .lt-date b { display: block; color: var(--ink); font-size: .95rem; }
.lifetime .lt-track { height: 14px; background: var(--bg-alt); border: 1px solid var(--line); }
.lifetime .lt-bar { height: 100%; width: var(--w); background: var(--petrol-400); animation: lt-grow 1.4s ease-out both; }
.lifetime .lt-row.now .lt-bar { background: var(--petrol-800); }
.lifetime .lt-row.soon .lt-bar { background: var(--gold); }
.lifetime .lt-val { font: 700 .95rem var(--font); color: var(--ink); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lifetime .lt-now { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--petrol-800); vertical-align: 1px; }
.lifetime-note { font-size: .82rem; color: var(--muted); margin: 16px 0 0; }
@keyframes lt-grow { from { width: 0; } to { width: var(--w); } }
@media (max-width: 560px) { .lifetime .lt-row { grid-template-columns: 1fr 70px; } .lifetime .lt-date { grid-column: 1 / -1; } }

/* Acmefyer: Beispiele zum Rollout per Agent (10-s-Zyklus) */
.dep-examples { margin-top: 48px; }
.dep .body { overflow-x: auto; }
.dep .body > svg { display: block; width: 100%; min-width: 600px; height: auto; }
.dep text { font-family: var(--font); font-size: 12px; fill: rgba(255, 255, 255, .9); font-weight: 600; }
.dep text.sub { font-size: 10px; fill: rgba(255, 255, 255, .55); font-weight: 400; }
.dep text.zone { font-size: 10px; letter-spacing: .12em; fill: rgba(255, 255, 255, .4); font-weight: 700; }
.dep text.warn { fill: #ff8a8d; font-size: 10px; font-weight: 600; }
.dep text.good { fill: #6fe3a5; font-size: 10px; font-weight: 600; }
.dep .zonebg { fill: rgba(255, 255, 255, .03); }
.dep .box { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .35); }
.dep .box.srv { stroke: var(--gold); }
.dep .wall { fill: rgba(229, 72, 77, .18); stroke: var(--red); }
/* Die Rollout-Beispiele laufen bewusst immer, auch bei reduzierter Bewegung (Entscheidung 2026-10-11);
   !important setzt sich gegen die globale Regel im Block prefers-reduced-motion durch. */
/* Verbindungen laufen nur, solange sie aktiv sind (s1/s2/s3 = Agent 1/2/3 im 12-s-Zyklus), sonst gedimmt. */
.dep .link { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 6 6; stroke-opacity: .15; animation: dep-link1 12s linear infinite !important; }
.dep .link.s2, .dep .push.s2 { animation-name: dep-link2 !important; }
.dep .link.s3, .dep .push.s3 { animation-name: dep-link3 !important; }
.dep .acme { fill: none; stroke: #7fb6e0; stroke-width: 1.6; stroke-dasharray: 6 6; animation: dep-acme 12s linear infinite !important; }
.dep .push { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-dasharray: 6 6; stroke-opacity: .15; animation: dep-link1 12s linear infinite !important; }
.dep .blocked { fill: none; stroke: var(--red); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .8; }
.dep .x { stroke: var(--red); stroke-width: 2.5; stroke-linecap: round; }
.dep .tag-red { fill: rgba(229, 72, 77, .2); stroke: var(--red); }
.dep .tag-green { fill: rgba(47, 191, 113, .16); stroke: var(--green); }
.dep .cert { fill: var(--gold); }
.dep .cert-line { stroke: var(--scene); stroke-width: 1.2; }
/* Zyklus 12 s: ACME 1-3,5 s, danach die Ziele nacheinander (.s1, .s2, .s3) */
.dep .pkt { opacity: 0; animation: dep-pkt1 12s ease-in-out infinite !important; }
.dep .pkt.s2 { animation-name: dep-pkt2 !important; }
.dep .pkt.s3 { animation-name: dep-pkt3 !important; }
.dep .ok { opacity: 0; animation: dep-ok1 12s linear infinite !important; }
.dep .ok.s2 { animation-name: dep-ok2 !important; }
.dep .ok.s3 { animation-name: dep-ok3 !important; }
.dep .ok circle { fill: var(--green); }
.dep .ok path { fill: none; stroke: var(--scene); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Die Verbindung ins Internet bewegt sich nur, solange der Server das Zertifikat holt (Versatz -72 = 6 Musterlängen, daher nahtlos) */
@keyframes dep-acme { 0%, 6% { stroke-opacity: .15; stroke-dashoffset: 0; } 9% { stroke-opacity: 1; stroke-dashoffset: 0; } 27% { stroke-opacity: 1; stroke-dashoffset: -72; } 30%, 100% { stroke-opacity: .15; stroke-dashoffset: -72; } }
@keyframes dep-link1 { 0%, 28% { stroke-opacity: .15; stroke-dashoffset: 0; } 30% { stroke-opacity: 1; stroke-dashoffset: 0; } 43% { stroke-opacity: 1; stroke-dashoffset: -60; } 45%, 100% { stroke-opacity: .15; stroke-dashoffset: -60; } }
@keyframes dep-link2 { 0%, 44% { stroke-opacity: .15; stroke-dashoffset: 0; } 46% { stroke-opacity: 1; stroke-dashoffset: 0; } 59% { stroke-opacity: 1; stroke-dashoffset: -60; } 61%, 100% { stroke-opacity: .15; stroke-dashoffset: -60; } }
@keyframes dep-link3 { 0%, 60% { stroke-opacity: .15; stroke-dashoffset: 0; } 62% { stroke-opacity: 1; stroke-dashoffset: 0; } 75% { stroke-opacity: 1; stroke-dashoffset: -60; } 77%, 100% { stroke-opacity: .15; stroke-dashoffset: -60; } }
@keyframes dep-pkt1 { 0%, 30% { opacity: 0; transform: translate(0, 0); } 31% { opacity: 1; transform: translate(0, 0); } 42% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 44%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes dep-pkt2 { 0%, 46% { opacity: 0; transform: translate(0, 0); } 47% { opacity: 1; transform: translate(0, 0); } 58% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 60%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes dep-pkt3 { 0%, 62% { opacity: 0; transform: translate(0, 0); } 63% { opacity: 1; transform: translate(0, 0); } 74% { opacity: 1; transform: translate(var(--dx), var(--dy)); } 76%, 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
@keyframes dep-ok1 { 0%, 43% { opacity: 0; } 45%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dep-ok2 { 0%, 59% { opacity: 0; } 61%, 95% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dep-ok3 { 0%, 75% { opacity: 0; } 77%, 95% { opacity: 1; } 100% { opacity: 0; } }

/* iperf3: echte Aufnahmen */
.tabs { display: flex; border: 1px solid var(--line-strong); border-bottom: 0; flex-wrap: wrap; }
.tabs button { flex: 1; font: 600 .85rem var(--font); padding: 10px 12px; border: 0; border-left: 1px solid var(--line-strong); background: #fff; color: var(--text); cursor: pointer; }
.tabs button:first-child { border-left: 0; }
.tabs button:hover { background: var(--bg-alt); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.frame { border: 1px solid var(--line-strong); background: #0b1220; }
.frame img { width: 100%; }
.media-pane[hidden] { display: none; }
/* Viele Tabs (Spherifyer-Ansichten): Raster mit Trennlinien aus dem Hintergrund, unabhängig von der Anzahl */
.tabs.many { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line-strong); }
.tabs.many button, .tabs.many button:nth-child(n) { border: 0; }
.tabs.many button { flex: 1 1 0; min-width: max-content; }   /* jede Zeile füllt sich selbst, keine leeren Zellen */
/* Spherifyer-Ansichten laufen von selbst durch: Jede Aufnahme ist 1400 × 1400, der Rahmen zeigt
   1400 × 880 und fährt langsam nach unten. Der Balken am aktiven Tab zeigt die Restzeit, an seinem
   Ende schaltet assets/main.js weiter. Maus über der Galerie, Tastaturfokus oder außerhalb des
   Bildschirms hält an. Wie die Rollout-Beispiele bewusst auch bei reduzierter Bewegung, daher !important. */
.shots { --sh-dur: 10s; --sh-play: running; }
.shots.offscreen, .shots:has(:focus-visible) { --sh-play: paused; }
@media (hover: hover) { .shots:hover { --sh-play: paused; } }
.shots a.frame { display: block; cursor: zoom-in; aspect-ratio: 1400 / 880; overflow: hidden; }
.shots .frame img { will-change: transform; backface-visibility: hidden; animation: sh-pan var(--sh-dur) linear both !important; animation-play-state: var(--sh-play) !important; }
.shots .frame img.still { animation: none !important; }   /* Aufnahmen ohne Überlänge (1400 × 880) fahren nicht */
.shots .media-pane:not([hidden]) { animation: sh-fade .6s ease both !important; }
.tabs.many button { position: relative; }
.shots .tabs.many button[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--gold); transform-origin: left; animation: sh-progress var(--sh-dur) linear both !important; animation-play-state: var(--sh-play) !important; }
@keyframes sh-pan {
  0%, 15% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  80%, 100% { transform: translate3d(0, -37.142857%, 0); }
}
@keyframes sh-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sh-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) { .tabs.many button { min-width: 34%; } }

/* ---------- Preise ---------- */
.price-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.price-table th { text-align: left; font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 14px 20px; border-bottom: 2px solid var(--line-strong); }
.price-table td { padding: 22px 20px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: .97rem; }
.price-table tr:last-child td { border-bottom: 0; }
.price-table .prod strong { display: block; color: var(--ink); font-size: 1.15rem; }
.price-table .prod span { font-size: .88rem; color: var(--muted); }
.price-table .amount { font-size: 1.6rem; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table .amount small { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }
.price-table .act { text-align: right; width: 1%; }
.price-table tr.paid td:first-child { box-shadow: inset 4px 0 0 var(--gold); }
.includes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; border-top: 1px solid var(--line); }
.includes div { padding: 22px 24px 4px 0; }
.includes div + div { padding-left: 24px; border-left: 1px solid var(--line); }
.includes h3 { font-size: 1rem; margin-bottom: 6px; }
.includes p { font-size: .93rem; color: var(--muted); }
.pay { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; border: 1px solid var(--line); background: #fff; }
.pay span { padding: 12px 18px; border-left: 1px solid var(--line); font-size: .9rem; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 8px; }
.pay span:first-child { border-left: 0; color: var(--muted); font-weight: 500; }
.pay svg { width: 18px; height: 18px; }

/* ---------- Kontakt (dunkel) ---------- */
.contact { background: var(--petrol-900); color: rgba(255, 255, 255, .82); border-bottom: 0; }
.contact .wrap { border-color: rgba(255, 255, 255, .14); }
.contact h2, .contact h3 { color: #fff; }
.contact .label { color: rgba(255, 255, 255, .6); }
.contact .grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 64px; }
.contact .lead { color: rgba(255, 255, 255, .85); }
.since { display: grid; grid-template-columns: 80px 1fr; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 1px solid rgba(255, 255, 255, .18); padding: 16px 0; margin-top: 28px; }
.since b { color: var(--gold); font-size: 1.05rem; }
.contact dl { margin: 0 0 28px; display: grid; grid-template-columns: auto 1fr; border-top: 1px solid rgba(255, 255, 255, .18); }
.contact dt, .contact dd { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.contact dt { color: rgba(255, 255, 255, .55); font-weight: 600; font-size: .9rem; padding-right: 24px; }
.contact a { color: #fff; }

/* ---------- Fußzeile ---------- */
footer { background: #fff; font-size: .92rem; }
footer .wrap { padding-top: 48px; padding-bottom: 28px; }
footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; }
footer .logo img { height: 34px; }
footer h4 { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer a { color: var(--text); text-decoration: none; }
footer a:hover { color: var(--petrol-800); text-decoration: underline; }
footer .legal { border-top: 1px solid var(--line); padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }

/* ---------- Kauf-Dialog ---------- */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(2, 31, 48, .66); }
.modal.open { display: flex; }
.modal-card { width: min(560px, 100%); background: #fff; border-top: 4px solid var(--gold); max-height: calc(100vh - 40px); overflow-y: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 1.15rem; }
.modal-head button { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 2px 6px; color: var(--ink); }
.modal-body { padding: 22px 24px; display: grid; gap: 16px; }
.modal-body label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.modal-body input, .modal-body select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 0; width: 100%; background: #fff; }
.summary { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.summary strong { font-size: 1.4rem; color: var(--ink); }
.co-includes { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.co-includes li { padding-left: 20px; position: relative; }
.co-includes li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--gold); }
.co-hint { font-size: .8rem; color: var(--muted); margin: 0; }
.notice { font-size: .85rem; padding: 10px 12px; border-left: 3px solid var(--gold); background: var(--bg-alt); margin: 0; }
.modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 0 24px 24px; flex-wrap: wrap; }

/* ---------- Formular (Support) ---------- */
.form { display: grid; gap: 18px; margin-top: 28px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.form input, .form select, .form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 0; width: 100%; background: #fff; color: var(--ink); }
.form textarea { resize: vertical; min-height: 180px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-short input { max-width: 120px; }
.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-hint { font-size: .85rem; color: var(--muted); margin: 0; }
.form-notice { margin-top: 24px; font-size: .95rem; }
.form-notice.ok { border-left-color: var(--green); }
.form-notice.bad { border-left-color: #b3261e; }
.form-direct { margin-top: 32px; font-size: .95rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

/* ---------- Dokumentation (/docs) ---------- */
.docs .wrap { padding-top: 48px; padding-bottom: 96px; }
.docs-head { max-width: 780px; margin-bottom: 40px; }
.docs-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
.docs-version { display: inline-block; margin: 0; padding: 3px 9px; border: 1px solid var(--line); font: 600 .8rem var(--mono); color: var(--gold-text); }
.docs-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; }
.docs-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; font-size: .9rem; }
.docs-toc summary { cursor: pointer; font-weight: 700; padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--ink); }
.docs-toc ol { list-style: none; margin: 10px 0 0; padding: 0; }
.docs-toc a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid transparent; color: var(--muted); text-decoration: none; }
.docs-toc a:hover, .docs-toc a:focus-visible { color: var(--ink); border-left-color: var(--gold); }
.docs-body { min-width: 0; max-width: 840px; }
.docs-sec { margin-bottom: 48px; scroll-margin-top: 96px; border-bottom: 0; }
.docs-sec h2 { font-size: 1.55rem; padding-top: 20px; border-top: 1px solid var(--line); }
.docs-sec h3 { font-size: 1.1rem; margin-top: 1.8em; scroll-margin-top: 96px; }
.docs-sec h4 { font-size: .95rem; margin: 1.6em 0 .2em; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; scroll-margin-top: 96px; }
.docs-body li { margin-bottom: 4px; }
.docs-body li ul { margin-top: 4px; }
.docs-body code { font: .86em var(--mono); background: var(--bg-alt); padding: 1px 5px; border: 1px solid var(--line); word-break: break-word; }
.docs-body pre { position: relative; margin: 0 0 18px; padding: 16px 52px 16px 18px; background: var(--petrol-900); color: #e8f0f5; overflow-x: auto; font: .88rem/1.55 var(--mono); }
.docs-body pre code { background: none; border: 0; padding: 0; color: inherit; font: inherit; word-break: normal; white-space: pre; }
.docs-note { padding: 12px 16px; border-left: 3px solid var(--gold); background: var(--bg-alt); font-size: .95rem; }
.docs-fig { margin: 0 0 24px; }
.docs-fig img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); }
.docs-fig figcaption { font-size: .85rem; color: var(--muted); margin-top: 8px; }
.docs-table { overflow-x: auto; margin: 0 0 18px; border: 1px solid var(--line); }
.docs-ref { width: 100%; border-collapse: collapse; font-size: .88rem; }
.docs-ref th, .docs-ref td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.docs-ref th { background: var(--bg-alt); font-weight: 700; color: var(--ink); white-space: nowrap; }
.docs-ref tr:last-child td { border-bottom: 0; }
.docs-ref code { word-break: normal; }
.docs-ref td:first-child code, .docs-ref td:nth-child(2) code { white-space: nowrap; }
.docs-ref .docs-env { display: block; margin-top: 6px; font-size: .78rem; color: var(--muted); }
.docs-ref .docs-env code { background: none; border: 0; padding: 0; white-space: nowrap; }
.docs-tabs { margin: 0 0 18px; }
.docs-tab-label { margin: 0 0 6px; font-weight: 600; font-size: .85rem; color: var(--muted); }
.docs-tabs.js .docs-tab-label { display: none; }
.docs-tablist { display: flex; gap: 0; border-bottom: 1px solid var(--petrol-900); }
.docs-tablist button { font: 600 .85rem var(--font); padding: 8px 16px; border: 0; background: var(--bg-alt); color: var(--muted); cursor: pointer; }
.docs-tablist button[aria-selected="true"] { background: var(--petrol-900); color: #fff; }
.docs-tabs.js pre { margin-bottom: 0; }
.docs-copy { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .25); background: transparent; color: #e8f0f5; cursor: pointer; }
.docs-copy:hover { background: rgba(255, 255, 255, .1); }
.docs-copy svg { width: 18px; height: 18px; }
.docs-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 32px; }
.docs-overview > div { padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.docs-overview h2 { font-size: 1.25rem; }
.docs-overview p { color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) {
  .docs-grid { grid-template-columns: 1fr; gap: 24px; }
  .docs-toc { position: static; max-height: none; border: 1px solid var(--line); padding: 12px 14px; }
  .docs-toc summary { border-bottom: 0; padding: 0; }
}
@media print {
  .site-header, footer, .docs-toc, .docs-copy, .docs-tablist, .crumbs { display: none !important; }
  .docs-grid { display: block; }
  .docs-tab { display: block !important; }
  .docs-tabs.js .docs-tab-label { display: block; }
  .docs-body pre { background: #fff; color: #000; border: 1px solid #999; white-space: pre-wrap; }
  .docs-sec { break-inside: auto; }
  .docs-sec h2, .docs-sec h3, .docs-sec h4 { break-after: avoid; }
}

/* ---------- Rechtstexte ---------- */
.legal-page .wrap { padding-top: 64px; padding-bottom: 96px; }
.legal-page .inner { max-width: 760px; }
.legal-page h1 { font-size: 2.2rem; }
.legal-page h2 { font-size: 1.25rem; margin-top: 2em; padding-top: 1em; border-top: 1px solid var(--line); }
.legal-page address { font-style: normal; line-height: 1.8; }

/* ---------- Responsive ---------- */
.nav a { white-space: nowrap; }
@media (max-width: 1080px) {
  .nav a { padding: 0 9px; font-size: .9rem; }
}
/* Mittlere Breiten: der Link "Preise" doppelt den gelben Knopf und fällt weg, damit nichts umbricht. */
@media (min-width: 981px) and (max-width: 1080px) {
  .nav > a[href$="/pricing"]:not(.cta) { display: none; }
}
@media (max-width: 960px) {
  .index { grid-template-columns: 1fr 1fr; }
  .index a:nth-child(3) { border-left: 0; }
  .index a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:nth-child(3) { border-left: 0; }
  .facts div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .product .grid, .contact .grid { grid-template-columns: 1fr; gap: 40px; }
  footer .cols { grid-template-columns: 1fr 1fr; }
  .includes { grid-template-columns: 1fr; }
  .includes div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; height: auto; flex-direction: column; background: #fff; border-bottom: 1px solid var(--line-strong); }
  .nav.open { display: flex; }
  .nav a { padding: 14px var(--gutter); border: 0; border-top: 1px solid var(--line); }
  .nav a.cta { margin: 0; padding: 14px var(--gutter); }
  .nav-toggle { display: inline-grid; place-items: center; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .wrap { border-left: 0; border-right: 0; }
  .pad { padding-top: 60px; padding-bottom: 60px; }
  .hero .wrap { padding-top: 56px; }
  .sec-head { flex-wrap: wrap; gap: 8px 16px; }
  .sec-head .meta { margin-left: 0; width: 100%; }
  .acme .steps { grid-template-columns: 1fr 1fr; }
  .acme .step:nth-child(3) { border-left: 0; }
  .acme .step:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .12); }
  .sph .ds .row { grid-template-columns: 84px 1fr 42px; }
  .gd .session { grid-template-columns: 1fr auto; }
  .gd .session .stop { display: none; }
  .price-table, .price-table tbody, .price-table tr, .price-table td { display: block; width: 100%; }
  .price-table thead { display: none; }
  .price-table tr { border-bottom: 1px solid var(--line-strong); padding: 8px 0; }
  .price-table td { border: 0; padding: 6px 16px; }
  .price-table td[data-l]::before { content: attr(data-l); display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
  .price-table .act { text-align: left; width: 100%; padding-bottom: 16px; }
  .price-table tr.paid td:first-child { box-shadow: none; }
  .price-table tr.paid { box-shadow: inset 4px 0 0 var(--gold); }
}
@media (max-width: 560px) {
  .index, .facts { grid-template-columns: 1fr; }
  .index a, .facts div { border-left: 0 !important; border-top: 1px solid var(--line); }
  .index a:first-child, .facts div:first-child { border-top: 0; }
  footer .cols { grid-template-columns: 1fr; }
  .tabs button { flex: 1 1 50%; }
  .tabs button:nth-child(3) { border-left: 0; }
  .tabs button:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
  .logo img { height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .sph .ds .fill { width: var(--w); }
  .acme .log li, .sph .alert, .sph .chart .area { opacity: 1; }
  .sph .chart .line { stroke-dashoffset: 0; }
  .acme .step::after { transform: scaleX(1); }
  .lifetime .lt-bar { animation: none !important; width: var(--w); }
}

/* Rechtsseiten: schlanke Navigation bleibt auch mobil sichtbar */
footer { border-top: 1px solid var(--line); }
.contact + footer, main + footer { border-top-color: var(--line); }
@media (max-width: 980px) {
  .nav.nav-legal { display: flex; position: static; flex-direction: row; height: 100%; border: 0; background: none; }
  .nav.nav-legal a { padding: 0 8px; border: 0; font-size: .85rem; }
  .nav.nav-legal a:nth-child(n+3) { display: none; }
}

/* ===== Überarbeitung 2026-10-09: blaue Glas-Navigation + Kopfbänder ===== */
html, body { overflow-x: clip; }
.site-header {
  background: linear-gradient(100deg, rgba(3, 47, 71, .93) 0%, rgba(4, 79, 118, .90) 55%, rgba(30, 97, 132, .86) 100%);
  backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px -16px rgba(2, 31, 48, .55);
}
.site-header .wrap { border-color: rgba(255, 255, 255, .10); }
.site-header .nav a { color: rgba(255, 255, 255, .86); }
.site-header .nav a:hover { color: #fff; border-bottom-color: var(--gold); }
.site-header .nav a.cta { background: var(--gold); color: var(--ink); }
.site-header .nav a.cta:hover { background: var(--gold-dark); color: var(--ink); }
.site-header .nav-toggle { color: #fff; border-color: rgba(255, 255, 255, .45); }
/* Menü "Dokumentation": öffnet bei Hover und Tastaturfokus, ohne Skript */
.nav-drop { position: relative; display: flex; }
.nav-drop > a svg { width: 13px; height: 13px; margin-left: 5px; transition: transform .15s ease; }
.nav-drop:hover > a svg, .nav-drop:focus-within > a svg { transform: rotate(180deg); }
.nav-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 230px; padding: 6px 0; background: var(--petrol-800); border-top: 3px solid var(--gold); box-shadow: 0 14px 30px -12px rgba(2, 31, 48, .55); z-index: 60; }
.nav-drop:hover .nav-menu, .nav-drop:focus-within .nav-menu { display: block; }
.site-header .nav .nav-menu a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 18px; border: 0; color: rgba(255, 255, 255, .88); }
.site-header .nav .nav-menu a:hover, .site-header .nav .nav-menu a:focus-visible, .site-header .nav .nav-menu a[aria-current] { background: rgba(255, 255, 255, .09); color: #fff; }
.site-header .nav .nav-menu a.nav-menu-all { margin-top: 6px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .88rem; }
.nav-soon { font-size: .75rem; letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }
@media (max-width: 980px) {
  .nav-drop { flex-direction: column; }
  .nav-drop > a svg { display: none; }
  .nav-menu { display: block; position: static; min-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; }
  .site-header .nav .nav-menu a { padding: 12px var(--gutter) 12px calc(var(--gutter) + 20px); border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; }
  .site-header .nav .nav-menu a.nav-menu-all { margin-top: 0; }
}
/* Sprachumschalter: führt zum Gegenstück der Seite (/ ↔ /en/), immer sichtbar, auch neben dem Menü-Knopf */
.site-header .logo { margin-right: auto; }
.lang-switch { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .9); font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-decoration: none; flex: none; }
.lang-switch:hover { color: #fff; border-color: var(--gold); }
.lang-switch svg { width: 16px; height: 16px; }
/* Kundenbereich (/customer/, Go-Dienst www/portal): wie der Sprachumschalter, auf schmalen Bildschirmen nur das Symbol */
.account-link { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); color: rgba(255, 255, 255, .9); font-size: .86rem; font-weight: 600; text-decoration: none; flex: none; margin-left: 14px; }
.account-link:hover, .account-link[aria-current] { color: #fff; border-color: var(--gold); }
.account-link svg { width: 17px; height: 17px; }
@media (max-width: 1180px) { .account-link span { display: none; } .account-link { padding: 0 9px; margin-left: 8px; } }
@media (max-width: 980px) { .site-header .wrap { gap: 12px; } .account-link { margin-left: 0; } }
@media (max-width: 980px) {
  .site-header .nav:not(.nav-legal) { background: #044f76; border-bottom: 1px solid rgba(255, 255, 255, .15); }
  .site-header .nav:not(.nav-legal) a { border-top-color: rgba(255, 255, 255, .12); }
}

/* Kopfband: jeder Abschnitt beginnt mit einem durchgehenden Band im Verlauf der Navigation */
.product .wrap.pad, #preise .wrap.pad { padding-top: 0; }
.sec-head {
  position: relative; z-index: 0;
  border-top: 0; margin: 0 0 56px; padding: 20px 0;
  color: rgba(255, 255, 255, .78);
}
.sec-head::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -100vmax; right: -100vmax; z-index: -1;
  background: linear-gradient(100deg, #032f47 0%, #044f76 55%, #1e6184 100%) fixed;
  border-bottom: 3px solid var(--gold);
}
.sec-head .no { color: var(--gold); font-size: 1rem; }
.sec-head .name { color: #fff; font-size: 1rem; }
.sec-head .meta { color: #fff; }
@media (max-width: 760px) { .sec-head { margin-bottom: 40px; padding: 16px 0; } }

/* Zeitleiste im Abschnitt „Über wedigo its“ */
.since { display: block; list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); border-bottom: 0; }
.since li { display: grid; grid-template-columns: 80px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.contact a.btn-buy { color: var(--ink); text-decoration: none; }

/* ===== Mehrseitige Struktur (2026-10-09) ===== */
.site-header .nav a.active { color: #fff; border-bottom-color: var(--gold); }

/* Produktkacheln mit Logo (Startseite) */
.pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 calc(-1 * var(--gutter)); border-top: 2px solid var(--line-strong); }
.pgrid a { display: flex; flex-direction: column; gap: 10px; padding: 30px var(--gutter) 32px; border-left: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .15s ease; }
.pgrid a:first-child { border-left: 0; }
.pgrid a:hover { background: var(--bg-alt); }
.pgrid img { width: 56px; height: 56px; margin-bottom: 6px; }
.pgrid h3 { margin: 0; font-size: 1.35rem; }
.pgrid p { margin: 0; font-size: .95rem; flex: 1; }
.pgrid .meta { font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--petrol-800); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; display: flex; justify-content: space-between; }

/* Produktkopf */
.phero .wrap { padding-top: 72px; padding-bottom: 88px; }
.lockup { display: flex; align-items: center; gap: 18px; margin-bottom: 32px; }
.lockup img { width: 72px; height: 72px; flex: none; }
.lockup .pname { display: block; font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.lockup .ptag { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.phero .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.phero .grid > * { min-width: 0; }
.phero .grid.solo { grid-template-columns: minmax(0, 820px); }
.phero h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.phero .notice { display: inline-block; margin-top: 28px; padding: 12px 16px; font-size: 1rem; }
.price-line { display: flex; align-items: baseline; gap: 10px; margin-top: 28px; }
.price-line strong { font-size: 2rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.price-line span { color: var(--muted); font-size: .95rem; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 28px; }
.crumbs a { color: var(--muted); }

/* Funktionsraster */
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.fgrid > div { padding: 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.fgrid .ic { width: 30px; height: 30px; color: var(--petrol-800); margin-bottom: 14px; }
.fgrid h3 { font-size: 1.05rem; margin: 0 0 6px; }
.fgrid p { font-size: .95rem; color: var(--muted); margin: 0; }

/* Ablauf */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.steps li { border-top: 3px solid var(--petrol-800); padding-top: 16px; }
.steps .n { display: block; font: 600 .85rem var(--mono); color: var(--gold-text); margin-bottom: 6px; }
.steps h3 { font-size: 1.05rem; margin: 0 0 6px; }
.steps p { font-size: .95rem; color: var(--muted); margin: 0; }

/* Technische Daten */
.spec { display: grid; grid-template-columns: 240px 1fr; margin: 0; border-top: 1px solid var(--line); }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-weight: 600; color: var(--ink); padding-right: 24px; }
.spec code { font: .9em var(--mono); background: var(--bg-alt); padding: 1px 6px; }
.product .grid .spec { grid-template-columns: 150px 1fr; }

/* Lizenzbox */
.license { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); border: 1px solid var(--line); border-top: 4px solid var(--gold); background: #fff; }
.license > div { padding: 32px; }
.license > div + div { border-left: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.license ul { margin: 12px 0 0; padding: 0; list-style: none; }
.license li { padding: 6px 0 6px 22px; position: relative; }
.license li::before { content: ""; position: absolute; left: 0; top: 15px; width: 9px; height: 9px; background: var(--gold); }
.license .big { font-size: 2.4rem; font-weight: 700; color: var(--ink); line-height: 1; }
.license .small { font-size: .88rem; color: var(--muted); }

/* Weiter-Navigation zwischen Produkten */
.next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.next a { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.next a:last-child { border-right: 0; }
.next a:hover { background: var(--bg-alt); }
.next img { width: 40px; height: 40px; }

@media (max-width: 960px) {
  .pgrid { grid-template-columns: 1fr 1fr; }
  .pgrid a:nth-child(3) { border-left: 0; }
  .pgrid a:nth-child(n+3) { border-top: 1px solid var(--line); }
  .phero .grid, .license { grid-template-columns: 1fr; gap: 40px; }
  .license > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .next { grid-template-columns: 1fr; }
  .next a { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .fgrid, .steps, .pgrid { grid-template-columns: 1fr; }
  .pgrid a { border-left: 0 !important; border-top: 1px solid var(--line); }
  .pgrid a:first-child { border-top: 0; }
  .spec, .product .grid .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: 0; }
  .phero .wrap { padding-top: 48px; padding-bottom: 56px; }
}

/* Firmengeschichte (Unternehmensseite, heller Grund) */
.history { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); max-width: 860px; }
.history li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
.history b { color: var(--petrol-800); font-size: 1.15rem; }
.price-table a { color: var(--ink); text-decoration: none; }
.price-table a:hover { text-decoration: underline; }
.price-table .act a.btn { color: var(--ink); text-decoration: none; }
.price-table .act a.btn:hover { color: #fff; }
.product .pgrid { border-top: 0; }

/* ===== Startseite: 3D-Rechenzentrum im Kopfbereich (nur CSS-3D) =====
   Alle Maße in em; die Schriftgröße von .rk-view skaliert mit der Breite (Container Query), so wächst
   die ganze Szene mit. Bühne: Ursprung in der Mitte, x nach rechts, y nach unten, z zum Betrachter.
   Rack A steht bei x -11, Rack B (Standort B) bei x 10 / z -9, der Bildschirm schwebt vorne rechts.
   Zyklus 16 s, je Produkt 4 s: Acmefyer 0–25 %, Spherifyer 25–50 %, i-Tracker 50–75 %, GoDesk 75–100 %.
   Läuft bewusst auch bei reduzierter Bewegung (wie die Szenen bei Acmefyer und i-Tracker, Wunsch 2026-10-12):
   jede animation-Angabe hier trägt !important und schlägt so die globale Regel im Block prefers-reduced-motion.
   Grundzustand ohne Animation = Zusammenfassung: Zertifikat steckt, Datastore 87 %, Bildschirm an, alle Chips hell. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-grid > * { min-width: 0; }
.hero-grid h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
.rk-body { container-type: inline-size; }
.rk-view { position: relative; aspect-ratio: 1 / .8; overflow: hidden; font-size: calc(100cqw / 44); perspective: 110em; perspective-origin: 50% 40%;
  background: radial-gradient(60% 55% at 50% 45%, rgba(30, 97, 132, .45), transparent 70%); }
.rk-stage { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(-30deg); animation: rk-sway 20s ease-in-out infinite alternate !important; }
.rk-stage > * { position: absolute; transform-style: preserve-3d; }
@keyframes rk-sway { from { transform: rotateX(-14deg) rotateY(-36deg); } to { transform: rotateX(-18deg) rotateY(-24deg); } }

.rk-floor { left: -30em; top: -22em; width: 60em; height: 40em; transform: translate3d(0, 13em, -2em) rotateX(90deg);
  background: repeating-linear-gradient(90deg, rgba(127, 182, 224, .14) 0 1px, transparent 1px 3em), repeating-linear-gradient(0deg, rgba(127, 182, 224, .14) 0 1px, transparent 1px 3em);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }

/* Quader: Mittelpunkt im Ursprung des Elements, sichtbar sind Vorder-, rechte und obere Seite */
.rk-box { width: 0; height: 0; transform: translate3d(var(--x), var(--y), var(--z)); }
.rk-box > div { position: absolute; box-sizing: border-box; }
.rk-f { left: calc(var(--w) / -2); top: calc(var(--h) / -2); width: var(--w); height: var(--h); transform: translateZ(calc(var(--d) / 2));
  background: linear-gradient(180deg, #123250, #0b2036); border: .12em solid rgba(255, 255, 255, .22); padding: .9em .8em; display: flex; flex-direction: column; gap: .45em; overflow: hidden; }
.rk-s { left: calc(var(--d) / -2); top: calc(var(--h) / -2); width: var(--d); height: var(--h); transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(180deg, #0a1d31 0 .9em, #0d243b .9em 1em); border: .12em solid rgba(255, 255, 255, .12); }
.rk-t { left: calc(var(--w) / -2); top: calc(var(--d) / -2); width: var(--w); height: var(--d); transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(135deg, #1b4568, #12324f); border: .12em solid rgba(255, 255, 255, .2); }
.rk-a { --x: -11em; --y: 0em; --z: 0em; --w: 15em; --h: 26em; --d: 11em; }
.rk-b { --x: 10em; --y: 4em; --z: -9em; --w: 12em; --h: 18em; --d: 10em; }
.rk-mon { --x: 9.1em; --y: 4.5em; --z: 8.6em; --w: 9em; --h: 5.8em; --d: .5em; transform: translate3d(var(--x), var(--y), var(--z)) rotateY(30deg); }
.rk-mon .rk-f { padding: .3em; background: #0b1c2e; border-color: rgba(255, 255, 255, .35); }
.rk-mon .rk-s, .rk-mon .rk-t { background: #0e2a44; }

/* Einschübe */
.rk-u { flex: none; display: flex; align-items: center; gap: .45em; height: 1.9em; padding: 0 .55em; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); border: .08em solid rgba(255, 255, 255, .1); }
.rk-u span { font: 600 .7em/1 var(--mono); color: rgba(255, 255, 255, .78); white-space: nowrap; margin-right: auto; }
.rk-u img { width: 1.3em; height: 1.3em; }
.rk-u .led { flex: none; width: .45em; height: .45em; background: var(--green); box-shadow: 0 0 .5em var(--green); animation: rk-blink 1.7s steps(1) infinite !important; }
.rk-u:nth-child(2n) .led { animation-duration: 2.3s !important; }
.rk-u:nth-child(3n) .led { animation-duration: 1.1s !important; animation-delay: -.4s !important; }
@keyframes rk-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }
.rk-u.esx { height: 2.3em; }
.rk-u .vent { width: 4.2em; height: 1.1em; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 .12em, transparent .12em .42em); }
.rk-u .ports { display: flex; gap: .22em; }
.rk-u .ports i { width: .5em; height: .5em; background: var(--green); opacity: .9; animation: rk-port 16s linear infinite !important; }
.rk-u .ports i:nth-child(2n) { animation-delay: -.3s !important; }
.rk-u .ports i:nth-child(3n) { animation-delay: -.6s !important; }
@keyframes rk-port { 0%, 51% { background: rgba(255, 255, 255, .22); opacity: .9; } 52%, 74% { background: var(--green); opacity: 1; } 53%, 57%, 61%, 65%, 69% { opacity: .4; } 75%, 100% { background: rgba(255, 255, 255, .22); opacity: .9; } }
.rk-u .slot { width: 2.4em; height: 1em; border: .1em dashed rgba(233, 185, 69, .6); background: var(--gold); box-shadow: 0 0 .8em rgba(233, 185, 69, .6); animation: rk-slot 16s linear infinite !important; }
@keyframes rk-slot { 0%, 16% { background: transparent; box-shadow: none; } 17% { background: #fff; box-shadow: 0 0 1.6em var(--gold); } 20%, 96% { background: var(--gold); box-shadow: 0 0 .8em rgba(233, 185, 69, .6); } 100% { background: transparent; box-shadow: none; } }
.rk-u.ds { height: 4em; flex-wrap: wrap; align-content: center; row-gap: .4em; }
.rk-u.ds span { flex: 1 0 60%; }
.rk-u .fill { order: 3; flex: 1 0 70%; height: .55em; background: rgba(255, 255, 255, .12); }
.rk-u .fill i { display: block; height: 100%; width: 87%; background: var(--gold); animation: rk-fill 16s ease-in-out infinite !important; }
@keyframes rk-fill { 0%, 29% { width: 62%; background: #7fb6e0; } 41%, 93% { width: 87%; background: var(--gold); } 100% { width: 62%; background: #7fb6e0; } }
.rk-u.ds em { order: 4; font: 700 .7em/1 var(--mono); font-style: normal; color: var(--gold); animation: rk-warn 16s linear infinite !important; }
@keyframes rk-warn { 0%, 38% { opacity: 0; } 41%, 52% { opacity: 1; } 55%, 100% { opacity: 0; } }
.rk-scan { position: absolute; left: 0; right: 0; top: 0; height: .3em; background: #9fd0f5; box-shadow: 0 0 1.2em .3em rgba(127, 182, 224, .7); opacity: 0; animation: rk-scan 16s linear infinite !important; }
@keyframes rk-scan { 0%, 26% { top: 1%; opacity: 0; } 27% { top: 1%; opacity: 1; } 40% { top: 97%; opacity: 1; } 42%, 100% { top: 97%; opacity: 0; } }
.rk-site { font: 700 .62em/1 var(--font); letter-spacing: .14em; color: rgba(255, 255, 255, .5); padding: .2em .1em .3em; }

/* i-Tracker: WAN-Leitung von SW01 (rechte Seite Rack A) zu Standort B, Vektor (7,5 | 8 | -8) em, Länge 13,57 em */
.rk-link { left: 0; top: -.08em; width: 13.57em; height: .16em; transform-origin: 0 50%; transform: translate3d(-3.5em, -11.2em, 1em) rotateY(46.8deg) rotateZ(36.1deg);
  background: repeating-linear-gradient(90deg, rgba(47, 191, 113, .9) 0 .5em, transparent .5em .9em); opacity: .25; animation: rk-wan 16s linear infinite !important; }
@keyframes rk-wan { 0%, 50% { opacity: .25; } 52%, 74% { opacity: 1; } 76%, 100% { opacity: .25; } }
.rk-link i { position: absolute; left: 0; top: -.27em; width: .7em; height: .7em; background: #6fe3a5; box-shadow: 0 0 .8em #2fbf71; opacity: 0; animation: rk-pkt 16s linear infinite !important; }
.rk-link i:nth-child(2) { animation-delay: -15.4s !important; }
.rk-link i:nth-child(3) { animation-delay: -14.8s !important; }
@keyframes rk-pkt { 0%, 52% { opacity: 0; transform: translateX(0); } 53% { opacity: 1; transform: translateX(0); } 60% { opacity: 1; transform: translateX(12.9em); } 61% { opacity: 0; transform: translateX(12.9em); }
  62% { opacity: 1; transform: translateX(0); } 69% { opacity: 1; transform: translateX(12.9em); } 70%, 100% { opacity: 0; transform: translateX(12.9em); } }
.rk-read { left: -3.4em; top: -.8em; width: 6.8em; padding: .35em 0; text-align: center; font: 700 .8em/1 var(--mono); color: #07182a; background: #6fe3a5;
  transform: translate3d(12.5em, -9.5em, -11em) rotateY(30deg) rotateX(14deg); animation: rk-read 16s linear infinite !important; }
@keyframes rk-read { 0%, 59% { opacity: 0; } 61%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }

/* Acmefyer: Zertifikat fliegt von der CA in den Steckplatz von WEB01 */
.rk-ca { left: -2.6em; top: -.75em; width: 5.2em; padding: .3em 0; text-align: center; font: 700 .72em/1 var(--mono); color: #7fb6e0; border: .12em solid #7fb6e0; background: rgba(7, 24, 42, .8);
  transform: translate3d(10em, -16em, 1.2em) rotateY(30deg) rotateX(16deg); opacity: 0; animation: rk-ca 16s linear infinite !important; }
@keyframes rk-ca { 0%, 1% { opacity: 0; } 3%, 12% { opacity: 1; } 15%, 100% { opacity: 0; } }
.rk-cert { left: -1.5em; top: -1em; width: 3em; height: 2em; padding: .45em .4em; box-sizing: border-box; background: var(--gold); box-shadow: 0 0 1.2em rgba(233, 185, 69, .7); display: flex; flex-direction: column; gap: .3em; opacity: 0; animation: rk-cert 16s ease-in-out infinite !important; }
.rk-cert i { display: block; height: .18em; background: #07182a; }
.rk-cert i + i { width: 60%; }
@keyframes rk-cert { 0% { opacity: 0; transform: translate3d(10em, -14em, 1.2em) rotateX(50deg) rotateY(80deg); } 3% { opacity: 1; transform: translate3d(10em, -14em, 1.2em) rotateX(50deg) rotateY(80deg); }
  13% { opacity: 1; transform: translate3d(-6.4em, -6.3em, 9em) rotateX(0deg) rotateY(0deg); } 16.5% { opacity: 1; transform: translate3d(-6.4em, -6.3em, 5.7em); } 18%, 100% { opacity: 0; transform: translate3d(-6.4em, -6.3em, 5.7em); } }

/* Bildschirm des Admins: zeigt in jeder Phase das aktive Produkt (.v1–.v4, gleicher Takt wie die Statuszeile),
   bei GoDesk eine Fernsitzung. Grundzustand: nur .v4 sichtbar. */
.rk-mon .scr { position: relative; height: 100%; overflow: hidden; background: #0f2c46; }
.rk-mon .v { position: absolute; inset: 0; padding: .35em .45em; opacity: 0; animation: rk-phase 16s linear infinite !important; }
.rk-mon .v2 { animation-delay: -12s !important; }
.rk-mon .v3 { animation-delay: -8s !important; }
.rk-mon .v4 { opacity: 1; padding: 0; background: linear-gradient(135deg, #1e6184, #0f3d5c); animation-delay: -4s !important; }
.rk-mon p { margin: 0; display: flex; align-items: center; gap: .35em; font: 600 .42em/1 var(--mono); color: rgba(255, 255, 255, .85); white-space: nowrap; }
.rk-mon .hd { font: 700 .5em/1 var(--font); color: #fff; padding-bottom: .5em; margin-bottom: .55em; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.rk-mon .hd img { width: 1.5em; height: 1.5em; }
.rk-mon .hd em { margin-left: auto; font: 700 .9em/1 var(--mono); font-style: normal; color: #6fe3a5; }
.rk-mon .row { margin-top: .75em; }
.rk-mon .row span { width: 5.6em; overflow: hidden; }
.rk-mon .row .gauge { flex: 1; height: .7em; background: rgba(255, 255, 255, .12); }
.rk-mon .row .gauge b { display: block; height: 100%; width: var(--w, 100%); background: #7fb6e0; }
.rk-mon .row em { width: 5.4em; text-align: right; font-style: normal; color: #6fe3a5; }
.rk-mon .v1 .row .gauge b { background: var(--green); }
.rk-mon .v1 .new em { color: var(--gold); }
.rk-mon .v1 .new .gauge b { background: var(--gold); }
.rk-mon .v2 .hot .gauge b { background: var(--gold); }
.rk-mon .v2 .row em { color: rgba(255, 255, 255, .7); }
.rk-mon .v2 .hot em { color: var(--gold); }
.rk-mon .v3 svg { display: block; width: 100%; height: 3.1em; }
.rk-mon .v3 .area { fill: rgba(47, 191, 113, .18); }
.rk-mon .v3 .line { fill: none; stroke: #6fe3a5; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.rk-mon .win { position: absolute; background: rgba(255, 255, 255, .85); border-top: .3em solid #e9b945; }
.rk-mon .w1 { left: .6em; top: .7em; width: 4.4em; height: 2.9em; }
.rk-mon .w2 { left: 3.4em; top: 2.1em; width: 4.4em; height: 2.9em; background: rgba(223, 234, 241, .95); border-top-color: #7fb6e0; }
.rk-mon .e2e { position: absolute; right: .3em; top: .3em; display: flex; align-items: center; gap: .15em; padding: .15em .25em; font: 700 .45em/1 var(--mono); color: #07182a; background: #6fe3a5; }
.rk-mon .e2e svg { width: 1.1em; height: 1.1em; }
.rk-mon .cur { position: absolute; left: 0; top: 0; width: 1em; height: 1em; transform: translate(5em, 2.8em); animation: rk-cur 16s ease-in-out infinite !important; }
@keyframes rk-cur { 0%, 78% { transform: translate(6.8em, 4.2em); } 84% { transform: translate(2em, 1.6em); } 90%, 100% { transform: translate(5em, 2.8em); } }

/* Statuszeile und Produkt-Reiter unter der Szene: weiße Reiter, der aktive gold; .s0 im Grundzustand sichtbar */
.rk-foot { padding: 12px 16px 14px; border-top: 1px solid rgba(255, 255, 255, .12); }
.rk-status { position: relative; height: 1.5em; margin: 0 0 10px; font: 12px/1.5 var(--mono); color: rgba(255, 255, 255, .85); }
.rk-status span { position: absolute; left: 0; top: 0; right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; }
.rk-status .s0 { opacity: 1; animation: rk-hide 16s linear infinite !important; }
@keyframes rk-hide { 0%, 100% { opacity: 0; } }
.rk-status .s1, .rk-status .s2, .rk-status .s3, .rk-status .s4 { animation: rk-phase 16s linear infinite !important; }
.rk-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rk-chips span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 14px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid #fff; white-space: nowrap; overflow: hidden; animation: rk-chip 16s linear infinite !important; }
.rk-chips img { width: 22px; height: 22px; flex: none; }
/* Phase k (1–4) startet bei 4·(k-1) s; die negative Verzögerung (16 - 4·(k-1)) s verschiebt den Zyklus */
.rk-status .s2, .rk-chips .c2 { animation-delay: -12s !important; }
.rk-status .s3, .rk-chips .c3 { animation-delay: -8s !important; }
.rk-status .s4, .rk-chips .c4 { animation-delay: -4s !important; }
@keyframes rk-phase { 0% { opacity: 0; } 2%, 23% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes rk-chip { 0%, 24% { background: var(--gold); border-color: var(--gold); } 26%, 100% { background: #fff; border-color: #fff; } }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) {
  .rk-chips { grid-template-columns: 1fr 1fr; }
  .rk-status { height: 3em; font-size: 11px; }
  .rk-status span { white-space: normal; }
}