:root {
  color-scheme: light;
  --site-blue: #008ec5;
  --site-blue-strong: #006f99;
  --site-blue-soft: #d8eef7;
  --site-ink: #0f172a;
  --site-muted: #5f6b7a;
  --site-line: #d9e2ec;
  --site-surface: #f4f7fb;
  --site-surface-strong: #eef3f8;
  --site-white: #ffffff;
  --site-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  --site-card-shadow: 0 18px 40px rgba(15, 23, 42, 0.05);
  --site-card-shadow-hover: 0 24px 48px rgba(15, 23, 42, 0.09);
  --site-radius: 1.25rem;
}

html {
  scroll-behavior: smooth;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI Variable Text", "Segoe UI", "Helvetica Neue", sans-serif;
  color: var(--site-ink);
  background:
    linear-gradient(180deg, rgba(0, 142, 197, 0.08), rgba(0, 142, 197, 0) 18rem),
    linear-gradient(180deg, #ffffff, var(--site-surface));
}

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

a:hover,
a:focus {
  color: var(--site-blue-strong);
}

.site-shell {
  min-height: 100vh;
}

.border-site {
  border-color: var(--site-line) !important;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
}

.navbar {
  --bs-navbar-toggler-border-color: rgba(15, 23, 42, 0.12);
  --bs-navbar-toggler-focus-width: 0.2rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.navbar-nav .nav-item {
  list-style: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark img {
  width: 2.9rem;
  height: auto;
  object-fit: contain;
}

.brand-mark-text {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 1rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--site-white);
  background: linear-gradient(180deg, var(--site-blue), var(--site-blue-strong));
  box-shadow: 0 16px 30px rgba(0, 142, 197, 0.2);
}

.brand-name {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-subtitle {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--site-muted);
}

.nav-link-site {
  font-size: 0.96rem;
  font-weight: 600;
  color: var(--site-ink);
}

.nav-link-site:hover,
.nav-link-site:focus,
.current-menu-item > .nav-link-site,
.current-menu-item > a.nav-link-site {
  color: var(--site-blue-strong);
}

.hero-section,
.page-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 5vw, 5rem) 0 3rem;
}

.hero-section-corporate {
  padding-bottom: 2.2rem;
}

.page-hero {
  --page-hero-height: clamp(35rem, 42vw, 39rem);
  padding: 0 0 3rem;
}

.hero-section::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 1.5rem auto auto 58%;
  width: min(34rem, 44vw);
  height: min(34rem, 44vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 142, 197, 0.18), rgba(0, 142, 197, 0));
  pointer-events: none;
  transform: translateX(-10%);
}

.hero-copy,
.hero-panel,
.page-hero > .container-xxl {
  position: relative;
  z-index: 1;
}

.page-hero > .container-xxl {
  min-height: var(--page-hero-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: clamp(2.5rem, 5vw, 3.8rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.page-hero-featured-post {
  position: relative;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(5, 22, 32, 0.84), rgba(5, 22, 32, 0.5) 42%, rgba(5, 22, 32, 0.7)),
    var(--page-hero-image) center center / cover no-repeat;
  isolation: isolate;
}

.page-hero-featured-post::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  transform: none;
  background:
    radial-gradient(circle at 82% 18%, rgba(96, 230, 255, 0.24), rgba(96, 230, 255, 0) 24%),
    linear-gradient(180deg, rgba(4, 18, 27, 0.12), rgba(4, 18, 27, 0.46));
}

.page-hero-featured-post::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, rgba(8, 20, 28, 0.02), rgba(8, 20, 28, 0.32));
  z-index: 0;
}

.page-hero-featured-post .eyebrow {
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 0.7rem;
}

.page-hero-featured-post .page-hero-meta {
  margin: 0 0 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-hero-featured-post h1 {
  max-width: 50rem;
  color: #ffffff;
  line-height: 1.04;
  text-wrap: balance;
}

.page-hero-featured-post .page-intro {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.84);
}

.hero-copy {
  padding: 1rem 0;
}

.eyebrow {
  margin: 0 0 1rem;
  color: var(--site-blue-strong);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-copy h1,
.section-head h2,
.section-intro h2,
.page-hero h1,
.cta-shell h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4.7vw, 3.95rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.section-head h2,
.section-intro h2,
.cta-shell h2,
.page-hero h1 {
  font-size: clamp(1.85rem, 3.7vw, 2.95rem);
}

.section-head h2,
.section-intro h2,
.cta-shell h2 {
  font-size: clamp(1.72rem, 3.35vw, 2.68rem);
}

.hero-section-corporate .hero-copy h1 {
  font-size: clamp(2rem, 4.1vw, 3.35rem);
}

.lead,
.section-head p,
.section-intro p,
.page-intro,
.cta-shell p {
  margin: 1.5rem 0 0;
  max-width: 48rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--site-muted);
}

.lead-hero {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
  color: var(--site-ink);
}

.hero-actions,
.section-actions {
  margin-top: 2rem;
}

.btn-site,
.btn-outline-site,
.btn-link-site {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  font-weight: 600;
  border-radius: 999px;
  padding-inline: 1.35rem;
}

.btn-site {
  color: #ffffff;
  background: linear-gradient(180deg, var(--site-blue), var(--site-blue-strong));
  border: 1px solid var(--site-blue-strong);
  box-shadow: 0 16px 30px rgba(0, 142, 197, 0.16);
}

.btn-site:hover,
.btn-site:focus {
  color: #ffffff;
  background: linear-gradient(180deg, var(--site-blue-strong), #005f85);
}

.btn-outline-site {
  color: var(--site-ink);
  background: #ffffff;
  border: 1px solid var(--site-line);
}

.btn-outline-site:hover,
.btn-outline-site:focus {
  color: var(--site-blue-strong);
  border-color: rgba(0, 142, 197, 0.28);
  background: rgba(255, 255, 255, 0.96);
}

.btn-link-site {
  color: var(--site-blue-strong);
  padding-inline: 0;
}

.btn-link-site:hover,
.btn-link-site:focus {
  color: var(--site-ink);
}

.hero-metrics,
.process-grid,
.entry-content .content-grid,
.entry-content .project-grid,
.entry-content .contact-grid,
.entry-content .stacked-grid {
  display: grid;
  gap: 1rem;
}

.entry-content .content-grid > br,
.entry-content .project-grid > br,
.entry-content .contact-grid > br,
.entry-content .stacked-grid > br {
  display: none !important;
}

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

.metric-card,
.feature-card,
.detail-card,
.project-card,
.process-step,
.entry-content .info-card,
.entry-content .contact-card,
.page-content-card,
.hero-panel .card {
  position: relative;
  overflow: hidden;
  height: 100%;
  border-radius: var(--site-radius);
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--site-line);
  box-shadow: var(--site-card-shadow);
  backdrop-filter: blur(10px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.metric-card,
.feature-card,
.detail-card,
.project-card,
.process-step,
.entry-content .info-card,
.entry-content .contact-card {
  padding: 1.5rem;
}

.metric-card:hover,
.metric-card:focus-within,
.feature-card:hover,
.feature-card:focus-within,
.detail-card:hover,
.detail-card:focus-within,
.project-card:hover,
.project-card:focus-within,
.process-step:hover,
.process-step:focus-within,
.entry-content .info-card:hover,
.entry-content .info-card:focus-within,
.entry-content .contact-card:hover,
.entry-content .contact-card:focus-within,
.hero-panel .card:hover,
.hero-panel .card:focus-within {
  transform: translateY(-3px);
  border-color: rgba(0, 142, 197, 0.24);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--site-card-shadow-hover);
}

.metric-card strong,
.feature-card h3,
.detail-card h3,
.project-card h3,
.process-step h3,
.entry-content .info-card h3,
.entry-content .contact-card h3 {
  display: block;
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.metric-card span,
.feature-card p,
.detail-card p,
.project-card p,
.process-step p,
.entry-content .info-card p,
.entry-content .contact-card p,
.panel-kicker {
  display: block;
  margin: 0.5rem 0 0;
  color: var(--site-muted);
  line-height: 1.58;
}

.feature-number,
.process-count,
.project-kicker,
.panel-kicker,
.entry-content .card-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.72rem;
  padding: 0.24rem 0.68rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--site-blue-strong);
  background: rgba(0, 142, 197, 0.08);
  border: 1px solid rgba(0, 142, 197, 0.14);
}

.entry-content .card-kicker + h3,
.entry-content .card-kicker + p {
  margin-top: 0.72rem;
}

.feature-card h3,
.project-card h3 {
  margin-top: 1.1rem;
}

.feature-topline,
.detail-card-head,
.metric-card-head,
.project-card-head,
.process-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
}

.feature-glyph,
.detail-glyph,
.page-motion-glyph,
.metric-glyph,
.project-glyph,
.process-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--site-blue-strong);
}

.feature-glyph,
.detail-glyph,
.project-glyph,
.process-glyph {
  width: 2.9rem;
  height: 2.9rem;
  margin-top: -0.28rem;
  transform: translateY(-0.12rem);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, rgba(0, 142, 197, 0.14), rgba(0, 142, 197, 0.04));
  border: 1px solid rgba(0, 142, 197, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.metric-glyph {
  width: 2.9rem;
  height: 2.9rem;
  margin-top: -0.56rem;
  transform: translateY(-0.46rem);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, rgba(0, 142, 197, 0.14), rgba(0, 142, 197, 0.04));
  border: 1px solid rgba(0, 142, 197, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.feature-glyph svg,
.detail-glyph svg,
.page-motion-glyph svg,
.metric-glyph svg,
.project-glyph svg,
.process-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: none;
}

.metric-card::before,
.feature-card::before,
.detail-card-visual::before,
.project-card::before,
.process-step::before,
.entry-content .info-card::before,
.entry-content .contact-card::before,
.hero-panel .card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.3rem;
  background: linear-gradient(90deg, rgba(0, 142, 197, 0.95), rgba(107, 199, 235, 0.72));
  pointer-events: none;
}

.metric-card::after,
.feature-card::after,
.detail-card-visual::after,
.project-card::after,
.process-step::after,
.entry-content .info-card::after,
.entry-content .contact-card::after,
.hero-panel .card::after {
  content: "";
  position: absolute;
  top: -2.9rem;
  right: -2.4rem;
  width: 8.3rem;
  height: 8.3rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 142, 197, 0.16), rgba(107, 199, 235, 0));
  pointer-events: none;
}

.metric-card > *,
.feature-card > *,
.detail-card-visual > *,
.project-card > *,
.process-step > *,
.entry-content .info-card > *,
.entry-content .contact-card > *,
.hero-panel .card > * {
  position: relative;
  z-index: 1;
}

.feature-card h3,
.detail-card-visual h3,
.project-card h3,
.process-step h3 {
  position: relative;
  z-index: 1;
}

.feature-card-software {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(233, 246, 250, 0.72));
}

.feature-card-portal {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 246, 250, 0.72));
}

.feature-card-data {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 244, 249, 0.74));
}

.feature-card-ops {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(234, 245, 249, 0.72));
}

.detail-card-delphi,
.detail-card-modernize {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(232, 244, 249, 0.7));
}

.detail-card-csharp,
.detail-card-ux {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(236, 246, 250, 0.7));
}

.detail-card-database {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(231, 243, 248, 0.74));
}

.detail-card-head h3 {
  margin: 0;
}

.metric-card-head strong {
  margin: 0;
  font-size: 1rem;
  line-height: 1.35;
}

.metric-card span,
.project-card p,
.process-step p {
  position: relative;
  z-index: 1;
  max-width: 18.5rem;
}

.surface-section {
  background: linear-gradient(180deg, rgba(238, 243, 248, 0.68), rgba(244, 247, 251, 0));
}

.content-section,
.page-section {
  padding: 4.1rem 0;
}

.page-shell .page-section {
  padding-top: 2.15rem;
}

.hero-section-corporate + .content-section {
  padding-top: 2.6rem;
}

.page-section {
  background:
    radial-gradient(circle at 100% 0, var(--page-accent-soft), rgba(244, 247, 251, 0) 35%),
    linear-gradient(180deg, var(--page-accent-soft), rgba(244, 247, 251, 0) 20rem);
}

.section-head {
  max-width: 58rem;
  margin-bottom: 2rem;
}

.section-intro {
  position: sticky;
  top: 7rem;
}

.hero-panel {
  position: relative;
}

.hero-showcase {
  border-radius: calc(var(--site-radius) + 0.3rem);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(217, 226, 236, 0.9);
  overflow: hidden;
}

.hero-showcase-media {
  position: relative;
  min-height: 30rem;
  isolation: isolate;
  background:
    radial-gradient(circle at 84% 18%, rgba(115, 230, 255, 0.2), rgba(115, 230, 255, 0) 28%),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 20%),
    linear-gradient(160deg, #041d2b, #0a3448 46%, #0d6a90 100%);
}

.hero-motion-surface {
  position: absolute;
  inset: 0 0 8.8rem 0;
  z-index: 1;
  overflow: hidden;
}

.hero-motion-grid,
.hero-motion-glow,
.hero-motion-aurora,
.hero-motion-rings,
.hero-motion-lane,
.hero-motion-pulse {
  position: absolute;
  pointer-events: none;
}

.hero-motion-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 3.15rem 3.15rem;
  opacity: 0.28;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.96));
  animation: hero-motion-grid-drift 12s linear infinite;
}

.hero-motion-glow {
  border-radius: 50%;
  filter: blur(18px);
}

.hero-motion-glow-a {
  top: -8%;
  left: 12%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(94, 223, 255, 0.3), rgba(94, 223, 255, 0));
  animation: hero-motion-glow-float 10s infinite ease-in-out;
}

.hero-motion-glow-b {
  top: 12%;
  right: 4%;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, rgba(124, 240, 255, 0.28), rgba(124, 240, 255, 0));
  animation: hero-motion-glow-float 14s infinite ease-in-out reverse;
}

.hero-motion-glow-c {
  bottom: 10%;
  left: 24%;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.22), rgba(0, 210, 255, 0));
  animation: hero-motion-glow-float 12s infinite ease-in-out 1.2s;
}

.hero-motion-aurora {
  inset: auto;
  border-radius: 999px;
  filter: blur(10px);
  opacity: 0.45;
}

.hero-motion-aurora-a {
  top: 14%;
  left: -6%;
  width: 22rem;
  height: 3rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(114, 236, 255, 0.6), rgba(255, 255, 255, 0));
  transform: rotate(8deg);
  animation: hero-motion-aurora-sweep 11s infinite ease-in-out;
}

.hero-motion-aurora-b {
  top: 38%;
  right: -6%;
  width: 18rem;
  height: 2.8rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(146, 228, 255, 0.52), rgba(255, 255, 255, 0));
  transform: rotate(-14deg);
  animation: hero-motion-aurora-sweep 13s infinite ease-in-out reverse;
}

.hero-motion-rings {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.34;
}

.hero-motion-rings-a {
  width: 19rem;
  height: 19rem;
  top: 4%;
  right: 10%;
  animation: hero-motion-ring-spin 18s infinite linear;
}

.hero-motion-rings-b {
  width: 12rem;
  height: 12rem;
  top: 30%;
  left: 18%;
  animation: hero-motion-ring-spin 14s infinite linear reverse;
}

.hero-motion-lane {
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  opacity: 0.82;
}

.hero-motion-lane span {
  position: absolute;
  top: 50%;
  left: -18%;
  width: 24%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(124, 240, 255, 0.95), rgba(255, 255, 255, 0));
  transform: translateY(-50%);
  animation: hero-motion-lane-run 3.8s infinite ease-in-out;
}

.hero-motion-lane span:nth-child(2) {
  animation-delay: 1.1s;
}

.hero-motion-lane span:nth-child(3) {
  animation-delay: 2.2s;
}

.hero-motion-lane-a {
  top: 18%;
  left: 16%;
  width: 52%;
  transform: rotate(8deg);
}

.hero-motion-lane-b {
  top: 34%;
  left: 28%;
  width: 44%;
  transform: rotate(-14deg);
}

.hero-motion-lane-c {
  top: 50%;
  left: 14%;
  width: 48%;
  transform: rotate(4deg);
}

.hero-motion-cluster,
.hero-motion-node {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 0.45rem;
  color: #ffffff;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 48px rgba(5, 18, 26, 0.24);
}

.hero-motion-cluster {
  top: 13%;
  left: 12%;
  width: 15.5rem;
  padding: 1.1rem 1.15rem 1.2rem;
  border-radius: 1.5rem;
  background: rgba(8, 28, 40, 0.46);
  animation: hero-motion-card-float 9.5s infinite ease-in-out;
}

.hero-motion-cluster-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 1.8rem;
  padding: 0.25rem 0.7rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}

.hero-motion-cluster strong {
  font-size: 1.08rem;
  line-height: 1.28;
}

.hero-motion-cluster span:last-child {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.86rem;
  line-height: 1.55;
}

.hero-motion-node {
  width: 10.75rem;
  padding: 0.9rem 0.95rem 1rem;
  border-radius: 1.25rem;
  background: rgba(8, 27, 39, 0.36);
  animation: hero-motion-card-float 11s infinite ease-in-out;
}

.hero-motion-node strong {
  font-size: 0.96rem;
}

.hero-motion-node span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.45;
}

.hero-motion-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.85rem;
  height: 2.85rem;
  border-radius: 0.95rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.hero-motion-node-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.hero-motion-node-delphi {
  top: 12%;
  right: 10%;
}

.hero-motion-node-rest {
  top: 34%;
  right: 4%;
  animation-delay: 1.6s;
}

.hero-motion-node-arm {
  top: 48%;
  left: 22%;
  animation-delay: 2.8s;
}

.hero-motion-node-layer {
  top: 28%;
  left: 46%;
  animation-delay: 4s;
}

.hero-motion-pulse {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: #7cf0ff;
  box-shadow: 0 0 0 0 rgba(124, 240, 255, 0.38);
  animation: hero-motion-pulse-ring 4.8s infinite ease-out;
}

.hero-motion-pulse-a {
  top: 24%;
  left: 40%;
}

.hero-motion-pulse-b {
  top: 44%;
  left: 66%;
  animation-delay: 1.2s;
}

.hero-motion-pulse-c {
  top: 54%;
  left: 32%;
  animation-delay: 2.3s;
}

.hero-stage-bottom-fade {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  height: 10.5rem;
  background:
    linear-gradient(180deg, rgba(4, 22, 33, 0), rgba(4, 22, 33, 0.72) 42%, rgba(4, 22, 33, 0.92)),
    radial-gradient(circle at 22% 0, rgba(111, 233, 255, 0.16), rgba(111, 233, 255, 0));
  pointer-events: none;
}

.hero-stage-grid,
.hero-stage-beam,
.hero-stage-orbit,
.hero-stage-link,
.hero-stage-node {
  position: absolute;
  pointer-events: none;
}

.hero-stage-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  opacity: 0.36;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.92));
  animation: hero-stage-grid-shift 10s linear infinite;
}

.hero-stage-beam {
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  filter: blur(18px);
}

.hero-stage-beam-a {
  top: -18%;
  right: -10%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.4), rgba(0, 210, 255, 0));
  animation: hero-stage-beam-float 12s infinite ease-in-out;
}

.hero-stage-beam-b {
  left: -14%;
  bottom: -26%;
  background: radial-gradient(circle, rgba(118, 239, 255, 0.28), rgba(118, 239, 255, 0));
  animation: hero-stage-beam-float 15s infinite ease-in-out reverse;
}

.hero-stage-orbit {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  opacity: 0.38;
}

.hero-stage-orbit-a {
  width: 18rem;
  height: 18rem;
  top: 6%;
  right: 6%;
  animation: hero-stage-orbit-spin 18s infinite linear;
}

.hero-stage-orbit-b {
  width: 10rem;
  height: 10rem;
  bottom: 14%;
  left: 10%;
  animation: hero-stage-orbit-spin 12s infinite linear reverse;
}

.hero-stage-window {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 1.5rem;
  background: rgba(7, 24, 35, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 60px rgba(5, 17, 25, 0.32);
}

.hero-stage-window-main {
  inset: 12% 12% auto 10%;
  min-height: 15rem;
  animation: hero-stage-card-float 9s infinite ease-in-out;
}

.hero-stage-window-top {
  display: flex;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.06);
}

.hero-stage-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
}

.hero-stage-window-body {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1rem;
  padding: 1.2rem 1.2rem 1.4rem;
}

.hero-stage-bars {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.hero-stage-bar {
  display: block;
  height: 0.85rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(111, 233, 255, 0.85));
  animation: hero-stage-bar-pulse 5s infinite ease-in-out;
}

.hero-stage-bar-a {
  width: 78%;
}

.hero-stage-bar-b {
  width: 58%;
  animation-delay: 0.8s;
}

.hero-stage-bar-c {
  width: 88%;
  animation-delay: 1.6s;
}

.hero-stage-bar-d {
  width: 68%;
  animation-delay: 2.4s;
}

.hero-stage-flow {
  position: relative;
  min-height: 9rem;
  border-radius: 1.2rem;
  background: rgba(255, 255, 255, 0.05);
}

.hero-stage-node {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #7cf0ff;
  box-shadow: 0 0 0 0 rgba(124, 240, 255, 0.45);
  animation: hero-stage-node-pulse 4.6s infinite ease-out;
}

.hero-stage-node-a {
  top: 18%;
  left: 18%;
}

.hero-stage-node-b {
  top: 30%;
  right: 18%;
  animation-delay: 1.2s;
}

.hero-stage-node-c {
  bottom: 20%;
  left: 44%;
  animation-delay: 2.2s;
}

.hero-stage-link {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(124, 240, 255, 0.9), rgba(255, 255, 255, 0));
  opacity: 0.82;
  animation: hero-stage-link-sweep 4s infinite ease-in-out;
}

.hero-stage-link-a {
  width: 7rem;
  top: 34%;
  left: 24%;
  transform: rotate(-8deg);
}

.hero-stage-link-b {
  width: 6rem;
  bottom: 30%;
  left: 38%;
  transform: rotate(18deg);
  animation-delay: 1.3s;
}

.hero-stage-card {
  position: absolute;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: start;
  min-width: 13rem;
  padding: 0.95rem 1rem;
  border-radius: 1.2rem;
  background: rgba(8, 27, 39, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 42px rgba(4, 18, 26, 0.26);
  animation: hero-stage-card-float 11s infinite ease-in-out;
}

.hero-stage-card strong,
.hero-stage-card span {
  display: block;
}

.hero-stage-card strong {
  color: #ffffff;
  font-size: 0.95rem;
}

.hero-stage-card span:last-child {
  margin-top: 0.35rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.84rem;
  line-height: 1.5;
}

.hero-stage-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-stage-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.hero-stage-card-delphi {
  top: 11%;
  right: 10%;
}

.hero-stage-card-data {
  top: 48%;
  right: 8%;
  animation-delay: 1.6s;
}

.hero-stage-card-portal {
  bottom: 12%;
  left: 11%;
  animation-delay: 3.1s;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: hero-slide-rotate 18s infinite ease-in-out;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.02);
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(4, 22, 33, 0.1), rgba(4, 22, 33, 0.68)),
    linear-gradient(120deg, rgba(4, 22, 33, 0.55), rgba(4, 22, 33, 0.08));
}

.hero-slide-one {
  animation-delay: 0s;
}

.hero-slide-two {
  animation-delay: 6s;
}

.hero-slide-three {
  animation-delay: 12s;
}

.hero-showcase-sheen {
  position: absolute;
  inset: -20% auto auto -35%;
  width: 45%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0));
  transform: rotate(12deg);
  animation: hero-sheen 8s infinite ease-in-out;
  pointer-events: none;
  z-index: 2;
}

.hero-showcase-copy {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 1.6rem 1.6rem 1.8rem;
  color: #ffffff;
}

.hero-showcase-copy h2 {
  margin: 0.8rem 0 0;
  max-width: 26rem;
  font-size: clamp(1.65rem, 3vw, 2.55rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}

.hero-showcase-copy p:last-child {
  margin-top: 0.9rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
}

.hero-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.2rem;
}

.hero-showcase-grid .detail-card {
  background: rgba(255, 255, 255, 0.88);
}

.detail-card-accent {
  background: linear-gradient(180deg, rgba(0, 142, 197, 0.12), rgba(0, 142, 197, 0.05));
  border-color: rgba(0, 142, 197, 0.18);
}

.panel-glow {
  position: absolute;
  inset: -1.5rem -1rem auto auto;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 142, 197, 0.2), rgba(0, 142, 197, 0));
  pointer-events: none;
}

.shadow-site {
  box-shadow: var(--site-shadow);
}

.page-shell {
  min-height: 70vh;
  --page-accent: var(--site-blue);
  --page-accent-strong: var(--site-blue-strong);
  --page-accent-soft: rgba(0, 142, 197, 0.08);
  --page-accent-surface: rgba(0, 142, 197, 0.14);
  --page-accent-glow: rgba(0, 142, 197, 0.22);
}

.page-shell-leistungen,
.page-shell-theme-leistungen {
  --page-accent: #00a7cf;
  --page-accent-strong: #0a708c;
  --page-accent-soft: rgba(0, 167, 207, 0.1);
  --page-accent-surface: rgba(0, 167, 207, 0.16);
  --page-accent-glow: rgba(0, 167, 207, 0.24);
}

.page-shell-technologien,
.page-shell-theme-technologien {
  --page-accent: #1978cf;
  --page-accent-strong: #114f94;
  --page-accent-soft: rgba(25, 120, 207, 0.1);
  --page-accent-surface: rgba(25, 120, 207, 0.16);
  --page-accent-glow: rgba(25, 120, 207, 0.24);
}

.page-shell-projekte,
.page-shell-theme-projekte {
  --page-accent: #1097b2;
  --page-accent-strong: #14687b;
  --page-accent-soft: rgba(16, 151, 178, 0.1);
  --page-accent-surface: rgba(16, 151, 178, 0.16);
  --page-accent-glow: rgba(16, 151, 178, 0.24);
}

.page-shell-referenzen,
.page-shell-theme-referenzen,
.page-shell-theme-referenz-netscope,
.page-shell-theme-referenz-netnotdienst {
  --page-accent: #1da79a;
  --page-accent-strong: #155f61;
  --page-accent-soft: rgba(29, 167, 154, 0.1);
  --page-accent-surface: rgba(29, 167, 154, 0.16);
  --page-accent-glow: rgba(29, 167, 154, 0.24);
}

.page-shell-kontakt {
  --page-accent: #0a8aa5;
  --page-accent-strong: #0f6478;
  --page-accent-soft: rgba(10, 138, 165, 0.08);
  --page-accent-surface: rgba(10, 138, 165, 0.14);
  --page-accent-glow: rgba(10, 138, 165, 0.22);
}

.page-shell-impressum,
.page-shell-theme-impressum {
  --page-accent: #0f7896;
  --page-accent-strong: #145d72;
  --page-accent-soft: rgba(15, 120, 150, 0.08);
  --page-accent-surface: rgba(15, 120, 150, 0.14);
  --page-accent-glow: rgba(15, 120, 150, 0.22);
}

.page-shell-datenschutz,
.page-shell-theme-datenschutz {
  --page-accent: #0a5d76;
  --page-accent-strong: #104757;
  --page-accent-soft: rgba(10, 93, 118, 0.08);
  --page-accent-surface: rgba(10, 93, 118, 0.14);
  --page-accent-glow: rgba(10, 93, 118, 0.22);
}

.page-shell-ueber-uns,
.page-shell-theme-ueber-uns {
  --page-accent: #1c9b74;
  --page-accent-strong: #15594d;
  --page-accent-soft: rgba(28, 155, 116, 0.09);
  --page-accent-surface: rgba(28, 155, 116, 0.15);
  --page-accent-glow: rgba(28, 155, 116, 0.24);
}

.page-shell-faq,
.page-shell-theme-faq {
  --page-accent: #1ab48a;
  --page-accent-strong: #146754;
  --page-accent-soft: rgba(26, 180, 138, 0.1);
  --page-accent-surface: rgba(26, 180, 138, 0.16);
  --page-accent-glow: rgba(26, 180, 138, 0.24);
}

.page-shell-magazin,
.page-shell-theme-magazin {
  --page-accent: #116989;
  --page-accent-strong: #0f526b;
  --page-accent-soft: rgba(17, 105, 137, 0.08);
  --page-accent-surface: rgba(17, 105, 137, 0.14);
  --page-accent-glow: rgba(17, 105, 137, 0.22);
}

.page-shell-theme-magazin-data {
  --page-accent: #005d80;
  --page-accent-strong: #0c4961;
  --page-accent-soft: rgba(0, 93, 128, 0.08);
  --page-accent-surface: rgba(0, 93, 128, 0.14);
  --page-accent-glow: rgba(0, 93, 128, 0.22);
}

.page-shell-theme-magazin-portal {
  --page-accent: #0e7598;
  --page-accent-strong: #12596f;
  --page-accent-soft: rgba(14, 117, 152, 0.08);
  --page-accent-surface: rgba(14, 117, 152, 0.14);
  --page-accent-glow: rgba(14, 117, 152, 0.22);
}

.page-shell-theme-magazin-modernisierung {
  --page-accent: #0c6b8d;
  --page-accent-strong: #125569;
  --page-accent-soft: rgba(12, 107, 141, 0.08);
  --page-accent-surface: rgba(12, 107, 141, 0.14);
  --page-accent-glow: rgba(12, 107, 141, 0.22);
}

.page-shell,
.front-section {
  --section-divider-accent: var(--page-accent, var(--site-blue));
  --section-divider-glow: var(--page-accent-glow, rgba(0, 142, 197, 0.22));
  --section-divider-soft: var(--page-accent-soft, rgba(0, 142, 197, 0.08));
}

.front-section-scope {
  --section-divider-accent: #00a7cf;
  --section-divider-glow: rgba(0, 167, 207, 0.24);
  --section-divider-soft: rgba(0, 167, 207, 0.08);
}

.front-section-tech {
  --section-divider-accent: #1978cf;
  --section-divider-glow: rgba(25, 120, 207, 0.24);
  --section-divider-soft: rgba(25, 120, 207, 0.08);
}

.front-section-modernize {
  --section-divider-accent: #0c8eaa;
  --section-divider-glow: rgba(12, 142, 170, 0.24);
  --section-divider-soft: rgba(12, 142, 170, 0.08);
}

.front-section-projects {
  --section-divider-accent: #1097b2;
  --section-divider-glow: rgba(16, 151, 178, 0.24);
  --section-divider-soft: rgba(16, 151, 178, 0.08);
}

.front-section-process {
  --section-divider-accent: #0f8a9d;
  --section-divider-glow: rgba(15, 138, 157, 0.22);
  --section-divider-soft: rgba(15, 138, 157, 0.08);
}

.front-section-cta {
  --section-divider-accent: #0b7aaa;
  --section-divider-glow: rgba(11, 122, 170, 0.22);
  --section-divider-soft: rgba(11, 122, 170, 0.08);
}

.page-content-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 3vw, 2.6rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94)),
    linear-gradient(140deg, var(--page-accent-soft), rgba(255, 255, 255, 0));
  border-color: var(--page-accent-surface);
}

.page-content-card::before,
.page-content-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-content-card::before {
  inset: -4rem -4rem auto auto;
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  background: radial-gradient(circle, var(--page-accent-glow), rgba(255, 255, 255, 0));
}

.page-content-card::after {
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), var(--page-accent-soft));
  opacity: 0.8;
}

.page-shell-theme-leistungen .page-content-card::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0), var(--page-accent-soft));
}

.page-shell-theme-technologien .page-content-card::after {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 34%),
    repeating-linear-gradient(90deg, rgba(25, 120, 207, 0.05), rgba(25, 120, 207, 0.05) 1px, transparent 1px, transparent 22px);
}

.page-shell-theme-projekte .page-content-card::after {
  background:
    radial-gradient(circle at 86% 18%, var(--page-accent-glow), rgba(255, 255, 255, 0) 26%),
    linear-gradient(140deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 34%);
}

.page-shell-theme-referenzen .page-content-card::after,
.page-shell-theme-referenz-netscope .page-content-card::after,
.page-shell-theme-referenz-netnotdienst .page-content-card::after {
  background:
    radial-gradient(circle at 88% 18%, rgba(129, 245, 232, 0.24), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 12% 82%, rgba(255, 193, 145, 0.12), rgba(255, 255, 255, 0) 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 34%);
}

.page-shell-theme-faq .page-content-card::after {
  background:
    radial-gradient(circle at 84% 18%, rgba(118, 255, 198, 0.24), rgba(255, 255, 255, 0) 24%),
    radial-gradient(circle at 14% 82%, rgba(114, 234, 255, 0.14), rgba(255, 255, 255, 0) 26%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 34%);
}

.page-content-card > * {
  position: relative;
  z-index: 1;
}

.page-content-card.has-featured-visual {
  isolation: isolate;
}

.page-content-card.has-featured-visual .page-content-head,
.page-content-card.has-featured-visual .single-meta,
.page-content-card.has-featured-visual .entry-content {
  max-width: 100%;
}

.page-content-head {
  max-width: 72rem;
  margin-bottom: 1.5rem;
}

.page-content-head .eyebrow {
  margin-bottom: 0.55rem;
}

.page-content-head h2 {
  margin: 0;
  color: var(--page-accent-strong);
  font-size: clamp(1.58rem, 2.85vw, 2.34rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.page-overview-visual {
  --overview-soft-a: rgba(225, 247, 255, 0.98);
  --overview-soft-b: rgba(255, 246, 225, 0.94);
  --overview-soft-c: rgba(231, 255, 244, 0.76);
  --overview-line: rgba(15, 23, 42, 0.08);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(18rem, 0.92fr);
  align-items: center;
  gap: clamp(1rem, 2vw, 1.75rem);
  min-height: clamp(12.5rem, 18vw, 14.8rem);
  margin: 0 0 1.55rem;
  padding: clamp(1.2rem, 2.4vw, 1.7rem);
  overflow: hidden;
  border-radius: calc(var(--site-radius) + 0.1rem);
  border: 1px solid rgba(214, 224, 234, 0.96);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.88) 52%, rgba(248, 252, 255, 0.96)),
    linear-gradient(140deg, var(--overview-soft-a), var(--overview-soft-b) 52%, var(--overview-soft-c));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.1);
}

.page-overview-visual-leistungen {
  --overview-soft-a: rgba(225, 250, 255, 0.98);
  --overview-soft-b: rgba(255, 244, 219, 0.95);
  --overview-soft-c: rgba(233, 255, 249, 0.76);
}

.page-overview-visual-technologien {
  --overview-soft-a: rgba(232, 242, 255, 0.98);
  --overview-soft-b: rgba(239, 249, 255, 0.95);
  --overview-soft-c: rgba(232, 255, 247, 0.74);
}

.page-overview-visual-projekte {
  --overview-soft-a: rgba(228, 248, 252, 0.98);
  --overview-soft-b: rgba(255, 247, 230, 0.95);
  --overview-soft-c: rgba(233, 255, 246, 0.74);
}

.page-overview-visual-kontakt,
.page-overview-visual-support {
  --overview-soft-a: rgba(230, 249, 253, 0.98);
  --overview-soft-b: rgba(236, 255, 249, 0.95);
  --overview-soft-c: rgba(255, 247, 230, 0.72);
}

.page-overview-visual-impressum {
  --overview-soft-a: rgba(233, 244, 255, 0.98);
  --overview-soft-b: rgba(242, 250, 255, 0.95);
  --overview-soft-c: rgba(234, 255, 248, 0.72);
}

.page-overview-visual-datenschutz {
  --overview-soft-a: rgba(232, 250, 247, 0.98);
  --overview-soft-b: rgba(237, 246, 255, 0.95);
  --overview-soft-c: rgba(255, 247, 232, 0.72);
}

.page-overview-visual-referenzen,
.page-overview-visual-referenz-netscope,
.page-overview-visual-referenz-netnotdienst {
  --overview-soft-a: rgba(255, 241, 230, 0.98);
  --overview-soft-b: rgba(255, 248, 238, 0.95);
  --overview-soft-c: rgba(255, 232, 227, 0.74);
}

.page-overview-wash,
.page-overview-grid {
  position: absolute;
  pointer-events: none;
}

.page-overview-wash {
  border-radius: 50%;
  filter: blur(10px);
}

.page-overview-wash-a {
  top: -22%;
  left: -4%;
  width: 14rem;
  height: 14rem;
  background: radial-gradient(circle, var(--page-accent-glow), rgba(255, 255, 255, 0));
  opacity: 0.72;
}

.page-overview-wash-b {
  right: -5%;
  bottom: -34%;
  width: 16rem;
  height: 16rem;
  background: radial-gradient(circle, rgba(255, 229, 190, 0.76), rgba(255, 255, 255, 0));
  opacity: 0.82;
}

.page-overview-grid {
  inset: 0;
  background-image:
    linear-gradient(var(--overview-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--overview-line) 1px, transparent 1px);
  background-size: 2.8rem 2.8rem;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.46) 64%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.5;
}

.page-overview-copy,
.page-overview-stack {
  position: relative;
  z-index: 1;
}

.page-overview-copy {
  max-width: 34rem;
}

.page-overview-kicker {
  margin: 0;
  color: var(--page-accent-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.page-overview-title {
  margin: 0.5rem 0 0;
  max-width: 28rem;
  color: #15374a;
  font-size: clamp(1.08rem, 1.8vw, 1.52rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.page-overview-tracks {
  display: grid;
  gap: 0.52rem;
  width: min(18rem, 100%);
  margin-top: 1rem;
}

.page-overview-track {
  display: block;
  height: 0.52rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--page-accent), rgba(255, 255, 255, 0));
  opacity: 0.84;
}

.page-overview-track-a {
  width: 84%;
}

.page-overview-track-b {
  width: 62%;
}

.page-overview-track-c {
  width: 74%;
}

.page-overview-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1rem;
}

.page-overview-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.8rem;
  padding: 0.26rem 0.72rem;
  border-radius: 999px;
  color: var(--page-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.page-overview-stack {
  display: grid;
  gap: 0.78rem;
}

.page-overview-node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: center;
  padding: 0.82rem 0.9rem;
  border-radius: 1.18rem;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
}

.page-overview-node-2 {
  margin-left: clamp(0.9rem, 3vw, 1.8rem);
}

.page-overview-node-3 {
  margin-left: clamp(1.6rem, 5vw, 3rem);
}

.page-overview-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  color: var(--page-accent-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.54));
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.page-overview-node-icon svg {
  width: 1.52rem;
  height: 1.52rem;
}

.page-overview-node-copy strong,
.page-overview-node-copy span {
  display: block;
}

.page-overview-node-copy strong {
  color: #173749;
  font-size: 0.92rem;
  line-height: 1.28;
}

.page-overview-node-copy span {
  margin-top: 0.26rem;
  color: #536678;
  font-size: 0.78rem;
  line-height: 1.46;
}

.featured-visual {
  position: relative;
  overflow: hidden;
  margin: 0 0 1.7rem;
  border-radius: calc(var(--site-radius) + 0.2rem);
  border: 1px solid rgba(214, 224, 234, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(8, 145, 178, 0.04));
  box-shadow: 0 28px 54px rgba(15, 23, 42, 0.16);
}

.featured-visual::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 250, 252, 0.16));
}

.page-content-card.has-featured-visual .featured-visual {
  position: relative;
  inset: auto;
  width: 100%;
  height: clamp(7rem, 12vw, 9rem);
  margin: 0 0 1.35rem;
  border: 1px solid rgba(214, 224, 234, 0.92);
  border-radius: calc(var(--site-radius) + 0.05rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(13, 110, 253, 0.08), rgba(8, 145, 178, 0.04));
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
  opacity: 1;
  pointer-events: none;
  z-index: 1;
}

.page-content-card.has-featured-visual .featured-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 45%),
    radial-gradient(circle at 82% 34%, rgba(16, 151, 178, 0.14), rgba(16, 151, 178, 0) 24%);
  z-index: 1;
}

.page-content-card.has-featured-visual .featured-visual::after {
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(248, 250, 252, 0.22));
  z-index: 2;
}

.page-content-card.has-featured-visual .featured-visual-page,
.page-content-card.has-featured-visual .featured-visual-post {
  aspect-ratio: auto;
}

.page-content-card.has-featured-visual .featured-visual-post {
  max-width: none;
  margin-inline: 0;
}

.featured-visual-page {
  aspect-ratio: 16 / 7.2;
}

.featured-visual-post {
  aspect-ratio: 16 / 8.2;
  max-width: 52rem;
  margin-inline: auto;
}

.featured-visual-image,
.archive-entry-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-content-card.has-featured-visual .featured-visual-image {
  filter: saturate(0.92) contrast(0.96) brightness(0.98);
  transform: scale(1.03);
  object-position: center center;
}

.page-motion-hero {
  position: relative;
  overflow: hidden;
  padding: 0 0 1.6rem;
}

.page-motion-band {
  --page-hero-height: clamp(39rem, 45vw, 43rem);
  position: relative;
  height: var(--page-hero-height);
  min-height: var(--page-hero-height);
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(circle at top right, rgba(0, 142, 197, 0.35), rgba(0, 142, 197, 0) 35%),
    linear-gradient(135deg, #082434, #0a4866 55%, #0b7aaa 100%);
  isolation: isolate;
}

.page-motion-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 82% 22%, rgba(116, 231, 255, 0.14), rgba(116, 231, 255, 0) 22%),
    linear-gradient(180deg, rgba(5, 22, 32, 0.08), rgba(5, 22, 32, 0.36));
  z-index: -3;
}

.page-motion-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 32%),
    linear-gradient(180deg, rgba(8, 20, 28, 0.04), rgba(8, 20, 28, 0.28)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.018) 1px, transparent 1px, transparent 10px);
  z-index: -2;
  animation: page-band-overlay-shift 16s linear infinite;
}

.page-motion-grid,
.page-motion-beam,
.page-motion-pulse {
  position: absolute;
  pointer-events: none;
}

.page-motion-grid {
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.11) 1px, transparent 1px);
  background-size: 3.25rem 3.25rem;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.92));
  opacity: 0.42;
  animation: page-grid-shift 11s linear infinite;
}

.page-motion-beam {
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0.58;
}

.page-motion-beam-a {
  top: -18%;
  right: -8%;
  background: radial-gradient(circle, rgba(0, 210, 255, 0.34), rgba(0, 210, 255, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.page-motion-beam-b {
  bottom: -25%;
  left: -10%;
  background: radial-gradient(circle, rgba(116, 231, 255, 0.3), rgba(116, 231, 255, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.page-motion-pulse {
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  opacity: 0.48;
}

.page-motion-pulse-a {
  top: 18%;
  right: 16%;
  animation: pulse-ring 6s infinite ease-out;
}

.page-motion-pulse-b {
  bottom: 16%;
  left: 18%;
  animation: pulse-ring 7s infinite ease-out 1.2s;
}

.page-motion-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title"
    "copy"
    "."
    "chips"
    "panels";
  align-content: stretch;
  gap: 1rem;
  box-sizing: border-box;
  padding-top: 1.65rem;
  padding-bottom: 1.2rem;
}

.page-motion-titleblock {
  grid-area: title;
  max-width: 58rem;
}

.page-motion-titleblock .eyebrow {
  margin-bottom: 0.82rem;
}

.page-motion-titleblock h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
  max-width: 58rem;
  text-wrap: balance;
}

.page-motion-intro {
  max-width: 42rem;
  color: rgba(255, 255, 255, 0.76);
}

.page-motion-copy {
  grid-area: copy;
  max-width: 44rem;
  margin-top: 0;
}

.page-motion-copy.page-motion-copy-compact h2 {
  margin-top: 0;
}

.page-motion-eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-motion-copy h2 {
  margin: 0.85rem 0 0;
  max-width: 37rem;
  font-size: clamp(1.68rem, 2.9vw, 2.5rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}

.page-motion-chips {
  grid-area: chips;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-width: 44rem;
  margin-top: 0;
  align-self: start;
  transform: translateY(2.35rem);
}

.page-motion-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.45rem;
  padding: 0.42rem 0.98rem;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  line-height: 1;
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.page-motion-panels {
  display: grid;
  grid-area: panels;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  max-width: min(53rem, 100%);
  margin-top: 0;
  align-self: end;
}

.page-motion-panel {
  padding: 0.95rem 1rem 1rem;
  border-radius: 1.15rem;
  background: rgba(8, 27, 39, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 40px rgba(5, 18, 27, 0.22);
  animation: motion-panel-float 8s infinite ease-in-out;
}

.page-motion-panel:nth-child(2) {
  animation-delay: 1.8s;
}

.page-motion-panel:nth-child(3) {
  animation-delay: 3.6s;
}

.page-motion-glyph {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.88rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.page-motion-panel h3 {
  margin: 0.8rem 0 0;
  font-size: 0.97rem;
}

.page-motion-panel p {
  margin: 0.58rem 0 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}

.page-motion-band-leistungen {
  background:
    radial-gradient(circle at 86% 18%, rgba(142, 247, 255, 0.4), rgba(142, 247, 255, 0) 32%),
    linear-gradient(135deg, #041722, #0a3e55 50%, #00a7cf 100%);
}

.page-motion-band-technologien {
  background:
    radial-gradient(circle at top right, rgba(132, 180, 255, 0.34), rgba(132, 180, 255, 0) 35%),
    linear-gradient(135deg, #061a30, #0b3760 52%, #1978cf 100%);
}

.page-motion-band-faq {
  background:
    radial-gradient(circle at 13% 14%, rgba(126, 255, 202, 0.28), rgba(126, 255, 202, 0) 30%),
    radial-gradient(circle at 82% 15%, rgba(108, 240, 255, 0.3), rgba(108, 240, 255, 0) 31%),
    radial-gradient(circle at 74% 78%, rgba(118, 255, 187, 0.26), rgba(118, 255, 187, 0) 30%),
    radial-gradient(circle at 30% 86%, rgba(102, 255, 214, 0.18), rgba(102, 255, 214, 0) 28%),
    linear-gradient(140deg, #0f2d28, #116b57 42%, #1ab48a 72%, #5ddcb6 100%);
}

.page-motion-band-projekte {
  background:
    radial-gradient(circle at top right, rgba(142, 246, 231, 0.3), rgba(142, 246, 231, 0) 35%),
    linear-gradient(135deg, #08212d, #0c5061 52%, #1097b2 100%);
}

.page-motion-band-referenzen {
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 205, 156, 0.24), rgba(255, 205, 156, 0) 28%),
    radial-gradient(circle at 86% 18%, rgba(123, 255, 232, 0.28), rgba(123, 255, 232, 0) 30%),
    linear-gradient(135deg, #152838, #1d5363 48%, #1da79a 100%);
}

.page-motion-band-kontakt {
  background:
    radial-gradient(circle at top right, rgba(128, 235, 255, 0.3), rgba(128, 235, 255, 0) 34%),
    linear-gradient(135deg, #081f2c, #0b3e57 48%, #0b7c9d 100%);
}

.page-motion-band-magazin {
  background:
    radial-gradient(circle at top right, rgba(105, 234, 255, 0.28), rgba(105, 234, 255, 0) 35%),
    linear-gradient(135deg, #081f2d, #0d3b52 48%, #116989 100%);
}

.page-motion-band-magazin-data {
  background:
    radial-gradient(circle at top right, rgba(123, 242, 255, 0.34), rgba(123, 242, 255, 0) 34%),
    linear-gradient(135deg, #071c28, #0a3043 48%, #005d80 100%);
}

.page-motion-band-magazin-portal {
  background:
    radial-gradient(circle at top right, rgba(94, 223, 255, 0.3), rgba(94, 223, 255, 0) 32%),
    linear-gradient(135deg, #081f2f, #0d425b 48%, #0e7598 100%);
}

.page-motion-band-csharp-services {
  background:
    radial-gradient(circle at 16% 14%, rgba(124, 181, 255, 0.3), rgba(124, 181, 255, 0) 30%),
    radial-gradient(circle at 84% 16%, rgba(132, 255, 204, 0.28), rgba(132, 255, 204, 0) 28%),
    radial-gradient(circle at 72% 78%, rgba(88, 228, 255, 0.2), rgba(88, 228, 255, 0) 26%),
    linear-gradient(140deg, #101737, #17346c 46%, #128891 76%, #6fca56 100%);
}

.page-motion-band-unternehmenssoftware {
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 208, 127, 0.34), rgba(255, 208, 127, 0) 28%),
    radial-gradient(circle at 86% 14%, rgba(122, 244, 223, 0.3), rgba(122, 244, 223, 0) 28%),
    radial-gradient(circle at 70% 82%, rgba(255, 134, 111, 0.22), rgba(255, 134, 111, 0) 28%),
    linear-gradient(145deg, #16263f, #136073 42%, #1aa693 72%, #ff9466 100%);
}

.page-motion-band-multiplattform {
  background:
    radial-gradient(circle at 14% 14%, rgba(110, 198, 255, 0.32), rgba(110, 198, 255, 0) 30%),
    radial-gradient(circle at 84% 18%, rgba(130, 255, 200, 0.28), rgba(130, 255, 200, 0) 28%),
    radial-gradient(circle at 76% 80%, rgba(214, 255, 111, 0.2), rgba(214, 255, 111, 0) 28%),
    linear-gradient(140deg, #112345, #1b5594 42%, #08a8a1 74%, #9fd742 100%);
}

.page-motion-band-serviceflow {
  background:
    radial-gradient(circle at 14% 16%, rgba(188, 154, 255, 0.32), rgba(188, 154, 255, 0) 28%),
    radial-gradient(circle at 84% 14%, rgba(103, 232, 249, 0.28), rgba(103, 232, 249, 0) 30%),
    radial-gradient(circle at 74% 80%, rgba(255, 122, 198, 0.2), rgba(255, 122, 198, 0) 28%),
    linear-gradient(145deg, #241447, #4d36a2 44%, #1681b8 74%, #0ec5a6 100%);
}

.page-motion-band-schnittstellen {
  background:
    radial-gradient(circle at 16% 16%, rgba(255, 216, 112, 0.34), rgba(255, 216, 112, 0) 28%),
    radial-gradient(circle at 86% 18%, rgba(255, 146, 176, 0.28), rgba(255, 146, 176, 0) 28%),
    radial-gradient(circle at 70% 80%, rgba(126, 182, 255, 0.22), rgba(126, 182, 255, 0) 26%),
    linear-gradient(145deg, #2c1f4d, #6e3279 42%, #d55f6b 74%, #ffb55b 100%);
}

.page-motion-band-magazin-modernisierung {
  background:
    radial-gradient(circle at top right, rgba(140, 229, 255, 0.28), rgba(140, 229, 255, 0) 34%),
    linear-gradient(135deg, #091f30, #0b3850 48%, #0c6b8d 100%);
}

.page-motion-band-impressum {
  background:
    radial-gradient(circle at top right, rgba(150, 236, 255, 0.3), rgba(150, 236, 255, 0) 34%),
    linear-gradient(135deg, #081b29, #0d3551 48%, #0f7896 100%);
}

.page-motion-band-datenschutz {
  background:
    radial-gradient(circle at top right, rgba(126, 255, 224, 0.26), rgba(126, 255, 224, 0) 34%),
    linear-gradient(135deg, #081b28, #0a3046 48%, #0a5d76 100%);
}

.page-motion-band-ueber-uns {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 216, 152, 0.26), rgba(255, 216, 152, 0) 28%),
    radial-gradient(circle at 84% 18%, rgba(151, 255, 219, 0.22), rgba(151, 255, 219, 0) 30%),
    linear-gradient(135deg, #10263a, #1d5665 46%, #2b815f 76%, #efb367 100%);
}

.page-motion-band-leistungen .page-motion-chip,
.page-motion-band-leistungen .page-motion-panel,
.page-motion-band-leistungen .scene-badge {
  border-color: rgba(142, 247, 255, 0.24);
}

.page-motion-band-leistungen .page-motion-panel,
.page-motion-band-leistungen .scene-badge {
  background: rgba(6, 31, 44, 0.46);
}

.page-motion-band-technologien .page-motion-chip,
.page-motion-band-technologien .page-motion-panel,
.page-motion-band-technologien .scene-badge {
  border-color: rgba(132, 180, 255, 0.24);
}

.page-motion-band-technologien .page-motion-panel,
.page-motion-band-technologien .scene-badge {
  background: rgba(8, 25, 54, 0.44);
}

.page-motion-band-faq .page-motion-chip,
.page-motion-band-faq .page-motion-panel,
.page-motion-band-faq .scene-badge {
  border-color: rgba(144, 255, 205, 0.28);
}

.page-motion-band-faq .page-motion-panel,
.page-motion-band-faq .scene-badge {
  background: rgba(7, 53, 43, 0.46);
}

.page-motion-band-projekte .page-motion-chip,
.page-motion-band-projekte .page-motion-panel,
.page-motion-band-projekte .scene-badge {
  border-color: rgba(142, 246, 231, 0.22);
}

.page-motion-band-projekte .page-motion-panel,
.page-motion-band-projekte .scene-badge {
  background: rgba(7, 35, 45, 0.44);
}

.page-motion-band-referenzen .page-motion-chip,
.page-motion-band-referenzen .page-motion-panel,
.page-motion-band-referenzen .scene-badge {
  border-color: rgba(154, 255, 234, 0.24);
}

.page-motion-band-referenzen .page-motion-panel,
.page-motion-band-referenzen .scene-badge {
  background: rgba(12, 42, 49, 0.48);
}

.page-motion-band-kontakt .page-motion-chip,
.page-motion-band-kontakt .page-motion-panel,
.page-motion-band-kontakt .scene-badge {
  border-color: rgba(128, 235, 255, 0.22);
}

.page-motion-band-kontakt .page-motion-panel,
.page-motion-band-kontakt .scene-badge {
  background: rgba(7, 31, 46, 0.46);
}

.page-motion-band-impressum .page-motion-chip,
.page-motion-band-impressum .page-motion-panel,
.page-motion-band-impressum .scene-badge {
  border-color: rgba(150, 236, 255, 0.22);
}

.page-motion-band-impressum .page-motion-panel,
.page-motion-band-impressum .scene-badge {
  background: rgba(8, 31, 46, 0.46);
}

.page-motion-band-datenschutz .page-motion-chip,
.page-motion-band-datenschutz .page-motion-panel,
.page-motion-band-datenschutz .scene-badge {
  border-color: rgba(126, 255, 224, 0.2);
}

.page-motion-band-datenschutz .page-motion-panel,
.page-motion-band-datenschutz .scene-badge {
  background: rgba(8, 29, 41, 0.48);
}

.page-motion-band-ueber-uns .page-motion-chip,
.page-motion-band-ueber-uns .page-motion-panel,
.page-motion-band-ueber-uns .scene-badge {
  border-color: rgba(151, 255, 219, 0.24);
}

.page-motion-band-ueber-uns .page-motion-panel,
.page-motion-band-ueber-uns .scene-badge {
  background: rgba(9, 36, 43, 0.48);
}

.page-motion-band-ueber-uns .scene-path {
  left: 41%;
  top: 44%;
  right: auto;
  bottom: auto;
  translate: 0 -1.5rem;
  height: 0.2rem;
  border-radius: 999px;
  transform-origin: left center;
  background:
    linear-gradient(90deg, rgba(255, 244, 214, 0), rgba(255, 244, 214, 0.94) 20%, rgba(255, 214, 130, 0.84) 54%, rgba(151, 255, 219, 0.18) 100%);
  box-shadow:
    0 0 14px rgba(255, 217, 136, 0.34),
    0 0 28px rgba(255, 217, 136, 0.16);
  opacity: 0.66;
  z-index: 1;
  mix-blend-mode: screen;
}

.page-motion-band-ueber-uns .scene-path::after {
  content: "";
  position: absolute;
  inset: -0.26rem -0.5rem;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(255, 245, 220, 0), rgba(255, 231, 170, 0.62), rgba(255, 245, 220, 0));
  filter: blur(4px);
  opacity: 0.78;
  animation: about-sunray-glow 5.6s infinite ease-in-out;
}

.page-motion-band-ueber-uns .scene-path-a {
  width: 10.8rem;
  transform: rotate(-150deg);
  animation: scene-path-flow 6.4s infinite linear;
}

.page-motion-band-ueber-uns .scene-path-b {
  width: 10.1rem;
  transform: rotate(-28deg);
  animation: scene-path-flow 7.1s infinite linear reverse;
}

.page-motion-band-ueber-uns .scene-path-c {
  width: 8.6rem;
  transform: rotate(38deg);
  animation: scene-path-flow 6.8s infinite linear;
}

.page-motion-band-scene-ueber-uns .page-motion-overlay {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "title"
    "copy"
    "chips"
    "."
    "panels";
}

.page-motion-band-scene-ueber-uns .page-motion-chips {
  max-width: 46rem;
  margin-top: 0.25rem;
  transform: none;
}

.page-motion-band-ueber-uns .scene-badge {
  z-index: 3;
  translate: 0 -1.5rem;
}

.page-motion-scanline {
  position: absolute;
  left: -8%;
  right: -8%;
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(122, 235, 255, 0.9), rgba(255, 255, 255, 0));
  box-shadow: 0 0 18px rgba(122, 235, 255, 0.4);
  opacity: 0.34;
  pointer-events: none;
}

.page-motion-scanline-a {
  top: 28%;
  animation: scanline-sweep 11s infinite linear;
}

.page-motion-scanline-b {
  top: 66%;
  animation: scanline-sweep 15s infinite linear reverse;
}

.page-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.scene-ring,
.scene-path,
.scene-badge {
  position: absolute;
  pointer-events: none;
}

.scene-ring {
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  opacity: 0.38;
}

.scene-ring-a {
  width: 28rem;
  height: 28rem;
  right: -6rem;
  top: -7rem;
  animation: scene-ring-drift 9s infinite ease-in-out;
}

.scene-ring-b {
  width: 18rem;
  height: 18rem;
  left: -4rem;
  bottom: -4rem;
  animation: scene-ring-drift 11s infinite ease-in-out reverse;
}

.scene-path {
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(116, 231, 255, 0.72), rgba(255, 255, 255, 0));
  opacity: 0.52;
}

.scene-path-a {
  width: 15rem;
  top: 34%;
  right: 17%;
  transform: rotate(-14deg);
  animation: scene-path-flow 6s infinite linear;
}

.scene-path-b {
  width: 18rem;
  bottom: 24%;
  left: 20%;
  transform: rotate(18deg);
  animation: scene-path-flow 7s infinite linear reverse;
}

.scene-badge {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 4.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1.2rem;
  background: rgba(8, 27, 39, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px);
  box-shadow: 0 22px 45px rgba(4, 18, 26, 0.22);
}

.scene-badge-core {
  justify-content: center;
  min-height: 3.6rem;
  padding: 0.72rem 1.25rem;
  border-radius: 999px;
  background: rgba(4, 30, 42, 0.58);
  border-color: rgba(142, 247, 255, 0.26);
  box-shadow:
    0 18px 38px rgba(4, 18, 26, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  z-index: 2;
}

.scene-badge-core .scene-badge-label {
  color: #ffffff;
  font-size: 0.84rem;
  letter-spacing: 0.14em;
}

.privacy-hub {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.privacy-core {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 8.8rem;
  height: 8.8rem;
  margin: -4.4rem 0 0 -4.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.95rem;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: radial-gradient(circle, rgba(118, 255, 224, 0.34), rgba(5, 29, 38, 0.82));
  border: 1px solid rgba(126, 255, 224, 0.24);
  box-shadow: 0 28px 54px rgba(7, 17, 44, 0.24);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.privacy-connector {
  position: absolute;
  top: 46%;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(126, 255, 224, 0.9), rgba(255, 255, 255, 0));
  opacity: 0.72;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.privacy-connector-a {
  width: 7.8rem;
  transform: rotate(-34deg);
}

.privacy-connector-b {
  width: 7rem;
  transform: rotate(183deg);
  animation-delay: 1s;
}

.privacy-connector-c {
  width: 7.4rem;
  transform: rotate(44deg);
  animation-delay: 2s;
}

.page-motion-visual-ueber-uns {
  position: relative;
  min-height: 23rem;
}

.page-scene-ueber-uns {
  position: relative;
  width: 100%;
  height: 100%;
}

.about-sun {
  position: absolute;
  top: 12%;
  right: 11%;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255, 245, 214, 0.98), rgba(255, 202, 122, 0.9) 48%, rgba(255, 202, 122, 0.08) 82%);
  box-shadow: 0 0 44px rgba(255, 190, 110, 0.34);
  z-index: 0;
}

.about-hill {
  position: absolute;
  bottom: -16%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 0;
}

.about-hill-a {
  left: -6%;
  width: 38%;
  height: 27%;
  background: linear-gradient(180deg, rgba(88, 155, 119, 0.96), rgba(20, 71, 62, 0.98));
}

.about-hill-b {
  left: 22%;
  width: 47%;
  height: 35%;
  background: linear-gradient(180deg, rgba(107, 179, 125, 0.95), rgba(21, 83, 60, 0.98));
}

.about-hill-c {
  right: -4%;
  width: 42%;
  height: 31%;
  background: linear-gradient(180deg, rgba(51, 121, 97, 0.96), rgba(14, 53, 56, 0.98));
}

.about-forest {
  position: absolute;
  right: 14%;
  bottom: 15%;
  display: flex;
  align-items: end;
  gap: 0.95rem;
  z-index: 1;
}

.about-tree {
  position: relative;
  width: 0.95rem;
  height: 3rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(111, 74, 46, 0.82), rgba(64, 40, 28, 0.96));
  box-shadow: 0 8px 16px rgba(8, 20, 28, 0.18);
}

.about-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.55rem;
  width: 2.45rem;
  height: 2.45rem;
  margin-left: -1.225rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(219, 255, 228, 0.98), rgba(62, 143, 97, 0.96) 70%);
  box-shadow: 0 10px 22px rgba(22, 65, 56, 0.18);
}

.about-tree-b {
  height: 3.5rem;
}

.about-tree-b::before {
  width: 2.9rem;
  height: 2.9rem;
  margin-left: -1.45rem;
}

.about-tree-c {
  height: 2.7rem;
}

.about-tree-c::before {
  width: 2.1rem;
  height: 2.1rem;
  margin-left: -1.05rem;
}

.about-tree-d {
  height: 3.3rem;
}

.about-tree-d::before {
  width: 2.7rem;
  height: 2.7rem;
  margin-left: -1.35rem;
}

.about-core {
  position: absolute;
  top: 44%;
  left: 41%;
  width: 13.6rem;
  translate: 0 -1.5rem;
  transform: translate(-50%, -50%);
  padding: 1.05rem 1.1rem 1.1rem;
  border-radius: 1.65rem;
  display: grid;
  gap: 0.45rem;
  color: #ffffff;
  background:
    linear-gradient(160deg, rgba(10, 38, 43, 0.9), rgba(20, 84, 72, 0.88)),
    radial-gradient(circle at 22% 18%, rgba(255, 231, 177, 0.18), rgba(255, 231, 177, 0) 42%);
  border: 1px solid rgba(160, 255, 219, 0.22);
  box-shadow: 0 28px 54px rgba(7, 21, 30, 0.24);
  backdrop-filter: blur(14px);
  z-index: 2;
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.about-core-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.6rem;
  padding: 0.22rem 0.62rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 251, 240, 0.94);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-core strong,
.about-core span:last-child {
  display: block;
}

.about-core strong {
  font-size: 1rem;
  line-height: 1.18;
}

.about-core span:last-child {
  color: rgba(238, 248, 246, 0.84);
  font-size: 0.82rem;
  line-height: 1.42;
}

.legal-hub {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.legal-core {
  position: absolute;
  top: 46%;
  left: 49%;
  width: 9rem;
  height: 8.4rem;
  margin: -4.2rem 0 0 -4.5rem;
  padding: 0.95rem 0.95rem 1rem;
  border-radius: 1.7rem;
  display: grid;
  align-content: center;
  gap: 0.45rem;
  color: #ffffff;
  background:
    linear-gradient(155deg, rgba(7, 30, 44, 0.86), rgba(11, 64, 84, 0.9)),
    radial-gradient(circle at 24% 20%, rgba(159, 238, 255, 0.22), rgba(159, 238, 255, 0) 42%);
  border: 1px solid rgba(153, 240, 255, 0.2);
  box-shadow: 0 28px 54px rgba(5, 18, 28, 0.22);
  backdrop-filter: blur(14px);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.legal-core::before,
.legal-core::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.legal-core::before {
  top: 1.2rem;
  width: 3rem;
  height: 0.34rem;
  background: rgba(255, 255, 255, 0.16);
}

.legal-core::after {
  top: 1.82rem;
  width: 1.8rem;
  height: 0.24rem;
  background: rgba(153, 240, 255, 0.42);
}

.legal-core strong,
.legal-core span:last-child {
  display: block;
}

.legal-core strong {
  font-size: 1rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.legal-core span:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  line-height: 1.35;
}

.legal-core-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.55rem;
  padding: 0.18rem 0.48rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.legal-connector {
  position: absolute;
  top: 46%;
  left: 49%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(153, 240, 255, 0.88), rgba(255, 255, 255, 0));
  opacity: 0.72;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.legal-connector-a {
  width: 7.5rem;
  transform: rotate(-154deg);
}

.legal-connector-b {
  width: 6.4rem;
  transform: rotate(-28deg);
  animation-delay: 1s;
}

.legal-connector-c {
  width: 6.8rem;
  transform: rotate(144deg);
  animation-delay: 2s;
}

.page-motion-visual-faq {
  isolation: isolate;
  overflow: visible;
}

.page-motion-band-faq .scene-ring {
  border-style: dashed;
  opacity: 0.54;
}

.page-motion-band-faq .scene-path {
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(198, 255, 111, 0.92), rgba(108, 240, 255, 0.9), rgba(255, 255, 255, 0));
}

.page-motion-band-faq .scene-path-a {
  width: 14rem;
  top: 20%;
  right: 23%;
  transform: rotate(-29deg);
}

.page-motion-band-faq .scene-path-b {
  width: 17rem;
  bottom: 18%;
  left: 22%;
  transform: rotate(25deg);
}

.faq-core {
  position: absolute;
  top: 43%;
  left: 45%;
  width: 10.6rem;
  min-height: 9.4rem;
  margin: -4.7rem 0 0 -5.3rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 2rem 2rem 1.2rem 2rem;
  display: grid;
  align-content: center;
  gap: 0.45rem;
  color: #ffffff;
  background:
    linear-gradient(155deg, rgba(8, 72, 59, 0.92), rgba(33, 171, 111, 0.88)),
    radial-gradient(circle at 24% 20%, rgba(214, 255, 125, 0.24), rgba(214, 255, 125, 0) 44%);
  border: 1px solid rgba(198, 255, 111, 0.24);
  box-shadow: 0 30px 58px rgba(11, 48, 40, 0.28);
  backdrop-filter: blur(16px);
  animation: stack-core-pulse 7s infinite ease-in-out;
}

.faq-core::after {
  content: "?";
  position: absolute;
  right: -0.9rem;
  top: -1.1rem;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #124334;
  font-size: 1.45rem;
  font-weight: 900;
  background: #d8ff7b;
  box-shadow: 0 18px 32px rgba(11, 48, 40, 0.24);
  animation: scene-badge-float 5s infinite ease-in-out;
}

.faq-core strong,
.faq-core span:last-child {
  display: block;
}

.faq-core strong {
  font-size: 1.08rem;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.faq-core span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  line-height: 1.38;
}

.faq-core-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 1.55rem;
  padding: 0.18rem 0.52rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.faq-connector {
  position: absolute;
  top: 43%;
  left: 45%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(198, 255, 111, 0.9), rgba(108, 240, 255, 0.72));
  opacity: 0.75;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.faq-connector-a {
  width: 8rem;
  transform: rotate(-150deg);
}

.faq-connector-b {
  width: 7.4rem;
  transform: rotate(-18deg);
  animation-delay: 1s;
}

.faq-connector-c {
  width: 8.2rem;
  transform: rotate(54deg);
  animation-delay: 2s;
}

.faq-badge {
  gap: 0.65rem;
  min-height: 4.05rem;
  padding: 0.76rem 0.92rem;
  border-radius: 1.4rem 1.8rem 1.3rem 1.8rem;
}

.faq-badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(11, 48, 40, 0.24);
}

.faq-badge-a .faq-badge-mark {
  background: linear-gradient(145deg, #d8ff7b, #2ecb72);
}

.faq-badge-b .faq-badge-mark {
  background: linear-gradient(145deg, #7df3ff, #1aa99a);
}

.faq-badge-c .faq-badge-mark {
  background: linear-gradient(145deg, #a9ffb7, #26b96a);
}

.page-scene-faq .scene-badge-a {
  top: 12%;
  right: 3%;
}

.page-scene-faq .scene-badge-b {
  top: 48%;
  right: 9%;
}

.page-scene-faq .scene-badge-c {
  bottom: 12%;
  left: 11%;
  right: auto;
}

.faq-spark {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.15rem;
  height: 2.15rem;
  padding: 0 0.68rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.96rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 30px rgba(11, 48, 40, 0.2);
  backdrop-filter: blur(12px);
  animation: motion-panel-float 6.5s infinite ease-in-out;
}

.faq-spark-a {
  top: 8%;
  left: 10%;
  background: rgba(118, 255, 198, 0.3);
  animation-delay: 0.2s;
}

.faq-spark-b {
  top: 28%;
  right: 32%;
  background: rgba(109, 240, 255, 0.24);
  animation-delay: 1.2s;
}

.faq-spark-c {
  bottom: 24%;
  right: 34%;
  background: rgba(118, 255, 187, 0.24);
  animation-delay: 2.1s;
}

.faq-spark-d {
  bottom: 7%;
  right: 4%;
  background: rgba(102, 255, 214, 0.22);
  animation-delay: 3s;
}

.scene-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.scene-badge-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.scene-badge-label {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.contact-flow-board {
  position: absolute;
  top: 16%;
  left: 8%;
  width: 18rem;
  min-height: 11.75rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 1.4rem;
  background: rgba(6, 29, 43, 0.48);
  border: 1px solid rgba(128, 235, 255, 0.24);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 48px rgba(4, 18, 26, 0.24);
  display: grid;
  gap: 0.72rem;
  z-index: 1;
  animation: motion-panel-float 6.8s infinite ease-in-out;
}

.contact-flow-kicker {
  display: inline-flex;
  width: fit-content;
  min-height: 1.8rem;
  padding: 0.28rem 0.72rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.1);
}

.contact-flow-line {
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(128, 235, 255, 0.92));
  box-shadow: 0 0 14px rgba(128, 235, 255, 0.14);
}

.contact-flow-line-a {
  width: 86%;
}

.contact-flow-line-b {
  width: 64%;
}

.contact-flow-line-c {
  width: 92%;
}

.contact-flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.1rem;
}

.contact-flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.scene-badge-a {
  top: 18%;
  right: 10%;
  animation: scene-badge-float 5.2s infinite ease-in-out;
}

.scene-badge-b {
  top: 46%;
  right: 26%;
  animation: scene-badge-float 6s infinite ease-in-out 0.7s;
}

.scene-badge-c {
  bottom: 14%;
  right: 8%;
  animation: scene-badge-float 6.8s infinite ease-in-out 1.3s;
}

.page-scene-technologien .scene-badge-a {
  top: 14%;
  right: 12%;
}

.page-scene-technologien .scene-badge-b {
  top: 42%;
  right: 30%;
}

.page-scene-technologien .scene-badge-c {
  bottom: 16%;
  right: 12%;
}

.page-scene-projekte .scene-badge-a {
  top: 16%;
  right: 12%;
}

.page-scene-projekte .scene-badge-b {
  top: 48%;
  right: 26%;
}

.page-scene-projekte .scene-badge-c {
  bottom: 16%;
  right: 10%;
}

.page-motion-band-leistungen .scene-path-a {
  width: 20rem;
  top: 22%;
  right: 28%;
  transform: rotate(-4deg);
}

.page-motion-band-leistungen .scene-path-b {
  width: 14rem;
  bottom: 18%;
  left: 18%;
  transform: rotate(26deg);
}

.page-motion-band-technologien .scene-ring {
  border-style: dashed;
}

.page-motion-band-technologien .scene-path-a {
  width: 10rem;
  top: 20%;
  right: 24%;
  transform: rotate(-34deg);
}

.page-motion-band-technologien .scene-path-b {
  width: 12rem;
  bottom: 22%;
  left: 28%;
  transform: rotate(38deg);
}

.page-motion-band-projekte .scene-path-a {
  width: 17rem;
  top: 26%;
  right: 20%;
  transform: rotate(-16deg);
}

.page-motion-band-projekte .scene-path-b {
  width: 22rem;
  bottom: 18%;
  left: 12%;
  transform: rotate(6deg);
}

.page-motion-band-kontakt .scene-path-a {
  width: 15rem;
  top: 28%;
  left: 30%;
  right: auto;
  transform: rotate(-4deg);
}

.page-motion-band-kontakt .scene-path-b {
  width: 16rem;
  bottom: 18%;
  left: 24%;
  transform: rotate(10deg);
}

.page-motion-band-unternehmenssoftware .scene-ring {
  opacity: 0.54;
}

.page-motion-band-unternehmenssoftware .scene-path-a {
  width: 17rem;
  top: 24%;
  right: 24%;
  transform: rotate(-11deg);
}

.page-motion-band-unternehmenssoftware .scene-path-b {
  width: 18rem;
  bottom: 16%;
  left: 14%;
  transform: rotate(18deg);
}

.page-motion-band-unternehmenssoftware .scene-badge {
  border-radius: 1.2rem;
}

.page-motion-band-unternehmenssoftware .scene-badge-a {
  top: 13%;
  right: 8%;
}

.page-motion-band-unternehmenssoftware .scene-badge-b {
  top: 50%;
  right: 24%;
}

.page-motion-band-unternehmenssoftware .scene-badge-c {
  bottom: 12%;
  right: 10%;
}

.page-motion-band-multiplattform .scene-ring {
  border-style: dashed;
  opacity: 0.5;
}

.page-motion-band-multiplattform .scene-path-a {
  width: 12rem;
  top: 18%;
  right: 22%;
  transform: rotate(-36deg);
}

.page-motion-band-multiplattform .scene-path-b {
  width: 14rem;
  bottom: 18%;
  left: 26%;
  transform: rotate(34deg);
}

.page-motion-band-multiplattform .scene-badge {
  border-radius: 999px;
}

.page-motion-band-multiplattform .scene-badge-a {
  top: 14%;
  right: 10%;
}

.page-motion-band-multiplattform .scene-badge-b {
  top: 43%;
  right: 29%;
}

.page-motion-band-multiplattform .scene-badge-c {
  bottom: 15%;
  right: 12%;
}

.page-motion-band-serviceflow .scene-ring {
  border-style: dashed;
  opacity: 0.48;
}

.page-motion-band-serviceflow .scene-path-a {
  width: 15rem;
  top: 26%;
  left: 30%;
  right: auto;
  transform: rotate(-8deg);
}

.page-motion-band-serviceflow .scene-path-b {
  width: 17rem;
  bottom: 18%;
  left: 18%;
  transform: rotate(12deg);
}

.page-motion-band-serviceflow .scene-badge {
  border-radius: 1rem 1.4rem 1rem 1.4rem;
}

.page-motion-band-serviceflow .scene-badge-a {
  top: 12%;
  right: 4%;
}

.page-motion-band-serviceflow .scene-badge-b {
  top: 52%;
  right: 6%;
  left: auto;
}

.page-motion-band-serviceflow .scene-badge-c {
  bottom: 16%;
  left: 14%;
  right: auto;
}

.page-motion-band-schnittstellen .scene-ring {
  opacity: 0.54;
}

.page-motion-band-schnittstellen .scene-path-a {
  width: 18rem;
  top: 24%;
  right: 18%;
  transform: rotate(-18deg);
}

.page-motion-band-schnittstellen .scene-path-b {
  width: 16rem;
  bottom: 18%;
  left: 18%;
  transform: rotate(20deg);
}

.page-motion-band-schnittstellen .scene-badge {
  border-radius: 1rem;
}

.page-motion-band-schnittstellen .scene-badge-a {
  top: 14%;
  right: 8%;
}

.page-motion-band-schnittstellen .scene-badge-b {
  top: 46%;
  right: 22%;
}

.page-motion-band-schnittstellen .scene-badge-c {
  bottom: 14%;
  right: 10%;
}

.page-motion-band-magazin .scene-badge,
.page-motion-band-magazin-portal .scene-badge {
  border-radius: 999px;
}

.page-motion-band-csharp-services .page-motion-chip,
.page-motion-band-csharp-services .page-motion-panel,
.page-motion-band-csharp-services .scene-badge {
  border-color: rgba(149, 255, 204, 0.24);
}

.page-motion-band-csharp-services .page-motion-panel,
.page-motion-band-csharp-services .scene-badge {
  background: rgba(10, 24, 50, 0.46);
}

.page-motion-band-unternehmenssoftware .page-motion-chip,
.page-motion-band-unternehmenssoftware .page-motion-panel,
.page-motion-band-unternehmenssoftware .scene-badge {
  border-color: rgba(255, 210, 138, 0.28);
}

.page-motion-band-unternehmenssoftware .page-motion-panel,
.page-motion-band-unternehmenssoftware .scene-badge {
  background: rgba(11, 30, 48, 0.44);
}

.page-motion-band-multiplattform .page-motion-chip,
.page-motion-band-multiplattform .page-motion-panel,
.page-motion-band-multiplattform .scene-badge {
  border-color: rgba(134, 219, 255, 0.28);
}

.page-motion-band-multiplattform .page-motion-panel,
.page-motion-band-multiplattform .scene-badge {
  background: rgba(11, 32, 61, 0.44);
}

.page-motion-band-serviceflow .page-motion-chip,
.page-motion-band-serviceflow .page-motion-panel,
.page-motion-band-serviceflow .scene-badge {
  border-color: rgba(177, 181, 255, 0.28);
}

.page-motion-band-serviceflow .page-motion-panel,
.page-motion-band-serviceflow .scene-badge {
  background: rgba(23, 13, 56, 0.44);
}

.page-motion-band-schnittstellen .page-motion-chip,
.page-motion-band-schnittstellen .page-motion-panel,
.page-motion-band-schnittstellen .scene-badge {
  border-color: rgba(255, 210, 131, 0.28);
}

.page-motion-band-schnittstellen .page-motion-panel,
.page-motion-band-schnittstellen .scene-badge {
  background: rgba(44, 18, 50, 0.42);
}

.page-motion-band-magazin-data .scene-ring {
  border-style: dashed;
  opacity: 0.5;
}

.page-motion-band-magazin-data .scene-path {
  height: 3px;
}

.page-motion-band-magazin-modernisierung .scene-badge {
  border-radius: 1rem;
}

.page-motion-band-impressum .scene-ring {
  border-style: dashed;
  opacity: 0.44;
}

.page-motion-band-impressum .scene-path-a {
  width: 14rem;
  top: 24%;
  right: 20%;
  transform: rotate(-10deg);
}

.page-motion-band-impressum .scene-path-b {
  width: 18rem;
  bottom: 18%;
  left: 14%;
  transform: rotate(12deg);
}

.page-motion-band-datenschutz .scene-ring {
  opacity: 0.46;
}

.page-motion-band-datenschutz .scene-path {
  height: 3px;
}

.page-motion-band-datenschutz .scene-path-a {
  width: 16rem;
  top: 22%;
  right: 18%;
  transform: rotate(-18deg);
}

.page-motion-band-datenschutz .scene-path-b {
  width: 15rem;
  bottom: 18%;
  left: 22%;
  transform: rotate(24deg);
}

.page-scene-magazin .scene-badge-a,
.page-scene-magazin-data .scene-badge-a,
.page-scene-magazin-portal .scene-badge-a,
.page-scene-magazin-modernisierung .scene-badge-a {
  top: 16%;
  right: 10%;
}

.page-scene-magazin .scene-badge-b,
.page-scene-magazin-data .scene-badge-b,
.page-scene-magazin-portal .scene-badge-b,
.page-scene-magazin-modernisierung .scene-badge-b {
  top: 45%;
  right: 28%;
}

.page-scene-magazin .scene-badge-c,
.page-scene-magazin-data .scene-badge-c,
.page-scene-magazin-portal .scene-badge-c,
.page-scene-magazin-modernisierung .scene-badge-c {
  bottom: 14%;
  right: 10%;
}

.page-scene-impressum .scene-badge-a {
  top: 12%;
  left: 6%;
  right: auto;
}

.page-scene-kontakt .scene-badge-a {
  top: 10%;
  right: 8%;
}

.page-scene-kontakt .scene-badge-b {
  top: 42%;
  right: 10%;
}

.page-scene-kontakt .scene-badge-c {
  bottom: 19%;
  left: 16%;
  right: auto;
}

.page-scene-impressum .scene-badge-b {
  top: 44%;
  right: 8%;
}

.page-scene-impressum .scene-badge-c {
  bottom: 10%;
  left: 18%;
  right: auto;
}

.page-scene-datenschutz .scene-badge-a {
  top: 14%;
  right: 10%;
}

.page-scene-datenschutz .scene-badge-b {
  top: 46%;
  left: 8%;
  right: auto;
}

.page-scene-datenschutz .scene-badge-c {
  bottom: 12%;
  right: 16%;
}

.page-scene-ueber-uns .scene-badge-a {
  top: 12%;
  left: 8%;
  right: auto;
}

.page-scene-ueber-uns .scene-badge-b {
  top: 19%;
  right: 6%;
}

.page-scene-ueber-uns .scene-badge-c {
  bottom: 4%;
  right: 8%;
  left: auto;
  transform: translateY(2.1rem);
}

.page-motion-overlay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "title"
    "copy"
    "."
    "chips"
    "panels";
  align-content: stretch;
  gap: 1rem;
  min-height: 100%;
  padding-top: 1.65rem;
  padding-bottom: 1.2rem;
}

.page-motion-titleblock {
  grid-area: title;
  max-width: 58rem;
}

.page-motion-copy {
  grid-area: copy;
  max-width: 44rem;
  margin-top: 0;
}

.page-motion-chips {
  grid-area: chips;
  max-width: 44rem;
  margin-top: 0;
  align-self: start;
  transform: translateY(2.35rem);
  position: relative;
  z-index: 3;
}

.page-motion-panels {
  grid-area: panels;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  max-width: min(56rem, 100%);
  margin-top: 0;
  margin-left: 0;
  align-self: end;
  position: relative;
  z-index: 2;
}

.page-motion-panel {
  position: relative;
  overflow: hidden;
}

.page-motion-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 100% 0, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}

.page-motion-panel > * {
  position: relative;
  z-index: 1;
}

.page-motion-visual {
  position: absolute;
  inset: 1.4rem 1.8rem 11.6rem 50%;
  z-index: 1;
  pointer-events: none;
}

.page-motion-band-scene-leistungen .page-motion-visual {
  inset: 1.4rem 1.8rem 11.6rem 50%;
}

.page-motion-band-scene-unternehmenssoftware .page-motion-visual {
  inset: 1.35rem 1.8rem 11.4rem 49.5%;
  transform: translateY(0.55rem);
}

.page-motion-band-scene-leistungen .page-motion-overlay {
  grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21rem);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "title panels"
    "copy panels"
    ". panels"
    "chips panels";
  gap: 1rem 1.7rem;
}

.page-motion-band-scene-leistungen .page-motion-panels {
  grid-template-columns: 1fr;
  gap: 0.8rem;
  max-width: 19.75rem;
  margin-left: auto;
  align-self: end;
}

.page-motion-band-scene-unternehmenssoftware .page-motion-overlay {
  transform: none;
}

.page-motion-band-scene-leistungen .page-motion-chips {
  align-self: start;
  align-items: flex-start;
  align-content: flex-start;
  transform: translateY(-5.4rem);
}

.page-motion-band-scene-unternehmenssoftware .page-motion-chips {
  transform: translateY(-1.05rem);
}

.page-motion-band-scene-technologien .page-motion-overlay {
  transform: none;
}

.page-motion-band-scene-technologien .page-motion-chips {
  transform: translateY(-1.1rem);
}

.page-motion-band-scene-csharp-services-portale .page-motion-overlay {
  transform: none;
}

.page-motion-band-scene-serviceflow .page-motion-overlay {
  transform: none;
}

.page-motion-band-scene-csharp-services-portale .page-motion-chips {
  transform: translateY(-1.45rem);
}

.page-motion-band-scene-serviceflow .page-motion-chips {
  transform: translateY(-1.35rem);
}

.page-motion-band-scene-csharp-services-portale .page-motion-panels {
  transform: translateY(-1.85rem);
}

.page-motion-band-scene-serviceflow .page-motion-panels {
  transform: translateY(-1.75rem);
}

.page-motion-band-scene-projekte .page-motion-overlay,
.page-motion-band-scene-faq .page-motion-overlay,
.page-motion-band-scene-magazin .page-motion-overlay,
.page-motion-band-scene-magazin-data .page-motion-overlay,
.page-motion-band-scene-magazin-portal .page-motion-overlay,
.page-motion-band-scene-magazin-modernisierung .page-motion-overlay,
.page-motion-band-scene-kontakt .page-motion-overlay,
.page-motion-band-scene-support .page-motion-overlay,
.page-motion-band-scene-impressum .page-motion-overlay,
.page-motion-band-scene-datenschutz .page-motion-overlay {
  transform: none;
}

.page-motion-band-scene-projekte .page-motion-chips,
.page-motion-band-scene-magazin .page-motion-chips,
.page-motion-band-scene-magazin-data .page-motion-chips,
.page-motion-band-scene-magazin-portal .page-motion-chips,
.page-motion-band-scene-magazin-modernisierung .page-motion-chips {
  transform: translateY(-1rem);
}

.page-motion-band-scene-faq .page-motion-chips {
  transform: translateY(-1.2rem);
}

.page-motion-band-scene-referenzen .page-motion-chips {
  transform: translateY(-0.85rem);
}

.page-motion-band-scene-datenschutz .page-motion-chips {
  transform: translateY(-1.25rem);
}

.page-motion-band-scene-impressum .page-motion-chips {
  transform: translateY(-0.8rem);
}

.page-motion-band-scene-faq .page-motion-panels {
  transform: translateY(-0.95rem);
}

.page-motion-band-scene-kontakt .page-motion-panels,
.page-motion-band-scene-support .page-motion-panels {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.72rem;
  max-width: 39rem;
  margin-left: auto;
  transform: translateY(-2.65rem);
}

.page-motion-band-scene-kontakt .page-motion-chips,
.page-motion-band-scene-support .page-motion-chips {
  transform: translateY(4.8rem);
}

.page-motion-band-scene-kontakt .page-motion-panel:nth-child(1),
.page-motion-band-scene-support .page-motion-panel:nth-child(1) {
  transform: translateY(-0.18rem) rotate(-1deg);
}

.page-motion-band-scene-kontakt .page-motion-panel:nth-child(2),
.page-motion-band-scene-support .page-motion-panel:nth-child(2) {
  transform: translateY(-0.66rem) rotate(0.9deg);
}

.page-motion-band-scene-kontakt .page-motion-panel:nth-child(3),
.page-motion-band-scene-support .page-motion-panel:nth-child(3) {
  grid-column: auto;
  max-width: none;
  transform: translateY(-0.34rem) rotate(-0.5deg);
}

.visual-aura,
.visual-dot,
.migration-stream-dot,
.project-route,
.project-marker,
.portal-signal,
.database-disc,
.modernization-arrow,
.stack-orbit,
.stack-connector {
  position: absolute;
}

.visual-aura {
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.72;
}

.visual-aura-a {
  top: 4%;
  right: 0;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(153, 246, 255, 0.4), rgba(153, 246, 255, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.visual-aura-b {
  bottom: 0;
  left: 4%;
  width: 10rem;
  height: 10rem;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.22), rgba(0, 212, 255, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.visual-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.84);
}

.migration-board,
.query-window,
.portal-browser {
  position: absolute;
  border-radius: 1.6rem;
  background: rgba(7, 22, 34, 0.44);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(18px);
  box-shadow: 0 26px 52px rgba(4, 18, 27, 0.24);
}

.migration-board {
  inset: 14% 4% 12% 10%;
  overflow: hidden;
}

.migration-board-top,
.query-window-top,
.portal-browser-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.06);
}

.migration-board-body {
  display: grid;
  grid-template-columns: 1fr 0.9rem 1fr;
  gap: 1rem;
  height: calc(100% - 3rem);
  padding: 1.1rem 1.1rem 1.25rem;
}

.migration-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.8rem;
  border-radius: 1.2rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
}

.migration-column-label,
.modernization-label,
.project-tile-kicker,
.editorial-sheet-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  width: fit-content;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
}

.migration-line,
.modernization-line,
.query-line,
.portal-sidebar span,
.portal-row span,
.portal-card-grid span,
.portal-phone-card,
.portal-phone-top {
  display: block;
  border-radius: 999px;
}

.migration-line {
  height: 0.72rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(124, 240, 255, 0.88));
}

.migration-line-sm {
  width: 46%;
}

.migration-line-md {
  width: 68%;
}

.migration-line-lg {
  width: 84%;
}

.migration-line-xl {
  width: 92%;
}

.migration-stream {
  position: relative;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
}

.migration-stream-track {
  position: absolute;
  inset: 0.8rem 0.18rem;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(123, 242, 255, 0.92), rgba(255, 255, 255, 0));
}

.migration-stream-dot {
  left: 50%;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: -0.475rem;
  border-radius: 50%;
  background: #88f6ff;
  box-shadow: 0 0 0 0 rgba(136, 246, 255, 0.34);
}

.migration-stream-dot-a {
  animation: migration-dot-flow 4.5s infinite linear;
}

.migration-stream-dot-b {
  animation: migration-dot-flow 4.5s infinite linear 1.5s;
}

.migration-stream-dot-c {
  animation: migration-dot-flow 4.5s infinite linear 3s;
}

.migration-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(7, 32, 45, 0.6);
  border: 1px solid rgba(143, 247, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 36px rgba(4, 18, 27, 0.18);
}

.migration-tag-a {
  top: 18%;
  right: 4%;
  animation: motion-panel-float 6.5s infinite ease-in-out;
}

.migration-tag-b {
  bottom: 24%;
  left: 4%;
  animation: motion-panel-float 7.4s infinite ease-in-out 1.3s;
}

.migration-tag-c {
  bottom: 6%;
  right: 10%;
  animation: motion-panel-float 6.8s infinite ease-in-out 2.2s;
}

.page-motion-visual-unternehmenssoftware {
  isolation: isolate;
  overflow: visible;
}

.unternehmenssoftware-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: scale(0.78);
  transform-origin: top right;
}

.unternehmenssoftware-glow,
.unternehmenssoftware-grid,
.unternehmenssoftware-link,
.unternehmenssoftware-pill {
  position: absolute;
}

.unternehmenssoftware-glow {
  border-radius: 50%;
  filter: blur(20px);
  opacity: 0.78;
}

.unternehmenssoftware-glow-a {
  top: 4%;
  left: 2%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(255, 209, 132, 0.38), rgba(255, 209, 132, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.unternehmenssoftware-glow-b {
  right: 0;
  bottom: 4%;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, rgba(122, 244, 223, 0.34), rgba(122, 244, 223, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.unternehmenssoftware-grid {
  inset: 10% 8% 8% 8%;
  border-radius: 1.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(90deg, rgba(255, 208, 127, 0.08) 0 1px, transparent 1px 3.2rem),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 2.4rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.38;
}

.unternehmenssoftware-core {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 11rem;
  min-height: 8.8rem;
  margin: -4.4rem 0 0 -5.5rem;
  padding: 1.1rem 1.1rem 1.2rem;
  border-radius: 1.7rem;
  display: grid;
  align-content: center;
  gap: 0.5rem;
  color: #ffffff;
  text-align: center;
  background:
    linear-gradient(155deg, rgba(13, 43, 56, 0.84), rgba(7, 28, 44, 0.92)),
    radial-gradient(circle at 24% 20%, rgba(255, 208, 127, 0.18), rgba(255, 208, 127, 0) 42%);
  border: 1px solid rgba(255, 210, 138, 0.24);
  box-shadow: 0 28px 54px rgba(7, 17, 28, 0.24);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.unternehmenssoftware-core strong,
.unternehmenssoftware-core span:last-child {
  display: block;
}

.unternehmenssoftware-core strong {
  font-size: 1.15rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.unternehmenssoftware-core span:last-child {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
  line-height: 1.42;
}

.unternehmenssoftware-core-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.65rem;
  margin: 0 auto;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 249, 242, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.unternehmenssoftware-link {
  top: 46%;
  left: 50%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 210, 138, 0.94), rgba(255, 255, 255, 0));
  opacity: 0.76;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.unternehmenssoftware-link-a {
  width: 9.8rem;
  transform: rotate(-150deg);
}

.unternehmenssoftware-link-b {
  width: 9.5rem;
  transform: rotate(-24deg);
  animation-delay: 1s;
}

.unternehmenssoftware-link-c {
  width: 9.8rem;
  transform: rotate(32deg);
  animation-delay: 2s;
}

.unternehmenssoftware-link-d {
  width: 9rem;
  transform: rotate(154deg);
  animation-delay: 3s;
}

.unternehmenssoftware-card {
  position: absolute;
  display: grid;
  gap: 0.42rem;
  width: 10.2rem;
  padding: 0.95rem 1rem 1.02rem;
  border-radius: 1.35rem;
  background: rgba(7, 33, 44, 0.56);
  border: 1px solid rgba(255, 210, 138, 0.22);
  box-shadow: 0 24px 44px rgba(7, 17, 28, 0.22);
  animation: project-tile-float 8s infinite ease-in-out;
}

.unternehmenssoftware-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.88rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.unternehmenssoftware-card-icon svg {
  width: 1.34rem;
  height: 1.34rem;
}

.unternehmenssoftware-card strong,
.unternehmenssoftware-card span:last-child {
  display: block;
  color: #ffffff;
}

.unternehmenssoftware-card span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.82rem;
  line-height: 1.42;
}

.unternehmenssoftware-card-roles {
  top: 6%;
  left: 4%;
}

.unternehmenssoftware-card-process {
  top: 10%;
  right: 5%;
  animation-delay: 1.4s;
}

.unternehmenssoftware-card-reporting {
  right: 10%;
  bottom: 6%;
  animation-delay: 2.1s;
}

.unternehmenssoftware-card-data {
  left: 10%;
  bottom: 10%;
  animation-delay: 2.8s;
}

.unternehmenssoftware-pill {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 1.85rem;
  padding: 0.22rem 0.66rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 248, 241, 0.92);
  background: rgba(14, 46, 54, 0.72);
  border: 1px solid rgba(255, 210, 138, 0.22);
  box-shadow: 0 16px 30px rgba(7, 17, 28, 0.18);
  animation: motion-panel-float 7.2s infinite ease-in-out;
}

.unternehmenssoftware-pill-a {
  top: 18%;
  left: 28%;
}

.unternehmenssoftware-pill-b {
  top: 62%;
  left: 28%;
  animation-delay: 1.1s;
}

.unternehmenssoftware-pill-c {
  top: 26%;
  right: 28%;
  animation-delay: 2.2s;
}

.stack-hub {
  position: absolute;
  inset: 12% 5% 6% 6%;
}

.stack-core {
  position: absolute;
  top: 48%;
  left: 49%;
  width: 9.8rem;
  height: 9.8rem;
  margin: -4.9rem 0 0 -4.9rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: radial-gradient(circle, rgba(92, 160, 255, 0.38), rgba(7, 27, 58, 0.78));
  border: 1px solid rgba(132, 180, 255, 0.3);
  box-shadow: 0 28px 54px rgba(7, 17, 44, 0.24);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.stack-orbit {
  border-radius: 50%;
  border: 1px dashed rgba(132, 180, 255, 0.22);
}

.stack-orbit-a {
  inset: 10% 18% 18% 14%;
  animation: hero-stage-orbit-spin 22s infinite linear;
}

.stack-orbit-b {
  inset: 20% 24% 26% 22%;
  animation: hero-stage-orbit-spin 16s infinite linear reverse;
}

.stack-connector {
  top: 48%;
  left: 49%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(147, 192, 255, 0.92), rgba(255, 255, 255, 0));
  opacity: 0.72;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.stack-connector-a {
  width: 10rem;
  transform: rotate(-146deg);
}

.stack-connector-b {
  width: 10.5rem;
  transform: rotate(-32deg);
  animation-delay: 1s;
}

.stack-connector-c {
  width: 9rem;
  transform: rotate(40deg);
  animation-delay: 2s;
}

.stack-connector-d {
  width: 9.6rem;
  transform: rotate(156deg);
  animation-delay: 3s;
}

.stack-node {
  position: absolute;
  display: grid;
  gap: 0.45rem;
  width: 10.5rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 1.35rem;
  background: rgba(7, 22, 54, 0.5);
  border: 1px solid rgba(132, 180, 255, 0.24);
  box-shadow: 0 24px 44px rgba(6, 18, 41, 0.22);
  animation: project-tile-float 8s infinite ease-in-out;
}

.stack-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 0.9rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.stack-node-icon svg {
  width: 1.45rem;
  height: 1.45rem;
}

.stack-node strong,
.stack-node span:last-child {
  display: block;
  color: #ffffff;
}

.stack-node span:last-child {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.84rem;
  line-height: 1.45;
}

.stack-node-delphi {
  top: 8%;
  left: 4%;
}

.stack-node-csharp {
  top: 14%;
  right: 4%;
  animation-delay: 1.2s;
}

.stack-node-data {
  right: 12%;
  bottom: 12%;
  animation-delay: 2.2s;
}

.stack-node-portal {
  left: 10%;
  bottom: 2%;
  animation-delay: 3s;
}

.page-motion-band-scene-projekte .page-motion-visual {
  inset: 1.4rem 1.8rem 11.6rem 50%;
  transform: translateY(1.1rem);
}

.page-motion-band-scene-magazin .page-motion-visual,
.page-motion-band-scene-magazin-data .page-motion-visual,
.page-motion-band-scene-magazin-portal .page-motion-visual,
.page-motion-band-scene-magazin-modernisierung .page-motion-visual {
  transform: translateY(0.85rem);
}

.page-motion-band-scene-csharp-services-portale .page-motion-visual {
  inset: 1.25rem 1.8rem 6.8rem 50%;
  z-index: 4;
  transform: translateY(-0.08rem);
}

.page-motion-visual-csharp-services {
  isolation: isolate;
  overflow: visible;
}

.csharp-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: scale(0.67);
  transform-origin: top right;
}

.csharp-brand-glide {
  position: absolute;
  top: 10%;
  left: -112%;
  z-index: 1;
  width: 5.7rem;
  aspect-ratio: 563 / 620;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 34%),
    linear-gradient(128deg, #00a8ff 0%, #00d7ff 20%, #12f0be 44%, #7eff59 64%, #ffe45d 82%, #ff8d4f 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-mask-image: url("../img/netbase-mark.svg");
  mask-image: url("../img/netbase-mark.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  pointer-events: none;
  opacity: 0;
  filter:
    saturate(1.28)
    brightness(1.08)
    drop-shadow(0 20px 36px rgba(6, 18, 40, 0.28));
  animation:
    csharp-brand-glide 19s infinite linear,
    csharp-brand-spectrum 6.8s infinite ease-in-out;
}

.csharp-halo,
.csharp-grid,
.csharp-feed,
.csharp-node,
.csharp-symbol {
  position: absolute;
}

.csharp-halo {
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.78;
}

.csharp-halo-a {
  top: 4%;
  left: 0;
  width: 11.2rem;
  height: 11.2rem;
  background: radial-gradient(circle, rgba(125, 181, 255, 0.38), rgba(125, 181, 255, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.csharp-halo-b {
  right: 2%;
  bottom: 4%;
  width: 10.6rem;
  height: 10.6rem;
  background: radial-gradient(circle, rgba(132, 255, 204, 0.34), rgba(132, 255, 204, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.csharp-grid {
  inset: 10% 8% 8% 10%;
  border-radius: 1.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(90deg, rgba(132, 255, 204, 0.08) 0 1px, transparent 1px 3.3rem),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.42;
}

.csharp-console {
  position: absolute;
  inset: 15% 30% 16% 4%;
  z-index: 3;
  transform: translateX(-40%);
  overflow: hidden;
  border-radius: 1.65rem;
  background: rgba(9, 24, 50, 0.48);
  border: 1px solid rgba(149, 255, 204, 0.18);
  backdrop-filter: blur(18px);
  box-shadow: 0 28px 56px rgba(6, 18, 40, 0.24);
}

.csharp-console::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  height: 0.28rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124, 181, 255, 0), rgba(132, 255, 204, 0.8), rgba(124, 181, 255, 0));
  opacity: 0.8;
}

.csharp-console-top {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.07);
}

.csharp-console-top .visual-dot {
  flex: 0 0 auto;
  width: 0.48rem;
  height: 0.48rem;
}

.csharp-console-title {
  margin-left: 0.96rem;
  color: rgba(230, 248, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.csharp-console-body {
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
  height: calc(100% - 3rem);
  padding: 1.05rem 1.1rem 1.35rem;
}

.csharp-feed {
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  height: 1.9rem;
  padding: 0 0.58rem;
  border-radius: 999px;
  color: rgba(247, 252, 255, 0.96);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(10, 24, 50, 0.66);
  border: 1px solid rgba(149, 255, 204, 0.22);
  box-shadow: 0 14px 26px rgba(6, 18, 40, 0.18);
  opacity: 0.72;
  animation: csharp-feed-flow 7.6s infinite ease-in-out;
}

.csharp-feed-a {
  top: 16%;
  right: 17%;
  --feed-mid-x: -10.8rem;
  --feed-mid-y: 3.35rem;
  --feed-end-x: -20.6rem;
  --feed-end-y: 0.35rem;
}

.csharp-feed-b {
  top: 48%;
  right: 9%;
  --feed-mid-x: -12.6rem;
  --feed-mid-y: 0.8rem;
  --feed-end-x: -24rem;
  --feed-end-y: -2.1rem;
  animation-delay: 1.55s;
}

.csharp-feed-c {
  top: 74%;
  right: 23%;
  --feed-mid-x: -8.7rem;
  --feed-mid-y: -3.5rem;
  --feed-end-x: -18.8rem;
  --feed-end-y: -5.2rem;
  animation-delay: 3.1s;
}

.csharp-line {
  display: block;
  height: 0.72rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(124, 181, 255, 0.74), rgba(132, 255, 204, 0.92));
  transform-origin: left center;
  animation: csharp-line-breathe 4.8s infinite ease-in-out;
}

.csharp-line-a {
  width: 78%;
  animation-delay: 0s;
}

.csharp-line-b {
  width: 92%;
  animation-delay: 0.55s;
}

.csharp-line-c {
  width: 64%;
  animation-delay: 1.05s;
}

.csharp-line-d {
  width: 86%;
  animation-delay: 1.55s;
}

.csharp-line-e {
  width: 58%;
  animation-delay: 2.1s;
}

.csharp-node {
  z-index: 2;
  display: grid;
  gap: 0.38rem;
  width: 8.6rem;
  padding: 0.88rem 0.92rem 0.94rem;
  border-radius: 1.25rem;
  background: rgba(9, 27, 53, 0.54);
  border: 1px solid rgba(149, 255, 204, 0.2);
  box-shadow: 0 22px 42px rgba(6, 18, 40, 0.2);
  animation: project-tile-float 8s infinite ease-in-out;
}

.csharp-node-api,
.csharp-node-jobs {
  z-index: 5;
}

.csharp-node-portal {
  z-index: 4;
}

.csharp-node-api {
  top: 0;
  right: 8%;
}

.csharp-node-portal {
  right: 4%;
  bottom: 33%;
  animation-delay: 1.4s;
}

.csharp-node-jobs {
  left: 46%;
  bottom: -6%;
  animation-delay: 2.6s;
}

.csharp-node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border-radius: 0.88rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.csharp-node-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.csharp-node strong,
.csharp-node span:last-child {
  display: block;
  color: #ffffff;
}

.csharp-node span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  line-height: 1.38;
}

.csharp-symbol {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 2.2rem;
  padding: 0 0.82rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(149, 255, 204, 0.22);
  box-shadow: 0 16px 30px rgba(6, 18, 40, 0.18);
  animation: csharp-symbol-drift 8.5s infinite ease-in-out;
}

.csharp-symbol-a {
  top: 5%;
  left: 12%;
}

.csharp-symbol-b {
  top: 56%;
  left: 4%;
  animation-delay: 1.3s;
}

.csharp-symbol-c {
  right: 22%;
  bottom: 8%;
  animation-delay: 2.4s;
}

.page-motion-band-scene-serviceflow .page-motion-visual {
  inset: 0.95rem 1.25rem 5.9rem 43.5%;
  z-index: 4;
  transform: translateY(-0.02rem);
}

.page-motion-visual-serviceflow {
  isolation: isolate;
  overflow: visible;
}

.serviceflow-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: scale(0.82);
  transform-origin: top right;
}

.serviceflow-glow,
.serviceflow-grid,
.serviceflow-lane,
.serviceflow-pill {
  position: absolute;
}

.serviceflow-glow {
  border-radius: 50%;
  filter: blur(22px);
  opacity: 0.8;
}

.serviceflow-glow-a {
  top: 2%;
  left: 0;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, rgba(188, 154, 255, 0.36), rgba(188, 154, 255, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.serviceflow-glow-b {
  right: 2%;
  bottom: 2%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(103, 232, 249, 0.34), rgba(103, 232, 249, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.serviceflow-grid {
  inset: 8% 8% 8% 8%;
  border-radius: 1.85rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 24%),
    repeating-linear-gradient(90deg, rgba(188, 154, 255, 0.08) 0 1px, transparent 1px 3.3rem),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 2.6rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0.4;
}

.serviceflow-core {
  position: absolute;
  top: 30.5%;
  left: 40.5%;
  width: 14rem;
  min-height: 10.8rem;
  padding: 1.25rem 1.25rem 1.38rem;
  border-radius: 1.7rem;
  display: grid;
  align-content: center;
  gap: 0.5rem;
  color: #ffffff;
  background:
    linear-gradient(155deg, rgba(25, 19, 64, 0.88), rgba(10, 38, 70, 0.92)),
    radial-gradient(circle at 26% 22%, rgba(103, 232, 249, 0.16), rgba(103, 232, 249, 0) 44%);
  border: 1px solid rgba(177, 181, 255, 0.24);
  box-shadow: 0 28px 54px rgba(12, 14, 42, 0.24);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.serviceflow-core strong,
.serviceflow-core span:last-child {
  display: block;
}

.serviceflow-core strong {
  font-size: 1.22rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.serviceflow-core span:last-child {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.82rem;
  line-height: 1.42;
}

.serviceflow-core-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.65rem;
  padding: 0.22rem 0.58rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 248, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.serviceflow-lane {
  top: 47.5%;
  left: 56.5%;
  height: 2px;
  border-radius: 999px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(177, 181, 255, 0.96), rgba(255, 255, 255, 0));
  opacity: 0.76;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.serviceflow-lane-a {
  width: 10rem;
  transform: rotate(-165deg);
}

.serviceflow-lane-b {
  width: 8.8rem;
  transform: rotate(-18deg);
  animation-delay: 1.1s;
}

.serviceflow-lane-c {
  width: 8.8rem;
  transform: rotate(52deg);
  animation-delay: 2.2s;
}

.serviceflow-card {
  position: absolute;
  display: grid;
  gap: 0.38rem;
  width: 9.2rem;
  padding: 0.9rem 0.95rem 0.96rem;
  border-radius: 1.3rem;
  background: rgba(14, 21, 58, 0.54);
  border: 1px solid rgba(177, 181, 255, 0.2);
  box-shadow: 0 24px 44px rgba(12, 14, 42, 0.22);
  animation: project-tile-float 8s infinite ease-in-out;
}

.serviceflow-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.55rem;
  height: 2.55rem;
  border-radius: 0.88rem;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.serviceflow-card-icon svg {
  width: 1.28rem;
  height: 1.28rem;
}

.serviceflow-card strong,
.serviceflow-card span:last-child {
  display: block;
  color: #ffffff;
}

.serviceflow-card span:last-child {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.8rem;
  line-height: 1.38;
}

.serviceflow-card-portal {
  top: 9%;
  left: 1.5%;
}

.serviceflow-card-api {
  top: 5%;
  right: 0.5%;
  animation-delay: 1.3s;
}

.serviceflow-card-jobs {
  right: 9%;
  bottom: 5%;
  animation-delay: 2.4s;
}

.serviceflow-pill {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: 0.2rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245, 248, 255, 0.92);
  background: rgba(20, 24, 64, 0.74);
  border: 1px solid rgba(177, 181, 255, 0.22);
  box-shadow: 0 16px 30px rgba(12, 14, 42, 0.18);
  animation: motion-panel-float 7s infinite ease-in-out;
}

.serviceflow-pill-a {
  top: 22%;
  left: 30%;
}

.serviceflow-pill-b {
  top: 20%;
  right: 30%;
  animation-delay: 1.1s;
}

.serviceflow-pill-c {
  bottom: 18%;
  left: 38%;
  animation-delay: 2.2s;
}

.project-network,
.editorial-network {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.project-orbit,
.editorial-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(151, 246, 232, 0.18);
}

.project-orbit-a {
  inset: 11% 15% 16% 12%;
  animation: hero-stage-orbit-spin 20s infinite linear;
}

.project-orbit-b {
  inset: 22% 24% 26% 23%;
  animation: hero-stage-orbit-spin 14s infinite linear reverse;
}

.project-core {
  position: absolute;
  top: 48%;
  left: 52%;
  width: 8.6rem;
  height: 8.6rem;
  margin: -4.3rem 0 0 -4.3rem;
  border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  color: #ffffff;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  background:
    linear-gradient(155deg, rgba(22, 97, 111, 0.82), rgba(7, 34, 46, 0.92)),
    radial-gradient(circle at 30% 24%, rgba(163, 253, 239, 0.34), rgba(163, 253, 239, 0) 44%);
  border: 1px solid rgba(151, 246, 232, 0.26);
  box-shadow: 0 28px 54px rgba(5, 20, 29, 0.24);
  animation: stack-core-pulse 8s infinite ease-in-out;
}

.project-core::before,
.project-core::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.project-core::before {
  top: 1.55rem;
  width: 3.3rem;
  height: 0.36rem;
}

.project-core::after {
  top: 2.35rem;
  width: 2rem;
  height: 0.28rem;
  background: rgba(151, 246, 232, 0.5);
}

.project-connector,
.editorial-connector {
  position: absolute;
  border-radius: 999px;
  transform-origin: left center;
  opacity: 0.72;
  animation: stack-link-flash 5s infinite ease-in-out;
}

.project-connector {
  top: 48%;
  left: 52%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(151, 246, 232, 0.92), rgba(255, 255, 255, 0));
}

.project-connector-a {
  width: 8.3rem;
  transform: rotate(-148deg);
}

.project-connector-b {
  width: 6.9rem;
  transform: rotate(-18deg);
  animation-delay: 1s;
}

.project-connector-c {
  width: 7.5rem;
  transform: rotate(144deg);
  animation-delay: 2s;
}

.project-route {
  height: 0.24rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(139, 246, 232, 0.92), rgba(255, 255, 255, 0));
  box-shadow: 0 0 16px rgba(139, 246, 232, 0.24);
  animation: stack-link-flash 4.8s infinite ease-in-out;
}

.project-route-a {
  top: 26%;
  left: 12%;
  width: 15rem;
  transform: rotate(9deg);
}

.project-route-b {
  top: 48%;
  left: 28%;
  width: 13rem;
  transform: rotate(-20deg);
  animation-delay: 1.2s;
}

.project-route-c {
  bottom: 20%;
  left: 18%;
  width: 17rem;
  transform: rotate(6deg);
  animation-delay: 2.4s;
}

.project-tile {
  position: absolute;
  display: grid;
  gap: 0.45rem;
  z-index: 2;
  width: 12rem;
  padding: 1rem 1rem 1.1rem;
  border-radius: 1.45rem;
  background: rgba(7, 33, 44, 0.54);
  border: 1px solid rgba(139, 246, 232, 0.22);
  box-shadow: 0 24px 44px rgba(4, 18, 27, 0.22);
  animation: project-tile-float 8s infinite ease-in-out;
}

.project-tile strong,
.project-tile span:last-child {
  display: block;
  color: #ffffff;
}

.project-tile span:last-child {
  color: rgba(255, 255, 255, 0.76);
  line-height: 1.45;
}

.project-tile-a {
  top: 10%;
  left: 6%;
}

.project-tile-b {
  top: 34%;
  right: 2%;
  animation-delay: 1.4s;
}

.project-tile-c {
  bottom: 8%;
  left: 32%;
  animation-delay: 2.7s;
}

.project-marker {
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(9, 40, 50, 0.66);
  border: 1px solid rgba(139, 246, 232, 0.22);
}

.project-marker-a {
  top: 18%;
  right: 14%;
}

.project-marker-b {
  top: 54%;
  left: 14%;
}

.project-marker-c {
  bottom: 8%;
  right: 8%;
}

.page-motion-band-scene-referenzen .page-motion-visual,
.page-motion-band-scene-referenz-netscope .page-motion-visual,
.page-motion-band-scene-referenz-netnotdienst .page-motion-visual {
  inset: 1.35rem 1.8rem 11.8rem 49%;
  transform: translateY(0.9rem);
}

.reference-halo,
.reference-track {
  position: absolute;
  pointer-events: none;
}

.reference-halo {
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.7;
}

.reference-halo-a {
  top: 10%;
  right: 20%;
  width: 10.8rem;
  height: 10.8rem;
  background: radial-gradient(circle, rgba(255, 214, 126, 0.44), rgba(255, 214, 126, 0));
  animation: beam-float 10s infinite ease-in-out;
}

.reference-halo-b {
  bottom: 18%;
  left: 26%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(120, 255, 232, 0.28), rgba(120, 255, 232, 0));
  animation: beam-float 12s infinite ease-in-out reverse;
}

.reference-track {
  height: 0.24rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 219, 160, 0.9), rgba(255, 255, 255, 0));
  box-shadow: 0 0 16px rgba(255, 195, 125, 0.24);
  animation: stack-link-flash 5.6s infinite ease-in-out;
}

.reference-track-a {
  top: 31%;
  left: 24%;
  width: 12.4rem;
  transform: rotate(11deg);
}

.reference-track-b {
  bottom: 28%;
  left: 35%;
  width: 9.2rem;
  transform: rotate(-14deg);
  animation-delay: 1.2s;
}

.reference-window {
  position: absolute;
  display: grid;
  gap: 0.38rem;
  width: 12.5rem;
  padding: 0.95rem 1rem 1.05rem;
  border-radius: 1.35rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 221, 171, 0.22);
  box-shadow: 0 24px 44px rgba(37, 11, 32, 0.22);
  backdrop-filter: blur(14px);
  animation: project-tile-float 8s infinite ease-in-out;
}

.reference-window strong,
.reference-window span:last-child {
  display: block;
  color: #ffffff;
}

.reference-window span:last-child {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}

.reference-window-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.65rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 247, 238, 0.92);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-window-a {
  top: 7%;
  left: 4%;
}

.reference-window-b {
  top: 18%;
  right: 8%;
  animation-delay: 1.2s;
}

.reference-window-c {
  bottom: 10%;
  left: 38%;
  animation-delay: 2.1s;
}

.reference-pill {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 1.74rem;
  padding: 0.18rem 0.64rem;
  border-radius: 999px;
  background: rgba(74, 20, 52, 0.64);
  border: 1px solid rgba(255, 216, 162, 0.22);
  color: rgba(255, 248, 240, 0.92);
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.reference-pill-a {
  top: 12%;
  right: 18%;
}

.reference-pill-b {
  top: 58%;
  left: 8%;
}

.reference-pill-c {
  bottom: 10%;
  right: 10%;
}

.editorial-sheet {
  position: absolute;
  display: grid;
  gap: 0.7rem;
  z-index: 2;
  width: 13rem;
  min-height: 10rem;
  padding: 1.15rem;
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 26px 50px rgba(4, 18, 27, 0.2);
  backdrop-filter: blur(14px);
  animation: editorial-sheet-sway 9s infinite ease-in-out;
}

.editorial-sheet strong {
  display: block;
  color: #ffffff;
  font-size: 1.02rem;
  line-height: 1.3;
}

.editorial-orbit-a {
  inset: 8% 14% 18% 16%;
  animation: hero-stage-orbit-spin 20s infinite linear reverse;
}

.editorial-orbit-b {
  inset: 18% 24% 28% 24%;
  border-color: rgba(255, 255, 255, 0.15);
  animation: hero-stage-orbit-spin 14s infinite linear;
}

.editorial-core {
  position: absolute;
  top: 47%;
  left: 52%;
  width: 9.4rem;
  height: 8.7rem;
  translate: 0 -0.7rem;
  margin: -4.35rem 0 0 -4.7rem;
  padding: 1rem 1rem 1.05rem;
  border-radius: 1.7rem;
  display: grid;
  align-content: center;
  gap: 0.5rem;
  color: #ffffff;
  background:
    linear-gradient(155deg, rgba(8, 36, 54, 0.84), rgba(14, 63, 80, 0.9)),
    radial-gradient(circle at 25% 20%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 42%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 28px 54px rgba(4, 18, 27, 0.22);
  backdrop-filter: blur(14px);
  --sheet-tilt: -3deg;
  animation: editorial-sheet-sway 9s infinite ease-in-out;
}

.editorial-core::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.9rem;
  height: 0.34rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), rgba(153, 240, 255, 0.88));
}

.editorial-core strong,
.editorial-core span:last-child {
  display: block;
}

.editorial-core strong {
  font-size: 1.08rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.editorial-core span:last-child {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.8rem;
  line-height: 1.4;
}

.editorial-core-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.65rem;
  padding: 0.22rem 0.56rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.editorial-connector {
  top: 47%;
  left: 52%;
  height: 1.8px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(181, 242, 255, 0.9), rgba(255, 255, 255, 0));
}

.editorial-connector-a {
  width: 8.2rem;
  transform: rotate(-151deg);
}

.editorial-connector-b {
  width: 7rem;
  transform: rotate(-18deg);
  animation-delay: 1s;
}

.editorial-connector-c {
  width: 7.6rem;
  transform: rotate(145deg);
  animation-delay: 2s;
}

.editorial-sheet-a {
  top: 10%;
  left: 6%;
  --sheet-tilt: -7deg;
}

.editorial-sheet-b {
  top: 28%;
  right: 2%;
  --sheet-tilt: 5deg;
  animation-delay: 1.4s;
}

.editorial-sheet-c {
  bottom: 4%;
  left: 34%;
  --sheet-tilt: -4deg;
  animation-delay: 2.4s;
}

.query-window {
  inset: 16% 18% 12% 4%;
  overflow: hidden;
}

.query-window-title {
  margin-left: 0.5rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.query-window-body {
  padding: 1.15rem 1.15rem 1.3rem;
}

.query-line {
  height: 0.74rem;
  margin-top: 0.85rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(126, 241, 255, 0.9));
  animation: query-line-shift 5s infinite ease-in-out;
}

.query-line-a {
  width: 80%;
}

.query-line-b {
  width: 58%;
  animation-delay: 0.7s;
}

.query-line-c {
  width: 90%;
  animation-delay: 1.4s;
}

.query-line-d {
  width: 42%;
  animation-delay: 2.1s;
}

.query-cursor {
  margin-top: 1.2rem;
  width: 0.8rem;
  height: 1rem;
  border-radius: 0.2rem;
  background: #8bf6ff;
  animation: query-cursor-blink 1.1s step-end infinite;
}

.database-stack {
  position: absolute;
  top: 26%;
  right: 4%;
  width: 8.5rem;
  height: 14rem;
}

.database-disc {
  left: 0;
  right: 0;
  height: 2rem;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(132, 245, 255, 0.9), rgba(7, 48, 66, 0.78));
  box-shadow: 0 16px 30px rgba(4, 18, 27, 0.16);
  opacity: 0.94;
}

.database-disc-a {
  top: 0;
  animation: database-disc-rise 5.8s infinite ease-in-out;
}

.database-disc-b {
  top: 3.2rem;
  animation: database-disc-rise 5.8s infinite ease-in-out 1.2s;
}

.database-disc-c {
  top: 6.4rem;
  animation: database-disc-rise 5.8s infinite ease-in-out 2.4s;
}

.portal-browser {
  inset: 14% 18% 10% 4%;
  overflow: hidden;
}

.portal-browser-body {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 1rem;
  padding: 1rem 1rem 1.1rem;
}

.portal-sidebar,
.portal-content,
.portal-card-grid,
.portal-row {
  display: grid;
  gap: 0.7rem;
}

.portal-sidebar span,
.portal-row span,
.portal-card-grid span,
.portal-phone-card,
.portal-phone-top {
  background: rgba(255, 255, 255, 0.16);
}

.portal-sidebar span {
  height: 1rem;
}

.portal-row {
  grid-template-columns: 1.2fr 0.8fr;
}

.portal-row span {
  height: 2rem;
}

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

.portal-card-grid span {
  height: 5.5rem;
  border-radius: 1rem;
}

.portal-phone {
  position: absolute;
  right: 4%;
  bottom: 12%;
  width: 7rem;
  height: 13.5rem;
  padding: 0.85rem 0.8rem;
  border-radius: 1.8rem;
  background: rgba(8, 31, 44, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 44px rgba(4, 18, 27, 0.2);
  animation: portal-phone-float 7.4s infinite ease-in-out;
}

.portal-phone-top {
  height: 1rem;
  margin-bottom: 0.8rem;
}

.portal-phone-card {
  height: 3.4rem;
}

.portal-phone-card-b {
  margin-top: 0.8rem;
}

.portal-signal {
  border-radius: 50%;
  border: 1px solid rgba(132, 245, 255, 0.18);
  opacity: 0.42;
}

.portal-signal-a {
  right: 0;
  top: 6%;
  width: 9rem;
  height: 9rem;
  animation: portal-signal-wave 5.5s infinite ease-out;
}

.portal-signal-b {
  right: -1rem;
  top: 4%;
  width: 12rem;
  height: 12rem;
  animation: portal-signal-wave 5.5s infinite ease-out 1.4s;
}

.modernization-frame {
  position: absolute;
  inset: 16% 4% 18% 4%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1rem;
  align-items: center;
}

.modernization-panel {
  min-height: 12rem;
  padding: 1.05rem;
  border-radius: 1.4rem;
  background: rgba(8, 28, 40, 0.46);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 46px rgba(4, 18, 27, 0.2);
  animation: motion-panel-float 6.8s infinite ease-in-out;
}

.modernization-panel-modern {
  background: rgba(8, 49, 66, 0.56);
  border-color: rgba(132, 245, 255, 0.2);
  animation-delay: 1.3s;
}

.modernization-line {
  height: 0.78rem;
  margin-top: 0.8rem;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.14), rgba(132, 245, 255, 0.88));
}

.modernization-line-a,
.modernization-line-d {
  width: 82%;
}

.modernization-line-b,
.modernization-line-e {
  width: 60%;
}

.modernization-line-c,
.modernization-line-f {
  width: 92%;
}

.modernization-arrow {
  position: relative;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 245, 255, 0.34), rgba(8, 38, 50, 0.82));
  border: 1px solid rgba(132, 245, 255, 0.28);
  box-shadow: 0 20px 40px rgba(4, 18, 27, 0.18);
  animation: modern-arrow-nudge 4.8s infinite ease-in-out;
}

.modernization-arrow span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.8rem;
  height: 0.22rem;
  margin: -0.11rem 0 0 -0.9rem;
  border-radius: 999px;
  background: #ffffff;
}

.modernization-arrow span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  margin-top: -0.4rem;
  border-top: 0.2rem solid #ffffff;
  border-right: 0.2rem solid #ffffff;
  transform: rotate(45deg);
}

.page-motion-band-scene-leistungen .page-motion-chip,
.page-motion-band-scene-leistungen .page-motion-panel {
  border-color: rgba(142, 247, 255, 0.24);
}

.page-motion-band-scene-leistungen .page-motion-panel {
  padding: 1rem 1rem 1.05rem;
  border-radius: 1.1rem;
  background: rgba(6, 31, 44, 0.52);
}

.page-motion-band-scene-technologien .page-motion-chip,
.page-motion-band-scene-technologien .page-motion-panel {
  border-color: rgba(132, 180, 255, 0.24);
}

.page-motion-band-scene-technologien .page-motion-panel {
  background: rgba(8, 25, 54, 0.5);
}

.page-motion-band-scene-projekte .page-motion-chip,
.page-motion-band-scene-projekte .page-motion-panel {
  border-color: rgba(142, 246, 231, 0.22);
}

.page-motion-band-scene-projekte .page-motion-panel {
  background: rgba(7, 35, 45, 0.52);
}

.page-motion-band-scene-magazin .page-motion-panel,
.page-motion-band-scene-magazin-data .page-motion-panel,
.page-motion-band-scene-magazin-portal .page-motion-panel,
.page-motion-band-scene-magazin-modernisierung .page-motion-panel {
  background: rgba(7, 29, 42, 0.5);
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

.entry-content h2,
.entry-content h3 {
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.entry-content h2 {
  margin: 0 0 1.15rem;
  font-size: clamp(1.58rem, 2.7vw, 2.08rem);
}

.entry-content h3 {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.entry-content p,
.entry-content li {
  color: var(--site-muted);
  line-height: 1.8;
}

.page-shell .entry-content h2 {
  color: var(--page-accent-strong);
}

.page-shell .entry-content .info-card,
.page-shell .entry-content .contact-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--page-accent-soft));
  border-color: var(--page-accent-surface);
}

.page-shell .entry-content .card-kicker {
  color: var(--page-accent-strong);
  background: var(--page-accent-soft);
  border-color: var(--page-accent-surface);
}

.entry-content section + section,
.entry-content .section-stack > section + section {
  margin-top: 3.55rem;
}

.single-entry .entry-content > h2:not(:first-child) {
  margin-top: 3.35rem;
}

.entry-content .content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.2rem;
}

.entry-content .project-grid,
.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.entry-content .contact-grid {
  grid-template-columns: 1.15fr 0.85fr;
}

.entry-content .stacked-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.entry-content ul {
  padding-left: 1.15rem;
}

.entry-content .accent-list {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
}

.entry-content .accent-list li {
  position: relative;
  padding-left: 1.25rem;
  margin-top: 0.65rem;
}

.entry-content .accent-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: var(--page-accent, var(--site-blue));
}

.entry-content .lead-block {
  max-width: 52rem;
  font-size: 1.08rem;
}

.entry-content .cta-panel {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: var(--site-radius);
  background: linear-gradient(180deg, var(--page-accent-soft), rgba(255, 255, 255, 0.78));
  border: 1px solid var(--page-accent-surface);
}

.article-share-panel {
  display: grid;
  gap: 1rem;
  margin-top: 2.2rem;
  padding: 1.45rem;
  border-radius: calc(var(--site-radius) + 0.05rem);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.95)),
    linear-gradient(135deg, var(--page-accent-soft), rgba(255, 255, 255, 0));
  border: 1px solid rgba(214, 224, 234, 0.92);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.08);
}

.article-share-copy {
  display: grid;
  gap: 0.35rem;
}

.article-share-kicker {
  margin: 0;
  color: var(--page-accent-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.article-share-title {
  display: block;
  color: var(--site-heading);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.article-share-text,
.article-share-note,
.article-share-feedback {
  margin: 0;
  color: var(--site-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.article-share-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.article-share-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 2.8rem;
  padding: 0.72rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(214, 224, 234, 0.92);
  background: rgba(255, 255, 255, 0.96);
  color: var(--site-heading);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

button.article-share-chip {
  appearance: none;
  cursor: pointer;
}

.article-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.08rem;
  height: 1.08rem;
  flex: 0 0 auto;
}

.article-share-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.article-share-chip:hover,
.article-share-chip:focus {
  transform: translateY(-1px);
  color: var(--site-heading);
  border-color: var(--page-accent-surface);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}

.article-share-chip-linkedin {
  color: #0a66c2;
}

.article-share-chip-x {
  color: #111827;
}

.article-share-chip-xing {
  color: #006567;
}

.article-share-chip-facebook {
  color: #1877f2;
}

.article-share-chip-whatsapp {
  color: #1fa855;
}

.article-share-chip-email {
  color: #b45309;
}

.article-share-chip-copy {
  color: var(--page-accent-strong);
}

.article-share-chip-instagram {
  color: #b83280;
}

.article-share-chip-instagram .article-share-icon {
  background: linear-gradient(135deg, #f58529, #dd2a7b 52%, #8134af);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.article-share-feedback {
  min-height: 1.45rem;
  color: var(--page-accent-strong);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.article-share-feedback.is-visible {
  opacity: 1;
}

.entry-content a.info-card.topic-link-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
  color: inherit;
  text-decoration: none;
}

.front-section-special-topics .detail-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  align-items: start;
}

.entry-content a.info-card.topic-link-card:hover,
.entry-content a.info-card.topic-link-card:focus {
  color: inherit;
}

/* Keep topic-card CTAs on a shared bottom row regardless of text length. */
.entry-content .topic-link-arrow,
.front-section-special-topics .topic-link-arrow {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  margin-top: 1.1rem;
  padding-top: 0;
  align-self: start;
  color: var(--page-accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: none;
  text-decoration: none;
}

.entry-content .topic-link-arrow::after,
.front-section-special-topics .topic-link-arrow::after {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.front-section-special-topics .topic-link-arrow,
.front-section-special-topics .topic-link-arrow:visited {
  color: var(--site-blue);
}

.front-section-special-topics .topic-link-arrow:hover,
.front-section-special-topics .topic-link-arrow:focus {
  color: var(--site-blue-strong);
}

@media (min-width: 992px) {
  .page-content-head h2 {
    white-space: nowrap;
  }
}

.entry-content .topic-split {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(19rem, 0.86fr);
  gap: 1.25rem;
  align-items: center;
  margin-top: 1.4rem;
}

.entry-content .topic-split-reverse {
  grid-template-columns: minmax(19rem, 0.88fr) minmax(0, 1.12fr);
}

.entry-content .topic-copy > p {
  margin-bottom: 0;
}

.entry-content .topic-copy > p + p,
.entry-content .topic-copy > ul,
.entry-content .topic-copy > .stacked-grid,
.entry-content .topic-copy > .content-grid {
  margin-top: 1rem;
}

.entry-content .topic-sketch {
  position: relative;
  min-height: 18rem;
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--site-radius) + 0.12rem);
  border: 1px solid rgba(214, 224, 234, 0.92);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.92)),
    linear-gradient(140deg, var(--page-accent-soft), rgba(255, 255, 255, 0));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.entry-content .topic-sketch::before,
.entry-content .topic-sketch::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.entry-content .topic-sketch::before {
  inset: -18% auto auto -10%;
  width: 11rem;
  height: 11rem;
  background: radial-gradient(circle, var(--page-accent-glow), rgba(255, 255, 255, 0));
  opacity: 0.78;
}

.entry-content .topic-sketch::after {
  right: -10%;
  bottom: -22%;
  width: 12rem;
  height: 12rem;
  background: radial-gradient(circle, rgba(255, 226, 176, 0.8), rgba(255, 255, 255, 0));
  opacity: 0.72;
}

.entry-content .topic-sketch-core,
.entry-content .topic-sketch-node,
.entry-content .topic-sketch-panel,
.entry-content .topic-sketch-api,
.entry-content .topic-sketch-store,
.entry-content .topic-sketch-layer,
.entry-content .topic-sketch-side,
.entry-content .topic-sketch-lane,
.entry-content .topic-sketch-bridge,
.entry-content .topic-sketch-chip {
  position: absolute;
  z-index: 1;
}

.entry-content .topic-sketch-core,
.entry-content .topic-sketch-node,
.entry-content .topic-sketch-panel,
.entry-content .topic-sketch-api,
.entry-content .topic-sketch-store,
.entry-content .topic-sketch-layer,
.entry-content .topic-sketch-lane {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.85rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.08);
  color: #153548;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.entry-content .topic-sketch-chip,
.entry-content .topic-sketch-side,
.entry-content .topic-sketch-bridge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.85rem;
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.94);
  color: var(--page-accent-strong);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.06);
}

.entry-content .topic-sketch-line {
  position: absolute;
  z-index: 0;
  height: 0.18rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--page-accent), rgba(255, 255, 255, 0));
  opacity: 0.86;
}

.entry-content .topic-sketch-delphi .topic-sketch-core {
  top: 50%;
  left: 22%;
  min-width: 8.8rem;
  transform: translateY(-50%);
}

.entry-content .topic-sketch-delphi .topic-sketch-node {
  min-width: 6.7rem;
}

.entry-content .topic-sketch-delphi .topic-sketch-node-a {
  top: 16%;
  right: 8%;
}

.entry-content .topic-sketch-delphi .topic-sketch-node-b {
  top: 43%;
  right: 5%;
}

.entry-content .topic-sketch-delphi .topic-sketch-node-c {
  bottom: 13%;
  right: 10%;
}

.entry-content .topic-sketch-delphi .topic-sketch-line-a {
  top: 33%;
  left: 39%;
  width: 32%;
  transform: rotate(-15deg);
}

.entry-content .topic-sketch-delphi .topic-sketch-line-b {
  top: 49.5%;
  left: 39%;
  width: 35%;
}

.entry-content .topic-sketch-delphi .topic-sketch-line-c {
  top: 66%;
  left: 39%;
  width: 31%;
  transform: rotate(15deg);
}

.entry-content .topic-sketch-delphi .topic-sketch-chip-a {
  top: 10%;
  left: 8%;
}

.entry-content .topic-sketch-delphi .topic-sketch-chip-b {
  top: 24%;
  left: 16%;
}

.entry-content .topic-sketch-delphi .topic-sketch-chip-c {
  bottom: 12%;
  left: 12%;
}

.entry-content .topic-sketch-csharp .topic-sketch-api {
  top: 50%;
  left: 50%;
  min-width: 7rem;
  transform: translate(-50%, -50%);
}

.entry-content .topic-sketch-csharp .topic-sketch-panel-top {
  top: 15%;
  left: 50%;
  min-width: 7rem;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-csharp .topic-sketch-panel-left {
  top: 45%;
  left: 8%;
  min-width: 7rem;
}

.entry-content .topic-sketch-csharp .topic-sketch-panel-right {
  top: 45%;
  right: 8%;
  min-width: 7rem;
}

.entry-content .topic-sketch-csharp .topic-sketch-store {
  bottom: 14%;
  left: 50%;
  min-width: 8rem;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-csharp .topic-sketch-api::before,
.entry-content .topic-sketch-csharp .topic-sketch-api::after,
.entry-content .topic-sketch-csharp .topic-sketch-store::before {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--page-accent), rgba(255, 255, 255, 0));
  opacity: 0.78;
}

.entry-content .topic-sketch-csharp .topic-sketch-api::before {
  top: -3.5rem;
  left: 50%;
  width: 0.16rem;
  height: 3rem;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-csharp .topic-sketch-api::after {
  top: 50%;
  left: -4rem;
  width: 8rem;
  height: 0.16rem;
  transform: translateY(-50%);
}

.entry-content .topic-sketch-csharp .topic-sketch-store::before {
  top: -3rem;
  left: 50%;
  width: 0.16rem;
  height: 2.5rem;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-service-map .topic-sketch-core {
  top: 50%;
  left: 50%;
  min-width: 8.8rem;
  transform: translate(-50%, -50%);
}

.entry-content .topic-sketch-service-map .topic-sketch-node {
  min-width: 6rem;
}

.entry-content .topic-sketch-service-map .topic-sketch-node-a {
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-service-map .topic-sketch-node-b {
  top: 34%;
  right: 8%;
}

.entry-content .topic-sketch-service-map .topic-sketch-node-c {
  bottom: 14%;
  left: 10%;
}

.entry-content .topic-sketch-service-map .topic-sketch-node-d {
  bottom: 12%;
  right: 12%;
}

.entry-content .topic-sketch-service-map .topic-sketch-line-a {
  top: 31%;
  left: 46%;
  width: 12%;
  transform: rotate(-88deg);
}

.entry-content .topic-sketch-service-map .topic-sketch-line-b {
  top: 45%;
  left: 58%;
  width: 16%;
  transform: rotate(-14deg);
}

.entry-content .topic-sketch-service-map .topic-sketch-line-c {
  top: 64%;
  left: 28%;
  width: 19%;
  transform: rotate(-28deg);
}

.entry-content .topic-sketch-service-map .topic-sketch-line-d {
  top: 66%;
  left: 55%;
  width: 16%;
  transform: rotate(26deg);
}

.entry-content .topic-sketch-service-map .topic-sketch-chip-a {
  top: 41%;
  left: 6%;
}

.entry-content .topic-sketch-service-map .topic-sketch-chip-b {
  top: 8%;
  right: 18%;
}

.entry-content .topic-sketch-service-map .topic-sketch-chip-c {
  bottom: 8%;
  left: 42%;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-layer3 {
  display: grid;
  align-content: center;
  justify-items: center;
}

.entry-content .topic-sketch-layer3 .topic-sketch-layer {
  left: 50%;
  width: 12rem;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-layer3 .topic-sketch-layer-ui {
  top: 18%;
}

.entry-content .topic-sketch-layer3 .topic-sketch-layer-domain {
  top: 42%;
}

.entry-content .topic-sketch-layer3 .topic-sketch-layer-data {
  top: 66%;
}

.entry-content .topic-sketch-layer3 .topic-sketch-side-a {
  top: 22%;
  right: 8%;
}

.entry-content .topic-sketch-layer3 .topic-sketch-side-b {
  top: 46%;
  right: 6%;
}

.entry-content .topic-sketch-layer3 .topic-sketch-side-c {
  top: 70%;
  right: 10%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-core {
  top: 50%;
  left: 50%;
  min-width: 8.8rem;
  transform: translate(-50%, -50%);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-node {
  min-width: 6.4rem;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-node-a {
  top: 14%;
  left: 10%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-node-b {
  top: 14%;
  right: 10%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-node-c {
  bottom: 14%;
  right: 8%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-node-d {
  bottom: 14%;
  left: 10%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-line-a {
  top: 34%;
  left: 28%;
  width: 21%;
  transform: rotate(28deg);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-line-b {
  top: 34%;
  right: 28%;
  width: 21%;
  transform: rotate(-28deg);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-line-c {
  bottom: 34%;
  left: 28%;
  width: 21%;
  transform: rotate(-28deg);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-line-d {
  bottom: 34%;
  right: 28%;
  width: 21%;
  transform: rotate(28deg);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-chip-a {
  top: 46%;
  left: 4%;
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-chip-b {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-unternehmenssoftware-economics .topic-sketch-chip-c {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-arm64 .topic-sketch-lane {
  width: 9rem;
  justify-content: space-between;
  gap: 0.6rem;
}

.entry-content .topic-sketch-arm64 .topic-sketch-lane strong,
.entry-content .topic-sketch-arm64 .topic-sketch-lane span {
  display: block;
}

.entry-content .topic-sketch-arm64 .topic-sketch-lane span {
  color: var(--site-muted);
  font-size: 0.78rem;
  font-weight: 600;
}

.entry-content .topic-sketch-arm64 .topic-sketch-lane-a {
  top: 24%;
  left: 10%;
}

.entry-content .topic-sketch-arm64 .topic-sketch-lane-b {
  bottom: 22%;
  right: 10%;
}

.entry-content .topic-sketch-arm64 .topic-sketch-bridge-a {
  top: 18%;
  right: 12%;
}

.entry-content .topic-sketch-arm64 .topic-sketch-bridge-b {
  top: 45%;
  left: 38%;
}

.entry-content .topic-sketch-arm64 .topic-sketch-bridge-c {
  bottom: 18%;
  left: 12%;
}

.entry-content .topic-sketch-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.9rem;
  min-height: 4.9rem;
  padding: 0.55rem;
  border-radius: 1.3rem;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.12);
}

.entry-content .topic-visual-stack {
  display: grid;
  gap: 0.75rem;
}

.entry-content .topic-sketch-note {
  margin: 0;
  color: var(--site-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.entry-content .topic-sketch-brand {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.52rem;
  min-width: 6.1rem;
  min-height: 3rem;
  padding: 0.42rem 0.72rem;
  border-radius: 1rem;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.14);
}

.entry-content .topic-sketch-brand sup {
  position: relative;
  top: -0.2em;
  font-size: 0.62em;
}

.entry-content .topic-brand-icon {
  position: relative;
  display: inline-block;
  flex: 0 0 1.35em;
  width: 1.35em;
  height: 1.35em;
  font-size: 1rem;
}

.entry-content .topic-brand-icon::before,
.entry-content .topic-brand-icon::after {
  content: "";
  position: absolute;
}

.entry-content .topic-brand-icon-windows::before {
  top: 0.08em;
  left: 0.08em;
  width: 0.46em;
  height: 0.46em;
  border-radius: 0.05em;
  background: #ffffff;
  box-shadow: 0.58em 0 0 #ffffff, 0 0.58em 0 #ffffff, 0.58em 0.58em 0 #ffffff;
}

.entry-content .topic-brand-icon-apple::before,
.entry-content .topic-brand-icon-ios::before {
  left: 0.24em;
  top: 0.24em;
  width: 0.84em;
  height: 0.92em;
  border-radius: 54% 46% 56% 44%;
  background: #ffffff;
  transform: rotate(-12deg);
}

.entry-content .topic-brand-icon-apple::after,
.entry-content .topic-brand-icon-ios::after {
  left: 0.82em;
  top: 0.02em;
  width: 0.32em;
  height: 0.22em;
  border-radius: 60% 0 60% 60%;
  background: #ffffff;
  transform: rotate(-34deg);
}

.entry-content .topic-brand-icon-linux::before {
  left: 0.28em;
  top: 0.1em;
  width: 0.8em;
  height: 1.04em;
  border-radius: 0.44em 0.44em 0.38em 0.38em;
  background: #ffffff;
}

.entry-content .topic-brand-icon-linux::after {
  left: 0.42em;
  top: 0.24em;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: #111827;
  box-shadow: 0.24em 0 0 #111827, -0.1em 0.68em 0 #ffcf5a, 0.28em 0.68em 0 #ffcf5a;
}

.entry-content .topic-brand-icon-android::before {
  left: 0.24em;
  top: 0.34em;
  width: 0.88em;
  height: 0.68em;
  border-radius: 0.42em 0.42em 0.2em 0.2em;
  background: #ffffff;
}

.entry-content .topic-brand-icon-android::after {
  left: 0.48em;
  top: 0.16em;
  width: 0.12em;
  height: 0.12em;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0.28em 0 0 #ffffff;
}

.entry-content .topic-brand-icon-arm64::before {
  inset: 0.14em;
  border: 0.12em solid #ffffff;
  border-radius: 0.2em;
}

.entry-content .topic-brand-icon-arm64::after {
  left: 0.42em;
  top: 0.58em;
  width: 0.52em;
  height: 0.1em;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 -0.26em 0 #ffffff, 0 0.26em 0 #ffffff;
}

.entry-content .topic-sketch-platforms .topic-sketch-core {
  top: 50%;
  left: 50%;
  min-width: 8.4rem;
  transform: translate(-50%, -50%);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-a {
  top: 29%;
  left: 47%;
  width: 17%;
  transform: rotate(-55deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-b {
  top: 41%;
  left: 58%;
  width: 16%;
  transform: rotate(-14deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-c {
  top: 59%;
  left: 56%;
  width: 15%;
  transform: rotate(28deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-d {
  top: 61%;
  left: 31%;
  width: 15%;
  transform: rotate(-28deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-e {
  top: 42%;
  left: 26%;
  width: 16%;
  transform: rotate(16deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-line-f {
  top: 24%;
  left: 34%;
  width: 16%;
  transform: rotate(58deg);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-windows {
  top: 8%;
  left: 14%;
  background: linear-gradient(135deg, #1b92ff, #46c5ff);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-macos {
  top: 10%;
  right: 14%;
  background: linear-gradient(135deg, #6a7383, #2d3442);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-linux {
  right: 12%;
  bottom: 12%;
  background: linear-gradient(135deg, #ffb347, #ff7a18);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-ios {
  left: 16%;
  bottom: 12%;
  background: linear-gradient(135deg, #0f172a, #3b82f6);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-android {
  top: 36%;
  left: 4%;
  background: linear-gradient(135deg, #84cc16, #22c55e);
}

.entry-content .topic-sketch-platforms .topic-sketch-glyph-arm64 {
  top: 36%;
  right: 4%;
  background: linear-gradient(135deg, #fb7185, #f59e0b);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-windows {
  top: 8%;
  left: 14%;
  background: linear-gradient(135deg, #1b92ff, #46c5ff);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-apple {
  top: 10%;
  right: 14%;
  background: linear-gradient(135deg, #636b77, #242b38);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-linux {
  right: 12%;
  bottom: 12%;
  background: linear-gradient(135deg, #ffb347, #ff7a18);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-ios {
  left: 16%;
  bottom: 12%;
  background: linear-gradient(135deg, #162034, #2b6ff0);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-android {
  top: 36%;
  left: 4%;
  background: linear-gradient(135deg, #84cc16, #22c55e);
}

.entry-content .topic-sketch-platforms .topic-sketch-brand-arm64 {
  top: 36%;
  right: 4%;
  background: linear-gradient(135deg, #fb7185, #f59e0b);
}

.entry-content .topic-sketch-integration-map .topic-sketch-core {
  top: 50%;
  left: 50%;
  min-width: 8.8rem;
  transform: translate(-50%, -50%);
}

.entry-content .topic-sketch-integration-map .topic-sketch-node {
  min-width: 5.8rem;
}

.entry-content .topic-sketch-integration-map .topic-sketch-node-a {
  top: 13%;
  left: 12%;
}

.entry-content .topic-sketch-integration-map .topic-sketch-node-b {
  top: 13%;
  right: 12%;
}

.entry-content .topic-sketch-integration-map .topic-sketch-node-c {
  bottom: 13%;
  left: 13%;
}

.entry-content .topic-sketch-integration-map .topic-sketch-node-d {
  bottom: 13%;
  right: 11%;
}

.entry-content .topic-sketch-integration-map .topic-sketch-line-a {
  top: 34%;
  left: 28%;
  width: 23%;
  transform: rotate(30deg);
}

.entry-content .topic-sketch-integration-map .topic-sketch-line-b {
  top: 34%;
  right: 28%;
  width: 23%;
  transform: rotate(-30deg);
}

.entry-content .topic-sketch-integration-map .topic-sketch-line-c {
  bottom: 34%;
  left: 28%;
  width: 23%;
  transform: rotate(-30deg);
}

.entry-content .topic-sketch-integration-map .topic-sketch-line-d {
  bottom: 34%;
  right: 28%;
  width: 23%;
  transform: rotate(30deg);
}

.entry-content .topic-sketch-integration-map .topic-sketch-chip-a {
  top: 45%;
  left: 8%;
}

.entry-content .topic-sketch-integration-map .topic-sketch-chip-b {
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.entry-content .topic-sketch-integration-map .topic-sketch-chip-c {
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
}

.entry-content .reference-linkline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.15rem;
}

.entry-content .reference-authority-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid var(--page-accent-surface);
  color: var(--page-accent-strong);
  text-decoration: none;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
}

.entry-content .reference-gallery,
.entry-content .reference-side {
  display: grid;
  gap: 1rem;
}

.entry-content .reference-teaser-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}

.entry-content .reference-teaser {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: calc(var(--site-radius) + 0.12rem);
  border: 1px solid rgba(214, 224, 234, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), var(--page-accent-soft));
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.entry-content .reference-teaser-media {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}

.entry-content .reference-teaser-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center center;
}

.entry-content .reference-teaser-badge {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: inline-flex;
  align-items: center;
  min-height: 1.78rem;
  padding: 0.22rem 0.66rem;
  border-radius: 999px;
  background: rgba(12, 23, 42, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.entry-content .reference-teaser-body {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  padding: 1.2rem 1.2rem 1.3rem;
}

.entry-content .reference-teaser-body h3 {
  margin: 0;
}

.entry-content .reference-teaser-body h3 a {
  color: var(--site-ink);
  text-decoration: none;
}

.entry-content .reference-teaser-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.entry-content .reference-teaser-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.9rem;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--page-accent-surface);
  color: var(--page-accent-strong);
  font-size: 0.78rem;
  font-weight: 700;
}

.entry-content .reference-gallery {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.4rem;
}

.entry-content .reference-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.9fr);
  gap: 1.2rem;
  align-items: start;
}

.entry-content .reference-split-reverse {
  grid-template-columns: minmax(18rem, 0.92fr) minmax(0, 1.18fr);
}

.entry-content .reference-side-triple {
  grid-template-columns: 1fr;
}

.entry-content .reference-copy > .accent-list {
  margin-top: 1.2rem;
}

.entry-content .reference-figure {
  margin: 0;
  overflow: hidden;
  border-radius: calc(var(--site-radius) + 0.1rem);
  border: 1px solid rgba(214, 224, 234, 0.92);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), var(--page-accent-soft));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
}

.entry-content .reference-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center center;
}

.entry-content .reference-side-triple .reference-figure img {
  aspect-ratio: 16 / 9.2;
}

.entry-content .reference-figure figcaption {
  padding: 0.85rem 0.95rem 0.95rem;
  color: var(--site-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.nbcc-form-wrap {
  margin-top: 1.35rem;
}

.nbcc-form-notice {
  margin-bottom: 1rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

.nbcc-form-notice.is-success {
  color: #0f5132;
  background: #e8f7ef;
  border-color: rgba(15, 81, 50, 0.15);
}

.nbcc-form-notice.is-error {
  color: #842029;
  background: #fbeaec;
  border-color: rgba(132, 32, 41, 0.16);
}

.nbcc-contact-form {
  display: grid;
  gap: 1rem;
}

.nbcc-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.nbcc-field {
  margin: 0;
}

.nbcc-field label {
  display: block;
  margin-bottom: 0.42rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--site-ink);
}

.nbcc-contact-form input[type="text"],
.nbcc-contact-form input[type="email"],
.nbcc-contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--site-ink);
  background: rgba(255, 255, 255, 0.94);
}

.nbcc-contact-form textarea {
  min-height: 12rem;
  resize: vertical;
}

.nbcc-contact-form input[type="text"]:focus,
.nbcc-contact-form input[type="email"]:focus,
.nbcc-contact-form textarea:focus {
  outline: none;
  border-color: rgba(0, 142, 197, 0.42);
  box-shadow: 0 0 0 4px rgba(0, 142, 197, 0.12);
}

.nbcc-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: flex-start;
  color: var(--site-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.nbcc-consent input {
  margin-top: 0.2rem;
}

.nbcc-consent a {
  color: var(--site-blue-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.nbcc-field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.nbcc-email-obfuscated {
  letter-spacing: 0.01em;
  word-break: break-word;
}

.cta-shell {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border-radius: calc(var(--site-radius) + 0.2rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 247, 251, 0.92));
  border: 1px solid rgba(217, 226, 236, 0.9);
  box-shadow: var(--site-shadow);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: flex-end;
}

.magazine-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}

.magazine-sidebar {
  position: relative;
}

.magazine-sidebar-card {
  position: sticky;
  top: 1.4rem;
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid rgba(214, 224, 234, 0.95);
  border-radius: calc(var(--site-radius) + 0.05rem);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(241, 246, 252, 0.95));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.07);
}

.magazine-sidebar-card h2 {
  margin: -0.2rem 0 0;
  font-size: 1.3rem;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.magazine-sidebar-copy,
.magazine-section-copy {
  margin: 0;
  color: var(--site-muted);
}

.magazine-sidebar-nav {
  display: grid;
  gap: 0.65rem;
}

.magazine-sidebar-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(203, 214, 226, 0.92);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.86);
  color: var(--site-ink);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.magazine-sidebar-link:hover,
.magazine-sidebar-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(26, 113, 184, 0.32);
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
}

.magazine-sidebar-link.is-active {
  border-color: rgba(12, 110, 167, 0.46);
  background: linear-gradient(135deg, rgba(11, 122, 170, 0.13), rgba(13, 110, 253, 0.08));
  box-shadow: 0 14px 26px rgba(11, 122, 170, 0.14);
}

.magazine-sidebar-label {
  font-weight: 700;
  line-height: 1.2;
}

.magazine-sidebar-count {
  flex: 0 0 auto;
  min-width: 2.1rem;
  padding: 0.32rem 0.5rem;
  border-radius: 999px;
  background: rgba(9, 40, 67, 0.08);
  color: var(--site-blue-strong);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.magazine-archive-main {
  min-width: 0;
}

.magazine-section-head {
  margin-bottom: 1.6rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--site-line);
}

.magazine-section-head h2 {
  margin: -0.15rem 0 0.55rem;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.archive-entry + .archive-entry {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--site-line);
}

.archive-entry-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 1.35rem;
  align-items: center;
}

.archive-entry-body {
  min-width: 0;
}

.archive-entry-media {
  position: relative;
  display: block;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: calc(var(--site-radius) + 0.1rem);
  border: 1px solid rgba(214, 224, 234, 0.9);
  background: linear-gradient(135deg, rgba(11, 122, 170, 0.08), rgba(13, 110, 253, 0.04));
  aspect-ratio: 16 / 10.4;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09);
}

.archive-entry-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 18, 32, 0.03), rgba(6, 18, 32, 0.14) 52%, rgba(6, 18, 32, 0.48)),
    linear-gradient(140deg, rgba(0, 142, 197, 0.2), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.archive-entry-overlay {
  position: absolute;
  inset: auto 1rem 1rem;
  z-index: 1;
  display: grid;
  gap: 0.45rem;
  max-width: min(84%, 18rem);
}

.archive-entry-kicker {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 0.36rem 0.78rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--site-blue-strong);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
}

.archive-entry-visual-title {
  display: block;
  padding: 0.95rem 1rem 1rem;
  border-radius: 1rem;
  background: rgba(8, 18, 32, 0.58);
  color: #ffffff;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  text-wrap: pretty;
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 28px rgba(6, 18, 32, 0.2);
}

.archive-entry-media:hover .archive-entry-image,
.archive-entry-media:focus-visible .archive-entry-image {
  transform: scale(1.025);
}

.archive-entry-image {
  transition: transform 0.45s ease;
  filter: saturate(0.92) contrast(1.03);
}

.archive-entry-title {
  margin: 0 0 0.75rem;
  font-size: clamp(1.28rem, 2vw, 1.56rem);
  line-height: 1.14;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.archive-entry-summary {
  color: var(--site-muted);
}

.archive-entry-summary p:first-child {
  margin-top: 0;
}

.archive-entry-summary p:last-child,
.single-entry .entry-content p:last-child {
  margin-bottom: 0;
}

.archive-meta,
.single-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
  color: var(--site-blue-strong);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.archive-branch-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.32rem 0.62rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.archive-branch-badge-magazine {
  background: rgba(12, 110, 167, 0.12);
  color: var(--site-blue-strong);
}

.archive-branch-badge-source_snippets {
  background: rgba(196, 84, 26, 0.14);
  color: #8d3d0f;
}

.archive-meta-date {
  color: var(--site-blue-strong);
}

@media (max-width: 991.98px) {
  .magazine-layout {
    grid-template-columns: 1fr;
  }

  .magazine-sidebar-card {
    position: static;
  }

  .archive-entry-layout {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .archive-entry-media {
    aspect-ratio: 16 / 9.8;
  }
}

.footer-title {
  font-size: 1.1rem;
}

.footer-copy,
.footer-meta,
.footer-list,
.footer-stack {
  color: var(--site-muted);
}

.footer-label {
  margin: 0 0 0.75rem;
  color: var(--site-ink);
  font-weight: 700;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.9;
}

.footer-stack {
  display: grid;
  gap: 0.08rem;
  line-height: 1.45;
}

.site-footer ul,
.site-footer .footer-list,
.site-footer .footer-list li {
  list-style: none !important;
  margin-left: 0;
  padding-left: 0;
}

.site-footer .footer-list li::marker,
.site-footer ul li::marker {
  content: "";
}

.footer-meta {
  font-size: 0.94rem;
}

@keyframes hero-slide-rotate {
  0%,
  25% {
    opacity: 0;
    transform: scale(1);
  }

  8%,
  20% {
    opacity: 1;
    transform: scale(1.04);
  }

  33%,
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes hero-sheen {
  0%,
  100% {
    transform: translateX(0) rotate(12deg);
    opacity: 0.2;
  }

  50% {
    transform: translateX(150%) rotate(12deg);
    opacity: 0.4;
  }
}

@keyframes hero-stage-grid-shift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-1.75rem, -1.75rem, 0);
  }
}

@keyframes hero-stage-beam-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(5%, -4%, 0) scale(1.08);
  }
}

@keyframes hero-stage-orbit-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes hero-stage-card-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.45rem);
  }
}

@keyframes hero-stage-bar-pulse {
  0%,
  100% {
    opacity: 0.62;
    transform: scaleX(0.94);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes hero-stage-node-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 240, 255, 0.45);
    transform: scale(0.95);
  }

  60% {
    box-shadow: 0 0 0 0.95rem rgba(124, 240, 255, 0);
    transform: scale(1.08);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(124, 240, 255, 0);
    transform: scale(0.95);
  }
}

@keyframes hero-stage-link-sweep {
  0%,
  100% {
    opacity: 0.24;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.92;
    filter: brightness(1.12);
  }
}

@keyframes hero-motion-grid-drift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-3.15rem, -3.15rem, 0);
  }
}

@keyframes hero-motion-glow-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(0.8rem, -0.7rem, 0) scale(1.08);
  }
}

@keyframes hero-motion-aurora-sweep {
  0%,
  100% {
    opacity: 0.28;
    transform: translateX(0) rotate(8deg);
  }

  50% {
    opacity: 0.56;
    transform: translateX(1.2rem) rotate(4deg);
  }
}

@keyframes hero-motion-ring-spin {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.03);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes hero-motion-lane-run {
  0% {
    left: -28%;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: 104%;
    opacity: 0;
  }
}

@keyframes hero-motion-card-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.45rem);
  }
}

@keyframes hero-motion-pulse-ring {
  0% {
    box-shadow: 0 0 0 0 rgba(124, 240, 255, 0.38);
    transform: scale(0.92);
  }

  70% {
    box-shadow: 0 0 0 1rem rgba(124, 240, 255, 0);
    transform: scale(1.06);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(124, 240, 255, 0);
    transform: scale(0.92);
  }
}

@keyframes page-band-overlay-shift {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }

  100% {
    background-position: 8rem 0, 0 0, 0 8rem;
  }
}

@keyframes page-grid-shift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2rem, -2rem, 0);
  }
}

@keyframes beam-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(4%, -4%, 0) scale(1.08);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.82);
    opacity: 0.08;
  }

  35% {
    opacity: 0.34;
  }

  100% {
    transform: scale(1.26);
    opacity: 0;
  }
}

@keyframes motion-panel-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-0.4rem);
  }
}

@keyframes scanline-sweep {
  0% {
    transform: translate3d(-2%, 0, 0);
    opacity: 0.12;
  }

  15% {
    opacity: 0.5;
  }

  50% {
    transform: translate3d(2%, 0, 0);
    opacity: 0.26;
  }

  100% {
    transform: translate3d(-2%, 0, 0);
    opacity: 0.12;
  }
}

@keyframes scene-badge-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -0.5rem, 0);
  }
}

@keyframes scene-ring-drift {
  0%,
  100% {
    transform: scale(1) translate3d(0, 0, 0);
  }

  50% {
    transform: scale(1.05) translate3d(2%, -2%, 0);
  }
}

@keyframes scene-path-flow {
  0% {
    opacity: 0.18;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.72;
    filter: brightness(1.08);
  }

  100% {
    opacity: 0.18;
    filter: brightness(0.9);
  }
}

@keyframes about-sunray-glow {
  0% {
    opacity: 0.34;
    transform: scaleX(0.96);
  }

  50% {
    opacity: 0.88;
    transform: scaleX(1.04);
  }

  100% {
    opacity: 0.34;
    transform: scaleX(0.96);
  }
}

@keyframes migration-dot-flow {
  0% {
    top: 8%;
    opacity: 0;
    box-shadow: 0 0 0 0 rgba(136, 246, 255, 0.34);
  }

  15% {
    opacity: 1;
  }

  100% {
    top: 82%;
    opacity: 0;
    box-shadow: 0 0 0 0.9rem rgba(136, 246, 255, 0);
  }
}

@keyframes stack-core-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 28px 54px rgba(7, 17, 44, 0.24);
  }

  50% {
    transform: scale(1.04);
    box-shadow: 0 36px 64px rgba(7, 17, 44, 0.3);
  }
}

@keyframes stack-link-flash {
  0%,
  100% {
    opacity: 0.28;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.88;
    filter: brightness(1.14);
  }
}

@keyframes project-tile-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -0.55rem, 0);
  }
}

@keyframes editorial-sheet-sway {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(var(--sheet-tilt, 0deg));
  }

  50% {
    transform: translate3d(0, -0.5rem, 0) rotate(calc(var(--sheet-tilt, 0deg) + 1.2deg));
  }
}

@keyframes query-line-shift {
  0%,
  100% {
    opacity: 0.62;
    transform: scaleX(0.96);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes query-cursor-blink {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

@keyframes database-disc-rise {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.92;
  }

  50% {
    transform: translate3d(0, -0.45rem, 0);
    opacity: 1;
  }
}

@keyframes portal-phone-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  50% {
    transform: translate3d(0, -0.5rem, 0) rotate(1deg);
  }
}

@keyframes portal-signal-wave {
  0% {
    transform: scale(0.76);
    opacity: 0;
  }

  30% {
    opacity: 0.36;
  }

  100% {
    transform: scale(1.18);
    opacity: 0;
  }
}

@keyframes csharp-symbol-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -0.32rem, 0);
  }
}

@keyframes csharp-feed-flow {
  0% {
    transform: translate3d(0, 0, 0) scale(0.92);
    opacity: 0;
  }

  10% {
    opacity: 0.96;
  }

  36% {
    transform: translate3d(var(--feed-mid-x), var(--feed-mid-y), 0) scale(0.28);
    opacity: 0.28;
  }

  46% {
    transform: translate3d(calc(var(--feed-mid-x) + 0.28rem), calc(var(--feed-mid-y) + 0.08rem), 0) scale(0.12);
    opacity: 0;
  }

  56% {
    transform: translate3d(calc(var(--feed-mid-x) - 1.3rem), calc(var(--feed-mid-y) + 0.14rem), 0) scale(0.14);
    opacity: 0;
  }

  68% {
    transform: translate3d(calc(var(--feed-mid-x) - 3rem), calc(var(--feed-mid-y) - 0.18rem), 0) scale(0.52);
    opacity: 0.76;
  }

  100% {
    transform: translate3d(var(--feed-end-x), var(--feed-end-y), 0) scale(0.96);
    opacity: 0;
  }
}

@keyframes csharp-line-breathe {
  0%,
  100% {
    transform: scaleX(0.94);
    opacity: 0.68;
  }

  50% {
    transform: scaleX(1.08);
    opacity: 1;
  }
}

@keyframes csharp-brand-glide {
  0% {
    left: -112%;
    top: 11%;
    transform: rotate(-9deg) scale(0.78);
    opacity: 0;
  }

  8% {
    opacity: 0.3;
  }

  22% {
    left: -66%;
    top: 19%;
    transform: rotate(-6deg) scale(0.88);
    opacity: 0.42;
  }

  41% {
    left: -18%;
    top: 28%;
    transform: rotate(-1deg) scale(0.95);
    opacity: 0.46;
  }

  58% {
    left: 24%;
    top: 8%;
    transform: rotate(4deg) scale(0.92);
    opacity: 0.4;
  }

  76% {
    left: 66%;
    top: 23%;
    transform: rotate(8deg) scale(0.84);
    opacity: 0.32;
  }

  100% {
    left: 112%;
    top: 14%;
    transform: rotate(12deg) scale(0.72);
    opacity: 0;
  }
}

@keyframes csharp-brand-spectrum {
  0%,
  100% {
    background-position: 0% 50%;
    filter:
      saturate(1.28)
      brightness(1.08)
      drop-shadow(0 20px 36px rgba(6, 18, 40, 0.28));
  }

  32% {
    background-position: 48% 22%;
    filter:
      saturate(1.4)
      brightness(1.12)
      drop-shadow(0 20px 36px rgba(6, 18, 40, 0.28));
  }

  68% {
    background-position: 100% 60%;
    filter:
      saturate(1.5)
      brightness(1.14)
      drop-shadow(0 20px 36px rgba(6, 18, 40, 0.28));
  }
}

@keyframes modern-arrow-nudge {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0.3rem, 0, 0);
  }
}

@media (max-width: 1199.98px) {
  .hero-metrics,
  .process-grid,
  .entry-content .project-grid,
  .entry-content .stacked-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-intro {
    position: static;
  }

  .page-motion-panels {
    grid-template-columns: 1fr;
    max-width: 34rem;
  }

  .scene-badge-b {
    right: 16%;
  }
}

@media (max-width: 991.98px) {
  .hero-copy h1,
  .section-head h2,
  .section-intro h2,
  .page-hero h1,
  .cta-shell h2 {
    max-width: none;
  }

  .hero-metrics,
  .entry-content .content-grid,
  .entry-content .contact-grid,
  .cta-shell,
  .nbcc-field-grid {
    grid-template-columns: 1fr;
  }

  .hero-showcase-media {
    min-height: 27rem;
  }

  .hero-motion-surface {
    inset: 0 0 8rem 0;
  }

  .hero-motion-cluster {
    left: 8%;
    top: 12%;
    width: 13rem;
  }

  .hero-motion-node {
    width: 9rem;
    padding: 0.8rem 0.85rem 0.9rem;
  }

  .hero-motion-node-layer {
    left: 42%;
  }

  .hero-stage-bottom-fade {
    height: 9.6rem;
  }

  .page-motion-band {
    --page-hero-height: 30rem;
    height: var(--page-hero-height);
    min-height: var(--page-hero-height);
  }

  .page-hero {
    --page-hero-height: 26rem;
    min-height: var(--page-hero-height);
  }

  .scene-badge {
    min-height: 4rem;
    padding: 0.75rem 0.95rem;
  }

  .scene-badge-a,
  .scene-badge-b,
  .scene-badge-c {
    right: 7%;
  }

  .scene-badge-b {
    top: 42%;
  }

  .scene-badge-c {
    bottom: 14%;
  }

  .cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 767.98px) {
  .content-section,
  .page-section {
    padding: 2.95rem 0;
  }

  .page-shell .page-section {
    padding-top: 1.65rem;
  }

  .hero-section,
  .page-hero {
    padding-top: 2.5rem;
  }

  .hero-metrics,
  .process-grid,
  .entry-content .content-grid,
  .entry-content .project-grid,
  .entry-content .stacked-grid,
  .nbcc-field-grid {
    grid-template-columns: 1fr;
  }

  .hero-showcase-copy {
    padding: 1.25rem;
  }

  .hero-showcase-media {
    min-height: 25rem;
  }

  .hero-motion-surface {
    inset: 0 0 7.4rem 0;
  }

  .hero-motion-cluster {
    left: 6%;
    top: 10%;
    width: 11.5rem;
    padding: 0.85rem 0.9rem 0.95rem;
  }

  .hero-motion-cluster strong {
    font-size: 0.96rem;
  }

  .hero-motion-cluster span:last-child {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .hero-motion-node {
    width: 7.6rem;
    gap: 0.35rem;
    padding: 0.7rem 0.75rem 0.8rem;
  }

  .hero-motion-node-icon {
    width: 2.3rem;
    height: 2.3rem;
  }

  .hero-motion-node-icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .hero-motion-node strong {
    font-size: 0.84rem;
  }

  .hero-motion-node span:last-child {
    font-size: 0.72rem;
    line-height: 1.34;
  }

  .hero-motion-node-delphi {
    right: 8%;
  }

  .hero-motion-node-rest {
    right: 4%;
  }

  .hero-motion-node-arm {
    left: 18%;
  }

  .hero-motion-node-layer {
    left: 40%;
  }

  .hero-stage-bottom-fade {
    height: 8.8rem;
  }

  .hero-showcase-grid {
    padding: 1rem;
  }

  .feature-topline,
  .detail-card-head,
  .metric-card-head,
  .project-card-head,
  .process-step-head {
    align-items: flex-start;
  }

  .page-motion-overlay {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
  }

  .page-motion-copy h2 {
    font-size: clamp(1.5rem, 7vw, 2.05rem);
  }

  .page-motion-band,
  .page-hero {
    --page-hero-height: 31rem;
    min-height: var(--page-hero-height);
  }

  .page-motion-panels {
    margin-top: 1.2rem;
  }

  .page-motion-band-scene-kontakt .page-motion-panels,
  .page-motion-band-scene-support .page-motion-panels {
    max-width: 33rem;
  }

  .scene-badge {
    gap: 0.65rem;
    min-height: 3.6rem;
    padding: 0.6rem 0.8rem;
  }

  .scene-badge-icon {
    width: 2.6rem;
    height: 2.6rem;
  }

  .scene-badge-label {
    font-size: 0.78rem;
  }

  .scene-ring-a {
    width: 18rem;
    height: 18rem;
  }

  .scene-ring-b {
    width: 12rem;
    height: 12rem;
  }

  .page-content-card,
  .metric-card,
  .feature-card,
  .detail-card,
  .project-card,
  .process-step,
  .entry-content .info-card,
  .entry-content .contact-card {
    padding: 1.25rem;
  }
}

@media (max-width: 1199.98px) {
  .page-overview-visual {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.9fr);
    min-height: clamp(11.8rem, 20vw, 13.8rem);
  }

  .page-content-card.has-featured-visual .featured-visual {
    height: clamp(6.6rem, 13vw, 8.2rem);
  }

  .page-motion-band-projekte {
    background:
      radial-gradient(circle at 84% 10%, rgba(142, 246, 231, 0.32), rgba(142, 246, 231, 0) 36%),
      linear-gradient(155deg, #082431, #0b495a 52%, #1189a4 100%);
  }

  .page-motion-band-kontakt {
    background:
      radial-gradient(circle at 18% 10%, rgba(128, 235, 255, 0.34), rgba(128, 235, 255, 0) 34%),
      linear-gradient(155deg, #08212d, #0b4260 50%, #0c7b98 100%);
  }

  .page-motion-band-impressum {
    background:
      radial-gradient(circle at 84% 14%, rgba(150, 236, 255, 0.3), rgba(150, 236, 255, 0) 34%),
      linear-gradient(155deg, #091e2b, #0c3654 50%, #0e6f92 100%);
  }

  .page-motion-band-datenschutz {
    background:
      radial-gradient(circle at 20% 12%, rgba(126, 255, 224, 0.28), rgba(126, 255, 224, 0) 34%),
      linear-gradient(155deg, #081c28, #0b3148 50%, #0a5a72 100%);
  }

  .page-motion-overlay {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "title"
      "copy"
      "chips"
      "panels";
  }

  .page-motion-panels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: min(56rem, 100%);
    margin-left: 0;
  }

  .page-motion-visual,
  .page-motion-band-scene-leistungen .page-motion-visual,
  .page-motion-band-scene-projekte .page-motion-visual,
  .page-motion-band-scene-referenzen .page-motion-visual,
  .page-motion-band-scene-referenz-netscope .page-motion-visual,
  .page-motion-band-scene-referenz-netnotdienst .page-motion-visual,
  .page-motion-band-scene-technologien .page-motion-visual,
  .page-motion-band-scene-csharp-services-portale .page-motion-visual,
  .page-motion-band-scene-kontakt .page-motion-visual,
  .page-motion-band-scene-support .page-motion-visual,
  .page-motion-band-scene-impressum .page-motion-visual,
  .page-motion-band-scene-datenschutz .page-motion-visual,
  .page-motion-band-scene-magazin .page-motion-visual,
  .page-motion-band-scene-magazin-data .page-motion-visual,
  .page-motion-band-scene-magazin-portal .page-motion-visual,
  .page-motion-band-scene-magazin-modernisierung .page-motion-visual {
    inset: 1.4rem 1.4rem 12rem 48%;
  }

  .stack-node {
    width: 9rem;
  }

  .project-tile {
    width: 10.5rem;
  }
}

@media (max-width: 991.98px) {
  .entry-content .topic-split,
  .entry-content .topic-split-reverse {
    grid-template-columns: 1fr;
  }

  .entry-content .topic-sketch {
    min-height: 15.8rem;
  }

  .entry-content .topic-sketch-glyph {
    min-width: 4.2rem;
    min-height: 4.2rem;
    font-size: 0.72rem;
  }

  .entry-content .topic-sketch-brand {
    min-width: 5.5rem;
    min-height: 2.7rem;
    padding: 0.36rem 0.6rem;
    font-size: 0.72rem;
  }

  .entry-content .topic-brand-icon {
    font-size: 0.88rem;
  }

  .page-overview-visual {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 0.95rem;
    padding: 1.1rem;
  }

  .page-overview-title {
    max-width: none;
  }

  .page-overview-stack {
    gap: 0.65rem;
  }

  .page-overview-node-2,
  .page-overview-node-3 {
    margin-left: 0;
  }

  .page-content-card.has-featured-visual .featured-visual {
    height: clamp(5.9rem, 16vw, 7.1rem);
  }

  .entry-content .reference-split,
  .entry-content .reference-split-reverse,
  .entry-content .reference-teaser-grid,
  .entry-content .reference-gallery {
    grid-template-columns: 1fr;
  }

  .entry-content section + section,
  .entry-content .section-stack > section + section,
  .single-entry .entry-content > h2:not(:first-child) {
    margin-top: 3.2rem;
  }

  .page-motion-overlay {
    gap: 0.9rem;
  }

  .page-motion-band-projekte {
    background:
      radial-gradient(circle at 84% 8%, rgba(142, 246, 231, 0.3), rgba(142, 246, 231, 0) 34%),
      linear-gradient(160deg, #082634, #0c4d60 52%, #11829b 100%);
  }

  .page-motion-band-referenzen {
    background:
      radial-gradient(circle at 18% 8%, rgba(255, 224, 154, 0.32), rgba(255, 224, 154, 0) 28%),
      radial-gradient(circle at 86% 12%, rgba(126, 255, 232, 0.24), rgba(126, 255, 232, 0) 30%),
      linear-gradient(160deg, #46265b, #9f4a64 46%, #ec8152 100%);
  }

  .page-motion-band-csharp-services {
    background:
      radial-gradient(circle at 16% 10%, rgba(124, 181, 255, 0.28), rgba(124, 181, 255, 0) 30%),
      radial-gradient(circle at 84% 12%, rgba(132, 255, 204, 0.22), rgba(132, 255, 204, 0) 28%),
      linear-gradient(160deg, #111a39, #17346c 46%, #13757c 74%, #63b94f 100%);
  }

  .page-motion-band-kontakt {
    background:
      radial-gradient(circle at 20% 8%, rgba(128, 235, 255, 0.34), rgba(128, 235, 255, 0) 34%),
      linear-gradient(160deg, #082331, #0b4161 50%, #0b708f 100%);
  }

  .page-motion-band-impressum {
    background:
      radial-gradient(circle at 82% 10%, rgba(150, 236, 255, 0.3), rgba(150, 236, 255, 0) 34%),
      linear-gradient(160deg, #091f2c, #0d3552 48%, #0f6c8b 100%);
  }

  .page-motion-band-datenschutz {
    background:
      radial-gradient(circle at 22% 10%, rgba(126, 255, 224, 0.28), rgba(126, 255, 224, 0) 34%),
      linear-gradient(160deg, #081d28, #0b3048 48%, #0a566d 100%);
  }

  .page-motion-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
  }

  .page-motion-band-scene-csharp-services-portale .page-motion-panels {
    transform: translateY(-1.35rem);
  }

  .page-motion-band-scene-serviceflow .page-motion-panels {
    transform: translateY(-1.25rem);
  }

  .page-motion-band-scene-kontakt .page-motion-panels,
  .page-motion-band-scene-support .page-motion-panels {
    max-width: 30rem;
    transform: translateY(-2rem);
  }

  .page-motion-band-scene-kontakt .page-motion-chips,
  .page-motion-band-scene-support .page-motion-chips {
    transform: translateY(3.2rem);
  }

  .page-motion-band-scene-kontakt .page-motion-panel:nth-child(2),
  .page-motion-band-scene-support .page-motion-panel:nth-child(2) {
    transform: translateY(-0.45rem) rotate(0.8deg);
  }

  .page-motion-band-scene-kontakt .page-motion-panel:nth-child(3),
  .page-motion-band-scene-support .page-motion-panel:nth-child(3) {
    max-width: 15.5rem;
  }

  .page-motion-visual,
  .page-motion-band-scene-leistungen .page-motion-visual,
  .page-motion-band-scene-unternehmenssoftware .page-motion-visual,
  .page-motion-band-scene-projekte .page-motion-visual,
  .page-motion-band-scene-referenzen .page-motion-visual,
  .page-motion-band-scene-referenz-netscope .page-motion-visual,
  .page-motion-band-scene-referenz-netnotdienst .page-motion-visual,
  .page-motion-band-scene-technologien .page-motion-visual,
  .page-motion-band-scene-csharp-services-portale .page-motion-visual,
  .page-motion-band-scene-serviceflow .page-motion-visual,
  .page-motion-band-scene-kontakt .page-motion-visual,
  .page-motion-band-scene-support .page-motion-visual,
  .page-motion-band-scene-impressum .page-motion-visual,
  .page-motion-band-scene-datenschutz .page-motion-visual,
  .page-motion-band-scene-magazin .page-motion-visual,
  .page-motion-band-scene-magazin-data .page-motion-visual,
  .page-motion-band-scene-magazin-portal .page-motion-visual,
  .page-motion-band-scene-magazin-modernisierung .page-motion-visual {
    inset: 1.2rem 1rem 14.5rem 44%;
    opacity: 0.9;
  }

  .page-motion-band-scene-csharp-services-portale .page-motion-visual {
    inset: 1.2rem 1rem 11.8rem 44%;
    transform: translateY(0);
  }

  .page-motion-band-scene-serviceflow .page-motion-visual {
    inset: 1.1rem 0.85rem 11.55rem 42.75%;
    transform: translateY(0.02rem);
  }

  .page-motion-band-scene-projekte .page-motion-visual {
    inset: 1.45rem 1rem 14.5rem 46%;
  }

  .page-motion-band-scene-referenzen .page-motion-visual,
  .page-motion-band-scene-referenz-netscope .page-motion-visual,
  .page-motion-band-scene-referenz-netnotdienst .page-motion-visual {
    inset: 1.35rem 1rem 14.5rem 45%;
  }

  .page-motion-band-scene-kontakt .page-motion-visual,
  .page-motion-band-scene-support .page-motion-visual {
    inset: 1.3rem 1rem 14.5rem 46%;
  }

  .page-motion-band-scene-impressum .page-motion-visual,
  .page-motion-band-scene-datenschutz .page-motion-visual {
    inset: 1.3rem 1rem 14.5rem 45%;
  }

  .stack-core {
    width: 8rem;
    height: 8rem;
    margin: -4rem 0 0 -4rem;
    font-size: 0.92rem;
  }

  .stack-node {
    width: 8rem;
    padding: 0.85rem;
  }

  .unternehmenssoftware-stage {
    transform: scale(0.69);
  }

  .csharp-console {
    inset: 14% 26% 16% 2%;
    transform: translateX(-28%);
  }

  .csharp-stage {
    transform: scale(0.74);
  }

  .csharp-brand-glide {
    top: 8%;
    left: -104%;
    width: 4.9rem;
  }

  .page-motion-band-scene-csharp-services-portale .page-motion-visual {
    transform: translateY(-0.08rem);
  }

  .serviceflow-stage {
    transform: scale(0.68);
  }

  .csharp-node {
    width: 7.6rem;
    padding: 0.76rem 0.8rem 0.82rem;
  }

  .csharp-node-api {
    top: 1%;
    right: 6%;
  }

  .csharp-node-portal {
    right: 2%;
    bottom: 29%;
  }

  .csharp-node-jobs {
    left: 40%;
    bottom: -7%;
  }

  .csharp-feed {
    min-width: 2.15rem;
    height: 1.72rem;
    padding: 0 0.48rem;
    font-size: 0.69rem;
  }

  .csharp-feed-a {
    right: 14%;
    --feed-mid-x: -9.2rem;
    --feed-mid-y: 2.95rem;
    --feed-end-x: -17.8rem;
    --feed-end-y: 0.2rem;
  }

  .csharp-feed-b {
    right: 7%;
    --feed-mid-x: -10.7rem;
    --feed-mid-y: 0.75rem;
    --feed-end-x: -20.8rem;
    --feed-end-y: -1.8rem;
  }

  .csharp-feed-c {
    right: 19%;
    --feed-mid-x: -7.4rem;
    --feed-mid-y: -3rem;
    --feed-end-x: -15.8rem;
    --feed-end-y: -4.6rem;
  }

  .csharp-symbol {
    min-width: 2.7rem;
    height: 2rem;
    padding: 0 0.72rem;
    font-size: 0.82rem;
  }

  .project-tile {
    width: 9rem;
    padding: 0.85rem;
  }

  .project-core {
    width: 7.4rem;
    height: 7.4rem;
    margin: -3.7rem 0 0 -3.7rem;
    border-radius: 1.7rem;
    font-size: 0.84rem;
    padding: 0.82rem;
  }

  .project-core::before {
    top: 1.35rem;
    width: 2.8rem;
  }

  .project-core::after {
    top: 2.05rem;
    width: 1.7rem;
  }

  .project-connector-a {
    width: 6.8rem;
  }

  .project-connector-b {
    width: 5.8rem;
  }

  .project-connector-c {
    width: 6.2rem;
  }

  .editorial-core {
    width: 8.2rem;
    height: 7.6rem;
    translate: 0 -0.55rem;
    margin: -3.8rem 0 0 -4.1rem;
    padding: 0.88rem 0.9rem 0.94rem;
    border-radius: 1.45rem;
  }

  .editorial-core strong {
    font-size: 0.95rem;
  }

  .editorial-core span:last-child {
    font-size: 0.72rem;
  }

  .editorial-core-kicker {
    min-height: 1.45rem;
    padding: 0.18rem 0.46rem;
    font-size: 0.58rem;
  }

  .editorial-connector-a {
    width: 6.9rem;
  }

  .editorial-connector-b {
    width: 5.8rem;
  }

  .editorial-connector-c {
    width: 6.4rem;
  }

  .contact-flow-board {
    top: 14%;
    left: 4%;
    width: 11.8rem;
    min-height: 8.6rem;
    padding: 0.8rem 0.82rem 0.88rem;
    border-radius: 1.15rem;
    gap: 0.55rem;
  }

  .contact-flow-kicker {
    min-height: 1.55rem;
    padding: 0.22rem 0.6rem;
    font-size: 0.62rem;
  }

  .contact-flow-line {
    height: 0.58rem;
  }

  .contact-flow-step {
    min-height: 1.7rem;
    padding: 0.28rem 0.58rem;
    font-size: 0.66rem;
  }

  .page-scene-projekte .project-tile-a {
    top: 14%;
    left: 8%;
  }

  .page-scene-projekte .project-tile-b {
    top: 36%;
    right: 4%;
  }

  .page-scene-projekte .project-tile-c {
    bottom: 10%;
    left: 32%;
  }

  .page-scene-kontakt .scene-badge-a {
    top: 10%;
    right: 2%;
  }

  .page-scene-kontakt .scene-badge-b {
    top: 52%;
    right: 4%;
    left: auto;
  }

  .page-scene-kontakt .scene-badge-c {
    bottom: 14%;
    left: 18%;
    right: auto;
  }

  .page-scene-impressum .scene-badge-a {
    top: 14%;
    left: 8%;
  }

  .page-scene-impressum .scene-badge-b {
    top: 44%;
    right: 8%;
  }

  .page-scene-impressum .scene-badge-c {
    bottom: 10%;
    left: 16%;
  }

  .page-scene-datenschutz .scene-badge-a {
    top: 14%;
    right: 10%;
  }

  .page-scene-datenschutz .scene-badge-b {
    top: 44%;
    left: 8%;
  }

  .page-scene-datenschutz .scene-badge-c {
    bottom: 10%;
    right: 14%;
  }

  .privacy-core {
    width: 7.2rem;
    height: 7.2rem;
    margin: -3.6rem 0 0 -3.6rem;
    font-size: 0.84rem;
    padding: 0.8rem;
  }

  .legal-core {
    width: 7.4rem;
    height: 6.9rem;
    margin: -3.45rem 0 0 -3.7rem;
    padding: 0.78rem 0.8rem 0.84rem;
    border-radius: 1.45rem;
  }

  .legal-core::before {
    top: 1.02rem;
    width: 2.45rem;
  }

  .legal-core::after {
    top: 1.56rem;
    width: 1.45rem;
  }

  .legal-core strong {
    font-size: 0.85rem;
  }

  .legal-core span:last-child {
    font-size: 0.68rem;
  }

  .legal-core-kicker {
    min-height: 1.35rem;
    padding: 0.14rem 0.38rem;
    font-size: 0.52rem;
  }

  .legal-connector-a {
    width: 6rem;
  }

  .legal-connector-b {
    width: 5.1rem;
  }

  .legal-connector-c {
    width: 5.5rem;
  }

  .privacy-connector-a {
    width: 6.4rem;
  }

  .privacy-connector-b {
    width: 5.8rem;
  }

  .privacy-connector-c {
    width: 6rem;
  }

  .editorial-sheet {
    width: 10.75rem;
    min-height: 8.6rem;
  }

  .editorial-sheet-c {
    left: 35%;
  }
}

@media (max-width: 767.98px) {
  .entry-content .topic-sketch {
    min-height: 13.6rem;
  }

  .entry-content .topic-sketch-glyph {
    min-width: 3.5rem;
    min-height: 3.5rem;
    padding: 0.42rem;
    font-size: 0.64rem;
    border-radius: 1rem;
  }

  .entry-content .topic-sketch-brand {
    min-width: 4.6rem;
    min-height: 2.28rem;
    gap: 0.36rem;
    padding: 0.28rem 0.46rem;
    border-radius: 0.82rem;
    font-size: 0.62rem;
  }

  .entry-content .topic-brand-icon {
    font-size: 0.78rem;
  }

  .entry-content .topic-sketch-note {
    font-size: 0.72rem;
  }

  .entry-content .topic-sketch-core,
  .entry-content .topic-sketch-node,
  .entry-content .topic-sketch-panel,
  .entry-content .topic-sketch-api,
  .entry-content .topic-sketch-store,
  .entry-content .topic-sketch-layer,
  .entry-content .topic-sketch-lane {
    padding: 0.45rem 0.7rem;
    font-size: 0.82rem;
  }

  .entry-content .topic-sketch-chip,
  .entry-content .topic-sketch-side,
  .entry-content .topic-sketch-bridge {
    min-height: 1.65rem;
    padding: 0.18rem 0.52rem;
    font-size: 0.64rem;
  }

  .entry-content .topic-sketch-delphi .topic-sketch-core {
    min-width: 7.4rem;
  }

  .entry-content .topic-sketch-delphi .topic-sketch-node {
    min-width: 5.6rem;
  }

  .entry-content .topic-sketch-layer3 .topic-sketch-layer {
    width: 10rem;
  }

  .entry-content .topic-sketch-arm64 .topic-sketch-lane {
    width: 7.4rem;
  }

  .page-overview-visual {
    padding: 1rem;
    border-radius: calc(var(--site-radius) - 0.02rem);
  }

  .page-overview-kicker {
    font-size: 0.7rem;
  }

  .page-overview-title {
    font-size: 1rem;
  }

  .page-overview-tracks {
    width: min(14rem, 100%);
    gap: 0.46rem;
    margin-top: 0.82rem;
  }

  .page-overview-track {
    height: 0.46rem;
  }

  .page-overview-chipbar {
    margin-top: 0.82rem;
    gap: 0.45rem;
  }

  .page-overview-chip {
    min-height: 1.78rem;
    padding: 0.3rem 0.68rem;
    font-size: 0.72rem;
  }

  .page-overview-node {
    gap: 0.72rem;
    padding: 0.72rem 0.78rem;
  }

  .page-overview-node-icon {
    width: 2.7rem;
    height: 2.7rem;
  }

  .page-overview-node-icon svg {
    width: 1.35rem;
    height: 1.35rem;
  }

  .page-overview-node-copy strong {
    font-size: 0.86rem;
  }

  .page-overview-node-copy span {
    font-size: 0.74rem;
  }

  .page-content-card.has-featured-visual .featured-visual {
    height: 5.4rem;
  }

  .page-content-card.has-featured-visual .featured-visual-image {
    transform: scale(1.02);
  }

  .entry-content section + section,
  .entry-content .section-stack > section + section,
  .single-entry .entry-content > h2:not(:first-child) {
    margin-top: 2.9rem;
  }

  .page-motion-band {
    min-height: 31rem;
    height: auto;
  }

  .page-motion-band-projekte {
    background:
      radial-gradient(circle at 82% 6%, rgba(142, 246, 231, 0.28), rgba(142, 246, 231, 0) 34%),
      linear-gradient(165deg, #082633, #0c4b5d 54%, #117d98 100%);
  }

  .page-motion-band-kontakt {
    background:
      radial-gradient(circle at 16% 6%, rgba(128, 235, 255, 0.3), rgba(128, 235, 255, 0) 34%),
      linear-gradient(165deg, #092534, #0b4160 52%, #0a6786 100%);
  }

  .page-motion-band-impressum {
    background:
      radial-gradient(circle at 84% 10%, rgba(150, 236, 255, 0.28), rgba(150, 236, 255, 0) 34%),
      linear-gradient(165deg, #091f2d, #0c3550 52%, #0e6784 100%);
  }

  .page-motion-band-datenschutz {
    background:
      radial-gradient(circle at 18% 10%, rgba(126, 255, 224, 0.24), rgba(126, 255, 224, 0) 34%),
      linear-gradient(165deg, #091d29, #0b3146 52%, #0b5168 100%);
  }

  .page-motion-overlay {
    min-height: auto;
    padding-top: 11rem;
    padding-bottom: 1.5rem;
  }

  .page-motion-titleblock,
  .page-motion-copy,
  .page-motion-chips {
    max-width: none;
  }

  .page-motion-panels,
  .page-motion-band-scene-unternehmenssoftware .page-motion-panels,
  .page-motion-band-scene-technologien .page-motion-panels,
  .page-motion-band-scene-csharp-services-portale .page-motion-panels,
  .page-motion-band-scene-serviceflow .page-motion-panels,
  .page-motion-band-scene-kontakt .page-motion-panels,
  .page-motion-band-scene-support .page-motion-panels,
  .page-motion-band-scene-impressum .page-motion-panels,
  .page-motion-band-scene-datenschutz .page-motion-panels,
  .page-motion-band-scene-magazin .page-motion-panels,
  .page-motion-band-scene-magazin-data .page-motion-panels,
  .page-motion-band-scene-magazin-portal .page-motion-panels,
  .page-motion-band-scene-magazin-modernisierung .page-motion-panels {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .page-motion-band-scene-kontakt .page-motion-panel:nth-child(1),
  .page-motion-band-scene-kontakt .page-motion-panel:nth-child(2),
  .page-motion-band-scene-kontakt .page-motion-panel:nth-child(3),
  .page-motion-band-scene-support .page-motion-panel:nth-child(1),
  .page-motion-band-scene-support .page-motion-panel:nth-child(2),
  .page-motion-band-scene-support .page-motion-panel:nth-child(3) {
    grid-column: auto;
    max-width: 100%;
    transform: none;
  }

  .page-motion-visual,
  .page-motion-band-scene-leistungen .page-motion-visual,
  .page-motion-band-scene-unternehmenssoftware .page-motion-visual,
  .page-motion-band-scene-projekte .page-motion-visual,
  .page-motion-band-scene-referenzen .page-motion-visual,
  .page-motion-band-scene-referenz-netscope .page-motion-visual,
  .page-motion-band-scene-referenz-netnotdienst .page-motion-visual,
  .page-motion-band-scene-technologien .page-motion-visual,
  .page-motion-band-scene-csharp-services-portale .page-motion-visual,
  .page-motion-band-scene-serviceflow .page-motion-visual,
  .page-motion-band-scene-kontakt .page-motion-visual,
  .page-motion-band-scene-support .page-motion-visual,
  .page-motion-band-scene-impressum .page-motion-visual,
  .page-motion-band-scene-datenschutz .page-motion-visual,
  .page-motion-band-scene-magazin .page-motion-visual,
  .page-motion-band-scene-magazin-data .page-motion-visual,
  .page-motion-band-scene-magazin-portal .page-motion-visual,
  .page-motion-band-scene-magazin-modernisierung .page-motion-visual {
    inset: 1rem 0.75rem auto 0.75rem;
    height: 10rem;
    opacity: 0.86;
  }

  .page-motion-band-scene-csharp-services-portale .page-motion-visual {
    height: 12rem;
  }

  .page-motion-band-scene-serviceflow .page-motion-visual {
    height: 12.4rem;
  }

  .page-motion-band-scene-projekte .page-motion-visual,
  .page-motion-band-scene-referenzen .page-motion-visual,
  .page-motion-band-scene-referenz-netscope .page-motion-visual,
  .page-motion-band-scene-referenz-netnotdienst .page-motion-visual,
  .page-motion-band-scene-kontakt .page-motion-visual,
  .page-motion-band-scene-support .page-motion-visual,
  .page-motion-band-scene-impressum .page-motion-visual,
  .page-motion-band-scene-datenschutz .page-motion-visual {
    height: 10.8rem;
  }

  .stack-node {
    width: 6.7rem;
    padding: 0.7rem;
  }

  .unternehmenssoftware-stage {
    transform: scale(0.54);
    transform-origin: top center;
  }

  .serviceflow-stage {
    transform: scale(0.56);
    transform-origin: top center;
  }

  .csharp-console {
    inset: 12% 20% 16% 0;
    transform: translateX(-12%);
    border-radius: 1.3rem;
  }

  .csharp-stage {
    transform: scale(0.84);
  }

  .csharp-brand-glide {
    top: 10%;
    left: -86%;
    width: 3.8rem;
  }

  .csharp-console-top {
    padding: 0.72rem 0.82rem;
  }

  .csharp-console-title {
    font-size: 0.64rem;
    margin-left: 0.72rem;
  }

  .csharp-console-body {
    gap: 0.58rem;
    padding: 0.82rem 0.86rem 1rem;
  }

  .csharp-line {
    height: 0.56rem;
  }

  .csharp-node {
    width: 6rem;
    padding: 0.62rem 0.64rem 0.68rem;
  }

  .csharp-node-api {
    top: 2%;
    right: 4%;
  }

  .csharp-node-portal {
    right: 2%;
    bottom: 26%;
  }

  .csharp-node-jobs {
    left: 36%;
    bottom: -5%;
  }

  .page-motion-band-scene-csharp-services-portale .page-motion-panels {
    transform: translateY(-0.65rem);
  }

  .csharp-feed {
    min-width: 1.9rem;
    height: 1.52rem;
    padding: 0 0.42rem;
    font-size: 0.62rem;
  }

  .csharp-feed-a {
    top: 18%;
    right: 11%;
    --feed-mid-x: -6.9rem;
    --feed-mid-y: 2.45rem;
    --feed-end-x: -12.9rem;
    --feed-end-y: 0.2rem;
  }

  .csharp-feed-b {
    top: 48%;
    right: 4%;
    --feed-mid-x: -8.4rem;
    --feed-mid-y: 0.7rem;
    --feed-end-x: -15.4rem;
    --feed-end-y: -1.55rem;
  }

  .csharp-feed-c {
    top: 72%;
    right: 15%;
    --feed-mid-x: -5.9rem;
    --feed-mid-y: -2.3rem;
    --feed-end-x: -11.4rem;
    --feed-end-y: -3.7rem;
  }

  .csharp-node-icon {
    width: 2rem;
    height: 2rem;
  }

  .csharp-node strong {
    font-size: 0.8rem;
  }

  .csharp-node span:last-child {
    font-size: 0.68rem;
  }

  .csharp-symbol {
    min-width: 2.2rem;
    height: 1.75rem;
    padding: 0 0.56rem;
    font-size: 0.72rem;
  }

  .stack-node strong {
    font-size: 0.85rem;
  }

  .stack-node span:last-child {
    font-size: 0.72rem;
  }

  .project-tile {
    width: 7.8rem;
    padding: 0.75rem;
  }

  .reference-window {
    width: 8.2rem;
    padding: 0.72rem 0.78rem 0.78rem;
  }

  .reference-window-kicker,
  .reference-pill {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
  }

  .reference-pill {
    padding: 0.18rem 0.52rem;
  }

  .project-core {
    width: 6rem;
    height: 6rem;
    margin: -3rem 0 0 -3rem;
    border-radius: 1.35rem;
    font-size: 0.72rem;
    padding: 0.7rem;
  }

  .project-core::before {
    top: 1.15rem;
    width: 2.2rem;
    height: 0.28rem;
  }

  .project-core::after {
    top: 1.72rem;
    width: 1.35rem;
    height: 0.2rem;
  }

  .project-connector-a {
    width: 5rem;
  }

  .project-connector-b {
    width: 4.2rem;
  }

  .project-connector-c {
    width: 4.9rem;
  }

  .reference-track-a {
    width: 7rem;
  }

  .reference-track-b {
    width: 5.6rem;
  }

  .reference-window-a {
    left: 0;
  }

  .reference-window-b {
    right: 0;
  }

  .reference-window-c {
    left: 30%;
    bottom: 6%;
  }

  .project-tile strong {
    font-size: 0.9rem;
  }

  .editorial-core {
    width: 6.7rem;
    height: 6.2rem;
    translate: 0 -0.45rem;
    margin: -3.1rem 0 0 -3.35rem;
    padding: 0.72rem 0.75rem 0.76rem;
    border-radius: 1.25rem;
  }

  .editorial-core strong {
    font-size: 0.82rem;
  }

  .editorial-core span:last-child {
    font-size: 0.63rem;
    line-height: 1.32;
  }

  .editorial-core-kicker {
    min-height: 1.2rem;
    padding: 0.14rem 0.36rem;
    font-size: 0.5rem;
    letter-spacing: 0.05em;
  }

  .editorial-connector-a {
    width: 5.3rem;
  }

  .editorial-connector-b {
    width: 4.5rem;
  }

  .editorial-connector-c {
    width: 5.1rem;
  }

  .contact-flow-board {
    top: 6%;
    left: 0;
    width: 62%;
    min-height: 7.4rem;
    padding: 0.7rem 0.72rem 0.76rem;
    border-radius: 1rem;
    gap: 0.45rem;
  }

  .contact-flow-kicker {
    min-height: 1.45rem;
    padding: 0.18rem 0.5rem;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
  }

  .contact-flow-line {
    height: 0.48rem;
  }

  .contact-flow-step {
    min-height: 1.5rem;
    padding: 0.22rem 0.46rem;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .page-scene-projekte .project-tile-a {
    top: 14%;
    left: 4%;
  }

  .page-scene-projekte .project-tile-b {
    top: 24%;
    right: 0;
  }

  .page-scene-projekte .project-tile-c {
    bottom: 4%;
    left: 26%;
  }

  .page-scene-kontakt .scene-badge-a {
    top: 6%;
    right: 0;
  }

  .page-scene-kontakt .scene-badge-b {
    top: 58%;
    right: 2%;
    left: auto;
  }

  .page-scene-kontakt .scene-badge-c {
    bottom: 11%;
    left: 10%;
    right: auto;
  }

  .page-scene-impressum .scene-badge-a {
    top: 12%;
    left: 0;
  }

  .page-scene-impressum .scene-badge-b {
    top: 34%;
    right: 2%;
  }

  .page-scene-impressum .scene-badge-c {
    bottom: 6%;
    left: 8%;
  }

  .page-scene-datenschutz .scene-badge-a {
    top: 12%;
    right: 4%;
  }

  .page-scene-datenschutz .scene-badge-b {
    top: 34%;
    left: 0;
  }

  .page-scene-datenschutz .scene-badge-c {
    bottom: 6%;
    right: 10%;
  }

  .privacy-core {
    width: 6rem;
    height: 6rem;
    margin: -3rem 0 0 -3rem;
    font-size: 0.75rem;
    padding: 0.72rem;
  }

  .legal-core {
    width: 6rem;
    height: 5.55rem;
    margin: -2.78rem 0 0 -3rem;
    padding: 0.64rem 0.66rem 0.68rem;
    border-radius: 1.2rem;
  }

  .legal-core::before {
    top: 0.88rem;
    width: 2rem;
    height: 0.26rem;
  }

  .legal-core::after {
    top: 1.34rem;
    width: 1.2rem;
    height: 0.18rem;
  }

  .legal-core strong {
    font-size: 0.72rem;
  }

  .legal-core span:last-child {
    font-size: 0.58rem;
    line-height: 1.28;
  }

  .legal-core-kicker {
    min-height: 1.08rem;
    padding: 0.12rem 0.28rem;
    font-size: 0.46rem;
    letter-spacing: 0.05em;
  }

  .legal-connector-a {
    width: 4.9rem;
  }

  .legal-connector-b {
    width: 4rem;
  }

  .legal-connector-c {
    width: 4.4rem;
  }

  .privacy-connector-a {
    width: 5.2rem;
  }

  .privacy-connector-b {
    width: 4.8rem;
  }

  .privacy-connector-c {
    width: 5rem;
  }

  .editorial-sheet {
    width: 8.3rem;
    min-height: 7rem;
    padding: 0.85rem;
  }

  .editorial-sheet-c {
    left: 30%;
  }

  .editorial-sheet strong {
    font-size: 0.84rem;
  }

  .portal-phone {
    width: 5.6rem;
    height: 10.6rem;
  }

  .modernization-frame {
    gap: 0.5rem;
    inset: 18% 2% 14% 2%;
  }
}

@media (max-width: 1199.98px) {
  .page-motion-band-scene-faq .page-motion-panels {
    transform: translateY(-0.75rem);
  }

  .page-motion-band-scene-faq .page-motion-visual {
    inset: 1.3rem 1rem 14.5rem 45%;
  }
}

@media (max-width: 991.98px) {
  .page-scene-faq .scene-badge-a {
    top: 10%;
    right: 2%;
  }

  .page-scene-faq .scene-badge-b {
    top: 50%;
    right: 4%;
  }

  .page-scene-faq .scene-badge-c {
    bottom: 12%;
    left: 14%;
  }

  .faq-core {
    width: 8.4rem;
    min-height: 7.6rem;
    margin: -3.8rem 0 0 -4.2rem;
  }

  .faq-core::after {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.15rem;
  }
}

@media (max-width: 767.98px) {
  .page-motion-band-scene-faq .page-motion-visual {
    inset: 1rem 0.75rem auto 0.75rem;
    height: 10.8rem;
    opacity: 0.86;
  }

  .page-scene-faq .scene-badge-a {
    top: 7%;
    right: 0;
  }

  .page-scene-faq .scene-badge-b {
    top: 55%;
    right: 2%;
  }

  .page-scene-faq .scene-badge-c {
    bottom: 7%;
    left: 8%;
  }

  .faq-core {
    left: 42%;
    width: 7.2rem;
    min-height: 6.7rem;
    margin: -3.35rem 0 0 -3.6rem;
    padding: 0.78rem;
  }

  .faq-core strong {
    font-size: 0.88rem;
  }

  .faq-core span:last-child {
    font-size: 0.68rem;
  }

  .faq-core::after {
    right: -0.55rem;
    top: -0.7rem;
    width: 1.9rem;
    height: 1.9rem;
    font-size: 1rem;
  }

  .faq-spark {
    min-width: 1.82rem;
    height: 1.82rem;
    font-size: 0.78rem;
    padding: 0 0.52rem;
  }

  .faq-spark-b {
    right: 26%;
  }

  .faq-spark-c {
    right: 24%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-showcase-sheen,
  .hero-motion-grid,
  .hero-motion-glow,
  .hero-motion-aurora,
  .hero-motion-rings,
  .hero-motion-lane span,
  .hero-motion-pulse,
  .hero-motion-cluster,
  .hero-motion-node,
  .page-motion-grid,
  .page-motion-beam,
  .page-motion-pulse,
  .page-motion-panel,
  .page-motion-band-ueber-uns .scene-path::after,
  .page-motion-scanline,
  .scene-badge,
  .scene-ring,
  .scene-path,
  .faq-core,
  .faq-connector,
  .faq-spark,
  .project-orbit,
  .project-core,
  .project-connector,
  .legal-hub,
  .legal-core,
  .legal-connector,
  .editorial-orbit,
  .editorial-core,
  .editorial-connector,
  .csharp-halo,
  .csharp-feed,
  .csharp-line,
  .csharp-node,
  .csharp-symbol {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .visual-aura,
  .migration-stream-dot,
  .migration-tag,
  .stack-core,
  .stack-orbit,
  .stack-connector,
  .stack-node,
  .project-route,
  .project-tile,
  .editorial-sheet,
  .query-line,
  .query-cursor,
  .database-disc,
  .portal-phone,
  .portal-signal,
  .modernization-panel,
  .modernization-arrow,
  .csharp-halo,
  .csharp-feed,
  .csharp-line,
  .csharp-node,
  .csharp-symbol {
    animation: none;
  }
}

.page-shell-technologien .entry-content > section:first-of-type .content-grid,
.page-shell-theme-technologien .entry-content > section:first-of-type .content-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (max-width: 991.98px) {
  .page-shell-technologien .entry-content > section:first-of-type .content-grid,
  .page-shell-theme-technologien .entry-content > section:first-of-type .content-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767.98px) {
  .page-shell-technologien .entry-content > section:first-of-type .content-grid,
  .page-shell-theme-technologien .entry-content > section:first-of-type .content-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 991.98px) {
  .page-motion-band-scene-ueber-uns .page-motion-visual {
    min-height: 19.2rem;
  }

  .about-core {
    top: 46%;
    left: 45%;
    width: 12.2rem;
    translate: 0 -1.2rem;
  }

  .about-sun {
    right: 7%;
    width: 6.1rem;
    height: 6.1rem;
  }

  .about-forest {
    right: 9%;
    bottom: 13%;
    gap: 0.72rem;
  }

  .page-motion-band-ueber-uns .scene-path {
    left: 45%;
    top: 46%;
    translate: 0 -1.2rem;
  }

  .page-motion-band-ueber-uns .scene-path-a {
    width: 8.8rem;
  }

  .page-motion-band-ueber-uns .scene-path-b {
    width: 8.1rem;
  }

  .page-motion-band-ueber-uns .scene-path-c {
    width: 7rem;
    transform: rotate(34deg);
  }

  .page-scene-ueber-uns .scene-badge-a {
    top: 8%;
    left: 4%;
  }

  .page-scene-ueber-uns .scene-badge-b {
    top: 17%;
    right: 4%;
  }

  .page-scene-ueber-uns .scene-badge-c {
    bottom: 2%;
    right: 6%;
    left: auto;
    transform: translateY(1.8rem);
  }

  .page-motion-band-ueber-uns .scene-badge {
    translate: 0 -1.2rem;
  }
}

@media (max-width: 767.98px) {
  .about-core {
    width: 10.8rem;
    padding: 0.9rem 0.9rem 0.95rem;
  }

  .about-core strong {
    font-size: 0.92rem;
  }

  .about-core span:last-child {
    font-size: 0.76rem;
  }

  .about-tree::before {
    width: 1.9rem;
    height: 1.9rem;
    margin-left: -0.95rem;
  }

  .about-tree-b::before,
  .about-tree-d::before {
    width: 2.2rem;
    height: 2.2rem;
    margin-left: -1.1rem;
  }
}

@media (max-width: 1199.98px) {
  .hero-section-corporate {
    padding-bottom: 1.4rem;
  }

  .hero-section-corporate .row {
    align-items: flex-start !important;
  }

  .hero-section-corporate .hero-copy {
    padding-top: 0.95rem;
  }

  .hero-section-corporate .col-lg-5 {
    order: -1;
  }

  .hero-section-corporate .col-lg-7 {
    order: 2;
  }

  .hero-section-corporate .hero-panel {
    display: block;
    margin-bottom: 1rem;
  }

  .hero-section-corporate .hero-showcase-grid {
    display: none;
  }

  .hero-section-corporate .hero-showcase-media {
    min-height: clamp(23.8rem, 50vw, 27.4rem);
  }

  .hero-section-corporate .hero-stage-bottom-fade {
    height: clamp(6.6rem, 15vw, 7.8rem);
  }

  .hero-section-corporate .hero-showcase-copy {
    position: absolute;
    inset: auto 0 0 0;
    margin-top: 0;
    padding: 0 1.2rem 0.9rem;
    min-height: 5rem;
    display: flex;
    align-items: flex-end;
  }

  .hero-section-corporate .hero-showcase-copy h2 {
    margin: 0;
    max-width: 24ch;
    font-size: clamp(1.5rem, 3.8vw, 2.18rem);
    text-wrap: balance;
  }

  .page-motion-band {
    height: auto;
    min-height: clamp(21rem, 30vw, 26rem);
  }

  .page-motion-overlay {
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "title"
      "copy"
      "chips"
      "panels";
    min-height: auto;
    align-content: start;
    padding-top: clamp(2.2rem, 4vw, 3rem);
    padding-bottom: clamp(1.35rem, 3vw, 1.9rem);
  }

  .page-motion-titleblock,
  .page-motion-copy,
  .page-motion-chips,
  .page-motion-panels {
    align-self: start;
  }

  .page-motion-chips {
    transform: none;
    margin-top: 0.2rem;
  }

  .page-motion-visual {
    display: none;
  }

  .page-hero > .container-xxl {
    justify-content: flex-start;
    padding-top: clamp(2.35rem, 5vw, 3.2rem);
    padding-bottom: clamp(1.6rem, 3vw, 2.2rem);
  }

  .page-hero-featured-post {
    background-position: center top, center top;
  }
}