:root{
	--max-width-tb: 600px;
	--max-width-dt: 800px;
	
}

@media (min-width: 450px) {
  
  #header-img img {
    width: 150vw;
    -webkit-transform: translateX(-3.5rem);
            transform: translateX(-3.5rem);
  }
}

@media (min-width: 550px) {
	#mobile-menu-btn{
		transform: translateX(0vw) !important;
		opacity: 1 !important;	
	}

	#header-img img {
    	width: 152%;
	}
	
	#sprechzeiten-box{
		margin-bottom: 1rem;
		padding-bottom: 0;
	}
	
	#sprechzeiten-box ul{
		max-width: var(--max-width-tb);
		margin: 0 auto;
		padding: 0 2rem;
	}
	
	#sprechzeiten-box li{
		display: inline-block;
		width: 42%;
		margin-right: 5%;
	}
	
	#intro-text{
		max-width: var(--max-width-tb);
		padding: 0 2rem;
		margin: 0 auto 4rem auto;
	}
	
	#intro-text h2 {
	    padding-top: 1.5rem;
	}
	
	#intro-text p{
		max-width: 90%;
	}
	
	#intro-text button{
		max-width: 90%;
	}
	
	#phone-btn-mobile{
		display: none;
	}
	
	#scroll-down-wrapper{
		display: none;
	}
	
	.topic-headline h2{
		max-width: var(--max-width-tb);
		margin: 0 auto;
		padding: 0 2rem;
	}
	
	#fachthemen-img{
		height: 200px;
	}
	
	#fachthemen-box h2{
		max-width: var(--max-width-tb);
		margin: 0 auto 2rem auto;
		padding: 0 2rem;
	}
	#fachthemen-box p{
		max-width: var(--max-width-tb);
		margin: 0 auto;
		padding: 0 2rem;
	}
	
	#fw-links{
		max-width: var(--max-width-tb);
		margin: 3rem auto 5rem auto;
		padding: 0 2rem;
	}
	
	#untersuchungen-box{
		max-width: var(--max-width-tb);
		margin: 0 auto 3rem auto;
		padding: 0 2rem;
	}
	#untersuchungen-box h3 {
	    padding: 0;
	}
	#untersuchungen-box p {
	    padding: 0;
	}
	#untersuchung-list {
	    padding: 0;
	}
	#mobile-menu-btn{
		right: 1rem;
		bottom: 1rem;
	}
	
	#team-slider{
		max-width: var(--max-width-tb);
		margin: 2rem auto 3rem auto;
		padding: 0 1rem 1.5rem 2rem;
		background: url('backgrounds/arrow-long-right.png') no-repeat;
		background-position: right bottom;
	}
	
	#vita-link{
		max-width: var(--max-width-tb);
		margin: 4rem auto 6rem auto;
		padding: 0 2rem;
	}
	
	.vita-wrapper{
		max-width: var(--max-width-tb);
		margin: 0 auto;
	}
	
	.ft-intro-text{
		max-width: var(--max-width-tb);
		margin: 0 auto 3rem auto;	
	}
	
	.ft-text{
		max-width: var(--max-width-tb);
		margin: 0 auto 5rem auto;
	}
	
	#totop-btn{
		left: 47%;
	}
	
	#footer .inside{
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 1rem;
	}
}

@media (min-width: 680px) {
	#header-img img {
	    width: 126%;
	}
}

@media (min-width: 800px){
	#header-img{
		max-width: var(--max-width-dt);
		margin: 0 auto;
	}
	#header-img img {
	    width: 112%;
	}
	#intro-text{
		max-width: var(--max-width-dt);
	}
	#sprechzeiten-box ul {
    	max-width: var(--max-width-dt);
	}
	
	#fachthemen-box p{
		columns: 2;
		
	}
	
	#intro-headline{
		font-size: 1.4rem;
	}
	
	#fachthemen-img {
	    height: 300px;
	    max-width: var(--max-width-dt);
	    margin: 0 auto 3rem auto;
	}
	
	#fachthemen-img img{
	    width: 105%;
	}
	
	.topic-headline {
		max-width: var(--max-width-dt);
		margin: 0 auto 1rem auto;
	}
	
	.topic-headline h2{
		max-width: var(--max-width-tb);
		margin: 0 auto;
	}
	
	.startseite .topic-headline h2{
		max-width: var(--max-width-dt);
		margin: 0;
		transform: translateY(4px);
	}
	
	.topic-headline h2 {
	    padding: 0 1rem;
	}

	
	#fachthemen-box h2{
		max-width: var(--max-width-dt);
	}
	#fachthemen-box p{
		max-width: var(--max-width-dt);
	}
	
	#fw-links{
		max-width: 700px;
	}
	
	#fw-links button{
		
	}
	
	#fw-links button:first-child{
		margin-right: 3.5rem;
	}
	
	#untersuchungen-box {
	    max-width: var(--max-width-dt);
	    margin: 0 auto 5rem auto;
	}

	#team-slider{
		max-width: var(--max-width-dt);
		background: none;
		overflow-x: visible;
		overflow-y: visible;
	}
	
	#vita-link{
		max-width: var(--max-width-dt);
	}
	
	.vita-wrapper{
		max-width: var(--max-width-tb);
	}
	
	.ft-intro-text{
		max-width: var(--max-width-tb);
	}
	
	.ft-text{
		max-width: var(--max-width-tb);
	}
}


@media (min-width: 860px) {
	#container{
		padding-top: 7rem;
	}
	
	#header{
		height: 7rem;
		position: absolute;
	}
	#kontakt-wrapper {
	    top: 7rem;
	    transition: all .3s ease-in-out .2s;
	}
	.kontakt-add-sticky {
	    top: 3.5rem !important;
	}
	header .inside {
	    padding: 1rem;
	    position: relative;
	}
	
	.startseite #header-img img {
	    width: 150%;
	    transform: translateX(-6rem);
	}

	#intro-text {
	    padding: 4rem 2rem 0 2rem;
	    margin: 0rem auto 9rem auto;
	}
	
	#mobile-menu-wrapper{
		display: none;	
	}
	
	.mod_navigation {
	  display: block;
	  position: absolute;
	  top: 4rem;
	  right: 1rem;
	}
	
	.mod_navigation ul li a, 
	.mod_navigation ul .active {
	    padding: .4rem;
	    color: #313131;
	}
	
	.mod_navigation ul li .active{
		position: relative;
		padding-bottom: .9rem;
		overflow: hidden;
	}
	
	.mod_navigation li .active::after{
		content:"";
		display: block;
	    width: 0;
	    height: 0;
	    border-left: 12px solid transparent;
	    border-right: 12px solid transparent;
	    border-bottom: 12px solid #31B234;
		position: absolute;
		top: 2.1rem;
		left: 35%;
	}
	
	.header-add{
		position: fixed !important;
		transform: translateY(-3.5rem) !important;
	}
	
	.logo-hide{
		opacity: 0 !important;
	}
	
	.logo-add{
		transform: translateY(3.3rem) !important;
		font-size: 1.2rem !important;
	}
	
	#main .inside{
	    max-width: 1200px;
	    margin: 0 auto;
	}
}

@media (min-width: 1150px) {
	#header .inside{
		padding: 1rem 0;
	}
	
	.mod_navigation ul li a, 
	.mod_navigation ul .active{
		padding: .4rem 1rem;
	}
	
	.startseite #header-img {
		position: absolute;
		width: 70%;
		max-width: 100%;
		height: 590px;
	}
	.startseite #header-img img {
	    width: 108%;
	    transform: translateX(-3rem);
	}
	
	#sprechzeiten-hd{
		position: absolute;
		right: 0;
		width: 40%;
	}
		
	#sprechzeiten-hd{
		border-top: none;
		width: 30%;
	}
	#sprechzeiten-box{
		position: absolute;
		top: 4.5rem;
		right: 0;
		width: 30%;
	}
	#sprechzeiten-box li {
	    display: block;
	    width: 100%;
	    margin-right: 0;
	    margin-bottom: .6rem;
	}
	#intro-text {
	    padding: 36rem 0rem 0 0rem;
	    margin: 0rem auto 9rem auto;
	}
	#intro-text p,
	#intro-text button{
		max-width: 80%;
	}
	
	.content-wrapper{
		max-width: 800px;
	}

}