/* NEXSIRA Unternehmenswebsite – gemeinsames Stylesheet aller Seiten. */

/* Farbwerte aus dem bestehenden NEXSIRA-Referenzdesign der Anwendung
   (--ref-* in public/index.html): tiefes Nachtblau, Blau→Cyan-Akzente,
   helle Schrift und blaue Neonlinien. */
:root {
  --nx-bg: #010711;
  --nx-text: #f5f8fc;
  --nx-muted: #c8d3df;
  --nx-blue: #1478ff;
  --nx-blue-2: #2597ff;
  --nx-cyan: #20d9cf;
  --nx-panel: rgba(2, 13, 27, .74);
  --nx-panel-solid: rgba(2, 13, 27, .88);
  --nx-header: rgba(1, 7, 17, .8);
  --nx-header-solid: rgba(1, 7, 17, .95);
  --nx-border: rgba(25, 124, 190, .55);
  --nx-cyan-soft: rgba(32, 217, 207, .12);
  --nx-cyan-strong: rgba(32, 217, 207, .18);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Vorhandene NEXSIRA-Grafik als eigene, am Viewport fixierte Ebene: "cover"
   skaliert proportional ohne Verzerrung. Eine fixierte Ebene statt
   background-attachment:fixed, weil mobile Browser (iOS) das Bild sonst auf
   die gesamte Seitenhöhe vergrößern. Absoluter Pfad, damit die Grafik aus
   jedem Unterverzeichnis identisch geladen wird. */
html {
  background: var(--nx-bg);
  /* Sprungziele (#kontakt, #dartalarm …) nicht unter der Sticky-Kopfzeile
     verstecken; auf Smartphones ist die Kopfzeile zweizeilig. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background: var(--nx-bg) url("/nexira-background.png") center center / cover no-repeat;
  /* Grafik rund 22 % heller und das vorhandene Blau kräftiger darstellen,
     ohne die Bilddatei selbst zu verändern. */
  filter: brightness(1.22) saturate(1.2);
}

/* Blauer Glow über der Grafik, darunter ein dunkler Verlauf zwischen Grafik
   und Inhalt: oben und unten kräftiger für Navigation und Footer, in der
   Mitte leicht, damit Berge, Wasser, Lichtlinien und Würfel erkennbar
   bleiben. */
html::after {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(20, 120, 255, .22) 0%, rgba(20, 120, 255, 0) 70%),
    radial-gradient(ellipse 45% 35% at 50% 60%, rgba(37, 151, 255, .16) 0%, rgba(37, 151, 255, 0) 70%),
    linear-gradient(
      180deg,
      rgba(1, 7, 15, .46) 0%,
      rgba(1, 7, 15, .2) 45%,
      rgba(1, 7, 15, .52) 100%
    );
}

body {
  position: relative;
  z-index: 1;
  margin: 0;
  min-height: 100vh;
  background: transparent;
  color: var(--nx-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Kein seitliches Verschieben auf kleinen Bildschirmen. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Fokus und Textauswahl im NEXSIRA-Cyan statt in Browser-Standardfarben. */
:focus-visible {
  outline: 2px solid var(--nx-cyan);
  outline-offset: 2px;
}

::selection {
  background: var(--nx-cyan-strong);
  color: var(--nx-text);
}

/* Lange deutsche Komposita ("Softwareentwicklung") dürfen auf schmalen
   Bildschirmen umbrechen statt über den Rand zu ragen. */
h1,
h2,
h3,
p {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Gemeinsame Navigation aller sechs Seiten. Sticky statt fixed, damit die
   Kopfzeile auch bei umbrechendem Inhalt nie über den Seiteninhalt ragt. */
.nx-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--nx-header);
  border-bottom: 1px solid var(--nx-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nx-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: .75rem 1.25rem;
}

.nx-brand {
  color: var(--nx-text);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
}

.nx-nav {
  min-width: 0;
}

.nx-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-nav a {
  display: block;
  padding: .45rem .8rem;
  border-radius: 999px;
  color: var(--nx-muted);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.nx-nav a:hover,
.nx-nav a:focus-visible {
  background: var(--nx-cyan-soft);
  color: var(--nx-text);
}

/* Aktive Seite: jede Seite markiert ihren eigenen Eintrag statisch mit
   aria-current="page" – sichtbar ohne JavaScript und für Screenreader. */
.nx-nav a[aria-current="page"] {
  background: var(--nx-cyan-strong);
  box-shadow: inset 0 0 0 1px var(--nx-cyan);
  color: var(--nx-cyan);
  font-weight: 600;
}

/* Smartphone: Navigation als eine horizontal wischbare Zeile unter der
   Marke, damit die Kopfzeile kompakt bleibt und nichts abgeschnitten wird. */
@media (max-width: 720px) {
  html {
    scroll-padding-top: 7.5rem;
  }

  .nx-header__inner {
    padding: .6rem 1rem .5rem;
  }

  .nx-nav {
    /* Wischzeile bis an den Bildschirmrand, Einträge bleiben bündig. */
    margin: 0 -1rem;
    width: calc(100% + 2rem);
  }

  .nx-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 1rem .15rem;
    scroll-padding: 0 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nx-nav ul::-webkit-scrollbar {
    display: none;
  }

  .nx-nav li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Ausreichend große Touch-Flächen. */
  .nx-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Halbtransparente Inhaltsfläche für gute Lesbarkeit über der Grafik. */
.nx-panel {
  background: var(--nx-panel);
  border: 1px solid var(--nx-border);
  border-radius: 18px;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}

.nx-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem 1.25rem;
}

.nx-hero__content {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.nx-hero h1 {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.15;
  letter-spacing: .02em;
}

.nx-hero h1 span {
  background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.nx-hero p {
  margin: 0;
  color: var(--nx-muted);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
}

/* Unterseiten: kompakterer Einstieg, damit der Inhalt früher sichtbar ist. */
.nx-hero--sub {
  min-height: 0;
  padding-top: 3.5rem;
  padding-bottom: 2rem;
}

.nx-eyebrow {
  display: block;
  margin-bottom: .5rem;
  color: var(--nx-cyan);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.nx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.5rem;
}

.nx-button {
  display: inline-block;
  max-width: 100%;
  padding: .7rem 1.3rem;
  text-align: center;
  border: 1px solid var(--nx-cyan);
  border-radius: 999px;
  color: var(--nx-text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.nx-button:hover,
.nx-button:focus-visible {
  background: var(--nx-cyan);
  color: var(--nx-bg);
}

.nx-button--primary {
  border-color: transparent;
  background: linear-gradient(90deg, var(--nx-blue), var(--nx-cyan));
  color: #fff;
  /* Lesbarkeit der weißen Schrift auch am hellen Cyan-Ende des Verlaufs. */
  text-shadow: 0 1px 2px rgba(1, 7, 17, .55);
}

/* Hover: Verlauf mit dem helleren Referenzblau statt Browser-Standard. */
.nx-button--primary:hover,
.nx-button--primary:focus-visible {
  background: linear-gradient(90deg, var(--nx-blue-2), var(--nx-cyan));
  color: var(--nx-bg);
  text-shadow: none;
}

.nx-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}

/* Abschnittsüberschriften stehen direkt auf der Grafik (ohne Inhaltsfläche):
   weicher dunkler Schatten hebt sie auch vor hellen Lichtlinien ab. */
.nx-section > h2 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(1, 7, 17, .9), 0 1px 3px rgba(1, 7, 17, .8);
}

.nx-section > p {
  max-width: 760px;
  margin: 0 0 1.25rem;
  color: var(--nx-text);
  text-shadow: 0 1px 8px rgba(1, 7, 17, .9), 0 1px 2px rgba(1, 7, 17, .8);
}

.nx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1.25rem;
}

.nx-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}

.nx-card h3 {
  margin: 0 0 .5rem;
  color: var(--nx-cyan);
  font-size: 1.15rem;
  line-height: 1.3;
}

.nx-card p {
  margin: 0;
  color: var(--nx-muted);
}

/* Abschnittsüberschrift innerhalb einer einzelnen Karte (Kontaktbereiche). */
.nx-card h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  line-height: 1.25;
}

.nx-card p + p {
  margin-top: .75rem;
}

.nx-card .nx-actions {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Arbeitsweise (Startseite kurz, Über-Seite ausführlich) als Schrittfolge in
   einer Fläche statt einzelner Karten – Desktop nebeneinander, schmal
   untereinander. */
.nx-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nx-step;
}

.nx-steps li {
  counter-increment: nx-step;
  color: var(--nx-muted);
}

.nx-steps strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--nx-cyan);
  font-size: 1.05rem;
}

.nx-steps strong::before {
  content: counter(nx-step) ". ";
}

/* Startseite: Projektvorschau als schlichte Linkliste. */
.nx-teaser {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-teaser a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nx-cyan);
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none;
}

.nx-teaser a::after {
  content: " →";
  white-space: pre;
}

.nx-teaser a:hover,
.nx-teaser a:focus-visible {
  color: var(--nx-text);
  text-decoration: underline;
}

/* Projektseite: Kennzeichnung über dem Projekttitel. */
.nx-tag {
  align-self: flex-start;
  margin-bottom: .75rem;
  padding: .2rem .7rem;
  border: 1px solid var(--nx-cyan);
  border-radius: 999px;
  background: var(--nx-cyan-soft);
  color: var(--nx-cyan);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nx-project h3 {
  font-size: 1.4rem;
}

/* Projektraster: wächst mit beliebig vielen Projekten mit; breitere
   Mindestbreite, damit auf dem Desktop höchstens drei Projekte
   nebeneinander stehen und die Karten gut lesbar bleiben. Tablet und
   Smartphone übernehmen die allgemeinen .nx-grid-Regeln. */
@media (min-width: 901px) {
  .nx-projects {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

/* Direkte Kontaktmöglichkeit: E-Mail-Adresse gut sichtbar und antippbar. */
.nx-card .nx-contact {
  margin-top: 1rem;
  color: var(--nx-text);
  font-size: 1.05rem;
}

.nx-contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nx-cyan);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.nx-contact a:hover,
.nx-contact a:focus-visible {
  color: var(--nx-text);
  text-decoration: underline;
}

.nx-note {
  color: var(--nx-muted);
  font-style: italic;
}

/* Tablet: Karten in zwei Spalten, damit bei drei Karten keine zu schmalen
   Spalten entstehen. */
@media (min-width: 600px) and (max-width: 900px) {
  .nx-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Smartphone: kompaktere Abstände, Startbereich ohne volle Bildschirmhöhe
   unterhalb der zweizeiligen Kopfzeile, Buttons über die volle Breite. */
@media (max-width: 599px) {
  .nx-hero {
    min-height: calc(100vh - 7rem);
    min-height: calc(100svh - 7rem);
    padding: 1.5rem 1rem;
  }

  .nx-hero--sub {
    min-height: 0;
    padding-top: 1.75rem;
    padding-bottom: 1rem;
  }

  .nx-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2.2rem);
  }

  .nx-section {
    padding: 1rem 1rem 1.75rem;
  }

  .nx-grid {
    gap: 1rem;
  }

  .nx-card {
    padding: 1.25rem;
  }

  .nx-actions {
    flex-direction: column;
  }

  .nx-button {
    display: block;
    width: 100%;
  }
}

/* Gemeinsamer Footer: dunkles Band wie die Kopfzeile mit Marke, E-Mail und
   Links zu Kontakt, Impressum und Datenschutz. Desktop nebeneinander,
   Smartphone untereinander. */
.nx-footer {
  margin-top: 2rem;
  background: var(--nx-header);
  border-top: 1px solid var(--nx-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.nx-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 1rem;
}

.nx-footer__brand p {
  margin: .15rem 0 0;
  color: var(--nx-muted);
  font-size: .9rem;
}

.nx-footer .nx-contact {
  margin: 0;
  color: var(--nx-text);
}

.nx-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nx-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--nx-muted);
  font-weight: 500;
  text-decoration: none;
}

.nx-footer__nav a:hover,
.nx-footer__nav a:focus-visible {
  color: var(--nx-cyan);
  text-decoration: underline;
}

.nx-footer__copy {
  max-width: 1100px;
  margin: 0 auto;
  padding: .75rem 1.25rem 1.5rem;
  border-top: 1px solid rgba(25, 124, 190, .25);
  color: var(--nx-muted);
  font-size: .85rem;
}

@media (max-width: 599px) {
  .nx-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1rem .75rem;
  }

  .nx-footer__copy {
    padding: .75rem 1rem 1.25rem;
  }
}

/* Ohne Unschärfe-Unterstützung Flächen etwas deckender für die Lesbarkeit. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nx-panel {
    background: var(--nx-panel-solid);
  }

  .nx-header,
  .nx-footer {
    background: var(--nx-header-solid);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nx-nav a,
  .nx-button {
    transition: none;
  }
}






\n


/* NEXSIRA HERO FINAL START */

/* Oberer Bereich auf allen sechs Seiten identisch */
.nx-hero,
.nx-hero.nx-hero--sub {
  width: 100%;
  max-width: 1100px;
  min-height: 0 !important;
  margin: 0 auto;
  padding: 2rem 1.25rem 1.5rem !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* Kleinerer Container – Würfel rechts bleibt sichtbar */
.nx-hero .nx-hero__content {
  width: 100%;
  max-width: 620px !important;
  margin: 0 !important;
  padding: 1.6rem 1.8rem !important;
}

/* Überschriften kompakter */
.nx-hero h1 {
  margin: 0 0 .8rem !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  line-height: 1.08 !important;
}

/* Beschreibung etwas kleiner */
.nx-hero p {
  font-size: 1.05rem !important;
  line-height: 1.5 !important;
}

/* Kleine Bereichsüberschrift */
.nx-hero .nx-eyebrow {
  margin-bottom: .45rem !important;
  font-size: .78rem !important;
}

/* Buttons kompakter */
.nx-hero .nx-actions {
  margin-top: 1.15rem !important;
}

.nx-hero .nx-button {
  padding: .6rem 1.1rem !important;
  font-size: .95rem !important;
}

/* Smartphone weiterhin volle Breite */
@media (max-width: 599px) {
  .nx-hero,
  .nx-hero.nx-hero--sub {
    padding: 1rem !important;
  }

  .nx-hero .nx-hero__content {
    max-width: 100% !important;
    padding: 1.25rem !important;
  }

  .nx-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem) !important;
  }
}

/* NEXSIRA HERO FINAL ENDE */

/* NEXSIRA HERO POSITION UND BILDRAUM FINAL */
@media (min-width: 721px) {

  /* Startseite exakt wie die Unterseiten positionieren */
  .nx-hero:not(.nx-hero--sub) {
    width: 100% !important;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 2rem 1.25rem 0 !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .nx-hero:not(.nx-hero--sub) .nx-hero__content {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 !important;
  }

  /* Auf ALLEN Seiten freien Raum unter dem oberen Container lassen.
     Dadurch bleibt der NEXSIRA-Würfel sichtbar und der nächste Bereich
     erscheint erst weiter unten beim Scrollen. */
  .nx-hero,
  .nx-hero.nx-hero--sub {
    min-height: 570px !important;
  }
}



/* NEXSIRA RECHTLICHES */
.nx-legal-grid {
  grid-template-columns: 1fr !important;
}

.nx-legal-grid .nx-card {
  width: 100%;
}

.nx-legal-grid a {
  color: var(--nx-cyan);
}


/* NEXSIRA HEADER LOGO FINAL */
.nx-header .nx-brand--logo {
  display: flex;
  align-items: center;
  padding: 0;
  line-height: 1;
}

.nx-header .nx-brand--logo img {
  display: block;
  width: auto;
  height: 42px;
  max-width: 185px;
  object-fit: contain;
}

@media (max-width: 720px) {
  .nx-header .nx-brand--logo img {
    height: 38px;
    max-width: 170px;
  }
}


/* Moneycaching kleiner Projektlink */
.nx-project-link {
  margin-top: .55rem !important;
}

.nx-project-link a {
  color: var(--nx-cyan);
  font-size: .92rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}