/* FONTS
---------------------------------------------------*/
/* cabin-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/cabin-v27-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/cabin-v27-latin-italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/cabin-v27-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/cabin-v27-latin-500italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-600 - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/cabin-v27-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-600italic - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: italic;
  font-weight: 600;
  src: url("../fonts/cabin-v27-latin-600italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-700 - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/cabin-v27-latin-700.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* cabin-700italic - latin */
@font-face {
  font-display: swap;
  font-family: "Cabin";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/cabin-v27-latin-700italic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* GLOBAL STYLES
-------------------------------------------------- */

html {
  scroll-behavior: smooth;
}


body {
  /*padding-top: 3rem;*/
  padding-bottom: 0;
  color: rgb(var(--bs-tertiary-color-rgb));
  font-family: "Cabin", "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
  background-color: #f8f8f8;
}

main {
  margin-top: 4rem;
}

a{
  color: #0077b3;
}

/* NAVI MAIN-TOP & FOOTER
------------------------------------*/
.container-fluid {
  /*max-width: 1240px;*/
  max-width: 1280px;
}

.kaut-navi {
  margin-left: auto !important;
  margin-right: 0px;
  flex: content;
}

.nav-item {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.nav-link {
  margin-right: 0.5em;
}

.sm-left {
  /*Abstand nach rechts zu Social-Media-Icon oder zu Container-Kante*/
  margin-right: 0;
  padding-right: 0 !important;
}

.navbar-text a:any-link {
  text-decoration: none;
  color: var(--bs-navbar-color);
}

.dropdown-item {
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.5em 1.5em;
}

.dropdown-item:hover {
  /*background-color: #3c3c3c;*/
  background-color: #212529;
}

.dropdown-item:focus {
  /*background-color: #3c3c3c;*/
  background-color: #212529;
}

.dropdown-item:active {
  /*background-color: #3c3c3c !important;*/
  background-color: #212529 !important;
  color: #ffffff;
}

.dropdown-menu {
  /*border-radius: 0em 0em 1em 1em;*/
  border: none;
  /*background: #212529;*/
  background: #3e3e40;
  padding-bottom: 1rem;
}


.kaut-footer {
  bottom: 0px;
  position: sticky;
}

.social-icon {
  margin-left: 8px;
  margin-right: 8px;
}

.social {
  min-width: 29px;
  max-width: 29px;
}

.header-logo {
  max-width: 130px;
}

/*.fixed-top  {
  position:-webkit-sticky;
}*/

/*--- Hamburger-menu --*/

/* Größe/Grundstil des Icons (optional, anpassbar) */
.navbar-toggler { 
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: none; /* optional dunkler Hintergrund */
}

.navbar-toggler .navbar-toggler-icon {
  width: 2em;
  height: 2em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* Standard: Hamburger (weiße Linien) */
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Wenn die Collapse offen ist (.show): Icon als X anzeigen */
body:has(#navbarCollapse.show) 
  .navbar-toggler[data-bs-target="#navbarCollapse"] .navbar-toggler-icon {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6 L24 24 M24 6 L6 24'/%3e%3c/svg%3e");
    border: none;
    
}


.navbar-toggler:focus {
  box-shadow: none !important;
}

/* (optional) leichtes Hover-Feedback */
.navbar-toggler:hover .navbar-toggler-icon { filter: brightness(1.05); }




/* SLIDER-CAROUSEL
  -------------------------------------------------- */

#myCarousel {
  display: none;
}

@media (min-width: 768px) {
  #myCarousel {
    display: block;
  }
}

.carousel {
  max-width: 1920px;
  margin-bottom: 0rem;
  position: relative;
  display: block;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

.img-fit img {
  margin-left: auto;
  margin-right: auto;
}
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
  left: 18.5%;
}

.carousel-item {
  height: 32rem;
}

.carousel-indicators {
  z-index: 12;
  top: 28rem;
  bottom: auto;
}

.slider-logo {
  max-width: 200px;
  top: 2em;
  margin-bottom: 4em;
}

.btn-outline-dark {
  border-radius: 1.5em;
  border: 1px solid #ffffff;
  color: #ffffff;
}

.btn-outline-secondary {
  border-radius: 1.5em;
}

.carousel-caption-special {
  font-weight: 600;
  color: rgb(215, 239, 253);
  font-size: 1em;
}

/* CHILLVENTA HINWEIS MOBILE | Gegenstück zu #myCarousel
  -------------------------------------------------- */

.chillventa-mobile {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 26rem;
  overflow: hidden;
  color: #ffffff;
  background-color: #3c3c3c;
}

.chillventa-mobile-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 88% center; /* Messestand mit Kaut-Logo im Bild */
}

.chillventa-mobile-text {
  position: relative;
  width: 100%;
  padding: 7rem 2em 1.5em 2em;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 50%);
}

.chillventa-mobile-titel {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .chillventa-mobile {
    display: none;
  }
}


/* CONTAINER
  -------------------------------------------------- */

/*.container {
    margin-top: -2em;
  }*/

.container {
  margin-top: 2em;
}

@media (min-width: 768px) {
  .container {
    margin-top: -2em;
  }
}

.marketing {
  background-color: #f8f8f8;
  /*background-color: #ffffff;*/
  padding-left: 2em;
  padding-right: 2em;
  /*box-shadow: 0em 0.4em 0.4em -0.1em #dadada;*/
  padding-bottom: 3rem;
}

/* Drei Spalten | Einzelne Firmen mit Logos und Infos 
-------------------------------------------------- */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: left;
  background-color: #f8f8f8;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 1rem;
  /*min-width: fit-content;
    max-width: 24rem;*/
  box-shadow: 0em 0.4em 0.4em -0.1em #dadada;
  /*transition: transform .5s;*/
  height: fit-content;
  z-index: 12;
}

.marketing .col-lg-4:hover {
  /*border: 2px solid #003399;*/
  box-shadow: 0em 0.4em 0.4em -0.1em #888;
  /* transform: scale(1.01);*/
}

/*
  .marketing .col-lg-4:hover {
    box-shadow: 0em 0.4em 0.4em -0.1em #dadada;
  }*/

/* rtl:begin:ignore */
.marketing .col-lg-4 p {
  margin-right: 0rem;
  margin-left: 0rem;
}
/* rtl:end:ignore */

.row {
  --bs-gutter-x: 2.5rem;
}

.row {
  --bs-gutter-x: 2.5rem;
}

.row-mobile {
  display: none;
}

@media (max-width: 991px) {
  .row-mobile {
    display: flex;
  }
}

.row-desktop {
  display: none;
}

@media (min-width: 992px) {
  .row-desktop {
    display: flex;
  }
}

.herstellerliste {
  height: fit-content;
  min-height: 9em;
}

.herstellerliste-mobile {
  height: fit-content;
}

.herstellerliste li {
  margin-bottom: 0.8em;
}

.mailto-link:any-link {
  color: #ffffff;
  text-decoration: none;
}

.mailto-link-regular:any-link {
  color: rgb(var(--bs-tertiary-color-rgb));
  text-decoration: none;
}

.img-fit {
  object-fit: initial;
  width: fit-content;
  min-height: min-content;
}

.kaut-logo-box {
  width: auto;
  min-width: fit-content;
  min-height: fit-content;
  border-radius: 1rem;
  background-color: white;
  /*border: 1px solid red;*/
  margin-left: 0rem;
  position: relative;
  /*box-shadow: 0em 0.4em 0.4em -0.1em #f8f8f8;*/
}

.kaut-info-box {
  padding: 0 2em 2em 2em;
}

.kaut-logos {
  width: auto;
  max-width: 250px;
  margin: 1.5em;
}

.card {
  background-color: #3c3c3c;
  border: none;
  color: #ffffff;
  border-radius: 1rem;
}

.btn-primary {
  border-radius: 1.5em;
  border: none;
}

.btn-secondary {
  border-radius: 1.5em;
  border: none;
}

.ak {
  background-color: #003399;
}

.hk {
  background-color: #cc0000;
}

.cpk {
  background-color: #009a9d;
}

.kontakt-link {
  color: #212529;
  display: inline;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.kontakt-link:hover {
  color: #3c3c3c;
}

.info-link {
  color: lightgray;
  display: inline;
  text-decoration: none;
}

.info-link:hover {
  color: #ffffff;
}

/* INFOZEILEN
  ------------------------- */

.featurette-container {
  position: relative;
}

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}
.featurette-divider-karriere {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

.featurette-divider-mobile {
  margin: 2rem 0; /* Space out the Bootstrap <hr> more */
}

.featurette-divider_blank {
  margin: 1.75rem 0; /* Space out the Bootstrap <&nbsp;> more */
}

.featurette-divider_sm {
  margin: 2.5rem 0; /* Space out the Bootstrap <hr> more */
}

.featurette-image {
  border-radius: 1em;
  box-shadow: 0em 0.4em 0.4em -0.1em #dadada;
}

.bildunterschrift {
  margin-top: 1rem;
  padding-left: 0.5rem;
}

/*.featurettes {
  background-color: #ffffff;
  padding: 0 5rem 0 5rem;
}*/

/*
  .featurette-image:hover {
    box-shadow: 0em 0.4em 0.4em -0.1em #dadada;
  }

   .featurettes {
  padding: 0rem 1.3rem;
}*/

/* Thin out the marketing headings */
/* rtl:begin:remove */
.featurette-heading {
  letter-spacing: -0.05rem;
}
/* rtl:end:remove */

.kaut-h2 {
  font-size: 2em;
  margin-left: 0;
  font-weight: 700 !important;
  margin-top: 0;
}

.kaut-h3 {
  font-size: 1.5em;
}

.fw-normal {
  margin-left: 0rem;
  font-weight: 700 !important;
  max-width: fit-content;
}

.anchor {
  position: absolute;
  top: -7rem;
}

.anchor-jobs {
  position: absolute;
  top: -6rem;
}

.kautlink a {
  text-decoration: none;
  color: rgb(var(--bs-tertiary-color-rgb));
}

.kautlink a:hover {
  text-decoration: none;
  color: rgb(var(--bs-tertiary-color-rgb));
}

.kautlink a:active {
  text-decoration: none;
  color: rgb(var(--bs-tertiary-color-rgb));
}

.kautlink a:visited {
  text-decoration: none;
  color: rgb(var(--bs-tertiary-color-rgb));
}

/* Einstellung Accordion "Standorte" & "Lösungen"
  ------------------------- */

.btn-kaut-accordion:not(.collapsed) {
  font-size: small;
  font-weight: 600 !important;
  background-color: transparent;
}

.btn-kaut-accordion:active {
  font-size: small;
  font-weight: 600 !important;
  background-color: transparent !important;
}

.btn-kaut-accordion:focus {
  font-size: small;
  font-weight: 600 !important;
  background-color: transparent;
}

.accordion-body h3 {
  font-size: 1em;
  font-weight: 600 !important;
}

.accordion-button:not(.collapsed) {
  color: #212529;
  background-color: #dadada;
  box-shadow: none;
}

.accordion-button:focus {
  color: #212529;
  background-color: #dadada;
  box-shadow: none;
  border: none;
}

.accordion-button:active {
  color: #212529;
  background-color: #dadada;
  box-shadow: none;
  border: none;
}

.kaut_standorte_links {
  min-width: 310px;
  max-width: 100% !important;
  float: left;
  margin-right: 2rem;
  border-bottom: 1px solid #dee2e6;
}

.kaut_standorte_rechts {
  min-width: 310px;
  max-width: 100% !important;
  float: left;
  margin-right: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #dee2e6;
}

.kaut-loesungen {
  margin-bottom: 2rem;
}

.nl-link:any-link {
  text-decoration: none;
  color: inherit;
}

.logo-before-accordion {
  padding: 0 0 2rem 2.5rem;
}

/*ACCORDION SHK Border Radius */

#AlfredKaut .accordion-item:first-of-type  {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#AlfredKaut .accordion-item:last-of-type  {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}

#AlfredKaut .accordion-item:first-of-type .accordion-button {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#AlfredKaut .accordion-item:last-of-type .accordion-button {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#AlfredKaut .accordion-item:last-of-type .accordion-button:not(.collapsed) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

#HansKaut .accordion-item:first-of-type  {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#HansKaut .accordion-item:last-of-type  {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}

#HansKaut .accordion-item:first-of-type .accordion-button {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#HansKaut .accordion-item:last-of-type .accordion-button {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#HansKaut .accordion-item:last-of-type .accordion-button:not(.collapsed) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

#CPKaut .accordion-item:first-of-type  {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#CPKaut .accordion-item:last-of-type  {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}

#CPKaut .accordion-item:first-of-type .accordion-button {
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#CPKaut .accordion-item:last-of-type .accordion-button {
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
}
#CPKaut .accordion-item:last-of-type .accordion-button:not(.collapsed) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

/* BUTTON "nach oben"
  ------------------------- */

#kautUp {
  display: none; /* Standardmäßig ausgeblendet */
  position: fixed; /* Fixed/sticky position */
  bottom: 30px; /* Button am unteren Rand / saver: 60px*/
  right: 30px; /* Button 30px vom rechten Rand */
  z-index: 2147483648; /* Z-Index - ganz oben saver: 99*/
  border: none;
  outline: none;
  background-color: #989898; /* saver #3c3c3c; */
  color: white;
  cursor: pointer;
  padding: auto;
  border-radius: 5em; /* Runde Ecken */
  font-size: 18px; /* saver 18px */
  width: 48px; /* saver 3rem */
  height: 48px; /* saver 3rem */
  font-weight: bolder;
}

#kautUp:hover {
  background-color: #555;
}

/* RESPONSIVE CSS
  -------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 2em;
  }
}

/*
  @media (min-width: 62em) {
    .featurette-heading {
      margin-top: 7rem;
    }    
  }
  */

@media (min-width: 992px) {
  .col-lg-4 {
    flex: 0 0 auto;
    width: 30%;
    min-width: fit-content;
  }
}

@media (max-width: 575px) {
  .row {
    --bs-gutter-x: 1rem;
  }
}

/*Responsive Slider*/

@media (max-width: 500px) {
  .img-fit {
    margin-left: -35%;
  }
  .carousel-caption {
    left: 12%;
  }
}

@media (min-width: 501px) and (max-width: 768px) {
  .img-fit {
    margin-left: -50%;
  }
  .carousel-caption {
    left: 12%;
  }
}

@media (min-width: 769px) and (max-width: 992px) {
  .img-fit {
    margin-left: -25%;
  }
  .carousel-caption {
    left: 12%;
  }
}

@media (min-width: 993px) and (max-width: 1200px) {
  .img-fit {
    margin-left: -20%;
  }
  .carousel-caption {
    left: 12%;
  }
}

@media (min-width: 1201px) and (max-width: 1400px) {
  .img-fit {
    margin-left: -15%;
  }

  .carousel-caption {
    left: 12%;
  }
}

@media (min-width: 1401px) and (max-width: 1650px) {
  .img-fit {
    margin-left: -10%;
  }

  .carousel-caption {
    left: 10%;
  }
}

/*---KARRIERE---*/
#div-std {
  display: block;
}

.content-div {
  display: none;
  /* Anfangszustand: ausgeblendet */
  /*margin-top: 15px;*/
}

iframe {
  width: 100%;
  border: none;
}

.link-list  {
  padding: 0;
  margin: 0;
}

.link-list p {
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: #dee2e6 solid 0.3px;
  
}

.link-list a {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  color:#0077b3;
  text-decoration: none !important;
  margin: 0;
  padding: 0.8em 1.5em;

}

.link-list a:hover {
  color:#ffffff;
  background-color: #0077b3;
  }

.linklist-leerzeile {
  background-color: #f8f8f8;
  border: none !important;
  margin: 0;
}

.employer-icons {
  /*background-color: #3c3c3c;*/
  border-radius: 0.5em;
  /*min-height: 6em;*/
  padding: 1em;

  
 
  max-width: 120px;
  height: auto;
  display: block;
  margin-inline: auto;


  /*margin-bottom: 1em;*/
}

.employer-highlights {
  text-align: center;
  margin: 0 0 2em 0;
}

.employer {
  margin-top: 2em;
}

.p-text-karriere {
  padding-top: 1em;
}

.h4-karriere {
  padding-top: 1em;
  color: #0077b3;
}

.job-link {
  color: #0077b3;
  text-decoration: none;
}


:root {
  --font-h4-min: 1.25rem;
  --font-h4-max: 1.5rem;
}


.h4-employer {
  color: #0077b3 !important;

  

font-size: clamp(var(--font-h4-min), 1.5vw, var(--font-h4-max));
  line-height: 1.2;
  margin: 0.5rem 0 0.25rem;
  hyphens: auto;
  overflow-wrap: break-word;


}


/* Eigene Breakpoints */
@media (max-width: 991.98px) { /* kleiner als md */
  .custom-breakpoints .employer-highlights {
       width: 50%; /* zwei Spalten */
  }
}
  
@media (max-width: 768.98px) { /* kleiner als sm */
  .custom-breakpoints .employer-highlights {
    width: 100%; /* eine Spalte */
  }
}

@media (max-width: 991.98px) { /* kleiner als sm */
  .karriere-info {
    width: 100%; /* eine Spalte */
  }
  
}




/*---KAUT-EXPRESS---*/

/* Eigene Breakpoints */
@media (max-width: 991.98px) { /* kleiner als md */
  .express-highlights {
       width: 25%; /* zwei Spalten */
  }
}
  
@media (max-width: 768.98px) { /* kleiner als sm */
  .express-highlights {
    width: 33%; /* eine Spalte */
  }

  
}

.h4-express {
  padding-top: 1em;
  color: #212529 !important; 
  font-size: 1.0em;
  font-weight: bold;
}

.express-icons {
  /*background-color: #3c3c3c;*/
  border-radius: 0.5em;
  border: 1px solid #d0d0d0;
  /*min-height: 6em;*/
  padding: 0;

  
 
  max-width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;


  /*margin-bottom: 1em;*/
}

.express-highlights {
  text-align: center;
  margin: 0 0 2em 0;
}

.link-express {
  text-decoration: none;
  color: #3c3c3c !important;
}


.link-express img {
  display: block;
  width: 100%;              /* oder feste Breite */
  transition: transform 0.3s ease; /* sanfter Übergang */
  box-shadow:3px 3px 5px 0 #d0d0d0;
}

.link-express:hover img {
  transform: scale(1.05);    /* Zoom um 10% */
}

.express-aktuell img {
border-radius: 1em;
margin-top: 1em;
}

.express-aktuell-text {
  margin-top: 1em;
  padding-top: 1em;
  padding-bottom: 0.8em;
}

/*-- hamburger-menü karriere




/* === Bootstrap Offcanvas für EIN Accordion (Desktop neutralisiert) === */


/* Höhe der Hauptnavigation (falls du Offcanvas darunter starten lässt) */
:root { --masthead-height: 68px; }

/* Button-Optik (optional anpassen) */
.navbar-toggler-karriere {
  float: left;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  margin: 0 0.75em 0 0;
  border: none;
  border-radius: 8px;          /* optional */
  background-color: none;   /* optional: dunkler Hintergrund */
}

/* Standard: Hamburger mit WEISSEN Linien */
.navbar-toggler-karriere .navbar-toggler-icon {
  border: none;
  box-shadow: none;
  width: 2.5em;
  height: 2.5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* Wenn das Offcanvas #kmOffcanvas geöffnet ist (Bootstrap setzt .show):
   dann wird das Icon des genau dazugehörigen Togglers zum „X“. */
body:has(#kmOffcanvas.show)
  .navbar-toggler[data-bs-target="#kmOffcanvas"] .navbar-toggler-icon {
  background-image:
    url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)'  stroke-linecap='round' stroke-miterlimit='10' stroke-width='2'  d='M6 6 L24 24 M24 6 L6 24'/%3e%3c/svg%3e");
}

/* Optional: dezente Hover-Verbesserung */
.navbar-toggler-karriere:hover .navbar-toggler-icon {
  filter: brightness(1.05);
}


/* MOBILE: echtes Offcanvas rechts, unterhalb der Hauptnavigation starten */
@media (max-width: 991.98px) {
  .km-offcanvas.offcanvas-start {
    top: var(--masthead-height);              /* unterhalb der Navbar */
    height: calc(100vh - var(--masthead-height));
    border-left: 1px solid #eee;
  }
}

/* DESKTOP: Offcanvas neutralisieren → normal im Grid anzeigen */
@media (min-width: 992px) {
  .km-offcanvas {
    position: static !important;
    transform: none !important;
    visibility: visible !important;
    height: auto !important;
    border: 0 !important;
    box-shadow: none !important;
    display: block !important;
  }
  /* Body-Innenabstände neutraler für Desktop */
  .km-offcanvas .offcanvas-body {
    padding: 0 !important;
  }
  /* Header nur mobil nötig */
  .km-offcanvas .offcanvas-header {
    display: none !important;
  }
}




/* Optik des mobilen "H4-Buttons": wie normaler Text, ohne Button-Optik */
.km-h4-toggler {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;           /* übernimmt die h4-Farbe */
  text-decoration: none;    /* keine Unterstreichung */
}
.km-h4-toggler:hover,
.km-h4-toggler:focus {
  text-decoration: underline;  /* optionales Feedback */
}

.h4-middle  {
  height: 42px;
  vertical-align: middle;
  margin: 0;
}


@media (max-width: 991.98px) {
  .row .content-div,
  .row .accordion-div {
       flex: 0 0 100%;
    max-width: 100%;
  }
}

.accordion-div {
  margin: 0 0 3em 0;
 
}

@media (max-width: 991.98px) {
  .row .accordion-div {
       background-color: #0077b3;
       margin: 0 0 3em 0;
       border-radius: 0.75em;
       padding: 0.75em 1em;
       color: #ffffff;
       width: 100%;
  }
}


/* MOBILE NAVIGATION */