/* Startseiten-Slider (CPT "homeslide", Swiper) */
/* Optik angelehnt an das bisherige Revolution-Slider-Layout:
   Kennzeile als Badge oben links auf dem Foto, Textkarte unten rechts
   (hell, rechtsbündig), bei schmalem Slider dunkler Block unter dem Bild. */

/* Container Query statt Media Query: Das kompakte Layout hängt an der Breite
   des Sliders selbst, nicht am Viewport – so passt es auf dem Handy UND in
   einer halben Inhaltsspalte ([conti_slider] in [one_half]) auf dem Desktop. */
.conti-homeslider {
	position: relative;
	width: 100%;
	container: conti-slider / inline-size;
}

.conti-homeslide {
	position: relative;
	display: block;
}

.conti-homeslide__image {
	width: 100%;
	height: 400px;
	background-size: cover;
	background-position: center;
}

/* Kennzeile: eigenes Badge, oben links auf dem Foto */
.conti-homeslide__kennzeile {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 5;
	padding: 0.4em 1em;
	background: rgba( 1, 78, 162, 0.85 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.7 );
	border-radius: 2px;
	font-size: 1.05em;
	font-weight: 600;
	text-decoration: none;
}

/* Theme setzt a:link/a:visited/a:hover farbig – daher alle Link-Zustände
   explizit auf Weiß halten */
a.conti-homeslide__kennzeile,
a.conti-homeslide__kennzeile:link,
a.conti-homeslide__kennzeile:visited {
	color: #fff;
}

a.conti-homeslide__kennzeile:hover,
a.conti-homeslide__kennzeile:active,
a.conti-homeslide__kennzeile:focus {
	background: rgba( 1, 78, 162, 1 );
	color: #fff;
	text-decoration: none;
}

/* Textkarte: hell, rechtsbündig, unten rechts über dem Foto */
.conti-homeslide__overlay {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 4;
	display: block;
	max-width: 62%;
	padding: 1em 1.6em;
	background: rgba( 255, 255, 255, 0.8 );
	box-shadow: -6px -6px 24px rgba( 0, 0, 0, 0.08 );
	color: #111;
	text-align: right;
	text-decoration: none;
}

a.conti-homeslide__overlay:hover {
	background: rgba( 255, 255, 255, 0.9 );
}

/* Ohne Leerzeilen dazwischen – wpautop umschließt den Untertitel mit <p>,
   daher auch dessen Margin explizit zurücksetzen. Alle Zeilen bewusst
   gleich groß; einzige Hierarchie: Titel fett. Leicht erhöhte Laufweite,
   da die Schrift sonst zu eng wirkt.
   Achtung: font-size hier NUR einmal pro Verschachtelungstiefe setzen –
   .subtitle UND das darin verschachtelte <p> beide auf 1.4em zu setzen
   multipliziert die em-Werte (1.4 x 1.4 statt 1.4). Das <p> erbt die
   Größe daher bewusst ohne eigene font-size-Deklaration. */
.conti-homeslide__title,
.conti-homeslide__subtitle,
.conti-homeslide__partner,
.conti-homeslide__termin {
	margin: 0;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.02em;
	color: #111;
}

.conti-homeslide__title {
	font-weight: 700;
}

.conti-homeslide__subtitle p {
	margin: 0;
}

/* Pause/Play-Button (WCAG 2.2.2 "Pause, Stop, Hide") – gleiche Bildsprache
   wie die Swiper-Pfeile: helle Kreisfläche mit Schatten statt dunklem Kreis */
.conti-homeslide__pause {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 2.4em;
	height: 2.4em;
	border: none;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.9 );
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.25 );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.conti-homeslide__pause:hover {
	background: #fff;
}

.conti-homeslide__pause::before {
	content: "\275A\275A"; /* Pause-Symbol (Doppelbalken) */
	color: #014ea2;
	font-size: 0.9em;
}

.conti-homeslide__pause[aria-pressed="true"]::before {
	content: "\25B6"; /* Play-Symbol */
}

/* Swiper-Navigationspfeile: helle Kreisflächen statt nackter Chevrons */
.conti-homeslider .swiper-button-prev,
.conti-homeslider .swiper-button-next {
	width: 2.4em;
	height: 2.4em;
	margin-top: -1.2em;
	background: rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.25 );
	transition: background-color 0.15s ease;
}

.conti-homeslider .swiper-button-prev:hover,
.conti-homeslider .swiper-button-next:hover {
	background: #fff;
}

.conti-homeslider .swiper-button-prev::after,
.conti-homeslider .swiper-button-next::after {
	font-size: 1.1em;
	font-weight: 700;
	color: #014ea2;
}

.conti-homeslider .swiper-button-prev {
	left: 16px;
}

.conti-homeslider .swiper-button-next {
	right: 16px;
}

/* Swiper-Pagination: deutlichere, konsistent gestylte Punkte */
.conti-homeslider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba( 255, 255, 255, 0.85 );
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
	opacity: 1;
}

.conti-homeslider .swiper-pagination-bullet-active {
	background: #014ea2;
}

.conti-homeslider .swiper-pagination {
	bottom: 14px;
	left: 16px;
	right: auto;
	width: auto;
	text-align: left;
}

/* Schmal (Handy oder halbe Spalte): Textkarte wird zum Vollbreite-Block
   unter dem Bild – farblich wie die große Karte (weiß, schwarze Schrift),
   mit dünnem Rahmen, damit sie sich vom weißen Seitenhintergrund abhebt, da eine schmale rechtsbündige Karte dort nicht
   funktioniert und 1000x400 sehr flach wird. Bild im Seitenverhältnis 5:3
   wie die früheren 500x300-RevSlider-Teaser. */
@container conti-slider ( max-width: 767px ) {

	.conti-homeslide__image {
		height: auto;
		aspect-ratio: 5 / 3;
	}

	.conti-homeslide__kennzeile {
		top: 12px;
		left: 12px;
		font-size: 1em;
	}

	.conti-homeslide__overlay {
		position: static;
		display: block;
		box-sizing: border-box;
		max-width: none;
		width: 100%;
		background: #fff;
		border: 1px solid #e2e2e2;
		border-top: none;
		box-shadow: none;
		color: #111;
		text-align: left;
		padding: 1.2em;
	}

	/* Punkte unten auf das Bild statt über den Text: Bildhöhe = 3/5 der
	   Sliderbreite (aspect-ratio oben), 60cqi = 60 % der Containerbreite */
	.conti-homeslider .swiper-pagination {
		top: calc( 60cqi - 24px );
		bottom: auto;
	}

	.conti-homeslide__title,
	.conti-homeslide__subtitle,
	.conti-homeslide__partner,
	.conti-homeslide__termin {
		font-size: 1em; /* mind. ~16px auf Mobil */
	}
}