@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   M30 - Home Entry (Hero)
   Tokens: bg #f4f5f2 | orange #f48520 | dark #271b11 | taupe #685a51
   Font: Inter | Font-Sizes in rem, Spacing in px.
   ========================================================= */

section.m30_home_entry {
	position: relative;
	background-color: #f4f5f2;
	font-family: 'Inter', sans-serif;
}

/* Hero startet immer unterhalb des (fixierten) Headers.
   --rw-header-h wird per JS aus der tatsaechlichen Header-Hoehe gesetzt
   (0 wenn der Header im Flow liegt und seinen Platz selbst reserviert). */
section.m30_home_entry {
	margin-top: var(--rw-header-h, 0px);
}

/* Inter auch auf den per JS injizierten Titel + Buttons + Titel-<span> erzwingen */
section.m30_home_entry .m30_titel,
section.m30_home_entry .m30_titel span,
section.m30_home_entry .m30_titel_container,
section.m30_home_entry .mM_links_container,
section.m30_home_entry .mM_links_container a,
section.m30_home_entry .mM_links_container a *,
section.m30_home_entry .mM_links_container .mM_button_text {
	font-family: 'Inter', sans-serif !important;
}

section.m30_home_entry .m30_inner {
	display: flex;
	align-items: stretch;
	min-height: 820px;
}

/* ---------- Text-Spalte ---------- */
section.m30_home_entry .m30_content {
	flex: 0 0 44%;
	max-width: 44%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 100px 70px 100px 70px;
	box-sizing: border-box;
}

section.m30_home_entry .m30_titel_container {
	margin-bottom: 27px;
}

section.m30_home_entry .m30_titel {
	margin: 0;
	font-size: 4.6875rem;   /* 75px */
	line-height: 1.07;
	font-weight: 800;
	text-transform: uppercase;
	color: #271b11;
	letter-spacing: -0.5px;
}

/* Jedes <span> im Titelfeld wird orange (z. B. "360°"), gleiche Stärke wie der Titel */
section.m30_home_entry .m30_titel span,
section.m30_home_entry .m30_titel .m30_highlight {
	color: #f48520;
	font-weight: 800;
}

section.m30_home_entry .m30_subtext {
	max-width: 561px;
	margin-bottom: 46px;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.47;
	color: #685a51;
}

/* Buttons (per JS injiziert in .mM_links_container) */
section.m30_home_entry .m30_links_container {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	margin-top: 8px;
}

section.m30_home_entry .m30_links_container .m30_link_container {
	margin: 0;
}

/* Schrift in allen Hero-Buttons: Inter, 17px, normale Schreibung */
section.m30_home_entry .m30_links_container a {
	font-size: 1.0625rem;          /* 17px */
	font-weight: 600 !important;
	text-transform: none !important;
	text-decoration: none;
	letter-spacing: 0;
}

/* Primärer Button: orange Fläche + dunkle Icon-Box */
section.m30_home_entry .m30_links_container a.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 60px;
	padding: 8px 70px 8px 28px;    /* rechts Platz für die Icon-Box */
	border-radius: 0;
}
section.m30_home_entry .m30_links_container a.button.primary,
section.m30_home_entry .m30_links_container a.button.primary:hover {
	background-color: #f48520;
	color: #ffffff;
}

/* dunkle Icon-Box mit weißem Pfeil (SVG aus Figma, 90° -> oben rechts) */
section.m30_home_entry .m30_links_container a.button .mM_button_icon {
	position: absolute;
	top: 50%;
	right: 7px;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	overflow: hidden;
	background-color: #4a2e15;
}
/* zwei Pfeile übereinander; Rotation ist bereits ins SVG gebacken */
section.m30_home_entry .m30_links_container a.button .mM_button_icon .mM_button_arrow {
	position: absolute;
	left: 15px;
	top: 15px;
	width: 15px;
	height: 15px;
	transition: transform 0.4s ease;
}
/* Pfeil 1: zentriert (Startzustand) */
section.m30_home_entry .m30_links_container a.button .mM_button_arrow--1 {
	transform: translate(0, 0);
}
/* Pfeil 2: wartet unten-links außerhalb der Box */
section.m30_home_entry .m30_links_container a.button .mM_button_arrow--2 {
	transform: translate(-30px, 30px);
}

/* Sekundärer Button: transparent mit Rahmen (wie Figma) */
section.m30_home_entry .m30_links_container a.button.secondary,
section.m30_home_entry .m30_links_container a.button.secondary:hover {
	min-height: 60px;
	display: inline-flex;
	align-items: center;
	padding: 8px 28px;
	background-color: transparent;
	color: #685a51;
	border: 1px solid rgba(104, 90, 81, 0.3);
	border-radius: 0;
}

/* ---------- Visual-Spalte (Bild + Slider) ---------- */
section.m30_home_entry .m30_visual {
	flex: 1 1 56%;
	min-width: 0;        /* verhindert, dass der breite Slider-Inhalt das Flex-Item aufweitet */
	position: relative;
	align-self: stretch;
	/* kein overflow:hidden -> Karten-Overhang (margin-bottom:-121px) bleibt sichtbar.
	   Horizontal clippt bereits Slicks .slick-list. */
}
section.m30_home_entry .m30_slider {
	width: 100%;
}

/* WICHTIG: KEINE height:100%-Kette auf Slider/Track/Slide -> sonst schaukelt
   sich die Höhe mit Slicks JS-Berechnung bei jedem Wechsel auf.
   Stattdessen feste Bildhöhe; Slick übernimmt sie stabil. */
section.m30_home_entry .m30_slide {
	position: relative;
}

/* vor Slick-Init: nur erstes Slide zeigen, kein FOUC */
section.m30_home_entry .m30_slider:not(.slick-initialized) .m30_slide {
	display: none;
}
section.m30_home_entry .m30_slider:not(.slick-initialized) .m30_slide:first-child {
	display: block;
}

section.m30_home_entry .m30_slide_img,
section.m30_home_entry .m30_slide_video {
	display: block;
	width: 100%;
	height: 760px;
	object-fit: cover;
}

/* YouTube/Vimeo-Embed: fuellt den Slide; Vimeo (background=1) covert sauber,
   YouTube kann minimale Letterbox haben -> fuer randloses Cover MP4 nutzen. */
section.m30_home_entry .m30_slide_embed {
	position: relative;
	width: 100%;
	height: 760px;
	overflow: hidden;
}
section.m30_home_entry .m30_slide_embed iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* Cover: 16:9-Player so skalieren, dass er die (hochformatige) Spalte fuellt */
	height: 100%;
	width: auto;
	min-width: 100%;
	aspect-ratio: 16 / 9;
}

/* ---------- Projekt-Karte (Overlay) ---------- */
/* Karten-Overlay: rechts unten, ragt 121px nach unten ins folgende Modul */
section.m30_home_entry .m30_projekt_cards {
	position: absolute;
	right: 70px;
	bottom: 0;
	margin-bottom: -121px;
	z-index: 3;
	width: 635px;
	max-width: calc(100% - 140px);   /* 70px rechts + min. 70px Abstand zum linken Bildrand */
}
section.m30_home_entry .m30_projekt_card {
	display: none;
	padding: 53px 59px 53px 60px;   /* top right bottom left */
	box-sizing: border-box;
	background-color: #685a51;   /* solid, nicht transparent */
	color: #f4f5f2;
}
section.m30_home_entry .m30_projekt_card.is-active {
	display: block;
}

/* Top-Row: Linie + Counter (01/03) rechts daneben */
section.m30_home_entry .m30_projekt_top {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 14px;
}
section.m30_home_entry .m30_projekt_line {
	flex: 1 1 auto;
	height: 1px;
	background-color: rgba(244, 245, 242, 0.3);
}
section.m30_home_entry .m30_projekt_counter {
	flex-shrink: 0;
	font-size: 1.0625rem;   /* 17px */
	font-weight: 600;
	color: #f4f5f2;
}
section.m30_home_entry .m30_projekt_counter span {
	color: rgba(244, 245, 242, 0.5);
}

section.m30_home_entry .m30_projekt_titel {
	display: block;
	margin-bottom: 15px;
	font-size: 1.375rem;    /* 22px */
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.2;
}

section.m30_home_entry .m30_projekt_text {
	margin: 0 0 17px;
	font-size: 1.0625rem;   /* 17px */
	line-height: 1.3;
	color: #f4f5f2;
}

section.m30_home_entry .m30_projekt_link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 1.0625rem;   /* 17px */
	font-weight: 600;
	color: rgba(244, 245, 242, 0.5);
	text-decoration: none;
}
/* schlaegt die globale Regel body.page-template-page-flexible_content span */
section.m30_home_entry .m30_projekt_link span {
	font-weight: 600;
}
section.m30_home_entry .m30_projekt_link:hover {
	color: #f4f5f2;
	text-decoration: none;   /* nur Farbwechsel, keine Unterstreichung */
}
section.m30_home_entry .m30_projekt_link_arrow {
	width: 9px;
	height: auto;
	flex-shrink: 0;
	transform: rotate(135deg);   /* gleiches Pfeil-SVG, zeigt nach rechts */
	transition: transform 0.3s ease;
}
section.m30_home_entry .m30_projekt_link:hover .m30_projekt_link_arrow {
	transform: translateX(3px) rotate(135deg);
}

/* ---------- vertikale Slick-Dots ---------- */
section.m30_home_entry .m30_dots {
	position: absolute;
	top: 40%;
	right: 70px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
}
section.m30_home_entry .m30_dots li {
	width: 7px;
	line-height: 0;   /* Hoehe folgt dem Button -> aktiver Dot (24px) ueberlappt die anderen nicht */
}
section.m30_home_entry .m30_dots li button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: 0;
	cursor: pointer;
	background-color: rgba(255, 255, 255, 0.5);
	transition: height 0.25s ease, background-color 0.25s ease;
}
section.m30_home_entry .m30_dots li.slick-active button {
	height: 24px;
	background-color: #ffffff;
}

/* ---------- Scroll-Down ---------- */
section.m30_home_entry .m30_scroll_down {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 32px;
	text-decoration: none;
}

section.m30_home_entry .m30_scroll_down:hover {
	text-decoration: none;
}

section.m30_home_entry .m30_scroll_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 168px;
	height: 95px;
	background-color: #ffffff;
}
section.m30_home_entry .m30_scroll_arrow {
	width: 19px;
	height: auto;
	transform: rotate(-135deg);   /* Pfeil zeigt nach unten (gleiches SVG wie Button) */
}
section.m30_home_entry .m30_scroll_text {
	font-size: 0.9375rem;   /* 15px */
	color: #685a51;
}

/* =========================================================
   Hover / Interaktion
   ========================================================= */

/* --- Primärer Button: Pfeil fliegt oben-rechts raus, neuer kommt von unten-links rein (kein BG-Wechsel) --- */
section.m30_home_entry .m30_links_container a.button.primary:hover .mM_button_arrow--1 {
	transform: translate(30px, -30px);
}
section.m30_home_entry .m30_links_container a.button.primary:hover .mM_button_arrow--2 {
	transform: translate(0, 0);
}

/* --- Sekundärer Button: leichte Füllung + kräftigerer Rahmen --- */
section.m30_home_entry .m30_links_container a.button.secondary {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
section.m30_home_entry .m30_links_container a.button.secondary:hover {
	background-color: rgba(104, 90, 81, 0.08);
	border-color: #685a51;
	color: #271b11;
}

/* --- Projekt-Link: voll deckend (Pfeil-Nudge ist oben definiert) --- */
section.m30_home_entry .m30_projekt_link {
	transition: color 0.3s ease;
}

/* --- Slider-Dots: bei Hover voll deckend --- */
section.m30_home_entry .m30_dots li button:hover {
	background-color: #ffffff;
}

/* --- Scroll-Down: Pfeil wandert ein paar Pixel nach unten (Rotation beibehalten) --- */
section.m30_home_entry .m30_scroll_arrow {
	transition: transform 0.3s ease;
}
section.m30_home_entry .m30_scroll_down:hover .m30_scroll_arrow {
	transform: translateY(6px) rotate(-135deg);
}

/* =========================================================
   Responsive
   ========================================================= */
@media screen and (max-width: 1599px) {
	section.m30_home_entry .m30_titel {
		font-size: 3.75rem;   /* 60px */
	}
	/* Ab hier feste Hoehe statt 100vh */
	section.m30_home_entry .m30_inner {
		min-height: 620px;
	}
	section.m30_home_entry .m30_slide_img,
	section.m30_home_entry .m30_slide_video,
	section.m30_home_entry .m30_slide_embed {
		height: 560px;
	}
}

@media screen and (max-width: 1200px) {
	section.m30_home_entry .m30_titel {
		font-size: 3.375rem;   /* 54px */
	}
	section.m30_home_entry .m30_content {
		padding: 80px 40px;
	}
}

@media screen and (max-width: 1299px) {
	section.m30_home_entry .m30_content {
		flex: 0 0 50%;
		max-width: 50%;
	}
	section.m30_home_entry .m30_visual {
		flex: 0 0 50%;
		max-width: 50%;
	}
	section.m30_home_entry .m30_projekt_card {
		padding: 32px 36px;
	}
}

@media screen and (max-width: 991px) {
	section.m30_home_entry .m30_inner {
		flex-direction: column;
		min-height: 0;
	}
	section.m30_home_entry .m30_content {
		flex: 1 1 100%;
		max-width: 100%;
		padding: 60px 24px;
	}
	section.m30_home_entry .m30_visual {
		flex: 1 1 100%;
		max-width: 100%;
		min-height: 0;
		width: 100%;
	}
	section.m30_home_entry .m30_slide_img,
	section.m30_home_entry .m30_slide_video,
	section.m30_home_entry .m30_slide_embed {
		min-height: 0;
		height: 460px;
	}
	section.m30_home_entry .m30_projekt_cards {
		position: static;
		right: auto;
		margin-bottom: 0;
		width: 100%;
		max-width: 100%;
	}
	section.m30_home_entry .m30_dots {
		top: auto;
		bottom: 16px;
		right: 16px;
		transform: none;
		flex-direction: row;
	}
	section.m30_home_entry .m30_dots li {
		width: auto;   /* Breite folgt dem Button -> aktiver Dot (24px) ueberlappt nicht */
	}
	section.m30_home_entry .m30_dots li.slick-active button {
		height: 7px;
		width: 24px;
	}
	section.m30_home_entry .m30_scroll_down {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	section.m30_home_entry .m30_titel {
		font-size: 2.5rem;   /* 40px */
	}
}