/* =============================================================
   n'cloud Content Engine, Blog im Magazinlayout

   Eigener Charakter, bewusst abgesetzt von der News-Seite:
   kompakter dunkler Auftakt, danach durchgehend hell, Bilder in
   jeder Karte, Rubriken als eigenes Navigationsband, keine
   Monospace und keine Kennzahlen.
   Gescopet unter .nce-mag, gehärtet gegen Theme-Vorgaben.
   ============================================================= */

.nce-mag {
  --mg-night: #070C09;
  --mg-pine: #0F1B14;
  --mg-brand: #76B82A;
  --mg-glow: #8FD13F;
  --mg-deep: #3E7113;
  --mg-dtext: #E7EFE2;
  --mg-dsec: #9DB0A2;
  --mg-ink: #12160F;
  --mg-sec: #68735F;
  --mg-mut: #8B9482;
  --mg-line: #E8EBE2;
  --mg-line-2: #DDE2D4;
  --mg-soft: #F5F7F2;
  --mg-f: "Inter", "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif;

  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--mg-f) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--mg-ink) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Defensiver Reset */
.nce-mag *,
.nce-mag *::before,
.nce-mag *::after {
  box-sizing: border-box;
}

.nce-mag h1,
.nce-mag h2,
.nce-mag h3,
.nce-mag p,
.nce-mag span,
.nce-mag div,
.nce-mag nav,
.nce-mag article,
.nce-mag aside,
.nce-mag header,
.nce-mag b {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit !important;
  list-style: none;
}

.nce-mag h1,
.nce-mag h2,
.nce-mag h3 {
  font-weight: 670 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.14 !important;
  text-transform: none !important;
  text-wrap: balance;
}

.nce-mag a {
  color: inherit !important;
  text-decoration: none !important;
  background: none !important;
}

.nce-mag a:focus-visible {
  outline: 2px solid var(--mg-brand) !important;
  outline-offset: 3px;
  border-radius: 5px;
}

.nce-mag .nce-mag__wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.nce-mag .nce-mag__img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  margin: 0 !important;
  transform: scale(1.001);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

/* -------------------------------------------------------------
   Auftakt, das einzige dunkle Band
   ------------------------------------------------------------- */

.nce-mag__masthead {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mg-night) !important;
  color: var(--mg-dtext) !important;
  padding: 96px 0 !important;
}

.nce-mag__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(760px 420px at 14% -20%, rgba(118, 184, 42, .16), transparent 62%),
    radial-gradient(520px 340px at 92% 10%, rgba(62, 113, 19, .18), transparent 70%);
}

.nce-mag__eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  font-size: 12.5px !important;
  font-weight: 620 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: var(--mg-glow) !important;
}

.nce-mag__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--mg-brand);
  flex: none;
}

.nce-mag__masthead h1 {
  font-size: clamp(36px, 4.6vw, 60px) !important;
  margin-top: 22px !important;
  color: #fff !important;
  max-width: 22ch;
}

.nce-mag__intro {
  margin-top: 20px !important;
  font-size: 18px !important;
  line-height: 1.62 !important;
  color: var(--mg-dsec) !important;
  max-width: 58ch;
}

/* -------------------------------------------------------------
   Rubriken, eigenes Band unter dem Auftakt
   ------------------------------------------------------------- */

.nce-mag__rubriken {
  position: sticky;
  top: 0;
  z-index: 40;
  display: block !important;
  background: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mg-line) !important;
}

.nce-mag__rubriken-in {
  display: flex !important;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0 4px;
}

@media (max-width: 1040px) {
  .nce-mag__rubriken-in {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
}

.nce-mag__rubriken-in::-webkit-scrollbar {
  display: none;
}

.nce-mag__rubrik {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 20px 16px !important;
  font-size: 14.5px !important;
  font-weight: 520 !important;
  line-height: 1 !important;
  color: var(--mg-sec) !important;
  white-space: nowrap;
  border-bottom: 2px solid transparent !important;
  transition: color .18s ease, border-color .18s ease;
}

.nce-mag__rubrik span {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--mg-mut) !important;
  background: var(--mg-soft) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
}

.nce-mag__rubrik:hover {
  color: var(--mg-ink) !important;
}

.nce-mag__rubrik.is-on {
  color: var(--mg-ink) !important;
  font-weight: 640 !important;
  border-bottom-color: var(--mg-brand) !important;
}

.nce-mag__rubrik.is-on span {
  background: rgba(118, 184, 42, .16) !important;
  color: var(--mg-deep) !important;
}

/* -------------------------------------------------------------
   Heller Hauptteil
   ------------------------------------------------------------- */

.nce-mag__body {
  display: block;
  background: #fff !important;
  padding: 44px 0 92px !important;
}

.nce-mag__crumb {
  padding-bottom: 34px !important;
  margin-bottom: 40px !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

.nce-mag__crumb-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 620 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--mg-mut) !important;
  margin-bottom: 10px !important;
}

.nce-mag__crumb h2 {
  font-size: clamp(26px, 3vw, 36px) !important;
  color: var(--mg-ink) !important;
}

.nce-mag__crumb p {
  margin-top: 12px !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: var(--mg-sec) !important;
  max-width: 62ch;
}

/* Aufmacher, bewusst ohne Kartenrahmen, damit er editorial wirkt
   und nicht wie ein Kasten mit einem Bild darin. */
.nce-mag__feature {
  display: grid !important;
  grid-template-columns: 1.24fr 1fr;
  gap: 46px;
  align-items: center;
}

/* Das Seitenverhältnis entspricht exakt dem erzeugten Beitragsbild,
   damit nichts vom Motiv beschnitten wird. */
.nce-mag__feature-media {
  display: block !important;
  position: relative;
  overflow: hidden;
  align-self: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  border-radius: 18px !important;
  background: var(--mg-pine) !important;
}

.nce-mag__feature:hover .nce-mag__feature-media .nce-mag__img {
  transform: scale(1.045);
}

.nce-mag__feature-body {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 0 !important;
}

.nce-mag__flag {
  display: inline-flex !important;
  align-items: center;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--mg-pine) !important;
  background: var(--mg-glow) !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
}

.nce-mag__cat {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 660 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: var(--mg-deep) !important;
}

.nce-mag__feature h2 {
  font-size: clamp(25px, 2.6vw, 36px) !important;
  color: var(--mg-ink) !important;
}

.nce-mag__feature h2 a:hover,
.nce-mag__card h3 a:hover {
  color: var(--mg-deep) !important;
}

.nce-mag__sum {
  font-size: 16px !important;
  line-height: 1.64 !important;
  color: var(--mg-sec) !important;
  max-width: 48ch;
}

.nce-mag__more {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  margin-top: 4px !important;
  font-size: 14.5px !important;
  font-weight: 620 !important;
  color: var(--mg-deep) !important;
}

.nce-mag__more::after {
  content: "\2192";
  transition: transform .22s ease;
}

.nce-mag__feature:hover .nce-mag__more::after {
  transform: translateX(5px);
}

/* Trennlinie mit Beschriftung */
.nce-mag__rule {
  display: flex !important;
  align-items: center;
  gap: 18px;
  margin: 62px 0 34px !important;
}

.nce-mag__rule span {
  flex: none;
  font-size: 11.5px !important;
  font-weight: 660 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--mg-mut) !important;
}

.nce-mag__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mg-line);
}

/* Raster */
.nce-mag__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 30px !important;
}

.nce-mag__card {
  display: flex !important;
  flex-direction: column;
  min-width: 0;
}

.nce-mag__card-media {
  display: block !important;
  position: relative;
  aspect-ratio: 1200 / 630;
  overflow: hidden;
  border-radius: 14px !important;
  background: var(--mg-pine) !important;
  margin-bottom: 18px !important;
}

.nce-mag__card:hover .nce-mag__card-media .nce-mag__img {
  transform: scale(1.05);
}

.nce-mag__card-body {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.nce-mag__card h3 {
  font-size: 19px !important;
  line-height: 1.28 !important;
  color: var(--mg-ink) !important;
}

.nce-mag__card .nce-mag__sum {
  font-size: 14.5px !important;
  line-height: 1.62 !important;
  flex: 1;
}

/* Autorenzeile */
.nce-mag__by {
  display: flex !important;
  align-items: center;
  gap: 11px;
  margin-top: 4px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--mg-line) !important;
  width: 100%;
}

.nce-mag__feature .nce-mag__by {
  border-top: 0 !important;
  padding-top: 6px !important;
}

.nce-mag__avatar {
  width: 32px !important;
  height: 32px !important;
  flex: none !important;
  border-radius: 50% !important;
  background: var(--mg-pine) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 11.5px !important;
  font-weight: 620 !important;
  letter-spacing: .02em;
}

.nce-mag__by-text b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 620 !important;
  line-height: 1.3 !important;
  color: var(--mg-ink) !important;
}

.nce-mag__by-text span {
  display: block !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  color: var(--mg-mut) !important;
}

/* Blättern und Leerzustand */
.nce-mag__pager {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 62px !important;
  padding-top: 34px !important;
  border-top: 1px solid var(--mg-line) !important;
}

.nce-mag__pager-btn {
  display: inline-flex !important;
  align-items: center;
  font-size: 14.5px !important;
  font-weight: 560 !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  border: 1px solid var(--mg-line-2) !important;
  background: #fff !important;
  color: var(--mg-ink) !important;
  transition: border-color .2s ease, color .2s ease;
}

.nce-mag__pager-btn:hover {
  border-color: var(--mg-brand) !important;
  color: var(--mg-deep) !important;
}

.nce-mag__pager-count {
  font-size: 12.5px !important;
  color: var(--mg-mut) !important;
}

.nce-mag__empty {
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--mg-sec) !important;
  padding: 44px 0 !important;
  max-width: 54ch;
}

/* -------------------------------------------------------------
   Weiterlesen unter einem Beitrag
   ------------------------------------------------------------- */

.nce-mag--related {
  padding: 56px 0 0 !important;
}

/* Innerhalb eines Beitrags braucht der Block dieselben Seitenabstände wie
   der Artikel, sonst klebt er auf schmalen Fenstern am Rand. */
.nce-mag--related .nce-mag__wrap {
  max-width: 1180px;
  padding: 0 28px !important;
}

@media (max-width: 700px) {
  .nce-mag--related .nce-mag__wrap {
    padding: 0 22px !important;
  }
}

.nce-mag--related .nce-mag__rule {
  margin-top: 0 !important;
  padding-top: 34px !important;
  border-top: 1px solid var(--mg-line) !important;
}

/* -------------------------------------------------------------
   Kleinere Fenster
   ------------------------------------------------------------- */

@media (max-width: 1040px) {
  .nce-mag__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nce-mag__feature {
    grid-template-columns: 1fr;
  }

  .nce-mag__feature-media {
    min-height: 0;
    aspect-ratio: 1200 / 630;
  }

  .nce-mag__feature {
    gap: 26px;
  }
}

@media (max-width: 700px) {
  .nce-mag .nce-mag__wrap {
    padding: 0 22px;
  }

  .nce-mag__masthead {
    padding: 68px 0 56px !important;
  }

  .nce-mag__masthead h1 {
    font-size: clamp(30px, 8.2vw, 40px) !important;
    max-width: none;
  }

  .nce-mag__intro {
    font-size: 16.5px !important;
  }

  .nce-mag__rubrik {
    padding: 16px 13px !important;
    font-size: 13.5px !important;
  }

  .nce-mag__body {
    padding: 40px 0 72px !important;
  }

  .nce-mag__grid {
    grid-template-columns: 1fr;
    gap: 34px !important;
  }

  .nce-mag__rule {
    margin: 46px 0 28px !important;
  }

  .nce-mag__pager {
    flex-wrap: wrap;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nce-mag *,
  .nce-mag *::after {
    transition: none !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------
   Abschnittskoepfe, Aufmacher, Karten
   Werte uebernommen aus der bestehenden Referenzseite, damit die
   Uebersicht dieselbe Ruhe und dieselben Abstaende hat.
   ------------------------------------------------------------- */

.nce-mag__eyebrow--light {
  color: var(--mg-deep) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  gap: 8px;
}

.nce-mag__eyebrow--light::before {
  width: 22px;
  height: 1.5px;
}

.nce-mag__sechead {
  margin-bottom: 30px !important;
  max-width: 68ch;
}

.nce-mag__sechead h2 {
  font-size: clamp(26px, 2.9vw, 36px) !important;
  color: var(--mg-ink) !important;
  margin-top: 14px !important;
}

.nce-mag__sechead p {
  margin-top: 14px !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  color: var(--mg-sec) !important;
}

.nce-mag__spotlight {
  display: block !important;
  margin-bottom: 60px !important;
}

/* -------------------------------------------------------------
   Aufmacher
   ------------------------------------------------------------- */

.nce-mag__featured {
  display: grid !important;
  grid-template-columns: 1.15fr 1fr;
  border: 1px solid var(--mg-line) !important;
  border-radius: 22px !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: 0 24px 60px rgba(18, 30, 10, .07);
}

/* Die Bildflaeche fuellt die ganze Hoehe der Karte. Der Bildausschnitt wird
   dabei leicht nach links verschoben, damit die Marke am linken Bildrand
   sichtbar bleibt und stattdessen vom Motiv rechts etwas wegfaellt. */
.nce-mag__fvis {
  display: block !important;
  position: relative;
  align-self: stretch;
  min-height: 340px;
  background: var(--mg-pine) !important;
  overflow: hidden;
}

.nce-mag__fvis .nce-mag__img,
.nce-mag__fvis img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 28% center !important;
}

.nce-mag__fbody {
  display: flex !important;
  flex-direction: column;
  padding: 42px 46px !important;
}

.nce-mag__featured h3 {
  font-size: clamp(22px, 2.2vw, 30px) !important;
  line-height: 1.16 !important;
  color: var(--mg-ink) !important;
  margin-bottom: 14px !important;
}

.nce-mag__featured h3 a:hover,
.nce-mag__card h3 a:hover {
  color: var(--mg-deep) !important;
}

.nce-mag__fbody > p {
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  color: var(--mg-sec) !important;
}

.nce-mag__featured .nce-mag__byline {
  margin-top: 22px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--mg-line) !important;
}

.nce-mag__featured .nce-mag__avatar {
  width: 46px !important;
  height: 46px !important;
  font-size: 15px !important;
}

.nce-mag__readlink {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mg-deep) !important;
}

.nce-mag__readlink::after {
  content: "\2192";
  transition: transform .2s ease;
}

.nce-mag__featured:hover .nce-mag__readlink::after {
  transform: translateX(4px);
}

/* -------------------------------------------------------------
   Raster und Karten
   ------------------------------------------------------------- */

.nce-mag__all {
  display: block !important;
  padding-top: 0 !important;
}

.nce-mag__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px !important;
}

.nce-mag__card {
  border: 1px solid var(--mg-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  min-width: 0;
  transition: box-shadow .25s, transform .25s, border-color .25s;
}

.nce-mag__card:hover {
  box-shadow: 0 22px 48px rgba(18, 30, 10, .10);
  transform: translateY(-4px);
  border-color: var(--mg-line-2) !important;
}

.nce-mag__cvis {
  display: block !important;
  position: relative;
  height: 150px;
  background: var(--mg-soft) !important;
  border-bottom: 1px solid var(--mg-line) !important;
  overflow: hidden;
}

.nce-mag__cbody {
  display: flex !important;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px !important;
}

.nce-mag__card h3 {
  font-size: 17.5px !important;
  font-weight: 640 !important;
  line-height: 1.3 !important;
  color: var(--mg-ink) !important;
  margin: 12px 0 8px !important;
}

.nce-mag__cbody > p {
  font-size: 13.8px !important;
  line-height: 1.6 !important;
  color: var(--mg-sec) !important;
}

/* Kopfzeile mit Rubrik und Datum */
.nce-mag__fmeta {
  display: flex !important;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12.5px !important;
  color: var(--mg-mut) !important;
  margin-bottom: 16px !important;
}

/* In den Karten steht die Rubrik immer über dem Datum. Sonst bricht die
   Zeile je nach Länge des Rubriknamens um und die Karten wirken ungleich. */
.nce-mag__card .nce-mag__fmeta {
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

.nce-mag__cat {
  display: inline-flex !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: var(--mg-deep) !important;
  background: rgba(118, 184, 42, .12) !important;
  border-radius: 999px !important;
  padding: 5px 12px !important;
}

/* Leistungsbereiche */
.nce-mag__svcmap {
  margin-top: auto !important;
  padding-top: 26px !important;
}

.nce-mag__card .nce-mag__svcmap {
  padding-top: 20px !important;
}

.nce-mag__sml {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mg-mut) !important;
  margin-bottom: 10px !important;
}

.nce-mag__tags {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
}

.nce-mag__relevance-link {
  display: inline-flex !important;
  align-items: center;
  font-size: 12.5px !important;
  font-weight: 480 !important;
  color: #4A5443 !important;
  border: 1px solid var(--mg-line-2) !important;
  border-radius: 999px !important;
  padding: 6px 13px !important;
  background: #fff !important;
  transition: border-color .2s, color .2s;
}

.nce-mag__relevance-link::after {
  content: " \2192";
  color: var(--mg-brand);
  margin-left: 5px;
}

.nce-mag__relevance-link:hover {
  border-color: var(--mg-brand) !important;
  color: var(--mg-deep) !important;
}

.nce-mag__card .nce-mag__relevance-link {
  font-size: 11.5px !important;
  padding: 5px 11px !important;
}

/* Autorenzeile */
.nce-mag__byline {
  display: flex !important;
  align-items: center;
  gap: 11px;
  margin-top: 16px !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--mg-line) !important;
}

.nce-mag__avatar {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: rgba(118, 184, 42, .14) !important;
  border: 1px solid var(--mg-line-2) !important;
  color: var(--mg-deep) !important;
  font-size: 12px !important;
  font-weight: 640 !important;
  letter-spacing: .02em;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.nce-mag__avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
  margin: 0 !important;
  max-width: none !important;
}

.nce-mag__bwho b {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: var(--mg-ink) !important;
}

.nce-mag__bwho span {
  display: block !important;
  font-size: 12px !important;
  color: var(--mg-mut) !important;
  line-height: 1.4 !important;
}

/* -------------------------------------------------------------
   Rubriken als Filterreihe
   ------------------------------------------------------------- */

.nce-mag__rubriken {
  position: static;
  display: block !important;
  background: none !important;
  backdrop-filter: none;
  border-bottom: 0 !important;
  margin: 0 0 38px !important;
}

.nce-mag__rubriken-in {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 !important;
  max-width: none;
}

.nce-mag__rubrik {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  color: #4A5443 !important;
  border: 1px solid var(--mg-line-2) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  background: #fff !important;
  transition: border-color .2s, color .2s, background .2s;
}

.nce-mag__rubrik span {
  font-size: 11px !important;
  color: var(--mg-mut) !important;
  background: none !important;
  padding: 0 !important;
}

.nce-mag__rubrik:hover {
  border-color: var(--mg-brand) !important;
  color: var(--mg-deep) !important;
}

.nce-mag__rubrik.is-on {
  background: var(--mg-ink) !important;
  border-color: var(--mg-ink) !important;
  color: #fff !important;
}

.nce-mag__rubrik.is-on span {
  color: rgba(255, 255, 255, .65) !important;
}

/* -------------------------------------------------------------
   Rubrikkopf, Blaettern, Leerzustand
   ------------------------------------------------------------- */

.nce-mag__crumb {
  padding-bottom: 30px !important;
  margin-bottom: 38px !important;
  border-bottom: 1px solid var(--mg-line) !important;
}

.nce-mag__crumb-label {
  display: block !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mg-mut) !important;
  margin-bottom: 10px !important;
}

.nce-mag__crumb h2 {
  font-size: clamp(26px, 2.9vw, 36px) !important;
  color: var(--mg-ink) !important;
}

.nce-mag__crumb p {
  margin-top: 12px !important;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  color: var(--mg-sec) !important;
  max-width: 64ch;
}

.nce-mag__pager {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 48px !important;
  padding-top: 32px !important;
  border-top: 1px solid var(--mg-line) !important;
}

.nce-mag__pager-btn {
  display: inline-flex !important;
  align-items: center;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mg-line-2) !important;
  background: #fff !important;
  color: #4A5443 !important;
  transition: border-color .2s, color .2s;
}

.nce-mag__pager-btn:hover {
  border-color: var(--mg-brand) !important;
  color: var(--mg-deep) !important;
}

.nce-mag__pager-count {
  font-size: 12.5px !important;
  color: var(--mg-mut) !important;
}

.nce-mag__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0 !important;
  font-size: 15px !important;
  color: var(--mg-mut) !important;
}

/* -------------------------------------------------------------
   Kennzahlenflaeche im Aufmacher
   ------------------------------------------------------------- */

.nce-mag__stat {
  display: block !important;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 340px;
  background: #0B1310;
}

.nce-mag__stat-svg {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

.nce-mag__stat-text {
  position: relative;
  display: block !important;
  padding: 34px 34px !important;
}

.nce-mag__stat-label {
  display: block !important;
  font-size: 12.5px !important;
  font-weight: 560 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: #7E9276 !important;
  max-width: 24ch;
  line-height: 1.5 !important;
}

.nce-mag__stat-value {
  display: block !important;
  margin-top: 12px !important;
  font-size: clamp(42px, 4.6vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------
   Weiterlesen unter einem Beitrag
   ------------------------------------------------------------- */

.nce-mag__rule {
  display: flex !important;
  align-items: center;
  gap: 18px;
  margin: 0 0 26px !important;
  padding-top: 34px !important;
  border-top: 1px solid var(--mg-line) !important;
}

.nce-mag__rule span {
  flex: none;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--mg-mut) !important;
}

.nce-mag__spotlight .nce-mag__rule {
  border-top: 0 !important;
  padding-top: 0 !important;
}

/* -------------------------------------------------------------
   Kleinere Fenster
   ------------------------------------------------------------- */

@media (max-width: 1040px) {
  .nce-mag__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nce-mag__featured {
    grid-template-columns: 1fr;
  }

  .nce-mag__fvis,
  .nce-mag__stat {
    min-height: 260px;
  }

  .nce-mag__fbody {
    padding: 32px 30px !important;
  }
}

@media (max-width: 700px) {
  .nce-mag .nce-mag__wrap {
    padding: 0 22px;
  }

  .nce-mag__masthead {
    padding: 64px 0 !important;
  }

  .nce-mag__masthead h1 {
    font-size: clamp(30px, 8.2vw, 40px) !important;
    max-width: none;
  }

  .nce-mag__intro {
    font-size: 16.5px !important;
  }

  .nce-mag__body {
    padding: 40px 0 72px !important;
  }

  .nce-mag__grid {
    grid-template-columns: 1fr;
  }

  .nce-mag__spotlight {
    margin-bottom: 48px !important;
  }

  .nce-mag__pager {
    flex-wrap: wrap;
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nce-mag *,
  .nce-mag *::after {
    transition: none !important;
    transform: none !important;
  }
}

/* -------------------------------------------------------------
   Lagebild-Karte im Auftakt
   Werte uebernommen aus der bestehenden Referenzseite.
   ------------------------------------------------------------- */

.nce-mag__hgrid {
  display: grid !important;
  grid-template-columns: 1fr 440px;
  gap: 64px;
  align-items: center;
}

.nce-mag__hgrid.is-solo {
  grid-template-columns: 1fr;
}

.nce-mag__hgrid > * {
  min-width: 0;
}

/* Dunkle Glaskarte, passend zum Auftakt */
.nce-mag__lage {
  position: relative;
  background: linear-gradient(168deg, rgba(22, 44, 33, .78), rgba(9, 19, 15, .62)) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  border-radius: 20px !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(14px);
  overflow: hidden !important;
  color: var(--mg-dtext, #E7EFE2) !important;
}

.nce-mag__lage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(340px 200px at 88% -12%, rgba(118, 184, 42, .20), transparent 70%);
}

.nce-mag__lage > * {
  position: relative;
}

.nce-mag__lhead {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 17px 22px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.nce-mag__lhead b {
  font-size: 14px !important;
  font-weight: 620 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}

.nce-mag__live {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #A3E051 !important;
  background: rgba(118, 184, 42, .14) !important;
  border: 1px solid rgba(163, 224, 81, .28) !important;
  border-radius: 999px !important;
  padding: 5px 11px !important;
  white-space: nowrap;
}

.nce-mag__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #A3E051;
  flex: none;
  animation: nceLagePulse 1.9s infinite;
}

@keyframes nceLagePulse {
  0%   { box-shadow: 0 0 0 0 rgba(163, 224, 81, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(163, 224, 81, 0); }
  100% { box-shadow: 0 0 0 0 rgba(163, 224, 81, 0); }
}

.nce-mag__lstats {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

.nce-mag__lstat {
  padding: 22px 22px 20px !important;
}

.nce-mag__lstat + .nce-mag__lstat {
  border-left: 1px solid rgba(255, 255, 255, .08) !important;
}

.nce-mag__lstat b {
  display: block !important;
  font-size: 32px !important;
  font-weight: 680 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  color: #fff !important;
  font-variant-numeric: tabular-nums;
}

.nce-mag__lstat span {
  display: block !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #8FA487 !important;
  margin-top: 8px !important;
}

.nce-mag__lstat--up b {
  color: #F0906F !important;
}

.nce-mag__lstat--down b {
  color: #A3E051 !important;
}

.nce-mag__lfeed {
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  padding: 16px 22px 18px !important;
}

.nce-mag__lrow {
  display: flex !important;
  gap: 10px;
  align-items: baseline;
  font-size: 12.5px !important;
}

.nce-mag__lrow > span {
  flex: none;
  width: 16px;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #5F7359 !important;
  font-variant-numeric: tabular-nums;
}

.nce-mag__lrow p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: #8FA487 !important;
}

.nce-mag__lrow p b {
  color: #E7EFE2 !important;
  font-weight: 600 !important;
}

.nce-mag__lfoot {
  padding: 12px 22px 14px !important;
  background: rgba(0, 0, 0, .22) !important;
  border-top: 1px solid rgba(255, 255, 255, .07) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  color: #6C8064 !important;
}

@media (max-width: 1040px) {
  .nce-mag__hgrid {
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }

  .nce-mag__lage {
    max-width: 460px;
  }
}
