/* =========================================================
   Neue Startseite: Original als Basis + UI-Schicht (Karten, Pillen, Farbflächen)
   Referenzen: starkesweb.de, taxfix.de (hell). Nutzt style.css als Grundlage.
   ========================================================= */

  /* Radius-System: Karten 28px (--r-card), Bilder/innere Flächen 18px (--r-sm), kleine Elemente 12px (--r-xs),
     Buttons/Pillen rund (100px), Avatare/Punkte Kreis. Ausnahme: die nachgebaute Programm-Oberfläche im Logo-Intro. */
  :root { --r-card: 28px; --r-sm: 18px; --r-xs: 12px; --ease-out: cubic-bezier(.23,1,.32,1); --ease-io: cubic-bezier(.65,0,.35,1); }
  body { background: #fff; }
  .hx { position: relative; padding: 120px 0 72px; overflow: hidden; }
  .hx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }

  /* ---------- Logo: Live-Gestaltung wie in Illustrator ----------
     Um das Logo liegt kurz eine Programm-Oberfläche (absolut positioniert, verschiebt nichts).
     Ein Cursor wählt die verstreuten Buchstaben aus, schiebt sie an ihren Platz und malt den Swipe.
     Ohne JS oder bei „Bewegung reduzieren“ steht das fertige Logo einfach da. */
  .hx-logo { position: relative; width: min(100%, 390px); margin: 56px 0 30px 52px; z-index: 1; }
  .hx-mark { position: relative; z-index: 2; }
  .hx-tagline { position: relative; z-index: 2; margin-top: 2px; }
  .hx-tagline img { width: 100%; height: auto; display: block; }
  .hx-logo .letter { will-change: transform; }

  .hx-app { position: absolute; inset: -46px -86px -18px -52px; z-index: 0; border-radius: var(--r-sm); background: #EEF0F3;
    border: 1px solid #DCDFE4; box-shadow: 0 30px 60px -30px rgba(10,10,11,.35); opacity: 0; pointer-events: none; }
  .hx-app-bar { position: absolute; left: 0; right: 0; top: 0; height: 32px; display: flex; align-items: center; gap: 10px;
    padding: 0 12px; border-bottom: 1px solid #DCDFE4; background: #F7F8FA; border-radius: var(--r-sm) var(--r-sm) 0 0;
    font-size: .74rem; color: #55575D; font-weight: 600; }
  .hx-app-bar .dots { display: inline-flex; gap: 6px; }
  .hx-app-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: #D3D6DB; }
  .hx-app-tools { position: absolute; left: 0; top: 32px; bottom: 0; width: 40px; display: flex; flex-direction: column;
    align-items: center; gap: 6px; padding-top: 10px; border-right: 1px solid #DCDFE4; background: #F7F8FA; border-radius: 0 0 0 var(--r-sm); }
  .hx-app-tools span { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #3A3C42; transition: background .15s ease, color .15s ease; }
  .hx-app-tools span.is-on { background: var(--blue-deep); color: #fff; }
  .hx-app-tools svg { width: 16px; height: 16px; }
  .hx-artboard { position: absolute; inset: 42px 76px 8px 48px; background: #fff; box-shadow: 0 1px 3px rgba(10,10,11,.12); }

  .hx-marquee { position: absolute; z-index: 3; border: 1px dashed var(--blue-deep); background: rgba(21,115,166,.06); opacity: 0; pointer-events: none; }
  /* App-Symbol wie im Dock: daraus klappt das Fenster auf */
  .hx-dock { position: absolute; z-index: 1; left: 50%; bottom: -38px; width: 40px; height: 40px; margin-left: -20px; border-radius: var(--r-xs);
    background: var(--ink); color: var(--orange); display: grid; place-items: center; font-family: 'Archivo Black', sans-serif; font-size: .95rem;
    box-shadow: 0 10px 22px -10px rgba(10,10,11,.5); opacity: 0; pointer-events: none; }
  .hx-dock::after { content: ""; position: absolute; bottom: -8px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); opacity: .5; }
  /* Solange es läuft, ist nur sichtbar, was im Zeichenbrett liegt */
  .hx-logo.is-playing .letter { opacity: 0; }
  /* Objekt, das gerade gezogen wird: Auswahlrahmen wie in Illustrator */
  .hx-logo .letter.is-grabbed { outline: 1.5px solid var(--blue-deep); outline-offset: 3px; }
  .hx-logo .letter.is-grabbed::before, .hx-logo .letter.is-grabbed::after { content: ""; position: absolute; width: 7px; height: 7px;
    background: #fff; border: 1.5px solid var(--blue-deep); }
  .hx-logo .letter.is-grabbed::before { left: -7px; top: -7px; }
  .hx-logo .letter.is-grabbed::after { right: -7px; bottom: -7px; }
  /* Bibliothek-Panel rechts im Fenster */
  .hx-app-panel { position: absolute; right: 0; top: 32px; bottom: 0; width: 70px; border-left: 1px solid #DCDFE4; background: #F7F8FA;
    border-radius: 0 0 var(--r-sm) 0; padding: 8px 7px; }
  .hx-app-panel b { display: block; font-size: .62rem; letter-spacing: .02em; color: #55575D; margin-bottom: 6px; }
  .hx-lib { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .hx-lib span { height: 22px; border-radius: 4px; background: #fff; border: 1px solid #E3E5E9; display: grid; place-items: center; }
  .hx-lib img { max-width: 70%; max-height: 16px; }
  .hx-logo.is-playing .hx-app { opacity: 0; }
  .hx-sel { position: absolute; inset: -8px -10px -6px -10px; z-index: 3; border: 1.5px solid var(--blue-deep); pointer-events: none; opacity: 0; }
  .hx-sel i { position: absolute; width: 9px; height: 9px; background: #fff; border: 1.5px solid var(--blue-deep); }
  .hx-sel .tl { left: -5px; top: -5px; } .hx-sel .tc { left: calc(50% - 5px); top: -5px; } .hx-sel .tr { right: -5px; top: -5px; }
  .hx-sel .ml { left: -5px; top: calc(50% - 5px); } .hx-sel .mr { right: -5px; top: calc(50% - 5px); }
  .hx-sel .bl { left: -5px; bottom: -5px; } .hx-sel .bc { left: calc(50% - 5px); bottom: -5px; } .hx-sel .br { right: -5px; bottom: -5px; }
  .hx-cursor { position: absolute; left: 0; top: 0; z-index: 5; width: 22px; height: 22px; pointer-events: none; opacity: 0;
    filter: drop-shadow(0 2px 3px rgba(10,10,11,.3)); transform-origin: 3px 3px; }
  .hx-logo.is-playing .hx-tagline img {
    -webkit-mask-image: linear-gradient(90deg, #000 43.5%, transparent 56.5%); mask-image: linear-gradient(90deg, #000 43.5%, transparent 56.5%);
    -webkit-mask-size: 230% 100%; mask-size: 230% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 100% 0; mask-position: 100% 0;
  }
  @media (max-width: 640px) {
    .hx-logo { margin-left: 0; margin-top: 50px; }
    .hx-app { left: -10px; right: -10px; }
    .hx-app-tools, .hx-app-panel { display: none; }
    .hx-artboard { left: 6px; right: 6px; }
  }

  .hx h1 { font-size: clamp(2.1rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 20px; max-width: 16ch; }
  .hx-lead { font-size: 1.12rem; color: var(--grey); max-width: 44ch; margin: 0 0 30px; }

  /* Buttons: Pille mit rundem Pfeil */
  .hx-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
  .hx-btn { display: inline-flex; align-items: center; gap: 14px; padding: 8px 8px 8px 26px; border-radius: 100px;
    background: var(--ink); color: #fff; font-weight: 600; transition: scale .16s ease-out; }
  .hx-btn .hx-arrow { width: 40px; height: 40px; border-radius: 50%; background: var(--blue); color: var(--ink);
    display: grid; place-items: center; transition: transform .25s var(--ease-out); }
  .hx-btn svg { width: 18px; height: 18px; }
  .hx-btn:active { scale: .97; }
  .hx-btn-ghost { display: inline-flex; align-items: center; min-height: 56px; padding: 0 24px; border-radius: 100px;
    border: 1.5px solid var(--line); font-weight: 600; color: var(--ink); background: #fff; transition: border-color .2s ease, scale .16s ease-out; }
  .hx-btn-ghost:active { scale: .97; }
  @media (hover: hover) and (pointer: fine) {
    .hx-btn:hover .hx-arrow { transform: translateX(3px); }
    .hx-btn-ghost:hover { border-color: var(--ink); }
  }

  .hx-trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 26px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--grey); }
  .hx-trust li { display: inline-flex; align-items: center; gap: 8px; }
  .hx-trust svg { width: 18px; height: 18px; color: var(--blue-deep); flex: none; }

  /* ---------- Rechte Seite: Schieber frei, Kacheln darunter ---------- */
  .hx-visual { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .hx-visual .blob-bg { opacity: .3; }
  .hx-card { position: relative; border-radius: var(--r-card); overflow: hidden; background: var(--bg-soft);
    box-shadow: 0 24px 48px -26px rgba(10,10,11,.35); }
  .hx-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hx-main { grid-column: 1 / -1; aspect-ratio: 1600 / 680; }
  .hx-small { aspect-ratio: 4 / 3; }

  .hx-compare { --pos: 55%; }
  .hx-compare > img, .hx-compare .before { position: absolute; inset: 0; }
  .hx-compare .before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); background: #fff; }
  .hx-compare .line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; transform: translateX(-50%); background: #fff; pointer-events: none; }
  .hx-compare .knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
    background: #fff; color: var(--ink); display: grid; place-items: center; box-shadow: 0 6px 16px -6px rgba(10,10,11,.4); }
  .hx-compare .knob svg { width: 18px; height: 18px; }
  .hx-compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
  .hx-compare:has(input:focus-visible) .knob { outline: 2px solid var(--blue-deep); outline-offset: 3px; }

  /* Beschriftungen nur als kleine Tags an den Kanten */
  .hx-tag { position: absolute; z-index: 2; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.94);
    font-size: .8rem; font-weight: 700; pointer-events: none; }
  .hx-tag-l { left: 12px; bottom: 12px; }
  .hx-tag-r { right: 12px; bottom: 12px; }
  .hx-badge { position: absolute; z-index: 4; top: -20px; right: -10px; display: flex; align-items: center; gap: 12px;
    padding: 10px 16px 10px 10px; border-radius: var(--r-sm); background: var(--ink); color: #fff;
    box-shadow: 0 14px 30px -14px rgba(10,10,11,.45); font-size: .86rem; line-height: 1.3; }
  .hx-badge b { display: block; font-size: .92rem; }
  .hx-badge span { color: rgba(255,255,255,.72); }
  .hx-badge .hx-ico { width: 36px; height: 36px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--orange); color: var(--ink); flex: none; }
  .hx-badge .hx-ico svg { width: 20px; height: 20px; }
  .hx-caption { grid-column: 1 / -1; margin: -4px 0 0; font-size: .88rem; color: var(--grey); }
  .hx-caption b { color: var(--ink); }

  /* Farbige Zahlen-Karten */
  .hx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 72px; }
  .hx-stat { border-radius: var(--r-card); padding: 28px 28px 24px; }
  .hx-stat .n { font-family: 'Archivo Black', sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; }
  .hx-stat p { margin: 10px 0 0; font-size: .98rem; }
  .hx-s1 { background: var(--tint); } .hx-s1 .n { color: var(--blue-deep); }
  .hx-s2 { background: #FFE3EE; } .hx-s2 .n { color: #B3124E; }
  .hx-s3 { background: #FFEBD2; } .hx-s3 .n { color: #8A4B00; }

  /* ---------- 3D-Fahrzeug: dreht sich beim Scrollen ---------- */
  .hx3d { padding: 40px 0 120px; }
  .hx3d-card { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: center;
    border-radius: var(--r-card); background: linear-gradient(160deg, var(--tint) 0%, #ffffff 70%); padding: 48px; overflow: hidden; }
  .hx3d h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.04; letter-spacing: -.02em; margin-bottom: 16px; }
  .hx3d p { color: var(--grey); font-size: 1.05rem; max-width: 40ch; margin: 0 0 20px; }
  .hx3d-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 100px; background: #fff;
    font-weight: 700; font-size: .85rem; box-shadow: 0 8px 20px -12px rgba(10,10,11,.3); }
  .hx3d model-viewer { width: 100%; height: 440px; --poster-color: transparent; background: transparent; }
  .hx3d-progress { position: absolute; left: 48px; right: 48px; bottom: 24px; height: 3px; border-radius: 100px; background: rgba(10,10,11,.08); overflow: hidden; }
  .hx3d-progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

  .hx-note { margin-top: 32px; padding: 14px 18px; border-radius: var(--r-xs); background: var(--bg-soft); font-size: .88rem; color: var(--grey); }

  @media (max-width: 900px) {
    .hx { padding-top: 104px; }
    .hx-grid { grid-template-columns: 1fr; gap: 40px; }
    .hx3d-card { grid-template-columns: 1fr; padding: 32px 24px 48px; }
    .hx3d model-viewer { height: 320px; }
  }
  @media (max-width: 640px) {
    .hx-logo { width: min(100%, 320px); }
    .hx-badge { top: -16px; right: 0; }
    .hx-stats { grid-template-columns: 1fr; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hx-app, .hx-cursor, .hx-sel, .hx-marquee, .hx-dock { display: none; }
  }

/* =========================================================
   Abschnitte unter dem Hero
   ========================================================= */
.nx-sec { padding: 110px 0; position: relative; }
.nx-soft { background: var(--bg-soft); }
.nx-head { max-width: 760px; margin-bottom: 48px; }
.nx-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 100px;
  background: var(--tint); color: var(--blue-deep); font-weight: 700; font-size: .86rem; margin-bottom: 20px; }
.nx-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); outline: 4px solid rgba(255,165,62,.22); }
.nx-h2 { font-size: clamp(2.1rem, 4.2vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 16px; }
.nx-h2 .hx-blue, .nx-blue { color: var(--blue-deep); }
.nx-lead { color: var(--grey); font-size: 1.1rem; max-width: 56ch; margin: 0; }
.nx-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.nx-link svg { width: 16px; height: 16px; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nx-link:hover svg { transform: translateX(3px); } }
.nx-ico { width: 44px; height: 44px; border-radius: var(--r-xs); background: #fff; display: grid; place-items: center; color: var(--ink);
  box-shadow: 0 6px 16px -10px rgba(10,10,11,.35); flex: none; }
.nx-ico svg { width: 22px; height: 22px; }

/* ---------- Leistungen als farbige Karten ---------- */
.nx-services { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.nx-svc { position: relative; border-radius: var(--r-card); padding: 28px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.nx-svc h3 { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 1.5rem; line-height: 1.1; margin: 6px 0 0; }
.nx-svc p { margin: 0; font-size: 1rem; color: #3E4047; max-width: 40ch; }
.nx-svc-img { margin-top: auto; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 10; background: #fff; }
.nx-svc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nx-svc:hover .nx-svc-img img { transform: scale(1.04); } }
.nx-svc-fzg { grid-column: span 4; background: var(--tint); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 28px; align-items: stretch; }
.nx-svc-fzg .nx-svc-img { aspect-ratio: auto; min-height: 260px; margin: 0; }
.nx-svc-fzg .nx-svc-text { display: flex; flex-direction: column; gap: 12px; }
.nx-svc-fzg .nx-link { margin-top: auto; }
.nx-svc-logo { grid-column: span 2; background: #FFE3EE; }
.nx-svc-web { grid-column: span 2; background: #FFEBD2; }
.nx-svc-video { grid-column: span 2; background: var(--ink); color: #fff; }
.nx-svc-video p { color: rgba(255,255,255,.78); }
.nx-svc-video .nx-ico { background: var(--blue); }
.nx-svc-more { grid-column: span 2; background: #fff; border: 1.5px solid var(--line); }
.nx-svc-logo .nx-svc-img img { object-fit: contain; padding: 8%; }
.nx-svc-web .nx-svc-img img { object-position: top; }

/* ---------- Kundenbeispiel Petzold ---------- */
.nx-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.nx-chain figure { margin: 0; }
.nx-chain .nx-chain-img { position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 3 / 4; background: #fff;
  box-shadow: 0 20px 40px -26px rgba(10,10,11,.35); }
.nx-chain img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-chain .contain img { object-fit: contain; padding: 10%; }
.nx-chain .top img { object-position: top; }
.nx-chain .nx-step { position: absolute; left: 12px; top: 12px; padding: 6px 12px; border-radius: 100px; background: rgba(255,255,255,.95);
  font-size: .8rem; font-weight: 700; }
.nx-chain figcaption { margin-top: 12px; font-size: .95rem; color: var(--grey); }
.nx-chain figcaption b { display: block; color: var(--ink); font-size: 1.02rem; margin-bottom: 2px; }

/* 3D-Abschnitt bekommt weniger Abstand oben, er gehört zum Kundenbeispiel */
.nx .hx3d { padding: 16px 0 110px; }

/* ---------- Der Unterschied ---------- */
.nx-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.nx-vs-card { border-radius: var(--r-card); padding: 36px; }
.nx-vs-card h3 { font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 1.4rem; margin: 0 0 22px; }
.nx-vs-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nx-vs-card li { display: flex; gap: 14px; align-items: flex-start; font-size: 1.02rem; line-height: 1.45; }
.nx-vs-card li span.mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; margin-top: -1px; }
.nx-vs-card li span.mk svg { width: 14px; height: 14px; }
.nx-vs-agentur { background: #fff; border: 1.5px solid var(--line); color: #3E4047; }
.nx-vs-agentur span.mk { background: var(--bg-soft); color: #6B6E76; }
.nx-vs-direkt { background: var(--ink); color: #fff; position: relative; box-shadow: 0 30px 60px -30px rgba(21,115,166,.55); }
.nx-vs-direkt span.mk { background: var(--blue); color: var(--ink); }
.nx-vs-direkt .nx-vs-tag { position: absolute; top: -14px; right: 28px; padding: 6px 14px; border-radius: 100px; background: var(--orange);
  color: var(--ink); font-weight: 700; font-size: .82rem; }

/* ---------- Portfolio: runde Kacheln, Titel immer sichtbar ---------- */
.nx .ptile { border-radius: var(--r-sm); }
.nx .ptile .meta { opacity: 1; }
.nx .filterbtn { min-height: 44px; }

/* ---------- Über mich ---------- */
.nx-about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.nx-portrait { position: relative; max-width: 380px; }
.nx-portrait img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-card); display: block;
  box-shadow: 0 30px 60px -30px rgba(10,10,11,.4); }
.nx-portrait::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border-radius: var(--r-card); background: var(--blue); z-index: -1; }
.nx-name { position: absolute; left: -14px; bottom: 26px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px;
  border-radius: var(--r-sm); background: #fff; box-shadow: 0 14px 30px -14px rgba(10,10,11,.4); font-size: .86rem; line-height: 1.3; }
.nx-name i { width: 9px; height: 9px; border-radius: 50%; background: #22C55E; }
.nx-name b { display: block; font-size: .95rem; }
.nx-name span { color: var(--grey); }
.nx-about p { color: #3E4047; font-size: 1.06rem; max-width: 58ch; }
.nx-stations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 28px 0 22px; }
.nx-station { border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); padding: 16px 18px; }
.nx-station b { display: block; font-family: 'Archivo Black', sans-serif; font-weight: 400; color: var(--blue-deep); font-size: .95rem; margin-bottom: 4px; }
.nx-station span { font-size: .95rem; color: #3E4047; }
.nx-tools { font-size: .92rem; color: var(--grey); }
.nx-tools b { color: var(--ink); }

/* ---------- FAQ als Karten ---------- */
.nx .faq-list { max-width: 820px; }
.nx .faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 22px; margin-bottom: 12px; }
.nx .faq-q { padding: 20px 0; }

/* ---------- Kontakt ---------- */
.nx-contact { border-radius: var(--r-card); background: var(--tint); padding: 64px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.nx-contact .nx-person { display: flex; align-items: center; gap: 14px; margin: 28px 0 10px; }
.nx-contact .nx-person img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.nx-contact .nx-person b { display: block; }
.nx-contact .nx-person span { color: var(--grey); font-size: .92rem; }
.nx-contact .contact-form { background: #fff; border-radius: var(--r-sm); padding: 32px; box-shadow: 0 30px 60px -36px rgba(10,10,11,.35); }
.nx .contactrow a { min-height: 44px; display: inline-flex; align-items: center; }
.nx .contact-form label .optional { color: var(--grey); }

/* ---------- kleine Korrekturen aus der Kritik ---------- */
.nx .marquee-track span { color: var(--grey); }
.nx footer .foot-row, .nx footer a, .nx .footlink { color: var(--grey); }
.nx .footlink { display: inline-block; padding: 12px 4px; }
html { scrollbar-color: var(--ink) var(--bg-soft); }
.nx { caret-color: var(--blue-deep); accent-color: var(--blue-deep); }
@media (max-width: 900px) {
  .nx .navlinks { max-height: none; overflow: visible; opacity: 0; transform: translateY(-8px); visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
  .nx .navlinks.open { max-height: none; opacity: 1; transform: none; visibility: visible;
    transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nx-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-svc-fzg { grid-column: 1 / -1; }
  .nx-svc-logo, .nx-svc-web, .nx-svc-video, .nx-svc-more { grid-column: span 1; }
  .nx-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nx-vs, .nx-about, .nx-contact { grid-template-columns: 1fr; }
  .nx-contact { padding: 40px 28px; gap: 32px; }
  .nx-portrait { max-width: 300px; margin: 0 auto 10px; }
}
@media (max-width: 640px) {
  .nx-sec { padding: 80px 0; }
  .nx-services { grid-template-columns: 1fr; }
  .nx-svc-fzg { grid-template-columns: 1fr; }
  .nx-svc-fzg .nx-svc-img { min-height: 200px; }
  .nx-svc-logo, .nx-svc-web, .nx-svc-video, .nx-svc-more { grid-column: 1 / -1; }
  .nx-chain { grid-template-columns: 1fr 1fr; gap: 12px; }
  .nx-vs-card { padding: 28px 22px; }
  .nx-stations { grid-template-columns: 1fr; }
  .nx-contact { border-radius: 0; margin: 0 -22px; padding: 40px 22px; }
  .nx-contact .contact-form { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nx .navlinks { transform: none !important; }
}
.nx-contact .nx-h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); }
/* Das alte Spray-Intro (style.css, html.js) versteckt Buchstaben per clip-path; das neue Logo-Intro braucht das nicht */
html.js .nx .hx-logo .letter img { clip-path: none; }
/* Text auf Farbkarten aus dem Kartenton abgeleitet statt Grau */
.nx-svc-fzg p { color: #1E3F55; }
.nx-svc-logo p { color: #6A2240; }
.nx-svc-web p { color: #5C3B0E; }

/* =========================================================
   Farbweg B (Freigabe Iven): weiße Karten, Markenfarbe als Akzent.
   Nur Blau, Orange und Schwarz. Kein Pink, kein Verlauf.
   ========================================================= */
.nx .blob-bg.b2 { background: var(--orange); }
.nx-svc, .nx-svc-fzg, .nx-svc-logo, .nx-svc-video, .nx-svc-more {
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
  box-shadow: 0 24px 48px -36px rgba(10,10,11,.3);
}
.nx-svc p, .nx-svc-fzg p, .nx-svc-logo p, .nx-svc-video p { color: #3E4047; }
.nx-svc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; }
.nx-svc-fzg::before { background: var(--blue); }
.nx-svc-logo::before { background: var(--orange); }
.nx-svc-video::before { background: var(--ink); }
.nx-svc-more::before { background: var(--blue); }
.nx-svc-fzg .nx-ico, .nx-svc-more .nx-ico { background: var(--blue); color: var(--ink); }
.nx-svc-logo .nx-ico { background: var(--orange); color: var(--ink); }
.nx-svc-video .nx-ico { background: var(--ink); color: #fff; }
/* 4 Karten: Fahrzeug groß, daneben Logo; darunter Video und Schilder */
.nx-svc-video, .nx-svc-more { grid-column: span 3; }

/* Zahlen-Karten im Hero im selben System */
.hx-stat { background: #fff !important; border: 1.5px solid var(--line); position: relative; overflow: hidden; }
.hx-stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; }
.hx-s1::before { background: var(--blue); } .hx-s1 .n { color: var(--blue-deep); }
.hx-s2::before { background: var(--orange); } .hx-s2 .n { color: #8A4B00; }
.hx-s3::before { background: var(--ink); } .hx-s3 .n { color: var(--ink); }

/* ---------- Webdesign ---------- */
.nx-web { background: var(--bg-soft); }
.nx-web-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.nx-web-list { flex-direction: column; gap: 12px; margin-top: 26px; font-size: 1rem; color: #3E4047; }
.nx-browser { margin: 0; }
.nx-browser-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 1px solid var(--line);
  border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.nx-browser-bar .dots { display: inline-flex; gap: 6px; }
.nx-browser-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: #D3D6DB; }
.nx-browser-url { flex: 1; padding: 6px 14px; border-radius: 100px; background: var(--bg-soft); font-size: .8rem; color: var(--grey); }
.nx-browser-view { position: relative; height: 460px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm);
  box-shadow: 0 30px 60px -34px rgba(10,10,11,.35); }
.nx-browser-view img { width: 100%; height: auto; display: block; will-change: transform; transform: translateY(var(--wy, 0px)); }
.nx-browser figcaption { margin-top: 12px; font-size: .9rem; color: var(--grey); }

@media (max-width: 1024px) {
  .nx-svc-video, .nx-svc-more, .nx-svc-logo { grid-column: span 1; }
}
@media (max-width: 900px) {
  .nx-web-grid { grid-template-columns: 1fr; gap: 36px; }
  .nx-browser-view { height: 380px; }
}
@media (max-width: 640px) {
  .nx-svc-video, .nx-svc-more, .nx-svc-logo { grid-column: 1 / -1; }
}
/* Leistungs-Bild ganz zeigen (Logos), gesteuert über STARTSEITE.leistungen.*.ganzesBild */
.nx-svc-img.is-contain img { object-fit: contain; padding: 8%; }
.nx-svc-img.is-contain { background: #fff; }

/* =========================================================
   Blaue Momente (Markenfarbe), damit die Seite nicht nur weiß ist:
   Laufband, Webdesign, Kontakt. Auf Blau immer Schwarz (8,6:1), nie Weiß (2,3:1).
   ========================================================= */
/* 1) Laufband als blaues Band */
.nx .marquee { background: var(--blue); border: 0; }
.nx .marquee-track span, .nx .marquee-track span b { color: var(--ink); }
.nx .marquee-track span i { background: #fff; }

/* 2) Webdesign auf Blau */
.nx-web { background: var(--blue); }
.nx-web .nx-lead, .nx-web .nx-web-list, .nx-web .nx-browser figcaption { color: var(--ink); }
.nx-web .nx-web-list svg { color: var(--ink); }
.nx-web .nx-blue { color: var(--ink); text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: .12em; text-underline-offset: .12em; }
.nx-web .nx-pill { background: #fff; color: var(--ink); }
.nx-web .hx-btn .hx-arrow { background: #fff; }
.nx-web .nx-browser-view { box-shadow: 0 30px 60px -30px rgba(10,10,11,.45); }

/* 3) Kontakt-Karte in Blau */
.nx-contact { background: var(--blue); }
.nx-contact .nx-lead, .nx-contact .nx-person span { color: var(--ink); }
.nx-contact .nx-pill { background: #fff; color: var(--ink); }
.nx-contact .swipe::before { background: #fff; }
.nx-contact .contactrow a, .nx-contact .contactrow .instalink { color: var(--ink); }

/* Hero-Kacheln: Unterschrift unter dem Bild statt Etikett darauf */
.hx-tile { margin: 0; }
.hx-tile figcaption { margin-top: 10px; font-size: .88rem; font-weight: 600; color: var(--ink); }
/* Kundenbeispiel: Etikett steht jetzt als Titel in der Unterschrift */
.nx-chain figcaption b { color: var(--blue-deep); }
/* Footer-Links ohne Punkt-Trenner */
.nx .foot-links { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }