@font-face {
    font-family: 'metrophobic';
    src: url('../Fonts/Metrophobic-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: auto;
}
:root {
    --bs-font-sans-serif: "Helvetica Neue";
    --bs-border-radius: 1.5rem;
    --bs-border-radius-ohne: 0;
    --bs-border-width: 0.2rem;
    --bs-border-width-ohne: 0;
    --bs-orange: #F0BC1E;
    --bs-emphasis-color-rgb: #F0BC1E;
    --bs-anthrazit: #2C353D;
    --bs-mgrau: #5b646b;
    --bs-hgrau: #e1e1e1;
    --bs-white: #ffffff;
    --bs-navbar-brand-padding-y: 1.5rem;
}

html {
  font-size: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16–18px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #444;
  -webkit-text-size-adjust: 100%;
}

/* Fließtext */
p,
li,
input,
button,
textarea,
select {
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16–18px */
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'metrophobic', 'HelveticaNeue', 'Helvetica Neue', 'Helvetica-Neue', Helvetica, Arial, sans-serif;
    color: var(--bs-anthrazit);
    display: flex;
    flex-direction: column;
}

startpage h1 {
    font-size: clamp(2rem, 1.5rem + 1.6vw, 2.5rem); /* 32–40px */   
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 2rem!important;
    margin-bottom: 3rem;
}

startpage h2 {
    font-size: clamp(1.75rem, 1.35rem + 1vw, 2.1875rem); /* 28–35px */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

h2 {
    font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.625rem);
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

.text-center h1, text-center h2, text-center h3, h1.text-center, h2.text-center, h3.text-center {
    align-items: center;
}

h3 {
    font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.5625rem); /* 21–25px */
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1em;
    color: var(--bs-mgrau);
}

h4 {
  font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 18–20px */
}

h5 {
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16–18px */
}

h6 {
  font-size: 1rem;
}

h1:after {
    content: " ";
    background: var(--bs-orange);
    margin-top: 0.5rem;
    width: 20%;
    height: 1px;
}

h2:after {
    content: "";
    display: block;
    height: 1px;
    background: #ccc;
    flex: 1 1 auto;
}

startpage h2:after {
    content: " ";
    background: var(--bs-orange);
    margin-top: 0.5rem;
    width: 10%;
    height: 1px;
}

a {
    color: var(--bs-anthrazit);
    text-decoration: none;
    
}

a:hover, a.aktiv {
    color:  var(--bs-orange);
}

a img:hover {
    opacity: 0.7;
    transition: opacity 0.4s ease-in-out;
    overflow: hidden;
}

a[href^="mailto:"]::before {
  content: "\F32F";
  display: inline-block;
  font-family: bootstrap-icons;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -.125em;
  margin-right: 0.25em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

aside {
    border-left: var(--bs-hgrau);
}

aside h5 {
    border: 1px solid var(--bs-hgrau);
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1em;
    color: var(--bs-mgrau);
}

img {
    width: 100%;
    height: auto;
}

.teaser img {
    margin-bottom: 3rem;
}
.orange {
    color:  var(--bs-orange);
}
.bg-orange {
   background-color:   var(--bs-orange);
}
.bg-black {
   background-color:   #000;
}

.col-lg-6:first-of-type, .col-lg-9 {
   /* padding-right: 5rem;*/
}

.aside.col-lg-3, .aside.col-lg-6:last-of-type {
    border-left: 1px solid var(--bs-hgrau);
}

/* ###################### */
/* Navigation */
/* ###################### */

.bg-black {
    background-color: #fff !important;
    color: #000 !important;
}

@media (min-width: 992px) {
    .bg-black {
        background-color: #000 !important;
        color: #fff !important;
    }
}

.navbar {
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
}

.navbar-toggler {
    border: var(--bs-border-width-ohne);
    justify-content: flex-end;
}

.navbar-nav {
    --bs-nav-link-hover-color: var(--bs-orange);
}

.navbar-brand img {
    width: 180px;
}

.navbar > .container-fluid {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.nav-link {
    font-size: 1.125; /*20px */
    line-height: 1.4;
    font-weight: 500;
}

.bi-search {
    color: #000;
}

@media (min-width: 992px) {
    .navbar {
        --bs-navbar-color: var(--bs-white);
        --bs-navbar-nav-link-padding-x: 0.75rem;
        --bs-navbar-toggler-padding-y: 0.25rem;
    }

    .navbar-brand img {
        width: auto;
        max-width: 300px;
    }

    .navbar > .container-fluid {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: stretch;
        justify-content: space-between;
    }

    .nav-link {
        color: var(--bs-white);
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link.show {
        color: var(--bs-white);
    }

    .nav-link:hover,
    .navbar-nav .nav-link.active,
    .nav-link:focus {
        color: var(--bs-orange);
    }

    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
        background-color: var(--bs-anthrazit);
    }

    .bi-search {
        color: #fff;
    }

    .navbar .nav-search {
        margin-left: auto;
    }
}

.dropdown-toggle::after {
    display: none;
}

/* ###################### */
/* Offcanvas */
/* ###################### */

.offcanvas {
    --bs-offcanvas-width: 250px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
}

.offcanvas.show .nav-item {
    border-bottom: 1px solid var(--bs-hgrau);
}

.offcanvas.show .nav-link {
    font-size: 1.25rem;
    line-height: 1.4;
    font-weight: 500;
}

.offcanvas.show .dropdown-menu {
    border: 0;
    font-size: 1rem;
}

.offcanvas.show .dropdown-item {
    border: 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

.dropdown-item.active, .dropdown-item:active {
    color: #F0BC1E;
    text-decoration: none;
    background-color: #fff;
}

/* ###################### */
/* Desktop-Dropdowns */
/* ###################### */

@media (min-width: 992px) {
    .dropdown-menu {
        --bs-dropdown-font-size: 0.95rem;
        --bs-dropdown-color: var(--bs-white);
        --bs-dropdown-bg: var(--bs-anthrazit);
        --bs-dropdown-border-color: var(--bs-border-color-translucent);
        --bs-dropdown-border-radius: var(--bs-border-radius);
        --bs-dropdown-border-width: var(--bs-border-width);
        --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
        --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
        --bs-dropdown-divider-margin-y: 0.5rem;
        --bs-dropdown-link-color: var(--bs-white);
        --bs-dropdown-link-hover-color: var(--bs-orange);
        --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
        --bs-dropdown-link-active-color: #fff;
        --bs-dropdown-link-active-bg: var(--bs-orange);
        --bs-dropdown-item-padding-x: 1rem;
        --bs-dropdown-item-padding-y: 0.35rem;
        --bs-dropdown-header-color: var(--bs-white);
        --bs-dropdown-header-padding-x: 1rem;
        --bs-dropdown-header-padding-y: 0.5rem;
        position: absolute;
        z-index: var(--bs-dropdown-zindex);
        display: none;
        min-width: var(--bs-dropdown-min-width);
        padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
        margin: 0;
        color: var(--bs-dropdown-color);
        text-align: left;
        list-style: none;
        background-color: var(--bs-dropdown-bg);
        background-clip: padding-box;
        border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
        border-radius: var(--bs-dropdown-border-radius);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--bs-dropdown-link-hover-color);
        background-color: var(--bs-anthrazit);
    }

    .dropdown form {
        min-width: 15em;
        padding-right: 0.5rem;
    }
}

.dropdown-menu,
.dropdown-menu .btn,
.dropdown-menu .form-control {
    border-radius: var(--bs-border-radius-ohne);
}

/* ###################### */
/* Suche */
/* ###################### */

.search-box button {
    background-color: var(--bs-orange);
    border: none;
    color: #fff;
}

.search-box button i {
    font-size: 1rem;
}


/* ###################### */
/* Carousel */
/* ###################### */

.carousel-item img {
    height: 55vh;
    min-height: 320px;
    max-height: 520px;
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    padding: 12px;
}

.carousel-caption h2,
.carousel-caption p {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    margin: 0 0 6px 0;
    width: 100%;
    box-sizing: border-box;
}

.carousel-caption h2 {
    font-size: 1.4rem;   /* ~22px */
    line-height: 1.15;
    padding: 8px 10px;
}

.carousel-caption p {
    font-size: 0.95rem;  /* ~15px */
    line-height: 1.4;
    padding: 8px 10px;
}

.carousel-caption a {
    margin-top: 8px;
}

.carousel-caption h2:after {
    display: none;
}

/* Mobile: alle Positionen unten links behandeln */
.oben-links,
.unten-links,
.oben-rechts,
.unten-rechts {
    left: 0;
    right: 0;
    align-items: flex-start;
    justify-content: flex-end;
}

/* Desktop */
@media (min-width: 992px) {
    .carousel-item img {
        height: 65vh;
        max-height: 700px;
    }

    .carousel-caption {
        width: min(40%, 36rem);
        left: 5%;
        bottom: 5%;
        padding: 0;
    }

    .carousel-caption h2 {
        font-size: 2rem;   /* ~32px */
        line-height: 1.1;
        padding: 12px 18px;
    }

    .carousel-caption p {
        font-size: 1.05rem; /* ~17px */
        padding: 12px 18px;
    }
}
    .oben-links {
        left: 5%;
        right: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .unten-links {
        left: 5%;
        right: auto;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .oben-rechts {
        right: 5%;
        left: auto;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .unten-rechts {
        right: 5%;
        left: auto;
        align-items: flex-start;
        justify-content: flex-end;
    }
}

/* ###################### */
/* main */
/* ###################### */

main {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

aside {
    border-left: 1px solid var(--bs-hgrau);
}
aside {
        ul {
            list-style-type: none;
            padding-inline-start: 0;
        }
}

/* ###################### */
/* footer */
/* ###################### */

footer {
    background-color: var(--bs-anthrazit);
    color: var(--bs-white);
    padding: 4rem 0 3rem 0;
    z-index: 1;
}

footer .row {
    --bs-gutter-x: 10rem;
}

footer .col-lg-6 {
    border-left: none!important;
}

footer h3 {
    color: var(--bs-white);
    border: 1px solid var(--bs-gray-600);
    padding: 10px 0;
    border-left: none;
    border-right: none;
    margin-bottom: 1.25rem;
}

footer a {
    color: var(--bs-white);
}

footer ul {
    list-style: none;
    padding-left: 0;
}
.copyright {
    color: var(--bs-white);
    background-color: var(--bs-mgrau);
    padding:  1rem 0 1rem 0;
}

/* ###################### */
/* Buttons */
/* ###################### */

.btn {
    --bs-btn-font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); /* 16–18px */
    --bs-btn-padding-x: 1.75rem;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-orange);
    --bs-btn-border-color: var(--bs-orange);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg:var(--bs-orange);
    --bs-btn-hover-border-color: var(--bs-orange);
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-orange);
    --bs-btn-active-border-color: var(--bs-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-orange);
    --bs-gradient: none;
}
.btn-outline-primary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-orange);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-orange);
    --bs-btn-active-border-color: var(--bs-orange);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-orange);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-orange);
    --bs-gradient: none;
}

/* ###################### */
/* Kompetenzen Startseite */
/* ###################### */

.border-yellow {
  border-color: #efbb20 !important;
}

/* ###################### */
/* 4 Teaser  Startseite */
/* ###################### */

.parallax-section {
      background-image: url('../Images/backgroundfade.jpg');
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 80px 0;
      color: white;
      text-align: center;
      /*top: auto; transform: translate3d(0px, 266px, 0px); height: 839px;*/
    }

.parallax-section h2 {
    color:#fff;
    justify-content: space-evenly;
    margin: 0 0 4rem 0;
}
/*.parallax-section h2:after,*/ .parallax-section h3:after {
      content: none;
}
.heading-border {
      width: 50px;
      height: 4px;
      background-color: #efbb20;
      margin: 0 auto 35px;
}

.iconbox {
    position: relative !important;
    background: white;
    border-radius: 0;
    padding: 60px 20px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s ease;
}

.iconbox:hover {
    transform: translateY(-5px);
}

.iconbox-icon {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #f5c209;
    color: white;
    font-size: 32px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

h3.iconbox-title {
    margin-top: 20px;
    font-size: 1.25rem;
    font-weight: 600;
}

h3.iconbox-title:after {
      content: none;
}

@media (max-width: 767.98px) {
    .iconbox {
        margin-top: 40px;
      }
    }

.iconbox-icon {
  position: absolute !important;
}


/* ####################################### */
/*       Animationen  ausserhalb Slider   */
/* ######################################*/

.animation-bottom-to-top {
    animation-name: ani-btt;
    animation-fill-mode: both;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
}

@keyframes ani-btt {
    0% {
    transform: translateY(50%);
    opacity: 0;
    }
    100% {
    transform: translateY(0);
    opacity: 1;
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeIn 1s ease-out forwards;
}

.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.8s; }
.delay-4 { animation-delay: 1.2s; }

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
        }
    }
    .fade-in-up {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 1s ease-out forwards;
    }

@keyframes fadeInUp {
    to {
       opacity: 1;
       transform: translateY(0);
      }
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-20px);
    animation: fadeInLeft 1s ease-out forwards;
}

@keyframes fadeInLeft {
    to {
      opacity: 1;
      transform: translateX(0);
    }
}