/* ANIMATIONEN
   Nutzung: data-anim="fade | fade-up | fade-down | slide-left | slide-right | zoom | rotate-in"
   optional: data-anim-trigger="load" (sonst beim Scrollen), data-anim-duration, data-anim-delay (ms),
   data-anim-group + data-anim-stagger (ms) für nacheinander erscheinende Elemente */
:root {
	--anim-duration: 800ms;
	--anim-ease: cubic-bezier(.22, 1, .36, 1);
	--anim-distance: 40px;
	--anim-rotate: 15deg;
	--anim-scale: .9;
}
.anim-ready [data-anim] {
	opacity: 0;
	transition-property: opacity, translate, rotate, scale;
	transition-duration: var(--anim-duration);
	transition-timing-function: var(--anim-ease);
	transition-delay: var(--anim-delay, 0ms);
}
.anim-ready [data-anim="fade-up"]     { translate: 0 var(--anim-distance); }
.anim-ready [data-anim="fade-down"]   { translate: 0 calc(var(--anim-distance) * -1); }
.anim-ready [data-anim="slide-left"]  { translate: calc(var(--anim-distance) * -2) 0; }
.anim-ready [data-anim="slide-right"] { translate: calc(var(--anim-distance) * 2) 0; }
.anim-ready [data-anim="zoom"]        { scale: var(--anim-scale); }
.anim-ready [data-anim="rotate-in"]   { translate: 0 calc(var(--anim-distance) * -1); rotate: var(--anim-rotate); }
.anim-ready [data-anim].is-visible    { opacity: 1; translate: none; rotate: none; scale: none; }

@media (prefers-reduced-motion: reduce) {
	.anim-ready [data-anim] { opacity: 1; translate: none; rotate: none; scale: none; transition: none; }
}
/* erst nach dem Laden aktiv, sonst landen Anker-Links von Unterseiten durch nachladende Schriften zu tief */
@media (prefers-reduced-motion: no-preference) {
	html.smooth-scroll { scroll-behavior: smooth; }
}

.parallax { position: relative; height: 250px; overflow: hidden; }
.parallax__bg {
	position: absolute;
	inset: calc(var(--parallax-range, 0px) * -1) 0;
	background: center / cover no-repeat;
	will-change: translate;
}
.parallax__bg--expertise { background-image: url('../images/bg_clear.webp'); }
.parallax__bg--contact   { background-image: url('../images/tasche-material.webp'); }


.adress p { line-height: 18pt; }
.adress span:after { content: "·"; margin-right: 10px; margin-left: 10px; }
.no:after { content: "" !important; }

.box_sales { top: 170px; right: 85px; z-index: 400; }
.box_support { top: 170px; left: 85px; z-index: 400; }

.upme { margin-top: -90px; }

/* teaser_right css */
.teaser_right { padding: 0; color: #fff; }
.teaser_right .title { text-align: right; }
.teaser_right .subtitle { text-align: right; }

/* teaser_left css */
.teaser_left { padding: 0; color: #fff; }
.teaser_left .title { text-align: left; }
.teaser_left .subtitle { text-align: left; padding-left: 3px; }

ul.no_bullet {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#vliste li:before {
	content: url('../images/bullet.webp');
	display: table-cell;
	float: left;
	height: 100%;
	margin-right: 30px;
}
#vliste li { margin-top: -20px; margin-left: 24px; margin-bottom: 60px; }
#vliste li p { display: table-cell; }

/* Fonts css */
/* Latin-Subset (U+0000-017F, Satzzeichen, €); Original-TTFs in .dev/backup/fonts */
@font-face {
	font-family: 'GothicA1-Bold';
	src: url('../fonts/GothicA1-Bold.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'GothicA1-Regular';
	src: url('../fonts/GothicA1-Regular.woff2') format('woff2');
	font-display: swap;
}

/* General CSS */
body {
	font-family: 'GothicA1-Regular';
	background: linear-gradient(to bottom, #f7bcc8 0%, #dc9892 37%, #e393a0 100%);
}
h1, h2, h3, h4, h5, h6, .h5 {
	font-weight: normal;
	font-family: 'GothicA1-Bold';
}
/* Optik unabhängig vom Tag: .title = große rote Überschrift, .subtitle = graue Unterzeile */
.title {
	font-family: 'GothicA1-Bold';
	font-size: 3.5rem;
	line-height: 82px;
	color: #b01f2b;
}
.subtitle {
	margin-bottom: .5rem;
	font-family: 'GothicA1-Bold';
	font-size: 26px;
	color: #81888d;
	letter-spacing: 1px;
	line-height: 7px;
	text-transform: uppercase;
}
.hdlm { color: #b01f2b; font-weight: bold; }

input:focus, button:focus {
	outline: none;
}
p {
	font-family: 'GothicA1-Regular';
	font-size: 19.5px;
}
section {
	padding: 10px 0;
}
a {
	color: #b01f2b;
	transition: 0.3s;
}
a:hover, a:focus {
	text-decoration: none;
}
img {
	max-width: 100%;
	height: auto;
}
ul {
	margin: 0;
	padding: 0;
}
b, strong {
	font-weight: normal;
	font-family: 'GothicA1-Bold';
}

/* main wrapper css */
.wrapper {
	max-width: 1280px;
	margin: 0 auto;
	overflow: hidden;
	background-color: #fff;
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
}
.wrapper [id] { scroll-margin-top: 80px; }

/* Header / Navigation (Glas-Leiste)
   Wichtig: .site-header darf kein transform/filter/backdrop-filter bekommen – das mobile Menü
   liegt als position:fixed darin und würde sonst auf die Leiste begrenzt. Glas-Effekt deshalb auf ::before. */
.site-header {
	--hdr-h: 64px;
	--logo-h: 40px;
	position: fixed;
	top: 14px;
	left: 14px;
	right: 14px;
	z-index: 1000;
	max-width: 1240px;
	margin-inline: auto;
	border-radius: 18px;
	transition: top .3s ease;
}
.site-header::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border: 1px solid rgba(255, 255, 255, .7);
	border-radius: inherit;
	background: rgba(255, 255, 255, .68);
	box-shadow: 0 10px 30px rgba(120, 20, 40, .12);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	backdrop-filter: blur(14px) saturate(1.4);
	transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { --hdr-h: 56px; --logo-h: 32px; top: 8px; }
.site-header.is-scrolled::before { background: rgba(255, 255, 255, .86); }
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: var(--hdr-h);
	padding: 0 28px;
	transition: height .3s ease;
}
.site-header__brand {
	flex: none;
	opacity: 0;
	translate: 0 -6px;
	pointer-events: none;
	transition: opacity .35s ease, translate .35s ease;
}
.site-header.show-brand .site-header__brand,
.site-header.is-open .site-header__brand,
.site-header__brand:focus-visible { opacity: 1; translate: none; pointer-events: auto; }
.site-header__brand img { display: block; width: auto; height: var(--logo-h); transition: height .3s ease; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.site-nav__link,
.site-nav__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	font-family: 'GothicA1-Bold';
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color .25s ease, background-color .25s ease, box-shadow .25s ease, translate .25s ease;
}
.site-nav__link { padding: 0 16px; border-radius: 999px; color: #2b2e31; }
.site-nav__link:hover,
.site-nav__link:focus-visible { background: rgba(176, 31, 43, .08); color: #b01f2b; text-decoration: none; }
.site-nav__link[aria-current] { background: rgba(176, 31, 43, .13); color: #b01f2b; }
.site-nav__cta {
	margin-left: 12px;
	padding: 0 22px;
	border-radius: 999px;
	background: linear-gradient(135deg, #d0394a, #b01f2b);
	color: #fff;
	box-shadow: 0 6px 18px rgba(176, 31, 43, .3);
}
.site-nav__cta:hover,
.site-nav__cta:focus-visible { color: #fff; text-decoration: none; box-shadow: 0 8px 22px rgba(176, 31, 43, .42); translate: 0 -1px; }
.site-nav__footer { display: none; }
.site-header__toggle { display: none; }
.site-nav a:focus-visible,
.site-header__toggle:focus-visible,
.site-header__brand:focus-visible { outline: 2px solid #b01f2b; outline-offset: 3px; }

@media (max-width: 767px) {
	.site-header { --hdr-h: 56px; --logo-h: 30px; top: 10px; left: 10px; right: 10px; border-radius: 16px; }
	.site-header.is-scrolled { --hdr-h: 54px; --logo-h: 28px; top: 8px; }
	.site-header.is-open::before { background: rgba(255, 255, 255, .4); box-shadow: none; }
	.site-header__inner { padding: 0 12px 0 16px; }

	/* oben nur runder Menü-Button, volle Leiste mit Logo erst nach dem Banner.
	   Die Leiste behält ihre Größe (sonst Layout-Shift/CLS) – nur die Glasflächen werden überblendet. */
	.site-header:not(.show-brand):not(.is-open) { pointer-events: none; }
	.site-header:not(.show-brand):not(.is-open)::before { opacity: 0; }
	.site-header::before { transition: opacity .3s ease, background-color .3s ease, box-shadow .3s ease; }

	.site-header__toggle {
		position: relative;
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		margin-left: auto;
		padding: 0 11px;
		border: 0;
		background: none;
		color: #7e1520;
		cursor: pointer;
		pointer-events: auto;
	}
	.site-header__toggle::before {
		content: '';
		position: absolute;
		inset: -6px;
		z-index: -1;
		border: 1px solid rgba(255, 255, 255, .7);
		border-radius: 14px;
		background: rgba(255, 255, 255, .68);
		box-shadow: 0 10px 30px rgba(120, 20, 40, .12);
		-webkit-backdrop-filter: blur(14px) saturate(1.4);
		backdrop-filter: blur(14px) saturate(1.4);
		opacity: 0;
		transition: opacity .3s ease;
	}
	.site-header:not(.show-brand):not(.is-open) .site-header__toggle::before { opacity: 1; }
	.site-header__toggle span { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: translate .3s ease, rotate .3s ease, opacity .2s ease; }
	.site-header.is-open .site-header__toggle span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
	.site-header.is-open .site-header__toggle span:nth-child(2) { opacity: 0; }
	.site-header.is-open .site-header__toggle span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }

	.site-nav {
		position: fixed;
		inset: 0;
		z-index: -2;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 0;
		padding: 100px 32px 32px;
		background: linear-gradient(160deg, #f7bcc8 0%, #e8a3ad 55%, #dc9892 100%);
		text-align: center;
		opacity: 0;
		visibility: hidden;
		transition: opacity .35s ease, visibility 0s .35s;
	}
	.site-header.is-open .site-nav { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
	.site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.site-nav__list > li { opacity: 0; translate: 0 12px; transition: opacity .3s ease, translate .3s ease; }
	.site-header.is-open .site-nav__list > li { opacity: 1; translate: none; }
	.site-header.is-open .site-nav__list > li:nth-child(1) { transition-delay: 80ms; }
	.site-header.is-open .site-nav__list > li:nth-child(2) { transition-delay: 130ms; }
	.site-header.is-open .site-nav__list > li:nth-child(3) { transition-delay: 180ms; }
	.site-header.is-open .site-nav__list > li:nth-child(4) { transition-delay: 230ms; }
	.site-nav__link,
	.site-nav__cta { display: flex; justify-content: center; }
	.site-nav__link { min-height: 62px; font-size: 24px; letter-spacing: .08em; color: #7e1520; }
	.site-nav__link:hover,
	.site-nav__link:focus-visible,
	.site-nav__link[aria-current] { background: none; color: #fff; }
	.site-nav__cta { min-height: 52px; margin: 20px 0 0; font-size: 14px; background: #fff; color: #b01f2b; box-shadow: 0 10px 24px rgba(126, 21, 32, .2); }
	.site-nav__cta:hover,
	.site-nav__cta:focus-visible { color: #b01f2b; }
	.site-nav__footer { display: block; margin-top: 28px; font-family: 'GothicA1-Regular'; font-size: 13px; line-height: 1.6; color: rgba(80, 10, 20, .7); }
	.site-nav__footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
	html.menu-open { overflow: hidden; }
}

/* Bewegung reduzieren: !important, weil alle einzelnen Menü-Transitions übersteuert werden müssen */
@media (prefers-reduced-motion: reduce) {
	.site-header, .site-header * { transition-duration: 1ms !important; transition-delay: 0s !important; }
}

/* Banner CSS */
.banner {
	padding: 0;
	position: relative;
}

/* Welcome css */
.welcome .subtitle {
	color: #81888d;
	margin-bottom: 1em;
	font-family: 'GothicA1-Bold';
}
.welcome p {
	color: #000;
	font-family: 'GothicA1-Regular';
}

/* Brands css */
.brands { margin-top: 70px; padding: 0; container: brands / inline-size; }
.brands__band { position: relative; height: 250px; background: #dadbdf; }
.brands__title { position: absolute; left: 85px; top: 50%; z-index: 2; transform: translateY(-50%); }
.brands__title .subtitle { padding-left: 3px; }
.brands__stage {
	position: absolute;
	right: 50px;
	top: 0;
	width: min(710px, 56%);
	aspect-ratio: 710 / 465;
	transform: translateY(-13.5%);
}
.brands__spacer { height: 120px; }
.brands__img { position: absolute; max-width: none; height: auto; }
.brands__img--essence          { left: .56%;   top: 21.94%; width: 27.89%; }
.brands__img--splash-1         { left: 18.45%; top: .43%;   width: 45.07%; }
.brands__img--essence-products { left: 12.39%; top: 15.91%; width: 29.58%; transform: rotate(7deg); }
.brands__img--catrice          { left: 34.37%; top: 21.94%; width: 27.89%; }
.brands__img--catrice-products { left: 39.01%; top: 41.29%; width: 26.76%; }
.brands__img--splash-2         { left: 59.72%; top: 29.03%; width: 39.44%; }
.brands__img--lov              { left: 66.76%; top: 21.94%; width: 27.89%; }
.brands__img--lov-products     { left: 79.86%; top: 41.94%; width: 19.58%; }

@container brands (max-width: 1199px) {
	.brands__band { --stage-w: min(100cqw - 32px, 710px); display: flow-root; height: auto; padding: 40px 16px 0; }
	.brands__title { position: static; padding-left: 20px; transform: none; }
	.brands__stage { position: relative; right: auto; width: var(--stage-w); margin: 0 auto calc(var(--stage-w) * -.214); transform: none; }
	.brands__spacer { height: calc(min(100cqw - 32px, 710px) * .214 + 10px); }
}
@container brands (max-width: 575px) {
	.brands__band { --stage-w: min(100cqw, 710px); padding: 30px 0 0; }
	.brands__spacer { height: calc(min(100cqw, 710px) * .214 + 10px); }
	.brands__title .title { font-size: 25pt; line-height: 1.3; }
	.brands__title .subtitle { font-size: 13pt; line-height: 15pt; }
}

/* newsArea css */
.newsArea {
	padding: 42px 0;
}

/* footerArea css */
.footerArea {
	background: linear-gradient(to bottom, #e6e6e6 10%, #fff 28%, #fff 100%);
	color: #7b7e7b;
}
.footer-bottom {
	padding: 10px 0;
	position: relative;
}
.footer-heart { width: .85em; height: .85em; vertical-align: -.08em; }
.footer-widget ul {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left: 10px;
}
.footer-widget ul li:first-child:after { content: "|"; margin-left: 5px; }
.footer-widget ul li {
	display: block;
	margin-right: 5px;
	padding-bottom: 10px;
	float: left;
}
.footer-widget ul li a {
	font-size: 14px;
	color: #7b7e7b;
	line-height: 22px;
}
.footer-widget ul li a:hover {
	color: #000;
}

/*========= Device css ===========*/
@media only screen and (min-width: 1101px) and (max-width: 1199px) {
	.welcome .subtitle { font-size: 22px; }
}

@media only screen and (max-width: 767px) {
	.title { font-size: 35pt; }
	.subtitle { font-size: 15pt; }
}

@media only screen and (min-width: 575px) and (max-width: 766px) {
	#btop { width: auto; height: 190px; max-width: none !important; }
	.a1:after { content: "" !important; display: block; }
}

@media only screen and (min-width: 600px) and (max-width: 1124px) {
	.welcome .subtitle { font-size: 14pt !important; }
	.welcome .title { font-size: 37pt !important; }
}

@media only screen and (min-width: 320px) and (max-width: 575px) {
	#btop { width: auto; height: 190px; max-width: none !important; }

	.welcome .title { font-size: 32px; }
	.welcome .subtitle { font-size: 12px; margin-bottom: 16px; }
	.pl-2 { padding-left: 5px !important; letter-spacing: 0; }

	p {
		font-family: 'GothicA1-Regular';
		font-size: 13.5px;
	}

	.pl-5, .px-5 { padding-left: 0 !important; }
	#subline_intro { padding-bottom: 10px !important; }

	.mx-mobil { margin-left: auto !important; margin-right: auto !important; }
	.footer-widget ul li { font-size: 12px; }
	.footer-widget ul li a {
		font-size: 12px;
		color: #7b7e7b;
		line-height: 22px;
	}

	#vliste li { margin-left: 9px; }
	#vliste li:before { margin-right: 15px; }

	.box_sales { right: 25px; }
	.box_sales .title { font-size: 25pt; }
	.box_sales .subtitle { font-size: 13pt; }

	.box_support { left: 25px; }
	.box_support .title { font-size: 25pt; margin-left: 20px; }
	.box_support .subtitle { font-size: 13pt; line-height: 15pt; margin-left: 20px; }

	.parallax__bg--expertise { background-image: url('../images/bg_clear_mobil.webp'); }
	.parallax__bg--contact   { background-image: url('../images/tasche-material_mobil.webp'); }

	.adress span:after { display: block; content: " "; margin: 0; }
	.no:after { content: "" !important; }
	.adress p { line-height: 16pt; }
}

@media only screen and (min-width: 320px) and (max-width: 400px) {
	#btop { width: auto; height: 190px; max-width: none !important; }
}