@charset "utf-8";
/* CSS Document */

/* ==========================================================
   STARTSEITE
   HERO / HIGHLIGHTS / BEFORE AFTER
==========================================================*/

/* ---------- Allgemein ---------- */

.awi-highlights,
.awi-before-after{
    padding:110px 0;
    background:#ffffff;
}

.section-subtitle{
    display:inline-block;
    margin-bottom:18px;
    color:#c30010;
    font-size:.90rem;
    font-weight:700;
    letter-spacing:3px;
    text-transform:uppercase;
}

.section-title{
    margin-bottom:30px;
    color:#222;
    font-size:2.6rem;
    font-weight:800;
    line-height:1.2;
}

.section-text{
    max-width:760px;
    margin:0 auto;
    color:#666;
    font-size:1.15rem;
    line-height:1.9;
}

/* ==========================================================
   HERO
==========================================================*/

.hero{
    position:relative;
    display:flex;
    align-items:center;
    min-height:100vh;
    overflow:hidden;
    color:#fff;
}

.hero-image{
    position:absolute;
    inset:0;
    background:url("../images/hero-startseite.jpg")
               center center/cover no-repeat;
    transform:scale(1.05);
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.55) 45%,
        rgba(0,0,0,.25) 100%);
}

.hero .container{
    position:relative;
    z-index:2;
}

.hero-content{
    max-width:700px;
}

.hero-subtitle{
    display:block;
    margin-bottom:20px;
    color:#ffffff;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:4px;
}

.hero h1{
    margin-bottom:30px;
    font-size:4.2rem;
    font-weight:800;
    line-height:1.1;
}

.hero p{
    margin-bottom:45px;
    font-size:1.25rem;
    line-height:1.8;
    color:#f5f5f5;
}
/*.hero-title-red{
    color:#c30010;
    text-shadow:
        0 0 6px rgba(255,255,255,.75),
        0 0 14px rgba(255,255,255,.45),
        0 0 24px rgba(255,255,255,.20);
}*/
.hero-title-red{
    color:#c30010;
    text-shadow:
        -1px -1px 0 rgba(255,255,255,.65),
         1px -1px 0 rgba(255,255,255,.65),
        -1px  1px 0 rgba(255,255,255,.65),
         1px  1px 0 rgba(255,255,255,.65);
}
/* ==========================================================
   BUTTONS
==========================================================*/

.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

.btn-primary-custom{

    display:inline-block;

    padding:16px 38px;

    background:#c30010;

    color:#fff;

    border-radius:40px;

    font-weight:700;

    transition:.35s;

    text-decoration:none;
}

.btn-primary-custom:hover{

    background:#99000d;

    color:#fff;

    text-decoration:none;

    transform:translateY(-3px);
	
	box-shadow:0 12px 30px rgba(195,0,16,.35);

}

.btn-secondary-custom{

    display:inline-block;

    padding:16px 38px;

    border:2px solid #ffffff;

    color:#ffffff;

    border-radius:40px;

    transition:.35s;

    font-weight:700;

    text-decoration:none;

}

.btn-secondary-custom:hover{

    background:#fff;

    color:#222;

    text-decoration:none;
	
	box-shadow:0 12px 30px rgba(255,255,255,.18);

}

/* ==========================================================
   SCROLL BUTTON
==========================================================*/

.scroll-down{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:42px;

    height:70px;

    border:2px solid #fff;

    border-radius:30px;

}

.scroll-down span{

    position:absolute;

    left:50%;

    top:12px;

    width:6px;

    height:12px;

    margin-left:-3px;

    background:#fff;

    border-radius:3px;

    animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

    0%{

        opacity:0;

        transform:translateY(0);

    }

    40%{

        opacity:1;

    }

    100%{

        opacity:0;

        transform:translateY(28px);

    }

}

/* ==========================================================
   PREMIUM HIGHLIGHTS
==========================================================*/

.highlight-card{

    height:100%;

    padding:45px 35px;

    background:#fff;

    border-radius:18px;

    box-shadow:0 10px 35px rgba(0,0,0,.08);

    transition:.35s;

    text-align:center;

}

.highlight-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(0,0,0,.14);

}

.highlight-icon{

    width:82px;

    height:82px;

    margin:0 auto 30px;

    border-radius:50%;

    background:linear-gradient(135deg,#c30010,#e33a3a);

    color:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    box-shadow:0 12px 28px rgba(195,0,16,.25);

    transition:all .35s ease;

}
.highlight-card:hover .highlight-icon{

    transform:rotate(-8deg) scale(1.08);

    box-shadow:0 20px 40px rgba(195,0,16,.35);

}

.highlight-card h3{

    margin-bottom:20px;

    font-size:1.45rem;

    font-weight:700;

    color:#1f1f1f;

}

.highlight-card p{

    margin-bottom:25px;

    color:#666;

    line-height:1.8;

}

.highlight-card a{

    display:inline-flex;

    align-items:center;

    font-weight:700;

    color:#c30010;

    text-decoration:none;

    transition:.30s;

}
.highlight-card a::after{

    content:"→";

    margin-left:10px;

    transition:.30s;

}

.highlight-card:hover a::after{

    margin-left:18px;

}

.highlight-card a:hover{

    color:#222;

}

/* ==========================================================
   BEFORE / AFTER
==========================================================*/

.awi-before-after{

    background:#f8f8f8;

}

.comparison-card{

    overflow:hidden;

    background:#fff;

    border-radius:18px;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.comparison-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 50px rgba(0,0,0,.14);

}

.comparison-image{

    position:relative;

    overflow:hidden;

}

.comparison-image img{

    width:100%;

    display:block;

    transition:
        transform .8s ease,
        filter .5s ease;

}

.comparison-card:hover img{

    transform:scale(1.06);

    filter:brightness(1.03);

}

.comparison-label{

    position:absolute;

    left:25px;

    bottom:25px;

    padding:11px 22px;

    color:#fff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    border-radius:40px;

    backdrop-filter:blur(6px);

    text-transform:uppercase;

}

.before{

    background:#666;

}

.after{

    background:#c30010;

}

.comparison-content{

    padding:40px;

}

.comparison-content h3{

    margin-bottom:20px;

    color:#1f1f1f;

    font-size:1.7rem;

    font-weight:800;

    line-height:1.3;

}

.comparison-content p{

    color:#666;

    line-height:1.9;

}

.comparison-text{

    margin-bottom:40px;

    color:#555;

    font-size:1.2rem;

    line-height:1.9;

}

/* ==========================================================
   RESPONSIVE
==========================================================*/

@media (max-width:991px){

.hero{

    min-height:850px;

}

.hero h1{

    font-size:3rem;

}

.section-title{

    font-size:2.1rem;

}

}

@media (max-width:767px){

.awi-highlights,
.awi-before-after{

    padding:70px 0;

}

.hero{

    min-height:760px;

}

.hero h1{

    font-size:2.3rem;

}

.hero p{

    font-size:1.05rem;

}

.hero-buttons{

    flex-direction:column;

}

.btn-primary-custom,
.btn-secondary-custom{

    width:100%;

    text-align:center;

}

.section-title{

    font-size:1.8rem;

}

.section-text{

    font-size:1rem;

}

.highlight-card{

    padding:35px 25px;

}

.comparison-content{

    padding:25px;

}

}

/* ==========================================================
   PREMIUM HIGHLIGHTS
========================================================== */

.highlight-card{

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}

.highlight-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.comparison-line{

    width:70px;

    height:4px;

    background:#c30010;

    border-radius:10px;

    margin-bottom:22px;

}
/* ==========================================================
   CTA
========================================================== */

.cta-section{

    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:

        url("../images/index/cta-bg.jpg")

        center center

        no-repeat;

    background-size:cover;

}

.cta-overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.60);

}

.cta-section .container{

    position:relative;

    z-index:2;

}

.cta-subtitle{

    display:block;

    margin-bottom:18px;

    color:#ffffff;

    letter-spacing:4px;

    font-size:.90rem;

    font-weight:700;

    text-transform:uppercase;

}

.cta-section h2{

    color:#ffffff;

    font-size:3rem;

    font-weight:800;

    margin-bottom:28px;

}

.cta-section p{

    color:rgba(255,255,255,.92);

    font-size:1.15rem;

    line-height:1.9;

    max-width:960px;

    margin:0 auto 45px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}