/*
 Theme Name:   Divi Child Theme
 Description:  Child Theme for Divi
 Author:       iloweb e.U.
 Author URI:   https://www.iloweb.at
 Template:     Divi
 Version:      1.1.0
 Text Domain:  divi-5-child
*/

/* =====================================================================
   INHALT
   1. Helfer
   2. Header & Menü
   3. Hero-Slider Startseite (.ac-hero-slider)
   4. Unterseiten-Slider (.myslider) & Logo
   5. Einheitlicher Hero-Button (beide Slider)
   6. Alter Startseiten-Hero (.homeHero) & E-Auto-Badge
   7. Unterkünfte: Detailseite, Tabellen, Archiv
   8. Galerien (ACF-Slider, DiviPixel)
   9. Überschriften global (Handy/Tablet)
  10. KI-Bilder kennzeichnen (EU AI Act)
  11. Kontaktformular
  12. Footer
   ===================================================================== */


/* =====================================================================
   1. HELFER
   ===================================================================== */

.flexCenter {
	display: flex;
	align-items: center;
}


/* =====================================================================
   2. HEADER & MENÜ
   ===================================================================== */

/* Hamburger-Icon zentrieren, Desktop + Mobil */
.et_header_style_fullscreen .et_toggle_fullscreen_menu,
.et_header_style_fullscreen #et_toggle_fullscreen_menu {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0;
}
.et_header_style_fullscreen .et_toggle_fullscreen_menu:before {
	margin: 0;
	line-height: 1;
}

/* Mobil: Versatz des Menü-Icons korrigieren */
@media (max-width: 980px) {
	.mobile_menu_bar:before {
		line-height: 1 !important;
		vertical-align: middle;
	}
	#main-header .mobile_nav .select_page,
	.et_pb_menu__icon {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}


/* =====================================================================
   3. HERO-SLIDER STARTSEITE (.ac-hero-slider)
   ===================================================================== */

.ac-hero-slider .et_pb_slides {
	position: relative;
}

/* --- Eingeblendeter Text über dem Video (Pseudo-Element) --- */
.ac-hero-slider .et_pb_slides::before {
	content: "Urlaub in den Arlberg Chalets\A Autofrei. Entspannt. Persönlich. Modern. Besonders. Anders.\A Urlaub von Bergfreunden für Bergfreunde";
	white-space: pre-line;
	display: flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99;
	pointer-events: none;

	font-family: 'Cormorant Garamond', Georgia, "Times New Roman", serif !important;
	font-size: clamp(32px, 2vw, 90px) !important;
	line-height: 1.25 !important;
	letter-spacing: 0.06em;
	color: #ffffff !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);

	opacity: 0;
}

/* Text je Sprache (WPML setzt lang="en-US" / "nl-NL" im <html>) */
html[lang^="en"] .ac-hero-slider .et_pb_slides::before {
	content: "Holidays at the Arlberg Chalets\A Car-free. Relaxed. Personal. Modern. Special. Different.\A Holidays by mountain lovers, for mountain lovers";
}
html[lang^="nl"] .ac-hero-slider .et_pb_slides::before {
	content: "Vakantie in de Arlberg Chalets\A Autovrij. Ontspannen. Persoonlijk. Modern. Bijzonder. Anders.\A Vakantie van bergliefhebbers, voor bergliefhebbers";
}

/* Einblenden nach 13 s */
.ac-hero-slider.ac-text-in .et_pb_slides::before {
	animation: acHeroTextIn2026 2s ease-out 13s forwards;
}

@keyframes acHeroTextIn2026 {
	from { opacity: 0; }
	to   { opacity: 0.9; }
}

/* --- Button im Hero --- */
.ac-hero-slider .et_pb_slide_description {
	position: relative;
	z-index: 100;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	min-height: 1000px;
	padding-bottom: 10vh !important;
}
.ac-hero-slider .et_pb_button_wrapper {
	position: relative;
	z-index: 100;
	opacity: 0;
}

/* Button einblenden nach 10 s */
.ac-hero-slider.ac-text-in .et_pb_button_wrapper {
	animation: acButtonIn 1.6s ease-out 10s forwards;
}

@keyframes acButtonIn {
	from { opacity: 0; transform: translateY(40px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Handy + Tablet --- */
@media (max-width: 980px) {

	/* Größe 16:9 */
	.ac-hero-slider,
	.ac-hero-slider .et_pb_slide {
		height: 56.25vw !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.ac-hero-slider,
	.ac-hero-slider .et_pb_slides,
	.ac-hero-slider .et_pb_slide {
		width: 100% !important;
		max-width: none !important;
		aspect-ratio: auto !important;
		transform: none !important;
	}

	/* Video */
	.ac-hero-slider .et-pb-background-video {
		display: block !important;
		visibility: visible !important;
		opacity: 1 !important;
		position: absolute !important;
		inset: 0 !important;
		overflow: hidden !important;
	}

	.ac-hero-slider .et-pb-background-video .mejs-container,
	.ac-hero-slider .et-pb-background-video .mejs-inner,
	.ac-hero-slider .et-pb-background-video .mejs-mediaelement,
	.ac-hero-slider .et-pb-background-video mediaelementwrapper {
		display: block !important;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		min-width: 0 !important;
		margin: 0 !important;
	}

	.ac-hero-slider .et-pb-background-video video {
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		object-fit: cover !important;
	}

	/* Eingeblendeter Text */
	.ac-hero-slider .et_pb_slides::before {
		font-size: clamp(12px, 3.6vw, 17px) !important;
		line-height: 1.3 !important;
		letter-spacing: normal !important;
		position: absolute !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 32% !important;
		width: 100% !important;
		transform: none !important;
		padding: 0 5% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		z-index: 5 !important;
	}

	/* Button unten im Hero (Flex statt Tabelle) */
	.ac-hero-slider .et_pb_slide {
		padding: 0 !important;
	}

	.ac-hero-slider .et_pb_container {
		display: flex !important;
		align-items: flex-end !important;
		justify-content: center !important;
		height: 100% !important;
		min-height: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 0 7% 0 !important;
		box-sizing: border-box !important;
		position: relative !important;
		z-index: 6 !important;
	}

	.ac-hero-slider .et_pb_slider_container_inner,
	.ac-hero-slider .et_pb_slide_description,
	.ac-hero-slider .et_pb_button_wrapper {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		position: static !important;
		text-align: center !important;
	}

	.ac-hero-slider .et_pb_more_button {
		position: static !important;
		transform: none !important;
		display: inline-block !important;
		margin: 0 !important;
		white-space: nowrap !important;
	}
}


/* =====================================================================
   4. UNTERSEITEN-SLIDER (.myslider) & LOGO
   ===================================================================== */

.myslider {
	position: relative !important;
}

/* Logo im Slider, verlinkt */
.mylogo {
	position: absolute;
	top: 20px;
	left: 40px;
	transform: none;
	width: 140px;
	cursor: pointer;
	z-index: 10;
}
.mylogo img {
	width: 100%;
	height: auto;
	display: block;
}

/* Call-to-Action-Button */
.mycta {
	position: absolute !important;
	bottom: 12% !important;
	left: 0 !important;
	right: 0 !important;
	top: auto !important;
	transform: none !important;
	text-align: center !important;
	z-index: 100 !important;
}
.mycta .et_pb_button {
	display: inline-block !important;
	color: #fff !important;
	background-color: transparent !important;
	border: 2px solid #fff !important;
	border-radius: 3px !important;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 34px !important;
	padding: 0.3em 1em !important;
}
.mycta .et_pb_button:hover {
	color: #fff !important;
	border-color: #fff !important;
	background-color: rgba(255, 255, 255, 0.2) !important;
	padding: 0.3em 2em 0.3em 0.7em !important;
}
.mycta .et_pb_button::after {
	color: #fff !important;
}

/* --- Handy + Tablet --- */
@media (max-width: 980px) {

	.myslider,
	.myslider .et_pb_slide,
	.myslider .et_pb_container {
		height: 56.25vw !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	.myslider .et_pb_slide {
		background-size: cover !important;
		background-position: center center !important;
	}

	/* Logo proportional verkleinern */
	.myslider .mylogo {
		width: 24vw !important;
		max-width: 180px !important;
		height: auto !important;
	}
	.myslider .mylogo img {
		width: 100% !important;
		height: auto !important;
	}
}


/* =====================================================================
   5. EINHEITLICHER HERO-BUTTON (beide Slider)
   ===================================================================== */

body #page-container #et-main-area .et_pb_section :is(.ac-hero-slider, .myslider) .et_pb_more_button.et_pb_button,
body #page-container #et-main-area .et_pb_section :is(.ac-hero-slider, .myslider) .et_pb_more_button.et_pb_button:hover {
	font-size: clamp(13px, 1.5vw, 18px) !important;
	padding: 0.5em 1.3em !important;
	line-height: 1.5 !important;
	border-width: 2px !important;
	letter-spacing: normal !important;
}

@media (max-width: 980px) {
	body #page-container #et-main-area .et_pb_section :is(.ac-hero-slider, .myslider) .et_pb_more_button.et_pb_button,
	body #page-container #et-main-area .et_pb_section :is(.ac-hero-slider, .myslider) .et_pb_more_button.et_pb_button:hover {
		font-size: 13px !important;
	}
}


/* =====================================================================
   6. ALTER STARTSEITEN-HERO (.homeHero) & E-AUTO-BADGE
   ===================================================================== */

.homeHero .et_pb_fullwidth_slider_0 .et_pb_slides:before {
	width: 190px;
	height: 190px;
}
.homeHero .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description h2.et_pb_slide_title {
	font-size: 50px !important;
}

/* --- E-Auto-Badge (Wallboxen) --- */
.ev-overlay-wrap {
	position: absolute;
	right: 3%;
	top: 15%;
	width: auto;
	height: auto;
	z-index: 10;
	pointer-events: none;
	padding: 2px;
}

.ev-badge-divi {
	position: relative;
	width: 320px;
	aspect-ratio: 320 / 360;
	pointer-events: auto;
}

.ev-badge-divi .ev-icon {
	width: 100%;
	height: auto;
	display: block;
}

.ev-badge-divi .text-band {
	position: absolute;
	left: 50%;
	bottom: 10px;
	transform: translateX(-50%);
	width: 110%;
	padding: 3px 7px 20px 13px;
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(115, 18, 26, 0.92), rgba(75, 11, 16, 0.92));
	border: none;
	box-shadow: none;
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	font-weight: 650;
	line-height: 1.25;
	font-size: clamp(13px, 1.6vw, 15px);
	color: #D0B069;
	white-space: normal;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.ev-badge-divi .text-band::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 9px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.00) 45%);
	pointer-events: none;
	opacity: 0.7;
}

.ev-badge-divi #typed-divi strong {
	color: #D0B069;
	font-weight: 800;
}

.ev-badge-divi .cursor-divi {
	display: inline-block;
	margin-left: 1px;
	color: #D0B069;
	transform: translateY(0.5px);
	animation: evBlink 0.9s steps(1) infinite;
}

.ev-badge-divi #Display_ProgressFill-divi {
	transform-origin: center bottom;
	animation: evPremiumCharge 3.4s ease-in-out infinite;
}
.ev-badge-divi #Bolt_Icon-divi {
	animation: evBoltGlow 1.4s ease-in-out infinite;
}
.ev-badge-divi #Charge_Pulse1-divi { animation: evPulse 1.6s ease-out infinite; }
.ev-badge-divi #Charge_Pulse2-divi { animation: evPulse 1.6s ease-out infinite; animation-delay: 0.8s; }

.ev-badge-divi svg { shape-rendering: geometricPrecision; }

@keyframes evBlink { 50% { opacity: 0; } }

@keyframes evPremiumCharge {
	0%   { height: 12px; y: 160px; opacity: 0.4; }
	55%  { height: 78px; y: 94px;  opacity: 1; }
	100% { height: 12px; y: 160px; opacity: 0.4; }
}

@keyframes evBoltGlow {
	0%, 100% { opacity: 0.7; }
	50%      { opacity: 1; filter: drop-shadow(0 0 6px #9dff4a); }
}

@keyframes evPulse {
	0%   { r: 10px; opacity: 0; }
	20%  { opacity: 0.45; }
	100% { r: 26px; opacity: 0; }
}

/* --- Responsive --- */
@media (min-width: 768px) and (max-width: 1522px) {
	.ev-badge-divi {
		width: 240px;
	}
	.ev-badge-divi .text-band {
		font-size: clamp(12px, 0.9vw, 14px) !important;
	}
}

@media (max-width: 1000px) {
	.homeHero .et_pb_slider .et_pb_slide_0.et_pb_slide .et_pb_slide_description h2.et_pb_slide_title {
		font-size: 35px !important;
	}
	.homeHero .et_pb_slide_0.et_pb_slide .et_pb_text_overlay_wrapper {
		max-width: 450px;
	}
}

@media (max-width: 767px) {
	.homeHero .et_pb_slides::before {
		width: 160px !important;
		height: 160px !important;
	}
	.homeHero .et_pb_text_overlay_wrapper h2.et_pb_slide_title {
		font-size: 30px !important;
	}
	.ev-overlay-wrap {
		bottom: auto;
		top: 30px;
	}
	.ev-badge-divi {
		width: 180px;
	}
	.ev-badge-divi .text-band {
		font-size: clamp(10px, 1.8vw, 12px) !important;
		padding: 4px 5px 30px 6px;
	}
}

@media (max-width: 440px) {
	.homeHero .et_pb_slides::before {
		width: 130px !important;
		height: 130px !important;
	}
	.ev-overlay-wrap {
		top: 110px;
		left: 25%;
	}
}


/* =====================================================================
   7. UNTERKÜNFTE: DETAILSEITE, TABELLEN, ARCHIV
   ===================================================================== */

#housingDetailTitel picture {
	position: relative;
	width: 100%;
	max-height: 450px;
	overflow: hidden;
}
#housingDetailTitel picture source {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 100%;
	width: auto;
}

.housingTable table.dmach-repeater-table {
	margin: 0 auto;
}

.main-archive-loop h2 {
	font-size: 1.9rem;
}

@media only screen and (max-width: 1024px) {
	table.dmach-repeater-table td {
		padding: 5px !important;
	}
	table.dmach-repeater-table td:before {
		display: none;
	}
}


/* =====================================================================
   8. GALERIEN (ACF-Slider, DiviPixel)
   ===================================================================== */

/* --- ACF-Galerie: Desktop feste Höhe --- */
.et_pb_gallery_image > div[id^="et_pb_de_mach_acf_slider_"],
.et_pb_gallery_image picture,
.et_pb_gallery_image,
.et_pb_gallery_image img {
	display: block !important;
	height: 850px !important;
	max-height: none !important;
}
.et_pb_gallery_image img {
	width: 100% !important;
	object-fit: cover !important;
	object-position: center !important;
}

/* Thumbnail-Band nur bei diesem Slider ausblenden */
.nur-slider .et_pb_de_mach_acf_slider_containter_nav {
	display: none !important;
}

/* --- DiviPixel-Galerie: proportional, nie beschneiden --- */
.dipi_image_gallery {
	height: auto !important;
}
.dipi_image_gallery :is(.swiper, .swiper-container, .swiper-wrapper, .swiper-slide):not(.dipi-image-gallery-thumbs, .dipi-image-gallery-thumbs *) {
	height: auto !important;
}
.dipi_image_gallery .dipi_image_gallery_child:not(.dipi-image-gallery-thumbs *) > .swiper-slide-container {
	height: auto !important;
	aspect-ratio: 1536 / 1024;
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}

/* --- Handy + Tablet --- */
@media (max-width: 980px) {

	/* ACF-Galerie proportional statt fix 850px */
	.et_pb_gallery_image > div[id^="et_pb_de_mach_acf_slider_"],
	.et_pb_gallery_image picture,
	.et_pb_gallery_image {
		height: auto !important;
	}
	.et_pb_gallery_image img {
		height: auto !important;
		aspect-ratio: 4 / 3;
	}

	/* DiviPixel-Galerie volle Breite */
	.dipi_image_gallery {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}
}


/* =====================================================================
   9. ÜBERSCHRIFTEN GLOBAL (Handy/Tablet)
   ===================================================================== */

.et_pb_text_0 { margin-bottom: 0 !important; }
.et_pb_text_0 h1 { padding-bottom: 0; line-height: 1.05em; }
.et_pb_text_0.et_pb_text h1 { line-height: 1.1em !important; }

@media (max-width: 980px) {

	.et_builder_inner_content :is(h1, h2, h3, h4, h5, h6):not(.ac-hero-slider *) {
		line-height: 1.15 !important;
		height: auto !important;
		max-height: none !important;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/* Titel-Modul: keine feste Höhe */
	.et_builder_inner_content .et_pb_module:has(h1) {
		height: auto !important;
		max-height: none !important;
		min-height: 0 !important;
	}

	/* Unterzeile nach Titel + Trenner: -55px aufheben */
	.et_builder_inner_content .et_pb_module:has(h1) ~ .dipi_divider + .et_pb_text,
	.et_builder_inner_content .et_pb_module:has(h1) + .et_pb_text {
		margin-top: 10px !important;
	}

	/* Titel und Unterzeile im selben Modul */
	.et_builder_inner_content h1 + :is(h2, h3, p) {
		margin-top: 0.3em !important;
		position: static !important;
		transform: none !important;
	}
}


/* =====================================================================
   10. KI-BILDER KENNZEICHNEN (EU AI Act)
   ===================================================================== */

.ki-generiert,
.ki-bearbeitet {
	position: relative;
	display: table;
	margin-left: auto;
	margin-right: auto;
	line-height: 0;
}
.ki-generiert img,
.ki-bearbeitet img {
	display: block;
	width: 100%;
	height: auto;
}

/* Ausklappendes Label */
.ki-generiert::after,
.ki-bearbeitet::after {
	box-sizing: border-box;
	content: "AI generated";
	position: absolute; right: 10px; bottom: 10px; z-index: 2;
	display: inline-flex; align-items: center;
	height: 28px; max-width: 28px;
	padding-left: 0; padding-right: 28px;
	overflow: hidden; white-space: nowrap;
	border-radius: 14px;
	background: rgba(55, 47, 40, .82); color: #F3EDE3;
	font-size: 12px; line-height: 1; letter-spacing: .02em;
	transition: max-width .3s ease, padding-left .3s ease;
}
.ki-bearbeitet::after { content: "AI modified"; }

/* Rundes "AI"-Icon */
.ki-generiert::before,
.ki-bearbeitet::before {
	box-sizing: border-box;
	content: "AI";
	position: absolute; right: 10px; bottom: 10px; z-index: 3;
	width: 28px; height: 28px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: #372F28; color: #F3EDE3;
	font-size: 11px; font-weight: 500; line-height: 1;
}

.ki-generiert:hover::after,
.ki-bearbeitet:hover::after,
.ki-generiert:focus-within::after,
.ki-bearbeitet:focus-within::after {
	max-width: 260px;
	padding-left: 14px;
}

/* Touch-Geräte: Label immer ausgeklappt */
@media (hover: none) {
	.ki-generiert::after,
	.ki-bearbeitet::after {
		max-width: 260px;
		padding-left: 14px;
	}
}


/* =====================================================================
   11. KONTAKTFORMULAR
   ===================================================================== */

/* Senden-Button volle Breite */
.pa-contact-form-submit-fullwidth .et_contact_bottom_container {
	width: 100%;
	flex-direction: column;
	gap: 1em;
	padding-left: 3%;
	margin-top: 0px;
}
.pa-contact-form-submit-fullwidth .et_contact_bottom_container button {
	width: 100%;
	margin: 0;
}


/* =====================================================================
   12. FOOTER
   ===================================================================== */

.footerRoomLoop .loop-grid {
	grid-gap: 8px;
}
.footerRoomLoop p a {
	color: #fff;
}

/*Fonts*/
/* Cormorant Garamond – lokal gehostet */
@font-face { font-display: swap; font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400;
  src: url('/wp-content/themes/Divi-5-child_ArlCha/fonts/cormorant-garamond-v21-latin-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400;
  src: url('/wp-content/themes/Divi-5-child_ArlCha/fonts/cormorant-garamond-v21-latin-italic.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500;
  src: url('/wp-content/themes/Divi-5-child_ArlCha/fonts/cormorant-garamond-v21-latin-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600;
  src: url('/wp-content/themes/Divi-5-child_ArlCha/fonts/cormorant-garamond-v21-latin-600.woff2') format('woff2'); }