/* ============================================================
   SVARTLIND NEXTGEN · PUBLIC KNOWLEDGE · 2026-09-17
   ============================================================ */


.nx-knowledge-page {
  background: #f4f3ee;
}


.nx-knowledge-hero {
  padding-top: 58px;
  padding-bottom: 54px;
}


.nx-knowledge-hero h1 {
  max-width: 1040px;

  margin: 14px 0 0;

  color: #202421;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(3.6rem, 6vw, 6.6rem);

  font-weight: 500;

  line-height: .97;

  letter-spacing: -.045em;
}


.nx-knowledge-subtitle {
  max-width: 820px;

  margin: 26px 0 0;

  color: #4d534e;

  font-size: 1.16rem;
  line-height: 1.65;
}


.nx-knowledge-teaser {
  max-width: 820px;

  margin: 14px 0 0;

  color: #747a74;

  font-size: .98rem;
  line-height: 1.65;
}


/* ------------------------------------------------------------
   MEDIA
   ------------------------------------------------------------ */

.nx-knowledge-media {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );

  gap: 14px;

  padding-bottom: 64px;
}


.nx-knowledge-media-item {
  overflow: hidden;

  margin: 0;

  border: 1px solid #d2d4ce;
  border-radius: 22px;

  background: #e9e9e5;
}


.nx-knowledge-media-item img,
.nx-knowledge-media-item video {
  display: block;

  width: 100%;
  height: 100%;

  min-height: 260px;

  object-fit: cover;
}


.nx-knowledge-media-item video {
  background: #171a18;
}


/* ------------------------------------------------------------
   ARTICLE + CONTEXT
   ------------------------------------------------------------ */

.nx-knowledge-stage {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(230px, 310px);

  gap: 72px;

  align-items: start;

  padding-bottom: 112px;
}


.nx-knowledge-article {
  min-width: 0;
}


.nx-knowledge-body {
  max-width: 840px;

  color: #4f5550;

  font-size: 1.02rem;

  line-height: 1.82;
}


.nx-knowledge-body > *:first-child {
  margin-top: 0;
}


.nx-knowledge-body p {
  margin: 0 0 21px;
}


.nx-knowledge-body h2,
.nx-knowledge-body h3 {
  color: #202421;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 500;

  line-height: 1.12;
}


.nx-knowledge-body h2 {
  margin: 58px 0 17px;

  font-size: 2.15rem;
}


.nx-knowledge-body h3 {
  margin: 48px 0 15px;

  font-size: 1.72rem;
}


.nx-knowledge-body ul,
.nx-knowledge-body ol {
  margin:
    5px 0 26px 1.25rem;

  padding: 0;
}


.nx-knowledge-body li {
  margin-bottom: 9px;
}


.nx-knowledge-body strong {
  color: #2e332f;
}


.nx-knowledge-body table {
  display: block;

  width: 100%;

  margin: 26px 0 34px;

  overflow-x: auto;

  border-collapse: collapse;

  font-size: .92rem;
}


.nx-knowledge-body th,
.nx-knowledge-body td {
  padding: 12px 14px;

  border-bottom:
    1px solid #d1d3cd;

  text-align: left;

  vertical-align: top;
}


.nx-knowledge-body th {
  color: #2b302c;

  font-weight: 800;
}


.nx-knowledge-body a,
.nx-knowledge-link,
.nx-knowledge-related-link {
  color: #303631;

  text-decoration-color:
    rgba(48,54,49,.35);

  text-decoration-thickness: 1px;

  text-underline-offset: 3px;
}


.nx-knowledge-body a:hover,
.nx-knowledge-link:hover,
.nx-knowledge-related-link:hover {
  text-decoration-color:
    currentColor;
}


.nx-knowledge-context {
  position: sticky;

  top: 112px;

  padding: 24px 0 0;

  border-top:
    1px solid #cfd2cb;
}


.nx-knowledge-context-label {
  margin-bottom: 12px;

  color: #92968f;

  font-size: .69rem;

  font-weight: 800;

  letter-spacing: .12em;

  text-transform: uppercase;
}


.nx-knowledge-context strong {
  display: block;

  color: #262b27;

  font-size: 1.08rem;
}


.nx-knowledge-context p {
  margin: 12px 0 20px;

  color: #737873;

  font-size: .86rem;

  line-height: 1.6;
}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 980px) {

  .nx-knowledge-stage {
    grid-template-columns: 1fr;

    gap: 42px;
  }


  .nx-knowledge-context {
    position: static;

    max-width: 640px;
  }

}


@media (max-width: 680px) {

  .nx-knowledge-hero {
    padding-top: 42px;
    padding-bottom: 42px;
  }


  .nx-knowledge-hero h1 {
    font-size: 3.25rem;
  }


  .nx-knowledge-subtitle {
    margin-top: 20px;

    font-size: 1.05rem;
  }


  .nx-knowledge-media {
    grid-template-columns: 1fr;

    padding-bottom: 48px;
  }


  .nx-knowledge-media-item img,
  .nx-knowledge-media-item video {
    min-height: 220px;
  }


  .nx-knowledge-stage {
    padding-bottom: 78px;
  }


  .nx-knowledge-body {
    font-size: .98rem;

    line-height: 1.75;
  }


  .nx-knowledge-body h3 {
    margin-top: 40px;

    font-size: 1.55rem;
  }

}


/* ============================================================
   KNOWLEDGE · CONTEXT RETURN · 2026-09-18
   ============================================================ */

.nx-knowledge-return {
  margin-top: 18px;
  margin-bottom: 6px;
}

.nx-knowledge-return a {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;

  text-decoration: none;
  opacity: 0.72;
}

.nx-knowledge-return a:hover,
.nx-knowledge-return a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nx-knowledge-return-bottom {
  margin-top: 28px;
  margin-bottom: 24px;
}


/* ============================================================
   KNOWLEDGE · ENTITY TOPIC · 2026-09-18
   ============================================================ */

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

.nx-knowledge-topic {
  min-width: 0;
  max-width: 860px;
}

.nx-knowledge-topic-label {
  margin-bottom: 10px;

  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.08em;
  text-transform: uppercase;

  opacity: 0.58;
}

.nx-knowledge-topic-list {
  display: grid;
}

.nx-knowledge-topic-item {
  padding: 22px 0 24px;

  border-top: 1px solid rgba(17, 24, 39, 0.14);
}

.nx-knowledge-topic-item:last-child {
  border-bottom: 1px solid rgba(17, 24, 39, 0.14);
}

.nx-knowledge-topic-type {
  margin-bottom: 7px;

  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.07em;
  text-transform: uppercase;

  opacity: 0.52;
}

.nx-knowledge-topic-item h2 {
  margin: 0;

  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.16;
}

.nx-knowledge-topic-item h2 a {
  text-decoration: none;
}

.nx-knowledge-topic-item h2 a:hover,
.nx-knowledge-topic-item h2 a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.nx-knowledge-topic-item p {
  max-width: 720px;
  margin: 10px 0 0;

  line-height: 1.65;
  opacity: 0.76;
}


/* ============================================================
   KNOWLEDGE · GRAPH RING 2 · 2026-09-18
   ============================================================ */

.nx-knowledge-context-section + .nx-knowledge-context-section {
  margin-top: 30px;
  padding-top: 26px;

  border-top: 1px solid rgba(17, 24, 39, 0.12);
}

.nx-knowledge-related-entities,
.nx-knowledge-related-articles {
  display: grid;
  gap: 2px;
}

.nx-knowledge-related-entity,
.nx-knowledge-related-article {
  display: grid;
  gap: 5px;

  padding: 12px 0;

  color: inherit;
  text-decoration: none;

  border-bottom: 1px solid rgba(17, 24, 39, 0.10);
}

.nx-knowledge-related-entity:first-child,
.nx-knowledge-related-article:first-child {
  padding-top: 4px;
}

.nx-knowledge-related-entity:last-child,
.nx-knowledge-related-article:last-child {
  border-bottom: 0;
}

.nx-knowledge-related-entity strong,
.nx-knowledge-related-article strong {
  line-height: 1.3;
}

.nx-knowledge-related-entity span {
  font-size: 0.88rem;
  line-height: 1.5;

  opacity: 0.68;
}

.nx-knowledge-related-article > span {
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: 0.07em;
  text-transform: uppercase;

  opacity: 0.48;
}

.nx-knowledge-related-entity:hover strong,
.nx-knowledge-related-entity:focus-visible strong,
.nx-knowledge-related-article:hover strong,
.nx-knowledge-related-article:focus-visible strong {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* ============================================================
   KNOWLEDGE · MEDIA + CONTEXT RAIL · 2026-09-21
   ============================================================ */

.nx-knowledge-stage:not(.nx-knowledge-stage-topic) {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(370px, 430px);

  gap: 56px;
}


.nx-knowledge-article {
  max-width: 760px;
}


.nx-knowledge-body {
  max-width: 760px;
}


.nx-knowledge-context {
  padding-top: 0;
  border-top: 0;
}


.nx-knowledge-single-media {
  margin:
    0
    0
    42px;

  overflow: hidden;
}


.nx-knowledge-single-media img,
.nx-knowledge-single-media video {
  display: block;

  width: 100%;
  height: auto;

  border:
    1px solid #d2d4ce;

  border-radius:
    20px;

  background:
    #111714;

  box-shadow:
    0 18px 42px rgba(22,25,23,.10);

  object-fit: contain;
}


.nx-knowledge-single-media figcaption {
  margin-top: 14px;

  padding-top: 12px;

  border-top:
    1px solid #cfd2cb;

  color: #666c67;

  font-size: .82rem;

  line-height: 1.55;
}


/*
 * Kontext beginnt nach dem Medium wieder mit seiner
 * bisherigen visuellen Trennung.
 */

.nx-knowledge-single-media
+ .nx-knowledge-context-section {
  margin-top: 0;
  padding-top: 24px;

  border-top:
    1px solid rgba(17,24,39,.12);
}


@media (max-width: 980px) {

  .nx-knowledge-stage:not(.nx-knowledge-stage-topic) {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .nx-knowledge-article,
  .nx-knowledge-body {
    max-width: 840px;
  }


  .nx-knowledge-context {
    width: min(100%, 680px);
  }

}


@media (max-width: 680px) {

  .nx-knowledge-context {
    width: 100%;
  }


  .nx-knowledge-single-media {
    margin-bottom: 34px;
  }

}

/* ============================================================
   KNOWLEDGE · MEDIA LIGHTBOX · 2026-09-21
   ============================================================ */

.nx-knowledge-media-open {
  appearance: none;

  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 20px;

  background: transparent;

  cursor: zoom-in;
}


.nx-knowledge-media-open:focus-visible {
  outline:
    3px solid rgba(184,151,69,.38);

  outline-offset: 4px;
}


.nx-knowledge-media-dialog {
  width:
    min(
      1500px,
      calc(100vw - 56px)
    );

  max-width: 1500px;

  max-height:
    calc(100dvh - 56px);

  margin: auto;
  padding: 0;

  overflow: hidden;

  border: 0;
  border-radius: 24px;

  background: #111714;

  box-shadow:
    0 34px 100px rgba(0,0,0,.38);
}


.nx-knowledge-media-dialog::backdrop {
  background:
    rgba(12,15,13,.76);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}


.nx-knowledge-media-dialog-shell {
  position: relative;

  display: grid;

  place-items: center;

  width: 100%;

  max-height:
    calc(100dvh - 56px);

  padding: 28px;

  overflow: auto;
}


.nx-knowledge-media-dialog img {
  display: block;

  max-width: 100%;

  max-height:
    calc(100dvh - 112px);

  width: auto;
  height: auto;

  object-fit: contain;
}


.nx-knowledge-media-dialog-close {
  appearance: none;

  position: absolute;

  z-index: 2;

  top: 14px;
  right: 14px;

  display: grid;

  place-items: center;

  width: 42px;
  height: 42px;

  padding: 0;

  border:
    1px solid rgba(255,255,255,.24);

  border-radius: 999px;

  background:
    rgba(17,23,20,.82);

  color: #fff;

  font: inherit;

  font-size: 1.5rem;
  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(10px);
}


.nx-knowledge-media-dialog-close:hover,
.nx-knowledge-media-dialog-close:focus-visible {
  background:
    rgba(35,43,39,.96);

  outline: none;
}


@media (max-width: 680px) {

  .nx-knowledge-media-dialog {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100dvh - 20px);

    border-radius: 18px;
  }


  .nx-knowledge-media-dialog-shell {
    max-height:
      calc(100dvh - 20px);

    padding: 14px;
  }


  .nx-knowledge-media-dialog img {
    max-height:
      calc(100dvh - 48px);
  }

}


/* ============================================================
   KNOWLEDGE · INDEX SORT + A-Z · 2026-09-21
   ============================================================ */

.nx-knowledge-index-tools {
  display: grid;

  gap: 20px;

  margin:
    22px
    0
    34px;

  padding:
    18px
    0
    22px;

  border-top:
    1px solid rgba(17,24,39,.10);

  border-bottom:
    1px solid rgba(17,24,39,.10);
}


.nx-knowledge-sort {
  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: wrap;
}


.nx-knowledge-sort-label {
  color: #767c77;

  font-size: .76rem;

  font-weight: 700;

  letter-spacing: .10em;

  text-transform: uppercase;
}


.nx-knowledge-sort-options {
  display: flex;

  align-items: center;

  gap: 6px;

  flex-wrap: wrap;
}


.nx-knowledge-sort-options button,
.nx-knowledge-alphabet button {
  appearance: none;

  border: 0;

  font: inherit;

  cursor: pointer;

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease;
}


.nx-knowledge-sort-options button {
  padding:
    7px
    11px;

  border-radius: 999px;

  background: transparent;

  color: #6e746f;

  font-size: .86rem;

  font-weight: 650;
}


.nx-knowledge-sort-options button:hover {
  color: #161b18;

  background:
    rgba(17,24,39,.045);
}


.nx-knowledge-sort-options button.is-active {
  color: #171c19;

  background:
    rgba(184,151,69,.14);
}


.nx-knowledge-alphabet {
  display: flex;

  align-items: center;

  gap: 3px;

  flex-wrap: wrap;
}


.nx-knowledge-alphabet button {
  min-width: 30px;
  height: 30px;

  padding:
    0
    7px;

  border-radius: 8px;

  background: transparent;

  color: #777d78;

  font-size: .78rem;

  font-weight: 650;
}


.nx-knowledge-alphabet button:first-child {
  width: auto;

  padding:
    0
    11px;

  margin-right: 7px;
}


.nx-knowledge-alphabet button:hover:not(:disabled) {
  color: #171c19;

  background:
    rgba(17,24,39,.05);
}


.nx-knowledge-alphabet button.is-active {
  color: #171c19;

  background:
    rgba(184,151,69,.14);
}


.nx-knowledge-alphabet button:disabled {
  opacity: .24;

  cursor: default;
}


.nx-knowledge-sort-options button:focus-visible,
.nx-knowledge-alphabet button:focus-visible {
  outline:
    2px solid rgba(184,151,69,.50);

  outline-offset: 2px;
}


.nx-knowledge-topic-item[hidden] {
  display: none !important;
}


@media (max-width: 680px) {

  .nx-knowledge-index-tools {
    gap: 16px;

    margin-top: 18px;
  }


  .nx-knowledge-sort {
    display: grid;

    gap: 9px;
  }


  .nx-knowledge-alphabet {
    gap: 2px;
  }


  .nx-knowledge-alphabet button {
    min-width: 28px;

    padding:
      0
      6px;
  }

}

/* ============================================================
   KNOWLEDGE · INDEX CONTROLS REFINE · 2026-09-21
   ============================================================ */

.nx-knowledge-sort-options {
  gap: 5px;
}

.nx-knowledge-sort-divider {
  width: 1px;
  height: 22px;

  margin:
    0
    7px;

  background:
    rgba(17,24,39,.12);
}

.nx-knowledge-sort-options
.nx-knowledge-all-pill {
  padding:
    7px
    13px;
}

.nx-knowledge-sort-options
.nx-knowledge-all-pill.is-active {
  color: #171c19;

  background:
    rgba(184,151,69,.14);
}

.nx-knowledge-alphabet {
  padding-left: 0;
}

.nx-knowledge-alphabet button:first-child {
  width: auto;

  min-width: 30px;

  padding:
    0
    7px;

  margin-right: 0;
}

.nx-knowledge-index-tools {
  gap: 15px;

  padding-bottom: 19px;
}

@media (max-width: 680px) {

  .nx-knowledge-sort-divider {
    margin:
      0
      3px;
  }

}

/* ============================================================
   KNOWLEDGE · LETTER POPOVER · 2026-09-21
   ============================================================ */

.nx-knowledge-index-tools {
  position: relative;

  gap: 0;

  padding-bottom: 18px;
}


.nx-knowledge-letter-trigger {
  appearance: none;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding:
    7px
    13px;

  border: 0;

  border-radius: 999px;

  background:
    rgba(17,24,39,.045);

  color: #535a55;

  font: inherit;

  font-size: .86rem;

  font-weight: 650;

  cursor: pointer;
}


.nx-knowledge-letter-trigger:hover,
.nx-knowledge-letter-trigger[aria-expanded="true"] {
  color: #171c19;

  background:
    rgba(184,151,69,.14);
}


.nx-knowledge-letter-trigger-icon {
  font-size: .72rem;

  opacity: .62;

  transition:
    transform .16s ease;
}


.nx-knowledge-letter-trigger[aria-expanded="true"]
.nx-knowledge-letter-trigger-icon {
  transform:
    rotate(180deg);
}


/*
 * Das Alphabet lebt nicht mehr im normalen Seitenfluss.
 */

.nx-knowledge-alphabet {
  display: none;

  position: absolute;

  z-index: 40;

  top: 54px;
  left: 112px;

  grid-template-columns:
    repeat(7, 34px);

  gap: 5px;

  width: max-content;

  padding: 14px;

  border:
    1px solid rgba(17,24,39,.10);

  border-radius: 16px;

  background:
    rgba(250,249,245,.98);

  box-shadow:
    0 20px 55px rgba(22,25,23,.13);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}


.nx-knowledge-alphabet.is-open {
  display: grid;
}


.nx-knowledge-alphabet button {
  min-width: 34px;
  width: 34px;
  height: 34px;

  padding: 0;

  border-radius: 8px;
}


.nx-knowledge-alphabet
.nx-knowledge-letter-all {
  grid-column:
    span 2;

  width: auto;

  padding:
    0
    10px;
}


.nx-knowledge-alphabet button.is-active {
  background:
    rgba(184,151,69,.16);
}


.nx-knowledge-alphabet button:disabled {
  opacity: .20;
}


/*
 * Die alte zweite Navigationszeile soll im Normalzustand
 * keinerlei Höhe mehr verbrauchen.
 */

.nx-knowledge-sort {
  min-height: 36px;
}


@media (max-width: 680px) {

  .nx-knowledge-alphabet {
    top: 94px;
    left: 0;

    grid-template-columns:
      repeat(6, 34px);

    max-width:
      calc(100vw - 44px);
  }

}

/* ============================================================
   KNOWLEDGE · INDEX SEARCH · 2026-09-21
   ============================================================ */

.nx-knowledge-sort {
  width: 100%;
}


.nx-knowledge-search {
  margin-left: auto;
}


.nx-knowledge-search-label {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0,0,0,0);

  white-space: nowrap;

  border: 0;
}


.nx-knowledge-search-field {
  position: relative;

  width: 260px;
}


.nx-knowledge-search-field input {
  appearance: none;

  width: 100%;
  height: 38px;

  padding:
    0
    38px
    0
    37px;

  border:
    1px solid rgba(17,24,39,.10);

  border-radius: 999px;

  background:
    rgba(255,255,255,.34);

  color: #171c19;

  font: inherit;

  font-size: .86rem;

  outline: none;

  transition:
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease;
}


.nx-knowledge-search-field input::placeholder {
  color: #8b908c;
}


.nx-knowledge-search-field input:hover {
  background:
    rgba(255,255,255,.52);
}


.nx-knowledge-search-field input:focus {
  border-color:
    rgba(184,151,69,.44);

  background:
    rgba(255,255,255,.72);

  box-shadow:
    0 0 0 3px
    rgba(184,151,69,.08);
}


.nx-knowledge-search-icon {
  position: absolute;

  z-index: 1;

  top: 50%;
  left: 13px;

  width: 15px;
  height: 15px;

  transform:
    translateY(-50%);

  fill: none;

  stroke: #767d77;

  stroke-width: 1.7;

  pointer-events: none;
}


.nx-knowledge-search-clear {
  appearance: none;

  position: absolute;

  z-index: 2;

  top: 50%;
  right: 8px;

  display: grid;

  place-items: center;

  width: 25px;
  height: 25px;

  padding: 0;

  transform:
    translateY(-50%);

  border: 0;
  border-radius: 999px;

  background: transparent;

  color: #707671;

  font: inherit;

  font-size: 1.05rem;
  line-height: 1;

  cursor: pointer;
}


.nx-knowledge-search-clear:hover {
  background:
    rgba(17,24,39,.06);

  color: #171c19;
}


.nx-knowledge-search-clear[hidden] {
  display: none;
}


.nx-knowledge-topic-item.is-search-hidden {
  display: none !important;
}


.nx-knowledge-no-results {
  margin:
    30px
    0
    0;

  padding:
    24px
    0;

  border-top:
    1px solid rgba(17,24,39,.10);

  color: #747a75;

  font-size: .94rem;
}


.nx-knowledge-no-results[hidden] {
  display: none;
}


/*
 * Desktop:
 * Sortierung links, Suche rechts.
 */

@media (min-width: 821px) {

  .nx-knowledge-sort {
    flex-wrap: nowrap;
  }

}


/*
 * Kleinere Breiten:
 * Suchfeld bekommt eine eigene kompakte Zeile.
 */

@media (max-width: 820px) {

  .nx-knowledge-sort {
    align-items: flex-start;
  }


  .nx-knowledge-search {
    width: 100%;

    margin:
      10px
      0
      0;
  }


  .nx-knowledge-search-field {
    width:
      min(
        100%,
        420px
      );
  }

}