/* ==========================================================================
   NOBLECLEAN — KOMPONENTENEBENE
   --------------------------------------------------------------------------
   Namensraum `ds-` (design system). Gegen die 499 bestehenden .nc-Klassen
   geprüft: null Kollisionen. Alt und neu laufen deshalb parallel, und eine
   Seite kann Stück für Stück umgestellt werden statt in einem Rutsch.

   Regeln:
   - Kein Wert steht hier hart. Alles kommt aus tokens.css.
   - Kein !important. Wenn eines nötig wird, steht der Grund daneben.
   - Hintergrund und Textfarbe kommen immer als Paar. Deshalb kann keine
     Kombination entstehen, die den Kontrast bricht.
   ========================================================================== */

/* ── 1 · Layout ─────────────────────────────────────────────────────────── */

.ds-wrap{
  max-width:var(--ds-content);
  margin-inline:auto;
  padding-inline:var(--ds-space-lg);
}

.ds-sec{ padding-block:var(--ds-space-3xl); }
.ds-sec--tight{ padding-block:var(--ds-space-2xl); }

/* Die drei Sektionsarten. Mehr braucht die Site nicht.
   Jede setzt Fläche UND Schrift, deshalb ist Kontrast strukturell garantiert. */
.ds-sec--light, .sec--light{ background:var(--nc-surface); color:var(--nc-text); }
.ds-sec--tint,  .sec--tint { background:var(--nc-bg);      color:var(--nc-text); }
.ds-sec--dark,  .sec--dark { background:var(--nc-navy);    color:var(--nc-on-dark); }

.ds-sec--light :is(h1,h2,h3,h4), .sec--light :is(h1,h2,h3,h4),
.ds-sec--tint  :is(h1,h2,h3,h4), .sec--tint  :is(h1,h2,h3,h4){ color:var(--nc-text-strong); }
.ds-sec--dark  :is(h1,h2,h3,h4), .sec--dark  :is(h1,h2,h3,h4){ color:var(--nc-white); }

.ds-sec--light .ds-muted, .sec--light .ds-muted, .sec--light .mini,
.ds-sec--tint  .ds-muted, .sec--tint  .ds-muted, .sec--tint  .mini{ color:var(--nc-muted); }
.ds-sec--dark  .ds-muted, .sec--dark  .ds-muted, .sec--dark  .mini{ color:var(--nc-on-dark-muted); }

.ds-sec--light a:not(.ds-btn):not(.btn),
.ds-sec--tint  a:not(.ds-btn):not(.btn){ color:var(--nc-teal-text); }
.ds-sec--dark  a:not(.ds-btn):not(.btn){ color:var(--nc-on-dark-accent); }

/* ── 2 · Raster ─────────────────────────────────────────────────────────── */

.ds-grid{ display:grid; gap:var(--ds-space-lg); }

@media (min-width:760px){
  .ds-grid--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ds-grid--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ds-grid--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1080px){
  .ds-grid--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* ── 3 · Typografie ─────────────────────────────────────────────────────── */

:is(h1,h2,h3,h4){
  font-family:var(--nc-font-heading);
  letter-spacing:-0.022em;
  text-wrap:balance;
}
h1{ font-family:var(--nc-font-display); letter-spacing:-0.03em; }
h2{ font-family:var(--nc-font-heading); letter-spacing:-0.025em; }
body, p, li, td { font-family:var(--nc-font-body); }

.ds-text-gradient{
  background:linear-gradient(135deg, var(--nc-text-strong) 25%, var(--nc-teal-text) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ds-sec--dark .ds-text-gradient{
  background:linear-gradient(135deg, #FFFFFF 30%, var(--nc-teal-light) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ds-eyebrow{
  display:inline-block;
  font-size:.78rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase;
  margin-bottom:var(--ds-space-sm);
}
.ds-sec--light .ds-eyebrow,
.ds-sec--tint  .ds-eyebrow{ color:var(--nc-teal-text); }
.ds-sec--dark  .ds-eyebrow{ color:var(--nc-teal-light); }

.ds-lead{ font-size:1.12rem; line-height:1.6; max-width:var(--ds-measure); }
.ds-measure{ max-width:var(--ds-measure); }

/* ── 4 · Karten ─────────────────────────────────────────────────────────── */

.ds-card{
  background:var(--nc-surface);
  color:var(--nc-text);
  border:1px solid var(--nc-line);
  border-radius:var(--nc-radius);
  padding:var(--ds-space-xl);
  box-shadow:var(--nc-shadow);
  will-change:transform, box-shadow, border-color;
  transition:transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition);
}
.ds-card :is(h2,h3,h4){ color:var(--nc-text-strong); }
.ds-card .ds-muted{ color:var(--nc-muted); }

.ds-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--nc-shadow-lg);
  border-color:var(--nc-line-hover);
}

/* Karte auf dunklem Grund: gläsern statt weiß, sonst blendet die Sektion. */
.ds-sec--dark .ds-card{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-color:rgba(255,255,255,.14);
  color:var(--nc-on-dark);
  box-shadow:0 14px 34px -8px rgba(0,0,0,.25);
}
.ds-sec--dark .ds-card :is(h2,h3,h4){ color:var(--nc-white); }
.ds-sec--dark .ds-card .ds-muted{ color:var(--nc-on-dark-muted); }
.ds-sec--dark .ds-card:hover{
  transform:translateY(-4px);
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.24);
  box-shadow:0 24px 50px -10px rgba(0,0,0,.35);
}

/* ── 5 · Buttons & Mikro-Interaktionen ───────────────────────────────────── */

.ds-btn, .btn{
  display:inline-flex; align-items:center; gap:.65em;
  padding:.88em 1.75em;
  border:2px solid transparent;
  border-radius:var(--nc-radius-pill);
  font-family:var(--ds-font-body);
  font-size:.98rem; font-weight:700; line-height:1;
  text-decoration:none; cursor:pointer;
  position:relative;
  will-change:transform, box-shadow;
  transition:transform var(--nc-transition), box-shadow var(--nc-transition), background-color var(--nc-transition), border-color var(--nc-transition), color var(--nc-transition);
}
.ds-btn:focus-visible, .btn:focus-visible{ outline:3px solid var(--nc-teal); outline-offset:3px; }
.ds-btn:hover, .btn:hover{ transform:translateY(-2px); }
.ds-btn:active, .btn:active{ transform:translateY(0) scale(0.98); }

.ds-btn svg, .ds-btn .ds-icon, .btn svg{
  transition:transform var(--nc-transition-spring);
}
.ds-btn:hover svg, .ds-btn:hover .ds-icon, .btn:hover svg{
  transform:translateX(3px);
}

/* Primär = Gelb mit sanftem Glow */
.ds-btn--primary, .btn--primar, .btn--primary{
  background:var(--nc-accent);
  color:var(--nc-on-accent);
  box-shadow:var(--nc-shadow-btn);
}
.ds-btn--primary:hover, .btn--primar:hover, .btn--primary:hover{
  background:var(--nc-accent-hover);
  box-shadow:var(--nc-shadow-btn-hover);
}

.ds-btn--ghost, .btn--geist{
  background:transparent;
  color:var(--nc-teal-text);
  border-color:var(--nc-teal);
  box-shadow:none;
}
.ds-btn--ghost:hover, .btn--geist:hover{
  background:var(--nc-teal-pale);
  border-color:var(--nc-teal-dark);
  box-shadow:var(--nc-shadow-sm);
}
.ds-sec--dark .ds-btn--ghost, .sec--dark .btn--geist{ color:var(--nc-on-dark-accent); border-color:var(--nc-on-dark-accent); }
.ds-sec--dark .ds-btn--ghost:hover, .sec--dark .btn--geist:hover{ background:rgba(143,243,231,.12); }

.ds-btn-row{ display:flex; flex-wrap:wrap; gap:var(--ds-space-md); margin-top:var(--ds-space-lg); }

/* Globale Veredelung bestehender Kadence Buttons */
.kt-button, .wp-block-button__link {
  border-radius:var(--nc-radius-pill) !important;
  transition:transform var(--nc-transition), box-shadow var(--nc-transition) !important;
  will-change:transform;
}
.kt-button:hover, .wp-block-button__link:hover {
  transform:translateY(-2px) !important;
}
.kt-button:active, .wp-block-button__link:active {
  transform:translateY(0) scale(0.98) !important;
}

/* NobleClean Unified Radiant Gold Pill CTAs & Wizard Actions */
.nc-hero-btn-primary,
.nc-glass-btn-primary,
.ncb-btn--p,
.header-cta-btn,
.nc-btn-header-cta,
.nc-district-cta-btn,
.nc-btn-accent,
.nc-cta-primary,
.nc-btn-main,
.nc-qw-btn-next,
.nc-qw-submit-btn,
.nc-float-offer,
.nc-mb-btn-quote,
.nc-pricing-btn,
.nc-lh-cta-btn,
body .nc-qw-btn-next,
body button.nc-qw-btn-next {
  border-radius: 9999px !important;
  background: #F5B301 !important;
  color: #231A00 !important;
  font-weight: 700 !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 6px 20px rgba(245, 179, 1, 0.35) !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body .nc-qw-btn-next:hover,
body button.nc-qw-btn-next:hover {
  background: #2DD4BF !important;
  color: #081422 !important;
  border-color: #2DD4BF !important;
  box-shadow: 0 0 22px rgba(45, 212, 191, 0.45) !important;
  transform: translateY(-2px) !important;
}

body .nc-qw-btn-prev,
body button.nc-qw-btn-prev {
  border-radius: 9999px !important;
  border: 1.5px solid #CBD5E1 !important;
  background: #FFFFFF !important;
  color: #475569 !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

body .nc-qw-btn-prev:hover,
body button.nc-qw-btn-prev:hover {
  background: #F1F5F9 !important;
  color: #0B192C !important;
  border-color: #94A3B8 !important;
}

/* ── 6 · Icons ──────────────────────────────────────────────────────────────
   Ersetzt die 1.848 Emoji im Content. Emoji rendern je nach Betriebssystem
   anders und werden von Screenreadern vorgelesen ("Häkchen-Symbol"). */

.ds-icon{
  width:26px; height:26px;
  fill:none; stroke:var(--nc-teal);
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  flex:none;
}
.ds-sec--dark .ds-icon{ stroke:var(--nc-teal-light); }
.ds-icon--lg{ width:34px; height:34px; }

/* ── 7 · Hinweisblöcke ──────────────────────────────────────────────────── */

.ds-note{
  border-left:4px solid var(--nc-teal);
  background:var(--nc-note-bg);
  color:var(--nc-text);
  padding:var(--ds-space-md) var(--ds-space-lg);
  border-radius:0 var(--nc-radius-sm) var(--nc-radius-sm) 0;
  margin-block:var(--ds-space-lg);
}
.ds-note--warn{ border-left-color:var(--nc-accent); background:var(--nc-note-warn-bg); }
.ds-note--stop{ border-left-color:var(--nc-error); background:var(--nc-note-stop-bg); }

/* ── 8 · Tabellen ──────────────────────────────────────────────────────────
   Breite Tabellen scrollen in ihrem eigenen Container. Die Seite selbst
   darf nie horizontal scrollen. */

.ds-table-scroll{
  overflow-x:auto;
  border:1px solid var(--nc-line);
  border-radius:var(--nc-radius-sm);
  -webkit-overflow-scrolling:touch;
}
.ds-table{ width:100%; border-collapse:collapse; font-size:.94rem; background:var(--nc-surface); }
.ds-table :is(th,td){ text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--nc-line); vertical-align:top; }
.ds-table th{ font-weight:700; color:var(--nc-text-strong); background:var(--nc-table-head-bg); }
.ds-table tr:last-child :is(th,td){ border-bottom:0; }

/* ── 9 · Zugänglichkeit ─────────────────────────────────────────────────── */

.ds-visually-hidden{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Sichtbarer Fokus für alles Fokussierbare. Kadence entfernt ihn stellenweise,
   deshalb hier explizit wieder hergestellt. */
.ds-sec :is(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--nc-teal);
  outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  .ds-card,.ds-btn{ transition:none; }
}

/* ── 11 · Anbindung an den Block-Editor ────────────────────────────────────
   functions.php registriert vier Block-Styles für core/group. WordPress hängt
   dafür `is-style-<name>` an den Block. Hier bekommen diese Klassen dieselben
   Regeln wie die ds-Klassen — dadurch kann eine Redakteurin im Editor
   "NC Sektion dunkel" wählen, ohne CSS anzufassen und ohne dass ein einziger
   inline-Style entsteht. */

.wp-block-group.is-style-nc-sec-light,
.wp-block-group.is-style-nc-sec-tint,
.wp-block-group.is-style-nc-sec-dark{ padding-block:var(--ds-space-3xl); }

.wp-block-group.is-style-nc-sec-light{ background:var(--nc-surface); color:var(--nc-text); }
.wp-block-group.is-style-nc-sec-tint { background:var(--nc-bg);      color:var(--nc-text); }
.wp-block-group.is-style-nc-sec-dark { background:var(--nc-navy);    color:var(--nc-on-dark); }

.wp-block-group.is-style-nc-sec-light :is(h1,h2,h3,h4),
.wp-block-group.is-style-nc-sec-tint  :is(h1,h2,h3,h4){ color:var(--nc-text-strong); }
.wp-block-group.is-style-nc-sec-dark  :is(h1,h2,h3,h4){ color:var(--nc-white); }

.wp-block-group.is-style-nc-sec-dark a:not(.ds-btn){ color:var(--nc-on-dark-accent); }
.wp-block-group.is-style-nc-sec-light a:not(.ds-btn),
.wp-block-group.is-style-nc-sec-tint  a:not(.ds-btn){ color:var(--nc-teal-text); }

.wp-block-group.is-style-nc-card{
  background:var(--nc-surface);
  color:var(--nc-text);
  border:1px solid var(--nc-line);
  border-radius:var(--nc-radius);
  padding:var(--ds-space-xl);
  box-shadow:var(--nc-shadow-sm);
  transition:box-shadow var(--nc-transition), border-color var(--nc-transition);
}
.wp-block-group.is-style-nc-card:hover{ box-shadow:var(--nc-shadow); border-color:var(--nc-line-hover); }
.wp-block-group.is-style-nc-card :is(h2,h3,h4){ color:var(--nc-text-strong); }

.is-style-nc-sec-dark .wp-block-group.is-style-nc-card{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.14);
  color:var(--nc-on-dark);
  box-shadow:none;
}
.is-style-nc-sec-dark .wp-block-group.is-style-nc-card :is(h2,h3,h4){ color:var(--nc-white); }

.wp-block-group.is-style-nc-double-bezel{
  padding:var(--nc-bezel-pad);
  border-radius:var(--nc-bezel-outer-r);
  background:linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 250, 0.75) 100%);
  border:1px solid var(--nc-bezel-border);
  box-shadow:var(--nc-bezel-glow);
  transition:transform var(--nc-transition-fluid);
}
.wp-block-group.is-style-nc-double-bezel:hover{
  transform:translateY(-4px);
}
.is-style-nc-sec-dark .wp-block-group.is-style-nc-double-bezel{
  background:linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color:var(--nc-bezel-dark-border);
  box-shadow:var(--nc-bezel-dark-glow);
}

/* ── 12 · Übergangshilfe ────────────────────────────────────────────────────
   Solange noch nicht alle 161 Seiten umgestellt sind, laufen alte
   `.nc-`-Sektionen weiter. Sie beziehen ihre Farben aus denselben Tokens,
   also verschiebt sich nichts. Diese Datei greift sie NICHT an — bewusst.
   Der Abbau passiert Gruppe für Gruppe beim Umbau der jeweiligen Seiten. */

/* ── 13 · Antigravity Spatial Depth & Weightless Motion ──────────────────── */
.ds-antigravity-float {
  box-shadow: 0 20px 40px -15px rgba(18, 50, 74, 0.08), 0 0 1px rgba(18, 50, 74, 0.12);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
.ds-antigravity-float:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 28px 60px -15px rgba(18, 50, 74, 0.16), 0 0 2px rgba(14, 169, 155, 0.3);
}

.ds-antigravity-glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 20px 50px rgba(14, 169, 155, 0.06);
}

.ds-sec--dark .ds-antigravity-glass {
  background: rgba(22, 33, 58, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.ds-antigravity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: var(--nc-radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 25px -5px rgba(18, 50, 74, 0.1);
  will-change: transform;
  transition: transform 0.3s ease-out;
}
.ds-antigravity-badge:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .ds-antigravity-float,
  .ds-antigravity-badge {
    transform: none !important;
    transition: none !important;
  }
}

/* ── 14 · Globale Veredelung: Kadence Blöcke, FAQs & Divider ─────────────── */

/* Info-Boxen: Schwebende Leichtigkeit & sanfter Lift */
.kt-blocks-info-box-link-wrap {
  border-radius: var(--nc-radius) !important;
  box-shadow: var(--nc-shadow) !important;
  transition: transform var(--nc-transition), box-shadow var(--nc-transition), border-color var(--nc-transition) !important;
  will-change: transform, box-shadow;
}
.kt-blocks-info-box-link-wrap:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--nc-shadow-lg) !important;
}

/* FAQ / Akkordeons: Taktile Mikro-Interaktion beim Öffnen */
.kt-accordion-panel {
  border-radius: var(--nc-radius-sm) !important;
  border: 1px solid var(--nc-line) !important;
  transition: border-color var(--nc-transition), box-shadow var(--nc-transition) !important;
  overflow: hidden;
}
.kt-accordion-panel:hover {
  border-color: var(--nc-teal) !important;
  box-shadow: var(--nc-shadow-sm) !important;
}
.kt-blocks-accordion-icon-trigger svg {
  transition: transform var(--nc-transition-spring) !important;
}
.kt-accordion-panel.kt-accordion-panel-active .kt-blocks-accordion-icon-trigger svg {
  transform: rotate(180deg) !important;
}

/* Subtile Trenner für luftige Sektions-Übergänge */
.ds-divider-ambient {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nc-line), transparent);
  border: 0;
  margin-block: var(--ds-space-2xl);
}
.ds-sec--dark .ds-divider-ambient {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

/* Ambient Subtle Shimmer / Glow auf Schlüssel-Badges */
@keyframes nc-ambient-pulse {
  0%, 100% { opacity: 0.92; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}
.ds-pulse-glow {
  animation: nc-ambient-pulse 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .kt-blocks-info-box-link-wrap,
  .kt-accordion-panel,
  .kt-blocks-accordion-icon-trigger svg,
  .ds-pulse-glow {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 15 · Kontrast & Barrierefreiheit (WCAG 2.1 AA/AAA Engine) ─────────────
   Zentrale Einbettung der Kontrastregeln aus dem Markenhandbuch v1.1.
   Konsistente Token-Referenzierung für alle dunklen Sektionen und Akzente.
   Unterstützt sowohl .ds-* (Design System) als auch bestehende .nc-* Klassen.
   ────────────────────────────────────────────────────────────────────────── */

/* 1. TOP TRUST BAR: Crisp White & Mint Accents */
.ds-top-trust-bar,
.nc-top-trust-bar {
  background: var(--ds-bg-darkest, var(--nc-navy-darkest)) !important;
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
.ds-top-trust-bar .ds-trust-badge-item,
.nc-top-trust-bar .nc-trust-badge-item {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}
.ds-top-trust-bar .dot,
.nc-top-trust-bar .nc-trust-badge-item .dot {
  color: var(--ds-color-mint, var(--nc-mint)) !important;
  font-weight: 800 !important;
}
.ds-top-trust-bar .ds-top-phone-link,
.nc-top-trust-bar .nc-top-phone-link {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

/* 2. DARK HERO SECTIONS (.ds-hero--dark, .ncb-hero, .ncu-hero, etc.) */
.ds-hero--dark,
.ncb-hero,
.ncu-hero,
.nc-hero-dark,
section[class*="-hero"] {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
.ds-hero--dark h1,
.ncb-hero h1,
.ncb-hero h1 span,
.ncu-hero h1,
.ncu-hero h1 span,
.nc-hero-dark h1 {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.ds-hero--dark h1 span,
.ncb-hero h1 span,
.ncu-hero h1 span {
  color: var(--ds-color-mint, var(--nc-mint)) !important; /* High-contrast vivid mint */
}
.ds-hero--dark .ds-hero-sub,
.ds-hero--dark p,
.ncb-hero .ncb-hero-sub,
.ncu-hero .ncu-hero-sub,
.ncb-hero p,
.ncu-hero p {
  color: var(--ds-color-on-dark-body, var(--nc-on-dark-body)) !important;
  font-weight: 500 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
.ds-hero-badge,
.ncb-hero-badge,
.ncu-hero-badge {
  background: var(--ds-color-mint-bg, var(--nc-mint-bg)) !important;
  border: 1px solid var(--ds-color-mint-border, var(--nc-mint-border)) !important;
  color: var(--ds-color-mint, var(--nc-mint)) !important;
  font-weight: 800 !important;
}

/* 3. SERVICEGEBIET & WIEN DISTRICTS DARK MAP SECTION */
.ds-map-section--dark,
.wp-block-group[style*="#1A365D"],
.wp-block-group[style*="background-color: #1A365D"],
.wp-block-group[style*="background-color: rgb(26, 54, 93)"] {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
.ds-map-section--dark h2,
.ds-map-section--dark h3,
.wp-block-group[style*="#1A365D"] h2,
.wp-block-group[style*="#1A365D"] h3,
.wp-block-group[style*="background-color: #1A365D"] h2,
.wp-block-group[style*="background-color: #1A365D"] h3 {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.ds-map-section--dark p,
.ds-map-section--dark li,
.wp-block-group[style*="#1A365D"] p,
.wp-block-group[style*="#1A365D"] li,
.wp-block-group[style*="background-color: #1A365D"] p,
.wp-block-group[style*="background-color: #1A365D"] li {
  color: var(--ds-color-on-dark-sub, var(--nc-on-dark-sub)) !important;
  font-weight: 500 !important;
}
.wp-block-group[style*="#1A365D"] p[style*="#48BB78"],
.wp-block-group[style*="#1A365D"] span[style*="#48BB78"] {
  color: var(--ds-color-mint, var(--nc-mint)) !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* 4. LEISTUNGEN OVERVIEW CTA BANNER (.ds-cta-box--dark, .nc-lh-cta-box) */
.ds-cta-box--dark,
.nc-lh-cta-box {
  background: linear-gradient(135deg, var(--nc-navy-900) 0%, var(--nc-navy-700) 60%, var(--nc-navy-mid) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  box-shadow: 0 12px 32px rgba(8, 20, 34, 0.25) !important;
}
.ds-cta-box--dark h3,
.nc-lh-cta-box h3 {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.ds-cta-box--dark p,
.nc-lh-cta-box p {
  color: var(--ds-color-on-dark-sub, var(--nc-on-dark-sub)) !important;
  font-weight: 500 !important;
}

/* 5. FAQ SECTION ON SERVICE PAGES (.ds-faq-section--dark, .ncb-faq-section) */
.ds-faq-section--dark,
.ncb-faq-section {
  background: linear-gradient(180deg, var(--nc-navy-900) 0%, var(--nc-navy-800) 100%) !important;
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
.ds-faq-section--dark .ds-faq-badge,
.ncb-faq-section .ncb-faq-badge,
.ncb-faq-badge {
  color: var(--ds-color-mint, var(--nc-mint)) !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}
.ds-faq-section--dark .ds-faq-title,
.ncb-faq-section .ncb-faq-title,
.ncb-faq-title {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4) !important;
}
.ds-faq-section--dark .ds-faq-desc,
.ncb-faq-section .ncb-faq-desc,
.ncb-faq-desc {
  color: var(--ds-color-on-dark-desc, var(--nc-on-dark-desc)) !important;
  font-weight: 500 !important;
}
.ds-faq-section--dark .ds-faq-q,
.ncb-faq-section .ncb-faq-q,
.ncb-faq-q {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 700 !important;
}
.ds-faq-section--dark .ds-faq-q span,
.ncb-faq-section .ncb-faq-q span,
.ncb-faq-q span {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
.ds-faq-section--dark .ds-faq-a,
.ncb-faq-section .ncb-faq-a,
.ncb-faq-a {
  color: var(--ds-color-on-dark-sub, var(--nc-on-dark-sub)) !important;
  font-weight: 450 !important;
  line-height: 1.7 !important;
}

/* 6. GENERAL DARK BLOCKS (#10263D, #0B2338, #081B2B, #0A192F) */
.ds-block--dark,
.wp-block-group[style*="#10263D"],
.wp-block-group[style*="#0B2338"],
.wp-block-group[style*="#081B2B"],
.wp-block-group[style*="#0A192F"],
.wp-block-group[style*="background-color: #10263D"],
.wp-block-group[style*="background-color: rgb(16, 38, 61)"],
.nc-bento-3-grid,
.nc-bento-3-grid * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-block--dark h1,
.ds-block--dark h2,
.ds-block--dark h3,
.wp-block-group[style*="#10263D"] h1,
.wp-block-group[style*="#10263D"] h2,
.wp-block-group[style*="#10263D"] h3,
.wp-block-group[style*="#0B2338"] h1,
.wp-block-group[style*="#0B2338"] h2,
.wp-block-group[style*="#0B2338"] h3,
.wp-block-group[style*="#0A192F"] h1,
.wp-block-group[style*="#0A192F"] h2,
.wp-block-group[style*="#0A192F"] h3,
.nc-bento-3-grid h2,
.nc-bento-3-grid h3 {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
  letter-spacing: -0.02em !important;
}

.ds-block--dark p,
.ds-block--dark li,
.wp-block-group[style*="#10263D"] p,
.wp-block-group[style*="#10263D"] li,
.wp-block-group[style*="#0B2338"] p,
.wp-block-group[style*="#0B2338"] li,
.wp-block-group[style*="#0A192F"] p,
.wp-block-group[style*="#0A192F"] li,
.nc-bento-3-grid p,
.nc-bento-3-grid li {
  color: var(--ds-color-on-dark-body, var(--nc-on-dark-body)) !important;
  font-weight: 450 !important;
  line-height: 1.65 !important;
  opacity: 1 !important;
}

.ds-block--dark .ds-reveal,
.wp-block-group[style*="#10263D"] .ncx-reveal,
.nc-bento-3-grid .ncx-reveal {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

.ds-block--dark svg,
.nc-bento-3-grid svg,
.wp-block-group[style*="#10263D"] svg {
  color: var(--ds-color-mint, var(--nc-mint)) !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 7. PHONE & BUTTON MICRO-ACTIONS */
a.nc-btn-phone,
.nc-btn-phone,
.entry-content .nc-hero-cta-row a.nc-btn-phone {
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
a.nc-btn-phone:hover,
.nc-btn-phone:hover,
.entry-content .nc-hero-cta-row a.nc-btn-phone:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}
a.nc-btn-phone *,
.nc-btn-phone * {
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp)) !important;
}

.nc-hero-btn-primary,
a.nc-hero-btn-primary,
.nc-hero-btn-primary span,
a.nc-hero-btn-primary span,
body .nc-section-google-reviews a.nc-hero-btn-primary,
body .nc-section-google-reviews a.nc-hero-btn-primary * {
  background: var(--nc-accent) !important;
  color: var(--nc-on-accent) !important;
  font-weight: 700 !important;
  border-radius: 9999px !important;
  border: none !important;
}
.nc-hero-btn-primary:hover,
a.nc-hero-btn-primary:hover,
body .nc-section-google-reviews a.nc-hero-btn-primary:hover,
body .nc-section-google-reviews a.nc-hero-btn-primary:hover * {
  background: var(--nc-accent-hover) !important;
  color: var(--nc-on-accent) !important;
}
body .nc-section-google-reviews a.nc-hero-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 32px !important;
  box-shadow: 0 6px 20px rgba(245, 179, 1, 0.3) !important;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
  text-decoration: none !important;
}
body .nc-section-google-reviews a.nc-hero-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(245, 179, 1, 0.45) !important;
}
body .nc-section-google-reviews a.nc-hero-btn-primary:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Servicegebiet Wien Map Section Styling */
.wp-block-group[style*="#1A365D"] .wp-block-button__link,
.wp-block-group[style*="#1A365D"] a[href*="/angebot/"] {
  background: var(--nc-accent) !important;
  color: var(--nc-on-accent) !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  box-shadow: 0 6px 20px rgba(245, 179, 1, 0.3) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.wp-block-group[style*="#1A365D"] .wp-block-button__link:hover,
.wp-block-group[style*="#1A365D"] a[href*="/angebot/"]:hover {
  background: var(--nc-accent-hover) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(245, 179, 1, 0.45) !important;
}
.wp-block-group[style*="#1A365D"] .wp-block-button__link:active,
.wp-block-group[style*="#1A365D"] a[href*="/angebot/"]:active {
  transform: translateY(0) scale(0.98) !important;
}
.wp-block-group[style*="#1A365D"] p[style*="color:#0B6B62"] {
  color: var(--ds-color-mint, #2DD4BF) !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
}

/* ── 16 · Awwwards-Tier: Double-Bezel Architektur ─────────────────────────
   Doppelrand-Karten-Architektur:
   - Subtiler äußerer Shell-Rahmen mit sanftem Glow und Hardware-Beschleunigung.
   - Innerer Kern mit konzentrisch abgestimmtem Squircle-Radius calc(r - pad).
   - 100% GPU-beschleunigt: Hover-Glow über ::after Opacity-Fade (kein Box-Shadow Repaint).
   - Volle WCAG AAA/AA Kontrastkonformität auf Light, Tint und Dark Navy.
   ────────────────────────────────────────────────────────────────────────── */

.ds-double-bezel, .bezel, .nc-double-bezel {
  --_bezel-pad: var(--ds-bezel-pad, var(--nc-bezel-pad));
  --_bezel-r: var(--ds-bezel-r, var(--nc-bezel-outer-r));
  --_bezel-inner-r: calc(var(--_bezel-r) - var(--_bezel-pad));

  position: relative;
  padding: var(--_bezel-pad);
  border-radius: var(--_bezel-r);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(244, 247, 250, 0.75) 100%);
  border: 1px solid var(--nc-bezel-border);
  box-shadow: var(--nc-bezel-glow);
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-fluid);
  display: flex;
  flex-direction: column;
}

/* GPU-beschleunigter Ambient-Glow beim Hover über opakes Pseudo-Element */
.ds-double-bezel::after, .bezel::after, .nc-double-bezel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--nc-bezel-glow-hover);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--nc-transition-fluid);
  z-index: 0;
}

.ds-double-bezel:hover, .bezel:hover, .nc-double-bezel:hover {
  transform: translateY(-4px);
}

.ds-double-bezel:hover::after, .bezel:hover::after, .nc-double-bezel:hover::after {
  opacity: 1;
}

/* Innerer Kern: Konzentrischer Squircle-Radius calc(r - pad) */
.ds-double-bezel__inner,
.ds-double-bezel-core,
.bezel-inner,
.nc-double-bezel__inner {
  position: relative;
  z-index: 1;
  border-radius: var(--_bezel-inner-r);
  background: var(--nc-surface);
  color: var(--nc-text);
  border: 1px solid var(--nc-line);
  padding: var(--ds-space-xl);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), 0 2px 6px rgba(18, 50, 74, 0.02);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ds-double-bezel :is(h2, h3, h4), .bezel :is(h2, h3, h4) {
  color: var(--nc-text-strong);
}

.ds-double-bezel .ds-muted, .bezel .ds-muted, .bezel .mini {
  color: var(--nc-muted);
}

/* Dunkler Modus / Navy-Sektionen */
.ds-sec--dark .ds-double-bezel,
.ds-double-bezel--dark,
.sec--dark .bezel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%);
  border-color: var(--nc-bezel-dark-border);
  box-shadow: var(--nc-bezel-dark-glow);
}

.ds-sec--dark .ds-double-bezel::after,
.ds-double-bezel--dark::after,
.sec--dark .bezel::after {
  box-shadow: var(--nc-bezel-dark-glow-hover);
}

.ds-sec--dark .ds-double-bezel .ds-double-bezel__inner,
.ds-sec--dark .ds-double-bezel .ds-double-bezel-core,
.ds-double-bezel--dark .ds-double-bezel__inner,
.ds-double-bezel--dark .ds-double-bezel-core,
.sec--dark .bezel-inner {
  background: linear-gradient(180deg, rgba(22, 33, 58, 0.88) 0%, rgba(12, 26, 48, 0.95) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--nc-on-dark);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 0 24px rgba(14, 169, 155, 0.03);
}

.ds-sec--dark .ds-double-bezel :is(h2, h3, h4),
.ds-double-bezel--dark :is(h2, h3, h4) {
  color: var(--nc-white);
}

.ds-sec--dark .ds-double-bezel .ds-muted,
.ds-double-bezel--dark .ds-muted {
  color: var(--nc-on-dark-muted);
}

/* ── 17 · Awwwards-Tier: Nested Button (Button-in-Button) ──────────────────
   Button-in-Button Architektur:
   - Vollständig gerundeter Pill-Container mit separatem, zirkulärem Icon-Badge.
   - Kinetic Tension: Der Badge lädt beim Hover mit spring bezier(0.34, 1.56, 0.64, 1)
     kinetische Spannung auf und federt taktisch nach vorne.
   - 100% GPU-beschleunigt: Ausschließlich transform & opacity Übergänge.
   - Kontrast: Getestet und konform nach WCAG AAA/AA (9,29:1 / 17,41:1).
   ────────────────────────────────────────────────────────────────────────── */

.ds-btn--nested, .btn--nested {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: 0.45rem 0.55rem 0.45rem 1.6rem;
  border-radius: var(--nc-radius-pill);
  font-family: var(--ds-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-fluid), background-color var(--nc-transition-fluid), border-color var(--nc-transition-fluid);
  user-select: none;
  -webkit-user-select: none;
}

.ds-btn--nested:focus-visible, .btn--nested:focus-visible {
  outline: 3px solid var(--nc-teal);
  outline-offset: 3px;
}

/* GPU-beschleunigter Button-Glow via ::before Opacity */
.ds-btn--nested::before, .btn--nested::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
  transition: opacity var(--nc-transition-fluid);
  z-index: 0;
}

.ds-btn--nested > *, .btn--nested > * {
  position: relative;
  z-index: 1;
}

/* Zirkulärer Badge (Button-in-Button) */
.ds-btn--nested .ds-btn__badge,
.ds-btn--nested .ds-btn-badge,
.btn--nested .btn__badge,
.btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nc-btn-nested-badge-size);
  height: var(--nc-btn-nested-badge-size);
  border-radius: var(--nc-radius-pill);
  flex-shrink: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-spring), background-color var(--nc-transition-fluid);
}

/* Pfeil / Icon im Badge */
.ds-btn--nested .ds-btn__arrow,
.ds-btn--nested .ds-btn__badge svg,
.ds-btn--nested .ds-btn-badge svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-spring);
}

/* Kinetic Tension States */
.ds-btn--nested:hover {
  transform: translateY(-2px);
}

.ds-btn--nested:hover::before {
  opacity: 1;
}

.ds-btn--nested:hover .ds-btn__badge,
.ds-btn--nested:hover .ds-btn-badge {
  transform: translate3d(3px, 0, 0) scale(1.08);
}

.ds-btn--nested:hover .ds-btn__arrow,
.ds-btn--nested:hover .ds-btn__badge svg,
.ds-btn--nested:hover .ds-btn-badge svg {
  transform: translate3d(2px, 0, 0);
}

.ds-btn--nested:active {
  transform: translateY(0) scale(0.98);
}

.ds-btn--nested:active .ds-btn__badge,
.ds-btn--nested:active .ds-btn-badge {
  transform: translate3d(1px, 0, 0) scale(0.96);
}

.ds-btn--nested:active .ds-btn__arrow,
.ds-btn--nested:active .ds-btn__badge svg,
.ds-btn--nested:active .ds-btn-badge svg {
  transform: translate3d(0, 0, 0);
}

/* Farbvarianten (Kontrast-zertifiziert nach WCAG AAA/AA) */

/* 1. Primär (Warm Gelb / Amber) */
.ds-btn--nested.ds-btn--primary,
.ds-btn--nested:not([class*="--teal"]):not([class*="--navy"]):not([class*="--ghost"]):not([class*="--glass"]) {
  background: var(--nc-accent);
  color: var(--nc-on-accent);
  box-shadow: var(--nc-shadow-btn);
}

.ds-btn--nested.ds-btn--primary::before,
.ds-btn--nested:not([class*="--teal"]):not([class*="--navy"]):not([class*="--ghost"]):not([class*="--glass"])::before {
  box-shadow: var(--nc-shadow-btn-hover);
}

.ds-btn--nested.ds-btn--primary:hover,
.ds-btn--nested:not([class*="--teal"]):not([class*="--navy"]):not([class*="--ghost"]):not([class*="--glass"]):hover {
  background: var(--nc-accent-hover);
}

.ds-btn--nested.ds-btn--primary .ds-btn__badge,
.ds-btn--nested:not([class*="--teal"]):not([class*="--navy"]):not([class*="--ghost"]):not([class*="--glass"]) .ds-btn__badge {
  background: var(--nc-navy-deep);
  color: var(--nc-accent);
}

.ds-btn--nested.ds-btn--primary:hover .ds-btn__badge,
.ds-btn--nested:not([class*="--teal"]):not([class*="--navy"]):not([class*="--ghost"]):not([class*="--glass"]):hover .ds-btn__badge {
  background: var(--nc-navy);
  color: var(--nc-white);
}

/* 2. Teal Variante */
.ds-btn--nested.ds-btn--teal {
  background: var(--nc-teal);
  color: var(--nc-on-teal);
  box-shadow: var(--nc-shadow-btn-teal);
}

.ds-btn--nested.ds-btn--teal:hover {
  background: var(--nc-teal-dark);
}

.ds-btn--nested.ds-btn--teal .ds-btn__badge {
  background: var(--nc-navy-deep);
  color: var(--nc-teal-light);
}

.ds-btn--nested.ds-btn--teal:hover .ds-btn__badge {
  background: var(--nc-navy);
  color: var(--nc-white);
}

/* 3. Navy / Dark Variante */
.ds-btn--nested.ds-btn--navy {
  background: var(--nc-navy);
  color: var(--nc-white);
  box-shadow: var(--nc-shadow);
  border-color: rgba(255, 255, 255, 0.12);
}

.ds-btn--nested.ds-btn--navy:hover {
  background: var(--nc-navy-deep);
}

.ds-btn--nested.ds-btn--navy .ds-btn__badge {
  background: var(--nc-teal);
  color: var(--nc-navy-deep);
}

/* 4. Ghost / Outline Variante */
.ds-btn--nested.ds-btn--ghost {
  background: transparent;
  color: var(--nc-teal-text);
  border-color: var(--nc-teal);
  box-shadow: none;
}

.ds-btn--nested.ds-btn--ghost:hover {
  background: var(--nc-teal-pale);
  border-color: var(--nc-teal-dark);
}

.ds-btn--nested.ds-btn--ghost .ds-btn__badge {
  background: var(--nc-teal-pale);
  color: var(--nc-teal-text);
}

.ds-btn--nested.ds-btn--ghost:hover .ds-btn__badge {
  background: var(--nc-teal);
  color: var(--nc-white);
}

/* Dark-Section Anpassung für Ghost/Glass */
.ds-sec--dark .ds-btn--nested.ds-btn--ghost {
  color: var(--nc-on-dark-accent);
  border-color: var(--nc-on-dark-accent);
}

.ds-sec--dark .ds-btn--nested.ds-btn--ghost:hover {
  background: rgba(143, 243, 231, 0.12);
}

.ds-sec--dark .ds-btn--nested.ds-btn--ghost .ds-btn__badge {
  background: rgba(143, 243, 231, 0.15);
  color: var(--nc-on-dark-accent);
}

.ds-sec--dark .ds-btn--nested.ds-btn--ghost:hover .ds-btn__badge {
  background: var(--nc-teal);
  color: var(--nc-navy-deep);
}

/* ── 17b · Button-in-Button Kompatibilität (.btn-in-btn) ───────────────────
   Bietet direkte Drop-in Unterstützung für .btn-in-btn Klassen mit
   Gold-Fläche (#F5B301), Navy-Text (#0C1A30) und gefedertem Icon-Badge.
   ────────────────────────────────────────────────────────────────────────── */
.btn-in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-md);
  padding: 0.5rem 0.65rem 0.5rem 1.6rem;
  border-radius: var(--nc-radius-pill);
  font-family: var(--nc-font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  border: 1px solid transparent;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-fluid), background-color var(--nc-transition-fluid), border-color var(--nc-transition-fluid);
  user-select: none;
  -webkit-user-select: none;
  background: var(--nc-accent);
  color: var(--nc-on-accent) !important;
  box-shadow: var(--nc-shadow-btn);
}

.btn-in-btn:hover {
  transform: translateY(-2px);
  background: var(--nc-accent-hover);
  box-shadow: var(--nc-shadow-btn-hover);
}

.btn-in-btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-in-btn .btn-badge,
.btn-in-btn .btn__badge,
.btn-in-btn .ds-btn__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--nc-btn-nested-badge-size, 2.25rem);
  height: var(--nc-btn-nested-badge-size, 2.25rem);
  border-radius: var(--nc-radius-pill);
  background: var(--nc-navy-deep);
  color: var(--nc-accent);
  flex-shrink: 0;
  margin-left: 0.5rem;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform var(--nc-transition-spring), background-color var(--nc-transition-fluid);
}

.btn-in-btn:hover .btn-badge,
.btn-in-btn:hover .btn__badge,
.btn-in-btn:hover .ds-btn__badge {
  transform: translate3d(4px, 0, 0) scale(1.08);
  background: var(--nc-navy);
  color: #FFFFFF;
}

.btn-in-btn .btn-badge svg,
.btn-in-btn .btn__badge svg,
.btn-in-btn .ds-btn__badge svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.btn-in-btn--teal {
  background: var(--nc-teal) !important;
  color: var(--nc-on-teal) !important;
  box-shadow: var(--nc-shadow-btn-teal) !important;
}
.btn-in-btn--teal:hover {
  background: var(--nc-teal-dark) !important;
}
.btn-in-btn--teal .btn-badge {
  background: var(--nc-navy-deep) !important;
  color: var(--nc-teal-light) !important;
}

.btn-in-btn--ghost {
  background: transparent !important;
  color: var(--nc-teal-text) !important;
  border-color: var(--nc-teal) !important;
  box-shadow: none !important;
}
.btn-in-btn--ghost:hover {
  background: var(--nc-teal-pale) !important;
  border-color: var(--nc-teal-dark) !important;
}
.btn-in-btn--ghost .btn-badge {
  background: var(--nc-teal-pale) !important;
  color: var(--nc-teal-text) !important;
}

/* ── 18 · Awwwards-Tier: Ambient Mesh Gradients ────────────────────────────
   Subtile radiale Ambient-Glows für Navy- und Tint-Sektionen:
   - Erzeugt atmosphärische Raumtiefe ohne Unschärfe oder visuelle Unruhe.
   - 100% GPU-beschleunigt über separate Kompositionsebenen (transform & opacity).
   - Kann als Modifier auf .ds-sec oder als dekorativer Container eingesetzt werden.
   ────────────────────────────────────────────────────────────────────────── */

.ds-ambient-mesh, .mesh {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Glow Layer 1: Primäre Luminanz */
.ds-ambient-mesh::before, .mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  background-repeat: no-repeat;
}

/* Glow Layer 2: Sekundäre Akzent-Tiefe */
.ds-ambient-mesh::after, .mesh::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 0;
  will-change: opacity;
  background-repeat: no-repeat;
}

/* Inhalt wird sauber über dem Mesh platziert */
.ds-ambient-mesh > *, .mesh > * {
  position: relative;
  z-index: 1;
}

/* Mesh für Dunkle / Navy Sektionen (.ds-sec--dark) */
.ds-sec--dark.ds-ambient-mesh::before,
.sec--dark.mesh::before,
.ds-ambient-mesh--navy::before {
  background-image:
    radial-gradient(circle at 86% 14%, var(--nc-mesh-navy-glow1) 0%, rgba(14, 169, 155, 0) 52%),
    radial-gradient(circle at 10% 88%, var(--nc-mesh-navy-glow2) 0%, rgba(26, 54, 93, 0) 58%);
  opacity: 0.95;
}

.ds-sec--dark.ds-ambient-mesh::after,
.sec--dark.mesh::after,
.ds-ambient-mesh--navy::after {
  background-image:
    radial-gradient(circle at 48% 95%, var(--nc-mesh-navy-glow3) 0%, rgba(245, 179, 1, 0) 45%),
    radial-gradient(circle at 35% 25%, rgba(94, 234, 212, 0.05) 0%, rgba(94, 234, 212, 0) 40%);
  opacity: 0.85;
}

/* Mesh für Getönte Sektionen (.ds-sec--tint) */
.ds-sec--tint.ds-ambient-mesh::before,
.ds-ambient-mesh--tint::before {
  background-image:
    radial-gradient(circle at 84% 16%, var(--nc-mesh-tint-glow1) 0%, rgba(14, 169, 155, 0) 55%),
    radial-gradient(circle at 14% 84%, var(--nc-mesh-tint-glow2) 0%, rgba(245, 179, 1, 0) 50%);
  opacity: 0.95;
}

.ds-sec--tint.ds-ambient-mesh::after,
.ds-ambient-mesh--tint::after {
  background-image:
    radial-gradient(circle at 50% 30%, var(--nc-mesh-tint-glow3) 0%, rgba(255, 255, 255, 0) 65%);
  opacity: 0.70;
}

/* Mesh für Helle Sektionen (.ds-sec--light) */
.ds-sec--light.ds-ambient-mesh::before,
.ds-ambient-mesh--light::before {
  background-image:
    radial-gradient(circle at 80% 12%, rgba(14, 169, 155, 0.045) 0%, rgba(14, 169, 155, 0) 50%),
    radial-gradient(circle at 18% 88%, rgba(245, 179, 1, 0.035) 0%, rgba(245, 179, 1, 0) 45%);
  opacity: 1;
}

/* Optionale subtile kinetische Aura (nur wenn motion erlaubt) */
@keyframes nc-mesh-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.90;
  }
  50% {
    transform: translate3d(1.5%, -1.5%, 0) scale(1.02);
    opacity: 1;
  }
  100% {
    transform: translate3d(-1%, 1%, 0) scale(0.99);
    opacity: 0.92;
  }
}

.ds-ambient-mesh--animated::before {
  animation: nc-mesh-drift 16s ease-in-out infinite alternate;
}

/* ── 19 · Fluid Dynamics & Motion Fallbacks ─────────────────────────────────
   - Zentraler prefers-reduced-motion Schutzschild für alle Awwwards-Tier Komponenten.
   - Deaktiviert alle Übergänge, Skalierungen und Keyframe-Animationen sicher.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ds-double-bezel,
  .ds-double-bezel::after,
  .ds-double-bezel__inner,
  .ds-double-bezel-core,
  .ds-btn--nested,
  .ds-btn--nested::before,
  .ds-btn--nested .ds-btn__badge,
  .ds-btn--nested .ds-btn-badge,
  .ds-btn--nested .ds-btn__arrow,
  .ds-btn--nested .ds-btn__badge svg,
  .ds-btn--nested .ds-btn-badge svg,
  .ds-ambient-mesh::before,
  .ds-ambient-mesh::after,
  .ds-ambient-mesh--animated::before {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── 20 · Awwwards Hero Button Resilience Layer ────────────────────────────
   Strikter Schutzschild gegen veraltete Customizer- und Container-Regeln.
   Garantiert High-End Contrast & haptische Haptik auf allen Seiten.
   ────────────────────────────────────────────────────────────────────────── */

body .nc-hero-container a.ds-btn--nested,
body .nc-hero-cta-row a.ds-btn--nested,
body .ds-btn--nested {
  text-decoration: none !important;
  border-radius: var(--nc-radius-pill) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--primary,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--primary,
body .ds-btn--nested.ds-btn--primary {
  background: var(--nc-accent) !important;
  color: var(--nc-on-accent) !important;
  border: 1px solid transparent !important;
  box-shadow: var(--nc-shadow-btn) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--primary:hover,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--primary:hover,
body .ds-btn--nested.ds-btn--primary:hover {
  background: var(--nc-accent-hover) !important;
  color: var(--nc-on-accent) !important;
  transform: translateY(-2px) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--ghost,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--ghost,
body .ds-btn--nested.ds-btn--ghost {
  background: rgba(255, 255, 255, 0.10) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--ghost:hover,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--ghost:hover,
body .ds-btn--nested.ds-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--primary .ds-btn__badge,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--primary .ds-btn__badge {
  background: var(--nc-navy-deep) !important;
  color: var(--nc-accent) !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--primary:hover .ds-btn__badge,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--primary:hover .ds-btn__badge {
  background: var(--nc-navy) !important;
  color: #FFFFFF !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--ghost .ds-btn__badge,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--ghost .ds-btn__badge {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #FFFFFF !important;
}

body .nc-hero-container a.ds-btn--nested.ds-btn--ghost:hover .ds-btn__badge,
body .nc-hero-cta-row a.ds-btn--nested.ds-btn--ghost:hover .ds-btn__badge {
  background: var(--nc-teal) !important;
  color: var(--nc-navy-deep) !important;
}

/* ==========================================================================
   21 · High-End Dark Cards & Sector Glass Enclosures (Awwwards-Tier)
   ========================================================================== */
.nc-sector-card,
.nc-pillar-card,
.ncb-turnus-card,
.ncb-port-card,
.ncb-bedarf-karte,
.nc-post-eeat-box,
.nc-section-einblicke .wp-block-column {
  border-radius: var(--nc-radius, 18px) !important;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform, box-shadow;
}

.nc-sector-card:hover,
.nc-pillar-card:hover,
.ncb-turnus-card:hover,
.ncb-port-card:hover,
.ncb-bedarf-karte:hover,
.nc-section-einblicke .wp-block-column:hover {
  transform: translateY(-5px) !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(45, 212, 191, 0.38) !important;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.5), 0 0 24px 0 rgba(45, 212, 191, 0.08) !important;
}

/* ── Leichte Buttons im dunklen Bereich (Nur Rahmen / Ghost) ── */
.kt-row-has-bg[style*="#12324A"] .wp-block-kadence-singlebtn .kb-button,
.kb-row-layout-wrap[data-bg-color*="#12324A"] .wp-block-kadence-singlebtn .kb-button,
.ds-sec--dark .wp-block-kadence-singlebtn .kb-button,
.ds-sec--dark .wp-block-button__link,
.kb-row-layout-id27262_sec_7_v72ma .kb-button,
.kb-row-layout-id27262_sec_169_7bl74 .kb-button {
  background: transparent !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  backdrop-filter: blur(4px);
}
.kb-row-layout-id27262_sec_7_v72ma a.kb-btn27262_btn_4_5zixi,
.kb-row-layout-id27262_sec_169_7bl74 a.kb-btn27262_btn_166_u1flo {
  border: 2px solid #F5B301 !important;
  color: #F5B301 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kb-row-layout-id27262_sec_7_v72ma a.kb-btn27262_btn_4_5zixi:hover,
.kb-row-layout-id27262_sec_169_7bl74 a.kb-btn27262_btn_166_u1flo:hover {
  background: rgba(245, 179, 1, 0.14) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.kb-row-layout-id27262_sec_7_v72ma a.kb-btn27262_btn_5_4q4ve,
.kb-row-layout-id27262_sec_169_7bl74 a.kb-btn27262_btn_167_xr7ax {
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  color: #FFFFFF !important;
  background: transparent !important;
  box-shadow: none !important;
}
.kb-row-layout-id27262_sec_7_v72ma a.kb-btn27262_btn_5_4q4ve:hover,
.kb-row-layout-id27262_sec_169_7bl74 a.kb-btn27262_btn_167_xr7ax:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: #2FB8A6 !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}

/* ── Hero Bereich: Großzügige Dimensionierung & Dezent Wien Animation ── */
.nc-hero-2col-layout {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 36px !important;
  align-items: center !important;
  margin-bottom: 32px !important;
}
@media (max-width: 960px) {
  .nc-hero-2col-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}
.nc-hero-visual-col {
  position: relative !important;
}
.nc-hero-visual-col img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ── Funnel & Calculator Veredelung (Page 20043 /angebot/) ── */
.nc-funnel-card {
  border-radius: 24px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 20px 48px -12px rgba(18, 50, 74, 0.08) !important;
}
.nc-choice-box {
  border-radius: 16px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nc-choice-box:hover {
  transform: translateY(-2px) !important;
  border-color: #0EA99B !important;
}
.nc-choice-box.selected {
  border-color: #0EA99B !important;
  background: rgba(14, 169, 155, 0.06) !important;
  box-shadow: 0 4px 16px rgba(14, 169, 155, 0.15) !important;
}
.nc-summary-card {
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  box-shadow: 0 12px 32px -8px rgba(18, 50, 74, 0.08) !important;
}
.nc-price-hero {
  border-radius: 14px !important;
  background: linear-gradient(135deg, #0C1A30 0%, #16213A 100%) !important;
  color: #FFFFFF !important;
  padding: 20px !important;
}
.nc-price-num {
  font-family: var(--nc-font-display) !important;
  color: #F5B301 !important;
}
.nc-submit-quote-btn {
  border-radius: 9999px !important;
  font-family: var(--nc-font-heading) !important;
  padding: 14px 28px !important;
  background: var(--nc-accent) !important;
  color: var(--nc-on-accent) !important;
  box-shadow: var(--nc-shadow-btn) !important;
  transition: all var(--nc-transition-spring) !important;
}
.nc-submit-quote-btn:hover {
  transform: translateY(-2px) scale(1.01) !important;
  background: var(--nc-accent-hover) !important;
  box-shadow: var(--nc-shadow-btn-hover) !important;
}
.kb-row-layout-id27262_sec_7_v72ma {
  position: relative !important;
  overflow: hidden !important;
  background: radial-gradient(circle at 85% 20%, #173f5d 0%, #12324A 55%, #0d2435 100%) !important;
  min-height: clamp(560px, 72vh, 760px) !important;
  display: flex !important;
  align-items: center !important;
  padding-top: clamp(110px, 13vh, 160px) !important;
  padding-bottom: clamp(120px, 14vh, 170px) !important;
}

.kb-row-layout-id27262_sec_7_v72ma > .kt-row-column-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
}

.kb-row-layout-id27262_sec_7_v72ma .kt-inside-inner-col {
  position: relative;
  z-index: 3;
}

/* Vienna Backdrop Container */
.nc-vienna-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Ambient Glows */
.nc-vienna-glow-gold {
  position: absolute;
  top: 5%;
  right: 18%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.08) 0%, rgba(245, 179, 1, 0) 70%);
  filter: blur(40px);
  animation: ncAuraBreathe 16s ease-in-out infinite alternate;
}

.nc-vienna-glow-teal {
  position: absolute;
  bottom: 8%;
  left: 22%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.09) 0%, rgba(45, 212, 191, 0) 70%);
  filter: blur(50px);
  animation: ncAuraPulse 20s ease-in-out infinite alternate;
}

@keyframes ncAuraBreathe {
  0% { transform: scale(0.9) translate(0, 0); opacity: 0.6; }
  50% { transform: scale(1.15) translate(-20px, 15px); opacity: 1; }
  100% { transform: scale(1.0) translate(15px, -10px); opacity: 0.7; }
}

@keyframes ncAuraPulse {
  0% { transform: scale(1.0) translate(0, 0); opacity: 0.7; }
  50% { transform: scale(1.2) translate(30px, -20px); opacity: 1; }
  100% { transform: scale(0.95) translate(-15px, 10px); opacity: 0.6; }
}

/* Vienna Skyline SVG */
.nc-vienna-skyline-svg {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: clamp(210px, 33vw, 340px);
  pointer-events: none;
  z-index: 2;
}

/* Riesenrad rotation */
.nc-riesenrad-wheel {
  transform-origin: 1180px 170px;
  animation: ncWheelSpin 100s linear infinite;
}

@keyframes ncWheelSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Steffl Spire Glow */
.nc-steffl-spire-glow {
  animation: ncSpirePulse 5s ease-in-out infinite;
}

@keyframes ncSpirePulse {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 0.95; transform: scale(1.25); }
}

/* Eyebrow Badge */
.nc-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(45, 212, 191, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  margin-bottom: 24px;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.3);
}

.nc-hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2DD4BF;
  box-shadow: 0 0 10px #2DD4BF, 0 0 4px #F5B301;
  animation: ncDotPulse 3s ease-in-out infinite;
}

@keyframes ncDotPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.3); opacity: 1; }
}

.nc-hero-eyebrow-text {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #2DD4BF;
}

.nc-hero-eyebrow-divider {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.75rem;
}

.nc-hero-eyebrow-sub {
  font-size: 0.80rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #E2E8F0;
}

@media (prefers-reduced-motion: reduce) {
  .nc-riesenrad-wheel,
  .nc-vienna-glow-gold,
  .nc-vienna-glow-teal,
  .nc-steffl-spire-glow,
  .nc-hero-eyebrow-dot {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .kb-row-layout-id27262_sec_7_v72ma {
    min-height: 520px !important;
    padding-top: 85px !important;
    padding-bottom: 95px !important;
  }
  .nc-vienna-skyline-svg {
    height: 180px;
    opacity: 0.65;
  }
  .nc-hero-eyebrow {
    padding: 6px 14px;
    margin-bottom: 18px;
  }
  .nc-hero-eyebrow-sub {
    display: none;
  }
  .nc-hero-eyebrow-divider {
    display: none;
  }
}

/* ── Modernes Megamenü (Design System 2026) ── */
.nc-header-wrapper {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(18, 50, 74, 0.06), 0 8px 30px rgba(18, 50, 74, 0.04) !important;
}

.nc-top-trust-bar {
  background: var(--ds-bg-darkest, var(--nc-navy-darkest, #081422)) !important;
  color: var(--ds-color-on-dark-crisp, var(--nc-on-dark-crisp, #FFFFFF)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 6px 24px !important;
  font-size: 12px !important;
}

.nc-top-phone-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 14px !important;
  border: 1.5px solid rgba(45, 212, 191, 0.45) !important;
  border-radius: 9999px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.nc-top-phone-link::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #00F5A0;
  box-shadow: 0 0 0 0 rgba(0, 245, 160, 0.7);
  animation: nc-pulse 2s infinite;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes nc-pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 160, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0, 245, 160, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(0, 245, 160, 0); }
}
.nc-top-phone-link:hover {
  background: rgba(45, 212, 191, 0.15) !important;
  border-color: #2DD4BF !important;
  color: #2DD4BF !important;
  box-shadow: 0 0 14px rgba(45, 212, 191, 0.35) !important;
  transform: translateY(-1px) !important;
}

.nc-mega-menu {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 24px !important;
  right: 24px !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 20px !important;
  box-shadow: 0 32px 72px -12px rgba(18, 50, 74, 0.16), 0 0 0 1px rgba(226, 232, 240, 0.8) !important;
  padding: 24px 24px 20px !important;
  overflow: hidden !important;
  z-index: 1000 !important;
}

.nc-mega-menu::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #2DD4BF 0%, #F5B301 50%, #2DD4BF 100%) !important;
}

.nc-mega-col {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 14px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-mega-col:hover {
  background: #FFFFFF !important;
  border-color: rgba(45, 212, 191, 0.45) !important;
  box-shadow: 0 10px 28px -4px rgba(45, 212, 191, 0.12) !important;
  transform: translateY(-2px) !important;
}

.nc-mega-col-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(45, 212, 191, 0.12) !important;
  border: 1px solid rgba(45, 212, 191, 0.28) !important;
  color: #0E766E !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
}

.nc-mega-col:hover .nc-mega-col-icon {
  background: #2DD4BF !important;
  color: #12324A !important;
  transform: scale(1.05) !important;
}

.nc-mega-col-title {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: #12324A !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
}

.nc-mega-links-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex-grow: 1 !important;
}

.nc-mega-link-item a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-decoration: none !important;
  line-height: 1.35 !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-mega-link-item a .dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #CBD5E1 !important;
  flex-shrink: 0 !important;
  transition: all 0.18s ease !important;
}

.nc-mega-link-item a:hover {
  background: rgba(45, 212, 191, 0.08) !important;
  color: #0E766E !important;
  transform: translateX(4px) !important;
}

.nc-mega-link-item a:hover .dot {
  background: #2DD4BF !important;
  transform: scale(1.4) !important;
}

.nc-mega-badge-pill {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  background: rgba(245, 179, 1, 0.18) !important;
  color: #B45309 !important;
  border: 1px solid rgba(245, 179, 1, 0.35) !important;
  margin-left: auto !important;
}

.nc-mega-bottom-bar {
  margin-top: 18px !important;
  padding-top: 14px !important;
  border-top: 1px solid #E2E8F0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.nc-mega-bottom-trust {
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  font-size: 12.5px !important;
  color: #475569 !important;
}

.nc-mega-bottom-trust span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.nc-mega-bottom-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  border: 1.5px solid #F5B301 !important;
  background: rgba(245, 179, 1, 0.08) !important;
  color: #12324A !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-mega-bottom-btn:hover {
  background: #F5B301 !important;
  color: #12324A !important;
  border-color: #F5B301 !important;
  box-shadow: 0 4px 16px rgba(245, 179, 1, 0.3) !important;
  transform: translateY(-1px) !important;
}

.nc-btn-header-cta {
  background: transparent !important;
  border: 1.5px solid #0EA99B !important;
  color: #0E766E !important;
  text-decoration: none !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  padding: 8px 18px !important;
  border-radius: 9999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: none !important;
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-btn-header-cta:hover {
  background: rgba(45, 212, 191, 0.12) !important;
  color: #0B192C !important;
  border-color: #2DD4BF !important;
  box-shadow: 0 4px 16px rgba(45, 212, 191, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* === VIENNA DISTRICT SILO BOX GLOBAL SPACING HARMONY === */
.entry-content > .nc-district-silo-box,
.nc-district-silo-box {
  margin-top: clamp(36px, 4vw, 48px) !important;
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
@media (max-width: 768px) {
  .entry-content > .nc-district-silo-box,
  .nc-district-silo-box {
    margin-top: 32px !important;
    margin-bottom: clamp(40px, 6vw, 56px) !important;
    padding: 24px 16px !important;
    border-radius: 14px !important;
  }
}

/* === LEISTUNGEN OVERVIEW PAGE (ID 23987) HARMONIC SPACING SYSTEM === */
.page-id-23987 .entry-content > section,
.page-id-23987 .entry-content > div[class*="section"] {
  margin-top: 0 !important;
  margin-bottom: clamp(48px, 5.5vw, 76px) !important;
}
.page-id-23987 .nc-glass-hero {
  margin-top: 16px !important;
  margin-bottom: clamp(32px, 4vw, 48px) !important;
  border-radius: 20px !important;
}
.page-id-23987 .nc-lh-trust {
  margin-top: 0 !important;
  margin-bottom: clamp(32px, 3.5vw, 44px) !important;
}
.page-id-23987 .nc-lh-filter-section,
.page-id-23987 section:has(#ncServiceSearch) {
  margin-bottom: clamp(36px, 4vw, 52px) !important;
}
.page-id-23987 .nc-lh-grid-section {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
.page-id-23987 .nc-lh-diff-section {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
  padding-top: clamp(56px, 6vw, 80px) !important;
  padding-bottom: clamp(56px, 6vw, 80px) !important;
}
.page-id-23987 .nc-lh-calc-section {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
.page-id-23987 .nc-lh-reviews-section {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
.page-id-23987 .nc-lh-faq-section {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
.page-id-23987 .nc-lh-cta-section,
.page-id-23987 .entry-content > section:last-of-type {
  margin-bottom: clamp(56px, 6vw, 80px) !important;
}
@media (max-width: 768px) {
  .page-id-23987 .entry-content > section,
  .page-id-23987 .entry-content > div[class*="section"] {
    margin-bottom: clamp(36px, 5vw, 52px) !important;
  }
  .page-id-23987 .nc-glass-hero {
    margin-top: 12px !important;
    margin-bottom: 28px !important;
    border-radius: 14px !important;
  }
  .page-id-23987 .nc-lh-trust {
    margin-bottom: 28px !important;
  }
  .page-id-23987 .nc-lh-filter-section {
    margin-bottom: 32px !important;
  }
}

/* ============================================================
   WCAG 2.1 AA/AAA DEFENSIVE CONTRAST & COLOR HARMONY ENGINE
   Baut strukturelle Schranken gegen verbotene Farbpaarungen
   ============================================================ */

/* 1. Strikte Kontrastabsicherung für Gold-Aktionen (#F5B301) */
button[style*="#F5B301"],
a[style*="#F5B301"],
.wp-block-button__link[style*="#F5B301"],
.wp-block-button__link[style*="background-color: #F5B301"],
.wp-block-button__link[style*="background-color: rgb(245, 179, 1)"],
.kb-button[style*="#F5B301"],
.kb-button[style*="background-color: #F5B301"] {
  color: #231A00 !important;
}

/* 2. Strikte Kontrastabsicherung für Teal-Aktionen (#0EA99B) */
button[style*="#0EA99B"],
a[style*="#0EA99B"],
.wp-block-button__link[style*="#0EA99B"],
.wp-block-button__link[style*="background-color: #0EA99B"],
.wp-block-button__link[style*="background-color: rgb(14, 169, 155)"],
.kb-button[style*="#0EA99B"],
.kb-button[style*="background-color: #0EA99B"],
.ds-btn--teal,
.btn--teal {
  color: #04231F !important;
}

/* 3. Gold als Textfarbe auf hellem Grund verboten (1.85:1 FAIL) -> Mapping auf #8A6200 (5.49:1 AA) */
body:not(.sec--dark) span[style*="color: #F5B301"],
body:not(.sec--dark) p[style*="color: #F5B301"],
.ds-sec--light span[style*="color: #F5B301"],
.ds-sec--tint span[style*="color: #F5B301"] {
  color: #8A6200 !important;
}

/* 4. Teal als Textfarbe auf hellem Grund verboten (2.93:1 FAIL) -> Mapping auf #0B6B62 (6.38:1 AA) */
body:not(.sec--dark) span[style*="color: #0EA99B"],
body:not(.sec--dark) p[style*="color: #0EA99B"],
.ds-sec--light span[style*="color: #0EA99B"],
.ds-sec--tint span[style*="color: #0EA99B"] {
  color: #0B6B62 !important;
}

/* ── 5. Token-Lock Standard-Klassen ── */
.rf-card-dark {
  background-color: var(--nc-surface-dark, #0F2137) !important;
  color: var(--nc-light, #FAF9F5) !important;
  border-radius: var(--nc-radius, 22px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.rf-btn-hyper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--nc-teal, #0EA99B) !important;
  color: var(--nc-light, #FAF9F5) !important;
  border-radius: var(--nc-radius-pill, 9999px);
  font-weight: 600;
  text-decoration: none;
  transition: var(--nc-transition, 0.24s cubic-bezier(.16,1,.3,1));
}
.rf-btn-hyper:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.rf-reveal {
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(.32,.72,0,1), transform 0.5s cubic-bezier(.32,.72,0,1);
}

/* ── 6. P1-3: Osmose Vorher/Nachher-Wischer Komponente ── */
.ba-stage,
.osmose-compare-card {
  position: relative !important;
  width: 100% !important;
  border-radius: var(--nc-radius, 20px) !important;
  overflow: hidden !important;
  background: var(--nc-navy, #0C1A30) !important;
  box-shadow: 0 20px 48px -12px rgba(12, 26, 48, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: pan-y !important;
}

.ba-stage img,
.osmose-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  pointer-events: none !important;
}

.ba-line,
.osmose-divider {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: var(--nc-teal, #0EA99B) !important;
  box-shadow: 0 0 12px var(--nc-teal, #0EA99B), 0 0 2px #FFFFFF !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

.ba-knob,
.osmose-handle {
  position: absolute !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--nc-navy, #0C1A30) !important;
  border: 2px solid var(--nc-teal, #0EA99B) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(14, 169, 155, 0.6) !important;
  color: #FAF8F4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 5 !important;
  pointer-events: none !important;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.ba-stage:hover .ba-knob,
.osmose-compare-card:hover .osmose-handle {
  transform: translate(-50%, -50%) scale(1.08) !important;
}

.ba-knob svg,
.osmose-handle svg {
  stroke: var(--nc-teal, #0EA99B) !important;
}

.ba-before,
.osmose-badge--before {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  background: rgba(12, 26, 48, 0.85) !important;
  color: #F87171 !important;
  font-family: var(--nc-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: var(--nc-radius-pill, 9999px) !important;
  border: 1px solid rgba(248, 113, 113, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

.ba-after,
.osmose-badge--after {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background: rgba(14, 169, 155, 0.92) !important;
  color: #04231F !important;
  font-family: var(--nc-font-body) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  border-radius: var(--nc-radius-pill, 9999px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 16px rgba(14, 169, 155, 0.4) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ── 7. P1-4: Team, Vertrauen & Button Harmonization ── */
[style*="#1a73e8"],
[style*="background: #1a73e8"],
[style*="background:#1a73e8"],
[style*="background-color: #1a73e8"],
[style*="background-color:#1a73e8"],
.nc-rw-btn-primary {
  background: var(--nc-gold, #F5B301) !important;
  color: #231A00 !important;
  font-family: var(--nc-font-body) !important;
  font-weight: 750 !important;
  border-radius: var(--nc-radius-pill, 9999px) !important;
  box-shadow: 0 6px 20px -4px rgba(245, 179, 1, 0.38) !important;
  transition: var(--nc-transition, 0.24s cubic-bezier(.16,1,.3,1)) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

[style*="#1a73e8"]:hover,
[style*="background: #1a73e8"]:hover,
[style*="background:#1a73e8"]:hover,
[style*="background-color: #1a73e8"]:hover,
[style*="background-color:#1a73e8"]:hover,
.nc-rw-btn-primary:hover {
  background: #E0A200 !important;
  color: #150F00 !important;
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: 0 10px 28px -4px rgba(245, 179, 1, 0.48) !important;
}

.nc-rw-btn-secondary {
  border-radius: var(--nc-radius-pill, 9999px) !important;
  font-family: var(--nc-font-body) !important;
  font-weight: 650 !important;
  transition: var(--nc-transition, 0.24s cubic-bezier(.16,1,.3,1)) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.nc-leader-card {
  border-radius: var(--nc-radius, 20px) !important;
  overflow: hidden !important;
  box-shadow: 0 24px 56px -12px rgba(12, 26, 48, 0.24) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  transition: transform 0.35s cubic-bezier(.16,1,.3,1), box-shadow 0.35s cubic-bezier(.16,1,.3,1) !important;
}
.nc-leader-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 32px 68px -12px rgba(12, 26, 48, 0.32) !important;
}

.nc-leader-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(12, 26, 48, 0.7) 40%, rgba(12, 26, 48, 0.95) 100%) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

/* ── 8. Wireframe Modernization & Space Grotesk Binding ── */
.nc-rw-wrap .nc-rw-h1 {
  font-family: var(--nc-font-display, var(--nc-font-heading, 'Space Grotesk', sans-serif)) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.16 !important;
  color: var(--nc-navy, #0C1A30) !important;
}

.nc-rw-wrap .nc-rw-h2,
.nc-rw-wrap .nc-rw-h3 {
  font-family: var(--nc-font-heading, 'Space Grotesk', sans-serif) !important;
  letter-spacing: -0.025em !important;
  color: var(--nc-navy, #0C1A30) !important;
}

.nc-rw-wrap .nc-rw-sub {
  font-family: var(--nc-font-body, 'Plus Jakarta Sans', sans-serif) !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

.nc-rw-wrap .nc-rw-badge {
  font-family: var(--nc-font-body, 'Plus Jakarta Sans', sans-serif) !important;
  font-weight: 750 !important;
  border-radius: var(--nc-radius-pill, 9999px) !important;
  background: rgba(14, 169, 155, 0.08) !important;
  color: var(--nc-teal, #0EA99B) !important;
  border: 1px solid rgba(14, 169, 155, 0.28) !important;
  box-shadow: 0 2px 8px rgba(14, 169, 155, 0.08) !important;
}

.nc-rw-wrap img {
  border-radius: var(--nc-radius, 18px) !important;
}

.nc-rw-wrap [style*="position: absolute"][style*="bottom: -16px"],
.nc-rw-wrap [style*="position:absolute"][style*="bottom:-16px"] {
  border-radius: 14px !important;
  box-shadow: 0 16px 36px -8px rgba(12, 26, 48, 0.18) !important;
  border: 1px solid rgba(226, 232, 240, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ── 9. Homepage Wireframe Modernization (.nc-wf-) ── */
.nc-wf-container :is(h1, h2, h3, .nc-wf-h1, .nc-wf-h2, .nc-wf-h3) {
  font-family: var(--nc-font-heading, 'Space Grotesk', sans-serif) !important;
  letter-spacing: -0.025em !important;
}

.nc-wf-container h1,
.nc-wf-container .nc-wf-h1 {
  font-family: var(--nc-font-display, var(--nc-font-heading, 'Space Grotesk', sans-serif)) !important;
  letter-spacing: -0.03em !important;
}

.nc-wf-problem-card,
.nc-wf-pillar-card,
.nc-wf-srv-card,
.nc-wf-tab-panel {
  border-radius: var(--nc-radius, 20px) !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-wf-problem-card:hover,
.nc-wf-pillar-card:hover,
.nc-wf-srv-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 20px 44px -12px rgba(12, 26, 48, 0.14) !important;
}

.nc-wf-tab-btn {
  border-radius: var(--nc-radius-pill, 9999px) !important;
  font-family: var(--nc-font-body, 'Plus Jakarta Sans', sans-serif) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}





/* NC Button Harmonization */
.nc-wf-btn-primary, .nc-rw-btn-primary, .nc-btn-primary, .nc-btn-header-cta { border-radius: 12px !important; }

/* ── 10. Universal Button System & Radius Harmonization (12px Standard) ── */
.nc-wf-btn-primary,
.nc-rw-btn-primary,
.nc-btn-primary,
.nc-btn-header-cta,
.ds-btn--primary,
.btn--primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65em !important;
  padding: 0.85em 1.75em !important;
  background: var(--nc-accent, #F5B301) !important;
  color: var(--nc-on-accent, #16213A) !important;
  font-family: var(--nc-font-heading, 'Space Grotesk', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 4px 14px rgba(245, 179, 1, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-wf-btn-primary:hover,
.nc-rw-btn-primary:hover,
.nc-btn-primary:hover,
.nc-btn-header-cta:hover,
.ds-btn--primary:hover,
.btn--primary:hover {
  background: var(--nc-accent-hover, #D99B00) !important;
  color: #0C1A30 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(245, 179, 1, 0.45) !important;
}

.nc-wf-btn-secondary,
.nc-rw-btn-secondary,
.ds-btn--secondary,
.btn--secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65em !important;
  padding: 0.85em 1.6em !important;
  background: var(--nc-navy, #16213A) !important;
  color: #FFFFFF !important;
  font-family: var(--nc-font-heading, 'Space Grotesk', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 4px 16px rgba(26, 54, 93, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.nc-wf-btn-secondary:hover,
.nc-rw-btn-secondary:hover,
.ds-btn--secondary:hover,
.btn--secondary:hover {
  background: var(--nc-navy-mid, #1A365D) !important;
  color: #FFFFFF !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(26, 54, 93, 0.2) !important;
}

.ds-btn--ghost,
.btn--ghost,
.btn-in-btn--ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.65em !important;
  padding: 0.85em 1.6em !important;
  background: transparent !important;
  color: var(--nc-teal-text, #0B6B62) !important;
  font-family: var(--nc-font-heading, 'Space Grotesk', sans-serif) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 1.5px solid var(--nc-teal, #0EA99B) !important;
  box-shadow: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ds-btn--ghost:hover,
.btn--ghost:hover,
.btn-in-btn--ghost:hover {
  background: var(--nc-teal-pale, rgba(14, 169, 155, 0.1)) !important;
  border-color: var(--nc-teal-dark, #0B8074) !important;
  color: var(--nc-teal-dark, #0B8074) !important;
  transform: translateY(-2px) !important;
}