/* ==========================================================
   marcapo custom css GLOBAL
========================================================== */

/* --------------------------------------------------
   Header
-------------------------------------------------- */
/* Header Layout Position Fix */
body .section-header > .header-fullheight.container-fluid:first-child {
    padding-top: 178px !important;
    min-height: 900px !important;
}
@media (max-width: 768px) {
  body .section-header > .header-fullheight.container-fluid:first-child {
    padding-top: 56px !important;
  }
}

/* Header H1 fix Mobile */
@media (max-width:576px){
.section-header .frame-header h1 {
  font-size: 1.75rem !important;
  line-height:1.25;
}
h1 span.subheadline {
    display: block;
    font-size: calc(var(--marcapo-h1-s) / 2);
    line-height: calc(var(--marcapo-h1-s) / 1.5);
}
}

/* Header KI-Kennzeichnung */
@media (max-width: 768px) {
  .section-header > .container-fluid.mar-ki-kennzeichnung {
    position: relative;
}

  .section-header > .container-fluid.mar-ki-kennzeichnung::after {
    content: "";
    position: absolute;

    right: clamp(16px, 2vw, 32px);
    bottom: clamp(16px, 2vw, 32px);
    width: clamp(32px, 3.5vw, 52px);
    aspect-ratio: 1;
    background: url("/fileadmin/user_upload/icons/marcapo_icons/KI_kennzeichnung.svg")
                center / contain no-repeat;
    opacity: .55;
    z-index: 50;
    pointer-events: none;
}
}

/* Class:mar-dark-overlay */
    /* Header Container */
    .section-header > .container-fluid.bg-image.darkheader.mar-dark-overlay {
    position: relative;
    overflow: hidden;
    }
    .section-header > .container-fluid.bg-image.darkheader.mar-dark-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
    pointer-events: none;
    }

    .section-header > .container-fluid.bg-image.darkheader.mar-dark-overlay > .container {
    position: relative;
    z-index: 2;
    }
/* Headline in Header Uppercase */
.section-header .frame-header h1,
.section-header .frame-header h2,
.section-header .frame-header h3 {
  text-transform: uppercase !important;
}


/* Karrier-Header Mobile Optimierung */
@media (max-width: 576px) {
    /* Background Position Fix */
    .mar-karrier-header {
    background-position: 95% 55% !important;
    }

    /* Header auf Mobile Minimun 600px */
    #page-content .mar-karrier-header,
    #page-content .mar-karrier-header > .container,
    #page-content .mar-karrier-header .grid-container {
        min-height: 600px;
    }

    /* Gap fix */
    #page-content .mar-karrier-header .grid-container {
        grid-template-rows: minmax(0, 1fr) auto !important;
        align-content: stretch;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Header Text  */
    #page-content .mar-karrier-header .mbgrid-element.bg-secondary {
        height: auto !important;
        min-height: 0 !important;
        align-self: end !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Header Text Container Padding */
    #page-content .mar-karrier-header
    .mbgrid-element.bg-secondary > .mbgrid-content {
        display: block !important;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        margin: 0 !important;
        padding: 20px !important;
        box-sizing: border-box;
    }

    /* Typo3 Gap-Einstellung entfernen */
    #page-content .mar-karrier-header .bg-secondary .frame,
    #page-content .mar-karrier-header .bg-secondary .frame-group-container,
    #page-content .mar-karrier-header .bg-secondary .frame-group-inner,
    #page-content .mar-karrier-header .bg-secondary .frame-mbgridcontainer,
    #page-content .mar-karrier-header .bg-secondary .frame-inner {
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Letzte Text Gap Fix */
    #page-content .mar-karrier-header .bg-secondary .frame-inner > :last-child {
        margin-bottom: 0 !important;
    }
}
/* --------------------------------------------------
   Formular
-------------------------------------------------- */

/* Google Map Standort Titel Style*/
  .mar-gmap-title h2 {
    font-size: 1.75rem !important;
    line-height: 1.3;
    margin-bottom: 15px;
  }
  .mar-gmap-title h3 {
    font-size: 1.2rem !important;
    line-height: 1.4;
    margin-bottom: 0;
  }

/* Text Style Hinweistext Formular */
  .invalid-feedback {
    color:var(--marcapo-orange);
    font-size: 1rem;
    font-weight: 600;
  }
  .form-element-check [id$="-checkbox-1-errors"]::before {
  font-family: "Font Awesome 7 Sharp";
  font-weight: 900;
  content: "\f060";
  color: var(--marcapo-orange);
  margin-right: 8px;
  }

/* Pfeil bei Optionfeld fix */
  .form-select {
    background-image: var(--bs-form-select-bg-img)!important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 16px 12px !important;
  }
/* Datenschutz Erklärungstext Style */
#c3208 p,
#c3208 p a {
    font-size: 16px;
    line-height: 1.0;
}
/* --------------------------------------------------
   Typografie
-------------------------------------------------- */
 /* Header H1: optimierte automatische Zeilenumbrüche */
.section-header h1,
.section-header h2,
.section-header h3 {
    text-wrap: balance;
    word-break: normal;
    overflow-wrap: normal;
}


  #page-content h1,
  #page-content h2,
  #page-content h3 {
    text-wrap: pretty;
  }

  #page-content p {
    overflow-wrap: break-word;
    word-wrap: break-word;
    text-wrap: pretty;
  }
/* --------------------------------------------------
   <br> Entfernung 
-------------------------------------------------- */
/*@media (max-width: 576px) {
  .section-header h1 br,
  .section-header h2 br,
  .section-header h3 br {
    display: none;
  }
}*/
@media (max-width: 768px) {
  .mar-no-linebreak br {
    display: none;
  }
}
 /* Headline Featurebox Fix */
@media (min-width: 768px) {
    .innercontainer_imageswitch
    .imageswitch-texts
    .frame-header
    h3
    span.headline {
        min-height: 2.6em;
    }
}
/* --------------------------------------------------
   mar-img-rounded Bild Radius fix
-------------------------------------------------- */
.mar-img-rounded .gallery-item,
.mar-img-rounded figure.image,
.mar-img-rounded picture {
  border-radius: var(--bs-border-radius) !important; 
  overflow: hidden !important;  
  display: block;
}

.mar-img-rounded img {
  border-radius: var(--bs-border-radius) !important; 
  display: block !important;     
}

/* --------------------------------------------------
   Others
-------------------------------------------------- */
  /* Verdunkelung für CTA Hintergrund */
.mar-dark-overlay {
  position: relative !important;
}

.mar-dark-overlay:not(.mar-dark-overlay .mar-dark-overlay)::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4); 
  pointer-events: none;
  z-index: 1;
}


.mar-dark-overlay > .gridbgimage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}


.mar-dark-overlay > * {
  position: relative;
  z-index: 2;
}

  /* Zahl-Animation Gap fix */
  .anim-number header.frame-header {
    margin-bottom: 0 !important;
  }

  /* Teaserbox Style Fix */
  .body-bg .teaser a {
    position: relative;
    }

  .mar-karrier-teaser-grid .teaser a .frame-inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 30px;
    background-color: rgb(0 60 92 / 90%);
}
  .body-bg.barriere .teaser a .text-center {
    background: none;
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
  }
  /* mg-gried-Container Hintergrund Fix */  
  .gridbgimage {
     background-size: cover;
    background-repeat: no-repeat !important;
  }
  /* Behebt 1px-Rendering-Lücke zwischen Container */
  #page-footer.bp-page-footer {
    Margin-top:-1px;
  }

  /* Gradient BG */
.mar-gradient-bg {
    position: relative;
    overflow: hidden;
}

.mar-gradient-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #00263D 0%,
        #518196 100%
    );
    z-index: 0;
}

.mar-gradient-bg > * {
    position: relative;
    z-index: 1;
}

/* Größere P Text */
/* Desktop */
  .text-xl p {
    font-size: 24px !important;
    line-height: 1.4 !important;
    text-wrap: balance;
}

/* Tablet */
  @media (max-width: 1024px) {
    .text-xl p {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .text-xl p {
        font-size: 18px !important;
        line-height: 1.45 !important;
    }
}

/* Bildswitch fix */
@media (max-width: 1024px) {
    a.imageswitch-text-item {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}
/* --------------------------------------------------
   Bootstrap Carousel UI Fix
-------------------------------------------------- */
/* carousel button style*/
  .carousel .carousel-control-icon {
    background-color: #003C5C;
  }
  .carousel-control-next-icon,
  .carousel-control-prev-icon {
    background-image: none !important;
    width: auto;
    height: auto;
  }

  .carousel-control-next-icon::before,
  .carousel-control-prev-icon::before {
    font-family: "Font Awesome 7 Sharp";
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    color: #f23636;
  }

  .carousel-control-next-icon::before {
    content: "\f105";
  }

  .carousel-control-prev-icon::before {
    content: "\f104";
  }
/* Carousel Indicator nicht zeigen */
  .carousel-indicators {
    display: none !important;
  }
/* --------------------------------------------------
   Bootstrap Carousel Layout Fix
-------------------------------------------------- */
.carousel-small {
    border-radius: 8px;
    overflow: hidden;
}
.carousel-small .carousel-text {
    padding: 40px 0 40px 65px;
}
/* --------------------------------------------------
   Bild-Element in Header Fade-in Fix
-------------------------------------------------- */
.section-header .headline span,
.section-header .subheadline span,
.section-header .frame-type-text p,
.section-header .frame-type-image.anim-fadein {
    opacity: 0;
}
.anims-false .section-header .headline span,
.anims-false .section-header .subheadline span,
.anims-false .section-header .frame-type-text p,
.anims-false .section-header .frame-type-image.anim-fadein {
    opacity: 1;
}
/* --------------------------------------------------
   Bild-Größe responsiv Anpassungen
-------------------------------------------------- */
/* Für Toggle-Elemente */
@media (max-width: 1023px) {
    .mar-bild-responsiv-fix .gallery-item .image img {
        display: block;
        width: 60%;
        margin-inline: auto;
    }
}
@media (max-width: 576px) {
    .mar-bild-responsiv-fix .gallery-item .image img {
        width: 90%;
    }
}
/* --------------------------------------------------
   Karrier-Seiten pre-Menü Hover Farbe Fix
-------------------------------------------------- */
.body-bg.barriere #metanavi .meta-menu > li > a:hover {
    color: var(--marcapo-orange) !important;
}
#metanavi a:not(.link-button):after {
    background: var(--marcapo-orange)!important;
}
/* =========================================================
   Barrierfrei: Teaser Slider CTA immer weiß
   ========================================================= */

.body-bg.barriere .teaser-slider .mbgrid-element.teaser .frame-inner > p,
.body-bg.barriere .teaser-slider .mbgrid-element.teaser a:hover .frame-inner > p {
    color: #fff !important;
}


/* Pfeil immer weiß */
.body-bg.barriere .teaser-slider .mbgrid-element.teaser .frame-inner > p::before,
.body-bg.barriere .teaser-slider .mbgrid-element.teaser a:hover .frame-inner > p::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 13L16.17 13L10.58 18.59L12 20L20 12L12 4L10.59 5.41L16.17 11L4 11L4 13Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}


/* Kreis immer weiß */
.body-bg.barriere .teaser-slider .mbgrid-element.teaser .frame-inner > p::after,
.body-bg.barriere .teaser-slider .mbgrid-element.teaser a:hover .frame-inner > p::after {
    border-color: #fff !important;
}
/* =========================================================
   Einzelnes Zitat: Navigationspunkte ausblenden
   ========================================================= */
.mar-einzelnes-zitat .slick-dots {
    display: none !important;
}