@charset "utf-8";
/* CSS Document */

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

html{ scroll-behavior:smooth; }

body{
	width:100%;
	min-height:100vh;
	font-family:"Open Sans", sans-serif;
}

a{
	color:#666;
	text-decoration:none;
	text-transform:uppercase;
	font-size:1.1rem;
	font-weight:400;
}

#top{ position:fixed; top:0; left:0; width:0; height:0; }

span{color:#A80306;}
/* ---------------- Header ---------------- */
#header{
	height:130px;
	width:70%;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#fff;
	border-bottom:1px solid #C3C2C2;
	position:relative;
	flex-wrap:nowrap;

	/* Logo + Close/Hamburger bleiben über dem Overlay */
	z-index:10001;
}

.logo{ height:40px; width:auto; }

.logo-link{
	display:flex;
	align-items:center;
	position:relative;
	z-index:10002;
}

/* ---------------- Desktop Navbar ---------------- */
.navbar{
	display:flex;
	align-items:center;
	justify-content:flex-end;
}

.navbar ul{
	display:inline-block;
	width:auto;
	list-style:none;
}

.navbar ul li{
	display:inline-block;
	margin:0 25px;
	text-align:center;
	position:relative;
	list-style:none;
}

.navbar ul li a{
	transition:.3s ease;
	display:inline-block;
	line-height:1.2;
}

.navbar ul li a:hover{ color:#960f04; }

.navbar ul li a.active{
	color:#960f04;
	font-weight:700;
}

/* Desktop Submenu (Hover-Fade) */
.has-submenu{ position:relative; }
.has-submenu > .submenu-panel{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	background:rgba(255,255,255,0.95);
	position:absolute;
	padding:10px;

	/* ✅ FIX 1 (minimal): direkt unter dem Menüpunkt */
	top:100%;

	left:-40px;
	border:1px solid #999;
	min-width:220px;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	/* ✅ FIX 2 (minimal): keine Hover-Lücke durch translateY */
	transform:translateY(0);

	transition:opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}

.has-submenu:hover > .submenu-panel{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateY(0);
	transition:opacity .5s ease, transform .5s ease, visibility 0s;
}

.has-submenu > .submenu-panel li{
	display:block;
	width:100%;
	margin:0;
	padding:0;
	text-align:left;
}

.has-submenu > .submenu-panel li + li{ margin-top:8px; }

.has-submenu > .submenu-panel a{
	display:block;
	width:100%;
	font-size:1rem;
	line-height:1.2;
	padding:6px 6px;
}

/* Arrow */
.submenu-arrow{
	display:inline-block;
	margin-left:10px;
	font-size:0.9rem;
	transform:translateY(-1px);
	transition:transform .3s ease;
}

.submenu li{ margin:0; padding:0;}
.submenu li a:hover{background:#ebe8e9;}
/* ---------------- Hamburger ---------------- */
.nav-toggle{
	display:none;
	width:44px;
	height:44px;
	border:0;
	background:transparent;
	cursor:pointer;
	padding:0;

	flex-direction:column;
	justify-content:center;
	align-items:center;
	gap:6px;

	position:relative;
	z-index:10002;
}

.nav-toggle span{
	display:block;
	width:26px;
	height:2px;
	background:#666;
	border-radius:2px;
	margin:0;
	transition:transform .3s ease, opacity .3s ease;
	transform-origin:center;
}

#header.is-open .nav-toggle span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
#header.is-open .nav-toggle span:nth-child(2){ opacity:0; }
#header.is-open .nav-toggle span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

.hero{
	margin:0;
	width:100%;
	min-height:550px;
	background:url("../img/hero.jpg");
	background-size:cover;
	background-repeat:no-repeat;
	background-position:top left;
}

.text{
	width:60%;
	margin:70px auto 150px auto;
	color:#666;
	text-align:left;
	font-size:1.3rem;
	font-weight:400;
	line-height:150%;
}

footer{
	width:100%;
	padding:80px 15% 40px 15%;
	background:#b33f10;
	position:relative;
	margin-bottom:0;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
	color:#EAC6B9;
	font-size:1rem;
	line-height:170%;
}

footer .menu{ display:flex; flex-direction:row; }

footer a{
	display:inline-block;
	margin-right:30px;
	color:#fff;
	letter-spacing:1px;
}

.up{
	position:absolute;
	right:15%;
	bottom:40px;
}
.arrow {
  width: 40px;
  height: 40px;
  position: relative;
  transition:.3s ease;
}

.arrow::before,
.arrow::after {
  content: "";
  position: absolute;
  top: 12px;
  width: 22px;
  height: 4px;
  background-color: #fff; /* Pfeilfarbe */
  border-radius: 2px;
}

.arrow::before {
  left: 2px;
  transform: rotate(-45deg);
}

.arrow::after {
  right: 2px;
  transform: rotate(45deg);
}

.arrow:hover{
	opacity:.7;
}


/* ---------------- Responsive Overlay Menu (<=1200px) ---------------- */
@media (max-width:1200px){
	#header{ width:100%; padding:0 5% 0 10%; }
	.logo{height:50px;}
	.nav-toggle{ display:flex; }

	/* Overlay Hauptmenü */
	.navbar{
		position:fixed;
		top:0; left:0;
		width:100%;
		z-index:10000;

		background:#fff;
		border-bottom:1px solid rgba(195,194,194,0.6);

		transform:translateY(-110%);
		opacity:0;
		visibility:hidden;
		pointer-events:none;

		transition:transform .5s ease, opacity .5s ease, visibility 0s linear .5s;

		max-height:100vh;
		overflow:auto;

		padding-top:130px; /* Header bleibt sichtbar */
	}

	#header.is-open .navbar{
		transform:translateY(0);
		opacity:1;
		visibility:visible;
		pointer-events:auto;
		transition:transform .5s ease, opacity .5s ease, visibility 0s;
	}

	.navbar ul{
		display:flex;
		flex-direction:column;
		width:100%;
		padding:14px 5% 18px 5%;
	}

	.navbar ul li{
		display:block;
		width:100%;
		margin:0;
		text-align:left;
		padding:12px 0;
		border-top:1px solid rgba(195,194,194,0.45);
	}

	.navbar ul li a{
		display:flex;
		align-items:center;
		justify-content:space-between;
		width:100%;
		line-height:1.2;
	}

	/* ---- Mobile Submenu Panel (Wrapper) ----
	   Wrapper bleibt im Flow -> schiebt "über mich" nach unten
	   Panel slidet/ fadet wie Hauptmenü */
	.submenu-panel{
		/* CLOSED */
		max-height:0;
		overflow:hidden;

		opacity:0;
		visibility:hidden;
		pointer-events:none;

		transform:translateY(-16px);

		transition:
			max-height .5s ease,
			transform .5s ease,
			opacity .5s ease,
			visibility 0s linear .5s;

		margin-top:8px;
	}

	/* OPEN */
	.has-submenu.submenu-open > .submenu-panel{
		max-height:500px;
		overflow:hidden;

		opacity:1;
		visibility:visible;
		pointer-events:auto;

		transform:translateY(0);

		transition:
			max-height .5s ease,
			transform .5s ease,
			opacity .5s ease,
			visibility 0s;
	}

	/* Desktop-ul-ul neutralisieren: in Mobile steuert .submenu-panel die Animation */
	.has-submenu > .submenu-panel{
		position:static !important;
		top:auto !important;
		left:auto !important;
		border:0 !important;
		background:transparent !important;
		padding:0 !important;
		margin:0 !important;

		opacity:1 !important;
		visibility:visible !important;
		pointer-events:auto !important;
		transform:none !important;

		display:flex !important;
		flex-direction:column !important;
		align-items:stretch !important;
		min-width:0 !important;
	}

	/* Einheitliche Abstände/Höhen im Submenu */
	.has-submenu > .submenu-panel li{ border-top:0; padding:0; margin:0; }
	.has-submenu > .submenu-panel li + li{ margin-top:8px; }

	.has-submenu > .submenu-panel a{
		display:block;
		width:100%;
		font-size:1rem;
		line-height:1.2;
		padding:6px 0 6px 12px;
		text-transform:uppercase;
		justify-content:flex-start;
	}

	/* Pfeil drehen */
	.has-submenu > .submenu-link .submenu-arrow{ transform:rotate(0deg); }
	.has-submenu.submenu-open > .submenu-link .submenu-arrow{ transform:rotate(90deg); }


.hero{min-height:450px;}
.text{width:80%;}

}

@media only screen and (max-width:1000px){
.hero{min-height:350px;}
}

@media only screen and (max-width:800px){
.logo{height:40px;}
.hero{min-height:300px;}
.text{width:90%; font-size:1.1rem;}
}

@media only screen and (max-width:600px){
.hero{min-height:200px;}
.text{width:90%; font-size:1rem;}
footer{padding:50px 5% 40px 10%;}
.arrow{right:0;
}
}