:root {
}


/* Base Page */

        :root {
		  --squirrel-brown: #8B4A2F;
		  --squirrel-dark: #5A2E14;
		  --squirrel-orange: #C46A3B;
		  --squirrel-beige: #C75E25; 
		  --squirrel-cream: #F4EDE4;
		  --squirrel-black: #1A1A1A;

		  
		  --color-primary-l: var(--squirrel-brown);
		  --color-primary-d: var(--squirrel-dark);
		  --color-secondary-l: var(--squirrel-beige);
		  --color-secondary-d: var(--squirrel-orange);
		  --color-white: var(--squirrel-cream);
		  --color-black: var(--squirrel-black);
		  --color-grey: #5D5F5F;		 
        }
		
		html {
			scroll-behavior: smooth;
		}

        body {
            margin: 0;
            font-family: Calibri, sans-serif;
			font-size: 18px;
            background: var(--color-white);
            color: var(--color-black);
			line-height:1.5em;
        }

        header {
            text-align: center;
            padding: 2rem 1rem;
            background: var(--color-primary-l);
            color: var(--color-white);
        }

        header img {
            width: 90px;
            margin-bottom: 1rem;
        }

        header h1 {
            margin: 0;
            font-size: 2.8rem;
            font-weight: 700;
        }

        header p {
            font-size: 1.2rem;
            margin-top: .5rem;
        }
		
		header {
			transition: background 0.4s ease;
		}
		header.scrolled {
			background: var(--color-primary-d);
		}		

        .btn {
            display: inline-block;
            margin-top: 1.5rem;
            background: var(--color-secondary-d);
            color: var(--color-black) !important;
            padding: .8rem 1.6rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
        }
		
		.btn:hover {
			transition: background 200ms linear;
			background: var(--color-secondary-l);
		}
		
		a {
			color: var(--color-secondary-d);
		}
		
		a:hover {
			color: var(--color-secondary-l);
		}
		
		a:visited {
			color: var(--color-secondary-d);
		}
		
		a:visited:hover {
			color: var(--color-secondary-l);
		}

        section {
            padding: 3rem 1rem;
            max-width: 900px;
            margin: auto;
        }

        h2 {
            color: var(--color-primary-d);
            margin-bottom: 1rem;
            text-align: center;
            font-weight: 700;
        }

        .services {
            display: grid;
            gap: 1.5rem;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }
		
		.services a {
			text-decoration: none;
		}

        .service-box {
			text-align:center;
            background: var(--color-white);
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
			color: var(--color-black) !important;
        }

        .timeline {
            border-left: 3px solid var(--color-secondary-d);
            padding-left: 1rem;
        }

        .timeline-step {
            margin: 1.2rem 0;
        }

        footer {
            text-align: center;
            padding: 2rem 1rem;
            color: var(--color-white);
            background: var(--color-primary-d);
        }

        form input, form textarea {
            width: 100%;
            padding: .8rem;
            margin-bottom: 1rem;
            border: 1px solid var(--color-primary-l);
            border-radius: 6px;
			line-height:1.5em;
			font-size: 18px;
        }
		
		form input:invalid {
			border:1px solid var(--color-secondary-d) !important;
		}
		
		form input:focus {
			outline:none;
			background-color: var(--color-secondary-d); 
		}

        form button {
            background: var(--color-primary-l);
            border: none;
            padding: .8rem 1.2rem;
            color: var(--color-white);
            border-radius: 6px;
            cursor: pointer;
        }
		
				
		.service-box {
			transition: transform 0.3s ease, box-shadow 0.3s ease;
		}
		.service-box:hover {
			transform: translateY(-5px);
			box-shadow: 0 8px 20px rgba(0,0,0,0.15);
		}	

		.logo-pulse {
			animation: pulse 2s ease-out forwards;
		}

		@keyframes pulse {
			0% { opacity: 0; transform: scale(0.85); }
			100% { opacity: 1; transform: scale(1); }
		}
		
/* Burger Menue */


	* {
	  margin: 0;
	  padding: 0;
	  box-sizing: border-box;
	  font-family: Arial, sans-serif;
	}

	/* Burger */
	.burger {
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  width: 30px;
	  height: 22px;
	  cursor: pointer;
	  z-index: 1001;
	}

	.burger span {
	  display: block;
	  height: 4px;
	  background: var(--color-black);
	  margin-bottom: 5px;
	  border-radius: 2px;
	  transition: 0.3s;
	}

	/* Navigation */
	.nav {
	  position: fixed;
	  top: 0;
	  right: -250px;
	  width: 250px;
	  height: 100vh;
	  background: #222;
	  padding-top: 80px;
	  transition: right 0.3s ease;
	  z-index: 2;
	}

	.nav.active {
	  right: 0;
	}

	.nav ul {
	  list-style: none;
	}

	.nav ul li {
	  text-align: center;
	  margin: 15px 0;
	}

	.nav a,
	.submenu-toggle {
	  color: var(--color-white);
	  text-decoration: none;
	  font-size: 18px;
	  background: none;
	  border: none;
	  cursor: pointer;
	}

	/* Untermenü */
	.submenu {
	  max-height: 0;
	  overflow: hidden;
	  opacity: 0;
	  transform: translateY(-5px);
	  transition: 
		max-height 0.3s ease,
		opacity 0.3s ease,
		transform 0.3s ease;
	}

	.submenu li {
	  margin: 10px 0;
	  list-style: none;
	}

	.submenu li a {
		color:var(--color-secondary-d);
	}

	.submenu li a:visited {
		color:var(--color-secondary-d);
	}

	.submenu li a:hover {
		color:var(--color-secondary-l);
	}
	
	.submenu li a:visited:hover {
		color:var(--color-secondary-l);
	}

	.has-submenu.active .submenu {
	  max-height: 300px;
	  opacity: 1;
	  transform: translateY(0);
	}

	/* Burger Animation */
	.burger.active span:nth-child(1) {
	  transform: rotate(45deg) translate(5px, 5px);
	  background-color:var(--color-white);
	}

	.burger.active span:nth-child(2) {
	  opacity: 0;
	}

	.burger.active span:nth-child(3) {
	  transform: rotate(-45deg) translate(8px, -7px);
	  background-color:var(--color-white);
	}
	
/* Custom Elements */

	.popup {
		display: none;
		position: fixed;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 5;
		justify-content: center;
		align-items: center;
	}

	.popup .popupContent {
		background-color: var(--color-white);
		display: block;
		width: 40%;
		height: 40%;
		padding:20px;
		overflow-y: auto;
	}	
	
@media (max-width: 500px) {
	.popup .popupContent {
		width: 80%;
	}	
}