:root {
  --navy: #071423;
  --navy-2: #1a3a52;
  --navy-3: #2d5a7b;
  --blue: #00a8e8;
  --blue-2: #4a7ba7;
  --cyan: #4ecbff;
  --ink: #1a3a52;
  --muted: #2c3e50;
  --line: #d7e2eb;
  --soft: #ecf0f1;
  --white: #ffffff;
  --wrap: 1320px;
  --shadow: 0 22px 60px rgba(2, 18, 42, 0.12);
}

* {
  box-sizing: border-box;
}

/* Das semantische hidden-Attribut darf nicht von Komponentenregeln übersteuert werden. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--white);
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 26px max(28px, calc((100vw - var(--wrap)) / 2));
  color: var(--white);
  background: rgba(7, 20, 35, 0.95);
  backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.14rem;
  font-weight: 800;
  white-space: nowrap;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 52px;
  color: transparent;
  background: url("assets/images/logo-original.png") center / contain no-repeat;
  filter: drop-shadow(0 11px 13px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 20px rgba(0, 118, 255, 0.18));
  font-size: 0;
}

.brand-mark.large {
  width: 150px;
  height: 150px;
  font-size: 0;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
  font-size: 0.98rem;
  font-weight: 800;
}

.site-nav a {
  padding: 12px 0 15px;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--blue-2);
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-weight: 900;
  white-space: nowrap;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.header-cta::after,
.btn::after {
  content: "→";
  font-weight: 900;
}

.header-cta,
.btn.primary {
  color: var(--white);
  background: linear-gradient(135deg, #087dff, #0063f2);
  box-shadow: 0 18px 40px rgba(0, 108, 255, 0.32);
}

.btn.ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.035);
}

.btn:hover,
.header-cta:hover {
  transform: translateY(-2px);
}

.menu-toggle {
  display: none;
}

.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(ellipse at 62% 96%, rgba(0, 168, 232, 0.58), transparent 24%),
    radial-gradient(ellipse at 76% 66%, rgba(45, 90, 123, 0.36), transparent 33%),
    linear-gradient(115deg, #06101d 0%, #102c43 48%, #071423 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-radial-gradient(ellipse at 83% 78%, rgba(42, 150, 255, 0.2) 0 1px, transparent 1px 13px);
  opacity: 0.42;
  transform: rotate(-5deg);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1fr);
  gap: clamp(52px, 7vw, 90px);
  align-items: center;
  max-width: var(--wrap);
  min-height: 635px;
  margin: 0 auto;
  padding: clamp(72px, 8vw, 105px) 28px 82px;
}

.eyebrow {
  margin: 0 0 20px;
  color: var(--blue-2);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  max-width: 660px;
  margin: 0;
  font-size: clamp(2.52rem, 4.12vw, 3.86rem);
  line-height: 1.12;
}

.nowrap {
  white-space: nowrap;
}

h1 strong,
.blue {
  color: var(--blue);
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(1.85rem, 2.65vw, 2.35rem);
  line-height: 1.16;
}

h3 {
  margin: 18px 0 10px;
  font-size: 1.24rem;
  line-height: 1.2;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 620px;
  margin-top: 26px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 36px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 34px;
  padding: 0;
  margin: 58px 0 0;
  list-style: none;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.84rem;
}

.trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.trust-row li::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: radial-gradient(circle, var(--blue) 0 3px, transparent 4px);
}

.glass-panel,
.system-panel,
.timeline-panel,
.benefit-panel,
.contact-card,
.about-orbit,
.about-network {
  position: relative;
  z-index: 1;
  border: 1px solid rgba(69, 163, 255, 0.78);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(26, 58, 82, 0.88), rgba(7, 20, 35, 0.68));
  box-shadow: inset 0 0 34px rgba(0, 125, 255, 0.14), 0 24px 76px rgba(0, 20, 48, 0.24);
}

.system-panel::before,
.timeline-panel::before,
.benefit-panel::before,
.about-network::before {
  pointer-events: none;
}

.system-panel::before,
.timeline-panel::before,
.benefit-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 28%, rgba(78, 203, 255, 0.12) 42%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: panelSheen 8s ease-in-out infinite;
}

.system-panel {
  padding: 32px;
}

.hero-media-panel {
  padding: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.hero-media-panel picture,
.hero-media-panel img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-media-panel img {
  border-radius: inherit;
  object-fit: cover;
  object-position: center center;
  filter: saturate(1.05) contrast(1.04);
}

.hero-home .hero-inner {
  grid-template-columns: minmax(0, 1fr) clamp(390px, 32vw, 500px);
  gap: clamp(42px, 5vw, 70px);
}

.hero-home .hero-actions {
  flex-wrap: nowrap;
  gap: 14px;
}

.hero-home h1 {
  font-size: clamp(2.4rem, 3.85vw, 3.68rem);
}

.hero-home .trust-row {
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 0.72rem;
}

.hero-home .trust-row li {
  gap: 6px;
  white-space: nowrap;
}

.hero-home .trust-row li::before {
  width: 14px;
  height: 14px;
}

.hero-subline {
  margin: -6px 0 16px;
  color: var(--cyan);
  font-size: 1.12rem;
  font-weight: 700;
}

.hero-local {
  margin-top: 14px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.98rem;
}

.system-panel h2,
.timeline-panel h2,
.benefit-panel h2 {
  font-size: 1.28rem;
  margin-bottom: 24px;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: start;
}

.process-item {
  position: relative;
  display: grid;
  gap: 14px;
  text-align: center;
  font-size: 0.86rem;
}

.process-item:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 36px;
  right: -18px;
  color: var(--blue-2);
  font-size: 1.55rem;
}

.panel-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border: 1px solid rgba(50, 142, 255, 0.52);
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(145deg, rgba(7, 118, 255, 0.38), rgba(255, 255, 255, 0.04));
  font-size: 1.18rem;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 900;
  animation: iconFloat 5.4s ease-in-out infinite;
}

.panel-icon svg,
.icon svg {
  width: 34px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-item strong {
  display: block;
  font-size: 0.96rem;
}

.process-item:nth-child(2) .panel-icon { animation-delay: 0.45s; }
.process-item:nth-child(3) .panel-icon { animation-delay: 0.9s; }
.process-item:nth-child(4) .panel-icon { animation-delay: 1.35s; }

.process-item span,
.panel-note,
.timeline-panel span,
.benefit-panel span,
.contact-card p {
  color: rgba(255, 255, 255, 0.76);
}

.panel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 26px;
  padding: 22px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

.panel-stats div {
  min-width: 0;
  padding: 0 12px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
}

.panel-stats div:last-child {
  border-right: 0;
}

.panel-stats strong {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  font-size: clamp(1.35rem, 1.55vw, 1.72rem);
  line-height: 1;
}

.panel-stats span {
  display: block;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.74rem;
  line-height: 1.25;
}

.timeline-panel {
  padding: 34px 44px;
}

.timeline-panel ol {
  display: grid;
  gap: 30px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.timeline-panel li {
  display: grid;
  grid-template-columns: 76px 44px 1fr;
  gap: 24px;
  align-items: center;
}

.timeline-panel .panel-icon {
  width: 76px;
  height: 76px;
  margin: 0;
}

.timeline-panel em {
  color: var(--blue);
  font-size: 2.4rem;
  font-style: normal;
  font-weight: 900;
}

.timeline-panel strong {
  display: block;
  font-size: 1.3rem;
}

.benefit-panel {
  padding: 32px;
}

.before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: center;
}

.before-after ul {
  display: grid;
  gap: 18px;
  padding: 24px;
  margin: 0;
  list-style: none;
  border: 1px solid rgba(69, 163, 255, 0.28);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.before-after li:not(:first-child) {
  position: relative;
  padding-left: 28px;
}

.before-after li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--blue);
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(0, 168, 232, 0.28);
}

.check-animation li:not(:first-child)::before {
  background: rgba(0, 168, 232, 0.04);
}

.check-animation li:not(:first-child)::after {
  content: "✓";
  position: absolute;
  left: 2px;
  top: 0.05em;
  color: var(--cyan);
  font-size: 1.05rem;
  font-weight: 900;
  opacity: 0;
  transform: scale(0.35) rotate(-18deg);
  animation: checkTick 6.4s ease-in-out infinite;
  text-shadow: 0 0 16px rgba(78, 203, 255, 0.58);
}

.check-animation ul:first-child li:not(:first-child)::before {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.03);
  box-shadow: none;
}

.check-animation ul:first-child li:not(:first-child)::after {
  content: "×";
  left: 2px;
  top: -0.06em;
  color: rgba(255, 118, 118, 0.9);
  opacity: 1;
  transform: none;
  animation: none;
  text-shadow: 0 0 14px rgba(255, 80, 80, 0.28);
}

.check-animation ul:last-child li:nth-child(2)::after { animation-delay: 0.35s; }
.check-animation ul:last-child li:nth-child(3)::after { animation-delay: 1.05s; }
.check-animation ul:last-child li:nth-child(4)::after { animation-delay: 1.75s; }
.check-animation ul:last-child li:nth-child(5)::after { animation-delay: 2.45s; }

@keyframes checkTick {
  0%, 7% {
    opacity: 0;
    transform: scale(0.35) rotate(-18deg);
  }
  12%, 78% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  88%, 100% {
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
  }
}

.before-after strong {
  font-size: 1.2rem;
}

.before-after .brand-mark {
  width: 92px;
  height: 92px;
}

.about-orbit {
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-color: rgba(69, 163, 255, 0.58);
  background:
    radial-gradient(circle at 50% 58%, rgba(0, 126, 255, 0.38), transparent 33%),
    radial-gradient(circle at 50% 58%, rgba(69, 163, 255, 0.15) 0 35%, transparent 36%),
    linear-gradient(145deg, rgba(13, 37, 62, 0.7), rgba(2, 14, 30, 0.2));
  box-shadow: inset 0 0 54px rgba(0, 125, 255, 0.16), 0 28px 80px rgba(0, 20, 48, 0.22);
}

.about-orbit::before,
.about-orbit::after {
  content: "";
  position: absolute;
  inset: 70px 96px;
  border: 1px solid rgba(69, 163, 255, 0.2);
  border-radius: 50%;
}

.about-orbit::after {
  inset: 108px 132px;
  border-style: dashed;
  opacity: 0.8;
}

.about-orbit .brand-mark.large {
  width: 136px;
  height: 136px;
  z-index: 2;
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 36px rgba(0, 118, 255, 0.45));
}

.orbit-chip {
  position: absolute;
  display: grid;
  place-items: center;
  z-index: 3;
  width: 132px;
  min-height: 78px;
  padding: 12px 14px;
  border: 1px solid rgba(69, 163, 255, 0.42);
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.11), rgba(0, 118, 255, 0.08));
  box-shadow: inset 0 0 22px rgba(0, 118, 255, 0.12), 0 12px 34px rgba(0, 14, 34, 0.22);
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
}

.orbit-chip:nth-child(2) { top: 42px; left: 74px; }
.orbit-chip:nth-child(3) { top: 42px; right: 74px; }
.orbit-chip:nth-child(4) { bottom: 46px; left: 68px; }
.orbit-chip:nth-child(5) { bottom: 46px; right: 68px; }

.about-network {
  min-height: 430px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-color: rgba(69, 163, 255, 0.58);
  background:
    radial-gradient(circle at 50% 56%, rgba(0, 126, 255, 0.32), transparent 29%),
    linear-gradient(145deg, rgba(13, 37, 62, 0.72), rgba(2, 14, 30, 0.2));
  box-shadow: inset 0 0 54px rgba(0, 125, 255, 0.16), 0 28px 80px rgba(0, 20, 48, 0.22);
}

.ai-growth-visual {
  background:
    radial-gradient(circle at 50% 58%, rgba(0, 126, 255, 0.34), transparent 28%),
    radial-gradient(circle at 70% 28%, rgba(78, 203, 255, 0.14), transparent 26%),
    linear-gradient(145deg, rgba(13, 37, 62, 0.72), rgba(2, 14, 30, 0.2));
}

.about-image-visual {
  min-height: 0;
  padding: 0;
  aspect-ratio: 1672 / 941;
  border-color: rgba(69, 163, 255, 0.78);
  background: linear-gradient(150deg, rgba(26, 58, 82, 0.88), rgba(7, 20, 35, 0.68));
  box-shadow: inset 0 0 34px rgba(0, 125, 255, 0.14), 0 24px 76px rgba(0, 20, 48, 0.24);
}

.about-image-visual img {
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  filter: saturate(1.04) contrast(1.03);
  border-radius: inherit;
}

.about-image-visual picture {
  display: block;
  width: 100%;
  height: 100%;
}

.about-network.about-image-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 0 30%, rgba(78, 203, 255, 0.1) 44%, transparent 62% 100%);
  animation: none;
  pointer-events: none;
}

.about-network.about-image-visual::after {
  display: none;
}

.about-network::before,
.about-network::after {
  content: "";
  position: absolute;
  inset: 58px 92px;
  border: 1px solid rgba(69, 163, 255, 0.18);
  border-radius: 50%;
  animation: networkPulse 7s ease-in-out infinite;
}

.about-network::after {
  inset: 96px 142px;
  border-style: dashed;
  animation-delay: 1.2s;
}

.growth-orbit {
  position: absolute;
  inset: 62px 86px;
  border: 1px solid rgba(78, 203, 255, 0.22);
  border-radius: 50%;
  transform: rotate(-12deg);
  animation: orbitSpin 14s linear infinite;
}

.network-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(0, 118, 255, 0.34), rgba(0, 118, 255, 0.08) 56%, transparent 70%);
  box-shadow: 0 0 58px rgba(0, 118, 255, 0.34);
  animation: coreFloat 5.8s ease-in-out infinite;
}

.network-core .brand-mark.large {
  width: 118px;
  height: 118px;
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 34px rgba(0, 118, 255, 0.48));
}

.growth-bars {
  position: absolute;
  right: 66px;
  bottom: 58px;
  display: flex;
  gap: 12px;
  align-items: end;
  height: 150px;
}

.growth-bars span {
  display: block;
  width: 30px;
  border: 1px solid rgba(78, 203, 255, 0.45);
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(180deg, rgba(78, 203, 255, 0.68), rgba(0, 118, 255, 0.16));
  box-shadow: 0 0 26px rgba(0, 168, 232, 0.18);
  transform-origin: bottom;
  animation: barRise 4.8s ease-in-out infinite;
}

.growth-bars span:nth-child(1) { height: 44px; animation-delay: 0s; }
.growth-bars span:nth-child(2) { height: 72px; animation-delay: 0.35s; }
.growth-bars span:nth-child(3) { height: 104px; animation-delay: 0.7s; }
.growth-bars span:nth-child(4) { height: 136px; animation-delay: 1.05s; }

.growth-line {
  position: absolute;
  left: 88px;
  right: 88px;
  top: 142px;
  height: 116px;
  overflow: visible;
}

.growth-line::before {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 2px solid rgba(78, 203, 255, 0.62);
  border-right: 2px solid rgba(78, 203, 255, 0.62);
  border-radius: 0 0 70px 0;
  transform: skewY(-18deg);
  filter: drop-shadow(0 0 14px rgba(78, 203, 255, 0.38));
}

.growth-line span {
  position: absolute;
  right: -2px;
  top: 0;
  width: 42px;
  height: 42px;
  border-top: 3px solid rgba(78, 203, 255, 0.78);
  border-right: 3px solid rgba(78, 203, 255, 0.78);
  transform: rotate(8deg);
  animation: arrowPulse 3.8s ease-in-out infinite;
}

.growth-node {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(78, 203, 255, 0.88);
  border-radius: 50%;
  background: rgba(0, 118, 255, 0.5);
  box-shadow: 0 0 22px rgba(78, 203, 255, 0.44);
  animation: nodePulse 3.2s ease-in-out infinite;
}

.node-one { left: 108px; top: 122px; }
.node-two { left: 178px; bottom: 102px; animation-delay: 0.7s; }
.node-three { right: 188px; top: 96px; animation-delay: 1.4s; }

.network-card {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 3px;
  min-width: 142px;
  padding: 15px 16px;
  border: 1px solid rgba(69, 163, 255, 0.44);
  border-radius: 12px;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(0, 118, 255, 0.08));
  box-shadow: inset 0 0 22px rgba(0, 118, 255, 0.12), 0 14px 34px rgba(0, 14, 34, 0.24);
  text-align: left;
  animation: cardGlow 6.8s ease-in-out infinite;
}

.network-card span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.network-card strong {
  font-size: 1rem;
  line-height: 1.1;
}

.network-card small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

.card-one { top: 42px; left: 64px; }
.card-two { top: 42px; right: 64px; animation-delay: 0.7s; }
.card-three { bottom: 44px; left: 74px; animation-delay: 1.4s; }
.card-four { right: 74px; bottom: 44px; animation-delay: 2.1s; }

.network-line {
  position: absolute;
  z-index: 2;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(78, 203, 255, 0.44), transparent);
  transform-origin: center;
  animation: lineFlow 4.8s ease-in-out infinite;
}

.line-one { transform: rotate(24deg); }
.line-two { transform: rotate(-24deg); animation-delay: 1.1s; }

@keyframes networkPulse {
  0%, 100% { opacity: 0.38; transform: scale(0.96); }
  50% { opacity: 0.85; transform: scale(1.03); }
}

@keyframes coreFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes cardGlow {
  0%, 100% { border-color: rgba(69, 163, 255, 0.36); transform: translateY(0); }
  50% { border-color: rgba(78, 203, 255, 0.78); transform: translateY(-4px); }
}

@keyframes lineFlow {
  0%, 100% { opacity: 0.26; }
  50% { opacity: 0.72; }
}

@keyframes panelSheen {
  0%, 42% { transform: translateX(-120%); opacity: 0; }
  52% { opacity: 1; }
  68%, 100% { transform: translateX(120%); opacity: 0; }
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 rgba(0, 168, 232, 0); }
  50% { transform: translateY(-5px); box-shadow: 0 12px 26px rgba(0, 118, 255, 0.16); }
}

@keyframes orbitSpin {
  to { transform: rotate(348deg); }
}

@keyframes barRise {
  0%, 100% { transform: scaleY(0.72); opacity: 0.68; }
  45%, 70% { transform: scaleY(1); opacity: 1; }
}

@keyframes arrowPulse {
  0%, 100% { opacity: 0.48; transform: translate(-8px, 8px) rotate(8deg); }
  50% { opacity: 1; transform: translate(0, 0) rotate(8deg); }
}

@keyframes nodePulse {
  0%, 100% { transform: scale(0.76); opacity: 0.55; }
  50% { transform: scale(1.18); opacity: 1; }
}

.contact-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: center;
  padding: 44px;
}

.contact-list {
  display: grid;
  gap: 24px;
  padding-left: 34px;
  border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.contact-list p {
  position: relative;
  margin: 0;
  padding-left: 54px;
}

.contact-list p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border: 2px solid var(--blue);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(0, 168, 232, 0.24), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 18px rgba(0, 168, 232, 0.16), 0 0 18px rgba(0, 168, 232, 0.18);
}

.contact-list p:nth-child(1)::after,
.contact-list p:nth-child(2)::after,
.contact-list p:nth-child(3)::after {
  position: absolute;
  left: 10px;
  top: 7px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
}

.contact-list p:nth-child(1)::after { content: "✓"; }
.contact-list p:nth-child(2)::after { content: "◷"; }
.contact-list p:nth-child(3)::after { content: "▣"; }

.contact-list strong {
  display: block;
  margin-bottom: 2px;
  color: var(--white);
}

.section {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(62px, 7vw, 82px) 28px;
}

.section.compact-top {
  padding-top: 54px;
}

.center {
  text-align: center;
}

.cards-3,
.cards-4,
.cards-5,
.mini-benefits,
.identity-grid,
.contact-grid {
  display: grid;
  gap: 24px;
}

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

.section-lead {
  max-width: 860px;
  margin: 0 auto 34px;
  color: var(--muted);
  font-size: 1.06rem;
}

.module-showcase {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.module-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
  padding: 34px 28px;
  border: 1px solid rgba(0, 118, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  box-shadow: 0 18px 48px rgba(2, 18, 42, 0.07);
}

.module-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.8vw, 1.72rem);
  line-height: 1.14;
}

.module-card p {
  margin: 0;
  color: var(--muted);
}

.module-card ul {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}

.module-card li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
}

.module-card li::before {
  content: "";
  width: 10px;
  height: 10px;
  margin-top: 0.48em;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 14px rgba(0, 168, 232, 0.35);
}

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 36px;
  align-items: start;
}

.why-grid > div:first-child {
  padding: 34px;
  border-radius: 8px;
  background: linear-gradient(180deg, #f7fbff, #edf6ff);
  border: 1px solid rgba(0, 118, 255, 0.14);
}

.why-grid p {
  color: var(--muted);
}

.why-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.why-cards article,
.home-process article {
  min-width: 0;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 14px 36px rgba(5, 24, 52, 0.06);
}

.why-cards h3,
.home-process h3 {
  margin: 16px 0 8px;
  font-size: 1.08rem;
}

.why-cards p,
.home-process p {
  margin: 0;
  color: var(--muted);
}

.price-orientation {
  display: grid;
  gap: 24px;
  padding: clamp(30px, 5vw, 48px);
  border-radius: 8px;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 118, 255, 0.24), transparent 28%),
    linear-gradient(135deg, #020b19, #061327 52%, #061e3b);
  box-shadow: 0 22px 58px rgba(2, 18, 42, 0.12);
}

.price-orientation h2,
.price-orientation p {
  margin-top: 0;
}

.price-orientation p:not(.eyebrow) {
  max-width: 860px;
  color: rgba(255, 255, 255, 0.78);
}

.price-teasers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.price-teasers div {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(69, 163, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.price-teasers strong {
  display: block;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1.1;
}

.price-teasers span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
}

.premium-topic {
  padding-top: 20px;
}

.premium-topic-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  gap: 34px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(0, 118, 255, 0.24);
  border-radius: 10px;
  background: linear-gradient(120deg, rgba(4, 25, 52, 0.98), rgba(7, 45, 83, 0.94));
  box-shadow: 0 20px 50px rgba(5, 24, 52, 0.12);
}

.premium-topic h2 {
  max-width: 780px;
  color: var(--white);
}

.premium-topic p:not(.eyebrow):not(.premium-topic-date) {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.78);
}

.premium-topic-date {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.86rem;
}

.premium-topic-actions {
  justify-content: flex-end;
}

.home-faq {
  padding-bottom: 72px;
}

.home-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.feature-card,
.step-card,
.contact-form,
.contact-details,
.wide-stat-band,
.mini-benefits,
.identity-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: 0 16px 40px rgba(5, 24, 52, 0.06);
}

.feature-card,
.step-card,
.identity-card {
  min-width: 0;
  padding: 34px 28px;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.feature-card:hover,
.step-card:hover,
.identity-card:hover,
.module-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 118, 255, 0.24);
  box-shadow: 0 22px 54px rgba(5, 24, 52, 0.1);
}

.feature-card p,
.step-card p,
.identity-card p,
.contact-form p,
.contact-details p,
.site-footer p {
  color: var(--muted);
}

.icon,
.step-card span {
  display: inline-grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 10px;
  color: var(--blue);
  background: #eaf4ff;
  font-weight: 900;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.02em;
}

.step-card span {
  margin-bottom: 12px;
  font-size: 2.25rem;
  color: var(--blue);
  background: transparent;
}

.card-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  color: var(--blue);
  font-weight: 900;
}

.card-link::after {
  content: "→";
}

.mini-benefits {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 52px;
  padding: 24px;
  background: linear-gradient(180deg, #f7fbff, #eef6ff);
}

.mini-benefit {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: center;
  padding-right: 22px;
  border-right: 1px solid var(--line);
}

.mini-benefit:last-child {
  border-right: 0;
}

.mini-benefit .icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
}

.mini-benefit h3 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.mini-benefit p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.wide-stat-band {
  margin-top: 36px;
  padding: 30px;
  background: linear-gradient(180deg, #f7fbff, #edf6ff);
  text-align: center;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
  text-align: left;
}

.comparison-grid > div {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.comparison-grid h3 {
  margin-top: 0;
}

.comparison-grid ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.founder-note {
  max-width: none;
  padding: clamp(30px, 4vw, 46px);
  border: 1px solid rgba(0, 118, 255, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(236, 240, 241, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 48px rgba(2, 18, 42, 0.07);
}

.founder-note h2 {
  margin-top: 0;
  font-size: clamp(1.8rem, 2.8vw, 2.5rem);
}

.founder-note p:not(.eyebrow) {
  max-width: 1060px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.module-intro,
.price-intro {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.price-intro .btn {
  margin-top: 18px;
}

.service-detail-grid {
  display: grid;
  gap: 22px;
  margin-top: 42px;
}

.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.55fr);
  gap: clamp(24px, 4vw, 46px);
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid rgba(0, 118, 255, 0.14);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(236, 240, 241, 0.92), rgba(255, 255, 255, 0.98));
  box-shadow: 0 18px 48px rgba(2, 18, 42, 0.07);
}

.service-detail h3 {
  margin-top: 0;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.module-detail h3 {
  margin: 18px 0 10px;
  color: var(--ink);
  font-size: clamp(1.7rem, 2.5vw, 2.25rem);
}

.module-benefit {
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.service-detail ul,
.seo-link-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-detail li {
  position: relative;
  padding: 8px 0 8px 26px;
  color: var(--muted);
}

.service-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 10px;
  height: 10px;
  border: 2px solid var(--blue);
  border-radius: 50%;
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 26px;
}

.price-card {
  display: grid;
  gap: 18px;
  align-content: start;
  padding: 28px;
  border: 1px solid rgba(0, 118, 255, 0.16);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(239, 247, 255, 0.92));
  box-shadow: 0 18px 48px rgba(2, 18, 42, 0.08);
}

.price-card h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: clamp(1.22rem, 1.8vw, 1.55rem);
}

.price-card p {
  margin: 0;
  color: var(--muted);
}

.price {
  color: var(--ink) !important;
  font-size: clamp(2rem, 3vw, 2.7rem);
  font-weight: 900;
  line-height: 1;
}

.price span,
.price small {
  display: block;
  color: var(--blue);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.price small {
  margin-top: 8px;
  color: var(--muted);
  text-transform: none;
}

.price-note,
.price-final {
  font-size: 0.92rem;
}

.price-final {
  padding-top: 14px;
  border-top: 1px solid rgba(0, 118, 255, 0.14);
  font-weight: 800;
}

.config-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 42px;
  padding: clamp(28px, 4vw, 42px);
  border: 1px solid rgba(0, 118, 255, 0.22);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 24%, rgba(0, 118, 255, 0.18), transparent 30%),
    linear-gradient(130deg, #061327, #06203d);
  color: var(--white);
  box-shadow: 0 22px 58px rgba(2, 18, 42, 0.12);
}

.section.about-price-section {
  padding-top: 0;
  padding-bottom: 0;
}

.about-price-section .config-teaser {
  margin-top: -42px;
}

.config-teaser-actions,
.price-context-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.price-context-cta {
  justify-content: space-between;
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid rgba(0, 118, 255, 0.18);
  border-radius: 8px;
  background: rgba(238, 247, 255, 0.72);
}

.price-context-cta p {
  max-width: 650px;
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.price-context-cta .btn.ghost {
  color: var(--white);
  border-color: var(--blue);
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(0, 118, 255, 0.2);
}

.price-context-cta .btn.ghost:hover,
.price-context-cta .btn.ghost:focus-visible {
  color: var(--white);
  border-color: var(--ink);
  background: var(--ink);
}

.contact-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-top: 24px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(0, 118, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(135deg, #f1f8ff, #ffffff);
  box-shadow: 0 14px 34px rgba(2, 18, 42, 0.06);
}

.contact-bridge h2,
.contact-bridge p {
  margin-top: 0;
}

.contact-bridge h2 {
  margin-bottom: 8px;
}

.contact-bridge p:not(.eyebrow) {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
}

.config-teaser h2,
.config-teaser p {
  margin-top: 0;
}

.config-teaser p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.78);
}

.modal-open {
  overflow: hidden;
}

.configurator-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  padding: clamp(18px, 4vw, 56px);
  color: var(--white);
  overflow-y: auto;
  background:
    radial-gradient(circle at 78% 16%, rgba(0, 118, 255, 0.22), transparent 30%),
    radial-gradient(circle at 24% 82%, rgba(0, 168, 232, 0.18), transparent 34%),
    rgba(1, 8, 18, 0.9);
  backdrop-filter: blur(18px);
}

.configurator-modal.is-open {
  display: block;
}

.configurator-dialog {
  position: relative;
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 54px);
  border: 1px solid rgba(69, 163, 255, 0.42);
  border-radius: 14px;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 118, 255, 0.24), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(0, 168, 232, 0.16), transparent 34%),
    linear-gradient(135deg, #020b19, #061327 48%, #061e3b);
  box-shadow: 0 28px 90px rgba(0, 10, 24, 0.55), inset 0 0 46px rgba(0, 118, 255, 0.08);
}

.config-close {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.config-close:hover,
.config-close:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0, 168, 232, 0.72);
  background: rgba(0, 118, 255, 0.22);
}

.configurator-head,
.configurator-layout {
  max-width: none;
  margin-right: auto;
  margin-left: auto;
}

.configurator-head {
  display: grid;
  gap: 14px;
  margin-bottom: 30px;
}

.configurator-head h2 {
  max-width: 760px;
  margin: 0;
  color: var(--white);
}

.configurator-head p {
  max-width: 920px;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
}

.config-disclaimer {
  padding: 16px 18px;
  border: 1px solid rgba(69, 163, 255, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.configurator-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
  gap: 20px;
  align-items: start;
}

.configurator-modules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}

.config-module {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.config-card {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px 14px;
  align-content: start;
  min-height: 178px;
  padding: 22px;
  border: 1px solid rgba(69, 163, 255, 0.24);
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(0, 118, 255, 0.04));
  box-shadow: inset 0 0 24px rgba(0, 118, 255, 0.08);
  font-size: 1rem;
  cursor: pointer;
  min-width: 0;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.config-card:hover,
.config-card:has(input:focus-visible) {
  transform: translateY(-2px);
  border-color: rgba(0, 168, 232, 0.72);
  box-shadow: inset 0 0 30px rgba(0, 118, 255, 0.12), 0 18px 44px rgba(0, 20, 48, 0.22);
}

.config-card:has(input:checked) {
  border-color: rgba(0, 168, 232, 0.95);
  background: linear-gradient(145deg, rgba(0, 118, 255, 0.2), rgba(255, 255, 255, 0.07));
}

.config-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.config-check {
  grid-row: 1 / span 3;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
}

.config-card:has(input:checked) .config-check {
  border-color: var(--blue-2);
  background: var(--blue);
}

.config-card:has(input:checked) .config-check::after {
  content: "✓";
  color: var(--white);
  font-weight: 900;
}

.config-card strong,
.config-card span:not(.config-check) {
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.config-card strong {
  font-size: 1.12rem;
}

.config-card span:not(.config-check) {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.55;
}

.config-result {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 18px;
  min-width: 0;
  padding: 28px;
  border: 1px solid rgba(69, 163, 255, 0.44);
  border-radius: 8px;
  background:
    radial-gradient(circle at 80% 10%, rgba(0, 118, 255, 0.22), transparent 34%),
    linear-gradient(150deg, rgba(13, 37, 62, 0.95), rgba(2, 14, 30, 0.92));
  box-shadow: inset 0 0 34px rgba(0, 125, 255, 0.12), 0 24px 76px rgba(0, 20, 48, 0.24);
  overflow: hidden;
}

.config-result > * {
  min-width: 0;
  max-width: 100%;
}

.config-result .btn {
  width: 100%;
  padding-right: 18px;
  padding-left: 18px;
  text-align: center;
  white-space: normal;
}

.config-request-form {
  display: grid;
  gap: 12px;
  margin-top: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(69, 163, 255, 0.24);
}

.config-request-form h4 {
  margin: 0;
  color: var(--white);
  font-size: 1.05rem;
}

.config-request-form p {
  margin: 0;
  font-size: 0.88rem;
}

.config-request-form label {
  display: grid;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.86rem;
  font-weight: 800;
}

.config-request-form input,
.config-request-form textarea {
  width: 100%;
  border: 1px solid rgba(69, 163, 255, 0.28);
  border-radius: 7px;
  padding: 12px 13px;
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  font: 0.95rem Helvetica, Arial, sans-serif;
}

.config-request-form input:focus,
.config-request-form textarea:focus {
  border-color: rgba(0, 168, 232, 0.8);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 168, 232, 0.14);
}

.config-request-form textarea {
  min-height: 92px;
  resize: vertical;
}

.config-request-form .config-mail-note {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.config-details {
  display: none;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(69, 163, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.config-module.is-active .config-details {
  display: grid;
}

.config-chip,
.config-questions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  padding: 9px 12px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.88rem;
  line-height: 1.25;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.config-chip span,
.config-questions label {
  min-width: 0;
}

.config-chip input,
.config-questions input {
  width: auto;
  accent-color: var(--blue);
}

.config-chip:has(input:checked),
.config-questions label:has(input:checked) {
  border-color: rgba(0, 168, 232, 0.72);
  color: var(--white);
  background: rgba(0, 118, 255, 0.18);
}

.config-questions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.config-questions fieldset {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 1px solid rgba(69, 163, 255, 0.22);
  border-radius: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.04);
}

.config-questions legend {
  padding: 0 8px;
  color: var(--white);
  font-weight: 900;
}

.config-result h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.3rem, 1.7vw, 1.72rem);
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.config-result p {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Öffentliche Konfigurator-Landingpage */
.configurator-hero {
  padding-bottom: 26px;
}

.configurator-hero h1 {
  max-width: 900px;
  margin-bottom: 16px;
}

.configurator-hero .section-lead {
  max-width: 820px;
  margin: 0 0 26px;
  text-align: left;
}

.configurator-hero .trust-row {
  margin: 0;
  gap: 12px 28px;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 650;
}

.configurator-hero .trust-row li::before {
  width: 8px;
  height: 8px;
  border: 0;
  background: var(--blue);
}

.configurator-page-section {
  width: min(1240px, calc(100% - 48px));
  margin: 0 auto 72px;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid rgba(69, 163, 255, 0.42);
  border-radius: 14px;
  color: var(--white);
  background:
    radial-gradient(circle at 82% 12%, rgba(0, 118, 255, 0.22), transparent 28%),
    radial-gradient(circle at 18% 80%, rgba(0, 168, 232, 0.14), transparent 34%),
    linear-gradient(135deg, #020b19, #061327 48%, #061e3b);
  box-shadow: 0 28px 90px rgba(0, 10, 24, 0.24), inset 0 0 46px rgba(0, 118, 255, 0.08);
}

.configurator-page {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.config-progress {
  display: grid;
  gap: 14px;
  padding-bottom: 20px;
  scroll-margin-top: 118px;
  border-bottom: 1px solid rgba(69, 163, 255, 0.24);
  color: rgba(255, 255, 255, 0.84);
  font-weight: 800;
}

.config-progress ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.config-progress li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.78rem;
}

.config-progress li > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-style: normal;
}

.config-progress li em {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  font-style: normal;
}

.config-progress-short {
  display: none;
}

.config-progress li.is-current,
.config-progress li.is-complete {
  color: var(--white);
}

.site-nav a.active,
.site-nav a[aria-current="page"] {
  color: var(--blue-2);
}

.config-progress li.is-current > span,
.config-progress li.is-complete > span {
  border-color: var(--blue-2);
  background: var(--blue);
}

.config-step-panel {
  display: none;
  min-width: 0;
}

.config-step-panel.is-current {
  display: grid;
  gap: 18px;
}

.config-step-panel h2,
.config-step-panel h3,
.config-step-panel p {
  margin: 0;
}

.config-step-panel > p,
.config-result-hint,
.config-trust {
  color: rgba(255, 255, 255, 0.76);
}

.config-detail-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.config-detail-group {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(69, 163, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
}

.config-detail-group .config-details {
  display: grid;
}

.config-detail-error {
  margin: 0;
  color: #ffd1d1;
  font-size: 0.9rem;
  font-weight: 800;
}

.config-minimum-note {
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(0, 168, 232, 0.5);
  border-radius: 8px;
  color: var(--white) !important;
  background: rgba(0, 118, 255, 0.14);
  font-size: 0.93rem;
  font-weight: 750;
}

.config-question-single {
  max-width: 560px;
}

.config-summary {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(69, 163, 255, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
}

.config-summary h3,
.config-summary p {
  margin: 0;
}

.config-summary ul {
  display: grid;
  gap: 4px;
  margin: 7px 0 0;
  padding-left: 19px;
  color: rgba(255, 255, 255, 0.76);
}

.config-step-actions {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-top: 4px;
}

.config-step-actions .btn {
  min-width: 132px;
  justify-content: center;
}

.config-success {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(77, 227, 164, 0.52);
  border-radius: 8px;
  color: var(--white);
  background: rgba(8, 104, 70, 0.18);
}

.config-success h3,
.config-success p {
  margin: 0;
}

.config-success-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.config-success-actions .btn {
  min-width: 0;
}

@media (min-width: 700px) and (max-width: 900px) {
  .config-progress ol {
    gap: 5px;
  }

  .config-progress li {
    gap: 5px;
    font-size: 0.74rem;
  }

  .config-progress-full {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .config-progress-short {
    display: inline;
  }
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.faq-grid details {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(0, 118, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

.faq-grid summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}

.faq-grid p {
  margin: 12px 0 0;
}

@media (max-width: 760px) {
  .premium-topic-inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 24px;
  }

  .premium-topic-actions {
    justify-content: stretch;
  }

  .premium-topic-actions .btn {
    width: 100%;
  }

  .configurator-page-section {
    width: calc(100% - 32px);
    margin-bottom: 48px;
    padding: 20px 16px;
    border-radius: 10px;
  }

  .config-progress ol,
  .config-detail-groups,
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .config-progress li {
    font-size: 0.82rem;
  }

  .config-progress li span {
    width: 24px;
    height: 24px;
  }

  .configurator-page .configurator-modules,
  .configurator-page .config-details,
  .configurator-page .config-questions {
    grid-template-columns: minmax(0, 1fr);
  }

  .configurator-page .config-card {
    min-height: 0;
    padding: 18px;
  }

  .config-step-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .config-step-actions .btn,
  .configurator-page .config-result .btn {
    width: 100%;
    max-width: 100%;
  }

  .config-success-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .config-success-actions .btn {
    width: 100%;
  }

  .config-teaser-actions,
  .price-context-cta,
  .contact-bridge {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .about-price-section .config-teaser {
    margin-top: -28px;
  }

  .price-context-cta .btn,
  .config-teaser-actions .btn,
  .contact-bridge .btn {
    width: 100%;
  }
}

/* ================================================================
   GENERATED MOCKUP ASSETS
   Fresh text-free graphics generated from the supplied mockup language.
   The live site's real copy remains in the HTML; these assets are only
   used for the visual layer.
   ================================================================ */

body[data-design] .brand-mark {
  background-image: url("assets/images/visionext-logo-symbol-weiss.png") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

body[data-design="services"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.04), rgba(1, 7, 22, 0.13)),
    url("assets/images/generated/visionext-bg-system.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="web"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.04), rgba(1, 7, 22, 0.1)),
    url("assets/images/generated/visionext-bg-web.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="automation"] .hero .system-panel,
body[data-design="process"] .hero .system-panel,
body[data-design="process"] .hero .timeline-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.03), rgba(1, 7, 22, 0.1)),
    url("assets/images/generated/visionext-bg-workflow.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="app"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.03), rgba(1, 7, 22, 0.1)),
    url("assets/images/generated/visionext-bg-app.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="contact"] .hero .contact-card,
body[data-page="ueber-uns"] .hero .about-network {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.02), rgba(1, 7, 22, 0.08)),
    url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="benefits"] .hero .benefit-panel,
body[data-design="price"] .hero .benefit-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 8, 25, 0.02), rgba(1, 7, 22, 0.1)),
    url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-page="home"] .hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.97) 0%, rgba(2, 8, 24, 0.74) 43%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(72vw, 1180px) auto !important;
}

body[data-design="price"] .configurator-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.96) 0%, rgba(2, 8, 24, 0.78) 50%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1080px) auto !important;
}

body[data-design="legal"] .legal-page {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.95) 0%, rgba(2, 8, 24, 0.75) 48%, rgba(2, 8, 24, 0.2) 100%),
    url("assets/images/generated/visionext-bg-lake.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1120px) auto !important;
}

body[data-design] .hero .system-panel,
body[data-design] .hero .timeline-panel,
body[data-design] .hero .benefit-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .about-network {
  background-color: #02102d !important;
  background-blend-mode: normal !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

@media (max-width: 760px) {
  body[data-page="home"] .hero,
  body[data-design="price"] .configurator-hero,
  body[data-design="legal"] .legal-page {
    background-size: cover, auto 60% !important;
    background-position: center, center bottom !important;
  }
}

.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.seo-link-grid a {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid rgba(0, 118, 255, 0.16);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.86);
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(2, 18, 42, 0.06);
}

.seo-link-grid a::after {
  content: "→";
  color: var(--blue);
}

.service-page-content {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.45fr);
  gap: clamp(28px, 5vw, 58px);
  align-items: start;
}

.service-aside {
  position: sticky;
  top: 120px;
  padding: 28px;
  border-radius: 8px;
  color: var(--white);
  background: linear-gradient(135deg, #071423, #12334d);
  box-shadow: var(--shadow);
}

.service-aside p {
  color: rgba(255, 255, 255, 0.78);
}

.service-aside a {
  width: 100%;
  margin-top: 18px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-grid div {
  padding: 0 22px;
  border-right: 1px solid var(--line);
}

.stat-grid div:last-child {
  border-right: 0;
}

.stat-grid strong {
  display: block;
  color: var(--blue);
  font-size: 2.5rem;
  line-height: 1;
}

.identity-grid {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 34px;
}

.contact-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  align-items: start;
}

.contact-form,
.contact-details {
  min-width: 0;
  padding: 36px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-form h2,
.contact-form p,
.contact-form label:nth-of-type(3),
.contact-form label:nth-of-type(4),
.contact-form button {
  grid-column: 1 / -1;
}

.form-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.consent-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.45;
}

.consent-check a {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-check input {
  width: auto;
  min-width: 18px;
  min-height: 18px;
  margin-top: 2px;
}

.form-status {
  grid-column: 1 / -1;
  min-height: 1.4em;
  margin: 0;
  font-weight: 700;
}

.form-status.is-success,
.config-mail-note.is-success {
  color: #067544;
}

.form-status.is-error,
.config-mail-note.is-error {
  color: #b42318;
}

.nojs-form-notice {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}

.config-result .config-mail-note.is-success {
  color: #7ef2be;
}

.config-result .config-mail-note.is-error {
  color: #ffabb1;
}

label {
  display: grid;
  gap: 8px;
  color: transparent;
  font-size: 0;
}

.config-card {
  display: grid;
  color: var(--white);
  font-size: 1rem;
}

.config-chip,
.config-questions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px 18px;
  color: var(--ink);
  font: 1rem Helvetica, Arial, sans-serif;
}

.config-card input,
.config-chip input,
.config-questions input {
  width: auto;
  border: 0;
  padding: 0;
  accent-color: var(--blue);
}

textarea {
  resize: vertical;
}

.request-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
}

.request-steps div {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 18px;
  align-items: center;
}

.cta-band {
  max-width: var(--wrap);
  margin: 0 auto 34px;
  padding: 0 28px;
}

.cta-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 350px) 150px;
  gap: 14px 34px;
  align-items: center;
  min-height: 150px;
  padding: 32px clamp(28px, 4vw, 48px);
  color: var(--white);
  border-radius: 8px;
  background:
    radial-gradient(circle at 92% 72%, rgba(0, 117, 255, 0.32), transparent 28%),
    linear-gradient(120deg, #061327, #061e3b);
}

.cta-inner h2 {
  margin: 0;
  max-width: 660px;
  font-size: clamp(1.45rem, 2vw, 1.82rem);
  line-height: 1.12;
}

.cta-inner p:not(.eyebrow) {
  max-width: 620px;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.76);
}

.cta-inner > div {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

.cta-inner .btn {
  grid-column: 2;
  justify-self: stretch;
  width: 100%;
  justify-content: center;
}

.cta-inner .btn:first-of-type {
  align-self: end;
}

.cta-inner .btn:not(:first-of-type) {
  align-self: start;
}

.cta-inner .btn:only-of-type {
  grid-row: 1 / span 2;
  align-self: center;
}

.cta-inner .brand-mark {
  position: relative;
  grid-column: 3;
  grid-row: 1 / span 2;
  justify-self: end;
  pointer-events: none;
  opacity: 0.38;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 0.9fr));
  gap: 48px;
  padding: 40px max(28px, calc((100vw - var(--wrap)) / 2)) 30px;
  color: rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(circle at 10% 0%, rgba(0, 121, 255, 0.2), transparent 25%),
    linear-gradient(120deg, #020b19, #06203d);
}

.site-footer h2,

.site-footer .footer-title {
  margin: 0 0 14px;
  font-size: 1rem;
}

.site-footer a {
  display: block;
  color: rgba(255, 255, 255, 0.84);
}

.footer-contact-link,
.footer-social-links a,
.footer-contact-line {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
}

.footer-contact-line {
  display: inline-flex;
}

.footer-icon {
  display: inline-grid;
  flex: 0 0 1.25rem;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0;
  line-height: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.footer-icon-website {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18'/%3E%3C/svg%3E");
}

.footer-icon-instagram {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.footer-icon-facebook {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21v-8h2.7l.4-3H14V8.1c0-.9.3-1.6 1.7-1.6h1.8V3.8c-.3 0-1.4-.1-2.6-.1-2.6 0-4.4 1.6-4.4 4.5V10H8v3h2.5v8'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 21v-8h2.7l.4-3H14V8.1c0-.9.3-1.6 1.7-1.6h1.8V3.8c-.3 0-1.4-.1-2.6-.1-2.6 0-4.4 1.6-4.4 4.5V10H8v3h2.5v8'/%3E%3C/svg%3E");
}

.footer-icon-location {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
}

.footer-icon-phone {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l1.5 4-2.3 1.7a14 14 0 0 0 6.1 6.1L16 15.5 20 17v4c-8.3.4-16.6-7.7-15-17Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l1.5 4-2.3 1.7a14 14 0 0 0 6.1 6.1L16 15.5 20 17v4c-8.3.4-16.6-7.7-15-17Z'/%3E%3C/svg%3E");
}

.footer-icon-email {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

.footer-social-links a {
  display: inline-flex !important;
}

.footer-social-links a:hover .footer-icon,
.footer-social-links a:focus-visible .footer-icon,
.footer-contact-link:hover .footer-icon,
.footer-contact-link:focus-visible .footer-icon {
  color: var(--cyan);
}

.site-footer address {
  font-style: normal;
  line-height: 1.65;
}

.footer-faq {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.84);
}

.footer-knowledge {
  min-width: 0;
}

.footer-group {
  color: rgba(255, 255, 255, 0.9);
}

.footer-group summary {
  cursor: pointer;
  margin-bottom: 14px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 800;
}

.footer-group a {
  margin-top: 7px;
  padding-left: 14px;
  font-size: 0.92rem;
}

.footer-faq summary {
  cursor: pointer;
  color: inherit;
  font-weight: 700;
}

.footer-faq a {
  margin-top: 6px;
  padding-left: 14px;
  font-size: 0.92rem;
}

.footer-link {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.84);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.footer-link:hover,
.footer-link:focus-visible {
  color: var(--cyan);
}

.site-footer p,
.site-footer h2,
.site-footer .footer-title,
.site-footer .brand,
.site-footer small {
  color: rgba(255, 255, 255, 0.92);
}

.site-footer small {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.legal-page {
  max-width: var(--wrap);
  min-height: 70vh;
  margin: 0 auto;
  padding: 90px 28px;
}

.cookie-consent {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;
  width: min(520px, calc(100vw - 36px));
  border: 1px solid rgba(65, 167, 255, 0.48);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  background: rgba(3, 16, 34, 0.98);
  color: var(--white);
}

.cookie-consent[hidden] {
  display: none;
}

.cookie-consent-inner {
  padding: 24px;
}

.cookie-consent h2,

.cookie-consent .cookie-title,
.cookie-consent p {
  margin: 0;
}

.cookie-consent h2,

.cookie-consent .cookie-title {
  margin-bottom: 8px;
  font-size: 1.32rem;
}

.cookie-consent p:not(.eyebrow) {
  color: rgba(255, 255, 255, 0.76);
}

.cookie-consent a {
  color: var(--cyan);
  text-decoration: underline;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cookie-actions .btn {
  min-height: 44px;
  padding: 10px 14px;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .menu-toggle {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    padding: 0 14px;
    color: var(--white);
    background: transparent;
    font: inherit;
    font-weight: 800;
  }

  .site-nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .site-nav.is-open {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero-inner,
  .contact-grid,
  .service-detail,
  .service-page-content,
  .config-teaser,
  .configurator-layout,
  .why-grid {
    grid-template-columns: 1fr;
  }

  .cards-5,
  .cards-4,
  .module-showcase,
  .home-process,
  .price-teasers,
  .price-grid,
  .configurator-modules,
  .config-details,
  .seo-link-grid,
  .mini-benefits,
  .identity-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

}

/* Final homepage overrides must stay last so the reference artwork is not
   replaced by the generic page artwork rules above. */
body[data-page="home"] .hero::after {
  background-image: url("assets/images/mockup-bg/visionext-home-reference-mountains.webp") !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  background-size: min(58vw, 900px) auto !important;
  opacity: 0.94 !important;
  mix-blend-mode: screen;
}

body[data-page="home"] .hero .hero-media-panel {
  min-height: 500px;
  aspect-ratio: 866 / 650 !important;
  background-color: transparent !important;
  background-image: url("assets/images/mockup-bg/visionext-home-reference-right.webp") !important;
  background-blend-mode: normal !important;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(84, 153, 255, 0.38);
  box-shadow: none;
}

body[data-page="home"] .hero .hero-media-panel::before,
body[data-page="home"] .hero .hero-media-panel::after {
  display: none;
}

/* Keep the reference illustration visible in the first viewport on desktop. */
body[data-design] .hero::after {
  background-position: right center;
  background-size: min(62vw, 900px) auto;
  opacity: 0.34;
}

body[data-design="home"] .hero::after {
  opacity: 0.12;
}

@media (max-width: 760px) {
  body[data-design] .hero::after {
    background-position: center bottom;
    background-size: auto 58%;
    opacity: 0.24;
  }

  body[data-design="home"] .hero::after {
    opacity: 0.08;
  }
}

/* ================================================================
   Reference composition v2
   The reference pages use a strong editorial split: copy left,
   illustration right, then a row of illuminated modules. This layer
   gives every page that composition without changing its content.
   ================================================================ */

:root {
  --ref-bg: #020817;
  --ref-panel: rgba(4, 20, 51, 0.84);
  --ref-panel-soft: rgba(8, 31, 73, 0.7);
  --ref-cyan: #21d5ff;
  --ref-blue: #3986ff;
  --ref-violet: #6bc8ff;
}

body {
  background:
    radial-gradient(circle at 8% 6%, rgba(38, 119, 255, 0.12), transparent 23rem),
    radial-gradient(circle at 96% 42%, rgba(73, 190, 255, 0.11), transparent 28rem),
    var(--ref-bg);
}

main {
  background:
    linear-gradient(180deg, rgba(2, 8, 23, 0.1), rgba(2, 8, 23, 0.86)),
    radial-gradient(ellipse at 50% 0%, rgba(14, 81, 196, 0.14), transparent 48%);
}

.site-header {
  min-height: 82px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom-color: rgba(70, 185, 255, 0.28);
  background: linear-gradient(180deg, rgba(2, 7, 20, 0.98), rgba(3, 14, 35, 0.9));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.brand {
  gap: 10px;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 48px;
  height: 48px;
}

.site-nav {
  gap: clamp(12px, 1.8vw, 28px);
  font-size: 0.92rem;
}

.site-nav a {
  color: rgba(233, 240, 255, 0.84);
}

.header-cta {
  min-height: 48px;
  padding: 0 23px;
  font-size: 0.88rem;
}

.hero {
  min-height: 690px;
  border-bottom: 1px solid rgba(53, 188, 255, 0.18);
  background:
    radial-gradient(ellipse at 72% 42%, rgba(18, 97, 255, 0.3), transparent 29%),
    radial-gradient(ellipse at 94% 100%, rgba(79, 191, 255, 0.18), transparent 27%),
    linear-gradient(118deg, #020817 0%, #061a3e 53%, #020817 100%);
}

.hero::before {
  opacity: 0.68;
  background:
    repeating-radial-gradient(ellipse at 76% 72%, rgba(58, 164, 255, 0.2) 0 1px, transparent 1px 14px),
    linear-gradient(125deg, transparent 30%, rgba(51, 114, 255, 0.12) 58%, transparent 72%);
}

.hero::after {
  opacity: 0.48 !important;
  background-position: right 24% center !important;
  background-size: min(61vw, 930px) auto !important;
  filter: saturate(1.24) contrast(1.08);
}

.hero-inner {
  width: min(100%, 1460px);
  min-height: 690px;
  padding-top: 76px;
  padding-bottom: 68px;
  grid-template-columns: minmax(0, 0.86fr) minmax(450px, 1.14fr);
  gap: clamp(38px, 5vw, 88px);
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 670px;
}

.hero-copy::before {
  position: absolute;
  top: -42px;
  left: -40px;
  width: 220px;
  height: 220px;
  content: "";
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(54, 140, 255, 0.15), transparent 68%);
  filter: blur(8px);
}

.eyebrow {
  position: relative;
  color: #9baeff;
  text-shadow: 0 0 18px rgba(107, 134, 255, 0.34);
}

.eyebrow::after {
  display: inline-block;
  width: 56px;
  height: 1px;
  margin: 0 0 4px 18px;
  content: "";
  background: linear-gradient(90deg, #eaf7ff, var(--ref-cyan));
  box-shadow: 0 0 10px rgba(33, 213, 255, 0.75);
}

.hero-copy > p:not(.eyebrow) {
  position: relative;
  z-index: 1;
}

.hero h1 {
  position: relative;
  z-index: 1;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.hero h1::after {
  position: absolute;
  right: 0;
  bottom: -17px;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, var(--ref-cyan), transparent 68%);
  opacity: 0.52;
}

.hero-actions {
  position: relative;
  z-index: 2;
  gap: 14px;
}

.btn,
.header-cta {
  min-height: 54px;
  border-width: 1px;
  letter-spacing: -0.01em;
}

.btn.primary {
  background:
    linear-gradient(120deg, rgba(26, 116, 255, 0.95), rgba(49, 63, 181, 0.94) 62%, rgba(72, 187, 255, 0.9)) padding-box,
    linear-gradient(110deg, #43dcff, #6d7aff 58%, #7ac7ff) border-box;
  box-shadow: 0 0 28px rgba(44, 145, 255, 0.34), 0 16px 34px rgba(0, 8, 32, 0.34);
}

.btn.ghost {
  border-color: rgba(74, 203, 255, 0.58);
  background: rgba(2, 17, 47, 0.54);
}

.trust-row {
  position: relative;
  z-index: 2;
}

.hero .system-panel,
.hero .contact-card,
.hero .benefit-panel,
.hero .about-network,
.hero .hero-media-panel {
  position: relative;
  z-index: 2;
  align-self: center;
  min-height: 470px;
  border: 1px solid rgba(31, 198, 255, 0.84);
  border-radius: 22px;
  background-color: rgba(2, 12, 33, 0.76);
  box-shadow:
    0 0 0 1px rgba(73, 113, 255, 0.14),
    0 0 34px rgba(0, 122, 255, 0.22),
    0 28px 90px rgba(0, 0, 0, 0.42),
    inset 0 0 46px rgba(24, 112, 255, 0.17);
}

.hero .system-panel::before,
.hero .contact-card::before,
.hero .benefit-panel::before,
.hero .about-network::before,
.hero .hero-media-panel::before {
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(35, 210, 255, 0.12), transparent 32%, rgba(94, 197, 255, 0.13) 86%, transparent),
    linear-gradient(180deg, transparent 58%, rgba(1, 8, 24, 0.3));
  opacity: 1;
  transform: none;
  animation: none;
}

.hero .system-panel > *,
.hero .contact-card > *,
.hero .benefit-panel > *,
.hero .about-network > *,
.hero .hero-media-panel > * {
  position: relative;
  z-index: 2;
}

.hero .system-panel {
  min-height: 470px;
  padding: 38px;
  background-color: #071b4b;
  background-image: var(--mockup-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: screen;
}

.hero .system-panel h2,
.hero .contact-card h2,
.hero .benefit-panel h2 {
  color: #f4f8ff;
  font-size: clamp(1.25rem, 1.6vw, 1.56rem);
  letter-spacing: -0.02em;
}

.hero .process-grid {
  gap: 16px;
}

.hero .process-item {
  min-height: 160px;
  align-content: start;
  padding: 18px 12px;
  border: 1px solid rgba(77, 171, 255, 0.3);
  border-radius: 14px;
  background: rgba(2, 15, 41, 0.66);
  box-shadow: inset 0 0 22px rgba(24, 106, 255, 0.12);
}

.hero .process-item:nth-child(2n) {
  border-color: rgba(106, 201, 255, 0.44);
}

.hero .process-item:not(:last-child)::after {
  right: -14px;
  color: var(--ref-cyan);
  text-shadow: 0 0 12px rgba(33, 213, 255, 0.8);
}

.hero .panel-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border-color: rgba(50, 215, 255, 0.7);
  background: radial-gradient(circle, rgba(42, 146, 255, 0.38), rgba(6, 28, 75, 0.5));
  box-shadow: 0 0 22px rgba(34, 189, 255, 0.28);
}

.hero-media-panel {
  aspect-ratio: 1.38 / 1 !important;
  overflow: hidden;
  background-color: #071b4b;
  background-image: var(--mockup-bg) !important;
  background-position: center !important;
  background-size: cover !important;
  background-blend-mode: screen;
}

.hero-media-panel::after {
  position: absolute;
  right: 28px;
  bottom: 26px;
  width: 130px;
  height: 4px;
  content: "";
  background: linear-gradient(90deg, var(--ref-cyan), var(--ref-violet));
  box-shadow: 0 0 18px rgba(33, 213, 255, 0.8);
}

.hero-media-panel::before {
  z-index: 1;
  border-radius: inherit;
  background: var(--mockup-bg) center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.52;
}

.module-showcase {
  gap: 18px;
}

.module-showcase .module-card,
.cards-3 > *,
.cards-4 > *,
.cards-5 > *,
.feature-card,
.step-card,
.identity-card,
.home-process article {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  border: 1px solid rgba(36, 202, 255, 0.62);
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 5%, rgba(78, 195, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(7, 38, 88, 0.92), rgba(3, 14, 38, 0.94));
  box-shadow: inset 0 0 34px rgba(34, 122, 255, 0.1), 0 20px 60px rgba(0, 3, 18, 0.32);
}

.module-showcase .module-card::before,
.cards-3 > *::before,
.cards-4 > *::before,
.cards-5 > *::before,
.feature-card::before,
.step-card::before,
.identity-card::before,
.home-process article::before {
  position: absolute;
  top: -54px;
  right: -34px;
  width: 150px;
  height: 150px;
  content: "";
  border: 1px solid rgba(48, 210, 255, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 24px rgba(62, 123, 255, 0.14);
}

.module-showcase .module-card:nth-child(2n),
.cards-3 > *:nth-child(2n),
.cards-4 > *:nth-child(2n) {
  border-color: rgba(102, 206, 255, 0.66);
}

.module-card h3,
.module-card p,
.module-card ul,
.feature-card p,
.step-card p,
.identity-card p,
.home-process p {
  position: relative;
  z-index: 1;
}

.module-card .icon,
.feature-card .icon,
.step-card .icon,
.identity-card .icon,
.home-process .icon {
  position: relative;
  z-index: 1;
  border-radius: 14px;
  color: #91e8ff;
  background: linear-gradient(145deg, rgba(26, 136, 255, 0.36), rgba(72, 189, 255, 0.26));
  box-shadow: 0 0 24px rgba(35, 164, 255, 0.24);
}

.section {
  position: relative;
}

.section > .eyebrow.center::after {
  display: block;
  width: 88px;
  margin: 14px auto 0;
}

.section h2 {
  color: #f3f7ff;
  text-shadow: 0 5px 22px rgba(0, 0, 0, 0.24);
}

.section-lead {
  color: #bdcdec;
}

.site-footer {
  position: relative;
  overflow: hidden;
  border-top-color: rgba(38, 197, 255, 0.34);
}

.site-footer::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.26;
  background: repeating-radial-gradient(ellipse at 68% 44%, rgba(44, 150, 255, 0.2) 0 1px, transparent 1px 16px);
}

@media (min-width: 760px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    grid-column: auto;
    flex-direction: row;
    justify-content: flex-end;
    gap: 12px;
    font-size: 0.72rem;
  }

  .site-nav a {
    padding: 10px 0 12px;
  }

  .header-cta {
    display: inline-flex;
    min-height: 44px;
    padding: 0 13px;
    font-size: 0.72rem;
  }

  .hero-inner,
  .hero-home .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.88fr) minmax(330px, 1.12fr) !important;
    min-height: 620px;
    gap: 26px;
  }

  .hero .system-panel,
  .hero .contact-card,
  .hero .benefit-panel,
  .hero .about-network,
  .hero .hero-media-panel {
    min-height: 390px;
  }

  .hero .system-panel {
    padding: 24px;
  }

  .hero .contact-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }

  .hero .contact-card .brand-mark.large {
    width: 150px;
    height: 78px;
    justify-self: center;
  }

  .hero .contact-card .contact-list {
    grid-template-columns: 1fr;
    gap: 14px;
    padding-left: 0;
    border-left: 0;
  }

  .hero .contact-card .contact-list p {
    padding-left: 48px;
    font-size: 0.84rem;
  }

  .hero .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .process-item:not(:last-child)::after {
    display: none;
  }

  .module-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 759px) {
  .hero {
    min-height: 0;
  }

  .hero-inner {
    min-height: 0;
    padding-top: 58px;
    padding-bottom: 54px;
  }

  .hero h1::after {
    bottom: -12px;
  }

  .hero .system-panel,
  .hero .contact-card,
  .hero .benefit-panel,
  .hero .about-network,
  .hero .hero-media-panel {
    min-height: 360px;
  }

  .hero .system-panel {
    padding: 22px;
  }

  .hero .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero .process-item:not(:last-child)::after {
    display: none;
  }

  .module-showcase,
  .cards-3,
  .cards-4,
  .cards-5 {
    grid-template-columns: 1fr;
  }

  .module-showcase .module-card,
  .cards-3 > *,
  .cards-4 > *,
  .cards-5 > * {
    min-height: 220px;
  }
}

/* Homepage hero: match the supplied reference composition. */
body[data-page="home"] .hero {
  min-height: clamp(720px, calc(100svh - 82px), 860px);
  background:
    radial-gradient(ellipse at 78% 30%, rgba(61, 88, 255, 0.18), transparent 28%),
    linear-gradient(118deg, #020817 0%, #061b3f 58%, #020817 100%);
}

body[data-page="home"] .hero-inner {
  min-height: clamp(560px, calc(100svh - 235px), 700px);
  padding-bottom: 36px;
}

body[data-page="home"] .hero .hero-media-panel {
  min-height: 500px;
  aspect-ratio: 866 / 650 !important;
  background-color: transparent;
  background-image: var(--mockup-bg) !important;
  background-blend-mode: normal;
  background-position: center !important;
  background-size: cover !important;
  border-color: rgba(84, 153, 255, 0.38);
  box-shadow: none;
}

body[data-page="home"] .hero .hero-media-panel::before {
  display: none;
}

body[data-page="home"] .hero .hero-media-panel::after {
  display: none;
}

body[data-page="home"] .hero-copy-trust {
  display: none;
}

.hero-highlights {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: min(100%, 1460px);
  margin: -2px auto 0;
  padding: 18px 28px 24px;
  border-top: 1px solid rgba(68, 189, 255, 0.34);
  background: linear-gradient(180deg, rgba(3, 12, 31, 0.76), rgba(2, 8, 22, 0.9));
}

.hero-highlights article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 70px;
  padding: 0 26px;
  border-right: 1px solid rgba(126, 151, 255, 0.28);
}

.hero-highlights article:last-child {
  border-right: 0;
}

.highlight-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ref-violet);
  border-radius: 50%;
  color: #87d2ff;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 0 20px rgba(86, 196, 255, 0.38), inset 0 0 15px rgba(51, 128, 255, 0.18);
}

.hero-highlights strong,
.hero-highlights small {
  display: block;
}

.hero-highlights strong {
  color: #f4f7ff;
  font-size: 1rem;
}

.hero-highlights small {
  margin-top: 4px;
  color: #b8c7e7;
  font-size: 0.75rem;
  line-height: 1.35;
}

@media (min-width: 760px) and (max-width: 1100px) {
  body[data-page="home"] .hero .hero-media-panel {
    min-height: 390px;
  }

  .hero-highlights {
    grid-template-columns: repeat(2, 1fr);
    padding-right: 16px;
    padding-left: 16px;
  }

  .hero-highlights article:nth-child(2) {
    border-right: 0;
  }

  .hero-highlights article:nth-child(-n + 2) {
    border-bottom: 1px solid rgba(126, 151, 255, 0.28);
  }
}

@media (max-width: 759px) {
  body[data-page="home"] .hero::after {
    background-size: auto 42% !important;
    opacity: 0.48 !important;
  }

  body[data-page="home"] .hero .hero-media-panel {
    min-height: 310px;
  }

  .hero-highlights {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 10px 16px 16px;
  }

  .hero-highlights article,
  .hero-highlights article:nth-child(2) {
    min-height: 68px;
    padding: 10px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(126, 151, 255, 0.22);
  }

  .hero-highlights article:last-child {
    border-bottom: 0;
  }
}

/* Visionext visual refresh: navy, blue and restrained violet accents.
   Layout, typography, interaction states and responsive breakpoints remain unchanged. */
:root {
  --navy: #061329;
  --navy-2: #0a2147;
  --navy-3: #174b91;
  --blue: #4d8dff;
  --blue-2: #9fc4ff;
  --cyan: #a2ddff;
  --ink: #edf5ff;
  --muted: #b9cbe2;
  --line: rgba(137, 184, 255, 0.24);
  --soft: #0b1e3b;
  --white: #f8fbff;
  --panel: rgba(255, 255, 255, 0.08);
  --text: #edf5ff;
  --violet: #8cddff;
  --shadow: 0 24px 70px rgba(0, 6, 22, 0.34);
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 88% 8%, rgba(77, 178, 220, 0.12), transparent 24%),
    radial-gradient(circle at 10% 42%, rgba(24, 105, 221, 0.1), transparent 32%),
    var(--navy);
}

main {
  background:
    radial-gradient(ellipse at 18% 18%, rgba(70, 137, 255, 0.08), transparent 28%),
    radial-gradient(ellipse at 84% 58%, rgba(104, 205, 255, 0.08), transparent 26%);
}

.site-header {
  border-bottom: 1px solid rgba(132, 184, 255, 0.18);
  background: rgba(3, 10, 25, 0.84);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.18);
}

.brand-mark {
  background-image: url("assets/images/visionext-logo-symbol-weiss.png");
  filter: drop-shadow(0 11px 13px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 22px rgba(77, 141, 255, 0.28));
}

.brand-mark.large {
  background-image: url("assets/images/visionext-logo-wordmark-weiss.png");
  background-size: 113% auto;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32));
}

.site-nav a:hover,
.site-nav a[aria-current="page"],
.site-nav a.active {
  color: var(--violet);
}

.header-cta,
.btn.primary {
  background: linear-gradient(135deg, #4d8dff, #2768d9 62%, #68b9d9);
  box-shadow: 0 18px 40px rgba(47, 106, 230, 0.34);
}

.btn.ghost {
  border-color: rgba(159, 196, 255, 0.42);
  background: rgba(255, 255, 255, 0.045);
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  border-color: rgba(140, 221, 255, 0.72);
  background: rgba(140, 221, 255, 0.12);
}

.hero {
  background:
    radial-gradient(ellipse at 68% 92%, rgba(70, 139, 255, 0.62), transparent 25%),
    radial-gradient(ellipse at 78% 54%, rgba(105, 205, 255, 0.16), transparent 29%),
    linear-gradient(115deg, #030b1b 0%, #0b2854 48%, #061329 100%);
}

.hero::before {
  background:
    repeating-radial-gradient(ellipse at 83% 78%, rgba(90, 169, 255, 0.22) 0 1px, transparent 1px 13px),
    linear-gradient(135deg, transparent 40%, rgba(136, 218, 255, 0.08) 53%, transparent 65%);
}

.eyebrow,
h1 strong,
.blue,
.card-link,
.price-card .price span,
.price-card .price small,
.consent-check a {
  color: var(--blue-2);
}

.hero-subline,
.trust-row li::before {
  color: var(--cyan);
}

.system-panel,
.timeline-panel,
.benefit-panel,
.about-network,
.growth-panel,
.module-showcase .module-card,
.why-grid > div:first-child,
.why-cards article,
.home-process article,
.feature-card,
.step-card,
.contact-form,
.contact-details,
.wide-stat-band,
.mini-benefits,
.identity-card,
.comparison-grid > div,
.founder-note,
.service-detail,
.price-card,
.contact-bridge,
.faq-grid details,
.request-steps {
  border-color: rgba(126, 179, 255, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(50, 113, 217, 0.045));
  box-shadow: inset 0 0 34px rgba(45, 117, 255, 0.08), 0 20px 60px rgba(0, 8, 28, 0.26);
}

.module-card h3,
.module-card p,
.module-card ul,
.why-grid p,
.why-cards p,
.home-process p,
.feature-card p,
.step-card p,
.identity-card p,
.contact-form p,
.contact-details p,
.site-footer p,
.section-lead,
.service-detail li,
.price-card p,
.comparison-grid ul,
.founder-note p:not(.eyebrow),
.faq-grid p,
.mini-benefit p {
  color: var(--muted);
}

.module-card li::before,
.service-detail li::before,
.configurator-hero .trust-row li::before {
  background: var(--blue);
  box-shadow: 0 0 16px rgba(77, 141, 255, 0.45);
}

.icon {
  color: var(--blue-2);
  background: rgba(77, 141, 255, 0.14);
  box-shadow: inset 0 0 22px rgba(77, 141, 255, 0.12);
}

.step-card span {
  color: var(--blue-2);
}

.price-orientation,
.config-teaser,
.cta-inner {
  background:
    radial-gradient(circle at 82% 18%, rgba(79, 137, 255, 0.28), transparent 28%),
    radial-gradient(circle at 18% 86%, rgba(104, 204, 255, 0.14), transparent 30%),
    linear-gradient(135deg, #030c1e, #0a2852 56%, #071732);
  box-shadow: 0 22px 62px rgba(0, 7, 24, 0.34), inset 0 0 44px rgba(58, 126, 255, 0.08);
}

.price-teasers div,
.premium-topic-inner,
.price-context-cta {
  border-color: rgba(126, 179, 255, 0.26);
  background: rgba(255, 255, 255, 0.065);
}

.premium-topic-inner {
  box-shadow: inset 0 0 30px rgba(45, 117, 255, 0.08), 0 20px 60px rgba(0, 8, 28, 0.24);
}

.faq-grid summary,
.configurator-hero .trust-row,
.consent-check,
.price-context-cta p {
  color: var(--ink);
}

.faq-grid a,
.site-footer a:hover,
.footer-link:hover,
.footer-link:focus-visible {
  color: var(--cyan);
}

input,
textarea,
.config-request-form input,
.config-request-form textarea {
  border-color: rgba(126, 179, 255, 0.28);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.075);
}

input:focus,
textarea:focus,
.config-request-form input:focus,
.config-request-form textarea:focus {
  border-color: rgba(140, 221, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(140, 221, 255, 0.15);
}

.site-footer {
  border-top: 1px solid rgba(126, 179, 255, 0.16);
  background:
    radial-gradient(circle at 10% 0%, rgba(56, 127, 255, 0.22), transparent 25%),
    radial-gradient(circle at 86% 80%, rgba(104, 204, 255, 0.12), transparent 28%),
    linear-gradient(120deg, #020917, #071f42);
}

.site-footer h2,

.site-footer .footer-title,
.site-footer .brand,
.site-footer small,
.site-footer a,
.footer-group summary,
.footer-link {
  color: rgba(245, 249, 255, 0.92);
}

.cookie-consent {
  border-color: rgba(126, 179, 255, 0.42);
  background: rgba(4, 15, 36, 0.98);
}

/* Feinabstimmung nach den gelieferten Referenz-Mockups. */
main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

main::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  opacity: 0.3;
  background:
    repeating-radial-gradient(ellipse at 72% 22%, rgba(52, 137, 255, 0.18) 0 1px, transparent 1px 15px),
    repeating-radial-gradient(ellipse at 28% 72%, rgba(88, 202, 255, 0.12) 0 1px, transparent 1px 19px);
  transform: rotate(-4deg) scale(1.12);
}

main > * {
  position: relative;
  z-index: 1;
}

.site-header {
  background: linear-gradient(180deg, rgba(2, 8, 22, 0.96), rgba(4, 14, 34, 0.84));
}

.site-nav a {
  position: relative;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after,
.site-nav a.active::after {
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  content: "";
  background: linear-gradient(90deg, #36d7ff, #5a8dff 58%, #6ccbff);
  box-shadow: 0 0 13px rgba(53, 193, 255, 0.72);
}

.header-cta,
.btn {
  border-radius: 999px;
}

.header-cta,
.btn.primary {
  border-color: transparent;
  background:
    linear-gradient(135deg, rgba(7, 23, 54, 0.96), rgba(15, 42, 88, 0.92)) padding-box,
    linear-gradient(105deg, #f0f7ff, #3bd8ff 58%, #65c7ff) border-box;
  box-shadow: 0 0 24px rgba(49, 139, 255, 0.2), 0 15px 34px rgba(0, 5, 22, 0.28);
}

.header-cta:hover,
.btn.primary:hover,
.header-cta:focus-visible,
.btn.primary:focus-visible {
  background:
    linear-gradient(135deg, rgba(20, 54, 108, 0.98), rgba(38, 44, 112, 0.94)) padding-box,
    linear-gradient(105deg, #ffffff, #3bd8ff 58%, #7bccff) border-box;
  box-shadow: 0 0 30px rgba(70, 170, 255, 0.38), 0 18px 42px rgba(0, 5, 22, 0.34);
}

.btn.ghost {
  border-color: rgba(180, 221, 255, 0.48);
  background: rgba(3, 16, 40, 0.34);
}

.btn.ghost:hover,
.btn.ghost:focus-visible {
  border-color: #79d2ff;
  background: rgba(82, 150, 176, 0.18);
  box-shadow: 0 0 22px rgba(103, 214, 255, 0.24);
}

.hero,
.price-orientation,
.config-teaser,
.cta-inner {
  border-color: rgba(57, 187, 255, 0.34);
  background:
    radial-gradient(ellipse at 76% 34%, rgba(17, 109, 255, 0.24), transparent 26%),
    radial-gradient(ellipse at 70% 72%, rgba(87, 195, 255, 0.16), transparent 22%),
    repeating-radial-gradient(ellipse at 80% 70%, rgba(46, 122, 255, 0.12) 0 1px, transparent 1px 14px),
    linear-gradient(118deg, #020816 0%, #061b3b 52%, #020916 100%);
}

.system-panel,
.timeline-panel,
.benefit-panel,
.about-network,
.growth-panel,
.module-card,
.why-grid > div:first-child,
.why-cards article,
.home-process article,
.feature-card,
.step-card,
.contact-form,
.contact-details,
.wide-stat-band,
.mini-benefits,
.identity-card,
.comparison-grid > div,
.founder-note,
.service-detail,
.price-card,
.contact-bridge,
.faq-grid details,
.request-steps {
  border-radius: 12px;
  border-color: rgba(44, 205, 255, 0.34);
  background: linear-gradient(145deg, rgba(5, 28, 67, 0.88), rgba(3, 13, 34, 0.82));
  box-shadow: inset 0 0 32px rgba(26, 119, 255, 0.1), 0 0 26px rgba(18, 88, 207, 0.12), 0 22px 60px rgba(0, 5, 22, 0.28);
}

.module-card:hover,
.feature-card:hover,
.step-card:hover,
.identity-card:hover {
  border-color: rgba(65, 218, 255, 0.78);
  box-shadow: inset 0 0 34px rgba(29, 132, 255, 0.14), 0 0 28px rgba(46, 160, 255, 0.2), 0 24px 64px rgba(0, 5, 22, 0.34);
}

.icon {
  border: 1px solid rgba(57, 204, 255, 0.38);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(24, 106, 232, 0.22), rgba(86, 197, 255, 0.12));
  box-shadow: inset 0 0 20px rgba(46, 188, 255, 0.14), 0 0 16px rgba(46, 128, 255, 0.12);
}

.price-teasers div,
.premium-topic-inner,
.price-context-cta,
.config-detail-group,
.config-summary,
.config-questions fieldset {
  border-color: rgba(45, 197, 255, 0.28);
  background: linear-gradient(145deg, rgba(14, 52, 108, 0.42), rgba(9, 23, 59, 0.5));
}

.configurator-page-section,
.configurator-dialog {
  border-color: rgba(52, 183, 255, 0.42);
  background:
    radial-gradient(ellipse at 78% 14%, rgba(26, 106, 255, 0.24), transparent 30%),
    radial-gradient(ellipse at 20% 80%, rgba(86, 194, 255, 0.14), transparent 30%),
    repeating-radial-gradient(ellipse at 74% 68%, rgba(46, 122, 255, 0.1) 0 1px, transparent 1px 15px),
    linear-gradient(135deg, #020816, #061b3b 52%, #020a18);
}

.config-card,
.config-result,
.config-success {
  border-radius: 12px;
  border-color: rgba(50, 190, 255, 0.36);
  background: linear-gradient(145deg, rgba(11, 50, 107, 0.5), rgba(4, 18, 46, 0.76));
  box-shadow: inset 0 0 30px rgba(25, 119, 255, 0.1), 0 0 24px rgba(36, 112, 234, 0.1);
}

.config-card:has(input:checked),
.config-chip:has(input:checked),
.config-questions label:has(input:checked) {
  border-color: rgba(66, 220, 255, 0.86);
  background: linear-gradient(145deg, rgba(26, 114, 245, 0.34), rgba(75, 177, 228, 0.18));
  box-shadow: 0 0 22px rgba(53, 184, 255, 0.16);
}

/* Die gelieferten Mockup-Grafiken werden als echte, transparente Hintergrundgrafiken genutzt. */
body[data-design="home"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-home.webp"); }
body[data-design="services"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-services.webp"); }
body[data-design="web"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-web.webp"); }
body[data-design="automation"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-automation.webp"); }
body[data-design="app"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-app.webp"); }
body[data-design="process"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-process.webp"); }
body[data-design="contact"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-contact.webp"); }
body[data-design="price"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-price.webp"); }
body[data-design="benefits"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-benefits.webp"); }
body[data-design="legal"] { --mockup-bg: url("assets/images/mockup-bg/visionext-mockup-bg-legal.webp"); }
body[data-page="home"] { --mockup-bg: url("assets/images/mockup-bg/visionext-home-reference-right.webp"); }
body[data-page="home"] .hero::after {
  background-image: url("assets/images/mockup-bg/visionext-home-reference-mountains.webp") !important;
  background-position: left bottom !important;
  background-repeat: no-repeat !important;
  background-size: min(58vw, 900px) auto !important;
  opacity: 0.94 !important;
  mix-blend-mode: screen;
}

body[data-design] main::before {
  background-image: repeating-radial-gradient(ellipse at 72% 22%, rgba(52, 137, 255, 0.16) 0 1px, transparent 1px 15px);
  background-position: center;
  background-repeat: repeat;
  background-size: auto;
  opacity: 0.2;
  transform: none;
}

.hero::before {
  z-index: 0;
}

body[data-design] .hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: var(--mockup-bg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: min(56vw, 840px) auto;
  opacity: 0.18;
  mix-blend-mode: screen;
}

/* Reference-style hero visuals: use the supplied blue/purple mockups as the
   actual right-hand visual, while keeping the existing copy and structure. */
body[data-design] .hero .system-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .benefit-panel,
body[data-design] .hero .about-network {
  background-image:
    linear-gradient(180deg, rgba(4, 13, 35, 0.22), rgba(3, 11, 29, 0.84)),
    var(--mockup-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-color: rgba(37, 173, 255, 0.9);
  box-shadow:
    inset 0 0 48px rgba(10, 112, 255, 0.17),
    0 0 0 1px rgba(25, 126, 255, 0.14),
    0 24px 80px rgba(0, 27, 82, 0.42);
}

body[data-design] .hero .system-panel::after,
body[data-design] .hero .contact-card::after,
body[data-design] .hero .benefit-panel::after,
body[data-design] .hero .about-network::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 75% 28%, rgba(0, 169, 255, 0.19), transparent 27%),
    linear-gradient(135deg, rgba(24, 102, 255, 0.08), transparent 58%);
  pointer-events: none;
}

body[data-design] .hero-media-panel {
  aspect-ratio: 4 / 3;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(4, 13, 35, 0.08), rgba(3, 11, 29, 0.54)),
    var(--mockup-bg) center / cover no-repeat;
  border-color: rgba(37, 173, 255, 0.92);
  box-shadow:
    inset 0 0 42px rgba(12, 105, 255, 0.18),
    0 0 34px rgba(0, 113, 255, 0.22),
    0 24px 80px rgba(0, 27, 82, 0.48);
}

body[data-design] .hero-media-panel picture,
body[data-design] .hero-media-panel img {
  display: none;
}

body[data-design] .configurator-hero::after,
body[data-design] .configurator-page-section::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: var(--mockup-bg);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: min(56vw, 840px) auto;
  opacity: 0.3;
  mix-blend-mode: screen;
}

body[data-design] .configurator-hero::after {
  background-image: url("assets/images/mockup-bg/visionext-mockup-wave.webp");
  background-size: min(70vw, 980px) auto;
  opacity: 0.34;
}

body[data-design] .configurator-page-section::after {
  display: none;
}

.configurator-hero,
.configurator-page-section {
  position: relative;
}

.configurator-hero > *,
.configurator-page-section > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body[data-design] main::before {
    background-position: center;
    background-size: auto;
    opacity: 0.14;
  }

  body[data-design] .hero::after {
    background-position: center bottom;
    background-size: auto 62%;
    opacity: 0.36;
  }

  body[data-design] .configurator-hero::after,
  body[data-design] .configurator-page-section::after {
    background-position: center bottom;
    background-size: auto 66%;
    opacity: 0.26;
  }
}

@media (max-width: 720px) {
  .configurator-modal {
    padding: 12px;
  }

  .configurator-dialog {
    padding: 52px 18px 24px;
    border-radius: 10px;
  }

  .config-close {
    top: 12px;
    right: 12px;
  }

  .site-header {
    padding-inline: 18px;
  }

  .brand span:last-child {
    max-width: 210px;
    overflow-wrap: anywhere;
  }

  .hero-inner,
  .section,
  .cta-band {
    padding-inline: 18px;
  }

  h1 {
    font-size: 2.75rem;
  }

  .hero-home .hero-actions {
    flex-wrap: wrap;
  }

  .hero-home .trust-row {
    flex-wrap: wrap;
    font-size: 0.84rem;
  }

  .hero-home .trust-row li::before {
    width: 18px;
    height: 18px;
  }

  .cards-3,
  .cards-4,
  .cards-5,
  .module-showcase,
  .why-cards,
  .home-process,
  .price-teasers,
  .mini-benefits,
  .stat-grid,
  .identity-grid,
  .contact-form,
  .request-steps,
  .price-grid,
  .configurator-modules,
  .config-details,
  .config-questions,
  .seo-link-grid,
  .site-footer,
  .process-grid,
  .panel-stats,
  .before-after,
  .comparison-grid,
  .cta-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: flex-start;
  }

  .cta-inner > div,
  .cta-inner .btn,
  .cta-inner .brand-mark {
    grid-column: 1;
    grid-row: auto;
  }

  .cta-inner .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-inner .brand-mark {
    justify-self: start;
    opacity: 0.2;
  }

  .contact-form,
  .contact-details {
    padding: 24px;
  }

  .process-item:not(:last-child)::after,
  .mini-benefit,
  .stat-grid div {
    border-right: 0;
  }

  .process-item:not(:last-child)::after {
    content: "";
  }

  .timeline-panel li,
  .contact-card,
  .config-teaser {
    grid-template-columns: 1fr;
  }

  .config-result {
    position: static;
  }

  .contact-list {
    padding-left: 0;
    border-left: 0;
  }

  .orbit-chip {
    position: static;
    width: 100%;
  }

  .about-orbit,
  .about-network {
    display: grid;
    gap: 14px;
    min-height: auto;
    padding: 28px;
  }

  .about-network {
    grid-template-columns: 1fr;
    place-items: stretch;
  }

  .about-image-visual {
    padding: 0;
    aspect-ratio: 1672 / 941;
  }

  .about-network::before,
  .about-network::after,
  .network-line {
    display: none;
  }

  .network-core,
  .network-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
  }

  .network-core {
    width: 148px;
    height: 148px;
    justify-self: center;
  }

  .network-core .brand-mark.large {
    width: 102px;
    height: 102px;
  }

  .growth-orbit,
  .growth-line,
  .growth-node {
    display: none;
  }

  .growth-bars {
    position: relative;
    right: auto;
    bottom: auto;
    justify-content: center;
    width: 100%;
    height: 110px;
  }

  .growth-bars span {
    width: 24px;
  }

  .growth-bars span:nth-child(1) { height: 34px; }
  .growth-bars span:nth-child(2) { height: 54px; }
  .growth-bars span:nth-child(3) { height: 76px; }
  .growth-bars span:nth-child(4) { height: 96px; }
}

/* Mobile-first adjustments: keep every page inside the viewport without changing desktop. */
@media (max-width: 1100px) {
  .hero-home .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    min-height: 0;
  }

  .hero-home .hero-copy,
  .hero-home h1,
  .hero-home .hero-copy > p:not(.eyebrow) {
    max-width: 100%;
  }

  .hero-home .hero-media-panel {
    width: min(100%, 500px);
    justify-self: center;
  }

  .cta-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 270px);
    gap: 18px 24px;
    min-height: 0;
  }

  .cta-inner > *,
  .cta-inner > div,
  .cta-inner .btn,
  .cta-inner .brand-mark {
    min-width: 0;
    max-width: 100%;
  }

  .cta-inner > div {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .cta-inner .btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    white-space: normal;
    text-align: center;
  }

  .cta-inner .brand-mark {
    display: none;
  }
}

@media (max-width: 768px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  h1,
  h2,
  h3,
  p,
  li,
  .btn,
  .card-link {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .hero-inner {
    width: calc(100% - 32px);
    min-height: 0;
    padding: 56px 0;
    gap: 28px;
  }

  .section,
  .cta-band {
    width: calc(100% - 32px);
    padding-right: 0;
    padding-left: 0;
  }

  .hero-inner > *,
  .hero-copy > *,
  .timeline-panel > *,
  .process-grid > *,
  .cards-3 > *,
  .cards-4 > *,
  .cards-5 > *,
  .module-showcase > *,
  .home-process > *,
  .price-teasers > *,
  .mini-benefits > *,
  .identity-grid > *,
  .contact-grid > *,
  .contact-form > *,
  .request-steps > *,
  .service-page-content > *,
  .service-detail > *,
  .configurator-layout > *,
  .configurator-modules > *,
  .config-details > *,
  .config-questions > *,
  .cta-inner > *,
  .site-footer > * {
    min-width: 0;
  }

  .hero-copy,
  .hero-copy > p:not(.eyebrow),
  .hero-copy h1 {
    max-width: 100%;
  }

  .hero-copy h1 {
    font-size: clamp(2.05rem, 9.4vw, 2.7rem);
    line-height: 1.12;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
  }

  .hero-actions .btn,
  .service-aside .btn,
  .price-intro .btn,
  .config-teaser .btn,
  .cookie-actions .btn {
    width: 100%;
    max-width: 100%;
    min-height: 54px;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: center;
    line-height: 1.2;
  }

  .trust-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
    font-size: 0.88rem;
  }

  .trust-row li {
    min-width: 0;
    white-space: normal;
  }

  .hero-home .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }

  .hero-home .hero-copy {
    display: contents;
  }

  .hero-home .hero-copy > .eyebrow,
  .hero-home .hero-copy > h1,
  .hero-home .hero-copy > p:not(.eyebrow) {
    order: 0;
  }

  .hero-home .hero-media-panel {
    order: 1;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 3 / 4;
    justify-self: stretch;
  }

  .hero-home .hero-copy > .hero-actions {
    order: 2;
  }

  .hero-home .hero-copy > .trust-row {
    order: 3;
  }

  .hero-home .nowrap {
    white-space: normal;
  }

  .hero-home .hero-actions,
  .hero-home .trust-row {
    flex-wrap: nowrap;
  }

  .hero-home .trust-row li::before {
    width: 18px;
    height: 18px;
  }

  .timeline-panel {
    padding: 26px 18px;
  }

  .timeline-panel ol {
    gap: 26px;
  }

  .timeline-panel li {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 10px;
    text-align: center;
  }

  .timeline-panel .panel-icon {
    margin: 0 auto;
  }

  .timeline-panel em {
    font-size: 2rem;
    line-height: 1;
  }

  .timeline-panel li > div {
    max-width: 38ch;
  }

  .timeline-panel strong {
    font-size: 1.16rem;
  }

  .cta-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 28px 18px;
  }

  .cta-inner > div,
  .cta-inner .btn,
  .cta-inner .brand-mark {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    max-width: 100%;
  }

  .cta-inner .btn {
    justify-self: stretch;
    min-height: 54px;
    white-space: normal;
    line-height: 1.2;
  }

  .cta-inner .brand-mark {
    display: none;
  }

  .system-panel,
  .benefit-panel {
    padding: 24px 18px;
  }

  .service-detail,
  .request-steps,
  .contact-form,
  .config-questions {
    grid-template-columns: minmax(0, 1fr);
  }

  .service-detail,
  .contact-form,
  .contact-details,
  .wide-stat-band,
  .module-card,
  .feature-card,
  .step-card,
  .identity-card,
  .price-card {
    padding: 24px 18px;
  }

  .request-steps {
    padding: 20px 18px;
  }

  .request-steps div {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }
}

@media (max-width: 430px) {
  .site-header {
    gap: 12px;
    padding: 16px;
  }

  .brand {
    gap: 8px;
    font-size: 0.96rem;
  }

  .brand-mark {
    width: 42px;
    height: 42px;
  }

  .menu-toggle {
    min-height: 40px;
    padding: 0 11px;
    font-size: 0.9rem;
  }

  .hero-copy h1 {
    font-size: clamp(2rem, 9.2vw, 2.38rem);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 1rem;
  }

  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.13em;
  }

  .btn,
  .header-cta {
    padding-right: 16px;
    padding-left: 16px;
    font-size: 0.94rem;
  }

  .cta-inner {
    padding: 26px 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .check-animation li:not(:first-child)::after,
  .system-panel::before,
  .timeline-panel::before,
  .benefit-panel::before,
  .panel-icon,
  .about-network::before,
  .about-network::after,
  .growth-orbit,
  .growth-bars span,
  .growth-line span,
  .growth-node,
  .network-core,
  .network-card,
  .network-line {
    animation: none;
  }

  .check-animation li:not(:first-child)::after {
    opacity: 1;
    transform: none;
  }
}

/* ================================================================
   FINAL MOCKUP DESIGN LAYER
   The HTML, wording, SEO and system font remain the current website.
   This layer is visual only and deliberately neutralizes the older
   stacked background rules above so each mockup is rendered once.
   ================================================================ */

:root {
  --visual-bg: #020817;
  --visual-bg-deep: #010510;
  --visual-panel: rgba(4, 18, 47, 0.86);
  --visual-panel-soft: rgba(7, 30, 72, 0.7);
  --visual-cyan: #20d7ff;
  --visual-blue: #3288ff;
  --visual-violet: #5dc0ff;
  --visual-text: #f2f5ff;
  --visual-muted: #b6c5ed;
}

body[data-design] {
  color: var(--visual-text);
  background:
    radial-gradient(circle at 8% 0%, rgba(20, 97, 232, 0.18), transparent 26rem),
    radial-gradient(circle at 96% 36%, rgba(64, 185, 255, 0.14), transparent 28rem),
    var(--visual-bg);
  font-family: Helvetica, Arial, sans-serif;
}

body[data-design] main {
  background:
    linear-gradient(180deg, rgba(2, 8, 23, 0.12), rgba(2, 8, 23, 0.92)),
    radial-gradient(ellipse at 50% 0%, rgba(19, 83, 190, 0.16), transparent 48%),
    var(--visual-bg);
}

body[data-design] .site-header {
  min-height: 82px;
  border-bottom: 1px solid rgba(62, 160, 255, 0.24);
  background: linear-gradient(180deg, rgba(1, 6, 19, 0.98), rgba(2, 13, 33, 0.92));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

body[data-design] .brand {
  color: #f7f8ff;
  text-shadow: 0 0 20px rgba(94, 139, 255, 0.22);
}

body[data-design] .site-nav a {
  color: rgba(232, 238, 255, 0.86);
}

body[data-design] .site-nav a:hover,
body[data-design] .site-nav a[aria-current="page"],
body[data-design] .site-nav a.active {
  color: #fff;
  text-shadow: 0 0 15px rgba(75, 165, 255, 0.8);
}

body[data-design] .site-nav a[aria-current="page"]::after,
body[data-design] .site-nav a.active::after {
  background: linear-gradient(90deg, var(--visual-cyan), var(--visual-violet));
  box-shadow: 0 0 12px rgba(37, 185, 255, 0.85);
}

body[data-design] .header-cta,
body[data-design] .btn {
  border-radius: 12px;
  border-color: rgba(103, 155, 255, 0.72);
  color: #fff;
  box-shadow: 0 0 22px rgba(46, 111, 255, 0.14);
}

body[data-design] .header-cta {
  background: linear-gradient(100deg, rgba(35, 91, 222, 0.9), rgba(45, 180, 255, 0.92));
}

body[data-design] .btn.primary {
  border-color: rgba(29, 220, 255, 0.82);
  background: linear-gradient(105deg, #197ff3 0%, #3c4dff 48%, #2dacff 100%);
  box-shadow: 0 10px 32px rgba(43, 105, 255, 0.3), 0 0 24px rgba(45, 174, 255, 0.18);
}

body[data-design] .btn.ghost {
  border-color: rgba(92, 170, 255, 0.72);
  background: rgba(5, 21, 52, 0.62);
}

body[data-design] .btn:hover,
body[data-design] .header-cta:hover {
  border-color: var(--visual-cyan);
  box-shadow: 0 0 28px rgba(34, 192, 255, 0.3), 0 12px 34px rgba(47, 189, 255, 0.2);
}

body[data-design] .hero {
  isolation: isolate;
  min-height: clamp(680px, calc(100svh - 82px), 860px);
  background:
    radial-gradient(circle at 76% 26%, rgba(38, 111, 255, 0.14), transparent 22rem),
    radial-gradient(circle at 88% 70%, rgba(52, 181, 255, 0.12), transparent 25rem),
    linear-gradient(135deg, #020714 0%, #03132e 55%, #020817 100%);
}

body[data-design] .hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: center;
  gap: clamp(32px, 5vw, 84px);
  width: min(1320px, calc(100% - 72px));
  min-height: clamp(560px, calc(100svh - 190px), 700px);
  margin: 0 auto;
  padding: 58px 0 54px;
}

body[data-design] .hero-copy {
  position: relative;
  z-index: 3;
  max-width: 720px;
}

body[data-design] .hero-copy h1,
body[data-design] .configurator-hero h1,
body[data-design] .legal-page h1 {
  color: var(--visual-text);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.34);
}

body[data-design] .hero-copy h1 strong,
body[data-design] .configurator-hero h1 strong,
body[data-design] .legal-page h1 strong {
  color: #a9d9ff;
}

body[data-design] .hero-copy > p:not(.eyebrow),
body[data-design] .section-lead,
body[data-design] .hero-subline {
  color: var(--visual-muted);
}

body[data-design] .eyebrow {
  color: #b9c9ff;
  text-shadow: 0 0 16px rgba(79, 140, 255, 0.28);
}

body[data-design] .hero::after {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image: var(--mockup-bg);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: min(58vw, 860px) auto;
  opacity: 0.28;
  mix-blend-mode: screen;
}

/* The start page uses the provided reference composition as the single
   artwork, with the mountain strip kept as a separate low-noise accent. */
body[data-page="home"] .hero::after {
  background-image: url("assets/images/mockup-bg/visionext-home-reference-mountains.webp");
  background-position: left bottom;
  background-size: min(58vw, 900px) auto;
  opacity: 0.9;
}

body[data-page="home"] .hero::before {
  display: none;
}

body[data-page="home"] .hero .hero-media-panel {
  min-height: 500px;
  aspect-ratio: 866 / 650;
  border-color: rgba(77, 161, 255, 0.58);
  background: url("assets/images/mockup-bg/visionext-home-reference-right.webp") center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(38, 113, 255, 0.24), 0 24px 70px rgba(0, 25, 88, 0.46);
}

body[data-page="home"] .hero .hero-media-panel > *,
body[data-design] .hero .hero-media-panel::before,
body[data-design] .hero .hero-media-panel::after {
  display: none;
}

body[data-design] .hero .system-panel,
body[data-design] .hero .benefit-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .about-network {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(50, 168, 255, 0.72);
  border-radius: 18px;
  color: var(--visual-text);
  background:
    radial-gradient(circle at 80% 18%, rgba(30, 113, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(5, 31, 76, 0.9), rgba(2, 12, 33, 0.92));
  box-shadow: inset 0 0 40px rgba(22, 108, 255, 0.12), 0 26px 72px rgba(0, 19, 68, 0.46);
}

body[data-design] .hero .system-panel::after,
body[data-design] .hero .benefit-panel::after,
body[data-design] .hero .contact-card::after,
body[data-design] .hero .about-network::after {
  display: none;
}

body[data-page="ueber-uns"] .hero .about-network {
  min-height: 420px;
  background:
    linear-gradient(145deg, rgba(2, 13, 35, 0.16), rgba(2, 9, 25, 0.62)),
    url("assets/images/mockup-bg/visionext-mockup-bg-contact.webp") center / cover no-repeat;
}

body[data-page="ueber-uns"] .hero .about-network picture,
body[data-page="ueber-uns"] .hero .about-network img {
  display: none;
}

body[data-design] .hero .process-item,
body[data-design] .hero .before-after li,
body[data-design] .hero .contact-list p {
  border-color: rgba(70, 161, 255, 0.34);
  color: var(--visual-muted);
}

body[data-design] .hero .process-item strong,
body[data-design] .hero .contact-list strong,
body[data-design] .hero .before-after strong,
body[data-design] .hero .panel-note {
  color: #fff;
}

body[data-design] .hero .panel-icon,
body[data-design] .hero .brand-mark,
body[data-design] .hero .icon {
  border-color: rgba(44, 189, 255, 0.78);
  color: #8cceff;
  background: linear-gradient(145deg, rgba(18, 88, 188, 0.42), rgba(12, 31, 82, 0.7));
  box-shadow: inset 0 0 22px rgba(0, 159, 255, 0.1), 0 0 18px rgba(23, 129, 255, 0.18);
}

body[data-design] .trust-row li {
  color: #d7e4ff;
  border-color: rgba(70, 160, 255, 0.28);
}

body[data-design] .trust-row li::before {
  color: var(--visual-cyan);
  text-shadow: 0 0 12px rgba(33, 213, 255, 0.8);
}

body[data-design] .section,
body[data-design] .legal-page,
body[data-design] .configurator-page-section,
body[data-design] .configurator-hero {
  color: var(--visual-text);
}

body[data-design] .module-card,
body[data-design] .feature-card,
body[data-design] .service-detail,
body[data-design] .mini-benefit,
body[data-design] .identity-card,
body[data-design] .price-card,
body[data-design] .contact-details,
body[data-design] .contact-form,
body[data-design] .config-card,
body[data-design] .config-result,
body[data-design] .wide-stat-band,
body[data-design] .config-teaser,
body[data-design] .price-orientation,
body[data-design] .home-process article,
body[data-design] .faq-grid details {
  border-color: rgba(39, 164, 255, 0.48);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(8, 35, 79, 0.78), rgba(3, 14, 37, 0.9));
  box-shadow: inset 0 0 32px rgba(18, 101, 220, 0.08), 0 18px 52px rgba(0, 18, 62, 0.24);
}

body[data-design] .module-card:hover,
body[data-design] .feature-card:hover,
body[data-design] .faq-grid details:hover,
body[data-design] .home-process article:hover {
  border-color: rgba(52, 212, 255, 0.9);
  box-shadow: 0 0 24px rgba(31, 164, 255, 0.2), inset 0 0 30px rgba(53, 197, 255, 0.08);
}

body[data-design] h2,
body[data-design] h3,
body[data-design] summary,
body[data-design] .module-card h3,
body[data-design] .feature-card h3 {
  color: #f3f6ff;
}

body[data-design] p,
body[data-design] li,
body[data-design] address,
body[data-design] label,
body[data-design] .contact-list p,
body[data-design] .service-detail li {
  color: var(--visual-muted);
}

body[data-design] .card-link,
body[data-design] a:not(.btn):not(.header-cta):hover {
  color: #67d9ff;
}

body[data-design] .cta-band,
body[data-design] .premium-topic {
  border-color: rgba(43, 186, 255, 0.55);
  background:
    radial-gradient(circle at 82% 10%, rgba(53, 177, 255, 0.22), transparent 32%),
    linear-gradient(135deg, rgba(7, 42, 101, 0.86), rgba(13, 19, 57, 0.9));
}

body[data-design] .site-footer {
  border-top-color: rgba(55, 163, 255, 0.38);
  color: var(--visual-muted);
  background: #010611;
}

body[data-design] .site-footer h2,
body[data-design] .site-footer .footer-title,
body[data-design] .site-footer strong,
body[data-design] .site-footer .brand {
  color: #f4f6ff;
}

body[data-design] .contact-form input,
body[data-design] .contact-form textarea,
body[data-design] .configurator-page input,
body[data-design] .configurator-page select,
body[data-design] .configurator-page textarea {
  border-color: rgba(45, 170, 255, 0.5);
  color: #f3f6ff;
  background: rgba(2, 14, 37, 0.72);
}

body[data-design] .configurator-hero::after,
body[data-design] .configurator-page-section::after {
  background-image: var(--mockup-bg);
  opacity: 0.22;
  mix-blend-mode: screen;
}

@media (min-width: 761px) and (max-width: 1100px) {
  body[data-design] .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.88fr);
    width: min(100% - 44px, 960px);
    gap: 28px;
    padding-top: 40px;
  }

  body[data-design] .hero-copy h1 {
    font-size: clamp(2.55rem, 5vw, 4.3rem);
  }

  body[data-page="home"] .hero .hero-media-panel {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  body[data-design] .hero {
    min-height: 0;
  }

  body[data-design] .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    width: min(100% - 36px, 680px);
    min-height: 0;
    padding: 42px 0 38px;
  }

  body[data-design] .hero::after {
    background-position: center bottom;
    background-size: auto 58%;
    opacity: 0.18;
  }

  body[data-page="home"] .hero .hero-media-panel {
    min-height: 290px;
  }
}

/* ================================================================
   FINAL OVERLAY CLEANUP
   One hero composition per page. Mockups stay inside the visual panel;
   they must never be painted across the copy column a second time.
   ================================================================ */

body[data-design] .hero::after,
body[data-design] .configurator-hero::after,
body[data-design] .configurator-page-section::after {
  display: none !important;
}

body[data-design] .hero::before {
  display: block !important;
  z-index: 0 !important;
  background:
    repeating-radial-gradient(ellipse at 78% 70%, rgba(58, 164, 255, 0.17) 0 1px, transparent 1px 14px),
    linear-gradient(135deg, transparent 35%, rgba(93, 117, 255, 0.08) 55%, transparent 72%) !important;
  opacity: 0.52 !important;
}

body[data-design] .hero-copy::before {
  display: none !important;
}

body[data-design] .hero .system-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .benefit-panel {
  background:
    linear-gradient(145deg, rgba(5, 31, 76, 0.94), rgba(2, 12, 33, 0.96)) !important;
  background-image: linear-gradient(145deg, rgba(5, 31, 76, 0.94), rgba(2, 12, 33, 0.96)) !important;
}

body[data-design] .hero .system-panel::before,
body[data-design] .hero .contact-card::before,
body[data-design] .hero .benefit-panel::before {
  display: block !important;
  z-index: 0 !important;
  background-image:
    linear-gradient(145deg, rgba(2, 14, 38, 0.62), rgba(2, 8, 23, 0.78)),
    var(--mockup-bg) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  opacity: 0.18 !important;
  mix-blend-mode: screen;
  transform: none !important;
}

body[data-design] .hero .system-panel > *,
body[data-design] .hero .contact-card > *,
body[data-design] .hero .benefit-panel > * {
  position: relative;
  z-index: 2 !important;
}

body[data-page="home"] .hero::after {
  display: none !important;
}

body[data-page="home"] .hero .hero-media-panel {
  background-image: url("assets/images/mockup-bg/visionext-home-reference-right.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body[data-page="home"] .hero .hero-media-panel::before,
body[data-page="home"] .hero .hero-media-panel::after {
  display: none !important;
}

body[data-page="ueber-uns"] .hero .about-network {
  min-height: 470px;
  background-image:
    linear-gradient(145deg, rgba(2, 13, 35, 0.18), rgba(2, 9, 25, 0.66)),
    url("assets/images/mockup-bg/visionext-mockup-bg-contact.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

body[data-page="ueber-uns"] .hero .about-network::before,
body[data-page="ueber-uns"] .hero .about-network::after,
body[data-page="ueber-uns"] .hero .about-network picture,
body[data-page="ueber-uns"] .hero .about-network img {
  display: none !important;
}

body[data-design] .hero .hero-media-panel > picture,
body[data-design] .hero .hero-media-panel > img {
  display: none !important;
}

/* FINAL GENERATED ARTWORK OVERRIDE */
body[data-design] .brand-mark {
  background-image: url("assets/images/visionext-logo-symbol-weiss.png") !important;
}

body[data-design="services"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-system.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="web"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-web.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="automation"] .hero .system-panel,
body[data-design="process"] .hero .system-panel,
body[data-design="process"] .hero .timeline-panel {
  background-image: url("assets/images/generated/visionext-bg-workflow.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="app"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-app.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="contact"] .hero .contact-card,
body[data-page="ueber-uns"] .hero .about-network {
  background-image: url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="benefits"] .hero .benefit-panel {
  background-image: url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-page="home"] .hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.97) 0%, rgba(2, 8, 24, 0.74) 43%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(72vw, 1180px) auto !important;
}

body[data-design="price"] .configurator-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.96) 0%, rgba(2, 8, 24, 0.78) 50%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1080px) auto !important;
}

body[data-design="legal"] .legal-page {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.95) 0%, rgba(2, 8, 24, 0.75) 48%, rgba(2, 8, 24, 0.2) 100%),
    url("assets/images/generated/visionext-bg-lake.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1120px) auto !important;
}

/* ================================================================
   GRAPHIC SWAP V2
   The supplied redesign mockups are the hero visuals. The former
   HTML diagrams/cards stay in the document for content/accessibility,
   but are no longer painted on top of the new artwork.
   ================================================================ */

body[data-design] .hero .system-panel,
body[data-design] .hero .timeline-panel,
body[data-design] .hero .benefit-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .about-network {
  position: relative !important;
  overflow: hidden !important;
  min-height: clamp(420px, 34vw, 620px) !important;
  border: 1px solid rgba(53, 183, 255, 0.72) !important;
  border-radius: 24px !important;
  background-color: #03142f !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  box-shadow:
    0 0 0 1px rgba(88, 205, 255, 0.14),
    0 24px 70px rgba(0, 55, 175, 0.26),
    inset 0 0 55px rgba(41, 167, 255, 0.1) !important;
}

body[data-design] .hero .system-panel > *,
body[data-design] .hero .timeline-panel > *,
body[data-design] .hero .benefit-panel > *,
body[data-design] .hero .contact-card > *,
body[data-design] .hero .about-network > * {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body[data-design="services"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.06), rgba(1, 8, 24, 0.16)),
    url("assets/images/mockup-bg/visionext-mockup-bg-services.webp") !important;
  background-position: center 43% !important;
}

body[data-design="web"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.05), rgba(1, 8, 24, 0.14)),
    url("assets/images/mockup-bg/visionext-mockup-bg-web.webp") !important;
  background-position: center 42% !important;
}

body[data-design="automation"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.04), rgba(1, 8, 24, 0.14)),
    url("assets/images/mockup-bg/visionext-mockup-bg-automation.webp") !important;
  background-position: center 44% !important;
}

body[data-design="app"] .hero .system-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.04), rgba(1, 8, 24, 0.12)),
    url("assets/images/mockup-bg/visionext-mockup-bg-app.webp") !important;
  background-position: center 40% !important;
}

body[data-design="process"] .hero .system-panel,
body[data-design="process"] .hero .timeline-panel {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.04), rgba(1, 8, 24, 0.13)),
    url("assets/images/mockup-bg/visionext-mockup-bg-process.webp") !important;
  background-position: center 39% !important;
}

body[data-page="kontakt"] .hero .contact-card,
body[data-page="ueber-uns"] .hero .about-network {
  background-image:
    linear-gradient(145deg, rgba(1, 12, 33, 0.02), rgba(1, 8, 24, 0.12)),
    url("assets/images/mockup-bg/visionext-mockup-bg-contact.webp") !important;
  background-position: center 42% !important;
}

body[data-page="home"] .hero .hero-media-panel {
  min-height: clamp(440px, 36vw, 660px) !important;
  border-radius: 24px !important;
  border-color: rgba(102, 110, 255, 0.82) !important;
  box-shadow:
    0 0 0 1px rgba(36, 214, 255, 0.16),
    0 24px 80px rgba(37, 145, 190, 0.34),
    inset 0 0 70px rgba(39, 122, 255, 0.15) !important;
}

body[data-design] .hero .system-panel::before,
body[data-design] .hero .system-panel::after,
body[data-design] .hero .timeline-panel::before,
body[data-design] .hero .timeline-panel::after,
body[data-design] .hero .benefit-panel::before,
body[data-design] .hero .benefit-panel::after,
body[data-design] .hero .contact-card::before,
body[data-design] .hero .contact-card::after,
body[data-design] .hero .about-network::before,
body[data-design] .hero .about-network::after {
  display: none !important;
}

body[data-design] .hero .icon,
body[data-design] .hero .panel-icon,
body[data-design] .section .icon {
  border: 1px solid rgba(61, 188, 255, 0.7) !important;
  border-radius: 15px !important;
  background:
    radial-gradient(circle at 30% 15%, rgba(75, 177, 255, 0.28), transparent 48%),
    linear-gradient(145deg, rgba(12, 58, 128, 0.82), rgba(8, 21, 58, 0.92)) !important;
  box-shadow:
    0 0 22px rgba(25, 135, 255, 0.28),
    inset 0 0 16px rgba(91, 199, 255, 0.12) !important;
  color: #9fe5ff !important;
}

body[data-design] .hero .hero-media-panel > *,
body[data-page="ueber-uns"] .hero .about-network picture,
body[data-page="ueber-uns"] .hero .about-network img {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-design] .hero .system-panel,
  body[data-design] .hero .timeline-panel,
  body[data-design] .hero .benefit-panel,
  body[data-design] .hero .contact-card,
  body[data-design] .hero .about-network,
  body[data-page="home"] .hero .hero-media-panel {
    min-height: 360px !important;
    border-radius: 18px !important;
  }
}

/* FINAL GENERATED ARTWORK OVERRIDE */
body[data-design] .brand-mark {
  background-image: url("assets/images/visionext-logo-symbol-weiss.png") !important;
}

body[data-design="services"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-system.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="web"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-web.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="automation"] .hero .system-panel,
body[data-design="process"] .hero .system-panel,
body[data-design="process"] .hero .timeline-panel {
  background-image: url("assets/images/generated/visionext-bg-workflow.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="app"] .hero .system-panel {
  background-image: url("assets/images/generated/visionext-bg-app.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="contact"] .hero .contact-card,
body[data-page="ueber-uns"] .hero .about-network {
  background-image: url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-design="benefits"] .hero .benefit-panel {
  background-image: url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center !important;
  background-size: cover !important;
}

body[data-page="home"] .hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.97) 0%, rgba(2, 8, 24, 0.74) 43%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-map.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(72vw, 1180px) auto !important;
}

body[data-design="price"] .configurator-hero {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.96) 0%, rgba(2, 8, 24, 0.78) 50%, rgba(2, 8, 24, 0.18) 100%),
    url("assets/images/generated/visionext-bg-wave.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1080px) auto !important;
}

body[data-design="legal"] .legal-page {
  background-image:
    linear-gradient(90deg, rgba(2, 7, 20, 0.95) 0%, rgba(2, 8, 24, 0.75) 48%, rgba(2, 8, 24, 0.2) 100%),
    url("assets/images/generated/visionext-bg-lake.webp") !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  background-size: cover, min(70vw, 1120px) auto !important;
}

/* ---- Barrierefreiheit & Breadcrumb (SEO-Umsetzung 10/2026) ---- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--visual-panel, #04122f);
  color: var(--visual-text, #f2f5ff);
  border: 1px solid var(--visual-cyan, #20d7ff);
  text-decoration: none;
}
.skip-link:focus {
  top: 12px;
}
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--visual-cyan, #20d7ff);
  outline-offset: 3px;
}
.breadcrumb {
  margin: 0 0 14px;
  font-size: 0.86rem;
}
.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--visual-muted, #b6c5ed);
}
.breadcrumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--visual-cyan, #20d7ff);
}
.breadcrumb a {
  color: var(--visual-muted, #b6c5ed);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--visual-text, #f2f5ff);
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: var(--visual-text, #f2f5ff);
}
.site-footer .footer-hours {
  margin-top: 10px;
}

/* ==== Design-Feinschliff 10/2026: CI-Farben von visionext.at, Lila nur als Hauch, weiche Bildübergänge ==== */
:root {
  --ci-navy: #071426;
  --ci-navy-2: #1a3a52;
  --ci-blue: #1769e8;
  --ci-cyan: #00a8e8;
  --ci-cyan-light: #4ecbff;
  --ci-ice: #9bdcff;
  --ci-indigo: #4b5fe0;
  --violet: #4ecbff;
  --visual-cyan: #4ecbff;
  --visual-blue: #1769e8;
  --visual-violet: #4b5fe0;
}

/* Buttons: tiefes CI-Cyanblau zu CI-Blau, minimaler Indigo-Ausklang.
   Jeder Farbstopp hat mit weißer Schrift mindestens 5,3 : 1 Kontrast (WCAG AA verlangt 4,5 : 1). */
body[data-design] .header-cta,
body[data-design] .btn.primary {
  border-color: rgba(78, 203, 255, 0.7);
  background: linear-gradient(105deg, #0a6db5 0%, #1660d6 64%, #3f52d6 100%);
  box-shadow: 0 10px 30px rgba(23, 105, 232, 0.32), 0 0 22px rgba(0, 168, 232, 0.18);
}
body[data-design] .header-cta:hover,
body[data-design] .btn.primary:hover {
  box-shadow: 0 14px 36px rgba(23, 105, 232, 0.42), 0 0 30px rgba(78, 203, 255, 0.32);
}

/* Bildflächen im Hero: keine harten Rahmen, Bild läuft weich in den Hintergrund aus */
body[data-design] .hero .system-panel,
body[data-design] .hero .hero-media-panel,
body[data-design] .hero .timeline-panel,
body[data-design] .hero .contact-card,
body[data-design] .hero .about-network,
body[data-design] .hero .benefit-panel {
  border-color: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  -webkit-mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 38%, rgba(0, 0, 0, 0.85) 55%, rgba(0, 0, 0, 0.5) 74%, rgba(0, 0, 0, 0.18) 88%, transparent 100%);
}
body[data-design] .hero .system-panel::after,
body[data-design] .hero .hero-media-panel::after,
body[data-design] .hero .timeline-panel::after,
body[data-design] .hero .contact-card::after,
body[data-design] .hero .about-network::after,
body[data-design] .hero .benefit-panel::after {
  border: 0 !important;
  box-shadow: none !important;
}
body[data-design] .hero::after {
  content: none !important;
}

/* Orts-Links (früher helle Kacheln aus der alten Design-Ebene) */
body[data-design] .seo-link-grid a {
  color: var(--visual-text);
  border-color: rgba(78, 203, 255, 0.26);
  background: linear-gradient(145deg, rgba(12, 42, 88, 0.7), rgba(4, 16, 40, 0.86));
  box-shadow: 0 14px 34px rgba(0, 6, 22, 0.32);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body[data-design] .seo-link-grid a:hover {
  border-color: rgba(78, 203, 255, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0, 10, 40, 0.45), 0 0 24px rgba(0, 168, 232, 0.18);
}
body[data-design] .seo-link-grid a::after {
  color: var(--ci-cyan-light);
}
@media (prefers-reduced-motion: reduce) {
  body[data-design] .seo-link-grid a:hover {
    transform: none;
  }
}

/* Hauptlogo (VisioNext mit Claim) in Kopfzeile und Footer */
.brand.brand-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.brand.brand-logo img {
  display: block;
  width: auto;
  height: 46px;
}
.site-footer .brand.brand-logo img {
  height: 58px;
}
@media (max-width: 760px) {
  .site-header .brand.brand-logo img {
    height: 38px;
  }
}

/* Hero-Grafik je Seite (data-visual aus tools/siteconfig.py) – mehr Abwechslung, klar und leuchtend */
body[data-visual] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  filter: saturate(1.08) brightness(1.1);
}
body[data-visual] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel)::before {
  opacity: 0.06 !important;
}
body[data-visual] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel)::after {
  background: radial-gradient(circle at 68% 32%, rgba(0, 168, 232, 0.16), transparent 46%) !important;
}

/* Startseite: Mockup ragt über den rechten Rand, daher früher ausblenden */
body[data-design] .hero .hero-media-panel {
  -webkit-mask-image: radial-gradient(closest-side at 46% 50%, #000 60%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
  mask-image: radial-gradient(closest-side at 46% 50%, #000 60%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
}

/* Keine wiederholten Hintergrund-Overlays: jede Seite zeigt nur ihr eigenes Hero-Motiv */



/* HERO-BILDER START (tools/hero_bilder.py) */
body[data-visual="leistungen"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/leistungen.webp") !important; background-position: center 45% !important; }
body[data-visual="werbeagentur-kaernten"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/werbeagentur-kaernten.webp") !important; background-position: 62% center !important; }
body[data-visual="werbeagentur-villach"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/werbeagentur-villach.webp") !important; background-position: 58% center !important; }
body[data-visual="werbeagentur-klagenfurt"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/werbeagentur-klagenfurt.webp") !important; background-position: 60% center !important; }
body[data-visual="werbeagentur-spittal"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/werbeagentur-spittal.webp") !important; background-position: 74% 80% !important; }
body[data-visual="webdesign-kaernten"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/webdesign-kaernten.webp") !important; background-position: center 45% !important; }
body[data-visual="webdesign-villach"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/webdesign-villach.webp") !important; background-position: 62% center !important; }
body[data-visual="webdesign-klagenfurt"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/webdesign-klagenfurt.webp") !important; background-position: 64% center !important; }
body[data-visual="webdesign-spittal"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/webdesign-spittal.webp") !important; background-position: center !important; }
body[data-visual="branding-corporate-design"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/branding-corporate-design.webp") !important; background-position: center 50% !important; }
body[data-visual="ki-agentur-kaernten"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ki-agentur-kaernten.webp") !important; background-position: center 45% !important; }
body[data-visual="ki-automatisierung-kmu"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ki-automatisierung-kmu.webp") !important; background-position: center 50% !important; }
body[data-visual="ki-beratung-kaernten"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ki-beratung-kaernten.webp") !important; background-position: center 45% !important; }
body[data-visual="chatbot-fuer-unternehmen"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/chatbot-fuer-unternehmen.webp") !important; background-position: 64% center !important; }
body[data-visual="prozessautomatisierung-kmu"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/prozessautomatisierung-kmu.webp") !important; background-position: center 50% !important; }
body[data-visual="make-com-automatisierung"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/make-com-automatisierung.webp") !important; background-position: center 50% !important; }
body[data-visual="google-workspace-automatisierung"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/google-workspace-automatisierung.webp") !important; background-position: center 55% !important; }
body[data-visual="dokumentenmanagement-kmu"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/dokumentenmanagement-kmu.webp") !important; background-position: 66% center !important; }
body[data-visual="kundenautomatisierung"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/kundenautomatisierung.webp") !important; background-position: 64% center !important; }
body[data-visual="app-entwicklung"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/app-entwicklung.webp") !important; background-position: center 45% !important; }
body[data-visual="digitalisierung-unternehmen"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/digitalisierung-unternehmen.webp") !important; background-position: center 50% !important; }
body[data-visual="ablauf"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ablauf.webp") !important; background-position: center 50% !important; }
body[data-visual="ueber-uns"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ueber-uns.webp") !important; background-position: center 55% !important; }
body[data-visual="referenzen"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/referenzen.webp") !important; background-position: center 45% !important; }
body[data-visual="ratgeber"] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel) { background-image: url("assets/images/hero/ratgeber.webp") !important; background-position: center 45% !important; }
body[data-visual="preis-konfigurator"] .configurator-hero { background-image: linear-gradient(90deg, rgba(2, 7, 20, 0.94) 0%, rgba(2, 8, 24, 0.7) 46%, rgba(2, 8, 24, 0) 72%), url("assets/images/hero/preis-konfigurator.webp") !important; background-position: center, right top !important; background-size: cover, auto min(620px, 70vh) !important; background-repeat: no-repeat !important; }
body[data-visual="impressum"] .legal-page { background-image: linear-gradient(90deg, rgba(2, 7, 20, 0.94) 0%, rgba(2, 8, 24, 0.7) 46%, rgba(2, 8, 24, 0) 72%), url("assets/images/hero/impressum.webp") !important; background-position: center, right top !important; background-size: cover, auto min(620px, 70vh) !important; background-repeat: no-repeat !important; }
body[data-visual="datenschutz"] .legal-page { background-image: linear-gradient(90deg, rgba(2, 7, 20, 0.94) 0%, rgba(2, 8, 24, 0.7) 46%, rgba(2, 8, 24, 0) 72%), url("assets/images/hero/datenschutz.webp") !important; background-position: center, right top !important; background-size: cover, auto min(620px, 70vh) !important; background-repeat: no-repeat !important; }
/* HERO-BILDER END */

/* Referenzen & Partner */
.reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.reference-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(78, 203, 255, 0.22);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(10, 36, 80, 0.72), rgba(3, 13, 34, 0.92));
  box-shadow: 0 18px 44px rgba(0, 6, 22, 0.38);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.reference-card:hover {
  transform: translateY(-4px);
  border-color: rgba(78, 203, 255, 0.55);
  box-shadow: 0 24px 56px rgba(0, 10, 40, 0.5), 0 0 28px rgba(0, 168, 232, 0.16);
}
.reference-visual {
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: #0b1630;
}
.reference-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.reference-card:hover .reference-visual img {
  transform: scale(1.03);
}
.reference-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 24px 26px;
}
.reference-body h3 {
  margin: 0 0 4px;
}
.reference-body p {
  margin: 0 0 12px;
}
.reference-tag {
  padding: 4px 11px;
  border: 1px solid rgba(78, 203, 255, 0.32);
  border-radius: 999px;
  color: var(--ci-ice);
  background: rgba(0, 168, 232, 0.12);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.reference-body .reference-place {
  color: var(--visual-muted, #b6c5ed);
  font-size: 0.92rem;
}
.reference-body .card-link {
  margin-top: auto;
}
@media (max-width: 980px) {
  .reference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .reference-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reference-card,
  .reference-card:hover,
  .reference-card:hover .reference-visual img {
    transform: none;
    transition: none;
  }
}

/* Rechtstexte: angenehme Zeilenlänge, Motiv bleibt rechts frei */
body[data-design="legal"] .legal-page > :not(.breadcrumb) {
  max-width: 760px;
}
@media (max-width: 900px) {
  body[data-design="legal"] .legal-page {
    background-size: cover, auto 320px !important;
    background-position: center, right -80px top !important;
  }
}

/* Lange deutsche Wörter (z. B. „Dokumentenmanagement“) sauber trennen statt abschneiden */
body[data-design] :is(.module-card, .service-detail, .reference-card, .why-cards article, .home-process article, .faq-grid) :is(h2, h3, p, a, li, summary) {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}
body[data-design] :is(.module-card, .service-detail, .reference-card) {
  min-width: 0;
}

/* ==== KI-Animationen (ki-effekte.js) – nur aktiv, wenn "Bewegung reduzieren" aus ist ==== */
main .hero,
main .configurator-hero {
  position: relative;
}
.ki-netz {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
  -webkit-mask-image: radial-gradient(ellipse 85% 80% at 62% 42%, #000 30%, transparent 86%);
  mask-image: radial-gradient(ellipse 85% 80% at 62% 42%, #000 30%, transparent 86%);
}
.ki-netz.is-ready {
  opacity: 0.8;
}
main .hero > .hero-inner,
main .configurator-hero > :not(.ki-netz) {
  position: relative;
  z-index: 1;
}

/* Licht-Scan über die Hero-Bilder */
html.ki-motion body[data-visual] .hero :is(.system-panel, .timeline-panel, .contact-card, .about-network, .benefit-panel)::before {
  opacity: 1 !important;
  background: linear-gradient(105deg, transparent 38%, rgba(155, 220, 255, 0.16) 50%, transparent 62%) !important;
  background-size: 260% 100% !important;
  animation: ki-sweep 8s ease-in-out infinite;
}
@keyframes ki-sweep {
  0% { background-position: 130% 0; }
  55%, 100% { background-position: -30% 0; }
}

/* Tippzeile "KI-Assistent" auf der Startseite */
.ki-typing {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  margin: 20px 0 0;
  padding: 8px 16px;
  border: 1px solid rgba(78, 203, 255, 0.28);
  border-radius: 999px;
  background: rgba(4, 20, 48, 0.62);
  color: var(--ci-ice);
  font-size: 0.88rem;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ki-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ci-cyan);
  animation: ki-pulse 1.8s infinite;
}
.ki-typing-label {
  color: #fff;
  font-weight: 700;
}
.ki-typing-caret {
  width: 2px;
  height: 1.05em;
  background: var(--ci-cyan-light);
  animation: ki-caret 1s steps(1) infinite;
}
@keyframes ki-pulse {
  0% { box-shadow: 0 0 0 0 rgba(0, 168, 232, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(0, 168, 232, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 168, 232, 0); }
}
@keyframes ki-caret {
  50% { opacity: 0; }
}
@media (max-width: 760px) {
  .ki-typing {
    display: none;
  }
}

/* Weiches Einblenden beim Scrollen */
html.ki-motion .ki-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.ki-motion .ki-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ki-netz,
  .ki-typing {
    display: none;
  }
}

/* Abschluss-Band: nur noch die Karte, keine Balken links/rechts */
body[data-design] .cta-band {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
body[data-design] .cta-band::before,
body[data-design] .cta-band::after {
  content: none !important;
}
body[data-design] .cta-inner {
  border: 1px solid rgba(78, 203, 255, 0.24) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 82% 28%, rgba(0, 168, 232, 0.2), transparent 46%),
    linear-gradient(135deg, rgba(10, 40, 92, 0.88), rgba(4, 14, 36, 0.94)) !important;
  box-shadow: 0 24px 60px rgba(0, 7, 24, 0.4), 0 0 40px rgba(0, 168, 232, 0.08) !important;
}

/* Kontakt-Schritte: Symbol-Kachel und Text mit sauberem Abstand */
body[data-design] .request-steps div {
  grid-template-columns: auto minmax(0, 1fr) !important;
  gap: 22px !important;
  align-items: start;
}
body[data-design] .request-steps .icon {
  flex-shrink: 0;
}
@media (max-width: 760px) {
  body[data-design] .request-steps div {
    gap: 16px !important;
  }
}

/* ==== Ruhiger, einheitlicher Hintergrund (ersetzt Ringlinien, Diagonalband und Punkteraster) ==== */
body[data-design] .hero::before,
body[data-design] main::before,
body[data-design] .site-footer::before {
  content: none !important;
}
body[data-design] .hero,
body[data-page="home"] .hero {
  background:
    radial-gradient(ellipse 60% 70% at 76% 38%, rgba(23, 105, 232, 0.16), transparent 70%),
    radial-gradient(ellipse 45% 55% at 12% 88%, rgba(0, 168, 232, 0.07), transparent 70%) !important;
}

/* ==== Startseite: KI als Hauptmotiv ==== */
/* Rotierende Datenringe hinter dem Website-Mockup */
.ki-orbit {
  position: absolute;
  top: 50%;
  right: 4%;
  z-index: 0;
  width: min(46vw, 660px);
  aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none;
}
.ki-orbit span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(78, 203, 255, 0.14);
}
.ki-orbit span:nth-child(1) {
  border-top-color: rgba(78, 203, 255, 0.75);
  animation: ki-rotate 14s linear infinite;
}
.ki-orbit span:nth-child(2) {
  inset: 9%;
  border-color: rgba(23, 105, 232, 0.16);
  border-right-color: rgba(0, 168, 232, 0.7);
  animation: ki-rotate 22s linear infinite reverse;
}
.ki-orbit span:nth-child(3) {
  inset: 19%;
  border-style: dashed;
  border-color: rgba(155, 220, 255, 0.12);
  animation: ki-rotate 40s linear infinite;
}
.ki-orbit span:nth-child(1)::after,
.ki-orbit span:nth-child(2)::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dff6ff;
  box-shadow: 0 0 14px 4px rgba(0, 168, 232, 0.7);
}
.ki-orbit span:nth-child(2)::after {
  top: 50%;
  right: -5px;
  left: auto;
}
@keyframes ki-rotate {
  to { transform: rotate(360deg); }
}
@media (max-width: 900px) {
  .ki-orbit {
    display: none;
  }
}

/* Abschnitt "KI in Aktion": Datenfluss von der Anfrage bis zur Freigabe */
.ki-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}
.ki-flow::before {
  content: "";
  position: absolute;
  top: 64px;
  right: 10%;
  left: 10%;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 168, 232, 0.12), rgba(78, 203, 255, 0.5), rgba(0, 168, 232, 0.12));
}
.ki-flow-track {
  position: absolute;
  top: 41px;
  right: 10%;
  left: 10%;
  height: 12px;
  overflow: hidden;
  pointer-events: none;
}
.ki-flow-track i {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e6f8ff;
  box-shadow: 0 0 16px 5px rgba(0, 168, 232, 0.75);
  animation: ki-flow-move 5.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.ki-flow-track i:nth-child(2) { animation-delay: 1.8s; }
.ki-flow-track i:nth-child(3) { animation-delay: 3.6s; }
@keyframes ki-flow-move {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 12px); opacity: 0; }
}
.ki-flow-step {
  position: relative;
  padding: 0 6px;
  text-align: center;
}
.ki-flow-node {
  position: relative;
  z-index: 1;
  display: grid;
  width: 92px;
  height: 92px;
  margin: 0 auto 18px;
  place-items: center;
  border: 1px solid rgba(78, 203, 255, 0.4);
  border-radius: 50%;
  color: var(--ci-ice);
  background: radial-gradient(circle at 50% 35%, rgba(23, 105, 232, 0.45), rgba(4, 16, 40, 0.95) 70%);
  box-shadow: 0 0 0 8px rgba(0, 168, 232, 0.06), 0 0 34px rgba(0, 168, 232, 0.25);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  animation: ki-node-glow 5.5s ease-in-out infinite;
}
.ki-flow-step:nth-child(3) .ki-flow-node { animation-delay: 1.4s; }
.ki-flow-step:nth-child(4) .ki-flow-node { animation-delay: 2.8s; }
.ki-flow-step:nth-child(5) .ki-flow-node { animation-delay: 4.2s; }
@keyframes ki-node-glow {
  0%, 70%, 100% { box-shadow: 0 0 0 8px rgba(0, 168, 232, 0.06), 0 0 34px rgba(0, 168, 232, 0.25); }
  20% { box-shadow: 0 0 0 12px rgba(0, 168, 232, 0.14), 0 0 52px rgba(78, 203, 255, 0.55); }
}
.ki-flow-step h3 {
  margin: 0 0 8px;
}
.ki-flow-step p {
  margin: 0;
  color: var(--visual-muted, #b6c5ed);
}
@media (max-width: 860px) {
  .ki-flow {
    grid-template-columns: 1fr 1fr;
  }
  .ki-flow::before,
  .ki-flow-track {
    display: none;
  }
}
@media (max-width: 520px) {
  .ki-flow {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ki-orbit span,
  .ki-flow-track i,
  .ki-flow-node {
    animation: none !important;
  }
  .ki-flow-track {
    display: none;
  }
}


/* Startseite: neuronales Netz kräftiger und über den ganzen Hero */
body[data-page="home"] .ki-netz.is-ready {
  opacity: 1;
}
body[data-page="home"] .ki-netz {
  -webkit-mask-image: radial-gradient(ellipse 100% 95% at 55% 45%, #000 45%, transparent 96%);
  mask-image: radial-gradient(ellipse 100% 95% at 55% 45%, #000 45%, transparent 96%);
}
.ki-flow + .section-lead {
  margin-top: 38px;
}

/* ==== Leistungs- und Ortsseiten: Inhalt über die volle Breite statt leerer rechter Spalte ==== */
@media (min-width: 981px) {
  body[data-design] .service-page-content {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;
  }
  /* Fließtext in angenehmer Lesebreite, Karten und Bänder nutzen die volle Breite */
  body[data-design] .service-page-content > article > :is(p, h2, h3, .eyebrow) {
    max-width: 880px;
  }
  body[data-design] .service-page-content .service-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }
  /* Seitenleiste wird zur breiten Kontaktleiste */
  body[data-design] .service-page-content > .service-aside {
    position: static !important;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    grid-auto-flow: dense;
    align-items: center;
    gap: 10px 40px;
    padding: 34px 40px;
  }
  body[data-design] .service-page-content > .service-aside > :not(.btn) {
    grid-column: 1;
    max-width: 680px;
    margin-top: 0;
    margin-bottom: 0;
  }
  body[data-design] .service-page-content > .service-aside > .btn {
    grid-column: 2;
    width: 100%;
    margin: 0;
  }
}
@media (min-width: 1280px) {
  /* Bei vielen Karten (z. B. Leistungsübersichten) drei nebeneinander */
  body[data-design] .service-page-content .service-detail-grid:has(> :nth-child(5)) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 981px) {
  /* Karten nebeneinander: innen Text oben, Liste darunter */
  body[data-design] .service-page-content .service-detail-grid .service-detail {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
    align-content: start;
  }
}

/* ==== Startseite: Wow-Effekte (zweite Stufe) ==== */
/* Symbole in den KI-Knoten */
.ki-flow-node svg {
  width: 36px;
  height: 36px;
  fill: none;
  stroke: #dff6ff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(78, 203, 255, 0.7));
}
/* Rotierender Leuchtring um jeden Knoten */
.ki-flow-node::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(0, 168, 232, 0.2) 70%, rgba(155, 220, 255, 0.95) 88%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, #000 61%, #000 69%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 58%, #000 61%, #000 69%, transparent 72%);
  animation: ki-rotate 3.2s linear infinite;
}
.ki-flow-step:nth-child(3) .ki-flow-node::before { animation-duration: 3.8s; animation-direction: reverse; }
.ki-flow-step:nth-child(4) .ki-flow-node::before { animation-duration: 2.9s; }
.ki-flow-step:nth-child(5) .ki-flow-node::before { animation-duration: 4.2s; animation-direction: reverse; }
/* Datenimpulse als Kometen mit Lichtschweif */
.ki-flow-track {
  top: 62px;
  height: 6px;
}
.ki-flow-track i {
  top: 1px;
  width: 90px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, rgba(0, 168, 232, 0.55) 55%, #e8f9ff);
  box-shadow: 0 0 18px 3px rgba(0, 168, 232, 0.55);
}
@keyframes ki-flow-move {
  0% { left: -90px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: calc(100% + 10px); opacity: 0; }
}
/* Schwebende Glas-Karten unter den Knoten */
.ki-flow-step {
  padding: 18px 14px 22px;
  border-radius: 18px;
  overflow: visible;
}

/* Live-KI-Terminal */
.ki-terminal {
  max-width: 860px;
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid rgba(78, 203, 255, 0.28);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(4, 18, 44, 0.92), rgba(2, 9, 26, 0.96));
  box-shadow: 0 24px 60px rgba(0, 6, 22, 0.45), 0 0 40px rgba(0, 168, 232, 0.1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ki-terminal-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(78, 203, 255, 0.16);
  background: rgba(7, 26, 60, 0.7);
}
.ki-terminal-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(155, 220, 255, 0.35);
}
.ki-terminal-bar span:first-child { background: rgba(0, 168, 232, 0.9); }
.ki-terminal-bar em {
  margin-left: 8px;
  color: var(--visual-muted, #b6c5ed);
  font-size: 0.78rem;
  font-style: normal;
  letter-spacing: 0.04em;
}
.ki-terminal-body {
  min-height: 196px;
  padding: 18px 22px 22px;
  color: #cfeeff;
  font-size: 0.9rem;
  line-height: 1.75;
}
.ki-terminal-body p {
  margin: 0;
}
.ki-terminal-body b {
  color: var(--ci-cyan-light);
}
.ki-terminal-body p.is-done,
.ki-terminal-body p.is-done b {
  color: #7ff0c4;
}
.ki-terminal-body p:last-child span::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1.05em;
  margin-left: 3px;
  vertical-align: -2px;
  background: var(--ci-cyan-light);
  animation: ki-caret 1s steps(1) infinite;
}

/* Farbverlauf auf "KI-Automatisierung" */
.ki-gradient-text {
  background: linear-gradient(90deg, #4ecbff, #b9ecff, #1769e8, #4ecbff);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ki-shine 7s linear infinite;
}
@keyframes ki-shine {
  to { background-position: 300% 0; }
}

/* Schwebendes Mockup mit Licht-Scan */
html.ki-motion body[data-page="home"] .hero .hero-media-panel {
  animation: ki-float 7s ease-in-out infinite;
}
@keyframes ki-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
html.ki-motion body[data-page="home"] .hero .hero-media-panel::before {
  opacity: 1 !important;
  background: linear-gradient(105deg, transparent 40%, rgba(155, 220, 255, 0.14) 50%, transparent 60%) !important;
  background-size: 260% 100% !important;
  animation: ki-sweep 7s ease-in-out infinite;
}

/* Lichtkegel folgt der Maus auf Karten */
.ki-spot-host {
  position: relative;
}
.ki-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, -400px) var(--my, -400px), rgba(78, 203, 255, 0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.ki-spot-host:hover .ki-spot {
  opacity: 1;
}
.ki-spot-host > :not(.ki-spot) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ki-flow-node::before,
  .ki-gradient-text,
  .ki-terminal-body p:last-child span::after {
    animation: none !important;
  }
  .ki-gradient-text {
    color: var(--ci-cyan-light);
    background: none;
  }
}

/* ==== Mobil-Feinschliff: Wortumbruch, Tablet-Menü, Tippflächen ab 44 px, lesbare Kleinschrift ==== */
/* Lange deutsche Wörter in Überschriften nur an den Wortfugen trennen („Prozess-automatisierung“).
   Die weichen Trennstellen (­) setzt tools/sync.py; automatische Silbentrennung würde mitten im Wort trennen. */
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
  -webkit-hyphens: manual !important;
  hyphens: manual !important;
}

@media (max-width: 1100px) {
  /* Tippflächen mindestens 44 px hoch (Apple/Google-Empfehlung) */
  .site-footer a:not(.brand),
  .footer-link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-contact-link,
  .footer-social-links a {
    min-height: 44px;
  }

  .footer-group a,
  .footer-faq a {
    margin-top: 0;
  }

  .footer-group summary {
    margin-bottom: 2px;
    padding: 10px 0;
  }

  .card-link {
    min-height: 44px;
    margin-top: 9px;
  }

  .faq-grid summary {
    margin: -18px -20px;
    padding: 18px 20px;
  }

  .faq-grid details[open] summary {
    margin-bottom: 0;
    padding-bottom: 6px;
  }

  .breadcrumb {
    margin: -10px 0 4px;
  }

  .breadcrumb ol {
    align-items: center;
    gap: 0 8px;
  }

  .breadcrumb a {
    display: inline-block;
    padding: 12px 0;
  }
}

/* Tablet (760–1100 px): Menü-Knopf statt gequetschter Navigation mit 11-px-Schrift */
@media (min-width: 760px) and (max-width: 1100px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

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

  .site-nav {
    display: none;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    font-size: 1rem;
  }

  .site-nav.is-open {
    display: flex;
  }

  .header-cta {
    display: none;
  }

  .hero .trust-row li {
    font-size: 0.82rem;
  }
}

@media (max-width: 430px) {
  .eyebrow {
    font-size: 0.75rem;
    letter-spacing: 0.11em;
  }

  .reference-tag {
    font-size: 0.78rem;
  }
}

/* 760–768 px (iPad hochkant): Startseiten-Hero einspaltig wie am Handy, statt Text auf zwei Spalten zu verteilen */
@media (min-width: 760px) and (max-width: 768px) {
  .hero-home .hero-inner {
    display: flex !important;
  }

  .hero-home .hero-media-panel {
    width: min(100%, 560px);
    align-self: center;
  }
}

/* Handy: Flächenbilder (Konfigurator, Rechtliches) oben rechts kleiner und stärker abgedunkelt, damit Text darüber gut lesbar bleibt */
@media (max-width: 760px) {
  body[data-visual="preis-konfigurator"] .configurator-hero {
    background-image: linear-gradient(180deg, rgba(2, 8, 24, 0.42) 0, rgba(2, 8, 24, 0.86) 210px, rgba(2, 8, 24, 0.97) 330px), url("assets/images/hero/preis-konfigurator.webp") !important;
    background-size: cover, auto 320px !important;
    background-position: center, right -90px top !important;
  }
  body[data-visual="impressum"] .legal-page {
    background-image: linear-gradient(180deg, rgba(2, 8, 24, 0.42) 0, rgba(2, 8, 24, 0.86) 210px, rgba(2, 8, 24, 0.97) 330px), url("assets/images/hero/impressum.webp") !important;
    background-size: cover, auto 320px !important;
    background-position: center, right -90px top !important;
  }
  body[data-visual="datenschutz"] .legal-page {
    background-image: linear-gradient(180deg, rgba(2, 8, 24, 0.42) 0, rgba(2, 8, 24, 0.86) 210px, rgba(2, 8, 24, 0.97) 330px), url("assets/images/hero/datenschutz.webp") !important;
    background-size: cover, auto 320px !important;
    background-position: center, right -90px top !important;
  }
}

/* Rechtsseiten: H1 am Handy so groß wie die übrigen Seiten-Überschriften, damit „Datenschutzerklärung“ an der Wortfuge bricht */
@media (max-width: 430px) {
  body[data-design] .legal-page h1 {
    font-size: clamp(2rem, 9.2vw, 2.38rem);
  }
}

/* Kontrast auf dunklem Grund: Formularmeldungen (inkl. Link darin) und aktive Konfigurator-Schritte */
body[data-design] .form-status.is-error,
body[data-design] .config-mail-note.is-error {
  color: #ff9b91;
}

body[data-design] .form-status.is-success,
body[data-design] .config-mail-note.is-success {
  color: #6ee7b7;
}

body[data-design] .form-status a {
  color: inherit;
  text-decoration: underline;
}

body[data-design] .config-progress li.is-current > span,
body[data-design] .config-progress li.is-complete > span {
  border-color: var(--ci-cyan-light);
  background: #1660d6;
}

/* ==== Korrekturrunde 25.10.: Abstände, Blöcke, Referenzen, Kennzahlen ==== */
/* KI-Ablauf: statt abgeschnittenem Lichtkegel leuchtet beim Darüberfahren nur der Knoten auf */
.ki-flow-node {
  transition: filter 0.3s ease;
}
.ki-flow-step:hover .ki-flow-node {
  filter: brightness(1.18) drop-shadow(0 0 18px rgba(78, 203, 255, 0.55));
}

/* Zwischenüberschriften im Fließtext brauchen Luft nach oben (z. B. „Standort Villach“ nach den Karten) */
body[data-design] .service-page-content > article > .eyebrow:not(:first-child) {
  margin-top: clamp(48px, 6vw, 76px);
}
body[data-design] .service-page-content > article > .service-detail-grid + :is(h2, .eyebrow),
body[data-design] .service-page-content > article > .service-detail-grid + .wide-stat-band {
  margin-top: clamp(48px, 6vw, 76px);
}

/* Leistungen: Abstand zwischen Einleitungsbox und Modulkarten */
body[data-design] .wide-stat-band.module-intro {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Aktuelles Fachthema: Farbe nur in der Karte, nicht als Band über die ganze Breite */
body[data-design] .premium-topic {
  border: 0 !important;
  background: none !important;
}

/* Referenzen: nur Logo und Name, nicht klickbar (kein Hover-Effekt) */
.reference-card,
.reference-card:hover {
  transform: none;
  cursor: default;
}
.reference-card:hover {
  border-color: rgba(78, 203, 255, 0.22);
  box-shadow: 0 18px 44px rgba(0, 6, 22, 0.38);
}
.reference-card:hover .reference-visual img {
  transform: none;
}
.reference-body {
  align-items: center;
  padding: 18px 20px 22px;
  text-align: center;
}
.reference-body h3 {
  margin: 0;
}

/* Über uns: Kennzahlen in CI-Farben statt grellem Blau, am Handy als kleine Karten */
body[data-design] .stat-grid strong {
  color: transparent;
  background: linear-gradient(100deg, #ffffff 0%, var(--ci-ice) 40%, var(--ci-cyan-light) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  line-height: 1.15;
}
body[data-design] .stat-grid span {
  display: block;
  margin-top: 6px;
  color: var(--visual-muted);
}
@media (max-width: 760px) {
  body[data-design] .stat-grid {
    gap: 12px;
  }
  body[data-design] .stat-grid div {
    padding: 16px 18px;
    border: 1px solid rgba(78, 203, 255, 0.2);
    border-radius: 14px;
    background: rgba(6, 24, 58, 0.45);
  }
}

/* ==== Kontakt: animierte Grafik „Alle Wege führen zu VisioNext“ ==== */
body[data-design] .hero .contact-card.kontakt-hub-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 0;
  overflow: visible;
  background: none !important;
  -webkit-mask-image: none;
  mask-image: none;
}
body[data-design] .hero .contact-card.kontakt-hub-card::before {
  display: none;
}
/* Ältere Regel blendet Inhalte in Hero-Bildfeldern aus; die Grafik soll sichtbar sein */
body[data-design] .hero .contact-card.kontakt-hub-card > .kontakt-hub {
  visibility: visible !important;
  opacity: 1 !important;
}
.kontakt-hub {
  display: block;
  width: 100%;
  max-width: 580px;
  height: auto;
  overflow: visible;
}
.kh-orbit {
  transform-origin: 280px 240px;
  animation: kh-spin 48s linear infinite;
}
.kh-orbit-b {
  animation-duration: 30s;
  animation-direction: reverse;
}
.kh-links path {
  stroke-dasharray: 6 9;
  animation: kh-dash 1.4s linear infinite;
}
.kh-ring {
  opacity: 0;
  transform-origin: 280px 240px;
  animation: kh-ring 3.4s ease-out infinite;
}
.kh-ring-2 {
  animation-delay: 1.7s;
}
.kh-chip {
  animation: kh-float 6s ease-in-out infinite;
}
.kh-chip-2 { animation-delay: -1.5s; }
.kh-chip-3 { animation-delay: -3s; }
.kh-chip-4 { animation-delay: -4.5s; }
.kh-chip rect {
  fill: rgba(6, 24, 58, 0.9);
  stroke: rgba(78, 203, 255, 0.55);
  stroke-width: 1.5;
}
.kh-chip-icon {
  fill: rgba(0, 168, 232, 0.16);
  stroke: rgba(78, 203, 255, 0.45);
}
.kh-icon {
  fill: none;
  stroke: var(--ci-ice);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kh-chip text {
  fill: #eef8ff;
  font-size: 15px;
  font-weight: 700;
}
.kh-caption {
  fill: var(--ci-ice);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
@keyframes kh-spin { to { transform: rotate(360deg); } }
@keyframes kh-dash { to { stroke-dashoffset: -30; } }
@keyframes kh-ring {
  0% { opacity: 0.65; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.8); }
}
@keyframes kh-float { 50% { transform: translateY(-6px); } }

/* ==== Leistungen: Modul-Bild mit Scan-Animation neben „Was wir vor der Modul-Empfehlung prüfen“ ==== */
.ki-visual {
  position: relative;
  min-height: 380px;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 58% 50%, #000 38%, rgba(0, 0, 0, 0.6) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 70% at 58% 50%, #000 38%, rgba(0, 0, 0, 0.6) 66%, transparent 100%);
}
.ki-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  animation: kv-zoom 18s ease-in-out infinite alternate;
}
.ki-visual-scan {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 26%;
  background: linear-gradient(180deg, transparent, rgba(78, 203, 255, 0.3) 50%, transparent);
  mix-blend-mode: screen;
  animation: kv-scan 5.5s ease-in-out infinite;
}
.ki-visual-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e6f8ff;
  animation: kv-ping 2.6s ease-out infinite;
}
.ki-visual-dot-1 { top: 22%; left: 68%; }
.ki-visual-dot-2 { top: 44%; left: 55%; animation-delay: 0.9s; }
.ki-visual-dot-3 { top: 63%; left: 76%; animation-delay: 1.8s; }
.ki-visual-chip {
  position: absolute;
  left: 18%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 9px;
  border: 1px solid rgba(78, 203, 255, 0.45);
  border-radius: 999px;
  color: #eef8ff;
  background: rgba(4, 18, 46, 0.86);
  box-shadow: 0 10px 26px rgba(0, 6, 22, 0.45);
  font-size: 0.86rem;
  font-weight: 700;
  opacity: 0;
  animation: kv-chip 9s ease-in-out infinite both;
}
.ki-visual-chip::before {
  content: "✓";
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1660d6;
  font-size: 0.72rem;
}
.ki-visual-chip-1 { top: 24%; }
.ki-visual-chip-2 { top: 41%; animation-delay: 1.2s; }
.ki-visual-chip-3 { top: 58%; animation-delay: 2.4s; }
@keyframes kv-zoom {
  from { transform: scale(1.02); }
  to { transform: scale(1.1); }
}
@keyframes kv-scan {
  0% { opacity: 0; transform: translateY(-100%); }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(390%); }
}
@keyframes kv-ping {
  0% { box-shadow: 0 0 0 0 rgba(78, 203, 255, 0.55), 0 0 18px rgba(78, 203, 255, 0.9); }
  100% { box-shadow: 0 0 0 18px rgba(78, 203, 255, 0), 0 0 18px rgba(78, 203, 255, 0.9); }
}
@keyframes kv-chip {
  0%, 4% { opacity: 0; transform: translateX(-10px); }
  12%, 82% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateX(-10px); }
}
@media (max-width: 980px) {
  .ki-visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}

/* ==== Handy/Tablet-Menü: Karte rechts unter dem Menü-Knopf, in Daumen-Reichweite (Desktop unverändert) ==== */
.site-nav .nav-cta {
  display: none;
}
@media (max-width: 1100px) {
  .menu-toggle {
    gap: 10px;
    min-height: 46px;
    padding: 0 16px;
    border-color: rgba(78, 203, 255, 0.4);
    border-radius: 14px;
    background: rgba(6, 24, 58, 0.6);
  }
  .menu-toggle-icon,
  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, background-color 0.2s ease;
  }
  .menu-toggle-icon {
    position: relative;
  }
  .menu-toggle-icon::before,
  .menu-toggle-icon::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .menu-toggle-icon::before { top: -6px; }
  .menu-toggle-icon::after { top: 6px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
    background-color: transparent;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  body .site-nav.is-open {
    position: absolute;
    z-index: 60;
    top: calc(100% + 10px);
    right: 12px;
    left: auto;
    grid-column: auto;
    display: flex;
    width: min(330px, calc(100vw - 24px));
    max-height: calc(100svh - 120px);
    overflow-y: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px;
    border: 1px solid rgba(78, 203, 255, 0.34);
    border-radius: 22px;
    background: linear-gradient(165deg, #081e48, #030b1e);
    box-shadow: 0 28px 70px rgba(0, 4, 18, 0.65), 0 0 36px rgba(0, 168, 232, 0.14);
    font-size: 1.06rem;
  }
  body .site-nav.is-open a {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: flex-end;
    padding: 0 18px;
    border-radius: 14px;
    color: rgba(233, 240, 255, 0.92);
    text-align: right;
  }
  body .site-nav.is-open a::after {
    display: none !important;
  }
  body .site-nav.is-open a:not(.nav-cta):hover,
  body .site-nav.is-open a[aria-current="page"],
  body .site-nav.is-open a.active {
    color: #fff;
    background: rgba(0, 168, 232, 0.14);
    box-shadow: inset -3px 0 0 var(--ci-cyan-light);
  }
  body .site-nav.is-open .nav-cta {
    justify-content: center;
    min-height: 54px;
    margin-top: 8px;
    color: #fff;
    background: linear-gradient(105deg, #0a6db5 0%, #1660d6 64%, #3f52d6 100%);
    box-shadow: 0 10px 28px rgba(23, 105, 232, 0.35);
    font-weight: 800;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kh-orbit,
  .kh-links path,
  .kh-ring,
  .kh-chip,
  .ki-visual img,
  .ki-visual-scan,
  .ki-visual-dot {
    animation: none;
  }
  .kh-pulses,
  .ki-visual-scan {
    display: none;
  }
  .ki-visual-chip {
    opacity: 1;
    animation: none;
  }
}