/* AERIS — Website
   Keine externen Ressourcen. Keine Webfonts, keine Skripte Dritter, keine Cookies.
   Schriften: ausschliesslich Systemschriften des Endgeräts.
   Keine Inline-Styles, damit die Content-Security-Policy ohne 'unsafe-inline' auskommt. */

:root {
  --bg: #03060d;
  --bg-2: #060d1a;
  --panel: #081326;
  --panel-2: #0b1a30;
  --line: rgba(120, 165, 220, 0.13);
  --line-strong: rgba(120, 165, 220, 0.26);
  --ink: #e8eef8;
  --ink-2: #aebdd2;
  --muted: #7a8ba4;
  --accent: #5aa9f0;
  --accent-soft: rgba(90, 169, 240, 0.09);
  --swiss: #e1261c;

  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  --maxw: 1140px;
  --radius: 14px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

/* ---------- Typografie ---------- */
h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.02em; line-height: 1.16; }
h2 { font-size: clamp(26px, 3vw, 38px); }
h3 { font-size: clamp(18px, 1.5vw, 21px); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
  margin: 0 0 18px; display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; flex: none;
  background: var(--accent); opacity: .75; border-radius: 1px; }

.lede { font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2); max-width: 60ch; }
.mb-20 { margin-bottom: 20px; }
.self-start { justify-self: start; }

/* ---------- Statusband ---------- */
.status-bar {
  position: relative; z-index: 60;
  background: rgba(120, 165, 220, 0.05);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.status-bar .wrap {
  display: flex; gap: 10px; align-items: center; justify-content: center;
  min-height: 34px; text-align: center; flex-wrap: wrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }

/* ---------- Kopfzeile ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(3, 6, 13, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.site-head[data-scrolled="true"] { border-bottom-color: var(--line); background: rgba(3, 6, 13, 0.92); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 66px;
}
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 52px; height: auto; flex: none; border-radius: 7px; display: block; }
.brand-name { font-size: 17px; font-weight: 500; letter-spacing: 0.32em; padding-inline-start: 2px; }
.brand-sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--muted); display: block; margin-top: -2px;
}

.nav { display: flex; align-items: center; gap: 26px; }
.nav a { color: var(--ink-2); font-size: 14px; transition: color 0.2s var(--ease); }
.nav a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .nav { display: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
  border: 1px solid var(--line-strong); color: var(--ink);
  background: transparent; cursor: pointer;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { text-decoration: none; border-color: var(--accent); background: var(--accent-soft); }
.btn-primary { background: #cfe3f7; border-color: transparent; color: #061020; }
.btn-primary:hover { background: #e4eefb; color: #061020; }
.btn-sm { padding: 9px 17px; font-size: 14px; }

/* ---------- Kopf mit Globus ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 92px) clamp(56px, 8vw, 104px);
}
.hero h1 {
  font-size: clamp(26px, 3.1vw, 38px);
  line-height: 1.14; letter-spacing: -0.02em; font-weight: 400;
  margin-bottom: 20px;
}
.hero h1 span, .hero h1 em { display: block; }
.hero h1 em { font-style: normal; color: var(--ink-2); }
.hero-not { max-width: 52ch; font-size: clamp(16px, 1.25vw, 18px); color: var(--ink-2); margin-bottom: 28px; }
.hero-not strong { color: var(--ink); font-weight: 400; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-media {
  position: relative; margin: 0;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #050b15;
}
.hero-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3, 6, 13, 0.18) 0%, transparent 34%, rgba(3, 6, 13, 0.55) 100%);
}
.hero-media figcaption {
  position: absolute; inset-inline-start: 12px; bottom: 10px; z-index: 1;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}

@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; padding-block: clamp(36px, 7vw, 56px) clamp(44px, 8vw, 72px); }
  .hero-media { order: -1; margin-bottom: 12px; }
}

/* ---------- Abschnitte ---------- */
section { position: relative; }
.band { padding-block: clamp(64px, 8vw, 104px); border-top: 1px solid var(--line); }

.section-head { max-width: 68ch; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head h2 { margin-bottom: 16px; }

/* Drei Schritte */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 26px 24px;
  border: 1px solid color-mix(in srgb, var(--swiss) 42%, var(--line));
  border-radius: var(--radius); background: var(--panel);
}
.step { position: relative; overflow: hidden; }

/* Eine helle Kante laeuft ueber den oberen Rand, eine Karte nach der
   anderen. Versetzt, damit die drei als Folge gelesen werden und nicht
   als drei gleichzeitig blinkende Kaesten. Harte Kante, keine Flaeche. */
.step::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%,
    color-mix(in srgb, var(--swiss) 14%, transparent) 34%,
    color-mix(in srgb, var(--swiss) 92%, transparent) 50%,
    color-mix(in srgb, var(--swiss) 14%, transparent) 66%,
    transparent 100%);
  background-size: 55% 100%;
  background-repeat: no-repeat;
  background-position: -60% 0;
  animation: kante-lauf 6.2s cubic-bezier(.45,0,.55,1) infinite;
}
.steps .step:nth-child(2)::before { animation-delay: .85s }
.steps .step:nth-child(3)::before { animation-delay: 1.7s }
@keyframes kante-lauf {
  0%       { background-position: -60% 0 }
  46%, 100% { background-position: 160% 0 }
}

/* Der Titel hebt sich mit, wenn die Kante durchlaeuft. */
.step h3 { transition: color .3s ease; }
.step:hover h3 { color: color-mix(in srgb, var(--swiss) 68%, #ffffff); }

.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-2); font-size: 15px; line-height: 1.6; }

/* Merkmale */
.chips {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
@media (max-width: 880px) { .chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .chips { grid-template-columns: 1fr; } }
.chips li {
  font-size: 14px; color: var(--ink-2);
  border: 1px solid var(--line); border-radius: 999px;
  padding-block: 7px; padding-inline: 13px 15px;
  display: flex; align-items: center; gap: 8px;
}
.chips li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); opacity: 0.7; flex: none;
}

/* Näheklassen */
.prox { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 34px; }
@media (max-width: 760px) { .prox { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .prox { grid-template-columns: 1fr; } }
.prox-card {
  --c: var(--muted);
  padding: 18px 16px; border: 1px solid var(--line);
  border-top: 2px solid var(--c); border-radius: var(--radius);
  background: var(--panel);
}
.prox-card[data-level="white"] { --c: #edf3fc; }
.prox-card[data-level="blue"] { --c: #69b7ff; }
.prox-card[data-level="yellow"] { --c: #ffe169; }
.prox-card[data-level="orange"] { --c: #ffa557; }
.prox-card[data-level="red"] { --c: #ff7a8a; }
.prox-range {
  font-family: var(--mono); font-size: 13px; color: var(--ink);
  font-variant-numeric: tabular-nums; display: block; margin-bottom: 4px;
}
.prox-name { font-size: 15px; color: var(--c); display: block; }
.prox-note { margin-top: 18px; font-size: 15px; color: var(--muted); }
.prox-note strong { color: var(--ink); font-weight: 500; }

/* ---------- Naeheklassen: ruhiger Puls in der eigenen Farbe ----------
   Versetzt von weit nach nah, damit die Reihe als Skala gelesen wird und
   nicht als fuenf gleichzeitig blinkende Warnungen. Die Farbe kommt aus
   --c, also aus derselben Quelle wie der obere Rand. */
.prox:not(.module) .prox-card {
  animation: klasse-puls 3.8s ease-in-out infinite;
  will-change: box-shadow, background-color, border-color;
}
.prox:not(.module) .prox-card:nth-child(1) { animation-delay: 0s }
.prox:not(.module) .prox-card:nth-child(2) { animation-delay: .3s }
.prox:not(.module) .prox-card:nth-child(3) { animation-delay: .6s }
.prox:not(.module) .prox-card:nth-child(4) { animation-delay: .9s }
.prox:not(.module) .prox-card:nth-child(5) { animation-delay: 1.2s }
@keyframes klasse-puls {
  0%, 100% {
    border-top-color: color-mix(in srgb, var(--c) 38%, transparent);
    background-color: var(--panel);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 0%, transparent);
  }
  45% {
    border-top-color: var(--c);
    background-color: color-mix(in srgb, var(--c) 9%, var(--panel));
    box-shadow: 0 0 34px -2px color-mix(in srgb, var(--c) 46%, transparent),
                inset 0 0 26px -12px color-mix(in srgb, var(--c) 70%, transparent);
  }
}
.prox:not(.module) .prox-card .prox-drohne {
  animation: schweben 5.4s ease-in-out infinite, drohne-glimmen 4.6s ease-in-out infinite;
}
.prox:not(.module) .prox-card:nth-child(2) .prox-drohne { animation-delay: -.7s, .34s }
.prox:not(.module) .prox-card:nth-child(3) .prox-drohne { animation-delay: -1.4s, .68s }
.prox:not(.module) .prox-card:nth-child(4) .prox-drohne { animation-delay: -2.1s, 1.02s }
.prox:not(.module) .prox-card:nth-child(5) .prox-drohne { animation-delay: -2.8s, 1.36s }
@keyframes drohne-glimmen {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: .72 }
  45%      { filter: drop-shadow(0 0 11px color-mix(in srgb, var(--c) 85%, transparent));
             opacity: 1 }
}

/* ---------- Drohnenschatten, der durch das Band zieht ----------
   Dunkle Silhouette, kein Leuchten. Sie zieht quer durch das Bild und
   nicht auf den Empfaenger zu: AERIS erzaehlt keine Bedrohungsgeschichte,
   es ordnet ein, was ohnehin vorbeifliegt. */
.schattenflug {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden;
}
.schattenflug svg {
  position: absolute; width: 96px; height: auto; opacity: .16;
  color: #0a1524;
  animation: schatten-zug 46s linear infinite, schatten-hoehe 11s ease-in-out infinite;
}
.schattenflug svg.zwei { width: 58px; opacity: .1;
  animation-duration: 67s, 8.5s; animation-delay: -23s, -3s; }
@keyframes schatten-zug {
  from { transform: translateX(-14vw) }
  to   { transform: translateX(114vw) }
}
@keyframes schatten-hoehe {
  0%, 100% { inset-block-start: 26% }
  50%      { inset-block-start: 38% }
}

@media (prefers-reduced-motion: reduce) {
  .prox:not(.module) .prox-card,
  .prox:not(.module) .prox-card .prox-drohne,
  .schattenflug svg { animation: none !important }
}

/* Vorführung */
.demo-frame-shell {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel);
}
.demo-bar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.demo-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-tab {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: border-color 0.22s var(--ease), color 0.22s var(--ease), background 0.22s var(--ease);
}
.demo-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.demo-tab[aria-selected="true"] { background: var(--accent-soft); border-color: var(--accent); color: #cfe6ff; }
.demo-flag {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); display: flex; align-items: center; gap: 8px;
}
.demo-frame { width: 100%; height: min(70vh, 680px); border: 0; display: block; background: #071426; }
.demo-scenario-note { margin-top: 14px; font-size: 14px; color: var(--muted); max-width: 70ch; }

/* Zahlung und Lizenz */
.price { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 820px) { .price { grid-template-columns: 1fr; } }
.price-box {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background:
    radial-gradient(120% 70% at 50% -10%,
      color-mix(in srgb, var(--accent) 9%, transparent) 0%, transparent 62%),
    var(--panel);
  padding: 32px 28px 30px;
  display: flex; flex-direction: column;
}
/* Akzentkante oben, die beim Ueberfahren voll aufzieht */
.price-box::before {
  content: ""; position: absolute; inset-block-start: 0; inset-inline: 0;
  height: 2px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 0%, var(--accent) 22%, #cfe7ff 50%, var(--accent) 78%, transparent 100%);
  opacity: .5; transition: opacity .3s ease;
}
.price-box:hover::before { opacity: 1; }

/* Die Kennzeichnung als Marke statt als blosse Zeile */
.price-kind { display: inline-block; align-self: flex-start;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 5px 12px; margin-bottom: 14px; }

/* Trennlinie vor der Fusszeile im Stil eines Belegs */
.price-same { border-top-style: dashed; }

.price-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.price-list li { position: relative; padding-inline-start: 22px; color: var(--ink-2); font-size: 15px; line-height: 1.55; }
.price-list li::before {
  content: ""; position: absolute; inset-inline-start: 3px; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.75;
}
.price-same {
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.price-same strong { color: var(--ink); font-weight: 500; }
.locked {
  align-self: flex-start; margin-top: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 7px 14px;
}
.price-cta { align-self: stretch; margin-top: 20px; width: 100%;
  padding: 17px 26px; font-size: 17px; font-weight: 600;
  letter-spacing: -0.005em; }
.price-cta:hover { box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 34%, transparent); }

/* ---------- Preise: Zahl gross, Rechnung sichtbar ---------- */
/* Die Fusszeilen beider Karten sollen auf derselben Höhe stehen, auch wenn
   die Karten unterschiedlich viel Inhalt tragen. */
.price-box > .price-same { margin-top: auto; }

.preis-zeile { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin: 10px 0 2px; }
.preis-waehrung { font-family: var(--mono); font-size: 17px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.preis-zahl { font-size: clamp(42px, 5.4vw, 60px); font-weight: 650;
  letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums;
  background: linear-gradient(170deg, #ffffff 12%, #a9cdf4 88%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.preis-zusatz { font-family: var(--mono); font-size: 11.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 3px 10px; }

/* Staffelleiter: der Preis je Gerät fällt, und man sieht es */
.staffel-titel { font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 16px 0 9px; }
.staffel { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.staffel li { display: grid; grid-template-columns: 1fr 22% auto auto;
  align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.02); border: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease; }
.staffel li:hover { border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.st-menge { font-size: 14.5px; color: var(--ink-2); }
.st-balken { height: 6px; border-radius: 999px; background: rgba(255,255,255,.06);
  overflow: hidden; }
.st-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #bfe0ff);
  transform-origin: left center; animation: balken-auf 1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes balken-auf { from { transform: scaleX(0); opacity: .2 }
                        to   { transform: scaleX(1); opacity: 1 } }
.st-w100 { width: 100%; } .st-w81 { width: 81%; } .st-w68 { width: 68%; }
.staffel li:nth-child(2) .st-fill { animation-delay: .1s }
.staffel li:nth-child(3) .st-fill { animation-delay: .2s }
.st-preis { font-family: var(--mono); font-size: 16px; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: end; min-width: 48px; }
.st-je { font-family: var(--mono); font-size: 13.5px; color: var(--muted);
  text-align: end; min-width: 82px; }
.st-je b { color: var(--accent); font-weight: 600; }
.staffel li.st-frei { grid-template-columns: 1fr auto; }

/* Modulpreise als eigenes Raster */
.modulraster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 16px; }
@media (max-width: 880px) { .modulraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .modulraster { grid-template-columns: 1fr; } }
.modul-preis { position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); padding: 16px 16px 14px;
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .25s ease, transform .25s ease; }
.modul-preis:hover { border-color: var(--accent); transform: translateY(-3px); }
.mp-name { font-size: 14px; color: var(--ink-2); }
.mp-preis { font-size: 34px; font-weight: 650; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.mp-preis em { font-family: var(--mono); font-style: normal; font-size: 15px;
  letter-spacing: .08em; color: var(--ink-2); margin-inline-end: 7px;
  vertical-align: 3px; font-weight: 500; }
.mp-geraet { font-family: var(--mono); font-size: 13.5px; color: var(--ink-2);
  margin-top: 4px; }

.einwilligung { margin-top: 26px; padding: 18px 20px 16px;
  border-radius: var(--radius); border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.018); }
.einw-titel { margin: 0 0 11px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.einw-liste { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; }
.einw-liste li { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.einw-liste li::marker { color: var(--accent); font-family: var(--mono); }
.einw-note { margin: 13px 0 0; font-size: 13.5px; line-height: 1.55;
  color: var(--muted); }
.einw-note a { color: var(--accent); }

.modul-summe { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
  margin: 14px 0 0; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: rgba(105,183,255,.05); }
.ms-text { font-size: 14px; color: var(--ink-2); }
.ms-preis { font-size: 26px; font-weight: 650; letter-spacing: -0.02em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.ms-spar { font-family: var(--mono); font-size: 13.5px; letter-spacing: .1em;
  color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .st-fill { animation: none !important; transform: none !important }
  .modul-preis:hover { transform: none }
}

/* Kontakt */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
textarea { width: 100%; resize: vertical; min-height: 110px;
  font: inherit; color: var(--ink); background: rgba(255,255,255,.03);
  border: 1px solid var(--line-strong); border-radius: 9px; padding: 11px 13px; }
textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px;
  border-color: var(--accent); }
.kontakt-direkt { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.kontakt-direkt a { color: var(--accent); }
.field label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.field input, .field select {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 16px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--panel-2); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.check { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--ink-2); }
.check input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); }
.form-note { font-size: 13px; color: var(--muted); line-height: 1.6; }
.form-status { font-size: 15px; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); }
.form-status[hidden] { display: none; }

/* Fusszeile */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-2); padding-block: 44px 36px; }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: 20px 32px;
  align-items: center; justify-content: space-between;
}
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-links a { color: var(--ink-2); font-size: 15px; }
.foot-links a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: 13px; color: var(--muted);
}
.swiss-mark { display: inline-flex; align-items: center; gap: 8px; }
.swiss-cross { width: 13px; height: 13px; background: var(--swiss); border-radius: 2px; position: relative; flex: none; }
.swiss-cross::before, .swiss-cross::after { content: ""; position: absolute; background: #fff; border-radius: 0.5px; }
.swiss-cross::before { left: 5.5px; top: 2.6px; width: 2px; height: 7.8px; }
.swiss-cross::after { top: 5.5px; left: 2.6px; height: 2px; width: 7.8px; }

/* Einblendung beim Scrollen */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.reveal[data-visible="true"] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* Rechtsseiten */
/* ---------- Rechtsseiten ----------
   Dieselbe Bildsprache wie die Hauptseite, aber ruhiger: Das Raster liegt
   fest hinter der Seite statt im Inhaltsbereich, und der Text sitzt auf
   einer eigenen Flaeche. Ein Rechtstext soll lesbar sein, nicht flirren. */
.rechtsseite { position: relative; }
.rechtsseite::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -2;
  background-image:
    radial-gradient(120% 90% at 50% -20%,
      color-mix(in srgb, var(--accent) 13%, transparent) 0%, transparent 62%),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 9%, transparent) 0 1px, transparent 1px 149px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 5%, transparent) 0 1px, transparent 1px 61px);
  opacity: .6;
}
.rechtsseite::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 48px);
  opacity: .5;
  animation: rechts-zug 34s linear infinite;
}
@keyframes rechts-zug {
  from { background-position: 0 0 }
  to   { background-position: 0 144px }
}

.rechtsseite .doc {
  position: relative; z-index: 1;
  margin-block: 34px 70px;
  padding: 46px clamp(22px, 4vw, 54px) 40px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent) 6%, transparent) 0,
      transparent 260px),
    rgba(8, 15, 28, .82);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
/* Eine Akzentkante oben, damit das Blatt einen Kopf hat. */
.rechtsseite .doc::before {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline: 26px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
    transparent 0%, var(--accent) 24%, #cfe7ff 50%, var(--accent) 76%, transparent 100%);
  opacity: .7;
}
.rechtsseite .site-head { background: rgba(5, 11, 21, .88); }

@media (prefers-reduced-motion: reduce) {
  .rechtsseite::after { animation: none !important }
}

.doc { padding-block: 56px 84px; max-width: 76ch; }
.doc h1 { font-size: clamp(28px, 4vw, 38px); margin-bottom: 22px; }
.doc h2 { font-size: 21px; margin: 34px 0 12px; }
.doc p, .doc li { color: var(--ink-2); font-size: 16px; }
.doc .placeholder {
  border: 1px dashed var(--line-strong); background: var(--panel);
  border-radius: var(--radius); padding: 20px 22px; color: var(--ink-2); font-size: 15px;
}

/* ---------- Sprachwahl ---------- */
.head-actions { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; align-items: center; }
.lang-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-family: inherit; font-size: 14px;
  padding-block: 8px; padding-inline: 14px 30px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 15px center, right 10px center;
  background-repeat: no-repeat;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
[dir="rtl"] .lang-select {
  padding-inline: 14px 30px;
  background-position: left 10px center, left 15px center;
}
.lang-select:hover { border-color: var(--accent); color: var(--ink); }
.lang-select option { background: #0b1a30; color: var(--ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Arabisch: lateinische Werte bleiben links-nach-rechts lesbar */
[dir="rtl"] .prox-range,
[dir="rtl"] .brand-name,
[dir="rtl"] .brand-sub { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .eyebrow::before { order: 1; }

@media (max-width: 520px) {
  .head-actions .btn-primary { display: none; }
}

/* ---------- Rechtstexte ----------
   Die Dokumente in AERIS\ sind fuer den Druck gesetzt. Damit sie hier
   nicht fremd wirken, bekommen ihre Klassen eine Entsprechung im
   Farbschema der Seite. Kein Inline-Style: die CSP erlaubt nur 'self'. */
.doc .lead { font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.doc .meta { font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  color: var(--ink-2); margin-bottom: 30px; }
.doc h3 { font-size: 17px; margin: 22px 0 8px; }
.doc ol.abs { margin: 0 0 0 20px; padding: 0; }
.doc ol.abs > li { margin-bottom: 9px; }
.doc ul.k { margin: 0 0 0 20px; padding: 0; }
.doc ul.k > li { margin-bottom: 6px; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0 20px; }
.doc th, .doc td { text-align: start; vertical-align: top; padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.doc th { color: var(--ink); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; }
.doc .merk { border-inline-start: 3px solid var(--accent); padding: 10px 0 10px 16px;
  margin: 18px 0; color: var(--ink); font-size: 16px; }
.doc .kasten, .doc .formular { border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 18px 20px; margin: 18px 0;
  background: var(--panel); font-size: 15px; }
.doc .formular { font-family: var(--mono); line-height: 2.1; }
.doc .formular .l, .doc .fuell2 { border-bottom: 1px solid var(--line-strong);
  display: inline-block; min-width: 90px; }
.doc .fuell2 { color: var(--accent); font-family: var(--mono); font-size: 13px; }
.doc .box { display: inline-block; width: 11px; height: 11px;
  border: 1px solid var(--line-strong); border-radius: 2px; margin-inline-end: 6px; }
.doc .zitat { border-inline-start: 3px solid var(--line-strong);
  padding: 8px 0 8px 14px; margin: 14px 0; font-size: 15px; color: var(--ink-2); }
.doc .anschrift { font-size: 16px; line-height: 1.7; margin: 8px 0 14px; color: var(--ink); }
.doc .hinw { font-size: 13px; color: var(--ink-2); margin: -6px 0 14px; }
.doc .kuenftig { font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--accent); }
.doc .pb { break-before: auto; }

/* ---------- Abschnitt Grenzen ---------- */
.gap-more { margin-top: 26px; }
.prox-4 { grid-template-columns: repeat(4, 1fr); }
.prox-4 .prox-card { text-align: start; }
.prox-4 .prox-range { display: block; margin-top: 6px; text-transform: none;
  letter-spacing: 0; font-size: 13px; color: var(--ink-2); }
@media (max-width: 880px) { .prox-4 { grid-template-columns: 1fr 1fr; } }

/* Ausbaumodule: vorbereitet, nicht versprochen */
.prox.module { align-items: start; }
/* Es ist immer hoechstens ein Aufklapper offen (details name="hardware"),
   deshalb bleibt die Reihe ruhig. Die Karten bekommen eine gemeinsame
   Mindesthoehe, damit die geschlossenen im Raster auf einer Linie stehen. */
.prox.module .prox-card { min-height: 196px; }
@media (max-width: 880px) { .prox.module .prox-card { min-height: 0; } }
.prox.module .prox-card { --c: var(--accent); position: relative;
  transition: border-color .25s ease, transform .25s ease, background .25s ease; }
.prox.module .prox-card:hover { transform: translateY(-3px);
  border-color: var(--accent); }
.prox.module .prox-name { font-size: 16px; color: var(--ink);
  min-height: 2.5em; line-height: 1.25; }
.prox.module .prox-range { font-family: inherit; font-size: 14px;
  line-height: 1.5; color: var(--muted); margin-top: 8px;
  min-height: 7.5em; }
.modul-status { display: inline-block; margin-top: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 999px; padding: 2px 9px; }
.modul-status::before { content: ""; display: inline-block; width: 5px;
  height: 5px; border-radius: 50%; background: var(--accent);
  margin-inline-end: 6px; vertical-align: middle;
  animation: modul-puls 2.6s ease-in-out infinite; }
@keyframes modul-puls { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
/* Aufklappbare Hardware-Angabe je Modul */
.hw { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.hw > summary { cursor: pointer; list-style: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 8px; }
.hw > summary::-webkit-details-marker { display: none; }
.hw > summary { position: relative; padding-inline-start: 28px; padding-block: 3px;
  border-radius: 7px; transition: color .2s ease; }
.hw > summary::before { content: ""; position: absolute; inset-inline-start: 0;
  top: 50%; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%;
  border: 1px solid var(--accent);
  background: linear-gradient(currentColor, currentColor) center / 9px 1.5px no-repeat;
  transition: background-color .22s ease, box-shadow .22s ease; }
.hw > summary::after { content: ""; position: absolute; inset-inline-start: 8.75px;
  top: 50%; width: 1.5px; height: 9px; margin-top: -4.5px; background: currentColor;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s ease; }
.hw[open] > summary::after { transform: scaleY(0); opacity: 0; }
.hw[open] > summary::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.hw > summary:hover { color: #d6ebff; }
.hw > summary:hover::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.hw > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hw-inhalt { margin-top: 12px; padding: 14px 14px 13px;
  border-radius: 10px; border: 1px solid var(--line-strong);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent) 7%, transparent) 0%,
    rgba(255,255,255,.015) 55%, transparent 100%);
  animation: hw-auf .3s cubic-bezier(.2,.8,.2,1) both; }
.prox.module .prox-card:has(.hw[open]) { border-color: var(--accent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 16%, transparent); }
@keyframes hw-auf { from { opacity: 0; transform: translateY(-5px) } }
.hw-bild { display: block; width: 100%; max-width: 168px; height: auto;
  margin: 2px auto 14px; color: var(--accent);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent) 34%, transparent)); }
.hw-bild .hl { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .85; }
.hw-bild .hl2 { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: .45; }
.hw-bild .hf { fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .6; }
.hw-bild .hp { fill: currentColor; opacity: .9; }
.hw-daten { margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: 5px 12px; align-items: baseline; }
.hw-daten dt { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.hw-daten dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.hw-daten dd.hw-modell { font-family: var(--mono); font-size: 13.5px; color: var(--ink); }
.hw-warn { margin: 10px 0 0; padding: 8px 11px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: rgba(255,255,255,.02);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.hw-hinweis { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6;
  color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .modul-status::before { animation: none; opacity: 1 }
  .hw-inhalt { animation: none }
  .prox.module .prox-card:hover { transform: none }
}

.price-tag { font-size: 30px; font-weight: 600; letter-spacing: -0.02em;
  margin: 6px 0 2px; font-variant-numeric: tabular-nums; }

.price-steps { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 2px; line-height: 1.5; }
.modules-intro { margin-top: 30px; }

/* ---------- Kuppel im Kopfbereich ----------
   Was das Bild behauptet, muss stimmen: Ein Gerät steht auf dem Boden und
   hört zu. Bewusst KEIN drehender Radarstrahl, kein Suchkegel, keine Welle,
   die vom Empfänger nach aussen läuft. Ein Strahl oder Ring, der nach aussen
   wandert, zeigt Aussenden - AERIS sendet nicht. Alle Bewegung läuft deshalb
   nach innen. Die einzige Bewegung, die von einem Punkt nach aussen geht, ist
   der Ring um eine Drohne: die Drohne sendet ihre Kennung tatsächlich aus,
   und genau das empfängt AERIS.

   Die fünf Farben sind die fünf Näheklassen und stehen fest:
   weiss > 5 km, blau > 2 km, gelb > 500 m, orange ab 100 m, rot < 100 m. */
.kuppel { aspect-ratio: 600 / 392; overflow: hidden; }

/* Flächen der Näheklassen: weit genug zurückgenommen, dass die Linien
   führen und nicht die Flächen. */
.kuppel .kf-weiss  { opacity: .05 }
.kuppel .kf-blau   { opacity: .07 }
.kuppel .kf-gelb   { opacity: .08 }
.kuppel .kf-orange { opacity: .10 }
.kuppel .kf-rot    { opacity: .16 }

.kuppel .k-speichen { opacity: .13 }
.kuppel .k-meridiane { opacity: .16 }
.kuppel .k-aussen { opacity: .30 }

/* Die vier Trennflächen stehen ruhig. Sie pulsieren nicht: es leuchtet
   nur die, durch die gerade etwas hindurchgeht. */
.kuppel .schale { opacity: .42 }
.kuppel .s4 { opacity: .55 }

/* Das Aufleuchten. Eine Form, ein Verlauf, viele Zeitpunkte: der Versatz
   ist genau der Moment, in dem eine Flugbahn die Fläche schneidet. */
.kuppel .blitz { opacity: 0; animation: schale-durchlauf 14s linear infinite; }
@keyframes schale-durchlauf {
  0%    { opacity: 0 }
  1.5%  { opacity: .95 }
  12%   { opacity: 0 }
  100%  { opacity: 0 }
}
/* Anflug (14 s): Durchtritt bei 0,85 s / 4,71 s / 8,69 s / 12,31 s */
.kuppel .b1-m { animation-delay: .70s }
.kuppel .b2-m { animation-delay: 4.56s }
.kuppel .b3-m { animation-delay: 8.54s }
.kuppel .b4-m { animation-delay: 12.16s }
/* Durchflug (10 s): hinein und wieder hinaus */
.kuppel .b2-n1, .kuppel .b2-n2,
.kuppel .b3-n1, .kuppel .b3-n2,
.kuppel .b4-n1, .kuppel .b4-n2 { animation-duration: 10s }
.kuppel .b2-n1 { animation-delay: .64s }
.kuppel .b2-n2 { animation-delay: 9.07s }
.kuppel .b3-n1 { animation-delay: 2.12s }
.kuppel .b3-n2 { animation-delay: 7.59s }
.kuppel .b4-n1 { animation-delay: 3.55s }
.kuppel .b4-n2 { animation-delay: 6.15s }

/* Eintreffende Ringe, von der Aussenkante zum Empfänger */
.kuppel .er { transform-origin: 300px 300px; opacity: 0; }
.kuppel .e1 { animation: ring-einlauf 4.6s cubic-bezier(.36,0,.5,1) infinite; }
.kuppel .e2 { animation: ring-einlauf 4.6s cubic-bezier(.36,0,.5,1) 1.53s infinite; }
.kuppel .e3 { animation: ring-einlauf 4.6s cubic-bezier(.36,0,.5,1) 3.06s infinite; }
@keyframes ring-einlauf {
  0%   { transform: scale(1);    opacity: 0 }
  11%  { opacity: .52 }
  74%  { opacity: .34 }
  100% { transform: scale(.075); opacity: 0 }
}

/* Empfangsstrahlen: die Striche wandern nach innen. Der Verlauf trägt die
   Näheklassen von weiss aussen bis rot am Gerät. */
.kuppel .signal { stroke-dasharray: 4 14; opacity: .55;
  animation: signal-einlauf 2.1s linear infinite; }
.kuppel .sig-a { opacity: .72 }
.kuppel .sig-b { animation-duration: 2.9s }
.kuppel .sig-c { animation-duration: 3.6s }
@keyframes signal-einlauf { to { stroke-dashoffset: -36; } }

/* Die Objekte. Jedes trägt seine Näheklasse als Farbe, und die Farbe
   springt genau an der Trennfläche um - nichts wird überblendet. */
.kuppel .flug { transform-origin: 0 0; }
.kuppel .flug-zeichen { opacity: .9 }
.kuppel .flug-ring { transform-origin: 0 0; opacity: 0;
  animation: flug-puls 2.4s ease-out infinite; }
.kuppel .fn .flug-ring { animation-duration: 1.7s }
.kuppel .ff .flug-ring { animation-duration: 3.4s }
@keyframes flug-puls {
  0%       { transform: scale(.35); opacity: .7 }
  70%,100% { transform: scale(2.1); opacity: 0 }
}
.kuppel .rotor { transform-box: fill-box; transform-origin: 50% 50%;
  animation: rotor .62s linear infinite; }
.kuppel .fr2 { animation-delay: -.16s } .kuppel .fr3 { animation-delay: -.31s }
.kuppel .fr4 { animation-delay: -.47s }

/* Fern und hoch: bleibt jenseits der 5-km-Fläche, also weiss. */
.kuppel .ff { color: #edf3fc; transform: translate(300px, 82px) scale(.5);
  animation: flug-drift 34s linear infinite; }
@keyframes flug-drift {
  0%   { transform: translate(520px, 77.3px) scale(.5); opacity: 0 }
  9%   { opacity: .8 }
  91%  { opacity: .8 }
  100% { transform: translate(80px, 88px) scale(.5); opacity: 0 }
}

/* Anflug von rechts oben, geradewegs auf den Empfänger zu. */
.kuppel .fm { color: #ffe169; transform: translate(418.8px, 241.2px) scale(.92);
  animation: anflug 14s linear infinite; }
@keyframes anflug {
  0%    { transform: translate(548.4px, 177px) scale(.78); opacity: 0; color: #edf3fc }
  5%    { opacity: 1 }
  6.0%  { color: #edf3fc }
  6.2%  { color: #69b7ff }
  33.6% { color: #69b7ff }
  33.8% { color: #ffe169 }
  62.0% { color: #ffe169 }
  62.2% { color: #ffa557 }
  87.9% { color: #ffa557 }
  88.1% { color: #ff7a8a }
  94%   { opacity: 1 }
  100%  { transform: translate(339.6px, 280.4px) scale(1.06); opacity: 0; color: #ff7a8a }
}

/* Durchflug quer durch die Kuppel, auf den Betrachter zu: grösser, je näher. */
.kuppel .fn { color: #ffa557; transform: translate(340px, 256px) scale(.95);
  animation: durchflug 10s linear infinite; }
@keyframes durchflug {
  0%    { transform: translate(340px, 200.3px) scale(.72); opacity: 0; color: #69b7ff }
  5%    { opacity: .95 }
  7.8%  { color: #69b7ff }
  8.0%  { color: #ffe169 }
  22.5% { color: #ffe169 }
  22.7% { color: #ffa557 }
  36.9% { color: #ffa557 }
  37.1% { color: #ff7a8a }
  62.9% { color: #ff7a8a }
  63.1% { color: #ffa557 }
  77.3% { color: #ffa557 }
  77.5% { color: #ffe169 }
  92.1% { color: #ffe169 }
  92.3% { color: #69b7ff }
  95%   { opacity: .95 }
  100%  { transform: translate(340px, 311.8px) scale(1.18); opacity: 0; color: #69b7ff }
}

/* Ankunft am Empfänger: das Gerät wird heller. Der Hof ändert nur seine
   Helligkeit und waechst nicht nach aussen - er ist kein Sendesignal. */
.kuppel .empfaenger { animation: empf-puls 14s ease-in-out infinite; }
.kuppel .empfaenger-hof { opacity: .18; animation: empf-hof 14s ease-in-out infinite; }
@keyframes empf-puls {
  0%    { opacity: .34 }
  6.0%  { opacity: .34 }
  7.5%  { opacity: .9 }
  13%   { opacity: .38 }
  33.6% { opacity: .38 }
  35%   { opacity: .92 }
  41%   { opacity: .4 }
  62.0% { opacity: .4 }
  63.5% { opacity: .96 }
  70%   { opacity: .42 }
  87.9% { opacity: .42 }
  89.5% { opacity: 1 }
  96%   { opacity: .34 }
  100%  { opacity: .34 }
}
@keyframes empf-hof {
  0%    { opacity: .16 }
  7.5%  { opacity: .32 }
  13%   { opacity: .17 }
  35%   { opacity: .38 }
  41%   { opacity: .18 }
  63.5% { opacity: .46 }
  70%   { opacity: .20 }
  89.5% { opacity: .62 }
  96%   { opacity: .16 }
  100%  { opacity: .16 }
}

/* Reduzierte Bewegung: alles steht still, das Bild bleibt vollständig.
   Ein Objekt je Entfernung, ein Ring auf halbem Weg, das Gerät leuchtet. */
@media (prefers-reduced-motion: reduce) {
  .kuppel .er, .kuppel .blitz, .kuppel .signal, .kuppel .flug,
  .kuppel .flug-ring, .kuppel .rotor, .kuppel .ff, .kuppel .fm, .kuppel .fn,
  .kuppel .empfaenger, .kuppel .empfaenger-hof {
    animation: none !important; animation-delay: 0s !important;
  }
  .kuppel .blitz { opacity: 0; }
  .kuppel .e1, .kuppel .e3 { opacity: 0; }
  .kuppel .e2 { opacity: .34; transform: scale(.58); }
  .kuppel .signal { opacity: .6; stroke-dasharray: none; }
  .kuppel .flug-ring { opacity: .34; transform: scale(1.5); }
  .kuppel .rotor { transform: none; opacity: .95; }
  .kuppel .ff { opacity: .8; transform: translate(300px, 82px) scale(.5); }
  .kuppel .fm { opacity: 1; transform: translate(418.8px, 241.2px) scale(.92); }
  .kuppel .fn { opacity: .95; transform: translate(340px, 256px) scale(.95); }
  .kuppel .empfaenger { opacity: .9; }
  .kuppel .empfaenger-hof { opacity: .3; }
}

/* ---------- Drohnenzeichen in den Näheklassen ---------- */
.prox-drohne { display: block; width: 46px; height: auto; color: var(--c);
  margin: 0 0 10px; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) 30%, transparent)); }

/* ---------- Gestaffelte Einblendung ----------
   Laeuft erst, wenn der Abschnitt sichtbar wird, und nur einmal.
   Bei reduzierter Bewegung steht alles sofort. */
.reveal .chips li, .reveal .prox-card, .reveal .step, .reveal .price-box {
  opacity: 0; transform: translateY(8px);
}
.reveal[data-visible="true"] .chips li,
.reveal[data-visible="true"] .prox-card,
.reveal[data-visible="true"] .step,
.reveal[data-visible="true"] .price-box {
  animation: aufblenden .5s var(--ease, ease-out) forwards;
}
.reveal[data-visible="true"] .chips li:nth-child(1),
.reveal[data-visible="true"] .prox-card:nth-child(1),
.reveal[data-visible="true"] .step:nth-child(1),
.reveal[data-visible="true"] .price-box:nth-child(1) { animation-delay: .04s }
.reveal[data-visible="true"] .chips li:nth-child(2),
.reveal[data-visible="true"] .prox-card:nth-child(2),
.reveal[data-visible="true"] .step:nth-child(2),
.reveal[data-visible="true"] .price-box:nth-child(2) { animation-delay: .10s }
.reveal[data-visible="true"] .chips li:nth-child(3),
.reveal[data-visible="true"] .prox-card:nth-child(3),
.reveal[data-visible="true"] .step:nth-child(3) { animation-delay: .16s }
.reveal[data-visible="true"] .chips li:nth-child(4),
.reveal[data-visible="true"] .prox-card:nth-child(4) { animation-delay: .22s }
.reveal[data-visible="true"] .chips li:nth-child(5),
.reveal[data-visible="true"] .prox-card:nth-child(5) { animation-delay: .28s }
.reveal[data-visible="true"] .chips li:nth-child(6) { animation-delay: .34s }
@keyframes aufblenden { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal .chips li, .reveal .prox-card, .reveal .step, .reveal .price-box {
    opacity: 1; transform: none; animation: none !important;
  }
}

/* ---------- Verweis von der Lücke zum Preis ---------- */
.gap-preis { margin-top: 18px; }
.gap-preis a { color: var(--accent); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: border-color .2s ease; }
.gap-preis a:hover { border-bottom-color: var(--accent); }

/* ---------- Bewegung ----------
   Kurz, klein, gerichtet. Ein Werkzeug fuer sicherheitsnahe Arbeit darf
   praezise wirken, nicht verspielt: 8 bis 12 px Weg, 0,35 bis 0,5 s,
   immer ease-out, nie federnd. Alles unter prefers-reduced-motion aus. */

/* Auftritt der Buehne, gestaffelt */
.hero h1, .hero .eyebrow, .hero-not, .hero-actions, .hero-media {
  animation: einlauf .6s cubic-bezier(.22,.61,.36,1) backwards;
}
.hero .eyebrow { animation-delay: .05s }
.hero h1       { animation-delay: .12s }
.hero-not      { animation-delay: .20s }
.hero-actions  { animation-delay: .28s }
.hero-media    { animation-delay: .16s }
@keyframes einlauf { from { opacity: 0; transform: translateY(12px) } }

/* Abschnittskopf beim Hereinscrollen */
.reveal .section-head { opacity: 0; transform: translateY(10px); }
.reveal[data-visible="true"] .section-head {
  animation: aufblenden .55s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Karten heben sich unter dem Zeiger */
.step, .prox-card, .price-box, .demo-frame-shell {
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              border-color .25s ease, box-shadow .25s ease;
}
.step:hover, .prox-card:hover { transform: translateY(-3px); }
.prox-card:hover { border-color: var(--line-strong); }
.step:hover { border-color: var(--swiss);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--swiss) 20%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .step::before { animation: none !important; background-position: 50% 0 }
}
.price-box:hover {
  transform: translateY(-4px); border-color: var(--accent);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.prox-card:hover .prox-drohne { filter: drop-shadow(0 0 9px var(--c)); }
.prox-drohne { transition: filter .25s ease; }

/* Merkmalskacheln */
.chips li { transition: border-color .2s ease, transform .2s ease; }
.chips li:hover { border-color: var(--line-strong); transform: translateY(-2px); }

/* Navigation: Unterstrich waechst aus der Mitte */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: -5px; height: 1px;
  background: var(--accent); transition: left .25s ease, right .25s ease;
}
.nav a:hover::after { left: 0; right: 0; }

/* Schaltflaechen */
.btn { transition: transform .18s cubic-bezier(.22,.61,.36,1),
                   box-shadow .22s ease, background-color .2s ease,
                   border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 28%, transparent); }
.btn:active { transform: translateY(0); }

/* Reiter der Vorfuehrung */
.demo-tab { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }

/* Sichtbarer Fokus fuer Tastaturbedienung */
a:focus-visible, button:focus-visible, select:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .eyebrow, .hero-not, .hero-actions, .hero-media,
  .reveal .section-head { animation: none !important; opacity: 1; transform: none; }
  .step, .prox-card, .price-box, .chips li, .btn, .nav a::after,
  .prox-drohne, .demo-frame-shell { transition: none !important; }
  .step:hover, .prox-card:hover, .price-box:hover, .chips li:hover,
  .btn:hover { transform: none; }
}

/* ---------- Drehende Rotoren ----------
   Die Ellipse wird in der Breite gestaucht und wieder geoeffnet. Das liest
   sich als Rotor in Schraegsicht, ohne dass etwas wirklich rotiert. */
.prox-drohne .rotor { transform-box: fill-box; transform-origin: 50% 50%;
  animation: rotor .62s linear infinite; }
.prox-drohne .r2 { animation-delay: -.16s } .prox-drohne .r3 { animation-delay: -.31s }
.prox-drohne .r4 { animation-delay: -.47s }
@keyframes rotor {
  0%,100% { transform: scaleX(1);   opacity: .95 }
  50%     { transform: scaleX(.12); opacity: .55 }
}
.prox-card:hover .prox-drohne .rotor { animation-duration: .34s; }

/* Leichtes Schweben des ganzen Zeichens */
.prox-drohne { animation: schweben 3.6s ease-in-out infinite; }
.prox-card:nth-child(2) .prox-drohne { animation-delay: -.7s }
.prox-card:nth-child(3) .prox-drohne { animation-delay: -1.4s }
.prox-card:nth-child(4) .prox-drohne { animation-delay: -2.1s }
.prox-card:nth-child(5) .prox-drohne { animation-delay: -2.8s }
@keyframes schweben { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

/* ---------- Technischer Untergrund: Wasserfall eines Empfaengers ----------
   Kein Karo mehr. Der Hintergrund zeichnet das, was ein Empfaenger
   zeichnet, waehrend er zuhoert:

     - stehende senkrechte Spuren in unregelmaessigen Abstaenden und
       verschiedener Helligkeit = belegte Kanaele. Sie wandern nicht, denn
       ein Kanal liegt, wo er liegt;
     - waagrechte, sehr feine Zeilen, die stetig nach unten weglaufen =
       die Zeitachse des Wasserfalls. Zwei Zeilenlagen mit verschiedener
       Teilung und verschiedenem Tempo, das ergibt Tiefe;
     - ein breiter, weicher Lichtschein, der quer darueber zieht.

   Alle Bewegung laeuft herein oder vorbei, nie hinaus: nichts kreist,
   nichts laeuft von einem Punkt nach aussen, es gibt keine Ringe und
   keinen Kegel. AERIS sendet nicht, und der Hintergrund tut es auch
   nicht. */
/* ---------- Technischer Untergrund ----------
   Die Kanal- und Wasserfalldarstellung, aber als EINE Lage fuer die ganze
   Seite. Vorher hatte jeder Abschnitt seine eigene, mit eigenem Ursprung
   und eigenem Versatz; an der Abschnittsgrenze trafen zwei verschobene
   Muster aufeinander und dazwischen lag eine ausgeblendete Zone, das war
   das Geschmiere. Ueber die volle Seitenhoehe gibt es keine Grenze, an
   der etwas brechen koennte, also braucht es auch keine Ueberblendung.

   Was man sieht: stehende senkrechte Spuren wie belegte Funkkanaele, und
   waagrechte Zeilen, die als Zeitachse nach unten weglaufen. Alle Linien
   sind hart, 1 Pixel, ohne Weichzeichnung. Bewegung laeuft herein und
   vorbei, nie nach aussen: AERIS sendet nicht. */
main { position: relative; z-index: 0; }

/* Die Kanaele. Teilerfremde Abstaende, damit sich das Muster erst nach
   sehr langer Strecke wiederholt. Sie stehen still; nur ihre Helligkeit
   wechselt, so wie Empfang kommt und geht. */
main::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -2;
  background-image:
    radial-gradient(circle at 0 0,
      color-mix(in srgb, var(--accent) 34%, transparent) 0 1.1px, transparent 1.2px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 24%, transparent) 0 1px, transparent 1px 149px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 11%, transparent) 0 1px, transparent 1px 61px),
    repeating-linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 6%,  transparent) 0 1px, transparent 1px 37px);
  background-size: 149px 48px, auto, auto, auto;
  opacity: .55;
  will-change: opacity;
  animation: kanal-empfang 13s ease-in-out infinite;
}

/* Die Zeitachse. Zwei Zeilenlagen, gleiche Richtung, klar verschiedenes
   Tempo, das ergibt Tiefe. Je Durchlauf verschiebt sich jede Lage um ein
   ganzes Vielfaches ihrer eigenen Teilung, darum springt nichts. */
main::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background-image:
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--accent) 13%, transparent) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--accent) 6%,  transparent) 0 1px, transparent 1px 9px);
  opacity: .5;
  will-change: background-position;
  animation: wasserfall 19s linear infinite;
}

/* Die Messzeile. Ein Empfaenger, der einen Wasserfall zeichnet, setzt die
   neueste Zeile immer oben ab; die Linie laeuft deshalb nach unten durch.
   Harte Kante, kurzer Schweif, fest im Bild stehend, damit sie beim
   Scrollen nicht mitrutscht. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(180deg,
    transparent 0,
    color-mix(in srgb, var(--accent) 11%, transparent) 62px,
    color-mix(in srgb, var(--accent) 46%, transparent) 70px,
    transparent 71px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 0 -100%;
  will-change: background-position;
  animation: messzeile 7.5s linear infinite;
}
@keyframes messzeile {
  from { background-position: 0 -100% }
  to   { background-position: 0 200% }
}

@keyframes kanal-empfang {
  0%   { opacity: .44 }
  29%  { opacity: .62 }
  53%  { opacity: .49 }
  76%  { opacity: .59 }
  100% { opacity: .44 }
}
@keyframes wasserfall {
  from { background-position: 0 0px,   0 0px }
  to   { background-position: 0 144px, 0 27px }
}

/* Die Baender liegen darueber und muessen durchscheinend sein, sonst
   deckt ihre eigene Farbe das Muster wieder zu. */
/* Kein Abschnittsschleier mehr: das durchgehende Raster traegt die
   Struktur, die Toenung hat den Takt nur gestoert (zwei helle Abschnitte
   lagen direkt nebeneinander). */
.band-alt { position: relative; background: transparent;
  border-top-color: transparent; }
.band-alt + .band { border-top-color: transparent; }
.band > .wrap, .band-alt > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  main::before, main::after, body::after { animation: none !important;
    transform: none !important; will-change: auto; }
  body::after { display: none }
  main::before { opacity: .52 }
  main::after  { opacity: .5; background-position: 0 0, 0 0 }
}

/* ---------- Statusleiste: Kontrollpunkte ---------- */
.chip-titel { font-family: var(--mono); font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--muted); margin: 30px 0 10px; }
.chips.koennen { margin-bottom: 0; }
.chips.koennen li { border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  color: var(--ink); }
.chips.koennen li::before { background: var(--accent);
  box-shadow: 0 0 7px color-mix(in srgb, var(--accent) 60%, transparent); }
.hero-ohne { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.chips li.chip-plus { border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent); }
.chips li.chip-plus a { color: var(--ink); text-decoration: none; }
.chips li.chip-plus a:hover { color: #d6ebff; text-decoration: none; }
.chips li.chip-plus::before { background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent); }
.chips li::before { animation: punkt-puls 3.4s ease-in-out infinite; }
.chips li:nth-child(2)::before { animation-delay: .4s }
.chips li:nth-child(3)::before { animation-delay: .8s }
.chips li:nth-child(4)::before { animation-delay: 1.2s }
.chips li:nth-child(5)::before { animation-delay: 1.6s }
.chips li:nth-child(6)::before { animation-delay: 2.0s }
@keyframes punkt-puls {
  0%,100% { opacity: .35; box-shadow: none }
  50%     { opacity: 1; box-shadow: 0 0 7px var(--accent) }
}

/* ---------- Abschnittsmarke zieht ihren Strich ---------- */
.reveal[data-visible="true"] .eyebrow::before { animation: strich .6s cubic-bezier(.22,.61,.36,1) both; }
@keyframes strich { from { width: 0; opacity: 0 } to { width: 34px; opacity: .75 } }

/* ---------- Statusband oben: langsamer Durchlauf ---------- */
.status-dot { animation: punkt-puls 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .prox-drohne, .prox-drohne .rotor, .band-alt::before, .chips li::before,
  .status-dot, .reveal[data-visible="true"] .eyebrow::before {
    animation: none !important; transform: none;
  }
  .prox-drohne .rotor { opacity: .95; }
  .chips li::before { opacity: .7; }
}

/* ---------- Markenband ----------
   Nur der saubere Anfang des Films: Berge und Logo. Der Rest zeigte eine
   Kommandozentrale mit Radarbildern und einem Bedrohungsanzeiger — ein
   anderes Produkt als dieses. */
.marken-band { position: relative; overflow: hidden; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: transparent; }
.marken-film { display: block; width: 100%;
  height: clamp(250px, 34vw, 640px);
  object-fit: cover; object-position: center 28%; opacity: .96; }
.marken-band::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(3,6,13,.45) 0%, transparent 22%,
              transparent 82%, rgba(3,6,13,.70) 100%); }
.marken-hinweis { position: absolute; left: 22px; bottom: 14px; z-index: 1; margin: 0;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); }