/* CSS H+P */
html {
font-family: 'Roboto', Arial, Verdana, Geneva, Helvetica, sans-serif;
}



body {
font-family: 'Roboto', Arial, Verdana, Geneva, Helvetica, sans-serif;
}

h1,h2,h3{
color: #948b7c;
font-weight: 400;
}


.bild {
padding: 6px;
box-shadow: 6px 6px 8px rgba(0,0,0,.1);
border: 1px solid #e8e8e8;
}

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}

p,li,td {
font-size: 1rem;
hyphens: auto;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-lines: 4;
-ms-hyphens: auto;
-ms-hyphenate-limit-lines: 4;
}
  
/* -----------------Navigation ---------------- */

.navbar {
padding-bottom: 0px;
padding: .5rem 1rem;
}

/* ---
.navbar-nav {
margin-top: 25px;
}
-- */
.bg-light {
background-color: #ffffff !important;
}

.logo {
max-height: 30px;
}

.nav-link {
font-size: 1.11rem;
font-weight: 400;
}

@media (max-width: 767.98px) {
#nav-trennstrich {
display: none;
} 
}

#nav-trennstrich {
margin-top: 8px;
color: #786f61;
font-size: 1.11rem;
}

.navbar-light .navbar-nav .nav-link {
color: #786f61;  
}


.navbar-light .navbar-nav > .nav-link {
color: #786f61;  
padding: 6px 3px 6px 3px;
}

.navbar-light .navbar-nav .active > .nav-link, 
.navbar-light .navbar-nav .nav-link.active, 
.navbar-light .navbar-nav .nav-link.show, 
.navbar-light .navbar-nav .show > .nav-link {
    color: #000000;    
}


.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color: #000000;
}
 /* -----------------Dropdown-Men� ---------------- */
 /* Change this breakpoint if you change the breakpoint of the navbar */

@media (min-width: 992px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

@keyframes slideIn {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
  100% {
    transform:translateY(0rem);
    opacity: 1;
  }
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slideIn {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }
  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slideIn {
  -webkit-animation-name: slideIn;
  animation-name: slideIn;
}
 
 /* -----------------Dropdown Animation ende ---------------- */ 
 
.dropdown:hover>.dropdown-menu {
  display: block;
}

.dropdown-menu  {
margin: 0;
border-top: 2px solid #786f61;
border-left:0px;
border-right: 0px;
border-radius: 0px;
padding: 0;
box-shadow: 6px 6px 8px rgba(0,0,0,.2);
background-color: transparent;
}

.dropdown-item {
color: #948b7c;
font-size: 1.11rem;
padding: 8px 6px;
border-bottom: 1px solid #786f61;
background-color: rgba(255, 255, 255, 0.8);
}

.dropdown-item.active, .dropdown-item:active {
    color: rgba(255,255,255,.7);   
    background-color: #786f61;
    text-decoration: none;
}

.dropdown-item:focus, .dropdown-item:hover {
    color: rgba(255,255,255,.7);
    background-color: #786f61;
    text-decoration: none;
    transition-duration: 1s;
    transition-timing-function: ease-out;
}

 /* -----------------Slider ---------------- */

@media (max-width: 575.98px) {

.carousel {
margin-top: 50px;
}
.mobil-aus {
display: none;
}
}

/* -----------------Slider ---------------- */

@media (max-width: 575.98px) {

.logo {
max-height: 40px;
margin-bottom: 10px;
}
}

.carousel-caption {
  right: 0;
  bottom: clamp(0.2rem, 0.0354rem + 0.7024vw, 0.65rem);
  left: 0;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  text-align: center;

}
.carousel-caption h5{
  display: block;
  width: 100%;
  padding: 0.4rem 0;
  color: #948b7c;
  font-size: clamp(1.5rem, 0.801rem + 1.9417vw, 2.5rem);
  font-weight: 400;
  background-color: #ffffff;
}
.carousel-caption p{
  display: block;
  margin-top: 2.2rem;
}

/* ----------- Content ----------- */
.titel {
  font-size: clamp(1.7rem, 1.2806rem + 1.165vw, 2.3rem);
}

.logo-30-jahre {
max-width: 180px;
margin-left: 1.5rem;
}

.bg-expansion {
min-height: 160px;
background-image: url('../images/bg-start-expansion.webp');
background-size: cover;
background-repeat: no-repeat;
background-color: transparent;
background-position: center bottom;
}

.bg-akquise {
min-height: 160px;
background-image: url('../images/bg-start-akquise.webp');
background-size: cover;
background-color: transparent;
background-position: center bottom;
}

.bg-consulting {
min-height: 160px;
background-image: url('../images/bg-start-consulting.webp');
background-size: cover;
background-color: transparent;
background-position: center;
}

.bg-medien {
min-height: 160px;
background-image: url('../images/bg-start-medien.webp');
background-size: cover;
background-color: transparent;
background-position: center top;
}

.bg-platin {
min-height: 160px;
background-image: url('../images/bg-platin.png');
background-size: cover;
background-color: transparent;
background-position: center top;
}

.bg-platin :is(p,li,td ) {
color: #000;
font-weight: 500;
}


.button {
font-size: clamp(0.85rem, 0.7451rem + 0.2913vw, 1rem);
font-weight: 700;
letter-spacing: 0.05rem;
color: #5d5a54;
background-image: url('../images/bg-button.png');
background-size:cover;
padding: 4px 12px;
border-radius: 6px;
text-transform: uppercase;
border-left: 1px solid #545657;
border-bottom: 1px solid #545657;
border-top: 1px solid #ebe6da;
border-right: 1px solid #ebe6da;
text-decoration: none;
}

.button:hover {
color: #45433e;
background-image: url('../images/bg-button-hover.png');
border-left: 1px solid #45433e;
border-bottom: 1px solid #45433e;
border-top: 1px solid #ebe6da;
border-right: 1px solid #ebe6da;
text-decoration: none;
}

#kasten p,li{
color: black;
}

.wow p {
color: black;
}

.rand-rechts {
border-right: 1px solid #b8b4ad;
}

@media (max-width: 767.98px) {
.rand-rechts {
border-right: 0px;
} 
}

.media-body  {
color: #948b7c;
}

/* ----------------- Kontaktformular ---------------- */

.form-control {
color: #58585a;
border: 1px solid #b0b0b0;
border-radius: 0px;
}

#kontakt label {
color: black;
}

#kontakt small {
color: grey;
}

#kontakt a {
color: #5d5a54;
}

#kontakt a:hover {
color: black;
}


#kontakt p {
line-height: 1.3 !important;
}

.btn {
padding: .675rem .95rem;
}

.btn-primary {
color: #5d5a54;
font-weight: 600;
background-color: #cbc5b4;
border-color: #cbc5b4;
border-radius: 6px; 
}

.btn-primary:hover {
color: rgba(255,255,255,.7);
background-color: #786f61;
border-color: #786f61;
}

/* -----------------Footer ---------------- */

#footer {
color: #948b7c;
background-color: white;
}

#footer :is(p,div,a,td) {
color: #948b7c;
font-weight: 500;
}

#footer a {
  color: #948b7c;
  font-weight: 500;
  text-decoration: none;
  }

#footer a:hover{
color: black;
}
/* -----------Footer 2 ------------ */
#footer2 {
  color: #948b7c;
  background-color: #333130;
  }
  
  #footer2 :is(p,div,a,td) {
  color: #f9f6e8;
  font-weight: 500;
  }
  
  #footer2 a {
    color: #f9f6e8;
    font-weight: 500;
    text-decoration: none;
    }
  
  #footer2 a:hover{
  color: #cfc9ae;
  }

/* -----------------Download Startseite ---------------- */
#download-start .container-fluid{
background-color: #333130;
}

#download-start .container-fluid a {
color: #b0b0b0;
font-weight: 500;
text-decoration: none;
}

#download-start .container-fluid p {
color: #b0b0b0;
}

#download-start .container-fluid img {
max-width: 200px;
}


/* -----------------Modal ---------------- */
.modal-dialog {
    max-width: 90%;
    margin: 30px auto;
}

.modal-header {
color: rgba(255,255,255,.7);
background-color: #786f61;
}

.modal-body {
color: #948b7c;
}

.modal-body a, li{
color: #948b7c;
}


/* ------ Scroll To Top Button --------- */

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 999; /* Make sure it does not overlap */
    border-left: 3px solid #545657;
    border-bottom: 3px solid #545657;
    border-top: 2px solid #ebe6da;
    border-right: 2px solid #ebe6da;
    outline: none; /* Remove outline */
    background-image: url('../images/bg-button.png');
    color: #5d5a54; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 8px 12px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 14px; /* Increase font size */
}

#myBtn:hover {
    background-image: url('../images/bg-button-hover.png');
    color: #45433e;
    border-left: 3px solid #45433e;
    border-bottom: 3px solid #45433e;
    border-top: 2px solid #ebe6da;
    border-right: 2px solid #ebe6da;
}