/* =========================================================
   M32 - Technologien (dunkler Karten-Slider)
   Tokens: bg #685a51 | dark #271b11 | hell #f4f5f2 | orange #f48520
   Inter wird global geladen. Font-Sizes in rem, Spacing in px.
   ========================================================= */

section.m32_technologien {
	position: relative;
	background-color: #685a51;
	color: #f4f5f2;
	/* Nachbar-Slides ragen ueber den Container hinaus, duerfen aber den Viewport nicht ueberschreiten (kein H-Scroll) */
	overflow: hidden;
}

/* ---------- Header ---------- */
section.m32_technologien .m32_header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 64px;
	margin-bottom: 118px;
}
section.m32_technologien .m32_header_left {
	flex: 0 0 48%;
	max-width: 48%;
}
section.m32_technologien .m32_header_right {
	flex: 0 0 44%;
	max-width: 44%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Text+Button vertikaler Versatz zur Headline */
	margin-top: 115px;
}

section.m32_technologien .m32_topline {
	display: block;
	margin-bottom: 2px;
	font-size: 1.0625rem;   /* 17px */
	font-weight: 800;
	text-transform: uppercase;
	color: #f48520;
}
section.m32_technologien .m32_titel,
section.m32_technologien .m32_titel * {
	margin: 0;
	font-weight: 800;
	text-transform: uppercase;
	color: #f4f5f2;
}
section.m32_technologien .m32_text {
	margin-bottom: 24px;
	font-size: 1.0625rem;   /* 17px */
	line-height: 25px;
	color: #f4f5f2;
}

/* ---------- Slider ---------- */
section.m32_technologien .m32_slider_wrap {
	position: relative;
}
/* Slider = Container-Breite; genau 3 Karten passen rein, Nachbarn ragen ueber den Container hinaus (slick-list overflow: visible) */
section.m32_technologien .m32_slider {
	position: relative;
}

/* Gradient-Verlauf links/rechts ausserhalb des Containers: peekende Slides verschwinden in der Hintergrundfarbe.
   Opak an der Viewport-Kante -> transparent zur Container-Kante. Liegt ueber den Slides (z-index 4), unter den Nav-Arrows (z-index 6). */
section.m32_technologien .m32_slider_wrap::before,
section.m32_technologien .m32_slider_wrap::after {
	content: "";
	position: absolute;
	top: 0;
	height: 479px;
	width: calc(50vw - 50% + 20px);
	z-index: 4;
	pointer-events: none;
}
section.m32_technologien .m32_slider_wrap::before {
	left: calc(50% - 50vw);
	background: linear-gradient(to right, #685a51 0%, rgba(104, 90, 81, 0) 100%);
}
section.m32_technologien .m32_slider_wrap::after {
	right: calc(50% - 50vw);
	background: linear-gradient(to left, #685a51 0%, rgba(104, 90, 81, 0) 100%);
}
section.m32_technologien .m32_card {
	position: relative;
	height: 479px;
	overflow: hidden;
	/* 10px transparente Border je Seite = 20px Gutter zwischen den Karten (Slick setzt slick-slide direkt auf .m32_card) */
	box-sizing: border-box;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	background-clip: padding-box;
}
/* vor Slick-Init: 3 nebeneinander, horizontal scrollbar vermeiden */
section.m32_technologien .m32_slider:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}
section.m32_technologien .m32_slider:not(.slick-initialized) .m32_card {
	flex: 0 0 calc(33.333% - 14px);
	margin-right: 20px;
}

section.m32_technologien .m32_card_bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
section.m32_technologien .m32_card_overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(39,27,17,0.1) 0%, rgba(39,27,17,0.1) 100%),
		linear-gradient(180deg, rgba(104,90,81,0) 0%, rgba(104,90,81,0.9) 100%),
		linear-gradient(90deg, rgba(39,27,17,0.7) 0%, rgba(39,27,17,0.7) 100%);
	opacity: .4;
	transition: opacity 0.35s ease;
}
section.m32_technologien .m32_card.slick-active:hover .m32_card_overlay {
	opacity: 1;
}

section.m32_technologien .m32_card_inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 60px 32px 48px 43px;   /* top right bottom left */
	box-sizing: border-box;
}
section.m32_technologien .m32_card_top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
section.m32_technologien .m32_card_icon svg,
section.m32_technologien .m32_card_icon img {
	display: block;
	width: auto;
	height: 56px;
	max-width: 74px;
}
/* Icon weiss einfaerben */
section.m32_technologien .m32_card_icon svg,
section.m32_technologien .m32_card_icon svg * {
	fill: #f4f5f2;
}

/* Pfeil-Box oben rechts: weisses Quadrat, dunkler Pfeil */
section.m32_technologien .m32_card_arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	background-color: #f4f5f2;
	color: #271b11;
	opacity: 0;
	transition: opacity 0.35s ease, background-color 0.3s ease, color 0.3s ease;
}
section.m32_technologien .m32_card.slick-active:hover .m32_card_arrow {
	opacity: 1;
}
section.m32_technologien .m32_card_arrow:hover {
	background-color: #f48520;
	color: #ffffff;
}

/* Ganze Karte klickbar -> aber nur die 3 aktiven (mittigen) Slides. Peekende Slides: nicht klickbar, kein Pointer. */
section.m32_technologien .m32_card_link {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
}
section.m32_technologien .m32_card.slick-active .m32_card_link {
	pointer-events: auto;
	cursor: pointer;
}

section.m32_technologien .m32_card_titel {
	margin: 0;
	font-size: 1.375rem;    /* 22px */
	line-height: 25px;
	font-weight: 900;
	text-transform: uppercase;
	color: #f4f5f2;
}
section.m32_technologien .m32_card_text {
	margin: 16px 0 0;
	max-width: 339px;
	font-size: 1.0625rem;   /* 17px */
	line-height: 22px;
	font-weight: 400;
	color: #f4f5f2;
	/* nur bei Hover sichtbar */
	display: none;
}

/* Hover: Beschreibung einblenden (nur aktive Slides) */
section.m32_technologien .m32_card.slick-active:hover .m32_card_text {
	display: block;
}

/* ---------- Fortschrittsbalken ---------- */
section.m32_technologien .m32_progress {
	position: relative;
	width: 100%;
	height: 5px;
	margin-top: 59px;
	background-color: rgba(244,245,242,0.2);
}
section.m32_technologien .m32_progress_fill {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background-color: #f48520;
	transition: width 0.4s ease;
}

/* Slider-Navigation (prev/next) — absolutes Overlay, vertikal mittig auf den Karten */
section.m32_technologien .m32_nav_arrow {
	position: absolute;
	top: 240px;                 /* Kartenmitte (Hoehe 479 / 2) */
	transform: translateY(-50%);
	z-index: 6;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	background-color: #f4f5f2;
	color: #685a51;
	transition: background-color 0.3s ease, color 0.3s ease, opacity 0.25s ease, visibility 0.25s ease;
}
/* beide ausserhalb des Containers, nahe den Viewport-Raendern (gespiegelt) */
section.m32_technologien .m32_nav_prev {
	left: calc(50% - 50vw + 35px);
}
section.m32_technologien .m32_nav_next {
	right: calc(50% - 50vw + 35px);
}
section.m32_technologien .m32_nav_arrow:hover {
	background-color: #f48520;
	color: #ffffff;
}
/* nur sichtbar, wenn in diese Richtung navigierbar */
section.m32_technologien .m32_nav_arrow.slick-disabled {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}
section.m32_technologien .m32_nav_arrow svg {
	width: 21px;
	height: 21px;
	display: block;
}

/* ---------- Slick-Resets ---------- */
section.m32_technologien .slick-track {
	height: 479px;
}
/* Liste 20px breiter als Container (10px je Seite) fuer den Gutter; Nachbar-Slides sichtbar ausserhalb des Containers */
section.m32_technologien .slick-list {
	height: 479px;
	margin: 0 -10px;
	overflow: visible;
}
section.m32_technologien .slick-slide {
	height: 479px;
}

/* ---------- Light Background ---------- */

section.m32_technologien.light_background {
	background: #f4f4f2;
}

section.m32_technologien.light_background .m32_slider_wrap::before {
	background: linear-gradient(to right, #f4f4f2 0%, rgba(104, 90, 81, 0) 100%);
}

section.m32_technologien.light_background .m32_slider_wrap::after {
	background: linear-gradient(to left, #f4f4f2 0%, rgba(104, 90, 81, 0) 100%);
}

section.m32_technologien.light_background .m32_titel,
section.m32_technologien.light_background .m32_titel * {
	color: #271b11;
}

section.m32_technologien.light_background .m32_text {
	color: #685a51;
}

section.m32_technologien.light_background .m32_nav_arrow {
	background: #4a2e15;
	color: #fff
}

section.m32_technologien.light_background .m32_nav_arrow:hover {
	background-color: #f48520;
	color: #ffffff;
}

section.m32_technologien.light_background .m32_progress {
	background: rgba(104, 90, 81, .2);
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 1299px) {
	section.m32_technologien .m32_card {
		height: 440px;
	}
	section.m32_technologien .slick-list,
	section.m32_technologien .slick-track,
	section.m32_technologien .slick-slide {
		height: 440px;
	}
	section.m32_technologien .m32_slider_wrap::before,
	section.m32_technologien .m32_slider_wrap::after {
		height: 440px;
	}
	section.m32_technologien .m32_nav_arrow {
		top: 220px;
	}
}

@media screen and (max-width: 991px) {
	section.m32_technologien .m32_header {
		flex-direction: column;
		gap: 32px;
		margin-bottom: 48px;
	}
	section.m32_technologien .m32_header_left,
	section.m32_technologien .m32_header_right {
		flex: 1 1 100%;
		max-width: 100%;
	}
	section.m32_technologien .m32_header_right {
		margin-top: 0;
	}
	section.m32_technologien .m32_titel,
	section.m32_technologien .m32_titel * {
		font-size: 2.25rem;   /* 36px */
		line-height: 1.15;
	}
	/* Nur 1 Slide sichtbar -> Nav-Arrows oberhalb des Slides (rechts) statt an den Seiten */
	section.m32_technologien .m32_slider_wrap {
		padding-top: 72px;
	}
	section.m32_technologien .m32_slider_wrap::before,
	section.m32_technologien .m32_slider_wrap::after {
		top: 72px;
	}
	section.m32_technologien .m32_nav_arrow {
		top: 0;
		transform: none;
	}
	section.m32_technologien .m32_nav_prev {
		left: auto;
		right: 60px;
	}
	section.m32_technologien .m32_nav_next {
		left: auto;
		right: 0;
	}
}

@media screen and (max-width: 600px) {
	section.m32_technologien .m32_card {
		height: 420px;
	}
	section.m32_technologien .slick-list,
	section.m32_technologien .slick-track,
	section.m32_technologien .slick-slide {
		height: 420px;
	}
	section.m32_technologien .m32_slider_wrap::before,
	section.m32_technologien .m32_slider_wrap::after {
		height: 420px;
	}
	/* Arrows bleiben im Oben-Layout (aus dem 991er-Block); Karteninhalt enger */
	section.m32_technologien .m32_card_inner {
		padding: 24px;
	}
}