@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;
}

html.cb-lock, html.cb-lock body { overflow: hidden; }

.cb-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,0.45);
	backdrop-filter:saturate(140%) blur(4px);
	z-index:20000;
}

.cb{
	position:fixed;
	left:50%;
	bottom:20px;
	transform:translateX(-50%);
	width:min(980px, calc(100% - 24px));
	z-index:20001;
	font-family:"Open Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cb__card{
	background:rgba(255,255,255,0.92);
	border:1px solid rgba(195,194,194,0.85);
	border-radius:18px;
	box-shadow:0 18px 60px rgba(0,0,0,0.18);
	padding:18px 18px 16px 18px;
}

.cb__head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:6px;
}

.cb__title{
	font-size:1.1rem;
	color:#960f04;
	letter-spacing:0.2px;
}

.cb__close{
	width:40px;
	height:40px;
	border-radius:12px;
	border:1px solid rgba(195,194,194,0.85);
	background:rgba(255,255,255,0.7);
	color:#666;
	cursor:pointer;
	font-size:1.6rem;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.cb__close:hover{
	background:#fff;
	border-color:#b33f10;
	transform:translateY(-1px);
}

.cb__desc{
	color:#666;
	font-size:1rem;
	line-height:1.45;
	margin:6px 0 10px 0;
}

.cb__meta{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	align-items:center;
	margin-bottom:14px;
}

.cb__pill{
	display:inline-flex;
	align-items:center;
	padding:6px 10px;
	border-radius:999px;
	font-size:.85rem;
	border:1px solid rgba(195,194,194,0.9);
	color:#666;
	background:#fff;
}
.cb__pill--opt{
	border-color:rgba(179,63,16,0.45);
	background:rgba(179,63,16,0.06);
}

.cb__link{
	margin-left:auto;
	font-size:.95rem;
	text-transform:none;
	color:#960f04;
}
.cb__link:hover{ text-decoration:underline; }

.cb__actions{
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}

.cb__btn{
	border:1px solid rgba(195,194,194,0.95);
	background:#fff;
	color:#666;
	border-radius:14px;
	padding:12px 14px;
	font-size:1rem;
	cursor:pointer;
	transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.cb__btn:hover{
	transform:translateY(-1px);
	border-color:#b33f10;
	box-shadow:0 10px 24px rgba(0,0,0,0.10);
}

.cb__btn--primary{
	background:linear-gradient(180deg, rgba(179,63,16,0.95), rgba(150,15,4,0.95));
	border-color:rgba(150,15,4,0.35);
	color:#fff;
}
.cb__btn--ghost{
	background:rgba(255,255,255,0.55);
}

#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;
}

/* ---------------- 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:#fff;
	font-size:1rem;
	line-height:130%;
}

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

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

.arrow{
	color:#fff;
	font-size:3rem;
	font-weight:500;
	position:absolute;
	bottom:40px;
	right:15%;
}


/* ---------------- 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;}
.cb{ bottom:12px; }
.cb__card{ padding:16px 14px 14px 14px; border-radius:16px; }
.cb__actions .cb__btn{ width:100%; }
.cb__link{ margin-left:0; }
}