.intro--hero  {
	align-items: center;
	display: grid;
	grid-template-rows: var(--header-height) 28rem auto auto;
}
.intro--hero .sub-headline h1,
.intro--hero .sub-headline h2,
.intro--hero .sub-headline h3,
.intro--hero .sub-headline h4 {
	color: var(--bs-white);
}
@media (max-width:1200px) {
	.intro--hero {
	    grid-template-rows: var(--header-height) 22rem auto auto;
	}
}
@media (max-width: 767px) {
	.intro--hero {
		grid-template-rows: var(--header-height) 27rem 80px auto;
	}
}

.intro--hero.hero-left .intro_box {
	margin-left: 0 !important;
}

.intro-hero--header {
	grid-row: 2;
	grid-column: 1;
	align-self: end;
}
.intro-hero--header > .row {
	height: 100%;
	align-content: center;
}
.intro-hero--headline {
	background-color:var(--bs-white);
	height: 30vh;
	/* padding-left: 0 !important; */
}
@media ( min-width: 1980px ) {
	.intro-hero--headline {
		height: 20vh;
	}
}

.hoppe-content-page .intro-hero--headline {
	height: inherit;
}
.intro-hero--header .h1,
.intro-hero--header h1 {
	margin:0;
	font-size: clamp(1.9em, 2.4vw, 2.4em);
	font-weight: 100;
	line-height: 1.5em;
}
.intro-hero--content {
	grid-row: 3/span 2;
	grid-column: 1;
}
#produktfinder .intro-hero--header h1 {
	line-height: 1.1em;
}

.intro-hero--content .brand-hoppe,
.intro-hero--content .brand-arrone {
	/* transition: none; */
	transition:width .5s ease-in-out;
}

.intro-hero--content .brand-switcher-wrapper {
	/*transition: 1s;*/
	overflow: hidden;
	--bs-gutter-x: calc(var(--hoppe-h-1) * 1);
}
.intro-hero--content .brand-switcher-wrapper .row {
	height:100%;
}

.intro-hero--image {
	grid-row: 1/span 3;
	grid-column: 1;
	margin: 0;
	height:100%;
	width: 100%;
	position:relative;
	z-index: -1;
    max-width: 1920px;
    margin: 0 auto;
    
    overflow: hidden;
}
.intro-hero--image::after {
	content:"";
	height:13rem;
	position:absolute;
	left:0;
	right:0;
	bottom:0;

	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#002e5b+0,002e5b+100&0+0,1+100 */
	background: -moz-linear-gradient(top,  rgba(var(--bs-dark-rgb),0) 0%, rgba(var(--bs-dark-rgb),.85) 100%);
	background: -webkit-linear-gradient(top,  rgba(var(--bs-dark-rgb),0) 0%,rgba(var(--bs-dark-rgb),.85) 100%);
	background: linear-gradient(to bottom,  rgba(var(--bs-dark-rgb),0) 0%,rgba(var(--bs-dark-rgb),.85) 100%);
}

.intro-hero--image .img-brand {
	opacity: 0;
	transition: opacity 1s;
}
.intro-hero--image .img-brand.img-brand-active {
	opacity: 1;
}

.hoppe-content-page .intro-hero--image::after {
	background: none;
}

.intro-hero--image img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	position:absolute;
	top:0;
	left:0;
    object-position: 79% 34%;
}
#produktfinder .intro-hero--image img {
	object-position: 60% 34%;
}
@media (max-width: 767px) {
	.intro-hero--image img {
		top:-76px;
	}
	#produktfinder .intro-hero--image img {
		top: -130px;
	}
}

/* CONTENT MASK NEU */
.intro-hero--image img {
	height: auto;
	object-fit: unset;
	top:auto;
    object-position: unset;

    position: absolute;
    width: 1920px;
    left: calc(50% - 960px);
}
main.hoppe-content-page .intro-hero--image img {
	height: auto;
	object-fit: unset;
	top:auto;
    object-position: unset;

    position: absolute;
    width: 1920px;
    left: calc(50% - 960px);
}
@media (max-width: 1699.98px) {
	.intro-hero--image img {
	    width: 1920px;
	    left: calc(50% - 960px);
	}
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 1640px;
	    left: calc(50% - 820px);
*/
	    width: 1760px;
	    left: calc(50% - 880px);
	}
}
@media (max-width: 1459.98px) {
	.intro-hero--image img {
	    width: 1920px;
	    left: calc(50% - 960px);
	    top: 36px;
	}
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 1340px;
	    left: calc(50% - 670px);
*/
	    width: 1430px;
	    left: calc(50% - 715px);
	    top: 36px;
	}
}
@media (max-width: 1199.98px) {
	.intro-hero--image img {
	    width: 1700px;
	    left: calc(50% - 865px);
	}
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 1120px;
	    left: calc(50% - 560px);
*/
	    width: 1210px;
	    left: calc(50% - 605px);
	}
}
@media (max-width: 991.98px) {
	.intro-hero--image img {
	    width: 1530px;
	    left: calc(50% - 850px);
	    top: -50px;
	}
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 840px;
	    left: calc(50% - 420px);
*/
	    width: 900px;
	    left: calc(50% - 450px);
	}
}
@media (max-width: 767.98px) {
	.intro-hero--image img {
	    width: 1350px;
	    left: calc(50% - 920px);
	    top: -70px;
	}
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 920px;
	    left: 0;
*/
	    width: 1020px;
	    left: 0;
	}
	main.hoppe-content-page .intro--hero.hero-left .intro-hero--image img {
	    width: 1020px;
	    left: auto;
	    right: calc(50% - 370px);
	}
}
@media (max-width: 594.98px) {
	.intro-hero--image img {
	    width: 1350px;
	    left: calc(50% - 920px);
	    top: -70px;
	}
	main.hoppe-content-page .intro--hero.hero-left .intro-hero--image img {
	    width: 1020px;
	    left: auto;
	    right: -85px;
	}
    /*
    #produktfinder .intro--hero.hero-left .intro-hero--image img {
        width: 1020px;
	    left: auto;
	    right: -85px;
    }
    */
}
@media (max-width: 439.98px) {
	.intro-hero--image img {
	    width: 1280px;
	    left: calc(50% - 870px);
	    top: -55px;
	}
    #produktfinder .intro-hero--image img {
        width: 1280px;
        left: calc(50% - 740px);
        top: -32px;
    }
	main.hoppe-content-page .intro-hero--image img {
/*
	    width: 920px;
	    left: -55px;
*/
		width: 860px;
    	left: -50px;
    	top: 50px;
  	}
	main.hoppe-content-page .intro--hero.hero-left .intro-hero--image img {
		width: 860px;
    	left: auto;
    	top: 50px;
    	right: -65px;
	}
    
}


@media (min-width: 1440px) and (max-width:1920px) {
    main.hoppe-content-page .intro-hero--image img {
        width: 1720px;
        left: calc(50% - 860px);
    }    
}


@media (min-width: 1920px) {
    main.hoppe-content-page .intro-hero--image img {
        width: 1920px;
        left: calc(50% - 960px);
    }
}



/* MOBILE FIXED HERO TP */

@media (max-width: 767.98px) {
    
    
    .main-content.hoppe-start-page.header-image .intro-hero--image img.img-brand-hoppe {
                transform: translate( 10px, -36px) scale(96%) !important;
    }

    .hoppe-content-page .cmain-header,
    body:not(.page-id-1423):not(.page-id-1425):not(.page-id-13262):not(.page-id-14176):not(.page-id-1640):not(.page-id-1642):not(.product-list) .topbar,
    .mobile-breadcrumb,
    .topbar.open-submenu {
        position: relative !important;
        top: 0 !important;
    }

    .intro-hero--content {
        align-self: auto !important;
    }

    .hoppe-content-page .mobile-breadcrumb {
        margin-top: 64px !important;
    }

    .intro--hero.without_header {
        display: flex;
        margin-top: 64px;
        flex-direction: column;
    }

    .main-header {
        1position: relative;
        1top: 0;
    }

    .hoppe-content-page .intro--hero.content-section {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    .hoppe-content-page .intro--hero.content-section figure {
        margin-bottom: 20px !important;
        transform: none !important;
    }

    .hoppe-content-page .intro--hero.content-section figure img {
        position: relative !important;
        transform: none !important;
        transform-origin: none !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        transform-origin: center left !important;
    }

    body:not(.page-id-5):not(.page-id-6):not(.page-id-15):not(.page-id-16):not(.page-id-17):not(.page-id-18):not(.page-id-56):not(.page-id-57):not(.page-id-61):not(.page-id-62):not(.page-id-66):not(.page-id-68):not(.page-id-79):not(.page-id-500):not(.page-id-575):not(.page-id-629):not(.page-id-910):not(.page-id-1222):not(.page-id-2015):not(.page-id-2017):not(.page-id-1357):not(.page-id-3371):not(.page-id-5307):not(.page-id-9345):not(.page-id-14489):not(.page-id-14491):not(.page-id-14493):not(.page-id-14759):not(.page-id-14890):not(.page-id-51243):not(.page-id-51245):not(.page-id-733096):not(.page-id-2271952) .hoppe-content-page .intro--hero.content-section figure img {
        transform: scale(1.25) !important;
    }

    .hoppe-content-page .intro--hero.content-section.product-right figure img {
        transform-origin: center right !important;
    }

    .mobile-breadcrumb {
        left: 0 !important;
    }

    .intro-hero--content .container.e-product-icon-right > .row:before,
    .intro-hero--content .container.e-product-icon-left > .row:before {
        top: -105px !important;
    }

}

/* MOBILE FIXED HERO TP */



/* / CONTENT MASK NEU */

.mobile-breadcrumb {
	max-width: 540px;
    margin: 0 auto;
    left: calc(50% - 270px);	
}
@media (max-width: 575.98px) {
	.mobile-breadcrumb {
	    width: auto;
	    max-width: none;
	    left: auto;
	}
}


.hoppe-content-page.intro-hero--image img {

    object-position: 75% 56%;
}

#produktfinder .intro--hero {
	/*grid-template-rows: var(--header-height) 32rem auto;*/
    grid-template-rows: var(--header-height) auto auto;
}

@media (max-width:1199.98px) {
	#produktfinder .intro--hero {
	    /* grid-template-rows: var(--header-height) 29rem auto; */
		grid-template-rows: calc(var(--header-height) - var(--hoppe-h-3)) auto auto; /* In diesem Bereich wird der Header um H-3 reduziert */
	}
}
@media (max-width:991.98px) {
	#produktfinder .intro--hero {
	    /* grid-template-rows: var(--header-height) 24rem auto; */
	    grid-template-rows: var(--header-height) auto auto;
	}
}
@media (max-width:767.98px) {
	#produktfinder .intro--hero {
	    /*grid-template-rows: var(--header-height) auto auto;*/
		/* grid-template-rows: calc(var(--header-height)/2) auto auto; */
	    grid-template-rows: var(--header-height) auto auto;
	}
}

#produktfinder .intro-hero--content {
	grid-row-end:span 1;
}
#produktfinder .intro-hero--image::after {
	content:normal;
}

.intro_box .brand-logo p {
	min-height:calc(2em * 1.5);
}

@media (max-width:575.98px) {
	#produktfinder .intro-hero--image {
		grid-row-end:span 2;
	}
	.intro_box .brand-logo p {
		font-size: 0.88rem !important;
	}
}

@media (max-width:767.98px) {
    main.hoppe-content-page .intro-hero--image {
    grid-row: 1/span 2;
}
	.intro-hero--header .h1,
	.intro-hero--header h1 {
		font-size:1rem;
	}
	h2.h1.fw-bold {
		font-size: 1.5rem;
	}
	.hoppe-content-page .intro-hero--image img {
		object-position: 8% 0%;
        height: 66%;
        top: 116px;
	}
	.intro-hero--headline {
		height: auto;
	}

	.intro_box .brand-logo {
		/*
		width: calc(100% - var(--hoppe-h-3));
		display: flex;
		align-items: flex-start;
		*/
	}
    .intro-hero--content .inner .row .brand-logo {
        display: flex;
        flex-direction: column;
    }
    .intro-hero--content .inner .row .brand-logo p {
        flex: 1;
    }
    .intro-hero--content .brand-hoppe .brand-logo a, .intro-hero--content .brand-arrone .brand-logo a {
    font-size: 0.88rem !important;
    }
	.intro-hero--content .brand-switcher-wrapper {
	    --bs-gutter-x: calc(var(--hoppe-h-2) * 1);
	}

   	.brand-switcher-wrapper .intro_box .inner {
		border-bottom: 0.375rem solid transparent;
    	padding-bottom: calc(var(--hoppe-h-2) - 0.375rem)!important;
	}
	.brand-switcher-wrapper .intro_box.active .inner {
		border-bottom-color: var(--hg-button-color);
	}

	.brand-hoppe img,
	.brand-arrone img{
		/* max-width:110px; */
		opacity:1;
	}
	.intro_box .brand-logo p {
		/*
		margin-top: -0.4em;
		padding:0 var(--hoppe-h-3) !important;
		*/
		padding: var(--hoppe-h-1) 0 0 0 !important;
	}
	.intro_box .brand-content {
		order:3;
		transition: max-height .5s linear !important;
	}
	.intro-hero--content .brand-hoppe,
	.intro-hero--content .brand-arrone {
		max-height:none !important;
	}

	.intro-hero--content .brand-hoppe:not(.active) .row,
	.intro-hero--content .brand-arrone:not(.active) .row {
		opacity:.59;
	}
	.intro-hero--content .brand-hoppe .brand-logo a,
	.intro-hero--content .brand-arrone .brand-logo a {
		color:var(--hg-link-color);
		text-decoration:none;
	}

	.intro-hero--content .brand-hoppe .bi-chevron-right::before,
	.intro-hero--content .brand-arrone .bi-chevron-left::before {
		content: "\f282";
	}

	.intro-hero--content .brand-hoppe .bi-chevron-right,
	.intro-hero--content .brand-arrone .bi-chevron-left {
		transition:transform .3s linear;
	}
	.intro-hero--content .brand-hoppe.active .bi-chevron-right,
	.intro-hero--content .brand-arrone.active .bi-chevron-left {
		transform: rotate(-180deg);
	}

	.intro-hero--content .brand-hoppe .row,
	.intro-hero--content .brand-arrone .row {
		flex-wrap:wrap !important;
	}
	.brand-content {
		flex: 1 0 100%;
	}
	.brand-content + .col {
		position:static !important;
		/* opacity:1 !important; */
		opacity:0 !important;
		align-items: center;
		justify-content: flex-end;
	}
	.brand-hoppe:not(.active) .brand-content,
	.brand-arrone:not(.active) .brand-content {
		max-height:0 !important;
		height:auto;
	}

	.brand-hoppe.active .brand-content,
	.brand-arrone.active .brand-content {
		opacity: 1;
		max-height:max-content;
		height:auto;
	}
	.brand-hoppe .brand-content p:first-child,
	.brand-arrone .brand-content p:first-child {
		padding-top:var(--hoppe-h-3);
	}



}

@media (min-width:768px) {
	.intro-hero--header {
		align-self:center;
	}
	.intro-hero--headline {
		background-color:transparent;
	}

	.intro-hero--content .brand-hoppe .brand-logo,
	.intro-hero--content .brand-arrone .brand-logo {
		transition:border-color .5s ease-in-out;
	}
	.intro-hero--content .brand-hoppe .brand-logo {
		border-right:1px solid var(--bs-white);
	}
	.intro-hero--content .brand-arrone .brand-logo {
		border-left:1px solid var(--bs-white);
	}

	.intro-hero--content .active .brand-logo {
		border-color:var(--bs-gray-600);
	}
}

/* moved from /page_without_header.php */
.intro--hero.without_header { 
	background-image:none; 
	/* grid-template-rows: var(--header-height) 3rem auto auto;  */
	grid-template-rows: var(--header-height) auto auto;
}

@media (min-width:992px) {
	.intro--hero.without_header {
   		/* grid-template-rows: calc(var(--header-height)/1.3) 3rem auto auto; */
   		grid-template-rows: calc(var(--header-height)/1.3) auto auto;
	}
}

/*
@media (min-width:1201px) {
	.intro--hero.without_header {
    	grid-template-rows: var(--header-height) auto auto;
	}
	body .header-permanent-small-header ~ .main-content .intro--hero.without_header {
    	grid-template-rows: calc(var(--header-height)/1.3) auto auto;
	}
}
*/

@media (min-width:1460px) {
	.intro--hero.without_header {
    	/* grid-template-rows: var(--header-height) 3rem auto auto; */
    	grid-template-rows: var(--header-height) auto auto;
	}
	body .header-permanent-small-header ~ .main-content .intro--hero.without_header {
    	grid-template-rows: calc(var(--header-height)/1.3) auto auto;
	}
}

.hg--breadcrumb.without_header { 
	margin: 16px 0 !important; 
}


.intro-hero--content .alignnoneaa {
  margin-bottom: 20px;
}