/* 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: ein Zertifikat geht an die Dienste (12-s-Zyklus). Das Zertifikat wird erneuert
   (2,5 s), dann läuft je ein Paket über die Leitung zu IIS, Exchange, FortiGate und NGINX und
   der Dienst bekommt das neue Datum, am Ende die Statuszeile. Feste Prozentwerte je Zeile,
   damit alles gemeinsam zurückspringt. Läuft wie die anderen Szenen auch bei reduzierter Bewegung (Wunsch 2026-10-23),
   daher trägt jede animation-Angabe !important. */
.push .pu { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1.15fr); grid-auto-rows: 48px; row-gap: 8px; }
.push .pu-cert { grid-column: 1; grid-row: 1 / span 4; align-self: center; display: grid; gap: 4px; padding: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); animation: pu-cert 12s linear infinite !important; }
.push .pu-k { font: 600 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.push .pu-cert b { font: 600 15px var(--mono); }
.push .pu-ca { font-size: 12px; color: rgba(255, 255, 255, .6); }
.push .pu-exp, .push .pu-st, .push .pu-status { display: grid; }
.push .pu-exp > i, .push .pu-st > i, .push .pu-status > span { grid-area: 1 / 1; font-style: normal; }
.push .pu-exp { margin-top: 6px; font: 12px var(--mono); }
.push .old { color: var(--gold); }
.push .new { color: var(--green); opacity: 0; }
.push .pu-exp .new { animation: pu-renew 12s linear infinite !important; }
.push .pu-exp .old { animation: pu-old 12s linear infinite !important; }
.push .pu-spine { grid-column: 2; grid-row: 1 / span 4; margin: 24px 0; border-left: 2px solid rgba(255, 255, 255, .18); }
.push .pu-row { display: contents; }
.push .pu-ln { grid-column: 2; position: relative; align-self: center; height: 2px; background: rgba(255, 255, 255, .18); }
.push .pu-ln i { position: absolute; top: -4px; left: 0; width: 10px; height: 10px; background: var(--gold); opacity: 0; }
.push .pu-svc { grid-column: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-content: center; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
.push .pu-svc b { font-size: 13px; font-weight: 600; }
.push .pu-svc .h { grid-row: 2; font: 11px var(--mono); color: rgba(255, 255, 255, .5); }
.push .pu-st { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 11.5px var(--mono); text-align: right; }
.push .pu-st .new { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; background: var(--scene); }
.push .pu-st svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.push .r1 .pu-ln, .push .r1 .pu-svc { grid-row: 1; }
.push .r2 .pu-ln, .push .r2 .pu-svc { grid-row: 2; }
.push .r3 .pu-ln, .push .r3 .pu-svc { grid-row: 3; }
.push .r4 .pu-ln, .push .r4 .pu-svc { grid-row: 4; }
.push .r1 .pu-ln i { animation: pu-p1 12s linear infinite !important; }
.push .r2 .pu-ln i { animation: pu-p2 12s linear infinite !important; }
.push .r3 .pu-ln i { animation: pu-p3 12s linear infinite !important; }
.push .r4 .pu-ln i { animation: pu-p4 12s linear infinite !important; }
.push .r1 .pu-st .new { animation: pu-d1 12s linear infinite !important; }
.push .r2 .pu-st .new { animation: pu-d2 12s linear infinite !important; }
.push .r3 .pu-st .new { animation: pu-d3 12s linear infinite !important; }
.push .r4 .pu-st .new { animation: pu-d4 12s linear infinite !important; }
.push .pu-status { margin-top: 16px; padding: 10px 12px; background: rgba(0, 0, 0, .3); font: 12px var(--mono); color: rgba(255, 255, 255, .75); }
.push .pu-status .s1 { animation: pu-s1 12s linear infinite !important; }
.push .pu-status .s2 { opacity: 0; animation: pu-s2 12s linear infinite !important; }
.push .pu-status .s3 { opacity: 0; color: var(--green); animation: pu-s3 12s linear infinite !important; }
@keyframes pu-cert { 0%, 20% { border-color: var(--gold); } 22%, 96% { border-color: var(--green); } 98%, 100% { border-color: var(--gold); } }
@keyframes pu-renew { 0%, 20% { opacity: 0; } 22%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pu-old { 0%, 20% { opacity: 1; } 22%, 96% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes pu-p1 { 0%, 29% { left: 0; opacity: 0; } 30% { left: 0; opacity: 1; } 37% { left: calc(100% - 10px); opacity: 1; } 38%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes pu-p2 { 0%, 40% { left: 0; opacity: 0; } 41% { left: 0; opacity: 1; } 48% { left: calc(100% - 10px); opacity: 1; } 49%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes pu-p3 { 0%, 51% { left: 0; opacity: 0; } 52% { left: 0; opacity: 1; } 59% { left: calc(100% - 10px); opacity: 1; } 60%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes pu-p4 { 0%, 62% { left: 0; opacity: 0; } 63% { left: 0; opacity: 1; } 70% { left: calc(100% - 10px); opacity: 1; } 71%, 100% { left: calc(100% - 10px); opacity: 0; } }
@keyframes pu-d1 { 0%, 37% { opacity: 0; } 38%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pu-d2 { 0%, 48% { opacity: 0; } 49%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pu-d3 { 0%, 59% { opacity: 0; } 60%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pu-d4 { 0%, 70% { opacity: 0; } 71%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pu-s1 { 0%, 21% { opacity: 1; } 23%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes pu-s2 { 0%, 22% { opacity: 0; } 24%, 72% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes pu-s3 { 0%, 73% { opacity: 0; } 75%, 96% { opacity: 1; } 98%, 100% { opacity: 0; } }
@media (max-width: 560px) { .push .pu { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.3fr); } .push .pu-cert { padding: 10px; } .push .pu-cert b { font-size: 13px; } }

/* Spherifyer: eine VM schreibt ihren Datastore voll (12-s-Zyklus). Füllstand, Prozentzahl und
   "voll in" hängen an zwei registrierten Zahlen (--df-pct, --df-days), die animiert werden; der
   Balken wechselt über 80 % auf Gelb, über 90 % auf Rot, dann erscheint die Empfehlung.
   Ohne @property springen die Zahlen nur. Läuft auch bei reduzierter Bewegung (!important). */
@property --df-pct { syntax: "<integer>"; inherits: true; initial-value: 58; }
@property --df-days { syntax: "<integer>"; inherits: true; initial-value: 41; }
.dsf .df-vm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dsf .df-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); font: 600 13px var(--mono); }
.dsf .df-chip svg { width: 16px; height: 16px; fill: none; stroke: #7fb6e0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dsf .df-rate { font-size: 12px; color: rgba(255, 255, 255, .6); }
.dsf .df-drops { position: relative; height: 34px; margin-left: 28px; width: 12px; }
.dsf .df-drops i { position: absolute; left: 0; top: 0; width: 8px; height: 8px; background: #7fb6e0; opacity: 0; animation: df-drop 1.2s linear infinite !important; }
.dsf .df-drops i:nth-child(2) { animation-delay: .4s !important; }
.dsf .df-drops i:nth-child(3) { animation-delay: .8s !important; }
.dsf .df-ds { padding: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); animation: df-num 12s linear infinite !important; }
.dsf .df-hd { display: flex; align-items: center; gap: 10px; }
.dsf .df-hd b { font: 600 15px var(--mono); }
.dsf .df-meta { font-size: 12px; color: rgba(255, 255, 255, .55); }
.dsf .df-pills { margin-left: auto; display: grid; }
.dsf .df-pills i { grid-area: 1 / 1; justify-self: end; font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; padding: 3px 8px; opacity: 0; }
.dsf .df-pills .ok { color: var(--green); background: rgba(47, 191, 113, .14); animation: df-ok 12s linear infinite !important; }
.dsf .df-pills .warn { color: var(--gold); background: rgba(233, 185, 69, .14); animation: df-warn 12s linear infinite !important; }
.dsf .df-pills .crit { color: var(--red); background: rgba(229, 72, 77, .16); animation: df-crit 12s linear infinite !important; }
.dsf .df-track { position: relative; height: 14px; margin-top: 14px; background: rgba(255, 255, 255, .1); }
.dsf .df-fill { display: block; height: 100%; width: calc(var(--df-pct) * 1%); background: #5aa2d6; animation: df-color 12s linear infinite !important; }
.dsf .df-thr { position: absolute; top: -4px; bottom: -4px; border-left: 1px dashed rgba(255, 255, 255, .5); }
.dsf .t80 { left: 80%; } .dsf .t90 { left: 90%; }
.dsf .df-nums { display: flex; justify-content: space-between; margin-top: 10px; font: 12px var(--mono); color: rgba(255, 255, 255, .75); }
.dsf .df-pct::before { counter-reset: dfp var(--df-pct); content: counter(dfp) " %"; font-size: 15px; font-weight: 600; color: #fff; }
.dsf .df-days::before { counter-reset: dfd var(--df-days); content: counter(dfd); }
.dsf .df-alert { margin-top: 14px; padding: 9px 12px; border-left: 3px solid var(--gold); background: rgba(233, 185, 69, .1); font-size: 12px; opacity: 0; animation: df-alert 12s linear infinite !important; }
@keyframes df-drop { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes df-num { 0% { --df-pct: 58; --df-days: 41; } 75% { --df-pct: 90; --df-days: 9; } 85%, 96% { --df-pct: 96; --df-days: 3; } 100% { --df-pct: 58; --df-days: 41; } }
@keyframes df-color { 0%, 51% { background: #5aa2d6; } 52%, 74% { background: var(--gold); } 75%, 97% { background: var(--red); } 100% { background: #5aa2d6; } }
@keyframes df-ok { 0%, 51% { opacity: 1; } 52%, 99% { opacity: 0; } 100% { opacity: 1; } }
@keyframes df-warn { 0%, 51% { opacity: 0; } 52%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes df-crit { 0%, 74% { opacity: 0; } 75%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes df-alert { 0%, 79% { opacity: 0; } 82%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }


/* 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)); } }

/* 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); } }

/* 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%; }
  .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; }
  .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; }
}