:root{
  --black: #000000;
  --rosa: #d94a7d;
  --pink:#bd1163;
  --grey:#707070;
  --white: #ffffff;

  --transparent-rosa: rgba(217, 74, 125, 0.4);
  --transparent-pink: rgba(189,17,99, 0.4);
  --transparent-grey: rgba(112, 112, 112, 0.4);
  --transparent-white: rgba(255, 255, 255, 0.1);

  --light-pink: #fde4f0;
  --light-rosa: #fbecf1;
  --light-grey: #f3f3f3;

  --overlay-color:rgba(51,51,51,0.99);
  --menu-speed: 0.75s;

  --max-width:1300px;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

/* Utility */
.container {
  max-width: var(--max-width);
  margin: auto;
  padding: 2rem;
  overflow: hidden;
}

.inner-container{
  display: flex;
  background: var(--white);
  color: var(--black);
  margin: 3rem 0;
  padding: 3rem;
  border-radius: 15px;
  border: 1px solid var(--light-rosa);
}

.white-container{
  background: var(--white);
  color: var(--black);
  margin: 3rem 0;
  padding: 3rem 5rem;
  border-radius: 15px;
  border: 1px solid var(--light-rosa);
}
.text-center{
  text-align: center;
}
.text-right{
  text-align: right;
  padding-right: 3rem;
}

.flex-container {
  display: flex;
}
.text-flex{
  text-align: start;
  flex: 1;
  padding-left: 3rem;
}
.picture-flex{
  text-align: center;
  flex: 1;
  border-right: 1px solid var(--light-rosa) ;
  align-self: center;
}
.picture-flex-right{
  text-align: start;
  flex: 1;
  align-self: center;
  margin-left: 5rem;
}
.border-right{
  border-right: 1px solid var(--light-rosa) ;
}
.flex-img{
  width: 85%;
}

.btn{
  display: inline-block;
  border: none;
  padding: 0.5rem 1.5rem;
  margin-top: 2rem;
  border-radius: 10px;
}

.btn-dark{
  background: var(--grey);
  color: var(--light-grey);
}
.btn-rosa{
  background: var(--rosa);
  color: white;
}
.btn-pink{
  background: var(--pink);
  color: white;
}

.bg-white{
  background: var(--white);
  color: var(--black);
}
.bg-light-pink{
  background: var(--light-grey);
  color: var(--pink);
}
.bg-light{
  background: var(--light-grey);
  color: var(--black);
}
.bg-dark{
  background: var(--grey);
  color: var(--white);
}
.rosa{
  color: var(--rosa);
}
.pink{
  color: var(--pink);
}
.dark{
  color: #333;
}
.white{
  color: var(--white);
}

.p-1{padding: 1rem;}
.p-2{padding: 2rem;}

.py-1{padding: 1rem 0;}
.py-2{ padding: 2rem 0;}

.mt-1{margin-top: 1rem;}
.mt-3{margin-top: 3rem;}

.font-light{
  font-weight: 400;
}

.bildnachweis{
  font-size: xx-small;
  color: var(--transparent-grey);
}

.bildnachweis-home{
  font-size: xx-small;
  color: var(--transparent-white);
}

.font-small{
  font-size: small;
}

.s-heading{
  font-size: 1.2rem;
}
.m-heading{
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.l-heading{
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
}
.mini{
  font-size: xx-small;
}

/* Streifen in Pink */
#pinkerStreifen{
  background: var(--pink);
  color: var(--white);
  height: 2rem;
  position: sticky;
  top: 0;
  z-index: 2;
}
#pinkerStreifen .pink-container{
  max-width: var(--max-width);
  margin: auto;
  overflow: hidden;
  display: flex;
  color: white;
  justify-content: center;
  text-align: center;
  align-items: center;
}
#pinkerStreifen p{
  padding: 0.5rem; 
}

#mobile-contact{
  display: none;
}
/* Hamburger Menu */
.menu-wrap .toggler {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

/* Navigation */
#main-nav{
  height: 8.1rem;
  background: var(--white);
  position: sticky;
  top: 2rem;
  z-index: 2;
  border-bottom: 1px solid var(--light-rosa);
}
#main-nav .container{
  height: 8rem;
  padding: 0 2rem;
}
#main-nav .logo{
  display: flex;
  width: 210px;
  border-radius: 15px;
  border: 1px solid var(--light-rosa);
}
#main-nav .menu-logo{
  display: none;
}
#main-nav .nav-flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#main-nav ul {
  display: flex;
}
#main-nav ul li a {
  color: var(--grey);
  padding: 2rem 0.5rem 0.5rem 0.5rem;
  margin: 0 0.5rem
}
#main-nav ul li a:hover,
#main-nav ul li a.current {
  opacity: 0.8;
  color: var(--pink);
  border-bottom: 3px solid var(--rosa);
}

/* Showcase */
#showcase{
  color: var(--white);
  background: var(--light-grey);
  padding: 2rem 0;
  position: relative;
}
#showcase::before{
  content: '';
  background: url('../img/Home_Behandlungspflege_1.jpg') no-repeat center center/cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}
#showcase .showcase-container{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 65vh;
}
#showcase .inner-container{
  text-align: center;
  flex-direction: column;
  color: var(--rosa);
  padding: 1rem;
  opacity: 0.9;
  z-index: 1;
  border: 1px solid var(--light-rosa);
}
#showcase .inner-container h1{
  padding-bottom: 0.5rem;
  font-size: 3.4rem;
}
#showcase .inner-container p{
  font-size: 3rem;
}

/* Welcome */
#welcome .inner-container{
  flex-direction: column;
  align-items: center;
  margin-bottom: 1rem;
  border: 1px solid var(--light-rosa);
}

.right{
  text-align: right;
  padding-right: 0.5rem;
}
#welcome a:hover{
  background: var(--pink);

}
/* bpa */
#bpa .container{
  padding-top: 0;
}

/* Leistungen */
#leistungen ul li,
#wir ul li,
#impressum ul li,
#datenschutz ul li{
  list-style: disc;
  margin-left: 1.5rem;
  
}

/* Qualität bzw. Karriere */
#quali .container,
#karriere .container{
  height: 65vh;
}
#quali .icon,
#karriere .icon{
  color: var(--rosa);
  align-self: center;
  text-align: center;
  padding: 3rem;
}

/* Kontakt */
#kontakt .container{
  height: 100%;

}
#kontakt .inner-container{
  margin-bottom: 0;
  flex-direction: column;
}
#kontakt i{
  margin: 0.1rem;
  padding: 0.1rem;
  color: var(--rosa);
}
#kontakt .imgdoor{
  width: 80%;
}
#kontakt .imgmaps{
  width: 80%;
}
#kontakt .flex-column{
  flex-direction: column;
  text-align: center;
  flex: 1;
}
#kontakt a:hover{
  background: var(--pink);
}

#kontakt .hov{
  color: #000000;
}
#kontakt .hov:hover{
  color: var(--pink);
  background: #ffffff;
}

#kontakt .buttons{
  text-align: center;
  padding-top: 3rem;
}
#osm{
  font-size: 0.7rem;
  color: var(--pink);
  text-align: center;
}
#osm a{
  color: var(--pink);
}
.btn-maps{
  display: inline-block;
  border: none;
  padding: 0.5rem 1rem;
  margin-top: 1rem;
  border-radius: 10px;
}

#datenschutz .white-container{
  padding-right: 8rem;
}

#impressum a{
  color: var(--rosa);
}

/* Footer */
#main-footer {
  background: var(--grey);
  color: var(--white);
  border-bottom: 5px solid var(--pink);
}
#main-footer .poweredby{
  background: #333;
  color: #ffffff;
  padding: 0.5rem;
}
#main-footer a{
  color: var(--white);
}
#main-footer a:hover,
#main-footer a.current{
  color: #333;
  opacity: 0.8;
}
#main-footer .container{
  padding: 2rem;
}
#main-footer .footer-container{
  display: flex;
  flex-direction: column;
}
#main-footer .footer-content{
  display: flex;
  justify-content: space-between;
  flex: 1;
}
#main-footer i{
  padding: 0.1rem;
  margin-right: 0.5rem;
}
#main-footer .list {
  display: flex;
  padding-top: 0.5rem;
}
#main-footer .listitem{
  padding: 0 0.5rem;
}