/**
 * ADDACTA Hero
 * Version 1.0
 */

/* ==========================================================
   Hero
========================================================== */

.addacta-hero {
    --hero-height: 600px;
    --hero-mobile-height: 450px;

    --content-width: 700px;

    --overlay-color: #000000;
    --overlay-opacity: .45;

    position: relative;

    width:100vw;

    margin-left:calc(50% - 50vw);

    height: var(--hero-height);

    overflow: hidden;

    background: #fff

}

.addacta-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: url("../images/penumbra_abrisskante.png") repeat-x center bottom;
    background-size: auto 100%;
    pointer-events: none;
    z-index: 10;
}


.addacta-hero *,
.addacta-hero *::before,
.addacta-hero *::after {

    box-sizing: border-box;

}


/* ==========================================================
   Slider
========================================================== */

.addacta-hero-slider {

    position: relative;

    width: 100%;

    height: 100%;

}

.addacta-slide {
    position: absolute;
    inset: 0;
    display: flex;	
    align-items: flex-end;
	padding-bottom: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .7s ease;
	z-index:1;
}

.addacta-slide.is-active {
    opacity:1;
    pointer-events:auto;
    z-index:2;	
}


/* ==========================================================
   Background
========================================================== */

.addacta-slide-background {

    position: absolute;

    inset: 0;

    z-index: 1;

}

.addacta-slide-image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    user-select: none;

    -webkit-user-drag: none;

}


/* ==========================================================
   Overlay
========================================================== */

.addacta-slide-overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

	/*
    background: var(--overlay-color);
    opacity: var(--overlay-opacity);
	*/

}


/* ==========================================================
   Container
========================================================== */

.addacta-container {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1400px;

    margin: 0 auto;

    padding: 0 40px;

}

.addacta-content {

    /*width: 100%;*/
    /*max-width: var(--content-width);*/
    max-width: 400px;
    padding: 40px 25px 60px;
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    box-shadow: 0 15px 40px rgba(0,0,0,.18);	
}


/* ==========================================================
   Content Position
========================================================== */

.addacta-hero.content-left .addacta-container {

    display: flex;

    justify-content: flex-start;

}

.addacta-hero.content-center .addacta-container {

    display: flex;

    justify-content: center;

}

.addacta-hero.content-right .addacta-container {

    display: flex;

    justify-content: flex-end;

}


/* ==========================================================
   Text Alignment
========================================================== */

.addacta-hero.text-left {

    text-align: left;

}

.addacta-hero.text-center {

    text-align: center;

}

.addacta-hero.text-right {

    text-align: right;

}


/* ==========================================================
   Headline
========================================================== */

.addacta-hero-title {
    font-family: "Times New Roman","Times","serif" !important;
    font-size: 1.7rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 15px;
    position: relative;
    line-height: unset;
}

.addacta-hero-title::after {
    content: "";
    display: block;
    width: 90px;
    height: 3px;
    margin-top: 18px;
    background: #ac1313;
    border-radius: 2px;
}

/* ==========================================================
   Text
========================================================== */

.addacta-hero-text {
    margin-bottom: 35px;
	margin-top:25px;
    color: #111;
    /*font-size: clamp(1rem, 1.3vw, 1.3rem);  */
    line-height: 1.6;
	font-size:16px;

}

.addacta-hero-text p {

    margin: 0 0 18px;

}

.addacta-hero-text p:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   Button
========================================================== */

.addacta-hero-button-wrapper {

    margin-top: 25px;

}

.addacta-hero-button {
    display: block;
	text-transform:uppercase;
	text-align:center;
    padding: 8px;
    border-radius: 6px;
    background: #ac1313;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}

.addacta-hero-button:hover {
    background-color: #231f20;
	color:#fff !important;
}

.addacta-hero-button:focus-visible {

    outline: 3px solid #ffffff;

    outline-offset: 4px;

}


/* ==========================================================
   Responsive
========================================================== */

@media (max-width: 992px) {

    .addacta-hero {

        height: var(--hero-mobile-height);

    }

    .addacta-container {

        padding: 0 30px;

    }

    .addacta-content {

        max-width: 100%;

    }

}

@media (max-width: 768px) {

    .addacta-container {

        padding: 0 24px;

    }

    .addacta-hero-button {

        width: 100%;

    }

}

@media (max-width: 576px) {

    .addacta-container {

        padding: 0 20px;

    }

}


/* ==========================================================
   Animation
========================================================== */

.addacta-content {

    animation: addactaHeroContent .8s ease;

}

@keyframes addactaHeroContent {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* ==========================================================
   Performance
========================================================== */

.addacta-slide,
.addacta-slide-image,
.addacta-content {

    backface-visibility: hidden;

    transform: translateZ(0);

}


/* ==========================================================
   Reduced Motion
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .addacta-slide,
    .addacta-content,
    .addacta-hero-button {

        animation: none !important;

        transition: none !important;

    }

}