/* HDA Effekte für Divi 5. Ersetzt Divi Supreme Pro und Divi Plus. Farben kommen als CSS-Variablen aus dem Modul (Divi: Erweitert > Eigenes CSS > Hauptelement). */

/* Glitch-Text (wie Supreme "Glitch Effekt 2"): zwei versetzte Kopien des Textes mit farbigem Schatten. */
.hda-glitch :is(h1, h2, h3, h4, h5, h6) {
	position: relative;
}
.hda-glitch [data-hda-text]::before,
.hda-glitch [data-hda-text]::after {
	content: attr(data-hda-text);
	position: absolute;
	inset: 0;
	pointer-events: none;
	text-align: inherit;
}
.hda-glitch [data-hda-text]::after {
	left: 2px;
	text-shadow: -1px 0 var(--hda-g1, #a020f0);
	animation: hda-glitch-1 2s infinite linear alternate-reverse;
}
.hda-glitch [data-hda-text]::before {
	left: -2px;
	text-shadow: 2px 0 var(--hda-g2, #008000);
	animation: hda-glitch-2 3s infinite linear alternate-reverse;
}
@keyframes hda-glitch-1 {
	0% { clip-path: inset(82% 0 13% 0); }
	5.88% { clip-path: inset(17% 0 48% 0); }
	11.76% { clip-path: inset(11% 0 88% 0); }
	17.65% { clip-path: inset(2% 0 11% 0); }
	23.53% { clip-path: inset(48% 0 3% 0); }
	29.41% { clip-path: inset(34% 0 61% 0); }
	35.29% { clip-path: inset(10% 0 83% 0); }
	41.18% { clip-path: inset(83% 0 1% 0); }
	47.06% { clip-path: inset(36% 0 4% 0); }
	52.94% { clip-path: inset(52% 0 16% 0); }
	58.82% { clip-path: inset(86% 0 4% 0); }
	64.71% { clip-path: inset(49% 0 7% 0); }
	70.59% { clip-path: inset(35% 0 53% 0); }
	76.47% { clip-path: inset(3% 0 19% 0); }
	82.35% { clip-path: inset(28% 0 40% 0); }
	88.24% { clip-path: inset(62% 0 3% 0); }
	94.12% { clip-path: inset(42% 0 28% 0); }
	100% { clip-path: inset(17% 0 20% 0); }
}
@keyframes hda-glitch-2 {
	0% { clip-path: inset(24% 0 29% 0); }
	10% { clip-path: inset(54% 0 21% 0); }
	20% { clip-path: inset(28% 0 28% 0); }
	30% { clip-path: inset(27% 0 47% 0); }
	40% { clip-path: inset(13% 0 55% 0); }
	50% { clip-path: inset(9% 0 37% 0); }
	60% { clip-path: inset(22% 0 73% 0); }
	70% { clip-path: inset(4% 0 94% 0); }
	80% { clip-path: inset(98% 0 1% 0); }
	90% { clip-path: inset(74% 0 26% 0); }
	100% { clip-path: inset(54% 0 10% 0); }
}

/* Text mit wanderndem Farbverlauf (wie Supreme "Animated Gradient Text"). */
.hda-gradient-text :is(h1, h2, h3, h4, h5, h6) {
	display: inline-block;
	background: linear-gradient(var(--hda-gt-dir, -45deg), var(--hda-gt1, #cc2b5e), var(--hda-gt2, #753a88), var(--hda-gt3, #ec008c), var(--hda-gt4, #6dd5ed));
	background-size: 300%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	animation: hda-gradient-flow var(--hda-gt-speed, 8s) ease-in-out infinite;
}
@keyframes hda-gradient-flow {
	0% { background-position: 0 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* Bild, das sich zur Maus neigt (wie Supreme "Tilt Image"). Die Drehung setzt hda-effects.js. */
.hda-tilt .et_pb_image_wrap {
	display: inline-block;
	transform: perspective(1000px) rotateX(var(--hda-rx, 0deg)) rotateY(var(--hda-ry, 0deg));
	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
	will-change: transform;
}

/* Schreibmaschinen-Text (wie Supreme "Typing Effect"). */
.hda-typing .hda-typing-text {
	transition: opacity 250ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hda-typing .hda-typing-text.is-fading {
	opacity: 0;
}
.hda-typing .hda-typing-cursor {
	display: inline-block;
	margin-left: 0.05em;
	font-weight: 400;
	animation: hda-blink 0.7s steps(1) infinite;
}
@keyframes hda-blink {
	50% { opacity: 0; }
}

/* Galerie als Karussell (ersetzt Supreme "Image Carousel"). hda-carousel-3 = drei Bilder sichtbar. */
.hda-carousel {
	--hda-per-view: 3;
	--hda-gap: 20px;
	position: relative;
}
.hda-carousel-2 { --hda-per-view: 2; }
.hda-carousel-1 { --hda-per-view: 1; }
@media (max-width: 980px) {
	.hda-carousel-3 { --hda-per-view: 2; }
}
@media (max-width: 600px) {
	.hda-carousel { --hda-per-view: 1; }
}
.hda-carousel .et_pb_gallery_items {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: var(--hda-gap) !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.hda-carousel .et_pb_gallery_items::-webkit-scrollbar {
	display: none;
}
.hda-carousel .et_pb_gallery_item {
	flex: 0 0 calc((100% - (var(--hda-per-view) - 1) * var(--hda-gap)) / var(--hda-per-view)) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
	display: block !important;
}
.hda-carousel .et_pb_gallery_image,
.hda-carousel .et_pb_gallery_image img {
	border-radius: 20px;
	overflow: hidden;
}
.hda-carousel .et_pb_gallery_image img {
	width: 100%;
	aspect-ratio: 400 / 284;
	object-fit: cover;
	display: block;
}
.hda-carousel-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: oklch(100% 0 0 / 0.9);
	color: oklch(30% 0 0);
	box-shadow: 0 2px 8px oklch(0% 0 0 / 0.18);
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
	transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hda-carousel-nav:active {
	transform: translateY(-50%) scale(0.97);
}
.hda-carousel-nav[disabled] {
	opacity: 0;
	pointer-events: none;
}
.hda-carousel-nav svg {
	width: 1.2em;
	height: 1.2em;
}
.hda-carousel-prev { left: -20px; }
.hda-carousel-next { right: -20px; }
@media (max-width: 1100px) {
	.hda-carousel-prev { left: 8px; }
	.hda-carousel-next { right: 8px; }
}

/* Galerie als Mauerwerk-Raster (ersetzt Divi Plus "Masonry Gallery"). */
.hda-masonry .et_pb_gallery_items {
	display: block !important;
	columns: 4;
	column-gap: 15px;
}
@media (max-width: 980px) {
	.hda-masonry .et_pb_gallery_items { columns: 3; }
}
@media (max-width: 600px) {
	.hda-masonry .et_pb_gallery_items { columns: 2; }
}
.hda-masonry .et_pb_gallery_item {
	width: auto !important;
	margin: 0 0 15px !important;
	break-inside: avoid;
	display: block !important;
	float: none !important;
}
.hda-masonry .et_pb_gallery_image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Reiter aus Divi-Schaltflächen und Abschnitten (ersetzt Supreme "Advanced Tabs"). */
.hda-tabpanel[hidden],
.hda-tabpanel-rest {
	display: none !important;
}

/* Divi-Reiter über die volle Breite verteilt (ersetzt Divi Plus "Tabs" mit Vollbreite). */
.hda-tabs-full .et_pb_tabs_controls {
	display: flex;
	flex-wrap: wrap;
}
.hda-tabs-full .et_pb_tabs_controls li {
	flex: 1 1 auto;
	text-align: center;
}
.hda-tabnav .et_pb_button {
	transition: background-color 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.hda-tabnav .et_pb_button:not(.is-active) {
	opacity: 0.5;
}
.hda-tabnav .et_pb_button:active {
	transform: scale(0.97);
}

/* Wer weniger Bewegung eingestellt hat, sieht die Effekte ruhig. */
@media (prefers-reduced-motion: reduce) {
	.hda-glitch [data-hda-text]::before,
	.hda-glitch [data-hda-text]::after {
		animation: none;
		display: none;
	}
	.hda-gradient-text :is(h1, h2, h3, h4, h5, h6) {
		animation: none;
	}
	.hda-tilt .et_pb_image_wrap {
		transform: none;
		transition: none;
	}
	.hda-typing .hda-typing-cursor {
		animation: none;
	}
	.hda-carousel .et_pb_gallery_items {
		scroll-behavior: auto;
	}
	.hda-carousel-nav,
	.hda-tabnav .et_pb_button {
		transition: none;
	}
}

/* Zeitleiste: Karten auf der linken Seite rechtsbündig, wie bei Divi Plus. */
@media (min-width: 768px) {
	.hda-timeline-mirror .et_pb_timeline_track > .et_pb_timeline_item:nth-child(even) .et_pb_timeline_card {
		text-align: right;
	}
}

/* Zeitleiste mit Schrittnummern (ersetzt Supreme "Content Timeline"): Nummer steht direkt neben dem Punkt. */
@media (min-width: 768px) {
	.hda-timeline-steps .et_pb_timeline_track > .et_pb_timeline_item:nth-child(odd) .et_pb_timeline_spacer {
		text-align: right;
	}
	.hda-timeline-steps .et_pb_timeline_track > .et_pb_timeline_item:nth-child(even) .et_pb_timeline_spacer {
		text-align: left;
	}
}

/* Zeitleiste am Handy: weniger Innenabstand, Schaltflächen dürfen umbrechen (sonst ragt die Karte aus dem Bildschirm). */
.hda-timeline .et_pb_timeline_card {
	min-width: 0;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.hda-timeline .et_pb_timeline_card .et_pb_button {
	white-space: normal;
	max-width: 100%;
}
@media (max-width: 767px) {
	.hda-timeline.et_pb_timeline .et_pb_timeline_item .et_pb_timeline_card {
		padding: 16px;
	}
}