/* Nitrox.info – eigene Styles (ergänzend zu Bootstrap 5) */
:root {
  --nx-ocean: #0b4f7c;
  --nx-ocean-dark: #083a5c;
  --nx-turquoise: #14b8c4;
  --nx-turquoise-dark: #0e97a2;
  --nx-sky: #eaf6fb;
  --nx-sky-deep: #d5ecf6;
  --nx-ink: #17324a;
  --nx-muted: #4d6578;
  --nx-radius: 1rem;
  --nx-shadow: 0 .5rem 1.5rem rgba(11, 79, 124, .10);
  --nx-shadow-hover: 0 .75rem 2rem rgba(11, 79, 124, .16);
  --nx-section-y: clamp(3rem, 6vw, 5.5rem);
}

html { scroll-behavior: smooth; }

body {
  color: var(--nx-ink);
  background-color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
}

h1, h2, h3, h4 { color: var(--nx-ocean-dark); font-weight: 700; line-height: 1.2; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }

a { color: var(--nx-ocean); }
a:hover { color: var(--nx-turquoise-dark); }

/* Sichtbarer Fokus */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.accordion-button:focus-visible, .navbar-toggler:focus-visible {
  outline: 3px solid var(--nx-turquoise);
  outline-offset: 3px;
  box-shadow: none;
}

/* Skip-Link: nur bei Tastaturfokus sichtbar */
.nx-skip-link {
  position: absolute;
  top: 0;
  left: 1rem;
  z-index: 2000;
  padding: .75rem 1.25rem;
  background: var(--nx-ocean-dark);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 .75rem .75rem;
  transform: translateY(-120%);
  transition: transform .15s ease;
}
.nx-skip-link:focus, .nx-skip-link:focus-visible {
  transform: translateY(0);
  color: #fff;
}

/* Header */
.nx-header {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--nx-sky-deep);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.nx-header .navbar-brand {
  font-weight: 800;
  color: var(--nx-ocean);
  letter-spacing: -.01em;
}
.nx-header .navbar-brand span { color: var(--nx-turquoise-dark); }
.nx-header .nav-link {
  color: var(--nx-ink);
  font-weight: 500;
  border-radius: .5rem;
  padding: .5rem .75rem;
}
.nx-header .nav-link:hover, .nx-header .nav-link.active {
  color: var(--nx-ocean);
  background: var(--nx-sky);
}

/* Buttons */
.btn-nx-cta {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nx-turquoise-dark);
  --bs-btn-border-color: var(--nx-turquoise-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nx-ocean);
  --bs-btn-hover-border-color: var(--nx-ocean);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nx-ocean-dark);
  --bs-btn-active-border-color: var(--nx-ocean-dark);
  font-weight: 700;
  border-radius: 50rem;
  padding: .65rem 1.5rem;
  box-shadow: 0 .5rem 1.25rem rgba(14, 151, 162, .30);
}
.btn-nx-outline {
  --bs-btn-color: var(--nx-ocean);
  --bs-btn-border-color: var(--nx-ocean);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nx-ocean);
  --bs-btn-hover-border-color: var(--nx-ocean);
  --bs-btn-active-bg: var(--nx-ocean-dark);
  --bs-btn-active-color: #fff;
  font-weight: 600;
  border-radius: 50rem;
  padding: .65rem 1.5rem;
}

/* Sektionen */
.nx-section { padding-block: var(--nx-section-y); }
.nx-section-alt { background: var(--nx-sky); }
.nx-text-narrow { max-width: 42rem; }
.nx-prose { max-width: 65ch; }
.nx-eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  color: var(--nx-turquoise-dark);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Full-width Hero uses the local image. Text aligns with all .container content. */
.nx-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 47vw, 600px);
  background-color: #15547a;
  background-image: linear-gradient(90deg, rgba(3, 31, 51, .90) 0%, rgba(3, 40, 65, .75) 37%, rgba(3, 40, 65, .22) 67%, rgba(3, 40, 65, .04) 100%), url('../images/nitrox-hero.png');
  background-position: center, center 48%;
  background-size: cover;
  background-repeat: no-repeat;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.nx-hero-content { position: relative; z-index: 1; }
.nx-hero-copy { max-width: 600px; }
.nx-hero h1 { color: #fff; font-size: clamp(2.25rem, 4.3vw, 3.75rem); text-wrap: balance; }
.nx-hero .lead { color: #eef9fc; max-width: 34rem; }
.nx-hero .nx-eyebrow { color: #b5f6f4; }
.nx-hero .btn-nx-outline { background: rgba(255,255,255,.93); color: #0b4f7c; border-color: #fff; }
.nx-hero .btn-nx-outline:hover { background: #fff; color: #083a5c; }
@media (max-width: 767.98px) {
  .nx-hero { min-height: 560px; background-position: center, 62% center; background-image: linear-gradient(90deg, rgba(3,31,51,.88),rgba(3,40,65,.52)),url('../images/nitrox-hero.png'); }
  .nx-hero-copy { max-width: 95%; }
}
/* Prevent desktop nav items from wrapping or stacking at wide sizes */
@media (min-width: 992px) {
  .nx-header .navbar-nav { gap: .1rem !important; }
  .nx-header .nav-link { white-space: nowrap; padding-inline: .52rem; font-size: .92rem; }
  .nx-header .navbar-brand { white-space: nowrap; margin-right: 1.15rem; }
  .nx-header .btn-nx-cta { white-space: nowrap; padding-inline: .95rem; font-size: .90rem; }
}
@media (min-width: 992px) and (max-width: 1199.98px) { .nx-header .navbar-brand { font-size: 1.15rem !important; } .nx-header .nav-link { font-size: .82rem; padding-inline: .3rem; } }
/* Bildplatzhalter 16:9 */
.nx-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  color: var(--nx-ocean);
  font-weight: 600;
  background:
    radial-gradient(circle at 20% 25%, rgba(255,255,255,.7) 0 .6rem, transparent .65rem),
    radial-gradient(circle at 78% 62%, rgba(255,255,255,.55) 0 .9rem, transparent .95rem),
    radial-gradient(circle at 60% 20%, rgba(255,255,255,.5) 0 .4rem, transparent .45rem),
    linear-gradient(180deg, #bfe7f2 0%, #6fc6d8 55%, #2a8fb0 100%);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
}
.nx-placeholder small { display: block; font-weight: 500; color: var(--nx-ocean-dark); opacity: .85; }
.nx-media { border-radius: var(--nx-radius); object-fit: cover; width: 100%; height: auto; }

/* Karten */
.nx-card {
  border: 1px solid var(--nx-sky-deep);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  background: #fff;
  transition: transform .2s ease, box-shadow .2s ease;
}
.nx-card:hover { transform: translateY(-3px); box-shadow: var(--nx-shadow-hover); }
.nx-card .nx-badge {
  display: inline-block;
  padding: .3rem .8rem;
  border-radius: 50rem;
  background: var(--nx-sky);
  color: var(--nx-ocean);
  font-size: .8rem;
  font-weight: 700;
}
.nx-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
  background: var(--nx-sky);
  color: var(--nx-ocean);
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.nx-card-placeholder {
  border: 2px dashed var(--nx-sky-deep);
  border-radius: var(--nx-radius);
  background: #fff;
  color: var(--nx-muted);
}

/* Accordion */
.accordion-button { font-weight: 700; color: var(--nx-ocean-dark); }
.accordion-button:not(.collapsed) { background: var(--nx-sky); color: var(--nx-ocean-dark); box-shadow: none; }
.accordion-item { border-color: var(--nx-sky-deep); }

/* Footer */
.nx-footer {
  background: var(--nx-sky);
  border-top: 1px solid var(--nx-sky-deep);
  color: var(--nx-ink);
  padding-block: 3rem 1.5rem;
}
.nx-footer a { color: var(--nx-ocean); text-decoration: none; }
.nx-footer a:hover { text-decoration: underline; }
.nx-footer h2, .nx-footer .nx-footer-title { font-size: 1rem; margin-bottom: .75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nx-card, .nx-skip-link { transition: none; }
  .nx-card:hover { transform: none; }
}

/* Keep long German words inside narrow layouts. */
main h1, main h2, main h3, main p, main li, .accordion-button { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .container > .row.g-5 { --bs-gutter-x: 1.5rem; } }