/*



   $$$$$\  $$$$$$\                                        $$\                  $$\     $$\                     
   \__$$ |$$  __$$\                                       $$ |                 $$ |    \__|                    
      $$ |$$ /  \__|    $$$$$$\$$$$\   $$$$$$\   $$$$$$\  $$ |  $$\  $$$$$$\ $$$$$$\   $$\ $$$$$$$\   $$$$$$\  
      $$ |$$ |          $$  _$$  _$$\  \____$$\ $$  __$$\ $$ | $$  |$$  __$$\\_$$  _|  $$ |$$  __$$\ $$  __$$\ 
$$\   $$ |$$ |          $$ / $$ / $$ | $$$$$$$ |$$ |  \__|$$$$$$  / $$$$$$$$ | $$ |    $$ |$$ |  $$ |$$ /  $$ |
$$ |  $$ |$$ |  $$\     $$ | $$ | $$ |$$  __$$ |$$ |      $$  _$$<  $$   ____| $$ |$$\ $$ |$$ |  $$ |$$ |  $$ |
\$$$$$$  |\$$$$$$  |$$\ $$ | $$ | $$ |\$$$$$$$ |$$ |      $$ | \$$\ \$$$$$$$\  \$$$$  |$$ |$$ |  $$ |\$$$$$$$ |
 \______/  \______/ \__|\__| \__| \__| \_______|\__|      \__|  \__| \_______|  \____/ \__|\__|  \__| \____$$ |
                                                                                                     $$\   $$ |
jc.marketing - global.css v1.0 - humans only                                                         \$$$$$$  |
                                                                                                      \______/ 
==========================================================================

content

01) box radius for cards
02) cards price examples
03) backdrop blur
04) cards transform animation
05) header menu animation
05a) header menu style für tablet/mobile
06) Tabellenbreite Preise&Pakete
07) button grow
08) Hamburger menu styling reset
09) reCAPTCHA optisch als volle Formularzeile
10) faq styling
11) complianz cookie banner
12) Hero avif per css laden


end) Global typography spacing

==========================================================================


/* 01) box radius for cards */
.roundcorner { 
	border-radius: 25px; }

/* 02) cards price examples */

.cards_price {
	background: #e30000;
  	padding: 0 3px;
  	font-weight: bold;
  	font-size: calc(1em + 4px);
}

.price_asterisk {
	font-size: .6em;
	font-weight: normal;
	vertical-align: top;
}

/* 03) backdrop blur */

.backdrop_blur {
	backdrop-filter: blur(3px);
  	-webkit-backdrop-filter: blur(3px);
}


/* 04) cards transform animation */
/* Nur Desktop */

@media (min-width: 1025px) {
  .cards-tilt .roundcorner {
    position: relative;
    z-index: 1;

    transform: perspective(600px) rotateY(10deg);
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, border-left-width;

    transition:
      transform 0.2s ease,
      border-left-width 0.2s ease;
  }

  .cards-tilt .roundcorner:hover {
    z-index: 99;
    transform: perspective(600px) rotateY(0deg) scale(1.1);
    border-width: 2px;
  }
}

/* Tablet & Mobile: kein Tilt, keine extra linke Border */

@media (max-width: 1024px) {
  .cards-tilt .roundcorner {
    transform: none !important;
    transition: none;
    will-change: auto;

    /* alle Borders gleich */
    border-width: 1px !important;
  }

  .cards-tilt .roundcorner:hover {
    transform: none !important;

    /* auch bei Hover gleich lassen */
    border-width: 1px !important;
  }
}

/* 05) header menu animation */


.jcmkt_menu,
.jcmkt_logosvg {
  transition: background-color 0.1s ease, transform 0.1s ease, padding 0.1s ease;
}

.jcmkt_menu {
  background-color: rgba(22, 24, 28, 0);
}

.jcmkt_logosvg {
  transform-origin: left center;
}

.elementor-sticky--active.elementor-sticky--effects .jcmkt_menu {
  background-color: rgba(22, 24, 28, 1);
  padding: 5px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border-width: 0 1px 1px;
  border-style: solid;
  border-color: #e30000;
}

.elementor-sticky--active.elementor-sticky--effects .jcmkt_logosvg {
  transform: scale(0.95);
}


/* 05a) Hamburger-Dropdown Menü Styling 
   Tablet & Mobile
   Klasse am Menü-Widget: .jcmkt_menuwidget
*/

@media (max-width: 1024px) {

  /* Großer gemeinsamer Dropdown-Kasten */
  .jcmkt_menuwidget .e-n-menu-wrapper,
  .jcmkt_menuwidget .e-n-menu-wrapper[style] {
    width: 80vw !important;
    max-width: 80vw !important;
    min-width: 0 !important;
    background: rgba(22, 24, 28, 1) !important;
    background-color: rgba(22, 24, 28, 1) !important;
    border-radius: 12px !important;
	border: 1px solid #555 !important; 
	box-shadow: 0 0px 20px 20px rgba(0, 0, 0, 1) !important;
    padding: 32px 0;
    box-sizing: border-box;
    box-shadow: 0 18px 42px 0 rgba(0, 0, 0, 0.38);
    overflow: hidden;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Innere Menüstruktur transparent lassen */
  .jcmkt_menuwidget .e-n-menu-heading,
  .jcmkt_menuwidget .e-n-menu-item,
  .jcmkt_menuwidget .e-n-menu-title {
    background: transparent !important;
    background-color: transparent !important;
  }

  /* Menü-Liste */
  .jcmkt_menuwidget .e-n-menu-heading {
    width: 100% !important;

    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }

  /* Elementor-Zusatzabstände neutralisieren */
  .jcmkt_menuwidget .e-n-menu-item,
  .jcmkt_menuwidget .e-n-menu-title {
    width: 100% !important;

    display: flex !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* Einzelner Menüpunkt: keine eigene Box mehr */
  .jcmkt_menuwidget .e-n-menu-title-container {
    background: transparent !important;
    background-color: transparent !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 10px 26px !important;
    border-radius: 8px;

    border: 0 !important;
    box-shadow: none !important;

    text-align: center !important;

    transition:
      background-color 0.15s ease,
      color 0.15s ease;
  }

	
	/* Aufklapp-Menü Text */
	.jcmkt_menuwidget .e-n-menu-title-text {
  	font-size: 1rem !important;
}
	
  /* Text normal */
  .jcmkt_menuwidget .e-n-menu-title-text {
    color: #ffffff !important;
    text-align: center !important;
  }

  /* Hover: nur dezenter Hintergrund hinter dem Text */
  .jcmkt_menuwidget .e-n-menu-title-container:hover {
    background: #2b2f35 !important;
    background-color: #2b2f35 !important;
  }

  .jcmkt_menuwidget .e-n-menu-title-container:hover .e-n-menu-title-text {
    color: #ffffff !important;
  }

  /* Active / aktuelle Seite */
  .jcmkt_menuwidget .e-n-menu-title.e-current .e-n-menu-title-container {
    background: #2b2f35 !important;
    background-color: #2b2f35 !important;
  }

  .jcmkt_menuwidget .e-n-menu-title.e-current .e-n-menu-title-text {
    color: #e30000 !important;
  }

  /* Falls Elementor beim Link selbst Farbe setzt */
  .jcmkt_menuwidget .e-n-menu-title.e-current .e-n-menu-title-container,
  .jcmkt_menuwidget .e-n-menu-title.e-current .e-n-menu-title-container:hover {
    color: #e30000 !important;
  }
}

/*** 06) Preis-Tabelle */

/* alle spezifischen Regeln im custsom css auf der Seite */
.elementor-widget-html,
.elementor-widget-html .elementor-widget-container {
  min-width: 0 !important;
}


/*	07) button grow			*/

/* Buttons: dezentes Wachstum bei Hover */
.elementor-button {
  transition: transform 0.05s ease, background-color 0.05s ease, border-color 0.05s ease, color 0.05s ease;
  transform-origin: center center;
}

.elementor-button:hover {
  transform: scale(1.03);
}


/*	08) Hamburger menu styling reset	*/

.elementor-widget-n-menu .e-n-menu-toggle,
.elementor-widget-n-menu .e-n-menu-toggle:hover,
.elementor-widget-n-menu .e-n-menu-toggle:focus,
.elementor-widget-n-menu .e-n-menu-toggle:active,
.elementor-widget-n-menu .e-n-menu-toggle[aria-expanded="true"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}





/*	09) 	reCAPTCHA optisch als volle Formularzeile	 */

.elementor-field-type-recaptcha .elementor-field {
  width: 100% !important;
  padding: 16px 18px;
  border: 1px solid #5f666f;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.04);
  box-sizing: border-box;
}



/* =================================================================================
   JC.marketing – Typography Spacing
   Desktop: default
   Tablet: 1024px
   Mobile: 767px
   ================================================================================= */


/* Desktop / Default */

h1 {
  margin: 0 0 0.8em 0 !important;
}

.jcmkt_heroh1 h1 {
  margin: 0 !important;
} 

h2 {
  margin: 0  0 .8em 0 !important;
}

h3 {
  margin: 0 0 0.8em 0 !important
}

h4 {
  margin: 0 0 0.6em 0 !important;
}

h5 {
  margin: 1em 0 0.3em 0 !important;
}

h6 {
  margin: 1em 0 0.3em 0 !important;
}

p {
  margin: 0 0 1em 0 !important;
}

.jcmkt_divider {
  margin: 0.5em 0 2em 0 !important;
	width: 50px !important;	
}

.jcmkt_divider .elementor-divider-separator {
  width: 100%;
}	


.jcmkt_eyebrow {
  margin: 0 0 0.5em 0 !important;
}

.elementor-widget-text-editor a {
  border-bottom: 1px solid #e30000;
}

.elementor-widget-text-editor a:hover {
  border-bottom: 2px solid #e30000;
}

::selection {
  background: #E30000;
  color: #ffffff;
}

::-moz-selection {
  background: #E30000;
  color: #ffffff;
}

/* Tablet */

@media (max-width: 1024px) {
  h1 {
    margin: 0 0 0.45em 0 !important;
  }

  h2 {
    margin: .3em 0 0em 0 !important;
  }

  h3 {
    margin: 1.2em 0 0.35em 0 !important;
  }

  h4 {
    margin: 1.1em 0 0.35em 0 !important;
  }

  h5 {
    margin: 1em 0 0.3em 0 !important;
  }

  h6 {
    margin: 1em 0 0.3em 0 !important;
  }

  p {
    margin: 0 0 0.95em 0 !important;
  }

  .jcmkt_divider {
    margin: 1.75em 0 !important;
  }

  .jcmkt_eyebrow {
    margin: 0 0 0.3em 0 !important;
  }
}


/* Mobile */

@media (max-width: 767px) {
  h1 {
    margin: 0 0 0.4em 0 !important;
  }

  h2 {
    margin: .2em 0 0.35em 0 !important;
  }

  h3 {
    margin: 1.1em 0 0.35em 0 !important;
  }

  h4 {
    margin: 1em 0 0.3em 0 !important;
  }

  h5 {
    margin: 0.9em 0 0.25em 0 !important;
  }

  h6 {
    margin: 0.9em 0 0.25em 0 !important;
  }

  p {
    margin: 0 0 0.9em 0 !important;
  }

  .jcmkt_divider {
    margin: 1em 0 !important;
  }

  .jcmkt_eyebrow {
    margin: 0 !important;
  }
}

/* 10) faq styling*/

.jcmkt_accordeon-faq h3.e-n-accordion-item-title-text {
  font-family: "Open Sans", sans-serif !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 5px;	
}

/* Kopfzeile */
.jcmkt_accordeon-faq .e-n-accordion-item-title {
  border: 1px solid transparent !important;
}

/* Hover */
.jcmkt_accordeon-faq .e-n-accordion-item-title:hover {
  border-color: #E30000 !important;
}

/* Aktives / geöffnetes Accordion */
.jcmkt_accordeon-faq details[open] h3.e-n-accordion-item-title-text {
  color: #E30000 !important;
}




/************************************* 
11) coplianz cookie banner ***********
*************************************/

/*  Fokus ist auf akzeptieren, auf unsichtbar gestellt  */
    .cmplz-cookiebanner .cmplz-accept:focus,
    .cmplz-cookiebanner .cmplz-accept:focus-visible {
        outline: none !important;
        box-shadow: none !important;
    }



/* --------------------------------------------------
   Fahne zur Verwaltung der Cookie-Einwilligung
-------------------------------------------------- */

#cmplz-manage-consent .cmplz-manage-consent {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    line-height: normal !important;
    box-sizing: border-box !important;

    border: 1px solid #808080 !important;
    border-bottom: none !important;
}


/* --------------------------------------------------
   Mobile Anpassungen
-------------------------------------------------- */

@media (max-width: 768px) {

    html body .cmplz-cookiebanner {
        left: 30px !important;
        right: 30px !important;
        width: auto !important;
        max-width: none !important;
        transform: translateY(-50%) !important;
        padding: 25px !important;
        box-sizing: border-box !important;
    }

    /* „Einstellungen verwalten“ um 5 px nach oben */
    #cmplz-header-1-optin {
        transform: translateY(-2px) !important;
    }
}



/* --------------------------------------------------
   Überschrift auf kleinen Smartphones anzeigen
-------------------------------------------------- */

@media (max-width: 425px) {

  .cmplz-cookiebanner .cmplz-header .cmplz-title {
    display: block !important;
  }
}


/* --------------------------------------------------
   Logo auch unter 399 px anzeigen
-------------------------------------------------- */

@media (max-width: 399px) {

  .cmplz-cookiebanner .cmplz-header {
    grid-template-columns: 80px 1fr 24px !important;
  }

  .cmplz-cookiebanner .cmplz-logo {
    display: block !important;
    width: 80px !important;
  }

  .cmplz-cookiebanner .cmplz-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
}


/* --------------------------------------------------
   Complianz-Zustandsfehler reparieren

   Falls die Abdunklung eingeblendet wird, der Banner
   aber fälschlich auf „dismissed“ stehen bleibt,
   wird der Banner trotzdem sichtbar dargestellt.
-------------------------------------------------- */

body:has(.cmplz-soft-cookiewall.cmplz-show)
.cmplz-cookiebanner.cmplz-dismissed {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}


/* CAPTCHA-Consent-Hinweis: Hintergrund schwarz */
.elementor-field-type-recaptcha .cmplz-blocked-content-notice {
    background-color: #000000 !important;
}

.cmplz-blocked-content-notice-body {
	padding: 0 50px !important;
}

/* CAPTCHA-Hinweis – Link rot unterstreichen */
.elementor-field-type-recaptcha a.cmplz-link.cookie-statement {
    text-decoration-line: underline !important;
    text-decoration-color: #e30000 !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
}

/************   12) Hero .avif per css laden   ******************/

/* Desktop / Tablet */
@media (min-width: 768px) {
  .elementor-element-dac1cf5 {
    background-image: url('/wp-content/uploads/images/BG_pattern.avif') !important;
    background-position: left top !important;
    background-attachment: fixed !important;
    background-repeat: repeat !important;
    background-size: auto !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .elementor-element-dac1cf5 {
    background-image: url('/wp-content/uploads/images/BG_pattern_mobile.avif') !important;
    background-position: left top !important;
    background-attachment: scroll !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
  }
}

.jc-hero-portrait {
  display: block;
  width: 100%;
}

.jc-hero-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .jc-hero-portrait {
    width: 100% !important;
  }

  .jc-hero-portrait > img {
    display: block !important;
    width: 70% !important;
    max-width: 70% !important;
    height: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}