/* ==================================== CREATIVECON STYLESHEET CSS ==================================== */
/* ==================================== COPYRIGHT =====================================================
	
 ██████╗██████╗ ███████╗ █████╗ ████████╗██╗██╗   ██╗███████╗ ██████╗ ██████╗ ███╗   ██╗
██╔════╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██║██║   ██║██╔════╝██╔════╝██╔═══██╗████╗  ██║
██║     ██████╔╝█████╗  ███████║   ██║   ██║██║   ██║█████╗  ██║     ██║   ██║██╔██╗ ██║
██║     ██╔══██╗██╔══╝  ██╔══██║   ██║   ██║╚██╗ ██╔╝██╔══╝  ██║     ██║   ██║██║╚██╗██║
╚██████╗██║  ██║███████╗██║  ██║   ██║   ██║ ╚████╔╝ ███████╗╚██████╗╚██████╔╝██║ ╚████║
 ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚═╝  ╚═══╝  ╚══════╝ ╚═════╝ ╚═════╝ ╚═╝  ╚═══╝
======================================= COPYRIGHT ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;700&display=swap');

/* ==================================================================================================== */
/* ==================================== CSS DEFAULT =================================================== */
/* ==================================================================================================== */


            :root {

            }


            * {
                box-sizing: border-box;
                font-family: 'Lato', sans-serif;
            }

            html {
                scroll-behavior: smooth;
				height: 100%;
                }

			body {
			  margin: 0;
			  padding: 0;
			  padding-top: 40px;
			  background: black;
			  min-height: 100vh;
			  overflow-x: hidden;
			  transition: all 2s ease-in-out;
			}

            h1, h2 {
                color: white;
                font-weight: 300;
                font-size: 3.6rem;
            }

            h3 {
                color: white;
                font-weight: 700;
                font-size: 2rem;                
            }

            p, a {
                text-decoration: none;
                color: white;
                font-size: 1.2rem;
            }

			a {
				text-decoration: none;
				
				}

            li {
                list-style: none;
            }


/* ==================================================================================================== */
/* ==================================== END CSS DEFAULT =============================================== */
/* ==================================================================================================== */


/* ==================================== GLOW ========================================================== */

            .glow {
                border: none;
                outline: none;
                color: #fff;
                background: #111;
                cursor: pointer;
                position: relative;
                z-index: 0;
            }

            .glow:before {
                content: '';
                background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
                position: absolute;
                top: -2px;
                left:-2px;
                background-size: 400%;
                z-index: -1;
                filter: blur(5px);
                width: calc(100% + 4px);
                height: calc(100% + 4px);
                animation: glowing 20s linear infinite;
                opacity: 0;
                transition: opacity .3s ease-in-out;
            }

            .glow:active {
                color: #000
            }

            .glow:active:after {
                background: transparent;
            }

            .glow:hover:before {
                opacity: 1;
            }

            .glow:after {
                z-index: -1;
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: #111;
                left: 0;
                top: 0;
            }

/* ========== GLOW FOR BUTTONS ========== */

            .glow-on-hover {
                width: 220px;
                height: 50px;
                border: none;
                outline: none;
                color: #fff;
                background: #111;
                cursor: pointer;
                position: relative;
                z-index: 0;
                border-radius: 10px;
            }

            .glow-on-hover:before {
                content: '';
                background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
                position: absolute;
                top: -2px;
                left:-2px;
                background-size: 400%;
                z-index: -1;
                filter: blur(5px);
                width: calc(100% + 4px);
                height: calc(100% + 4px);
                animation: glowing 20s linear infinite;
                opacity: 0;
                transition: opacity .3s ease-in-out;
                border-radius: 10px;
            }

            .glow-on-hover:active {
                color: #000
            }

            .glow-on-hover:active:after {
                background: transparent;
            }

            .glow-on-hover:hover:before {
                opacity: 1;
            }

            .glow-on-hover:after {
                z-index: -1;
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background: #111;
                left: 0;
                top: 0;
                border-radius: 10px;
            }

            @keyframes glowing {
                0% { background-position: 0 0; }
                50% { background-position: 400% 0; }
                100% { background-position: 0 0; }
            }

/* ==================================== END GLOW BUTTONS ============================================== */



/* ==================================================================================================== */
/* ==================================== HEADER ======================================================== */
/* ==================================================================================================== */

			header {
			  width: 100%;
			  height: 100vh;
			  position: relative;
			  padding: 2rem;
			  box-sizing: border-box;
			  overflow: hidden;				
			}

			#video_bg {
			  position: absolute;
			  top: 0; left: 0;
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  z-index: -1;
			}

			.video-wrapper {
			  width: 100%;
			  height: 100vh;
			  padding: 2rem;
			  box-sizing: border-box;
			  position: relative;
			  overflow: hidden;
			}

			.video-inner {
			  position: relative;
			  width: 100%;
			  height: 100%;
			}

			.header-sub {
				width: 100%;
				height: 60px;
				background: black;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				padding: 0 30px;
				position: relative; /* Nicht mehr fixed */
				z-index: 1000;
			}

/* ==================================== LOGO ========================================================== */

			#logo {
			  position: absolute;
			  top: 50%; left: 50%;
			  transform: translate(-50%, -50%);
			  width: 22vw;
			  height: auto;
			  z-index: 1;
			  animation: fadeIn 2s ease-out 3.5s forwards;
			  opacity: 0;
			}

			@keyframes fadeIn {
			  from {
				opacity: 0;
				transform: translate(-50%, -60%);
			  }
			  to {
				opacity: 1;
				transform: translate(-50%, -50%);
			  }
			}

			#logo-small {
				height: 40px;
				width: auto;
			}


/* ==================================== NAVIGATION ==================================================== */



			.logo-container {

			}

			.nav {

			}

			.navlist {
				display: flex;
				column-gap: 40px;
			}

			.navitem {

			}

			.navlink {
				color: rgba(255,255,255,0.75);
				transition: all 0.4s;
			}

			.navlink:hover, .navlink:focus {
				color: rgba(255,255,255,1);
			}

			.hamburger {
				display: none;
				cursor: pointer;
			}

			.bar {
				height: 2px;
				width: 27px;
				background: #fff;
				margin: 5px 0;
				opacity: 0.8;

			}

		    @media screen and (max-width: 920px) {	

				.nav {
					position: fixed;
					top: 60px;
					left: 0;
					background-color: rgb(19, 22, 26);
					width: 100%;
					padding: 10px 0 25px;
					transform: translateX(-100%);
				}
				
				.navlist {
					flex-direction: column;
					align-items: center;
					row-gap: 20px;
						
				}
				
				.navlink {
					font-size: 14px;
				}
              
				.hamburger {
					display: block;
				}
		}	

/* ==================================================================================================== */
/* ==================================== END HEADER ==================================================== */
/* ==================================================================================================== */



/* ==================================================================================================== */
/* ==================================== MAIN ========================================================== */
/* ==================================================================================================== */

            main {
			  position: relative;
			  color: white;
			  padding: 3rem 2rem;
			}

			#main_zwei {
			  margin-top: 5rem;
			  position: relative;
			  display: flex;
			  flex-direction: column;
			  align-items: center;
			  justify-content: center;
			  width: 100%;
			  text-align: center;
			  transition: all 1s ease-in-out;
			}


            main:before {
			  content: "";
			  position: absolute;
			  top: -2px;
			  left: -2px;
			  right: -2px;
			  bottom: -2px;
			  background: rgba(18,18,18,1.00)
            }

			.titel {
				text-align: center;
			}

/* ==================================== UEBER MICH ====================================================  */ 
			
			.trailer {
			  text-align: center;
			  margin: 40px 0;
			}

			.trailer-container {
			  position: relative;
			  width: 100%;              /* ⬅️ 50% der Seitenbreite */
			  padding-bottom: 56.25%; /* ⬅️ 50% × 56.25% für 16:9 */
			  height: 0;
			  margin: 0 auto;
			  overflow: hidden;
			}

			.trailer-container iframe {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  border: none;
						}



			#uebermich {
			  position: relative;
			  width: 1280px;
			  max-width: 95%;
			  margin: 0 auto;
			  display: flex;
			  flex-wrap: wrap;
			  align-items: center;
			  justify-content: space-around;
			}

			#main_uebermich #uebermich img {
			  width: 450px;
			  max-width: 100%;
			  height: auto;
			  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			  transition: box-shadow 0.3s ease;
			}

			.text {
			  width: 550px;
			  max-width: 100%;
			  padding: 0 10px;
			}

			.text a {
			  text-decoration: underline;
			  transition: color 0.3s;
			}

			.text a:hover {
			  text-decoration: none;
			  color: rgba(255, 255, 255, 0.6);
			}


			.webedu {
				display: flex;
				flex-wrap: wrap;
				gap: 20px;
				margin-top: 20px;
				justify-content: center;
			}

			.webedu img {
				max-width: 100%;
				height: auto;
				width: 45%; /* passt sich an kleinere Bildschirme an */
				border-radius: 8px; /* optional für abgerundete Ecken */
				transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

/* ==================================== ANGEBOTE ====================================================== */


			.angebote-cards {
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: center;
			  gap: 2rem;
			  margin-top: 3rem;
			}

			.angebot-card {
			  flex: 1 1 calc(25% - 2rem); /* 4 Karten pro Zeile mit Abstand */
			  max-width: calc(25% - 2rem);
			  background: rgba(255, 255, 255, 0.1);
			  border: 1px solid rgba(255,255,255,0.2);
			  border-radius: 12px;
			  padding: 2rem;
			  color: #fff;
			  backdrop-filter: blur(10px);
			  transition: transform 0.3s ease, box-shadow 0.3s ease;
			}

			.angebot-card:hover {
			  transform: translateY(-5px);
			  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
			}

			.angebot-card h3 {
			  font-size: 1.4em;
			  margin-bottom: 1rem;
			}

			.angebot-card p {
			  font-size: 0.95em;
			  line-height: 1.4;
			}

/* ==================================== PORTFOLIO ===================================================== */

            #portfolio {
                position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				min-height: 100vh;
            }

            #filter {
                display: flex;
                flex-wrap: wrap;  
                gap: 2rem;
                justify-content: space-between;
			}

			.portfolio_videos video, .portfolio_videos iframe{
				width: 100%;
				aspect-ratio: 16 / 9;
				object-fit: cover;
				border-radius: 8px;
			}

			.portfolio_videos {
			  display: grid;
			  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
			  gap: 2rem;
			  padding: 2rem;
			  max-width: 1200px; /* Oder ein Wert passend für 3 Kacheln */
			  margin: 0 auto;
			}

			.video_item {
			  display: flex;
			  flex-direction: column;
			  background-color: #111;
			  padding: 1rem;
			  border-radius: 4px;
			  color: white;
			  transition: opacity 0.4s ease;
			}

			.video_item iframe,
			.video_item video {
			  width: 100%;
			  aspect-ratio: 16 / 9;
			  border-radius: 6px;
			  object-fit: cover;
			}

			.video_info {
			  margin-top: 1rem;
			}

			.video_info h3 {
			  margin: 0;
			  font-size: 1.2rem;
			}

			.video_info p {
			  font-size: 0.9rem;
			  color: #ccc;
			}


            
/* ==================================== KONTAKT ======================================================= */

		
            #kontakt {
                width: 100%;   
                display: flex;
                align-items: center;
                justify-content: center; 
            }


            form {
                width: 100%;
                max-width: 80%;
                font-size: 1.2rem;
            }

            .input-group {
                margin-bottom: 30px;
                position: relative;
            }

            input, textarea {
                width: 100%;
                padding: 10px;
                outline: 0;
                border: 1px solid white;
                color: white;
                background: transparent;
                font-size: 1.2rem;
                transition: all 0.5s ease-in-out;
            }

            label {
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                padding: 10px;
                color: white;
                cursor: text;
                transition: all 0.5s ease-in-out;
            }

            button {
                padding: 10px 0;
                color: white;
                outline: none;
                background: transparent;
                border: 1px solid white;
                width: 100%;
                cursor: pointer;
                font-size: 1.2rem;
                transition: all 0.5s ease-in-out;
            }

            input:focus~label, input:valid~label, textarea:focus~label, textarea:valid~label {
                top: -35px;
                font-size: 1rem;
                color: lightgray;
                transition: all 0.5s ease-in-out;
            }

            input:hover, textarea:hover, button:hover {
                background: rgba(255,255,255,0.20);
                transition: all 0.5s ease-in-out;
            }

/* ==================================================================================================== */
/* ==================================== END MAIN ====================================================== */
/* ==================================================================================================== */







/* ==================================================================================================== */
/* ==================================== FOOTER ======================================================== */
/* ==================================================================================================== */

			footer {
				display: flex;
				justify-content: center;
			}


/* ==================================== TO TOP BUTTON ================================================= */

            #totop {
                display: none;
            }

            #totopbox {
                position: fixed;
                top: 1rem;
                left: 1rem;
                z-index:33;
                display: none;
            }

/* ==================================== SOCIAL MENU =================================================== */

            .social-menu ul {
				position: fixed;
				bottom: -4rem;
				right: 0;
                transform: translate(-50%, -50%);
                flex-direction: column;
                z-index: 20;           
            }

            .social-menu ul li {
                list-style: none;
                margin: 0 10px;
                padding: 1.2rem;
            }

            .social-menu ul li  .fa {
                color: #000000;
                font-size: 25px;
                line-height: 50px;
                transition: .5s;
            }

            .social-menu ul li .fa:hover {
                color: #ffffff;
            }

            .social-menu ul li a {
                position: relative;
                display: block;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: white;
                text-align: center;
                transition: 0.5s;
                transform: translate(0,0px);
                box-shadow: 3px 3px 5px 5px rgba(0,0,4,1.00);
            }

            .social-menu ul li a:hover {
                transform: rotate(180deg) skew(5deg) translate(0, -10px);
                box-shadow: 3px 5px 5px 3px rgba(0,0,4,1.00);
                cursor: pointer;
            }
            .social-menu ul li:nth-child(1) a:hover {
                background-color: #34465D;
                box-shadow: 3px 5px 5px 3px rgba(0,0,4,1.00);
            }
            .social-menu ul li:nth-child(2) a:hover {
                background-color: #e4405f;
                box-shadow: 3px 5px 5px 3px rgba(0,0,4,1.00);
            }
            .social-menu ul li:nth-child(3) a:hover {
                background-color: #0A66C2;
                box-shadow: 3px 5px 5px 3px rgba(0,0,4,1.00);
            }
            .social-menu ul li:nth-child(4) a:hover {
                background-color: #410093;
                box-shadow: 3px 5px 5px 3px rgba(0,0,4,1.00);
            }

/* ==================================================================================================== */
/* ==================================== END FOOTER ==================================================== */
/* ==================================================================================================== */











/* ==================================================================================================== */
/* ==================================== RESPONSIVE 1600PX ============================================= */
/* ==================================================================================================== */

		    @media screen and (max-width: 1600px) {
                
            body {
                padding: 1.4rem;
              } 

            h1, h2 {
                font-size: 3rem;
            }
                
            h3 {
                font-size: 1.8rem;    
            }
              
/* ==================================== GLOW BUTTONS ================================================== */


/* ==================================== END GLOW BUTTONS ============================================== */
                
/* ==================================================================================================== */
/* ==================================== 1600PX HEADER ================================================= */
/* ==================================================================================================== */
                
/* ==================================== 1600PX TITEL ================================================== */
                
/* ==================================== 1600PX NAVIGATION ============================================= */
                
    
                
/* ==================================== 1600PX LOGO =================================================== */			

          #logo {
		  	width: 28vw;
		}   
            
/* ==================================================================================================== */
/* ==================================== 1600PX END HEADER ============================================= */
/* ==================================================================================================== */ 
                    
/* ==================================================================================================== */
/* ==================================== 1600PX MAIN =================================================== */
/* ==================================================================================================== */

/* ==================================== 1600PX ANGEBOTE =============================================== */

                 
                
/* ==================================== 1600PX PORTFOLIO ============================================== */         
                
            
/* ==================================== 1600PX UEBER MICH ============================================= */
                                            
/* ==================================================================================================== */
/* ==================================== 1600PX END MAIN =============================================== */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 1600PX FOOTER ================================================= */
/* ==================================================================================================== */                
    
/* ==================================== 1600PX KONTAKT ================================================ */
    
/* ==================================== 1600PX TO TOP BUTTON ========================================== */
                
/* ==================================== 1600PX SOCIAL MENU ============================================ */ 

             .social-menu ul {
				bottom: -6rem;
                right: -3rem;         
            }                  
                
/* ==================================================================================================== */
/* ==================================== 1600PX END FOOTER ============================================= */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 1600PX END RESPONSIVE ======================================== */
/* ==================================================================================================== */











/* ==================================================================================================== */
/* ==================================== RESPONSIVE 1400PX ============================================= */
/* ==================================================================================================== */

		    @media screen and (max-width: 1400px) {
 
            body {
                padding: 2rem;
              } 

            h1, h2 {
                font-size: 2.8rem;
            }
                
            h3 {
                font-size: 1.6rem;    
            }

            p, a {
                font-size: 1rem;
            }                
                
/* ==================================================================================================== */
/* ==================================== 1400PX HEADER ================================================= */
/* ==================================================================================================== */
                
/* ==================================== 1400PX TITEL ================================================== */
                
/* ==================================== 1400PX NAVIGATION ============================================= */
                

				
/* ==================================== 1400PX LOGO =================================================== */			
 
    
                
/* ==================================================================================================== */
/* ==================================== 1400PX END HEADER ============================================= */
/* ==================================================================================================== */ 
                    
/* ==================================================================================================== */
/* ==================================== 1400PX MAIN =================================================== */
/* ==================================================================================================== */
 
/* ==================================== 1400PX ANGEBOTE =============================================== */

                
/* ==================================== 1400PX PORTFOLIO ============================================== */
                
/* ==================================== 1400PX UEBER MICH ============================================= */
                                            
/* ==================================================================================================== */
/* ==================================== 1400PX END MAIN =============================================== */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 1400PX FOOTER ================================================= */
/* ==================================================================================================== */                
    
/* ==================================== 1400PX KONTAKT ================================================ */
    
/* ==================================== 1400PX TO TOP BUTTON ========================================== */
                
/* ==================================== 1400PX SOCIAL MENU ============================================ */ 

             .social-menu ul {
				bottom: -6rem;
                right: -3rem;         
            }        
                
            .social-menu ul li .fa {
                font-size: 18px;
                line-height: 36px;
            }

            .social-menu ul li a {
                width: 36px;
                height: 36px;
            } 
                
/* ==================================================================================================== */
/* ==================================== 1400PX END FOOTER ============================================= */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 1400PX END RESPONSIVE ======================================== */
/* ==================================================================================================== */









/* ==================================================================================================== */
/* ==================================== RESPONSIVE 1200PX ============================================= */
/* ==================================================================================================== */

		    @media screen and (max-width: 1200px) {

            h1, h2 {
                font-size: 2.6rem;
            }
                
            h3 {
                font-size: 1.5rem;    
            }

            p, a {
                font-size: 0.9rem;
            }  
    
/* ==================================================================================================== */
/* ==================================== 1200PX HEADER ================================================= */
/* ==================================================================================================== */
                
/* ==================================== 1200PX TITEL ================================================== */
                
/* ==================================== 1200PX NAVIGATION ============================================= */

     
                
/* ==================================== 1200PX LOGO =================================================== */		
                
          #logo {
		  	width: 30vw;
		}    
                
/* ==================================================================================================== */
/* ==================================== 1200PX END HEADER ============================================= */
/* ==================================================================================================== */ 
                    
/* ==================================================================================================== */
/* ==================================== 1200PX MAIN =================================================== */
/* ==================================================================================================== */
 
/* ==================================== 1200PX ANGEBOTE =============================================== */

            .max_width {
                max-width: 750px;
            }                 
                
/* ==================================== 1200PX PORTFOLIO ============================================== */
                
            
             
/* ==================================== 1200PX UEBER MICH ============================================= */
                                            
/* ==================================================================================================== */
/* ==================================== 1200PX END MAIN =============================================== */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 1200PX FOOTER ================================================= */
/* ==================================================================================================== */                
    
/* ==================================== 1200PX KONTAKT ================================================ */
    
/* ==================================== 1200PX TO TOP BUTTON ========================================== */
                
/* ==================================== 1200PX SOCIAL MENU ============================================ */
				
				
            .social-menu ul li .fa {
                font-size: 22.5px;
                line-height: 45px;
            }

            .social-menu ul li a {
                width: 45px;
                height: 45px;
            }  
                
/* ==================================================================================================== */
/* ==================================== 1200PX END FOOTER ============================================= */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 1200PX END RESPONSIVE ======================================== */
/* ==================================================================================================== */









/* ==================================================================================================== */
/* ==================================== 1024PX RESPONSIVE ============================================= */
/* ==================================================================================================== */

@media (max-width: 1024px) {

    h1, h2 {
        font-size: 2.4rem;
    }
            
    h3 {
        font-size: 1.3rem;    
    }                

/* ==================================================================================================== */
/* ==================================== 1024PX NAVIGATION ============================================= */
/* ==================================================================================================== */



    


/* ==================================================================================================== */
/* ==================================== 1024PX MAIN =================================================== */
/* ==================================================================================================== */

    .angebot-card {
        flex: 1 1 calc(33.333% - 2rem);
        max-width: calc(33.333% - 2rem);
    }

    #main_zwei {
        width: 100%;
        height: auto;
        padding: 70px 0px;
    }
            
    #uebermich img {
        width: 50%;
    }

/* ==================================================================================================== */
/* ==================================== 1024PX KONTAKT ================================================ */
/* ==================================================================================================== */

    #kontakt {
        width: 100%;      
    }

    form, input, textarea, button  {
        font-size: 1rem;
    }

    input:focus~label, input:valid~label, textarea:focus~label, textarea:valid~label {
        font-size: 0.8rem;
    }

/* ==================================================================================================== */
/* ==================================== 1024PX SOCIAL MENU ============================================ */
/* ==================================================================================================== */

    .social-menu ul li .fa {
        font-size: 22px;
        line-height: 44px;
    }

    .social-menu ul li a {
        width: 44px;
        height: 44px;
    }

/* ==================================================================================================== */
/* ==================================== 1024PX END ==================================================== */
/* ==================================================================================================== */

}











/* ==================================================================================================== */
/* ==================================== RESPONSIVE 912PX ============================================== */
/* ==================================================================================================== */

		    @media screen and (max-width: 920px) {	
				
             h1, h2 {
                font-size: 2rem;
            }
				
			h3 {
                font-size: 1.2rem;    
            }                  
/* ==================================================================================================== */
/* ==================================== 912PX HEADER ================================================== */
/* ==================================================================================================== */
                
/* ==================================== 912PX TITEL =================================================== */
                
/* ==================================== 912PX NAVIGATION ============================================== */

                
/* ==================================== 912PX LOGO ==================================================== */			

         #logo {
		  	width: 32vw;
		}
                
/* ==================================================================================================== */
/* ==================================== 912PX END HEADER ============================================== */
/* ==================================================================================================== */ 
                    
/* ==================================================================================================== */
/* ==================================== 912PX MAIN ==================================================== */
/* ==================================================================================================== */
                
/* ==================================== 912PX ANGEBOTE =============================================== */                   
                
		  .angebot-card {
			flex: 1 1 calc(50% - 2rem); /* 2 Karten pro Zeile */
			max-width: calc(50% - 2rem);
		  }          
                           
/* ==================================== 912PX PORTFOLIO =============================================== */      
    
		  .portfolio_videos {
			grid-template-columns: repeat(2, 1fr);
		  }
                
/* ==================================== 912PX UEBER MICH ============================================== */
                                            
/* ==================================================================================================== */
/* ==================================== 912PX END MAIN ================================================ */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 912PX FOOTER ================================================== */
/* ==================================================================================================== */                
    
/* ==================================== 912PX KONTAKT ================================================= */
    
/* ==================================== 912PX TO TOP BUTTON =========================================== */
                
/* ==================================== 912PX SOCIAL MENU ============================================= */ 
				
             .social-menu ul {
               	bottom: -4rem;
                
            }

            .social-menu ul li .fa {
                font-size: 14px;
                line-height: 28px;
            }

            .social-menu ul li a {
                width: 28px;
                height: 28px;
            }                  
                
/* ==================================================================================================== */
/* ==================================== 912PX END FOOTER ============================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 912PX END RESPONSIVE ========================================= */
/* ==================================================================================================== */









/* ==================================================================================================== */
/* ==================================== RESPONSIVE 768PX ============================================== */
/* ==================================================================================================== */

            @media screen and (max-width: 768px) {

             h1, h2 {
                font-size: 1.6rem;
            }
                
            h3 {
                font-size: 0.9rem;    
            }  

            p, a {
                font-size: 0.8rem;
            }  
			
/* ==================================================================================================== */
/* ==================================== 768PX HEADER ================================================== */
/* ==================================================================================================== */
                
/* ==================================== 768PX TITEL =================================================== */
                
/* ==================================== 768PX NAVIGATION ============================================== */
                
               
/* ==================================== 768PX LOGO ==================================================== */			
        
			#logo {
				width: 45vw;
			}
				
			.video-wrapper {
			  padding: 1rem;
			}

/* ==================================================================================================== */
/* ==================================== 768PX END HEADER ============================================== */
/* ==================================================================================================== */ 
                
                
                
/* ==================================================================================================== */
/* ==================================== 768PX MAIN ==================================================== */
/* ==================================================================================================== */

/* ==================================== 768PX ANGEBOTE ================================================ */                  
                
		   .angebot-card {
			flex: 1 1 100%;
			max-width: 100%;
		    }
                
/* ==================================== 768PX PORTFOLIO =============================================== */


                
/* ==================================== 768PX UEBER MICH ============================================== */
                             
            #main_zwei #uebermich img {
                width: 320px;
            }				
				
/* ==================================================================================================== */
/* ==================================== 768PX END MAIN ================================================ */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 768PX FOOTER ================================================== */
/* ==================================================================================================== */                
    
/* ==================================== 768PX KONTAKT ================================================= */
		
            #kontakt {
                 width: 100%;      
            }

            form, input, textarea, button  {
                font-size: 1rem;
            }

            input:focus~label, input:valid~label, textarea:focus~label, textarea:valid~label {
                font-size: 0.8rem;
            }
    
/* ==================================== 768PX TO TOP BUTTON =========================================== */
                
/* ==================================== 768PX SOCIAL MENU ============================================= */ 
           
			social-menu ul {
				bottom: -5rem;
            }
                
/* ==================================================================================================== */
/* ==================================== 768PX END FOOTER ============================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 768PX END RESPONSIVE ========================================= */
/* ==================================================================================================== */











/* ==================================================================================================== */
/* ==================================== RESPONSIVE 649PX ============================================== */
/* ==================================================================================================== */

		    @media screen and (max-width: 649px) {

             h1, h2 {
                font-size: 1.6rem;
            }
                
            p, a {
                font-size: 0.7rem;
            }                 
                
/* ==================================================================================================== */
/* ==================================== 649PX HEADER ================================================== */
/* ==================================================================================================== */
                
/* ==================================== 649PX TITEL =================================================== */
            
/* ==================================== 649PX NAVIGATION ============================================== */
                
               
                
/* ==================================== 649PX LOGO ==================================================== */	
				
				
			#logo {
				width: 50vw;
			}
        
 			.video-wrapper {
			  padding: 0.6rem;
			}    	
                
/* ==================================================================================================== */
/* ==================================== 649PX END HEADER ============================================== */
/* ==================================================================================================== */ 
     
                
                
/* ==================================================================================================== */
/* ==================================== 649PX MAIN ==================================================== */
/* ==================================================================================================== */

/* ==================================== 649PX ANGEBOTE ================================================ */                  
                                
                   
                
/* ==================================== 649PX PORTFOLIO =============================================== */
                  
					.portfolio_videos {
						grid-template-columns: 1fr;
				  	}

				  	.video_item iframe,
				  	.video_item video {
						max-height: 300px;
				  	}

                
/* ==================================== 649PX UEBER MICH ============================================== */
                                            
/* ==================================================================================================== */
/* ==================================== 649PX END MAIN ================================================ */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 649PX FOOTER ================================================== */
/* ==================================================================================================== */                
    
/* ==================================== 649PX KONTAKT ================================================= */
    
/* ==================================== 649PX TO TOP BUTTON =========================================== */
                
/* ==================================== 649PX SOCIAL MENU ============================================= */ 

        
                
/* ==================================================================================================== */
/* ==================================== 649PX END FOOTER ============================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 649PX END RESPONSIVE ========================================= */
/* ==================================================================================================== */










/* ==================================================================================================== */
/* ==================================== RESPONSIVE 480PX ============================================== */
/* ==================================================================================================== */

		    @media screen and (max-width: 480px) {
                
            body {
                padding: 1.7rem;
                padding-left: 1.2rem;
              } 

             h1, h2 {
                font-size: 1rem;
            }

            h3 {
                font-size: 0.7rem;    
            }  
                

            p, a {
                font-size: 0.65rem;
            }      
			
/* ==================================================================================================== */
/* ==================================== 480PX HEADER ================================================== */
/* ==================================================================================================== */
                 
                                
/* ==================================== 480PX TITEL =================================================== */
                
 		#titel {
			position: absolute;
            bottom: 3rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
		}       
                
/* ==================================== 480PX NAVIGATION ============================================== */
                

               
/* ==================================== 480PX LOGO ==================================================== */			
        
			#logo {
				width: 60vw;
			}
				
 			.video-wrapper {
			  padding: 1px;
			}   
				
/* ==================================================================================================== */
/* ==================================== 480PX END HEADER ============================================== */
/* ==================================================================================================== */ 

                
                
/* ==================================================================================================== */
/* ==================================== 480PX MAIN ==================================================== */
/* ==================================================================================================== */            
  
/* ==================================== 480PX ANGEBOTE ================================================ */                  
          
         
                
                
                
/* ==================================== 480PX PORTFOLIO =============================================== */
               
            

/* ==================================== 480PX UEBER MICH ============================================== */
                                            
            #main_zwei #uebermich img {
                width: 280px;
            }					
				
/* ==================================================================================================== */
/* ==================================== 480PX END MAIN ================================================ */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 480PX FOOTER ================================================== */
/* ==================================================================================================== */                
    
/* ==================================== 480PX KONTAKT ================================================= */

            form, input, textarea, button  {
                font-size: 0.7rem;
            }

            input:focus~label, input:valid~label, textarea:focus~label, textarea:valid~label {
				top: -26px;
                font-size: 0.5rem;
            }
    
/* ==================================== 480PX TO TOP BUTTON =========================================== */
                
/* ==================================== 480PX SOCIAL MENU ============================================= */ 
                
                

              
/* ==================================================================================================== */
/* ==================================== 480PX END FOOTER ============================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 480PX END RESPONSIVE ========================================= */
/* ==================================================================================================== */











/* ==================================================================================================== */
/* ==================================== RESPONSIVE 320PX ============================================== */
/* ==================================================================================================== */

		    @media screen and (max-width: 320px) {

             h1, h2 {
                font-size: 0.8rem;
            }

            h3 {
                font-size: 0.5rem;    
            }                 
                
            p, a {
                font-size: 0.4rem;
            }                  
 		
/* ==================================================================================================== */
/* ==================================== 320PX HEADER ================================================== */
/* ==================================================================================================== */
                
/* ==================================== 320PX TITEL =================================================== */
                
/* ==================================== 320PX NAVIGATION ============================================== */
                
             
/* ==================================== 320PX LOGO ==================================================== */

			
               
/* ==================================================================================================== */
/* ==================================== 320PX END HEADER ============================================== */
/* ==================================================================================================== */ 

                
                
/* ==================================================================================================== */
/* ==================================== 320PX MAIN ==================================================== */
/* ==================================================================================================== */
                           
                
/* ==================================== 320PX PORTFOLIO =============================================== */
               
         
/* ==================================== 320PX UEBER MICH ============================================== */
                                            
/* ==================================================================================================== */
/* ==================================== 320PX END MAIN ================================================ */
/* ==================================================================================================== */                
 
   
                
/* ==================================================================================================== */
/* ==================================== 320PX FOOTER ================================================== */
/* ==================================================================================================== */                
    
/* ==================================== 320PX KONTAKT ================================================= */
    
/* ==================================== 320PX TO TOP BUTTON =========================================== */
                
/* ==================================== 320PX SOCIAL MENU ============================================= */ 
                
                    
                
/* ==================================================================================================== */
/* ==================================== 320PX END FOOTER ============================================== */
/* ==================================================================================================== */

/* ==================================================================================================== */
}/* ==================================== 320PX END RESPONSIVE ========================================= */
/* ==================================================================================================== */










/* ==================================================================================================== */
/* ==================================== VORLAGE RESPONSIVE 000PX ============================================== */
/* ==================================================================================================== */

		    @media screen and (max-width: 000px) {

/* ==================================================================================================== */
}/* ==================================== END RESPONSIVE 320PX ========================================= */
/* ==================================================================================================== */