:root{
    --green-main:#3f6f4a;
    --green-soft:#eaf3ea;
    --cream:#f7f5f1;
    --accent:#b8cbb8;
}

/* ===== HOCHZEITS-BANNER ===== */
.banner-hochzeit{
    max-width: 1381px;
    margin:0 auto;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius:38px;
    overflow:hidden;
    position:relative;
    background:
        linear-gradient(135deg, rgba(255,255,255,.88), rgba(234,243,234,.92)),
        url("DEIN-BILD-HIER.jpg"); /* ← Bild austauschen */
    background-size:cover;
    background-position:center;
    box-shadow:0 22px 55px rgba(80,120,95,.22);
    display: flex;
    justify-content: space-between;
}

/* sanfte Lichtstruktur (keine Bewegung → kein Ruckeln) */
.banner-hochzeit::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,.45), transparent 60%),
        radial-gradient(500px 260px at 80% 80%, rgba(255,255,255,.35), transparent 65%);
    pointer-events:none;
}

/* ===== CONTENT ===== */
.banner-hochzeit .content-banner{
    position:relative;
    padding:90px 80px;
    max-width:620px;
}

.banner-hochzeit h2{
    margin:0 0 18px;
    font-size:48px;
    font-weight:900;
    letter-spacing:-0.6px;
    color: #006818;
}

.banner-hochzeit p{
    margin:0 0 36px;
    font-size:20px;
    line-height:1.6;
    color:#4a6b52;
}

/* ===== LISTE ===== */
.banner-hochzeit ul{
    list-style:none;
    padding:0;
    margin:0 0 42px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 26px;
}

.banner-hochzeit li{
    font-size:17px;
    color:#355e3b;
    padding-left:22px;
    position:relative;
}

.banner-hochzeit li::before{
    content:"✿";
    position:absolute;
    left:0;
    color:#7cab7c;
}

/* ===== BUTTON ===== */
.banner-hochzeit a{
    display:inline-block;
    padding:16px 42px;
    border-radius:999px;
    background:linear-gradient(135deg, #7fbf7a, #5f9f67);
    color:#ffffff;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 12px 28px rgba(95,159,103,.35);
}
.image-box-banner-1{
    margin: 50px;
    position:relative;
    z-index:2;
    width:70%;
    aspect-ratio:4/3;
    border-radius:28px;
    background:linear-gradient(145deg, #e7eee8, #f4f7f4);
    box-shadow:var(--shadow-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7a8a7f;
    font-size:14px;
    font-style:italic;
}
.image-box-banner-1 img {
    width: 95%;
    height: 95%;
    object-fit: cover;
    display: block;
}
/* ===== RESPONSIVE ===== */
@media(max-width:900px){
    .banner-hochzeit .content-banner{
        padding:70px 40px;
    }

    .banner-hochzeit h2{
        font-size:36px;
    }

    .banner-hochzeit p{
        font-size:17px;
    }

    .banner-hochzeit ul{
        grid-template-columns:1fr;
    }
}

@media(max-width:500px){

    .banner-hochzeit{
        border-radius:26px;
    }

    .banner-hochzeit .content-banner{
        padding:50px 26px;
    }
}
/* ===== SLIDER ===== */
/* ===== SLIDER (DRAG & SLIDE) ===== */
.slider{
    overflow:hidden;
    touch-action:pan-y;
}

.slider .slides{
    display:flex;
    height:100%;
    transition:transform .45s cubic-bezier(.22,.61,.36,1);
}

.slider.dragging .slides{
    transition:none;
}

.slider .slides img{
    min-width:100%;
    height:100%;
    object-fit:cover;
    border-radius:28px;
    user-select:none;
    pointer-events:none;
}

/* DOTS bleiben gleich */

/* ===== DOTS ===== */
.slider-dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:3;
}

.slider-dots span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:rgba(255,255,255,.5);
    cursor:pointer;
    transition:all .3s ease;
}

.slider-dots span.active{
    background:#ffffff;
    transform:scale(1.3);
}