:root
{
    --fud-blue-color: #0061a1;
    --fud-red-color: #e41b13;

    --fud-lightgrey-color: #F1F1F1;
    --fud-lightblue-color: #e6eff6;

    --fud-skew-bg-padding-top: 100px;
    --fud-skew-bg-breakout-overlap: 7%;
    --fud-skew-small-radius-bg-breakout-overlap: 4%;

    --slant-angle: -18deg;
    --slant-width: 18px;   /* Tiefe der Schräge */
    --btn-height: 48px;    /* definierte Höhe = saubere Kontrolle */

    --fud-transition-duration: 330ms;
}


h1,
h2, 
h3
{
    padding-right: 0.25em;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 15px;
    clear: both;
}

.page-title h1, .page-title h1 *, .page-title h1 a:hover, #page .page-title .entry-title
{

}


.masthead .branding
{
    max-width: 400px;
    transition: max-width 330ms ease;
}

.masthead.sticky-on .branding
{
    max-width: 250px;
}

.sub-nav li
{
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.sub-nav li:last-child
{
    border-bottom: none;
}

/*
#Top_bar:not(.is-sticky) .top_bar_right .top_bar_right_wrapper {
    padding-top: 15px;
}

#Top_bar .menu > li.current-menu-item > a, #Top_bar .menu > li.current_page_item > a, #Top_bar .menu > li.current-menu-parent > a, #Top_bar .menu > li.current-page-parent > a, #Top_bar .menu > li.current-menu-ancestor > a, #Top_bar .menu > li.current-page-ancestor > a, #Top_bar .menu > li.current_page_ancestor > a, #Top_bar .menu > li.hover > a {
    color: var(--fud-blue-color);
}


#Top_bar .logo {
    float: left;
    margin: 0;
}

@media only screen and (min-width: 1240px) {
    #Top_bar.is-sticky #logo, 
    #Top_bar.is-sticky .custom-logo-link 
    {
        padding: 2px 0 !important;
    }

    #Top_bar.is-sticky #logo img.logo-sticky {
        display: inline;
        max-height: 55px !important;
    }

    .section_wrapper, .container {
        max-width: 1400px;
    }



    body.menuo-right #Top_bar .menu_wrapper {
        margin-top: 69px;
        transition: margin-top 0.5s ease;
    }

    body.menuo-right.mfn-header-scrolled #Top_bar .menu_wrapper {
        margin-top: 0px;
    }


}

#Top_bar .menu li ul li
{
    width: 300px;
}

#Top_bar .menu li ul li ul
{
    left: 300px;
}

#Top_bar .menu > li ul li a
{
    font-weight: 300;
    color: #5f5f5f;
}

#Top_bar .menu > li ul li a:hover, 
#Top_bar .menu > li ul li.hover > a
{
    color: var(--fud-blue-color);

}

#Top_bar .menu li.current-page-ancestor > a,
#Top_bar .menu li.current-menu-ancestor > a,
#Top_bar .menu li.current-menu-parent > a,
#Top_bar .menu li.current-page-parent > a,
#Top_bar .menu li.current_page_parent > a,
#Top_bar .menu li.current_page_ancestor > a,
#Top_bar .menu li.current-menu-item > a,
#Top_bar .menu li.current_page_item > a
{
    color: var(--fud-blue-color);
    font-weight: 400;
}

#Top_bar .menu > li ul {
    background-color: #FFFFFF;
    border-left: 1px solid rgba(0, 0, 0, .05);
}

#Top_bar .menu > li > a span:not(.description)
{
    padding: 0 18px;
}

#Top_bar .menu > li > a {
    padding: 0px 0;
}
*/

/* --------------------------------- */

h1, h2, 
.text-logo #logo,
.caps,
.caps-h h1,
.caps-h h2,
.caps-h h3,
.caps-h h4,
.caps-h h5,
.caps-h h6
{
    text-transform: uppercase;
}

p,
.content ol, .content ul
{
    margin-bottom: 15px;
}


p.introtext,
.introtext p
{
    font-size: 140%;
    line-height: 125%;
    font-weight: 200;
    font-family: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: #000;
}




@media (max-width: 921px)
{
  .vc_row.vc_row-flex.reverse-on-mobile,
  .vc_row.vc_row-flex.reverse-cols-on-mobile 
  {
      flex-direction: row-reverse;
  }

}


@media (min-width: 922px)
{
  .vc_row.vc_row-flex.reverse-on-desktop,
  .vc_row.vc_row-flex.reverse-cols-on-desktop 
  {
      flex-direction: row-reverse;
  }

}

.wpb_single_image img
{
  width: 100%;
}


.white-text,
.white-text *,
.white-text a:hover,
.white-text a:focus,
.white-text a:active,
.text-white,
.text-white *,
.text-white a:hover,
.text-white a:focus,
.text-white a:active
{
    color: #fff;
}


.dark-text,
.dark-text *,
.text-dark,
.text-dark *
{
    color: var(--color-text);
}


html:lang(en-US) body *
{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}


.no-padding-h h1, 
.no-padding-h h2,
.no-padding-h h3,
.no-padding-h h4,
.no-padding-h h5,
.no-padding-h h6
{
  margin-bottom: 0 !important;
}

.no-padding         {  padding: 0 !important; }
.no-padding-bottom  {  padding-bottom: 0 !important; }
.no-padding-top     {  padding-top: 0 !important; }
.no-padding-left    {  padding-left: 0 !important; }
.no-padding-right   {  padding-right: 0 !important; }

.no-border
{
  border: none !important;
}

.no-border-bottom
{
  border-bottom: none !important;
}

.no-border-top
{
  border-top: none !important;
}

/* --------------------------------------- */

.section-intro p.introtext,
.section-intro .introtext p
{
    font-weight: 300;
}

.section-padding,
.section-padding-bottom
{
    margin-bottom: 80px;
}

.section-padding,
.section-padding-top
{
    margin-top: 80px;
}

/* ########################################## */

.wpb_content_element.rundung-obenrechts > .wpb_wrapper,
.rundung-obenrechts  {   border-top-right-radius: 50px;  overflow: hidden; }

.wpb_content_element.rundung-obenlinks > .wpb_wrapper,
.rundung-obenlinks   {   border-top-left-radius: 50px;  overflow: hidden; }

.wpb_content_element.rundung-untenrechts > .wpb_wrapper,
.rundung-untenrechts  {  border-bottom-right-radius: 50px;  overflow: hidden; }

.wpb_content_element.rundung-untenlinks > .wpb_wrapper,
.rundung-untenlinks   {  border-bottom-left-radius: 50px;  overflow: hidden; }

.wpb_content_element.rundungen-rechts > .wpb_wrapper,
.rundungen-rechts  {   
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px; 
    overflow: hidden; 
}

.wpb_content_element.rundungen-links > .wpb_wrapper,
.rundungen-links  {   
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;  
    overflow: hidden; 
}

/*.bg-padding:not(.wpb_content_element), */
.wpb_content_element.bg-padding 
{

    --mfn-column-gap-top: 30px;
    --mfn-column-gap-bottom: 25px;
    --mfn-column-gap-left: 35px;
    --mfn-column-gap-right: 35px;

/*
    margin-top: var(--mfn-column-gap-top);
    margin-bottom: var(--mfn-column-gap-bottom);
    margin-left: var(--mfn-column-gap-left);
    margin-right: var(--mfn-column-gap-right);
*/
}


/* ######################################################### */
/* bg-breakout mit skew-bg:
farbiger skew-bg, breakout right, mit bg-padding top 100px und kleinerem Radius:  
 
skew-bg-lightgrey
bg-breakout-right
bg-padding-top
skew-small-radius
*/

.vc_row[class*="skew-bg-"] {
    position: relative;
    overflow: visible;
    isolation: isolate;

    min-height: 1px;
}

.vc_row[class*="skew-bg-"] > .wpb_column {
    position: relative;
    z-index: 2;
}


.vc_row[class*="skew-bg-"]::before,
.vc_row[class*="skew-bg-"]::after {
    z-index: 1;
    pointer-events: none;
    display: block;
    content: '';
    position: absolute;
}

.vc_row[class*="skew-bg-"].bg-breakout-left:before
{
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    height: auto;
    visibility: visible;

    left: auto;
    right: var(--fud-skew-bg-breakout-overlap);
    width: 200rem;
}

.vc_row[class*="skew-bg-"].bg-breakout-left.skew-small-radius:before
{
    right: var(--fud-skew-small-radius-bg-breakout-overlap);
}



.vc_row[class*="skew-bg-"].bg-breakout-right:before
{
    content: '';
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    height: auto;
    visibility: visible;

    left: var(--fud-skew-bg-breakout-overlap);
    right: auto;
    width: 200rem;

}

.vc_row[class*="skew-bg-"].bg-breakout-right.skew-small-radius:before
{
    left: var(--fud-skew-small-radius-bg-breakout-overlap);
}

/* Skew-Anhängsel im AFTER nur bei ausreichender Width sichtbar - ansonsten auch bg */
.vc_row[class*="skew-bg-"].bg-breakout-left:after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    visibility: visible;

    left: calc(100% - var(--fud-skew-bg-breakout-overlap));
    right: auto;
    width: 200rem;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;        
}

.vc_row[class*="skew-bg-"].bg-breakout-left.skew-small-radius:after
{
    left: calc(100% - var(--fud-skew-small-radius-bg-breakout-overlap));
}


.vc_row[class*="skew-bg-"].bg-breakout-right:after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    height: auto;
    visibility: visible;

    left: auto;
    right: calc(100% - var(--fud-skew-bg-breakout-overlap));
    width: 200rem;

    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;    
}

.vc_row[class*="skew-bg-"].bg-breakout-right.skew-small-radius:after
{
    right: calc(100% - var(--fud-skew-small-radius-bg-breakout-overlap));
}

.vc_row[class*="skew-bg-"].bg-padding-top:before,
.vc_row[class*="skew-bg-"].bg-padding-top:after
{
    top: var(--fud-skew-bg-padding-top);
}

.vc_row.skew-bg-lightblue:before,
.vc_row.skew-bg-lightblue:after
{
    background-color: var(--fud-lightblue-color);
}
.vc_row.skew-bg-blue:before,
.vc_row.skew-bg-blue:after
{
    background-color: var(--fud-blue-color);
}
.vc_row.skew-bg-red:before,
.vc_row.skew-bg-red:after
{
    background-color: var(--fud-red-color);
}
.vc_row.skew-bg-white:before,
.vc_row.skew-bg-white:after
{
    background-color: #fff;
}
.vc_row.skew-bg-lightgrey:before,
.vc_row.skew-bg-lightgrey:after
{
    background-color: var(--fud-lightgrey-color);
}

@media (min-width: 1500px)
{

    /* bg-breakout-right */
    .vc_row.skew-bg-blue.bg-breakout-right:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-blue.svg);
    }
    .vc_row.skew-bg-lightblue.bg-breakout-right:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-lightblue.svg);
    }
    .vc_row.skew-bg-red.bg-breakout-right:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-red.svg);
    }
    .vc_row.skew-bg-lightgrey.bg-breakout-right:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-lightgrey.svg);
    }
    .vc_row.skew-bg-white.bg-breakout-right:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-white.svg);
    }


    /* bg-breakout-left */
    .vc_row.skew-bg-blue.bg-breakout-left:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-blue.svg);
    }
    .vc_row.skew-bg-lightblue.bg-breakout-left:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-lightblue.svg);
    }
    .vc_row.skew-bg-red.bg-breakout-left:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-red.svg);
    }
    .vc_row.skew-bg-lightgrey.bg-breakout-left:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-lightgrey.svg);
    }
    .vc_row.skew-bg-white.bg-breakout-left:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-white.svg);
    }


    /* bg-breakout-right.skew-small-radius */
    .vc_row.skew-bg-blue.bg-breakout-right.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-rsmall-blue.svg);
    }
    .vc_row.skew-bg-lightblue.bg-breakout-right.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-rsmall-lightblue.svg);
    }
    .vc_row.skew-bg-red.bg-breakout-right.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-rsmall-red.svg);
    }
    .vc_row.skew-bg-lightgrey.bg-breakout-right.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-rsmall-lightgrey.svg);
    }
    .vc_row.skew-bg-white.bg-breakout-right.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-l-rsmall-white.svg);
    }


    /* bg-breakout-left.skew-small-radius */
    .vc_row.skew-bg-blue.bg-breakout-left.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-rsmall-blue.svg);
    }
    .vc_row.skew-bg-lightblue.bg-breakout-left.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-rsmall-lightblue.svg);
    }
    .vc_row.skew-bg-red.bg-breakout-left.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-rsmall-red.svg);
    }
    .vc_row.skew-bg-lightgrey.bg-breakout-left.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-rsmall-lightgrey.svg);
    }
    .vc_row.skew-bg-white.bg-breakout-left.skew-small-radius:after
    {
        background-color: transparent;
        background-image: url(../images/fud-balken-large-sect-r-rsmall-white.svg);
    }


}



/*
.vc_row.skew-bg-lightblue::before {
    content: "TEST";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 50px;
    background: red;
    z-index: 9999;
}

*/



/* ##################################### */

.mcb-wrap.bg-lighblue
{
    --local-background-color: var(--fud-lightblue-color);
}
.mcb-wrap.bg-lightgrey
{
    --local-background-color: var(--fud-lightgrey-color);
}
.mcb-wrap.bg-white
{
    --local-background-color: #fff;
}

.mcb-wrap.bg-lighblue > .mcb-wrap-inner,
.mcb-wrap.bg-lightgrey > .mcb-wrap-inner,
.mcb-wrap.bg-white > .mcb-wrap-inner
{
    background-color: var(--local-background-color);
}

.mcb-wrap.bg-breakout-left > .mcb-wrap-inner:after,
.mcb-wrap.bg-breakout-right > .mcb-wrap-inner:after
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    background-color: var(--local-background-color);
}

.mcb-wrap.bg-breakout-left > .mcb-wrap-inner:after
{
    right: 100%;
}

.mcb-wrap.bg-breakout-right > .mcb-wrap-inner:after
{
    left: 100%;
}



/* ########################################## */
/*
button, input[type=button], input[type=reset], input[type=submit], .button, .woocommerce a.added_to_cart, .wc-block-components-button:not(.is-link), .wp-block-button__link
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mfn-button-gap);
    position: relative;
    box-sizing: border-box;
    font-family: var(--mfn-button-font-family);
    font-size: var(--mfn-button-font-size);
    font-weight: var(--mfn-button-font-weight);
    font-style: var(--mfn-button-font-style);
    letter-spacing: var(--mfn-button-letter-spacing);
    line-height: 1.2;
    padding: var(--mfn-button-padding);
    border-width: var(--mfn-button-border-width);
    border-style: var(--mfn-button-border-style);
    border-radius: var(--mfn-button-border-radius);
    outline: unset;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: color var(--mfn-button-transition) ease-in-out, background-color var(--mfn-button-transition) ease-in-out, border-color var(--mfn-button-transition) ease-in-out;
}
*/



.vc_btn3:hover,
.vc_btn3:focus,
.vc_btn3:active,
.vc_btn3
{
    border-radius: 0;
    background-color: transparent;
    background-image: none;
    padding-right: 10px;

    overflow: visible;

    background-color: transparent !important;

    --mfn-button-bg-image: none;
    --mfn-button-bg-image-hover: none;
}

.vc_btn3,
.vc_btn3.vc_btn3-size-md
{
    margin: 0 30px 0 0 !important;
    padding: 10px 10px 10px 20px;
}



.vc_btn3,
.vc_btn3.bg-lightgrey
{
    --local-filter: brightness(100%);
    --local-hover-filter: brightness(95%);
    --local-background-image-left:  url(../images/fud-balken-small-lightgrey.png);
    --local-background-image-right: url(../images/fud-balken-small-sect-r-lightgrey.png);
}

.skew-bg-lightgrey .vc_btn3,
.skew-bg-lightgrey .vc_btn3.bg-lightgrey
{
    --local-filter: brightness(95%);
    --local-hover-filter: brightness(90%);

}



.vc_btn3.bg-lightblue
{
    --local-filter: brightness(100%);
    --local-hover-filter: brightness(103%);
    --local-background-image-left:  url(../images/fud-balken-small-lightblue.png);
    --local-background-image-right: url(../images/fud-balken-small-sect-r-lightblue.png);
}


.vc_btn3:before
{
    content: '';
    position: absolute;
    left:0;
    top:0;
    bottom: 0;
    width: 100%;
    background-image: var(--local-background-image-left);
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    filter: var(--local-filter);
    transition: filter var(--fud-transition-duration) ease-in-out;
    background-color: transparent !important;

}

.vc_btn3,
.vc_btn3.vc_btn3-color-grey, .vc_btn3.vc_btn3-color-grey.vc_btn3-style-flat
{
    background-color: transparent !important;    
}

.vc_btn3:before
{
}

.vc_btn3:after
{
    content: '';
    position: absolute;
    left:100%;
    top:0;
    bottom: 0;
    width: 50px;
    background-image: var(--local-background-image-right);
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1;
    filter: var(--local-filter);
    transition: filter var(--fud-transition-duration) ease-in-out;
}

.vc_btn3:hover:before,
.vc_btn3:focus:before,
.vc_btn3:active:before,
.vc_btn3:hover:after,
.vc_btn3:focus:after,
.vc_btn3:active:after
{
    filter: var(--local-hover-filter);
}


/* ----------------------------------------------------------- */
/* Anpassungen auf farbigem BG 

.skew-bg-lightgrey .button:hover:before,
.skew-bg-lightgrey .button:focus:before,
.skew-bg-lightgrey .button:active:before,
.skew-bg-lightgrey .button:hover:after,
.skew-bg-lightgrey .button:focus:after,
.skew-bg-lightgrey .button:active:after,

.bg-lightgrey .button:hover:before,
.bg-lightgrey .button:focus:before,
.bg-lightgrey .button:active:before,
.bg-lightgrey .button:hover:after,
.bg-lightgrey .button:focus:after,
.bg-lightgrey .button:active:after
{
    filter: var(--local-hover-filter-darker);
}
*/

/* =========================================
   BeTheme Button Override
   Schräge 12.5° + Radius
   ========================================= 

a.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.woocommerce a.added_to_cart,
.wc-block-components-button:not(.is-link),
.wp-block-button__link {
  --be-angle: -12.5deg;
  --be-height: 48px;
  --be-slant: calc(var(--be-height) * 0.2217);     tan(12.5°)
  --be-radius: 10px;

  position: relative;
  isolation: isolate;
  overflow: visible;

  min-height: var(--be-height);

  border-radius: var(--be-radius);

  padding-top: 0;
  padding-bottom: 0;

  padding-left: 1.2em;
  padding-right: 1.2em;

  margin-left: calc(var(--be-slant) * 0.55);
  margin-right: calc(var(--be-slant) * 0.55);

  z-index: 0;
}
*/
/* Inhalte über die Form legen
a.button > *,
button > *,
.woocommerce a.added_to_cart > *,
.wc-block-components-button:not(.is-link) > *,
.wp-block-button__link > * {
  position: relative;
  z-index: 2;
}
 */
/* Schräge Enden 

a.button::before,
a.button::after,
button::before,
button::after,
input[type="button"]::before,
input[type="button"]::after,
input[type="reset"]::before,
input[type="reset"]::after,
input[type="submit"]::before,
input[type="submit"]::after,
.woocommerce a.added_to_cart::before,
.woocommerce a.added_to_cart::after,
.wc-block-components-button:not(.is-link)::before,
.wc-block-components-button:not(.is-link)::after,
.wp-block-button__link::before,
.wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 0;
  width: var(--be-slant);
  height: 100%;

  background: inherit;
  border-radius: var(--be-radius);

  z-index: 1;
  pointer-events: none;
}
*/
/* linke Schräge 
a.button::before,
button::before,
input[type="button"]::before,
input[type="reset"]::before,
input[type="submit"]::before,
.woocommerce a.added_to_cart::before,
.wc-block-components-button:not(.is-link)::before,
.wp-block-button__link::before {
  left: calc(var(--be-slant) * -0.55);
  transform: skewX(var(--be-angle));
  transform-origin: left center;
}*/

/* rechte Schräge 
a.button::after,
button::after,
input[type="button"]::after,
input[type="reset"]::after,
input[type="submit"]::after,
.woocommerce a.added_to_cart::after,
.wc-block-components-button:not(.is-link)::after,
.wp-block-button__link::after {
  right: calc(var(--be-slant) * -0.55);
  transform: skewX(var(--be-angle));
  transform-origin: right center;
}*/

