@charset "utf-8";
/* CSS Document */
:root{
	/*--banner-height-desktop: 96vh;*/
	--banner-height-desktop: 82vh;
	--banner-height-mobile: 52vh;
	--overlay: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 75%);
	--radius: 0px;
	--gap: 2px;
	--text-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* Layout-Wrapper */
.hero-split{
	display: flex;
	gap: var(--gap);
	align-items: stretch;
	width: 100%;
	min-height: var(--banner-height-desktop);
	padding: clamp(0px, 0vw, 0px);
	box-sizing: border-box;
}
/* Panels sind direkt Links – zugänglich und vollflächig klickbar */
.panel{
	position: relative;
	flex: 1 1 0;
	display: grid;
	place-items: end start;
	border-radius: var(--radius);
	overflow: clip;
	text-decoration: none;
	isolation: isolate; /* Text über Overlay */
	transition: flex-basis 2s cubic-bezier(.22,1,.36,1);
	outline: none;
}
/* Hintergrundbild */
.panel img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
/* Overlay für Kontrast */
.panel::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--overlay);
	z-index: -1;
}
/* Textblock */
.panel .copy{
	color: #fff;
	padding: clamp(14px, 3vw, 28px);
	text-align: left;
	max-width: 40ch;
	text-wrap: balance;
}
.panel .eyebrow{
	font-weight: 600;
	font-size: 1.2rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255,255,255,1);
	background: var(--primary);
	padding: 3px 10px; 
	margin: 0 0 .35rem;
	width: max-content;
}
.panel h2{
	font: 600 clamp(1.1rem, 2.2vw, 1.8rem)/1.15 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
	margin: 0 0 .4rem;
	text-shadow: var(--text-shadow);
}
.panel p{
	font: 600 clamp(.95rem, 1.2vw, 1.05rem)/1.4 "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;	margin: 0;
	opacity: .95;
	text-shadow: var(--text-shadow);
}
/* Interaktion: Hover auf Container lässt alle gleich starten, die aktive wächst */
.hero-split:hover .panel,
.hero-split:focus-within .panel{
	flex-basis: 0;
}
.hero-split:hover .panel:hover,
.panel:focus-visible,
.panel.active{
	flex-basis: 60%;
}
/* Tastatur-Fokus sichtbar & zugänglich */
.panel:focus-visible{
	box-shadow: 0 0 0 4px rgba(255,255,255,.9), 0 0 0 8px rgba(0, 120, 255, .6);
}
/* Button-Style-Hinweis (optional) */
.panel .cta{
	display: inline-block;
	margin-top: .9rem;
	background: rgba(0,0,0,.3);
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 999px;
	padding: .5rem .95rem;
	font-size: 1rem;
	font-weight: 400;
	backdrop-filter: blur(4px);
}
.brand-in-hero{
	position:absolute; 
	z-index:10;
	top: clamp(10px, 2vw, 18px);
	left: clamp(10px, 2vw, 18px);
	padding: .35rem .6rem;
	border-radius: 12px;
}
.brand-in-hero img{ 
	max-width: 200px;
	width: 100%;
	height:auto; 
	display:block; 
	filter:
    drop-shadow(0 12px 24px rgba(0,0,0,.25))
    drop-shadow(0 3px 8px rgba(0,0,0,.18));
}
.brand-in-hero-mobil{
    display: none;
}

/* Mobile: untereinander, leichtes Expandieren bei Fokus/Tap */
@media (max-width: 900px){
	.brand-in-hero{
		display: none;
	}
	.brand-in-hero-mobil{
		display: block;
		position: absolute;
		background: rgba(255,255,255,1);
		padding: 10px 0px;
		max-width: 120px;
		z-index: 99;
		left: 0;
		margin-left: 2%;
	}
	.brand-in-hero-mobil img{
		width: 100%;
	}
	.hero-split{
		min-height: var(--banner-height-mobile);
		flex-direction: column;
	}
	.panel{
		min-height: 26vh;
	}
	/* Etwas weniger ausgeprägtes Expandieren mobil */
	.hero-split:hover .panel:hover,
	.panel:focus-visible,
	.panel.active{
		flex-basis: auto;
		min-height: 38vh;
	}
}

/* Bewegungen reduzieren, wenn gewünscht */
@media (prefers-reduced-motion: reduce){
	.panel{
		transition: none;
	}
  }