/* Lokal gehostete Schriften — keine Verbindung zu Google (DSGVO-konform). */
/* Sora — Headings */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Source Sans 3 — Fließtext */
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg-main: #2b3138;
  --bg-alt: #252b31;
  --surface: #343c45;
  --surface-2: #3b434e;
  --line: #4d5866;
  --text: #f1f5f9;
  --muted: #b8c2cc;
  --accent: #5ea0d8;
  --accent-2: #2f5f89;
  --glow: rgba(94, 160, 216, 0.26);
  --radius-s: 14px;
  --radius-m: 20px;
  --radius-l: 30px;
  --max-width: 1240px;
  --header-h: 102px;
  --shadow-1: 0 12px 30px rgba(0, 0, 0, 0.22);
  --shadow-2: 0 20px 45px rgba(0, 0, 0, 0.3);
  --scroll-progress: 0;
  --mouse-x: 50%;
  --mouse-y: 50%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
  background-color: #242b32;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: var(--text);
  background-color: #242b32;
  background:
    radial-gradient(circle at 15% 0%, rgba(66, 108, 145, 0.15), transparent 28%),
    radial-gradient(circle at 100% 20%, rgba(26, 56, 84, 0.22), transparent 35%),
    linear-gradient(180deg, #2f363e 0%, var(--bg-main) 40%, #242b32 100%);
  line-height: 1.6;
  overflow-x: hidden;
  touch-action: pan-y;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overscroll-behavior-y: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(10, 15, 20, 0.86);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
  z-index: 999;
  padding: 3.5rem 1.5rem 2.5rem;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-image {
  /* Feste Zoom-Box (Größe = bisherige Cloud-Telefonie-Ansicht): kleine Bilder
     werden hochskaliert, große heruntergerechnet — jedes Produktbild zoomt
     dadurch gleich groß. object-fit hält das Seitenverhältnis, drop-shadow
     legt den Schatten ums tatsächliche Bild statt um die leere Box. */
  width: min(54vw, 30.625rem);
  height: 39vh;
  object-fit: contain;
  border-radius: 18px;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.5));
}

.lightbox-caption {
  margin: 0;
  color: #d9e5f1;
  font-size: 1rem;
  text-align: center;
  max-width: min(90vw, 42.5rem);
}

.lightbox-close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(20, 28, 36, 0.7);
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.lightbox-close:hover {
  transform: scale(1.05);
  background: rgba(34, 46, 58, 0.9);
  border-color: rgba(255, 255, 255, 0.5);
}

.lightbox-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  display: block;
}

/* Schlichter Pointer-Cursor für vergrößerbare Produktbilder (wie bei den Referenzen) */
.v2-image-frame img[data-lightbox] {
  cursor: pointer;
}

a {
  color: inherit;
}

main,
header,
footer {
  position: relative;
  z-index: 2;
}

main {
  flex: 1 0 auto;
}

.container {
  width: min(100% - 2.8rem, var(--max-width));
  margin-inline: auto;
}

.section {
  position: relative;
  overflow: clip;
  padding: 6.4rem 0;
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.section > .container {
  position: relative;
  z-index: 2;
}



.has-light-network {
  position: relative;
  overflow: hidden;
}

.has-light-network::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(43, 49, 56, 0) 0%, rgba(43, 49, 56, 0.62) 76%, rgba(43, 49, 56, 0.92) 100%);
  pointer-events: none;
  z-index: 1;
}

.has-light-network .container {
  position: relative;
  z-index: 2;
}

.section-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.84;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.86) 10%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.86) 10%, rgba(0, 0, 0, 0.86) 70%, rgba(0, 0, 0, 0.5) 88%, transparent 100%);
}

.section-alt {
  background: linear-gradient(180deg, rgba(15, 22, 28, 0.24), rgba(23, 31, 38, 0.38));
  border-top: 1px solid rgba(111, 129, 145, 0.24);
  border-bottom: 1px solid rgba(111, 129, 145, 0.24);
}

.section-heading {
  max-width: 47.5rem;
  margin-bottom: 2.6rem;
}

.section-heading h2 {
  margin: 0.25rem 0 0.9rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #f2f7fc;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.eyebrow {
  margin: 0;
  color: #93bfe4;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
}

.skip-link {
  position: absolute;
  left: 0;
  top: -120%;
  z-index: 999;
  background: #1d2731;
  color: #fff;
  padding: 0.8rem 1rem;
}

.skip-link:focus-visible {
  top: 0;
}

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #85cafc, #367cb9);
  z-index: 999;
  transform-origin: left center;
  transform: scaleX(var(--scroll-progress));
  will-change: transform;
}

.cursor-glow {
  display: none;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(96, 116, 135, 0.12);
  background:
    radial-gradient(circle at 74% 42%, rgba(49, 86, 116, 0.16), rgba(23, 38, 51, 0) 52%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.92), rgba(7, 11, 16, 0.92));
  backdrop-filter: blur(7px);
  transition: background-color 260ms ease, border-color 260ms ease, box-shadow 260ms ease, backdrop-filter 260ms ease;
}

.page-home .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  opacity: 1;
  transform: none;
  /* Startanimation entfernt */
}

.page-home .site-header.is-scrolling {
  background:
    radial-gradient(circle at 74% 42%, rgba(56, 99, 134, 0.16), rgba(23, 38, 51, 0) 52%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.24), rgba(7, 11, 16, 0.24));
  border-bottom-color: rgba(116, 145, 171, 0.1);
}

.site-header.is-scrolled {
  border-bottom: 1px solid rgba(112, 134, 154, 0.24);
  background:
    radial-gradient(circle at 74% 42%, rgba(49, 86, 116, 0.12), rgba(23, 38, 51, 0) 52%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.96), rgba(7, 11, 16, 0.96));
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(4, 8, 12, 0.26);
}

body:not(.page-home) .site-header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

body:not(.page-home) .main-nav a {
  font-size: 1.24rem;
  color: #ffffff;
}

body:not(.page-home) .site-header.is-scrolling {
  background:
    radial-gradient(circle at 74% 42%, rgba(56, 99, 134, 0.16), rgba(23, 38, 51, 0) 52%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.24), rgba(7, 11, 16, 0.24));
  border-bottom-color: rgba(116, 145, 171, 0.1);
}

body:not(.page-home) .site-header.is-scrolled {
  border-bottom-color: rgba(116, 145, 171, 0.14);
  background:
    radial-gradient(circle at 74% 42%, rgba(62, 110, 147, 0.2), rgba(23, 38, 51, 0) 54%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.42), rgba(7, 11, 16, 0.42));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(4, 8, 12, 0.1);
}

.page-home .site-header.is-scrolled {
  border-bottom-color: rgba(116, 145, 171, 0.14);
  background:
    radial-gradient(circle at 74% 42%, rgba(62, 110, 147, 0.2), rgba(23, 38, 51, 0) 54%),
    linear-gradient(180deg, rgba(7, 11, 16, 0.42), rgba(7, 11, 16, 0.42));
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 28px rgba(4, 8, 12, 0.1);
}

.nav-wrap {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.3rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
}

.brand-mark {
  /* in rem -> Logo wächst auf großen Screens mit dem Header mit */
  width: 9.75rem;
  height: 6.375rem;
  background: transparent url("logo.svg") center / contain no-repeat;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

.brand-text {
  display: grid;
  gap: 0.06rem;
  line-height: 1.03;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(1px);
}

.brand-text strong {
  font-family: "Sora", "Segoe UI", sans-serif;
  color: #eef8ff;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.065em;
  text-transform: uppercase;
  background: linear-gradient(110deg, #f4fbff 0%, #d6eeff 44%, #9fd2f3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(120, 190, 235, 0.18);
}

.page-home .brand-text strong {
  background: linear-gradient(110deg, rgba(245, 252, 255, 0.96) 0%, rgba(216, 240, 255, 0.94) 44%, rgba(158, 208, 240, 0.9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-text small {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  color: #a9d5f2;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.brand-text small::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #84d6ff;
  box-shadow: 0 0 10px rgba(132, 214, 255, 0.65);
}

.page-home .brand-text small {
  color: rgba(169, 213, 242, 0.9);
}

.main-nav > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1.6rem;
}

.main-nav .nav-dropdown {
  position: relative;
}

.main-nav .nav-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.main-nav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.18rem);
  left: 0;
  min-width: 17.5rem;
  margin: 0;
  padding: 0.46rem;
  list-style: none;
  border-radius: 12px;
  border: 1px solid rgba(145, 177, 204, 0.42);
  background: linear-gradient(180deg, rgba(14, 22, 30, 0.97), rgba(10, 16, 23, 0.97));
  box-shadow: 0 16px 34px rgba(2, 7, 12, 0.34);
  display: grid;
  gap: 0.12rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 120;
}

.main-nav .nav-dropdown:hover .nav-dropdown-menu,
.main-nav .nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-dropdown-menu a {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.46rem 0.58rem;
  border-radius: 8px;
  color: #edf6ff;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a:focus-visible,
.nav-dropdown-menu a[aria-current="page"] {
  color: #ffffff;
  background: rgba(87, 146, 190, 0.26);
}

.nav-dropdown-menu a::after {
  display: none;
}

.main-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.24rem;
  position: relative;
  transition: color 200ms ease;
}

.page-home .main-nav a {
  color: #ffffff;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.4rem;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, #89ccfb, #397ab3);
  transition: transform 220ms ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: #fff;
}

.main-nav a.active {
  color: #ffffff;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  transform: scaleX(1);
}

.main-nav a.active::after {
  transform: scaleX(1);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #2b323a;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 5px 0;
  background: #dce7f0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.hero {
  min-height: calc(100svh - var(--header-h));
  padding-top: clamp(2.6rem, 6vh, 4.4rem);
  padding-bottom: clamp(2.2rem, 5vh, 4rem);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.page-home .hero {
  min-height: 100svh;
  padding-top: clamp(calc(var(--header-h) + 1.2rem), 12vh, calc(var(--header-h) + 3.2rem));
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 16, 0.38), rgba(7, 11, 16, 0.66));
  pointer-events: none;
  z-index: 1;
}

.page-home .hero::before {
  background: linear-gradient(180deg, rgba(7, 11, 16, 0.22), rgba(7, 11, 16, 0.54));
}

#leistungen .section-network-canvas {
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.56) 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.9) 72%, rgba(0, 0, 0, 0.56) 90%, transparent 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 74% 42%, rgba(49, 86, 116, 0.2), rgba(23, 38, 51, 0) 52%);
  pointer-events: none;
  z-index: 2;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(16.25rem, 0.86fr);
  gap: clamp(1rem, 2.1vw, 2rem);
  align-items: center;
  position: relative;
  z-index: 3;
}

.hero-copy {
  max-width: 53.75rem;
}

.page-home .hero-copy .hero-title-lock,
.page-home .hero-copy .hero-claim,
.page-home .hero-copy .hero-text,
.page-home .hero-copy .hero-badges,
.page-home .hero-copy .hero-badges span,
.page-home .hero-copy .hero-cta,
.page-home .hero-copy .hero-cta .btn {
  opacity: 0;
  transform: translate3d(0, 42px, 0);
  animation: hero-content-rise 900ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.page-home .hero-copy .hero-title-lock {
  animation-duration: 1200ms;
  animation-delay: 380ms;
}

.page-home .hero-copy .hero-claim {
  animation-delay: 620ms;
}

.page-home .hero-copy .hero-text {
  animation-delay: 880ms;
}

.page-home .hero-copy .hero-badges {
  animation-delay: 1160ms;
}

.page-home .hero-copy .hero-badges span:first-child {
  animation-delay: 1380ms;
}

.page-home .hero-copy .hero-badges span:last-child {
  animation-delay: 1580ms;
}

.page-home .hero-copy .hero-cta {
  animation-delay: 1820ms;
}

.page-home .hero-copy .hero-cta .btn:first-child {
  animation-delay: 1980ms;
}

.page-home .hero-copy .hero-cta .btn:last-child {
  animation-delay: 2160ms;
}

.hero-image-stage {
  min-height: 100svh;
  background: #0d1822 url("hero-hintergrund.png") center center / cover no-repeat;
}

.hero-image-stage::before {
  background: linear-gradient(100deg, rgba(8, 14, 20, 0.78) 0%, rgba(8, 14, 20, 0.56) 42%, rgba(8, 14, 20, 0.16) 100%);
}

.hero-image-stage::after {
  background:
    radial-gradient(circle at 80% 42%, rgba(69, 131, 183, 0.28), rgba(23, 38, 51, 0) 55%),
    linear-gradient(180deg, rgba(56, 104, 140, 0) 58%, rgba(56, 104, 140, 0.24) 80%, rgba(34, 58, 78, 0.46) 100%);
}

.hero-image-stage .hero-grid {
  grid-template-columns: minmax(0, 1fr);
}

.hero-image-stage .hero-copy {
  max-width: 57.5rem;
  position: relative;
  z-index: 4;
}

.hero-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.hero-product-hotspot {
  position: absolute;
  pointer-events: auto;
  text-decoration: none;
  color: #e8f5ff;
  transition: transform 280ms ease, filter 280ms ease;
}

.hero-product-hotspot-intercom {
  left: 64.8%;
  top: 50.5%;
}

.hero-product-hotspot-lightcam {
  left: 71.8%;
  top: 35.0%;
}

.hero-product-hotspot-camera {
  left: 89.3%;
  top: 14.5%;
}

.hero-product-hotspot-alarm {
  left: 10.9%;
  top: 22.3%;
}

.hero-hotspot-dot {
  position: relative;
  display: block;
  /* Großzügige unsichtbare Hover-/Klickfläche, damit der Hotspot ohne
     sichtbaren Punkt leicht zu treffen ist (per translate zentriert). */
  width: 6.875rem;
  height: 6.875rem;
  --hotspot-core-size: 96px;
  --hotspot-halo-size: 176px;
  --hotspot-core-size-hover: 64px;
  --hotspot-halo-size-hover: 104px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -50%);
  animation: none;
}

.hero-hotspot-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hotspot-core-size);
  height: var(--hotspot-core-size);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.46) 0%,
    rgba(252, 255, 255, 0.3) 20%,
    rgba(248, 253, 255, 0.17) 42%,
    rgba(244, 251, 255, 0.08) 64%,
    rgba(241, 248, 255, 0.02) 82%,
    rgba(241, 248, 255, 0) 100%);
  filter: blur(8px) brightness(1);
  mix-blend-mode: screen;
  opacity: 1;
  transition: width 240ms ease, height 240ms ease, opacity 240ms ease, filter 240ms ease, transform 240ms ease;
  animation: hero-hotspot-core-pulse 2.4s ease-in-out infinite;
}

.hero-hotspot-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--hotspot-halo-size);
  height: var(--hotspot-halo-size);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(250, 254, 255, 0.2) 0%,
    rgba(247, 252, 255, 0.13) 30%,
    rgba(244, 251, 255, 0.07) 52%,
    rgba(241, 248, 255, 0.03) 72%,
    rgba(240, 248, 255, 0) 100%);
  filter: blur(14px) brightness(1);
  mix-blend-mode: screen;
  opacity: 0.75;
  transition: width 240ms ease, height 240ms ease, opacity 240ms ease, filter 240ms ease, transform 240ms ease;
  animation: hero-hotspot-halo-pulse 2.4s ease-in-out infinite;
}

/* Pulsierende Punkte ausgeblendet — der Hotspot bleibt als unsichtbare
   Hover-/Klickfläche über dem Produkt, das Popup erscheint weiterhin.
   Das Glow-/Pulse-CSS oben bleibt erhalten, falls die Punkte je zurücksollen. */
.hero-hotspot-dot::before,
.hero-hotspot-dot::after {
  display: none;
}

.hero-hotspot-popup {
  position: absolute;
  left: 0.875rem;
  top: -1rem;
  width: clamp(11.25rem, 16vw, 14.375rem);
  border-radius: 12px;
  padding: 0.62rem 0.72rem;
  border: 1px solid rgba(146, 201, 236, 0.52);
  background: linear-gradient(180deg, rgba(11, 20, 30, 0.96), rgba(8, 14, 22, 0.96));
  box-shadow: 0 16px 32px rgba(2, 7, 12, 0.46);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 8px, 0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.hero-product-hotspot-lightcam .hero-hotspot-popup {
  left: 1.125rem;
  right: auto;
}

.hero-product-hotspot-camera .hero-hotspot-popup {
  left: auto;
  right: 1.125rem;
}

.hero-product-hotspot-alarm .hero-hotspot-popup {
  left: 1.125rem;
  right: auto;
  border-color: rgba(255, 112, 112, 0.75);
  background: linear-gradient(180deg, rgba(36, 9, 12, 0.94), rgba(20, 7, 10, 0.94));
}

.hero-product-hotspot-alarm .hero-hotspot-popup small {
  color: #ffc1c1;
}

.hero-product-hotspot-alarm .hero-hotspot-popup em {
  color: #ff8b8b;
}

.hero-product-hotspot-alarm .hero-hotspot-dot {
  --hotspot-core-size: 114px;
  --hotspot-halo-size: 210px;
  --hotspot-core-size-hover: 82px;
  --hotspot-halo-size-hover: 148px;
}

.hero-product-hotspot-alarm .hero-hotspot-dot::before {
  background: radial-gradient(circle,
    rgba(255, 66, 66, 0) 0%,
    rgba(255, 66, 66, 0) 56%,
    rgba(255, 118, 118, 0.5) 68%,
    rgba(255, 83, 83, 0.36) 78%,
    rgba(255, 66, 66, 0.14) 88%,
    rgba(255, 66, 66, 0) 100%);
  filter: blur(8px) brightness(1.06);
}

.hero-product-hotspot-alarm .hero-hotspot-dot::after {
  background: radial-gradient(circle,
    rgba(255, 67, 67, 0) 0%,
    rgba(255, 67, 67, 0) 64%,
    rgba(255, 108, 108, 0.44) 76%,
    rgba(255, 84, 84, 0.28) 86%,
    rgba(255, 67, 67, 0.12) 92%,
    rgba(255, 67, 67, 0) 100%);
  filter: blur(18px) brightness(1.2);
}

.hero-hotspot-popup strong,
.hero-hotspot-popup small,
.hero-hotspot-popup em {
  display: block;
}

.hero-hotspot-popup strong {
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: 0.9rem;
  margin-bottom: 0.18rem;
}

.hero-hotspot-popup small {
  font-size: 0.75rem;
  color: #c5deef;
}

.hero-hotspot-popup em {
  margin-top: 0.4rem;
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  color: #98d6ff;
}

.hero-product-hotspot:has(.hero-hotspot-dot:hover) .hero-hotspot-popup,
.hero-product-hotspot:has(.hero-hotspot-popup:hover) .hero-hotspot-popup,
.hero-product-hotspot.is-open .hero-hotspot-popup,
.hero-product-hotspot:focus-visible .hero-hotspot-popup,
.hero-product-hotspot:focus-within .hero-hotspot-popup {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.hero-product-hotspot:has(.hero-hotspot-dot:hover),
.hero-product-hotspot:has(.hero-hotspot-popup:hover),
.hero-product-hotspot:focus-visible,
.hero-product-hotspot:focus-within {
  transform: translate3d(0, -2px, 0);
  filter: brightness(1.18);
}

.hero-product-hotspot:has(.hero-hotspot-dot:hover) .hero-hotspot-dot,
.hero-product-hotspot:has(.hero-hotspot-popup:hover) .hero-hotspot-dot,
.hero-product-hotspot:focus-visible .hero-hotspot-dot,
.hero-product-hotspot:focus-within .hero-hotspot-dot {
  animation: none;
}

.hero-product-hotspot:has(.hero-hotspot-dot:hover) .hero-hotspot-dot::before,
.hero-product-hotspot:has(.hero-hotspot-popup:hover) .hero-hotspot-dot::before,
.hero-product-hotspot:focus-visible .hero-hotspot-dot::before,
.hero-product-hotspot:focus-within .hero-hotspot-dot::before {
  filter: blur(7px) brightness(1.1);
}

.hero-product-hotspot:has(.hero-hotspot-dot:hover) .hero-hotspot-dot::after,
.hero-product-hotspot:has(.hero-hotspot-popup:hover) .hero-hotspot-dot::after,
.hero-product-hotspot:focus-visible .hero-hotspot-dot::after,
.hero-product-hotspot:focus-within .hero-hotspot-dot::after {
  filter: blur(12px) brightness(1.14);
}

.hero-product-hotspot:not(.hero-product-hotspot-alarm):has(.hero-hotspot-dot:hover) .hero-hotspot-dot::before,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):has(.hero-hotspot-popup:hover) .hero-hotspot-dot::before,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):focus-visible .hero-hotspot-dot::before,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):focus-within .hero-hotspot-dot::before {
  width: calc(var(--hotspot-core-size) * 1.18);
  height: calc(var(--hotspot-core-size) * 1.18);
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.03);
  animation: none;
}

.hero-product-hotspot:not(.hero-product-hotspot-alarm):has(.hero-hotspot-dot:hover) .hero-hotspot-dot::after,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):has(.hero-hotspot-popup:hover) .hero-hotspot-dot::after,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):focus-visible .hero-hotspot-dot::after,
.hero-product-hotspot:not(.hero-product-hotspot-alarm):focus-within .hero-hotspot-dot::after {
  width: calc(var(--hotspot-halo-size) * 1.18);
  height: calc(var(--hotspot-halo-size) * 1.18);
  opacity: 0.66;
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
}

.hero-product-hotspot-alarm:has(.hero-hotspot-dot:hover) .hero-hotspot-dot::before,
.hero-product-hotspot-alarm:has(.hero-hotspot-popup:hover) .hero-hotspot-dot::before,
.hero-product-hotspot-alarm:focus-visible .hero-hotspot-dot::before,
.hero-product-hotspot-alarm:focus-within .hero-hotspot-dot::before {
  animation-duration: 0.52s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  opacity: 0.96;
  filter: blur(8px) brightness(1.3);
}

.hero-product-hotspot-alarm:has(.hero-hotspot-dot:hover) .hero-hotspot-dot::after,
.hero-product-hotspot-alarm:has(.hero-hotspot-popup:hover) .hero-hotspot-dot::after,
.hero-product-hotspot-alarm:focus-visible .hero-hotspot-dot::after,
.hero-product-hotspot-alarm:focus-within .hero-hotspot-dot::after {
  animation-duration: 0.52s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  opacity: 0.86;
  filter: blur(18px) brightness(1.34);
}

.hero-product-hotspot:focus-visible {
  outline: none;
}

.hero-product-hotspot:focus-visible .hero-hotspot-dot {
  box-shadow: none;
}

.hero-image-stage .hero-title-lock span:last-child {
  white-space: nowrap;
}

.hero-image-stage .hero-claim {
  color: #a7d3f2;
}

.hero-image-stage .hero-text {
  color: #c8dbea;
}

.hero-image-stage .hero-badges span {
  border-color: rgba(136, 170, 197, 0.54);
  background: rgba(20, 31, 41, 0.56);
  color: #e2edf7;
}

.hero-image-stage .hero-network-canvas {
  opacity: 0.18;
}

.hero-news-tile {
  margin: 0;
  justify-self: end;
  width: min(100%, 25.625rem);
  padding: 0.24rem;
  border-radius: 28px;
  border: 1px solid rgba(140, 188, 228, 0.46);
  background:
    radial-gradient(circle at 12% 8%, rgba(127, 200, 255, 0.3), rgba(127, 200, 255, 0) 36%),
    radial-gradient(circle at 86% 92%, rgba(108, 178, 232, 0.26), rgba(108, 178, 232, 0) 42%),
    linear-gradient(150deg, rgba(12, 20, 28, 0.98), rgba(7, 13, 20, 0.98));
  box-shadow: 0 30px 70px rgba(2, 6, 10, 0.62);
  position: relative;
  --news-light-x: 50%;
  --news-light-y: 50%;
  --news-light-opacity: 0;
  overflow: hidden;
  isolation: isolate;
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}

.hero-news-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(145, 216, 255, 0.24), rgba(145, 216, 255, 0) 34%),
    linear-gradient(305deg, rgba(82, 151, 204, 0.2), rgba(82, 151, 204, 0) 40%);
  opacity: 0.62;
  pointer-events: none;
  z-index: 0;
}

.hero-news-tile::after {
  content: "";
  position: absolute;
  inset: auto -35% -75% -35%;
  height: 62%;
  background: radial-gradient(circle, rgba(116, 194, 247, 0.34), rgba(116, 194, 247, 0));
  filter: blur(18px);
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
  animation: news-ambient-glow 7.2s ease-in-out infinite;
}

.hero-news-tile > * {
  position: relative;
  z-index: 2;
}

.news-shell {
  position: relative;
  border-radius: 24px;
  padding: 1.22rem 1.14rem 1.12rem;
  border: 1px solid rgba(141, 177, 204, 0.32);
  background:
    radial-gradient(circle at 84% -12%, rgba(121, 182, 225, 0.12), rgba(121, 182, 225, 0) 44%),
    linear-gradient(180deg, rgba(16, 26, 36, 0.96), rgba(11, 20, 29, 0.98));
  overflow: hidden;
}

.news-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(142, 202, 239, 0.08), rgba(142, 202, 239, 0));
  pointer-events: none;
  z-index: 0;
}

.news-shell::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(
      circle at var(--news-light-x) var(--news-light-y),
      rgba(193, 234, 255, 0.52) 0%,
      rgba(138, 203, 244, 0.28) 24%,
      rgba(93, 165, 219, 0) 64%
    );
  opacity: var(--news-light-opacity);
  pointer-events: none;
  z-index: 0;
  transition: opacity 220ms ease;
}

.hero-news-tile:hover .news-shell::after,
.hero-news-tile:focus-within .news-shell::after {
  opacity: 0.86;
}

.news-shell > * {
  position: relative;
  z-index: 1;
}

.news-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.hero-news-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  padding: 0.34rem 0.72rem;
  border-radius: 999px;
  border: 1px solid rgba(163, 203, 232, 0.54);
  color: #cfe6f8;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(29, 45, 58, 0.9), rgba(20, 33, 45, 0.9));
}

.news-date {
  border-radius: 999px;
  border: 1px solid rgba(149, 186, 209, 0.46);
  background: rgba(20, 35, 46, 0.72);
  color: #c2d6e7;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3rem 0.58rem;
}

.hero-news-tile h2 {
  margin: 0.86rem 0 0;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(1.18rem, 2.2vw, 1.5rem);
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: #eaf3fb;
}

.news-feature {
  margin-top: 0.86rem;
  padding: 0.76rem 0.78rem;
  border-radius: 14px;
  border: 1px solid rgba(142, 180, 206, 0.34);
  background: linear-gradient(180deg, rgba(26, 40, 52, 0.82), rgba(19, 30, 41, 0.84));
  display: grid;
  gap: 0.35rem;
}

.news-feature-label {
  margin: 0;
  font-size: 0.67rem;
  color: #9dc3df;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
}

.news-feature h3 {
  margin: 0;
  color: #e4eff9;
  font-size: 1.04rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  line-height: 1.28;
}

.news-feature p {
  margin: 0;
  color: #c6d9e8;
  font-size: 0.9rem;
  line-height: 1.5;
}

.hero-news-list {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.52rem;
}

.hero-news-list li {
  border-left: 2px solid rgba(147, 191, 219, 0.54);
  border-radius: 8px;
  padding: 0.12rem 0 0.12rem 0.62rem;
  background: linear-gradient(90deg, rgba(21, 34, 46, 0.68), rgba(21, 34, 46, 0));
}

.news-list-date {
  display: inline-block;
  margin-bottom: 0.18rem;
  color: #9fc0d9;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-news-list p {
  margin: 0;
  color: #d6e5f1;
  font-size: 0.84rem;
  line-height: 1.45;
}

.news-note {
  margin: 0.9rem 0 0;
  padding-top: 0.62rem;
  border-top: 1px solid rgba(126, 164, 191, 0.26);
  color: #b8ccdd;
  font-size: 0.76rem;
  line-height: 1.4;
}

.news-cta {
  margin: 0.8rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.44rem 0.78rem;
  border-radius: 999px;
  border: 1px solid rgba(161, 206, 236, 0.58);
  color: #dff0fd;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  background: linear-gradient(180deg, rgba(34, 56, 73, 0.9), rgba(24, 43, 58, 0.96));
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, box-shadow 220ms ease;
}

.news-cta::after {
  content: "\203A";
  font-size: 1rem;
  line-height: 1;
}

.news-cta:hover,
.news-cta:focus-visible {
  transform: translateX(3px) scale(1.04);
  border-color: rgba(184, 228, 255, 0.86);
  box-shadow: 0 0 0 4px rgba(120, 191, 237, 0.2);
}

.news-cta:hover::after,
.news-cta:focus-visible::after {
  animation: news-cta-arrow-hover 450ms ease;
}

@keyframes news-cta-arrow-hover {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0);
  }
}

.hero-portrait {
  margin: 0;
  justify-self: end;
  width: min(100%, 22.5rem);
  border-radius: 28px;
  padding: 0.65rem;
  background: linear-gradient(165deg, rgba(58, 79, 98, 0.56), rgba(30, 39, 47, 0.65));
  border: 1px solid rgba(132, 160, 184, 0.34);
  box-shadow: 0 24px 50px rgba(8, 14, 20, 0.34);
  position: relative;
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.hero-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 16%, rgba(132, 194, 241, 0.24), rgba(132, 194, 241, 0) 45%);
  pointer-events: none;
}

.hero-portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(148, 176, 199, 0.46);
  transition: transform 420ms ease;
}

.hero-portrait:hover,
.hero-portrait:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 30px 54px rgba(8, 14, 20, 0.4);
}

.hero-portrait:hover img,
.hero-portrait:focus-within img {
  transform: scale(1.03);
}

.hero-portrait figcaption {
  position: absolute;
  right: 1.2rem;
  bottom: 1.1rem;
  background: rgba(22, 35, 45, 0.72);
  border: 1px solid rgba(144, 176, 201, 0.42);
  color: #e2edf7;
  border-radius: 999px;
  padding: 0.35rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero-techmark {
  margin: 0;
  justify-self: end;
  width: min(100%, 22.5rem);
  border-radius: 28px;
  padding: 0.65rem;
  background: linear-gradient(165deg, rgba(58, 79, 98, 0.56), rgba(30, 39, 47, 0.65));
  border: 1px solid rgba(132, 160, 184, 0.34);
  box-shadow: 0 24px 50px rgba(8, 14, 20, 0.34);
  position: relative;
  overflow: hidden;
  transition: transform 280ms ease, box-shadow 280ms ease;
}

.hero-techmark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 16%, rgba(132, 194, 241, 0.24), rgba(132, 194, 241, 0) 45%);
  pointer-events: none;
}

.hero-techmark:hover,
.hero-techmark:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 30px 54px rgba(8, 14, 20, 0.4);
}

.techmark-svg {
  width: 100%;
  aspect-ratio: 21 / 16;
  border-radius: 22px;
  border: 1px solid rgba(148, 176, 199, 0.46);
  display: block;
}

.hero-techmark .trace {
  fill: none;
  stroke: rgba(144, 210, 255, 0.62);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 12;
  animation: trace-flow 11s linear infinite;
}

.hero-techmark .trace-soft {
  stroke-width: 3;
  opacity: 0.48;
  animation-duration: 13s;
}

.hero-techmark .phone-f-shadow {
  fill: rgba(9, 16, 24, 0.52);
  transform: translate(7px, 6px);
}

.hero-techmark .phone-f-core {
  fill: url(#phone-grad);
  stroke: rgba(159, 222, 233, 0.58);
  stroke-width: 1;
  filter: drop-shadow(0 0 12px rgba(96, 189, 246, 0.26));
}

.hero-techmark .phone-f-wrap {
  animation: core-float 6.2s ease-in-out infinite;
}

.hero-techmark .phone-f-shine {
  fill: url(#phone-highlight);
  opacity: 0.72;
}

.hero-techmark .phone-f-detail {
  fill: rgba(108, 112, 106, 0.9);
  stroke: rgba(43, 61, 73, 0.82);
  stroke-width: 1.2;
}

.hero-techmark .phone-f-detail line {
  stroke: rgba(41, 52, 62, 0.95);
  stroke-width: 2;
}

.hero-techmark .phone-f-keypad {
  fill: rgba(80, 147, 153, 0.9);
  stroke: rgba(185, 228, 233, 0.38);
  stroke-width: 0.8;
}

.hero-techmark .scanline {
  opacity: 0.38;
  animation: scan-run 5.5s linear infinite;
}

.hero-techmark .signal-rings {
  fill: none;
  stroke: rgba(152, 220, 255, 0.78);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.hero-techmark .ring {
  animation: wave-breathe 3.4s ease-in-out infinite;
}

.hero-techmark .ring-b {
  animation-delay: 0.45s;
}

.hero-techmark .ring-c {
  animation-delay: 0.9s;
}

.hero-techmark .particle {
  fill: #8fd8ff;
  opacity: 0.3;
  animation: particle-blink 3.4s ease-in-out infinite;
}

.hero-techmark .particle.p2 {
  animation-delay: 0.8s;
}

.hero-techmark .particle.p3 {
  animation-delay: 1.4s;
}

.hero-techmark .particle.p4 {
  animation-delay: 2s;
}

.hero-techmark .nodes {
  fill: #9dd8ff;
  animation: node-pulse 2.8s ease-in-out infinite;
}

.hero-techmark figcaption {
  position: absolute;
  right: 1.2rem;
  bottom: 1.1rem;
  background: rgba(22, 35, 45, 0.72);
  border: 1px solid rgba(144, 176, 201, 0.42);
  color: #e2edf7;
  border-radius: 999px;
  padding: 0.35rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

@keyframes trace-flow {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: -240;
  }
}

@keyframes node-pulse {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes scan-run {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  8% {
    opacity: 0.38;
  }
  90% {
    opacity: 0.38;
  }
  100% {
    transform: translateY(176px);
    opacity: 0;
  }
}

@keyframes wave-breathe {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.9;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes particle-blink {
  from {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0.2;
  }
}

@keyframes core-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes firewall-scan {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(280%);
  }
}

@keyframes news-ambient-glow {
  0%,
  100% {
    transform: translateY(0) scale(1);
    opacity: 0.72;
  }
  50% {
    transform: translateY(-8%) scale(1.04);
    opacity: 0.95;
  }
}

@keyframes hero-content-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 42px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes header-intro-fade {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes metric-pulse {
  0%,
  100% {
    transform: scaleX(0.58);
    opacity: 0.62;
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(114, 212, 255, 0.56);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(114, 212, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(114, 212, 255, 0);
  }
}

@keyframes hero-hotspot-core-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.84);
    opacity: 0.42;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.02);
    opacity: 0.92;
  }
}

@keyframes hero-hotspot-core-attention {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(236, 250, 255, 0);
  }
  34% {
    box-shadow: 0 0 32px 10px rgba(236, 250, 255, 0.48);
  }
  62% {
    box-shadow: 0 0 19px 6px rgba(236, 250, 255, 0.28);
  }
  84% {
    box-shadow: 0 0 7px 2px rgba(236, 250, 255, 0.1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(236, 250, 255, 0);
  }
}

@keyframes hero-hotspot-halo-pulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0.18;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.09);
    opacity: 0.58;
  }
}

@keyframes hero-hotspot-halo-attention {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(242, 251, 255, 0);
  }
  34% {
    box-shadow: 0 0 56px 20px rgba(242, 251, 255, 0.28);
  }
  62% {
    box-shadow: 0 0 34px 12px rgba(242, 251, 255, 0.17);
  }
  84% {
    box-shadow: 0 0 12px 4px rgba(242, 251, 255, 0.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(242, 251, 255, 0);
  }
}

.hero-network-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  opacity: 0.42;
  pointer-events: none;
}

.page-home .hero-network-canvas {
  opacity: 0.56;
}

body.hero-network-intro-active .page-home .hero-network-canvas {
  opacity: 0.74;
  filter: saturate(1.16) brightness(1.08);
}

.section-network-canvas {
  display: none;
  opacity: 0;
}

.hero-network-canvas,
.section-network-canvas {
  display: none !important;
  opacity: 0 !important;
}

.hero h1 {
  margin: 0.3rem 0 0.8rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(2.18rem, 3.75vw, 3.4rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  color: #f2f7fc;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

.hero-title-lock span {
  display: block;
}

.hero-claim {
  margin: 0;
  color: #9db8cf;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: clamp(1.08rem, 2.2vw, 1.38rem);
  font-weight: 500;
}

.hero-text {
  margin: 1.15rem 0 1.4rem;
  color: #b1c0cd;
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.16rem);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.hero-badges span {
  border: 1px solid rgba(122, 146, 168, 0.52);
  background: rgba(35, 46, 57, 0.75);
  color: #d7e4f1;
  border-radius: 999px;
  padding: 0.52rem 0.85rem;
  font-size: 0.94rem;
}

.hero-badges strong {
  color: #9fd3ff;
  font-family: "Sora", "Segoe UI", sans-serif;
  margin-right: 0.2rem;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  border-radius: 14px;
  padding: 0.92rem 1.3rem;
  border: 1px solid transparent;
  transform: translateY(0);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background 240ms ease;
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.34);
}

.btn-primary {
  color: #fff;
  background:
    radial-gradient(circle at 18% 18%, rgba(170, 223, 255, 0.3), rgba(170, 223, 255, 0) 46%),
    linear-gradient(145deg, #4d96cf, #245d91);
  border-color: rgba(158, 216, 250, 0.45);
  box-shadow: 0 12px 26px rgba(14, 44, 73, 0.42), inset 0 0 0 1px rgba(219, 242, 255, 0.14);
}

.btn-secondary {
  color: #d9ebf9;
  background: linear-gradient(180deg, rgba(36, 49, 62, 0.88), rgba(25, 36, 48, 0.9));
  border-color: rgba(130, 170, 201, 0.56);
  box-shadow: inset 0 0 0 1px rgba(162, 207, 236, 0.12);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  border-color: rgba(159, 209, 243, 0.75);
  background: linear-gradient(180deg, rgba(43, 58, 72, 0.9), rgba(30, 44, 58, 0.92));
}

.card-grid {
  display: grid;
  gap: 1rem;
}

.card-grid-5 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-card {
  --service-image: none;
  --service-image-position: center;
  --service-image-size: cover;
  background: linear-gradient(180deg, rgba(20, 27, 35, 0.92), rgba(16, 23, 31, 0.94));
  border: 1px solid rgba(127, 147, 166, 0.34);
  border-radius: 16px;
  padding: 1.2rem 1.05rem;
  min-height: 9.75rem;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.24);
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(10, 17, 24, 0.34), rgba(9, 15, 21, 0.4)),
    var(--service-image) var(--service-image-position) / var(--service-image-size) no-repeat;
  filter: saturate(1.34) contrast(1.14) brightness(1.1);
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(112, 186, 236, 0.08), rgba(112, 186, 236, 0) 42%),
    linear-gradient(120deg, rgba(66, 149, 209, 0.04), rgba(66, 149, 209, 0) 40%);
}

.service-card:hover {
  border-color: #87b7dc;
  box-shadow: 0 18px 34px rgba(6, 11, 16, 0.45);
  transform: translateY(-4px);
}

.service-card-new {
  border-color: rgba(108, 182, 235, 0.6);
  background:
    linear-gradient(180deg, rgba(21, 31, 40, 0.95), rgba(16, 24, 33, 0.95)),
    radial-gradient(circle at 85% 0%, rgba(111, 186, 236, 0.2), rgba(111, 186, 236, 0));
}

.service-tag {
  display: inline-block;
  margin-bottom: 0.55rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7fc0ed;
}

.service-card h3 {
  margin: 0;
  font-size: 1.18rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  text-shadow: 0 2px 8px rgba(5, 10, 16, 0.75);
}

.service-card p {
  margin: 0.62rem 0 0;
  color: #c6d3df;
  font-size: 0.98rem;
  text-shadow: 0 2px 8px rgba(5, 10, 16, 0.72);
}

.service-card-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  position: relative;
  z-index: 1;
}

.service-card-link:focus-visible {
  outline: 2px solid rgba(145, 205, 245, 0.8);
  outline-offset: 4px;
  border-radius: 10px;
}

#leistungen .section-heading {
  max-width: 45rem;
  margin-bottom: 2.2rem;
}

#leistungen .section-heading p {
  color: #b6c4d1;
}

#leistungen .service-card-firewall {
  --service-image: url("service-firewall.png");
}

#leistungen .service-card-telefonie {
  --service-image: url("service-cloud-telefonie.jpg");
}

#leistungen .service-card-alarm {
  --service-image: url("service-alarmanlage.jpg");
}

#leistungen .service-card-video {
  --service-image: url("service-videoueberwachung.jpg");
}

#leistungen .service-card-tuersprech {
  --service-image: url("service-tuersprechanlage.png");
  --service-image-size: cover;
  --service-image-position: center;
}

#leistungen .service-card-wlan {
  --service-image: url("service-wlan.jpg");
}

.section-link {
  margin-top: 1.4rem;
}

.section-link a {
  color: #9ed1fb;
  font-weight: 700;
  text-underline-offset: 3px;
}

.split {
  display: grid;
  grid-template-columns: 1.12fr 1fr;
  gap: 1.6rem;
  align-items: flex-end;
}

.split p {
  color: var(--muted);
  font-size: 1.08rem;
}


.company-copy {
  width: 100%;
  max-width: 54rem;
  text-align: left;
}

.company-copy .fact-list {
  margin-top: 1.9rem;
  width: 100%;
  max-width: 52rem;
  text-align: left;
}

.company-copy .section-heading {
  margin-bottom: 0;
  width: 100%;
  max-width: 54rem;
}

.company-copy .section-heading h2 {
  margin-bottom: 0;
}

.company-image {
  margin: 0;
  display: grid;
  place-items: center;
  align-self: center;
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.company-image-stack {
  /* in rem statt px -> wächst beim Hochzoomen auf großen Screens mit */
  width: min(100%, 46rem);
  margin-left: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: flex-end;
}

.company-image-stack .company-image {
  width: 100%;
}

.company-image figcaption {
  margin-top: 0.72rem;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d9e9f7;
  text-align: center;
}

.company-image::before {
  content: "";
  position: absolute;
  width: min(100%, 26.25rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(95, 171, 224, 0.28) 0%, rgba(95, 171, 224, 0) 70%);
  filter: blur(10px);
  z-index: 0;
}

.company-image img {
  width: 100%;
  height: auto;
  max-width: 90%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid rgba(133, 173, 203, 0.56);
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(8, 18, 28, 0.22);
  background: linear-gradient(180deg, rgba(16, 25, 35, 0.34), rgba(16, 25, 35, 0.18));
  transform: none;
  transition: none;
  position: relative;
  z-index: 1;
}

.company-image:hover img,
.company-image:focus-within img {
  transform: none;
  border-color: rgba(133, 173, 203, 0.56);
  box-shadow: 0 14px 28px rgba(8, 18, 28, 0.22);
}

.fact-list {
  margin: 0;
  padding: 1.8rem;
  list-style: none;
  display: grid;
  gap: 1.1rem;
  border-radius: var(--radius-l);
  border: 1px solid rgba(127, 147, 166, 0.44);
  background: linear-gradient(180deg, #37414b, #303943);
  box-shadow: var(--shadow-1);
}

.fact-list li {
  border-bottom: 1px dashed rgba(160, 181, 199, 0.28);
  padding-bottom: 0.92rem;
  color: #d8e4ef;
  font-size: 1.15rem;
  line-height: 1.35;
}

.fact-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.fact-list .fact-list-more {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.95rem;
}

.fact-list .fact-list-more > span {
  display: block;
  width: 100%;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(160, 181, 199, 0.28);
}

.fact-more-link {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.64rem;
  border-radius: 999px;
  border: 1px solid rgba(155, 209, 250, 0.55);
  background: linear-gradient(180deg, rgba(47, 86, 120, 0.72), rgba(35, 69, 98, 0.72));
  color: #e3f3ff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.fact-more-link::after {
  content: "\203A";
  font-size: 1rem;
}

.fact-more-link:hover,
.fact-more-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196, 232, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(116, 181, 227, 0.2);
}

.image-grid {
  display: grid;
  gap: 1rem;
}

.image-grid-real {
  /* Drei gleich breite Spalten -> alle drei Kacheln identisch groß.
     minmax(0, 1fr) statt nacktem 1fr: ohne die 0-Untergrenze nehmen die Spalten
     die Eigenbreite der Bilder als Minimum an -> die Spalten liefen sonst ueber
     den rechten Seitenrand hinaus. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.image-tile {
  margin: 0;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 0.4rem;
  border-radius: var(--radius-m);
  overflow: hidden;
  border: 1px solid rgba(124, 145, 164, 0.4);
  background: linear-gradient(180deg, rgba(45, 56, 67, 0.7), rgba(37, 46, 55, 0.72));
  box-shadow: var(--shadow-1);
  transition: transform 300ms ease;
}

.image-tile:hover {
  transform: translateY(-4px);
}

.image-tile img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

/* Galerie „Mehr über uns" — bulletproof gegen das Überlappen der Flaggen-Kachel.
   Statt aspect-ratio (das einzelne Engines bei einem grossen Hochkant-Bild
   ignorieren -> Kachel waechst -> Overlap) wird die 4:3-Hoehe ueber das
   klassische padding-bottom-Verfahren erzwungen: padding in % bezieht sich auf
   die BREITE, ist also in JEDEM Browser stabil. Das Bild liegt absolut darin
   und kann die Kachelhoehe nicht mehr beeinflussen. */
.image-grid-real .image-tile {
  position: relative;
  display: block;
  height: 0;
  padding: 0 0 75%;
  aspect-ratio: auto;
  overflow: hidden;
}

.image-grid-real .image-tile img {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  width: calc(100% - 0.8rem);
  height: calc(100% - 0.8rem);
  object-fit: contain;
}

.certificate-three-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.certificate-panel {
  border: 1px solid rgba(133, 154, 173, 0.34);
  border-radius: var(--radius-m);
  padding: 0.9rem;
  background: linear-gradient(180deg, rgba(55, 65, 75, 0.7), rgba(48, 57, 67, 0.7));
}

.certificate-panel h3 {
  margin: 0 0 0.8rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: 1rem;
  text-align: center;
}

.certificate-track {
  position: relative;
  min-height: 29.0625rem;
  overflow: hidden;
}

.certificate-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(4%) scale(0.99);
  transition: transform 260ms ease, opacity 260ms ease;
  pointer-events: none;
}

.certificate-item.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
}

.cert-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(162, 190, 214, 0.42);
  background: rgba(22, 34, 44, 0.35);
  color: #e5f0f9;
  font-size: 1.55rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}

.cert-prev {
  left: 0.55rem;
}

.cert-next {
  right: 0.55rem;
}

.cert-nav:hover,
.cert-nav:focus-visible {
  background: rgba(41, 61, 79, 0.56);
  border-color: #9bd3ff;
  transform: translateY(-50%) scale(1.05);
}

.cert-nav:disabled {
  opacity: 0.4;
  cursor: default;
}

.certificate-card {
  border: 1px solid rgba(133, 154, 173, 0.38);
  border-radius: var(--radius-m);
  overflow: hidden;
  background: linear-gradient(180deg, #37414b, #303943);
  box-shadow: var(--shadow-1);
}

.certificate-card figure {
  margin: 0;
}

.certificate-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.certificate-card figcaption {
  padding: 0.72rem 0.9rem;
  color: #dce8f3;
  border-top: 1px solid rgba(133, 154, 173, 0.32);
  font-weight: 600;
}

.certificate-master img {
  aspect-ratio: 4 / 5;
  object-fit: contain;
  background: rgba(28, 36, 44, 0.6);
}

.certificate-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
}

.certificate-placeholder div {
  display: grid;
  gap: 0.42rem;
}

.certificate-placeholder strong {
  color: #dbe8f4;
  font-size: 1.12rem;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.certificate-placeholder span {
  color: #9fb2c4;
}

.reference-marquee {
  display: grid;
  gap: 0.85rem;
}

.reference-row {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-m);
  padding: 0.2rem 0;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.reference-track {
  display: flex;
  width: max-content;
  gap: 0.95rem;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.reference-row-left .reference-track {
  animation: reference-scroll-left var(--reference-duration, 50s) linear infinite;
}

.reference-row-right .reference-track {
  animation: reference-scroll-right var(--reference-duration, 56s) linear infinite;
}

.marquee-observed .reference-row .reference-track {
  animation-play-state: paused;
}

.marquee-observed .reference-row.is-in-view .reference-track {
  animation-play-state: running;
}

/* Pausieren bei Hover/Fokus NUR auf Geraeten mit echtem Hover (PC mit Maus).
   Auf Touch-Geraeten (Handy/Tablet) erzeugt ein Tipp einen "klebenden"
   Hover-/Fokus-Zustand, der das Band anhalten koennte. Auf dem Handy soll
   das Band immer durchlaufen, deshalb gilt die Pause nur bei (hover: hover). */
@media (hover: hover) {
  .reference-row:hover .reference-track,
  .reference-row:focus-within .reference-track {
    animation-play-state: paused;
  }
}

.reference-card {
  min-height: 7.375rem;
  min-width: clamp(11.25rem, 21vw, 16.25rem);
  padding: 0 1.1rem;
  display: grid;
  place-items: center;
  border-radius: var(--radius-m);
  background: linear-gradient(180deg, #3b4450, #313944);
  border: 1px dashed rgba(149, 169, 188, 0.55);
  color: #d6e3ef;
  font-weight: 700;
  transition: transform 260ms ease, border-color 260ms ease;
}

.reference-card:hover {
  transform: translateY(-3px);
  border-color: #95cff8;
}

.reference-card-logo {
  min-width: clamp(8.125rem, 14vw, 10.625rem);
  padding: 0 0.45rem;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.reference-card-logo:hover,
.reference-card-logo:focus-within {
  border-color: transparent;
}

.reference-card-logo-tight {
  min-width: 6.75rem;
  padding: 0 0.2rem;
}

.reference-logo-image {
  width: auto;
  /* in rem -> Logos wachsen auf großen Screens mit (vorher fix 124px) */
  height: 7.75rem;
  max-width: 100%;
  display: block;
  object-fit: contain;
  transition: transform 260ms ease, filter 260ms ease;
}

.reference-logo-image {
  cursor: pointer;
}

.reference-card-logo:hover .reference-logo-image,
.reference-card-logo:focus-within .reference-logo-image {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 14px rgba(8, 18, 28, 0.28));
}

.zoom-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: clamp(0.9rem, 3vw, 2.2rem);
  background: rgba(5, 9, 14, 0.84);
  backdrop-filter: blur(4px);
}

.zoom-lightbox.is-open {
  display: grid;
}

.zoom-lightbox-image {
  max-width: min(94vw, 1320px);
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(166, 197, 223, 0.5);
  box-shadow: 0 28px 54px rgba(0, 0, 0, 0.45);
  background: rgba(11, 17, 24, 0.9);
  object-fit: contain;
}

.zoom-lightbox-close {
  position: absolute;
  top: clamp(0.7rem, 1.8vw, 1.2rem);
  right: clamp(0.7rem, 1.8vw, 1.2rem);
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 999px;
  border: 1px solid rgba(179, 210, 236, 0.6);
  background: rgba(16, 26, 36, 0.8);
  color: #e6f3fe;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 660px) {
  /* Handy: Nur Fallback ohne JS. Das eigentliche Tempo setzt script.js als
     Inline-Stil aus der echten Reihenbreite (MOBILE_REFERENCE_PX_PER_SECOND),
     damit alle drei Reihen exakt gleich schnell laufen. */
  .reference-row-left .reference-track {
    animation-duration: 30s;
  }

  .reference-row-right .reference-track {
    animation-duration: 33s;
  }

  .reference-card-logo {
    min-width: 118px;
    padding: 0 0.3rem;
  }

  .reference-card-logo-tight {
    min-width: 100px;
    padding: 0 0.12rem;
  }

  .reference-logo-image {
    height: 104px;
  }

  .zoom-lightbox-image {
    max-width: 95vw;
    max-height: 85vh;
  }
}

@keyframes reference-scroll-left {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(calc(-1 * var(--reference-loop-distance, 50%)), 0, 0);
  }
}

@keyframes reference-scroll-right {
  0% {
    transform: translate3d(calc(-1 * var(--reference-loop-distance, 50%)), 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

.contact-flow {
  border-top: 1px solid rgba(129, 149, 168, 0.35);
  border-bottom: 1px solid rgba(129, 149, 168, 0.35);
  background: linear-gradient(180deg, rgba(52, 60, 69, 0.45), rgba(52, 60, 69, 0.2));
  border-radius: var(--radius-m);
  overflow: hidden;
}

.contact-row {
  padding: 1.05rem 1.2rem;
}

.contact-row + .contact-row {
  border-top: 1px solid rgba(129, 149, 168, 0.28);
}

.contact-row h3 {
  margin: 0 0 0.18rem;
  font-family: "Sora", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  color: #ecf5fd;
}

.contact-row p {
  margin: 0;
  color: #d8e4ef;
  font-size: 1.05rem;
}

.contact-row a {
  color: #9ed1fb;
  font-weight: 700;
}

.muted {
  margin-top: 0.58rem;
  color: #b5c2cf;
}

.contact-note {
  margin-top: 1rem;
  color: #b7c5d2;
  font-size: 1.03rem;
}

.site-footer {
  border-top: 1px solid rgba(123, 143, 160, 0.35);
  background: #20272f;
  margin-top: auto;
}

.footer-wrap {
  min-height: 5.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-wrap p {
  margin: 0;
  color: #aebfce;
}

.footer-wrap nav {
  display: flex;
  gap: 1rem;
}

.footer-wrap a {
  color: #cfe2f3;
  font-weight: 600;
}

.page-hero {
  padding: 4.8rem 0 2.2rem;
  background:
    radial-gradient(circle at 12% 0%, rgba(96, 157, 205, 0.16), rgba(96, 157, 205, 0) 34%),
    linear-gradient(180deg, rgba(21, 31, 40, 0.42), rgba(21, 31, 40, 0));
  border-bottom: 1px solid rgba(124, 156, 183, 0.18);
}

body:not(.page-home) .page-hero {
  min-height: clamp(430px, 74svh, 720px);
  padding: 5.1rem 0 2.4rem;
  padding-top: clamp(calc(var(--header-h) + 1.4rem), 14vh, calc(var(--header-h) + 3.2rem));
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 16% 0%, rgba(98, 162, 210, 0.2), rgba(98, 162, 210, 0) 36%),
    radial-gradient(circle at 92% 10%, rgba(79, 132, 174, 0.14), rgba(79, 132, 174, 0) 38%),
    linear-gradient(180deg, rgba(16, 25, 34, 0.72), rgba(16, 25, 34, 0.34));
  border-bottom-color: rgba(128, 162, 190, 0.22);
}

body:not(.page-home) .page-hero .container {
  width: min(100% - 2.8rem, var(--max-width));
}

.page-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  margin: 0.4rem 0 0.72rem;
  color: #eef6fd;
  letter-spacing: -0.025em;
}

body:not(.page-home) .page-hero h1 {
  color: #f0f7fd;
  text-shadow: 0 0 24px rgba(107, 168, 210, 0.1);
}

.page-hero p {
  color: #bccada;
}

body:not(.page-home) .page-hero p {
  color: #c1d2e1;
}

body:not(.page-home) .page-hero .eyebrow {
  color: #9fcdf0;
}

body:not(.page-home) .page-hero + .section {
  background:
    radial-gradient(circle at 84% 0%, rgba(114, 179, 221, 0.14), rgba(114, 179, 221, 0) 38%),
    linear-gradient(180deg, rgba(20, 31, 41, 0.64) 0%, rgba(20, 31, 41, 0.38) 48%, rgba(20, 31, 41, 0.16) 100%);
  border-top: 1px solid rgba(124, 158, 185, 0.2);
}

body:not(.page-home) .page-hero .legal-card {
  margin-top: 1.5rem;
}

.page-home #leistungen {
  background:
    radial-gradient(circle at 86% 0%, rgba(101, 164, 208, 0.1), rgba(101, 164, 208, 0) 36%),
    linear-gradient(180deg, rgba(14, 22, 30, 0.78) 0%, rgba(14, 22, 30, 0.56) 44%, rgba(14, 22, 30, 0.34) 100%);
  border-top: 1px solid rgba(108, 140, 165, 0.2);
}

.page-home #leistungen.has-light-network::after {
  height: 52%;
  background: linear-gradient(180deg, rgba(14, 22, 30, 0) 0%, rgba(14, 22, 30, 0.74) 74%, rgba(14, 22, 30, 0.96) 100%);
}

.page-home #unternehmen {
  padding: 4.2rem 0;
}

.page-home #unternehmen,
.page-home #qualifizierungen,
.page-home #kontakt {
  background:
    radial-gradient(circle at 12% 0%, rgba(94, 156, 203, 0.1), rgba(94, 156, 203, 0) 34%),
    linear-gradient(180deg, rgba(20, 30, 39, 0.56) 0%, rgba(20, 30, 39, 0.3) 44%, rgba(20, 30, 39, 0.12) 100%);
  border-top: 1px solid rgba(108, 140, 165, 0.14);
}

.page-home #eindruck,
.page-home #referenzen {
  background:
    radial-gradient(circle at 88% 6%, rgba(102, 169, 215, 0.13), rgba(102, 169, 215, 0) 36%),
    linear-gradient(180deg, rgba(16, 25, 34, 0.68) 0%, rgba(16, 25, 34, 0.44) 52%, rgba(16, 25, 34, 0.22) 100%);
  border-top: 1px solid rgba(110, 145, 172, 0.2);
  border-bottom: 1px solid rgba(110, 145, 172, 0.16);
}

.breadcrumb {
  margin-top: 0.72rem;
}

.breadcrumb a {
  color: #9fd3ff;
}

body:not(.page-home) .breadcrumb a {
  color: #a7d9fb;
}

.product-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.product-grid-single {
  grid-template-columns: 1fr;
}

.product-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 0.45rem;
}

.product-page-title {
  margin: 0;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.product-title-logo {
  width: auto;
  max-width: min(44vw, 20rem);
  max-height: clamp(4.5rem, 8.6vw, 7.375rem);
  height: auto;
  object-fit: contain;
  opacity: 0.98;
}

.product-subheading {
  margin-top: 1.45rem;
  margin-bottom: 0.65rem;
}

.section-cloud-telephony {
  padding-top: calc(var(--header-h) + 2rem);
}

.section-cloud-telephony .container {
  display: grid;
  gap: 1rem;
}

.section-cloud-telephony .cloud-row-header {
  margin-bottom: 0.1rem;
}

.section-cloud-telephony .cloud-row {
  width: 100%;
  padding: clamp(1rem, 1.9vw, 1.5rem);
  border-radius: var(--radius-m);
  border: 1px solid rgba(136, 176, 207, 0.42);
  background:
    radial-gradient(circle at 86% -14%, rgba(128, 196, 240, 0.16), rgba(128, 196, 240, 0) 46%),
    linear-gradient(180deg, rgba(33, 45, 57, 0.93), rgba(23, 33, 44, 0.95));
  box-shadow: 0 14px 30px rgba(4, 9, 14, 0.3);
}

.cloud-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.9fr);
  gap: 1.6rem;
  align-items: start;
}

.cloud-copy {
  display: grid;
  gap: 0.9rem;
}

.cloud-copy .product-subheading,
.cloud-benefits-wrap .product-subheading {
  margin-top: 0;
}

.cloud-benefits-wrap {
  justify-self: start;
  align-self: start;
  padding-top: 0.15rem;
  padding-left: clamp(0.3rem, 0.9vw, 0.85rem);
}

.cloud-intro-text {
  max-width: 84ch;
  color: #d2e2ef;
  line-height: 1.7;
  margin: 0;
}

.cloud-benefits {
  list-style: disc;
  padding: 0 0 0 1.25rem;
  margin: 0.95rem 0 1.2rem;
  max-width: 70ch;
}

.cloud-benefits li {
  margin-bottom: 0.5rem;
  color: #d8e7f3;
  font-size: 1.05rem;
  line-height: 1.6;
}

.cloud-benefits li:last-child {
  margin-bottom: 0;
}

.cloud-benefits li::marker {
  color: #8cc7f4;
}

.image-grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cloud-gallery {
  gap: 0.7rem;
  align-items: center;
}

.cloud-gallery.image-grid-four {
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
}

.cloud-row-gallery {
  margin-top: 0.1rem;
}

.cloud-row-gallery .image-tile {
  border-radius: calc(var(--radius-m) - 8px);
  background: linear-gradient(180deg, rgba(44, 57, 70, 0.56), rgba(35, 46, 57, 0.56));
}

.cloud-gallery .image-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

.cloud-gallery .image-tile:hover {
  transform: none;
}

.cloud-gallery .image-tile img {
  width: auto;
  max-width: 100%;
  height: clamp(10.625rem, 20vw, 15rem);
  object-fit: contain;
  display: block;
  transition: transform 220ms ease, filter 220ms ease;
}

.cloud-gallery .image-tile:nth-child(1) img {
  height: clamp(15rem, 28vw, 21.25rem);
}

.cloud-gallery .image-tile:nth-child(2) img {
  height: clamp(11.25rem, 22vw, 16.25rem);
}

.cloud-gallery .image-tile:nth-child(1) {
  align-self: start;
}

.cloud-gallery .image-tile:nth-child(2) {
  align-self: stretch;
}

.cloud-gallery .image-tile::after {
  content: "+";
  position: absolute;
  inset: auto 0 18px auto;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #eef7ff;
  background: rgba(35, 52, 68, 0.78);
  border: 1px solid rgba(142, 184, 220, 0.45);
  box-shadow: 0 10px 22px rgba(10, 18, 26, 0.28);
  opacity: 0;
  transform: translateY(6px) scale(0.92);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}

.cloud-gallery .image-tile:hover img,
.cloud-gallery .image-tile:focus-within img {
  transform: scale(1.04);
  filter: drop-shadow(0 16px 28px rgba(10, 18, 26, 0.32));
}

.cloud-gallery .image-tile:hover::after,
.cloud-gallery .image-tile:focus-within::after {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.product-card,
.legal-card {
  background:
    radial-gradient(circle at 85% -10%, rgba(125, 197, 244, 0.14), rgba(125, 197, 244, 0) 44%),
    linear-gradient(180deg, rgba(34, 46, 58, 0.92), rgba(24, 34, 45, 0.95));
  border: 1px solid rgba(130, 167, 197, 0.42);
  border-radius: var(--radius-m);
  padding: 1.2rem;
  box-shadow: 0 14px 30px rgba(4, 9, 14, 0.28);
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

body:not(.page-home) .product-card,
body:not(.page-home) .legal-card {
  background:
    radial-gradient(circle at 86% -12%, rgba(126, 198, 244, 0.16), rgba(126, 198, 244, 0) 46%),
    linear-gradient(180deg, rgba(33, 45, 57, 0.94), rgba(21, 31, 42, 0.96));
  border-color: rgba(136, 173, 202, 0.46);
  box-shadow: 0 16px 32px rgba(5, 10, 15, 0.32);
}

.product-card h3,
.legal-card h2,
.legal-card h3 {
  margin-top: 0;
  font-family: "Sora", "Segoe UI", sans-serif;
}

.product-card h3 {
  line-height: 1.25;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.product-card p,
.legal-card p {
  color: #cfdeea;
}

.legal-card h2,
.legal-card h3 {
  color: #e9f4fd;
}

.product-card a {
  color: #a8d9fb;
  font-weight: 700;
}

.product-card:hover,
.legal-card:hover {
  border-color: rgba(157, 207, 240, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(5, 10, 16, 0.34);
}

body:not(.page-home) .site-footer {
  border-top-color: rgba(126, 157, 182, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(85, 137, 175, 0.18), rgba(85, 137, 175, 0) 34%),
    linear-gradient(180deg, #212a33, #1b232c);
}


.reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-offset-y, 36px), 0);
  transition:
    opacity var(--reveal-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration, 760ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.section.reveal {
  opacity: 1;
  transform: none;
}

.section.reveal > .container {
  opacity: 0;
  transform: translate3d(0, var(--reveal-offset-y, 46px), 0);
  transition:
    opacity var(--reveal-duration, 860ms) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--reveal-duration, 860ms) cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

.section.reveal.in-view > .container {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reference-track .reference-card.reveal,
.reference-track .reference-card.reveal.in-view {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}

[data-tilt] {
  transition: transform 260ms ease;
}

/* HINWEIS: Hier stand frueher `will-change: opacity, transform` auf ALLEN noch
   nicht eingeblendeten .reveal-Elementen. Beim Kaltstart ist fast die ganze
   (lange) Seite "not-in-view" -> hunderte Compositing-Layer -> das Browser-
   Budget fuer will-change wird gesprengt (Konsolen-Warnung), woraufhin der
   Browser Layer verwirft und der Ladescreen fuer einen Frame nachblitzt.
   Die Reveal-Animation laeuft ohnehin sauber ueber die opacity/transform-
   Transition; der will-change-Hint war kontraproduktiv und ist daher entfernt. */

@media (max-width: 1180px) {
  .card-grid-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .image-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 940px) {
  :root {
    --header-h: 90px;
  }

  .cloud-gallery.image-grid-four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    min-height: calc(100svh - var(--header-h));
    padding-top: 2.6rem;
    padding-bottom: 2.9rem;
  }

  .menu-toggle {
    display: inline-block;
  }

  .main-nav {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(7, 11, 16, 0.97), rgba(7, 11, 16, 0.97));
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .page-home .main-nav {
    background: linear-gradient(180deg, rgba(8, 13, 19, 0.78), rgba(8, 13, 19, 0.82));
    border-bottom: 1px solid rgba(120, 152, 180, 0.2);
    backdrop-filter: blur(6px);
  }

  .main-nav.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav > ul {
    flex-direction: column;
    gap: 0.86rem;
    padding: 1rem 1.2rem;
  }

  .main-nav .nav-dropdown-menu {
    position: static;
    min-width: 0;
    opacity: 0;
    transform: none;
    pointer-events: none;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0.2rem 0 0 0.8rem;
    margin-top: 0.2rem;
    gap: 0.2rem;
    display: none;
  }

  .main-nav .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    display: grid;
  }

  .nav-dropdown-menu a {
    font-size: 1rem;
    padding: 0.24rem 0;
    border-radius: 0;
  }

  .nav-dropdown-menu a:hover,
  .nav-dropdown-menu a:focus-visible,
  .nav-dropdown-menu a[aria-current="page"] {
    background: transparent;
  }

  .hero-grid,
  .split,
  .image-grid-real,
  .reference-grid {
    grid-template-columns: 1fr;
  }

  /* Galerie „Mehr über uns" einspaltig: Kacheln wachsen wieder natürlich mit
     dem Bild mit. Kein erzwungenes 4:3 und kein absolut positioniertes Bild
     mehr -> die Höhe hängt NICHT mehr an aspect-ratio (robust auch in älteren
     In-App-Browsern, in denen die Kachel sonst kollabierte und die Bilder
     winzig wurden). Der Edge-Overlap kann einspaltig nicht auftreten, weil
     keine Nachbarkachel daneben liegt; deshalb ist der Desktop-Fix hier
     bewusst zurückgenommen. Ergebnis: Bilder bildschirmfüllend und scharf. */
  .image-grid-real .image-tile {
    height: auto;
    padding: 0.5rem;
  }

  .image-grid-real .image-tile img {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    max-height: 72vh;
  }

  .cloud-content-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .section-cloud-telephony {
    padding-top: calc(var(--header-h) + 1.4rem);
  }

  .section-cloud-telephony .container {
    gap: 0.85rem;
  }

  .section-cloud-telephony .cloud-row {
    padding: 0.95rem;
  }

  .product-title-logo {
    width: auto;
    max-width: min(52vw, 240px);
    max-height: clamp(62px, 10.4vw, 92px);
  }

  .cloud-benefits-wrap {
    padding-top: 0;
    padding-left: 0;
  }

  .company-image-stack {
    margin: 1.2rem auto 0;
    width: min(100%, 540px);
    gap: 0.9rem;
  }

  .company-image-stack .company-image {
    width: 100%;
  }

  .hero-image-stage .hero-title-lock span:last-child {
    white-space: normal;
  }


  .hero-portrait,
  .hero-techmark,
  .hero-news-tile {
    justify-self: center;
    width: min(100%, 380px);
    margin-top: 0.65rem;
  }

  .hero-news-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hero-hotspots {
    display: none;
  }

  .hero-network-canvas {
    opacity: 0.34;
  }

  .page-home .hero-network-canvas {
    opacity: 0.44;
  }

  body.hero-network-intro-active .page-home .hero-network-canvas {
    opacity: 0.6;
  }

  .section-network-canvas {
    opacity: 0.62;
  }


  .certificate-three-grid {
    grid-template-columns: 1fr;
  }

  .card-grid-5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.page-home) .page-hero {
    min-height: clamp(400px, 68svh, 620px);
    padding-top: calc(var(--header-h) + 1.4rem);
    padding-bottom: 2rem;
  }
}

@media (max-width: 660px) {
  .container {
    width: min(100% - 1.25rem, var(--max-width));
  }

  .section {
    padding: 4.7rem 0;
  }

  .section-cloud-telephony {
    padding-top: calc(var(--header-h) + 1.1rem);
  }

  .section-cloud-telephony .container {
    gap: 0.75rem;
  }

  .section-cloud-telephony .cloud-row-header {
    margin-bottom: 0;
  }

  .section-cloud-telephony .cloud-row {
    border-radius: calc(var(--radius-m) - 4px);
    padding: 0.9rem;
  }

  .section-heading {
    margin-inline: auto;
    text-align: center;
  }

  .section-link,
  .split p {
    text-align: center;
  }

  .hero {
    min-height: auto;
    padding-top: 4.8rem;
    padding-bottom: 3.7rem;
  }

  .page-home .hero {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 1.6rem);
    padding-bottom: 3rem;
  }

  .hero-copy {
    margin-inline: auto;
    text-align: center;
  }

  .hero-text {
    margin-inline: auto;
  }

  .hero-badges,
  .hero-cta {
    justify-content: center;
  }

  .main-nav > ul {
    align-items: center;
    text-align: center;
  }

  .main-nav .nav-dropdown-menu {
    padding-left: 0;
    text-align: center;
  }

  .hero-network-canvas {
    opacity: 0.28;
  }

  .page-home .hero-network-canvas {
    opacity: 0.36;
  }

  body.hero-network-intro-active .page-home .hero-network-canvas {
    opacity: 0.52;
  }

  .section-network-canvas {
    opacity: 0.52;
  }


  .hero-portrait,
  .hero-techmark {
    display: none;
  }

  .hero-news-tile {
    width: min(100%, 460px);
    margin: 0.6rem auto 0;
  }

  .hero-product-hotspot-intercom {
    left: 67.2%;
    top: 52.4%;
  }

  .hero-product-hotspot-alarm {
    left: 61.8%;
    top: 31.2%;
  }

  .news-metric:last-child {
    grid-column: 1 / -1;
  }

  .brand-text small {
    display: none;
  }

  .brand-mark {
    width: 122px;
    height: 80px;
  }

  /* Mobile: sicherstellen, dass das Burger-Menue (☰) IMMER sichtbar bleibt.
     Ohne min-width:0 erzwingt der lange, nicht umbrechbare Markenname
     ("KOMMUNIKATIONSSYSTEME") seine Eigenbreite und schiebt den Burger ueber
     den rechten Bildschirmrand hinaus. Darum: Marke darf schrumpfen/umbrechen,
     Burger schrumpft nie. */
  .nav-wrap {
    gap: 0.8rem;
  }

  .brand {
    min-width: 0;
    gap: 0;
  }

  .brand-text {
    min-width: 0;
  }

  .brand-text strong {
    font-size: 0.92rem;
    letter-spacing: 0.03em;
    overflow-wrap: anywhere;
  }

  .menu-toggle {
    flex-shrink: 0;
  }

  .card-grid-5 {
    grid-template-columns: 1fr;
  }

  body:not(.page-home) .page-hero {
    min-height: clamp(360px, 62svh, 560px);
    padding-top: calc(var(--header-h) + 1.2rem);
    padding-bottom: 1.8rem;
  }

  .certificate-track {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  .cert-nav {
    width: 34px;
    height: 34px;
    font-size: 1.32rem;
  }

  .service-card,
  .reference-card,
  .product-card,
  .legal-card,
  .fact-list {
    text-align: center;
  }

  .contact-row {
    text-align: center;
  }

  .company-copy .fact-list {
    text-align: center;
  }

  .fact-list .fact-list-more {
    align-items: center;
  }

  .fact-list .fact-list-more .fact-more-link {
    align-self: center;
  }

  .company-image-stack {
    width: min(100%, 22.5rem);
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  .company-image-stack .company-image {
    width: 100%;
  }

  .company-image figcaption {
    font-size: 0.88rem;
  }

  .image-grid-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-wrap {
    justify-content: center;
    text-align: center;
  }

  .footer-wrap nav {
    font-size: 0.9rem;
    justify-content: center;
  }

}

/* ============================================================
   Sehr kleine Handys (z. B. 6,1"-Geräte ~360–414px breit):
   Der clamp-Mindestwert der Hero-Überschrift (2.18rem) war für
   "Kommunikationssysteme" zu groß -> nur das letzte "e" rutschte als
   Waise in die nächste Zeile. Hier darf die Schrift weiter schrumpfen,
   damit das lange Wort wieder komplett in eine Zeile passt. Text und
   Buttons werden minimal mitverkleinert, damit das Hero kompakt bleibt.
   ============================================================ */
@media (max-width: 430px) {
  /* Kleine Handys: Markenname weiter verkleinern, damit
     "KOMMUNIKATIONSSYSTEME" nicht haesslich umbricht. Das FK-Logo
     (.brand-mark) bleibt unveraendert. */
  .brand-text strong {
    font-size: 0.82rem;
    letter-spacing: 0.02em;
  }

  .hero-image-stage .hero-title-lock {
    font-size: clamp(1.72rem, 8vw, 2.18rem);
    letter-spacing: -0.04em;
  }

  .hero-image-stage .hero-claim {
    font-size: clamp(1rem, 4vw, 1.12rem);
  }

  .hero-image-stage .hero-text {
    font-size: clamp(0.95rem, 3.7vw, 1.05rem);
    margin-top: 0.9rem;
    margin-bottom: 1.15rem;
  }

  .hero-badges span {
    font-size: 0.86rem;
    padding: 0.46rem 0.74rem;
  }

  .hero-cta .btn {
    font-size: 0.98rem;
    padding: 0.82rem 1.1rem;
  }
}

@media (max-width: 360px) {
  /* Sehr kleine Handys: Markenname noch eine Stufe kleiner. */
  .brand-text strong {
    font-size: 0.74rem;
    letter-spacing: 0.015em;
  }
}

/* ============================================================
   prefers-reduced-motion: BEWUSST KEINE Abschaltung von Animationen.
   Auf ausdruecklichen Nutzerwunsch soll die Website fuer ALLE Besucher
   exakt gleich aussehen UND animieren – unabhaengig von System-/Browser-
   Einstellungen wie "Bewegung reduzieren". Deshalb wird hier NICHTS
   deaktiviert (kein "animation: none", kein "transition: none", kein
   "scroll-behavior: auto"). Frueher stand hier ein reduce-Block, der genau
   das gemacht hat – er ist bewusst entfernt, damit niemand ein anderes
   Erlebnis hat als ein anderer. (Falls spaeter aus Barrierefreiheits-
   Gruenden doch gewuenscht, hier gezielt einzelne Effekte zaehmen.)
   ============================================================ */

/* ============================================================
   Große Bildschirme: ganze Seite wächst gleichmäßig mit (wie ein
   Zoom). Schrift, Abstände UND die Inhaltsbreite (--max-width in
   rem -> skaliert mit der Schrift) wachsen ab 1500px stufenlos mit
   der Bildschirmbreite. Der fixe Header (--header-h) wächst im
   gleichen Verhältnis mit, damit er nicht über den Inhalt rutscht.
   Unter 1500px bleibt alles exakt wie bisher (16px Basis).
   ============================================================ */
@media (min-width: 1500px) {
  html {
    /* Proportionaler Zoom OHNE harten Deckel: ab 1500px (=16px) waechst die
       ganze Seite stufenlos mit der Bildschirmbreite mit (1500/16 = 93.75),
       sodass sie auf grossen Monitoren/Beamern wie ein vergroesserter Laptop
       aussieht (keine eingefrorene "Insel", keine leeren Raender).
       Der zweite Term (vh) greift NUR auf extrem breiten / curved Displays
       (jenseits 21:9): dort wird die Skalierung an der Hoehe gemessen, damit
       sich der Inhalt nicht endlos in die Breite blaeht, sondern komfortabel
       zentriert bleibt (Logo/Navigation in der Lesezone, nicht in der Ecke).
       max(16px, ...) ist der Sicherheitsboden fuer sehr flache Fenster. */
    font-size: max(16px, min(calc(100vw / 93.75), 2.4vh));
  }
  :root {
    /* in rem -> skaliert automatisch mit der Schrift mit. Feste rem-Breite
       haelt den Inhalt auf curved/ultrawide Screens komfortabel zentriert.
       82rem ~= 88% der Breite, damit Spalten/Texte auf grossen Screens breit
       wirken wie am Laptop (nicht frueher umbrechen), aber etwas mehr Rand zur
       Bildschirmkante haben (Inhalt sitzt etwas weiter "drinnen", nicht zu nah
       am Rand). Frueher 85rem (zu nah), davor 78rem (zu gestaucht). */
    --max-width: 82rem;
    /* Header waechst im selben Tempo wie die Schrift (102px / 16 = 6.375rem) */
    --header-h: 6.375rem;
  }
}

/* ============================================================
   Ganz-Seiten-Ladescreen (Preloader)
   Deckt die Seite beim (Hard-)Reload mit einem Overlay ab, bis die
   sichtbaren Bilder geladen sind, dann sanftes Wegblenden. So sieht
   man nicht, wie Bilder einzeln "nachladen", sondern einen sauberen
   Uebergang. Die Logik (wegblenden auf window.load, mit Mindest-
   Anzeigedauer + Sicherheits-Timeout) steckt in script.js. Ohne JS
   blendet ein <noscript>-Style das Overlay sofort aus, damit die
   Seite nie blockiert bleibt.
   ============================================================ */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000; /* ueber allem, auch ueber dem fixed Header */
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(66, 108, 145, 0.2), transparent 55%),
    linear-gradient(180deg, #0d1822 0%, var(--bg-main) 100%);
  opacity: 1;
  visibility: visible;
  transition: opacity 520ms ease, visibility 0s linear 520ms;
  /* CSS-NOTAUSGANG: Selbst wenn JavaScript komplett ausfaellt oder einen Fehler
     wirft, blendet sich der Loader nach spaetestens 6s rein per CSS aus und kann
     die Seite damit NIE dauerhaft blockieren. Im Normalfall ist er da laengst per
     JS (auf window.load) weg. */
  animation: page-loader-failsafe 600ms ease 6s forwards;
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes page-loader-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* Loader NUR beim ersten Aufruf der Seite in einer Sitzung zeigen. Bei interner
   Navigation (Logo-Klick, zurueck zur Startseite, Unterseiten) setzt ein kleines
   Inline-Script im <head> die Klasse .fk-skip-loader auf <html> – dann erscheint
   der Loader gar nicht erst (kein Aufblitzen). */
.fk-skip-loader .page-loader {
  display: none !important;
}

.page-loader-inner {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
}

.page-loader-mark {
  width: 8.25rem;
  height: 5.4rem;
  background: transparent url("logo.svg") center / contain no-repeat;
  animation: page-loader-pulse 1.8s ease-in-out infinite;
}

.page-loader-spinner {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 3px solid rgba(124, 145, 164, 0.25);
  border-top-color: var(--accent);
  animation: page-loader-spin 0.8s linear infinite;
}

.page-loader-text {
  /* Text ("Laedt ...") auf Wunsch ausgeblendet – nur Spinner bleibt sichtbar.
     Bleibt fuer Screenreader im DOM (aria-live), wird aber nicht angezeigt. */
  display: none;
}

@keyframes page-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-loader-pulse {
  0%,
  100% {
    opacity: 0.82;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px);
  }
}