/* =========================================================
   CUSTOM STYLES

   Struktur:
   - Global / Utilities
   - Footer / globale Komponenten
   - Hero / Slider / Video
   - Content Blocks
   - Header / Navigation
   - Barrierefreiheit / Skip-Link
   ========================================================= */

html {
  scroll-padding-top: 80px; /* Passe die Höhe an die deiner Navigation an */
}

.rechtstext h1, .rechtstext .h1 {
  font-size: calc(1.485rem + 2.82vw);
}
@media (min-width: 1200px) {
  .rechtstext h1, .rechtstext .h1 {
    font-size: 3.6rem;
  }
}

.rechtstext h2, .rechtstext .h2 {
  font-size: calc(1.2rem + 1.8vw);
}
@media (min-width: 1200px) {
  .rechtstext h2, .rechtstext .h2 {
    font-size: 1.75rem;
  }
}

.rechtstext h3, .rechtstext .h3 {
  font-size: calc(1.163rem + 1.356vw);
}
@media (min-width: 1200px) {
  .rechtstext h3, .rechtstext .h3 {
    font-size: 1.38rem;
  }
}

.rechtstext h4, .rechtstext .h4 {
  font-size: calc(1.025rem + 0.9vw);
}
@media (min-width: 1200px) {
  .rechtstext h4, .rechtstext .h4 {
    font-size: 1.2rem;
  }
}

.h-70px {
  height: 70px !important;
}
.h-80px {
  height: 80px !important;
}
.h-100px {
  height: 100px !important;
}
.h-150px {
  height: 150px !important;
}
.h-200px {
  height: 200px !important;
}

.h-315px {
  height: 315px !important;
}

.h-350px {
  height: 350px !important;
}

.h-450px {
  height: 450px !important;
}

.w-350px {
  width: 350px !important;
}
.w-25-rem {
  width: 25rem;
}
.w-10-rem {
  width: 10rem;
}

.info-dropdown {
  width: 18rem;
  left: -2rem !important;
}

@media (min-width: 576px) {
  .info-dropdown {
    width: 25rem;
    left: initial !important;
    right: 0 !important;
  }
}

.pt-7-5 {
  padding-top: 6rem !important;
}

.pt-10 {
  padding-top: 13rem !important;
}
.bg-linear-overlay-v2 {
  background: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0%, rgba(0, 0, 0, 0.5)),
    color-stop(0%, rgba(0, 0, 0, 0)),
    to(rgb(0, 0, 0))
  );
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0) 0%,
    rgb(0, 0, 0) 100%
  );
}

.gradient-overlay{
  background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 20%);
}


.text-shadow {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}

.text-shadow-strong {
    text-shadow: 3px 3px 8px rgba(0,0,0,0.6);
}

.text-shadow-glow {
    text-shadow: 0 0 6px rgba(255,255,255,0.7);
}

.text-shadow-soft {
    text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.text-shadow-soft-lg {
    text-shadow: 0 4px 14px rgba(0,0,0,0.2);
}

.text-shadow-smooth {
    text-shadow:
        0 1px 2px rgba(0,0,0,0.25),
        0 4px 12px rgba(0,0,0,0.15);
}

.bs-blur-3 {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.img-tilt {
    transform: rotate(-10deg);
    transform-origin: center center;
}


#contentstart {
  scroll-margin-top: 200px;
  scroll-behavior: smooth;
}


/* Footer */
.footer-nav-item {
    display: inline-flex;
    align-items: center;
}

.footer-nav-item + .footer-nav-item::before {
    content: "|";
    margin-right: .75rem;
    margin-left: .25rem;
    opacity: .5;
}


/*NEws */
.card-image-news-teaser {
  border-bottom-right-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}

/*Quick Contact */
.quick-contact {
  cursor: pointer;
  position: fixed !important;
  bottom: 180px;
  right: 0px;
  display: block;
  z-index: 100;

  opacity: 1;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: var(--bs-primary);
  color: #fff;
  /*border-radius: 10%;*/
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  width: 80px;
  height: auto;
  /*line-height: 52px;*/
  text-align: center;
  padding-top: 1em;
}
/*
.quick-contact:before {
  content: "\f500";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
*/
.quick-contact:hover {
  background: var(--bs-link-hover-color);
  color: #fff;
}
.quick-contact.back-top-show {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}

.hover-shadow {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.hover-shadow:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
  -webkit-box-shadow: 0px 10px 30px rgba(29, 58, 83, 0.15);
  box-shadow: 0px 10px 30px rgba(29, 58, 83, 0.15);
}

.hover-bg:hover {
  background: var(--bs-info) !important;
}
/*Formular */
.input,
.captcha {
  margin-bottom: 0.75rem !important;
}
.form-label {
  margin-bottom: 0.25rem !important;
}

.input.checkbox .form-text,
.input.checkbox .form-check {
  padding-left: 0em;
}

hr.ce-div {
  margin: 2rem 0;
}

/*Barrierefreiheit */


.display-4 {
    font-size: 2.0rem;
}
@media (min-width: 991px) {
.display-4 {
  font-size: 3.5rem;
}
}

@media (min-width: 1200px) {
  .display-4 {
    font-size: 4rem;
  }
}

@media (min-width: 1400px) {
  .display-4 {
    font-size: 4.5rem;
  }
}


/*Header Slider */
/* Section soll keine "pt-5" Luft oben erzeugen */
.mainvisual-fullscreen {
  padding-top: 0 !important;
}

.mainvisual-fullscreen-video {
  padding-top: 90px !important;
}

/* Swiper + Wrapper + Slides auf volle Höhe */
.mainvisual-swiper,
.mainvisual-swiper .swiper-wrapper,
.mainvisual-swiper .swiper-slide {
  height: 100svh;     /* moderne Mobile-Viewport-Einheit */
  min-height: 100vh;  /* Fallback */
}

/* Dein "Card"-Ersatz: echtes Fullscreen Background-Element */
.mainvisual-slide {
  height: 100%;
  width: 100%;
  position: relative;
}

/* Overlay-Schicht für Text über dem Bild */
.mainvisual-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Falls dein .bg-overlay nicht absolut positioniert ist */
.mainvisual-slide .bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.mainvisual-swiper .card {
  overflow: hidden;
}

.mainvisual-swiper .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center left;
  transform: scale(1);
  transition: transform 6s ease;
  z-index: 0;
}

.mainvisual-swiper .swiper-slide-active .card::before {
  transform: scale(1.1);
}

.layer-0 {
    background: transparent;
}

.layer-1 {
    background: rgba(0,0,0,.30);
}

.layer-2 {
    background: rgba(0,0,0,.55);
}

/* ===========================================
   Hero – individuelle Bereichsfarbe
   =========================================== */

.slide-color {
    color: var(--slide-color);
}


/* Primary Button in individueller Farbe */
.slide-btn {
    color: #fff !important;
    background-color: var(--slide-color) !important;
    border-color: var(--slide-color) !important;
}


/* normaler Hover */
.slide-btn:hover,
.slide-btn:focus-visible {
    color: #fff !important;

    background-color: color-mix(
        in srgb,
        var(--slide-color) 95%,
        #000
    ) !important;

    border-color: color-mix(
        in srgb,
        var(--slide-color) 95%,
        #000
    ) !important;
}

/* Slide-Button: Active-State darf die individuelle Farbe nicht ändern */
.btn.slide-btn.active,
.btn.slide-btn:active,
.btn.slide-btn.active:focus
 {
    color: #fff !important;
    background-color: var(--slide-color) !important;
    border-color: var(--slide-color) !important;
}

/* Video start */
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}

/* Video Hero Small */
.video-hero-small .card {
    position: relative;
    background-color: #000;
}

.video-hero-small .bg-overlay {
    z-index: 1;
}

.video-hero-small .card-img-overlay {
    z-index: 2;
}

.hero-video-small-overlay {
    padding-top: 6rem;
}

@media (min-width: 992px) {
    .hero-video-small-overlay {
        padding-top: 8rem;
    }
}

.mainvisual-fullscreen .card {
    background: #000;
}

.mainvisual-fullscreen .bg-overlay {
    z-index: 1;
}

.mainvisual-fullscreen .z-index-2 {
    z-index: 2;
}
/*Video end */

/*Slider Leistungen*/
.teaser-slide-leistungen .swiper-slide {
    height: auto;
}

.teaser-slide-leistungen .swiper-slide .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.teaser-slide-leistungen .swiper-slide .card-body {
    flex-grow: 1;
}


/* Experience */
/* =========================================================
   Erfahrung / Unternehmenswerte
   ========================================================= */

.experience-section {
  position: relative;
  overflow: hidden;
}

/* Kleine Überschrift mit Linien */

.experience-eyebrow-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.experience-eyebrow {
  flex-shrink: 0;
  color: var(--bs-primary);
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  font-weight: 300;
  line-height: 1;
  text-transform: uppercase;
}

.experience-eyebrow-line {
  display: block;
  width: min(20vw, 230px);
  height: 2px;
  background-color: var(--bs-primary);
}

/* Hauptüberschrift */

.experience-heading {
  color: var(--bs-black);
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

/* Merkmalsleiste */

.experience-items {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3.5rem);
  background-color: var(--bs-white);
  border-radius: var(--bs-border-radius);
  /*box-shadow: 0 0.5rem 2rem rgba(29, 58, 83, 0.08);*/
}

/* Einzelnes Element */

.experience-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  min-height: 100px;
  padding: 1.25rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Trennlinie zwischen den Elementen */

.experience-item::after {
  position: absolute;
  top: 20%;
  right: 0;
  width: 1px;
  height: 60%;
  background-color: var(--bs-gray-200);
  content: "";
}

.experience-items .row > div:last-child .experience-item::after {
  display: none;
}

/* Icon */

.experience-item-icon {
  display: inline-flex;
  flex: 0 0 58px;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background-color: var(--bs-gray-100);
  color: var(--bs-primary);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 0.35rem 1rem rgba(29, 58, 83, 0.08);
}

.experience-item-icon .bi {
  display: block;
  line-height: 1;
}

/* Texte */

.experience-item-content {
  min-width: 0;
}

.experience-item-title {
  margin-bottom: 0.3rem;
  color: var(--bs-gray-900);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.experience-item-text {
  color: var(--bs-gray-600);
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Dezenter Hover-Effekt */

@media (hover: hover) {
  .experience-item:hover {
    z-index: 2;
    transform: translateY(-4px);
    box-shadow: 0 0.75rem 2rem rgba(29, 58, 83, 0.1);
  }
}

/* Tablet: zwei Spalten */

@media (min-width: 576px) and (max-width: 1199.98px) {
  .experience-items .row > div:nth-child(2n) .experience-item::after {
    display: none;
  }

  .experience-items .row > div:not(:nth-last-child(-n + 2)) .experience-item {
    border-bottom: 1px solid var(--bs-gray-200);
  }
}

/* Smartphone */

@media (max-width: 575.98px) {
  .experience-eyebrow-wrapper {
    gap: 0.75rem;
  }

  .experience-eyebrow {
    font-size: 1.1rem;
  }

  .experience-eyebrow-line {
    flex: 1 1 auto;
    width: auto;
    min-width: 20px;
  }

  .experience-heading {
    font-size: clamp(3rem, 17vw, 5rem);
    line-height: 0.9;
  }

  .experience-item {
    min-height: 0;
    padding: 1rem;
  }

  .experience-item::after {
    display: none;
  }

  .experience-items .row > div:not(:last-child) .experience-item {
    border-bottom: 1px solid var(--bs-gray-200);
  }

  .experience-item-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
  }
}


/* =========================================================
   Statische Service-Teaser
   ========================================================= */

.static-service-teasers {
  --static-service-border-color: var(--bs-gray-200);
}

.static-service-card {
  position: relative;
  border: 1px solid var(--static-service-border-color);
  background-color: var(--bs-white);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

/* Logo-Bereich */

.static-service-logo {
  display: flex;
  align-items: center;
  min-height: 76px;
  padding: 0.75rem 1.25rem;
  /*background-color: var(--bs-white);*/
}

.static-service-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

/* Visual */

.static-service-image-wrapper {
  position: relative;
}

.static-service-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 8.5;
  object-fit: cover;
}

/* Icon-Kreis */

.static-service-icon {
  position: absolute;
  bottom: 0;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--bs-white);
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  transform: translateY(50%);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  z-index: 2;
}

.static-service-icon i {
  display: block;
  line-height: 1;
}

/* Inhalt */

.static-service-card .card-body {
  padding-top: 2.25rem !important;
}

.static-service-card h3 {
  color: var(--bs-gray-900);
  font-weight: 700;
  line-height: 1.25;
}

.static-service-card p {
  color: var(--bs-gray-600);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Hover */

@media (hover: hover) {
  .static-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 2rem rgba(29, 58, 83, 0.12);
  }
}

.static-service-button {
  color: var(--service-text-color, #fff) !important;
  background-color: var(--service-color, var(--bs-primary)) !important;
  border-color: var(--service-color, var(--bs-primary)) !important;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.static-service-button:hover,
.static-service-button:focus-visible {
  color: var(--service-text-color, #fff) !important;
  background-color: var(--service-color, var(--bs-primary)) !important;
  border-color: var(--service-color, var(--bs-primary)) !important;
  filter: brightness(0.9);
}


/* =========================================================
   Icon-Teaser – Variante 3
   ========================================================= */

.icon-service-teasers {
  padding-top: 3rem;
}

.icon-service-card {
  position: relative;
  overflow: visible;
  border: 1px solid var(--bs-gray-200);
  border-radius: 0.75rem;
  background-color: var(--bs-white);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.icon-service-card .card-body {
  padding-top: 4.25rem !important;
}

.icon-service-icon {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--bs-white);
  border-radius: 50%;
  background-color: var(--bs-white);
  font-size: 3rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
}

.icon-service-icon i {
  display: block;
  line-height: 1;
}

.icon-service-icon-image {
  display: block;
  width: auto;
  max-width: 76px;
  max-height: 68px;
  object-fit: contain;
}

.icon-service-title {
  color: var(--bs-black);
  font-weight: 700;
  /*text-transform: uppercase;*/
}

.icon-service-title::after {
  display: block;
  width: 42px;
  height: 1px;
  margin: 0.75rem auto 0;
  background-color: var(--bs-primary);
  content: "";
}

.icon-service-text {
  color: var(--bs-gray-600);
  line-height: 1.5;
}

.icon-service-card .btn-outline-primary {
  border-width: 1px;
  border-radius: 0.5rem;
}

@media (hover: hover) {
  .icon-service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
  }
}

@media (max-width: 767.98px) {
  .icon-service-teasers {
    padding-top: 2.5rem;
  }
}


/* ===========================================
   Variante 4 – Leistungsübersicht
   =========================================== */

/* Gleiche Höhe aller Slides */
.service-overview-swiper .swiper-wrapper {
    align-items: stretch;
}

.service-overview-swiper .swiper-slide {
    height: auto;
}


/* Icon-Bereich auf einheitlicher Höhe */
.service-overview-icon {
    min-height: 110px;
}


/* Icon etwas größer als Bootstrap fs-1 */
.service-overview-icon > i {
    font-size: 3rem !important;
    line-height: 1;
}


/* Deaktivierte Slider-Navigation */
[id^="service-overview-prev-"].swiper-button-disabled,
[id^="service-overview-next-"].swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}


.service-overview-button {
background-color: var(--service-color);
border-color: var(--service-color);
color: var(--service-text-color);
}

.service-overview-button:hover,
.service-overview-button:focus {
background-color: var(--service-color);
border-color: var(--service-color);
color: var(--service-text-color);
}

/* ===========================================
   Variante 4 – Slider-Navigation
   =========================================== */

.service-overview-nav {
    color: #fff;
    background-color: var(--service-nav-color, var(--bs-primary));
    border-color: var(--service-nav-color, var(--bs-primary)) !important;
}

.service-overview-nav:hover,
.service-overview-nav:focus {
    color: #fff;

    background-color: color-mix(
        in srgb,
        var(--service-nav-color, var(--bs-primary)) 85%,
        #000
    );

    border-color: color-mix(
        in srgb,
        var(--service-nav-color, var(--bs-primary)) 85%,
        #000
    ) !important;
}

/* ===========================================
   Mitarbeiter-Zitat
   =========================================== */

.employee-quote {
    padding-top: 7rem;
}


/* grauer Hintergrund über volle Breite */
.employee-quote-bg {
    position: relative;
    min-height: 420px;
}


/* ===========================================
   Mitarbeiter
   =========================================== */

.employee-quote-person {
    position: relative;
    min-height: 420px;
}


/* Freigestelltes Mitarbeiterbild */
.employee-quote-image {
    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    display: block;

    width: auto;
    max-width: 100%;
    max-height: 540px;
}


/* ===========================================
   Zitat-Box
   =========================================== */

.employee-quote-content {
    position: relative;
    z-index: 2;
}


/* Großes dekoratives Anführungszeichen */
.employee-quote-symbol {
    height: 4rem;

    margin-bottom: 1rem;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;

    color: var(--bs-secondary);
}


/* RTE-Abstände bereinigen */
.employee-quote-text > *:last-child {
    margin-bottom: 0;
}


/* Trennlinie zwischen Zitat und Person */
.employee-quote-footer {
    position: relative;
}

.employee-quote-footer::before {
    content: "";

    display: block;

    width: 160px;
    max-width: 50%;

    margin: 0 auto 1.5rem;

    border-top: 1px solid var(--bs-border-color);
}


/* ===========================================
   Tablet / Smartphone
   =========================================== */

@media (max-width: 991.98px) {

    .employee-quote {
        padding-top: 0;
    }

    .employee-quote-bg,
    .employee-quote-person {
        min-height: auto;
    }

    .employee-quote-image {
        position: relative;

        left: auto;
        bottom: auto;

        transform: none;

        max-height: 500px;

        margin: 0 auto;
    }

    .employee-quote-symbol {
        height: 3rem;
        font-size: 5rem;
    }

}


/* =========================================================
   Social Showcase
   ========================================================= */

.social-showcase {
  position: relative;
  overflow: hidden;
}

.social-showcase-phone {
  position: relative;
  text-align: center;
}

.social-showcase-phone img {
  display: inline-block;
  width: 100%;
  max-width: 390px;
  height: auto;
}

.social-showcase-intro {
  position: relative;
  z-index: 3;
}

.social-showcase-intro h1,
.social-showcase-intro h2,
.social-showcase-intro h3,
.social-showcase-intro h4 {
  color: var(--bs-black);
}

.social-showcase-text {
  max-width: 850px;
  font-size: 1.15rem;
  line-height: 1.45;
}

.social-showcase-text p:last-child {
  margin-bottom: 0;
}

/* Social-Media-Blöcke */

.social-showcase-blocks {
  position: relative;
}

.social-showcase-block {
  position: relative;
  z-index: 1;
  padding: 1rem;
  border-radius: 0.25rem;
  background-color: var(--bs-white);
  box-shadow: 0 0.75rem 2.5rem rgba(29, 58, 83, 0.1);
  border: 1px solid var(--bs-gray-200);
}

.social-showcase-block + .social-showcase-block {
  margin-top: 1.5rem;
}

.social-showcase-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.social-showcase-profile {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.social-showcase-logo {
    display: block;
    width: auto;
    max-width: 180px;
    max-height: 48px;
    object-fit: contain;
}

.social-showcase-username {
    color: var(--bs-gray-600);
    font-size: 0.95rem;
    text-decoration: underline;
    white-space: nowrap;
}

.social-showcase-profile:hover .social-showcase-username {
    color: var(--bs-primary);
}
/* Galeriebilder */

.social-showcase-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border-radius: 0.25rem;
  background-color: var(--bs-gray-200);
}

.social-showcase-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

@media (hover: hover) {
  .social-showcase-image:hover img {
    transform: scale(1.04);
  }
}

/* Desktop: zweiter Block überlappt den ersten */

@media (min-width: 992px) {
  .social-showcase-block {
    width: 84%;
  }

  .social-showcase-block:nth-child(even) {
    z-index: 2;
    width: 84%;
    margin-top: -1.5rem;
    margin-left: auto;
    transform: translateX(-6%);
  }
}

/* Tablet */

@media (min-width: 768px) and (max-width: 991.98px) {
  .social-showcase-phone {
    position: sticky;
    top: 7rem;
  }
}

/* Mobile */

@media (max-width: 767.98px) {
  .social-showcase-phone img {
    max-width: 300px;
  }

  .social-showcase-text {
    font-size: 1rem;
  }

  .social-showcase-block {
    padding: 0.85rem;
  }

}


/*Modal*/
.modal-image {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}


/* ===========================================
   TEAM CONTENT BLOCK
   =========================================== */

.team-section {
    --team-color: var(--bs-primary);
}


/* ===========================================
   Kopfbereich
   =========================================== */

.team-main-heading {
    /*color: var(--team-color);*/
}

.team-intro > *:last-child {
    margin-bottom: 0;
}

.team-main-phone {
    font-size: 1.15rem;
    font-weight: 500;
}

.team-main-phone i {
    color: var(--team-color);
}


/* Hauptbutton */
.team-main-button {
    color: #fff;
    background-color: var(--team-color);
    border-color: var(--team-color);
}

.team-main-button:hover,
.team-main-button:focus {
    color: #fff;
    background-color: color-mix(in srgb, var(--team-color) 85%, #000);
    border-color: color-mix(in srgb, var(--team-color) 85%, #000);
}


/* ===========================================
   Allgemeine Card-Darstellung
   =========================================== */

.team-card {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Fallback, falls Mizzle shadow-hover
   nicht oder anders definiert ist */
.team-card:hover {
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.10);
}


/* ===========================================
   Mitarbeiterdaten
   =========================================== */

.team-position {
    color: var(--team-color);
    font-weight: 500;
}


.team-contact-link {
    display: inline-flex;
    align-items: center;

    color: var(--bs-body-color);
    text-decoration: none;

    overflow-wrap: anywhere;
    word-break: break-word;
}

.team-contact-link i {
    flex: 0 0 auto;
    color: var(--team-color);
}

.team-contact-link:hover,
.team-contact-link:focus {
    color: var(--team-color);
}


/* ===========================================
   VARIANTE 1
   Modern / versetzt
   =========================================== */

.team-modern {
    display: flex;
    flex-direction: column;

    gap: 1rem;
    padding-top: 2.5rem;
}


/* Einzelne Card */
.team-card-modern {
    position: relative;

    width: 56%;
    min-height: 150px;

    overflow: visible;
}


/* 1., 3., 5. ... links */
.team-card-modern:nth-child(odd) {
    margin-right: auto;
}


/* 2., 4., 6. ... rechts */
.team-card-modern:nth-child(even) {
    margin-left: auto;
}


/* Bildspalte */
.team-card-modern .team-person-image-column {
    position: relative;
    min-height: 150px;
}


/*
 * Freigestellte Person:
 * - unten bündig mit der Card
 * - seitlich innerhalb der Bildspalte
 * - darf nur nach oben über die Card hinausragen
 */
.team-card-modern .team-person-image {
    position: absolute;

    left: 0;
    bottom: 0;

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;
    max-height: 235px;

    object-fit: contain;
    object-position: center bottom;

    z-index: 2;
}


/*
 * Bei den modernen Cards bleibt der Text
 * immer linksbündig – auch wenn das Bild
 * rechts steht.
 */
.team-card-modern .card-body {
    text-align: left;
}


/* ===========================================
   VARIANTE 2
   Klassisch
   =========================================== */

.team-card-classic {
    overflow: hidden;
}


/* Bildbereich */
.team-classic-image-wrapper {
    height: 100%;
    min-height: 230px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background-color: var(--bs-light);
}


/* freigestelltes Bild */
.team-classic-image {
    display: block;

    width: auto;
    height: auto;

    max-width: 100%;
    max-height: 250px;

    object-fit: contain;
    object-position: center bottom;
}


/* ===========================================
   VARIANTE 3
   Klassisch mit rundem Foto
   =========================================== */

.team-classic-image-circle {
    min-height: auto;

    padding: 1.5rem;

    align-items: center;

    background-color: transparent;
}


.team-classic-image-circle .team-classic-image {
    width: 150px;
    height: 150px;

    max-width: 150px;
    max-height: 150px;

    border-radius: 50%;

    object-fit: cover;
    object-position: center top;
}


/* ===========================================
   Tablet
   Modern-Variante wird nicht mehr versetzt
   =========================================== */

@media (max-width: 991.98px) {

    .team-modern {
        gap: 3rem;
        padding-top: 1rem;
    }


    /*
     * Alle Cards volle Breite und
     * nicht mehr versetzt.
     */
    .team-card-modern,
    .team-card-modern:nth-child(odd),
    .team-card-modern:nth-child(even) {
        width: 100%;

        margin-left: 0;
        margin-right: 0;
    }


    /*
     * Durch die Bootstrap-order-lg-Klassen
     * steht das Bild jetzt bei allen Cards
     * wieder links.
     */
    .team-card-modern .team-person-image {
        max-width: 125%;
        max-height: 210px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 575.98px) {

    /* ---------------------------------------
       Modern
       --------------------------------------- */

    .team-card-modern {
        min-height: 135px;
    }

    .team-card-modern .team-person-image-column {
        min-height: 135px;
    }

    .team-card-modern .team-person-image {
        max-width: 145%;
        max-height: 185px;
    }

    .team-card-modern .card-body {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
        padding-right: 1rem !important;
        padding-left: 0.75rem !important;
    }


    /* Kontaktangaben etwas kompakter */
    .team-contact-link {
        font-size: 0.9375rem;
    }


    /* ---------------------------------------
       Klassisch
       --------------------------------------- */

    .team-classic-image-wrapper {
        min-height: 220px;
    }

    .team-classic-image {
        max-height: 220px;
    }


    /* ---------------------------------------
       Rundes Bild
       --------------------------------------- */

    .team-classic-image-circle {
        padding: 1.5rem 1.5rem 0;
    }

    .team-classic-image-circle .team-classic-image {
        width: 140px;
        height: 140px;

        max-width: 140px;
        max-height: 140px;
    }

}


/* ===========================================
   Sehr kleine Displays
   =========================================== */

@media (max-width: 399.98px) {

    .team-card-modern .team-person-image {
        max-width: 155%;
        max-height: 165px;
    }

    .team-contact-link {
        font-size: 0.875rem;
    }

}


/* ===========================================
   STANDORTE / KONTAKT
   =========================================== */


/* ===========================================
   Allgemein
   =========================================== */

.locations-main-heading {
    /*color: var(--bs-primary);*/
}


/* Cards */
.locations-main-card,
.locations-card {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);

    transition:
        box-shadow 0.25s ease,
        transform 0.25s ease;
}


/* Hover */
.locations-main-card:hover,
.locations-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.10);
}


/* ===========================================
   Hauptstandort
   =========================================== */

.locations-main-card {
    --location-color: var(--bs-primary);
}


.locations-main-logo {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 180px;

    object-fit: contain;
    object-position: left center;
}


/* ===========================================
   Karte
   =========================================== */

.locations-map {
    min-height: 350px;
}

.locations-map img {
    display: block;
}


/* ===========================================
   Standort-Cards
   =========================================== */

.locations-card {
    --location-color: var(--bs-primary);
}


/* Logo-Bereich */
.locations-logo-wrapper {
   /* min-height: 80px;*/

    display: flex;
    align-items: center;
}


.locations-logo {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 80px;

    object-fit: contain;
    object-position: left center;
}


/* ===========================================
   Überschriften / Labels
   =========================================== */

.locations-label {
    color: var(--location-color);
    font-size: 0.875rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.02em;
}


/* Hauptstandort immer Primary */
.locations-main-card .locations-label {
    color: var(--bs-primary);
}


/* ===========================================
   Kontaktdaten
   =========================================== */

.locations-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;

    color: var(--bs-body-color);
    text-decoration: none;

    line-height: 1.35;
}


.locations-contact-row i {
    flex: 0 0 auto;

    width: 1rem;

    margin-top: 0.1rem;

    text-align: center;
}


a.locations-contact-row:hover,
a.locations-contact-row:focus {
    color: var(--location-color);
}


/* Hauptstandort */
.locations-main-card a.locations-contact-row:hover,
.locations-main-card a.locations-contact-row:focus {
    color: var(--bs-primary);
}


/* ===========================================
   Öffnungszeiten
   =========================================== */

.locations-opening-content {
    font-size: 0.9375rem;
    line-height: 1.4;
}


.locations-opening-content > *:last-child {
    margin-bottom: 0;
}


/* ===========================================
   Standort-Button
   =========================================== */

.locations-button {
    color: var(--location-color);

    background-color: transparent;
    border-color: var(--location-color);
}


.locations-button:hover,
.locations-button:focus {
    color: #fff;

    background-color: var(--location-color);
    border-color: var(--location-color);
}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    .locations-map {
        min-height: 300px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 575.98px) {

    .locations-main-logo {
        max-height: 130px;
    }


    .locations-logo-wrapper {
        min-height: auto;
    }


    .locations-logo {
        max-height: 70px;
    }


    .locations-map {
        min-height: 240px;
    }

}

/* ===========================================
   Team CTA – individuelle Bereichsfarbe
   =========================================== */

.team-cta-headline {
    color: var(--team-cta-color);
}


/* Button 1 */
.team-cta-btn {
    color: #fff;
    background-color: var(--team-cta-color);
    border-color: var(--team-cta-color);
}

.team-cta-btn:hover,
.team-cta-btn:focus {
    color: #fff;
    background-color: color-mix(
        in srgb,
        var(--team-cta-color) 85%,
        #000
    );
    border-color: color-mix(
        in srgb,
        var(--team-cta-color) 85%,
        #000
    );
}


/* Button 2 */
.team-cta-btn-outline {
    color: var(--team-cta-color);
    background-color: transparent;
    border-color: var(--team-cta-color);
}

.team-cta-btn-outline:hover,
.team-cta-btn-outline:focus {
    color: #fff;
    background-color: var(--team-cta-color);
    border-color: var(--team-cta-color);
}


/* ===========================================
   ARBEITSGEMEINSCHAFTEN
   =========================================== */


/* ===========================================
   Kopfbereich
   =========================================== */

/* ===========================================
   Card
   =========================================== */

.workgroup-card {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


@media (hover: hover) {

    .workgroup-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 0.75rem 2rem rgba(29, 58, 83, 0.10);
    }

}


/* ===========================================
   Ort
   =========================================== */

.workgroup-location {
    color: var(--bs-primary);

    font-size: 0.875rem;
    font-weight: 500;

    text-transform: uppercase;
}


.workgroup-location i {
    font-size: 1.5rem;
    line-height: 1;
}


/* ===========================================
   Titel
   =========================================== */

.workgroup-title {
    max-width: 420px;

    color: var(--bs-gray-900);
    font-weight: 700;
    line-height: 1.35;
}


/* ===========================================
   Leitung
   =========================================== */

.workgroup-leadership {
    min-height: 145px;

    padding: 0 2rem;
}


/* Trennlinie zwischen beiden Bereichen */
.workgroup-leadership-commercial {
    border-left: 1px solid var(--bs-border-color);
}


.workgroup-leadership-title {
    color: var(--bs-gray-900);

    font-size: 0.875rem;
    font-weight: 700;
}


/* ===========================================
   Logos
   =========================================== */

.workgroup-logos {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 1rem;
}


.workgroup-logo {
    display: flex;
    align-items: center;

    min-height: 50px;
}


.workgroup-logo img {
    display: block;

    width: auto;
    max-width: 170px;
    max-height: 70px;

    object-fit: contain;
    object-position: left center;
}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    /*
     * Linker Bereich steht oben.
     * Leitungen darunter.
     */
    .workgroup-leadership {
        min-height: auto;

        padding-top: 1.5rem;
        padding-right: 1.5rem;
        padding-bottom: 0;
        padding-left: 0;
    }


    .workgroup-leadership-commercial {
        padding-left: 1.5rem;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 575.98px) {

    /*
     * Technische und kaufmännische Leitung
     * stehen jetzt ebenfalls untereinander.
     */
    .workgroup-leadership {
        padding: 1.5rem 0 0;
    }


    .workgroup-leadership-commercial {
        margin-top: 1.5rem;

        padding-top: 1.5rem;
        padding-left: 0;

        border-top: 1px solid var(--bs-border-color);
        border-left: 0;
    }


    .workgroup-logo img {
        max-width: 150px;
        max-height: 65px;
    }

}


/* ===========================================
   ZERTIFIKATE
   =========================================== */


/* ===========================================
   Kopfbereich
   =========================================== */

.certificates-heading {
    /*color: var(--bs-primary);*/
}


/* ===========================================
   Card
   =========================================== */

.certificate-card {
    overflow: hidden;

    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


@media (hover: hover) {

    .certificate-card:hover {
        transform: translateY(-5px);

        box-shadow:
            0 0.75rem 2rem rgba(29, 58, 83, 0.12);
    }

}


/* ===========================================
   Gesamter Card-Inhalt als Link
   =========================================== */

.certificate-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* ===========================================
   Zertifikatsbereich
   =========================================== */

.certificate-visual {
    position: relative;

    display: flex;
    flex: 1 1 auto;
    align-items: flex-start;
    justify-content: center;

    min-height: 420px;

    padding: 2rem 2rem 1rem;

    overflow: hidden;

    background-color: var(--bs-gray-100);
}


/* Zertifikatsbild */
.certificate-image {
    display: block;

    width: auto;
    max-width: 100%;
    max-height: 420px;

    object-fit: contain;

    box-shadow:
        0 0.5rem 1.5rem rgba(0, 0, 0, 0.12);

    transition: transform 0.4s ease;
}


/* ===========================================
   Anbieterlogo-Layer
   nur vorhanden, wenn Logo gepflegt ist
   =========================================== */

.certificate-logo-layer {
    position: absolute;

    top: 1rem;
    left: 1rem;
    right: 1rem;

    z-index: 2;

    display: flex;
    align-items: center;

    min-height: 74px;

    padding: 0.75rem 1.25rem;

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

    background-color: rgba(20, 20, 20, 0.72);

    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}


/* Anbieterlogo */
.certificate-provider-logo {
    display: block;

    width: auto;
    max-width: 180px;
    max-height: 52px;

    object-fit: contain;
    object-position: left center;
}


/* ===========================================
   Button
   =========================================== */

.certificate-button {
    pointer-events: none;
}


/* ===========================================
   Hover
   =========================================== */

@media (hover: hover) {

    .certificate-card:hover .certificate-image {
        transform: scale(1.025);
    }

}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    .certificate-visual {
        min-height: 390px;

        padding: 1.5rem;
    }


    .certificate-image {
        max-height: 390px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 575.98px) {

    .certificate-visual {
        min-height: 0;

        padding: 1.25rem;
    }


    .certificate-image {
        max-height: 500px;
    }


    .certificate-logo-layer {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;

        min-height: 64px;

        padding: 0.65rem 1rem;
    }


    .certificate-provider-logo {
        max-width: 150px;
        max-height: 44px;
    }

}


/* ===========================================
   JOBS-TEASER
   =========================================== */


/* ===========================================
   Kopfbereich
   =========================================== */

.jobs-teaser-heading {
    color: var(--bs-primary);
}


/* ===========================================
   Card
   =========================================== */

.jobs-teaser-card {
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


@media (hover: hover) {

    .jobs-teaser-card:hover {
        transform: translateY(-4px);

        box-shadow:
            0 0.75rem 2rem rgba(29, 58, 83, 0.10);
    }

}


/* ===========================================
   Bild
   =========================================== */

.jobs-teaser-image-wrapper {
    min-height: 190px;
}


.jobs-teaser-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}


@media (hover: hover) {

    .jobs-teaser-card:hover .jobs-teaser-image {
        transform: scale(1.035);
    }

}


/* ===========================================
   Inhalt
   =========================================== */

.jobs-teaser-title {
    color: var(--bs-gray-900);
    font-weight: 700;
}


.jobs-teaser-text {
    color: var(--bs-body-color);
    line-height: 1.5;
}


.jobs-teaser-text > *:last-child {
    margin-bottom: 0;
}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    .jobs-teaser-image-wrapper {
        min-height: 210px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 767.98px) {

    .jobs-teaser-image-wrapper {
        min-height: 240px;
    }

}


/* ===========================================
   Kleine Smartphones
   =========================================== */

@media (max-width: 575.98px) {

    .jobs-teaser-card .card-body {
        padding: 1.25rem !important;
    }

    .jobs-teaser-image-wrapper {
        min-height: 220px;
    }

}


/* ===========================================
   JOBS CTA
   =========================================== */

.jobs-cta-section {
    position: relative;
}

.jobs-cta-content {
    position: relative;
    z-index: 2;
}

.jobs-cta-heading {
    color: var(--bs-primary);
}

.jobs-cta-text > *:last-child {
    margin-bottom: 0;
}

.jobs-cta-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.jobs-cta-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 520px;

    object-fit: cover;

    box-shadow: 0 0.75rem 2rem rgba(29, 58, 83, 0.10);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

@media (hover: hover) {

    .jobs-cta-image:hover {
        transform: translateY(-4px);

        box-shadow:
            0 1rem 2.5rem rgba(29, 58, 83, 0.14);
    }

}

@media (max-width: 991.98px) {

    .jobs-cta-image {
        max-height: 420px;
    }

}

@media (max-width: 575.98px) {

    .jobs-cta-image {
        max-height: none;
    }

}


/* ===========================================
   JOBS CONTACT
   =========================================== */


/* ===========================================
   Kopfbereich
   =========================================== */

.jobs-contact-heading {
    color: var(--bs-primary);
}


/* ===========================================
   Bild
   =========================================== */

.jobs-contact-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}


.jobs-contact-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: 420px;
    max-height: 360px;

    object-fit: cover;

    box-shadow:
        0 0.75rem 2rem rgba(29, 58, 83, 0.10);
}


/* ===========================================
   Textbereiche
   =========================================== */

.jobs-contact-block {
    height: 100%;
}


.jobs-contact-text {
    color: var(--bs-body-color);
    line-height: 1.5;
}


.jobs-contact-text > *:last-child {
    margin-bottom: 0;
}


/* ===========================================
   Kontaktlinks
   =========================================== */

.jobs-contact-link {
    display: inline-flex;
    align-items: center;

    gap: 0.75rem;

    color: var(--bs-body-color);
    text-decoration: none;

    font-size: 1.1rem;
}


.jobs-contact-link i {
    flex: 0 0 auto;

    color: var(--bs-primary);
    font-size: 1.5rem;
}


.jobs-contact-link:hover,
.jobs-contact-link:focus {
    color: var(--bs-primary);
}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    .jobs-contact-image {
        max-width: 380px;
        max-height: 330px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 767.98px) {

    .jobs-contact-image-wrapper {
        justify-content: flex-start;
    }

    .jobs-contact-image {
        max-width: 320px;
        max-height: none;
    }

}


/* ===========================================
   Kleine Smartphones
   =========================================== */

@media (max-width: 575.98px) {

    .jobs-contact-link {
        font-size: 1rem;
    }

    .jobs-contact-link i {
        font-size: 1.3rem;
    }

}


/* ===========================================
   JOBS BENEFITS
   =========================================== */

/* ===========================================
   Flex-Grid
   =========================================== */

.jobs-benefits-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 2rem;
}


/* ===========================================
   Card
   Desktop: 5 pro Reihe
   =========================================== */

.jobs-benefits-card {
    flex: 0 0 calc(20% - 1.6rem);

    min-height: 190px;

    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


@media (hover: hover) {

    .jobs-benefits-card:hover {
        transform: translateY(-5px);

        box-shadow:
            0 0.75rem 2rem rgba(29, 58, 83, 0.10);
    }

}


/* ===========================================
   Icon
   =========================================== */

.jobs-benefits-icon {
    color: var(--bs-primary);

    font-size: 4rem;
    line-height: 1;
}


.jobs-benefits-icon-image {
    display: block;

    width: auto;
    max-width: 100px;
    max-height: 80px;

    object-fit: contain;
}


/* ===========================================
   Titel
   =========================================== */

.jobs-benefits-title {
    color: var(--bs-gray-900);

    font-weight: 500;
    line-height: 1.35;
}


/* ===========================================
   Kleinere Desktops
   4 pro Reihe
   =========================================== */

@media (max-width: 1399.98px) {

    .jobs-benefits-card {
        flex-basis: calc(25% - 1.5rem);
    }

}


/* ===========================================
   Tablet
   3 pro Reihe
   =========================================== */

@media (max-width: 991.98px) {

    .jobs-benefits-card {
        flex-basis: calc(33.333% - 1.35rem);
    }

}


/* ===========================================
   Kleine Tablets
   2 pro Reihe
   =========================================== */

@media (max-width: 767.98px) {

    .jobs-benefits-grid {
        gap: 1.5rem;
    }

    .jobs-benefits-card {
        flex-basis: calc(50% - 0.75rem);
    }

}


/* ===========================================
   Smartphone
   1 pro Reihe
   =========================================== */

@media (max-width: 575.98px) {

    .jobs-benefits-card {
        flex-basis: 100%;

        min-height: 160px;
    }

}


/* ===========================================
   JOBS KEYFACTS
   =========================================== */

.jobs-keyfacts-heading {
    color: var(--bs-primary);
}


/* ===========================================
   Flex-Grid
   =========================================== */

.jobs-keyfacts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    gap: 2rem;
}


/* ===========================================
   Card
   Desktop: 4 pro Reihe
   =========================================== */

.jobs-keyfacts-card {
    flex: 0 0 calc(25% - 1.5rem);

    min-height: 230px;

    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}


/* ===========================================
   Icon
   =========================================== */

.jobs-keyfacts-icon {
    color: var(--bs-primary);

    font-size: 3rem;
    line-height: 1;
}


/* ===========================================
   Text
   =========================================== */

.jobs-keyfacts-title {
    color: var(--bs-gray-900);

    font-weight: 700;
    line-height: 1.3;
}


.jobs-keyfacts-text {
    color: var(--bs-body-color);

    font-size: 0.9375rem;
    line-height: 1.45;
}


.jobs-keyfacts-text > *:last-child {
    margin-bottom: 0;
}


/* Listen aus dem RTE */
.jobs-keyfacts-text ul,
.jobs-keyfacts-text ol {
    margin-bottom: 0;

    padding-left: 1.25rem;

    text-align: left;
}


/* ===========================================
   Tablet
   2 pro Reihe
   =========================================== */

@media (max-width: 991.98px) {

    .jobs-keyfacts-card {
        flex-basis: calc(50% - 1rem);
    }

}


/* ===========================================
   Smartphone
   1 pro Reihe
   =========================================== */

@media (max-width: 575.98px) {

    .jobs-keyfacts-grid {
        gap: 1.5rem;
    }

    .jobs-keyfacts-card {
        flex-basis: 100%;

        min-height: 0;
    }

}


/* =========================================================
   ACCORDIONS
   ========================================================= */

/* FAQ-Akkordeon */
/* Geschlossene Elemente */
.faq-akkordeon .accordion-button[aria-expanded="false"] {
    background: var(--bs-primary) !important;
    color: #fff !important;
}

/* Geöffnete Elemente */
.faq-akkordeon .accordion-button[aria-expanded="true"] {
    background: var(--bs-secondary) !important;
    color: #fff !important;
}

/* Text immer weiß */
.faq-akkordeon .accordion.accordion-icon .accordion-header .accordion-button {
    color: #fff !important;
}

/* Plus-/Minus-Symbol immer weiß */
.faq-akkordeon .accordion.accordion-icon .accordion-header .accordion-button::before,
.faq-akkordeon .accordion.accordion-icon .accordion-header .accordion-button::after {
    background: #fff !important;
    border-color: #fff !important;
}

/* ===========================================
   Leistungen Akkordeon
   =========================================== */
.leistungen-akkordeon .accordion-button {
    background-color: var(--accordion-color);
    color: #fff;
}

.leistungen-akkordeon .accordion-button:not(.collapsed) {
    background-color: var(--accordion-color);
    color: #fff;
}

.leistungen-akkordeon .accordion-button:focus {
    border-color: var(--accordion-color);
    box-shadow: none;
}

.leistungen-akkordeon .accordion-button::after {
    color: #fff !important;
}
.accordion.accordion-icon .accordion-header .accordion-button:before {

    background: #FFF !important;

}
.accordion.accordion-icon .accordion-header .accordion-button:after {
    background: #FFF !important;
}

/* ===========================================
   HISTORY / MEILENSTEINE
   =========================================== */


/* ===========================================
   Kopfbereich
   =========================================== */

/* ===========================================
   Swiper
   =========================================== */

.history-swiper {
    position: relative;
    overflow: hidden;
    padding-top: 1rem;
}


/* Wrapper über der Timeline */
.history-swiper .swiper-wrapper {
    align-items: stretch;
}


.history-swiper .swiper-slide {
    height: auto;
}


/* ===========================================
   History Slider Navigation
   =========================================== */

.history-nav {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary) !important;
}


/* Hover */
.history-nav:hover,
.history-nav:focus {
    color: #fff;
    background-color: var(--bs-link-hover-color);
    border-color: var(--bs-link-hover-color) !important;
}


/* deaktivierter Zustand */
.history-nav.swiper-button-disabled {
    color: var(--bs-primary);
    background-color: transparent;
    border-color: var(--bs-primary) !important;

    opacity: 0.35;
    pointer-events: none;
}


/* ===========================================
   Timeline-Linie
   =========================================== */

.history-timeline-line {
    position: absolute;

    top: 93px;
    left: 0;
    right: 0;

    z-index: 0;

    height: 2px;

    background-color: var(--bs-primary);
}


/* ===========================================
   Einzelner Meilenstein
   =========================================== */

.history-item {
    position: relative;

    display: flex;
    flex-direction: column;
}


/* ===========================================
   Icon / Marker
   =========================================== */

.history-marker {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;

    height: 105px;
}


/* Icon-Kreis */
.history-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border-radius: 50%;

    background-color: var(--bs-gray-200);
    color: var(--bs-gray-900);

    font-size: 1.75rem;
    line-height: 1;
}


.history-icon i {
    display: block;

    line-height: 1;
}


/* Punkt auf der Timeline */
.history-dot {
    position: absolute;

    bottom: 7px;
    left: 50%;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background-color: var(--bs-primary);

    transform: translateX(-50%);
}


/* ===========================================
   Card
   =========================================== */

.history-card {
    position: relative;

    flex-grow: 1;

    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
}


/* ===========================================
   Jahr / Phase
   =========================================== */

.history-year {
    color: var(--bs-primary);

    font-size: 0.875rem;
    font-weight: 600;
}


/* ===========================================
   Überschrift
   =========================================== */

.history-title {
    color: var(--bs-gray-900);

    font-weight: 700;
    line-height: 1.35;
}


/* ===========================================
   Text
   =========================================== */

.history-text {
    color: var(--bs-body-color);

    font-size: 0.9375rem;
    line-height: 1.5;
}


.history-text > *:last-child {
    margin-bottom: 0;
}


/* ===========================================
   Bild
   =========================================== */

.history-image-wrapper {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}


.history-image {
    display: block;

    width: 100%;
    height: auto;

    max-height: 260px;

    object-fit: contain;

    transition: transform 0.4s ease;
}


/* leichtes Bild-Hover */
@media (hover: hover) {

    .history-card:hover .history-image {
        transform: scale(1.025);
    }

}


/* ===========================================
   Slider Navigation
   =========================================== */

.history-prev.swiper-button-disabled,
.history-next.swiper-button-disabled {
    opacity: 0.35;

    pointer-events: none;
}


/* ===========================================
   Tablet
   =========================================== */

@media (max-width: 991.98px) {

    .history-image {
        max-height: 240px;
    }

}


/* ===========================================
   Smartphone
   =========================================== */

@media (max-width: 575.98px) {

    .history-swiper {
        padding-top: 0.5rem;
    }


    .history-marker {
        height: 95px;
    }


    .history-icon {
        width: 56px;
        height: 56px;

        font-size: 1.5rem;
    }


    .history-timeline-line {
        top: 81px;
    }


    .history-dot {
        bottom: 6px;

        width: 10px;
        height: 10px;
    }


    .history-card .card-body {
        padding: 1.5rem !important;
    }


    .history-image {
        max-height: 300px;
    }

}


/* ===========================================
   NEWS DETAIL
   =========================================== */


/* ===========================================
   Gemeinsame Inhaltsbreite
   =========================================== */

.news-detail-header,
.news-detail-teaser,
.news-detail-main-media,
.news-detail-content,
.news-detail-gallery,
.news-detail-tags,
.news-backlink-wrap,
.news-related-wrap {
    width: 100%;
    max-width: 1000px;
}


/* ===========================================
   Artikelkopf
   =========================================== */

.news-detail-label {
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

.news-detail-title {
    max-width: 100%;
}

.news-detail-meta {
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-size: 0.9rem;
}

.news-detail-meta-item {
    display: flex;
    align-items: center;
}


/* ===========================================
   Bilder / Galerie
   =========================================== */

.news-detail-image {
    position: relative;
}

.news-detail-image a {
    display: block;
    overflow: hidden;
    border-radius: var(--bs-border-radius-lg);
}

.news-detail-image img {
    display: block;
    width: 100%;
    height: auto;

    border-radius: var(--bs-border-radius-lg);

    transition: transform 0.35s ease;
}

.news-detail-image figure {
    margin-bottom: 0;
}

.news-detail-image-main img {
    max-height: 680px;
    object-fit: cover;
}


/* Hover */
@media (hover: hover) {

    .news-detail-image a:hover img {
        transform: scale(1.025);
    }

}


/* Fokus */
.news-detail-image a:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 3px;
}


/* ===========================================
   Artikelinhalt
   =========================================== */

.news-detail-teaser {
    color: var(--bs-secondary-color);
    line-height: 1.6;
}

.news-detail-teaser > *:last-child,
.news-detail-body > *:last-child {
    margin-bottom: 0;
}

.news-detail-body {
    line-height: 1.7;
}

.news-detail-body p {
    margin-bottom: 1.25rem;
}


/* ===========================================
   Tags
   =========================================== */

.news-detail-tags .badge {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
}


/* ===========================================
   Related
   =========================================== */

.news-related .list-group-item {
    padding: 1rem 1.25rem;
}


/* ===========================================
   Responsive
   =========================================== */

@media (max-width: 767.98px) {

    .news-detail-title {
        font-size: calc(1.4rem + 1.2vw);
    }

    .news-detail-meta {
        gap: 0.75rem !important;
    }

}


/* ===========================================
   NEWS PAGINATION
   =========================================== */

.news-pagination .pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 0.9rem;

    --bs-pagination-color: var(--bs-body-color);
    --bs-pagination-bg: transparent;
    --bs-pagination-border-color: var(--bs-border-color);

    --bs-pagination-hover-color: #fff;
    --bs-pagination-hover-bg: var(--bs-primary);
    --bs-pagination-hover-border-color: var(--bs-primary);

    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);

    --bs-pagination-disabled-bg: transparent;
}


/* Einzelner Button */
.news-pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;
    border-radius: 50% !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Hover */
.news-pagination .page-link:hover {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* Aktuelle Seite */
.news-pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* Pfeile */
.news-pagination-arrow {
    font-size: 1rem;
}


/* Punkte */
.news-pagination .news-pagination-dots {
    border-color: transparent;
    background: transparent;
}

.news-pagination .news-pagination-dots:hover {
    color: var(--bs-body-color);
    background: transparent;
    border-color: transparent;
}


/* Fokus */
.news-pagination .page-link:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.2);
    outline: 0;
}


/* Mobile */
@media (max-width: 575.98px) {

    .news-pagination .pagination {
        gap: 0.35rem !important;
    }

    .news-pagination .page-link {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   HEADER / NAVIGATION
   ========================================================= */

.header-sticky.header-absolute.header-sticky-on .header-info,
.header-sticky.header-absolute.header-sticky-on .topButtons {
  display: none;
}


.header-sticky.header-absolute.header-sticky-on .logo-normal {
    display: none;
}
.header-sticky.header-absolute.header-sticky-on .logo-sticky {
    display: block!important;
}

.navbar {
    --bs-navbar-brand-padding-y: 20px;
    padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}

.dropdown-menu .dropdown-item::before {
  content: "\F138";
  font-family: "bootstrap-icons";
  display: inline-block;
  margin-right: 8px;
  font-size: 1rem;
  transform: translateY(2px);
}

@media (max-width: 1199.98px) {

  .dropdown-menu .dropdown-item.dropdown-toggle::before {
    content: "\F138";
    font-family: "bootstrap-icons";
    display: inline-block !important;

    position: static !important;
    width: auto !important;
    height: auto !important;

    margin-right: 8px;

    background: none !important;

    transform: translateY(2px) !important;
  }

}

/* Default: Navbar über dem Mainvisual */
.header-sticky .nav-link {
  color: #fff;
  font-weight: 600;
}

/* Zustand beim Scrollen */
.header-sticky.header-sticky-on {
  background: #fff;

}

/* Links im Sticky Zustand */
.header-sticky.header-sticky-on .nav-link, .header-sticky.nav-subpage .nav-link {
  color: #666;
    font-weight: 600;
}
/*
@media (max-width: 991px) {

  .navbar-collapse {
    background: #fff;
  }

  .navbar-collapse .nav-link {
    color: #666;
  }

}
*/
@media (max-width: 1199.98px) {

  .header-sticky .navbar-collapse {
    background: #fff;
  }

  .header-sticky .navbar-collapse .nav-link {
    color: #666 !important;
  }

  .header-sticky .navbar-collapse .nav-link.active,
  .header-sticky .navbar-collapse .nav-link.show {
    color: var(--bs-primary) !important;
  }

}

.header-sticky.header-sticky-on .navbar {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.navbar-brand {
  margin-right: 1rem !important;
}

.logo-header {
  max-width: 100%;
  width: auto;
}

@media (max-width: 600px) {
  .navbar-brand {
    max-width: calc(100% - 64px);
  }

  .logo-header {
    /*height: 120px !important;*/
    max-width: 100%;
  }
}

.top-phone-btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (min-width: 1200px) and (max-width: 1399.98px) {

  .top-phone-btn .phone-number {
    display: none;
  }

}

/* Navigation im Ausgangszustand */
.header-sticky .navbar.navbar-transparent {
    background-color: rgba(20, 20, 20, 0.6) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition:
        background-color 0.35s ease,
        box-shadow 0.35s ease;
}

/* Navigation nach dem Scrollen */
.header-sticky.header-sticky-on .navbar.navbar-transparent {
    background-color: #fff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Links im Ausgangszustand */
.header-sticky:not(.header-sticky-on) .navbar.navbar-transparent .nav-link {
    color: #fff;
}

/* Links nach dem Scrollen */
.header-sticky.header-sticky-on .navbar.navbar-transparent .nav-link {
    color: #666;
}

/* Barrierefrei: sichtbarer Tastaturfokus in der Hauptnavigation */
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible,
.navbar .dropdown-item:focus,
.navbar .dropdown-item:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px currentColor !important;
  border-radius: 0.25rem;
}

/* =========================================================
   Barrierefreiheit: sichtbarer Fokus für alle Elemente
   ========================================================= */

/* -------------------------
   Links & Navigation
   ------------------------- */
a:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px #ff3300 !important;
  border-radius: 0.25rem;
  background-color: transparent !important;
  /*color: inherit !important;*/
}

/* -------------------------
   Buttons & Formulare
   ------------------------- */
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.accordion-button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #ff3300 !important;
}

/* -------------------------
   Spezielle Bootstrap-Fälle
   ------------------------- */
.navbar .nav-link:focus-visible {
  /*color: inherit !important;*/
}

.dropdown-item:focus-visible {
  color: var(--bs-dropdown-link-color) !important;
}


/* -------------------------
   Fallback für ältere Browser
   ------------------------- */
@supports not selector(:focus-visible) {

  a:focus,
  .nav-link:focus,
  .dropdown-item:focus {
    outline: none !important;
    box-shadow: inset 0 0 0 2px #ff3300 !important;
    border-radius: 0.25rem;
    background-color: transparent !important;
    color: inherit !important;
  }

  button:focus,
  .btn:focus,
  input:focus,
  select:focus,
  textarea:focus,
  .accordion-button:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px #ff3300 !important;
  }
}

/* =========================================================
   Skip-Link
   Ganz ans Ende der custom.css setzen
   ========================================================= */

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 10000;
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000;
  border-radius: 0.25rem;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  transform: translateY(-200%);
  transition: transform 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0) !important;
  outline: none !important;
  box-shadow:
    0 0 0 3px #ff3300,
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: #ffffff !important;
  color: #000000 !important;
}