{"id":10719,"date":"2026-10-16T11:50:41","date_gmt":"2026-10-16T09:50:41","guid":{"rendered":"https:\/\/www.test.fantana.at\/test\/?page_id=10719"},"modified":"2026-10-21T11:48:15","modified_gmt":"2026-10-21T09:48:15","slug":"st-200-optical-payload","status":"publish","type":"page","link":"https:\/\/www.test.fantana.at\/test\/en\/st-200-optical-payload\/","title":{"rendered":"ST-200"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10719\" class=\"elementor elementor-10719\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4beb801b elementor-section-full_width elementor-section-height-min-height elementor-section-items-stretch elementor-section-height-default\" data-id=\"4beb801b\" data-element_type=\"section\" data-e-type=\"section\" id=\"st-100\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;shape_divider_top&quot;:&quot;tilt&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t<div class=\"elementor-shape elementor-shape-top\" aria-hidden=\"true\" data-negative=\"false\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1000 100\" preserveAspectRatio=\"none\">\n\t<path class=\"elementor-shape-fill\" d=\"M0,6V0h1000v100L0,6z\"\/>\n<\/svg>\t\t<\/div>\n\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5bf94065\" data-id=\"5bf94065\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-373ab5e9 elementor-widget elementor-widget-html\" data-id=\"373ab5e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==============================================================\n     FANTANA \u00b7 ST-200 \u2014 Hero-Textblock\n     Ersetzt \u00dcberschrift + Text im bestehenden Hero.\n     Hintergrund-Slideshow der Sektion bleibt unver\u00e4ndert.\n     --------------------------------------------------------------\n     Einbau: als HTML-Widget in die linke Spalte des Hero-Abschnitts.\n     Die bisherigen Widgets (H1, Textblock, Pricing-Button) dort l\u00f6schen.\n     Sektions-Padding auf 0 \u2014 der Block bringt sein eigenes mit.\n\n     NEU: --fnt-header-h + scroll-padding-top (siehe Block ganz unten).\n     Diese Regeln sind global und wirken auf die ganze Seite, nicht nur\n     auf den Hero. Sobald ihr ein globales Custom-CSS-Feld pflegt,\n     geh\u00f6ren sie eher dorthin \u2014 hier stehen sie, damit der Fix mit\n     diesem einen Widget mitkommt.\n     ============================================================== -->\n\n<div class=\"fnt-hero\">\n  <div class=\"fnt-hero__inner\">\n    <span class=\"fnt-hero__eyebrow\">Optical payload \u00b7 Earth observation<\/span>\n\n    <h1 class=\"fnt-hero__title\">ST-200<\/h1>\n\n    <p class=\"fnt-hero__lead\">\nCompact Ritchey-Chr\u00e9tien-Cassegrain telescopes with athermal design, active focusing and active motion compensation deliver sharp multispectral imagery even during agile platform manoeuvres. Its 45 MP multispectral sensor and active motion compensation deliver 1.5 m GSD imagery for high-resolution missions.\n    <\/p>\n  <\/div>\n  <div class=\"fnt-hero__3d fnt-hero__3d--img\">\n    <img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/ST-200-karte.webp\" alt=\"ST-200 optical payload \u2013 front view\" width=\"1600\" height=\"1200\" fetchpriority=\"high\">\n  <\/div>\n<\/div>\n\n<!-- Englische Fassung f\u00fcr die EN-Sprachversion:\n\n  Eyebrow : Optical Payload \u00b7 Earth Observation\n  Titel   : ST-200\n  Lead    : High-resolution 8U Earth observation payload with a 185 mm telescope.\n            Ritchey-Chr\u00e9tien-Cassegrain optics, multispectral sensing and active\n            motion compensation deliver 1.5 m GSD from a 500 km orbit.\n-->\n\n<style>\n\/* 1. ID-UNABH\u00c4NGIG: Die direkt \u00fcbergeordnete Sektion \/ Container schwarz f\u00e4rben *\/\n.fnt-hero {\n  position: relative;\n  z-index: 2;\n  min-height: 78vh;\n  display: flex;\n  align-items: center;\n  padding: 120px 25px;\n  background: transparent !important;\n}\n\n\/* Findet automatisch die umschlie\u00dfende Sektion oder Container-Spalte und setzt schwarz *\/\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero) {\n  background-color: #04070c !important;\n}\n\n\/* Fallback f\u00fcr \u00e4ltere Browser, falls :has() nicht greift: auch \u00fcber den alten Selektor *\/\n.elementor-element-35dcb4ad {\n  background-color: #04070c !important;\n}\n\n\/* 2. Diashow einblenden *\/\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero) .elementor-background-slideshow,\n.elementor-element-35dcb4ad .elementor-background-slideshow {\n  z-index: 1 !important;\n  opacity: 1 !important;\n}\n\n\/* Lesbarkeits-Schleier hinter dem Text *\/\n.fnt-hero::before {\n  content: \"\";\n  position: absolute; inset: 0;\n  pointer-events: none;\n  background: linear-gradient(100deg,\n              rgba(4,7,12,.86) 0%,\n              rgba(4,7,12,.62) 34%,\n              rgba(4,7,12,.18) 56%,\n              rgba(4,7,12,0)   72%);\n}\n\n.fnt-hero__inner {\n  position: relative;\n  width: 100%;\n  max-width: 1140px;\n  margin-inline: auto;\n}\n\n.fnt-hero__eyebrow {\n  display: block;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 2.2px;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.62);\n  margin-bottom: 22px;\n}\n\n.fnt-hero__title {\n  font-family: \"Azonix\", \"Montserrat\", sans-serif;\n  font-size: clamp(54px, 7.4vw, 96px);\n  font-weight: 400;\n  line-height: .98;\n  letter-spacing: clamp(1.6px, .26vw, 3.4px);\n  text-transform: uppercase;\n  color: #fff;\n  margin: 0;\n  text-shadow: 0 4px 40px rgba(0,0,0,.55);\n}\n\n.fnt-hero__title::after {\n  content: \"\";\n  display: block;\n  width: 72px;\n  height: 4px;\n  background: #2482A4;\n  margin-top: 30px;\n}\n\n.fnt-hero__lead {\n  max-width: 600px;\n  margin: 30px 0 0;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: 19px;\n  font-weight: 600;\n  line-height: 1.62;\n  color: rgba(255,255,255,.86);\n  text-shadow: 0 2px 22px rgba(0,0,0,.7);\n}\n\n\/* Animation *\/\n.fnt-hero__eyebrow,\n.fnt-hero__title,\n.fnt-hero__lead {\n  animation: fntHeroIn .85s cubic-bezier(.22,.9,.3,1) both;\n}\n.fnt-hero__title { animation-delay: .10s; }\n.fnt-hero__lead  { animation-delay: .22s; }\n\n@keyframes fntHeroIn {\n  from { opacity: 0; transform: translateY(16px); }\n  to   { opacity: 1; transform: none; }\n}\n\n\/* Responsive *\/\n@media (max-width: 1024px) {\n  .fnt-hero { min-height: 70vh; padding: 100px 25px; }\n  .fnt-hero__lead { font-size: 18px; }\n}\n\n@media (max-width: 767px) {\n  .fnt-hero {\n    min-height: 76vh;\n    padding: 96px 22px 72px;\n    align-items: flex-end;\n  }\n  .fnt-hero::before {\n    background: linear-gradient(to top,\n                rgba(4,7,12,.90) 0%,\n                rgba(4,7,12,.70) 38%,\n                rgba(4,7,12,.20) 68%,\n                rgba(4,7,12,0)   100%);\n  }\n  .fnt-hero__eyebrow { font-size: 11.5px; letter-spacing: 1.8px; margin-bottom: 16px; }\n  .fnt-hero__title::after { width: 56px; height: 3px; margin-top: 22px; }\n  .fnt-hero__lead { font-size: 16px; line-height: 1.58; margin-top: 22px; }\n\n  \/* Mobil-Fallback: Einzelbild statt Diashow *\/\n  :is(.elementor-section, .e-con, .e-container):has(.fnt-hero) .elementor-background-slideshow,\n  .elementor-element-35dcb4ad .elementor-background-slideshow {\n    display: none !important;\n  }\n  :is(.elementor-section, .e-con, .e-container):has(.fnt-hero),\n  .elementor-element-35dcb4ad {\n    background-image: url(\"\/test\/wp-content\/uploads\/2026\/10\/ST-200-hero-mobil.webp\") !important;\n    background-size: contain !important;\n    background-repeat: no-repeat !important;\n    background-position: center center !important;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .fnt-hero__eyebrow,\n  .fnt-hero__title,\n  .fnt-hero__lead { animation: none; }\n}\n\n\/* Header-Offset *\/\nhtml {\n  --fnt-header-h: 112px;\n  scroll-padding-top: calc(var(--fnt-header-h) + 12px);\n  scroll-behavior: smooth;\n}\n@media (max-width: 1024px) { html { --fnt-header-h: 96px; } }\n@media (max-width: 767px)  { html { --fnt-header-h: 84px; } }\n\nbody.admin-bar { --fnt-adminbar-h: 32px; }\nbody.admin-bar { scroll-padding-top: calc(var(--fnt-header-h) + var(--fnt-adminbar-h) + 12px); }\n@media (max-width: 782px) { body.admin-bar { --fnt-adminbar-h: 46px; } }\n@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }\n\n\/* FNT_SLIDE_FIX \u00b7 Diashow: Bild nie kacheln, im Zoom-out nicht wiederholen *\/\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero) .elementor-background-slideshow__slide__image{\n  background-repeat: no-repeat !important;\n  background-size: contain !important;\n  background-position: center center !important;\n}\n\n\/* FNT_HERO3D \u00b7 drehbares 3D-Modell im Hero (ersetzt die Diashow, solange das Modell da ist) *\/\n.fnt-hero{ position: relative; }\n.fnt-hero__inner{ position: relative; z-index: 2; }\n.fnt-hero__3d{ position: absolute; z-index: 1; top: 50%; right: 0; transform: translateY(-50%); width: clamp(460px, 50vw, 1150px); height: clamp(420px, min(82vh, 48vw), 960px); right: max(0px, calc((100vw - 1760px) \/ 2)); }\n.fnt-hero__3d::before{ content: \"\"; position: absolute; inset: 12% 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(36,130,164,.32), rgba(36,130,164,.08) 60%, transparent); filter: blur(10px); pointer-events: none; }\n.fnt-hero__3d model-viewer{ position: relative; width: 100%; height: 100%; background: transparent; --poster-color: transparent; --progress-bar-color: #2482A4; cursor: grab; }\n.fnt-hero__3d model-viewer:active{ cursor: grabbing; }\n.fnt-hero__3dhint{ position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: rgba(255,255,255,.55); padding: 6px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(6,12,20,.5); pointer-events: none; }\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero__3d) .elementor-background-slideshow{ display: none !important; }\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero__3d){ background-image: none !important; }\n@media (max-width: 1024px){\n  .fnt-hero__3d{ position: relative; top: auto; right: auto; transform: none; width: 100%; height: 420px; margin-top: 8px; }\n}\n@media (max-width: 767px){ .fnt-hero__3d{ height: 320px; } }\n\n\/* FNT_DRAG \u00b7 Modell ueberall greifbar: Textblock laesst Zeiger durch, Modell liegt obenauf *\/\n.fnt-hero__inner, .fnt-hero__inner *{ pointer-events: none; }\n.fnt-hero__inner a, .fnt-hero__inner button{ pointer-events: auto; }\n.fnt-hero__3d{ z-index: 3; }\n:is(.elementor-section, .e-con, .e-container):has(.fnt-hero__3d) .elementor-background-overlay{ pointer-events: none; }\n\n\/* FNT_HEROIMG \u00b7 Frontansicht statt 3D-Modell *\/\n.fnt-hero__3d--img img{ position: relative; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); animation: fntHeroImgIn 1.1s cubic-bezier(.22,.9,.3,1) both .15s; }\n@keyframes fntHeroImgIn{ from{ opacity: 0; transform: translateY(18px) scale(.97); } to{ opacity: 1; transform: none; } }\n@media (prefers-reduced-motion: reduce){ .fnt-hero__3d--img img{ animation: none; } }\n\n\/* FNT_HEROPOS \u00b7 Bild nur in der rechten Haelfte, ueberdeckt den Text nie *\/\n@media (min-width: 1025px){\n  .fnt-hero__3d{ left: 50%; right: max(2vw, calc((100vw - 1760px) \/ 2)); width: auto !important; height: clamp(380px, min(70vh, 40vw), 860px) !important; }\n}\n\/* FNT_HEROFRONT \u00b7 Text bleibt immer vor dem Bild *\/\n.fnt-hero .fnt-hero__3d.fnt-hero__3d--img{z-index:1 !important; pointer-events:none;}\n.fnt-hero .fnt-hero__inner{z-index:2;}\n.fnt-hero .fnt-hero__inner .fnt-hero__title,.fnt-hero .fnt-hero__inner .fnt-hero__lead,.fnt-hero .fnt-hero__inner .fnt-hero__eyebrow{text-shadow:0 2px 14px rgba(4,7,12,.9),0 0 2px rgba(4,7,12,.6);}\n\/* FNT_BGBLACK \u00b7 gleicher Hintergrund wie die \u00fcbrigen Bereiche *\/\nbody .elementor .elementor-element:is(.elementor-section,.e-con,.e-container):has(.fnt-hero__3d):has(.fnt-hero__3d){background-color:#000 !important;}\n\/* FNT_NOSHADE \u00b7 keine zus\u00e4tzliche Abdunkelung, Helligkeit wie \u00fcbrige Bereiche *\/\n.fnt-hero::before{display:none !important;}\n\/* FNT_HEROMOB \u00b7 Tablet & Handy: Text oben, Bild darunter, volle Breite *\/\n@media (max-width:1024px){\n .fnt-hero{flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; min-height:0 !important; padding:64px 32px 44px !important;}\n .fnt-hero .fnt-hero__inner{width:100% !important; max-width:none !important;}\n .fnt-hero .fnt-hero__lead{max-width:640px !important;}\n .fnt-hero .fnt-hero__3d{position:relative !important; left:auto !important; right:auto !important; top:auto !important; transform:none !important; width:100% !important; height:clamp(260px, 50vw, 440px) !important; margin:32px 0 0 !important;}\n .fnt-hero .fnt-hero__3d--img img{width:100% !important; height:100% !important; object-fit:contain !important;}\n}\n@media (max-width:767px){\n .fnt-hero{padding:44px 20px 32px !important;}\n .fnt-hero .fnt-hero__3d{height:clamp(210px, 64vw, 320px) !important; margin-top:22px !important;}\n}\n\/* \/FNT_HEROMOB *\/\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-600571ab elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"600571ab\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2e8faeb7\" data-id=\"2e8faeb7\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-64795cad elementor-widget elementor-widget-html\" data-id=\"64795cad\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ============================================================\n     FANTANA \u2013 Key Features + Technische Daten\n     Dunkle Variante f\u00fcr den Sternenhintergrund\n     Einf\u00fcgen in: Elementor \u2192 Widget \"HTML\"\n\n     VOR DEM LIVE-SCHALTEN PR\u00dcFEN:\n     1) @font-face Azonix   \u2192 richtiger Pfad zur Schriftdatei\n     2) Werte mit [PR\u00dcFEN]  \u2192 im Datenblatt gegenlesen\n     ============================================================ -->\n\n<!-- Montserrat. Entfernen, falls euer Theme sie ohnehin l\u00e4dt. -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n\/* ---- Azonix ------------------------------------------------\n   Variante A (Elementor Pro): Schrift unter\n   Elementor \u2192 Custom Fonts hochladen, dann diesen Block l\u00f6schen.\n   Variante B: Datei nach \/wp-content\/uploads\/fonts\/ laden und\n   den Pfad unten anpassen.\n------------------------------------------------------------- *\/\n\/* Azonix: wird global \u00fcber Elementor Custom Fonts geladen *\/\n\n.fnt-specs{\n  \/* ===== MARKENFARBEN ======================================== *\/\n  --fnt-accent:      #2482a4;                 \/* Fantana Akzent  *\/\n  --fnt-accent-deep: #17566d;                 \/* aktiver Tab     *\/\n  \/* ===== Fl\u00e4chen \u00fcber dem Sternenhintergrund ================= *\/\n  --fnt-fill:        rgba(12, 20, 28, .48);   \/* Grauschleier    *\/\n  --fnt-line:        rgba(255,255,255, .16);  \/* Trennlinien     *\/\n  --fnt-hover:       rgba(255,255,255, .08);\n  \/* ===== Text ================================================ *\/\n  --fnt-white:       #ffffff;\n  --fnt-soft:        rgba(255,255,255, .78);\n  --fnt-faint:       rgba(255,255,255, .62);\n  \/* =========================================================== *\/\n\n  --fnt-radius:   12px;\n  --fnt-display:  'Azonix', 'Montserrat', sans-serif;\n  --fnt-body:     'Montserrat', sans-serif;\n\n  font-family: var(--fnt-body);\n  font-size: 18px;\n  line-height: 1.55;\n  color: var(--fnt-white);\n  max-width: 1140px;\n  margin-inline: auto;\n  padding-inline: clamp(16px, 4vw, 0px);   \/* Luft zum Displayrand *\/\n  box-sizing: border-box;\n  overflow-wrap: break-word;\n}\n.fnt-specs *, .fnt-specs *::before, .fnt-specs *::after{ box-sizing: border-box; }\n\n\/* ---- Abschnittskopf (f\u00fcr beide Bereiche) ---------------- *\/\n.fnt-specs .fnt-specs__head{\n  text-align: center;\n  margin-bottom: 48px;\n}\n\/* Hohe Spezifit\u00e4t + !important: Elementors Kit-CSS\n   (.elementor-kit-xxx h2) w\u00fcrde eine einfache Klasse sonst\n   \u00fcberschreiben. *\/\n.fnt-specs h2.fnt-specs__title{\n  font-family: var(--fnt-display) !important;\n  text-transform: uppercase !important;   \/* Azonix hat keine Kleinbuchstaben *\/\n  \/* skaliert von 30 px auf schmalen Displays bis 64 px Desktop *\/\n  font-size: clamp(1.875rem, 5.5vw, 4rem) !important;\n  line-height: 1.1 !important;\n  hyphens: auto;\n  letter-spacing: .03em !important;\n  font-weight: 400 !important;\n  color: var(--fnt-white) !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.fnt-specs h2.fnt-specs__title::after{\n  content: \"\";\n  display: block;\n  width: clamp(48px, 9vw, 72px);\n  height: 4px;\n  margin: clamp(16px, 2.5vw, 22px) auto 0;\n  background: var(--fnt-accent);\n  border-radius: 2px;\n}\n.fnt-specs .fnt-specs__lead{\n  max-width: 62ch;\n  margin: 24px auto 0 !important;\n  font-size: 1.1875rem !important;\n  line-height: 1.6 !important;\n  color: var(--fnt-soft) !important;\n}\n\n\/* ============================================================\n   KEY FEATURES\n   ============================================================ *\/\n.fnt-kf{\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 14px;\n}\n.fnt-kf__item{\n  position: relative;\n  background: var(--fnt-fill);\n  border: 1px solid var(--fnt-line);\n  border-radius: var(--fnt-radius);\n  padding: 38px 24px 32px;\n  text-align: center;\n  -webkit-backdrop-filter: blur(6px);\n  backdrop-filter: blur(6px);\n  transform-origin: center;\n  transition:\n    transform     .35s cubic-bezier(.2,.7,.3,1),\n    border-color  .35s ease,\n    box-shadow    .35s ease,\n    background    .35s ease;\n}\n\/* Akzentmarke oben an jeder Kennzahl *\/\n.fnt-kf__item::before{\n  content: \"\";\n  position: absolute;\n  top: -1px;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 3px;\n  background: var(--fnt-accent);\n  border-radius: 0 0 2px 2px;\n  transition: width .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;\n}\n\n\/* ---- Hover: reinzoomen + leuchtender Nebelrand ---------- *\/\n@media (hover: hover) and (pointer: fine){\n  .fnt-kf__item:hover,\n  .fnt-kf__item:focus-within{\n    transform: translateY(-6px) scale(1.035);\n    z-index: 2;\n    border-color: rgba(36,130,164, .85);\n    background: rgba(18, 34, 44, .58);\n    box-shadow:\n      0 0 0 1px  rgba(36,130,164, .55),   \/* harte Kante        *\/\n      0 0 22px   rgba(36,130,164, .40),   \/* naher Schein       *\/\n      0 0 60px   rgba(36,130,164, .28),   \/* weiter Nebel       *\/\n      0 0 110px  rgba(36,130,164, .16),   \/* Ausklang           *\/\n      inset 0 0 34px rgba(36,130,164, .14),\n      0 18px 40px rgba(0,0,0, .45);       \/* Abheben vom Grund  *\/\n  }\n  .fnt-kf__item:hover::before,\n  .fnt-kf__item:focus-within::before{\n    width: 72%;\n    box-shadow: 0 0 14px rgba(36,130,164, .9);\n  }\n}\n\n\/* Touch-Ger\u00e4te und reduzierte Bewegung: Gl\u00fchen ja, Zoom nein *\/\n@media (prefers-reduced-motion: reduce){\n  .fnt-kf__item{ transition: border-color .2s ease, box-shadow .2s ease; }\n  .fnt-kf__item:hover,\n  .fnt-kf__item:focus-within{ transform: none; }\n}\n.fnt-specs .fnt-kf__value{\n  display: block;\n  font-family: var(--fnt-display) !important;\n  font-size: clamp(2.25rem, 4.6vw, 3.25rem) !important;\n  line-height: 1.1;\n  letter-spacing: .02em;\n  color: var(--fnt-white);\n}\n.fnt-kf__unit{\n  font-size: .55em;\n  letter-spacing: .06em;\n  margin-left: .25em;\n}\n.fnt-kf__label{\n  display: block;\n  margin-top: 14px;\n  font-size: 1rem;\n  font-weight: 600;\n  letter-spacing: .07em;\n  text-transform: uppercase;\n  color: var(--fnt-soft);\n}\n.fnt-kf__note{\n  display: block;\n  margin-top: 6px;\n  font-size: .9375rem;\n  font-weight: 400;\n  letter-spacing: 0;\n  text-transform: none;\n  color: var(--fnt-faint);\n}\n\n\/* Abstand zwischen den beiden Bereichen. Bewusst kleiner als der\n   Abstand zu den Nachbarabschnitten: Key Features und Technische Daten\n   sind zwei Sichten auf dasselbe Thema, keine getrennten Kapitel. *\/\n.fnt-specs__divide{ height: 120px; }\n\n\/* ============================================================\n   TECHNISCHE DATEN\n   ============================================================ *\/\n.fnt-specs__tabs{\n  display: flex;\n  gap: 6px;\n  padding: 6px;\n  background: var(--fnt-fill);\n  border: 1px solid var(--fnt-line);\n  border-radius: var(--fnt-radius);\n  overflow-x: auto;\n  scrollbar-width: none;\n  scroll-snap-type: x proximity;\n  -webkit-overflow-scrolling: touch;\n  overscroll-behavior-x: contain;\n  -webkit-backdrop-filter: blur(6px);\n  backdrop-filter: blur(6px);\n}\n.fnt-specs__tabs::-webkit-scrollbar{ display: none; }\n\n.fnt-specs__tab{\n  position: relative;\n  flex: 1 1 0;\n  min-width: max-content;\n  padding: 17px 22px;\n  border: 0;\n  border-radius: calc(var(--fnt-radius) - 4px);\n  background: transparent;\n  color: var(--fnt-soft);\n  font-family: var(--fnt-body);\n  font-size: 1rem;\n  font-weight: 600;\n  letter-spacing: .01em;\n  line-height: 1.2;\n  white-space: nowrap;\n  cursor: pointer;\n  scroll-snap-align: center;\n  transition: background-color .18s ease, color .18s ease;\n}\n.fnt-specs__tab:hover{ background: var(--fnt-hover); color: var(--fnt-white); }\n.fnt-specs__tab:focus-visible{ outline: 2px solid var(--fnt-accent); outline-offset: 2px; }\n\n.fnt-specs__tab[aria-selected=\"true\"]{\n  background: var(--fnt-accent-deep);\n  color: var(--fnt-white);\n}\n.fnt-specs__tab[aria-selected=\"true\"]::after{\n  content: \"\";\n  position: absolute;\n  left: 1.3em; right: 1.3em; bottom: .55em;\n  height: 2px;\n  background: var(--fnt-accent);\n}\n\n.fnt-specs__panel{\n  margin-top: 28px;\n  padding: 10px 34px;\n  background: var(--fnt-fill);\n  border: 1px solid var(--fnt-line);\n  border-left: 4px solid var(--fnt-accent);\n  border-radius: var(--fnt-radius);\n  -webkit-backdrop-filter: blur(6px);\n  backdrop-filter: blur(6px);\n}\n.fnt-specs__panel[hidden]{ display: none; }\n\n.fnt-specs__row{\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 40px;\n  padding: 24px 0;\n  border-bottom: 1px solid var(--fnt-line);\n}\n.fnt-specs__row:last-child{ border-bottom: 0; }\n\n.fnt-specs__label{\n  color: var(--fnt-white);\n  font-size: 1.0625rem;\n  font-weight: 700;\n}\n.fnt-specs__value{\n  color: var(--fnt-soft);\n  font-size: 1.0625rem;\n  font-weight: 500;\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.fnt-specs__value ul{ margin: 0; padding: 0; list-style: none; }\n.fnt-specs__value li + li{ margin-top: 6px; }\n\n\/* ============================================================\n   RESPONSIVE\n   ============================================================ *\/\n\n\/* Tablet quer \/ kleine Laptops \u2013 3 Spalten werden eng *\/\n@media (max-width: 1024px){\n  .fnt-kf{ grid-template-columns: repeat(2, 1fr); }\n  .fnt-specs__divide{ height: 96px; }\n}\n\n\/* Tablet hoch und darunter: Tabs scrollen statt zu quetschen *\/\n@media (max-width: 900px){\n  .fnt-specs__tab{\n    flex: 0 0 auto;       \/* nicht mehr gleichm\u00e4\u00dfig strecken *\/\n  }\n}\n\n\/* Smartphone *\/\n@media (max-width: 767px){\n  .fnt-specs{ font-size: 17px; }\n  .fnt-specs .fnt-specs__head{ margin-bottom: 32px; }\n  .fnt-specs .fnt-specs__lead{ font-size: 1.0625rem !important; }\n  .fnt-specs__divide{ height: 72px; }\n\n  .fnt-kf{ gap: 10px; }\n  .fnt-kf__item{ padding: 28px 16px 24px; border-radius: 10px; }\n  .fnt-kf__label{ font-size: .9375rem; letter-spacing: .05em; }\n  .fnt-kf__note{ font-size: .875rem; }\n\n  .fnt-specs__tabs{ padding: 5px; border-radius: 10px; }\n  .fnt-specs__tab{ padding: 14px 18px; font-size: .9375rem; }\n\n  .fnt-specs__panel{\n    padding: 4px 20px;\n    border-radius: 10px;\n    border-left-width: 3px;\n  }\n\n  \/* Label \u00fcber Wert statt nebeneinander *\/\n  .fnt-specs__row{\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 4px;\n    padding: 18px 0;\n  }\n  .fnt-specs__label{ font-size: .9375rem; color: var(--fnt-faint); }\n  .fnt-specs__value{ text-align: left; font-size: 1.0625rem; color: var(--fnt-white); }\n}\n\n\/* Schmale Smartphones: eine Kennzahl pro Zeile *\/\n@media (max-width: 600px){\n  .fnt-kf{ grid-template-columns: 1fr; }\n  .fnt-kf__item{ padding: 24px 16px 22px; }\n}\n\n\/* Sehr schmale Ger\u00e4te *\/\n@media (max-width: 380px){\n  .fnt-specs__panel{ padding: 4px 16px; }\n  .fnt-specs__tab{ padding: 13px 15px; }\n}\n\n@media (prefers-reduced-motion: reduce){\n  .fnt-specs__tab{ transition: none; }\n}\n\n\/* MOBIL: Die Reiterleiste scrollt horizontal (scrollWidth 582 bei 286 px\n   sichtbar). \"Mechanik\" und \"Energie & Umwelt\" waren damit unerreichbar,\n   ohne dass etwas darauf hinweist. Zwei Reihen zu je zwei Reitern zeigen\n   alle Kategorien auf einmal. *\/\n@media (max-width: 767px){\n  \/* Zwei Kacheln nebeneinander statt einer pro Zeile, dazu kleinere\n     Zahl und Innenabstaende \u2014 die Kacheln waren 288x153 px und haben\n     den halben Bildschirm pro Kennzahl belegt. *\/\n  .fnt-kf{ grid-template-columns: 1fr 1fr !important; gap: 8px !important; }\n  .fnt-kf__item{ padding: 12px 8px 10px !important; }\n  .fnt-kf__value{ font-size: 22px !important; line-height: 1.05 !important; }\n  .fnt-kf__label{ font-size: 11px !important; line-height: 1.25 !important; letter-spacing: .04em !important; }\n  .fnt-kf__item::before{ width: 26px !important; }\n\n  .fnt-specs__tabs{\n    flex-wrap: wrap;\n    overflow-x: visible;\n    gap: 8px;\n  }\n  .fnt-specs__tab{\n    flex: 1 1 calc(50% - 8px);\n    min-width: 0;\n    text-align: center;\n    white-space: normal;\n    font-size: 14px;\n    padding: 12px 8px;\n  }\n}\n\n\/* ===== FNT_FEATS \u00b7 Features-Tab, Mehrfachwerte, Fussnote ===== *\/\n.fnt-specs .fnt-specs__multi{ display: flex; flex-direction: column; gap: 6px; }\n.fnt-specs .fnt-specs__multi > span{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }\n.fnt-specs .fnt-specs__multi b{ font-weight: 600; color: #fff; min-width: 7.5em; }\n.fnt-specs .fnt-specs__multi em{ font-style: normal; font-size: .875em; color: rgba(255,255,255,.58); }\n.fnt-specs .fnt-specs__tab--features{ color: #fff; }\n.fnt-specs .fnt-specs__tab--features::after{ content: \"\"; display: inline-block; width: 7px; height: 7px; margin-left: 9px; vertical-align: middle; border-radius: 50%; background: #4fb3d6; box-shadow: 0 0 10px #4fb3d6; }\n.fnt-specs .fnt-specs__panel--features{ padding: clamp(14px, 2vw, 22px) !important; }\n.fnt-specs .fnt-feats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }\n.fnt-specs .fnt-feat{ position: relative; padding: 26px 22px 22px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }\n.fnt-specs .fnt-feat:hover{ border-color: rgba(36,130,164,.75); box-shadow: 0 0 26px rgba(36,130,164,.22); transform: translateY(-3px); }\n.fnt-specs .fnt-feat.is-key{ border-color: rgba(36,130,164,.55); background: linear-gradient(160deg, rgba(36,130,164,.22), rgba(36,130,164,.04) 60%); }\n.fnt-specs .fnt-feat__icon{ display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; background: rgba(36,130,164,.18); border: 1px solid rgba(36,130,164,.5); margin-bottom: 16px; }\n.fnt-specs .fnt-feat__icon svg{ width: 22px; height: 22px; fill: none; stroke: #4fb3d6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }\n.fnt-specs .fnt-feat__title{ margin: 0 0 8px !important; font-family: 'Montserrat', sans-serif !important; font-size: 1.0625rem !important; font-weight: 700 !important; letter-spacing: .01em; color: #fff !important; text-transform: none !important; line-height: 1.3 !important; }\n.fnt-specs .fnt-feat__text{ margin: 0 !important; font-size: .9375rem !important; line-height: 1.55 !important; color: rgba(255,255,255,.72) !important; }\n.fnt-specs .fnt-specs__foot{ margin: 14px 4px 0 !important; font-size: .875rem !important; color: rgba(255,255,255,.5) !important; }\n@media (max-width: 767px){ .fnt-specs .fnt-feats{ grid-template-columns: 1fr; } .fnt-specs .fnt-specs__multi b{ min-width: 0; } }\n\n\/* FNT_FEATS2 *\/\n.fnt-specs .fnt-feats{ grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.fnt-specs .fnt-feats > .fnt-feat:not(.is-wide):last-child{ grid-column: 1 \/ -1; }\n.fnt-specs .fnt-feat.is-wide{ grid-column: 1 \/ -1; display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: center; padding: 24px 26px; background: linear-gradient(110deg, rgba(36,130,164,.38), rgba(36,130,164,.08) 70%); border-color: rgba(79,179,214,.7); }\n.fnt-specs .fnt-feat.is-wide .fnt-feat__icon{ grid-row: span 2; margin: 0; width: 56px; height: 56px; }\n.fnt-specs .fnt-feat.is-wide .fnt-feat__icon svg{ width: 28px; height: 28px; }\n.fnt-specs .fnt-feat.is-wide .fnt-feat__title{ font-family: 'Azonix', 'Montserrat', sans-serif !important; font-size: 1.5rem !important; font-weight: 400 !important; letter-spacing: .04em; }\n.fnt-specs .fnt-feat__badge{ display: block; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #4fb3d6; margin-bottom: 6px; }\n.fnt-specs .fnt-specs__tab--features::after{ position: absolute; top: 12px; right: 14px; margin: 0; }\n@media (max-width: 1024px){ .fnt-specs .fnt-feats{ grid-template-columns: repeat(2, 1fr); } .fnt-specs .fnt-feats > .fnt-feat:not(.is-wide):last-child{ grid-column: 1 \/ -1; } }\n@media (max-width: 767px){ .fnt-specs .fnt-feats{ grid-template-columns: 1fr; } .fnt-specs .fnt-feat.is-wide{ grid-template-columns: 1fr; } .fnt-specs .fnt-feat.is-wide .fnt-feat__icon{ grid-row: auto; margin-bottom: 14px; } }\n\/* FNT_ALIGN \u00b7 Werte in allen Reitern b\u00fcndig an derselben Stelle *\/\n@media (min-width:768px){\n .fnt-specs .fnt-specs__panel:not(.fnt-specs__panel--features) .fnt-specs__row{display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:24px 40px; justify-content:stretch;}\n .fnt-specs .fnt-specs__panel:not(.fnt-specs__panel--features) .fnt-specs__value{text-align:left; justify-self:start;}\n .fnt-specs .fnt-specs__multi > span{display:grid; grid-template-columns:6.2em auto; gap:12px; align-items:baseline;}\n}\n<\/style>\n\n<div class=\"fnt-specs\">\n\n  <!-- ==================== KEY FEATURES ==================== -->\n  <div class=\"fnt-specs__head\" id=\"key-features\">\n    <h2 class=\"fnt-specs__title\">At a glance<\/h2>\n    <p class=\"fnt-specs__lead\">High-resolution Earth observation telescope in an 8U form factor \u2013 VLEO ready, multispectral, athermal and with active motion compensation.<\/p>\n  <\/div>\n\n  <style>.fnt-kf__dual{display:inline-flex;align-items:baseline;gap:.2em;white-space:nowrap;font-size:.62em}.fnt-kf__dual i{font-style:normal;opacity:.35;margin:0 .15em}<\/style>\n  <div class=\"fnt-kf\">\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\">1.5<span class=\"fnt-kf__unit\">m<\/span><\/span>\n      <span class=\"fnt-kf__label\">GSD<span class=\"fnt-kf__note\">Ground Sampling Distance \u00b7 at 500 km altitude<\/span><\/span>\n    <\/div>\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\">11.9<span class=\"fnt-kf__unit\">km<\/span><\/span>\n      <span class=\"fnt-kf__label\">Swath width<span class=\"fnt-kf__note\">at 500 km altitude<\/span><\/span>\n    <\/div>\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\">5+<\/span>\n      <span class=\"fnt-kf__label\">Spectral channels<span class=\"fnt-kf__note\">450 to 900 nm<\/span><\/span>\n    <\/div>\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\"><span class=\"fnt-kf__dual\">45<span class=\"fnt-kf__unit\">MP<\/span><i>\/<\/i>67*<span class=\"fnt-kf__unit\">MP<\/span><\/span><\/span>\n      <span class=\"fnt-kf__label\">Sensor<span class=\"fnt-kf__note\">Standard: 8192 \u00d7 5460 pixels<br>* Optional: 8192 \u00d7 8192 pixels<\/span><\/span>\n    <\/div>\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\">8U<\/span>\n      <span class=\"fnt-kf__label\">Dimensions<span class=\"fnt-kf__note\">220.3 \u00d7 220.3 \u00d7 313 mm \u00b7 excl. sensor &amp; electronics<\/span><\/span>\n    <\/div>\n    <div class=\"fnt-kf__item\">\n      <span class=\"fnt-kf__value\">4503<span class=\"fnt-kf__unit\">g<\/span><\/span>\n      <span class=\"fnt-kf__label\">Mass<span class=\"fnt-kf__note\">Telescope payload, 8U<\/span><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"fnt-specs__divide\"><\/div>\n\n  <!-- ================== TECHNISCHE DATEN ================== -->\n  <div class=\"fnt-specs__head\" id=\"technische-daten\">\n    <h2 class=\"fnt-specs__title\">Specifications<\/h2>\n    <p class=\"fnt-specs__lead\">Full specification of the optical payload system.<\/p>\n  <\/div>\n\n  <div class=\"fnt-specs__tabs\" role=\"tablist\" aria-label=\"Specifications\">\n    <button class=\"fnt-specs__tab\" role=\"tab\" id=\"fnt-t1\" aria-controls=\"fnt-p1\" aria-selected=\"true\">Optics<\/button>\n    <button class=\"fnt-specs__tab\" role=\"tab\" id=\"fnt-t2\" aria-controls=\"fnt-p2\" aria-selected=\"false\" tabindex=\"-1\">Imaging<\/button>\n    <button class=\"fnt-specs__tab\" role=\"tab\" id=\"fnt-t3\" aria-controls=\"fnt-p3\" aria-selected=\"false\" tabindex=\"-1\">Mechanical &amp; environment<\/button>\n    <button class=\"fnt-specs__tab fnt-specs__tab--features\" role=\"tab\" id=\"fnt-t4\" aria-controls=\"fnt-p4\" aria-selected=\"false\" tabindex=\"-1\">Features<\/button>\n  <\/div>\n\n  <div class=\"fnt-specs__panel\" role=\"tabpanel\" id=\"fnt-p1\" aria-labelledby=\"fnt-t1\" tabindex=\"0\">\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Optical design<\/span>\n      <span class=\"fnt-specs__value\">Ritchey-Chr&eacute;tien-Cassegrain<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Aperture<\/span>\n      <span class=\"fnt-specs__value\">185 mm<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Focal length<\/span>\n      <span class=\"fnt-specs__value\">1100 mm &middot; F\/5.9<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Field of view (FOV)<\/span>\n      <span class=\"fnt-specs__value\">1.4&deg;<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Spectral range<\/span>\n      <span class=\"fnt-specs__value\">450 to 900 nm*<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Spectral channels<\/span>\n      <span class=\"fnt-specs__value\">5+<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Sensor<\/span>\n      <span class=\"fnt-specs__value\">45 MP (8192 &times; 5460) | 67 MP (8192 &times; 8192)*<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"fnt-specs__panel\" role=\"tabpanel\" id=\"fnt-p2\" aria-labelledby=\"fnt-t2\" tabindex=\"0\" hidden>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">GSD (Ground Sampling Distance)<\/span>\n      <span class=\"fnt-specs__value\"><span class=\"fnt-specs__multi\"><span><b>0.9 m<\/b><em>@ 300 km<\/em><\/span><span><b>1.5 m<\/b><em>@ 500 km<\/em><\/span><\/span><\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Swath width<\/span>\n      <span class=\"fnt-specs__value\"><span class=\"fnt-specs__multi\"><span><b>7.1 km<\/b><em>@ 300 km<\/em><\/span><span><b>11.9 km<\/b><em>@ 500 km<\/em><\/span><span><b>20 km<\/b><em>@ 500 km, wide-area scan*<\/em><\/span><\/span><\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"fnt-specs__panel\" role=\"tabpanel\" id=\"fnt-p3\" aria-labelledby=\"fnt-t3\" tabindex=\"0\" hidden>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Mechanical design<\/span>\n      <span class=\"fnt-specs__value\">Athermal design<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Temperature range<\/span>\n      <span class=\"fnt-specs__value\"><span class=\"fnt-specs__multi\"><span><b>\u221230 to +60 \u00b0C<\/b><em>operational<\/em><\/span><span><b>\u221250 to +70 \u00b0C<\/b><em>survival<\/em><\/span><\/span><\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Power consumption<\/span>\n      <span class=\"fnt-specs__value\"><span class=\"fnt-specs__multi\"><span><b>0.36 W<\/b><em>Idle<\/em><\/span><span><b>4.69 W<\/b><em>Processing<\/em><\/span><span><b>9.97 W<\/b><em>Imaging<\/em><\/span><\/span><\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Mass<\/span>\n      <span class=\"fnt-specs__value\">4503 g<\/span>\n    <\/div>\n    <div class=\"fnt-specs__row\">\n      <span class=\"fnt-specs__label\">Envelope<\/span>\n      <span class=\"fnt-specs__value\">8U: 220.3 \u00d7 220.3 \u00d7 313 mm, excl. sensor &amp; electronics<\/span>\n    <\/div>\n  <\/div>\n\n  <div class=\"fnt-specs__panel fnt-specs__panel--features\" role=\"tabpanel\" id=\"fnt-p4\" aria-labelledby=\"fnt-t4\" tabindex=\"0\" hidden>\n    <style>.fnt-specs .fnt-feat,.fnt-specs .fnt-feat.is-key,.fnt-specs .fnt-feat.is-wide{background:linear-gradient(160deg,rgba(36,130,164,.22),rgba(36,130,164,.04) 60%)!important;border-color:rgba(36,130,164,.55)!important;transition:none!important}.fnt-specs .fnt-feat:hover{transform:none!important;box-shadow:none!important;border-color:rgba(36,130,164,.55)!important}<\/style>\n    <div class=\"fnt-feats\">\n    <div class=\"fnt-feat is-key is-wide\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"2.5\"\/><ellipse cx=\"12\" cy=\"12\" rx=\"10\" ry=\"4.5\"\/><path d=\"M12 2.5v2M12 19.5v2\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\"><span class=\"fnt-feat__badge\">Special Feature<\/span>VLEO ready<\/h3>\n      <p class=\"fnt-feat__text\">Also designed for operation in very low Earth orbit (VLEO) \u2013 altitudes from 300 to 700 km. The lower the orbit, the finer the GSD \u2013 with the same optics.<\/p>\n    <\/div>\n    <div class=\"fnt-feat is-key\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M3 12h13m0 0l-4-4m4 4l-4 4\"\/><path d=\"M20 5v14\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\">Forward Motion Compensation*<\/h3>\n      <p class=\"fnt-feat__text\">Active motion compensation along the flight direction: longer exposure times and sharp images despite a ground speed of around 7 km\/s.<\/p>\n    <\/div>\n    <div class=\"fnt-feat\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"3.5\"\/><path d=\"M12 2v4M12 18v4M2 12h4M18 12h4\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\">Active Focuser*<\/h3>\n      <p class=\"fnt-feat__text\">Active focusing keeps the optics in focus across the entire temperature range.<\/p>\n    <\/div>\n    <div class=\"fnt-feat is-key\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M4 4h16v16H4z\"\/><path d=\"M4 9h16M4 14h16M9 4v16\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\">Wide-Area Scan*<\/h3>\n      <p class=\"fnt-feat__text\">Roll oscillation, pitch backscan and 2D motion compensation extend coverage to up to 128 \u00d7 128 km\u00b2 per scene \u2013 at full resolution, on a 16U CubeSat with standard attitude control.<\/p>\n    <\/div>\n    <div class=\"fnt-feat is-key\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 12a8 8 0 1 1-2.34-5.66\"\/><path d=\"M20 4v5h-5\"\/><circle cx=\"12\" cy=\"12\" r=\"2.5\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\">Agile Imaging*<\/h3>\n      <p class=\"fnt-feat__text\">The camera keeps imaging while the satellite changes its attitude: as it rolls sideways and re-points to a new target, the images stay sharp. Targets away from the ground track can thus be captured one after another in a single pass \u2013 without the satellite having to hold still for each image.<\/p>\n    <\/div>\n    <div class=\"fnt-feat\">\n      <span class=\"fnt-feat__icon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"\/><path d=\"M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4\"\/><\/svg><\/span>\n      <h3 class=\"fnt-feat__title\">AI Onboard Image Processing*<\/h3>\n      <p class=\"fnt-feat__text\">AI-based image processing on board improves SNR and resolution and reduces the amount of data to be downlinked.<\/p>\n    <\/div>\n    <\/div>\n  <\/div>\n  <p class=\"fnt-specs__foot\">* Optional \u2013 features and other options, such as SWIR or LWIR, on request.<\/p>\n\n<\/div>\n\n<script>\n(function () {\n  document.querySelectorAll('.fnt-specs').forEach(function (root) {\n    var tabs = Array.prototype.slice.call(root.querySelectorAll('[role=\"tab\"]'));\n\n    function activate(tab, setFocus) {\n      tabs.forEach(function (t) {\n        var selected = t === tab;\n        t.setAttribute('aria-selected', selected ? 'true' : 'false');\n        t.tabIndex = selected ? 0 : -1;\n        root.querySelector('#' + t.getAttribute('aria-controls')).hidden = !selected;\n      });\n      if (setFocus) tab.focus();\n      tab.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n    }\n\n    tabs.forEach(function (tab, i) {\n      tab.addEventListener('click', function () { activate(tab); });\n      tab.addEventListener('keydown', function (e) {\n        var next = null;\n        if (e.key === 'ArrowRight') next = tabs[(i + 1) % tabs.length];\n        if (e.key === 'ArrowLeft')  next = tabs[(i - 1 + tabs.length) % tabs.length];\n        if (e.key === 'Home')       next = tabs[0];\n        if (e.key === 'End')        next = tabs[tabs.length - 1];\n        if (next) { e.preventDefault(); activate(next, true); }\n      });\n    });\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cdbc4a6 elementor-widget elementor-widget-html\" data-id=\"cdbc4a6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- FANTANA \u00b7 ST-200 \u2014 Ansichten (Renderings, Lightbox) -->\n<div class=\"fnt-gal\" id=\"ansichten\">\n  <div class=\"fnt-gal__head\">\n    <h2 class=\"fnt-gal__title\">Views<\/h2>\n    <p class=\"fnt-gal__lead\">The ST-200 in detail \u2013 carbon tube with tangential spider, primary mirror mount and integration into the 8U structure.<\/p>\n  <\/div>\n  <div class=\"fnt-gal__grid\">\n    <button class=\"fnt-gal__tile\" type=\"button\" data-i=\"0\" aria-label=\"Enlarge front view\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/ST-200-ansicht-1.webp\" alt=\"ST-200 \u2013 front view\" loading=\"lazy\" width=\"1600\" height=\"1200\"><span>Front view<\/span><\/button>\n    <button class=\"fnt-gal__tile\" type=\"button\" data-i=\"1\" aria-label=\"Enlarge rear view\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/ST-200-ansicht-2.webp\" alt=\"ST-200 \u2013 rear\" loading=\"lazy\" width=\"1600\" height=\"1200\"><span>Rear<\/span><\/button>\n    <button class=\"fnt-gal__tile\" type=\"button\" data-i=\"2\" aria-label=\"Enlarge view in 8U structure\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/ST-200-ansicht-3.webp\" alt=\"ST-200 \u2013 in 8U structure\" loading=\"lazy\" width=\"1600\" height=\"1200\"><span>In 8U structure<\/span><\/button>\n    <button class=\"fnt-gal__tile\" type=\"button\" data-i=\"3\" aria-label=\"Enlarge 8U structure rear view\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/ST-200-ansicht-4.webp\" alt=\"ST-200 \u2013 8U structure, rear\" loading=\"lazy\" width=\"1600\" height=\"1200\"><span>8U structure, rear<\/span><\/button>\n  <\/div>\n  <div class=\"fnt-gal__box\" hidden role=\"dialog\" aria-modal=\"true\" aria-label=\"ST-200 view\">\n    <button class=\"fnt-gal__x\" type=\"button\" aria-label=\"Close\">&times;<\/button>\n    <button class=\"fnt-gal__nav fnt-gal__prev\" type=\"button\" aria-label=\"Previous view\">&#8249;<\/button>\n    <figure><img alt=\"\"><figcaption><\/figcaption><\/figure>\n    <button class=\"fnt-gal__nav fnt-gal__next\" type=\"button\" aria-label=\"Next view\">&#8250;<\/button>\n  <\/div>\n<\/div>\n<style>\n.fnt-gal{ max-width: 1200px; margin: 0 auto; padding: clamp(56px,7vw,96px) 0 clamp(24px,3vw,40px); color: #fff; font-family: 'Montserrat', sans-serif; }\n.fnt-gal .fnt-gal__head{ text-align: center; max-width: 760px; margin: 0 auto clamp(28px,4vw,48px); }\n.fnt-gal .fnt-gal__title{ font-family: 'Azonix','Montserrat',sans-serif !important; font-size: clamp(30px,4.4vw,56px) !important; line-height: 1.1 !important; text-transform: uppercase; letter-spacing: .02em; color: #fff !important; margin: 0 !important; }\n.fnt-gal .fnt-gal__title::after{ content: \"\"; display: block; width: 56px; height: 3px; margin: 22px auto 0; background: #2482A4; border-radius: 2px; }\n.fnt-gal .fnt-gal__lead{ margin: 22px 0 0 !important; font-size: clamp(16px,1.25vw,18px) !important; line-height: 1.6 !important; color: rgba(255,255,255,.75) !important; }\n.fnt-gal .fnt-gal__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }\n.fnt-gal .fnt-gal__tile{ position: relative; display: block; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; cursor: zoom-in; aspect-ratio: 4\/3; background: radial-gradient(ellipse 60% 60% at 50% 55%, rgba(36,130,164,.28), rgba(12,20,28,.5) 70%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease; }\n.fnt-gal .fnt-gal__tile:hover, .fnt-gal .fnt-gal__tile:focus-visible{ transform: translateY(-4px); border-color: rgba(36,130,164,.75); box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 30px rgba(36,130,164,.25); outline: none; }\n.fnt-gal .fnt-gal__tile img{ width: 100% !important; height: 100% !important; object-fit: contain; padding: 6%; transition: transform .5s cubic-bezier(.2,.7,.3,1); filter: drop-shadow(0 14px 22px rgba(0,0,0,.5)); }\n.fnt-gal .fnt-gal__tile:hover img{ transform: scale(1.06); }\n.fnt-gal .fnt-gal__tile span{ position: absolute; left: 12px; bottom: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: rgba(255,255,255,.8); }\n.fnt-gal__box{ position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(3,6,10,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }\n.fnt-gal__box[hidden]{ display: none; }\n.fnt-gal__box figure{ margin: 0; max-width: min(92vw, 1400px); text-align: center; }\n.fnt-gal__box img{ max-width: 100%; max-height: 80vh; object-fit: contain; }\n.fnt-gal__box figcaption{ margin-top: 12px; font-size: 13px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,255,255,.7); }\n.fnt-gal__x, .fnt-gal__nav{ position: absolute; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); color: #fff; border-radius: 999px; width: 48px; height: 48px; font-size: 28px; line-height: 1; cursor: pointer; padding: 0; }\n.fnt-gal__x{ top: 22px; right: 22px; }\n.fnt-gal__prev{ left: 22px; } .fnt-gal__next{ right: 22px; }\n.fnt-gal__x:hover, .fnt-gal__nav:hover{ background: #2482A4; border-color: #2482A4; }\n@media (max-width: 1024px){ .fnt-gal .fnt-gal__grid{ grid-template-columns: repeat(2, 1fr); } }\n@media (max-width: 767px){ .fnt-gal .fnt-gal__grid{ gap: 10px; } .fnt-gal__prev{ left: 8px; } .fnt-gal__next{ right: 8px; } }\n\/* FNT_GALMOB \u00b7 Handy: Beschriftung unter dem Bild statt dar\u00fcber *\/\n@media (max-width:767px){\n .fnt-gal .fnt-gal__tile{aspect-ratio:auto !important; display:flex !important; flex-direction:column !important;}\n .fnt-gal .fnt-gal__tile img{aspect-ratio:4\/3; height:auto !important; width:100% !important; padding:6% !important;}\n .fnt-gal .fnt-gal__tile span{position:static !important; display:block !important; padding:0 8px 10px !important; text-align:center !important; transform:none !important;}\n}\n<\/style>\n<script>\n(function () {\n  document.querySelectorAll('.fnt-gal').forEach(function (g) {\n    if (g.dataset.ready) return; g.dataset.ready = '1';\n    var tiles = [].slice.call(g.querySelectorAll('.fnt-gal__tile'));\n    var box = g.querySelector('.fnt-gal__box'), img = box.querySelector('img'), cap = box.querySelector('figcaption'), cur = 0;\n    document.querySelectorAll('body > .fnt-gal__box').forEach(function (b) { b.remove(); });\n    document.body.appendChild(box);\n    function show(i) { cur = (i + tiles.length) % tiles.length; var t = tiles[cur].querySelector('img'); img.src = t.src; img.alt = t.alt; cap.textContent = tiles[cur].querySelector('span').textContent; }\n    function open(i) { show(i); box.hidden = false; document.documentElement.style.overflow = 'hidden'; box.querySelector('.fnt-gal__x').focus({ preventScroll: true }); }\n    function close() { box.hidden = true; document.documentElement.style.overflow = ''; tiles[cur].focus({ preventScroll: true }); }\n    tiles.forEach(function (t, i) { t.addEventListener('click', function () { open(i); }); });\n    box.querySelector('.fnt-gal__x').addEventListener('click', close);\n    box.querySelector('.fnt-gal__prev').addEventListener('click', function () { show(cur - 1); });\n    box.querySelector('.fnt-gal__next').addEventListener('click', function () { show(cur + 1); });\n    box.addEventListener('click', function (e) { if (e.target === box) close(); });\n    document.addEventListener('keydown', function (e) { if (box.hidden) return; if (e.key === 'Escape') close(); if (e.key === 'ArrowLeft') show(cur - 1); if (e.key === 'ArrowRight') show(cur + 1); });\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-492488e8 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"492488e8\" data-element_type=\"widget\" data-e-type=\"widget\" id=\"aufnahmeprinzip\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==============================================================\n     FANTANA \u00b7 Abschnittstitel \u00fcber der Motion-Compensation-Animation\n     --------------------------------------------------------------\n     Einbau:\n     1. Die bestehende Elementor-\u00dcberschrift l\u00f6schen.\n     2. Dieses HTML-Widget an ihre Stelle setzen, direkt \u00fcber\n        dem Animations-Widget.\n     3. Widget-Abstand nach unten auf 0 \u2014 der Block bringt\n        sein eigenes Padding mit.\n\n     Der Titel enth\u00e4lt bewusst weder Umlaut noch \u00df: Azonix hat\n     kein \u00c4\/\u00d6\/\u00dc, und ein \u00df w\u00fcrde von text-transform zu SS \u2014\n     was in Versalien zwar korrekt ist, aber leicht \u00fcbersehen wird.\n\n     Alle Gr\u00f6\u00dfen sind 1:1 aus .fnt-specs__title \u00fcbernommen\n     (\"Key Features\" \/ \"Technische Daten\"), damit die drei\n     Abschnitte auf der Seite gleichrangig wirken:\n       Titel   clamp(1.875rem, 5.5vw, 4rem)\n       Balken  clamp(48px, 9vw, 72px) \u00d7 4px\n       Lead    1.1875rem\n     \u00c4ndert ihr dort etwas, hier mitziehen.\n     ============================================================== -->\n\n<div class=\"fnt-sechead\">\n  <h2 class=\"fnt-sechead__title\">The imaging principle<\/h2>\n<\/div>\n\n<style>\n\/* ---- FANTANA \u00b7 Abschnittstitel ------------------------------------------\n   Akzent #2482A4 \u00b7 Display-Font Azonix \u00b7 Text-Font Montserrat\n\n   Hohe Spezifit\u00e4t + !important, weil Elementors Kit-CSS Regeln der Form\n   .elementor-kit-xxx h2 { font-size: \u2026 } mitbringt. Zwei Selektorstufen\n   schlagen eine einzelne Klasse, egal wie weit unten dieses CSS steht. *\/\n\n.fnt-sechead{\n  text-align: center;\n  max-width: 1140px;\n  margin-inline: auto;\n  \/* Der obere Wert trennt das Aufnahmeprinzip von den Technischen Daten.\n     Elementors Standardabstand von 20px reicht dort nicht: es sind zwei\n     eigenstaendige Themen, keine Fortsetzung. Skaliert mit der Breite. *\/\n  padding: clamp(72px, 11vw, 152px) 25px 48px;\n  box-sizing: border-box;\n}\n\n.fnt-sechead h2.fnt-sechead__title{\n  font-family: 'Azonix', 'Montserrat', sans-serif !important;\n  text-transform: uppercase !important;   \/* Azonix hat keine Kleinbuchstaben *\/\n  font-size: clamp(1.875rem, 5.5vw, 4rem) !important;\n  line-height: 1.1 !important;\n  letter-spacing: .03em !important;\n  font-weight: 400 !important;\n  color: #fff !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  hyphens: auto;                          \/* Rei\u00dfleine auf sehr schmalen Displays *\/\n  overflow-wrap: break-word;\n}\n\n.fnt-sechead h2.fnt-sechead__title::after{\n  content: \"\";\n  display: block;\n  width: clamp(48px, 9vw, 72px);\n  height: 4px;\n  margin: clamp(16px, 2.5vw, 22px) auto 0;\n  background: #2482a4;\n  border-radius: 2px;\n}\n\n.fnt-sechead .fnt-sechead__lead{\n  max-width: 62ch;\n  margin: 24px auto 0 !important;\n  font-family: 'Montserrat', sans-serif !important;\n  font-size: 1.1875rem !important;\n  font-weight: 600 !important;\n  line-height: 1.6 !important;\n  color: rgba(255,255,255,.78) !important;\n}\n\n@media (max-width: 767px){\n  .fnt-sechead{ padding: 80px 22px 32px; }   \/* oben Luft zum Abschnitt darueber *\/\n  .fnt-sechead .fnt-sechead__lead{ font-size: 1.0625rem !important; }\n}\n<\/style>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cd02b3e elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"3cd02b3e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==============================================================\n     FANTANA \u00b7 ST-200 \u2014 Erkl\u00e4r-Animation \"Aufnahme im \u00dcberflug\"\n     Einf\u00fcgen als Elementor HTML-Widget.\n     --------------------------------------------------------------\n     Hintergrundbild: \/test\/wp-content\/uploads\/2026\/08\/st100-earth-europe.jpg\n     Wird es getauscht, nur CONFIG.bg anpassen.\n\n     CONFIG.columns bestimmt, wie viele Einzelaufnahmen der Satellit\n     quer zur Flugrichtung aneinanderlegt.\n     \u00c4ndert sich der Faktor, nur dort anpassen \u2014 \u00dcberschrift,\n     Kennzahlen und Ma\u00dfklammer rechnen sich automatisch neu.\n\n     GR\u00d6SSE: Das Element skaliert sich selbst auf die verf\u00fcgbare\n     Bildschirmh\u00f6he (max. 980 px breit, aber nie h\u00f6her als ~72 %\n     der Viewport-H\u00f6he). HUD-Typografie und die Beschriftung im\n     Bild skalieren proportional mit \u2014 auf Laptop, Desktop und\n     Handy jeweils gleich gro\u00df lesbar.\n     ============================================================== -->\n\n<div class=\"fnt-mc-wrap\">\n<figure class=\"fnt-mc\" id=\"fntMc\">\n  <div class=\"fnt-mc__stage\">\n    <canvas class=\"fnt-mc__canvas\"\n            role=\"img\"\n            aria-label=\"Schematic animation: a conventional Earth observation satellite looks rigidly downwards. With the ST-200, the satellite rotates across the flight direction and points the telescope at the next target area while motion compensation holds each exposure still \u2014 producing a strip five times wider per pass.\"><\/canvas>\n\n    <button class=\"fnt-mc__toggle\" type=\"button\" data-mc=\"toggle\" aria-label=\"Pause animation\">\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"fnt-mc__ico-pause\"><path d=\"M9 5v14M15 5v14\"\/><\/svg>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" class=\"fnt-mc__ico-play\"><path d=\"M7 4l12 8-12 8z\"\/><\/svg>\n    <\/button>\n\n    <div class=\"fnt-mc__hud\">\n      <div class=\"fnt-mc__top\">\n        <div class=\"fnt-mc__head\">\n          <span class=\"fnt-mc__eyebrow\">ST-200 \u00b7 Earth observation<\/span>\n          <h3 class=\"fnt-mc__title\">Imaging<br>im <span class=\"fnt-uml\">\u00fc<\/span>berflug.<\/h3>\n        <\/div>\n\n        <dl class=\"fnt-mc__stats\">\n          <div class=\"is-key\"><dt>Swath width<\/dt><dd>11.9 <em>km<\/em><\/dd><\/div>\n          <div><dt>GSD<\/dt><dd>1.5 <em>m<\/em><\/dd><\/div>\n          <div><dt>Altitude<\/dt><dd>500 <em>km<\/em><\/dd><\/div>\n        <\/dl>\n      <\/div>\n\n      <div class=\"fnt-mc__footrow\">\n        <div class=\"fnt-mc__foot\">\n          <p class=\"fnt-mc__label\">Imaging along the ground track<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <figcaption class=\"fnt-mc__legend\">\n    <em>Schematic illustration of the imaging principle.<\/em>\n  <\/figcaption>\n<\/figure>\n<\/div>\n\n<style>\n\/* ==========================================================================\n   1 \u00b7 GRUNDGERUEST\n   Tokens wie Key Features \/ Technische Daten:\n   Akzent #2482A4 \u00b7 Panel rgba(12,20,28,.48) \u00b7 Border rgba(255,255,255,.16)\n   ========================================================================== *\/\n\n\/* Zentrierung \u00fcber Flexbox statt auto-Margins: Theme-\/Elementor-Resets\n   wie \".elementor-widget-html figure { margin:0 }\" k\u00f6nnen auto-Margins\n   \u00fcberschreiben, ein Flex-Container nicht. *\/\n.fnt-mc-wrap {\n  display: flex;\n  justify-content: center;\n  width: 100%;\n}\n\n\/* Breite folgt der verf\u00fcgbaren Viewport-H\u00f6he (Seitenverh\u00e4ltnis 1400\/1123\n   = 1.2467), damit das Element auf Laptops nicht \u00fcber den Bildschirm l\u00e4uft. *\/\n.fnt-mc {\n  flex: 0 1 auto;\n  width: 100%;\n  max-width: 980px;\n  max-width: min(980px, calc(72vh * 1.2467));\n  min-width: 0;\n  margin: 0 !important;\n  padding: 0;\n}\n@supports (height: 1svh) {\n  .fnt-mc { max-width: min(980px, calc(72svh * 1.2467)); }\n}\n\n.fnt-mc__stage {\n  position: relative;\n  container-type: inline-size;          \/* HUD-Typo skaliert mit der Stage-Breite *\/\n  border: 1px solid rgba(255,255,255,.16);\n  border-radius: 12px;\n  overflow: hidden;\n  background: #04060a;\n}\n.fnt-mc__stage::before {                \/* Akzentstrich wie auf den Key-Feature-Cards *\/\n  content: \"\"; position: absolute; z-index: 4;\n  top: 0; left: 3.4cqw; width: 4.2cqw; height: 3px; background: #2482A4;\n}\n.fnt-mc__canvas { display: block; width: 100%; aspect-ratio: 1400 \/ 1123; }\n\n\/* ==========================================================================\n   2 \u00b7 HUD (Beschriftungen ueber dem Bild)\n   ========================================================================== *\/\n.fnt-mc__hud {\n  position: absolute; inset: 0; z-index: 2;\n  padding: clamp(16px, 3.1cqw, 34px) clamp(18px, 3.5cqw, 40px) clamp(10px, 1.7cqw, 20px);\n  display: flex; flex-direction: column; justify-content: space-between;\n  pointer-events: none;\n}\n\/* Panels hinter den Bildtexten \u2014 heben sie vom Foto ab.\n   Token wie die Key-Feature-Cards: rgba(12,20,28,.48) + 1px Border. *\/\n.fnt-mc__head,\n.fnt-mc__stats,\n.fnt-mc__foot {\n  background: rgba(6, 12, 20, .58);\n  -webkit-backdrop-filter: blur(7px) saturate(115%);\n  backdrop-filter: blur(7px) saturate(115%);\n  border: 1px solid rgba(255, 255, 255, .14);\n  border-radius: 10px;\n  padding: clamp(10px, 1.6cqw, 18px) clamp(12px, 1.9cqw, 22px);\n}\n.fnt-mc__head { max-width: 46cqw; }\n.fnt-mc__footrow { display: flex; justify-content: center; }\n.fnt-mc__foot { max-width: 74cqw; }\n.fnt-mc__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 3cqw; }\n\n.fnt-mc__eyebrow {\n  display: block; font-family: \"Montserrat\", sans-serif;\n  font-size: clamp(8.5px, 1.18cqw, 13px);\n  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;\n  color: rgba(255,255,255,.62); margin-bottom: .8em;\n}\n.fnt-mc__title {\n  font-family: \"Azonix\", \"Montserrat\", sans-serif;\n  font-size: clamp(19px, 3.35cqw, 38px);\n  font-weight: 400; line-height: 1.2; letter-spacing: .03em;\n  text-transform: uppercase; color: #fff; margin: 0;\n  text-shadow: 0 1px 12px rgba(0,0,0,.6);\n}\n.fnt-mc__title b { font-weight: inherit; color: #7FD3EE; }\n\n\n\/* Hauptaussage sitzt unten im Bild statt mitten in der Animation *\/\n.fnt-mc__label {\n  margin: 0;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: clamp(10px, 1.62cqw, 18px);\n  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;\n  color: #C4EBFB;\n  text-shadow: none;\n}\n\n.fnt-mc__stats { margin: 0; display: flex; flex-direction: column; gap: 1.5cqw; text-align: right; }\n.fnt-mc__stats dt {\n  max-width: 20cqw; margin-left: auto;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: clamp(8px, 1.02cqw, 11.5px);\n  font-weight: 600; letter-spacing: .12em; text-transform: uppercase;\n  color: rgba(255,255,255,.58); margin-bottom: .35em;\n}\n.fnt-mc__stats dd {\n  margin: 0; font-family: \"Azonix\", \"Montserrat\", sans-serif;\n  font-size: clamp(13px, 1.85cqw, 21px);\n  letter-spacing: .03em; color: #fff; white-space: nowrap;\n  text-shadow: 0 1px 10px rgba(0,0,0,.55);\n}\n.fnt-mc__stats em {\n  font-style: normal; letter-spacing: .08em; color: rgba(255,255,255,.60);\n  font-size: clamp(8px, 1.02cqw, 12px);\n}\n.fnt-mc__stats .is-muted dd { color: rgba(255,255,255,.60); }\n.fnt-mc__stats .is-key dt { color: rgba(127,211,238,.85); }\n.fnt-mc__stats .is-key dd {\n  color: #7FD3EE;\n  font-size: clamp(19px, 3cqw, 34px);\n}\n\n\/* ==========================================================================\n   3 \u00b7 PAUSE-BUTTON\n   ========================================================================== *\/\n.fnt-mc__toggle {\n  position: absolute; z-index: 5; right: 2cqw; bottom: 2cqw;\n  width: clamp(30px, 3.6cqw, 40px); height: clamp(30px, 3.6cqw, 40px);\n  display: grid; place-items: center;\n  border-radius: 50%; cursor: pointer;\n  background: rgba(0,0,0,.46); border: 1px solid rgba(255,255,255,.28);\n  color: #fff; transition: background-color .2s ease, border-color .2s ease;\n}\n.fnt-mc__toggle:hover { background: rgba(36,130,164,.62); border-color: #2482A4; }\n.fnt-mc__toggle:focus-visible { outline: 2px solid #2482A4; outline-offset: 3px; }\n.fnt-mc__toggle svg {\n  width: clamp(13px, 1.6cqw, 18px); height: clamp(13px, 1.6cqw, 18px);\n  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;\n}\n.fnt-mc__toggle .fnt-mc__ico-play { display: none; fill: currentColor; stroke: none; }\n.fnt-mc[data-paused=\"true\"] .fnt-mc__ico-pause { display: none; }\n.fnt-mc[data-paused=\"true\"] .fnt-mc__ico-play  { display: block; }\n\n.fnt-mc__legend {\n  margin: clamp(30px, 3.6vw, 56px) auto 0; max-width: 880px; text-align: center;\n  font-family: \"Montserrat\", sans-serif;\n  font-size: clamp(14px, 1.15vw, 16.5px);\n  font-weight: 500; line-height: 1.65;\n  color: rgba(255,255,255,.72);\n}\n.fnt-mc__legend em {\n  display: block; margin-top: 9px; font-style: normal;\n  font-size: .82em; color: rgba(255,255,255,.46);\n}\n\n\/* ==========================================================================\n   4 \u00b7 RESPONSIVE\n   Unter 860px wandert das HUD unter die Grafik statt darueber.\n   ========================================================================== *\/\n@media (max-width: 860px) {\n  .fnt-mc { max-width: 100%; }\n  .fnt-mc__stage::before { left: 22px; width: 40px; }\n  .fnt-mc__hud {\n    position: static; padding: 20px 20px 22px; gap: 16px;\n    background: rgba(8,14,20,.78);\n    border-top: 1px solid rgba(255,255,255,.12);\n  }\n  .fnt-mc__head { max-width: none; }\n  .fnt-mc__top { flex-direction: column; gap: 16px; }\n  .fnt-mc__eyebrow { font-size: 10.5px; }\n  .fnt-mc__title { font-size: 23px; }\n  .fnt-mc__foot { max-width: none; }\n  .fnt-mc__footrow { justify-content: stretch; }\n  .fnt-mc__label { font-size: 12.5px; letter-spacing: .08em; }\n  .fnt-mc__stats { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; text-align: left; }\n  .fnt-mc__stats dt { font-size: 9.5px; max-width: none; margin-left: 0; }\n  .fnt-mc__stats dd { font-size: 16px; }\n  .fnt-mc__stats em { font-size: 10.5px; }\n  .fnt-mc__stats .is-key dd { font-size: 23px; }\n  .fnt-mc__legend { font-size: 15px; text-align: left; margin-top: 26px; }\n  .fnt-mc__toggle { right: 12px; bottom: auto; top: 12px; width: 34px; height: 34px; }\n  .fnt-mc__toggle svg { width: 15px; height: 15px; }\n}\n\n\/* ==========================================================================\n   UMLAUT-PUNKTE FUER AZONIX\n   Azonix enthaelt kein AE\/OE\/UE. Im Markup steht der echte Umlaut, damit\n   Text kopierbar und vorlesbar bleibt; die Punkte werden als Pseudo-\n   Elemente darueber gesetzt. Alle Masse in em, damit sie mit der\n   clamp()-Schriftgroesse des HUD automatisch mitskalieren.\n   Justiert wird nur ueber die drei Variablen.\n   ========================================================================== *\/\n.fnt-mc .fnt-uml{\n  --uml-size: .115em;   \/* Kantenlaenge eines Punktes           *\/\n  --uml-gap:  .085em;   \/* halber Abstand zwischen den Punkten  *\/\n  --uml-top: -.05em;    \/* Hoehe ueber der Versalhoehe          *\/\n  position: relative;\n  display: inline-block;\n  line-height: 1;\n}\n.fnt-mc .fnt-uml::before,\n.fnt-mc .fnt-uml::after{\n  content: \"\";\n  position: absolute;\n  top: var(--uml-top);\n  width: var(--uml-size);\n  height: var(--uml-size);\n  background: currentColor;   \/* erbt die Textfarbe *\/\n  border-radius: 0;           \/* eckig - Azonix ist geometrisch *\/\n}\n.fnt-mc .fnt-uml::before{ right: calc(50% + var(--uml-gap)); }\n.fnt-mc .fnt-uml::after { left:  calc(50% + var(--uml-gap)); }\n\n\/* MOBIL: Unter 860 px wandert das HUD unter die Grafik. Die drei Kennzahlen\n   standen dort weiter nebeneinander und wurden auf ~90 px Breite gequetscht.\n   Untereinander mit Bezeichner links und Wert rechts liest sich das sauber. *\/\n@media (max-width: 860px){\n  \/* Die Bloecke unter der Grafik sassen unterschiedlich breit und links-\n     buendig nebeneinander. Auf voller Breite und zentriert wirkt es\n     als zusammenhaengender Block statt als Restposten. *\/\n  .fnt-mc__hud, .fnt-mc__top, .fnt-mc__head,\n  .fnt-mc__footrow, .fnt-mc__foot, .fnt-mc__stats{\n    width: 100%;\n    max-width: none;\n    align-items: stretch;\n    text-align: center;\n  }\n  .fnt-mc__stats{\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n  }\n  .fnt-mc__stats > div{\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: 12px;\n    text-align: left;\n  }\n  .fnt-mc__stats dt{ margin: 0; }\n  .fnt-mc__stats dd{ margin: 0; white-space: nowrap; }\n  .fnt-mc__head{ text-align: center; }\n  .fnt-mc__legend{ text-align: center; }\n}\n<\/style>\n\n<script>\n(function () {\n  \"use strict\";\n\n  \/* ============================ 1 \u00b7 CONFIG ============================== *\/\n  var CONFIG = {\n    bg:      \"\/test\/wp-content\/uploads\/2026\/08\/st100-earth-europe.jpg\",  \/\/ <\u2014 URL von st100-earth-europe.jpg aus der Mediathek\n    swathKm: 11.92,            \/\/ Kantenl\u00e4nge einer Einzelaufnahme @ 500 km\n    columns: 5,               \/\/ Einzelaufnahmen quer zur Flugbahn\n    rows:    1,               \/\/ eine Reihe \u2014 ein durchgehender Lauf von links nach rechts\n    accent:  \"#2482A4\",\n    accentHi:\"#7FD3EE\"\n  };\n  \/* ======================================================================== *\/\n\n  var root = document.getElementById(\"fntMc\");\n  if (!root) return;\n  var cv  = root.querySelector(\".fnt-mc__canvas\");\n  var ctx = cv.getContext(\"2d\");\n  var elSchwadbreite = root.querySelector('[data-mc=\"swath\"]');\n  var elMult  = root.querySelector('[data-mc=\"mult\"]');\n  var btn     = root.querySelector('[data-mc=\"toggle\"]');\n  var elKey = elSchwadbreite ? elSchwadbreite.parentNode : null;\n  if (elMult) elMult.textContent = String(CONFIG.columns);\n\n\n  \/* ================= 2 \u00b7 GEOMETRIE & PERSPEKTIVE ========================\n     Bildmasse und Fluchtpunkt des Hintergrundbildes. Nur anfassen, wenn\n     das Hintergrundbild getauscht wird.                                  *\/\n\n  var W = 1400, H = 1123;\n  var YH = 196, CXP = 760, FOC = 435, AA = 924;\n\n  var COLS = CONFIG.columns, ROWS = CONFIG.rows;\n\n  \/* SC = Skalierungsfaktor f\u00fcr Beschriftung und Linienst\u00e4rken.\n     Das Canvas ist immer 1400 px breit, wird aber je nach Ger\u00e4t kleiner\n     dargestellt \u2014 SC h\u00e4lt Text und Striche auf konstanter Bildschirmgr\u00f6\u00dfe. *\/\n  var TILE = 0.88, SAT_TRAVEL = 620, SAT_Y = 372, SAT_ARC = 13;\n  var SC = 1.5, showText = true;\n  var D = [];\n\n\n  function layout() {\n    var disp = cv.getBoundingClientRect().width || 980;\n    SC = Math.min(2.6, Math.max(1, W \/ disp));\n    showText = disp >= 460;\n    var narrow = root.getBoundingClientRect().width < 860;\n    TILE       = narrow ? 0.44 : 0.55;\n    SAT_TRAVEL = narrow ? 165  : 210;\n    var d0 = narrow ? 1.36 : 1.45, kf = 1.1815;\n    D = [];\n    for (var i = 0; i <= ROWS; i++) D.push(d0 * Math.pow(kf, i));\n  }\n\n\n  function resize() {\n    var dpr = Math.min(2, window.devicePixelRatio || 1);\n    cv.width  = Math.round(W * dpr);\n    cv.height = Math.round(H * dpr);\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n  }\n\n\n  function py(d) { return YH + AA \/ d; }\n\n  function px(u, d) { return CXP + u * FOC \/ d; }\n\n  function uEdge(c) { return (c - COLS \/ 2) * TILE; }\n\n  function quad(r, c) {\n    var dA = D[r], dB = D[r + 1], uA = uEdge(c), uB = uEdge(c + 1);\n    return [[px(uA, dA), py(dA)], [px(uB, dA), py(dA)], [px(uB, dB), py(dB)], [px(uA, dB), py(dB)]];\n  }\n\n  function quadAtF(uc, rowF) {                 \/\/ rowF darf zwischen Reihen liegen\n    var i = Math.max(0, Math.min(ROWS - 1, Math.floor(rowF)));\n    var f = Math.max(0, Math.min(1, rowF - i));\n    var dA = D[i], dB = D[i + 1];\n    if (f > 0 && i + 2 <= ROWS) { dA += (D[i + 1] - D[i]) * f; dB += (D[i + 2] - D[i + 1]) * f; }\n    var uA = uc - TILE \/ 2, uB = uc + TILE \/ 2;\n    return [[px(uA, dA), py(dA)], [px(uB, dA), py(dA)], [px(uB, dB), py(dB)], [px(uA, dB), py(dB)]];\n  }\n\n  function poly(p) { ctx.beginPath(); ctx.moveTo(p[0][0], p[0][1]); for (var i = 1; i < p.length; i++) ctx.lineTo(p[i][0], p[i][1]); ctx.closePath(); }\n\n  function fmt(n) { return String(Math.round(n * 10) \/ 10); }\n\n  function fnt(sizePx, weight) { return (weight || 600) + \" \" + Math.round(sizePx * SC) + \"px Montserrat, sans-serif\"; }\n\n  \/* Position des Satelliten auf seiner Flugbahn (SAT_ARC = 0 -> gerade) *\/\n\n  function satAt(sN) {\n    return [CXP + SAT_TRAVEL * sN, SAT_Y + SAT_ARC * sN * sN];\n  }\n\n\n  \/* ========================== 3 \u00b7 TIMELINE ==============================\n     Perfekter Loop: nach dem Halten faehrt der Satellit in T_OUT zurueck\n     auf die Startposition, waehrend die Kacheln ausblenden. Am Ende von\n     T_OUT ist das Bild pixelgleich zum Zustand bei t = 0.                *\/\n\n  var T_INTRO = 1.2, T_ROW = 4.0, T_HOLD = 1.5, T_OUT = 1.3;\n  var T_TOTAL = T_INTRO + ROWS * T_ROW + T_HOLD + T_OUT;\n\n  var lit = [];\n\n  function resetLit() { lit = []; for (var r = 0; r < ROWS; r++) { lit.push([]); for (var c = 0; c < COLS; c++) lit[r].push(-1); } }\n\n\n  function smooth(x) { return 0.5 - 0.5 * Math.cos(Math.PI * Math.max(0, Math.min(1, x))); }\n\n\n  function state(t) {\n    var startUc = -((COLS - 1) \/ 2) * TILE;   \/\/ linkes K\u00e4stchen der vordersten Reihe\n    var s = { rowF: 0, uc: startUc, beam: 1, fade: 1, phase: \"intro\" };\n    if (t < T_INTRO) { s.fade = smooth(t \/ 0.9); s.beam = s.fade; return s; }\n\n    var ts = t - T_INTRO;\n    if (ts < ROWS * T_ROW) {\n      s.phase = \"scan\";\n      var row = Math.min(ROWS - 1, Math.floor(ts \/ T_ROW));\n      var q = (ts - row * T_ROW) \/ T_ROW, SW = 0.94;\n      if (q <= SW) {\n        \/* Linear statt smooth(): der Satellit soll gleichmaessig von\n           links nach rechts gleiten, nicht anfahren und abbremsen. *\/\n        var e = Math.min(1, q \/ SW);\n        s.uc  = (-(COLS - 1) \/ 2 + e * (COLS - 1)) * TILE;\n        s.rowF = row;\n      } else {\n        var f = (q - SW) \/ (1 - SW);\n        s.beam = 1 - f * 0.85;\n        s.uc   = ((row % 2 === 1) ? -(COLS - 1) \/ 2 : (COLS - 1) \/ 2) * TILE;\n        s.rowF = row + (row + 1 < ROWS ? f : 0);\n      }\n      return s;\n    }\n\n    var endUc = (((ROWS - 1) % 2 === 1) ? -(COLS - 1) \/ 2 : (COLS - 1) \/ 2) * TILE;\n    ts -= ROWS * T_ROW;\n    if (ts < T_HOLD) {\n      s.phase = \"hold\"; s.rowF = ROWS - 1; s.beam = 0; s.uc = endUc;\n      return s;\n    }\n\n    \/\/ R\u00fcckfahrt auf die Startposition \u2014 Bild endet exakt im t=0-Zustand\n    var e2 = smooth((ts - T_HOLD) \/ T_OUT);\n    s.phase = \"out\"; s.beam = 0;\n    s.uc   = endUc + (startUc - endUc) * e2;\n    s.rowF = (ROWS - 1) * (1 - e2);\n    s.fade = 1 - e2;\n    return s;\n  }\n\n\n  \/* ================= 4 \u00b7 ZEICHNEN: SATELLIT & MASSE ===================== *\/\n\n\n  function satellite(x, y, rot) {\n    ctx.save(); ctx.translate(x, y); ctx.rotate(rot); ctx.scale(-.9, .9);   \/\/ negativer x-Faktor = horizontal gespiegelt\n    ctx.save();\n    ctx.shadowColor = \"rgba(0,0,0,.8)\"; ctx.shadowBlur = 34;\n    ctx.fillStyle = \"rgba(0,0,0,.20)\";\n    ctx.beginPath(); ctx.ellipse(0, 0, 78, 30, 0, 0, Math.PI * 2); ctx.fill();\n    ctx.restore();\n    ctx.strokeStyle = \"rgba(182,214,238,.75)\"; ctx.lineWidth = 1.5;\n    ctx.fillStyle = \"#0c1a29\";\n    [-1, 1].forEach(function (sg) {\n      var x0 = sg > 0 ? 25 : -83;\n      ctx.beginPath(); ctx.rect(x0, -18, 58, 36); ctx.fill(); ctx.stroke();\n      for (var i = 1; i < 4; i++) { ctx.beginPath(); ctx.moveTo(x0 + i * 14.5, -18); ctx.lineTo(x0 + i * 14.5, 18); ctx.stroke(); }\n      ctx.beginPath(); ctx.moveTo(sg > 0 ? 25 : -25, 0); ctx.lineTo(sg > 0 ? 19 : -19, 0); ctx.stroke();\n    });\n    var g = ctx.createLinearGradient(-24, -26, 24, 22);\n    g.addColorStop(0, \"#79838f\"); g.addColorStop(.5, \"#39424e\"); g.addColorStop(1, \"#161c25\");\n    ctx.fillStyle = g; ctx.strokeStyle = \"rgba(228,244,255,.72)\"; ctx.lineWidth = 1.8;\n    ctx.beginPath(); ctx.rect(-24, -26, 48, 48); ctx.fill(); ctx.stroke();\n    ctx.fillStyle = \"#070d14\"; ctx.beginPath(); ctx.rect(-12, 22, 24, 12); ctx.fill(); ctx.stroke();\n    ctx.restore();\n  }\n\n\n  function arrowHead(x, y, dir, size, color) {\n    ctx.beginPath();\n    ctx.moveTo(x, y);\n    ctx.lineTo(x + dir * size, y - size * 0.46);\n    ctx.lineTo(x + dir * size, y + size * 0.46);\n    ctx.closePath(); ctx.fillStyle = color; ctx.fill();\n  }\n\n\n  function bracket(x1, x2, y, label, strong, a) {\n    a = (a === undefined) ? 1 : a;\n    if (a <= 0.01) return;\n    var tick = 7 * SC, mid = (x1 + x2) \/ 2, gap = 0;\n    ctx.font = fnt(strong ? 15 : 13);\n    if (strong && showText && label) gap = ctx.measureText(label).width \/ 2 + 10 * SC;\n\n    ctx.strokeStyle = strong ? \"rgba(127,211,238,\" + (.9 * a) + \")\" : \"rgba(255,255,255,.66)\";\n    ctx.lineWidth = (strong ? 2 : 1.5) * SC;\n    ctx.beginPath();\n    ctx.moveTo(x1, y - tick); ctx.lineTo(x1, y + tick);\n    ctx.moveTo(x2, y - tick); ctx.lineTo(x2, y + tick);\n    if (gap) { ctx.moveTo(x1, y); ctx.lineTo(mid - gap, y); ctx.moveTo(mid + gap, y); ctx.lineTo(x2, y); }\n    else     { ctx.moveTo(x1, y); ctx.lineTo(x2, y); }\n    ctx.stroke();\n\n    if (!showText || !label) return;\n    ctx.textAlign = \"center\";\n    if (strong) {                                  \/\/ Zahl in der Linie\n      ctx.textBaseline = \"middle\";\n      ctx.fillStyle = \"rgba(206,242,255,\" + (.98 * a) + \")\";\n      ctx.fillText(label, mid, y + 1 * SC);\n    } else {                                       \/\/ Zahl unter der Linie\n      ctx.textBaseline = \"top\";\n      ctx.fillStyle = \"rgba(255,255,255,.82)\";\n      ctx.fillText(label, mid, y + 9 * SC);\n    }\n  }\n\n  \/* Bahnvergleich: gestrichelte Gerade = konventionelle, starre Nadir-Bahn,\n     Kurve dar\u00fcber = Rotationsbewegung, mit der der Satellit das Teleskop\n     quer zur Flugrichtung f\u00fchrt.                                        *\/\n\n  function orbitConcept() {\n    \/\/ Normale Umlaufbahn: durchgehender Strich \u00fcber die volle Bildbreite.\n    \/\/ Der Satellit weicht davon sichtbar ab \u2014 das ist der ganze Punkt.\n    ctx.setLineDash([14 * SC, 10 * SC]);\n    ctx.lineWidth = 1.6 * SC;\n    ctx.strokeStyle = \"rgba(255,255,255,.42)\";\n    ctx.beginPath();\n    for (var bx = 0; bx <= W; bx += W \/ 80) {\n      var bs = (bx - CXP) \/ SAT_TRAVEL;\n      var by = SAT_Y + SAT_ARC * bs * bs;\n      if (bx === 0) ctx.moveTo(bx, by); else ctx.lineTo(bx, by);\n    }\n    ctx.stroke();\n    ctx.setLineDash([]);\n\n    \/* Ab hier folgte die blaue Oszillationsbahn mit ihren Umkehrpunkten.\n       Der Satellit oszilliert nicht mehr, sondern gleitet gerade auf der\n       gestrichelten Linie \u2014 die Kurve haette nichts mehr dargestellt. *\/\n    return;\n\n    \/\/ (entfernt)\n    ctx.beginPath();\n    for (var i = 0; i <= 60; i++) {\n      var p = satAt(-1 + (2 * i) \/ 60);\n      if (i === 0) ctx.moveTo(p[0], p[1]); else ctx.lineTo(p[0], p[1]);\n    }\n    ctx.lineWidth = 2.4 * SC;\n    ctx.strokeStyle = \"rgba(127,211,238,.85)\";\n    ctx.stroke();\n\n    \/\/ Umkehrpunkte + Halteposition je Spalte\n    for (var c = 0; c < COLS; c++) {\n      var sN = (COLS === 1) ? 0 : (-1 + (2 * c) \/ (COLS - 1));\n      var q = satAt(sN);\n      ctx.beginPath(); ctx.arc(q[0], q[1], 3.1 * SC, 0, Math.PI * 2);\n      ctx.fillStyle = \"rgba(127,211,238,.75)\"; ctx.fill();\n    }\n\n    \/\/ Doppelpfeil: hin und zur\u00fcck\n    var eL = satAt(-1), eR = satAt(1);\n    arrowHead(eL[0] - 4 * SC, eL[1], -1, 15 * SC, \"rgba(127,211,238,.95)\");\n    arrowHead(eR[0] + 4 * SC, eR[1],  1, 15 * SC, \"rgba(127,211,238,.95)\");\n\n  }\n\n\n  \/* ====================== 5 \u00b7 ZEICHNEN: SZENE =========================== *\/\n\n  var bg = new Image(), bgReady = false;\n  bg.onload = function () { bgReady = true; if (reduce) staticEnd(); else draw(t); };\n  bg.src = root.getAttribute(\"data-bg\") || CONFIG.bg;\n\n\n  function draw(t) {\n    var s = state(t), r, c;\n    ctx.clearRect(0, 0, W, H);\n\n    if (bgReady) ctx.drawImage(bg, 0, 0, W, H);\n    else { ctx.fillStyle = \"#04060a\"; ctx.fillRect(0, 0, W, H); }\n\n    var tg = ctx.createLinearGradient(0, 0, 0, 360);\n    tg.addColorStop(0, \"rgba(3,6,11,.84)\"); tg.addColorStop(.55, \"rgba(3,6,11,.36)\"); tg.addColorStop(1, \"rgba(3,6,11,0)\");\n    ctx.fillStyle = tg; ctx.fillRect(0, 0, W, 360);\n    var bgd = ctx.createLinearGradient(0, H, 0, H - 270);\n    bgd.addColorStop(0, \"rgba(3,6,11,.86)\"); bgd.addColorStop(1, \"rgba(3,6,11,0)\");\n    ctx.fillStyle = bgd; ctx.fillRect(0, H - 270, W, 270);\n\n    var scy = (py(D[0]) + py(D[ROWS])) \/ 2;\n    var sg = ctx.createRadialGradient(CXP, scy, 30, CXP, scy, 660);\n    sg.addColorStop(0, \"rgba(2,6,12,.48)\"); sg.addColorStop(1, \"rgba(2,6,12,0)\");\n    ctx.fillStyle = sg;\n    ctx.save(); ctx.translate(CXP, scy); ctx.scale(1, .5); ctx.translate(-CXP, -scy);\n    ctx.beginPath(); ctx.arc(CXP, scy, 660, 0, Math.PI * 2); ctx.fill(); ctx.restore();\n\n    \/\/ Raster\n    ctx.setLineDash([7 * SC, 8 * SC]); ctx.lineWidth = 1.3 * SC; ctx.strokeStyle = \"rgba(255,255,255,.32)\";\n    for (r = 0; r < ROWS; r++) for (c = 0; c < COLS; c++) { poly(quad(r, c)); ctx.stroke(); }\n    ctx.setLineDash([]);\n\n    for (r = 0; r < ROWS; r++) for (c = 0; c < COLS; c++) {\n      if (lit[r][c] < 0) continue;\n      var age = Math.min(1, (t - lit[r][c]) \/ 0.6);\n      poly(quad(r, c));\n      ctx.fillStyle = \"rgba(36,130,164,\" + (0.20 + 0.32 * (1 - age)) * s.fade + \")\"; ctx.fill();\n      ctx.strokeStyle = \"rgba(127,211,238,\" + (0.50 + 0.45 * (1 - age)) * s.fade + \")\";\n      ctx.lineWidth = (1.4 + 2.2 * (1 - age)) * SC; ctx.stroke();\n    }\n\n    var sN = s.uc \/ ((((COLS - 1) \/ 2) * TILE) || 1);\n    var sp = satAt(sN), satX = sp[0], satY = sp[1];\n    var act = quadAtF(s.uc, s.rowF);\n    var actCx = (act[0][0] + act[2][0]) \/ 2, actCy = (act[0][1] + act[2][1]) \/ 2;\n\n    orbitConcept();\n\n    \/\/ Strahlenkegel\n    var beam = s.beam * s.fade;\n    if (beam > 0.02) {\n      var gr = ctx.createLinearGradient(satX, satY, act[3][0], act[3][1]);\n      gr.addColorStop(0, \"rgba(127,211,238,\" + (0.30 * beam) + \")\");\n      gr.addColorStop(1, \"rgba(36,130,164,\" + (0.06 * beam) + \")\");\n      ctx.fillStyle = gr;\n      [[0, 1], [3, 2]].forEach(function (e) {\n        ctx.beginPath(); ctx.moveTo(satX, satY);\n        ctx.lineTo(act[e[0]][0], act[e[0]][1]); ctx.lineTo(act[e[1]][0], act[e[1]][1]);\n        ctx.closePath(); ctx.fill();\n      });\n      ctx.strokeStyle = \"rgba(226,246,255,\" + (0.52 * beam) + \")\";\n      ctx.lineWidth = 1.1 * SC; ctx.setLineDash([9 * SC, 9 * SC]);\n      for (var i = 0; i < 4; i++) { ctx.beginPath(); ctx.moveTo(satX, satY); ctx.lineTo(act[i][0], act[i][1]); ctx.stroke(); }\n      ctx.setLineDash([]);\n    }\n\n    if (s.phase === \"intro\" || s.phase === \"scan\") {\n      ctx.strokeStyle = \"rgba(255,255,255,\" + (.62 * s.fade) + \")\"; ctx.lineWidth = 1.4 * SC;\n      ctx.beginPath();\n      ctx.ellipse(actCx, actCy, Math.abs(act[1][0] - act[0][0]) * .74, Math.abs(act[2][1] - act[0][1]) * .80, 0, 0, Math.PI * 2);\n      ctx.stroke();\n      ctx.save(); ctx.globalAlpha = s.fade;\n      ctx.shadowColor = CONFIG.accentHi; ctx.shadowBlur = 30;\n      poly(act); ctx.fillStyle = \"rgba(127,211,238,.26)\"; ctx.fill();\n      ctx.strokeStyle = CONFIG.accentHi; ctx.lineWidth = 2.4 * SC; ctx.stroke();\n      ctx.restore();\n    }\n\n    \/\/ ---- Ma\u00dfangaben ----\n    var yN = py(D[0]);\n    \/* Massklammern entfernt: die Kacheln sind auf dem Bild deutlich groesser\n       als 16.8 km, seit die Kachelbreite auf 0.88 erhoeht wurde. Eine\n       Beschriftung, die nicht zum Massstab passt, faellt Fachlesern sofort\n       auf. Die Zahlen stehen weiterhin im HUD, wo sie als Kennwert gelten\n       und nicht als Massangabe im Bild.\n    bracket(px(uEdge(0), D[0]), px(uEdge(1), D[0]), yN + 12 * SC, fmt(CONFIG.swathKm) + \" km\", false); *\/\n    var cov = coverage();\n    \/* if (cov.n > 1) bracket(px(uEdge(cov.min), D[0]), px(uEdge(cov.max + 1), D[0]), yN + 40 * SC,\n                           fmt(cov.n * CONFIG.swathKm) + \" km\", true, s.fade); *\/\n\n    var aimX = actCx - satX, aimY = Math.max(1, actCy - satY);\n    \/* Keine Neigung: der Satellit bleibt waagerecht und blickt mit dem\n       Teleskop nach unten. aimX\/aimY werden dafuer nicht mehr gebraucht,\n       der Strahlenkegel zeigt weiterhin auf die aktive Kachel. *\/\n    satellite(satX, satY, 0);\n  }\n\n\n  function coverage() {\n    var n = 0, mn = -1, mx = -1;\n    for (var c = 0; c < COLS; c++) {\n      for (var r = 0; r < ROWS; r++) if (lit[r][c] >= 0) { n++; if (mn < 0) mn = c; mx = c; break; }\n    }\n    return { n: n, min: mn, max: mx };\n  }\n\n\n  \/* =================== 6 \u00b7 LOOP, HUD & STEUERUNG ======================== *\/\n\n  var t = 0, last = 0, running = true, visible = true;\n  var reduce = window.matchMedia && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n\n\n  function updateHud(tt) {\n    var cov = coverage(), s = state(tt);\n    if (elSchwadbreite) elSchwadbreite.textContent = fmt(Math.max(1, cov.n) * CONFIG.swathKm);\n    if (elKey) {\n      \/\/ in der R\u00fcckfahrt ausblenden, am Zyklusstart wieder einblenden ->\n      \/\/ der Sprung von 84 auf 16.8 passiert bei Deckkraft 0\n      var o = s.fade;\n      elKey.style.opacity = String(o);\n    }\n  }\n\n\n  function markLit(tt) {\n    var s = state(tt);\n    if (s.phase === \"intro\") { if (lit[0][0] < 0) lit[0][0] = tt; return; }\n    if (s.phase !== \"scan\") return;\n    var row = Math.max(0, Math.min(ROWS - 1, Math.round(s.rowF)));\n    var col = Math.round(s.uc \/ TILE + (COLS - 1) \/ 2);\n    if (col >= 0 && col < COLS && lit[row][col] < 0) lit[row][col] = tt;\n  }\n\n\n  function frame(now) {\n    if (!last) last = now;\n    var dt = Math.min(0.05, (now - last) \/ 1000); last = now;\n    if (running && visible) {\n      t += dt;\n      if (t >= T_TOTAL) { t = 0; resetLit(); }\n      markLit(t); draw(t); updateHud(t);\n    }\n    requestAnimationFrame(frame);\n  }\n\n\n  function staticEnd() {\n    for (var r = 0; r < ROWS; r++) for (var c = 0; c < COLS; c++) lit[r][c] = 0;\n    t = T_TOTAL - T_OUT - 0.2; draw(t); updateHud(t);\n  }\n\n  btn.addEventListener(\"click\", function () {\n    running = !running;\n    root.setAttribute(\"data-paused\", String(!running));\n    btn.setAttribute(\"aria-label\", running ? \"Animation pausieren\" : \"Animation abspielen\");\n  });\n\n  var rTo;\n  window.addEventListener(\"resize\", function () {\n    clearTimeout(rTo);\n    rTo = setTimeout(function () { layout(); resize(); draw(t); }, 120);\n  });\n\n  if (\"IntersectionObserver\" in window)\n    new IntersectionObserver(function (e) { visible = e[0].isIntersecting; }, { threshold: .15 }).observe(root);\n\n  layout(); resize(); resetLit();\n  if (reduce) { root.setAttribute(\"data-paused\", \"true\"); running = false; staticEnd(); }\n  else requestAnimationFrame(frame);\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-62607acb elementor-widget elementor-widget-html\" data-id=\"62607acb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==============================================================\n     FANTANA \u00b7 Seitennavigation \"Rad\" (nur f\u00fcr diese eine Seite)\n     Einf\u00fcgen als Elementor HTML-Widget \u2014 irgendwo auf der Seite,\n     die Position ist fixed, der Einbauort also egal. Ich w\u00fcrde es\n     ganz ans Ende der Seite setzen, damit beim Laden zuerst der\n     Inhalt kommt.\n     --------------------------------------------------------------\n     VORAUSSETZUNG \u2014 sonst passiert nichts:\n     Jede Sektion braucht eine CSS-ID. In Elementor:\n     Sektion anklicken \u2192 Erweitert \u2192 CSS-ID eintragen.\n\n         Hero .................. st100\n         Key Features .......... key-features\n         Technische Daten ...... technische-daten\n         Aufnahmeprinzip ....... aufnahmeprinzip\n         CTA ................... datenblatt\n         Kontakt ............... kontakt\n\n     Fehlt eine ID, wird der Punkt einfach \u00fcbersprungen \u2014 die\n     Navigation bricht nicht, sie zeigt dann nur weniger Punkte.\n     Reihenfolge und Beschriftung unten in CONFIG anpassen.\n\n     Der Sprungversatz unter dem fixierten Header kommt aus\n     scroll-padding-top (steht im Hero-Block). Ohne den landen\n     Klicks hinter der Navigationsleiste.\n     ============================================================== -->\n\n<nav class=\"fnt-sidenav\" id=\"fntSidenav\" aria-label=\"Sections of this page\">\n  <!-- Fangfl\u00e4che f\u00fcr Hover. Eigenes Element, weil das Rad selbst\n       pointer-events:none hat \u2014 sonst w\u00fcrde sein unsichtbarer\n       Quadrant Klicks auf den Seiteninhalt abfangen. -->\n  <div class=\"fnt-sidenav__hit\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"fnt-sidenav__wheel\">\n    <svg class=\"fnt-sidenav__svg\" viewBox=\"0 0 680 680\" aria-hidden=\"true\" focusable=\"false\">\n      <g class=\"fnt-sidenav__spin\" id=\"fntSpin\"><\/g>\n      <circle class=\"fnt-sidenav__rim\" cx=\"340\" cy=\"340\" r=\"330\"\/>\n      <path class=\"fnt-sidenav__prog\" id=\"fntProg\" d=\"\"\/>\n      <path class=\"fnt-sidenav__mark\" d=\"M 18 340 L 46 340\"\/>\n    <\/svg>\n\n    <ul class=\"fnt-sidenav__items\" id=\"fntItems\"><\/ul>\n\n    <p class=\"fnt-sidenav__count\" aria-hidden=\"true\">\n      <b id=\"fntNum\">01<\/b><i id=\"fntTotal\">\/06<\/i>\n    <\/p>\n  <\/div>\n<\/nav>\n\n<style>\n\/* ---- FANTANA \u00b7 Seitennavigation ----------------------------------------\n   Akzent #2482A4 \u00b7 Display-Font Azonix \u00b7 Text-Font Montserrat\n\n   Geometrie: Das Rad ist 560 px gro\u00df und sitzt gr\u00f6\u00dftenteils rechts\n   au\u00dferhalb des Viewports. Sichtbar ist nur der linke Bogen \u2014 im\n   Ruhezustand ein schmaler Streifen, beim Hover ein deutlich breiterer.\n   Ver\u00e4ndert man --fnt-nav-r, m\u00fcssen die beiden right-Werte mit. *\/\n\n.fnt-sidenav{\n  --fnt-nav-accent: #2482a4;\n  --fnt-nav-size:   680px;\n  --fnt-nav-idle:  -500px;   \/* sichtbar ca. 128 px *\/\n  --fnt-nav-open:  -440px;   \/* sichtbar ca. 240 px *\/\n\n  position: fixed;\n  top: 50%;\n  right: 0;\n  z-index: 90;              \/* unter dem Header (meist 99+), \u00fcber dem Inhalt *\/\n  height: var(--fnt-nav-size);\n  transform: translateY(-50%);\n  pointer-events: none;      \/* nur Kinder fangen Klicks *\/\n  font-family: 'Montserrat', sans-serif;\n}\n\n\/* Hover-Fangfl\u00e4che. W\u00e4chst mit auf, damit der Zeiger beim Weg\n   zu den Beschriftungen nicht durch ein totes Feld l\u00e4uft und\n   die Navigation unter der Hand wieder zuklappt. *\/\n.fnt-sidenav__hit{\n  position: absolute;\n  top: 0; right: 0; bottom: 0;\n  width: 132px;\n  pointer-events: auto;\n  transition: width .45s cubic-bezier(.2,.7,.3,1);\n}\n.fnt-sidenav:hover .fnt-sidenav__hit,\n.fnt-sidenav:focus-within .fnt-sidenav__hit{ width: 260px; }\n\n.fnt-sidenav__wheel{\n  position: absolute;\n  top: 0;\n  right: var(--fnt-nav-idle);\n  width: var(--fnt-nav-size);\n  height: var(--fnt-nav-size);\n  opacity: .72;\n  transform: scale(.96);\n  transform-origin: 0 50%;   \/* w\u00e4chst nach rechts, der sichtbare Rand bleibt *\/\n  transition:\n    right   .45s cubic-bezier(.2,.7,.3,1),\n    opacity .45s ease,\n    transform .45s cubic-bezier(.2,.7,.3,1);\n}\n.fnt-sidenav:hover .fnt-sidenav__wheel,\n.fnt-sidenav:focus-within .fnt-sidenav__wheel{\n  right: var(--fnt-nav-open);\n  opacity: 1;\n  transform: scale(1);\n}\n\n\/* Weicher Schleier hinter dem Bogen. Ohne ihn verschwindet die\n   Navigation optisch, sobald der Hintergrund von Sternenbild auf\n   flaches Schwarz wechselt (Datenblatt, Footer): eine helle Haarlinie\n   auf Schwarz gibt dem Auge keinen Halt. Der Schleier legt eine\n   minimal dunklere, weiche Flaeche darunter, gegen die der Ring\n   ueberall gleich liest. Zum Entfernen: diesen Block loeschen. *\/\n.fnt-sidenav__wheel::before{\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  pointer-events: none;\n  background: radial-gradient(circle at 0% 50%,\n              rgba(4,8,14,.60) 0%,\n              rgba(4,8,14,.38) 26%,\n              rgba(4,8,14,0)   58%);\n}\n\n\/* ---- Ringgrafik ---- *\/\n.fnt-sidenav__svg{\n  position: absolute;\n  inset: 0;\n  width: 100%; height: 100%;\n  overflow: visible;\n}\n.fnt-sidenav__rim{\n  fill: none;\n  stroke: rgba(255,255,255,.22);\n  stroke-width: 1.5;\n}\n\/* Teilstriche \u2014 dieses Element dreht sich, es macht die Bewegung sichtbar *\/\n.fnt-sidenav__spin line{\n  stroke: rgba(255,255,255,.30);\n  stroke-width: 1.5;\n}\n.fnt-sidenav__spin line.is-major{\n  stroke: rgba(255,255,255,.52);\n  stroke-width: 2;\n}\n\/* Fortschritt der Seite als Bogen im sichtbaren Bereich *\/\n.fnt-sidenav__prog{\n  fill: none;\n  stroke: var(--fnt-nav-accent);\n  stroke-width: 3;\n  stroke-linecap: round;\n  filter: drop-shadow(0 0 8px rgba(36,130,164,.8));\n}\n\/* Indexmarke auf 9 Uhr \u2014 hier steht der aktive Abschnitt *\/\n.fnt-sidenav__mark{\n  stroke: var(--fnt-nav-accent);\n  stroke-width: 2.5;\n  stroke-linecap: round;\n}\n\n\/* ---- Punkte + Beschriftungen ---- *\/\n.fnt-sidenav__items{\n  position: absolute;\n  inset: 0;\n  margin: 0; padding: 0;\n  list-style: none;\n}\n.fnt-sidenav__item{\n  position: absolute;\n  top: 0; left: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  white-space: nowrap;\n  will-change: transform;\n}\n.fnt-sidenav__link{\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  text-decoration: none;\n  pointer-events: auto;\n  padding: 6px 0;\n}\n\/* Die Beschriftungen ragen beim Aufklappen ueber den Seiteninhalt.\n   Ohne eigene Flaeche stehen sie dann auf Kennzahl-Karten und Fliesstext\n   und werden unlesbar. Das Chip nutzt dieselben Tokens wie die HUD-Panels\n   der Animation, damit es nicht wie ein Fremdkoerper wirkt. *\/\n.fnt-sidenav__text{\n  font-size: 11px;\n  font-weight: 600;\n  letter-spacing: 1.6px;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.72);\n  padding: 6px 11px;\n  border-radius: 6px;\n  background: rgba(6,12,20,.86);\n  border: 1px solid rgba(255,255,255,.14);\n  box-shadow: 0 6px 22px rgba(0,0,0,.5);\n  -webkit-backdrop-filter: blur(8px);\n  backdrop-filter: blur(8px);\n  \/* Dauerhaft sichtbar: die Navigation soll jederzeit zeigen, welche\n     Abschnitte es gibt, nicht erst nach dem Hovern. Im Ruhezustand\n     gedimmt, beim Aufklappen voll deckend und etwas groesser. *\/\n  opacity: .62;\n  transform: none;\n  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1),\n              color .3s ease, border-color .3s ease,\n              font-size .3s cubic-bezier(.2,.7,.3,1), padding .3s ease;\n}\n\/* Beim Aufklappen wird die Schrift eine Spur groesser. Der Sprung ist\n   klein gehalten (11 -> 12.5px): genug, damit das Ausfahren sich als eine\n   Bewegung anfuehlt, zu wenig, um das Layout der Beschriftungen zu kippen. *\/\n.fnt-sidenav:hover .fnt-sidenav__text,\n.fnt-sidenav:focus-within .fnt-sidenav__text{\n  opacity: 1;\n  transform: none;\n  font-size: 12.5px;\n  letter-spacing: 1.8px;\n  padding: 7px 13px;\n}\n\/* Der aktive Abschnitt ist auch im Ruhezustand beschriftet \u2014 sonst ist\n   nicht erkennbar, dass der Streifen am Rand eine Navigation ist. *\/\n.fnt-sidenav__item.is-active .fnt-sidenav__text{ opacity: 1; }\n.fnt-sidenav__dot{\n  position: relative;\n  width: 9px; height: 9px;\n  flex: 0 0 9px;\n  border-radius: 50%;\n  background: rgba(255,255,255,.55);\n  transition: background .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);\n}\n\/* Ring um den aktiven Punkt *\/\n.fnt-sidenav__dot::after{\n  content: \"\";\n  position: absolute;\n  inset: -8px;\n  border: 1px solid var(--fnt-nav-accent);\n  border-radius: 50%;\n  opacity: 0;\n  transform: scale(.6);\n  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);\n}\n\n.fnt-sidenav__item.is-active .fnt-sidenav__dot{\n  background: var(--fnt-nav-accent);\n  transform: scale(1.35);\n  box-shadow: 0 0 12px rgba(36,130,164,.9), 0 0 30px rgba(36,130,164,.45);\n}\n.fnt-sidenav__item.is-active .fnt-sidenav__dot::after{ opacity: 1; transform: none; }\n.fnt-sidenav__item.is-active .fnt-sidenav__text{\n  color: #fff;\n  border-color: rgba(36,130,164,.75);\n}\n\n.fnt-sidenav__link:hover .fnt-sidenav__text{ color: #fff; }\n.fnt-sidenav__link:hover .fnt-sidenav__dot{ background: #fff; }\n.fnt-sidenav__link:focus-visible{\n  outline: 2px solid var(--fnt-nav-accent);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\n\n\/* ---- Z\u00e4hler ---- *\/\n.fnt-sidenav__count{\n  position: absolute;\n  left: 24px;\n  top: 50%;\n  transform: translateY(30px);\n  margin: 0;\n  font-family: 'Azonix', 'Montserrat', sans-serif;\n  font-size: 13px;\n  letter-spacing: 1px;\n  line-height: 1;\n  color: rgba(255,255,255,.30);\n  opacity: 0;\n  transition: opacity .35s ease;\n}\n.fnt-sidenav:hover .fnt-sidenav__count,\n.fnt-sidenav:focus-within .fnt-sidenav__count{ opacity: 1; }\n.fnt-sidenav__count b{ color: var(--fnt-nav-accent); font-weight: 400; }\n.fnt-sidenav__count i{ font-style: normal; }\n\n\/* ---- Einblenden, sobald der Hero verlassen wird ---- *\/\n.fnt-sidenav{ opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }\n.fnt-sidenav.is-ready{ opacity: 1; visibility: visible; }\n\n\/* Zwischen 1100 und 1500 px ist rechts vom Inhalt kaum Platz. Das Rad\n   faehrt dort weniger weit heraus und die Schrift wird etwas kleiner \u2014\n   zusammen mit dem Chip bleiben die Beschriftungen so lesbar, ohne den\n   Inhalt zu verdecken. Ueber 1500 px greift wieder der volle Ausschlag. *\/\n@media (max-width: 1500px){\n  .fnt-sidenav{ --fnt-nav-open: -496px; }\n  .fnt-sidenav__text{ font-size: 10px; letter-spacing: 1.2px; padding: 5px 9px; }\n  .fnt-sidenav:hover .fnt-sidenav__text,\n  .fnt-sidenav:focus-within .fnt-sidenav__text{ font-size: 11.5px; letter-spacing: 1.4px; padding: 6px 11px; }\n  .fnt-sidenav:hover .fnt-sidenav__hit,\n  .fnt-sidenav:focus-within .fnt-sidenav__hit{ width: 200px; }\n}\n\n\/* ---- Responsive ----\n   Unter 1100 px ausgeblendet. Ein Rad dieser Gr\u00f6\u00dfe frisst auf einem\n   Telefon zu viel Fl\u00e4che, und die Seite ist kurz genug, dass reines\n   Scrollen dort schneller ist als eine Sprungnavigation. *\/\n@media (max-width: 1100px){\n  .fnt-sidenav{ display: none; }\n}\n\n@media (prefers-reduced-motion: reduce){\n  .fnt-sidenav__wheel,\n  .fnt-sidenav__hit,\n  .fnt-sidenav__text,\n  .fnt-sidenav__dot,\n  .fnt-sidenav__dot::after{ transition: none; }\n}\n<\/style>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* Das Widget steht im DOM vor den spaeteren Abschnitten. Liefe der\n     Code sofort, faende getElementById die Sektionen Datenblatt und\n     Kontakt noch nicht \u2014 sie fehlten dann kommentarlos am Rad.\n     Deshalb erst starten, wenn das Dokument vollstaendig geparst ist. *\/\n  function fntInit() {\n\n  \/* ===== CONFIG \u2014 Abschnitte in Seitenreihenfolge ==================\n     id    : CSS-ID der Elementor-Sektion (ohne #)\n     label : Beschriftung im Rad. Kurz halten, sonst wird der\n             Streifen breit. Umlaute sind hier unkritisch, die\n             Beschriftungen laufen in Montserrat, nicht in Azonix. *\/\n  var CONFIG = [\n    { id: 'key-features',     label: 'At a glance' },\n    { id: 'technische-daten', label: 'Specifications' },\n    { id: 'ansichten',        label: 'Views' },\n    { id: 'aufnahmeprinzip',  label: 'Imaging principle' },\n    { id: 'datenblatt',       label: 'Datasheet' },\n    { id: 'kontakt',          label: 'Contact' }\n  ];\n\n  var STEP = 24;    \/\/ Grad zwischen zwei Abschnitten auf dem Rad\n  var DIR  = -1;    \/\/ Drehrichtung: -1 oder 1 \u2014 hier umschalten\n  var R    = 330;   \/\/ Radius, muss zum Rim-Radius im SVG passen\n  var C    = 340;   \/\/ Mittelpunkt\n\n  var nav   = document.getElementById('fntSidenav');\n  var list  = document.getElementById('fntItems');\n  var spin  = document.getElementById('fntSpin');\n  var prog  = document.getElementById('fntProg');\n  var num   = document.getElementById('fntNum');\n  var total = document.getElementById('fntTotal');\n  if (!nav || !list) return;\n\n  \/* Das Widget liegt in einer Elementor-Sektion. Spaetere Sektionen\n     ueberdecken die Navigation dort trotz z-index, weil sie eigene\n     Stapelkontexte mitbringen \u2014 position:fixed regelt die Position,\n     nicht die Stapelreihenfolge. Als direktes Kind von <body> liegt\n     sie ueber allem und bleibt auf der ganzen Seite sichtbar.\n     Das <style> daneben bleibt im Widget, CSS gilt ohnehin global. *\/\n  \/* Beim Umhaengen zuerst alle frueher verschobenen Kopien entfernen.\n     Elementor rendert Widgets bei jeder Aenderung neu; ohne diese Zeile\n     bleibt die alte Kopie am <body> liegen und die Navigation erscheint\n     doppelt. Auf der Live-Seite faellt das nicht auf, im Editor sofort. *\/\n  document.querySelectorAll('.fnt-sidenav').forEach(function (el) {\n    if (el !== nav) el.remove();\n  });\n  if (nav.parentNode !== document.body) document.body.appendChild(nav);\n\n  \/* Nur Abschnitte \u00fcbernehmen, die es auf der Seite auch gibt. *\/\n  var items = CONFIG\n    .map(function (s) { return { cfg: s, el: document.getElementById(s.id) }; })\n    .filter(function (s) {\n      \/* ausgeblendete Abschnitte (Elementor: Auf Geraet ausblenden) ueberspringen *\/\n      return !!s.el && s.el.getClientRects().length > 0;\n    });\n\n  \/* Diagnose in der Konsole (F12). Ohne das sieht man bei fehlenden\n     CSS-IDs schlicht nichts und sucht den Fehler an der falschen Stelle. *\/\n  var missing = CONFIG.filter(function (s) { return !document.getElementById(s.id); });\n  if (missing.length) {\n    console.warn('[Fantana Seitennavigation] Diese CSS-IDs fehlen auf der Seite: ' +\n      missing.map(function (s) { return '#' + s.id; }).join(', ') +\n      ' \u2014 in Elementor: Sektion \u2192 Erweitert \u2192 CSS-ID.');\n  }\n\n  if (items.length < 2) {\n    console.warn('[Fantana Seitennavigation] Weniger als zwei Abschnitte gefunden \u2014 ' +\n      'Navigation bleibt ausgeblendet.');\n    return;\n  }\n\n  total.textContent = '\/' + String(items.length).padStart(2, '0');\n\n  \/* ---- Teilstriche erzeugen (60 St\u00fcck, jeder f\u00fcnfte l\u00e4nger) ---- *\/\n  var ns = 'http:\/\/www.w3.org\/2000\/svg';\n  for (var i = 0; i < 60; i++) {\n    var a   = (i \/ 60) * Math.PI * 2;\n    var maj = i % 5 === 0;\n    var r1  = R - (maj ? 14 : 7);\n    var ln  = document.createElementNS(ns, 'line');\n    ln.setAttribute('x1', C + r1 * Math.cos(a));\n    ln.setAttribute('y1', C + r1 * Math.sin(a));\n    ln.setAttribute('x2', C + R  * Math.cos(a));\n    ln.setAttribute('y2', C + R  * Math.sin(a));\n    if (maj) ln.setAttribute('class', 'is-major');\n    spin.appendChild(ln);\n  }\n\n  \/* ---- Punkte + Beschriftungen ---- *\/\n  items.forEach(function (s, i) {\n    var li = document.createElement('li');\n    li.className = 'fnt-sidenav__item';\n    li.innerHTML =\n      '<a class=\"fnt-sidenav__link\" href=\"#' + s.cfg.id + '\">' +\n        '<span class=\"fnt-sidenav__text\">' + s.cfg.label + '<\/span>' +\n        '<span class=\"fnt-sidenav__dot\"><\/span>' +\n      '<\/a>';\n    list.appendChild(li);\n    s.node = li;\n    s.index = i;\n  });\n\n  \/* ---- Fortschrittsbogen im sichtbaren Bereich (128\u00b0\u2013232\u00b0) ---- *\/\n  function arc(from, to) {\n    var f = from * Math.PI \/ 180, t = to * Math.PI \/ 180;\n    return 'M ' + (C + R * Math.cos(f)) + ' ' + (C + R * Math.sin(f)) +\n           ' A ' + R + ' ' + R + ' 0 0 1 ' +\n           (C + R * Math.cos(t)) + ' ' + (C + R * Math.sin(t));\n  }\n  prog.setAttribute('d', arc(128, 232));\n  var arcLen = prog.getTotalLength();\n  prog.style.strokeDasharray = arcLen;\n\n  \/* ---- Position berechnen ---- *\/\n  var tops = [], docProgress = 0, pos = 0, ticking = false;\n\n  function measure() {\n    tops = items.map(function (s) {\n      return s.el.getBoundingClientRect().top + window.pageYOffset;\n    });\n  }\n\n  function update() {\n    ticking = false;\n    var y = window.pageYOffset;\n    var anchor = y + window.innerHeight * 0.35;\n\n    \/* Flie\u00dfender Index: 2.4 hei\u00dft \"40 % zwischen Abschnitt 3 und 4\".\n       Dadurch dreht das Rad kontinuierlich weiter statt zu springen. *\/\n    pos = 0;\n    for (var i = 0; i < tops.length; i++) {\n      if (anchor >= tops[i]) {\n        var next = tops[i + 1];\n        pos = (next === undefined) ? i\n            : i + Math.min(1, Math.max(0, (anchor - tops[i]) \/ (next - tops[i])));\n      }\n    }\n\n    var max = document.documentElement.scrollHeight - window.innerHeight;\n    docProgress = max > 0 ? Math.min(1, Math.max(0, y \/ max)) : 0;\n\n    \/* Rad drehen: der aktive Abschnitt landet auf 9 Uhr (180\u00b0). *\/\n    spin.setAttribute('transform',\n      'rotate(' + (DIR * -pos * STEP * 0.6) + ' ' + C + ' ' + C + ')');\n\n    items.forEach(function (s) {\n      \/* Fest verteilt statt mitdrehend: frueher wanderte der aktive\n         Abschnitt auf 9 Uhr und die uebrigen liefen aus dem Bild. Damit\n         war nicht jeder Punkt jederzeit erreichbar. Jetzt liegen alle\n         Abschnitte symmetrisch um 9 Uhr und bleiben anklickbar; die\n         Scrollbewegung zeigt nur noch der Teilstrich-Ring und die\n         Hervorhebung des aktiven Punkts. *\/\n      var mitte = (items.length - 1) \/ 2;\n      var deg  = 180 + DIR * (s.index - mitte) * STEP;\n      var rad  = deg * Math.PI \/ 180;\n      var x    = C + R * Math.cos(rad);\n      var yy   = C + R * Math.sin(rad);\n      \/* +5 px, damit der Punkt (letztes Kind) mittig auf dem Kreis sitzt *\/\n      s.node.style.transform =\n        'translate(' + (x + 5) + 'px,' + yy + 'px) translate(-100%,-50%)';\n\n      \/* Weit entfernte Abschnitte ausblenden \u2014 sie liegen ohnehin\n         gr\u00f6\u00dftenteils au\u00dferhalb des Viewports. *\/\n      var dist = Math.abs(deg - 180);\n      \/* Alle Abschnitte gleich sichtbar \u2014 sie sind jetzt alle erreichbar. *\/\n      s.node.style.opacity = 1;\n\n      s.node.classList.toggle('is-active', Math.round(pos) === s.index);\n    });\n\n    prog.style.strokeDashoffset = arcLen * (1 - docProgress);\n    num.textContent = String(Math.round(pos) + 1).padStart(2, '0');\n\n    nav.classList.toggle('is-ready', y > 140);\n  }\n\n  function onScroll() {\n    if (!ticking) { ticking = true; requestAnimationFrame(update); }\n  }\n\n  window.addEventListener('scroll', onScroll, { passive: true });\n  window.addEventListener('resize', function () { measure(); onScroll(); });\n  window.addEventListener('load', function () { measure(); update(); });\n\n  measure();\n  update();\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', fntInit);\n  } else {\n    fntInit();\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-13ef034d elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"13ef034d\" data-element_type=\"section\" data-e-type=\"section\" id=\"datenblatt\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-159199a0\" data-id=\"159199a0\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-11169e9b elementor-widget elementor-widget-html\" data-id=\"11169e9b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ==============================================================\n     FANTANA \u00b7 ST-200 \u2014 Abschluss \"Ihre Mission\"\n     Ersetzt den bisherigen CTA-Block \"Naechster Schritt\".\n     --------------------------------------------------------------\n     Einbau: als Elementor HTML-Widget in die CTA-Sektion (#datenblatt).\n     Das alte Widget dort loeschen. Sektions-Padding auf 0 \u2014\n     der Block bringt sein eigenes mit.\n\n     ZU ERSETZEN:\n       href=\"#datenblatt-pdf\"  ->  URL der Product-Note-PDF\n       href=\"#kontakt\"         ->  Anker zum Kontaktformular\n\n     WARUM ANDERS ALS VORHER\n     Der alte Block war ein umrandetes Kaestchen mit eigenem\n     Hintergrund \u2014 eine Insel am Seitenende. Hier laeuft der\n     Abschnitt randlos weiter wie alles darueber, traegt eine\n     Ueberschrift im gleichen Muster wie \"Key Features\" und\n     \"Das Aufnahmeprinzip\", und greift die Zahlen der Seite auf,\n     statt bei null anzufangen.\n\n     RECHENWEG\n     GSD und Schwadbreite skalieren am Nadir linear mit der Bahnhoehe:\n       GSD(h)   = 1,5 m  x h \/ 500\n       Schwadbreite(h) = 11,9 km x h \/ 500\n     Das ist eine belastbare Naeherung fuer den Nadir-Blick. Sie\n     ignoriert Erdkruemmung, Off-Nadir-Winkel und Atmosphaere \u2014\n     deshalb steht unter dem Block ein Hinweis darauf. Wer echte\n     Zahlen braucht, holt sich das Datenblatt; genau dorthin\n     fuehrt der Block.\n     ============================================================== -->\n\n<div class=\"fnt-mis\">\n\n  <div class=\"fnt-mis__head\">\n    <h2 class=\"fnt-mis__title\">Your mission<\/h2>\n    <p class=\"fnt-mis__lead\">\n      Set your orbital altitude \u2014 the ST-200 key figures update instantly.\n    <\/p>\n  <\/div>\n\n  <!-- Regler ------------------------------------------------------------ -->\n  <div class=\"fnt-mis__control\">\n    <label class=\"fnt-mis__ctrlhead\" for=\"fntAlt\">\n      <span class=\"fnt-mis__ctrllabel\">Altitude<\/span>\n      <output class=\"fnt-mis__ctrlvalue\" id=\"fntAltOut\" for=\"fntAlt\">500 km<\/output>\n    <\/label>\n\n    <input class=\"fnt-mis__range\" id=\"fntAlt\" type=\"range\"\n           min=\"300\" max=\"700\" step=\"10\" value=\"500\"\n          >\n\n    <div class=\"fnt-mis__scale\" aria-hidden=\"true\">\n      <span>300 km \u00b7 VLEO<\/span><span>500 km<\/span><span>700 km<\/span>\n    <\/div>\n  <\/div>\n\n  <!-- Kennzahlen -------------------------------------------------------- -->\n  <dl class=\"fnt-mis__stats\" aria-live=\"polite\">\n    <div class=\"fnt-mis__stat\">\n      <dt>GSD<\/dt>\n      <dd><b data-mis=\"gsd\">1.5<\/b><i>m<\/i><\/dd>\n      <p>Ground Sampling Distance at nadir<\/p>\n    <\/div>\n    <div class=\"fnt-mis__stat\">\n      <dt>Swath width<\/dt>\n      <dd><b data-mis=\"swath\">11.9<\/b><i>km<\/i><\/dd>\n      <p>fixed optics, no rotation<\/p>\n    <\/div>\n    <div class=\"fnt-mis__stat is-key fnt-mis__res\">\n<dt>Spatial resolution<\/dt>\n<dd class=\"fnt-mis__bands\">\n<span class=\"fnt-mis__band\" style=\"--band:#4f8ff0\"><em>Blue<\/em><span class=\"fnt-mis__bandval\"><b data-res=\"blue\">1.6<\/b><i>m<\/i><\/span><small>450\u2013520 nm<\/small><\/span>\n<span class=\"fnt-mis__band\" style=\"--band:#3fc48a\"><em>Green<\/em><span class=\"fnt-mis__bandval\"><b data-res=\"green\">1.8<\/b><i>m<\/i><\/span><small>520\u2013600 nm<\/small><\/span>\n<span class=\"fnt-mis__band\" style=\"--band:#ef5a4f\"><em>Red<\/em><span class=\"fnt-mis__bandval\"><b data-res=\"red\">2.2<\/b><i>m<\/i><\/span><small>630\u2013690 nm<\/small><\/span>\n<span class=\"fnt-mis__band\" style=\"--band:#b06ae0\"><em>Near infrared<\/em><span class=\"fnt-mis__bandval\"><b data-res=\"nir\">2.7<\/b><i>m<\/i><\/span><small>760\u2013900 nm<\/small><\/span>\n<span class=\"fnt-mis__band is-pan\" style=\"--band:#ffffff\"><em>Panchromatic<\/em><span class=\"fnt-mis__bandval\"><b data-res=\"pan\">2.2<\/b><i>m<\/i><\/span><small>450\u2013900 nm<\/small><\/span>\n<\/dd>\n<p>Nadir estimate: pixel sampling (GSD) combined with the aperture\u2019s diffraction limit (1.22 \u00b7 \u03bb \/ D, band centre)<\/p>\n<\/div>\n<\/dl>\n\n  <!-- Aktionen ---------------------------------------------------------- -->\n  <div class=\"fnt-mis__actions\">\n    <a class=\"fnt-mis__btn fnt-mis__btn--primary\" href=\"https:\/\/www.test.fantana.at\/test\/wp-content\/uploads\/2026\/10\/Fantana-ST-200-Datenblatt-2026-10.pdf\" target=\"_blank\" rel=\"noopener\">\n      <span>Download datasheet<\/span>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 3v12m0 0l-4.5-4.5M12 15l4.5-4.5M4 20h16\"\/><\/svg>\n    <\/a>\n\n    <a class=\"fnt-mis__btn fnt-mis__btn--ghost\" id=\"fntAsk\" href=\"#kontakt\">\n      <span>Request a design for <b data-mis=\"alt\">500<\/b> km<\/span>\n      <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 12h15m0 0l-5.5-5.5M19 12l-5.5 5.5\"\/><\/svg>\n    <\/a>\n  <\/div>\n\n  <p class=\"fnt-mis__meta\">\n    PDF \u00b7 no registration \u00b7 reply within 2 working days<br>\n    <em>Approximate values for nadir viewing. Off-nadir operation, Earth curvature and atmosphere are not taken into account \u2014 binding figures are given in the datasheet.<\/em>\n  <\/p>\n\n<\/div>\n\n<style>\n\/* ==========================================================================\n   1 \u00b7 GRUNDGERUEST\n   Tokens wie Key Features \/ Technische Daten:\n   Akzent #2482A4 \u00b7 Panel rgba(12,20,28,.48) \u00b7 Border rgba(255,255,255,.16)\n\n   Bewusst OHNE Rahmen und ohne Panelflaeche um den Gesamtblock: genau das\n   liess den alten CTA wie eine Insel wirken. Die Kennzahlen tragen ihre\n   eigenen Karten \u2014 dieselbe Sprache wie die Key Features weiter oben.\n   ========================================================================== *\/\n\n.fnt-mis{\n  --mis-accent:  #2482a4;\n  --mis-hi:      #7fd3ee;\n  --mis-fill:    rgba(12,20,28,.48);\n  --mis-line:    rgba(255,255,255,.16);\n\n  max-width: 1140px;\n  margin-inline: auto;\n  padding: clamp(24px, 3vw, 40px) 25px clamp(56px, 6vw, 96px);\n  box-sizing: border-box;\n  font-family: 'Montserrat', sans-serif;\n  color: #fff;\n}\n.fnt-mis *, .fnt-mis *::before, .fnt-mis *::after{ box-sizing: border-box; }\n\n\n\/* ==========================================================================\n   2 \u00b7 UEBERSCHRIFT  (gleiche Masse wie Key Features \/ Aufnahmeprinzip)\n   ========================================================================== *\/\n\n.fnt-mis__head{ text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }\n\n.fnt-mis h2.fnt-mis__title{\n  font-family: 'Azonix', 'Montserrat', sans-serif !important;\n  text-transform: uppercase !important;\n  font-size: clamp(1.875rem, 5.5vw, 4rem) !important;\n  line-height: 1.1 !important;\n  letter-spacing: .03em !important;\n  font-weight: 400 !important;\n  color: #fff !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.fnt-mis h2.fnt-mis__title::after{\n  content: \"\";\n  display: block;\n  width: clamp(48px, 9vw, 72px);\n  height: 4px;\n  margin: clamp(16px, 2.5vw, 22px) auto 0;\n  background: var(--mis-accent);\n  border-radius: 2px;\n}\n.fnt-mis .fnt-mis__lead{\n  max-width: 62ch;\n  margin: 24px auto 0 !important;\n  font-size: 1.1875rem !important;\n  font-weight: 600 !important;\n  line-height: 1.6 !important;\n  color: rgba(255,255,255,.78) !important;\n}\n\n\n\/* ==========================================================================\n   3 \u00b7 REGLER\n   Natives <input type=range>: funktioniert mit Maus, Finger, Pfeiltasten\n   und Screenreader, ohne dass wir Tastaturbedienung nachbauen muessen.\n   ========================================================================== *\/\n\n.fnt-mis__control{\n  max-width: 720px;\n  margin: 0 auto clamp(36px, 4vw, 56px);\n}\n.fnt-mis__ctrlhead{\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 16px;\n  cursor: pointer;\n}\n.fnt-mis__ctrllabel{\n  font-size: 1rem;\n  font-weight: 600;\n  letter-spacing: .07em;\n  text-transform: uppercase;\n  color: rgba(255,255,255,.62);\n}\n.fnt-mis__ctrlvalue{\n  font-family: 'Azonix', 'Montserrat', sans-serif;\n  font-size: clamp(1.5rem, 3.2vw, 2.125rem);\n  letter-spacing: .02em;\n  color: #fff;\n  font-variant-numeric: tabular-nums;\n}\n\n.fnt-mis__range{\n  -webkit-appearance: none; appearance: none;\n  width: 100%;\n  height: 34px;\n  margin: 10px 0 0;\n  background: transparent;\n  cursor: pointer;\n}\n\/* Schiene: der zurueckgelegte Teil wird per JS ueber --p eingefaerbt,\n   damit der Regler den Fortschritt zeigt statt nur die Position.      *\/\n.fnt-mis__range::-webkit-slider-runnable-track{\n  height: 6px; border-radius: 3px;\n  background: linear-gradient(to right,\n              var(--mis-accent) 0 calc(var(--p, 33%)),\n              rgba(255,255,255,.16) calc(var(--p, 33%)) 100%);\n}\n.fnt-mis__range::-moz-range-track{\n  height: 6px; border-radius: 3px; background: rgba(255,255,255,.16);\n}\n.fnt-mis__range::-moz-range-progress{\n  height: 6px; border-radius: 3px; background: var(--mis-accent);\n}\n.fnt-mis__range::-webkit-slider-thumb{\n  -webkit-appearance: none; appearance: none;\n  width: 22px; height: 22px; margin-top: -8px;\n  border-radius: 50%;\n  background: #fff;\n  border: 3px solid var(--mis-accent);\n  box-shadow: 0 0 0 0 rgba(36,130,164,.45);\n  transition: box-shadow .25s ease, transform .25s ease;\n}\n.fnt-mis__range::-moz-range-thumb{\n  width: 22px; height: 22px; border-radius: 50%;\n  background: #fff; border: 3px solid var(--mis-accent);\n}\n.fnt-mis__range:hover::-webkit-slider-thumb,\n.fnt-mis__range:focus-visible::-webkit-slider-thumb{\n  box-shadow: 0 0 0 10px rgba(36,130,164,.22);\n  transform: scale(1.06);\n}\n.fnt-mis__range:focus-visible{ outline: none; }\n\n.fnt-mis__scale{\n  display: flex; justify-content: space-between;\n  margin-top: 6px;\n  font-size: .8125rem;\n  color: rgba(255,255,255,.42);\n  font-variant-numeric: tabular-nums;\n}\n.fnt-mis .fnt-mis__hint{\n  margin: 14px 0 0 !important;\n  font-size: .9375rem !important;\n  color: rgba(255,255,255,.5) !important;\n}\n\n\n\/* ==========================================================================\n   4 \u00b7 KENNZAHLEN  (Kartenmuster identisch zu den Key Features)\n   ========================================================================== *\/\n\n.fnt-mis__stats{\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 14px;\n  margin: 0 0 clamp(40px, 5vw, 64px);\n}\n.fnt-mis__stat{\n  position: relative;\n  background: var(--mis-fill);\n  border: 1px solid var(--mis-line);\n  border-radius: 12px;\n  padding: 34px 22px 28px;\n  text-align: center;\n  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);\n  transition: border-color .35s ease, box-shadow .35s ease;\n}\n.fnt-mis__stat::before{\n  content: \"\";\n  position: absolute; top: -1px; left: 50%;\n  transform: translateX(-50%);\n  width: 40px; height: 3px;\n  background: var(--mis-accent);\n  border-radius: 0 0 2px 2px;\n  transition: width .35s cubic-bezier(.2,.7,.3,1);\n}\n\/* Kurzes Aufleuchten, wenn sich der Wert gerade geaendert hat.\n   Signalisiert \"das hier hat auf deine Eingabe reagiert\".        *\/\n.fnt-mis__stat.is-pulse{\n  border-color: rgba(36,130,164,.85);\n  box-shadow: 0 0 22px rgba(36,130,164,.28), inset 0 0 30px rgba(36,130,164,.12);\n}\n.fnt-mis__stat.is-pulse::before{ width: 68%; }\n\n.fnt-mis__stats dt{\n  order: 2;\n  display: block;\n  margin-top: 14px;\n  font-size: 1rem; font-weight: 600;\n  letter-spacing: .07em; text-transform: uppercase;\n  color: rgba(255,255,255,.78);\n}\n.fnt-mis__stats dd{\n  margin: 0;\n  font-family: 'Azonix', 'Montserrat', sans-serif;\n  font-size: clamp(2.25rem, 4.6vw, 3.25rem);\n  line-height: 1.1;\n  letter-spacing: .02em;\n  color: #fff;\n  font-variant-numeric: tabular-nums;\n}\n.fnt-mis__stats dd i{\n  font-style: normal;\n  font-size: .55em;\n  letter-spacing: .06em;\n  margin-left: .25em;\n}\n.fnt-mis__stats p{\n  margin: 6px 0 0;\n  font-size: .9375rem;\n  color: rgba(255,255,255,.62);\n}\n.fnt-mis__stat.is-key dd{ color: var(--mis-hi); }\n\n\n\/* ==========================================================================\n   5 \u00b7 AKTIONEN\n   ========================================================================== *\/\n\n.fnt-mis__actions{\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  gap: 14px;\n}\n.fnt-mis__btn{\n  display: inline-flex;\n  align-items: center;\n  gap: 18px;\n  font-size: 17px; font-weight: 600; line-height: 1;\n  text-decoration: none;\n  padding: 19px 28px;\n  border-radius: 50px;\n  border: 1px solid transparent;\n  transition: background-color .25s ease, border-color .25s ease,\n              color .25s ease, transform .25s ease;\n}\n.fnt-mis__btn svg{\n  width: 20px; height: 20px; flex-shrink: 0;\n  fill: none; stroke: currentColor;\n  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;\n  transition: transform .25s ease;\n}\n.fnt-mis__btn:hover{ transform: translateY(-2px); }\n.fnt-mis__btn:focus-visible{ outline: 2px solid var(--mis-accent); outline-offset: 3px; }\n\n.fnt-mis__btn--primary{\n  background: var(--mis-accent); border-color: var(--mis-accent); color: #fff;\n}\n.fnt-mis__btn--primary:hover{ background: #2c96bb; border-color: #2c96bb; color: #fff; }\n.fnt-mis__btn--primary:hover svg{ transform: translateY(3px); }\n\n.fnt-mis__btn--ghost{\n  background: rgba(0,0,0,.32); border-color: #fff; color: #fff;\n}\n.fnt-mis__btn--ghost:hover{ background: rgba(255,255,255,.1); color: #fff; }\n.fnt-mis__btn--ghost:hover svg{ transform: translateX(4px); }\n.fnt-mis__btn--ghost b{ font-weight: 600; font-variant-numeric: tabular-nums; }\n\n.fnt-mis .fnt-mis__meta{\n  margin: 22px 0 0 !important;\n  text-align: center;\n  font-size: 13px !important;\n  line-height: 1.7 !important;\n  color: rgba(255,255,255,.5) !important;\n}\n.fnt-mis .fnt-mis__meta em{\n  font-style: normal;\n  color: rgba(255,255,255,.36);\n}\n\n\n\/* ==========================================================================\n   6 \u00b7 RESPONSIVE\n   ========================================================================== *\/\n\n@media (max-width: 1024px){\n  .fnt-mis__stats{ grid-template-columns: repeat(3, 1fr); gap: 10px; }\n  .fnt-mis__stat{ padding: 26px 14px 22px; }\n}\n@media (max-width: 767px){\n  .fnt-mis{ padding: clamp(20px, 4vw, 32px) 22px 56px; }\n  .fnt-mis .fnt-mis__lead{ font-size: 1.0625rem !important; }\n  .fnt-mis__stats{ grid-template-columns: 1fr; }\n  .fnt-mis__stat{ padding: 24px 16px 20px; }\n  .fnt-mis__actions{ flex-direction: column; }\n  .fnt-mis__btn{ justify-content: space-between; font-size: 16px; padding: 18px 24px; }\n}\n\n@media (prefers-reduced-motion: reduce){\n  .fnt-mis__btn, .fnt-mis__btn svg,\n  .fnt-mis__stat, .fnt-mis__stat::before,\n  .fnt-mis__range::-webkit-slider-thumb{ transition: none; }\n  .fnt-mis__btn:hover{ transform: none; }\n}\n\n\/* ===== 4b \u00b7 RAEUMLICHE AUFLOESUNG JE SPEKTRALBAND (ersetzt Schwadbreite mit Bewegungskompensation) ===== *\/\n.fnt-mis .fnt-mis__stats{ grid-template-columns: repeat(2, 1fr); }\n.fnt-mis .fnt-mis__res{ grid-column: 1 \/ -1; display: flex; flex-direction: column; }\n.fnt-mis .fnt-mis__res dt{ order: 0; margin: 0 0 18px; }\n.fnt-mis .fnt-mis__res > p{ order: 3; margin-top: 16px; }\n.fnt-mis .fnt-mis__bands{ order: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; font-size: clamp(1.6rem, 2.8vw, 2.25rem); }\n.fnt-mis .fnt-mis__band{ position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 14px; border: 1px solid var(--mis-line); border-radius: 10px; background: rgba(255,255,255,.02); }\n.fnt-mis .fnt-mis__band::before{ content: \"\"; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 2px 2px; background: var(--band); box-shadow: 0 0 10px var(--band); }\n.fnt-mis .fnt-mis__band.is-pan::before{ width: 60%; background: linear-gradient(90deg,#4f8ff0,#3fc48a,#ef5a4f,#b06ae0); box-shadow: none; }\n.fnt-mis .fnt-mis__band em{ font-family: 'Montserrat', sans-serif; font-style: normal; font-size: .8125rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.78); text-align: center; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; }\n.fnt-mis .fnt-mis__bandval{ line-height: 1.1; color: var(--mis-hi); white-space: nowrap; }\n.fnt-mis .fnt-mis__band.is-pan .fnt-mis__bandval{ color: #fff; }\n.fnt-mis .fnt-mis__band small{ font-family: 'Montserrat', sans-serif; font-size: .8125rem; color: rgba(255,255,255,.55); letter-spacing: .02em; }\n@media (max-width: 1024px){ .fnt-mis .fnt-mis__bands{ gap: 8px; } .fnt-mis .fnt-mis__band{ padding: 14px 4px 12px; } }\n@media (max-width: 767px){\n  .fnt-mis .fnt-mis__stats{ grid-template-columns: 1fr; }\n  .fnt-mis .fnt-mis__bands{ grid-template-columns: repeat(2, 1fr); font-size: 1.6rem; }\n  .fnt-mis .fnt-mis__band.is-pan{ grid-column: 1 \/ -1; }\n  .fnt-mis .fnt-mis__band em{ min-height: 0; }\n}\n<\/style>\n\n<script>\n(function () {\n  'use strict';\n\n  \/* ============================ 1 \u00b7 CONFIG ==============================\n     Referenzwerte des ST-200 bei 500 km. Aendert sich das Datenblatt,\n     genuegt es, diese drei Zahlen anzupassen.                          *\/\n  var REF_H     = 500,   \/\/ km   Referenz-Bahnhoehe\n      REF_GSD   = 1.5,    \/\/ m    GSD bei REF_H\n      REF_SWATH = 11.9,   \/\/ km   Schwadbreite bei REF_H, starre Optik\n      REF_D     = 0.185;  \/\/ m    Oeffnung (Apertur) des Teleskops\n  var BANDS = { blue: 485, green: 560, red: 660, nir: 830, pan: 675 }; \/\/ nm  Bandmitten\n\n  var root = document.querySelector('.fnt-mis');\n  if (!root) return;\n\n  var slider = root.querySelector('#fntAlt');\n  var out    = root.querySelector('#fntAltOut');\n  var ask    = root.querySelector('#fntAsk');\n  var fields = {\n    gsd:    root.querySelector('[data-mis=\"gsd\"]'),\n    swath:  root.querySelector('[data-mis=\"swath\"]'),\n    bands:  [].slice.call(root.querySelectorAll('[data-res]')),\n    alt:    root.querySelector('[data-mis=\"alt\"]')\n  };\n  var cards = [].slice.call(root.querySelectorAll('.fnt-mis__stat'));\n  var reduce = window.matchMedia &&\n               window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n\n  \/* ======================= 2 \u00b7 FORMAT & RECHNUNG ======================== *\/\n\n  \/* Deutsche Schreibweise: Komma als Dezimaltrenner. Die Seite ist sonst\n     uneinheitlich (Key Features mit Komma, Animation mit Punkt) \u2014 hier\n     wird durchgaengig das Komma verwendet.                              *\/\n  function de(n, digits) {\n    return n.toFixed(digits);\n  }\n\n  function werte(h) {\n    var f = h \/ REF_H;\n    return {\n      gsd:    REF_GSD * f,\n      swath:  REF_SWATH * f,\n      res:    function (lam) {\n          \/* Rayleigh: 1,22 * lambda \/ D, auf den Boden projiziert (h in m),\n             nie feiner als die Pixelabtastung (GSD) *\/\n          var g = REF_GSD * f, d = 1.22 * lam * 1e-9 \/ REF_D * h * 1000;\n          \/* Pixelabtastung und Beugung kombiniert (quadratische Summe) *\/\n          return Math.sqrt(g * g + d * d);\n        }\n    };\n  }\n\n\n  \/* ==================== 3 \u00b7 AUSGABE & RUECKMELDUNG ====================== *\/\n\n  var pulseTimer = null;\n\n  function pulse() {\n    if (reduce) return;\n    cards.forEach(function (c) { c.classList.add('is-pulse'); });\n    clearTimeout(pulseTimer);\n    pulseTimer = setTimeout(function () {\n      cards.forEach(function (c) { c.classList.remove('is-pulse'); });\n    }, 420);\n  }\n\n  function render(pulseIt) {\n    var h = parseInt(slider.value, 10);\n    var w = werte(h);\n\n    out.textContent = h + ' km';\n    fields.gsd.textContent    = de(w.gsd, 1);\n    fields.swath.textContent  = de(w.swath, 1);\n    fields.bands.forEach(function (el) {\n      el.textContent = de(w.res(BANDS[el.getAttribute('data-res')]), 1);\n    });\n    fields.alt.textContent    = String(h);\n\n    \/* Der Anfrage-Link traegt die eingestellte Hoehe mit. Damit weiss das\n       Kontaktformular (oder die Person, die die Mail liest), worueber\n       gesprochen wird \u2014 der Regler ist dann nicht nur Deko.            *\/\n    ask.setAttribute('href', '#kontakt');\n\n    \/* Fortschritt der Schiene fuer WebKit einfaerben *\/\n    var p = (h - slider.min) \/ (slider.max - slider.min) * 100;\n    slider.style.setProperty('--p', p.toFixed(1) + '%');\n\n    if (pulseIt) pulse();\n  }\n\n\n  \/* ========================= 4 \u00b7 EREIGNISSE ============================= *\/\n\n  slider.addEventListener('input', function () { render(true); });\n  slider.addEventListener('change', function () { render(true); });\n\n  \/* FNT_ASK \u00b7 Anfrage-Button: springt zum Kontaktformular in der Fusszeile\n     und setzt einen vorformulierten Text mit Produkt und Bahnhoehe ein.\n     Ohne Formular auf der Seite bleibt es ein normaler Anker. *\/\n  var PRODUCT = 'ST-200';\n  ask.addEventListener('click', function (ev) {\n    var form = document.querySelector('#kontakt form.elementor-form') || document.querySelector('form.elementor-form');\n    if (!form) return;\n    ev.preventDefault();\n    var hh = parseInt(slider.value, 10), w = werte(hh);\n    var msg = 'Hello,\\n'\n      + 'I would like to request a datasheet or a design for the ' + PRODUCT + ' at an orbital altitude of ' + hh + ' km.\\n'\n      + '(Configurator: GSD approx. ' + de(w.gsd, 1) + ' m, swath width approx. ' + de(w.swath, 1) + ' km)\\n'\n      + 'Application \/ mission: [please add]\\n'\n      + 'Satellite platform (e.g. 12U \/ 16U CubeSat \/ 50 kg MiniSat): [please add]\\n'\n      + 'Required spectral channels: [please add]\\n'\n      + 'Planned timeline: [please add]\\n'\n      + 'Kind regards';\n    var ta = form.querySelector('textarea');\n    if (ta) {\n      ta.value = msg;\n      ta.dispatchEvent(new Event('input', { bubbles: true }));\n      ta.style.transition = 'box-shadow .4s ease';\n      ta.style.boxShadow = '0 0 0 2px #2482A4, 0 0 24px rgba(36,130,164,.45)';\n      setTimeout(function () { ta.style.boxShadow = ''; }, 2200);\n    }\n    var target = document.getElementById('kontakt') || form;\n    target.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });\n    var first = form.querySelector('input:not([type=\"hidden\"])');\n    setTimeout(function () { if (first) first.focus({ preventScroll: true }); }, reduce ? 0 : 800);\n  });\n\n  render(false);\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-5d66f0a7 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"5d66f0a7\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-4f47dc62\" data-id=\"4f47dc62\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Optical payload \u00b7 Earth observation ST-200 High-resolution 8U payload (excl. sensor &amp; electronics) built around a 185 mm Ritchey-Chr\u00e9tien-Cassegrain telescope. Its 45 MP multispectral sensor and active motion compensation deliver imagery with a GSD (Ground Sampling Distance) of 1.5 m across an 11.9 km swath \u2013 for high-resolution missions. At a glance High-resolution Earth observation [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-10719","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/pages\/10719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/comments?post=10719"}],"version-history":[{"count":4,"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/pages\/10719\/revisions"}],"predecessor-version":[{"id":10731,"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/pages\/10719\/revisions\/10731"}],"wp:attachment":[{"href":"https:\/\/www.test.fantana.at\/test\/wp-json\/wp\/v2\/media?parent=10719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}