/* =========================================================
   Feinschliff 25.09.2026 (Vorschau): Flächen, Webdesign-Rahmen,
   Formularfelder, Designprogramm-Cursor.
   ========================================================= */

/* 1) Kein Weiß auf Weiß mehr: Grundfläche hellgrau, Akzent-Abschnitte mit Hauch Blau.
      Weiße Karten heben sich damit ohne zusätzliche Linien ab. */
body.nx { background: var(--bg-soft); }
.nx-soft { background: var(--tint); }

/* 2) Mitscrollende Website: sitzt in der blauen Fläche statt darauf zu kleben.
      Heller Rahmen als Übergang, Schatten in Blau statt Schwarz, Screenshot minimal ruhiger. */
.nx-web .nx-browser-frame { padding: 10px; border-radius: calc(var(--r-sm) + 10px); background: rgba(255, 255, 255, .28); }
.nx-web .nx-browser-bar,
.nx-web .nx-browser-view { border-color: rgba(255, 255, 255, .7); }
.nx-web .nx-browser-view { box-shadow: 0 28px 50px -30px rgba(12, 74, 110, .55); }
.nx-web .nx-browser-view img { filter: brightness(.97) saturate(.92); }

/* 3) Formularfelder als Feld erkennbar (WCAG 1.4.11: Umrandung mind. 3:1) */
.contact-form input,
.contact-form textarea { border-bottom-color: #84878F; }

body.nx { cursor: auto; } /* Fallback ohne feine Maus; style.css setzt sonst cursor:none */

/* 4) Designprogramm-Cursor (nur echte Maus): Auswahlpfeil wie im Logo-Intro,
      über Links/Buttons der weiße Direktauswahl-Pfeil, über Arbeiten ein kleines Etikett. */
@media (hover: hover) and (pointer: fine) {
  body.nx,
  body.nx .hx-compare input { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 9-6.6 1.6 3.8 7.2-2.9 1.5-3.8-7.3L4.8 19z' fill='%230A0A0B' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto; }
  body.nx a, body.nx button, body.nx label, body.nx summary, body.nx [data-cursor], body.nx .hx-compare input,
  body.nx .segment span { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4 2.5l15 9-6.6 1.6 3.8 7.2-2.9 1.5-3.8-7.3L4.8 19z' fill='%23fff' stroke='%230A0A0B' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer; }
  body.nx input[type="text"], body.nx input[type="email"], body.nx input[type="tel"], body.nx textarea { cursor: text; }
}
.cursor, .cursor-dot { display: none !important; }

.fx-tip { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  padding: 5px 9px; border-radius: 4px; background: var(--ink); color: #fff;
  font: 600 .74rem/1.2 'Inter', sans-serif; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 6px 16px -6px rgba(10, 10, 11, .45);
  opacity: 0; scale: .96; transform-origin: 0 0;
  transition: opacity .14s ease-out, scale .14s cubic-bezier(.23, 1, .32, 1); }
.fx-tip.is-on { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .fx-tip { transition: none; } }

/* 5) Markenblau als Fläche statt Schrift: Hervorhebungen schwarz mit gesprühtem Swipe,
      kleine Beschriftungen schwarz. #3AB5F5 nie als Textfarbe (Kontrast), kein abgedunkeltes Blau. */
.nx-web .swipe::before { background: #fff; }
.hx-s1 .n, .hx-s2 .n, .hx-s3 .n, .nx-pill, .nx-station b, .nx-chain figcaption b { color: var(--ink); }
.pf-cap .pf-hint { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* 6) Über mich: bei ungerader Anzahl läuft die letzte Station (Gründung) über die ganze Breite */
.nx-station:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* 7) Hero-Kachel als Link (z. B. zur Website im Webdesign-Abschnitt) verhält sich wie die anderen Kacheln */
a.hx-card { display: block; color: inherit; }

/* 8) Unterseiten (FAQ, Datenschutz) im Design der Startseite */
.nx-sub main { min-height: 70vh; }
.nx-subhead { padding-top: 150px; }
.nx-narrow { max-width: 820px; }
.nx-sub .nx-h2 { margin-bottom: 18px; }
.nx-sub .nx-lead { margin-bottom: 36px; max-width: 60ch; }
.nx-inline { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.nx-subcta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 36px; padding: 26px 28px; border-radius: var(--r-card); background: var(--blue); }
.nx-subcta b { display: block; font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 1.2rem; color: var(--ink); }
.nx-subcta span { color: var(--ink); }
.nx-subcta .hx-btn .hx-arrow { background: #fff; }
.nx-legal-card { margin-top: 12px; padding: 40px 44px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: 0 24px 48px -34px rgba(10, 10, 11, .25); }
.nx-legal-card .legal-text p { color: #4A4D55; }
.nx-legal-card .legal-text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .nx-subhead { padding-top: 110px; }
  .nx-legal-card { padding: 26px 20px; }
  .nx-subcta { padding: 22px; }
}

/* 9) Portfolio: unterstrichene Hinweise unter den Kacheln sind echte Links auf die Detail-Ansicht */
.pf-cap button.pf-hint { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; }
.pf-cap button.pf-hint:hover { text-decoration-thickness: 3px; }
.pf-cap .pf-note { color: var(--grey); }

/* 10) Detail-Ansicht (Lightbox): deckender Hintergrund (sonst scheint die Seite durch und Texte wirken doppelt),
       Etiketten „3D-Entwurf“/„Ergebnis“ sitzen auf ihrer eigenen Bildspalte */
.lightbox { background: #0A0A0B; }
.threedcol { position: relative; }

/* 11) Galerie-Projekte: in der Detail-Ansicht ganzes Foto (kein Beschnitt), im Portfolio randlose Fotopaare */
.galeriewrap { width: min(1000px, 100%); }
.galeriewrap .threedswipe { height: min(74vh, 760px); background: #0A0A0B; }
.galeriewrap .threedswipetrack img { object-fit: contain; }
.pf-pair.pf-fotos > div + div { border-left: 2px solid #fff; }
.pf-item.pf-half, .pf-item[data-cat="video"].pf-half { grid-column: span 6; }
@media (max-width: 640px) { .pf-item.pf-half, .pf-item[data-cat="video"].pf-half { grid-column: 1 / -1; } }

/* 12) Kundenbeispiel mit fünf Schritten: Desktop in einer Reihe, sonst läuft der letzte über die ganze Breite */
.nx-chain { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .nx-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-chain figure:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .nx-chain figure:last-child:nth-child(odd) .nx-chain-img { aspect-ratio: 16 / 9; }
}

/* 13) Pillen („Leistungen“, „Kundenbeispiel“) in Markenblau mit schwarzer Schrift (8,6:1);
       auf blauen Flächen (Webdesign, Kontakt) bleiben sie weiß */
.nx-pill { background: var(--blue); padding: 8px 16px; }
.nx-pill:has(i) { padding-left: 12px; }

/* 14) Bildunterschrift der Detail-Ansicht: eine Kopfzeile, darunter ein (pro Foto wechselnder) Text */
.lightbox-caption { display: block; }
.lightbox-caption .lb-head { font-size: .95rem; color: rgba(255,255,255,.7); }
.lightbox-caption .lb-head .cat { display: inline; margin: 0; font-size: inherit; }
.lightbox-caption .lb-title { color: #fff; font-weight: 600; }
.lightbox-caption .lb-text { margin-top: 6px; color: rgba(255,255,255,.85); }
.lightbox-caption .lb-count { margin-left: 8px; font-size: .8rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.5); }
/* Blätter-Pfeile gut sichtbar */
.galeriewrap .swipe-arrow { width: 44px; height: 44px; background: rgba(255,255,255,.9); color: var(--ink); font-size: 1.4rem; }

/* 15) Laufband: 6 Durchgänge statt 2, damit es auch auf sehr breiten Bildschirmen (bis ca. 3.600 px) lückenlos läuft.
       Dreifache Strecke, dreifache Dauer = gleiches Tempo wie vorher. */
.nx .marquee-track { animation-duration: 66s; }
@media (prefers-reduced-motion: reduce) { .nx .marquee-track { animation: none; } }

/* 16) GEO: Portfolio als lesbarer Text für KI-Crawler ohne JavaScript. Mit JavaScript sofort ausgeblendet
       (die Kachel-Ansicht ersetzt ihn), ohne JavaScript als schlichte Liste sichtbar. */
.js .pf-static { display: none; }
.pf-static { grid-column: 1 / -1; margin: 0; padding-left: 1.2em; line-height: 1.6; }
.pf-static span { color: var(--grey); }

/* 17) Kundenbeispiel: Bilder öffnen die Großansicht (Fotos zum Blättern, Website scrollbar) */
.nx-chain-img[role="button"] { cursor: pointer; }
.nx-chain-img[role="button"] img { transition: scale .5s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .nx-chain-img[role="button"]:hover img { scale: 1.03; } }
.nx-chain-img[role="button"]:active img { scale: .99; transition-duration: .12s; }
.nx-chain-img[role="button"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .nx-chain-img[role="button"] img { transition: none; scale: none !important; } }

/* 18) Porträt „Über mich“: Höhe aus dem Seitenverhältnis 4:5 (das height-Attribut würde sonst gewinnen) */
.nx-portrait img { height: auto; }

/* 19) „Warum nicht einfach eine Werbeagentur?“: Route statt Vergleichskarten.
       Vier Stationen an einer Linie, der Zwischenhändler ist durchgestrichen (blauer Swipe) und die Linie dort gestrichelt. */
.nx-route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-route li { position: relative; padding: 34px 24px 0 0; }
.nx-route li::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; border-top: 2px solid var(--ink); }
.nx-route li:last-child::before { right: auto; width: 18px; }
.nx-route li::after { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 5px var(--bg-soft); }
.nx-route b { display: block; font-family: 'Archivo Black', sans-serif; font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--ink); }
.nx-route span { display: block; margin-top: 8px; color: #4A4D55; font-size: .98rem; max-width: 24ch; }
.nx-route li:has(+ .is-cut)::before, .nx-route .is-cut::before { border-top-style: dashed; border-top-color: #84878F; }
.nx-route .is-cut::after { background: var(--bg-soft); border: 2px solid #84878F; box-sizing: border-box; }
.nx-route .is-cut b { color: #6B6E76; }
.nx-route s { position: relative; text-decoration: none; }
.nx-route s::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 7px; border-radius: 4px;
  background: var(--blue); rotate: -3deg; }
@media (max-width: 760px) {
  .nx-route { grid-template-columns: 1fr; gap: 26px; }
  .nx-route li { padding: 0 0 0 36px; }
  .nx-route li::before { left: 8px; right: auto; top: 18px; bottom: -26px; border-top: 0; border-left: 2px solid var(--ink); }
  .nx-route li:last-child::before { display: none; }
  .nx-route li:has(+ .is-cut)::before, .nx-route .is-cut::before { border-left-style: dashed; border-left-color: #84878F; }
  .nx-route span { max-width: none; }
}