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

.hero{
  position: relative;
    margin-bottom: 0;
    width:100%;
    height:490px;

    display:grid;

    grid-template-columns:52% 48%;

    align-items:center;

  padding:20px 90px 20px;

    position:relative;

    overflow:hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background:
linear-gradient(
90deg,
rgba(255,255,255,1) 0%,
rgba(255,255,255,.96) 0%,
rgba(255,255,255,.60) 0%,
rgba(255,255,255,.10) 0%,
rgba(255,255,255,0) 0%
),
url("../images/hero-background.png");

background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
/*
.hero::before{

    content:"";

    position:absolute;

    top:-180px;
    right:-220px;

    width:850px;
    height:850px;

    background:#FDEEF4;

    border-radius:50%;

    z-index:0;

}
*/
/*
.hero::after{

    content:"";

    position:absolute;

    bottom:-260px;
    left:-180px;

    width:700px;
    height:700px;

    background:#FFF6F9;

    border-radius:50%;

    z-index:0;

}
*/
.hero-left{

    position:relative;

    z-index:2;

}

.hero-logo{

    width:520px;

    position:relative;

    top:-50px;

    left:200px;

    display:block;

    margin-bottom:25px;
    filter: drop-shadow(0 0 35px rgba(255,255,255,.9));
}
.hero-left h1{

    font-size:20px;

    letter-spacing:2px;

    font-weight:500;

    margin-bottom:18px;

}

.hero-left h2{

    font-size:58px;

    line-height:1.1;

    margin-bottom:28px;

}

.hero-text{

    font-size:14px;
    line-height:1.9;
    width:400px;

    position:absolute;

    top:200px;
    left:390px;

    text-align:center;

}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:40px;
}

.button-outline{

    font-size:17px;
    
    padding:18px 34px;

    border:2px solid #eb557d;

    border-radius:12px;

    color:#eb557d;

    font-weight:600;

    transition:.3s;

}

.button-outline:hover{

    background:var(--rosa);

    color:white;

}

.hero-right{

    flex:1;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:translateY(-50px);

    background:none;

}

.portrait{
    width: 375px;
    max-width: 100%;
    display: block;
    position: absolute;
    top: -215px;
    right: -90px;
    filter: drop-shadow(0 0 35px rgba(255,255,255,.9));
}

.info-card{

    position:absolute;

    bottom:-270px;

    left:300px;

    width:300px;

    background:#ffffff;

    border-radius:10px;

    padding:5px;

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

    z-index:5;

}

.info-card h3{

    font-size:16px;

    margin-bottom:10px;

    color:#eb577d;

}

.info-card p{

    font-size:12px;

    line-height:1.8;

    color:#555;

}
.hero-wave {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 1;

    pointer-events: none;
}

.hero-wave img{
    display: block;
    width: 60%;
    height: auto;

    -webkit-mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            black 25%),
        linear-gradient(to left,
            transparent 0%,
            black 20%);

    -webkit-mask-composite: intersect;
    mask-composite: intersect;

    mask-image:
        linear-gradient(to bottom,
            transparent 0%,
            black 25%),
        linear-gradient(to left,
            transparent 0%,
            black 20%);
}
.language-switch{
    position: absolute;
    top: 30px;
    right: 20px;

    display: flex;
    align-items: center;
    gap: 5px;

    font-family: "Calibri";
    font-size: 15px;
    font-weight: 500;
    z-index: 1000;
}

.language-switch a{
    color: #b1abae;
    text-decoration: none;
    transition: .3s;
}

.language-switch a:hover{
    color: #D96A97;
}

.language-switch a.active{
    color: #D96A97;
    font-weight: 700;
}

.language-switch span{
    color: #C9B3BE;
}

/* ==========================
   Kennenlernaktion
========================== */
.hero-aktionen {
    position: absolute;

    left: 10px;
    top: 105px;

    width: 270px;

    display: flex;
    flex-direction: column;
    gap: 15px;

    z-index: 20;
}


.hero-aktion {

    position: relative;

    width: 100%;
    box-sizing: border-box;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(6px);

    padding: 20px;

    border-top: 6px solid #eb557d;
    border-radius: 20px;

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

}

.aktion-icon{

    font-size:70spx;

    margin-bottom:10px;

}

.hero-aktion h3{

    font-size:15px;       /* statt 22px */

    margin-bottom:12px;

}

.hero-aktion p{

    font-size:11px;       /* statt 15px */

    line-height:1.6;

    margin-bottom:12px;

}
.aktion-titel {
    display: block;
    font-size: 13px;
    line-height: 1.5;
    color: #911e64;
}
.hero-aktion strong{

    color:#911e64;

}
.aktion-telefon{

    color:#911e64;

    font-size:20px;

    font-weight:900;

    text-decoration:none;

}

.aktion-telefon:hover{

    color:#eb557d;

}

.aktion-telefon:hover{

    background:#d55b86;

    transform:translateY(-2px);

}
.hero-motto{

    width:700px;

    white-space:nowrap;

    font-family:"Freestyle Script", cursive;

    font-size:50px;

    font-weight:normal;

    color:#4a4a4a;

    text-shadow:0 0 12px rgba(255,255,255,.6);

    position:absolute;

    top:150px;
    left:425px;

}
.hero-motto span {
    color: #EB557D;
}
.hero-values{

    width:700px;

    white-space:nowrap;

    font-family:"Poppins", sans-serif;

    font-size:12px;

    font-weight:500;

    letter-spacing:1.5px;

    color:#eb557d;

    position:absolute;

    top:285px;
    left:455px;

}
.why-wundpal-title {
    position: absolute;

    bottom: 75px;
    left: 54%;
    transform: translateX(-50%);

    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 30px;
    font-weight: 600;

    color: #4a4a4a;

    white-space: nowrap;

    z-index: 10;
}
.why-wundpal-button {
    position: absolute;
    bottom: 30px;
    left: 54%;
    transform: translateX(-50%);

    background: transparent;
    color: #4a4a4a;

    border: none;
    border-radius: 0;

    padding: 4px 8px 6px;

    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
    z-index: 10;
}
/* ==========================
   WARUM WUNDPAL
========================== */

.warum-wundpal {
    width: 100%;
    padding: 25px 30px 70px;
    text-align: center;
    background: #ffffff;
    box-sizing: border-box;
}

/* Überschrift */

.warum-wundpal h2 {
    margin: 0 0 65px;

    font-family: "Poppins", sans-serif;
    font-size: 40px;
    font-weight: 600;

    color: #4a4a4a;

    text-align: center;
}


/* Drei Punkte */

.warum-wundpal-grid {
    max-width: 1100px;
    margin: -50px auto 0;

    display: flex;
    flex-direction: column;

    gap: 18px;
}


/* Einzelner Punkt */

.warum-card {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 0;

    text-align: center;
}


/* Nummern entfernen */

.warum-number {
    display: none;
}


/* Überschrift des Punktes */

.warum-card h3 {
    margin: 0 0 8px;

    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;

    color: #4a4a4a;

    text-align: center;
}


/* Erklärung */

.warum-card p {
    max-width: 1000px;
    margin: 0 auto;

    font-family: "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 400;

    line-height: 1.6;

    color: #4a4a4a;

    text-align: center;
}