/* === theme.css === */
/* =========================================================
   Default Theme Configuration

   Diese Datei ist der manuelle CSS-Einstieg fuer das Theme.
   theme.json bleibt das Manifest; echte Styles, Overrides und
   Standardwerte gehoeren hierhin.

   Dynamische Werte aus dem Basis-Design/Live-Builder werden
   weiterhin in system/core/theme_options.php als CSS-Variablen
   ausgegeben und koennen diese Defaults ueberschreiben.
   ========================================================= */

:root {
  --nx-theme-font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
  --nx-theme-page-bg: var(--nx-color-surface, var(--bs-body-bg, #fff));
  --nx-theme-page-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --nx-theme-link-color: var(--nx-color-link, var(--bs-link-color, #0d6efd));
  --nx-theme-link-hover-color: var(--nx-color-link-hover, var(--bs-link-hover-color, #0a58ca));
  --nx-theme-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, #fff));
  --nx-theme-card-border: var(--nx-color-card-border, var(--bs-border-color, rgba(0, 0, 0, 0.12)));
  --nx-theme-radius-sm: var(--nx-radius-sm, 0.25rem);
  --nx-theme-radius-md: var(--nx-radius-md, 0.375rem);
  --nx-theme-radius-lg: var(--nx-radius-lg, 0.5rem);
  --nx-theme-section-spacing: var(--nx-spacing-section, 4rem);
  --nx-theme-block-spacing: var(--nx-spacing-block, 2rem);
  --nx-theme-card-shadow: var(--nx-shadow-card, 0 4px 6px rgba(15, 23, 42, 0.08));
}

body {
  font-family: var(--nx-theme-font-family-base);
  background-color: var(--nx-theme-page-bg);
  color: var(--nx-theme-page-text);
}

a {
  color: var(--nx-theme-link-color);
}

a:hover,
a:focus {
  color: var(--nx-theme-link-hover-color);
}

.card {
  border-color: var(--nx-theme-card-border);
  border-radius: var(--nx-theme-radius-md);
}


/* === module_pages.css === */
/* =========================================================
   Module Pages
   Shared styling for frontend module pages such as contact,
   profile, edit profile, imprint and policy pages.
   ========================================================= */

/* Contact module page */
.contact-shell {
  --contact-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
  --contact-card-body-bg: var(--nx-color-card-body-bg, var(--contact-card-bg));
  --contact-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.12))));
  --contact-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --contact-strong: var(--bs-emphasis-color, var(--contact-text));
  --contact-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --contact-input-bg: color-mix(in srgb, var(--contact-card-body-bg) 98%, var(--contact-text) 2%);
  --contact-input-addon-bg: color-mix(in srgb, var(--contact-card-body-bg) 92%, var(--contact-text) 8%);
  --contact-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
  color: var(--contact-text);
}

.contact-card {
  background: var(--contact-card-bg);
  border-color: var(--contact-border);
  color: var(--contact-text);
}

.contact-card .card-body {
  background: var(--contact-card-body-bg);
  color: var(--contact-text);
}

.contact-description,
.contact-card p,
.contact-card label,
.contact-card blockquote,
.contact-card small {
  color: var(--contact-text);
}

.contact-card small {
  color: var(--contact-muted);
}

.contact-card .form-control,
.contact-card .form-select {
  background-color: var(--contact-input-bg);
  border-color: var(--contact-border);
  color: var(--contact-text);
}

.contact-card .form-control::placeholder {
  color: var(--contact-muted);
  opacity: 1;
}

.contact-card .form-control:focus,
.contact-card .form-select:focus {
  background-color: var(--contact-input-bg);
  border-color: var(--contact-accent);
  color: var(--contact-text);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--contact-accent) 18%, transparent);
}

.contact-card .input-group-text {
  background-color: var(--contact-input-addon-bg);
  border-color: var(--contact-border);
  color: var(--contact-muted);
}

.contact-card .form-check-input {
  background-color: var(--contact-input-bg);
  border-color: var(--contact-border);
}

.contact-card .form-check-input:checked {
  background-color: var(--contact-accent);
  border-color: var(--contact-accent);
}

.contact-gdpr {
  margin: 1rem 0;
  padding: 1rem;
  border: var(--bs-border-width, 1px) solid var(--contact-border);
  border-radius: var(--bs-border-radius);
  background: color-mix(in srgb, var(--contact-card-body-bg) 96%, var(--contact-text) 4%);
}

.contact-card,
.profile-card,
.edit-profile-card {
  border: 1px solid var(--nx-theme-card-border);
  border-radius: var(--nx-theme-radius-lg);
  box-shadow: var(--nx-theme-card-shadow);
  overflow: hidden;
}

.contact-description {
  margin-bottom: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.65;
}

.contact-card .input-group {
  align-items: stretch;
}

.contact-card .input-group-text,
.contact-card .form-control,
.contact-card .form-select {
  min-height: 2.875rem;
}

.contact-card textarea.form-control {
  min-height: 12rem;
}

.contact-card .btn[type="submit"] {
  min-width: 9rem;
}

.contact-gdpr {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}

.contact-gdpr .form-check-input {
  flex: 0 0 auto;
  margin-top: .25rem;
}

@media (max-width: 575.98px) {
  .contact-card .btn[type="submit"] {
    width: 100%;
  }
}

/* Edit profile module page */
.edit-profile-shell {
  --edit-profile-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
  --edit-profile-card-body-bg: var(--nx-color-card-body-bg, var(--edit-profile-card-bg));
  --edit-profile-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.12))));
  --edit-profile-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --edit-profile-strong: var(--bs-emphasis-color, var(--edit-profile-text));
  --edit-profile-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --edit-profile-input-bg: color-mix(in srgb, var(--edit-profile-card-body-bg) 98%, var(--edit-profile-text) 2%);
  --edit-profile-toolbar-bg: color-mix(in srgb, var(--edit-profile-card-body-bg) 92%, var(--edit-profile-text) 8%);
  --edit-profile-control-bg: color-mix(in srgb, var(--edit-profile-card-body-bg) 96%, var(--edit-profile-text) 4%);
  --edit-profile-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
  color: var(--edit-profile-text);
}

.edit-profile-card {
  background: var(--edit-profile-card-bg);
  border-color: var(--edit-profile-border);
  color: var(--edit-profile-text);
}

.edit-profile-card .card-body {
  background: var(--edit-profile-card-body-bg);
  color: var(--edit-profile-text);
}

.edit-profile-card h4,
.edit-profile-card h5,
.edit-profile-card label {
  color: var(--edit-profile-strong);
}

.edit-profile-card .form-control,
.edit-profile-card .form-select {
  background-color: var(--edit-profile-input-bg);
  border-color: var(--edit-profile-border);
  color: var(--edit-profile-text);
}

.edit-profile-card .form-control::placeholder {
  color: var(--edit-profile-muted);
  opacity: 1;
}

.edit-profile-card .form-control:focus,
.edit-profile-card .form-select:focus {
  background-color: var(--edit-profile-input-bg);
  border-color: var(--edit-profile-accent);
  color: var(--edit-profile-text);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--edit-profile-accent) 18%, transparent);
}

.edit-profile-card hr {
  border-color: var(--edit-profile-border);
  opacity: 1;
}

.edit-profile-card .nx-editor {
  border: var(--bs-border-width, 1px) solid var(--edit-profile-border);
  border-radius: var(--bs-border-radius);
  background: var(--edit-profile-card-body-bg);
  color: var(--edit-profile-text);
  overflow: hidden;
}

.edit-profile-card .nx-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-bottom: var(--bs-border-width, 1px) solid var(--edit-profile-border);
  background: var(--edit-profile-toolbar-bg);
}

.edit-profile-card .nx-editor-toolbar button,
.edit-profile-card .nx-editor-toolbar select,
.edit-profile-card .nx-editor-toolbar input[type="color"] {
  min-height: 30px;
  border: var(--bs-border-width, 1px) solid var(--edit-profile-border);
  border-radius: calc(var(--bs-border-radius) * 0.75);
  background: var(--edit-profile-control-bg);
  color: var(--edit-profile-text);
}

.edit-profile-card .nx-editor-toolbar select {
  width: auto;
  min-width: 110px;
}

.edit-profile-card .nx-editor-toolbar input[type="color"] {
  width: 34px;
  padding: 2px;
}

.edit-profile-card .nx-editor-toolbar button:hover,
.edit-profile-card .nx-editor-toolbar select:hover {
  background: color-mix(in srgb, var(--edit-profile-accent) 12%, var(--edit-profile-control-bg));
  border-color: color-mix(in srgb, var(--edit-profile-accent) 38%, var(--edit-profile-border));
}

.edit-profile-card .nx-editor-toolbar button.active {
  background: var(--edit-profile-accent);
  border-color: var(--edit-profile-accent);
  color: #fff;
}

.edit-profile-card .nx-editor-content,
.edit-profile-card .nx-editor-source {
  min-height: 160px;
  padding: 12px;
  background: var(--edit-profile-input-bg);
  color: var(--edit-profile-text);
  outline: none;
}

.edit-profile-card .nx-editor-content {
  line-height: 1.5;
}

.edit-profile-card .nx-editor-content code,
.edit-profile-card .nx-editor-source code {
  background: color-mix(in srgb, var(--edit-profile-card-body-bg) 84%, var(--edit-profile-text) 16%);
  color: var(--edit-profile-text);
}

.edit-profile-card .nx-editor-content pre,
.edit-profile-card .nx-editor-source pre {
  border-color: var(--edit-profile-border);
  background: color-mix(in srgb, var(--edit-profile-card-body-bg) 90%, var(--edit-profile-text) 10%);
  color: var(--edit-profile-text);
}

.edit-profile-card .nx-editor-source {
  display: none;
  width: 100%;
  border: 0;
  resize: vertical;
  font-family: monospace;
}

.edit-profile-card .nx-editor.is-source-mode .nx-editor-content {
  display: none;
}

.edit-profile-card .nx-editor.is-source-mode .nx-editor-source {
  display: block;
}

.edit-profile-layout > h4 {
  margin-bottom: 1rem;
}

.edit-profile-card .row + .row,
.edit-profile-card .mb-3 + .mb-3 {
  margin-top: .25rem;
}

.edit-profile-card form > h5 {
  margin: 1.5rem 0 1rem;
  padding-top: .25rem;
}

.edit-profile-card .form-label {
  font-weight: 600;
}

.edit-profile-card .form-control,
.edit-profile-card .form-select {
  min-height: 2.75rem;
}

.edit-profile-card textarea.form-control {
  min-height: 7rem;
}

#avatar-preview {
  border: 1px solid var(--edit-profile-border);
  background: color-mix(in srgb, var(--edit-profile-card-body-bg) 94%, var(--edit-profile-text) 6%);
  padding: .25rem;
}

#cropper-container {
  border: 1px solid var(--edit-profile-border);
  border-radius: var(--bs-border-radius);
  background: color-mix(in srgb, var(--edit-profile-card-body-bg) 96%, var(--edit-profile-text) 4%);
  padding: 1rem;
}

.edit-profile-card button[type="submit"] {
  min-width: 9rem;
}

@media (max-width: 575.98px) {
  .edit-profile-card button[type="submit"] {
    width: 100%;
  }
}

/* Imprint module page */
.imprint-shell {
  --imprint-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
  --imprint-card-body-bg: var(--nx-color-card-body-bg, var(--imprint-card-bg));
  --imprint-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.12))));
  --imprint-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --imprint-strong: var(--bs-emphasis-color, var(--imprint-text));
  --imprint-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --imprint-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
  --imprint-soft-bg: color-mix(in srgb, var(--imprint-card-body-bg) 96%, var(--imprint-text) 4%);
  color: var(--imprint-text);
}

.imprint-card {
  background: var(--imprint-card-bg);
  border-color: var(--imprint-border);
  color: var(--imprint-text);
}

.imprint-card .card-body {
  background: var(--imprint-card-body-bg);
  color: var(--imprint-text);
}

.imprint-content,
.imprint-content h1,
.imprint-content h2,
.imprint-content h3,
.imprint-content h4,
.imprint-content h5,
.imprint-content h6,
.imprint-content p,
.imprint-content span,
.imprint-content div,
.imprint-content li,
.imprint-content td,
.imprint-content th {
  color: var(--imprint-text);
}

.imprint-content .fw-semibold,
.imprint-content .fw-bold,
.imprint-content strong,
.imprint-content b {
  color: var(--imprint-strong);
}

.imprint-content .text-muted,
.imprint-content small {
  color: var(--imprint-muted) !important;
}

.imprint-content a {
  color: var(--imprint-accent);
}

.imprint-content a:hover,
.imprint-content a:focus {
  color: color-mix(in srgb, var(--imprint-accent) 80%, var(--imprint-text));
}

.imprint-content hr {
  border-color: var(--imprint-border);
  opacity: 1;
}

.imprint-disclaimer {
  background: var(--imprint-soft-bg);
  border: 1px solid var(--imprint-border);
  border-radius: var(--bs-border-radius, 0.375rem);
  padding: 1rem;
}

.imprint-disclaimer > div > :last-child {
  margin-bottom: 0;
}

/* Policy module pages */
.policy-shell {
  --policy-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
  --policy-card-body-bg: var(--nx-color-card-body-bg, var(--policy-card-bg));
  --policy-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.12))));
  --policy-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --policy-strong: var(--bs-emphasis-color, var(--policy-text));
  --policy-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --policy-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
  --policy-soft-bg: color-mix(in srgb, var(--policy-card-body-bg) 96%, var(--policy-text) 4%);
  color: var(--policy-text);
}

.policy-card {
  background: var(--policy-card-bg);
  border-color: var(--policy-border);
  color: var(--policy-text);
}

.policy-card .card-body {
  background: var(--policy-card-body-bg);
  color: var(--policy-text);
}

.policy-content,
.policy-content h1,
.policy-content h2,
.policy-content h3,
.policy-content h4,
.policy-content h5,
.policy-content h6,
.policy-content p,
.policy-content span,
.policy-content div,
.policy-content li,
.policy-content td,
.policy-content th,
.policy-updated {
  color: var(--policy-text);
}

.policy-content strong,
.policy-content b,
.policy-content .fw-bold,
.policy-content .fw-semibold,
.policy-updated b,
.policy-updated strong {
  color: var(--policy-strong);
}

.policy-content .text-muted,
.policy-content small {
  color: var(--policy-muted) !important;
}

.policy-content a,
.policy-updated a {
  color: var(--policy-accent);
}

.policy-content a:hover,
.policy-content a:focus,
.policy-updated a:hover,
.policy-updated a:focus {
  color: color-mix(in srgb, var(--policy-accent) 80%, var(--policy-text));
}

.policy-content hr {
  border-color: var(--policy-border);
  opacity: 1;
}

.policy-content table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--policy-text);
  --bs-table-border-color: var(--policy-border);
  --bs-table-striped-bg: var(--policy-soft-bg);
  --bs-table-striped-color: var(--policy-text);
  color: var(--policy-text);
  border-color: var(--policy-border);
}

.policy-updated {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--policy-border);
  color: var(--policy-muted);
}

/* Profile module page */
.profile-shell {
  --profile-card-bg: var(--nx-color-card-bg, var(--bs-card-bg, var(--bs-body-bg, #fff)));
  --profile-card-body-bg: var(--nx-color-card-body-bg, var(--profile-card-bg));
  --profile-border: var(--nx-color-card-border, var(--bs-card-border-color, var(--bs-border-color, rgba(0, 0, 0, 0.12))));
  --profile-text: var(--nx-color-on-surface, var(--bs-body-color, #212529));
  --profile-strong: var(--bs-emphasis-color, var(--profile-text));
  --profile-muted: var(--nx-color-muted, var(--bs-secondary-color, #6c757d));
  --profile-accent: var(--nx-color-primary, var(--bs-primary, #0d6efd));
  --profile-soft-bg: color-mix(in srgb, var(--profile-card-body-bg) 94%, var(--profile-text) 6%);
  --profile-hover-bg: color-mix(in srgb, var(--profile-accent) 12%, var(--profile-card-body-bg));
  color: var(--profile-text);
}

.profile-card {
  background: var(--profile-card-bg);
  border-color: var(--profile-border);
  color: var(--profile-text);
}

.profile-card .card-body {
  background: var(--profile-card-body-bg);
  color: var(--profile-text);
}

.profile-card h4,
.profile-card h5,
.profile-card h6,
.profile-card th,
.profile-card td,
.profile-card p {
  color: var(--profile-text);
}

.profile-card .text-muted,
.profile-card small {
  color: var(--profile-muted) !important;
}

.profile-avatar {
  border: 1px solid var(--profile-border);
  border-radius: 50%;
  background: var(--profile-soft-bg);
  padding: 0.25rem;
}

.profile-card .badge.bg-primary,
.profile-card .progress-bar {
  background-color: var(--profile-accent) !important;
}

.profile-card .progress {
  background-color: var(--profile-soft-bg);
  border: 1px solid var(--profile-border);
}

.profile-socials a {
  color: var(--profile-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.profile-socials a:hover,
.profile-socials a:focus {
  color: var(--profile-accent);
  transform: translateY(-1px);
}

.profile-card .btn-outline-primary {
  border-color: var(--profile-accent);
  color: var(--profile-accent);
}

.profile-card .btn-outline-primary:hover,
.profile-card .btn-outline-primary:focus {
  background-color: var(--profile-accent);
  border-color: var(--profile-accent);
  color: var(--bs-white, #fff);
}

.profile-card .nav-tabs {
  border-bottom-color: var(--profile-border);
}

.profile-card .nav-tabs .nav-link {
  background: transparent;
  border-color: transparent;
  color: var(--profile-muted);
}

.profile-card .nav-tabs .nav-link:hover,
.profile-card .nav-tabs .nav-link:focus {
  border-color: var(--profile-border);
  background: var(--profile-hover-bg);
  color: var(--profile-text);
}

.profile-card .nav-tabs .nav-link.active {
  background: var(--profile-card-body-bg);
  border-color: var(--profile-border) var(--profile-border) var(--profile-card-body-bg);
  color: var(--profile-accent);
}

.profile-card .tab-content {
  color: var(--profile-text);
}

.profile-card .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--profile-text);
  --bs-table-border-color: var(--profile-border);
  --bs-table-striped-bg: var(--profile-soft-bg);
  --bs-table-striped-color: var(--profile-text);
  color: var(--profile-text);
  border-color: var(--profile-border);
}

.profile-card .table th {
  color: var(--profile-strong);
  font-weight: 600;
}

.profile-card .table td {
  color: var(--profile-text);
}

.profile-card .alert {
  border-color: var(--profile-border);
}

.profile-card .tab-pane > p {
  color: var(--profile-text);
}

.profile-card .tab-pane > p:empty {
  display: none;
}

.profile-layout {
  margin: 0;
}

.profile-sidebar {
  border: 1px solid var(--profile-border);
  border-radius: var(--nx-theme-radius-lg);
  background: var(--profile-soft-bg);
  padding: 1.5rem;
}

.profile-sidebar h4 {
  margin-bottom: .25rem;
  font-weight: 700;
}

.profile-avatar {
  width: 9.5rem;
  height: 9.5rem;
  object-fit: cover;
  box-shadow: 0 .75rem 1.75rem rgba(15, 23, 42, .12);
}

.profile-card .nav-tabs {
  gap: .25rem;
}

.profile-card .nav-tabs .nav-link {
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  font-weight: 600;
}

.profile-card .tab-content {
  border: 1px solid var(--profile-border);
  border-top: 0;
  border-radius: 0 0 var(--nx-theme-radius-lg) var(--nx-theme-radius-lg);
  padding: 1.25rem;
  background: color-mix(in srgb, var(--profile-card-body-bg) 98%, var(--profile-text) 2%);
}

.profile-card .table {
  margin-bottom: 1.25rem;
}

.profile-card .table th {
  width: 38%;
}

.profile-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--profile-border);
  border-radius: 50%;
  background: var(--profile-card-body-bg);
}

.profile-socials a:hover,
.profile-socials a:focus {
  border-color: color-mix(in srgb, var(--profile-accent) 55%, var(--profile-border));
  background: var(--profile-hover-bg);
}

@media (max-width: 991.98px) {
  .profile-sidebar {
    margin-bottom: .5rem;
  }
}




/* === templates_clan.css === */
/* =========================================================
   Clan / eSports Template CSS
   Ziel: Widgets im Clan-Template optisch komplett von Bootstrap 5
   abheben (Dark / eSports / „MYKD“-Style Richtung).
   Wird über Core-Widget `core_template_scope` geladen.
   ========================================================= */

:root{
  --nx-clan-bg: #131313;
  --nx-clan-bg-2: rgba(17, 17, 17, 0.6);
  --nx-clan-border: rgba(255,255,255,.10);
  --nx-clan-text: rgba(255,255,255,.92);
  --nx-clan-muted: rgba(255,255,255,.68);
  --nx-clan-glow: rgba(13,110,253,.35);
}

/* Pattern entfernt (wie gewünscht) */

/* --- Hero & Header --- */
.nx-clan-hero,
.nx-clan-hero-split,
.nx-clan-header{
  color: var(--nx-clan-text) !important;
}

.nx-clan-header .nx-header-ink{
  color: var(--nx-clan-text) !important;
}
.nx-clan-header .nx-header-ink-muted{
  color: var(--nx-clan-muted) !important;
}

.nx-clan-hero{
  /* Kein !important, damit `background-image` aus Inline-Style (Headerbild) gewinnt. */
  background: linear-gradient(180deg, rgba(5,8,18,.75) 0%, rgba(2,6,23,.95) 100%);
  position: relative;
}

.nx-clan-hero-split{
  /* Kein !important, damit `background-image` aus Inline-Style gewinnt. */
  background: linear-gradient(180deg, rgba(5,8,18,.75) 0%, rgba(2,6,23,.95) 100%);
  position: relative;
}

.nx-clan-hero-ink{
  position: relative;
}

.nx-clan-hero-ink .nx-tk-hero-muted-inverse,
.nx-clan-hero-ink .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

.nx-clan-hero .btn.btn-primary,
.nx-clan-hero .btn.btn-lg.btn-primary{
  border: 1px solid rgba(255,122,24,.60) !important;
  background: linear-gradient(180deg, rgba(255,122,24,.98) 0%, rgba(255,90,0,.88) 100%) !important;
  box-shadow: 0 14px 40px rgba(255,122,24,.18) !important;
  color: #0b0b0b !important;
}

.nx-clan-hero .nx-hero-cta-secondary{
  /* Zweiter Button als "Outline" wie im Referenz-Header */
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,122,24,.85) !important;
  color: rgba(255,255,255,.95) !important;
}
.nx-clan-hero .nx-hero-cta-secondary:hover{
  border-color: rgba(255,122,24,.70) !important;
}

/* Header-spezifische Text-Ausrichtung */
.nx-clan-hero--header .row.justify-content-center{
  justify-content: flex-start !important;
}
.nx-clan-hero--header .container.position-relative{
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.nx-clan-hero--header .col-lg-10.col-xl-8{
  margin-left: 0 !important;
  width: 100%;
  max-width: 720px;
}
.nx-clan-hero--header .nx-hero-inner-ink{
  padding-top: 6vh;
}
.nx-clan-hero--header .nx-hero-inner-ink .d-flex.flex-wrap.gap-2{
  margin-top: 1.25rem;
}
.nx-clan-hero--header h1.display-5{
  font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
}
.nx-clan-hero--header [data-nx-inline="subtitle"]{
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* Overlay-Variante über Carousel (negative margin-top, kein Layout-Shift) */
.nx-clan-hero--overlay{
  background: transparent !important;
  margin-top: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative;
  z-index: 10;
  max-height: 100vh;
  overflow: hidden;
}

/* `nx-overlay-push` aus dem generischen Theme sorgt für Padding-Top.
   Für den Clan-Overlay-Text darf das nicht zusätzlich “aus dem Carousel raus” schieben. */
.nx-clan-hero--overlay.nx-overlay-push{
  padding-top: 0 !important;
}
.nx-clan-hero--overlay .container.position-relative{
  padding-left: 2rem !important;
  padding-right: 2rem !important;
}
.nx-clan-hero--overlay .row.justify-content-center{
  justify-content: flex-start !important;
}
.nx-clan-hero--overlay .col-lg-10.col-xl-8{
  margin-left: 0 !important;
  width: 100%;
  max-width: 720px;
}
.nx-clan-hero--overlay .nx-hero-inner-ink{
  padding-top: 12vh;
}
.nx-clan-hero--overlay .nx-hero-inner-ink .d-flex.flex-wrap.gap-2{
  margin-top: 1.25rem;
}
.nx-clan-hero--overlay h1.display-5{
  font-size: clamp(2.4rem, 5.2vw, 4.6rem) !important;
  line-height: 1.02 !important;
}
.nx-clan-hero--overlay [data-nx-inline="subtitle"]{
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

/* --- Header/Nav Overlay (Carousel oder Hero) --- */
.nx-clan-nav.nx-nav-overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* --- Feature Cards --- */
.nx-clan-feature-grid,
.nx-clan-timeline,
.nx-clan-testimonials,
.nx-clan-faq{
  background: transparent !important;
}

.nx-clan-card{
  background: rgba(2,6,23,.45) !important;
  border: transparent !important;
  border-radius: 0px !important;
  padding: 4rem 2.5rem;
  box-shadow: 0 7px 12px rgba(0,0,0,.35) !important;
  overflow: hidden;
}
.nx-clan-feature-grid a.nx-clan-card,
.nx-clan-feature-grid .nx-clan-card{
  background: rgba(38,38,38,.86) !important;
  border-color: rgba(255,255,255,.12) !important;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), border-color .28s ease;
}
.nx-clan-feature-grid a.nx-clan-card:focus-visible{
  outline: 2px solid var(--nx-color-primary, var(--bs-primary));
  outline-offset: 3px;
}
/* Gesamte Karte ist <a>: Fließtext/Überschrift ohne Link-Linie; „Mehr erfahren“ nutzt .nx-tk-link-theme (Basis-Design) */
.nx-clan-feature-grid a.nx-clan-card-link{
  text-decoration: none;
}
.nx-clan-feature-grid a.nx-clan-card-link h3,
.nx-clan-feature-grid a.nx-clan-card-link p{
  text-decoration: none;
}
.nx-clan-feature-grid .nx-clan-card .card-body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.nx-clan-feature-grid a.nx-clan-card::before{
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 18% 18%, rgba(var(--bs-primary-rgb, 13,110,253), .34) 0%, rgba(var(--bs-primary-rgb, 13,110,253), .14) 30%, rgba(var(--bs-primary-rgb, 13,110,253), 0) 68%),
    radial-gradient(circle at 78% 82%, rgba(var(--bs-primary-rgb, 13,110,253), .22) 0%, rgba(var(--bs-primary-rgb, 13,110,253), .10) 26%, rgba(var(--bs-primary-rgb, 13,110,253), 0) 62%);
  opacity: 0;
  transform: scale(.94);
  transition: opacity .32s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  z-index: 0;
}
.nx-clan-feature-grid a.nx-clan-card:hover{
  cursor: pointer;
  transform: translateY(-6px);
  border-color: rgba(var(--bs-primary-rgb, 13,110,253), .55) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--bs-primary-rgb, 13,110,253), .22) !important;
}

/* Feature-Grid: „Mehr erfahren“ – Platz immer reserviert (kein Layout-Sprung), sichtbar nur bei Hover */
.nx-clan-feature-grid .nx-clan-card-learn-more{
  display: block;
  width: 100%;
  text-align: center;
  margin-top: auto;
  padding-top: .75rem;
  min-height: 1.5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--nx-color-primary) !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.22,.61,.36,1);
}
.nx-clan-feature-grid a.nx-clan-card:hover .nx-clan-card-learn-more{
  opacity: 1;
  transform: translateY(0);
  color: var(--nx-color-primary) !important;
  text-decoration: var(--bs-link-decoration, none) !important;
}
.nx-clan-feature-grid a.nx-clan-card:hover::before{
  opacity: 1;
  transform: scale(1);
}
.nx-clan-card .card-body{
  padding: 1.25rem !important;
  position: relative;
  z-index: 1;
}
.nx-clan-feature-grid > .container > h2,
.nx-clan-feature-grid > .container > p{
  color: var(--bs-body-color) !important;
}
.nx-clan-feature-grid{
  color: inherit !important;
}

.nx-clan-icon{
  color: var(--nx-color-primary) !important;
  padding-bottom: 20px !important;
}
/* Icon: Standard = Textfarbe; Primärfarbe + stärkerer Zoom erst bei Hover auf der Karte */
.nx-clan-feature-grid .nx-clan-icon{
  color: var(--bs-body-color) !important;
  transform: scale(1);
  transform-origin: center;
  transition: color .28s ease, transform .28s cubic-bezier(.22,.61,.36,1), filter .28s ease;
}
.nx-clan-feature-grid .nx-clan-icon i.fs-3{
  font-size: 2.5rem !important;
}
.nx-clan-feature-grid a.nx-clan-card:hover .nx-clan-icon{
  color: var(--nx-color-primary) !important;
  transform: scale(1.8);
  filter: drop-shadow(0 10px 22px rgba(var(--bs-primary-rgb, 13,110,253), .32));
}

/* --- Timeline --- */
.nx-clan-timeline-rail{
  background: rgba(13,110,253,.30) !important;
}
.nx-clan-timeline-dot.bg-primary{
  background: rgba(13,110,253,.95) !important;
  box-shadow: 0 0 0 6px rgba(13,110,253,.12), 0 10px 30px rgba(13,110,253,.22);
}
.nx-clan-timeline-dot.bg-success{
  background: rgba(25,135,84,.95) !important;
}
.nx-clan-timeline-dot.bg-warning{
  background: rgba(255,193,7,.95) !important;
}
.nx-clan-timeline .nx-tk-text-muted,
.nx-clan-timeline .nx-tk-text-primary,
.nx-clan-timeline{
  color: var(--nx-clan-text) !important;
}
.nx-clan-timeline .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

/* --- FAQ / Accordion --- */
.nx-clan-faq .nx-clan-accordion-item{
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  background: rgba(2,6,23,.35) !important;
  overflow: hidden;
}

.nx-clan-faq .nx-clan-accordion-button{
  background: rgba(2,6,23,.22) !important;
  color: var(--nx-clan-text) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
.nx-clan-faq .nx-clan-accordion-button:not(.collapsed){
  background: rgba(13,110,253,.18) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nx-clan-faq .accordion-body{
  color: var(--nx-clan-muted) !important;
}

/* --- Testimonials --- */
.nx-clan-testimonial-card{
  background: rgba(2,6,23,.35) !important;
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
}
.nx-clan-testimonials .nx-tk-text-muted{
  color: var(--nx-clan-muted) !important;
}

/* --- Quote --- */
.nx-clan-quote{
  background: radial-gradient(circle at 20% 0%, rgba(13,110,253,.12) 0%, rgba(2,6,23,.68) 60%, rgba(2,6,23,.88) 100%) !important;
  border: 1px solid var(--nx-clan-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  padding: 1.5rem !important;
}
.nx-clan-blockquote{
  margin: 0;
}
.nx-clan-quote .blockquote-footer{
  color: var(--nx-clan-muted) !important;
}

/* --- Footer --- */
.nx-clan-footer{
  background: var(--nx-clan-bg) !important;
  border-top: 1px solid rgba(255,255,255,.12) !important;
}
.nx-clan-footer *{
  color: var(--nx-clan-text) !important;
}
.nx-clan-footer a{
  color: rgba(255,255,255,.70) !important;
}
.nx-clan-footer a:hover{
  color: var(--nx-color-primary) !important;
}

/* --- Slider / Carousel --- */
.nx-clan-slider .carousel-control-prev-icon,
.nx-clan-slider .carousel-control-next-icon{
  filter: invert(1) drop-shadow(0 8px 16px rgba(0,0,0,.4));
}

.nx-clan-slider{
  position: relative;
  margin-bottom: 0 !important; /* verhindert extra Scroll durch mb-4 */
  height: 100vh;
  overflow: hidden;
}
.nx-clan-slider > h2,
.nx-clan-slider > p{
  position: absolute;
  left: 2.5rem;
  top: 48%;
  z-index: 5;
  width: min(560px, 92%);
  text-shadow: 0 12px 45px rgba(0,0,0,.75);
}
.nx-clan-slider > p{
  top: 57%;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
  color: rgba(255,255,255,.86) !important;
}

.nx-clan-slider .carousel{
  position: relative;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  border-radius: 0;
  /* Stacking-Context, damit z-index sauber greift */
  z-index: 0;
}
.nx-clan-slider .carousel-inner{
  height: 100vh;
  position: relative;
  isolation: isolate; /* eigener Stacking-Context für saubere Layering-Reihenfolge */
}
.nx-clan-slider .carousel-item{
  height: 100vh;
  position: relative;
  z-index: 2; /* Slides liegen über der Vignette */
}
.nx-clan-slider .carousel-item .ratio{
  height: 100%;
  padding-bottom: 0 !important; /* überschreibt Bootstrap ratio-aspect-ratio */
  position: relative;
}
.nx-clan-slider .carousel-item .ratio img{
  height: 100% !important;
  position: absolute;
  inset: 0;
  z-index: 0;
}
.nx-clan-slider .carousel-item .ratio::after{
  content: "";
  position: absolute;
  inset: 0;
  /* Vollflächige Vignette + leichter Left-Gradient für Lesbarkeit */
  background:
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.25) 55%,
      rgba(0,0,0,.70) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.22) 38%,
      rgba(0,0,0,.10) 62%,
      rgba(0,0,0,0) 100%);
  /* Vignette direkt auf dem Bild-Wrapper */
  z-index: 1;
  pointer-events: none;
}

@media (max-width: 768px){
  html:has(.nx-clan-nav),
  body:has(.nx-clan-nav){
    overflow-y: auto !important;
    overscroll-behavior-y: auto;
    touch-action: auto;
  }
  .nx-clan-slider > h2,
  .nx-clan-slider > p{
    left: 1.25rem;
    width: min(520px, 90%);
  }
  .nx-clan-slider .carousel-caption:has(.nx-clan-slider-caption){
    left: 1.25rem !important;
    width: min(520px, 90%) !important;
  }
  .nx-clan-slider .carousel{
    height: 100vh;
    min-height: 100vh;
  }
  .nx-clan-slider,
  .nx-clan-slider .carousel,
  .nx-clan-slider .carousel-inner,
  .nx-clan-slider .carousel-item,
  .nx-live-item:has(.nx-clan-slider),
  .nx-live-item:has(.nx-clan-slider) + .nx-live-item .nx-clan-hero--overlay,
  .nx-live-item:has(.nx-clan-slider) ~ .nx-live-item .nx-clan-hero--overlay{
    height: 100svh;
    min-height: 100svh;
  }
  .nx-clan-slider,
  .nx-clan-slider .carousel,
  .nx-clan-hero--overlay{
    touch-action: auto;
  }
}

/* --- Carousel + Overlay-Text: Overlay nimmt keinen zusätzlichen Layout-Space --- */
.nx-live-item:has(.nx-clan-slider){
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.nx-live-item:has(.nx-clan-slider) + .nx-live-item .nx-clan-hero--overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  margin-top: 0 !important;
  overflow: hidden;
  z-index: 30;
}

/* Fallback: falls zwischen Slider und Overlay noch weitere nx-live-items liegen */
.nx-live-item:has(.nx-clan-slider) ~ .nx-live-item .nx-clan-hero--overlay{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  margin-top: 0 !important;
  overflow: hidden;
  z-index: 30;
}
.nx-clan-slider .carousel-caption{
  bottom: 1.25rem;
  /* Bootstrap erwartet absolute Positionierung; nur Layering erhöhen */
  position: absolute !important;
  z-index: 2 !important;
}
.nx-clan-slider .carousel-caption:has(.nx-clan-slider-caption){
  top: auto !important;
  bottom: 15% !important;
  left: 5.5rem !important;
  transform: none !important;
  right: auto !important;
  padding: 0 !important;
  text-align: left !important;
  z-index: 2 !important;
}
.nx-clan-slider-caption{
  width: min(560px, 92%);
}
.nx-clan-slider-eyebrow{
  font-size: 16px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.95) !important;
  margin-bottom: .85rem;
}
.nx-clan-slider-title{
  font-size: 96px !important;
  line-height: 1.02 !important;
  margin: 0 0 1rem 0 !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-primary{
  border: 1px solid rgba(255,122,24,.60) !important;
  background: linear-gradient(180deg, rgba(255,122,24,.98) 0%, rgba(255,90,0,.88) 100%) !important;
  box-shadow: 0 14px 40px rgba(255,122,24,.18) !important;
  color: #0b0b0b !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-secondary{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,122,24,.85) !important;
  color: rgba(255,255,255,.95) !important;
}
.nx-clan-slider-ctas .nx-clan-slider-cta-secondary:hover{
  border-color: rgba(255,122,24,.70) !important;
}

/* --- Carousel Caption Animation (unten -> oben, gestaffelt) --- */
@keyframes nx-clan-rise-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 72px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes nx-clan-zoom-in-slow {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.085);
  }
}

.nx-clan-slider .carousel-item .nx-clan-slider-eyebrow,
.nx-clan-slider .carousel-item .nx-clan-slider-title,
.nx-clan-slider .carousel-item .nx-clan-slider-ctas .btn{
  opacity: 0;
  transform: translate3d(0, 72px, 0);
  will-change: transform, opacity;
}

/* Subtiler Ken-Burns-Effekt pro aktivem Slide */
.nx-clan-slider .carousel-item .ratio img{
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
}
.nx-clan-slider .carousel-item.active .ratio img{
  animation: nx-clan-zoom-in-slow 7.5s ease-out forwards;
}

.nx-clan-slider .carousel-item.active .nx-clan-slider-eyebrow{
  animation: nx-clan-rise-in .64s ease-out .12s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-title{
  animation: nx-clan-rise-in .74s ease-out .28s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-ctas .btn:nth-child(1){
  animation: nx-clan-rise-in .68s ease-out .46s forwards;
}
.nx-clan-slider .carousel-item.active .nx-clan-slider-ctas .btn:nth-child(2){
  animation: nx-clan-rise-in .68s ease-out .60s forwards;
}
.nx-clan-slider .nx-tk-slider-caption--dark{
  background: rgba(5,8,18,.75) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.nx-clan-slider .nx-tk-slider-caption--light{
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.95) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

/* --- Gallery --- */
.nx-clan-gallery figure{
  border-radius: var(--nx-radius-lg) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(2,6,23,.35) !important;
}
.nx-clan-gallery img{
  filter: saturate(1.05) contrast(1.05);
}
.nx-clan-gallery figcaption{
  color: rgba(255,255,255,.70) !important;
}

/* --- Logo-Marquee (Clan) --- */
.nx-clan-logo-marquee{
}

/* --- Navigation --- */
.nx-clan-nav .nav-link{
  color: var(--bs-link-color, var(--nx-color-link)) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}
.nx-clan-nav .nav-link:hover,
.nx-clan-nav .nav-link:focus{
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  text-decoration: none !important;
}
.nx-clan-nav .dropdown-menu{
  background: rgba(5,8,18,.98) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}
.nx-clan-nav .dropdown-item{
  color: var(--bs-link-color, var(--nx-color-link)) !important;
}
.nx-clan-nav .dropdown-item:hover,
.nx-clan-nav .dropdown-item:focus{
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 16%, transparent) !important;
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

@media (max-width: 991.98px){
  .nx-clan-nav .navbar-toggler{
    border-color: rgba(255,255,255,.38) !important;
    color: rgba(255,255,255,.9) !important;
    box-shadow: none !important;
  }
  .nx-clan-nav .navbar-toggler-icon{
    filter: invert(1) grayscale(1) brightness(2);
  }
  .nx-clan-nav .navbar-collapse{
    padding-top: .35rem;
    max-height: calc(100dvh - 3.25rem);
    overflow-y: auto;
    overscroll-behavior: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
  }
  .nx-clan-nav .navbar-nav{
    gap: 0 !important;
  }
  .nx-clan-nav .navbar-nav .nav-link{
    display: flex;
    align-items: center;
    min-height: 2rem;
    padding: .35rem 0 !important;
    font-size: .8rem;
    line-height: 1.2;
  }
  .nx-clan-nav .dropdown-menu{
    margin: .1rem 0 .35rem;
    padding: .2rem 0 !important;
    box-shadow: none;
  }
  .nx-clan-nav .dropdown-item{
    padding: .35rem .75rem !important;
    font-size: .78rem;
    line-height: 1.2;
  }
}


/* === stylesheet.css === */
/* Main Layout */

/* Sticky Footer Layout nur im Frontend-Theme
   Struktur (Frontend, ohne Builder-Wrapper um die Widgets):
   <body>
     <div class="sticky-footer-wrapper">
       ... Navigation / Lock-Modul ...
       <main class="flex-fill">
         [optional <div class="container">get_mainContent()</div>]
         <div data-nx-zone="content">
           <section>...</section>
           ...
           <footer class="nx-footer">...</footer>
         </div>
       </main>
       <!-- Theme-/Plugin-Footer -->
     </div>
   </body>
*/

/* min-height statt height, damit die Seite mit dem Inhalt wächst und der Footer nie abgeschnitten wird */
html {
  min-height: 100%;
}
body {
  min-height: 100vh;
}

.sticky-footer-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sticky-footer-wrapper > main.flex-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0; /* Flex-Kind darf Platz bekommen; Inhalt wächst trotzdem durch min-height: auto der Zone */
}

.sticky-footer-wrapper > main.flex-fill > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sticky-footer-wrapper [data-nx-zone="content"] {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: min-content; /* Zone mindestens so hoch wie Inhalt (Footer in voller Höhe sichtbar) */
  overflow: visible;
}

/* Fallback für ältere Browser ohne min-content */
@supports not (min-height: min-content) {
  .sticky-footer-wrapper [data-nx-zone="content"] {
    min-height: auto;
  }
}

/* Falls ein Page-/Content-Builder-Footer (class="nx-footer") als Block in der
   Content-Zone liegt, wird er an das untere Ende des Viewports geschoben.
   Footer sitzt in .nx-live-item > .nx-live-content > footer.nx-footer */
.sticky-footer-wrapper [data-nx-zone="content"] > .nx-live-item:has(.nx-footer),
.sticky-footer-wrapper [data-nx-zone="content"] > .nx-footer {
  margin-top: auto;
}

/* Footer „Über uns & Hilfe“ (core_footer_3col): Fließtext nicht über volle Spaltenbreite ziehen */
.nx-footer .nx-footer-3col-about {
  max-width: min(20rem, 100%);
}

/* Hero-Sections aus dem Builder (core_hero)
   Höhe wird über nx-hero-h-* (40/50/60/80/100vh) gesteuert. */
.nx-hero {
  display: flex;
  align-items: center;
  position: relative;
}

.nx-hero > .container {
  position: relative;
  z-index: 1;
}

/* Hero mit Hintergrundbild: Overlay über Token (Template/Basis-Design) */
.nx-hero .nx-hero-media-overlay {
  background-color: var(--nx-hero-overlay-scrim, rgba(2, 6, 23, 0.55)) !important;
  pointer-events: none;
}

/* Sekundär-CTA: Modus sitzt an der Section (.nx-hero--text-*) */
.nx-hero.nx-hero--text-light .nx-hero-cta-secondary {
  color: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  background-color: transparent !important;
}
.nx-hero.nx-hero--text-light .nx-hero-cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
  color: #fff !important;
}
.nx-hero.nx-hero--text-dark .nx-hero-cta-secondary {
  color: var(--nx-color-primary) !important;
  border: 1px solid var(--nx-color-primary) !important;
  background-color: transparent !important;
}
.nx-hero.nx-hero--text-dark .nx-hero-cta-secondary:hover {
  background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.1) !important;
}

/* Linker Content-Block ähnlich "col-md-6" */
.nx-hero .text-start {
  max-width: 560px;
}

@media (max-width: 767.98px) {
  .nx-hero .text-start {
    max-width: 100%;
  }
}

/* Split-Hero (core_hero_split) */
.nx-hero-split {
  /* Höhe steuert jetzt nx-hero-h-* (40/50/60/80/100vh) */
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
  padding: 0;
}

.nx-hero-split .nx-hero-split-text {
  max-width: 480px;
}

.nx-hero-split .nx-hero-split-image {
  position: relative;
  min-height: 100%;
}
.nx-hero-split .nx-hero-split-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nx-hero-split .nx-hero-split-placeholder {
  width: 100%;
  height: 100%;
  background: var(--nx-placeholder-surface, #e5e7eb);
}

/* core_header: Text-Overlay & Platzhalter-Gradient über Tokens */
.nx-header .nx-header-content-overlay{
  background: var(--nx-header-content-scrim, rgba(0, 0, 0, 0.4)) !important;
}
.nx-header .nx-header-image.nx-header-image--fallback{
  background: var(--nx-header-fallback-gradient, radial-gradient(circle at top, #1e293b, #020617));
}

@media (min-width: 768px) {
  .nx-hero-split .nx-hero-split-image {
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 767.98px) {
  .nx-hero-split .nx-hero-split-text {
    max-width: 100%;
    text-align: center;
  }
}

/* Dezenter Hover-Effekt für Navbar-Links + Abstand */
.navbar-nav .nav-link {
  position: relative;
  border-bottom: 0 !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}
/* Kein Fokus-Ring/Outline, damit nur die 2px-Unterstreichung sichtbar ist (keine 4px durch Ãœberlagerung) */
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.dropdown-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Animierte Unterstreichung mit ::before (damit .dropdown-toggle ::after für Bootstrap-Caret frei bleibt) */
/* Nur außerhalb .nx-nav-core-demo – dort zeichnet das Widget eigenes Inline-::before, sonst doppelter/dicker Balken bei Dropdown */
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-default::before,
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-center::before,
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-swipe::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px !important;
  min-height: 2px !important;
  max-height: 2px !important;
  background-color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary))));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease-out;
  pointer-events: none;
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-default:hover::before,
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-default:focus::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown.show > .nav-link.nx-nav-effect-default::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default::before {
  transform: scaleX(1);
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-center::before {
  left: 50%;
  right: auto;
  width: 100%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center center;
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-center:hover::before,
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-center:focus::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown.show > .nav-link.nx-nav-effect-center::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-swipe::before {
  transform: scaleX(0);
  transform-origin: left center;
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-swipe:hover::before,
.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-swipe:focus::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe::before,
.navbar:not(.nx-nav-core-demo) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe::before {
  transform: scaleX(1);
  transform-origin: left center;
}

.navbar:not(.nx-nav-core-demo) .navbar-nav .nav-link.nx-nav-effect-swipe:not(:hover):not(:focus)::before {
  transform: scaleX(0);
  transform-origin: right center;
}

/* core_nav_demo: Link- und Brand-Text = Theme (theme_options).
   Hover Primary: ohne Linien-Effekt (257–261); mit Linien-Effekt (278+). Kein separater „Effekt = nur Theme-Text“-Block mehr – der hätte gleiche Spezifität wie 278+ gestört. */
.nx-nav-core-demo:not(.nx-nav-overlay) .navbar-nav .nav-link,
.nx-nav-core-demo:not(.nx-nav-overlay) .navbar-brand {
  color: var(--nx-nav-fg, var(--bs-link-color, var(--nx-color-link, var(--bs-body-color, #212529)))) !important;
}
.nx-nav-core-demo:not(.nx-nav-overlay) .navbar-nav .nav-link:not(.nx-nav-effect-default):not(.nx-nav-effect-center):not(.nx-nav-effect-swipe):hover,
.nx-nav-core-demo:not(.nx-nav-overlay) .navbar-nav .nav-link:not(.nx-nav-effect-default):not(.nx-nav-effect-center):not(.nx-nav-effect-swipe):focus,
.nx-nav-core-demo:not(.nx-nav-overlay) .nav-item.dropdown.show > .nav-link:not(.nx-nav-effect-default):not(.nx-nav-effect-center):not(.nx-nav-effect-swipe),
.nx-nav-core-demo:not(.nx-nav-overlay) .nav-item.dropdown:hover > .nav-link:not(.nx-nav-effect-default):not(.nx-nav-effect-center):not(.nx-nav-effect-swipe) {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
}

/* Gleicher dezenter Hover-Hintergrund wie bei Links ohne Linien-Effekt (Primary-Ton bzw. Weiß), explizit für Effekt-Links – bleibt sichtbar neben fester Linkfarbe */
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-default:hover,
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-default:focus,
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-center:hover,
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-center:focus,
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
.nx-nav-core-demo.navbar-light .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
.nx-nav-core-demo.navbar-light .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
.nx-nav-core-demo.navbar-light .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
.nx-nav-core-demo.navbar-light .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
.nx-nav-core-demo.navbar-light .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
.nx-nav-core-demo.navbar-light .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
.nx-nav-core-demo.navbar-light .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-default:hover,
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-default:focus,
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-center:hover,
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-center:focus,
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
.nx-nav-core-demo.navbar-dark .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
.nx-nav-core-demo.navbar-dark .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .nav-item.dropdown.show > .nav-link,
.navbar-light .nav-item.dropdown:hover > .nav-link {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .nav-item.dropdown.show > .nav-link,
.navbar-dark .nav-item.dropdown:hover > .nav-link {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}

/* Moderne Dropdown-Box für core_nav_demo */
.nx-nav-core-demo .dropdown-menu {
  padding: 0px;
  margin: 0px;
  border-radius: 0px;
  border: 1px solid transparent;
  --nx-dd-hover-bg: rgba(255,255,255,.18);
  background: var(--nx-dd-bg, var(--nx-nav-bg, rgba(255, 255, 255, 1)));
  color: var(--nx-dd-fg, var(--nx-nav-fg, inherit));
  min-width: 12rem;
  box-shadow: var(--nx-dd-shadow, 0 4px 6px rgba(15, 23, 42, 0.08));
}

.nx-nav-core-demo .dropdown-item {
  padding: .8rem 1rem;
  color: var(--nx-dd-fg, var(--bs-link-color, var(--nx-color-link))) !important;
  transition: background-color 0.35s ease, color 0.35s ease;
}
.nx-nav-core-demo .dropdown-item:hover,
.nx-nav-core-demo .dropdown-item:focus {
  background: var(--nx-dd-hover-bg, rgba(255,255,255,.18)) !important;
  color: var(--nx-dd-hover-fg, var(--bs-link-hover-color, var(--bs-primary))) !important;
}
.nx-nav-core-demo .dropdown-divider {
  margin: .4rem .35rem;
  border-color: var(--nx-dd-border, rgba(0,0,0,.28));
}

/* Navbar-Brand: kein vertikales Padding, Höhe soll über Logo + Link-Padding kommen */
.navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 991.98px){
  #mainNavbar.navbar,
  nav.nx-nav-core-demo.navbar{
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    touch-action: auto;
  }
  #mainNavbar.navbar > .container,
  #mainNavbar.navbar > .container-fluid,
  nav.nx-nav-core-demo.navbar > .container,
  nav.nx-nav-core-demo.navbar > .container-fluid{
    min-height: 0 !important;
    height: auto !important;
    align-items: center !important;
  }
  #mainNavbar .navbar-collapse,
  nav.nx-nav-core-demo .navbar-collapse{
    width: 100%;
    flex-basis: 100%;
    max-height: none !important;
    overflow: visible !important;
    padding-top: .25rem !important;
    padding-bottom: .35rem !important;
    touch-action: auto;
  }
  #mainNavbar .navbar-nav,
  nav.nx-nav-core-demo .navbar-nav{
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    align-self: auto !important;
    align-items: stretch !important;
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #mainNavbar .navbar-nav > .nav-item,
  nav.nx-nav-core-demo .navbar-nav > .nav-item{
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }
  #mainNavbar .navbar-nav .nav-link,
  nav.nx-nav-core-demo .navbar-nav .nav-link{
    width: 100%;
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding-top: .28rem !important;
    padding-bottom: .28rem !important;
    line-height: 1.2 !important;
  }
  #mainNavbar .dropdown-menu,
  nav.nx-nav-core-demo .dropdown-menu{
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
    margin: .1rem 0 .25rem !important;
    padding: .1rem 0 !important;
  }
  #mainNavbar .dropdown-item,
  nav.nx-nav-core-demo .dropdown-item{
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
    line-height: 1.2 !important;
  }
}

/* =========================================================
   core_nav_demo: Transparent Overlay + Scroll-Fill
   ========================================================= */
nav.nx-nav-core-demo.nx-nav-pin-fixed,
nav.nx-nav-core-demo.nx-nav-pin-scroll.nx-nav-is-fixed{
  position: fixed;
  left: 0;
  right: 0;
  top: var(--nx-nav-pin-top, 0px);
  z-index: 1035;
}
nav.nx-nav-core-demo.nx-nav-pin-scroll.nx-nav-is-sticky{
  position: sticky;
  top: var(--nx-nav-pin-top, 0px);
  z-index: 1035;
}
.nx-nav-pin-spacer{
  display: block;
  width: 100%;
  height: 0;
  pointer-events: none;
}
nav.nx-nav-core-demo.nx-nav-pin-fixed + .nx-nav-pin-spacer,
nav.nx-nav-core-demo.nx-nav-pin-scroll.nx-nav-is-fixed + .nx-nav-pin-spacer{
  display: block;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-pin-fixed + .nx-nav-pin-spacer,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-pin-scroll + .nx-nav-pin-spacer{
  display: none !important;
  height: 0 !important;
}
nav.nx-nav-core-demo.nx-nav-pin-scroll + .nx-nav-pin-spacer{
  display: none !important;
}
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-pin-fixed):not(.nx-nav-pin-scroll){
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  --nx-overlay-progress: 0;
  /* ScrollFill: Navbar-Fläche (--nx-nav-surface-*), nicht Seitenhintergrund – siehe scheme-Regeln unten */
  /* box-shadow nur im transparenten Zustand unterdrücken (siehe :not(.nx-nav-filled)), sonst greift „Schatten (gefüllt)“ (.shadow-sm) nicht */
  transition: background-color .32s cubic-bezier(.22,.61,.36,1), box-shadow .32s cubic-bezier(.22,.61,.36,1), color .24s ease;
  will-change: background-color, box-shadow;
}
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-fill-scheme="dark"]{
  background-color: color-mix(in srgb, var(--nx-nav-custom-bg, var(--nx-nav-surface-dark-bg)) calc(var(--nx-overlay-progress, 0) * 100%), transparent) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay:not([data-nx-fill-scheme="dark"]){
  background-color: color-mix(in srgb, var(--nx-nav-custom-bg, var(--nx-nav-surface-light-bg)) calc(var(--nx-overlay-progress, 0) * 100%), transparent) !important;
}
/* Startzustand: Alpha/Progress macht die Transparenz.
   Box-Shadow/Backdrop nur im NOT-filled Zustand hart unterdrücken. */
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html body nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled),
html body nav.nx-nav-core-demo.nx-nav-overlay.bg-transparent:not(.nx-nav-filled){
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* Wichtig: Bootstrap bg-* Utilities (z.B. bg-transparent) können sonst das ScrollFill überschreiben. */
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"]{
  background-color: var(--nx-nav-custom-bg, var(--nx-nav-surface-dark-bg)) !important;
  background-image: none !important;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]){
  background-color: var(--nx-nav-custom-bg, var(--nx-nav-surface-light-bg)) !important;
  background-image: none !important;
}
/* Schatten (gefüllt): per data-nx-filled-shadow – zuverlässig sichtbar auf dem Frontend */
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-filled-shadow="shadow-sm"]{
  box-shadow: var(--bs-box-shadow-sm, 0 .125rem .25rem rgba(0, 0, 0, .075)) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-filled-shadow="shadow"]{
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0, 0, 0, .15)) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-filled-shadow="shadow-lg"]{
  box-shadow: var(--bs-box-shadow-lg, 0 1rem 3rem rgba(0, 0, 0, .175)) !important;
}
/* data-nx-overlay-text: "light" = helle Schrift (weißlich) für dunklen Hero; "dark" = dunkle Schrift für weiße/helle Leiste */
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-brand{
  color: rgba(255,255,255,.92) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-brand{
  color: rgba(15,23,42,.92) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-brand{
  color: rgba(255,255,255,.92) !important;
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-brand{
  color: rgba(15,23,42,.92) !important;
}

/* Overlay + Linien-Effekt: Hover/Fokus/Dropdown = Primary + dezenter Primary-Hintergrund.
   Wichtig: `nav…`-Selektoren, damit diese Regeln nach den Basis-Overlay-Farben (412–427) greifen und nicht von `.navbar-light`-Regeln (278+) übersprungen werden. */
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-default:hover,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-default:focus,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-center:hover,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-center:focus,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay:not(.nx-nav-filled)[data-nx-overlay-text="light"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: rgba(255,255,255,.86) !important;
  background: rgba(255,255,255,.06);
}
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-default:hover,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-default:focus,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-center:hover,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-center:focus,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay[data-nx-overlay-text="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: rgba(15,23,42,.92) !important;
  background: rgba(255,255,255,.06);
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-default:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-default:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-center:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-center:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled[data-nx-fill-scheme="dark"] .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-default:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-default:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-center:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-center:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-swipe:hover,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .navbar-nav .nav-link.nx-nav-effect-swipe:focus,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown.show > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown.show > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown.show > .nav-link.nx-nav-effect-swipe,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-default,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-center,
nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-filled:not([data-nx-fill-scheme="dark"]) .nav-item.dropdown:hover > .nav-link.nx-nav-effect-swipe {
  color: var(--nx-color-link-hover, var(--bs-link-hover-color, var(--nx-color-primary, var(--bs-primary)))) !important;
  background: color-mix(in srgb, var(--nx-color-link-hover, var(--nx-color-primary, var(--bs-primary))) 6%, transparent);
}

/* Overlay-Abstand: JS setzt --nx-overlay-safe-top + Klasse auf den ersten Hero */
.nx-overlay-push{
  padding-top: var(--nx-overlay-safe-top, 96px) !important;
}

/* Header (core_header): Textblock unter die Overlay-Navbar schieben,
   ohne den Header-Block selbst nach unten zu drücken (Overlay bleibt Overlay). */
html.nx-has-overlay-nav header.nx-header .nx-header-image > .position-absolute.d-flex{
  justify-content: flex-start !important;
  /* Deutlich unter die Navbar schieben, damit der Text im Builder gut editierbar ist
     und nicht "hinter" der transparenten Nav sitzt. */
  padding-top: calc(var(--nx-overlay-safe-top, 96px) + 3rem) !important;
}

/* Builder: Overlay-Nav darf nicht am .nx-live-item „kleben“ (position:relative) */
body.builder-active nav.nx-nav-core-demo.nx-nav-overlay{
  /* Im Builder innerhalb des Widget-Frames rendern, sonst verschwindet die Nav
     (Builder-Layout/Overflow), und es bleibt nur der Rahmen sichtbar.
     !important: Frontend-Regel …nx-nav-overlay:not(.nx-nav-pin-fixed):not(.nx-nav-pin-scroll)
     hat höhere Spezifität (position:fixed; top:0; z-index ~1030) und würde sonst gewinnen —
     die Leiste landet dann unter .nx-live-toolbar (extremer z-index). */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  /* Muss über Header-Textlayer liegen (core_header nutzt z-index:2 inline) */
  z-index: 50 !important;
}

/* Builder: Navbar-Zone — nie viewport-fixed; gilt auch ohne .nx-live-item (Fallback-Pfade). */
body.builder-active [data-nx-zone="navbar"]{
  position: relative;
}
body.builder-active [data-nx-zone="navbar"] > .nx-live-item .nx-live-content > nav.nx-nav-core-demo,
body.builder-active [data-nx-zone="navbar"] > nav.nx-nav-core-demo{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  z-index: 5 !important;
}
body.builder-active [data-nx-zone="navbar"] > .nx-live-item .nx-live-content > nav.nx-nav-core-demo.nx-nav-overlay,
body.builder-active [data-nx-zone="navbar"] > nav.nx-nav-core-demo.nx-nav-overlay{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
}

/* Builder: Pin/Fix-Modi niemals an den Viewport heften.
   Sonst landet die Demo-Nav hinter der Builder-Topbar statt im Widget-Block. */
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-pin-fixed,
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-pin-scroll.nx-nav-is-fixed,
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-pin-scroll.nx-nav-is-sticky{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  z-index: 5 !important;
  transform: none !important;
  opacity: 1 !important;
}
/* Falls Overlay + Pin kombiniert ist, trotzdem im Widget-Frame halten */
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-pin-fixed,
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-pin-scroll.nx-nav-is-fixed,
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content > nav.nx-nav-core-demo.nx-nav-overlay.nx-nav-pin-scroll.nx-nav-is-sticky{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  transform: none !important;
  opacity: 1 !important;
}
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-nav-pin-spacer{
  display: none !important;
  height: 0 !important;
}

/* Builder: core_nav_demo muss Layout-Höhe behalten, sonst wirkt es "leer" */
body.builder-active .nx-live-item[data-nx-key="core_nav_demo"] .nx-live-content{
  position: relative;
  min-height: 72px;
}

/* Builder: Content-Zone muss Overlays zulassen (Header+Nav) */
body.builder-active [data-nx-zone="content"]{
  overflow: visible !important;
}

/* Icon-Badges (Messenger/Forum) – wie im navigation-Plugin */
.nx-nav-core-demo .nav-icon-badge .icon-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}
.nx-nav-core-demo .nav-icon-badge .badge{
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 3px 6px;
  font-size: .6rem;
  line-height: 1;
  border-radius: 50%;
  z-index: 5;
}
.nx-nav-core-demo .navbar-avatar{
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

/* =========================================================
   Nexpell Theme-Tokens (--nx-*)
   Werden in theme_options.php / Basis-Design gesetzt (Bootstrap + semantische Aliase).
   Bausteine: möglichst var(--nx-*) statt fester Farben – Template-Wechsel zieht optisch nach.
   ========================================================= */
.nx-tk-text-primary{ color: var(--nx-color-primary) !important; }
.nx-tk-text-muted{ color: var(--nx-color-muted) !important; }
.nx-tk-text-on-surface{ color: var(--nx-color-on-surface) !important; }
.nx-tk-bg-surface{ background-color: var(--nx-color-surface) !important; }
.nx-tk-rounded{ border-radius: var(--nx-radius-md) !important; }
.nx-tk-shadow-card{ box-shadow: var(--nx-shadow-card) !important; }
.nx-tk-section-py{ padding-top: var(--nx-spacing-section); padding-bottom: var(--nx-spacing-section); }
.nx-tk-block-mb{ margin-bottom: var(--nx-spacing-block); }

/* Flächen & Kanten (Template-System): Footer, Nav, Medien, Timeline */
.nx-tk-bg-footer{ background-color: var(--nx-color-footer-bg) !important; }
.nx-tk-border-footer-top{ border-top: 1px solid var(--nx-color-footer-border) !important; }
.nx-tk-nav-surface-light{ background-color: var(--nx-nav-surface-light-bg) !important; }
.nx-tk-nav-surface-dark{
  background-color: var(--nx-nav-surface-dark-bg) !important;
  border-bottom: 1px solid var(--nx-color-footer-border, rgba(255, 255, 255, 0.1)) !important;
}
/* Builder-Nav: gefüllte Leiste nutzt Navbar-Token, nicht Body-BG */
nav.nx-nav-core-demo.nx-tk-nav-surface-dark:not(.nx-nav-overlay){
  background-color: var(--nx-nav-surface-dark-bg) !important;
}
nav.nx-nav-core-demo.nx-tk-nav-surface-light:not(.nx-nav-overlay){
  background-color: var(--nx-nav-surface-light-bg) !important;
}
.nx-tk-media-placeholder{
  background-color: var(--nx-media-placeholder-bg) !important;
  color: var(--nx-media-placeholder-fg) !important;
}
.nx-tk-timeline-rail{ background-color: var(--nx-timeline-rail-bg) !important; }
.nx-tk-timeline-dot-neutral{ background-color: var(--nx-timeline-dot-neutral) !important; }
.nx-tk-border-primary{ border-color: var(--nx-color-primary) !important; }

/* Logo-Marquee: endloser Lauf rechts → links; Pause bei Hover über der Leiste; Logo-Hover = volle Opacity */
@keyframes nx-marquee-x{
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.nx-logo-marquee__viewport{
  overflow: hidden;
  width: 100%;
  min-height: 3.5rem;
}
.nx-logo-marquee__track{
  display: flex;
  width: max-content;
  animation: nx-marquee-x var(--nx-marquee-duration, 45s) linear infinite;
  will-change: transform;
}
.nx-logo-marquee__viewport:hover .nx-logo-marquee__track,
.nx-logo-marquee__viewport:focus-within .nx-logo-marquee__track{
  animation-play-state: paused;
}
.nx-logo-marquee__strip{
  display: flex;
  flex: 0 0 auto;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-right: clamp(2rem, 5vw, 4rem);
  min-height: 3.5rem;
}
.nx-logo-marquee__item{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-logo-marquee__hit{
  display: flex;
  align-items: center;
  justify-content: center;
}
.nx-logo-marquee__img{
  opacity: .68;
  transition: opacity .25s ease;
  filter: grayscale(.08);
}
.nx-logo-marquee__item:hover .nx-logo-marquee__img,
.nx-logo-marquee__item:focus-within .nx-logo-marquee__img{
  opacity: 1;
  filter: grayscale(0);
}
@media (prefers-reduced-motion: reduce){
  .nx-logo-marquee__track{
    animation: none !important;
  }
  .nx-logo-marquee__img{
    opacity: 1;
    filter: none;
  }
}

/* Link-Farbe & -Decoration aus Basis-Design (--bs-link-*); für Inline-Elemente in z. B. Card-as-Link (ohne zweites <a>) */
.nx-tk-link-theme{
  color: var(--bs-link-color, var(--nx-color-link)) !important;
  text-decoration: var(--bs-link-decoration, none) !important;
}
a:hover .nx-tk-link-theme,
a:focus-visible .nx-tk-link-theme{
  color: var(--bs-link-hover-color, var(--nx-color-link-hover)) !important;
  text-decoration: var(--bs-link-hover-decoration, var(--bs-link-decoration, none)) !important;
}

/* Hero: Standard-Hintergrund „dunkel“ über Token (gespeicherte class bg-dark bleibt kompatibel) */
.nx-hero.bg-dark{
  background-color: var(--nx-hero-surface-solid, var(--bs-dark)) !important;
}

/* Hero/Split: Textfarbe aus Modus-Klasse + eine innere Wrapper-Klasse (kein text-white/text-dark im Markup) */
.nx-hero.nx-hero--text-light .nx-hero-inner-ink,
.nx-hero-split.nx-hero-split--text-light .nx-hero-inner-ink{
  color: var(--nx-on-inverse-text) !important;
}
.nx-hero.nx-hero--text-dark .nx-hero-inner-ink,
.nx-hero-split.nx-hero-split--text-dark .nx-hero-inner-ink{
  color: var(--nx-color-on-surface) !important;
}
/* Bootstrap setzt --bs-heading-color auf Überschriften – sonst bleibt Hero-Text dunkel trotz Textmodus */
.nx-hero.nx-hero--text-light .nx-hero-inner-ink :where(h1, h2, h3, h4, h5, h6, p, .lead, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6),
.nx-hero-split.nx-hero-split--text-light .nx-hero-inner-ink :where(h1, h2, h3, h4, h5, h6, p, .lead, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6){
  color: inherit !important;
}
.nx-hero.nx-hero--text-dark .nx-hero-inner-ink :where(h1, h2, h3, h4, h5, h6, p, .lead, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6),
.nx-hero-split.nx-hero-split--text-dark .nx-hero-inner-ink :where(h1, h2, h3, h4, h5, h6, p, .lead, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6){
  color: inherit !important;
}
.nx-hero.nx-hero--text-light .nx-tk-hero-muted-inverse,
.nx-hero-split.nx-hero-split--text-light .nx-tk-hero-muted-inverse{
  color: var(--nx-on-inverse-muted) !important;
}

/* core_header: Text auf Bild/Overlay über Token */
.nx-header .nx-header-ink{ color: var(--nx-on-inverse-text) !important; }
.nx-header .nx-header-ink-muted{ color: var(--nx-on-inverse-muted) !important; }

/* Vignette: Stop/Alpha kommen aus Inline-Style am Layer, RGB aus Theme */
.nx-header .nx-header-vignette-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    transparent var(--nx-header-vignette-stop, 40%),
    rgba(var(--nx-header-vignette-rgb), var(--nx-header-vignette-alpha, 0.5)) 100%
  );
}

/* Slider-Beschriftungen (core_slider) */
.nx-tk-slider-caption--dark{
  background: var(--nx-slider-caption-bg-dark) !important;
  color: var(--nx-slider-caption-fg-light) !important;
}
.nx-tk-slider-caption--light{
  background: var(--nx-slider-caption-bg-light) !important;
  color: var(--nx-slider-caption-fg-dark) !important;
  box-shadow: var(--nx-shadow-card) !important;
}

/* Slider Overlay-Caption (Text auf Bild) */
.nx-slider .nx-slider-overlay-caption{
  max-width: min(560px, 92%);
  text-align: left;
  padding: .35rem .2rem;
  border-radius: .4rem;
  backdrop-filter: none;
  border: 0;
}
.nx-slider .nx-slider-stage{
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(320px, 56.25vw, 75vh);
  max-height: 100vh;
}
.nx-slider .nx-slider-vignette-layer{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at center,
    rgba(0, 0, 0, 0) 24%,
    rgba(0, 0, 0, calc(var(--nx-slider-vignette-alpha, .44) * .45)) 62%,
    rgba(0, 0, 0, var(--nx-slider-vignette-alpha, .44)) 100%
  );
}
.nx-slider .nx-slider-stage.nx-slider-stage-h-md{
  height: clamp(300px, 50vw, 60vh);
}
.nx-slider .nx-slider-stage.nx-slider-stage-h-lg{
  height: clamp(320px, 56.25vw, 75vh);
}
.nx-slider .nx-slider-stage.nx-slider-stage-h-xl{
  height: clamp(340px, 62vw, 90vh);
}
.nx-slider .nx-slider-stage.nx-slider-stage-h-screen{
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
}
.nx-slider .nx-slider-stage > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
}
/* Subtiler Langzeit-Zoom (Ken Burns) pro aktiver Slide */
.nx-slider .carousel-item.active .nx-slider-stage > img{
  animation: nxSliderKenBurns 11s ease-out both;
}
@keyframes nxSliderKenBurns{
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .nx-slider .carousel-item.active .nx-slider-stage > img{
    animation: none !important;
  }
}
.nx-slider .nx-slider-overlay-caption--dark{
  background: transparent;
  color: #fff;
  box-shadow: none;
}
.nx-slider .nx-slider-overlay-caption--light{
  background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(248, 250, 252, .84));
  color: #0f172a;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .22);
}
.nx-slider .nx-slider-overlay-caption--none{
  background: transparent;
  color: #fff;
  padding: .2rem 0;
  box-shadow: none;
}
.nx-slider .nx-slider-overlay-subtitle{
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .95;
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.nx-slider .nx-slider-overlay-title{
  font-size: clamp(2rem, 4.2vw, 4.2rem);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.01em;
  margin-bottom: .7rem;
  text-wrap: balance;
  text-shadow: 0 8px 28px rgba(0,0,0,.6);
}
.nx-slider .nx-slider-overlay-text{
  font-size: clamp(1rem, 1.05vw, 1.12rem);
  line-height: 1.45;
  opacity: .96;
  max-width: 70ch;
  text-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.nx-slider .carousel-caption{
  position: absolute;
  z-index: 5;
  left: 2.8%;
  right: 2.8%;
  bottom: 6%;
}
.nx-slider .carousel-indicators{
  z-index: 6;
  margin-bottom: 1rem;
  left: 0;
  right: 0;
  width: auto;
  transform: none;
  background: transparent;
  border: 0;
  backdrop-filter: none;
  box-shadow: none;
}
.nx-slider .carousel-indicators [data-bs-target]{
  width: 30px;
  height: 3px;
  margin-right: 3px;
  margin-left: 3px;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  background-color: #fff;
  opacity: .5;
  transition: opacity .6s ease;
}
.nx-slider .carousel-indicators [data-bs-target]:hover{
  opacity: .8;
  transform: none;
}
.nx-slider .carousel-indicators .active{
  opacity: 1;
  width: 30px;
  height: 3px;
  background-color: #fff;
  box-shadow: none;
}
/* core_gallery – nur den Block/Container auf der Seite zentrieren (Grid bleibt Bootstrap-Row) */
.nx-gallery-wrap.nx-gallery--align-center {
  margin-left: auto;
  margin-right: auto;
}
.nx-gallery-wrap.nx-gallery--align-center:not(.container):not(.nx-keep-container) {
  width: 100%;
  max-width: 1140px;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
.nx-gallery-wrap.nx-gallery--align-center .row.nx-gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.nx-gallery--align-center .nx-gallery-figure figcaption {
  text-align: center;
}
.nx-gallery.nx-gallery--align-end.row {
  justify-content: flex-end;
}

.nx-slider .nx-slider-overlay-align-start{
  margin-right: auto;
  text-align: left;
}
.nx-slider .nx-slider-overlay-align-center{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.nx-slider .nx-slider-overlay-align-end{
  margin-left: auto;
  text-align: right;
}
.nx-slider .nx-slider-overlay-align-center .nx-slider-overlay-ctas{
  justify-content: center;
}
.nx-slider .nx-slider-overlay-align-end .nx-slider-overlay-ctas{
  justify-content: flex-end;
}
.nx-slider .nx-slider-overlay-caption--light .btn-outline-light{
  --bs-btn-color: #0f172a;
  --bs-btn-border-color: rgba(15, 23, 42, .26);
  --bs-btn-hover-color: #0f172a;
  --bs-btn-hover-bg: rgba(15, 23, 42, .08);
  --bs-btn-hover-border-color: rgba(15, 23, 42, .32);
}
.nx-slider .nx-slider-caption-fx{
  opacity: 0;
  animation-duration: .65s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.2,.65,.2,1);
}
.nx-slider .carousel-item.active .nx-slider-caption-fx{
  opacity: 1;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-fade-up{
  animation-name: nxSliderFadeUp;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-fade{
  animation-name: nxSliderFade;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-zoom{
  animation-name: nxSliderZoom;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-cascade{
  animation-name: nxSliderFade;
}
.nx-slider .nx-slider-caption-fx-cascade .nx-slider-overlay-subtitle,
.nx-slider .nx-slider-caption-fx-cascade .nx-slider-overlay-title,
.nx-slider .nx-slider-caption-fx-cascade .nx-slider-overlay-text,
.nx-slider .nx-slider-caption-fx-cascade .nx-slider-overlay-ctas{
  opacity: 0;
  transform: translateY(16px);
  filter: blur(4px);
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-cascade .nx-slider-overlay-subtitle{
  animation: nxSliderCascadeIn .48s both;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-cascade .nx-slider-overlay-title{
  animation: nxSliderCascadeIn .58s .09s both;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-cascade .nx-slider-overlay-text{
  animation: nxSliderCascadeIn .62s .18s both;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-cascade .nx-slider-overlay-ctas{
  animation: nxSliderCascadeIn .62s .28s both;
}
.nx-slider .carousel-item.active .nx-slider-caption-fx-glow{
  animation-name: nxSliderGlowDrift;
}
.nx-slider .nx-slider-caption-fx-glow{
  opacity: 0;
  transform: translateY(8px) scale(.985);
}
@keyframes nxSliderFadeUp{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nxSliderFade{
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nxSliderZoom{
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nxSliderCascadeIn{
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes nxSliderGlowDrift{
  0% { opacity: 0; transform: translateY(8px) scale(.985); box-shadow: 0 0 0 rgba(99,102,241,0); }
  55% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 16px 38px rgba(56,189,248,.25); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 12px 30px rgba(15,23,42,.22); }
}

@media (max-width: 992px) {
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__inner,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__copy,
  html body .nxm-page.nxm-page--commerce .nxm-media-split,
  html body .nxm-page.nxm-page--commerce .nxm-media-split__copy,
  html body .nxm-page.nxm-page--commerce .nxm-video-block {
    text-align: center !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce {
    display: flex !important;
    justify-content: center !important;
    padding-inline: 1rem !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 42rem !important;
    margin-inline: auto !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__copy,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__aside,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__shot,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__panel,
  html body .nxm-page.nxm-page--commerce .nxm-media-split,
  html body .nxm-page.nxm-page--commerce .nxm-media-split__copy,
  html body .nxm-page.nxm-page--commerce .nxm-media-split__visual,
  html body .nxm-page.nxm-page--commerce .nxm-video-frame {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__copy,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__aside {
    width: 100% !important;
    max-width: 42rem !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-hero__aside,
  html body .nxm-page.nxm-page--commerce .nxm-media-split {
    align-items: center !important;
    justify-items: center !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-kicker,
  html body .nxm-page.nxm-page--commerce .nxm-hero.nxm-hero--commerce .nxm-eyebrow,
  html body .nxm-page.nxm-page--commerce .nxm-media-split .nxm-eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body .nxm-page.nxm-page--commerce .nxm-actions {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (max-width: 767.98px) {
  html body footer.nx-footer.nx-tk-bg-footer {
    text-align: center !important;
  }

  html body footer.nx-footer.nx-tk-bg-footer > .container > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 24rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  html body footer.nx-footer.nx-tk-bg-footer .d-flex.flex-column,
  html body footer.nx-footer.nx-tk-bg-footer .nx-footer-title-row,
  html body footer.nx-footer.nx-tk-bg-footer ul.nav-footer,
  html body footer.nx-footer.nx-tk-bg-footer .nav-footer.flex-column,
  html body footer.nx-footer.nx-tk-bg-footer .nx-footer-gear-host {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  html body footer.nx-footer.nx-tk-bg-footer .nx-footer-title-row h6,
  html body footer.nx-footer.nx-tk-bg-footer .nav-footer .nav-link {
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }

  html body footer.nx-footer.nx-tk-bg-footer .fs-4.d-flex,
  html body footer.nx-footer.nx-tk-bg-footer .nav-footer:not(.flex-column) {
    justify-content: center !important;
  }
}

@media (max-width: 991.98px) {
  html body #mainNavbar.navbar .navbar-toggler {
    --nx-toggler-line-color: rgba(255,255,255,1);
    width: 2.35rem !important;
    height: 2.05rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    border: 1px solid var(--nx-toggler-line-color) !important;
    background-color: rgba(10,12,16,.86) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.36), 0 6px 16px rgba(0,0,0,.32) !important;
    opacity: 1 !important;
  }

  html body #mainNavbar.navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .15rem rgba(255,255,255,.3), 0 6px 16px rgba(0,0,0,.32) !important;
  }

  html body #mainNavbar.navbar .navbar-toggler-icon,
  html body #mainNavbar.navbar.navbar-light .navbar-toggler-icon,
  html body #mainNavbar.navbar.navbar-dark .navbar-toggler-icon,
  html body #mainNavbar.navbar[data-bs-theme="light"] .navbar-toggler-icon,
  html body #mainNavbar.navbar[data-bs-theme="dark"] .navbar-toggler-icon,
  html body #mainNavbar.navbar.nx-tk-nav-surface-light .navbar-toggler-icon,
  html body #mainNavbar.navbar.nx-tk-nav-surface-dark .navbar-toggler-icon {
    position: relative !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    filter: none !important;
    opacity: 1 !important;
    background-image: none !important;
    background-color: transparent !important;
  }

  html body #mainNavbar.navbar .navbar-toggler-icon::before {
    content: "";
    position: absolute;
    left: 0;
    top: .08rem;
    width: 100%;
    height: 3px;
    border-radius: 999px;
    background: var(--nx-toggler-line-color) !important;
    box-shadow:
      0 .46rem 0 var(--nx-toggler-line-color),
      0 .92rem 0 var(--nx-toggler-line-color);
  }
}

/* Footer: Nach oben + Cookie-Einstellungen (alle core_footer_* Widgets) */
footer .nx-footer-utility {
  border-top: 1px solid color-mix(in srgb, var(--nx-tk-border-footer, rgba(148, 163, 184, 0.35)) 100%, transparent);
}

footer .nx-footer-utility-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--nx-tk-border-footer, rgba(148, 163, 184, 0.45)) 100%, transparent);
  background: transparent;
  color: var(--nx-tk-text-muted, #94a3b8);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

footer .nx-footer-utility-btn:hover,
footer .nx-footer-utility-btn:focus-visible {
  background: color-mix(in srgb, var(--nx-tk-link, #3b82f6) 12%, transparent);
  color: var(--nx-tk-link, #3b82f6);
  border-color: color-mix(in srgb, var(--nx-tk-link, #3b82f6) 40%, transparent);
  outline: none;
}

footer .nx-footer-utility-btn .bi {
  font-size: 1.1rem;
  pointer-events: none;
}

footer #back-to-top,
footer #cookie-settings-icon {
  /* Legacy-IDs aus älteren Layouts */
}