/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/* ==========================================================
  New global custom variables
   ========================================================== */

:root {
  --elevation3:
    var(--shadow-Elevation-3-A-x, 0) var(--shadow-Elevation-3-A-y, 3px) var(--shadow-Elevation-3-A-Blur, 4px) var(--shadow-Elevation-3-A-Spread, 2px) var(--shadow-Elevation-3-A-color, rgba(0, 0, 0, 0.09)),
    var(--shadow-Elevation-3-B-x, 0) var(--shadow-Elevation-3-B-y, 2px) var(--shadow-Elevation-3-B-Blur, 3px) var(--shadow-Elevation-3-B-Spread, 1px) var(--shadow-Elevation-3-B-color, rgba(0, 0, 0, 0.09));
  /* price slider max height variable erstellen und definieren*/
  --psm-max-h: 250px;
}  

@media (min-width: 768px) {
  /* ==========================================================
     Fixes aligment issues with CTA Buttons in Header !only starting with resolutions ≥768px (Tablet & Desktop)
     ========================================================== */
  #pwr-js-header-right-bar{
    display: flex !important;
  }
}

/*  boxshadow CSS Klasse */

.boxshadow .pwr-services-box__inner,
.boxshadow .pwr-accordion{
  box-shadow: var(--elevation3);
}



/* ==========================================================================
   Floating CTA Button
   Wird eingeblendet, sobald der User nach unten scrollt (floating-cta.js Code snippet muss unter HubSpot page templates gesetzt werden)
   ========================================================================== */

.floating {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 999;
 
  background: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
 
.floating.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
 
/* Schatten auf den eigentlichen (abgerundeten) Button legen, nicht auf den
   eckigen Wrapper – sonst blitzen an den Ecken eckige Schattenkanten hervor */
.floating .pwr-cta_button {
  box-shadow: var(--elevation3);
}


/* ==========================================================
  <mark> HTMl Tag custom styling (padding + rounded corners), prevent line-break/wrap 
   ========================================================== */
mark {
  padding: 10px var(--ht-01-mark-pd-hor) !important;
  border-radius: 8px !important;
  /* Zeilenumbrüche von mark verhindern */
  white-space: nowrap;
  overflow: hidden;
  gap: 0.25em;

  /* Vertikale Zentrierung bei gemischten Schriftgrößen innerhalb von mark (z. B. Preis + "/Monat") */
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

mark span {
  line-height: 1 !important;
}

/* ==========================================================
   custom class "no-arrow" für ausblenden der Pfeile von LINK CTA Style
   ========================================================== */
.no-arrow .pwr-cta--link [class*=cta_button]:before,
.no-arrow [class*=cta_button].pwr-cta--link:before,
.no-arrow .pwr-cta--link [class*=cta_button]:after,
.no-arrow [class*=cta_button].pwr-cta--link:after {
  display: none !important;
}
/* Margin für den Pfeil entfernen = korrektes Aligment */
.no-arrow .pwr-cta--link [class*=cta_button],
.no-arrow [class*=cta_button].pwr-cta--link {
  margin-right: 0 !important;
}

/* ==========================================================
   Gelber Button-Hover – klassische + neue HubSpot-Buttons
   ========================================================== */

/* Klassische HubSpot-Buttons / CTAs */
.pwr-btn--regular-solid-primary-background .hs-submit:hover::after,
.pwr-cta--regular-solid-primary-background [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover::after {
  background-color: #E0AF0C !important;
}

.pwr-btn--regular-solid-primary-background .hs-submit:hover,
.pwr-cta--regular-solid-primary-background [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover {
  color: var(--clr-btn-txt-dk) !important;
}

/* Neue HubSpot-Forms: Button normal */
.pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-Button {
  background-color: var(--clr-btn-lt) !important;
  color: var(--clr-btn-txt-dk) !important;
}

/* Neue HubSpot-Forms: Button Hover */
.pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-Button:hover {
  background-color: #E0AF0C !important;
  color: var(--clr-btn-txt-dk) !important;
}

/* Neue HubSpot-Forms: Theme-Hover über ::after überschreiben */
.pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-Button:hover::after {
  background-color: #E0AF0C !important;
}

/* Sicherheit: Text bleibt über dem ::after sichtbar */
.pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-Button {
  position: relative;
  z-index: 0;
}

.pwr-sec-form [data-hsfc-id="Renderer"] .hsfc-Button::after {
  z-index: -1;
}


/* Hero Section Hintergrundfarbe überschreiben */
.hero {
  background-color: var(--clr-primary);
}

/* Hero Section Überschriften dynamisch skalieren und keinen Auto-Umbruch erlauben */
.home-hero h1 {
  font-size: clamp(1.75rem, 8vw, 3.5rem) !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

/* =============================================================================
   Hero Mockup – Vollbild-Bild, bottom-aligned + Mobile Overlay
   ============================================================================= */

.home-hero {
  background-color: var(--clr-primary);
}

.home-hero .pwr-sec-mockup__mockup-wrapper {
    position: static !important;
}

.home-hero .pwr-sec-mockup__mockup {
    position: absolute !important;
    top: 10px !important;
    bottom: 0 !important;
    right: max(0px, calc((100% - var(--lo-content-width)) / 2)) !important;
    width: min(calc(var(--lo-content-width) * 0.45), 45%) !important;
    max-width: 1000px !important;
    left: auto !important;
    height: auto !important;
    margin: 0 !important;
}

.home-hero .pwr-ratio-box {
    padding-bottom: 0 !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

.home-hero .pwr-sec-mockup__mockup-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right bottom !important;
}

/* Hero Section Mobile Magic Juice */ 
@media (max-width: 991px)/* Change: 767 zu 991 */ {

  /* Hintergrund Icons Positionierung anpassen */
  /* Der Rahmen bleibt über die komplette Hero-Fläche gespannt */
  .home-hero > picture.pwr-bg {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;
    transform: none !important;
  }

  /* Grafik vollständig in der Breite und unten positionieren */
  .home-hero > picture.pwr-bg > img {
    position: absolute !important;
    left: 20% !important;
    right: auto !important;
    top: auto !important;
    bottom: 30px !important;
    width: 600px !important;
    height: auto !important;
    max-width: none !important;
    object-fit: initial !important;
    object-position: initial !important;
    transform: translateX(-50%) !important;
  }

  /* Theme-Abstand am unteren Hero-Rand entfernen */
  .home-hero.pwr--sec-padding-b-lg {
    padding-bottom: 0 !important;
  }

  /* Inline-Höhe des Match-Height-Scripts überschreiben */
  .home-hero .pwr-sec-mockup__content {
    width: 100% !important;
    height: auto !important;
  }

  .home-hero .pwr-sec-mockup__mockup-wrapper {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    height: auto !important;

    margin: 20px auto 0 !important;
    padding: 0 !important;

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

    transform: none !important;
  }

  .home-hero .pwr-sec-mockup__mockup {
    position: relative !important;
    inset: auto !important;

    width: 55% !important;
    max-width: 220px !important;
    height: auto !important;

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

    transform: none !important;
  }

  /* Ursprüngliches Seitenverhältnis des Bildes verwenden */
  .home-hero .pwr-sec-mockup__mockup .pwr-ratio-box {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    /* entspricht dem Inline-Wert 1.3333 × 100 % */
    padding-bottom: 133.3333% !important;

    overflow: hidden !important;
  }

  .home-hero .pwr-sec-mockup__mockup-img {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center bottom !important;
  }
}

/*****************************************/
/* Hero Slider              */
/*****************************************/
/* Backup  
/* Mobile top margin entfernen            
@media (max-width: 575px) {
    .body-wrapper:not(:has(.pwr-header--transparent)):not(:has(.pwr-header--transparent,.pwr-header-top--transparent)) .pwr-hero .pwr-hero__info-box {
        margin-top: 0px !important;
    }
}
*/


/*****************************************/
/* Modul Detailseite             */
/*****************************************/

/* komische Margin auf mobile in SEC Text entfernen */
@media (max-width: 575px) {
  .moduldetail-textsplit .page-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* schmaler fixed height Hero für mobile */
.pwr-hero.mobile-hero-strip:not(.pwr-hero--full-height):not(.pwr-hero--content-height) {
    min-height: 100px !important;
    height: 100px !important;
}

/* Preis Slider auf maximale Höhe begrenzen */
.price-slider-mobile,
.price-slider-mobile .swiper-slide {
  height: var(--psm-max-h) !important;
  max-height: var(--psm-max-h) !important;
}

.price-slider-mobile .swiper-slide {
  position: relative;
}

.body-wrapper:not(.pwr-header--transparent):not(.pwr-header-top--transparent, .pwr-header--transparent)
  .pwr-hero.price-slider-mobile .pwr-hero__info-box,
.pwr-hero.price-slider-mobile .pwr-hero__info-box,
.pwr-hero.price-slider-mobile .pwr-hero__info-box.page-center {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}

/* Aktive Pagination-Bullet: Theme-Akzentfarbe statt Standard-Hell */
.price-slider-mobile .swiper-pagination-bullet-active {
  background-color: var(--clr-btn-lt) !important;
  opacity: 1 !important;
}

/* Backup           
/* Modul Icon auf mobile verschieben und über obigen Content legen 

@media (max-width: 767px) {
  .moduldetail .pwr-sec-mockup__content {
    padding-top: 0 !important;
  }
  .moduldetail {
  z-index: 134;
  margin-top: -100px !important;
  background: transparent;
}
}
*/

/*****************************************/
/* FoodGenius Global Form                */
/*****************************************/

/* Text oben ausrichten statt zentriert */
.fg-form-global .pwr-sec-form__content--v-align {
  align-items: flex-start;
}

/* Shadow nur auf der Formular-Box */
.fg-form-global .pwr-sec-form__form {
  box-shadow: var(--elevation3);
}

/* Input Background + transparente Border (verhindert Layout-Shift beim Focus) */
.fg-form-global .pwr-form.pwr--light form input[type=color],
.fg-form-global .pwr-form.pwr--light form input[type=date],
.fg-form-global .pwr-form.pwr--light form input[type=datetime-local],
.fg-form-global .pwr-form.pwr--light form input[type=email],
.fg-form-global .pwr-form.pwr--light form input[type=number],
.fg-form-global .pwr-form.pwr--light form input[type=password],
.fg-form-global .pwr-form.pwr--light form input[type=search],
.fg-form-global .pwr-form.pwr--light form input[type=tel],
.fg-form-global .pwr-form.pwr--light form input[type=text],
.fg-form-global .pwr-form.pwr--light form input[type=url],
.fg-form-global .pwr-form.pwr--light form select,
.fg-form-global .pwr-form.pwr--light form textarea {
  background-color: hsla(257, 47%, 97%, 1);
  border: 1px solid transparent;
}

/* Focus Border */
.fg-form-global .pwr-form.pwr--light form input:focus,
.fg-form-global .pwr-form.pwr--light form textarea:focus,
.fg-form-global .pwr-form.pwr--light form select:focus {
  border: 1px solid hsla(257, 41%, 88%, 1);
  outline: none;
}

/* Focus Box-Shadow vom Theme entfernen */
.fg-form-global.pwr-form-style-v4 .pwr-form.pwr--light [data-hsfc-id=Renderer] form .hsfc-TextInput:focus,
.fg-form-global.pwr-form-style-v4 [data-hsfc-id=Renderer] form .hsfc-TextInput:focus,
.fg-form-global.pwr-form-style-v4 .pwr-form.pwr--light [data-hsfc-id=Renderer] form .hsfc-TextareaInput:focus,
.fg-form-global.pwr-form-style-v4 [data-hsfc-id=Renderer] form .hsfc-TextareaInput:focus {
  box-shadow: none !important;
}

/* ==========================================================
   Alle Forms - reCAPTCHA + Button in einer Zeile
   ========================================================== */

@media (min-width: 768px) {

  #hs_form_target_form_module_vert_04f8ab44-bea8-4840-a362-2cbb8bc52c1d-r[data-hsfc-id="Renderer"]
  .hsfc-Step__Content{
    display:grid !important;
    grid-template-columns:auto 1fr auto !important;
    align-items:center !important;
    column-gap:24px !important;
    align-items:center !important;
  }

  /* Alle normalen Formularzeilen über die komplette Breite */
  #hs_form_target_form_module_vert_04f8ab44-bea8-4840-a362-2cbb8bc52c1d-r[data-hsfc-id="Renderer"]
  .hsfc-Step__Content > .hsfc-Row{
    grid-column:1 / -1;
  }

  /* reCAPTCHA links */
#hs_form_target_form_module_vert_04f8ab44-bea8-4840-a362-2cbb8bc52c1d-r[data-hsfc-id="Renderer"]
.hsfc-Step__Content > .hsfc-Row:has(.hsfc-ReCaptchaV2){
  grid-column:1 !important;
  justify-self:start !important;
  align-self:center !important;
  margin:0 !important;
}

/* Button ganz rechts */
#hs_form_target_form_module_vert_04f8ab44-bea8-4840-a362-2cbb8bc52c1d-r[data-hsfc-id="Renderer"]
.hsfc-NavigationRow{
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
  margin:0 !important;
  width:auto !important;
}

//* Button-Höhe an reCAPTCHA annähern */
#hs_form_target_form_module_vert_04f8ab44-bea8-4840-a362-2cbb8bc52c1d-r[data-hsfc-id="Renderer"]
.hsfc-Button{
  min-height:60px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
} /* @media (min-width: 768px) schließen */

/*****************************************/
/* FoodGenius Modulübersicht             */
/*                                       */
/* PWR Theme "Services" zu einem         */
/* 300×300px Icon-Grid umgebaut.         */
/* Theme-Defaults (float-Layout,         */
/* feste Höhe, overflow:hidden) werden   */
/* gezielt überschrieben.                */
/* show-more wird auf Desktop per CSS    */
/* deaktiviert (max-height + Button).    */
/* Erstes Modul erhält --clr-primary     */
/* als Hintergrund, Icons + Titel hell.  */
/*****************************************/

/* show-more: Theme-JS setzt max-height auf .pwr-show-more__target--collapsed */
.fg-module-overview .pwr-show-more__target {
  overflow: visible !important;
  padding: 10px !important;
}

@media (min-width: 1024px) {
  .fg-module-overview .pwr-show-more__target--collapsed,
  .fg-module-overview .page-center {
    overflow: visible !important;
    max-height: none !important;
  }
}

.fg-module-overview .pwr-services-box__inner {
  box-shadow: var(--elevation3) !important;
}

.fg-module-overview .pwr-services-box__front {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Icons */
.fg-module-overview .pwr-services-item__icon {
  height: 88px !important;
  line-height: 1 !important;
  margin-bottom: 20px !important;
  color: #4A347E !important;
}

.fg-module-overview .pwr-services-item__icon svg {
  width: 88px !important;
  height: 88px !important;
  display: block !important;
  fill: #4A347E !important;
}

.fg-module-overview .pwr-services-item__icon path {
  fill: #4A347E !important;
}

.fg-module-overview .pwr-services-item__icon:empty {
  display: none !important;
}

/* Titel */
.fg-module-overview .pwr-services-item__title {
  height: auto !important;
  text-align: center !important;
  color: var(--clr-text-lt) !important;
}

/* Erstes Modul: primary Hintergrund, helle Schrift */
.fg-module-overview .pwr-services-box:first-child .pwr-services-box__inner {
  background-color: var(--clr-primary) !important;
}

.fg-module-overview .pwr-services-box:first-child .pwr-services-item__title,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon path,
.fg-module-overview .pwr-services-box:first-child .pwr-services-sub-services .pwr-cta_button {
  color: var(--clr-text-dk) !important;
  fill: var(--clr-text-dk) !important;
  border-color: var(--clr-base-lt) !important;
}

.fg-module-overview .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style),
.fg-module-overview .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style)::before {
  color: var(--clr-text-dk) !important;
}

.fg-module-overview .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style)::after {
  background-color: var(--clr-text-dk) !important;
}

/* Restliche Module */
.fg-module-overview .pwr-services-box:not(:first-child) .pwr-services-box__inner {
  background-color: #fff !important;
}

/* Mobile: Grid zentrieren */
@media (max-width: 767px) {
  .fg-module-overview .pwr-services {
    justify-content: center !important;
  }
}

/* Desktop: show-more Button ausblenden */
@media (min-width: 1024px) {
  .fg-module-overview .pwr-show-more__container {
    display: none !important;
  }
}
/* ================================================ */
/* Hover: alle Kacheln                              */
/* ================================================ */

.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover {
  background-color: #4A347E !important;
}
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon img,
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon svg,
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon path {
  filter: brightness(0) invert(1) !important;
  fill: #fff !important;
}
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__title {
  color: #fff !important;
}
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button,
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #fff !important;
  color: #fff !important;
  background-color: transparent !important;
}
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button:hover,
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover {
  border-color: transparent !important;
  background-color: #FFD700 !important;
  color: #000 !important;
}
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button:hover::after,
.fg-module-overview .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover::after {
  background-color: #FFD700 !important;
}

/* ================================================ */
/* Erste Kachel: Standardzustand                    */
/* ================================================ */

.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon img,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon path {
  filter: brightness(0) invert(1) !important;
  fill: #fff !important;
}
.fg-module-overview .pwr-services-box:first-child .pwr-cta_button,
.fg-module-overview .pwr-services-box:first-child [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #fff !important;
  color: #fff !important;
  background-color: transparent !important;
}
.fg-module-overview .pwr-services-box:first-child .pwr-services-box__inner {
  transition: background-color 0s 250ms !important;
}
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__title,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon img,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-overview .pwr-services-box:first-child .pwr-services-item__icon path {
  transition: color 0s 250ms, fill 0s 250ms, filter 0s 250ms !important;
}

/* ================================================ */
/* Erste Kachel: wenn andere Kachel gehovered       */
/* ================================================ */

.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-box__inner {
  background-color: #fff !important;
}
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon img,
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon path {
  fill: #4A347E !important;
  filter: none !important;
}
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__title {
  color: #000 !important;
}
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-cta_button,
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #000 !important;
  background-color: transparent !important;
  color: #000 !important;
}
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style),
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style)::before {
  color: #000 !important;
}
.fg-module-overview:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-cta--link [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style)::after {
  background-color: #000 !important;
}
/*****************************************/
/* FoodGenius Modulübersicht zweites Design*/
/*****************************************/
/*****************************************/
/* FoodGenius Modulübersicht zweites Design*/
/*****************************************/
.fg-module-2 .dnd-section .dnd-column {
  padding: 0px 50px 0px 50px;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner {
  box-shadow: var(--elevation3) !important;
}
.fg-module-2 .pwr-services-box .pwr-services-item__title {
  align-self: center;
  text-align: left;
  height: auto !important;
}
.fg-module-2 .pwr-services-box--w-links .pwr-cta {
  display: inline-flex;
  text-align: right;
}
.fg-module-2 .pwr-services-sub-services {
  width: 100%;
  justify-content: flex-start;
}
.fg-module-2 .pwr-services-item__img {
  margin-top: 0px;
  vertical-align: top;
}
.fg-module-2 .pwr-services-item__icon {
  padding-bottom: 0px;
  flex-shrink: 0;
}
.fg-module-2 .pwr-services-item__icon > * {
  display: block;
}
.fg-module-2 .pwr-services-item__desc {
  display: flex;
  flex-direction: column;
  text-align: left !important;
}
.fg-module-2 .pwr-services-box--w-links .pwr-services-box__front {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center !important;
  gap: 8px;
}
.fg-module-2 .pwr-services-box--w-links .pwr-services-item__icon {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-start !important;
  margin-top: 0.1em !important;
}
.fg-module-2 .pwr-services-item__title {
  text-align: left !important;
}
/* Nicht-erste Kacheln: weißer Hintergrund, schwarzer Text */
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-services-box__inner {
  background-color: #fff !important;
}
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-services-item__title,
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-services-item__desc,
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-services-item__desc p,
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-rich-text,
.fg-module-2 .pwr-services-box:not(:first-child) .pwr-rich-text *:not(mark) {
  color: #000 !important;
}
/* ================================================ */
/* fg-module-2: Basis erste Kachel                  */
/* ================================================ */
.fg-module-2 .pwr-services-box:first-child .pwr-services-box__inner {
  background-color: var(--clr-primary) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background-color 0s 250ms !important;
}
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__title,
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__desc,
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__desc p,
.fg-module-2 .pwr-services-box:first-child .pwr-rich-text,
.fg-module-2 .pwr-services-box:first-child .pwr-rich-text *:not(mark),
.fg-module-2 .pwr-services-box:first-child .pwr-services-sub-services {
  color: #fff !important;
  transition: color 0s 250ms !important;
}
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__icon img,
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-2 .pwr-services-box:first-child .pwr-services-item__icon path {
  filter: brightness(0) invert(1) !important;
  fill: #fff !important;
  transition: filter 0s 250ms, fill 0s 250ms !important;
}
.fg-module-2 .pwr-services-box:first-child .pwr-cta_button,
.fg-module-2 .pwr-services-box:first-child .pwr-services-sub-services .pwr-cta_button,
.fg-module-2 .pwr-services-box:first-child [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #fff !important;
  color: #fff !important;
  background-color: transparent !important;
}
/* ================================================ */
/* fg-module-2: Hover alle Kacheln                  */
/* ================================================ */
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover {
  background-color: #4A347E !important;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon img,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon svg,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__icon path {
  filter: brightness(0) invert(1) !important;
  fill: #fff !important;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__title,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__desc,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-services-item__desc p,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-rich-text,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-rich-text *:not(mark) {
  color: #fff !important;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #fff !important;
  color: #fff !important;
  background-color: transparent !important;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button:hover,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover {
  border-color: transparent !important;
  background-color: #FFD700 !important;
  color: #000 !important;
}
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover .pwr-cta_button:hover::after,
.fg-module-2 .pwr-services-box .pwr-services-box__inner:hover [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover::after {
  background-color: #FFD700 !important;
}
/* ================================================ */
/* fg-module-2: Erste Kachel wenn andere gehovered  */
/* ================================================ */
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-box__inner {
  background-color: #fff !important;
}
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon img,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon svg,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__icon path {
  fill: #4A347E !important;
  filter: none !important;
}
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__title,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__desc,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-item__desc p,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-rich-text,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-rich-text *:not(mark) {
  color: #000 !important;
}
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-cta_button,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child .pwr-services-sub-services .pwr-cta_button,
.fg-module-2:has(.pwr-services-box:not(:first-child) .pwr-services-box__inner:hover)
  .pwr-services-box:first-child [class*=cta_button]:not(.pwr-cta):not(.pwr-cta--hubspot-style) {
  border: 2px solid #000 !important;
  background-color: transparent !important;
  color: #000 !important;
}
/* mark immer gelb */
.fg-module-2 .pwr-services-box .pwr-services-box__inner mark,
.fg-module-2 .pwr-services-box .pwr-rich-text mark,
.fg-module-2 .pwr-services-box .pwr-services-item__desc mark {
  background: var(--clr-primary) !important;
  background-color: var(--clr-primary) !important;
  color: #FFD700 !important;
}
  
/*****************************************/
/* FoodGenius Support Cards              */
/*****************************************/

/* Beide Boxen gleiche Größe */
.row-fluid:has(.fg-support-card) {
    display: flex;
    align-items: stretch;
}

.row-fluid:has(.fg-support-card) > [class*="span"] {
    float: none;
}

@media (max-width: 767px) {
  .row-fluid:has(.fg-support-card) {
    flex-wrap: wrap;
  }
  .row-fluid:has(.fg-support-card) > [class*="span"] {
    width: 100% !important;
    margin-left: 0 !important;
  }
}

.fg-support-card .pwr-services-box__inner {
    height: 100%;
    min-height: 450px;
}
@media (max-width: 767px) {
  .fg-support-card .pwr-services-box__inner {
    min-height: unset;
    height: auto;
  }
}
.fg-support-card .pwr-services-box__front {
    position: relative;
}

/* Box Styling */
.fg-support-card .pwr-services-box__inner.pwr--colored-box,
.fg-support-card .pwr-services-box__inner.pwr--colored-box.pwr--light {
    background-color: rgba(var(--clr-base-lt-rgb), .12) !important;
    border: 1px solid rgba(var(--clr-base-lt-rgb), .20);
    border-radius: var(--br-box);
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .fg-support-card .pwr-services-box__inner.pwr--colored-box,
    .fg-support-card .pwr-services-box__inner.pwr--colored-box.pwr--light {
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        background-color: rgba(var(--clr-base-lt-rgb), .08) !important;
    }
}

/* Farben */
.fg-support-card .pwr-services-item__title {
    color: var(--clr-title-dk);
    font-size: var(--fs-h4);
}

.fg-support-card .pwr-services-item__title em {
    color: var(--ht-02-ts-clr-dk);
}

.fg-support-card .pwr-services-item__desc,
.fg-support-card .pwr-rich-text,
.fg-support-card .pwr-rich-text p,
.fg-support-card .pwr-rich-text strong {
    color: var(--clr-text-dk);
}

/* Tablet */
@media (max-width: 1023px) {
    .fg-support-card .pwr-services-item__title {
        font-size: var(--fs-h4-tablet);
    }
}

/* Touch-Geräte */
@media (hover: none) {
    .fg-support-card .pwr-touch-btn {
        display: none !important;
    }

    .fg-support-card .pwr-services-box__inner.pwr--colored-box.pwr--light {
        background-color: var(--clr-background-accent-dk) !important;
        color: var(--clr-text-dk) !important;
        border: 1px solid rgba(var(--clr-base-lt-rgb), .20) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .fg-support-card .pwr-services-item__title {
        color: var(--clr-title-dk) !important;
    }

    .fg-support-card .pwr-services-item__title em {
        color: var(--ht-02-ts-clr-dk) !important;
    }

    .fg-support-card .pwr-services-item__desc,
    .fg-support-card .pwr-rich-text,
    .fg-support-card .pwr-rich-text p,
    .fg-support-card .pwr-rich-text strong {
        color: var(--clr-text-dk) !important;
    }
}


.cell_17812765718232-row-1-padding .row-fluid {
  display: flex;
  gap: 12px;
}

.cell_17812765718232-row-1-padding .row-fluid > .span6 {
  float: none;
  width: 50%;
  margin-left: 0;
}

/*****************************************/
/* Fix für Buttons auf der Startseite (Über uns Section) */
/*****************************************/

.cell_17812765718232-row-1-padding .row-fluid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cell_17812765718232-row-1-padding .row-fluid > .span6 {
  float: none;
  width: auto;
  margin-left: 0;
}

@media (max-width: 767px) {
  .cell_17812765718232-row-1-padding .row-fluid {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    gap: 12px;
  }

  .cell_17812765718232-row-1-padding .row-fluid > .span6 {
    max-width: calc(50% - 6px);
  }

  .cell_17812765718232-row-1-padding .pwr-cta_button {
    white-space: nowrap;
  }
}

/*****************************************/
/* Footer mobile fixes */
/*****************************************/


/* verkleinert Logo bzw. löscht die fixe Breite */
@media (max-width: 576px) {
    [class*="pwr-adc__col--width-"] {
        width: auto !important;
    }
}

.pwr-adc__col--width-3 {
        max-width: 45% !important; /* Sicherheitsnetz gegen Überbreite */
    }

@media (max-width: 576px) {
    .pwr-adc__col--width-9 {
        padding-left: 10px !important;
        padding-right: 0px !important;
    }
}

/* kein flex-wrap (umbruch) */
@media (max-width: 991px) {
    .pwr-adc-main__cols {
        flex-wrap: nowrap !important;
    }
}
/* Logo im Footer bei Mobile verkleinern */
@media (max-width: 576px) {
    .pwr-footer__logo--large img {
        width: 100px !important;
        height: auto !important;
    }
}

/* Social Icons (LinkedIn, Facebook) im Footer bei Mobile um 25% verkleinern */
@media (max-width: 576px) {
    .pwr-adc-content--social-icons .pwr-social-icon {
        display: inline-block;
        transform: scale(0.75);
        transform-origin: left center;
    }
}
/* Kontakt-Icons (Envelope, Phone) im Footer bei Mobile um 25% verkleinern */
@media (max-width: 576px) {
    .pwr-footer [data-hs-icon-hubl] svg {
        width: 15px !important;
        height: 15px !important;
    }
}

/* Kontaktdaten (Mail & Telefon) Schriftart kleiner machen auf mobile */
@media (max-width: 767px){
  .contact .pwr-adc-content__text, .pwr-footer-advanced .pwr-adc-main .pwr-adc-content__text {
    font-size: 12px;
  }
}