/* ============================================================
   MOTAVIO THEME SYSTEM FINAL V1

   LIGHT
   - Weiß und sehr helle Flächen
   - Deep Navy
   - Motavio Blue #168FE6

   DARK
   - bisheriges Midnight/Navy
   - Weiß
   - Motavio Gold #E2B449

   Gilt ausschließlich für body.mv-public.
   Der Admin-Builder selbst wird nicht umgestaltet.
   ============================================================ */


/* ============================================================
   GEMEINSAME MARKENWERTE
   ============================================================ */

:root {
  --motavio-blue: #168FE6;
  --motavio-blue-hover: #0D78CE;

  --motavio-navy: #071A2C;
  --motavio-navy-soft: #0B2235;

  --motavio-gold: #E2B449;
  --motavio-gold-light: #F1C85E;
  --motavio-gold-dark: #D8A934;

  --motavio-white: #F5F7FA;
  --motavio-success: #10A878;
  --motavio-warning: #E2B449;
  --motavio-danger: #F16D7A;


  /* DARK = Standard */

  --theme-page: #030A11;
  --theme-page-alt: #06111A;
  --theme-section: #040D14;

  --theme-surface: #081722;
  --theme-surface-2: #0B1D2A;
  --theme-surface-3: #102536;

  --theme-border: #193247;
  --theme-border-soft: rgba(132, 165, 187, 0.14);

  --theme-heading: #F5F7FA;
  --theme-text: #E7EEF2;
  --theme-muted: #A6B7C3;
  --theme-muted-2: #7F94A2;

  --theme-accent: #E2B449;
  --theme-accent-high: #F1C85E;
  --theme-accent-low: #D8A934;
  --theme-accent-soft: rgba(226, 180, 73, 0.09);
  --theme-accent-contrast: #071019;

  --theme-info: #22C8D8;
  --theme-input: #07131D;
  --theme-input-text: #F5F7FA;

  --theme-card-shadow:
    0 18px 55px
    rgba(0, 0, 0, 0.24);

  --theme-card-shadow-hover:
    0 24px 68px
    rgba(0, 0, 0, 0.31);

  --theme-hero:
    radial-gradient(
      circle at 20% 30%,
      rgba(22, 143, 230, 0.08),
      transparent 34%
    ),
    radial-gradient(
      circle at 74% 35%,
      rgba(226, 180, 73, 0.035),
      transparent 30%
    ),
    #030A11;


  /* Aliase für vorhandene ältere CSS-Regeln */

  --bg: var(--theme-page);
  --bg-soft: var(--theme-page-alt);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-2);

  --line: var(--theme-border);
  --line-soft: var(--theme-border-soft);

  --text: var(--theme-heading);
  --muted: var(--theme-muted);
  --muted-soft: var(--theme-muted-2);

  --gold: var(--theme-accent);
  --gold-light: var(--theme-accent-high);

  --cyan: var(--theme-info);
  --blue: var(--motavio-blue);

  --mv-navy: var(--motavio-navy);
  --mv-blue: var(--motavio-blue);
  --mv-blue2: var(--motavio-blue-hover);

  --mv-orange: var(--theme-accent);
  --mv-green: var(--motavio-success);
  --mv-purple: var(--motavio-blue);

  --mv-bg: var(--theme-page);
  --mv-soft: var(--theme-page-alt);
  --mv-line: var(--theme-border);

  --mv-text: var(--theme-heading);
  --mv-text-soft: var(--theme-muted);
  --mv-muted: var(--theme-muted);

  --mv-white: var(--motavio-white);
  --mv-shadow: var(--theme-card-shadow);
}


/* ============================================================
   LIGHT MODE
   ============================================================ */

html[data-mv-theme="light"] {
  color-scheme: light;

  --theme-page: #FFFFFF;
  --theme-page-alt: #F6FAFD;
  --theme-section: #FFFFFF;

  --theme-surface: #FFFFFF;
  --theme-surface-2: #F3F8FC;
  --theme-surface-3: #EAF3F9;

  --theme-border: #D8E5ED;
  --theme-border-soft: rgba(7, 26, 44, 0.085);

  --theme-heading: #071A2C;
  --theme-text: #183247;
  --theme-muted: #526779;
  --theme-muted-2: #718594;

  --theme-accent: #168FE6;
  --theme-accent-high: #2DA2F3;
  --theme-accent-low: #0D78CE;
  --theme-accent-soft: rgba(22, 143, 230, 0.085);
  --theme-accent-contrast: #FFFFFF;

  --theme-info: #168FE6;

  --theme-input: #FFFFFF;
  --theme-input-text: #071A2C;

  --theme-card-shadow:
    0 18px 50px
    rgba(7, 26, 44, 0.075);

  --theme-card-shadow-hover:
    0 24px 64px
    rgba(7, 26, 44, 0.12);

  --theme-hero:
    radial-gradient(
      circle at 20% 30%,
      rgba(22, 143, 230, 0.13),
      transparent 34%
    ),
    radial-gradient(
      circle at 74% 35%,
      rgba(22, 143, 230, 0.045),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F6FAFD 100%
    );
}


html:not([data-mv-theme="light"]),
html[data-mv-theme="dark"] {
  color-scheme: dark;
}


/* ============================================================
   GLOBALE SEITE
   ============================================================ */

html body.mv-public {
  margin: 0 !important;

  color: var(--theme-text) !important;
  background: var(--theme-page) !important;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


html body.mv-public main {
  color: var(--theme-text) !important;
  background: var(--theme-page) !important;
}


html body.mv-public ::selection {
  color: var(--theme-accent-contrast);
  background: var(--theme-accent);
}


html body.mv-public a {
  text-decoration-color:
    color-mix(
      in srgb,
      var(--theme-accent) 48%,
      transparent
    );
}


html body.mv-public hr {
  border-color: var(--theme-border) !important;
}


html body.mv-public h1,
html body.mv-public h2,
html body.mv-public h3,
html body.mv-public h4,
html body.mv-public h5,
html body.mv-public h6 {
  color: var(--theme-heading) !important;
}


html body.mv-public p,
html body.mv-public li,
html body.mv-public dd {
  color: var(--theme-muted);
}


html body.mv-public small {
  color: var(--theme-muted-2);
}


html body.mv-public h1 span,
html body.mv-public h1 em,
html body.mv-public h2 span,
html body.mv-public h2 em {
  color: var(--theme-accent) !important;
}


/* ============================================================
   HAUPTBEREICHE UND HEROES
   ============================================================ */

html body.mv-public .mv-hero,
html body.mv-public .mv-home-hero,
html body.mv-public .mv-page-hero,
html body.mv-public .mv-pricing-hero,
html body.mv-public .vc2-hero,
html body.mv-public .vcx-hero {
  color: var(--theme-text) !important;
  background: var(--theme-hero) !important;
}


html body.mv-public main > section,
html body.mv-public .mv-section,
html body.mv-public .mv-flow-section,
html body.mv-public .vcx-section {
  color: var(--theme-text);
  background-color: var(--theme-section);
}


html body.mv-public .mv-soft,
html body.mv-public .mv-section.mv-soft,
html body.mv-public .mv-section-soft,
html body.mv-public .mv-final,
html body.mv-public .mv-cta-section,
html body.mv-public .vcx-band,
html body.mv-public .vcx-soft {
  color: var(--theme-text) !important;
  background: var(--theme-page-alt) !important;
}


html body.mv-public .mv-kicker,
html body.mv-public .vc2-kicker,
html body.mv-public .vcx-kicker,
html body.mv-public .mv-eyebrow {
  color: var(--theme-accent) !important;

  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 38%,
      transparent
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--theme-accent) 5%,
      transparent
    ) !important;
}


html body.mv-public .mv-lead,
html body.mv-public .mv-section-title-row > p,
html body.mv-public .mv-split-content p,
html body.mv-public .mv-page-hero p {
  color: var(--theme-muted) !important;
}


/* ============================================================
   KARTEN UND PANELS
   ============================================================ */

html body.mv-public .mv-four > *,
html body.mv-public .mv-six > *,
html body.mv-public .mv-three-wide > *,
html body.mv-public .mv-feature-page-grid > *,
html body.mv-public .mv-price-grid > *,
html body.mv-public .mv-help-grid > *,
html body.mv-public .mv-article-grid > *,
html body.mv-public .mv-market-price-row > *,
html body.mv-public .mv-price-card-home,
html body.mv-public .mv-signup-card,
html body.mv-public .mv-ai-card,
html body.mv-public .mv-contact-card,
html body.mv-public .mv-cta-panel,
html body.mv-public .mv-comparison-wrap,
html body.mv-public .mv-card,
html body.mv-public .vcx-card,
html body.mv-public .vcx-feature,
html body.mv-public .vcx-step,
html body.mv-public .vcx-report-card,
html body.mv-public .vcx-price-card {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;

  box-shadow: var(--theme-card-shadow) !important;
}


html body.mv-public .mv-four > *:hover,
html body.mv-public .mv-six > *:hover,
html body.mv-public .mv-feature-page-grid > *:hover,
html body.mv-public .mv-help-grid > *:hover,
html body.mv-public .mv-article-grid > *:hover {
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 35%,
      var(--theme-border)
    ) !important;

  box-shadow: var(--theme-card-shadow-hover) !important;
}


html body.mv-public .mv-four h3,
html body.mv-public .mv-six h3,
html body.mv-public .mv-feature-page-grid h2,
html body.mv-public .mv-help-grid h2,
html body.mv-public .mv-article-grid h2,
html body.mv-public .mv-price-grid h2,
html body.mv-public .vcx-card h2,
html body.mv-public .vcx-card h3 {
  color: var(--theme-heading) !important;
}


html body.mv-public .mv-four p,
html body.mv-public .mv-six p,
html body.mv-public .mv-feature-page-grid p,
html body.mv-public .mv-help-grid p,
html body.mv-public .mv-article-grid p,
html body.mv-public .mv-price-grid p,
html body.mv-public .vcx-card p {
  color: var(--theme-muted) !important;
}


/* ============================================================
   BUTTONS UND LINKS
   ============================================================ */

html body.mv-public .mv-primary,
html body.mv-public .mv-header-cta,
html body.mv-public .mv-menu-trial,
html body.mv-public .mv-form-submit,
html body.mv-public .vc2-submit,
html body.mv-public .vcx-primary,
html body.mv-public .mv-price-grid > article > a,
html body.mv-public button[type="submit"] {
  color: var(--theme-accent-contrast) !important;

  border-color: transparent !important;

  background:
    linear-gradient(
      180deg,
      var(--theme-accent-high) 0%,
      var(--theme-accent-low) 100%
    ) !important;

  box-shadow:
    0 13px 30px
    color-mix(
      in srgb,
      var(--theme-accent) 19%,
      transparent
    ) !important;
}


html body.mv-public .mv-primary:hover,
html body.mv-public .mv-header-cta:hover,
html body.mv-public .mv-menu-trial:hover,
html body.mv-public .mv-form-submit:hover,
html body.mv-public .vc2-submit:hover,
html body.mv-public .vcx-primary:hover {
  filter: brightness(1.04);
}


html body.mv-public .mv-secondary,
html body.mv-public .vcx-secondary {
  color: var(--theme-heading) !important;

  border-color: var(--theme-border) !important;

  background: var(--theme-surface) !important;

  box-shadow:
    0 9px 24px
    color-mix(
      in srgb,
      var(--theme-heading) 5%,
      transparent
    ) !important;
}


html body.mv-public .mv-secondary:hover,
html body.mv-public .vcx-secondary:hover {
  color: var(--theme-accent) !important;

  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 42%,
      var(--theme-border)
    ) !important;

  background: var(--theme-accent-soft) !important;
}


html body.mv-public .mv-text-link,
html body.mv-public .mv-center-link a,
html body.mv-public .mv-feature-page-grid a {
  color: var(--theme-accent) !important;
}


/* ============================================================
   HEADER UND NAVIGATION
   Nur Farben – bestehende finale Abstände bleiben erhalten.
   ============================================================ */

html body.mv-public .mv-header {
  color: var(--theme-text) !important;

  background:
    color-mix(
      in srgb,
      var(--theme-page) 96%,
      transparent
    ) !important;

  border-bottom-color: var(--theme-border-soft) !important;
}


html body.mv-public .mv-menu-v2-nav {
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-border) !important;

  box-shadow:
    inset 0 1px 0
    color-mix(
      in srgb,
      var(--theme-heading) 4%,
      transparent
    ),
    0 8px 25px
    color-mix(
      in srgb,
      var(--theme-heading) 5%,
      transparent
    ) !important;
}


html body.mv-public .mv-menu-v2-nav > a,
html body.mv-public .mv-menu-v2-trigger,
html body.mv-public .mv-main-nav .mv-vehiclecheck-direct {
  color: var(--theme-heading) !important;

  background:
    color-mix(
      in srgb,
      var(--theme-surface) 56%,
      transparent
    ) !important;
}


html body.mv-public .mv-menu-v2-nav > a:hover,
html body.mv-public .mv-menu-v2-trigger:hover,
html body.mv-public .mv-main-nav .mv-vehiclecheck-direct:hover {
  color: var(--theme-accent) !important;

  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 26%,
      transparent
    ) !important;

  background: var(--theme-accent-soft) !important;
}


html body.mv-public .mv-menu-login-text {
  color: var(--theme-heading) !important;
  opacity: 1 !important;
}


html body.mv-public .mv-lang-switch,
html body.mv-public .mv-theme-switch {
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-border) !important;
}


html body.mv-public .mv-lang-switch button,
html body.mv-public .mv-theme-switch button {
  color: var(--theme-muted) !important;
}


html body.mv-public .mv-lang-switch button:hover,
html body.mv-public .mv-theme-switch button:hover {
  color: var(--theme-heading) !important;
  background: var(--theme-accent-soft) !important;
}


html body.mv-public .mv-lang-switch button.active,
html body.mv-public .mv-lang-switch button[aria-pressed="true"],
html body.mv-public .mv-theme-switch button.active,
html body.mv-public .mv-theme-switch button[aria-pressed="true"] {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent) !important;
}


/* ============================================================
   MEGA-MENÜ UND MOBILE MENÜ
   ============================================================ */

html body.mv-public .mv-mega,
html body.mv-public .mv-mega-v2,
html body.mv-public .mv-mobile-menu,
html body.mv-public .mv-mobile-sub {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;

  box-shadow: var(--theme-card-shadow) !important;
}


html body.mv-public .mv-mega section,
html body.mv-public .mv-mega-v2 section {
  border-color: var(--theme-border-soft) !important;
}


html body.mv-public .mv-mega section h3,
html body.mv-public .mv-mega-v2 section h3,
html body.mv-public .mv-mega-card > span {
  color: var(--theme-accent) !important;
}


html body.mv-public .mv-mega a,
html body.mv-public .mv-mega-v2 a,
html body.mv-public .mv-mobile-menu a,
html body.mv-public .mv-mobile-sub a {
  color: var(--theme-text) !important;
}


html body.mv-public .mv-mega a:hover,
html body.mv-public .mv-mega-v2 a:hover,
html body.mv-public .mv-mobile-menu a:hover,
html body.mv-public .mv-mobile-sub a:hover {
  color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
}


html body.mv-public .mv-mega small,
html body.mv-public .mv-mega-v2 small {
  color: var(--theme-muted-2) !important;
}


/* ============================================================
   PRODUKTDARSTELLUNGEN
   Bleiben bewusst dunkel – auch im Light Mode.
   ============================================================ */

html body.mv-public .mv-app-shot,
html body.mv-public .mv-dashboard,
html body.mv-public .mv-product-shot,
html body.mv-public .mv-product-preview,
html body.mv-public .mv-mini-dashboard,
html body.mv-public .mv-site-vehicle {
  color: #F5F7FA !important;

  background:
    linear-gradient(
      145deg,
      #071B29 0%,
      #04111A 100%
    ) !important;

  border-color: #234255 !important;

  box-shadow:
    0 22px 60px
    rgba(0, 0, 0, 0.26) !important;
}


html body.mv-public .mv-app-shot *,
html body.mv-public .mv-dashboard *,
html body.mv-public .mv-product-shot *,
html body.mv-public .mv-mini-dashboard * {
  border-color:
    rgba(91, 145, 176, 0.25);
}


html body.mv-public .mv-app-shot h1,
html body.mv-public .mv-app-shot h2,
html body.mv-public .mv-app-shot h3,
html body.mv-public .mv-app-shot b,
html body.mv-public .mv-dashboard h1,
html body.mv-public .mv-dashboard h2,
html body.mv-public .mv-dashboard h3,
html body.mv-public .mv-dashboard b {
  color: #F5F7FA !important;
}


/* ============================================================
   FAHRZEUGHISTORIE / FAHRZEUGCHECK
   ============================================================ */

html body.mv-public .vc2-copy > p {
  color: var(--theme-muted) !important;
}


html body.mv-public .vc2-box {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;

  box-shadow: var(--theme-card-shadow) !important;
}


html body.mv-public .vc2-tabs {
  background: var(--theme-surface-2) !important;
}


html body.mv-public .vc2-tabs button {
  color: var(--theme-muted) !important;
}


html body.mv-public .vc2-tabs button.active {
  color: #071A2C !important;
  background: #F5F7FA !important;
}


html body.mv-public .vc2-field {
  border-color: #C9D7E3 !important;
  background: #F7FAFC !important;
}


html body.mv-public .vc2-field b {
  color: #FFFFFF !important;
  background: #123C78 !important;
}


html body.mv-public .vc2-field input {
  color: #263C54 !important;
  background: #F7FAFC !important;
}


html body.mv-public .vc2-field input::placeholder {
  color: #9EABB8 !important;
}


html body.mv-public .vc2-box footer {
  color: var(--theme-muted-2) !important;
  border-top-color: var(--theme-border-soft) !important;
}


html body.mv-public .vc2-ring {
  background:
    repeating-conic-gradient(
      var(--theme-accent) 0 3deg,
      transparent 3deg 8deg
    ) !important;
}


html body.mv-public .vc2-shield {
  border-color: var(--theme-accent) !important;
}


html body.mv-public .vc2-visual > small {
  color: var(--theme-muted-2) !important;
}


/* ============================================================
   PREISE
   ============================================================ */

html body.mv-public .mv-price-grid > article.featured {
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent) 64%,
      var(--theme-border)
    ) !important;

  box-shadow:
    0 22px 64px
    color-mix(
      in srgb,
      var(--theme-accent) 14%,
      transparent
    ) !important;
}


html body.mv-public .mv-price-grid > article > span,
html body.mv-public .mv-price-grid > article > em,
html body.mv-public .mv-market-price-row .ours small {
  color: var(--theme-accent) !important;
}


html body.mv-public .mv-price-placeholder {
  color: var(--theme-text) !important;

  background: var(--theme-surface-2) !important;

  border-color: var(--theme-border) !important;
}


html body.mv-public .mv-price-grid li::marker {
  color: var(--theme-accent);
}


/* ============================================================
   TABELLEN UND VERGLEICHE
   ============================================================ */

html body.mv-public table,
html body.mv-public .mv-comparison-table {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;
}


html body.mv-public table th,
html body.mv-public .mv-comparison-table th {
  color: var(--theme-heading) !important;
  background: var(--theme-surface-2) !important;
  border-color: var(--theme-border) !important;
}


html body.mv-public table td,
html body.mv-public .mv-comparison-table td {
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
}


html body.mv-public .mv-comparison-table .ours {
  color: var(--theme-heading) !important;
  background: var(--theme-accent-soft) !important;
}


html body.mv-public .mv-status-pill.live {
  color: var(--motavio-success) !important;

  border-color:
    rgba(16, 168, 120, 0.30) !important;

  background:
    rgba(16, 168, 120, 0.09) !important;
}


html body.mv-public .mv-status-pill.build {
  color: var(--motavio-warning) !important;

  border-color:
    rgba(226, 180, 73, 0.30) !important;

  background:
    rgba(226, 180, 73, 0.08) !important;
}


html body.mv-public .mv-status-pill.road {
  color: var(--theme-muted) !important;
  border-color: var(--theme-border) !important;
  background: var(--theme-surface-2) !important;
}


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

html body.mv-public .mv-faq-list details,
html body.mv-public .mv-faq-page details,
html body.mv-public .vcx-faq details {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;

  box-shadow:
    0 10px 30px
    color-mix(
      in srgb,
      var(--theme-heading) 4%,
      transparent
    ) !important;
}


html body.mv-public .mv-faq-list summary,
html body.mv-public .mv-faq-page summary,
html body.mv-public .vcx-faq summary {
  color: var(--theme-heading) !important;
}


html body.mv-public .mv-faq-list summary::after,
html body.mv-public .mv-faq-page summary::after,
html body.mv-public .vcx-faq summary::after {
  color: var(--theme-accent-contrast) !important;
  background: var(--theme-accent) !important;
}


html body.mv-public .mv-faq-list details p,
html body.mv-public .mv-faq-page details p,
html body.mv-public .vcx-faq details p {
  color: var(--theme-muted) !important;
}


/* ============================================================
   FORMULARE UND KONTAKT
   ============================================================ */

html body.mv-public .mv-contact-card,
html body.mv-public .public-contact-form,
html body.mv-public .mv-contact-form {
  color: var(--theme-text) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;
}


html body.mv-public label,
html body.mv-public label > span {
  color: var(--theme-heading);
}


html body.mv-public input:not([type="checkbox"]):not([type="radio"]),
html body.mv-public textarea,
html body.mv-public select {
  color: var(--theme-input-text) !important;

  background: var(--theme-input) !important;

  border-color: var(--theme-border) !important;

  box-shadow: none !important;
}


html body.mv-public input::placeholder,
html body.mv-public textarea::placeholder {
  color: var(--theme-muted-2) !important;
  opacity: 1;
}


html body.mv-public input:focus,
html body.mv-public textarea:focus,
html body.mv-public select:focus {
  outline: none !important;

  border-color: var(--theme-accent) !important;

  box-shadow:
    0 0 0 4px
    color-mix(
      in srgb,
      var(--theme-accent) 14%,
      transparent
    ) !important;
}


html body.mv-public input[type="checkbox"],
html body.mv-public input[type="radio"] {
  accent-color: var(--theme-accent);
}


html body.mv-public .public-form-errors {
  color: var(--motavio-danger) !important;

  border-color:
    rgba(241, 109, 122, 0.28) !important;

  background:
    rgba(241, 109, 122, 0.08) !important;
}


html body.mv-public .public-form-success {
  color: var(--motavio-success) !important;

  border-color:
    rgba(16, 168, 120, 0.28) !important;

  background:
    rgba(16, 168, 120, 0.08) !important;
}


/* ============================================================
   CHIPS, PILLS UND KLEINE ELEMENTE
   ============================================================ */

html body.mv-public .mv-hero-bullets span,
html body.mv-public .mv-chip,
html body.mv-public .mv-pill,
html body.mv-public .vcx-pill {
  color: var(--theme-heading) !important;

  background: var(--theme-surface) !important;

  border-color: var(--theme-border) !important;
}


html body.mv-public .mv-hero-bullets span:hover,
html body.mv-public .mv-chip:hover,
html body.mv-public .mv-pill:hover,
html body.mv-public .vcx-pill:hover {
  color: var(--theme-accent) !important;
  background: var(--theme-accent-soft) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

html body.mv-public .mv-footer,
html body.mv-public footer.mv-footer,
html body.mv-public .mv-foot {
  color: var(--theme-text) !important;

  background: var(--theme-page-alt) !important;

  border-top-color: var(--theme-border) !important;
}


html body.mv-public .mv-footer h2,
html body.mv-public .mv-footer h3,
html body.mv-public .mv-footer b {
  color: var(--theme-heading) !important;
}


html body.mv-public .mv-footer p,
html body.mv-public .mv-footer small,
html body.mv-public .mv-footer-bottom {
  color: var(--theme-muted-2) !important;
}


html body.mv-public .mv-footer a {
  color: var(--theme-muted) !important;
}


html body.mv-public .mv-footer a:hover {
  color: var(--theme-accent) !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

html body.mv-public {
  scrollbar-color:
    var(--theme-accent)
    var(--theme-page-alt);
}


html body.mv-public::-webkit-scrollbar {
  width: 12px;
}


html body.mv-public::-webkit-scrollbar-track {
  background: var(--theme-page-alt);
}


html body.mv-public::-webkit-scrollbar-thumb {
  border: 3px solid var(--theme-page-alt);
  border-radius: 999px;
  background: var(--theme-accent);
}


/* ============================================================
   FOKUS UND BARRIEREFREIHEIT
   ============================================================ */

html body.mv-public a:focus-visible,
html body.mv-public button:focus-visible,
html body.mv-public input:focus-visible,
html body.mv-public textarea:focus-visible,
html body.mv-public select:focus-visible,
html body.mv-public summary:focus-visible {
  outline:
    3px solid
    color-mix(
      in srgb,
      var(--theme-accent) 72%,
      white
    ) !important;

  outline-offset: 3px !important;
}


/* ============================================================
   SANFTER THEME-WECHSEL
   ============================================================ */

html body.mv-public,
html body.mv-public .mv-header,
html body.mv-public main,
html body.mv-public section,
html body.mv-public article,
html body.mv-public details,
html body.mv-public input,
html body.mv-public textarea,
html body.mv-public select {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


@media(prefers-reduced-motion: reduce) {

  html body.mv-public,
  html body.mv-public *,
  html body.mv-public *::before,
  html body.mv-public *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

}


/* ============================================================
   RESPONSIVE KORREKTUREN
   ============================================================ */

@media(max-width: 900px) {

  html body.mv-public .mv-page-hero,
  html body.mv-public .mv-hero,
  html body.mv-public .vc2-hero {
    background: var(--theme-hero) !important;
  }


  html body.mv-public .mv-four > *,
  html body.mv-public .mv-six > *,
  html body.mv-public .mv-feature-page-grid > *,
  html body.mv-public .mv-price-grid > *,
  html body.mv-public .mv-help-grid > *,
  html body.mv-public .mv-article-grid > * {
    box-shadow:
      0 12px 34px
      color-mix(
        in srgb,
        var(--theme-heading) 6%,
        transparent
      ) !important;
  }

}