/* ==========================================================
   Troncom -- zentrales Stylesheet
   Zusammengefuehrt aus den vormals fuenf Inline-Bloecken.
   Reihenfolge: Basisregeln, dann @keyframes, dann @media.
   ========================================================== */

:root {
      --black: #000;
      --white: #fff;
      --gray-50: #fafafa;
      --gray-100: #f5f5f5;
      --gray-200: #e5e5e5;
      --gray-300: #d4d4d4;
      --gray-400: #a3a3a3;
      --gray-500: #737373;
      --gray-600: #525252;
      --gray-700: #404040;
      --gray-800: #262626;
      --gray-900: #171717;
      --ease-1: cubic-bezier(0.25, 0, 0.3, 1);
      --ease-2: cubic-bezier(0.25, 0, 0.4, 1);}
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;}
html {
      scroll-behavior: smooth;
      overflow-x: hidden;
      width: 100%;
      max-width: 100%;}
body {
      position: relative;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
      background: var(--black);
      color: var(--white);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      /* "clip" statt "hidden": beschneidet genauso, macht den Body aber
         nicht zum Scrollcontainer -- sonst wirkt position:sticky nicht mehr. */
      overflow-x: hidden;
      overflow-x: clip;
      width: 100%;
      max-width: 100%;}
body > nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: clamp(20px, 3vw, 40px) clamp(20px, 5vw, 80px);
      /* Punkt, ab dem die Nav die Seite absorbiert: 40 % der Nav-Hoehe.
         Prozentwert, damit er auf jeder Viewport-Breite mitskaliert. */
      --absorb-start: 40%;
      display: flex;
      justify-content: space-between;
      align-items: center;}
body > nav::before {
      /* deckend bis 40 % der Nav */
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: var(--absorb-start);
      background: #000;
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: -1;
      pointer-events: none;}
body > nav::after {
      /* Absorptionszone -- beginnt bei 40 % der Nav */
      content: '';
      position: absolute;
      top: var(--absorb-start);
      left: 0;
      right: 0;
      height: clamp(110px, 14vh, 170px);
      /* Ease-Kurve statt gerader Rampe: nach oben hin wird es nach und nach
         dunkler, statt als gleichmaessiger Streifen zu wirken. */
      background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 1)   0%,
                    rgba(0, 0, 0, .93) 14%,
                    rgba(0, 0, 0, .82) 28%,
                    rgba(0, 0, 0, .66) 42%,
                    rgba(0, 0, 0, .47) 56%,
                    rgba(0, 0, 0, .29) 70%,
                    rgba(0, 0, 0, .13) 84%,
                    rgba(0, 0, 0, 0)   100%);
      opacity: 0;
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: -1;
      pointer-events: none;}
body > nav.scrolled::before,
    body > nav.scrolled::after {
      opacity: 1;}
.logo img {
      height: clamp(24px, 3vw, 32px);
      width: auto;
      display: block;}
.nav-menu {
      display: flex;
      gap: clamp(20px, 3vw, 50px);
      align-items: center;}
.nav-link {
      color: var(--white);
      text-decoration: none;
      font-size: clamp(14px, 1.2vw, 16px);
      font-weight: 500;
      position: relative;
      transition: opacity 0.3s var(--ease-1);}
.nav-link:hover {
      opacity: 0.6;}
.nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 1px;
      background: var(--white);
      transition: width 0.4s var(--ease-2);}
.nav-link:hover::after {
      width: 100%;}

/* Kontakt schliesst die Navigation ab und traegt deshalb Gewicht */
.nav-cta {
      padding: 10px 22px;
      margin-left: clamp(2px, .8vw, 12px);
      border-radius: 100px;
      background: var(--white);
      color: #000;
      font-weight: 600;
      letter-spacing: -0.01em;
      transition: box-shadow 0.3s var(--ease-1), transform 0.25s var(--ease-1);}
.nav-cta::after { display: none;}
.nav-cta:hover {
      opacity: 1;
      box-shadow: 0 10px 30px rgba(255,255,255,0.18);}
.nav-cta:active { transform: translateY(1px);}
.hero {
      background-attachment: fixed;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      padding: clamp(120px, 15vh, 200px) clamp(20px, 5vw, 80px) clamp(80px, 10vh, 120px);
      overflow: hidden;}
.hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      z-index: 0;
      will-change: transform;}
.hero-content {
      max-width: 1400px;
      width: 100%;
      position: relative;
      z-index: 2;}
.hero h1 {
      font-size: clamp(48px, 10vw, 140px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.04em;
      margin-bottom: clamp(20px, 3vw, 40px);
      opacity: 0;
      animation: fadeInUp 1.2s var(--ease-2) 0.3s forwards;}
.hero-subtitle {
      font-size: clamp(18px, 2.5vw, 28px);
      font-weight: 400;
      color: var(--gray-400);
      max-width: 800px;
      line-height: 1.4;
      margin-bottom: clamp(40px, 5vw, 60px);
      opacity: 0;
      animation: fadeInUp 1.2s var(--ease-2) 0.5s forwards;}
.cta-section .hero-subtitle {
      margin-bottom: 48px;
      margin-left: auto;
      margin-right: auto;}
.hero-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: clamp(16px, 2vw, 22px) clamp(32px, 4vw, 44px);
      background: var(--white);
      color: var(--black);
      text-decoration: none;
      font-size: clamp(14px, 1.5vw, 17px);
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.4s var(--ease-2);
      opacity: 0;
      animation: fadeInUp 1.2s var(--ease-2) 0.7s forwards;
      box-shadow: 0 8px 32px rgba(255,255,255,0.2);}
.hero-cta:hover {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 24px 64px rgba(255, 255, 255, 0.4);
      background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);}
.arrow {
      transition: transform 0.3s var(--ease-2);
      display: inline-block;}
.hero-cta:hover .arrow {
      transform: translateX(4px);}
.marquee {
      padding: clamp(60px, 10vw, 100px) 0;
      border-top: 1px solid var(--gray-900);
      border-bottom: 1px solid var(--gray-900);
      overflow: hidden;
      position: relative;}
.marquee-content {
      display: flex;
      animation: marquee 40s linear infinite;
      width: fit-content;}
.marquee-item {
      font-size: clamp(24px, 4vw, 48px);
      font-weight: 600;
      white-space: nowrap;
      padding: 0 clamp(20px, 3vw, 40px);
      color: var(--gray-700);}
.features {
      padding: clamp(80px, 15vw, 160px) clamp(20px, 5vw, 80px);}
.features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
      gap: 1px;
      background: var(--gray-900);
      border: 1px solid var(--gray-900);}
.feature {
      background: var(--black);
      padding: 0;
      transition: all 0.5s var(--ease-2);
      position: relative;
      overflow: hidden;
      border: 1px solid transparent;
      aspect-ratio: 1/1;
      display: flex;
      flex-direction: column;}
.feature-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      transition: all 0.6s var(--ease-2);
      z-index: 0;}
.feature-content {
      position: relative;
      z-index: 3;
      margin-top: auto;
      padding: clamp(30px, 4vw, 50px);
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.95) 30%, rgba(0,0,0,0.98) 100%);}
.feature::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
      transition: left 0.6s var(--ease-2);
      z-index: 2;}
.feature:hover .feature-bg {
      transform: scale(1.05);}
.feature:hover::after {
      left: 100%;}
.feature:hover {
      border-color: rgba(255,255,255,0.1);
      transform: translateY(-4px);
      box-shadow:
        0 20px 60px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.1);}
.feature-number {
      font-size: clamp(11px, 1.2vw, 13px);
      color: var(--gray-500);
      margin-bottom: clamp(12px, 2vw, 20px);
      font-weight: 600;
      letter-spacing: 0.05em;}
.feature h3 {
      font-size: clamp(20px, 2.5vw, 28px);
      font-weight: 600;
      margin-bottom: clamp(8px, 1.5vw, 14px);
      letter-spacing: -0.02em;
      line-height: 1.2;}
.feature p {
      color: var(--gray-400);
      font-size: clamp(13px, 1.3vw, 15px);
      line-height: 1.5;}
.large-text-section {
      padding: clamp(100px, 18vw, 240px) clamp(20px, 5vw, 80px);
      text-align: center;}
.large-text {
      font-size: clamp(36px, 7vw, 100px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.03em;
      max-width: 1400px;
      margin: 0 auto;}
.large-text span {
      color: var(--gray-600);}
.tron-discover-section {
      position: relative;
      min-height: 70vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(60px, 10vw, 120px) clamp(20px, 5vw, 80px);
      overflow: hidden;
      width: 95%;
      max-width: 1800px;
      margin: 0 auto;
      border-radius: clamp(20px, 3vw, 40px);}
.tron-discover-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      z-index: 0;}
.tron-discover-overlay {
      display: none;}
.tron-discover-content {
      position: relative;
      z-index: 2;
      max-width: 900px;
      text-align: center;}
.tron-discover-badge {
      display: inline-block;
      padding: 8px 20px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 100px;
      font-size: clamp(12px, 1.2vw, 14px);
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: clamp(24px, 3vw, 40px);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);}
.tron-discover-content h2 {
      font-size: clamp(48px, 8vw, 80px);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1.1;
      margin-bottom: clamp(20px, 3vw, 32px);
      background: linear-gradient(135deg, #ffffff 0%, #e0e0e0 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;}
.tron-discover-subtitle {
      font-size: clamp(20px, 2.5vw, 28px);
      font-weight: 600;
      color: var(--white);
      margin-bottom: clamp(16px, 2vw, 24px);
      line-height: 1.4;}
.tron-discover-description {
      font-size: clamp(16px, 1.8vw, 20px);
      color: rgba(255,255,255,0.75);
      line-height: 1.7;
      margin-bottom: clamp(40px, 5vw, 60px);
      max-width: 800px;
      margin-left: auto;
      margin-right: auto;}
.tron-discover-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: clamp(16px, 2vw, 24px);
      margin-bottom: clamp(40px, 5vw, 60px);}
.tron-feature-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: clamp(20px, 3vw, 32px);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      transition: all 0.4s var(--ease-2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);}
.tron-feature-item:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.2);
      transform: translateY(-4px);}
.feature-icon-wrapper {
      width: 48px;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
      color: var(--white);
      transition: all 0.4s var(--ease-2);}
.tron-feature-item:hover .feature-icon-wrapper {
      background: rgba(255,255,255,0.2);
      transform: scale(1.1);}
.tron-feature-item span {
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 600;
      color: rgba(255,255,255,0.9);
      text-align: center;}
.tron-discover-cta {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: clamp(18px, 2.5vw, 24px) clamp(36px, 5vw, 50px);
      background: var(--white);
      color: var(--black);
      text-decoration: none;
      font-size: clamp(15px, 1.6vw, 18px);
      font-weight: 700;
      border-radius: 100px;
      transition: all 0.4s var(--ease-2);
      box-shadow: 0 12px 40px rgba(255,255,255,0.25);}
.tron-discover-cta:hover {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 20px 60px rgba(255,255,255,0.4);}
.tron-discover-cta svg {
      transition: transform 0.3s var(--ease-2);}
.tron-discover-cta:hover svg {
      transform: translateX(4px);}
.image-grid-section {
      padding: clamp(80px, 15vw, 160px) clamp(20px, 5vw, 80px);
      position: relative;}
.image-grid {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(24px, 3.5vw, 48px);}
.image-small {
      aspect-ratio: 4/3;
      border-radius: clamp(16px, 2.5vw, 32px);
      overflow: hidden;
      position: relative;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
      border: 1px solid rgba(255,255,255,0.05);
      transition: all 0.5s var(--ease-2);}
.image-small:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 80px rgba(0,0,0,0.7);
      border-color: rgba(255,255,255,0.1);}
.image-large img,
    .image-small img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s var(--ease-2);
      z-index: 0;}
.image-large:hover img,
    .image-small:hover img {
      transform: scale(1.05);}
.image-large .feature-content,
    .image-small .feature-content {
      margin-top: auto;
      padding: clamp(28px, 4vw, 50px);
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 20%, rgba(0,0,0,0.97) 100%);
      position: relative;
      z-index: 2;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);}
.image-cta {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: clamp(14px, 2.5vw, 24px);
      color: var(--white);
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s var(--ease-2);
      opacity: 0.85;
      padding: 8px 16px 8px 0;
      border-radius: 4px;}
.image-cta::after {
      content: '→';
      transition: transform 0.3s var(--ease-2);}
.image-cta:hover {
      opacity: 1;
      padding-left: 8px;}
.image-cta:hover::after {
      transform: translateX(4px);}
.image-large h3,
    .image-small h3 {
      font-size: clamp(20px, 2.5vw, 32px);
      font-weight: 700;
      margin-bottom: clamp(8px, 1.5vw, 14px);
      letter-spacing: -0.02em;
      line-height: 1.2;
      text-shadow: 0 2px 8px rgba(0,0,0,0.3);}
.image-large p,
    .image-small p {
      color: rgba(255,255,255,0.85);
      font-size: clamp(14px, 1.4vw, 16px);
      line-height: 1.6;
      text-shadow: 0 1px 4px rgba(0,0,0,0.3);}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');

    .stats {
      padding: clamp(100px, 15vw, 180px) clamp(20px, 5vw, 80px);
      position: relative;}
.stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: clamp(24px, 3vw, 32px);
      max-width: 1400px;
      margin: 0 auto;}
.stat {
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: clamp(20px, 2.5vw, 28px);
      padding: clamp(40px, 6vw, 56px) clamp(28px, 4vw, 44px);
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.stat::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(135deg, transparent, transparent);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.stat:nth-child(1)::before,
    .stat:nth-child(3)::before {
      background: linear-gradient(135deg, rgba(0, 255, 136, 0.4), transparent);}
.stat:nth-child(2)::before,
    .stat:nth-child(4)::before {
      background: linear-gradient(135deg, rgba(255, 0, 80, 0.4), transparent);}
.stat:hover::before {
      opacity: 1;}
.stat:hover {
      transform: translateY(-6px);
      background: rgba(255, 255, 255, 0.05);}
.stat:nth-child(1) h3,
    .stat:nth-child(3) h3 {
      color: #00ff88;}
.stat:nth-child(2) h3,
    .stat:nth-child(4) h3 {
      color: #ff0050;}
.stat h3 {
      font-size: clamp(48px, 7vw, 72px);
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: clamp(12px, 1.5vw, 16px);
      font-family: 'Space Grotesk', -apple-system, sans-serif;
      line-height: 1;
      position: relative;
      z-index: 1;}
.stat p {
      font-size: clamp(13px, 1.3vw, 15px);
      color: rgba(255, 255, 255, 0.7);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      font-weight: 500;
      position: relative;
      z-index: 1;}
.software-section {
      padding: clamp(80px, 12vw, 160px) clamp(20px, 5vw, 80px);
      overflow: hidden;}
.software-card {
      position: relative;
      max-width: 1400px;
      margin: 0 auto;
      aspect-ratio: 16/9;
      border-radius: clamp(24px, 3vw, 40px);
      overflow: hidden;
      display: flex;
      align-items: flex-end;
      min-height: 400px;}
.software-video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;}
.software-content {
      position: relative;
      z-index: 2;
      padding: clamp(32px, 6vw, 80px);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;}
.software-header h2 {
      font-size: clamp(32px, 5vw, 64px);
      font-weight: 700;
      margin-bottom: clamp(12px, 1.5vw, 20px);
      letter-spacing: -0.02em;
      word-wrap: break-word;
      overflow-wrap: break-word;}
.software-tagline {
      font-size: clamp(15px, 1.8vw, 22px);
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: clamp(28px, 4vw, 48px);
      word-wrap: break-word;
      overflow-wrap: break-word;}
.software-features {
      list-style: none;
      margin-bottom: clamp(28px, 4vw, 48px);
      display: grid;
      gap: clamp(12px, 2vw, 24px);
      max-width: 100%;}
.software-features li {
      display: flex;
      align-items: flex-start;
      font-size: clamp(13px, 1.4vw, 17px);
      color: rgba(255, 255, 255, 0.9);
      word-wrap: break-word;
      overflow-wrap: break-word;}
.software-features li::before {
      content: '→';
      color: #00ff88;
      font-size: clamp(16px, 2vw, 24px);
      margin-right: clamp(10px, 1.5vw, 20px);
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 2px;}
.services-head {
      max-width: 820px;
      margin: 0 auto clamp(44px, 6vw, 72px);
      text-align: center;}
.services-head h2 {
      font-size: clamp(32px, 5vw, 56px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.06;
      color: var(--white);}
.services-head p {
      margin-top: clamp(14px, 2vw, 20px);
      font-size: clamp(14.5px, 1.4vw, 17px);
      line-height: 1.6;
      color: var(--gray-400);}
a.feature { display: block; color: inherit; text-decoration: none;}
#services .features-grid { grid-template-columns: repeat(4, 1fr);}
.process-section {
      padding: clamp(100px, 16vw, 200px) clamp(20px, 5vw, 80px);
      overflow: hidden;}
.process-head {
      max-width: 820px;
      margin: 0 auto clamp(50px, 6vw, 78px);
      text-align: center;}
.process-eyebrow {
      display: inline-block;
      font-size: clamp(11px, 1.1vw, 12.5px);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--gray-400);
      margin-bottom: clamp(16px, 2.2vw, 22px);}
.process-head h2 {
      font-size: clamp(36px, 6vw, 68px);
      font-weight: 600;
      letter-spacing: -0.03em;
      line-height: 1.05;
      color: var(--white);}
.process-head p {
      margin-top: clamp(16px, 2.2vw, 24px);
      font-size: clamp(15px, 1.5vw, 18px);
      line-height: 1.6;
      color: var(--gray-400);}
.rm {
      --band: clamp(150px, 15vw, 215px);
      --tick: calc(var(--band) * 0.26);   /* Textkante -> Marker auf der Strasse */
      position: relative;
      max-width: 1340px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: auto var(--band) auto;
      column-gap: 0;   /* zwingend: sonst driften Spaltenmitten gegen die Ankerpunkte */
      /* Luft fuer den Gruppenrahmen: sein Schild sitzt sonst auf der Kicker-Zeile */
      --gruppe-luft: clamp(26px, 2.8vw, 38px);
      padding-block: var(--gruppe-luft);}
.rm.fade-in { opacity: 1; transform: none; transition: none;}
.rm-band { grid-row: 2; grid-column: 1 / -1; position: relative;}
.rm-road {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;}
.rm-road path {
      fill: none;
      stroke-linecap: round;}
.rm-road .rm-halo {              /* weicher Schein unter der Linie */
      stroke: rgba(255,255,255,.07);
      stroke-width: 7;}
.rm-road .rm-line {
      stroke: url(#rmFade);
      stroke-width: 1.25;}
.rm-road .rm-comet {             /* Lichtpunkt, der die Strasse entlangwandert */
      stroke: rgba(255,255,255,.95);
      stroke-width: 2;
      opacity: 0;}
.rm.rm-ready.visible .rm-road .rm-halo { animation: rmDraw 1.9s var(--ease-1) 0.05s forwards;}
.rm.rm-ready.visible .rm-road .rm-line { animation: rmDraw 1.7s var(--ease-1) 0.10s forwards;}
.rm.rm-ready.visible .rm-road .rm-comet { animation: rmComet 5.5s linear 1.8s infinite;}
.rm-mark {
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--black);
      border: 1px solid rgba(255,255,255,.6);
      opacity: 0;
      transform: translate(-50%, -50%) scale(.3);
      transition: opacity .55s var(--ease-1), transform .55s var(--ease-1), border-color .4s var(--ease-2);
      transition-delay: calc(var(--i) * 160ms + 720ms);}
.rm.visible .rm-mark { opacity: 1; transform: translate(-50%, -50%) scale(1);}
.rm-mark::before {               /* Innenpunkt */
      content: '';
      position: absolute;
      inset: 3px;
      border-radius: 50%;
      background: rgba(255,255,255,.85);
      transform: scale(0);
      transition: transform .45s var(--ease-1);
      transition-delay: calc(var(--i) * 160ms + 860ms);}
.rm.visible .rm-mark::before { transform: scale(1);}
.rm-mark.is-end {
      background: #fff;
      border-color: #fff;
      box-shadow: 0 0 22px rgba(255,255,255,.65);}
.rm-mark.is-end::before { background: #fff;}
.rm-mark.is-end::after {         /* Zielmarke pulsiert */
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.6);
      opacity: 0;}
.rm.visible .rm-mark.is-end::after { animation: rmPulse 2.8s ease-out 1.6s infinite;}
.rm-step {
      position: relative;
      z-index: 1;
      text-align: center;
      padding-inline: clamp(14px, 2.2vw, 40px);
      opacity: 0;
      transform: translateY(16px);
      transition: opacity .8s var(--ease-1), transform .8s var(--ease-1);
      transition-delay: calc(var(--i) * 160ms + 820ms);}
.rm.visible .rm-step { opacity: 1; transform: none;}
.rm-step.is-up { grid-row: 1; align-self: end;   padding-bottom: clamp(16px, 1.8vw, 24px);}
.rm-step.is-down { grid-row: 3; align-self: start; padding-top:    clamp(16px, 1.8vw, 24px);}
.rm-step:nth-of-type(1) { grid-column: 1;}
.rm-step:nth-of-type(2) { grid-column: 2;}
.rm-step:nth-of-type(3) { grid-column: 3;}
.rm-step:nth-of-type(4) { grid-column: 4;}
.rm-step:nth-of-type(5) { grid-column: 5;}
.rm-step:nth-of-type(6) { grid-column: 6;}

/* Transmit Server und Interface gehoeren zusammen: ein Rahmen ueber
   Spalte 3 und 4, quer ueber alle drei Zeilen, mit Schild an der Oberkante. */
.rm-gruppe {
      grid-column: 3 / span 2;
      grid-row: 1 / -1;
      position: relative;
      pointer-events: none;
      margin: calc(-1 * var(--gruppe-luft)) clamp(6px, 1vw, 16px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 2px;
      background: rgba(255,255,255,.022);
      opacity: 0;
      transform: scaleY(.94);
      transform-origin: center;
      transition: opacity .9s var(--ease-1), transform .9s var(--ease-1);
      transition-delay: 1.15s;}
.rm.visible .rm-gruppe { opacity: 1; transform: none;}
.rm-gruppe-schild {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 5px 14px;
      background: #000;
      font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
      font-size: clamp(9px, .88vw, 10.5px);
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.72);
      white-space: nowrap;}
.rm-step::after {                /* feiner Strich zum Marker */
      content: '';
      position: absolute;
      left: 50%;
      width: 1px;
      height: var(--tick);
      transform: scaleY(0);
      transition: transform .6s var(--ease-1);
      transition-delay: calc(var(--i) * 160ms + 640ms);}
.rm-step.is-up::after {
      top: 100%;
      transform-origin: top;
      background: linear-gradient(rgba(255,255,255,.04), rgba(255,255,255,.34));}
.rm-step.is-down::after {
      bottom: 100%;
      transform-origin: bottom;
      background: linear-gradient(rgba(255,255,255,.34), rgba(255,255,255,.04));}
.rm.visible .rm-step::after { transform: scaleY(1);}
.rm-kicker {
      display: block;
      font-size: clamp(10px, 1vw, 11.5px);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gray-500);
      margin-bottom: clamp(10px, 1.2vw, 14px);
      transition: color .4s var(--ease-2);}
.rm-kicker b {
      color: rgba(255,255,255,.85);
      font-weight: 600;
      margin-right: 8px;}
.rm-step h3 {
      font-size: clamp(18px, 1.6vw, 24px);
      font-weight: 600;
      letter-spacing: -0.02em;
      line-height: 1.25;
      color: var(--white);
      margin-bottom: clamp(8px, 1vw, 11px);}
.rm-step p {
      font-size: clamp(13px, 1.15vw, 14.5px);
      line-height: 1.6;
      color: var(--gray-400);
      max-width: 27ch;
      margin: 0 auto;
      transition: color .4s var(--ease-2);}
.rm-step:hover .rm-kicker { color: rgba(255,255,255,.7);}
.rm-step:hover p { color: rgba(255,255,255,.72);}
.cta-section {
      padding: clamp(100px, 18vw, 240px) clamp(20px, 5vw, 80px);
      text-align: center;}
.cta-section h2 {
      font-size: clamp(40px, 7vw, 80px);
      font-weight: 600;
      letter-spacing: -0.03em;
      margin-bottom: clamp(30px, 4vw, 50px);
      line-height: 1.1;}
.cta-buttons {
      display: flex;
      gap: clamp(16px, 2vw, 24px);
      justify-content: center;
      flex-wrap: wrap;}
.btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: clamp(16px, 2vw, 22px) clamp(32px, 4vw, 44px);
      background: var(--white);
      color: var(--black);
      text-decoration: none;
      font-size: clamp(14px, 1.5vw, 17px);
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.4s var(--ease-2);
      box-shadow: 0 8px 32px rgba(255,255,255,0.2);}
.btn-primary:hover {
      transform: scale(1.05) translateY(-2px);
      box-shadow: 0 24px 64px rgba(255, 255, 255, 0.4);
      background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);}
.btn-secondary {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: clamp(16px, 2vw, 22px) clamp(32px, 4vw, 44px);
      background: rgba(255,255,255,0.05);
      color: var(--white);
      text-decoration: none;
      font-size: clamp(14px, 1.5vw, 17px);
      font-weight: 600;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.1);
      transition: all 0.4s var(--ease-2);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);}
.btn-secondary:hover {
      border-color: rgba(255,255,255,0.3);
      background: rgba(255,255,255,0.1);
      transform: translateY(-2px);
      box-shadow: 0 12px 40px rgba(255,255,255,0.1);}
footer {
      border-top: 1px solid rgba(255,255,255,.14);
      padding: clamp(56px, 8vw, 96px) clamp(20px, 5vw, 80px) clamp(28px, 3.4vw, 40px);
      --ft-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;}

.ft-oben {
      max-width: 1400px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
      gap: clamp(36px, 6vw, 96px);
      padding-bottom: clamp(40px, 5.5vw, 68px);}

/* Marke: Logo statt Wortmarke im Text */
.ft-logo {
      display: inline-block;
      line-height: 0;}
.ft-logo img {
      display: block;
      height: clamp(21px, 2.1vw, 28px);
      width: auto;}
.ft-marke p {
      margin-top: clamp(18px, 2.2vw, 26px);
      max-width: 34ch;
      font-size: clamp(13px, 1.18vw, 15px);
      line-height: 1.6;
      color: rgba(255,255,255,.5);}

.ft-spalten {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(24px, 3.5vw, 56px);}
.ft-spalte h4 {
      margin-bottom: clamp(16px, 2vw, 22px);
      font-family: var(--ft-mono);
      font-size: clamp(9px, .88vw, 10.5px);
      font-weight: 400;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.42);}
.ft-spalte ul {
      list-style: none;
      margin: 0;
      padding: 0;}
.ft-spalte li + li {
      margin-top: clamp(9px, 1.1vw, 13px);}
.ft-spalte a {
      font-size: clamp(13px, 1.18vw, 15px);
      color: rgba(255,255,255,.72);
      text-decoration: none;
      transition: color .25s ease;}
.ft-spalte a:hover,
.ft-spalte a:focus-visible { color: #fff;}

.ft-kontakt .ft-mail {
      display: inline-block;
      font-size: clamp(14px, 1.35vw, 17px);
      font-weight: 500;
      letter-spacing: -.012em;
      color: #fff;
      text-decoration: none;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255,255,255,.35);
      transition: border-color .25s ease;}
.ft-kontakt .ft-mail:hover { border-bottom-color: #fff;}
.ft-kontakt p {
      margin-top: clamp(14px, 1.6vw, 18px);
      font-size: clamp(12.5px, 1.1vw, 14px);
      line-height: 1.55;
      color: rgba(255,255,255,.42);}

.ft-unten {
      max-width: 1400px;
      margin: 0 auto;
      padding-top: clamp(22px, 2.6vw, 30px);
      border-top: 1px solid rgba(255,255,255,.1);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      font-family: var(--ft-mono);
      font-size: clamp(9.5px, .9vw, 11px);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.38);}
.ft-recht {
      display: flex;
      gap: clamp(16px, 2vw, 28px);}
.ft-recht a {
      color: rgba(255,255,255,.38);
      text-decoration: none;
      transition: color .25s ease;}
.ft-recht a:hover,
.ft-recht a:focus-visible { color: rgba(255,255,255,.8);}

@media (max-width: 900px) {
  .ft-oben { grid-template-columns: 1fr; gap: clamp(34px, 7vw, 46px);}
}
@media (max-width: 620px) {
  .ft-spalten { grid-template-columns: 1fr 1fr; row-gap: clamp(28px, 6vw, 36px);}
  .ft-kontakt { grid-column: 1 / -1;}
  .ft-unten { flex-direction: column; align-items: flex-start; gap: 14px;}
}

.progress-bar {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: var(--white);
      z-index: 9999;
      transform-origin: left;
      transform: scaleX(0);
      transition: transform 0.1s linear;}
.fade-in {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.8s var(--ease-1);}
.fade-in.visible {
      opacity: 1;
      transform: translateY(0);}
*,
    *::before,
    *::after {
      box-sizing: border-box;}
.kpis {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 40px;
      opacity: 0;
      animation: fadeInUp 1.2s var(--ease-2) 0.9s forwards;}
.kpi {
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 999px;
      background: rgba(255,255,255,0.03);
      font-size: clamp(13px, 1.2vw, 15px);
      display: flex;
      align-items: center;
      gap: 8px;}
.section {
      padding: clamp(80px, 15vw, 160px) clamp(20px, 5vw, 80px);
      position: relative;
      overflow-x: hidden;
      max-width: 100%;}
.section h2 {
      font-size: clamp(36px, 7vw, 80px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -0.03em;
      text-align: center;
      margin-bottom: clamp(20px, 3vw, 40px);
      max-width: 100%;
      overflow-wrap: break-word;
      word-wrap: break-word;}
.lede {
      color: var(--gray-400);
      max-width: 920px;
      margin: 0 auto clamp(40px, 6vw, 60px);
      text-align: center;
      font-size: clamp(16px, 1.8vw, 20px);
      line-height: 1.6;}
.container {
      max-width: 1400px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      overflow-x: hidden;}
.use-cases-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
      gap: clamp(24px, 3.5vw, 48px);
      margin-top: clamp(40px, 6vw, 60px);}
.use-case-card {
      position: relative;
      padding: 0;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      border-radius: clamp(20px, 3vw, 32px);
      border: 1px solid rgba(255,255,255,0.12);
      min-height: 450px;
      display: flex;
      flex-direction: column;
      transition: all 0.5s var(--ease-2);
      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
      backdrop-filter: blur(10px);}
.use-case-card:hover {
      transform: translateY(-12px) scale(1.02);
      box-shadow: 0 30px 80px rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.25);
      background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.04));}
.use-case-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      z-index: 0;
      transition: transform 0.6s var(--ease-2);
      opacity: 1;}
.use-case-card:hover .use-case-bg {
      transform: scale(1.05);
      opacity: 1;}
.use-case-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.85) 100%);
      z-index: 1;}
.use-case-content {
      position: relative;
      z-index: 2;
      padding: clamp(32px, 5vw, 48px);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;}
.use-case-icon {
      font-size: clamp(2.5rem, 4vw, 3.5rem);
      opacity: 0.95;
      color: #fff;
      margin-bottom: clamp(16px, 2.5vw, 24px);
      filter: drop-shadow(0 3px 10px rgba(0,0,0,1));}
.use-case-card h3 {
      font-size: clamp(24px, 2.8vw, 32px);
      font-weight: 700;
      margin-bottom: clamp(16px, 2.5vw, 24px);
      text-shadow: 0 4px 20px rgba(0,0,0,0.8);
      line-height: 1.15;
      letter-spacing: -0.01em;}
.use-case-list {
      list-style: none;
      display: grid;
      gap: 12px;}
.use-case-list li {
      display: flex;
      gap: 12px;
      align-items: start;
      color: rgba(255,255,255,0.9);
      font-size: clamp(14px, 1.4vw, 16px);
      line-height: 1.6;
      padding: clamp(8px, 1.5vw, 12px);
      background: rgba(255,255,255,0.03);
      border-radius: 8px;
      border-left: 2px solid rgba(255,255,255,0.2);
      transition: all 0.3s var(--ease-2);}
.use-case-list li:hover {
      background: rgba(255,255,255,0.06);
      border-left-color: rgba(255,255,255,0.4);
      transform: translateX(4px);}
.use-case-list i {
      margin-top: 4px;
      opacity: 0.8;
      font-size: clamp(12px, 1.2vw, 14px);}
.architecture-section {
      position: relative;
      width: calc(95% - 10px);
      max-width: calc(100% - 40px);
      margin: 0 auto;
      padding: clamp(80px, 15vw, 160px) 0;
      overflow: hidden;
      border-radius: 24px;}
.architecture-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 1;
      z-index: 0;}
.architecture-section::before {
      content: '';
      position: absolute;
      inset: 0;
      background: none;
      z-index: 1;
      pointer-events: none;}
.arch-showcase {
      max-width: 85%;
      width: 85%;
      margin: clamp(40px, 6vw, 80px) auto 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      position: relative;
      z-index: 2;
      overflow: hidden;
      padding: 0 10px;}
.arch-content {
      position: relative;
      z-index: 2;}
.architecture-section .container {
      position: relative;
      z-index: 2;
      max-width: 85%;
      width: 85%;
      margin: 0 auto;
      overflow: hidden;
      padding: 0 20px;}
.architecture-section h2 {
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      max-width: 100%;
      font-size: clamp(32px, 6vw, 72px) !important;
      padding: 0 10px;
      text-align: center;}
.architecture-section .lede {
      word-wrap: break-word;
      overflow-wrap: break-word;
      max-width: 100%;
      padding: 0 10px;}
.arch-feature-list {
      display: grid;
      gap: clamp(20px, 3vw, 28px);}
.arch-feature-item {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 16px;
      padding: clamp(28px, 4vw, 36px);
      transition: all 0.3s var(--ease-2);
      display: flex;
      gap: clamp(20px, 3vw, 24px);
      align-items: center;
      position: relative;
      backdrop-filter: blur(10px);}
.arch-feature-item:hover {
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.25);
      transform: translateY(-4px);}
.arch-feature-icon {
      width: clamp(60px, 7vw, 70px);
      height: clamp(60px, 7vw, 70px);
      min-width: clamp(60px, 7vw, 70px);
      background: rgba(255,255,255,0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.2);
      transition: all 0.3s var(--ease-2);}
.arch-feature-item:hover .arch-feature-icon {
      background: rgba(255,255,255,0.15);
      border-color: rgba(255,255,255,0.3);}
.arch-feature-icon i {
      font-size: clamp(1.6rem, 2.2vw, 1.8rem);
      color: #fff;}
.arch-feature-text h4 {
      font-size: clamp(17px, 1.8vw, 20px);
      font-weight: 600;
      margin-bottom: clamp(8px, 1.2vw, 12px);
      color: #fff;
      letter-spacing: -0.01em;
      line-height: 1.3;}
.arch-feature-text p {
      font-size: clamp(14px, 1.4vw, 16px);
      color: rgba(255,255,255,0.75);
      line-height: 1.6;}
.nx {
      --line: rgba(255,255,255,.22);
      --dim:  rgba(255,255,255,.45);
      --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.0fr) minmax(0, 1.06fr);
      gap: clamp(72px, 5.8vw, 112px);
      align-items: center;}
.nx-wires {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      z-index: 0;
      pointer-events: none;
      overflow: visible;}
.nx-wires path { fill: none; stroke-linecap: butt;}
.nx-wire-chip {
      position: absolute;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.8);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-radius: 9px;
      font-size: 11px;
      color: var(--wc, #fff);
      pointer-events: none;
      opacity: 0;
      transition: opacity .55s var(--ease-2);}
.nx.is-wired .nx-wire-chip { opacity: 1;}
/* --- Bausteine als Typenschilder: nur die Plakette ist Flaeche,
       der Fliesstext steht frei auf dem Hintergrund. --- */
.nx-node {
  position: relative;
  z-index: 1;
  background: none;
  border: 0;
  padding: 0;
}

.nx-plate {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: stretch;
  background: #000;
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}

.nx-no {
  display: grid;
  place-items: center;
  padding: 0 clamp(12px, 1.3vw, 17px);
  background: rgba(255,255,255,.13);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 1.05vw, 13px);
  letter-spacing: .12em;
  color: #fff;
}

.nx-id { padding: clamp(13px, 1.5vw, 18px) clamp(14px, 1.6vw, 20px); min-width: 0; }

.nx-node h3 {
  font-size: clamp(15px, 1.35vw, 18.5px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
}

.nx-loc {
  display: block;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9px, .9vw, 10.5px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}

.nx-mark {                       /* Geraetesymbol am rechten Rand der Plakette */
  display: grid;
  place-items: center;
  padding: 0 clamp(13px, 1.4vw, 18px);
  border-left: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.62);
  font-size: clamp(14px, 1.4vw, 17px);
}

.nx-node p {                     /* haengt frei unter der Plakette */
  margin: clamp(12px, 1.4vw, 16px) 0 0;
  padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 1px solid rgba(255,255,255,.22);
  font-size: clamp(12.5px, 1.15vw, 14px);
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  text-shadow: 0 1px 14px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.8);
  max-width: 34ch;
}

/* Knotenpunkt: staerkere Plakette */
.nx-hub .nx-plate { box-shadow: 0 20px 54px rgba(0,0,0,.7); }
.nx-hub .nx-no { background: #fff; color: #000; }
.nx-hub h3 { font-size: clamp(19px, 1.95vw, 26px); }
.nx-hub .nx-id { padding: clamp(16px, 1.9vw, 24px) clamp(17px, 1.9vw, 24px); }
.nx-hub p { color: rgba(255,255,255,.82); }

.nx-runs {
  list-style: none;
  margin: clamp(12px, 1.4vw, 16px) 0 0;
  padding-left: clamp(12px, 1.4vw, 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.nx-runs li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  background: #000;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9.5px, .92vw, 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.nx-runs i { color: rgba(255,255,255,.5); font-size: 1.05em;}
.nx-sats { display: grid; gap: clamp(16px, 1.8vw, 26px);}
.nx-trunk-label {
      position: absolute;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 28px; height: 28px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(0,0,0,.82);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 0;
      border-radius: 9px;
      color: #fff;
      font-size: 10px;
      pointer-events: none;
      opacity: 0;
      transition: opacity .6s var(--ease-2) 1.1s;}
.nx.is-wired .nx-trunk-label { opacity: 1;}
.automation-wrapper {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 24px;
      padding: clamp(48px, 8vw, 80px) clamp(32px, 5vw, 60px);
      position: relative;
      overflow: hidden;}
.automation-header {
      text-align: center;
      margin-bottom: clamp(48px, 7vw, 64px);
      position: relative;
      z-index: 1;}
.automation-header h2 {
      font-size: clamp(36px, 6vw, 56px);
      font-weight: 600;
      margin-bottom: clamp(16px, 2.5vw, 20px);
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: #fff;}
.automation-header p {
      font-size: clamp(16px, 1.8vw, 19px);
      color: rgba(255,255,255,0.65);
      max-width: 720px;
      margin: 0 auto;
      line-height: 1.6;
      font-weight: 400;}
.automation-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
      gap: clamp(16px, 2.5vw, 24px);
      margin-bottom: clamp(40px, 6vw, 56px);
      position: relative;
      z-index: 1;}
.automation-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 16px;
      padding: clamp(24px, 3.5vw, 32px);
      transition: all 0.3s var(--ease-2);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      position: relative;
      overflow: hidden;}
.automation-card:hover {
      background: rgba(255,255,255,0.05);
      border-color: rgba(255,255,255,0.18);
      transform: translateY(-4px);}
.automation-icon {
      width: clamp(48px, 6vw, 56px);
      height: clamp(48px, 6vw, 56px);
      background: rgba(255,255,255,0.08);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: clamp(16px, 2.5vw, 20px);
      transition: all 0.3s var(--ease-2);}
.automation-card:hover .automation-icon {
      background: rgba(255,255,255,0.12);}
.automation-icon i {
      font-size: clamp(1.4rem, 2vw, 1.6rem);
      color: #fff;}
.automation-content {
      position: relative;
      z-index: 1;}
.automation-content h3 {
      font-size: clamp(16px, 1.8vw, 18px);
      font-weight: 600;
      margin-bottom: clamp(8px, 1.2vw, 10px);
      color: #fff;
      letter-spacing: -0.01em;
      line-height: 1.3;}
.automation-content p {
      font-size: clamp(14px, 1.4vw, 15px);
      color: rgba(255,255,255,0.6);
      line-height: 1.5;}
.automation-cta {
      text-align: center;
      padding-top: clamp(32px, 5vw, 48px);
      border-top: 1px solid rgba(255,255,255,0.08);
      position: relative;
      z-index: 1;}
.automation-cta h3 {
      font-size: clamp(22px, 3vw, 28px);
      font-weight: 600;
      margin-bottom: clamp(12px, 2vw, 16px);
      color: #fff;
      letter-spacing: -0.015em;
      line-height: 1.25;}
.automation-cta p {
      font-size: clamp(15px, 1.6vw, 17px);
      color: rgba(255,255,255,0.6);
      margin-bottom: clamp(24px, 3.5vw, 32px);
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      line-height: 1.6;}
.automation-cta-button {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: clamp(14px, 2vw, 16px) clamp(28px, 4vw, 36px);
      background: #fff;
      color: #000;
      text-decoration: none;
      font-size: clamp(15px, 1.6vw, 16px);
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.3s var(--ease-2);}
.automation-cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(255,255,255,0.15);}
.automation-cta-button .arrow {
      transition: transform 0.3s var(--ease-2);}
.automation-cta-button:hover .arrow {
      transform: translateX(4px);}
.pricing-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
      gap: clamp(24px, 3.5vw, 40px);
      margin-top: clamp(40px, 6vw, 60px);}
.price-card {
      padding: 0;
      overflow: hidden;
      border-radius: clamp(16px, 2.5vw, 24px);
      transition: all 0.4s ease;
      display: flex;
      flex-direction: column;
      position: relative;
      box-shadow: 0 10px 40px rgba(0,0,0,0.3);}
.price-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 20px 60px rgba(0,0,0,0.5);}
.price-card.starter {
      background: linear-gradient(145deg, #ffffff, #f5f5f5);
      border: 2px solid #e5e5e5;}
.price-card.starter .price-header {
      background: linear-gradient(135deg, #ffffff, #fafafa);
      border-bottom: 1px solid #e5e5e5;}
.price-card.starter .price-tag {
      background: rgba(0,0,0,0.08);
      border-color: rgba(0,0,0,0.15);
      color: #404040;}
.price-card.starter .price-icon {
      background: linear-gradient(135deg, #f5f5f5, #e5e5e5);}
.price-card.starter .price-icon i {
      color: #525252;}
.price-card.starter .price-name,
    .price-card.starter .price-amount {
      color: #000;}
.price-card.starter .price-period {
      color: #737373;}
.price-card.starter .price-features li {
      color: #404040;}
.price-card.starter .price-cta {
      background: #000;
      color: #fff;}
.price-card.starter .price-cta:hover {
      background: #262626;}
.price-card.featured {
      background: linear-gradient(145deg, #ffd086, #ffb84d);
      border: 2px solid #ff9500;
      transform: scale(1.05);
      box-shadow: 0 20px 60px rgba(255,208,134,0.4);}
.price-card.featured .price-header {
      background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
      border-bottom: 1px solid rgba(255,255,255,0.2);}
.price-card.featured .price-tag {
      background: rgba(255,255,255,0.3);
      border-color: rgba(255,255,255,0.5);
      color: #000;
      font-weight: 700;}
.price-card.featured .price-icon {
      background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2));
      box-shadow: 0 8px 24px rgba(0,0,0,0.15);}
.price-card.featured .price-icon i {
      color: #000;}
.price-card.featured .price-name,
    .price-card.featured .price-amount {
      color: #000;}
.price-card.featured .price-period {
      color: rgba(0,0,0,0.7);}
.price-card.featured .price-features li {
      color: rgba(0,0,0,0.85);}
.price-card.featured .price-cta {
      background: #000;
      color: #fff;
      font-weight: 700;}
.price-card.featured .price-cta:hover {
      background: #262626;
      transform: scale(1.05);}
.price-card.enterprise {
      background: linear-gradient(145deg, #171717, #0a0a0a);
      border: 2px solid #404040;}
.price-card.enterprise .price-header {
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
      border-bottom: 1px solid rgba(255,255,255,0.1);}
.price-card.enterprise .price-tag {
      background: rgba(255,255,255,0.1);
      border-color: rgba(255,255,255,0.2);
      color: #fff;}
.price-card.enterprise .price-icon {
      background: linear-gradient(135deg, rgba(255,208,134,0.2), rgba(255,208,134,0.1));}
.price-card.enterprise .price-icon i {
      color: #ffd086;}
.price-card.enterprise .price-name,
    .price-card.enterprise .price-amount {
      color: #fff;}
.price-card.enterprise .price-period {
      color: #aaa;}
.price-card.enterprise .price-features li {
      color: #dcdcdc;}
.price-card.enterprise .price-cta {
      background: #ffd086;
      color: #000;}
.price-card.enterprise .price-cta:hover {
      background: #ffb84d;}
.price-header {
      padding: clamp(28px, 4vw, 32px) clamp(24px, 3.5vw, 28px) clamp(20px, 3vw, 24px);}
.price-tag {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: clamp(12px, 1.1vw, 14px);
      z-index: 2;
      font-weight: 600;}
.price-icon {
      width: clamp(50px, 7vw, 60px);
      height: clamp(50px, 7vw, 60px);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: clamp(16px, 2.5vw, 20px);}
.price-icon i {
      font-size: clamp(1.5rem, 2.2vw, 1.8rem);}
.price-name {
      font-size: clamp(20px, 2.2vw, 24px);
      margin-bottom: clamp(8px, 1.5vw, 12px);
      font-weight: 600;}
.price-amount {
      font-size: clamp(32px, 4vw, 40px);
      font-weight: 800;
      margin: 0;
      line-height: 1;}
.price-period {
      font-size: clamp(13px, 1.2vw, 15px);
      margin-top: 4px;}
.price-body {
      padding: clamp(24px, 3.5vw, 28px);
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;}
.price-features {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-bottom: clamp(20px, 3vw, 24px);}
.price-features li {
      display: flex;
      gap: 10px;
      font-size: clamp(13px, 1.3vw, 15px);
      line-height: 1.5;}
.price-features i {
      margin-top: 3px;
      opacity: 0.9;}
.price-cta {
      display: block;
      width: 100%;
      text-align: center;
      padding: clamp(14px, 2vw, 16px) clamp(28px, 4vw, 32px);
      text-decoration: none;
      font-size: clamp(14px, 1.4vw, 16px);
      font-weight: 600;
      border-radius: 100px;
      transition: all 0.4s var(--ease-2);
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);}
.price-cta:hover {
      transform: scale(1.05);
      box-shadow: 0 12px 40px rgba(0,0,0,0.3);}
.breadcrumb {
      display: flex;
      gap: 8px;
      align-items: center;
      margin-bottom: clamp(16px, 2vw, 24px);
      color: #aaa;
      font-size: clamp(13px, 1.2vw, 15px);
      opacity: 0;
      animation: fadeInUp 1.2s var(--ease-2) 0.1s forwards;}
.breadcrumb a {
      color: #ddd;
      text-decoration: none;
      transition: opacity 0.3s;}
.breadcrumb a:hover {
      opacity: 0.7;}
a {
      color: var(--white);
      text-decoration: none;
      transition: opacity 0.3s var(--ease-1);}
a:hover {
      opacity: 0.6;}
img, video, svg, canvas, iframe {
      display: block;
      max-width: 100%;
      height: auto;}
:where(h1,h2,h3,h4,p,li,span,a,strong,em,small) {
      overflow-wrap: break-word;
      word-break: break-word;
      hyphens: auto;}

/* In grossen Ueberschriften trennt die automatische Silbentrennung an
   unschoenen Stellen ("war-um"). Dort bricht nur an Wortgrenzen. */
h1, h2, h3 { hyphens: none; }
.code {
      border:1px solid var(--line);
      border-radius:14px;
      padding:16px;
      background:#0a0a0a;
      overflow:auto;
      position:relative;
      box-shadow:0 8px 32px rgba(0,0,0,.4);}
.code::after {
      content:'';
      position:absolute;
      top:0;
      right:0;
      width:120px;
      height:120px;
      background:linear-gradient(135deg,transparent,rgba(255,255,255,.02));
      border-radius:0 14px 0 100%;
      pointer-events:none;}
pre {
      font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
      font-size:.95rem;
      line-height:1.6;
      color:#eaeaea;
      white-space:pre-wrap;
      /* <-- keine Dehnung über den Rand */
      word-break:break-word;
      tab-size:2;}

/* ---------- Keyframes ---------- */
@keyframes marquee {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }}
@keyframes rmDraw {
      to { stroke-dashoffset: 0; }}
@keyframes rmComet {
      0%   { stroke-dashoffset: 0; opacity: 0; }
      6%   { opacity: 1; }
      94%  { opacity: 1; }
      100% { stroke-dashoffset: calc(var(--L) * -1px); opacity: 0; }}
@keyframes rmPulse {
      0%   { transform: scale(1);   opacity: .6; }
      70%  { transform: scale(3.2); opacity: 0; }
      100% { transform: scale(3.2); opacity: 0; }}
@keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  .software-card {
        aspect-ratio: 4/3;
        min-height: 500px;}
  .nav-menu {
        display: none;}
  .tron-discover-features {
        grid-template-columns: 1fr;}
  .pricing-grid {
        grid-template-columns: 1fr;}
  .price-card.featured {
        transform: scale(1);}
}
@media (max-width: 1240px) {
  #services .features-grid { grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 660px) {
  #services .features-grid { grid-template-columns: 1fr;}
}
@media (max-width: 1080px) {
  .rm {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        row-gap: clamp(38px, 6vw, 54px);
        max-width: 560px;
        padding-left: clamp(34px, 8vw, 46px);}
  .rm-band { display: none;}
  /* Der Gruppenrahmen wuerde im Einspalter implizite Spalten erzeugen */
  .rm-gruppe { display: none;}
  .rm-step,
      .rm-step.is-up,
      .rm-step.is-down {
        grid-row: auto;
        grid-column: 1;
        align-self: auto;
        text-align: left;
        padding: 0;}
  .rm-step p { max-width: none; margin: 0;}
  .rm-step::after {              /* senkrechte Strasse zwischen den Stationen */
        content: '';
        left: calc(-1 * clamp(34px, 8vw, 46px) / 2 - 0.5px);
        top: 22px;
        bottom: calc(-1 * clamp(38px, 6vw, 54px));
        height: auto;
        width: 1px;
        background: rgba(255,255,255,.18);
        transform: scaleY(1);
        transform-origin: top;}
  .rm-step:last-of-type::after { display: none;}
  .rm-step::before {             /* Marker */
        content: '';
        position: absolute;
        left: calc(-1 * clamp(34px, 8vw, 46px) / 2 - 5.5px);
        top: 5px;
        width: 11px;
        height: 11px;
        border-radius: 50%;
        background: var(--black);
        border: 1px solid rgba(255,255,255,.55);}
  .rm-step:last-of-type::before {
        background: #fff;
        border-color: #fff;
        box-shadow: 0 0 16px rgba(255,255,255,.6);}
}
@media (prefers-reduced-motion: reduce) {
  .rm-road path { stroke-dashoffset: 0 !important; animation: none !important;}
  .rm-comet { display: none;}
  .rm-step, .rm-mark { opacity: 1; transform: none; transition: none;}
  .rm-step::after { transform: scaleY(1); transition: none;}
  .rm-mark::before { transform: scale(1); transition: none;}
}
@media (max-width: 1024px) {
  .image-grid {
        grid-template-columns: 1fr;}
  .tron-discover-features {
        grid-template-columns: repeat(2, 1fr);}
  .use-cases-grid,
      .architecture-grid,
      .pricing-grid {
        grid-template-columns: 1fr;}
  .price-card.featured {
        transform: scale(1);}
  .pricing-grid {
        grid-template-columns: 1fr 1fr;}
}
@media (max-width: 940px) {
  .nx { grid-template-columns: 1fr; gap: clamp(26px, 4.5vw, 38px);}
  .nx-wires, .nx-trunk-label { display: none;}
  .nx-node p { max-width: none;}
  .nx-connector {
        display: block;
        justify-self: center;
        width: 1px;
        height: clamp(22px, 3.6vw, 32px);
        background: var(--line);}
}
@media (min-width: 941px) {
  .nx-connector { display: none;}
}