:root 	{
					--color-blue:   #0b2c43;
					--color-orange_:   #e26b25;
					--color-orange:   #9E3500;
					
				}

		@font-face {
			font-family: 'Roboto';
			src: url('/assets/fonts/roboto-latin-ext-400-normal.woff2') format('woff2');
			font-weight: 400;
			font-style: normal;
			font-display: swap;
		}
		
		@font-face {
			font-family: 'Roboto';
			src: url('/assets/fonts/roboto-latin-ext-700-normal.woff2') format('woff2');
			font-weight: 700;
			font-style: normal;
			font-display: swap;
		}

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

        html {font-size: 18px;scroll-behavior: smooth;}
        body {font-family: 'Roboto', sans-serif;margin: 0;max-width:100vw; overflow-x:none;}

        /* ------------------------------------ */
        /* Navigation */
        /* ------------------------------------ */
        /* Notiz: Fixierte Navbar mit zentrierter Breite von 1200px, mobil mit Hamburger-Menü */
        .navbar {background-color: #ffffff;padding: 1rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: absolute;width: 100%;max-width:100vw;top: 0;z-index: 1000;}
        .nav-container {max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;}
        .logo {;}
        .nav-links {display: flex;gap: 3rem;}
        .nav-links a {text-decoration: none;color: var(--color-blue);font-weight: 400;font-size:1rem;}
        .nav-links a:hover {color: var(--color-orange);}
        .hamburger {display: none;font-size: 1.5rem;cursor: pointer;margin-right:50px;}


        @media (max-width: 768px) {
        
			.hamburger {display: block;}
            .nav-links {display: none;flex-direction: column; position: absolute;top: 100px;left: 0;width: 100%;background-color: #fff;padding: 1rem;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);gap:1.5rem},
            .nav-links a {display: block;margin:18px 0;}
			.nav-links a:hover {text-decoration:underline; color:var(--color-orange);}
            .nav-links.active {display: flex;flex-direction:column;}
            
            }


        /* ------------------------------------ */
        /* Hero-Bereich */
        /* ------------------------------------ */
        .hero {
        	aspect-ratio: 16/9;
            background-image: url('/assets/img/hero.webp');
            background-color: #ddd;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            height: 800px;
            max-height:60vh;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .hero-container {max-width: 1200px;margin: 0 auto;padding: 2rem;display: flex;justify-content: space-between;width: 100%;}
        .hero-left {max-width: 50%;;padding:18px;background:rgb(255,255,255,.5);border-radius:9px; }
        .hero-right {max-width: 50%;}
        .hero h1 {font-size: 2.5rem;font-weight: 700;color: var(--color-blue);text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);margin-bottom: 1rem;}
        .hero p {color: var(--color-blue);text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);margin-bottom: 1.5rem;line-height: 1.5;}


		@media (max-width: 768px) {
        	.hero h1 {font-size: 2rem;}
        	.hero-left {margin-top:150px;}
		}
		
        /* ------------------------------------ */
        /* Buttons */
        /* ------------------------------------ */
        .cta-button {display: inline-block;padding: 0.75rem 1.5rem;background-color: var(--color-orange);border:1px solid var(--color-orange);color: #fff;text-decoration: none;border-radius: 5px;font-weight: 700;transition: background-color 0.3s ease;}
        .cta-button:hover {background-color: #fff;color:  var(--color-orange);}

        /* ------------------------------------ */
        /* Leistungen Section */
        /* ------------------------------------ */
        .services {background-color: #ffffff;padding: 3rem 1rem;}
        .services-container {max-width: 1200px;margin: 0 auto;text-align: center;}
        .services h2 {font-size: 2rem;font-weight: 700;color: var(--color-blue);margin-bottom: 2rem;}
        .services-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 1.5rem;margin-bottom: 2rem;}
        .service-box {background-color: #f8f9fa;padding: 1.5rem;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
        .service-box .icon {font-size: 3rem;color: var(--color-blue);margin-bottom: 1rem;}
		.service-box p {margin: 0;color: var(--color-blue);font-weight: 400;font-size: 1.2rem}
        .service-box:hover .icon {color: var(--color-orange);}
        .service-box:hover p {color: var(--color-orange);}
        .services-teaser {color: #555;line-height: 1.5;margin-bottom: 1.5rem;}
        
        
		@media (max-width: 768px) {
		        .services h2 {font-size: 1.6rem;}
		        .services-grid {gap: 1rem;margin-bottom: 1rem;}
		        .service-box {background-color: transparent;padding: 0;box-shadow:none;}
		        .service-box .icon {font-size: 1.2rem;color: var(--color-blue);display:inline;}
		        .service-box p {display:inline;}
		}


        /* ------------------------------------ */
        /* Vorteile Section */
        /* ------------------------------------ */
        /* Notiz: Helles graues Hintergrund mit zwei Boxen, links Text mit Liste, rechts Bild, mobil gestapelt */
        .advantages {background-color: #f5f8fa;padding: 3rem 1rem;}
        .advantages-container {max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 2rem;}
        .advantages-left {max-width: 50%;}
        .advantages-right {max-width: 50%;}
        .advantages-right img {width: 100%;height: auto;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
        .advantages h3 {font-size: 1.8rem;font-weight: 700;color: #333;margin-bottom: 1rem;}
        .advantages p {color: #555;line-height: 1.5;margin-bottom: 1.5rem;}
        .advantages ul {list-style: none;padding: 0;margin-bottom: 1.5rem;}
        .advantages li {display: flex;align-items: center;color: #333;margin-bottom: 0.5rem;}
        .advantages li::before {content: '✓';color: var(--color-orange);font-size: 1.2rem;margin-right: 0.5rem;}


        /* ------------------------------------ */
        /* Kontakt Section */
        /* ------------------------------------ */
        .contact {background-image: url('/assets/img/bckgrnd-1.webp');background-size: cover;background-position: center;background-repeat: no-repeat;padding: 3rem 1rem;}
        .contact-container {max-width: 1200px;margin: 0 auto;display: flex;align-items: stretch;        justify-content: space-between;gap: 2rem;}
        .contact-left {flex: 3;background-color: rgba(255, 255, 255 );padding: 2rem;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
        .contact-right {flex: 1;background-color: rgba(255, 255, 255);padding: 2rem;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
        .contact h3 {font-size: 1.8rem;font-weight: 700;color: var(--color-blue);margin-bottom: 1rem;}
        .contact h4 {font-size: 1.4rem;font-weight: 700;color: var(--color-blue);margin: 1.5rem 0 1rem;}
        .contact form {display: grid;gap: 1rem;}
        .form-row {display: flex;gap: 1rem;}
        .form-row input,
        .form-row textarea {flex: 1;padding: 1rem;border:none;border-radius:9px;background:#f5f8fa;font-size: 1rem;}
        .form-row input[type="text"],
        .form-row input[type="email"],
        .form-row input[type="tel"] {width: 100%;}
        .form-row textarea {width: 100%;min-height: 100px;resize: vertical;}
		.form-checkbox {display: flex;align-items: center;gap: 0.5rem;color: #333;font-size: 0.9rem;margin-top: 0.5rem;}
        .contact-right p {color: #333;margin: 0.5rem 0;}
        .contact-right .einsatzgebiete {color: #555;margin: 0.5rem 0;}
        .contact-right img {width: 100%;height: auto;border-radius: 5px;margin-top: 1rem;}

        /* ------------------------------------ */
        /* Kundenstimmen Section */
        /* ------------------------------------ */

        .testimonials {background-color: #ffffff;padding: 3rem 1rem;}
        .testimonials-container {max-width: 1200px;margin: 0 auto;text-align: center;}
        .testimonials h2 {font-size: 2rem;font-weight: 700;color: #333;margin-bottom: 2rem;}
        .testimonial-box {background-color: #f8f9fa;padding: 2rem;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);max-width: 600px;margin: 0 auto;position: relative;overflow: hidden;}
        .testimonial-content {opacity: 0;position: absolute;width: 100%;left: 100%;}
        .testimonial-content.active {opacity: 1;position: relative;left: 0;animation: slideIn 0.5s forwards;}
        .testimonial-content.exit {animation: slideOut 0.5s forwards;}
        .stars {color: #ffc107;font-size: 1.2rem;margin-bottom: 1rem;}
        .testimonial-text {color: #555;line-height: 1.5;margin-bottom: 1rem;}
        .testimonial-author {font-weight: 700;color: #333;}

        @keyframes slideIn {from {left: 100%;opacity: 0;}to {left: 0;opacity: 1;}}
        @keyframes slideOut {from {left: 0;opacity: 1;}to {left: -100%;opacity: 0;}}

        /* ------------------------------------ */
        /* Über Uns Section */
        /* ------------------------------------ */
        /* Notiz: Helles graues Hintergrund mit zwei Boxen, links Text, rechts Bild, mobil gestapelt */
        .about {background-color: #f5f8fa;padding: 3rem 1rem;}
        .about-container {max-width: 1200px;margin: 0 auto;display: flex;align-items: center;justify-content: space-between;gap: 2rem;}
        .about-left {max-width: 50%;}
        .about-right {max-width: 50%;}
        .about-right img {width: 100%;height: auto;border-radius: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
        .about h3 {font-size: 1.8rem;font-weight: 700;color: #333;margin-bottom: 1rem;}
        .about p {color: #555;line-height: 1.5;margin-bottom: 1.5rem;}


        /* ------------------------------------ */
        /* Footer */
        /* ------------------------------------ */
        /* Notiz: Dunkler Footer mit 1200px-Container, 4 Boxen-Grid, mobil gestapelt, klassisches Design mit Überschriften und Listen */
        .footer {background-color: var(--color-blue);padding: 3rem 1rem;color: #ffffff}
        .footer-container {max-width: 1200px;margin: 0 auto;display: grid;grid-template-columns: repeat(4, 1fr);gap: 2rem;}
        .footer-box h4 {font-size: 1.2rem;font-weight: 700;margin-bottom: 1rem;}
        .footer-box ul {list-style: none;padding: 0;}
        .footer-box ul li {margin-bottom: 0.5rem;}
        .footer-box ul li a {color: #ffffff;text-decoration: none;}
        .footer-box ul li a:hover {color: #007bff;}
        .footer-box p {margin: 0.5rem 0;}
        .footer-box .logo-placeholder {font-size: 1.5rem;font-weight: 700;margin-bottom: 1rem;}

        
        /* ------------------------------------ */
        /* Responsive Anpassungen */
        /* ------------------------------------ */
        @media (max-width: 768px) {
        
            .hero-container {flex-direction: column;padding: 1rem;}
            .hero-left, .hero-right {max-width: 100%;}
            .hero-right {min-height: 100px;}
            .services-grid {grid-template-columns: 1fr;}
            .advantages-container, .entrumpelung-container, .contact-container, .about-container {flex-direction: column;padding: 1rem;}
            .advantages-left, .advantages-right, .entrumpelung-left, .entrumpelung-right,
            .contact-left, .contact-right, .about-left, .about-right {flex: none;max-width: 100%;}
            .form-row {flex-direction: column;gap: 0.5rem;}
            .testimonial-box {padding: 1.5rem;}
            .footer-container {grid-template-columns: 1fr;text-align: center;}
        }
        
        .tac {text-align:center}
        a {color:var(--color-orange);text-decoration:none}
        a:hover {color:var(--color-orange);text-decoration:underline}
        
		.hrl::after {  content: ""; background-color: var(--color-orange);height: 3px;width: 114px;display: block;margin-bottom: 1rem; margin-top:0.5rem}
		.hrc::after {content: "";background-color: var(--color-orange);height: 3px;width: 114px;display: block;margin: 1rem auto;}

        .scroll-up-btn {width: 45px;height: 45px;position: fixed;bottom: 45px;right: 45px;background-color: rgba(0, 0, 0, 0.7);border-radius: 5px;display: flex;align-items: center;justify-content: center;cursor: pointer;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;}
        .scroll-up-btn.show {opacity: 1;visibility: visible;}
        .scroll-up-btn svg {width: 25px;height:25px;fill: white;}
        
        
        
      
        /* ------------------------------------ */
        /* Slide IN Sidebar */
        /* ------------------------------------ */
		.rightoverlay {background: #fff; border-radius: 9px; box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;padding: 18px;position: fixed; top: 36px; /* Start außerhalb des Bildschirms */right: -100%; width: 450px;max-width: calc(100% - 36px);z-index: 999999;height: calc(100% - 72px);overflow: auto;font-size: 14px;transition: right 0.8s ease; /* Glatter Übergang */}
		.rightoverlay.visible {right: 36px;}
		.rightoverlay h3 {margin:18px 0 9px 0; font-size:16px; font-weight:bold;}
		.rightoverlay p {padding-bottom:18px; }
		.rightoverlay ul {margin:0 0 18px 35px;}
		.rightoverlay .close-btn {height:40px; width:40px; border:none;text-align:center;position: absolute;top: 10px;right: 10px; /* Linke obere Ecke innerhalb des Overlays */background: none;font-size: 36px;cursor: pointer;}