:root {
   --ink: #12172B;
   --panel: #1B2242;
   --panel-2: #232B52;
   --surface: #F4F6F4;
   --surface-2: #FFFFFF;
   --business: #2FB6A6;
   --business-dim: #1F8577;
   --private: #F2A33B;
   --private-dim: #C97F1E;
   --line: rgba(18, 23, 43, 0.12);
   --line-dark: rgba(244, 246, 244, 0.14);
   --ink-soft: rgba(18, 23, 43, 0.62);
   --tertiary: #378ADD;
   --quaternary: #B088F9;
 }

 .flow-tertiary {
   stroke: var(--tertiary);
 }

 .flow-quaternary {
   stroke: var(--quaternary);
 }

 .dest-tag-tertiary {
   fill: var(--tertiary);
 }

 .dest-tag-quaternary {
   fill: var(--quaternary);
 }


 * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   font-family: 'Inter', sans-serif;
   background: var(--surface);
   color: var(--ink);
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
 }

 h1,
 h2,
 h3 {
   font-family: 'Zilla Slab', serif;
   font-weight: 600;
   letter-spacing: -0.01em;
 }

 .mono {
   font-family: 'IBM Plex Mono', monospace;
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }

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

 .logo {
   display: inline-flex;
   align-items: center;
 }

 .logo-img {
   height: 60px;
   /* Höhe der Nav anpassen, Breite folgt automatisch */
   width: auto;
   display: block;
 }

 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.001ms !important;
     animation-iteration-count: 1 !important;
     transition-duration: 0.001ms !important;
   }
 }

 /* ---------- NAV ---------- */
 .nav {
   position: sticky;
   top: 0;
   z-index: 50;
   background: rgba(18, 23, 43, 0.92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid var(--line-dark);
 }

 .nav-inner {
   max-width: 1180px;
   margin: 0 auto;
   padding: 18px 28px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }

 .logo {
   color: #F4F6F4;
   font-family: 'Zilla Slab', serif;
   font-size: 22px;
   font-weight: 700;
   display: flex;
   align-items: center;
   gap: 9px;
 }

 .logo-mark {
   width: 22px;
   height: 22px;
   border-radius: 6px;
   background: linear-gradient(135deg, var(--business) 0%, var(--private) 100%);
   display: inline-block;
 }

 .nav-links {
   display: flex;
   align-items: center;
   gap: 32px;
 }

 .nav-links a {
   color: rgba(244, 246, 244, 0.72);
   font-size: 14.5px;
   font-weight: 500;
   transition: color .2s ease;
 }

 .nav-links a:hover {
   color: #F4F6F4;
 }

 .nav-cta {
   background: #F4F6F4;
   color: var(--ink) !important;
   padding: 9px 18px;
   border-radius: 7px;
   font-weight: 600;
   font-size: 14px;
 }

 .nav-mobile-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 6px;
 }

 .nav-mobile-toggle span {
   width: 22px;
   height: 2px;
   background: #F4F6F4;
   transition: transform .2s ease, opacity .2s ease;
 }

 .nav-mobile-toggle.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg);
 }

 .nav-mobile-toggle.open span:nth-child(2) {
   opacity: 0;
 }

 .nav-mobile-toggle.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg);
 }

 .nav-mobile-panel {
   display: none;
   flex-direction: column;
   background: var(--ink);
   border-bottom: 1px solid var(--line-dark);
   padding: 8px 28px 20px;
 }

 .nav-mobile-panel.open {
   display: flex;
 }

 .nav-mobile-panel a {
   color: rgba(244, 246, 244, 0.78);
   font-size: 15px;
   font-weight: 500;
   padding: 13px 0;
   border-top: 1px solid var(--line-dark);
 }

 .nav-mobile-panel a:first-child {
   border-top: none;
 }

 .nav-mobile-panel .nav-cta {
   margin-top: 12px;
   text-align: center;
   border-top: none;
 }

 /* ---------- HERO ---------- */
 .hero {
   background: var(--ink);
   color: #F4F6F4;
   padding: 96px 28px 64px;
   position: relative;
   overflow: hidden;
 }

 .hero-inner {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1.05fr 0.95fr;
   gap: 56px;
   align-items: center;
 }

 .eyebrow {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 12px;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--private);
   display: inline-flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 22px;
 }

 .eyebrow::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--private);
   box-shadow: 0 0 0 4px rgba(242, 163, 59, 0.18);
 }

 .hero h1 {
   font-size: 52px;
   line-height: 1.04;
   color: #F4F6F4;
   max-width: 560px;
 }

 .hero h1 em {
   font-style: normal;
   background: linear-gradient(100deg, var(--business), var(--private));
   -webkit-background-clip: text;
   background-clip: text;
   color: transparent;
 }

 .hero p.lede {
   margin-top: 22px;
   font-size: 17px;
   color: rgba(244, 246, 244, 0.68);
   max-width: 460px;
   line-height: 1.65;
 }

 .hero-actions {
   margin-top: 34px;
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
 }

 .btn {
   padding: 13px 22px;
   border-radius: 8px;
   font-weight: 600;
   font-size: 14.5px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
   display: inline-flex;
   align-items: center;
   gap: 8px;
 }

 .btn:hover {
   transform: translateY(-1px);
 }

 .btn-private {
   background: var(--private);
   color: #1a1204;
 }

 .btn-private:hover {
   box-shadow: 0 8px 22px rgba(242, 163, 59, 0.28);
 }

 .btn-business {
   background: transparent;
   color: #F4F6F4;
   border-color: rgba(244, 246, 244, 0.28);
 }

 .btn-business:hover {
   border-color: rgba(244, 246, 244, 0.55);
 }

 .hero-note {
   margin-top: 26px;
   font-size: 13px;
   color: rgba(244, 246, 244, 0.45);
 }

 /* ---------- ROUTING DIAGRAM (signature element) ---------- */
 .routing {
   position: relative;
   height: 460px;
 }

 .routing svg {
   width: 100%;
   height: 100%;
   overflow: visible;
 }

 .flow-path {
   fill: none;
   stroke-width: 2;
   stroke-dasharray: 6 7;
   animation: dash 1.6s linear infinite;
 }

 .flow-business {
   stroke: var(--business);
 }

 .flow-private {
   stroke: var(--private);
 }

 @keyframes dash {
   to {
     stroke-dashoffset: -52;
   }
 }

 .node {
   fill: var(--panel);
   stroke: rgba(244, 246, 244, 0.18);
   stroke-width: 1;
 }

 .node-label {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 9.5px;
   fill: rgba(244, 246, 244, 0.5);
   letter-spacing: 0.08em;
 }

 .dest-label {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
   font-size: 13px;
   fill: #F4F6F4;
 }

 .dest-tag-business {
   fill: var(--business);
 }

 .dest-tag-private {
   fill: var(--private);
 }

 .pulse-dot {
   animation: pulse 2.2s ease-in-out infinite;
 }

 @keyframes pulse {

   0%,
   100% {
     opacity: 1;
     r: 5;
   }

   50% {
     opacity: 0.5;
     r: 6.5;
   }
 }

 /* ---------- SECTION SHELLS ---------- */
 section {
   padding: 88px 28px;
 }

 .section-inner {
   max-width: 1180px;
   margin: 0 auto;
 }

 .section-head {
   max-width: 620px;
   margin-bottom: 52px;
 }

 .section-head .eyebrow {
   color: var(--business-dim);
 }

 .section-head .eyebrow::before {
   background: var(--business-dim);
   box-shadow: 0 0 0 4px rgba(47, 182, 166, 0.14);
 }

 .section-head h2 {
   font-size: 34px;
   line-height: 1.15;
   color: var(--ink);
 }

 .section-head p {
   margin-top: 14px;
   font-size: 16px;
   color: var(--ink-soft);
 }

 /* ---------- TWO LANES ---------- */
 .lanes {
   background: var(--surface-2);
 }

 .lane-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0;
   border: 1px solid var(--line);
   border-radius: 16px;
   overflow: hidden;
 }

 .lane {
   padding: 44px 40px;
   position: relative;
 }

 .lane+.lane {
   border-left: 1px solid var(--line);
 }

 .lane-private {
   background: linear-gradient(180deg, rgba(242, 163, 59, 0.05), transparent 40%);
 }

 .lane-business {
   background: linear-gradient(180deg, rgba(47, 182, 166, 0.05), transparent 40%);
 }

 .lane-tag {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11.5px;
   letter-spacing: 0.12em;
   padding: 5px 10px;
   border-radius: 5px;
   display: inline-block;
   margin-bottom: 20px;
 }

 .lane-tag-private {
   background: rgba(242, 163, 59, 0.14);
   color: var(--private-dim);
 }

 .lane-tag-business {
   background: rgba(47, 182, 166, 0.14);
   color: var(--business-dim);
 }

 .lane h3 {
   font-size: 24px;
   color: var(--ink);
   margin-bottom: 10px;
 }

 .lane p.desc {
   color: var(--ink-soft);
   font-size: 15px;
   margin-bottom: 24px;
   max-width: 400px;
 }

 .lane ul {
   list-style: none;
 }

 .lane li {
   display: flex;
   gap: 10px;
   font-size: 14.5px;
   color: var(--ink);
   padding: 10px 0;
   border-top: 1px solid var(--line);
 }

 .lane li:first-of-type {
   border-top: none;
 }

 .lane li .check {
   flex-shrink: 0;
   width: 16px;
   height: 16px;
   margin-top: 2px;
 }

 .lane-private .check {
   color: var(--private-dim);
 }

 .lane-business .check {
   color: var(--business-dim);
 }

 @media (max-width:860px) {
   .lane-grid {
     grid-template-columns: 1fr;
   }

   .lane+.lane {
     border-left: none;
     border-top: 1px solid var(--line);
   }
 }

 /* ---------- HOW IT WORKS ---------- */
 .steps {
   background: var(--surface);
 }

 .step-row {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
 }

 .step {
   padding: 28px 0 0;
   border-top: 2px solid var(--ink);
   position: relative;
 }

 .step-num {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 13px;
   color: var(--ink-soft);
   margin-bottom: 14px;
   display: block;
 }

 .step h3 {
   font-size: 20px;
   margin-bottom: 10px;
   color: var(--ink);
 }

 .step p {
   font-size: 14.5px;
   color: var(--ink-soft);
   line-height: 1.6;
 }

 @media (max-width:860px) {
   .step-row {
     grid-template-columns: 1fr;
   }
 }

 /* ---------- TRUST STRIP ---------- */
 .trust {
   background: var(--ink);
   color: #F4F6F4;
 }

 .trust-inner {
   max-width: 1180px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 1fr 1.4fr;
   gap: 56px;
   align-items: center;
 }

 .trust h2 {
   color: #F4F6F4;
   font-size: 30px;
   max-width: 380px;
   line-height: 1.2;
 }

 .trust-points {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 22px 32px;
 }

 .trust-point {
   display: flex;
   gap: 12px;
 }

 .trust-point .mono {
   font-size: 11px;
   color: var(--business);
   flex-shrink: 0;
   padding-top: 3px;
 }

 .trust-point p {
   font-size: 14.5px;
   color: rgba(244, 246, 244, 0.72);
   line-height: 1.55;
 }

 @media (max-width:860px) {
   .trust-inner {
     grid-template-columns: 1fr;
   }

   .trust-points {
     grid-template-columns: 1fr;
   }
 }

 /* ---------- CTA FOOTER ---------- */
 .cta-section {
   background: var(--surface-2);
   text-align: center;
   padding: 100px 28px;
 }

 .cta-section h2 {
   font-size: 38px;
   max-width: 560px;
   margin: 0 auto 16px;
 }

 .cta-section p {
   color: var(--ink-soft);
   font-size: 16px;
   margin-bottom: 34px;
 }

 .cta-actions {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
 }

 .btn-dark {
   background: var(--ink);
   color: #F4F6F4;
 }

 .btn-dark:hover {
   box-shadow: 0 8px 22px rgba(18, 23, 43, 0.28);
 }

 .btn-outline {
   background: transparent;
   color: var(--ink);
   border-color: var(--line);
 }

 .btn-outline:hover {
   border-color: var(--ink);
 }

 footer {
   background: var(--ink);
   color: rgba(244, 246, 244, 0.55);
   padding: 72px 28px 0;
   font-size: 13.5px;
   border-top: 1px solid var(--line-dark);
 }

 .footer-inner {
   max-width: 1180px;
   margin: 0 auto;
 }

 .footer-top {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr 1fr;
   gap: 40px;
   padding-bottom: 56px;
 }

 .footer-brand .logo {
   margin-bottom: 14px;
 }

 .footer-brand p {
   color: rgba(244, 246, 244, 0.5);
   max-width: 280px;
   line-height: 1.6;
   font-size: 13.5px;
 }

 .footer-social {
   display: flex;
   gap: 10px;
   margin-top: 22px;
 }

 .footer-social a {
   width: 32px;
   height: 32px;
   border-radius: 7px;
   border: 1px solid var(--line-dark);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(244, 246, 244, 0.6);
   transition: border-color .2s ease, color .2s ease;
 }

 .footer-social a:hover {
   border-color: rgba(244, 246, 244, 0.4);
   color: #F4F6F4;
 }

 .footer-col h4 {
   font-family: 'IBM Plex Mono', monospace;
   font-size: 11px;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(244, 246, 244, 0.4);
   margin-bottom: 16px;
 }

 .footer-col ul {
   list-style: none;
 }

 .footer-col li {
   margin-bottom: 11px;
 }

 .footer-col a {
   color: rgba(244, 246, 244, 0.68);
   transition: color .2s ease;
 }

 .footer-col a:hover {
   color: #F4F6F4;
 }

 .footer-bottom {
   border-top: 1px solid var(--line-dark);
   padding: 22px 0 28px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
   color: rgba(244, 246, 244, 0.4);
   font-size: 12.5px;
 }

 .footer-bottom strong {
   color: rgba(244, 246, 244, 0.65);
 }

 .footer-bottom-links {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }

 .footer-bottom-links a {
   color: rgba(244, 246, 244, 0.4);
   transition: color .2s ease;
 }

 .footer-bottom-links a:hover {
   color: rgba(244, 246, 244, 0.75);
 }

 @media (max-width:860px) {
   .footer-top {
     grid-template-columns: 1fr 1fr;
     gap: 36px 24px;
   }

   .footer-brand {
     grid-column: 1 / -1;
   }
 }

 @media (max-width:520px) {
   .footer-top {
     grid-template-columns: 1fr;
   }
 }

 @media (max-width:860px) {
   .nav-links {
     display: none;
   }

   .nav-mobile-toggle {
     display: flex;
   }

   .hero-inner {
     grid-template-columns: 1fr;
   }

   .hero h1 {
     font-size: 38px;
   }

   .routing {
     height: 340px;
   }

   .section-head h2 {
     font-size: 27px;
   }

   .cta-section h2 {
     font-size: 28px;
   }
 }