/* ==========================================================================
   # BOF layout.css
   --------------------------------------------------------------------------
   # StyleSheet: Layout
   # Datum: 2022-06-30
   # Version: 1.0.0
   # Autor: Patrick Dietze | MAE Systems GmbH
   ========================================================================== */


/* ==========================================================================
   # Info - Defaults
   --------------------------------------------------------------------------
   # Media-Queries
   # - Standard-Media-Queries, die wir hier nutzen
   # - mobile-first
   #
   # Default:            XS ab    0px  @media screen () 
   # Small:              SM ab  576px  @media screen and (min-width: 36em)
   # Medium:             MD ab  768px  @media screen and (min-width: 48em)
   # Large:              LG ab  992px  @media screen and (min-width: 62em)
   # Extra large:        XL ab 1200px  @media screen and (min-width: 75em)
   # Extra extra large: XXL ab 1408px  @media screen and (min-width: 88em)
   #
   #
   # BULMA:
   # mobile:      up to 768px  48em
   # tablet:      from  769px
   # desktop:     from 1024px  64em
   # widescreen:  from 1216px  76em
   # fullhd:      from 1408px  88em
   ========================================================================== */


/* ==========================================================================
   Basis-Einstellungen
   ========================================================================== */


/* Basis-Variablen
   ========================================================================== 
   #137ecb  rgb(19, 126, 203)   hsl(205, 83%, 44%)    blau norm
   #12527e  rgb(18, 82, 126)    hsl(204, 75%, 28%)    blau dark
   #053c4b  rgb(5, 60, 75)      hsl(193, 88%, 16%)    blaugrau
   #bc1f1a  rgb(188, 31, 26)    hsl(2, 76%, 42%)      rot
   #feef00  rgb(254, 239, 0)    hsl(56, 100%, 50%)    gelb
   #d9e2e4  rgb(217, 226, 228)  hsl(191, 17%, 87%)    grau
   #f5f5f5                                            Hover-Color
   #fafafa                                            Background-Color (odd)
   --------------------------------------------------------------------------
*/

:root {
  --mae-custom-color-one: #137ecb;
  --mae-custom-color-one-hover: hsl(0, 0%, 10%);
  --mae-custom-color-one-activ: hsl(0, 0%, 8%);
  --mae-custom-color-one-focus: rgba(34, 34, 34, 0.25);
  
  --mae-custom-color-two: #12527e;
  --mae-custom-color-two-hover: hsl(204, 75%, 34%);
  --mae-custom-color-two-activ: hsl(204, 75%, 40%);
  --mae-custom-color-two-focus: rgba(18, 82, 126, 0.25);
  
  --mae-custom-color-three: #053c4b;
  
  --mae-custom-color-four: #bc1f1a;
  --mae-custom-color-four-hover: hsl(2, 76%, 48%);
  
  --mae-custom-color-five: #feef00;
  
  --mae-custom-color-six: #d9e2e4;
  
  --mae-custom-color-one-light: #feecf0;        /* alter WErt - anpassen! */
  --mae-custom-color-one-light-hover: #fde0e6;  /* alter WErt - anpassen! */
  --mae-custom-color-one-light-activ: #fcd4dc;  /* alter WErt - anpassen! */
  --mae-custom-color-one-light-focus: #fcd4dc;  /* alter WErt - anpassen! */
  
  --mae-custom-color-one-dark: #cc0f35;         /* alter WErt - anpassen! */
  --mae-custom-color-one-dark-hover: #cc0f35;   /* alter WErt - anpassen! */
  --mae-custom-color-one-dark-activ: #cc0f35;   /* alter WErt - anpassen! */
  --mae-custom-color-one-dark-focus: #ee2049;   /* alter WErt - anpassen! */
  
 
  --mae-custom-color-one-hero-bold-start: #fa0a62;  /* alter WErt - anpassen! */
  --mae-custom-color-one-hero-bold-end: #f7595f;    /* alter WErt - anpassen! */
  
  
  --swiper-theme-color: #137ecb;

}


/* Standards
   ========================================================================== */

html {
    color: var(--mae-custom-color-three);
}


body, button, input, optgroup, select, textarea {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    color: #026174;
}

strong {
    color: #026174;
}

/* helper-Klassen
   ========================================================================== */

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}

.icon-svg {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
}

.icon-svg svg {
    fill: currentColor;
}

a,
a:hover {
    color: #12527e;
}

a:hover {
    color: #137ecb;
}


input[type="date"] {
    display:block;
}


/* default-Klassen
   ========================================================================== */

@media screen {
    
    /* Wrapper, der alles umschliesst */
    .wrapper-outer {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-width: 320px;
        margin: 0 auto;
        position: relative;
    }
  
}


.page-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #fff; 
    z-index: 50;
}


.page-logo-link {
    padding: 0.5rem 0 0.5rem 1rem;
    display: block;
    text-align: left;
}

.page-logo {
    max-height: 100px;
    width: 300px;
    display: block;
        margin-right: auto;
}

.navbar-burger {
    background-color: var(--mae-custom-color-one);
    height: 100%;
    width: 100%;
    max-width: 120px;
    color: #fff;
}
.navbar-burger:hover {
    background-color: var(--mae-custom-color-one);
    color: #fff;
}

.topnav {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.page-nav,
.navbar > .container {
    min-height: 0;
}

.navbar-start {
    background-color: #333333;
    background-color: var(--mae-custom-color-one);
    color: #fff;
}
.navbar-end {
    background-color: #333333;
    background-color: var(--mae-custom-color-four);
    color: #fff;
    border-left: 2rem solid var(--mae-custom-color-four);
}

.navbar-item,
.navbar-link,
.navbar-title-item {
    color: #fff;
}

.navbar-title-item:hover {
    color: var(--mae-custom-color-one);
}

.navbar-item.active {
    background-color: var(--mae-custom-color-two);
}

.navbar-link:hover,
.navbar-item:hover,
a.navbar-item:hover {
    background-color: var(--mae-custom-color-two);
    color: #fff;
}

.navbar-item.mnitem-48 {
    font-style: italic;
    font-weight: bold;
}

.content table td, 
.content table th {
    border-color: #fff;
}


.btn-call {
    padding: 0;
}
.btn-call img {
    max-height: none;
    display: block;
}

.page-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.page-main-section-intro {
    overflow: hidden;
}

.page-main-section-menu {
    background-color: var(--mae-custom-color-six);
}

.page-main-section-telefon {
    text-align: center;
}
.page-main-section-telefon a {
    display: inline-block;
    margin-top: 1rem;
}

.page-main-section-content {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-main-section-content2 {
    background-color: var(--mae-custom-color-six);
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.page-main-section-content4 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}


.page-main-section-bottom {
    background-color: var(--mae-custom-color-one);
    color: #fff;
    margin-top: 4rem;
    margin-bottom: 2rem;
}

.page-main-section-telefon,
.page-main-section-slogan,
.page-main-section-content,
.page-main-section-content2,
.page-main-section-content3,
.page-main-section-content4,
.page-main-section-bottom {
    padding-left: 1rem;
    padding-right: 1rem;
}




.banderole-flex-left {
    display: none;
}
.banderole-flex-right {
    background-color: yellow;
}

.banderole-flex a {
             width: 100%; 
     height: 100%; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
        
    }

.banderole-flex-right-txt {
    text-align: center;
}
.banderole-flex-right-txt1 {
    font-size: 3rem;
    display: inline-block;
    margin: 3rem 2rem 0;
}
.banderole-flex-right-txt2 {
    font-size: 1.5rem;
    margin: 1rem;
    display: inline-block;
}


.swiper img {
    width: 100%; 
}


.page-footer {
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 6rem;
}


.page-footer .btn-call{
    
}
.page-footer .btn-call > img {
    margin: 0 auto;
}


.fixed-button {
    display: block;
    bottom: 5vh;
    right: 0;
    color: #fff;
    background-color: #333333;
    background-color: var(--mae-custom-color-three);
    width: 4rem;
    position: fixed;
    z-index: 1000;
    padding: 0.75rem;
    border-bottom-left-radius: 0.5rem;
    font-size: 0.75rem;
    transition: transform .4s;
}

.fixed-button:hover {
    transform: scale(1.06);
}

.fixed-button .icon-svg {
    margin-right: 0.25rem;
}

.fixed-button-text {
    margin-bottom: 0.25rem;
    display: flex;
}

.fixed-button-text span.info,
.fixed-button-link span {
    display: none;
}

.fixed-button-link {
    color: var(--mae-custom-color-five);
}
.fixed-button-link:hover {
    color: var(--mae-custom-color-five);
}

.frame-section-menu {
    background-color: var(--mae-custom-color-six);
    padding: 3rem 1rem;
}


.page-title {
    color: #fff;
    background-color: var(--mae-custom-color-one);
    display: block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    position: relative;
    font-style: normal;
    
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.page-title:after {
    color: #fff;
    content: '>';
    position: absolute;
    font-weight: bold;
    right: 0.5rem; 
    font-size: 1.25rem;
    line-height: 100%;
}

figure picture img.image-embed-item,
.image-embed-item {
    display: block;
}

.swiper-v02 figure:hover .page-title,
a:hover .page-title {
    background-color: var(--mae-custom-color-two);
}


.frame-layout-200,
.frame-layout-210,
.frame-layout-200 .title,
.frame-layout-210 .title {
    color: #fff;
}

.frame-layout-200 {
    background-color: var(--mae-custom-color-one);
    color: #fff;
    padding: 2rem;
}

.frame-layout-200 a {
    color: #fff;
}

.frame-layout-210 {
    background-color: var(--mae-custom-color-two);
    color: #fff;
    padding: 2rem;
}


.frame-layout-120 header {
    position: absolute;
    display: inline-block;
    top: -2rem;
    border: 1px solid var(--mae-custom-color-one);
    background-color: #fff;
    padding: 1rem;
    white-space: nowrap;
}
.frame-layout-120 header h2 {
    margin: 0;
    padding: 0;
    color: var(--mae-custom-color-one);
    font-size: 1.25rem;
}

.frame-layout-220 {
    display: flex;
    
}

.frame-layout-220 .left-icon img {
    width: 70px;
    margin-right: 1.5rem;
    color: #fff;
    
}

.cunds {
    z-index: 1;
}


.page-header-columns {
    margin-left: 0;
    margin-right: 0;
}
.page-header-columns > div {
    padding: 0.75rem 0;
}



.popup {
    position: fixed;
    top: 1rem;
    right: 1rem;
    left: 1rem;
    bottom: 1rem;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup > div {
    max-width: 800px;
    min-width: 300px;
    border: 1px solid #ccc;
    padding: 0.5rem;
    background-color: #fff;
    /*box-shadow: 1px 1px 4px 1px var(--mae-custom-color-three);*/
    z-index: 100;
    margin: 1.5rem auto;
    position: relative;
    width: 300px;
}

.popup > div:hover {
    border-color: #000;
    background-color: #fff;
}

.popup .popup-close {
    display: block;
    position: absolute;
    left: 0.5rem; 
    top: 0.5rem; 
    cursor: pointer;
    color: #fff;
    padding: 0.25rem;
}
.popup .popup-close:hover {
    color: #000;
}


.frame-layout-300 {
    background-color: var(--mae-custom-color-one);
    color: #fff;
    padding: 1.5rem 2rem;
    hyphens: auto;
}

.frame-layout-300 .ce-textpic {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.frame-layout-300 .ce-intext.ce-right .ce-gallery {
    order: 2;
    margin: 0;
    margin-top: 1rem;
}

.frame-layout-300 .ce-bodytext {
    order: 1;
    
}

.frame-layout-300 img {
    max-height: 5rem;
}

.frame-layout-350 {
    background-color: var(--mae-custom-color-two);
    color: #fff;
    padding: 1.5rem 2rem;
    hyphens: auto;
}

.frame-layout-360 {
    background-color: var(--mae-custom-color-one);
    color: #fff;
}


/* ==========================================================================
   # Accordion-STYLE
   # inspiriert von https://codepen.io/redesigned/pen/wvoEvqG
   ========================================================================== */


/* # The Rotating Marker # */
details summary::-webkit-details-marker { display: none; }



summary::after {
  content: "\00BB";
    color: var(--mae-custom-color-one);
    display: flex;
    font-size: 1.6rem;
    font-weight: bold;
    position: relative;
    left: -0.75rem;
    transform: rotate(0);
    transform-origin: center;
    transition: 0.5s transform ease;
    line-height: 1;
    height: 2rem;
    width: 2rem;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 50%;
}
details[open] > summary:after {
  transform: rotate(90deg);
  transition: 0.5s transform ease;
}

/* # The Sliding Summary # */
details { overflow: hidden; }
details summary {
  position: relative;
  z-index: 10;
}
@keyframes details-show {
  from {
    margin-bottom: -1%;
    opacity: 0;
    transform: translateY(-100%);
  }
}
details > *:not(summary) {
  /* animation: details-show 0.5s ease-in-out; */
  position: relative;
  z-index: 1;
  transition: all 0.3s ease-in-out;
  color: transparent;
  overflow: hidden;
}
details[open] > *:not(summary) { color: inherit; }



/* # Just Some Pretty Styles # */
details {
  max-width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
summary {
  border: 1px solid transparent;
  outline: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--szr-default-bg-color);
  color: var(--szr-custom-color-one);
  position: relative;
  cursor: pointer;
  border-bottom: 1px solid #fff;
}

summary>div {
  flex: 1;
}

summary:hover {
  color: var(--mae-custom-color-one);
}
summary:hover strong,
details[open] summary strong,
summary:hover::after,
details[open] summary::after {
  color: var(--mae-custom-color-one);
}

details .columns.is-multiline {
    flex-wrap: nowrap;
    margin: 0;
}

.content summary h2,
.content summary h3,
.content summary h4 {
  font-size: 1.3rem;
  margin-bottom: 0;
  margin-top: 0;
  display: block;
  color: #fff;
  padding: 1rem;
}


.content ul {
    margin-top: 0;
}

form legend {
    /* display: none; */
    margin-bottom: 1rem;
    font-weight: bold;
}

.multi-steps {
    display: none;
}

form .c-stepper {
    display: flex;
    margin: 0 2rem 0 0;
    padding: 0;
    list-style-position: inside;
}
form .c-stepper li {
    
    margin: 0;
}

form .c-stepper li::marker {
    background-color: red;
}
form .c-stepper li+li {
    margin: 0;
}



form.form-bewerbung .el-ident-message {
    display: none;
}


.block-karriere {
    color: #fff;
    max-width: 30rem;
    text-align: center;
    font-size: 0.25rem;
}

.block-karriere hr {
    background-color: #fff;
    margin-top: 0;
    margin-bottom: 1.5em;
}


.size-01 {
    font-size: 6em;
    line-height: 1.2;
}

.size-02 {
    font-size: 4em;
    line-height: 1;
}

.size-03 {
    font-size: 1.5rem;
    color: #363636;
}


.navbar-menu {
    font-size: 1.5rem;
}
.navbar-item,
.navbar-link {
    line-height: 1;
}


.frame-layout-310 {
    background-color: var(--mae-custom-color-six);
    padding: 1.5rem 2rem;
}


.btn-color-one {
    display: block;
    color:#fff;
    background-color: var(--mae-custom-color-one);
    padding: 1rem 2.5rem 1rem 1.5rem;
    font-size: 1rem;
    position: relative;
}

a.btn-color-one:hover {
    color: #fff;
    background-color: var(--mae-custom-color-two);
}


.btn-color-one:after {
    color: #fff;
    content: '>';
    position: absolute;
    font-weight: bold;
    right: 1.5rem;
    font-size: 1.25rem;
    line-height: 100%;
}



.btn-color-four {
    display: block;
    color:#fff;
    background-color: var(--mae-custom-color-four);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    position: relative;
}

a.btn-color-four:hover {
    color: #fff;
    background-color: var(--mae-custom-color-two);
}


.btn-color-four:after {
    color: #fff;
    content: '>';
    position: absolute;
    font-weight: bold;
    right: 0.75rem;
    font-size: 1.25rem;
    line-height: 100%;
}


ul.list-style-flex {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0;
    list-style: none;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    flex-direction: column;
}

ul.list-style-flex li {
    width: 100%;
    padding: 0.5rem 2.5rem;
}
ul.list-style-flex li+li {
    margin: 0;
}

li .sub-info {
    display: none;
    margin-top: 0.75rem;
    font-size: 0.875rem;
}

.centered-in-mobile {
    text-align: center;
}

.frame-layout-320 {
    font-size: 0.75rem;
}

.frame-layout-320 .ce-textpic {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.frame-layout-320 .ce-intext.ce-left .ce-gallery {
    order: 1;
    margin: 0;
    margin-bottom: 1rem;
}

.frame-layout-320 .ce-bodytext {
    order: 2;
    
}
.frame-layout-320 .ce-bodytext h1 {
    text-align: center;
    margin-bottom: 0;
    
}

.frame-layout-320 .ce-bodytext h1 span {
    font-weight: normal;
    display: inline-block;
    margin-top: 0.5rem;
}


.frame-layout-340 .ce-textpic {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.frame-layout-340 h2 {
    margin-bottom: 0;
    margin-left: 0.5rem;
}


a.btn-color-four-one {
    display: inline-block;
    color:#fff;
    background-color: var(--mae-custom-color-four);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    position: relative;
}

a.btn-color-four-one:hover {
    color: #fff;
    background-color: var(--mae-custom-color-two);
}

.video[data-type="external"] .video-embed {
    padding-top: 56.25%;
    overflow: hidden
}

.video[data-type="external"] .video-embed>iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

.video-embed {
    left: 0;
    position: relative;
    top: 0
}

.video-embed .video-embed-item {
    max-width: 100%
}

.video-embed .video-preview {
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    transition: opacity 500ms
}

.video-embed .video-defer {
    opacity: 0;
    transition: all 500ms
}

.video-embed.loaded .video-preview {
    display: none
}

.video-embed.loaded .video-defer {
    opacity: 1
}

[data-click-previewimage="1"] .video-embed .video-preview,[data-click-previewimage="1"] .video-embed.loaded .video-preview {
    display: block;
    opacity: 1
}

[data-click-previewimage="1"] .video-embed .video-preview.hide,[data-click-previewimage="1"] .video-embed.loaded .video-preview.hide {
    opacity: 0;
    pointer-events: none
}


.frame-layout-1 .ce-row {
        display: flex;
    }
    
    .frame-layout-1 .ce-column {
        flex: 1 1 0px;
        width: 100%;
    }
    
    .frame-layout-1 .ce-outer,
    .frame-layout-1 .ce-inner {
        width: 100%;
    }
    
    figure.video {
        width: 100%;
        max-width: 960px;
        margin: auto;
    }




@media screen and (max-width: 47em) {
    
    .frame-layout-330 table.contenttable tr {
        display: flex;
        flex-direction: column;
        padding-bottom: 0.5rem;
    }

    .frame-layout-330 table.contenttable td {
        border: none;
        padding-left: 0;
        padding-right: 0;
    }

    .frame-layout-330 table.contenttable td + td {
        border: none;
        padding-top: 0;
    }
    
}
@media screen and (min-width: 48em) {
    
    .page-header {
        position: static;
    }
    
    .page-nav {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    
    
    
    .page-main-section-intro {
        order: -1;
    }
    
    
    .fixed-button {
        top: 30vh;
        bottom: auto;
        width: 10rem;
    }
    
    .fixed-button-text span.info,
    .fixed-button-link span {
        display: inline;
    }
    
    
    .banderole-flex {
        display: flex;
        aspect-ratio: 8 / 3;
        overflow: hidden;
        
    }
    .banderole-flex-left {
        display: flex;
        width: 60%;
        justify-content: center;
        align-items: center;
    }
    
    .banderole-flex-right {
        display: flex;
        width: 40%;
        justify-content: center;
        align-items: center;
    }
    .banderole-flex img {
        object-fit: cover;
    }
    
    
    
    
     
    
    
    .cunds > div {
        max-width: 66.6666667%;
        padding-right: 2rem;
    }

    .relative {
        position: relative;
        min-height: 600px;
    }
    
    .page-main-section-sidebar {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
    }
    .page-main-section-sidebar > .container  {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .page-main-section-sidebar > .container > div {
            width: 33.333333%;
    }
    
    
    .popup > div {
        width: auto;
    }
    
    .frame-layout-300 {
        padding: 2rem;
    }
    
    
    .frame-layout-300 .ce-textpic {
        flex-direction: row;
    }

    .frame-layout-300 .ce-intext.ce-right .ce-gallery {
        margin-top: 0;
    }

    .frame-layout-300 img {
        max-height: none;
    }


    .block-karriere {
        text-align: left;
        font-size: 1rem;
        margin-right: 2rem;
    }
    
    .size-01 {
        font-size: 3.5em;
    }

    .size-02 {
        font-size: 2.5em;
    }
    
    
    ul.list-style-flex {
        flex-direction: row;
    }

    ul.list-style-flex li {
        width: 33.333333%;
        padding: 0.75rem;
    }
    
    
    li .sub-info {
        display: inline-block;
    }
    
    .centered-in-mobile {
        text-align: left;
        font-size: 1.25rem;
        
    }
    
    .btn-color-four {
        font-size: 1.25rem;
    }

    .btn-color-four:after {
        font-size: 1.75rem;
    }
    
    .frame-layout-320 {
        font-size: 1rem;
    }
    
    .frame-layout-320 .ce-textpic {
        flex-direction: row;
    }
    
    .frame-layout-320 .ce-bodytext h1 {
        text-align: left;
        margin-left: 2rem;
    }
}




/* UE */

.line-special {
  overflow: hidden;
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;
}

.line-special span {
  position: relative;
  padding: 0 1rem;
  display: inline-block;
  max-width: 80%;
  font-size: 1.25rem;
}

.line-special span:before,
.line-special span:after {
  content: "";
  position: absolute;
  width: 10000px;
  height: 2px;
  top: 90%;
  border-bottom: 2px solid #12527e;
}

.line-special span:before {
  left: -10000px;
}

.line-special span:after {
  left: 100%;
}

.bookmark-icon {
    display: block;
    margin: 0 auto;
    margin-bottom: 1rem;
}



h2.subtitle, 
h3.subtitle,
h4.subtitle,
h5.subtitle,
h6.subtitle {
    font-weight: normal;
}

h2.subtitle {
    font-size: 1.5rem;
}



ul.columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
    padding: 0;
}

.frame-layout-200 h3,
.frame-layout-210 h3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.frame-layout-210 ul {
    margin-top: -1rem;
}
.frame-layout-210 li+li {
    margin-top: 0.5rem;
}


/* default styles */
.ce-align-left      { text-align: left; }
.ce-align-center    { text-align: center; }
.ce-align-right     { text-align: right; }

/* Headline */
.ce-headline-left   { text-align: left; }
.ce-headline-center { text-align: center; }
.ce-headline-right  { text-align: right; }

/* Space */
.frame-space-before-extra-small { margin-top:    1em; }
.frame-space-before-small       { margin-top:    2em; }
.frame-space-before-medium      { margin-top:    3em; }
.frame-space-before-large       { margin-top:    4em; }
.frame-space-before-extra-large { margin-top:    5em; }
.frame-space-after-extra-small  { margin-bottom: 1em; }
.frame-space-after-small        { margin-bottom: 2em; }
.frame-space-after-medium       { margin-bottom: 3em; }
.frame-space-after-large        { margin-bottom: 4em; }
.frame-space-after-extra-large  { margin-bottom: 5em; }



.section-menu figure {
    margin-left: 0;
    margin-right: 0;
    position: relative;
}
.section-menu  figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.section-menu li.column {
    transition: transform .2s;
}

.section-menu li.column:hover {
    transform: scale(1.05);
}


.section-menu li.ibuk-flex,
.section-menu li.ibuk-flex a {
    display: flex;
}

.ibuk {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: var(--mae-custom-color-two);
}
.ibuk-logo {
    background-color: var(--mae-custom-color-two);
    padding: 1.5rem;
    
}

.ibuk-logo img{
    display: block;
}

.ue.line-special {
    width: 100%;
    text-align: center;
}

.ue.line-special span {
    color: var(--mae-custom-color-two);
}

.ue.line-special span:before,
.ue.line-special span:after {
  border-bottom: 4px solid var(--mae-custom-color-two);
}


.ibuk p {
    margin: 0 4rem;
}

.ibuk-beratung {
    font-weight: bold;
    border-bottom: 4px solid var(--mae-custom-color-two);
    display: block;
    text-align: center;
    padding: 0.75rem 1.5rem;
    position: relative;
    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%; 
}

.ibuk-beratung:after {
    color: var(--mae-custom-color-two);
    content: '>';
    position: absolute;
    font-weight: bold;
    right: 0.5rem; 
    font-size: 1.25rem;
    line-height: 100%;
}



.austausch .austausch-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0;
    padding-top: 1.5rem;
    align-items: center;
    border-bottom: 1px solid var(--mae-custom-color-six);
    
}
.austausch .austausch-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    padding-top: 1.5rem;
    align-items: center;
    
}
.austausch .austausch-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 0;
    padding-top: 1.5rem;
}

.austausch-header span {
    display: block;
    text-align: center;
    line-height: 1.25;
}

.teil01 {
    color: var(--mae-custom-color-four);
    font-size: 1.75rem;
}
.teil02 {
    color: var(--mae-custom-color-two);
    font-size: 1.75rem;
}
.teil03 {
    color: var(--mae-custom-color-two);
    font-weight: normal;
    font-size: 1.25rem;
}


.austausch-content p {
    margin-bottom: 2rem;
    font-weight: bold;
}




a.navbar-item {
    display: flex;
}
.navbar-item .icon {
    width: 2rem;
}
.navbar-item .icon svg {
    width: 100%;
    height: 100%;
}

.navbar-item .icon svg.bi-house-fill {
    display: none;
}
.navbar-item .icon svg.bi-house {
    display: block;
}
.navbar-item:hover .icon svg.bi-house-fill {
    display: block;
}
.navbar-item:hover .icon svg.bi-house {
    display: none;
}


/* swiper */


.swiper-v01 {
    height: 100%;
    width: 100%;
    padding-bottom: 3rem;
}

.swiper figure {
    margin-left: 0;
    margin-right: 0;
}


.swiper-v01 figcaption {
    position: relative;
    bottom: 0;
    top:0;
    max-width: 100vw;
}

.swiper-v01 figcaption div {
    background-color: var(--mae-custom-color-two);
    padding: 2rem;
    color: #fff;
    text-align: center;
    font-style: normal;
}

.swiper-v01 figcaption div h3 {
    color: #fff;
}

.swiper-v02 figcaption div {
    background: var(--mae-custom-color-one);
    color: #fff;
    text-align: center;
    padding: 0.75rem 1.5rem;
    position: relative;
}

.swiper-v02 figcaption div:after {
    color: #fff;
    content: '>';
    position: absolute;
    font-weight: bold;
    right: 0.5rem; 
    font-size: 1.25rem;
    line-height: 100%;
    top: 0.875rem;
}

.swiper-v02 figcaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}



.swiper-v03 figure {
    margin: 1rem auto;
    aspect-ratio: 16 / 9;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    max-width: 200px;
    max-height: 100px;
}



.swiper .swiper-button-prev, 
.swiper .swiper-button-next {
  opacity: 0;
  transition: opacity .3s;
  color: #fff;
}
.swiper:hover .swiper-button-prev,
.swiper:hover .swiper-button-next {
  opacity: 1;
}


.swiper .swiper-pagination {
    bottom: 0.25rem;
}

.swiper-pagination-bullet {
    background-image: url("/typo3conf/ext/kd0015sp/Resources/Public/Images/Slider_Tropfen_inaktiv.svg");
    width: 1.5rem;
    height: 1.5rem;
    background-color: transparent;
    opacity: 1;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-image: url("/typo3conf/ext/kd0015sp/Resources/Public/Images/Slider_Tropfen_aktiv.svg");
}


.content ul.columns li+li {
    margin-top: 0;
}



.fleft,
.fright,
.fwhleft {
    display: none;
}


.form-navigation div.btn-group {
    display: flex;
    justify-content: flex-end;
}



.button.is-primary {
    background-color: #137ecb;
}
.button.is-primary:hover {
    background-color: #12527e;
}

.button.is-secondary {
    background-color: var(--mae-custom-color-four);
    color: #fff;
}
.button.is-secondary:hover {
    background-color: var(--mae-custom-color-four-hover);
}


.is-checkradio a {
    text-decoration: underline;
}


.container-rpc {
    background-color: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 1px solid #dbdbdb;
}
.container-rpc  .repeatable-container {
    padding: 0;
}

.btn-cancel {
    margin-right: 1rem;
}

.fieldset {
    margin: 1rem 0;
}

.control-label {
    margin-bottom: 0.25rem;
    display: inline-block;
}

.iframe-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}

/* Then style the iframe to fit in the container div with full height and width */
.iframe-wrapper > iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 48em) {
    .page-main-section-telefon + .page-main-section-slogan .frame-space-before-large {
        margin-top: 1rem;
    }
}



@media screen and (min-width: 48em) {
    
    /*
    .swiper-v01 {
        overflow: visible;
    }
    */
    
    .swiper-v01 figcaption {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 0;
    }
    
    .swiper-v01 figcaption div {
        margin: 1rem 0 3rem;
        background-color: transparent;
        background-image: linear-gradient(to right, transparent 0%, var(--mae-custom-color-two) 30%);
        padding: 2rem 2rem 2rem 4rem;
        text-align: left;
        width: 360px;
        min-height: 160px;
    }
    
    
    .austausch {
        border-bottom: 1px solid var(--mae-custom-color-six);
    }
    
    .austausch .austausch-header {
        align-items: flex-start;
    }
    
    .austausch-header span {
        text-align: left;
    }
    
    
    .footerwrapper {
        
        position: relative;
        
    }
    .footerwrapper .container {
        background-color: #fafafa;
        z-index: 1;
        min-height: 2rem;
    }
    .fleft {
        display: block;
        width: 50%;
        position: absolute;
        height: 100%;
        background: red;
        top:0;
        left: 0;
        background-image: url('/typo3conf/ext/kd0015sp/Resources/Public/Images/Wasserhanhn_2.svg');
        background-repeat: repeat-x;
    }
    .fright {
        display: block;
        width: 50%;
        position: absolute;
        height: 52%;
        background: green;
        top: 8px;
        right: 0;
        background-image: url('/typo3conf/ext/kd0015sp/Resources/Public/Images/Wasserhanhn_2.svg');
        background-repeat: repeat-x;
    }
    
    .fwhleft {
        display: block;
        position: absolute;
        left: -170px;
        top: -60px;
        width: 317px;
    }
   .metanav {
        position: relative;
    left: 163px;
    top: 6px;

    }
    
    .page-footer .btn-call{
        position: absolute;
        bottom: -1rem;
        right: -1rem;
        border-right: 1rem solid #fff;
    }
    
    .page-main-section-telefon {
        display: none;
    }
}



.teamfoto01 {
    max-width: none;
    object-fit: cover;
    width: 100%;
    display: none;
}
.teamfoto02 {
    max-width: none;
    object-fit: cover;
    width: 100%;
    display: block;
}


@media screen and (min-width: 1024px) {
    .container>.navbar .navbar-menu, 
    .navbar>.container .navbar-menu {
        margin-right: 0; 
    }
    
    a.navbar-link {
      padding-left: 2rem;
      padding-right: 2rem;
    }
    
    .navbar-menu {
        background-color: var(--mae-custom-color-one);
    }
    
    .navbar-end {
        border-left: 1.5rem solid #fff;
    }
    
    
    .teamfoto01 {
        display: block;
    }
    .teamfoto02 {
        display: none;
    }
}


/* ==========================================================================
   # EOF layout.css
   ========================================================================== */