/* =====================================================================
   upbyte.de Relaunch 2026: Software + Marketing
   Baut auf den Tokens aus /css/ubx-architecture.css auf (Farben, Schriften).
   Motive: Typenschild, Schaltplan-Klemmen, Abnahmeprotokoll.
   Zwei Farben: Software Cyan, Marketing Lila (aus dem bisherigen Design).
   ===================================================================== */

:root {
  --ubx-violet: #B090FF;
  --ubx-violet-70: rgba(176, 144, 255, 0.7);
  --ubx-violet-40: rgba(176, 144, 255, 0.4);
  --ubx-violet-15: rgba(176, 144, 255, 0.15);
  --ubx-violet-06: rgba(176, 144, 255, 0.06);
}

.nx {
  --nx-acc: var(--ubx-cyan);
  --nx-acc-70: var(--ubx-cyan-70);
  --nx-acc-40: var(--ubx-cyan-40);
  --nx-acc-15: var(--ubx-cyan-15);
  --nx-acc-06: var(--ubx-cyan-06);
  --nx-radius: 4px;
  --nx-gutter: clamp(20px, 4vw, 40px);
  --nx-section: clamp(72px, 9vw, 128px);
  --nx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-plate-bg: linear-gradient(160deg, #1a1f26 0%, var(--ubx-graphite) 55%, #101317 100%);
  background: var(--ubx-dark);
  color: var(--ubx-text-secondary);
}

/* Farbzuordnung: .nx-sw = Software (Cyan), .nx-mkt = Marketing (Lila).
   Gilt für die ganze Seite (am <main>) oder für einzelne Bausteine. */
.nx-sw {
  --nx-acc: var(--ubx-cyan);
  --nx-acc-70: var(--ubx-cyan-70);
  --nx-acc-40: var(--ubx-cyan-40);
  --nx-acc-15: var(--ubx-cyan-15);
  --nx-acc-06: var(--ubx-cyan-06);
}

.nx-mkt {
  --nx-acc: var(--ubx-violet);
  --nx-acc-70: var(--ubx-violet-70);
  --nx-acc-40: var(--ubx-violet-40);
  --nx-acc-15: var(--ubx-violet-15);
  --nx-acc-06: var(--ubx-violet-06);
}

.nx-mkt ::selection { background: var(--ubx-violet); }
.nx-mkt :where(a, button, input):focus-visible { outline-color: var(--ubx-violet); box-shadow: 0 0 0 3px var(--ubx-violet-40); }

/* Hauptbutton folgt der Bereichsfarbe */
.nx .ubx-btn--primary {
  background: var(--nx-acc);
  border-color: var(--nx-acc);
}

.nx .ubx-btn--primary:hover {
  background: color-mix(in srgb, var(--nx-acc) 88%, var(--ubx-dark));
  border-color: color-mix(in srgb, var(--nx-acc) 88%, var(--ubx-dark));
}

/* Farbiges Wort in Überschriften */
.nx-hl { color: var(--nx-acc); }

.nx-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nx-gutter);
}

.nx-section { padding: var(--nx-section) 0; }
.nx-section + .nx-section { border-top: 1px solid var(--ubx-border); }
.nx-section--void { background: var(--ubx-void); }

/* ---------- Typografie ---------- */
.nx h1,
.nx h2,
.nx h3 {
  margin: 0;
  color: var(--ubx-text);
  font-weight: 700;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.nx h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.06; }

@media (min-width: 768px) {
  .nx-nowrap { white-space: nowrap; }
}
.nx h2 { font-size: clamp(1.5rem, 2.8vw, 2.3rem); line-height: 1.15; max-width: 24ch; }
.nx h3 { font-size: 1.08rem; line-height: 1.3; }

/* :where() hält die Grundregel ohne Gewicht, damit Komponenten sie überschreiben */
:where(.nx) p {
  margin: 0;
  max-width: 62ch;
  line-height: 1.7;
  text-wrap: pretty;
}

@media (max-width: 480px) {
  :where(.nx) p { hyphens: auto; }
}

/* Eigennamen nie trennen */
.nx-name { hyphens: manual; }

.nx-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--ubx-text-secondary);
}

.nx-head { margin-bottom: clamp(40px, 5vw, 64px); }
.nx-head .nx-lead { margin-top: 18px; }

.nx-mono {
  font-family: var(--ubx-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Links und Buttons ---------- */
.nx-link {
  color: var(--nx-acc);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--nx-acc-40);
  padding-bottom: 2px;
  transition: border-color 200ms var(--nx-ease);
}

.nx-link:hover { border-bottom-color: var(--nx-acc); }

.nx-arrow {
  display: inline-block;
  transition: transform 200ms var(--nx-ease);
}

.nx-link:hover .nx-arrow,
.ubx-btn:hover .nx-arrow { transform: translateX(3px); }

.nx .ubx-btn { white-space: nowrap; }
.nx .ubx-btn:active { transform: translateY(1px); }

.nx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 36px;
}

.nx-tel {
  font-family: var(--ubx-mono);
  font-size: 0.78rem;
  color: var(--ubx-text-muted);
  text-decoration: none;
}

.nx-tel span {
  color: var(--ubx-text);
  border-bottom: 1px solid var(--ubx-border-strong);
  transition: border-color 200ms var(--nx-ease);
}

.nx-tel:hover span { border-bottom-color: var(--nx-acc); }

/* ---------- Hero ---------- */
.nx-hero {
  position: relative;
  overflow: hidden;
  background: var(--ubx-void);
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px);
}

/* Schaltplan-Raster, nur hinter dem Typenschild sichtbar */
.nx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ubx-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--ubx-border) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 78% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 70% at 78% 50%, #000 0%, transparent 75%);
}

.nx-hero .nx-wrap { position: relative; }

.nx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.nx-hero .nx-lead { margin-top: 24px; max-width: 46ch; }

/* ---------- Typenschild ---------- */
.nx-plate {
  position: relative;
  padding: 26px 28px 22px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-plate-bg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 30px 80px rgba(0, 0, 0, 0.45);
  font-family: var(--ubx-mono);
}

/* vier Schraubenköpfe */
.nx-plate::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  --nx-screw: radial-gradient(circle at 4px 4px, rgba(255, 255, 255, 0.2) 0 2px, transparent 2.6px);
  background:
    var(--nx-screw) top left / 8px 8px no-repeat,
    var(--nx-screw) top right / 8px 8px no-repeat,
    var(--nx-screw) bottom left / 8px 8px no-repeat,
    var(--nx-screw) bottom right / 8px 8px no-repeat;
}

.nx-plate__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ubx-border-mid);
}

.nx-plate__brand {
  font-family: var(--ubx-sans);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ubx-text);
}

.nx-plate__type,
.nx-plate dt,
.nx-plate__foot {
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-plate dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px 24px;
  margin: 0;
}

.nx-plate dt { padding-top: 2px; }

.nx-plate dd {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ubx-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.nx-plate__foot {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed var(--ubx-border-mid);
  text-transform: none;
  letter-spacing: 0.02em;
  line-height: 1.6;
}

/* ---------- Werdegang: Klemmleiste ---------- */
.nx-path {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 3vw, 40px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nx-path::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--ubx-border-strong), var(--nx-acc-70));
  transform-origin: left center;
}

.nx-path li { position: relative; padding-top: 38px; }

.nx-path li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: 2px;
  background: var(--ubx-dark);
}

.nx-path li:last-child::before {
  border-color: var(--nx-acc);
  background: var(--nx-acc-15);
}

.nx-path__years {
  display: block;
  margin-bottom: 10px;
  font-family: var(--ubx-mono);
  font-size: 0.72rem;
  color: var(--nx-acc);
  font-variant-numeric: tabular-nums;
}

.nx-path h3 { margin-bottom: 10px; }
.nx-path p { font-size: 0.92rem; line-height: 1.65; }

.nx-path-foot { margin-top: clamp(36px, 4vw, 52px); }


/* ---------- Anforderungen ---------- */
.nx-demand {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 4vw, 64px);
  padding: clamp(32px, 4vw, 48px) 0;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-demand h3 {
  max-width: 18ch;
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.25;
}

/* Ablauf Prüfbericht */
.nx-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.nx-flow li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--ubx-text);
}

.nx-flow li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -17px;
  width: 12px;
  height: 1px;
  background: var(--nx-acc-70);
}

.nx-flow li:last-child {
  border-color: var(--nx-acc-40);
  color: var(--nx-acc);
}

/* Prüfliste */
.nx-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}

.nx-checks li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--ubx-text);
}

.nx-check {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  border: 1px solid var(--nx-acc-70);
  border-radius: 2px;
}

.nx-check::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 5px;
  height: 9px;
  border: solid var(--nx-acc);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Datenquellen laufen zusammen */
.nx-merge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 28px;
}

.nx-merge ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nx-merge li,
.nx-merge__target {
  padding: 6px 10px;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  color: var(--ubx-text-secondary);
}

.nx-merge__to {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.nx-merge__arrow {
  font-family: var(--ubx-mono);
  color: var(--nx-acc-70);
}

.nx-merge__target {
  border-color: var(--nx-acc-40);
  background: var(--nx-acc-06);
  color: var(--nx-acc);
}

.nx-operate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 32px;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-operate p { color: var(--ubx-text); }

/* ---------- Projekte ---------- */
.nx-projects {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 20px;
}

.nx-project {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
  transition: border-color 250ms var(--nx-ease), transform 250ms var(--nx-ease);
}

.nx-project:hover { border-color: var(--nx-acc-40); transform: translateY(-2px); }
.nx-project:focus-within { border-color: var(--nx-acc); box-shadow: var(--ubx-focus-ring); }
.nx-project--lead { grid-row: span 2; }

/* Platzhalter bis echte Screenshots vorliegen */
.nx-shot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  border-bottom: 1px solid var(--ubx-border-mid);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 10px, transparent 10px 20px),
    var(--ubx-surface-raised);
}

.nx-project--lead .nx-shot {
  flex: 1;
  aspect-ratio: auto;
  min-height: 300px;
}

.nx-project--lead .nx-project__body { flex: none; }

.nx-shot span {
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  color: var(--ubx-text-muted);
}

.nx-project__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 24px 26px 26px;
}

.nx-project h3 a { color: inherit; text-decoration: none; }
.nx-project h3 a:focus-visible { outline: none; box-shadow: none; }

/* ganze Karte klickbar */
.nx-project h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nx-project p { font-size: 0.92rem; }

.nx-project__more {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--ubx-mono);
  font-size: 0.72rem;
  color: var(--nx-acc);
}

.nx-projects-foot { margin-top: 32px; }

/* ---------- Abnahmeprotokoll ---------- */
.nx-proto {
  overflow: hidden;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--ubx-void);
}

.nx-proto__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--ubx-border-mid);
  background: var(--ubx-graphite);
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-proto__cols,
.nx-proto li {
  display: grid;
  grid-template-columns: 40px minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 0.95fr);
  gap: 20px;
  padding-left: 24px;
  padding-right: 24px;
}

.nx-proto__cols {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ubx-border);
  font-family: var(--ubx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-proto ol { list-style: none; margin: 0; padding: 0; }

.nx-proto li {
  align-items: start;
  padding-top: 22px;
  padding-bottom: 22px;
}

.nx-proto li + li { border-top: 1px solid var(--ubx-border); }

.nx-proto__no {
  padding-top: 2px;
  font-family: var(--ubx-mono);
  font-size: 0.8rem;
  color: var(--ubx-text-muted);
}

.nx-proto h3 { font-size: 1rem; }
.nx-proto p { font-size: 0.9rem; }

.nx-proto__result {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.86rem;
  color: var(--ubx-text);
}

/* ---------- Kontaktband ---------- */
.nx-cta { background: var(--ubx-void); }
.nx-cta h2 { max-width: 20ch; }
.nx-cta .nx-lead { margin-top: 16px; }

.nx-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--ubx-mono);
  font-size: 0.78rem;
  color: var(--ubx-text-muted);
}

.nx-contact a {
  color: var(--ubx-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ubx-border-strong);
  transition: border-color 200ms var(--nx-ease);
}

.nx-contact a:hover { border-bottom-color: var(--nx-acc); }

/* ---------- Industrie: Selbsttest ---------- */
.nx-test {
  padding: 24px 26px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-plate-bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.nx-test legend {
  float: none;
  width: auto;
  margin: 0 0 16px;
  padding: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ubx-text);
}

.nx-test label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--ubx-border);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ubx-text-secondary);
  cursor: pointer;
}

.nx-test input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--nx-acc);
  cursor: pointer;
}

.nx-test input[type="checkbox"]:checked + span { color: var(--ubx-text); }

.nx-test__result {
  min-height: 1.5em;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ubx-border-mid);
  font-family: var(--ubx-mono);
  font-size: 0.74rem;
  color: var(--nx-acc);
}

/* ---------- Industrie: Leistungen mit festem Titel ---------- */
.nx-split {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 88px);
}

.nx-sticky {
  position: sticky;
  top: 120px;
  align-self: start;
}

.nx-sticky .nx-lead { margin-top: 18px; }

.nx-services article {
  padding: 28px 0;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-services article:first-child { padding-top: 0; border-top: 0; }
.nx-services h3 { margin-bottom: 10px; }
.nx-services p { font-size: 0.95rem; }
.nx-services .nx-link { display: inline-block; margin-top: 12px; }

/* ---------- Aussage ---------- */
.nx-statement p {
  max-width: 44ch;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  line-height: 1.55;
  color: var(--ubx-text);
}

.nx-statement .nx-link { display: inline-block; margin-top: 28px; }

/* ---------- Abgrenzung ---------- */
.nx-not {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px clamp(24px, 4vw, 56px);
  margin-top: 8px;
}

.nx-not p {
  padding-left: 18px;
  border-left: 1px solid var(--ubx-border-strong);
}

/* ---------- Fragen ---------- */
.nx-faq { margin: 0; }

.nx-faq > div {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 12px clamp(24px, 4vw, 64px);
  padding: 26px 0;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-faq dt {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ubx-text);
}

.nx-faq dd { margin: 0; }
.nx-faq dd p { font-size: 0.95rem; }

/* ---------- Über: Kopf mit Porträtplatz ---------- */
.nx-portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  max-width: 340px;
  margin-left: auto;
  border: 1px dashed var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
}

.nx-portrait span {
  padding: 0 24px;
  text-align: center;
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  line-height: 1.6;
  color: var(--ubx-text-muted);
}

/* ---------- Über: Zeitleiste ---------- */
.nx-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 36px;
}

.nx-timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 7px;
  width: 1px;
  background: linear-gradient(180deg, var(--ubx-border-strong), var(--nx-acc-70));
  transform-origin: top center;
}


.nx-timeline > div {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px 28px;
  padding: 18px 0;
}

.nx-timeline > div::before {
  content: "";
  position: absolute;
  top: 22px;
  left: -36px;
  width: 15px;
  height: 15px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: 2px;
  background: var(--ubx-dark);
}

.nx-timeline > div:last-child::before {
  border-color: var(--nx-acc);
  background: var(--nx-acc-15);
}

.nx-timeline dt {
  font-family: var(--ubx-mono);
  font-size: 0.8rem;
  color: var(--nx-acc);
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

.nx-timeline dd { margin: 0; }
.nx-timeline dd strong { display: block; margin-bottom: 4px; color: var(--ubx-text); font-weight: 500; }
.nx-timeline dd p { font-size: 0.92rem; }

/* ---------- Über: Technik als Typenschilder ---------- */
.nx-specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.nx-spec {
  padding: 20px 22px;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
}

.nx-spec--wide {
  grid-column: span 2;
  background: var(--nx-plate-bg);
  border-color: var(--ubx-border-strong);
}

.nx-spec dt {
  margin-bottom: 10px;
  font-family: var(--ubx-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-spec dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ubx-text);
}

.nx-specs-note {
  margin-top: 20px;
  font-family: var(--ubx-mono);
  font-size: 0.74rem;
  color: var(--ubx-text-muted);
}

/* ---------- Vertrauensleiste unter dem Hero ---------- */
.nx-trustbar {
  border-top: 1px solid var(--ubx-border-mid);
  border-bottom: 1px solid var(--ubx-border-mid);
  background: var(--ubx-void);
}

.nx-trustbar .nx-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 32px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.nx-trustbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-trustbar li {
  position: relative;
  padding-left: 14px;
  font-family: var(--ubx-mono);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--ubx-text);
}

.nx-trustbar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 1px;
  background: var(--nx-acc);
}

.nx-trustbar .nx-link { font-size: 0.88rem; }

/* ---------- Über: Arbeitsweise ---------- */
.nx-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nx-facts li {
  padding-top: 18px;
  border-top: 1px solid var(--nx-acc-40);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ubx-text);
}

.nx-address {
  margin-top: 32px;
  font-style: normal;
  font-family: var(--ubx-mono);
  font-size: 0.78rem;
  line-height: 1.8;
  color: var(--ubx-text-muted);
}

/* ---------- Linien zeichnen sich beim Scrollen (reines CSS) ----------
   Standard: Linie sichtbar. Nur Browser mit scroll-gesteuerten Animationen
   zeichnen sie beim Hineinscrollen; ohne Unterstützung bleibt sie einfach stehen. */
@keyframes nx-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nx-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nx-path { view-timeline-name: --nx-path; }
    .nx-timeline { view-timeline-name: --nx-timeline; }

    .nx-path::before {
      animation: nx-draw-x linear both;
      animation-timeline: --nx-path;
      animation-range: entry 20% cover 45%;
    }

    .nx-timeline::before {
      animation: nx-draw-y linear both;
      animation-timeline: --nx-timeline;
      animation-range: entry 10% cover 60%;
    }
  }

  @media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    .nx-path::before { animation-name: nx-draw-y; }
  }
}


/* ---------- Responsiv ---------- */
@media (max-width: 991px) {
  .nx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .nx-plate,
  .nx-test { max-width: 520px; }
  .nx-portrait { margin-left: 0; max-width: 280px; }
  .nx-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .nx-path {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-left: 36px;
  }

  .nx-path::before {
    top: 8px;
    bottom: 8px;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, var(--ubx-border-strong), var(--nx-acc-70));
    transform-origin: top center;
  }

  .nx-path li { padding-top: 0; }
  .nx-path li::before { top: 2px; left: -36px; }

  .nx-demand,
  .nx-split,
  .nx-not,
  .nx-faq > div { grid-template-columns: minmax(0, 1fr); }

  .nx-sticky { position: static; }

  .nx-projects { grid-template-columns: minmax(0, 1fr); }
  .nx-project--lead { grid-row: auto; }
  .nx-project--lead .nx-shot { aspect-ratio: 16 / 9; }

  .nx-checks { grid-template-columns: minmax(0, 1fr); }

  .nx-proto__cols { display: none; }

  .nx-proto li {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px 14px;
    padding-left: 18px;
    padding-right: 18px;
  }

  .nx-proto li > :nth-child(n + 3) { grid-column: 2; }
  .nx-proto__result { margin-top: 6px; }

  .nx-specs { grid-template-columns: minmax(0, 1fr); }
  .nx-spec--wide { grid-column: auto; }

  .nx-timeline > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

@media (max-width: 560px) {
  .nx-flow { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .nx-flow li { min-height: 0; }

  .nx-flow li + li::before {
    top: -11px;
    left: 20px;
    width: 1px;
    height: 8px;
  }

  .nx-facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .nx *,
  .nx *::before,
  .nx *::after { transition: none !important; }
}

/* =====================================================================
   Zwei Säulen, bildstark (Stand 2026-09-28, Runde 2)
   ===================================================================== */

/* Screenshot im schlanken Browserrahmen mit echter Adresse */
.nx-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.nx-frame__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 30px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ubx-border-mid);
  background: #101317;
  font-family: var(--ubx-mono);
  font-size: 0.62rem;
  color: var(--ubx-text-muted);
}

.nx-frame__bar::before {
  content: "";
  width: 34px;
  height: 8px;
  flex: none;
  background:
    radial-gradient(circle at 4px 4px, var(--ubx-border-strong) 0 3px, transparent 3.5px) 0 0 / 13px 8px repeat-x;
}

.nx-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Hero mit gestaffelten Screenshots */
.nx-hero--work .nx-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
.nx-hero-grid.nx-exp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.nx-hero--work h1 { font-size: clamp(2.1rem, 3.8vw, 2.9rem); }

.nx-line { display: block; }

.nx-stack {
  position: relative;
  min-height: 420px;
}

.nx-stack .nx-frame { position: absolute; width: 78%; }
.nx-stack .nx-frame:nth-child(1) { right: 0; top: 0; z-index: 1; opacity: 0.55; }
.nx-stack .nx-frame:nth-child(2) { left: 0; top: 56px; z-index: 2; opacity: 0.8; }
.nx-stack .nx-frame:nth-child(3) { right: 6%; top: 128px; z-index: 3; }

/* Zwei Säulen */
.nx-pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px);
}

.nx-pillar {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
}

.nx-pillar > .nx-frame {
  border: 0;
  border-bottom: 1px solid var(--ubx-border-mid);
  border-radius: 0;
  box-shadow: none;
}

.nx-pillar__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 3vw, 36px);
}

.nx-pillar h3 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }

.nx-pillar ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.nx-pillar li {
  position: relative;
  padding-left: 16px;
  font-size: 0.9rem;
  color: var(--ubx-text);
}

.nx-pillar li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 1px;
  background: var(--nx-acc);
}

.nx-pillar .nx-link { margin-top: auto; align-self: flex-start; }

.nx-together {
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: 28px;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-together p {
  max-width: 60ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--ubx-text);
}

/* Arbeiten mit Filter */
.nx-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.nx-filter[hidden] { display: none; }

.nx-filter button {
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: transparent;
  color: var(--ubx-text-secondary);
  font: 500 0.82rem/1 var(--ubx-sans);
  cursor: pointer;
  transition: border-color 200ms var(--nx-ease), color 200ms var(--nx-ease), background-color 200ms var(--nx-ease);
}

.nx-filter button:hover { border-color: var(--nx-acc-40); color: var(--ubx-text); }

.nx-filter button[aria-pressed="true"] {
  border-color: var(--nx-acc);
  background: var(--nx-acc-06);
  color: var(--nx-acc);
}

.nx-work {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 20px;
}

.nx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  overflow: hidden;
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
  transition: border-color 250ms var(--nx-ease), transform 250ms var(--nx-ease);
}

.nx-card[hidden] { display: none; }
.nx-card:hover { border-color: var(--nx-acc-40); transform: translateY(-2px); }
.nx-card:focus-within { border-color: var(--nx-acc); box-shadow: var(--ubx-focus-ring); }
.nx-card--lead { grid-column: span 3; }
.nx-card--wide { grid-column: span 6; }

.nx-card > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-bottom: 1px solid var(--ubx-border-mid);
}

.nx-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}

.nx-card h3 { font-size: 1.08rem; }
.nx-card--lead h3 { font-size: 1.3rem; }
.nx-card h3 a { color: inherit; text-decoration: none; }
.nx-card h3 a:focus-visible { outline: none; box-shadow: none; }

.nx-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.nx-card p { font-size: 0.9rem; }

.nx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-tags li {
  padding: 3px 8px;
  border: 1px solid var(--ubx-border-mid);
  border-radius: 3px;
  font-family: var(--ubx-mono);
  font-size: 0.62rem;
  color: var(--ubx-text-muted);
}

.nx-card__meta {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--ubx-mono);
  font-size: 0.68rem;
  color: var(--nx-acc);
}

.nx-card--text {
  justify-content: flex-end;
  min-height: 220px;
  background:
    linear-gradient(var(--ubx-border) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--ubx-border) 1px, transparent 1px) 0 0 / 44px 100%,
    var(--ubx-graphite);
}

.nx-card--wide.nx-card--text { min-height: 0; }
.nx-card--wide .nx-card__body { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }

.nx-work-empty { margin-top: 20px; }

/* Messprotokoll */
.nx-measure {
  overflow: hidden;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-plate-bg);
  font-family: var(--ubx-mono);
}

.nx-measure table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.nx-measure caption {
  caption-side: top;
  padding: 14px 22px;
  border-bottom: 1px solid var(--ubx-border-mid);
  text-align: left;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-measure th,
.nx-measure td {
  padding: 12px 22px;
  border-bottom: 1px solid var(--ubx-border);
  text-align: left;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ubx-text);
  overflow-wrap: anywhere;
}

.nx-measure thead th {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.nx-measure td:nth-child(n + 2),
.nx-measure th:nth-child(n + 2) { text-align: right; font-variant-numeric: tabular-nums; }

.nx-measure tbody tr:last-child td { border-bottom: 0; }

.nx-measure-note {
  margin-top: 16px;
  font-size: 0.86rem;
  color: var(--ubx-text-muted);
}

.nx-measure-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

/* Marketing: Galerie */
.nx-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.nx-gallery figure { margin: 0; }

.nx-gallery figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ubx-text-secondary);
}

.nx-gallery figcaption strong { color: var(--ubx-text); font-weight: 500; }

/* Bilder aus dem System: Fallstudien */
.nx-gallery--shots { align-items: start; }
.nx-gallery--shots .nx-frame img { aspect-ratio: 1200 / 750; }
.nx-gallery__phone .nx-frame { max-width: 300px; margin-inline: auto; }
.nx-gallery__phone .nx-frame img { aspect-ratio: 585 / 780; }
.nx-gallery__phone figcaption { max-width: 300px; margin-inline: auto; }

@media (max-width: 991px) {
  .nx-hero--work .nx-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .nx-hero-grid.nx-exp { grid-template-columns: minmax(0, 1fr); }
  .nx-stack { min-height: 0; }
  .nx-stack .nx-frame { position: static; width: 100%; opacity: 1; }
  .nx-stack .nx-frame:not(:last-child) { display: none; }
  .nx-work { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-card,
  .nx-card--lead { grid-column: span 1; }
  .nx-card--wide { grid-column: span 2; }
  .nx-measure-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .nx-pillars,
  .nx-gallery { grid-template-columns: minmax(0, 1fr); }
  .nx-work { grid-template-columns: minmax(0, 1fr); }
  .nx-card--wide { grid-column: span 1; }
  .nx-card--text { min-height: 0; }
  .nx-measure th,
  .nx-measure td { padding: 10px 14px; }
}

@media (max-width: 480px) {
  .nx-pillar ul { grid-template-columns: minmax(0, 1fr); }
}

/* Leitprojekt: volle Breite, Bild links */
.nx-card--feature {
  grid-column: span 6;
  flex-direction: row;
}

.nx-card--feature > img {
  width: 58%;
  flex: none;
  border-bottom: 0;
  border-right: 1px solid var(--ubx-border-mid);
}

.nx-card--feature .nx-card__body {
  justify-content: center;
  gap: 12px;
  padding: clamp(24px, 3vw, 44px);
}

.nx-card--feature h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.nx-card--feature p { font-size: 1rem; }

@media (max-width: 991px) {
  .nx-card--feature { grid-column: span 2; flex-direction: column; }
  .nx-card--feature > img { width: 100%; border-right: 0; border-bottom: 1px solid var(--ubx-border-mid); }
}

@media (max-width: 767px) {
  .nx-card--feature { grid-column: span 1; }
}

/* =====================================================================
   Bereichsfarben: Software Cyan, Marketing Lila
   ===================================================================== */

/* Säulen: Titel, Aufzählung und Link in der Bereichsfarbe */
.nx-pillar h3 { color: var(--nx-acc); }
.nx-pillar { transition: border-color 250ms var(--nx-ease); }
.nx-pillar:hover { border-color: var(--nx-acc-40); }

/* Schlagworte an den Arbeiten */
.nx-tags li.nx-sw,
.nx-tags li.nx-mkt {
  color: var(--nx-acc);
  border-color: var(--nx-acc-40);
}

/* Menü */
.navbar-nav-upbyte .nav-link.ubx-nav--violet:hover { color: var(--ubx-violet); }
.navbar-nav-upbyte .nav-link[aria-current] { color: var(--ubx-text-primary); }
.navbar-nav-upbyte .nav-link.ubx-nav--cyan[aria-current] { color: var(--ubx-cyan); }
.navbar-nav-upbyte .nav-link.ubx-nav--violet[aria-current] { color: var(--ubx-violet); }

/* Footer */
.ubx-footer-links--accent a:hover { color: var(--ubx-violet); }

.ubx-footer-title--sw,
.ubx-footer-title--mkt {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ubx-footer-title--sw::before,
.ubx-footer-title--mkt::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--ubx-cyan);
}

.ubx-footer-title--mkt::before { background: var(--ubx-violet); }

/* Menü: kleine Farbmarke vor Software und Marketing */
.navbar-nav-upbyte .nav-link.ubx-nav--cyan::before,
.navbar-nav-upbyte .nav-link.ubx-nav--violet::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 2px;
  vertical-align: 0.12em;
  background: var(--ubx-cyan);
}

.navbar-nav-upbyte .nav-link.ubx-nav--violet::before { background: var(--ubx-violet); }

/* ---------- Verzeichnis (Branchen, Unterseiten) ---------- */
.nx-fields { border-bottom: 1px solid var(--ubx-border-mid); }

.nx-field {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr) auto;
  gap: 6px clamp(20px, 4vw, 48px);
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--ubx-border-mid);
  color: inherit;
  text-decoration: none;
}

.nx-field h3 { transition: color 200ms var(--nx-ease); }
.nx-field p { font-size: 0.95rem; }
.nx-field:hover h3 { color: var(--nx-acc); }

.nx-field__more {
  font-family: var(--ubx-mono);
  color: var(--nx-acc);
  transition: transform 200ms var(--nx-ease);
}

.nx-field:hover .nx-field__more { transform: translateX(3px); }

@media (max-width: 767px) {
  .nx-field { grid-template-columns: minmax(0, 1fr) auto; }
  .nx-field p { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Branchenseiten ---------- */
.nx-statement p.nx-statement__more {
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  color: var(--ubx-text-secondary);
}

.nx-checks--lg { margin-top: 0; gap: 16px 40px; }
.nx-checks--lg li { font-size: 1rem; line-height: 1.55; }

.nx-case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.nx-case h2 { margin-bottom: 20px; }
.nx-case__text + .nx-case__text { margin-top: 14px; }
.nx-case .nx-checks { grid-template-columns: minmax(0, 1fr); }
.nx-case__more { margin-top: 28px; }

/* Datenquellen als Bildersatz im Hero */
.nx-merge--hero {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin: 0;
  padding: 28px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--nx-plate-bg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.nx-merge--hero li,
.nx-merge--hero .nx-merge__target { font-size: 0.78rem; padding: 8px 12px; }

@media (max-width: 991px) {
  .nx-case { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Fallstudien ---------- */
.nx-tags--hero { margin-bottom: 20px; }
.nx-tags--hero li { font-size: 0.68rem; }

.nx-story { max-width: 68ch; }
.nx-story h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin: 0 0 16px; }
.nx-story * + h2 { margin-top: clamp(40px, 5vw, 56px); }
.nx-story p + p { margin-top: 14px; }

.nx-points { margin: 20px 0 0; }

.nx-points > div {
  padding: 16px 0;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-points dt {
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--ubx-text);
}

.nx-points dd { margin: 0; font-size: 0.95rem; line-height: 1.65; }

.nx-result-note {
  margin-top: 32px;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.55;
  color: var(--ubx-text);
}

.nx-techlist {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--ubx-mono);
  font-size: 0.8rem;
  line-height: 1.6;
}

.nx-techlist li {
  padding: 10px 0;
  border-top: 1px solid var(--ubx-border);
  color: var(--ubx-text-secondary);
}

/* Kurzer Seitenkopf ohne Bild */
.nx-hero--short { padding: clamp(48px, 6vw, 88px) 0 clamp(40px, 5vw, 72px); }
.nx-hero--short .nx-lead { max-width: 60ch; }

/* ---------- Kontakt (Formularlogik unverändert, nur Gestaltung) ---------- */
.ubx-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

.ubx-contact-grid--single { grid-template-columns: minmax(0, 620px); }

.ubx-contact-panel {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--ubx-border-mid);
  border-radius: var(--nx-radius);
  background: var(--ubx-graphite);
}

.ubx-contact-panel h2 { font-size: 1.15rem; margin-bottom: 22px; }

.ubx-contact-list {
  display: grid;
  gap: 16px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.ubx-contact-list a,
.ubx-contact-list span:not(.ubx-contact-label) {
  display: block;
  color: var(--ubx-text);
  text-decoration: none;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.ubx-contact-list a:hover { color: var(--nx-acc); }

.ubx-contact-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--ubx-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ubx-text-muted);
}

.ubx-contact-note { font-size: 0.9rem; line-height: 1.7; color: var(--ubx-text-muted); }
.ubx-contact-note a { color: var(--nx-acc); }

.ubx-contact-form { display: grid; gap: 18px; }
.ubx-contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

.ubx-contact-field label {
  display: block;
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ubx-text);
}

.ubx-contact-field input,
.ubx-contact-field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  background: var(--ubx-void);
  color: var(--ubx-text);
  font: inherit;
  line-height: 1.5;
  transition: border-color 180ms var(--nx-ease);
}

.ubx-contact-field textarea { min-height: 160px; resize: vertical; }
.ubx-contact-field textarea::placeholder { color: var(--ubx-text-muted); }

.ubx-contact-field input:focus,
.ubx-contact-field textarea:focus { border-color: var(--nx-acc); outline: none; box-shadow: 0 0 0 3px var(--nx-acc-15); }

/* Honigtopf: für Menschen unsichtbar */
.ubx-contact-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.ubx-contact-submit {
  justify-self: start;
  min-width: 180px;
  padding: 14px 28px;
  border: 1px solid var(--nx-acc);
  border-radius: var(--nx-radius);
  background: var(--nx-acc);
  color: var(--ubx-dark);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 200ms var(--nx-ease), transform 200ms var(--nx-ease);
}

.ubx-contact-submit:hover { background: color-mix(in srgb, var(--nx-acc) 88%, var(--ubx-dark)); transform: translateY(-1px); }
.ubx-contact-submit:active { transform: translateY(1px); }
.ubx-contact-submit[disabled] { opacity: 0.62; cursor: not-allowed; transform: none; }

.ubx-contact-status { min-height: 24px; font-size: 0.9rem; line-height: 1.6; color: var(--ubx-text-secondary); }
.ubx-contact-status.is-ok { color: #5DE4C7; }
.ubx-contact-status.is-error { color: #ffb4a8; }

@media (max-width: 900px) {
  .ubx-contact-grid { grid-template-columns: minmax(0, 1fr); }
  .ubx-contact-row { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Vertrauensseiten: Abschnitte als Zeilen ---------- */
.nx-intro { margin-bottom: clamp(40px, 5vw, 64px); }

.nx-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 12px clamp(24px, 5vw, 72px);
  padding: clamp(24px, 3vw, 36px) 0;
  border-top: 1px solid var(--ubx-border-mid);
}

.nx-rows h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); max-width: 22ch; }
.nx-rows p { font-size: 0.98rem; }
.nx-rows p + p { margin-top: 12px; }
.nx-rows a { color: var(--nx-acc); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 767px) {
  .nx-rows > div { grid-template-columns: minmax(0, 1fr); }
}

/* Kopfzeile: Seitenabstand auf kleinen Bildschirmen */
@media (max-width: 991.98px) {
  .site-header .navbar { padding-left: 20px; padding-right: 20px; }
}

/* Startseite (nur Software-Arbeiten): kleine Karten paarweise, damit keine einzelne Karte übrig bleibt */
@media (min-width: 992px) {
  .nx-work--pairs > .nx-card:not(.nx-card--lead):not(.nx-card--feature) { grid-column: span 3; }
}

/* Drei Karten nebeneinander: auf dem Tablet füllt die dritte die Zeile */
@media (min-width: 768px) and (max-width: 991px) {
  .nx-work--three > .nx-card:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Zweitlink in einer ganz klickbaren Karte: liegt über der Kartenfläche */
.nx-card__extra { position: relative; z-index: 1; margin-top: auto; padding-top: 6px; font-size: 0.88rem; }

/* Rechtsseiten: Link auf frühere Fassungen */
.ubx-legal-meta a { color: var(--ubx-cyan); border-bottom: 1px solid var(--ubx-cyan-40); }
.ubx-legal-meta a:hover { border-bottom-color: var(--ubx-cyan); }

/* Wie wir arbeiten: Sprungmarken und Abschnitte */
.nx-toc ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.nx-toc a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--ubx-border-strong);
  border-radius: var(--nx-radius);
  font-size: 0.88rem;
  color: var(--ubx-text);
  text-decoration: none;
  transition: border-color 200ms var(--nx-ease), color 200ms var(--nx-ease);
}
.nx-toc a:hover { border-color: var(--nx-acc); color: var(--nx-acc); }
.nx-anchor { scroll-margin-top: 90px; }
.nx-rows h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); max-width: 22ch; }
.nx .nx-list-title { margin: clamp(36px, 4vw, 52px) 0 20px; font-size: 1.15rem; }

/* Wann wir gut zusammenpassen */
.nx-fit {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 64px);
}

.nx-fit h4 {
  margin: 0 0 18px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ubx-text-secondary);
}

.nx-fit .nx-checks { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.nx-fit .nx-checks li { font-size: 1rem; line-height: 1.55; }

.nx-fit__less {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-fit__less li {
  padding-left: 18px;
  border-left: 1px solid var(--ubx-border-strong);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ubx-text-secondary);
}

@media (max-width: 767px) {
  .nx-fit { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Mobile-first-Feinschliff (Check 2026-09-28)
   ===================================================================== */

/* Menü-Button: Tippfläche 44 x 44 px */
@media (max-width: 991.98px) {
  .site-header .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }

  /* Footer-Links mit ausreichender Tippfläche */
  .ubx-footer-links { gap: 2px; }
  .ubx-footer-links a { display: inline-block; padding: 9px 0; }
}

/* „Nach oben“ und Telefonlink groß genug zum Tippen */
.ubx-footer-bottom a { display: inline-block; padding: 10px 0; }
.nx-tel { display: inline-block; padding: 10px 0; }

/* Kleine Handys: Hauptbutton über die volle Breite, Text darf umbrechen */
@media (max-width: 400px) {
  .nx .ubx-btn {
    width: 100%;
    justify-content: center;
    padding: 14px 18px;
    white-space: normal;
    text-align: center;
  }

  .nx-plate__head { flex-wrap: wrap; }
  .nx-proto__head { flex-wrap: wrap; gap: 4px 16px; padding-left: 18px; padding-right: 18px; }
  .nx-merge--hero { padding: 20px; }
}

/* Beschriftungen in Mono mindestens rund 12 px */
.nx-tags li,
.nx-frame__bar,
.nx-plate__type,
.nx-plate dt,
.nx-spec dt,
.ubx-contact-label,
.ubx-footer-title { font-size: 0.68rem; }

/* Einleitungstexte auf dem Handy ohne automatische Silbentrennung (ruhigeres Schriftbild) */
@media (max-width: 480px) {
  :where(.nx) p.nx-lead { hyphens: manual; overflow-wrap: break-word; }
}