.hero-image {
	height: 40vh;              /* 70% der Viewport-Höhe */
	width: 100%;
	overflow: hidden;          /* Überstehendes Bild abschneiden */
	background-image:url(../images/background/image_pkw_transporter_wohnmobil.jpg);
	background-size: cover;
	background-position: center;
	padding: 50px;
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-position: center;   /* Bildinhalt mittig */
	display: block;            /* verhindert kleine Whitespaces */
	background:var(--bg-logo-heroimg);
}

	/* ================================
   Basis Call2Action
================================ */



.call2action {
	display: flex;
	flex-direction: column;               /* <a> als Block */
	height: 100%;
	position: relative;             /* für Icon & Ripple */
	padding: 50px;
	border-radius: 20px;
	text-decoration: none;
	color: inherit;
	overflow: visible;              /* Icon darf über den Rand hängen */
	padding-bottom: 60px;
	
	transition:
		transform 0.35s ease,
		filter 0.35s ease,
		opacity 0.35s ease,
		box-shadow 0.35s ease;
}



/* Fokus für Tastatur */
.call2action:focus-visible {
	outline: 3px solid rgba(0, 0, 0, 0.4);
	outline-offset: 6px;
}

/* ================================
   Farbvarianten
================================ */


.call2action.wmobil,
.call2action.pkw {
	background: var(--bg-cta), var(--bg-cta-fallback);
		background-size: cover;
		background-position: bottom;
	/* Blend-Modus */
	--ripple-color: 147, 205, 32;
	box-shadow: 0 0 0 10px var(--boxshadow-cta);
}

/* ================================
   Icon unten links (überhängend)
================================ */

.cta-icon {
	position: absolute;
	left: 18px;
	bottom: 18px;
	width: 110px;
	height: auto;
	pointer-events: none;
	z-index: 1;

	/* Über den Rand hängen */
	transform: translateY(22px);

	/* leichter Schatten für Tiefe */
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));

	transition: transform 0.35s ease;
}



.call2action h2 {
	color: var(--heading-cta);
	text-shadow: 1px 1px 0px #FFF;
	text-transform: uppercase;
}
.call2action h3 {
	color:var(--subtitle-cta);
}

/* ================================
   Ripple-Outline (Desktop only)
================================ */

.call2action::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	z-index: -1;
	opacity: 0;
}

/* Nur Desktop: Hover-Ripple */
@media (hover: hover) and (pointer: fine) {
	.call2action:hover::after {
		animation: rippleOutline 1.6s ease-out infinite;
	}
}

/* Intensiver Ripple */
@keyframes rippleOutline {
	0% {
		opacity: 1;
		box-shadow:
			0 0 0 0 rgba(var(--ripple-color), 0.85),
			0 0 0 10px rgba(var(--ripple-color), 0.55);
	}
	50% {
		opacity: 0.6;
		box-shadow:
			0 0 18px 25px rgba(var(--ripple-color), 0.45),
			0 0 30px 40px rgba(var(--ripple-color), 0.25);
	}
	100% {
		opacity: 0;
		box-shadow:
			0 0 35px 65px rgba(var(--ripple-color), 0),
			0 0 55px 85px rgba(var(--ripple-color), 0);
	}
}

/* ================================
   Desktop Fokus-Effekt
================================ */

@media (hover: hover) and (pointer: fine) {

	/* Wenn eines gehovert wird → das andere wird ruhiger */
	.call2action-group:has(.call2action:hover) .call2action:not(:hover) {
		transform: scale(0.90);
		opacity: 0.75;
		filter: brightness(0.9);
	}

	/* Gehovertes CTA in den Vordergrund */
	.call2action-group .call2action:hover {
		transform: scale(1.05) translateY(-4px);
		opacity: 1;
		filter: brightness(1);
		z-index: 2;
	}

	.cta-icon {
	position: absolute;
	left: 18px;
	bottom: 0px;
	width: 110px;
	pointer-events: none;
	z-index: 1;

	/* Startposition */
	/*transform: translateY(22px) scaleX(-1);*/
	filter: drop-shadow(0 10px 18px rgba(0,0,0,0.20));

	transition: none; /* Animation übernimmt */
}

@media (hover: hover) and (pointer: fine) {

	.call2action:hover .cta-icon {
		animation: driveOut 1.5s ease-in forwards;
	}
}

@keyframes driveOut {

	/* steht noch */
	0% {
		transform: translateY(22px) translateX(0) rotate(0deg);
		opacity: 1;
	}

	/* kleines Ankippen (Startbewegung) */
	20% {
		transform: translateY(22px) translateX(10px) rotate(-6deg);
	}

	/* Fahrt aufnehmen */
	60% {
		transform: translateY(22px) translateX(140px) rotate(0deg);
		opacity: 1;
	}

	/* fährt raus */
	100% {
		transform: translateY(22px) translateX(500px) rotate(0deg) ;
		opacity: 0;
	}
}


.call2action {
	font-size: 22px;
}
.call2action:hover {
	
	color:var(--color-cta-hover);
}
}

/* Button-Optik (kein echtes <button> im Link, sondern ein Span) */
.call2action-group .cta-btn {
	margin-top: auto;           /* das ist der Trick: drückt den Button nach ganz unten */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 700;

	/* Farben nur als Beispiel – ggf. an dein Design anpassen */
	background: #FDD218;
	border: 5px solid #69B925;

	color:#683C11;
}
/* Optional Hover */
.call2action-group .call2action:hover .cta-btn {
	filter: brightness(1.05);
}

.index-heading {
	color: #FFF;
}


.call2action-mini {
	border: 1px solid #333;
	padding: 10px;
	border-radius: 25px;
	transition: .35s all;
}

@media (hover: hover) and (pointer: fine) {

	/* Wenn eines gehovert wird → das andere wird ruhiger */
	.call2action-group-mini:has(.call2action-mini:hover) .call2action-mini:not(:hover) {
		transform: scale(0.90);
		opacity: 0.75;
		filter: brightness(0.9);
		
	}

	/* Gehovertes CTA in den Vordergrund */
	.call2action-group-mini .call2action-mini:hover {
		transform: scale(1.05) translateY(-4px);
		opacity: 1;
		filter: brightness(1);
		z-index: 2;
	}
}




.stoerer {
	position: absolute;
	z-index: 9;
	right: -20px;
	top: -60px;
	width: 120px;
	height: 180px;
	background-size: 100%;
	
	background-repeat: no-repeat;
}

.stoerer.pkw {
	background-image: url(../images/icons/stoerer.png);
}
.stoerer.wmobil {
	background-image: url(../images/icons/stoerer.png);
}

@media (min-width: 992px) and (max-width: 1399px) {
	.stoerer {
		right: -65px;
		top: -80px;
		width:230px;
		height:200px;
	}
}

@media (min-width: 1400px) {
	.stoerer {
		right: -60px;
		top: -80px;
		width: 250px;
		height:250px;
	}
}


.cta-image {
	height: 220px;
	overflow: hidden;
}

.cta-image_img {
    width: 100%;
    height: 100%;
    object-fit: cover;        /* Zuschneiden statt Verzerren */
    object-position: center;  /* <<< DAS ist die Mitte */
    display: block;
}

/* Button-Optik (kein echtes <button> im Link, sondern ein Span) */
.call2action-group-mini .cta-btn {
	margin-top: auto;           /* das ist der Trick: drückt den Button nach ganz unten */
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 12px 16px;
	border-radius: 10px;
	font-weight: 600;

	/* Farben nur als Beispiel – ggf. an dein Design anpassen */
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
}
/* Optional Hover */
.call2action-group .call2action:hover .cta-btn {
	filter: brightness(1.5);
}

.call2action-mini {
	color:var(--color-ctamini);
}

.call2action-mini:hover {
	color:var(--color-ctamini-hover);
}

.call2action-mini .cta-btn {
	background-color: #FDD218;
	border: 5px solid #B3DC1C;
	color:#683C11;
}

.call2action-mini:hover .cta-btn {
	filter: brightness(1.05);
	cursor: pointer;
}

.cta-mini-heading {
	color: var(--color-ctamini-heading);
}