/* =========================================================
   Nordlichter Messe – TYPO3 Bootstrap Package / Bootstrap 5.3
   Nach dem Bootstrap-Package-Theme über page.includeCSS laden.
   Farbwerte zentral hier ändern; Komponenten nutzen Bootstrap-Variablen.
   ========================================================= */

:root,
[data-bs-theme="light"] {
  /* Markenfarben */
  --nl-purple: #7816ad;
  --nl-purple-dark: #3d0b61;
  --nl-aubergine: #281a2d;
  --nl-green: #79a742;
  --nl-lime: #d9ff72;
  --nl-cream: #f7f3ed;
  --nl-paper: #fffdf9;
  --nl-ink: #28232b;
  --nl-muted: #6f6872;
  --nl-line: #e4ddd6;

  /* RGB-Werte für Bootstrap */
  --nl-purple-rgb: 120, 22, 173;
  --nl-purple-dark-rgb: 61, 11, 97;
  --nl-aubergine-rgb: 40, 26, 45;
  --nl-green-rgb: 121, 167, 66;
  --nl-cream-rgb: 247, 243, 237;
  --nl-ink-rgb: 40, 35, 43;
  --nl-muted-rgb: 111, 104, 114;
  --nl-paper-rgb: 255, 253, 249;

  /* Bootstrap-Farben */
  --bs-primary: var(--nl-purple);
  --bs-primary-rgb: var(--nl-purple-rgb);

  --bs-secondary: var(--nl-green);
  --bs-secondary-rgb: var(--nl-green-rgb);

  --bs-tertiary: var(--nl-cream);
  --bs-tertiary-rgb: var(--nl-cream-rgb);

  --bs-quaternary: var(--nl-aubergine);
  --bs-quaternary-rgb: var(--nl-aubergine-rgb);

  --bs-body-color: var(--nl-ink);
  --bs-body-color-rgb: var(--nl-ink-rgb);

  --bs-body-bg: var(--nl-paper);
  --bs-body-bg-rgb: var(--nl-paper-rgb);

  --bs-secondary-color: var(--nl-muted);
  --bs-secondary-color-rgb: var(--nl-muted-rgb);

  --bs-tertiary-bg: var(--nl-cream);

  --bs-border-color: var(--nl-line);

  /* Abgestimmte Bootstrap-Farbrollen und Kontrastfarben */
  --bs-primary-text-emphasis: var(--nl-purple-dark);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 10%, var(--bs-body-bg));
  --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 25%, var(--bs-body-bg));
  --bs-secondary-text-emphasis: color-mix(in srgb, var(--bs-secondary) 45%, var(--bs-body-color));
  --bs-secondary-bg-subtle: color-mix(in srgb, var(--bs-secondary) 12%, var(--bs-body-bg));
  --bs-secondary-border-subtle: color-mix(in srgb, var(--bs-secondary) 30%, var(--bs-body-bg));
  --bs-secondary-bg: var(--nl-cream);
  --bs-secondary-bg-rgb: var(--nl-cream-rgb);
  --bs-tertiary-bg-rgb: var(--bs-secondary-bg-rgb);
  --bs-tertiary-color: var(--bs-secondary-color);
  --bs-tertiary-color-rgb: var(--bs-secondary-color-rgb);
  --bs-light: var(--nl-cream);
  --bs-light-rgb: var(--bs-secondary-bg-rgb);
  --bs-dark: var(--nl-ink);
  --bs-dark-rgb: var(--nl-ink-rgb);
  --bs-emphasis-color: var(--nl-ink);
  --bs-emphasis-color-rgb: var(--nl-ink-rgb);
  --bs-border-color-translucent: rgba(var(--nl-ink-rgb), 0.15);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
  --nl-on-primary: var(--bs-white);
  --nl-on-primary-accent: var(--nl-lime);
  --nl-on-secondary: var(--bs-body-color);

  /* Bootstrap Package verwendet dunkle Statusfarben, auch für Info/Warnung.
     Bei Änderungen dieser Grundfarben die Kontrastwerte hier mit anpassen. */
  --nl-on-success: var(--bs-white);
  --nl-on-danger: var(--bs-white);
  --nl-on-warning: var(--bs-white);
  --nl-on-info: var(--bs-white);
  --nl-on-light: var(--bs-body-color);
  --nl-on-dark: var(--bs-white);
  --bs-body-font-family-monospace: var(--bs-font-monospace);
  --bs-success-text-emphasis: color-mix(in srgb, var(--bs-success) 45%, var(--bs-body-color));
  --bs-success-bg-subtle: color-mix(in srgb, var(--bs-success) 12%, var(--bs-body-bg));
  --bs-success-border-subtle: color-mix(in srgb, var(--bs-success) 30%, var(--bs-body-bg));
  --bs-danger-text-emphasis: color-mix(in srgb, var(--bs-danger) 45%, var(--bs-body-color));
  --bs-danger-bg-subtle: color-mix(in srgb, var(--bs-danger) 12%, var(--bs-body-bg));
  --bs-danger-border-subtle: color-mix(in srgb, var(--bs-danger) 30%, var(--bs-body-bg));
  --bs-warning-text-emphasis: color-mix(in srgb, var(--bs-warning) 45%, var(--bs-body-color));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--bs-warning) 12%, var(--bs-body-bg));
  --bs-warning-border-subtle: color-mix(in srgb, var(--bs-warning) 30%, var(--bs-body-bg));
  --bs-info-text-emphasis: color-mix(in srgb, var(--bs-info) 45%, var(--bs-body-color));
  --bs-info-bg-subtle: color-mix(in srgb, var(--bs-info) 12%, var(--bs-body-bg));
  --bs-info-border-subtle: color-mix(in srgb, var(--bs-info) 30%, var(--bs-body-bg));
  --bs-light-text-emphasis: color-mix(in srgb, var(--bs-light) 45%, var(--bs-body-color));
  --bs-light-bg-subtle: color-mix(in srgb, var(--bs-light) 12%, var(--bs-body-bg));
  --bs-light-border-subtle: color-mix(in srgb, var(--bs-light) 30%, var(--bs-body-bg));
  --bs-dark-text-emphasis: color-mix(in srgb, var(--bs-dark) 45%, var(--bs-body-color));
  --bs-dark-bg-subtle: color-mix(in srgb, var(--bs-dark) 12%, var(--bs-body-bg));
  --bs-dark-border-subtle: color-mix(in srgb, var(--bs-dark) 30%, var(--bs-body-bg));

  /* Links */
  --bs-link-color: var(--nl-purple);
  --bs-link-color-rgb: var(--nl-purple-rgb);
  --bs-link-hover-color: var(--nl-purple-dark);
  --bs-link-hover-color-rgb: var(--nl-purple-dark-rgb);

  /* Typografie */
  --bs-body-font-family:
    "Avenir Next",
    Avenir,
    "Century Gothic",
    "Trebuchet MS",
    sans-serif;

  --nl-heading-font:
    Georgia,
    "Times New Roman",
    serif;

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

  /* Gemeinsame Schriftgrößen für alle Seiten und Bootstrap-Titelklassen. */
  --nl-h1-size: clamp(3.3rem, 5.7vw, 6rem);
  --nl-h2-size: clamp(2.5rem, 4.6vw, 5rem);
  --nl-h3-size: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
  --nl-h4-size: 1.25rem;
  --nl-h5-size: 1.125rem;
  --nl-h6-size: 1rem;
  --nl-heading-weight: 500;
  --nl-heading-line-height: 1.2;
  --nl-h1-line-height: 0.94;
  --nl-h2-line-height: 1.02;
  --nl-h3-line-height: 1.12;
  --nl-heading-letter-spacing: -0.035em;
  --nl-lead-size: 1.125rem;
  --nl-small-size: 0.875em;
  --nl-eyebrow-size: 0.78rem;

  /* TYPO3 Bootstrap Package: Rahmen und Links in Inhaltselementen */
  --frame-link-color: var(--bs-link-color);
  --frame-link-hover-color: var(--bs-link-hover-color);
  --frame-embedded-border-radius: var(--bs-border-radius-lg);

  /* Rundungen */
  --bs-border-radius: 0.75rem;
  --bs-border-radius-sm: 0.5rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-xxl: 2rem;

  /* Schatten */
  --bs-box-shadow:
    0 1rem 2.5rem rgba(var(--nl-purple-dark-rgb), 0.15);

  --bs-box-shadow-lg:
    0 1.5rem 4rem rgba(var(--nl-purple-dark-rgb), 0.25);
}


/* =========================================================
   Grundtypografie
   ========================================================= */

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  line-height: var(--bs-body-line-height);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--nl-heading-font);
  font-weight: var(--nl-heading-weight);
  letter-spacing: var(--nl-heading-letter-spacing);
  overflow-wrap: break-word;
}

h1, .h1, .display-1 {
  font-size: var(--nl-h1-size);
  line-height: var(--nl-h1-line-height);
}

h2, .h2, .display-2 {
  font-size: var(--nl-h2-size);
  line-height: var(--nl-h2-line-height);
}

h3, .h3, .display-3 {
  font-size: var(--nl-h3-size);
  line-height: var(--nl-h3-line-height);
}

h4, .h4, .display-4 { font-size: var(--nl-h4-size); }
h5, .h5, .display-5 { font-size: var(--nl-h5-size); }
h6, .h6, .display-6 { font-size: var(--nl-h6-size); }
h4, h5, h6,
.h4, .h5, .h6,
.display-4, .display-5, .display-6 {
  line-height: var(--nl-heading-line-height);
}

p, ul, ol, dl, address {
  line-height: inherit;
}

small, .small { font-size: var(--nl-small-size); }
b, strong { font-weight: 700; }

.lead {
  font-family: var(--bs-body-font-family);
  font-size: var(--nl-lead-size);
  font-weight: 400;
  line-height: 1.7;
}

/* Gemeinsame Typografie der kleinen Themen- und Bereichsüberschriften. */
.nl-eyebrow {
  font-size: var(--nl-eyebrow-size);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .18em;
  text-transform: uppercase;
}


/* =========================================================
   Bootstrap Buttons
   ========================================================= */

.btn {
  --bs-btn-border-radius: 50rem;
  --bs-gradient: none;
  --bs-btn-box-shadow: none;

  --bs-btn-padding-y: 0.85rem;
  --bs-btn-padding-x: 1.4rem;
  --bs-btn-font-weight: 700;
  min-height: 3.125rem;
}

.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-y: 0.35rem;
  --bs-btn-padding-x: 0.8rem;
  --bs-btn-font-size: 0.875rem;
  min-height: 2.25rem;
}

.btn-primary {
  --bs-btn-color: var(--nl-on-primary);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);

  --bs-btn-hover-color: var(--nl-on-primary);
  --bs-btn-hover-bg: var(--bs-primary-text-emphasis);
  --bs-btn-hover-border-color: var(--bs-primary-text-emphasis);

  --bs-btn-active-color: var(--nl-on-primary);
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);

  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--nl-on-primary);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: var(--nl-on-secondary);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);

  --bs-btn-hover-color: var(--nl-on-secondary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-secondary) 85%, var(--bs-body-bg));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-secondary) 85%, var(--bs-body-bg));

  --bs-btn-active-color: var(--nl-on-secondary);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-disabled-color: var(--nl-on-secondary);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--nl-on-primary);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--nl-on-primary);
  --bs-btn-active-bg: var(--bs-primary-text-emphasis);
  --bs-btn-active-border-color: var(--bs-primary-text-emphasis);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-text-emphasis);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--nl-on-secondary);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color: var(--nl-on-secondary);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
  --bs-btn-disabled-color: var(--bs-secondary-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-light {
  --bs-btn-border-color: rgba(var(--bs-white-rgb), 0.55);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-white);
}


/* =========================================================
   Flächen und Hintergründe
   ========================================================= */

.bg-nl-purple {
  background-color: var(--bs-primary) !important;
}

.bg-nl-purple-dark {
  background-color: var(--bs-primary-text-emphasis) !important;
}

.bg-nl-aubergine {
  background-color: var(--bs-quaternary) !important;
}

.bg-nl-green {
  background-color: var(--bs-secondary) !important;
}

.bg-nl-cream {
  background-color: var(--bs-tertiary-bg) !important;
}

.bg-nl-paper {
  background-color: var(--bs-body-bg) !important;
}

.text-nl-purple {
  color: var(--bs-primary) !important;
}

.text-nl-green {
  color: var(--bs-secondary) !important;
}

.text-nl-muted {
  color: var(--bs-secondary-color) !important;
}


/* =========================================================
   Hero und dunkle Messeflächen
   ========================================================= */

.nl-hero {
  position: relative;
  overflow: hidden;
  color: var(--bs-white);

  background:
    radial-gradient(
      circle at 13% 26%,
      rgba(var(--bs-primary-rgb), 0.68),
      transparent 29%
    ),
    radial-gradient(
      circle at 69% 85%,
      rgba(var(--bs-secondary-rgb), 0.35),
      transparent 26%
    ),
    linear-gradient(
      128deg,
      color-mix(in srgb, var(--bs-primary) 35%, var(--bs-dark)) 0%,
      var(--bs-primary-text-emphasis) 43%,
      var(--bs-dark) 100%
    );
}

.frame-type-nordlichter_starthero,
.frame-type-nordlichter_pagehero {
  position: relative;
  overflow: hidden;
  color: var(--bs-white);
}

.frame-type-nordlichter_starthero {
  background:
    radial-gradient(
      ellipse 75% 52% at 46% -12%,
      transparent 61%,
      rgba(var(--bs-primary-rgb), 0.55) 62%,
      rgba(var(--bs-primary-rgb), 0.18) 68%,
      transparent 69%
    ),
    radial-gradient(
      ellipse 72% 58% at 113% 112%,
      transparent 64%,
      rgba(var(--bs-secondary-rgb), 0.58) 65%,
      rgba(var(--bs-secondary-rgb), 0.58) 68%,
      transparent 69%
    ),
    linear-gradient(118deg, var(--nl-purple-dark), var(--nl-purple));
}

.frame-type-nordlichter_pagehero {
  background: linear-gradient(112deg, var(--nl-purple-dark), var(--nl-purple));
}

.nl-start-hero-title {
  max-width: 6em;
}

.nl-start-hero-media {
  position: relative;
  min-height: 35rem;
}

.nl-start-hero-image-main,
.nl-start-hero-image-secondary {
  position: absolute;
  display: block;
  object-fit: cover;
}

.nl-start-hero-image-main {
  inset: 0 24% auto auto;
  width: 62%;
  height: 32.5rem;
  border-radius: 50% 50% var(--bs-border-radius-xl) var(--bs-border-radius-xl) / 28% 28% var(--bs-border-radius-xl) var(--bs-border-radius-xl);
}

.nl-start-hero-image-secondary {
  bottom: 0;
  left: 9%;
  width: 28%;
  height: 15rem;
  border: .5rem solid var(--bs-body-bg);
  border-radius: 50% 50% var(--bs-border-radius-lg) var(--bs-border-radius-lg) / 35% 35% var(--bs-border-radius-lg) var(--bs-border-radius-lg);
}

.nl-start-hero-event {
  position: absolute;
  z-index: 1;
  top: 3.5rem;
  right: 22%;
}

.frame-type-nordlichter_pagehero .frame-container-default {
  max-width: none;
  padding-inline: 0;
}

.nl-page-hero-copy {
  width: 100%;
  padding: 4rem;
  padding-left: max(calc(var(--nl-page-gutter) * .5), calc((100vw - var(--nl-container-width)) * .5 + var(--nl-page-gutter) * .5));
}

.nl-page-hero-copy h1 {
  max-width: 40rem;
}

.nl-page-hero-copy .lead {
  max-width: 48rem;
}

.nl-page-hero-media img {
  display: block;
}

@media (min-width: 992px) {
  .nl-page-hero {
    min-height: calc(100vh - var(--mainnavigation-nav-height));
  }

  .nl-page-hero-copy-column {
    flex: 0 0 55.5%;
    max-width: 55.5%;
  }

  .nl-page-hero-media {
    flex: 0 0 44.5%;
    max-width: 44.5%;
  }
}

@media (max-width: 991.98px) {
  .nl-start-hero-title {
    max-width: none;
  }

  .nl-start-hero-media {
    min-height: 28rem;
  }

  .nl-start-hero-image-main {
    right: 0;
    width: 82%;
    height: 26rem;
  }

  .nl-start-hero-image-secondary {
    left: 0;
    width: 36%;
    height: 13rem;
  }

  .nl-start-hero-event {
    right: 0;
  }

  .nl-page-hero-copy {
    padding: 3rem calc(var(--nl-page-gutter) * .5);
  }

  .nl-page-hero-media {
    aspect-ratio: 16 / 9;
  }
}

:is(.frame-type-nordlichter_starthero, .frame-type-nordlichter_pagehero) + .frame {
  --frame-outer-spacing-before: 0 !important;
}

.frame-type-nordlichter_starthero h1,
.frame-type-nordlichter_starthero .lead,
.frame-type-nordlichter_pagehero h1,
.frame-type-nordlichter_pagehero .lead {
  color: inherit;
}

.frame-type-nordlichter_starthero .nl-eyebrow,
.frame-type-nordlichter_pagehero .nl-eyebrow {
  color: var(--nl-on-primary-accent) !important;
}

.nl-gradient {
  color: var(--bs-white);
  background:
    linear-gradient(
      120deg,
      var(--bs-primary-text-emphasis),
      var(--bs-primary)
    );
}


/* =========================================================
   Kleine Überschriften / Eyebrows
   ========================================================= */

.nl-eyebrow {
  margin-bottom: 1rem;
  color: var(--bs-primary);
}

.nl-eyebrow-light {
  color: var(--bs-secondary-bg-subtle);
}


/* =========================================================
   Karten
   ========================================================= */

.card {
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-border-color: var(--bs-border-color);
  --bs-card-border-radius: var(--bs-border-radius-lg);

  overflow: hidden;
}

.nl-card {
  padding: 1.75rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}


/* =========================================================
   Accordion / FAQ
   ========================================================= */

.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-btn-color: var(--bs-primary-text-emphasis);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-active-color: var(--bs-primary);
  --bs-accordion-active-bg: var(--bs-tertiary-bg);
  --bs-accordion-btn-focus-box-shadow:
    0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}


/* =========================================================
   Formulare
   ========================================================= */

.form-control,
.form-select {
  min-height: 3.25rem;
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

textarea.form-control {
  min-height: 9rem;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--bs-primary);
  box-shadow:
    0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.15);
}

.form-check-input:checked {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}


/* =========================================================
   Navigation
   ========================================================= */

.navbar-nordlichter {
  --bs-navbar-color: rgba(var(--bs-white-rgb), 0.9);
  --bs-navbar-hover-color: var(--bs-secondary-bg-subtle);
  --bs-navbar-active-color: var(--bs-white);
  --bs-navbar-brand-color: var(--bs-white);
  --bs-navbar-brand-hover-color: var(--bs-white);

  background:
    linear-gradient(
      120deg,
      var(--bs-primary-text-emphasis),
      var(--bs-primary)
    );
}

.navbar-nordlichter .nav-link {
  font-size: 0.9rem;
  font-weight: 650;
}


/* =========================================================
   Abstände
   ========================================================= */

.nl-section {
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}

.nl-section-cream {
  background-color: var(--bs-tertiary-bg);
}


/* =========================================================
   Bilder
   ========================================================= */

.nl-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nl-image-rounded {
  overflow: hidden;
  border-radius: var(--bs-border-radius-xl);
}


/* =========================================================
   Responsive Anpassungen
   ========================================================= */

@media (max-width: 767.98px) {
  .nl-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* =========================================================
   TYPO3 Bootstrap Package: native Rahmen und Navigation
   ========================================================= */

.frame-background-primary {
  --frame-background: var(--bs-primary);
  --frame-color: var(--nl-on-primary);
  --frame-link-color: var(--nl-on-primary);
  --frame-link-hover-color: var(--bs-secondary-bg-subtle);
}

.frame-background-secondary {
  --frame-background: var(--bs-secondary);
  --frame-color: var(--nl-on-secondary);
  --frame-link-color: var(--nl-on-secondary);
  --frame-link-hover-color: var(--bs-primary-text-emphasis);
}

.frame-background-tertiary {
  --frame-background: var(--bs-tertiary);
  --frame-color: var(--bs-body-color);
  --frame-link-color: var(--bs-link-color);
  --frame-link-hover-color: var(--bs-link-hover-color);
}

.frame-background-quaternary {
  --frame-background: var(--bs-quaternary);
  --frame-color: var(--bs-white);
  --frame-link-color: var(--bs-white);
  --frame-link-hover-color: var(--nl-lime);
}

.frame-background-light {
  --frame-background: var(--bs-light);
  --frame-color: var(--bs-body-color);
  --frame-link-color: var(--bs-link-color);
  --frame-link-hover-color: var(--bs-link-hover-color);
}

.frame-background-dark {
  --frame-background: var(--bs-dark);
  --frame-color: var(--bs-white);
  --frame-link-color: var(--bs-secondary-bg-subtle);
  --frame-link-hover-color: var(--bs-white);
}

.navbar-mainnavigation {
  /* Schreibweise entspricht der Variable im Bootstrap Package. */
  --mainnavigation-hightlight: var(--bs-primary);
}

.navbar-mainnavigation.navbar-default {
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-hover-color: var(--bs-primary);
  --bs-navbar-active-color: var(--bs-primary);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-primary);
  background-color: var(--bs-body-bg) !important;
}

.navbar-mainnavigation.navbar-inverse,
.navbar-mainnavigation.navbar-nordlichter {
  --mainnavigation-hightlight: var(--bs-secondary);
  --bs-navbar-color: var(--bs-white);
  --bs-navbar-hover-color: var(--bs-secondary-bg-subtle);
  --bs-navbar-active-color: var(--bs-white);
  --bs-navbar-brand-color: var(--bs-white);
  --bs-navbar-brand-hover-color: var(--bs-white);
  background-color: var(--bs-dark) !important;
}

.navbar-mainnavigation .nav-link {
  font-weight: 650;
}

.navbar-mainnavigation .dropdown-menu {
  --bs-dropdown-bg: var(--nl-paper);
  --bs-dropdown-color: var(--nl-ink);
  --bs-dropdown-link-color: var(--nl-ink);
  --bs-dropdown-link-hover-color: var(--nl-purple-dark);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--nl-purple) 10%, var(--nl-paper));
  --bs-dropdown-link-active-color: var(--nl-on-primary);
  --bs-dropdown-link-active-bg: var(--nl-purple);
  --bs-nav-link-color: var(--nl-ink);
  --bs-nav-link-hover-color: var(--nl-purple-dark);
  --bs-navbar-active-color: var(--nl-purple);
}

.navbar-mainnavigation .dropdown-menu .nav-link:hover,
.navbar-mainnavigation .dropdown-menu .nav-link:focus-visible {
  color: var(--nl-purple-dark);
  background-color: color-mix(in srgb, var(--nl-purple) 10%, var(--nl-paper));
}

.navbar-mainnavigation .dropdown-menu .nav-link.active {
  color: var(--nl-purple);
  background-color: color-mix(in srgb, var(--nl-purple) 10%, var(--nl-paper));
}

.footer-section-content,
.footer-section-meta {
  background: var(--bs-quaternary);
  --frame-background: var(--bs-quaternary);
  --frame-color: var(--bs-white);
  --frame-link-color: rgba(var(--bs-white-rgb), 0.72);
  --frame-link-hover-color: var(--nl-lime);
}

.footer-section-content {
  color: rgba(var(--bs-white-rgb), 0.68);
}

.footer-section-content h2,
.footer-section-content h3,
.footer-section-content h4,
.footer-section-content h5,
.footer-section-content h6,
.footer-section-content p:first-child > strong:first-child {
  display: block;
  color: var(--nl-lime);
  font-family: var(--bs-body-font-family);
  font-size: var(--nl-eyebrow-size);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.footer-section-content p,
.footer-section-content address,
.footer-section-content ul {
  color: rgba(var(--bs-white-rgb), 0.68);
}

.footer-section-content ul {
  list-style: none;
}

.footer-section-content a {
  color: rgba(var(--bs-white-rgb), 0.72);
  text-decoration: none;
}

.footer-section-content a:hover,
.footer-section-content a:focus-visible {
  color: var(--nl-lime);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-section-meta {
  border-top: 1px solid rgba(var(--bs-white-rgb), 0.12);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
  --bs-nav-pills-link-active-color: var(--nl-on-primary);
}

.pagination {
  --bs-pagination-color: var(--bs-primary);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-hover-color: var(--bs-primary-text-emphasis);
  --bs-pagination-hover-bg: var(--bs-primary-bg-subtle);
  --bs-pagination-hover-border-color: var(--bs-primary-border-subtle);
  --bs-pagination-focus-color: var(--bs-primary-text-emphasis);
  --bs-pagination-focus-bg: var(--bs-primary-bg-subtle);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
  --bs-pagination-active-bg: var(--bs-primary);
  --bs-pagination-active-border-color: var(--bs-primary);
  --bs-pagination-active-color: var(--nl-on-primary);
}

.text-bg-primary {
  color: var(--nl-on-primary) !important;
}

.text-bg-secondary {
  color: var(--nl-on-secondary) !important;
}




/* =========================================================
   Vollständige Bootstrap-Komponenten: gemeinsame Gestaltung
   Bootstrap bleibt für Verhalten, Breakpoints und Animationen zuständig.
   ========================================================= */

.btn-lg,
.btn-group-lg > .btn {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 1.75rem;
  --bs-btn-font-size: 1.125rem;
}

.btn-link {
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn,
.btn-close,
.accordion-button {
  --bs-btn-focus-ring-contrast-color: var(--bs-body-bg);
  --bs-btn-focus-ring-color: var(--bs-primary-text-emphasis);
  --bs-accordion-btn-focus-ring-contrast-color: var(--bs-body-bg);
  --bs-accordion-btn-focus-ring-color: var(--bs-primary-text-emphasis);
}

.btn-close {
  --bs-btn-close-color: var(--bs-body-color);
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.badge {
  --bs-badge-font-size: 0.8em;
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.7em;
  --bs-badge-padding-y: 0.4em;
  --bs-badge-border-radius: var(--bs-border-radius-sm);
  line-height: 1.3;
}

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  --bs-breadcrumb-font-size: 0.9rem;
}

.card {
  --bs-card-color: var(--bs-body-color);
  --bs-card-title-color: inherit;
  --bs-card-subtitle-color: var(--bs-secondary-color);
  --bs-card-inner-border-radius: calc(var(--bs-card-border-radius) - var(--bs-card-border-width));
  --bs-card-cap-bg: var(--bs-tertiary-bg);
  --bs-card-cap-color: var(--bs-body-color);
  --bs-card-spacer-x: 1.5rem;
  --bs-card-spacer-y: 1.5rem;
}

.card.text-bg-primary,
.card.text-bg-secondary,
.card.text-bg-success,
.card.text-bg-danger,
.card.text-bg-warning,
.card.text-bg-info,
.card.text-bg-light,
.card.text-bg-dark {
  --bs-card-color: inherit;
  --bs-card-cap-color: inherit;
  --bs-card-cap-bg: transparent;
  --bs-card-subtitle-color: inherit;
}

.accordion {
  --bs-accordion-border-radius: var(--bs-border-radius-lg);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-btn-focus-border-color: var(--bs-primary);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-button {
  font-weight: 600;
}

.accordion-button::after {
  background-image: none;
  background-color: currentColor;
  -webkit-mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
  mask: var(--bs-accordion-btn-icon) center / contain no-repeat;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
}

.alert {
  --bs-alert-border-radius: var(--bs-border-radius);
}

.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-action-color: var(--bs-body-color);
  --bs-list-group-action-hover-color: var(--bs-primary-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-action-active-color: var(--bs-primary-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-active-color: var(--nl-on-primary);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-tertiary-bg);
}

.nav {
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  --bs-nav-link-font-weight: 600;
}

.nav-tabs {
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-primary-border-subtle) var(--bs-primary-border-subtle) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-primary-text-emphasis);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
}

.nav-underline {
  --bs-nav-underline-link-active-color: var(--bs-primary-text-emphasis);
}

.navbar {
  --bs-navbar-color: var(--bs-body-color);
  --bs-navbar-hover-color: var(--bs-primary);
  --bs-navbar-active-color: var(--bs-primary);
  --bs-navbar-disabled-color: var(--bs-secondary-color);
  --bs-navbar-brand-color: var(--bs-body-color);
  --bs-navbar-brand-hover-color: var(--bs-primary);
  --bs-navbar-toggler-border-color: var(--bs-border-color);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius-sm);
}

.navbar-dark {
  --bs-navbar-color: rgba(var(--bs-white-rgb), 0.9);
  --bs-navbar-hover-color: var(--bs-white);
  --bs-navbar-active-color: var(--bs-white);
  --bs-navbar-disabled-color: rgba(var(--bs-white-rgb), 0.5);
  --bs-navbar-brand-color: var(--bs-white);
  --bs-navbar-brand-hover-color: var(--bs-white);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-border-color: var(--bs-border-color);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color);
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-header-color: var(--bs-secondary-color);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-primary-text-emphasis);
  --bs-dropdown-link-hover-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-link-active-color: var(--nl-on-primary);
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-disabled-color: var(--bs-secondary-color);
}

.dropdown-menu-dark {
  --bs-dropdown-bg: var(--bs-dark);
  --bs-dropdown-color: var(--bs-white);
  --bs-dropdown-link-color: var(--bs-white);
  --bs-dropdown-link-hover-color: var(--bs-white);
  --bs-dropdown-link-hover-bg: rgba(var(--bs-white-rgb), 0.15);
  --bs-dropdown-header-color: rgba(var(--bs-white-rgb), 0.7);
  --bs-dropdown-link-disabled-color: rgba(var(--bs-white-rgb), 0.5);
}

.pagination {
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-tertiary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  --bs-pagination-hover-color: var(--bs-primary-text-emphasis);
}

.table {
  --bs-table-color: var(--bs-body-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-striped-color: var(--bs-body-color);
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-hover-color: var(--bs-body-color);
  --bs-table-hover-bg: var(--bs-primary-bg-subtle);
  --bs-table-active-color: var(--bs-body-color);
  --bs-table-active-bg: var(--bs-secondary-bg-subtle);
}

.table caption {
  color: var(--bs-secondary-color);
}

.modal {
  --bs-modal-color: var(--bs-body-color);
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-modal-box-shadow: var(--bs-box-shadow-lg);
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-bg: var(--bs-tertiary-bg);
}

.offcanvas,
.offcanvas-sm,
.offcanvas-md,
.offcanvas-lg,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-color: var(--bs-border-color);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-lg);
}

.modal-backdrop {
  --bs-backdrop-bg: var(--bs-dark);
}

.offcanvas-backdrop {
  background-color: var(--bs-dark);
}

.popover {
  --bs-popover-font-size: 0.9rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-color: var(--bs-border-color);
  --bs-popover-border-radius: var(--bs-border-radius);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-color: var(--bs-primary-text-emphasis);
  --bs-popover-header-bg: var(--bs-primary-bg-subtle);
}

.tooltip {
  --bs-tooltip-color: var(--nl-on-primary);
  --bs-tooltip-bg: var(--bs-primary-text-emphasis);
  --bs-tooltip-border-radius: var(--bs-border-radius-sm);
  --bs-tooltip-font-size: 0.875rem;
}

.toast {
  --bs-toast-color: var(--bs-body-color);
  --bs-toast-bg: var(--bs-body-bg);
  --bs-toast-border-color: var(--bs-border-color);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-primary-text-emphasis);
  --bs-toast-header-bg: var(--bs-primary-bg-subtle);
  --bs-toast-header-border-color: var(--bs-border-color);
}

.progress {
  --bs-progress-bg: var(--bs-tertiary-bg);
  --bs-progress-bar-bg: var(--bs-primary);
  --bs-progress-bar-color: var(--nl-on-primary);
  --bs-progress-border-radius: var(--bs-border-radius);
}

.spinner-border,
.spinner-grow {
  color: var(--bs-primary);
}

.placeholder {
  color: var(--bs-secondary-color);
}

.carousel {
  --bs-carousel-indicator-active-bg: var(--bs-white);
  --bs-carousel-caption-color: var(--bs-white);
}

.carousel-dark {
  --bs-carousel-indicator-active-bg: var(--bs-primary);
  --bs-carousel-caption-color: var(--bs-body-color);
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  border-radius: var(--bs-border-radius-sm);
  background-color: rgba(var(--bs-dark-rgb), 0.6);
}

/* Collapse und Scrollspy übernehmen die Farben ihrer Inhalts-/Nav-Komponenten. */

/* Formulare: Größen, Gruppen, Schalter, Range und Validierungszustände */
.form-control,
.form-select {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}

.form-control-sm,
.form-select-sm {
  min-height: 2.25rem;
  border-radius: var(--bs-border-radius-sm);
}

.form-control-lg,
.form-select-lg {
  min-height: 3.75rem;
  border-radius: var(--bs-border-radius-lg);
}

.form-control:disabled,
.form-select:disabled {
  color: var(--bs-secondary-color);
  background-color: var(--bs-secondary-bg);
}

.form-control::file-selector-button,
.input-group-text {
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-primary-bg-subtle);
}

.form-floating > label {
  color: var(--bs-secondary-color);
}

.form-text {
  color: var(--bs-secondary-color);
}

.form-check-input:indeterminate {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.form-check-input:disabled ~ .form-check-label {
  color: var(--bs-secondary-color);
}

.form-range::-webkit-slider-runnable-track {
  background-color: var(--bs-tertiary-bg);
}

.form-range::-moz-range-track {
  background-color: var(--bs-tertiary-bg);
}

.form-range::-webkit-slider-thumb {
  background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
  background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--bs-primary-text-emphasis);
}

.form-range::-moz-range-thumb:active {
  background-color: var(--bs-primary-text-emphasis);
}

.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}

.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}

.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-primary-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-primary-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--nl-on-primary);
  --bs-list-group-active-bg: var(--bs-primary);
  --bs-list-group-active-border-color: var(--bs-primary);
}

.table-primary {
  --bs-table-color: var(--bs-primary-text-emphasis);
  --bs-table-bg: var(--bs-primary-bg-subtle);
  --bs-table-border-color: var(--bs-primary-border-subtle);
  --bs-table-striped-color: var(--bs-primary-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-primary) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-primary-text-emphasis);
  --bs-table-hover-bg: var(--bs-primary-border-subtle);
  --bs-table-active-color: var(--bs-primary-text-emphasis);
  --bs-table-active-bg: var(--bs-primary-border-subtle);
}

.text-bg-primary {
  color: var(--nl-on-primary) !important;
}

.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}

.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--nl-on-secondary);
  --bs-list-group-active-bg: var(--bs-secondary);
  --bs-list-group-active-border-color: var(--bs-secondary);
}

.table-secondary {
  --bs-table-color: var(--bs-secondary-text-emphasis);
  --bs-table-bg: var(--bs-secondary-bg-subtle);
  --bs-table-border-color: var(--bs-secondary-border-subtle);
  --bs-table-striped-color: var(--bs-secondary-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-secondary) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-secondary-text-emphasis);
  --bs-table-hover-bg: var(--bs-secondary-border-subtle);
  --bs-table-active-color: var(--bs-secondary-text-emphasis);
  --bs-table-active-bg: var(--bs-secondary-border-subtle);
}

.text-bg-secondary {
  color: var(--nl-on-secondary) !important;
}

.btn-success {
  --bs-btn-color: var(--nl-on-success);
  --bs-btn-bg: var(--bs-success);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: var(--nl-on-success);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-success) 85%, var(--bs-black));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-success) 85%, var(--bs-black));
  --bs-btn-active-color: var(--nl-on-success);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-success) 85%, var(--bs-black));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-success) 85%, var(--bs-black));
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-disabled-color: var(--nl-on-success);
  --bs-btn-disabled-bg: var(--bs-success);
  --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis);
  --bs-btn-border-color: var(--bs-success);
  --bs-btn-hover-color: var(--nl-on-success);
  --bs-btn-hover-bg: var(--bs-success);
  --bs-btn-hover-border-color: var(--bs-success);
  --bs-btn-active-color: var(--nl-on-success);
  --bs-btn-active-bg: var(--bs-success);
  --bs-btn-active-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: var(--bs-success-rgb);
  --bs-btn-disabled-color: var(--bs-success-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-success);
}

.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}

.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-success-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-success-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--nl-on-success);
  --bs-list-group-active-bg: var(--bs-success);
  --bs-list-group-active-border-color: var(--bs-success);
}

.table-success {
  --bs-table-color: var(--bs-success-text-emphasis);
  --bs-table-bg: var(--bs-success-bg-subtle);
  --bs-table-border-color: var(--bs-success-border-subtle);
  --bs-table-striped-color: var(--bs-success-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-success) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-success-text-emphasis);
  --bs-table-hover-bg: var(--bs-success-border-subtle);
  --bs-table-active-color: var(--bs-success-text-emphasis);
  --bs-table-active-bg: var(--bs-success-border-subtle);
}

.text-bg-success {
  color: var(--nl-on-success) !important;
}

.btn-danger {
  --bs-btn-color: var(--nl-on-danger);
  --bs-btn-bg: var(--bs-danger);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: var(--nl-on-danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-danger) 85%, var(--bs-black));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-danger) 85%, var(--bs-black));
  --bs-btn-active-color: var(--nl-on-danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-danger) 85%, var(--bs-black));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-danger) 85%, var(--bs-black));
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-disabled-color: var(--nl-on-danger);
  --bs-btn-disabled-bg: var(--bs-danger);
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis);
  --bs-btn-border-color: var(--bs-danger);
  --bs-btn-hover-color: var(--nl-on-danger);
  --bs-btn-hover-bg: var(--bs-danger);
  --bs-btn-hover-border-color: var(--bs-danger);
  --bs-btn-active-color: var(--nl-on-danger);
  --bs-btn-active-bg: var(--bs-danger);
  --bs-btn-active-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: var(--bs-danger-rgb);
  --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-danger);
}

.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}

.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-danger-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-danger-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--nl-on-danger);
  --bs-list-group-active-bg: var(--bs-danger);
  --bs-list-group-active-border-color: var(--bs-danger);
}

.table-danger {
  --bs-table-color: var(--bs-danger-text-emphasis);
  --bs-table-bg: var(--bs-danger-bg-subtle);
  --bs-table-border-color: var(--bs-danger-border-subtle);
  --bs-table-striped-color: var(--bs-danger-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-danger) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-danger-text-emphasis);
  --bs-table-hover-bg: var(--bs-danger-border-subtle);
  --bs-table-active-color: var(--bs-danger-text-emphasis);
  --bs-table-active-bg: var(--bs-danger-border-subtle);
}

.text-bg-danger {
  color: var(--nl-on-danger) !important;
}

.btn-warning {
  --bs-btn-color: var(--nl-on-warning);
  --bs-btn-bg: var(--bs-warning);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--nl-on-warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-warning) 85%, var(--bs-black));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-warning) 85%, var(--bs-black));
  --bs-btn-active-color: var(--nl-on-warning);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-warning) 85%, var(--bs-black));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-warning) 85%, var(--bs-black));
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-disabled-color: var(--nl-on-warning);
  --bs-btn-disabled-bg: var(--bs-warning);
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis);
  --bs-btn-border-color: var(--bs-warning);
  --bs-btn-hover-color: var(--nl-on-warning);
  --bs-btn-hover-bg: var(--bs-warning);
  --bs-btn-hover-border-color: var(--bs-warning);
  --bs-btn-active-color: var(--nl-on-warning);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: var(--bs-warning-rgb);
  --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-warning);
}

.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}

.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-warning-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-warning-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--nl-on-warning);
  --bs-list-group-active-bg: var(--bs-warning);
  --bs-list-group-active-border-color: var(--bs-warning);
}

.table-warning {
  --bs-table-color: var(--bs-warning-text-emphasis);
  --bs-table-bg: var(--bs-warning-bg-subtle);
  --bs-table-border-color: var(--bs-warning-border-subtle);
  --bs-table-striped-color: var(--bs-warning-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-warning) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-warning-text-emphasis);
  --bs-table-hover-bg: var(--bs-warning-border-subtle);
  --bs-table-active-color: var(--bs-warning-text-emphasis);
  --bs-table-active-bg: var(--bs-warning-border-subtle);
}

.text-bg-warning {
  color: var(--nl-on-warning) !important;
}

.btn-info {
  --bs-btn-color: var(--nl-on-info);
  --bs-btn-bg: var(--bs-info);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--nl-on-info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-info) 85%, var(--bs-black));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-info) 85%, var(--bs-black));
  --bs-btn-active-color: var(--nl-on-info);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-info) 85%, var(--bs-black));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-info) 85%, var(--bs-black));
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-disabled-color: var(--nl-on-info);
  --bs-btn-disabled-bg: var(--bs-info);
  --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-info {
  --bs-btn-color: var(--bs-info-text-emphasis);
  --bs-btn-border-color: var(--bs-info);
  --bs-btn-hover-color: var(--nl-on-info);
  --bs-btn-hover-bg: var(--bs-info);
  --bs-btn-hover-border-color: var(--bs-info);
  --bs-btn-active-color: var(--nl-on-info);
  --bs-btn-active-bg: var(--bs-info);
  --bs-btn-active-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: var(--bs-info-rgb);
  --bs-btn-disabled-color: var(--bs-info-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-info);
}

.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}

.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-info-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-info-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--nl-on-info);
  --bs-list-group-active-bg: var(--bs-info);
  --bs-list-group-active-border-color: var(--bs-info);
}

.table-info {
  --bs-table-color: var(--bs-info-text-emphasis);
  --bs-table-bg: var(--bs-info-bg-subtle);
  --bs-table-border-color: var(--bs-info-border-subtle);
  --bs-table-striped-color: var(--bs-info-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-info) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-info-text-emphasis);
  --bs-table-hover-bg: var(--bs-info-border-subtle);
  --bs-table-active-color: var(--bs-info-text-emphasis);
  --bs-table-active-bg: var(--bs-info-border-subtle);
}

.text-bg-info {
  color: var(--nl-on-info) !important;
}

.btn-light {
  --bs-btn-color: var(--nl-on-light);
  --bs-btn-bg: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--nl-on-light);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-light) 85%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-light) 85%, var(--bs-body-color));
  --bs-btn-active-color: var(--nl-on-light);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-light) 85%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-light) 85%, var(--bs-body-color));
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-disabled-color: var(--nl-on-light);
  --bs-btn-disabled-bg: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

.btn-outline-light {
  --bs-btn-color: var(--bs-light-text-emphasis);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--nl-on-light);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--nl-on-light);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-focus-shadow-rgb: var(--bs-light-rgb);
  --bs-btn-disabled-color: var(--bs-light-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-light);
}

.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}

.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-light-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-light-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--nl-on-light);
  --bs-list-group-active-bg: var(--bs-light);
  --bs-list-group-active-border-color: var(--bs-light);
}

.table-light {
  --bs-table-color: var(--bs-light-text-emphasis);
  --bs-table-bg: var(--bs-light-bg-subtle);
  --bs-table-border-color: var(--bs-light-border-subtle);
  --bs-table-striped-color: var(--bs-light-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-light) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-light-text-emphasis);
  --bs-table-hover-bg: var(--bs-light-border-subtle);
  --bs-table-active-color: var(--bs-light-text-emphasis);
  --bs-table-active-bg: var(--bs-light-border-subtle);
}

.text-bg-light {
  color: var(--nl-on-light) !important;
}

.btn-dark {
  --bs-btn-color: var(--nl-on-dark);
  --bs-btn-bg: var(--bs-dark);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--nl-on-dark);
  --bs-btn-hover-bg: color-mix(in srgb, var(--bs-dark) 85%, var(--bs-body-color));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-dark) 85%, var(--bs-body-color));
  --bs-btn-active-color: var(--nl-on-dark);
  --bs-btn-active-bg: color-mix(in srgb, var(--bs-dark) 85%, var(--bs-body-color));
  --bs-btn-active-border-color: color-mix(in srgb, var(--bs-dark) 85%, var(--bs-body-color));
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-disabled-color: var(--nl-on-dark);
  --bs-btn-disabled-bg: var(--bs-dark);
  --bs-btn-disabled-border-color: var(--bs-dark);
}

.btn-outline-dark {
  --bs-btn-color: var(--bs-dark-text-emphasis);
  --bs-btn-border-color: var(--bs-dark);
  --bs-btn-hover-color: var(--nl-on-dark);
  --bs-btn-hover-bg: var(--bs-dark);
  --bs-btn-hover-border-color: var(--bs-dark);
  --bs-btn-active-color: var(--nl-on-dark);
  --bs-btn-active-bg: var(--bs-dark);
  --bs-btn-active-border-color: var(--bs-dark);
  --bs-btn-focus-shadow-rgb: var(--bs-dark-rgb);
  --bs-btn-disabled-color: var(--bs-dark-text-emphasis);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--bs-dark);
}

.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}

.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-dark-text-emphasis);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-dark-text-emphasis);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--nl-on-dark);
  --bs-list-group-active-bg: var(--bs-dark);
  --bs-list-group-active-border-color: var(--bs-dark);
}

.table-dark {
  --bs-table-color: var(--bs-dark-text-emphasis);
  --bs-table-bg: var(--bs-dark-bg-subtle);
  --bs-table-border-color: var(--bs-dark-border-subtle);
  --bs-table-striped-color: var(--bs-dark-text-emphasis);
  --bs-table-striped-bg: color-mix(in srgb, var(--bs-dark) 18%, var(--bs-body-bg));
  --bs-table-hover-color: var(--bs-dark-text-emphasis);
  --bs-table-hover-bg: var(--bs-dark-border-subtle);
  --bs-table-active-color: var(--bs-dark-text-emphasis);
  --bs-table-active-bg: var(--bs-dark-border-subtle);
}

.text-bg-dark {
  color: var(--nl-on-dark) !important;
}

.btn-outline-light {
  --bs-btn-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-light);
}

.table-dark {
  --bs-table-color: var(--nl-on-dark);
  --bs-table-bg: var(--bs-dark);
  --bs-table-border-color: rgba(var(--bs-white-rgb), 0.25);
  --bs-table-striped-color: var(--nl-on-dark);
  --bs-table-striped-bg: rgba(var(--bs-white-rgb), 0.05);
  --bs-table-hover-color: var(--nl-on-dark);
  --bs-table-hover-bg: rgba(var(--bs-white-rgb), 0.1);
  --bs-table-active-color: var(--nl-on-dark);
  --bs-table-active-bg: rgba(var(--bs-white-rgb), 0.15);
}

.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .form-select:valid,
.form-select.is-valid,
.was-validated .form-check-input:valid,
.form-check-input.is-valid {
  border-color: var(--bs-success);
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .form-select:valid:focus,
.form-select.is-valid:focus,
.was-validated .form-check-input:valid:focus,
.form-check-input.is-valid:focus {
  border-color: var(--bs-success);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

.was-validated .form-check-input:valid:checked,
.form-check-input.is-valid:checked {
  background-color: var(--bs-success);
}

.valid-feedback,
.was-validated .form-check-input:valid ~ .form-check-label,
.form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-success-text-emphasis);
}

.valid-tooltip {
  color: var(--nl-on-success);
  background-color: var(--bs-success);
}

.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .form-select:invalid,
.form-select.is-invalid,
.was-validated .form-check-input:invalid,
.form-check-input.is-invalid {
  border-color: var(--bs-danger);
}

.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.was-validated .form-select:invalid:focus,
.form-select.is-invalid:focus,
.was-validated .form-check-input:invalid:focus,
.form-check-input.is-invalid:focus {
  border-color: var(--bs-danger);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.was-validated .form-check-input:invalid:checked,
.form-check-input.is-invalid:checked {
  background-color: var(--bs-danger);
}

.invalid-feedback,
.was-validated .form-check-input:invalid ~ .form-check-label,
.form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-danger-text-emphasis);
}

.invalid-tooltip {
  color: var(--nl-on-danger);
  background-color: var(--bs-danger);
}


/* Bootstrap Package überschreibt Karten zusätzlich mit kompilierten Farben. */
.card {
  color: var(--bs-card-color);
  background: var(--bs-card-bg);
}

.card a:not(.btn) {
  color: var(--bs-link-color);
}

.card a:not(.btn):hover {
  color: var(--bs-link-hover-color);
}

.scroll-top {
  --scrolltop-bg: var(--bs-primary-text-emphasis);
  --scrolltop-color: var(--nl-on-primary);
  --scrolltop-hover-bg: var(--bs-primary);
  --scrolltop-hover-color: var(--nl-on-primary);
  border-radius: var(--bs-border-radius-sm);
}

.card.text-bg-primary a:not(.btn),
.card.text-bg-primary a:not(.btn):hover {
  color: var(--nl-on-primary);
}

.card.text-bg-secondary a:not(.btn),
.card.text-bg-secondary a:not(.btn):hover {
  color: var(--nl-on-secondary);
}

.card.text-bg-success a:not(.btn),
.card.text-bg-success a:not(.btn):hover {
  color: var(--nl-on-success);
}

.card.text-bg-danger a:not(.btn),
.card.text-bg-danger a:not(.btn):hover {
  color: var(--nl-on-danger);
}

.card.text-bg-warning a:not(.btn),
.card.text-bg-warning a:not(.btn):hover {
  color: var(--nl-on-warning);
}

.card.text-bg-info a:not(.btn),
.card.text-bg-info a:not(.btn):hover {
  color: var(--nl-on-info);
}

.card.text-bg-light a:not(.btn),
.card.text-bg-light a:not(.btn):hover {
  color: var(--nl-on-light);
}

.card.text-bg-dark a:not(.btn),
.card.text-bg-dark a:not(.btn):hover {
  color: var(--nl-on-dark);
}


/* Zusätzliche Standardvariante und Breadcrumb des Bootstrap Package. */
.btn-default,
.btn-outline-default {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: var(--bs-body-bg);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-bg: var(--bs-primary-bg-subtle);
  --bs-btn-hover-border-color: var(--bs-primary-border-subtle);
  --bs-btn-active-color: var(--nl-on-primary);
  --bs-btn-active-bg: var(--bs-primary);
  --bs-btn-active-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
  --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-bg: var(--bs-body-bg);
  --bs-btn-disabled-border-color: var(--bs-border-color);
}

.btn-outline-default {
  --bs-btn-bg: transparent;
}

.breadcrumb,
.breadcrumb-section {
  background-color: var(--bs-tertiary-bg);
}

.breadcrumb-section .breadcrumb {
  background-color: transparent;
}

.body-bg {
  --mainnavigation-nav-height: 155px;
}

#page-header {
  --mainnavigation-nav-height: inherit;
  background-color: var(--bs-primary) !important;
  background-image: none;
}

#page-header .navbar-brand-image img {
  max-height: none;
}

.body-bg:has(.frame-type-nordlichter_starthero, .frame-type-nordlichter_pagehero) #page-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1030;
  background-color: transparent !important;
  box-shadow: none;
}

.body-bg:has(.frame-type-nordlichter_starthero, .frame-type-nordlichter_pagehero)
  :is(.frame-type-nordlichter_starthero, .frame-type-nordlichter_pagehero) {
  padding-top: var(--mainnavigation-nav-height);
}

/* Inhaltsbreiten und Seitenabstände. .frame bleibt der äußere Hintergrund. */
:root {
  --nl-container-width: 1280px;
  --nl-content-width: 1180px;
  --nl-page-gutter: 2.5rem;
  /* Raster: Karten sowie große redaktionelle Aufteilungen (ab lg). */
  --nl-grid-gutter-x: 1.5rem;
  --nl-grid-gutter-y: 1.5rem;
  --nl-grid-wide-gutter-x: 4rem;
  --nl-grid-wide-gutter-y: 3rem;
  --nl-section-space: clamp(4rem, 6vw, 6rem);
}

/* TYPO3 Bootstrap Package: ein zentraler redaktioneller Abstand für alle
   Inhaltselemente im Hauptbereich; die vorhandene Frame-Logik bleibt aktiv. */
.main-section > .section > .frame {
  --frame-spacing: clamp(4.5rem, 6vw, 7rem);
}

.container,
.frame-container-default,
.container-content {
  --bs-gutter-x: var(--nl-page-gutter);
  width: 100%;
  max-width: var(--nl-container-width);
  margin-inline: auto;
  padding-inline: calc(var(--bs-gutter-x) * .5);
}

.container-content { max-width: var(--nl-content-width); }

@media (min-width: 768px) {
  :root { --nl-page-gutter: 4rem; }
}

/* Das Original nutzt auf großen Desktopflächen die volle xxl-Breite. */
@media (min-width: 1400px) {
  :root { --nl-container-width: 1920px; }
}

/* Gemeinsame Rasterparameter für Bootstrap und die Modul-Layouts.
   Seitenränder (--nl-page-gutter) sind unabhängig vom Spaltenabstand. */
.g-4, .gx-4 { --bs-gutter-x: var(--nl-grid-gutter-x); }
.g-4, .gy-4 { --bs-gutter-y: var(--nl-grid-gutter-y); }

@media (min-width: 992px) {
  .g-lg-5, .gx-lg-5 { --bs-gutter-x: var(--nl-grid-wide-gutter-x); }
  .g-lg-5, .gy-lg-5 { --bs-gutter-y: var(--nl-grid-wide-gutter-y); }
}