/* devmode: pflegeeltern.net overrides */

/* disable demo style selector (kept in codebase for later reactivation) */
#switcher, #style-switcher, .style-switcher, .styleswitcher, .styles-selector, .style_selector, .switcher {
  display: none !important;
}

/* hero image: cover + keep motif on the RIGHT */
.page_mainslider .flexslider .slides > li > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: right center;
}

/* hero text: very dark grey */
.page_mainslider, .page_mainslider h1, .page_mainslider h2, .page_mainslider h3,
.page_mainslider p, .page_mainslider a, .page_mainslider .theme_button {
  color: #1a1a1a !important;
}

/* if template applies dark overlay, neutralize it a bit */
.page_mainslider.ds:before,
.page_mainslider.ds:after {
  opacity: 0 !important;
}
/* unify fonts: use the menu font everywhere (Roboto) */
body, h1, h2, h3, h4, h5, h6, .playfair, .logo_text, .small-text {
  font-family: 'Roboto', sans-serif !important;
}

/* header: remove extra spacing from removed BetterLife text and make logo more prominent */
a.logo.top_logo img { height: 54px; width: auto; }
a.logo.top_logo .logo_tagline {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.2;
  color: #222;
  letter-spacing: 0.2px;
}

/* hero: left aligned, gently indented, readable */
.penet-hero .slide_description { text-align: left; }
.penet-hero .slide_description h2 { color: #111; }
.penet-hero .slide_description_wrapper { padding-left: 48px; }
@media (max-width: 767px) {
  .penet-hero .slide_description_wrapper { padding-left: 18px; padding-right: 18px; }
  a.logo.top_logo img { height: 46px; }
  a.logo.top_logo .logo_tagline { font-size: 11px; }
}

/* v3 tweaks */

/* header logo area: allow full logo width without distortion */
.header_left_logo { min-width: 380px; }
a.logo.top_logo img { height: 54px; width: auto; max-width: none; }

/* hero title: 25% smaller vs template defaults, no indent */
.penet-hero .slide_description_wrapper { padding-left: 0 !important; padding-right: 0 !important; }
.penet-hero .slide_description { text-align: left; }
.penet-hero .slide_description h2 { color: #111; }

/* responsive sizes (template: 48/60/90px -> 36/45/67px) */
.penet-hero .slide_description h2 { font-size: 32px !important; }
@media (min-width: 768px)  { .penet-hero .slide_description h2 { font-size: 36px !important; } }
@media (min-width: 992px)  { .penet-hero .slide_description h2 { font-size: 45px !important; } }
@media (min-width: 1200px) { .penet-hero .slide_description h2 { font-size: 67px !important; } }

/* center the CTA button */
.penet-hero .slide_description .intro-layer:last-child { text-align: center; }
.penet-hero .slide_description .intro-layer:last-child a { display: inline-block; }

@media (max-width: 767px) {
  .penet-hero .slide_description_wrapper { padding-left: 18px !important; padding-right: 18px !important; }
}


/* penet patch m1_header_definitive (20260110) */

/* unify header height across all pages */
.page_header,
.page_header a.header-button{
  line-height: 80px !important;
}
.page_header .logo{
  height: 80px !important;
  line-height: 80px !important;
}
.page_header .logo img{
  max-height: 60px !important;
}
.page_header .sf-menu > li > a{
  line-height: 80px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* home only: header transparent over hero (index has intro_section directly before header) */
.intro_section + header.page_header.header_white{
  background-color: transparent !important;
  box-shadow: none !important;
}
.intro_section + header.page_header.header_white .sf-menu > li > a,
.intro_section + header.page_header.header_white a.logo,
.intro_section + header.page_header.header_white .logo_text{
  color: #ffffff !important;
}
.intro_section + header.page_header.header_white .sf-menu > li.active > a{
  color: #ffffff !important;
}
.intro_section + header.page_header.header_white .sf-menu > li > a:hover,
.intro_section + header.page_header.header_white .sf-menu > li > a:focus{
  color: #b21f00 !important;
}

/* when sticky (affix): back to normal white header + dark menu */
header.page_header.affix.header_white{
  background-color: #ffffff !important;
  box-shadow: 0px 1px 15px 0 rgba(0,0,0,0.07) !important;
}
header.page_header.affix.header_white .sf-menu > li > a{
  color: #323232 !important;
}


/* penet patch m1_home_transparent_by_body (20260110) */

/* startseite: oben transparent */
body.penet-home header.page_header.header_white:not(.affix){
  background-color: transparent !important;
  box-shadow: none !important;
}

/* startseite: menu + logo text weiß */
body.penet-home header.page_header.header_white:not(.affix) .sf-menu > li > a,
body.penet-home header.page_header.header_white:not(.affix) a.logo,
body.penet-home header.page_header.header_white:not(.affix) .logo_text{
  color: #ffffff !important;
}

/* kein invert/filter */
body.penet-home header.page_header.header_white:not(.affix) a.logo img{
  -webkit-filter: none !important;
  filter: none !important;
}


/* penet patch m1_home_transparent_force (20260110) */

/* startseite: wrapper + header transparent (top state) */
body.penet-home .page_header_wrapper,
body.penet-home .page_header_wrapper.affix-top-wrapper .page_header,
body.penet-home header.page_header.header_white:not(.affix){
  background-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* startseite: links sichtbar */
body.penet-home header.page_header.header_white:not(.affix) .sf-menu > li > a{
  color: #ffffff !important;
}

/* startseite: active NICHT rot, sondern weiß; hover rot */
body.penet-home header.page_header.header_white:not(.affix) .sf-menu > li.active > a{
  color: #ffffff !important;
}
body.penet-home header.page_header.header_white:not(.affix) .sf-menu > li > a:hover,
body.penet-home header.page_header.header_white:not(.affix) .sf-menu > li > a:focus{
  color: #b21f00 !important;
}



/* penet: hide old header claim (tagline) */
.logo_tagline{display:none !important; height:0 !important; margin:0 !important; padding:0 !important; line-height:0 !important;}

/* pp_penet_header_tweaks_v1 20260113_185541 */
/* 2) logo a little lower */
.page_header .header_logo,
.page_header .logo,
.top_logo {
  padding-top: 10px !important;
}

/* 3) menu hover color = logo red */
:root { --penet-logo-red: #b21f00; }

.mainmenu a:hover,
.mainmenu li.active > a,
.sf-menu > li > a:hover,
.sf-menu > li.active > a,
.sf-menu > li > a:focus {
  color: var(--penet-logo-red) !important;
}

/* 4) hero title 10% smaller */
.intro_section h1,
.intro_section h2,
.intro_section .intro_featured_word,
.intro_section .big,
.intro_section .hero-title {
  font-size: 0.9em !important;
}
/* end pp_penet_header_tweaks_v1 */

/* pp_penet_home_header_tune_v1 20260113_191554 */

/* menu hover + active -> logo red */
.mainmenu a:hover,
.mainmenu li.active > a,
.sf-menu li.active > a,
.sf-menu a:hover,
.sf-menu > li > a:hover {
  color: #b21f00 !important;
}

/* underline / border indicators (theme dependent) */
.sf-menu > li > a:before,
.sf-menu > li > a:after,
.mainmenu a:before,
.mainmenu a:after {
  background-color: #b21f00 !important;
  border-color: #b21f00 !important;
}

/* logo a bit lower (desktop) */
.page_header .logo,
.header_logo_center .logo,
.header_logo_left .logo {
  margin-top: 10px !important;
}

@media (max-width: 767px){
  .page_header .logo,
  .header_logo_center .logo,
  .header_logo_left .logo {
    margin-top: 6px !important;
  }
}

/* hero title smaller + much higher */
.penet_hero_title {
  font-size: 85% !important;
  line-height: 1.05 !important;
}

.penet_hero_title,
.penet_hero_title * {
  transform: translateY(-80px) !important;
}

/* intro under title */
.penet_hero_intro {
  margin-top: 18px !important;
  font-size: 18px !important;
  line-height: 1.35 !important;
  color: rgba(0,0,0,0.70) !important;
  transform: translateY(-80px) !important;
}

@media (max-width: 767px){
  .penet_hero_title,
  .penet_hero_title * { transform: translateY(-40px) !important; }
  .penet_hero_intro { transform: translateY(-40px) !important; font-size: 16px !important; }
}

/* penet patch 20260113_193107: hero sizing/alignment + menu hover color */
.penet_hero_title{
  font-size:0.72em !important;
  line-height:1.05 !important;
}
.penet_hero_intro{
  margin-top:18px !important;
}

/* left edge: hero title + intro align to container left (like header/logo inset) */
.intro_section .container{
  text-align:left !important;
  padding-left:15px !important;
  padding-right:15px !important;
}
.intro_section .penet_hero_title,
.intro_section .penet_hero_intro{
  margin-left:0 !important;
  margin-right:auto !important;
}

/* menu: do NOT force base color; only hover / active in logo red */
.sf-menu > li > a:hover,
.sf-menu > li.active > a,
.sf-menu > li.sfHover > a{
  color:#b21f00 !important;
}

/* penet fix: disable logo invert filter */
.intro_section + .page_header_wrapper .affix.header_white a.logo img{
  -webkit-filter: none !important;
  filter: none !important;
}

/* =========================================================
   penet patch: hero aligns to global left container edge
   + hero title ~25% smaller
   scope: home only
   ========================================================= */

/* 1) bring hero content back onto the same grid as the rest */
body.penet-home .intro_section .row{
  margin-left: 0 !important;
  margin-right: 0 !important;
}
body.penet-home .intro_section [class*="col-"]{
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 2) hero title size -25% */
body.penet-home .intro_section h1{
  font-size: 0.75em !important;
  line-height: 1.05 !important;
}

/* (optional but usually right): remove extra left offsets if any */
body.penet-home .intro_section h1,
body.penet-home .intro_section p{
  margin-left: 0 !important;
}


/* =========================================================
   pp_penet_hero_align_v2 (20260114)
   goal: hero left edge aligns to site container (logo)
         hero title ~25% smaller
         remove breakpoint "jumping" (no translate transforms)
   ========================================================= */

body.penet-home .intro_section .penet_hero_title,
body.penet-home .intro_section .penet_hero_intro,
body.penet-home .penet-hero .slide_description,
body.penet-home .penet-hero .slide_description_wrapper{
  transform: none !important;
}

/* bring hero content back onto the same bootstrap grid */
body.penet-home .intro_section .row{
  margin-left: -15px !important;
  margin-right: -15px !important;
}
body.penet-home .intro_section [class*="col-"]{
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* align hero text block exactly like the rest of the site */
body.penet-home .penet-hero .slide_description{
  text-align: left !important;
}
body.penet-home .penet-hero .slide_description_wrapper{
  padding-left: 0 !important;   /* column padding does the job now */
  padding-right: 0 !important;
}

/* hero title: ~25% smaller, responsive but stable (no breakpoint jumps) */
body.penet-home .intro_section h1,
body.penet-home .penet-hero .slide_description h2,
body.penet-home .penet_hero_title{
  font-size: clamp(28px, 4vw, 52px) !important;
  line-height: 1.06 !important;
}

/* intro text stays aligned with title */
body.penet-home .penet_hero_intro,
body.penet-home .penet-hero .slide_description p{
  margin-left: 0 !important;
}


/* pp_penet_hero_mobile_contrast_v1 20260114 */
/* ziel: auf small screens kein "schwarz auf dunkel" + hamburger sichtbar */

@media (max-width: 991px){

  /* 1) hero overlay-fläche hell machen (template nutzt oft :before fürs overlay) */
  body.penet-home .intro_section .slide_description_wrapper:before{
    background-color: rgba(255,255,255,0.78) !important;
  }

  /* falls das template statt :before ein echtes bg auf wrapper setzt */
  body.penet-home .intro_section .slide_description_wrapper{
    background: rgba(255,255,255,0.78) !important;
  }

  /* 2) text bleibt dunkel und lesbar */
  body.penet-home .intro_section .slide_description h1,
  body.penet-home .intro_section .slide_description h2,
  body.penet-home .intro_section .slide_description p{
    color: #111 !important;
  }

  /* 3) hamburger (toggle) auf mobile dunkel, damit er auf hellen flächen sichtbar ist */
  body.penet-home header.page_header .toggle_menu span,
  body.penet-home header.page_header .toggle_menu span:before,
  body.penet-home header.page_header .toggle_menu span:after{
    background-color: #323232 !important;
  }
}


/* pp_penet_hero_mobile_v1 20260114
   goals:
   - remove side "mourning" bars on small widths
   - keep hero title/text inside the first (image) section
   - use light grey-blue overlay instead of dark block
*/
@media (max-width: 991px){

  /* 1) remove dark outer background / side bars */
  html, body { background: #cbd5d9 !important; } /* soft grey-blue like hands area */
  #box_wrapper { background: transparent !important; }

  /* full-bleed intro section */
  body.penet-home .intro_section .container,
  body.penet-home .intro_section .container-fluid{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 2) keep content over the image (no separate dark block below) */
  body.penet-home .intro_section .slide_description_wrapper{
    width: 100% !important;
    max-width: none !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;

    /* 3) light overlay instead of dark */
    background: rgba(203, 213, 217, 0.92) !important; /* matches #cbd5d9 */
    padding: 18px 18px 22px 18px !important;
  }

  /* kill template's dark overlay layer */
  body.penet-home .intro_section .slide_description_wrapper:before{
    display: none !important;
    content: none !important;
  }

  /* ensure text stays readable on light overlay */
  body.penet-home .intro_section .slide_description h2,
  body.penet-home .intro_section .slide_description p{
    color: #111 !important;
  }
}

/* pp_penet_fix_home_hero_minheight_v3 start */
/*
goal:
- fullscreen hero only on desktop-ish widths
- switch to content-first (no forced 100vh) at <= 991px
*/

/* desktop-ish: allow fullscreen hero */
@media (min-width: 992px) and (orientation: landscape) {
  .intro_section.page_mainslider { min-height: 100vh; }
  .intro_section.page_mainslider .flexslider { min-height: 100vh; }
  .intro_section.page_mainslider .flexslider .slides > li { min-height: 100vh; }
  .intro_section.page_mainslider .flexslider .slides > li img {
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    object-fit: cover;
  }
}

/* <= 991px: reset forced fullscreen constraints (content-first) */
@media (max-width: 991px) {
  .intro_section.page_mainslider {
    min-height: auto !important;
    height: auto !important;
  }
  .intro_section.page_mainslider .flexslider {
    min-height: auto !important;
    height: auto !important;
  }
  .intro_section.page_mainslider .flexslider .slides > li {
    min-height: auto !important;
    height: auto !important;
  }
  .intro_section.page_mainslider .flexslider .slides > li img {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    object-fit: cover;
  }
}
/* pp_penet_fix_home_hero_minheight_v3 end */

/* home hero alignment + navicon fix */
body.penet-home header.page_header .toggle_menu span,
body.penet-home header.page_header .toggle_menu span:before,
body.penet-home header.page_header .toggle_menu span:after,
body.penet-home header.page_header .toggle_menu_side span,
body.penet-home header.page_header .toggle_menu_side span:before,
body.penet-home header.page_header .toggle_menu_side span:after{
  background-color:#323232!important;
  opacity:1!important;
}

body.penet-home .intro_section .slide_description{
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:15px!important;
  padding-right:15px!important;
  max-width:1170px!important;
}

@media (max-width:1199px){
  body.penet-home .intro_section .slide_description{max-width:970px!important;}
}
@media (max-width:991px){
  body.penet-home .intro_section .slide_description{max-width:750px!important;}
}
@media (max-width:767px){
  body.penet-home .intro_section .slide_description{max-width:100%!important;}
}


/* pp_penet_navicon_home_fix_v1 */

/* pp_penet_navicon_home_fix_v1 */
body.penet-home header.page_header{z-index:10050\!important;}
body.penet-home header.page_header .toggle_menu,body.penet-home header.page_header .toggle_menu_side{opacity:1\!important;visibility:visible\!important;filter:none\!important;mix-blend-mode:normal\!important;}
body.penet-home header.page_header .toggle_menu span,body.penet-home header.page_header .toggle_menu span:before,body.penet-home header.page_header .toggle_menu span:after,body.penet-home header.page_header .toggle_menu_side span,body.penet-home header.page_header .toggle_menu_side span:before,body.penet-home header.page_header .toggle_menu_side span:after{background-color:#323232\!important;opacity:1\!important;}

/* startseite: toggle/hamburger sichtbar (fixed: dark on light) */
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu{background:transparent !important;}
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span,
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span:before,
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span:after{background-color:#323232 !important;opacity:1 !important;}

/* pp_penet_navicon_home_white_hover_red_v1 */
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu{background:transparent!important;}
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span,body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span:before,body.penet-home header.page_header.header_white:not(.affix) .toggle_menu span:after{background-color:#ffffff!important;opacity:1!important;}
body.penet-home header.page_header.header_white:not(.affix) .toggle_menu:hover span,body.penet-home header.page_header.header_white:not(.affix) .toggle_menu:hover span:before,body.penet-home header.page_header.header_white:not(.affix) .toggle_menu:hover span:after{background-color:#b21f00!important;}


/* pp_penet_mobile_menu_look_v5 start (disabled) */
/*
/* mobile nav (mainmenu_wrapper + sf-menu): softer overlay, schmäler drawer, nicht fullscreen */

@media (max-width: 991px){
  :root{
    --penet_mmenu_w: min(380px, 86vw);
    --penet_mmenu_gap: 14px;
    --penet_mmenu_bg: rgba(35,35,35,.88);
    --penet_overlay_bg: rgba(0,0,0,.35);
  }

  /* overlay (template fullscreen is fine; we just make it a soft veil) */
  .mobile-active .mainmenu_wrapper{
    background-color: var(--penet_overlay_bg) !important;
  }

  /* drawer panel (sf-menu is the actual mobile drawer in this template) */
  .sf-menu{
    background: var(--penet_mmenu_bg) !important;
    width: var(--penet_mmenu_w) !important;

    /* slide-in from right, without relying on "right:100%" quirks */
    left: auto !important;
    right: var(--penet_mmenu_gap) !important;
    transform: translateX(calc(var(--penet_mmenu_w) + (2 * var(--penet_mmenu_gap)))) !important;

    /* not fullscreen */
    top: var(--penet_mmenu_gap) !important;
    bottom: var(--penet_mmenu_gap) !important;
    height: auto !important;
    max-height: calc(100vh - (2 * var(--penet_mmenu_gap))) !important;
    overflow-y: auto !important;

    border-radius: 12px !important;
    padding: 22px 18px !important;

    opacity: 0 !important;
    transition: transform .35s ease, opacity .25s ease !important;
    will-change: transform, opacity;
  }

  .mobile-active .sf-menu{
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  /* links a touch airier */
  .sf-menu > li > a{
    letter-spacing: .02em !important;
  }
}
*/
/* pp_penet_mobile_menu_look_v5 end (disabled) */


/* pp_penet_mobile_menu_look_v6 start (disabled) */
/*
/* mobile nav: no dimming, light modern drawer, page scroll locked while open */

@media (max-width: 991px){
  :root{
    --penet_mmenu_w: min(380px, 86vw);
    --penet_mmenu_gap: 14px;

    /* light system */
    --penet_mmenu_bg: rgba(250,250,250,.96);
    --penet_mmenu_text: #1f1f1f;
    --penet_mmenu_div: #e6e7e8;
    --penet_mmenu_hover: #b21f00;

    /* no dimming */
    --penet_overlay_bg: rgba(0,0,0,0);
  }

  /* 1) when menu open: DO NOT dim page, and lock page scroll */
  .mobile-active .mainmenu_wrapper{
    background-color: var(--penet_overlay_bg) !important;
  }
  body.mobile-active{
    overflow: hidden !important;
    height: 100vh !important;
  }

  /* 2) drawer panel (sf-menu is the actual mobile drawer in this template) */
  .sf-menu{
    background: var(--penet_mmenu_bg) !important;
    color: var(--penet_mmenu_text) !important;

    width: var(--penet_mmenu_w) !important;

    /* slide-in from right (v5 logic, but kept) */
    left: auto !important;
    right: var(--penet_mmenu_gap) !important;
    transform: translateX(calc(var(--penet_mmenu_w) + (2 * var(--penet_mmenu_gap)))) !important;

    /* not fullscreen */
    top: var(--penet_mmenu_gap) !important;
    bottom: var(--penet_mmenu_gap) !important;
    height: auto !important;
    max-height: calc(100vh - (2 * var(--penet_mmenu_gap))) !important;

    border-radius: 14px !important;
    padding: 18px 16px !important;

    box-shadow: 0 12px 30px rgba(0,0,0,.10) !important;

    opacity: 0 !important;
    transition: transform .35s ease, opacity .25s ease !important;
    will-change: transform, opacity;

    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-active .sf-menu{
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  /* 3) typography + spacing */
  .sf-menu > li{
    border-bottom: 1px solid var(--penet_mmenu_div) !important;
  }
  .sf-menu > li:last-child{
    border-bottom: none !important;
  }

  .sf-menu > li > a{
    color: var(--penet_mmenu_text) !important;
    letter-spacing: .01em !important;
    padding: 14px 10px !important;
    line-height: 1.2 !important;
    background: transparent !important;
  }

  .sf-menu > li > a:hover,
  .sf-menu > li.active > a{
    color: var(--penet_mmenu_hover) !important;
  }

  /* dropdown caret / toggles */
  .sf-menu > li > a > span.sf-with-ul:after,
  .sf-menu > li > a .sf-with-ul:after,
  .sf-menu li a.sf-with-ul:after{
    color: var(--penet_mmenu_text) !important;
    opacity: .55 !important;
  }

  /* keep the close icon readable on light drawer */
  .toggle_menu,
  .toggle_menu_side{
    mix-blend-mode: normal !important;
  }
}

*/
/* pp_penet_mobile_menu_look_v6 end (disabled) */

/* pp_penet_mobile_menu_look_v7 start (disabled) */
/*
/* delta-fix only: (1) text color on home (was too white on light drawer) (2) navicon bg on internal pages */

@media (max-width: 991px){
  /* 1) drawer: enforce readable text (home had white-ish links on light glass) */
  .sf-menu{
    background: rgba(255,255,255,.92) !important;
  }
  .sf-menu > li > a,
  .sf-menu a{
    color: #1f1f1f !important;
  }
  .sf-menu > li.active > a,
  .sf-menu > li > a:hover{
    color: #b21f00 !important;
  }
  /* caret / dropdown indicator */
  .sf-menu a.sf-with-ul:after{
    color: #1f1f1f !important;
  }

  /* 2) internal pages: navicon shouldn't sit on a dark square */
  header.page_header.header_white .toggle_menu{
    background: transparent !important;
    box-shadow: none !important;
  }
  header.page_header.header_white .toggle_menu span,
  header.page_header.header_white .toggle_menu span:before,
  header.page_header.header_white .toggle_menu span:after{
    background-color: #323232 !important;
    opacity: 1 !important;
  }
}

*/
/* pp_penet_mobile_menu_look_v7 end (disabled) */

/* pp_penet_mobile_menu_look_v11 start (disabled) */
/*
/* mobile menu: light drawer, dark text, logo-red accents, no page dimming */

@media (max-width: 991px){
  :root{
    --penet_mmenu_w: min(520px, 92vw);
    --penet_mmenu_gap: 14px;
    --penet_mmenu_bg: rgba(255,255,255,.94);
    --penet_mmenu_text: #1f1f1f;
    --penet_mmenu_accent: #b21f00; /* logo red */
    --penet_mmenu_line: rgba(0,0,0,.10);
    --penet_mmenu_shadow: 0 14px 40px rgba(0,0,0,.20);
  }

  /* no dark overlay */
  .mobile-active .mainmenu_wrapper{
    background: transparent !important;
  }

  /* drawer panel */
  .sf-menu{
    background: var(--penet_mmenu_bg) !important;
    width: var(--penet_mmenu_w) !important;

    left: auto !important;
    right: var(--penet_mmenu_gap) !important;
    transform: translateX(calc(var(--penet_mmenu_w) + (2 * var(--penet_mmenu_gap)))) !important;

    top: var(--penet_mmenu_gap) !important;
    bottom: var(--penet_mmenu_gap) !important;
    height: auto !important;
    max-height: calc(100vh - (2 * var(--penet_mmenu_gap))) !important;
    overflow-y: auto !important;

    border-radius: 16px !important;
    box-shadow: var(--penet_mmenu_shadow) !important;
    padding: 10px 0 !important;

    opacity: 0 !important;
    transition: transform .28s ease, opacity .20s ease !important;
    will-change: transform, opacity;
  }

  .mobile-active .sf-menu{
    transform: translateX(0) !important;
    opacity: 1 !important;
  }

  /* menu items */
  .sf-menu > li{
    border-top: 1px solid var(--penet_mmenu_line) !important;
  }
  .sf-menu > li:first-child{
    border-top: 0 !important;
  }

  .sf-menu > li > a,
  .sf-menu a{
    color: var(--penet_mmenu_text) !important;
    padding: 18px 22px !important;
    letter-spacing: .02em !important;
  }

  /* keep mobile "hover" neutral; use accent for active/open only */
  .sf-menu > li > a:hover,
  .sf-menu a:hover{
    color: var(--penet_mmenu_text) !important;
  }

  .sf-menu > li.active > a,
  .sf-menu > li.active > a:hover{
    color: var(--penet_mmenu_accent) !important;
  }

  /* caret / dropdown indicator */
  .sf-menu a.sf-with-ul:after{
    color: var(--penet_mmenu_text) !important;
  }

  /* hamburger / close icon: no dark square on white header */
  header.page_header.header_white .toggle_menu{
    background: transparent !important;
    box-shadow: none !important;
  }
  header.page_header.header_white .toggle_menu span,
  header.page_header.header_white .toggle_menu span:before,
  header.page_header.header_white .toggle_menu span:after{
    background-color: #323232 !important;
    opacity: 1 !important;
  }
}

*/
/* pp_penet_mobile_menu_look_v11 end (disabled) */

/* pp_penet_mobile_menu_look_v12 start (disabled) */
/*
/* mobile menu color program: light glass + logo-red text, no darkening of page */

@media (max-width: 991px){
  :root{
    --penet_logo_red: #b21f00;
    --penet_menu_bg: rgba(255,255,255,.92);
    --penet_menu_border: rgba(0,0,0,.08);
    --penet_menu_shadow: 0 18px 60px rgba(0,0,0,.18);
  }

  /* 1) no page darkening (template overlay) */
  .mobile-active .mainmenu_wrapper{ background: transparent !important; }

  /* 2) drawer panel background + subtle separation */
  .sf-menu{
    background: var(--penet_menu_bg) !important;
    box-shadow: var(--penet_menu_shadow) !important;
    border: 1px solid var(--penet_menu_border) !important;
  }

  /* 3) typography: logo-red everywhere (mobile hover is nonsense) */
  .sf-menu a,
  .sf-menu > li > a{
    color: var(--penet_logo_red) !important;
    text-shadow: none !important;
  }
  .sf-menu > li.active > a,
  .sf-menu > li > a:hover,
  .sf-menu a:hover{
    color: var(--penet_logo_red) !important;
  }

  /* caret / dropdown indicator */
  .sf-menu a.sf-with-ul:after{
    color: var(--penet_logo_red) !important;
    opacity: .75;
  }

  /* separators lighter */
  .sf-menu > li{ border-color: rgba(0,0,0,.06) !important; }

  /* 4) close icon / hamburger should never sit on a dark square */
  header.page_header .toggle_menu,
  header.page_header .toggle_menu_side{
    background: transparent !important;
    box-shadow: none !important;
  }

  /* hamburger lines (closed state on internal pages) */
  header.page_header .toggle_menu span,
  header.page_header .toggle_menu span:before,
  header.page_header .toggle_menu span:after,
  header.page_header .toggle_menu_side span,
  header.page_header .toggle_menu_side span:before,
  header.page_header .toggle_menu_side span:after{
    background-color: var(--penet_logo_red) !important;
    opacity: 1 !important;
  }

  /* close icon (open state) */
  .mobile-active .toggle_menu span,
  .mobile-active .toggle_menu span:before,
  .mobile-active .toggle_menu span:after,
  .mobile-active .toggle_menu_side span,
  .mobile-active .toggle_menu_side span:before,
  .mobile-active .toggle_menu_side span:after{
    background-color: var(--penet_logo_red) !important;
  }
}

*/
/* pp_penet_mobile_menu_look_v12 end (disabled) */

/* pp_penet_mobile_menu_look_v14 start */
/* single source of truth: no dim layer, no drifting menu, text = logo red */
@media (max-width: 991px){
  :root{ --penet_logo_red: #b21f00; }

  /* no dimming overlay */
  .mobile-active .mainmenu_wrapper{
    background: transparent !important;
    background-color: transparent !important;
  }

  /* drawer is a fixed panel (won't move when page scrolls) */
  .sf-menu{
    position: fixed !important;
    top: 14px !important;
    right: 14px !important;
    left: auto !important;
    bottom: 14px !important;
    height: auto !important;
    max-height: calc(100vh - 28px) !important;
    overflow-y: auto !important;

    width: min(420px, 86vw) !important;
    border-radius: 14px !important;
    padding: 22px 18px !important;

    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 18px 50px rgba(0,0,0,.18) !important;
  }

  /* text: logo red (hover stays logo red on mobile) */
  .sf-menu a,
  .sf-menu > li > a{
    color: var(--penet_logo_red) !important;
    opacity: 1 !important;
  }
  .sf-menu > li.active > a,
  .sf-menu > li > a:hover,
  .sf-menu a:hover{
    color: var(--penet_logo_red) !important;
  }

  /* dropdown caret */
  .sf-menu a.sf-with-ul:after{ color: var(--penet_logo_red) !important; }

  /* internal pages: navicon background must be transparent */
  header.page_header.header_white .toggle_menu{
    background: transparent !important;
    box-shadow: none !important;
  }
}
/* pp_penet_mobile_menu_look_v14 end */