/* ─────────────────────────────────────────────────────────────────────
   Lousmont — site-weite ADDITIVE Ergaenzungen.
   Bewusst keine Extraktion der Inline-Styles (folgt im Tech-Block).
   Palette: paper #F6F1E5 · ink #1A0E14 · ink-2 #2E1F26 · bordeaux #8A3848
   ───────────────────────────────────────────────────────────────────── */

/* Sichtbarer Tastatur-Fokus (war site-weit nicht definiert) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #8A3848;
  outline-offset: 3px;
  /* KEIN border-radius hier: wuerde runde Buttons (.btn, .btn-submit,
     .audio-play-btn, .lightbox-close) im Fokus-Zustand eckig machen;
     Outline folgt der Element-Rundung von selbst. */
}

/* CTA-Pill in der Desktop-Topnav (Mobile hat .nav-cta bereits) */
.topnav .nav-pill {
  padding: 7px 16px;
  background: #1A0E14;
  color: #F6F1E5;
  border-radius: 999px;
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.45s cubic-bezier(0.32, 0.72, 0, 1);
}
.topnav .nav-pill:hover {
  color: #F6F1E5;
  background: #2E1F26;
  transform: scale(0.98);
}

/* Nav-Labels nie intern umbrechen: "Projekte & Beratung" wuerde sonst
   im Wrap-Fenster (~769-850px) zweizeilig und den Topstrip aufreissen. */
.topnav a, .topnav .nav-pill { white-space: nowrap; }

/* Schmaler Desktop: Breakpoint auf 1180px angehoben, da 4 Nav-Punkte + Pill
   breiter sind als die bisherigen 3.
   Grobe Rechnung (Manrope 14px), 5 Flex-Kinder = 4 Gaps:
     "Projekte & Beratung" ≈ 150px + "Software" ≈ 70px + "Methode" ≈ 65px
     + "Über uns" ≈ 70px + 4× gap(36px) = 144px + Pill ≈ 160px
     + padding-right 18px ≈ 677px Nav-Block
     + Brand 140px + Grid-Gaps 64px + Regmark 150px + Page-Padding 120px
     ≈ 1155px Gesamtbedarf → Schwelle 1180px.
   Regmark ausblenden hat Praezedenz — mobile-nav.css versteckt <=768px. */
@media (max-width: 1180px) {
  .topnav { gap: 20px; }
  .topnav .nav-pill { padding: 6px 12px; font-size: 13px; }
  .regmark { display: none; }
}

/* Zweite Stufe 769-900px: auch mit reduziertem Gap wird 4+Pill eng.
   Pill weicht im Tablet-Querformat — die mobile-nav (<=768px) hat den
   nav-cta als persistenten CTA, es geht nichts verloren. */
@media (max-width: 900px) {
  .topnav { gap: 14px; }
  .topnav a { font-size: 13px; }
  .topnav .nav-pill { display: none; }
}

/* Reduced Motion: Faser steht als statischer Gradient (markenkonform),
   Dauerbewegung entfaellt fuer Nutzer mit entsprechender Praeferenz. */
@media (prefers-reduced-motion: reduce) {
  .fiber-band, .fiber-halo { animation: none; }
  .station-dot { animation: none; }  /* Dauer-Pulse im Methode-Diagramm */
}