/*------------------------------------------------------------------
    Header
-------------------------------------------------------------------*/

	@media (min-width: 1025px) {

		.hayler .classic-menu .nav-height {
			background-color: transparent;
		}

		.hayler .classic-menu #clapat-nav-wrapper {
			position: absolute;
			top: 50%;
			left: 50%;
			width: auto;
			height: auto;
			padding: 10px;
			background-color: rgba(128, 128, 128, 0.35);
			border-radius: 3px;
			-webkit-backdrop-filter: blur(7px);
			backdrop-filter: blur(7px);
			transform: translate(-50%, -50%);
		}

		.hayler.mc-force-light-header .classic-menu #clapat-nav-wrapper {
			background-color: rgba(40, 40, 40, 0.55);
		}

		.hayler.mc-force-light-header .classic-menu .clapat-nav {
			color: #fff;
		}

	}

	.hayler.mc-force-light-header #clapat-logo img.black-logo {
		opacity: 0;
	}

	.hayler.mc-force-light-header #clapat-logo img.white-logo {
		opacity: 1;
	}

	.hayler.mc-force-light-header #header-button .button-text,
	.hayler.mc-force-light-header #header-button .button-icon i,
	.hayler.mc-force-light-header #burger-button .button-text {
		color: #fff;
	}

	.hayler.mc-force-light-header #hero {
		color: #fff;
	}

	.hayler.mc-force-light-header #hero .hero-title,
	.hayler.mc-force-light-header #hero .hero-subtitle,
	.hayler.mc-force-light-header #hero .hero-infotitle,
	.hayler.mc-force-light-header #hero .info-text,
	.hayler.mc-force-light-header #hero-footer .button-text,
	.hayler.mc-force-light-header #hero-footer .button-icon i {
		color: #fff;
	}

	.hayler.mc-force-light-header #hero-media::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.55) 100%);
		pointer-events: none;
	}

	.hayler.mc-force-light-header #hero-media-wrapper {
		position: relative;
		z-index: 0;
	}

	.hayler.mc-force-light-header #header-button {
		background-color: rgba(20, 20, 20, 0.75) !important;
	}

	.hayler #header-button .button-icon i {
		background-color: var(--primary-color);
		color: var(--color-black);
		filter: none;
	}

	.hayler #header-button .button-icon i::before {
		filter: none;
	}



/*------------------------------------------------------------------
    Footer
-------------------------------------------------------------------*/

	.hayler #clapat-footer:not(.absolute) {
		overflow: visible;
		color: var(--color-white);
		background-color: var(--fullscreen-menu-bg-color);
	}

	.hayler #clapat-footer:not(.absolute)::before {
		content: "";
		position: absolute;
		top: -20px;
		left: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-right-radius: 10px;
	}

	.hayler #clapat-footer:not(.absolute)::after {
		content: "";
		position: absolute;
		top: -20px;
		right: 0;
		width: calc(50% - 1px);
		height: 20px;
		background-color: var(--fullscreen-menu-bg-color);
		border-top-left-radius: 10px;
	}

	@media only screen and (max-width: 1024px) {

		.hayler #clapat-footer:not(.absolute) {
			overflow: hidden;
		}

		.hayler .footer-nav-lists {
			grid-template-rows: repeat(5, auto);
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler #clapat-footer:not(.absolute) .clapat-footer-left {
			right: 0;
			left: auto;
			justify-content: flex-end;
		}

		.hayler #clapat-footer:not(.absolute) #backtotop {
			bottom: -6px;
			left: 16px;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-center {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .clapat-footer-right {
			justify-content: flex-start;
		}

		.hayler #clapat-footer:not(.absolute) .socials-wrap .socials {
			-webkit-transform: translateX(-14px);
			transform: translateX(-14px);
		}

	}



/*------------------------------------------------------------------
    Hero Section
-------------------------------------------------------------------*/

	.hayler .has-media #hero-caption {
		justify-content: flex-end;
	}

	.hayler #hero-caption.text-align-default-desktop .inner {
		width: 100%;
	}

	.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
		width: 100%;
		box-sizing: border-box;
		padding-left: calc(66.6667% - (1 * var(--gap)) / 3 + var(--gap));
	}

	.hayler #hero-caption.error-caption .hero-title {
		font-size: var(--bt-font-size);
		line-height: var(--bt-line-height);
		font-weight: var(--bt-font-weight);
		letter-spacing: var(--bt-letter-spacing);
		column-gap: 0;
	}

	.hayler #hero-caption.error-caption .hero-title .word-wrapper span {
		text-shadow: 0 1.05em 0 currentColor;
	}

	.hayler .has-border {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler .has-border::before {
		top: 0;
		bottom: auto;
		transform-origin: left;
	}

	.hayler .has-border::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 2px;
		background-image:
			linear-gradient(to top, var(--color-black) 0%, var(--color-black) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
		background-position: -100% 50%, 50% 0, 0 50%;
		background-repeat: no-repeat;
		background-size: 50% 2px, 2px 100%, 100% 2px;
		opacity: 1;
	}

	.hayler .light-content .has-border::after {
		background-image:
			linear-gradient(to top, var(--color-white) 0%, var(--color-white) 100%),
			linear-gradient(to right, transparent, transparent),
			linear-gradient(to top, transparent, transparent);
	}

	.hayler .has-border.visible::after {
		background-position: 100% 0%, 50% 0, 0 50%;
		background-size: 0 2px, 2px 100%, 100% 2px;
		transition: transform 0.5s ease-out 0s, background-size 1.5s cubic-bezier(.69, 0, 0, 1) 0.45s, background-position 0.6s cubic-bezier(.6, 0, .05, 1) 0.45s;
	}

	.hayler .hero-footer-left {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-center {
		display: flex;
		justify-content: flex-start;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-right {
		display: flex;
		justify-content: flex-end;
		width: calc(33.3333% - (2 * var(--gap)) / 3);
	}

	.hayler .hero-footer-left #back-home .text-wrap {
		white-space: nowrap;
	}

	.hayler .hero-footer-left #back-home .button-text {
		display: block;
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 40px;
			padding-left: calc(33.3333% + var(--gap) / 3);
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler #hero-caption.text-align-default-desktop .hero-subtitle {
			margin-top: 20px;
			padding-left: 0;
		}

	}



/*------------------------------------------------------------------
    Page Nav Section
-------------------------------------------------------------------*/

	.hayler .nav-intro-wrapper {
		position: absolute;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		gap: calc(var(--gap) / 2);
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-top: calc(var(--header-height) - var(--gap) * 2);
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
	}

	.hayler .nav-intro-wrapper .nav-intro-text {
		display: flex;
		justify-content: flex-start;
		width: 100%;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-text {
		position: relative;
		display: flex;
		align-items: stretch;
		justify-content: flex-start;
		width: 100%;
		column-gap: 0.2em;
		flex-shrink: 0;
	}

	.hayler .nav-intro-wrapper.text-align-center .nav-intro-text .span-text {
		justify-content: center;
	}

	.hayler .nav-intro-wrapper.text-align-right .nav-intro-text .span-text {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word {
		overflow: hidden;
		justify-content: center;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:first-child {
		justify-content: flex-start;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word:last-child {
		justify-content: flex-end;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span {
		position: relative;
		display: block;
	}

	.hayler .nav-intro-wrapper .nav-intro-text .span-word span::before {
		content: attr(data-hover);
		position: absolute;
		top: 0;
		left: 0;
		width: auto;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
	}

	.hayler .next-hero-subtitle {
		opacity: 1;
	}



/*------------------------------------------------------------------
    Showcase Slider Parallax
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-slider-caption {
		justify-content: flex-start;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: auto;
		text-align: left;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-title {
		left: -0.06em;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
		text-align: right;
	}

	.hayler .clapat-slider-wrapper .clapat-slider-caption .item-cat > span {
		display: block;
	}

	/* Slider Pagination Bullets */

	.hayler .clapat-slider-footer {
		overflow: visible;
	}

	.hayler .showcase-slider-parallax .clapat-slider-pagination {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 20;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding-left: var(--horizontal-gutter);
		padding-right: var(--horizontal-gutter);
		gap: var(--gap);
		counter-reset: slide;
		pointer-events: none;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet {
		position: relative;
		display: inline-flex;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;
		height: auto;
		padding-bottom: 40px;
		margin: 0;
		opacity: 1;
		cursor: pointer;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		opacity: 0.2;
		background-color: currentColor;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
		transform-origin: center;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 1px;
		background-color: currentColor;
		-webkit-transform: scaleX(0);
		transform: scaleX(0);
		transform-origin: right;
		-webkit-transition: transform 0.2s ease-in-out 0.1s;
		transition: transform 0.2s ease-in-out 0.1s;
	}

	.hayler.viewport-mobile .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active::before {
		transform-origin: left;
		-webkit-transform: scaleX(1);
		transform: scaleX(1);
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: 100%;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number {
		position: relative;
		width: auto;
		height: 100%;
		opacity: 0.2;
		pointer-events: initial;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .bullet-number,
	.hayler .showcase-slider-parallax .clapat-pagination-bullet .bullet-number-wrapper:hover .bullet-number {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress {
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 100%;
		height: 3px;
		opacity: 0;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet.clapat-pagination-bullet-active .clapat-autoplay-progress {
		opacity: 1;
	}

	.hayler .showcase-slider-parallax .clapat-pagination-bullet .clapat-autoplay-progress span {
		position: relative;
		display: block;
		width: 0%;
		height: 2px;
		background: currentColor;
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-caption {
			flex-direction: column;
			align-items: flex-start;
			justify-content: center;
			text-align: left;
		}

		.hayler .clapat-slider-wrapper .clapat-slider-caption .item-role {
			text-align: left;
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler .clapat-pagination-bullet {
			padding-bottom: 30px;
		}

	}

	@media only screen and (max-width: 479px) {

		.hayler .clapat-pagination-bullet {
			padding-bottom: 20px;
		}

	}



/*------------------------------------------------------------------
    Showcase Slider Carousel Horizontal
-------------------------------------------------------------------*/

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper {
		position: absolute;
		top: calc(50 * var(--dvh, 1vh) + max(10vw, 140px));
		left: 0;
		z-index: 100;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: calc(100vw - var(--scroll-bar-w));
		height: 100px;
		box-sizing: border-box;
		opacity: 0;
		pointer-events: none;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption-wrapper.visible-caption {
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption {
		position: relative;
		display: flex;
		align-items: flex-start;
		justify-content: center;
		width: 20vw;
		min-width: 280px;
		height: 100px;
		opacity: 1;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption {
		position: absolute;
		text-align: center;
		color: currentColor;
		pointer-events: none;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title {
		position: relative;
		overflow: hidden;
		font-family: var(--primary-font-family);
		font-size: var(--h5-font-size);
		line-height: var(--h5-line-height);
		font-weight: var(--h5-font-weight);
		letter-spacing: var(--h5-letter-spacing);
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat {
		overflow: hidden;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-cat span {
		position: relative;
		display: block;
		opacity: 0;
	}

	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-title span,
	.hayler .clapat-slider-wrapper .clapat-carousel-caption .item-caption.active .item-cat span {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date {
		position: absolute;
		top: -23px;
		right: 12px;
		left: auto;
		display: block;
		padding: 0;
		overflow: hidden;
		text-align: right;
		background: transparent;
		opacity: 0;
		color: currentColor;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal.visible-caption .clapat-slide .item-caption .item-date {
		opacity: 0.2;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date {
		opacity: 1;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span {
		position: relative;
		display: block;
		text-align: right;
		-webkit-transform: translateY(100%);
		transform: translateY(100%);
		-webkit-transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide .item-date span::after {
		content: var(--slide-index);
		position: absolute;
		top: -100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-slider-carousel-horizontal .clapat-slide:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .clapat-slider-viewport {
		transform: translateY(calc(-1 * var(--hero-footer-height) / 2));
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption {
		position: absolute;
		top: 0;
		bottom: auto;
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 36px);
		padding: 12px;
		opacity: 0;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat {
		position: relative;
		display: block;
		overflow: hidden;
		color: currentColor;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler.viewport-mobile .showcase-slider-carousel-horizontal .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}



/*------------------------------------------------------------------
    Portfolio Grid
-------------------------------------------------------------------*/

	.hayler .filters-wrapper {
		position: relative;
		z-index: 1000;
		display: flex;
		justify-content: flex-start;
		width: 100%;
		height: 0;
		box-sizing: border-box;
		padding-top: 0;
		padding-bottom: 0;
		background-color: rgb(200, 200, 200);
		mask-image: none !important;
		opacity: 0;
		pointer-events: none;
	}

	.hayler .filters-container {
		position: relative;
		width: 100%;
		height: auto;
		padding-top: 35px;
		padding-left: calc(33.3333% - (2 * var(--gap)) / 3 + var(--gap));
		padding-bottom: 25px;
	}

	.hayler .clapat-item .reveal-overlay {
		position: absolute;
		inset: 0;
		z-index: 5;
		display: flex;
		pointer-events: none;
		transform: scaleX(1.01);
	}

	.hayler .clapat-item .reveal-overlay span {
		flex: 1;
		background: #f7f7f7;
		transform-origin: top;
		transform: scaleX(1.1) scaleY(1);
		will-change: transform;
	}

	.hayler .clapat-item .reveal-overlay span:nth-child(3) {
		flex: 2;
	}

	.hayler .showcase-portfolio {
		padding-top: 35px;
		counter-reset: thumb;
	}

	/* List View */

	.hayler .showcase-portfolio.portfolio-list-view {
		padding-top: 60px;
		row-gap: 0;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item::after {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	.hayler.viewport-mobile .showcase-portfolio.portfolio-list-view .clapat-item .item-effects {
		right: 0;
		left: 0;
		width: 100px;
		margin: auto;
	}

	/* Grid View */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
		display: flex;
		width: calc(50% - (2 * var(--thumbs-margins-width)));
		overflow: hidden;
		padding-top: 35px;
		padding-bottom: 45px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		width: calc(33.33% - (2 * var(--thumbs-margins-width)));
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content {
		position: relative;
		display: flex;
		width: 100%;
		height: auto;
		cursor: pointer;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	/* Thumb 1 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(1) .item-content {
		width: 100%;
	}

	/* Thumb 2 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(2) .item-content {
		width: 66.6667%;
	}

	/* Thumb 3 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
		width: 50%;
	}

	/* Thumb 4 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
		width: 50%;
	}

	/* Thumb 5 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(5) .item-content {
		width: 66.6667%;
	}

	/* Thumb 6 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) {
		align-items: flex-start;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6)::before {
		content: "";
		float: left;
		padding-top: 90%;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(6) .item-content {
		width: 100%;
	}

	/* Thumb 7 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) {
		align-items: flex-end;
		justify-content: flex-end;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
		width: 50%;
	}

	/* Thumb 8 */

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) {
		align-items: flex-end;
		justify-content: flex-start;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8)::before {
		display: none;
	}

	.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
		width: 50%;
	}

	/* Thumb Caption */

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		height: calc(100% + 45px);
		padding: 0;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title {
		color: currentColor;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title {
		padding-left: 30px;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-title::before {
		content: "\f061";
		position: absolute;
		top: 0;
		left: 0;
		width: 20px;
		height: 30px;
		font: var(--fa-font-solid);
		font-size: 12px;
		line-height: inherit;
		text-align: left;
		opacity: 0;
		color: currentColor;
		pointer-events: none;
		-webkit-transform: scale(0.5) rotate(-45deg);
		transform: scale(0.5) rotate(-45deg);
		transform-origin: -10px center;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-title::before {
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
		transform: scale(1) rotate(0deg);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat {
		color: currentColor;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span {
		position: relative;
		display: block;
		width: auto;
		min-width: 100px;
		text-align: right;
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-cat span::before {
		content: attr(data-hover);
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-cat span {
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-date {
		position: absolute;
		top: -35px;
		right: 0;
		left: auto;
		display: block;
		padding: 0;
		text-align: right;
		background: transparent;
		color: currentColor;
	}

	.hayler .showcase-portfolio.portfolio-list-view .clapat-item .item-date {
		text-align: right;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span {
		text-align: right;
		-webkit-transform: translateY(-100%);
		transform: translateY(-100%);
		-webkit-transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .item-caption .item-date span::after {
		content: counter(thumb, decimal-leading-zero) "";
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		height: 100%;
		counter-increment: thumb;
	}

	.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item .item-content:hover .item-caption .item-date span {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}

	/* Responsive */

	@media only screen and (max-width: 1024px) {

		/* Thumb 3 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(3) .item-content {
			width: 66.6667%;
		}

		/* Thumb 4 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(4) .item-content {
			width: 66.6667%;
		}

		/* Thumb 7 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(7) .item-content {
			width: 66.6667%;
		}

		/* Thumb 8 */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(8) .item-content {
			width: 66.6667%;
		}

	}

	@media only screen and (max-width: 767px) {

		.hayler .filters-container {
			padding-left: 0;
		}

		/* All Thumbs */
		.hayler .showcase-portfolio:not(.items-filtered):not(.portfolio-list-view) .clapat-item:nth-child(n) .item-content {
			width: 100%;
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(50% - (2 * var(--thumbs-margins-width)));
		}

	}

	@media only screen and (max-width: 479px) {

		.hayler .showcase-portfolio:not(.portfolio-list-view) .clapat-item {
			width: calc(100% - (2 * var(--thumbs-margins-width)));
		}
		
		.hayler .showcase-portfolio.items-filtered:not(.portfolio-list-view) .clapat-item {
		  	width: calc(100% - (2 * var(--thumbs-margins-width)));
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption {
			flex-wrap: wrap;
			align-content: center;
			gap: 0;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-title {
			flex: 0 0 100%;
		}

		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-cat,
		.hayler .showcase-portfolio.switch-layout.portfolio-list-view .clapat-item .item-caption .item-date {
			flex: 0 0 50%;
		}

	}


/*------------------------------------------------------------------
    Shortcodes
-------------------------------------------------------------------*/

	/* Has Underline */

	.hayler .clone-underline::before,
	.hayler .clone-underline::after {
		bottom: 8px;
	}

	@media only screen and (max-width: 1537px) {

		.hayler .clone-underline::before,
		.hayler .clone-underline::after {
			bottom: 7px;
		}

	}

	@media only screen and (max-width: 1024px) {

		.hayler .clone-underline::before,
		.hayler .clone-underline::after {
			bottom: 5px;
		}

	}

	/* Marquee */

	.hayler .marquee-image {
		width: 1em;
		height: 1em;
	}	

	/* Flex List */

	.hayler .flex-list::before {
		--segment: calc(
			(100% - (var(--horizontal-gutter) * 2) - (var(--gap) * 2)) / 3
		);
		mask-image: linear-gradient(
			to right,
			transparent 0,
			transparent var(--horizontal-gutter),
			black var(--horizontal-gutter),
			black calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment)),
			transparent calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) + var(--gap)),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap)),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 2 + var(--gap) * 2),
			black calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent calc(var(--horizontal-gutter) + var(--segment) * 3 + var(--gap) * 2),
			transparent 100%
		);
	}

	/* Clock */

	.hayler .clock-widget {
		align-items: inherit;
		justify-content: center;
	}

	@media only screen and (max-width: 767px) {

		.hayler .clock-widget {
			flex-direction: row;
			gap: 4px;
		}

		.hayler .clock-label::after {
			content: ",";
		}

		.hayler .clock-time.heading-5 {
			font-family: var(--default-font-family);
			font-size: var(--default-body-font-size);
			line-height: var(--default-body-line-height);
			font-weight: var(--default-body-font-weight);
			letter-spacing: var(--default-body-letter-spacing);
		}

	}

	/* Background Pattern */

	.hayler .background-pattern {
		--checker-opacity: 0.1;
		--checker-size: 18px;
		--checker-color: color-mix(in srgb, currentColor calc(var(--checker-opacity) * 100%), transparent);
		background-color: transparent;
		background-image:
			linear-gradient(45deg, var(--checker-color) 25%, transparent 25%),
			linear-gradient(-45deg, var(--checker-color) 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, var(--checker-color) 75%),
			linear-gradient(-45deg, transparent 75%, var(--checker-color) 75%);
		background-size: var(--checker-size) var(--checker-size);
		background-position: 0 0, 0 calc(var(--checker-size) / 2), calc(var(--checker-size) / 2) calc(var(--checker-size) / -2), calc(var(--checker-size) / -2) 0;
	}
/* ============================================
   Cookie Banner (aus css/cookie-banner.css)
   ============================================ */
/* Menzinger Concepts — Cookie Consent Banner
   Eigenlösung, DSGVO/TTDSG-konform.
   Kein Third-Party-Request. Steuert Consent-Zustand via window.MCConsent. */

.mc-cc,
.mc-cc *,
.mc-cc *::before,
.mc-cc *::after {
  box-sizing: border-box;
}

/* Zentriertes, nicht-modales Cookie-Panel (KEINE Cookie-Wall):
   Kein Backdrop, kein Scroll-Lock, Seite bleibt bedienbar. */
.mc-cc {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  z-index: 2147483000;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #0a0a0a;
  color: #f5f5f5;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  padding: 34px 34px 28px;
  opacity: 0;
  transition: opacity 320ms ease, transform 320ms ease;
  pointer-events: none;
}

.mc-cc[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.mc-cc[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .mc-cc {
    transition: opacity 200ms ease;
    transform: translate(-50%, -50%);
  }
  .mc-cc[data-open="true"] { transform: translate(-50%, -50%); }
}

@media (max-width: 780px) {
  .mc-cc {
    left: 16px;
    right: 16px;
    top: auto;
    bottom: 16px;
    width: auto;
    transform: translateY(12px);
    padding: 22px 20px 20px;
    font-size: 13.5px;
    max-height: 82vh;
  }
  .mc-cc[data-open="true"] { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) {
    .mc-cc, .mc-cc[data-open="true"] { transform: none; }
  }
}

.mc-cc__close {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  padding: 4px 8px;
  margin-left: auto;
  cursor: pointer;
  transition: color 160ms ease;
}
.mc-cc__close:hover,
.mc-cc__close:focus-visible {
  color: #fff;
  outline: none;
}

.mc-cc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.mc-cc__logo {
  height: 18px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.mc-cc__title {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  font-weight: 500;
}

.mc-cc__intro {
  margin: 0 0 22px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 62ch;
}

.mc-cc__intro a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Kategorien — 3 Spalten */
.mc-cc__cats {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 780px) {
  .mc-cc__cats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.mc-cc__cat {
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 8px 12px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
}

.mc-cc__cat-name {
  font-weight: 500;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.mc-cc__cat-desc {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0;
}

/* Toggle Switch */
.mc-cc__toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

.mc-cc__toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.mc-cc__slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255, 255, 255, 0.18);
  transition: background 200ms ease;
  border-radius: 999px;
}

.mc-cc__slider::before {
  content: "";
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  transition: transform 200ms ease;
  border-radius: 50%;
}

.mc-cc__toggle input:checked + .mc-cc__slider {
  background: #4ade80;
}

.mc-cc__toggle input:checked + .mc-cc__slider::before {
  transform: translateX(16px);
}

.mc-cc__toggle input:disabled + .mc-cc__slider {
  background: rgba(74, 222, 128, 0.55);
  cursor: not-allowed;
}

.mc-cc__toggle input:focus-visible + .mc-cc__slider {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Aktionen */
.mc-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.mc-cc__btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 12px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.mc-cc__btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.mc-cc__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.mc-cc__btn--primary {
  background: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

.mc-cc__btn--primary:hover {
  background: rgba(255, 255, 255, 0.88);
  color: #0a0a0a;
}

/* Footer-Legal-Zeile: dezenter Auftritt */
.hayler .copyright {
  opacity: 0.5;
  font-size: 11px;
  letter-spacing: 0.02em;
  transition: opacity 200ms ease;
}
.hayler .copyright:hover { opacity: 0.9; }
.hayler .copyright a:hover { opacity: 1; }

/* ---- Cookie-Einstellungen-Seite (Inline-Steuerung) ---- */
.mc-cookie-panel {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.02);
}
.mc-cookie-panel .mc-cc__cats {
  margin: 0 0 20px;
}
.mc-cookie-panel .mc-cc__cat {
  border-color: rgba(0, 0, 0, 0.1);
  background: #fff;
}
.mc-cookie-panel .mc-cc__cat-name { color: #111; }
.mc-cookie-panel .mc-cc__cat-desc { color: rgba(0, 0, 0, 0.6); }
.mc-cookie-panel .mc-cc__btn {
  color: #111;
  border-color: rgba(0, 0, 0, 0.25);
}
.mc-cookie-panel .mc-cc__btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.55);
}
.mc-cookie-panel .mc-cc__btn--primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.mc-cookie-panel .mc-cc__btn--primary:hover {
  background: #000;
  color: #fff;
}
.mc-cookie-status {
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.55);
  min-height: 1.4em;
}
.mc-cookie-status.is-success { color: #1a7f3c; }

.mc-cookie-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 8px;
  font-size: 13px;
}
.mc-cookie-table th,
.mc-cookie-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  vertical-align: top;
}
.mc-cookie-table th {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.mc-cookie-table td code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/*------------------------------------------------------------------
    Contact Form (mailto fallback)
-------------------------------------------------------------------*/

#contactform textarea {
	min-height: 220px;
	resize: vertical;
}

#contactform .mail-hint {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 24px 0 28px;
	padding: 16px 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.03);
}

#contactform .mail-hint-icon {
	font-size: 18px;
	margin-top: 2px;
	opacity: 0.85;
	flex-shrink: 0;
}

#contactform .mail-hint-text {
	font-size: 14px;
	line-height: 1.55;
	opacity: 0.75;
}

#message .error_message,
#message .submit_message {
	margin-bottom: 20px;
	font-size: 14px;
	line-height: 1.5;
}

#message .error_message {
	color: #ff6b6b;
}

#message .submit_message {
	opacity: 0.75;
}

#message .error_message p,
#message .submit_message p {
	margin: 0 0 6px;
}

#message .submit_message a {
	text-decoration: underline;
	color: inherit;
}

/* ============================================
   Cursor / Ball-Loader — Overrides
   (Theme-Kern `style.css` bleibt unangetastet)
   ============================================ */

/* Ball-Loader bleibt unabhängig von Hover-/Text-Cursorformen zentriert.
   Wichtig für Featured Cases: Dort wechselt der Cursor auf auto/Text,
   während der Loader bereits sichtbar werden kann. */
#ball-loader {
	top: 50%;
	left: 50%;
	width: calc(var(--cursor-loader-width) + 8px);
	height: calc(var(--cursor-loader-height) + 8px);
	border: 1.5px solid transparent;
	border-bottom-color: currentColor;
	border-radius: 999px;
	transform-origin: center center;
}

/* Wenn der Cursor global unsichtbar/deaktiviert ist, darf der Spinner
   nicht durchblitzen (z. B. während des Preloaders oder auf Mobile). */
.hidden-ball #ball-loader,
.disable-cursor #ball-loader {
	display: none !important;
}




/*------------------------------------------------------------------
	Kontaktformular v2 — Drop-Zone, Captcha, Consent, Success Panel
-------------------------------------------------------------------*/

	#contact-formular #message .error_message {
		background: rgba(220, 38, 38, 0.12);
		border: 1px solid rgba(220, 38, 38, 0.4);
		color: #fecaca;
		padding: 12px 16px;
		border-radius: 8px;
		font-size: 14px;
		margin: 0 0 16px;
	}
	#contact-formular #message .error_message p { margin: 0; }

	/* Field labels */
	#contact-formular .field-label {
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.5);
		margin: 0 0 8px;
	}
	#contact-formular .field-label-optional {
		font-weight: 400;
		letter-spacing: 0.08em;
		color: rgba(255,255,255,0.32);
		text-transform: none;
		margin-left: 6px;
	}
	#contact-formular input::placeholder,
	#contact-formular textarea::placeholder {
		color: rgba(255,255,255,0.28);
		opacity: 1;
	}

	/* Dropzone */
	.attachments-box { margin-top: 24px; }
	.dropzone {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 12px;
		min-height: 170px;
		padding: 28px 24px;
		border: 2px dashed rgba(255,255,255,0.18);
		border-radius: 14px;
		background:
			radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.045), rgba(255,255,255,0) 60%),
			rgba(255,255,255,0.015);
		cursor: pointer;
		transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease;
		color: rgba(255,255,255,0.85);
	}
	.dropzone:hover,
	.dropzone:focus-visible {
		border-color: rgba(255,255,255,0.4);
		background:
			radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%),
			rgba(255,255,255,0.03);
		outline: none;
	}
	.dropzone.is-dragover {
		border-style: solid;
		border-color: rgba(255,255,255,0.65);
		background: rgba(255,255,255,0.06);
	}
	.dropzone-icon {
		font-size: 30px;
		color: rgba(255,255,255,0.7);
		transition: transform 0.25s ease, color 0.25s ease;
	}
	.dropzone:hover .dropzone-icon,
	.dropzone.is-dragover .dropzone-icon {
		transform: translateY(-3px) scale(1.05);
		color: #ffffff;
	}
	.dropzone-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
	.dropzone-text strong { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.95); }
	.dropzone-hint { font-size: 12px; color: rgba(255,255,255,0.5); }
	.dropzone-chip {
		display: inline-block;
		margin-top: 4px;
		padding: 6px 14px;
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.85);
		border: 1px solid rgba(255,255,255,0.28);
		border-radius: 999px;
		transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
	}
	.dropzone:hover .dropzone-chip,
	.dropzone.is-dragover .dropzone-chip {
		border-color: #ffffff;
		color: #0c0c0c;
		background: #ffffff;
	}

	/* Dropzone states */
	.dropzone:focus-visible {
		outline: 2px solid rgba(255,255,255,0.35);
		outline-offset: 3px;
	}
	.dropzone.is-dragover .dropzone-icon {
		animation: mcDropPulse 1.4s ease-in-out infinite;
	}
	.dropzone.has-files {
		border-style: solid;
		border-color: rgba(255,255,255,0.28);
		box-shadow: inset 2px 0 0 0 #8fd694;
	}
	.dropzone.has-files .dropzone-icon {
		color: #8fd694;
		transform: none;
	}
	.dropzone.has-error {
		border-style: solid;
		border-color: #e07a7a;
		background: rgba(224,122,122,0.06);
		animation: mcDropShake 0.4s ease-in-out;
	}
	.dropzone.has-error .dropzone-icon {
		color: #e07a7a;
	}
	@keyframes mcDropPulse {
		0%, 100% { transform: translateY(-2px) scale(1); }
		50%      { transform: translateY(-5px) scale(1.08); }
	}
	@keyframes mcDropShake {
		0%, 100% { transform: translateX(0); }
		20%      { transform: translateX(-6px); }
		40%      { transform: translateX(5px); }
		60%      { transform: translateX(-3px); }
		80%      { transform: translateX(2px); }
	}

	/* Summary chip */
	.attachments-summary {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 14px 0 0;
		padding: 8px 14px;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: rgba(255,255,255,0.65);
		background: rgba(255,255,255,0.04);
		border: 1px solid rgba(255,255,255,0.08);
		border-radius: 999px;
		width: fit-content;
	}
	.attachments-summary .sep {
		width: 3px;
		height: 3px;
		border-radius: 50%;
		background: rgba(255,255,255,0.35);
	}

	/* Attachments list — modern cards */
	.attachments-list {
		list-style: none;
		padding: 0;
		margin: 10px 0 0;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.attachment-item {
		display: grid;
		grid-template-columns: 40px 1fr auto;
		align-items: center;
		gap: 14px;
		padding: 10px 12px 10px 10px;
		background: rgba(255,255,255,0.04);
		border: 1px solid rgba(255,255,255,0.09);
		border-radius: 10px;
		animation: mcAttachIn 0.28s ease-out both;
		transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
	}
	.attachment-item.is-removing {
		opacity: 0;
		transform: translateY(-4px);
	}
	.attachment-item:hover {
		background: rgba(255,255,255,0.06);
		border-color: rgba(255,255,255,0.16);
	}
	.attachment-icon {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8px;
		background: rgba(255,255,255,0.06);
		color: rgba(255,255,255,0.85);
		font-size: 15px;
	}
	.attachment-icon.type-pdf   { color: #ff8a7a; background: rgba(255,138,122,0.10); }
	.attachment-icon.type-image { color: #8bb8ff; background: rgba(139,184,255,0.10); }
	.attachment-body {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}
	.attachment-name {
		font-size: 13px;
		font-weight: 500;
		color: rgba(255,255,255,0.95);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.attachment-meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 11px;
		color: rgba(255,255,255,0.5);
		font-variant-numeric: tabular-nums;
	}
	.attachment-meta .tag {
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: 600;
		font-size: 10px;
		color: rgba(255,255,255,0.55);
	}
	.attachment-remove {
		width: 28px;
		height: 28px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 1px solid transparent;
		border-radius: 50%;
		color: rgba(255,255,255,0.55);
		font-size: 13px;
		line-height: 1;
		cursor: pointer;
		transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
	}
	.attachment-remove:hover {
		color: #ffffff;
		border-color: rgba(255,255,255,0.25);
		background: rgba(255,255,255,0.05);
	}
	@keyframes mcAttachIn {
		from { opacity: 0; transform: translateY(4px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Captcha */
	.captcha-box { margin-top: 22px; min-height: 78px; }

	/* Consent */
	.consent-box { margin-top: 18px; }
	.consent-label {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		cursor: pointer;
		font-size: 12px;
		line-height: 1.6;
		color: rgba(255,255,255,0.6);
	}
	.consent-label input[type="checkbox"] {
		position: absolute;
		opacity: 0;
		pointer-events: none;
	}
	.consent-checkbox {
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		margin-top: 3px;
		border: 1px solid rgba(255,255,255,0.35);
		border-radius: 3px;
		background: transparent;
		position: relative;
		transition: border-color 0.15s ease, background-color 0.15s ease;
	}
	.consent-label input[type="checkbox"]:checked + .consent-checkbox {
		background: #ffffff;
		border-color: #ffffff;
	}
	.consent-label input[type="checkbox"]:checked + .consent-checkbox::after {
		content: "";
		position: absolute;
		left: 4px;
		top: 1px;
		width: 4px;
		height: 8px;
		border: solid #0c0c0c;
		border-width: 0 1.5px 1.5px 0;
		transform: rotate(45deg);
	}
	.consent-label input[type="checkbox"]:focus-visible + .consent-checkbox {
		outline: 2px solid rgba(255,255,255,0.5);
		outline-offset: 2px;
	}
	.consent-text a { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }

	/* Submit button — mirror header outlined pill, cross-viewport */
	.submit-button-wrap { margin-top: 28px; }
	.submit-button-wrap .button-wrap.button-icon-box {
		background: transparent !important;
		border-color: rgba(255,255,255,0.85);
		transition: background-color 0.3s ease, border-color 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
	}
	.submit-button-wrap .button-wrap.button-icon-box a {
		cursor: pointer;
		color: #ffffff;
	}
	.submit-button-wrap .button-wrap.button-icon-box .button-text,
	.submit-button-wrap .button-wrap.button-icon-box .button-text span,
	.submit-button-wrap .button-wrap.button-icon-box .button-icon i {
		color: #ffffff;
		transition: color 0.3s ease;
	}
	.submit-button-wrap .button-wrap.button-icon-box:hover {
		background: #ffffff !important;
		border-color: #ffffff;
	}
	.submit-button-wrap .button-wrap.button-icon-box:hover .button-text,
	.submit-button-wrap .button-wrap.button-icon-box:hover .button-text span,
	.submit-button-wrap .button-wrap.button-icon-box:hover .button-icon i {
		color: #0c0c0c;
	}
	.submit-button-wrap .button-wrap.button-icon-box a:focus-visible {
		outline: 2px solid rgba(255,255,255,0.55);
		outline-offset: 4px;
		border-radius: 44px;
	}
	/* Loading / disabled */
	.submit-button-wrap .button-wrap.is-loading,
	.submit-button-wrap .button-wrap.is-disabled {
		opacity: 0.5;
		pointer-events: none;
		cursor: not-allowed;
	}
	.submit-button-wrap .button-wrap.is-loading .button-icon i {
		animation: mcBtnSpin 0.8s linear infinite;
	}
	@keyframes mcBtnSpin { to { transform: rotate(360deg); } }
	@media (max-width: 640px) {
		.submit-button-wrap .button-wrap.button-icon-box { width: auto; }
	}


	/* Success Panel */
	.contact-success {
		background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
		border: 1px solid rgba(255,255,255,0.12);
		border-radius: 14px;
		padding: 36px 32px;
		text-align: left;
		animation: mcSuccessIn 0.5s ease-out;
	}
	@keyframes mcSuccessIn {
		from { opacity: 0; transform: translateY(12px); }
		to   { opacity: 1; transform: translateY(0); }
	}
	.contact-success-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #ffffff;
		color: #0c0c0c;
		font-size: 18px;
		margin-bottom: 18px;
	}
	.contact-success-title {
		font-size: 22px;
		font-weight: 600;
		color: #ffffff;
		margin: 0 0 10px;
		line-height: 1.3;
	}
	.contact-success-text {
		font-size: 15px;
		line-height: 1.6;
		color: rgba(255,255,255,0.78);
		margin: 0;
	}
	.contact-success-text strong { color: #ffffff; font-weight: 600; }

	@media (max-width: 640px) {
		.dropzone { flex-direction: column; text-align: center; padding: 20px 16px; }
		.contact-success { padding: 28px 22px; }
	}