/* MARQENTRA MASTER THEME v2.9
   Geometry comes from the shared MDH master-ci.css copied from Debentra. */
:root{--ci-infobar-bg:rgba(20,8,38,.92)}

header{
  position:sticky!important;top:0!important;z-index:1400!important;
  background:#0b0616!important;border-bottom:1px solid rgba(222,158,255,.18)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.14)!important
}
header .ci-header-inner{width:min(1180px,calc(100% - 32px))!important}
header .ci-header-logo{width:220px!important;max-width:220px!important}
header .nav{gap:16px!important}
header .nav>a{color:#fff!important;text-decoration:none!important;white-space:nowrap!important}
header .nav>a:hover{color:#6ff3e2!important}
header .nav>.btn{
  padding:14px 19px!important;border-radius:999px!important;border:0!important;color:#fff!important;
  background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;
  box-shadow:0 10px 28px rgba(255,45,157,.22)!important
}

.hero{
  position:relative!important;min-height:auto!important;padding:42px 0 30px!important;
  background:
    linear-gradient(90deg,rgba(15,6,29,.70),rgba(15,6,29,.42)),
    url("/landing/assets/brand/master-background.png") center center/cover no-repeat fixed!important;
  border:0!important
}
.hero:after{display:none!important}
.hero>.shell{width:min(1180px,calc(100% - 32px))!important}
.hero-card{
  background:linear-gradient(145deg,rgba(28,10,49,.90),rgba(13,6,30,.86))!important;
  border:1px solid rgba(226,157,255,.24)!important;
  box-shadow:0 26px 72px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(13px)!important;-webkit-backdrop-filter:blur(13px)!important
}
.hero .kicker{color:#d8b4fe!important}
.hero h1{color:#fff!important}
.hero h1 .hero-line-2{
  background:linear-gradient(90deg,#d8b4fe 0%,#ff71c3 53%,#5eead4 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important
}
.hero .lead{color:#ded5e8!important}
.hero .btn{color:#fff!important;text-decoration:none!important}
.hero .btn:not(.ghost){background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;border:1px solid transparent!important}
.hero .btn.ghost{background:rgba(255,255,255,.06)!important;border:1px solid rgba(235,197,255,.26)!important}

.orbit .ring{border-color:rgba(255,255,255,.42)!important}
.orbit .core,.orbit .sat{
  background:rgba(255,255,255,.95)!important;border-color:rgba(255,255,255,.92)!important;color:#10252b!important
}
.orbit .core strong,.orbit .core .orbit-label,.orbit .sat .orbit-label{color:#10252b!important}
.orbit .sat .mq-step{
  display:block!important;color:#18bdb2!important;font-size:9px!important;font-weight:900!important;
  letter-spacing:.10em!important;line-height:1!important
}
.orbit .sat .mq-sub{
  display:block!important;margin-top:2px!important;color:#60717a!important;font-size:8px!important;
  font-weight:600!important;line-height:1.1!important
}

.hero-proof{--ci-infobar-bg:rgba(17,7,34,.91)}
.hero-proof>div,.hero-proof strong{color:#fff!important}
.hero-proof span{color:#cbbfd5!important}

footer{
  background:#090414!important;color:#fff!important;border-top:1px solid rgba(214,151,255,.16)!important
}
footer .footer-brand-logo{width:220px!important;max-width:220px!important}
footer p,footer a,footer .copy{color:#b9adc8!important;text-decoration:none!important}
footer strong{display:block!important;margin-bottom:10px!important;color:#fff!important}
footer a{display:block!important;margin-top:7px!important}
footer a:hover{color:#6ff3e2!important}
footer .copy{
  margin-top:26px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.09)!important
}

@media(max-width:1050px){
  header .nav{gap:11px!important}
  header .nav>a{font-size:13px!important}
}
@media(max-width:900px){
  header .ci-header-inner{
    height:auto!important;min-height:76px!important;padding:12px 0!important;flex-wrap:wrap!important
  }
  header .nav{
    width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important;padding-bottom:8px!important
  }
  .hero{background-attachment:scroll!important}
}


/* v2.9.1 — orbit icon center, stronger menu, readable editions, homepage cleanup */
header .nav > a{
  font-weight:700!important;
  font-size:15px!important;
}
header .nav > .btn{font-weight:800!important}
.orbit .core .orbit-icon--center{width:58px!important;height:58px!important;object-fit:contain!important}

/* Editions readability */
.editions-section{
  background:
    linear-gradient(rgba(18,7,35,.70),rgba(18,7,35,.76)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
}
.editions-head h2,
.editions-head p,
.editions-note,
.pricing-card li,
.pricing-top p,
.pricing-year,
.pricing-price strong,
.pricing-price span{color:#f4effa!important}
.pricing-card{
  border:1px solid rgba(234,203,255,.18)!important;
  background:linear-gradient(145deg,rgba(28,10,49,.90),rgba(13,6,30,.86))!important;
}
.pricing-card--featured{
  border-color:rgba(168,85,247,.45)!important;
  box-shadow:0 28px 68px rgba(80,29,124,.22),0 0 0 1px rgba(168,85,247,.14)!important;
}
.pricing-label{color:#d8b4fe!important}
.pricing-card ul{border-top:1px solid rgba(255,255,255,.16)!important}
.pricing-btn--secondary{color:#fff!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.18)!important}
.pricing-btn--secondary:hover{background:rgba(255,255,255,.12)!important}
.pricing-btn--primary{color:#fff!important}
.billing-switch{
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  padding:4px!important;
  margin:0 0 24px!important;
  border-radius:999px!important;
  border:1px solid rgba(222,158,255,.20)!important;
  background:rgba(17,7,34,.60)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.16)!important;
}
.billing-switch button{
  appearance:none!important;
  border:0!important;
  background:transparent!important;
  color:#e8dcf3!important;
  padding:10px 16px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.billing-switch button.active{
  background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(168,85,247,.22)!important;
}

/* FAQ page tweaks */
.faq-page .faq-section{padding-top:40px!important}
.faq-page .news-back{margin-top:28px!important;text-align:center!important}


/* =========================================================
   v2.9.2 — exact header/orbit cleanup
   ========================================================= */

/* Header typography: same regular weight as Affilentra/Debentra. */
header .nav > a{
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.2!important;
}
header .nav > .btn{
  font-weight:800!important;
}

/* The legacy site.css gave the orbit wrapper itself a border.
   That created a third ring. The master has exactly TWO ring elements. */
.hero .orbit{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  border-radius:0!important;
}

/* Orbit core uses the supplied Marqentra icon, like the app icon
   inside Affilentra/Debentra's white circular center. */
.orbit .core .orbit-icon--center{
  width:58px!important;
  height:58px!important;
  object-fit:contain!important;
  border-radius:10px!important;
}

/* Satellite cards: master layout = icon above concise label. */
.orbit .sat{
  gap:6px!important;
}
.orbit .sat .orbit-role-icon{
  display:block!important;
  margin:0!important;
  color:#10252b!important;
  font-size:25px!important;
  font-weight:900!important;
  line-height:1!important;
}
.orbit .sat .orbit-label{
  display:block!important;
  margin:0!important;
  color:#10252b!important;
  font-size:13px!important;
  font-weight:800!important;
  line-height:1.12!important;
}

/* Blog/FAQ archive pages use the same visual background language. */
.blog-page .news-archive,
.faq-page .faq-section{
  background:
    linear-gradient(rgba(13,7,29,.66),rgba(13,7,29,.74)),
    url("/landing/assets/brand/master-background.png") center center / cover no-repeat fixed!important;
}


/* =========================================================
   v2.9.4 — LIGHT EDITION CARDS
   ========================================================= */

/* Keep the editions section dark, but make the three purchase cards light. */
.editions-section .pricing-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7f3fb 100%)!important;
  border:1px solid rgba(89,49,116,.16)!important;
  color:#23152f!important;
  box-shadow:0 22px 52px rgba(10,4,18,.20)!important;
}

/* PRO remains visually highlighted without losing readability. */
.editions-section .pricing-card--featured{
  border:2px solid rgba(183,68,217,.72)!important;
  box-shadow:
    0 24px 58px rgba(78,25,102,.22),
    0 0 0 1px rgba(234,97,204,.08)!important;
}

/* Headings, price, descriptive copy and feature lists become dark. */
.editions-section .pricing-card h3,
.editions-section .pricing-card .pricing-label,
.editions-section .pricing-card .pricing-price,
.editions-section .pricing-card .pricing-price strong,
.editions-section .pricing-card .pricing-price span,
.editions-section .pricing-card .pricing-year,
.editions-section .pricing-card .pricing-top p,
.editions-section .pricing-card li{
  color:#271532!important;
}

/* Secondary text in cards remains softer but readable. */
.editions-section .pricing-card .pricing-year,
.editions-section .pricing-card .pricing-top p{
  color:#6c5a76!important;
}

/* Keep turquoise checkmarks from the Marqentra identity. */
.editions-section .pricing-card li::before{
  color:#13b9aa!important;
}

/* Subtle separators on light cards. */
.editions-section .pricing-card ul{
  border-top:1px solid rgba(76,49,91,.16)!important;
}

/* Edition labels on light background. */
.editions-section .pricing-label{
  color:#7f2aa7!important;
}

/* Featured badge stays vivid. */
.editions-section .pricing-badge{
  color:#ffffff!important;
  background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;
  border:0!important;
}

/* BASIS + AGENTUR buttons: light cards with clear dark-violet action. */
.editions-section .pricing-btn--secondary{
  background:#ffffff!important;
  color:#6f258e!important;
  border:1px solid rgba(111,37,142,.28)!important;
  box-shadow:none!important;
}
.editions-section .pricing-btn--secondary:hover{
  background:#f2e9f7!important;
  color:#551a70!important;
}

/* PRO button keeps the strong Marqentra gradient. */
.editions-section .pricing-btn--primary{
  background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;
  color:#ffffff!important;
  border:0!important;
}

/* Billing switch remains dark so it visually belongs to the section, not the cards. */
.editions-section .billing-switch{
  background:rgba(17,7,34,.72)!important;
  border:1px solid rgba(222,158,255,.22)!important;
}


/* =========================================================
   v2.9.5 — LARGER TEXT INSIDE EDITION CARDS
   ========================================================= */
.editions-section .pricing-card h3{
  font-size:26px!important;
  line-height:1.15!important;
}
.editions-section .pricing-label{
  font-size:14px!important;
  line-height:1.2!important;
}
.editions-section .pricing-top p{
  font-size:16px!important;
  line-height:1.55!important;
}
.editions-section .pricing-price strong{
  font-size:46px!important;
  line-height:1!important;
}
.editions-section .pricing-price span{
  font-size:15px!important;
  line-height:1.2!important;
}
.editions-section .pricing-year{
  font-size:14px!important;
  line-height:1.35!important;
}
.editions-section .pricing-card li{
  font-size:16px!important;
  line-height:1.5!important;
}
.editions-section .pricing-card li::before{
  font-size:17px!important;
}
.editions-section .pricing-btn{
  font-size:15px!important;
  font-weight:800!important;
  line-height:1.2!important;
}
.editions-section .billing-switch button{
  font-size:14px!important;
}
@media(max-width:700px){
  .editions-section .pricing-card h3{font-size:23px!important}
  .editions-section .pricing-top p{font-size:15px!important}
  .editions-section .pricing-price strong{font-size:40px!important}
  .editions-section .pricing-card li{font-size:15px!important}
}


/* =========================================================
   v2.9.8 — FAQ LEFT INTRO CONTRAST FIX
   ========================================================= */

.faq-page .faq-head{
  align-self:start!important;
  padding:28px 30px!important;
  border:1px solid rgba(226,170,255,.22)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(28,10,49,.88),rgba(13,6,30,.80))!important;
  box-shadow:0 20px 54px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

.faq-page .faq-head .section-kicker,
.faq-page .faq-head .section-kicker--dark{
  color:#70efdf!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.14em!important;
}

.faq-page .faq-head h2{
  margin:12px 0 14px!important;
  color:#ffffff!important;
  font-size:clamp(34px,3vw,48px)!important;
  line-height:1.04!important;
  letter-spacing:-.04em!important;
  font-weight:850!important;
}

.faq-page .faq-head p{
  margin:0!important;
  color:#d8cfe2!important;
  font-size:16px!important;
  line-height:1.65!important;
}

@media(max-width:900px){
  .faq-page .faq-head{
    padding:24px 22px!important;
  }
  .faq-page .faq-head h2{
    font-size:clamp(30px,7vw,40px)!important;
  }
}


/* =========================================================
   v3.0.1 — VISUAL UNIFICATION
   Same favicon, lighter section-3 background, lighter nav weight
   ========================================================= */

/* 1) Header typography: visibly as light as Affilentra / Debentra. */
header .nav > a{
  font-size:15px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}
header .nav > .btn{
  font-weight:800!important;
}

/* 2) One common background for ALL content sections after the hero.
      Reference: the lighter background previously used in section 3. */
.functions-section,
.workflow-section,
.wordpress-section,
.editions-section,
.demo-section,
.news-section,
.faq-section{
  background:
    linear-gradient(rgba(18,7,35,.34),rgba(18,7,35,.42)),
    url("/landing/assets/brand/master-background.png") center center / cover no-repeat fixed!important;
}

/* Keep the shared background visible instead of covering it with section pseudo layers. */
.functions-section::before,
.functions-section::after,
.workflow-section::before,
.workflow-section::after,
.wordpress-section::before,
.wordpress-section::after,
.editions-section::before,
.editions-section::after,
.demo-section::before,
.demo-section::after,
.news-section::before,
.news-section::after,
.faq-section::before,
.faq-section::after{
  opacity:.18!important;
}

/* 3) Dark glass cards gain a little more density on the lighter common image. */
.feature-card,
.workflow-card,
.product-family-card,
.demo-card,
.news-card,
.faq-item,
.product-preview,
.hero-video-card{
  background:linear-gradient(
    145deg,
    rgba(29,11,50,.88),
    rgba(13,6,30,.84)
  )!important;
  border-color:rgba(226,170,255,.24)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(13px)!important;
  -webkit-backdrop-filter:blur(13px)!important;
}

/* Light edition cards remain intentionally light. */
.editions-section .pricing-card{
  background:linear-gradient(180deg,#ffffff 0%,#f7f3fb 100%)!important;
}

/* Section copy remains readable on the lighter common background. */
.functions-section h2,
.workflow-section h2,
.wordpress-section h2,
.demo-section h2,
.news-section h2,
.faq-section h2,
.functions-section h3,
.workflow-section h3,
.wordpress-section h3,
.demo-section h3,
.news-section h3{
  color:#fff!important;
}
.functions-section p,
.workflow-section p,
.wordpress-section p,
.demo-section p,
.news-section p,
.faq-section p{
  color:#d9d0e3!important;
}

/* 4) Individual pages use the same section-3 background. */
.contact-page main,
.news-page main,
.faq-page main,
body:has(.legal-content) main{
  background:
    linear-gradient(rgba(18,7,35,.34),rgba(18,7,35,.42)),
    url("/landing/assets/brand/master-background.png") center center / cover no-repeat fixed!important;
}

/* Page hero areas stay distinct but use the same project image. */
.contact-page .contact-hero,
.news-page .news-page-hero,
.faq-page .news-page-hero{
  background:
    linear-gradient(rgba(24,8,44,.46),rgba(24,8,44,.52)),
    url("/landing/assets/brand/master-background.png") center center / cover no-repeat fixed!important;
}

/* Content cards on individual pages. */
.contact-page .contact-card,
.news-page .news-list-card,
.faq-page .faq-head,
.faq-page .faq-item,
.legal-content{
  background:linear-gradient(
    145deg,
    rgba(29,11,50,.90),
    rgba(13,6,30,.86)
  )!important;
  border:1px solid rgba(226,170,255,.24)!important;
  box-shadow:0 20px 54px rgba(0,0,0,.22)!important;
  backdrop-filter:blur(13px)!important;
  -webkit-backdrop-filter:blur(13px)!important;
  color:#fff!important;
}

/* Legal copy was originally designed for a light surface. */
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content strong,
.contact-page .contact-card h1,
.contact-page .contact-card h2,
.news-page .news-list-card h2,
.news-page .news-list-card h2 a{
  color:#fff!important;
}
.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th,
.legal-content a,
.contact-page .contact-card p,
.contact-page .contact-card label,
.news-page .news-list-card p{
  color:#d9d0e3!important;
}
.legal-content a{
  text-decoration-color:rgba(112,239,223,.50)!important;
}

/* Do not darken the page so strongly on mobile. */
@media(max-width:900px){
  .functions-section,
  .workflow-section,
  .wordpress-section,
  .editions-section,
  .demo-section,
  .news-section,
  .faq-section,
  .contact-page main,
  .news-page main,
  .faq-page main,
  body:has(.legal-content) main,
  .contact-page .contact-hero,
  .news-page .news-page-hero,
  .faq-page .news-page-hero{
    background-attachment:scroll!important;
  }
}


/* =========================================================
   v3.0.2 — LIGHT DASHBOARD BACKGROUND
   Reference: light Ablauf section from user screenshot
   ========================================================= */

/* Use the exact dashboard background from the Ablauf section,
   strongly lightened by a white glass overlay. */
.functions-section,
.workflow-section,
.wordpress-section,
.editions-section,
.demo-section,
.news-section,
.faq-section{
  background:
    linear-gradient(rgba(250,248,252,.82),rgba(247,244,250,.86)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
}

/* Individual content pages use the same light background. */
.contact-page main,
.news-page main,
.faq-page main,
body:has(.legal-content) main{
  background:
    linear-gradient(rgba(250,248,252,.82),rgba(247,244,250,.86)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
}

/* Subpage hero areas: same image, slightly more opaque for clean typography. */
.contact-page .contact-hero,
.news-page .news-page-hero,
.faq-page .news-page-hero{
  background:
    linear-gradient(rgba(247,243,251,.88),rgba(244,239,249,.90)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
}

/* Remove legacy pseudo overlays that tint the new light surface. */
.functions-section::before,
.functions-section::after,
.workflow-section::before,
.workflow-section::after,
.wordpress-section::before,
.wordpress-section::after,
.editions-section::before,
.editions-section::after,
.demo-section::before,
.demo-section::after,
.news-section::before,
.news-section::after,
.faq-section::before,
.faq-section::after{
  opacity:0!important;
}

/* Free-standing section typography must be dark on the pale background. */
.functions-section .section-kicker,
.workflow-section .section-kicker,
.wordpress-section .section-kicker,
.editions-section .section-kicker,
.demo-section .section-kicker,
.news-section .section-kicker,
.faq-section .section-kicker,
.news-page .eyebrow,
.faq-page .eyebrow,
.contact-page .eyebrow{
  color:#6b21a8!important;
}

.functions-section > .shell > h2,
.workflow-section > .shell > h2,
.wordpress-section > .shell > h2,
.demo-section .demo-copy > h2,
.news-section .news-head > h2,
.faq-section .faq-head > h2,
.news-page .news-page-hero h1,
.faq-page .news-page-hero h1,
.contact-page .contact-hero h1{
  color:#261333!important;
}

.functions-section > .shell > p,
.workflow-section > .shell > p,
.wordpress-section > .shell > p,
.demo-section .demo-copy > p,
.news-section .news-head > p,
.news-page .news-page-hero p,
.faq-page .news-page-hero p,
.contact-page .contact-hero p,
.news-page .news-source-line,
.faq-page .news-source-line{
  color:#685875!important;
}

/* Dark glass cards stay dark and readable on the light background. */
.feature-card,
.workflow-card,
.product-family-card,
.demo-card,
.news-card,
.faq-item,
.product-preview,
.hero-video-card,
.contact-page .contact-card,
.news-page .news-list-card,
.faq-page .faq-head,
.faq-page .faq-item,
.legal-content{
  background:linear-gradient(
    145deg,
    rgba(35,18,49,.94),
    rgba(25,11,39,.92)
  )!important;
  border:1px solid rgba(82,55,102,.22)!important;
  box-shadow:0 20px 48px rgba(56,38,68,.18)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

/* Text inside dark cards remains light. */
.feature-card h3,
.workflow-card h3,
.product-family-card h3,
.demo-card h3,
.news-card h3,
.faq-item summary,
.contact-page .contact-card h1,
.contact-page .contact-card h2,
.news-page .news-list-card h2,
.news-page .news-list-card h2 a,
.faq-page .faq-head h2,
.legal-content h1,
.legal-content h2,
.legal-content h3,
.legal-content strong{
  color:#fff!important;
}
.feature-card p,
.workflow-card p,
.product-family-card p,
.demo-card p,
.news-card p,
.faq-item p,
.contact-page .contact-card p,
.contact-page .contact-card label,
.news-page .news-list-card p,
.faq-page .faq-head p,
.legal-content p,
.legal-content li,
.legal-content td,
.legal-content th,
.legal-content a{
  color:#ddd5e5!important;
}

/* Edition cards intentionally remain light/white. */
.editions-section .pricing-card{
  background:linear-gradient(180deg,#fff 0%,#f7f3fb 100%)!important;
  border-color:rgba(89,49,116,.16)!important;
}

/* Ensure editions headline/copy are dark on the light section background. */
.editions-section .editions-head h2{
  color:#261333!important;
}
.editions-section .editions-head p,
.editions-section .editions-note{
  color:#685875!important;
}

/* Mobile: fixed backgrounds become scroll backgrounds. */
@media(max-width:900px){
  .functions-section,
  .workflow-section,
  .wordpress-section,
  .editions-section,
  .demo-section,
  .news-section,
  .faq-section,
  .contact-page main,
  .news-page main,
  .faq-page main,
  body:has(.legal-content) main,
  .contact-page .contact-hero,
  .news-page .news-page-hero,
  .faq-page .news-page-hero{
    background-attachment:scroll!important;
  }
}

/* =========================================================
   v3.0.3 — WORKFLOW / WORDPRESS / DEMO LIGHT-SURFACE FIX
   User reference: light dashboard background from Ablauf screenshot
   ========================================================= */

/* 1) Ablauf section: headline block must be dark violet on the pale surface. */
.workflow-section .workflow-head .section-kicker,
.workflow-section .workflow-head .section-kicker--dark{
  color:#6b21a8!important;
}
.workflow-section .workflow-head h2{
  color:#261333!important;
}
.workflow-section .workflow-head p{
  color:#685875!important;
}

/* 2) WordPress section also uses the pale surface visually. */
.wordpress-section .section-kicker,
.wordpress-section .section-kicker--dark,
.demo-section .section-kicker,
.demo-section .section-kicker--dark{
  color:#6b21a8!important;
}

.wordpress-section .wordpress-copy h2,
.demo-section .demo-copy h2{
  color:#261333!important;
}
.wordpress-section .wordpress-copy p,
.demo-section .demo-copy p{
  color:#685875!important;
}

/* Point lists become light content chips with dark text. */
.wordpress-section .wordpress-points,
.demo-section .demo-points{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
.wordpress-section .wordpress-points span,
.demo-section .demo-points span{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(89,49,116,.12)!important;
  color:#4f425d!important;
  box-shadow:0 10px 26px rgba(73,46,90,.08)!important;
}
.wordpress-section .wordpress-points span::before,
.demo-section .demo-points span::before{
  content:'•'!important;
  color:#19bdb1!important;
  font-weight:900!important;
  line-height:1!important;
  margin-top:1px!important;
}
.wordpress-section .wordpress-points b,
.demo-section .demo-points b{
  color:#261333!important;
}

/* Preview / window cards switch to light cards to fit the section background. */
.wordpress-section .wp-window,
.demo-section .demo-window{
  background:linear-gradient(180deg,#ffffff 0%,#f7f3fb 100%)!important;
  border:1px solid rgba(89,49,116,.16)!important;
  box-shadow:0 24px 58px rgba(73,46,90,.14)!important;
}
.wordpress-section .wp-topbar,
.demo-section .demo-window-top{
  background:#1f2731!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.wordpress-section .wp-topbar span,
.demo-section .demo-window-top em{
  color:#eef2f5!important;
}

/* Inner WP UI cards remain light and crisp. */
.wordpress-section .wp-content,
.wordpress-section .wp-panel,
.wordpress-section .wp-metrics > div{
  background:#ffffff!important;
}
.wordpress-section .wp-content-head strong,
.wordpress-section .wp-panel-title strong,
.wordpress-section .wp-metrics b{
  color:#261333!important;
}
.wordpress-section .wp-content-head small,
.wordpress-section .wp-panel-title span,
.wordpress-section .wp-metrics span{
  color:#6b5c78!important;
}

/* Demo badges become light cards with dark text. */
.demo-section .demo-status{
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(89,49,116,.16)!important;
  box-shadow:0 12px 32px rgba(73,46,90,.10)!important;
}
.demo-section .demo-status strong{
  color:#11b9ab!important;
}
.demo-section .demo-status span{
  color:#261333!important;
}

/* Secondary buttons on pale sections. */
.wordpress-section .wordpress-secondary,
.demo-section .demo-secondary{
  background:#ffffff!important;
  color:#6f258e!important;
  border:1px solid rgba(111,37,142,.28)!important;
  box-shadow:none!important;
}
.wordpress-section .wordpress-secondary:hover,
.demo-section .demo-secondary:hover{
  background:#f2e9f7!important;
  color:#551a70!important;
}

/* Ensure the entire sections use the bright dashboard reference surface. */
.wordpress-section,
.demo-section{
  background:
    linear-gradient(rgba(250,248,252,.84),rgba(247,244,250,.88)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
}

/* Mobile: preview/status cards stay clean. */
@media(max-width:900px){
  .wordpress-section .wordpress-points span,
  .demo-section .demo-points span{
    padding:11px 13px!important;
  }
  .wordpress-section,
  .demo-section{
    background-attachment:scroll!important;
  }
}


/* =========================================================
   v3.0.4 — FORCE LIGHT BACKGROUND FOR WORDPRESS + DEMO
   The absolute .wordpress-background / .demo-background layers
   were still covering the section background from v3.0.3.
   ========================================================= */

/* Remove the old full-section dark overlay layers completely. */
.wordpress-section .wordpress-background,
.demo-section .demo-background{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  background:none!important;
}

/* Force the section itself to carry the light Ablauf reference background. */
.wordpress-section,
.demo-section{
  position:relative!important;
  background:
    linear-gradient(rgba(250,248,252,.84),rgba(247,244,250,.88)),
    url("/landing/assets/brand/dashboard-background.png") center center / cover no-repeat fixed!important;
  color:#261333!important;
}

/* Prevent any pseudo layer from re-darkening these two sections. */
.wordpress-section::before,
.wordpress-section::after,
.demo-section::before,
.demo-section::after{
  content:none!important;
  display:none!important;
  opacity:0!important;
  background:none!important;
}

/* Text blocks are explicitly dark on the pale surface. */
.wordpress-section .wordpress-copy,
.demo-section .demo-copy{
  color:#261333!important;
}
.wordpress-section .wordpress-copy .section-kicker,
.demo-section .demo-copy .section-kicker{
  color:#6b21a8!important;
}
.wordpress-section .wordpress-copy h2,
.demo-section .demo-copy h2{
  color:#261333!important;
}
.wordpress-section .wordpress-copy > p,
.demo-section .demo-copy > p{
  color:#685875!important;
}

/* Light information rows. */
.wordpress-section .wordpress-points span,
.demo-section .demo-points span{
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(89,49,116,.15)!important;
  color:#4f425d!important;
  box-shadow:0 10px 26px rgba(73,46,90,.08)!important;
}
.wordpress-section .wordpress-points b,
.demo-section .demo-points b{
  color:#261333!important;
}

/* Preview cards on the light section. */
.wordpress-section .wordpress-visual,
.demo-section .demo-visual{
  background:transparent!important;
}
.wordpress-section .wp-window,
.demo-section .demo-window{
  background:#ffffff!important;
  border:1px solid rgba(89,49,116,.18)!important;
  box-shadow:0 24px 58px rgba(73,46,90,.16)!important;
}

/* Demo badges: light cards instead of dark floating pills. */
.demo-section .demo-status{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(89,49,116,.18)!important;
  box-shadow:0 12px 30px rgba(73,46,90,.12)!important;
}
.demo-section .demo-status strong{
  color:#11b9ab!important;
}
.demo-section .demo-status span{
  color:#261333!important;
}

/* Secondary CTAs match the light section. */
.wordpress-section .wordpress-secondary,
.demo-section .demo-secondary{
  background:#ffffff!important;
  color:#6f258e!important;
  border:1px solid rgba(111,37,142,.28)!important;
}

/* Ensure mobile keeps the same visual without fixed background jitter. */
@media(max-width:900px){
  .wordpress-section,
  .demo-section{
    background-attachment:scroll!important;
  }
}




/* =========================================================
   v3.1.0 — STANDARD LEGAL PAGES / CONSENT
   Same structure as the other MDH product sites
   ========================================================= */

.legal-page{
  background:#f4f0f7!important;
}

.legal-page .legal-hero{
  padding:42px 0 28px!important;
  background:
    linear-gradient(rgba(250,248,252,.82),rgba(247,244,250,.86)),
    url("/landing/assets/brand/dashboard-background.png") center center/cover no-repeat fixed!important;
}

.legal-page .legal-hero .shell,
.legal-page .legal-main .shell{
  width:min(1180px,calc(100% - 32px))!important;
  margin-inline:auto!important;
}

.legal-page .legal-hero-card{
  width:100%!important;
  padding:34px 38px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(35,18,49,.94),rgba(25,11,39,.92))!important;
  border:1px solid rgba(82,55,102,.22)!important;
  box-shadow:0 18px 42px rgba(56,38,68,.16)!important;
  color:#fff!important;
}

.legal-page .legal-kicker{
  display:block!important;
  margin-bottom:9px!important;
  color:#70efdf!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.14em!important;
}

.legal-page .legal-hero-card h1{
  margin:0!important;
  color:#fff!important;
  font-size:clamp(36px,4vw,58px)!important;
  line-height:1.02!important;
  letter-spacing:-.04em!important;
}

.legal-page .legal-hero-card p{
  max-width:760px!important;
  margin:12px 0 0!important;
  color:#d9d0e3!important;
  font-size:15px!important;
  line-height:1.55!important;
}

.legal-page .legal-main{
  padding:26px 0 64px!important;
  background:
    linear-gradient(rgba(250,248,252,.82),rgba(247,244,250,.86)),
    url("/landing/assets/brand/dashboard-background.png") center center/cover no-repeat fixed!important;
}

.legal-page .legal-subnav{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px 18px!important;
  width:100%!important;
  margin:0 0 22px!important;
  padding:14px 18px!important;
  border-radius:14px!important;
  background:linear-gradient(145deg,rgba(35,18,49,.94),rgba(25,11,39,.92))!important;
  border:1px solid rgba(82,55,102,.22)!important;
  box-shadow:0 12px 28px rgba(56,38,68,.12)!important;
}

.legal-page .legal-subnav a{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:7px 11px!important;
  border-radius:9px!important;
  color:#ded5e8!important;
  text-decoration:none!important;
  font-size:13px!important;
  font-weight:500!important;
}

.legal-page .legal-subnav a:hover,
.legal-page .legal-subnav a.active{
  background:rgba(112,239,223,.16)!important;
  color:#fff!important;
}

.legal-page .legal-content{
  width:min(920px,100%)!important;
  margin:0 auto!important;
  padding:30px 34px!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,rgba(35,18,49,.94),rgba(25,11,39,.92))!important;
  border:1px solid rgba(82,55,102,.22)!important;
  box-shadow:0 18px 42px rgba(56,38,68,.16)!important;
  color:#ddd5e5!important;
}

.legal-page .legal-content h1{
  display:none!important;
}

.legal-page .legal-content h2,
.legal-page .legal-content h3{
  color:#fff!important;
  margin-top:26px!important;
  margin-bottom:10px!important;
  line-height:1.2!important;
}

.legal-page .legal-content h2:first-child{
  margin-top:0!important;
}

.legal-page .legal-content p,
.legal-page .legal-content li,
.legal-page .legal-content td,
.legal-page .legal-content th{
  color:#ddd5e5!important;
  font-size:14px!important;
  line-height:1.7!important;
}

.legal-page .legal-content a{
  color:#70efdf!important;
}

.legal-page .legal-meta{
  display:inline-block!important;
  margin:0 0 10px!important;
  color:#a99bb5!important;
  font-size:12px!important;
}

.legal-page .cookie-settings-box{
  margin-top:28px!important;
  padding:20px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(112,239,223,.26)!important;
}

.legal-page .cookie-settings-box strong{
  color:#fff!important;
}

.legal-page .cookie-settings-box .btn{
  margin-top:8px!important;
  border:0!important;
  background:linear-gradient(135deg,#a855f7,#ff2d9d)!important;
  color:#fff!important;
}

@media(max-width:800px){
  .legal-page .legal-hero,
  .legal-page .legal-main{
    background-attachment:scroll!important;
  }
  .legal-page .legal-hero-card{
    padding:26px 22px!important;
  }
  .legal-page .legal-content{
    padding:24px 20px!important;
  }
  .legal-page .legal-subnav{
    gap:6px!important;
  }
}


/* =========================================================
   v3.1.1 — PUBLIC LANGUAGE SWITCHER
   DE / EN / ES / FR / PT
   ========================================================= */
header .language-switch{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  margin:0!important;
  flex:0 0 auto!important;
}
header .language-switch > summary{
  list-style:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  min-width:54px!important;
  min-height:34px!important;
  padding:6px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(216,180,254,.30)!important;
  background:rgba(255,255,255,.055)!important;
  color:#fff!important;
  cursor:pointer!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
}
header .language-switch > summary::-webkit-details-marker{display:none!important}
header .language-switch > summary::marker{content:""!important}
header .language-switch[open] > summary,
header .language-switch > summary:hover{
  border-color:rgba(112,239,223,.56)!important;
  background:rgba(112,239,223,.10)!important;
}
header .language-switch .lang-globe{
  color:#70efdf!important;
  font-size:13px!important;
}
header .language-switch .lang-chevron{
  opacity:.7!important;
  font-size:11px!important;
}
header .language-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  z-index:1800!important;
  min-width:174px!important;
  padding:7px!important;
  border-radius:14px!important;
  background:rgba(17,8,29,.98)!important;
  border:1px solid rgba(216,180,254,.22)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
header .language-menu a{
  display:grid!important;
  grid-template-columns:34px 1fr!important;
  gap:8px!important;
  align-items:center!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  color:#d9d0e3!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:500!important;
}
header .language-menu a strong{
  color:#fff!important;
  font-size:11px!important;
  letter-spacing:.08em!important;
}
header .language-menu a:hover,
header .language-menu a.active{
  background:rgba(112,239,223,.12)!important;
  color:#fff!important;
}
header .language-menu a.active strong{color:#70efdf!important}

@media(max-width:1220px){
  header .ci-header-inner{gap:14px!important}
  header .nav{gap:10px!important}
  header .nav > a{font-size:13px!important}
  header .ci-header-logo{max-width:185px!important}
}
@media(max-width:980px){
  header .language-switch{width:auto!important}
  header .language-menu{right:auto!important;left:0!important}
}


/* =========================================================
   v3.1.5 — CONTACT FORM LABEL READABILITY
   No layout/content change; only restores contrast on dark glass card.
   ========================================================= */
.contact-page .contact-card .contact-field > span,
.contact-page .contact-card .contact-check > span,
.contact-page .contact-card .contact-actions > span{
  color:#f4eef8!important;
}
.contact-page .contact-card .contact-field > span b,
.contact-page .contact-card .contact-check > span b{
  color:#ff5fb7!important;
}
.contact-page .contact-card .contact-actions,
.contact-page .contact-card .contact-actions a{
  color:#ddd5e5!important;
}