:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fa9f08;
  --yellow: #fed136;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #fa9f08;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #fed136;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: "Montserrat", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  position: relative;
}

header,
footer,
nav,
main,
section {
  display: block;
}





section {
  font-family: "Montserrat",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
}


html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.section-container-padding {
  padding-top: 6em !important;
  padding-bottom: 6em !important;
}

/*********************************************/
/*             Hero Section Index            "/
/*********************************************/

#hero {
  position: relative;
  height: 100vh;
  background-image: url(../img/book_with_glasses.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(124, 86, 28, 0.699);
}

/*********************************************/
/*           Hero Section Impressum          "/
/*********************************************/

#heroImpressum {
  position: relative;
  height: 60vh;
  background-image: url(../img/book_with_glasses.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#heroImpressum .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(124, 86, 28, 0.562);
}

/*********************************************/
/*             Hero Section DSGVO            "/
/*********************************************/

#heroDSGVO {
  position: relative;
  height: 60vh;
  background-image: url(../img/book_with_glasses.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

#heroDSGVO .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(124, 86, 28, 0.562);
}


/*********************************************/
/*                   Navbar                  "/
/*********************************************/


#mainNav .navbar-brand img {
  height: 5rem;
  transition: height 0.3s ease-in-out;
}



@media (max-width: 991px) {
  #mainNav {
    background-color: #212529c5;
  }

  .navbar-light,
  .navbar-toggler,
  .nav-link,
  .navbar-toggler-icon {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
  }
}

.navbar-toggler-icon-custom {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(250, 159, 8, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border: none;
    /* background-color: rgba(31, 30, 36, 0.3); */
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }

  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }

  #mainNav .navbar-brand img {
    height: 5rem;
    transition: height 0.3s ease-in-out;
  }

  #mainNav.navbar-shrink,
  #mainNav.navbar-non-shrink {
    background-color: var(--primary);
  }

  #mainNav.navbar-shrink .navbar-brand,
  #mainNav.navbar-non-shrink .navbar-brand {
    font-size: 1em;
  }

  #mainNav.navbar-shrink .navbar-brand svg,
  #mainNav.navbar-shrink .navbar-brand img,
  #mainNav.navbar-non-shrink .navbar-brand svg,
  #mainNav.navbar-non-shrink .navbar-brand img {
    height: 4rem;
  }

  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }

  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
}

#mainNav .navbar-nav .nav-item {
  font-size: 1.8em;
  font-weight: bold;
}

#mainNav .nav-link:hover {
  border-bottom: 1px solid;
}

/* Dropdown-Menü allgemein */
#mainNav .dropdown-menu {
  background-color: #fff; /* heller Hintergrund für Lesbarkeit */
  border-bottom: none;           
  border-radius: 0.5rem;  
  padding: 0.5rem 0;
  padding-inline: 1rem;
  margin-inline: 1rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

#mainNav .dropdown .nav-link.dropdown-toggle:hover {
  border-bottom: none;
}

/* Einzelne Items */
#mainNav .dropdown-item {
  font-size: 1.2em;       
  font-weight: 500;       
  color: #212529;         /* gleiche Schriftfarbe wie Hauptnav */
  padding: 0.5rem 1.5rem;
  transition: all 0.2s ease-in-out;
}

/* Hover- und Fokus-Effekt */
#mainNav .dropdown-item:hover,
#mainNav .dropdown-item:focus {
  background-color: #fa9f08; /* deine Primary-Farbe */
  color: #fff;               
  border-radius: 0.3rem;
}

/* Aktives Item (z. B. wenn Seite geöffnet ist) */
#mainNav .dropdown-item.active {
  background-color: #fa9f08;
  color: #fff;
}


/*********************************************/
/*                SVG Divider                "/
/*********************************************/

.shape-container {
  position: relative;
}

/* Shape 1 */

.custom-shape-divider-bottom-1625597304 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1625597304 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

.custom-shape-divider-bottom-1625597304 .shape-fill {
  fill: #f8f9fa;
}

.custom-shape-divider-bottom-1625598888 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-bottom-1625598888 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

.custom-shape-divider-bottom-1625598888 .shape-fill {
  fill: #212529;
}


/* SHAPE 2 */
.custom-shape-divider-top-1625935245 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

.custom-shape-divider-top-1625935245 svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

.custom-shape-divider-top-1625935245 .shape-fill {
  fill: #f8f9fa;
}



.shape-exclusion-fill {
  fill: #ececec;
}

/*********************************************/
/*                Feature Icon               "/
/*********************************************/

.feature-icon {
  height: 7rem;
  font-size: 4.5em;
  color: var(--primary);
}

.feature-icon:hover {
  font-size: 5rem;
}


/*********************************************/
/*              Services Section             "/
/*********************************************/

#services {
  font-size: 1.2em;
}

@media (max-width: 576px) {

  #services .banner-heading {
    font-size: 20px;
    line-break: normal;
  }


  #services .banner-text {
    font-size: 16px !important;
  }

}

/*********************************************/
/*                DSMS Section               "/
/*********************************************/

#dsms {
  background-color: #ececec;
  font-size: 1.2em;
}

/*********************************************/
/*             Exclusion Section             "/
/*********************************************/

#exclusion {
  font-size: 1.5em;
}

/*********************************************/
/*               DSGVO Section               "/
/*********************************************/

#dsgvo {
  background-color: #ececec;
  font-size: 1.2em;
}

#dsgvo .text-container {
  background-color: #ff9d0050;
}

/* #dsgvo {
  position: relative;
  height: 100vh;
  background-image: url(../img/EU_FLAGS.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;

}

#dsgvo .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(207, 134, 24, 0.808);
} */


/*********************************************/
/*             About-Us Section              "/
/*********************************************/

#about-us {
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  font-size: 1.2em;
  background-color: #f8f9fa;
}

#about-us h1 {
  color: var(--primary)
}

/* #about-us .overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-color: rgba(245, 194, 107, 0.808);
} */

#about-us .card-img-container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: -50px;
  left: 50%;
  margin-left: -50px;
  border-radius: 50%;
  overflow: hidden;
}

/*********************************************/
/*              Contact Section              "/
/*********************************************/
#contact {
  background-color: #4e4e56;
}

#contact h1 {
  color: var(--primary)
}

#contact .custom-shape-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

#contact .custom-shape-divider-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

#contact .custom-shape-divider-top .shape-exclusion-fill {
  fill: #ffffff;
}

/*********************************************/
/*              Logos Section              "/
/*********************************************/
#logos {
  background-color: #ffffff;
}


#logos .custom-shape-divider-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg);
}

#logos .custom-shape-divider-top svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 84px;
}

#logos .custom-shape-divider-top .shape-exclusion-fill {
  fill: #f8f9fa;
}

/*********************************************/
/*              Footer Section              "/
/*********************************************/

#footer {
  color: var(--primary);
}


/*********************************************/
/*               Flipping Cards              "/
/*********************************************/

/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 200px;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
  box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 10%);

}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  padding: 16px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  text-align: center;
  background-color: #e0e0e0;
  color: black;
}

.flip-card-front svg {
  font-size: 3em;
  color: var(--primary);
}

/* Style the back side */
.flip-card-back {
  background-color: var(--primary);
  ;
  transform: rotateY(180deg);
}



/*********************************************/
/*                 Utilities                 "/
/*********************************************/

.border-top-bottom {
  border-top: 1.4px solid var(--primary);
  border-bottom: 1.4px solid var(--primary);
  padding: 3px;
}

.border-bottom {
  border-bottom: 1.4px solid var(--primary) !important;
}

.fa-li {
  color: var(--primary)
}

.card-shadow {
  border-radius: 1rem !important;
  box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

.breadcrumb-item::before {
  color: #212529 !important;
}

ul.no-bullets {
  list-style-type: none;
  padding: 0;

}

img.logos {
  height: 100px;
}

div.logo-container {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}

.even-content {
  justify-content: space-evenly;
}

.bg-body-tertiary {
  background-color: #ececec !important;
}

.border-left {
  border-left: 1.4px solid var(--primary);
}

.video_wrapper > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 1rem !important;    
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.1);
}