/* Urlaubsparker 2026 Startseite
   Nur startseitenspezifische Bereiche. Navigation und Footer liegen in layout.css
*/

.hero{
    background:
        linear-gradient(90deg,rgba(20,32,51,.78),rgba(20,32,51,.36)),
        url("https://www.urlaubsparker.de/parken-flughafen-stuttgart/wp-content/uploads/bg001.jpg") center center/cover no-repeat;
    color:#fff;
    padding:86px 0 78px;
}

.hero h1{
    font-size:clamp(3rem,6vw,5.8rem);
    line-height:.94;
    font-weight:300;
    letter-spacing:-.055em;
    margin-bottom:1.2rem;
}

.hero h1 strong{
    display:block;
    font-weight:950;
}

.hero-copy{
    max-width:680px;
    font-size:1.22rem;
    color:rgba(255,255,255,.94);
}

.trust-badges{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
    margin-top:1.5rem;
}

.trust-badges span{
    border:1px solid rgba(255,255,255,.28);
    background:rgba(255,255,255,.12);
    padding:.6rem .85rem;
    font-weight:850;
    font-size:.95rem;
}

#buchung{
    scroll-margin-top:120px;
}

.search-box{
    background:#fff;
    color:var(--dark);
    padding:30px;
    box-shadow:0 22px 55px rgba(0,0,0,.20);
}

.search-box h2{
    font-size:1.65rem;
    font-weight:950;
    letter-spacing:-.025em;
}

.form-control,
.form-select{
    border-radius:0;
    min-height:50px;
}

.form-label{
    font-size:.88rem;
    color:#374151;
    font-weight:850;
}

.form-hint{
    display:block;
    color:#5f6b7a;
    margin-top:.25rem;
    font-size:.78rem;
}

.section{
    padding:78px 0;
}

.section-light{
    background:var(--light);
}

.section-title{
    font-size:clamp(2.25rem,4vw,4.2rem);
    line-height:1.05;
    font-weight:950;
    letter-spacing:-.045em;
    margin-bottom:1rem;
}

.lead-copy{
    color:#4b5563;
    font-size:1.1rem;
    max-width:930px;
}

.kicker{
    display:inline-block;
    background:#e7f1fb;
    color:#006fb6;
    font-weight:900;
    padding:7px 14px;
    border-radius:999px;
    text-transform:uppercase;
    font-size:.82rem;
    margin-bottom:18px;
}

.feature-card{
    background:#fff;
    border:1px solid var(--border);
    padding:28px;
    height:100%;
    box-shadow:0 14px 32px rgba(20,32,51,.06);
}

.feature-icon{
    width:58px;
    height:58px;
    border-radius:50%;
    background:#e7f1fb;
    color:var(--blue);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.6rem;
    font-weight:950;
    margin-bottom:16px;
}

.feature-card h3{
    font-size:1.25rem;
    font-weight:950;
}

.parking-card{
    background:#e8edf2;
    height:100%;
    padding:18px;
    box-shadow:0 18px 40px rgba(20,32,51,.08);
}

.parking-card h3{
    font-size:2rem;
    line-height:1.05;
    font-weight:950;
    margin-bottom:14px;
}

.parking-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    margin-bottom:18px;
}

.price-line{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    border-bottom:1px dotted #9aa4af;
    padding-bottom:.75rem;
    margin-bottom:1.1rem;
}

.price-line strong{
    font-size:2.25rem;
    line-height:1;
    color:var(--blue);
    font-weight:950;
}

.parking-card ul{
    margin:1.25rem 0 0;
    padding-left:1.25rem;
    color:#374151;
}

.valet-card{
    background:#fff;
    border-radius:24px;
    padding:46px;
    box-shadow:0 22px 58px rgba(20,32,51,.10);
}

.valet-image{
    width:100%;
    height:auto;
    border-radius:18px;
    box-shadow:0 12px 30px rgba(20,32,51,.14);
}

.valet-benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:34px;
}

.valet-benefits div{
    text-align:center;
}

.valet-benefits span{
    display:inline-flex;
    width:56px;
    height:56px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#e7f1fb;
    color:var(--blue);
    font-weight:950;
    font-size:1.35rem;
    margin-bottom:10px;
}

.valet-benefits strong,
.valet-benefits small{
    display:block;
}

.valet-benefits strong{
    font-weight:900;
    color:var(--dark);
}

.valet-benefits small{
    color:var(--muted);
    font-size:.88rem;
}

.valet-steps{
    margin-top:44px;
    background:#f6f9fc;
    border-radius:18px;
    padding:40px;
}

.valet-steps h3{
    text-align:center;
    font-weight:950;
    color:var(--dark);
    margin-bottom:36px;
    font-size:2rem;
    letter-spacing:-.025em;
}

.step{
    text-align:center;
    padding:10px 18px;
}

.step-number{
    display:inline-flex;
    width:30px;
    height:30px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--blue);
    color:#fff;
    font-weight:950;
    margin-bottom:8px;
}

.step-icon{
    font-size:2.8rem;
    line-height:1;
    margin-bottom:16px;
}

.step h4{
    font-weight:950;
    color:var(--dark);
    font-size:1.15rem;
}

.step p{
    color:#4b5563;
    margin:0;
}

.content-panel{
    background:#fff;
    border-radius:22px;
    padding:44px;
    box-shadow:0 18px 45px rgba(20,32,51,.08);
}

.content-panel img{
    width:100%;
    border-radius:16px;
    box-shadow:0 10px 28px rgba(20,32,51,.12);
}

.review-card{
    background:#fff;
    border:1px solid var(--border);
    padding:1.4rem;
    height:100%;
    box-shadow:0 12px 28px rgba(20,32,51,.05);
}

.stars{
    color:#d99800;
    letter-spacing:.08em;
    font-size:1.08rem;
}

.faq-item{
    border-bottom:1px solid var(--border);
    padding:1.2rem 0;
}

.faq-item h3{
    font-size:1.15rem;
    font-weight:950;
}

.cta{
    background:var(--dark);
    color:#fff;
}

.cta .lead-copy{
    color:rgba(255,255,255,.82);
}

@media(max-width:991.98px){
    .hero{
        padding:52px 0 42px;
    }

    .search-box{
        margin-top:18px;
    }

    .valet-card,
    .content-panel{
        padding:30px;
    }

    .valet-benefits{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:575.98px){
    .hero{
        padding:36px 0 32px;
    }

    .hero h1{
        font-size:2.65rem;
    }

    .hero-copy{
        font-size:1.05rem;
    }

    .trust-badges span{
        font-size:.9rem;
        padding:.52rem .72rem;
    }

    .section{
        padding:48px 0;
    }

    .search-box{
        padding:20px;
    }

    .parking-card img{
        height:180px;
    }

    .valet-card,
    .content-panel{
        padding:22px;
        border-radius:16px;
    }

    .valet-benefits{
        grid-template-columns:1fr;
    }

    .valet-steps{
        padding:24px;
    }
}