/* ========== VARIABLES ========== */

:root {

    --background:#11100f;
    --text:#cac0b2;
    --accent:#d96b93;
    --muted:#9b948d;
    --line:rgba(238,232,223,.12);

    --magic-pink:#f4d8e4;
    --soft-pink:rgba(217,107,147,.25);

}


/* ========== RESET ========== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    overflow-x:hidden;

    background:var(--background);
    color:var(--text);

    font-family:"Inter",sans-serif;
    font-size:17px;
    line-height:1.7;

}


/* ========== TYPOGRAPHY ========== */

h1,
h2,
h3{

    font-family:"Cormorant Garamond",serif;
    font-weight:400;
    color:var(--text);

}


p{

    font-size:16px;
    line-height:1.7;

}

/* ========== HEADER ========== */

header{
    position:relative;
    text-align:center;
    padding:70px 20px 60px;
    background:rgba(17,16,15,.45);
    backdrop-filter:blur(12px);
}

header::before{
    content:"";
    position:absolute;
    bottom:25px;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,#292522 20%,#292522 80%,transparent);
}

header::after{
    content:"✦  ✧  ✦";
    position:absolute;
    bottom:14px;
    left:50%;
    transform:translateX(-50%);
    padding:0 25px;
    background:var(--background);
    color:var(--accent);
    font-size:14px;
    letter-spacing:6px;
    text-shadow:0 0 10px rgba(217,107,147,.5);
}

header h1{
    margin:0;
    font-family:"Megastina",serif;
    font-size:70px;
    font-weight:300;
    color:var(--text);
}

header p{
    max-width:500px;
    margin:15px auto 35px;
    color:var(--muted);
    line-height:1.8;
}


/* ========== NAVIGATION ========== */

nav{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:45px;
}

nav a{
    position:relative;
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    letter-spacing:1px;
    transition:.3s;
}

nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:1px;
    background:var(--accent);
    transition:.3s;
}

nav a:hover{
    color:var(--text);
}

nav a:hover::after{
    width:100%;
}

.nav-sale{
    color:#d96b93 !important;
}

.nav-sale span{
    color:#d96b93;
    font-size:10px;
    margin:0 6px;
}

.nav-sale::after{
    background:#d96b93;
}

.nav-sale:hover::after{
    width:100%;
}

.nav-sale:hover{
    color:#d96b93 !important;
}

@media (max-width:600px){

    .nav-sale:hover{
        color:#d96b93 !important;
    }

    .nav-sale:hover::after{
        width:0;
    }

}

/* ========== FOOTER ========== */

.footer{
    padding:60px 8%;
    border-top:1px solid #292522;
    text-align:center;
    position:relative;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:45px;
    align-items:center;
}

.footer-links a{
    color:#9b948d;
    text-decoration:none;
    font-size:13px;
    letter-spacing:1px;
    position:relative;
    transition:.3s;
}

.footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:1px;
    background:#d96b93;
    transition:.3s;
}

.footer-links a:hover{
    color:#eee8df;
}

.footer-links a:hover::after{
    width:100%;
}

.footer-brand{
    text-align:center;
    margin-top:50px;
}

.footer-brand h3{
    margin:0 0 10px;
    font-size:24px;
    font-weight:normal;
}

.footer-brand p{
    color:#9b948d;
    margin:0;
    font-size:15px;
}

.footer-payment{
    position:absolute;
    right:30px;
    bottom:25px;
    text-align:center;
}

.footer-payment p{
    margin:0 0 8px;
    font-size:14px;
    color:#9b948d;
}

.footer-payment img{
    height:28px;
    width:auto;
}

@media(max-width:700px){

    .footer-links{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }

    .footer-payment{
        position:static;
        margin-top:30px;
        text-align:center;
    }

}

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

.hero{
    position:relative;
    width:100%;
    height:700px;
    overflow:hidden;
}

.hero img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter:saturate(.8);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at center,
            rgba(217,107,147,.18),
            transparent 55%
        ),
        linear-gradient(
            rgba(17,16,15,.25),
            rgba(17,16,15,.75)
        );
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;

}

.hero-overlay h1{
    max-width:700px;
    font-family:"Megastina",serif;
    font-size:70px;
    font-weight:300;
    line-height:1;
    color:#eee8df;
    text-shadow:0 0 30px rgba(217,107,147,.25);
}



.hero-overlay p{
    max-width:450px;
    margin-top:25px;
    font-size:18px;
    line-height:1.8;
    color:#eee8df;
}

.hero-button{
    margin-top:40px;
    padding:14px 40px;
    border:1px solid rgba(238,232,223,.25);
    background:rgba(217,107,147,.12);
    color:#eee8df;
    text-decoration:none;
    letter-spacing:1px;
    backdrop-filter:blur(8px);
    transition:.4s;
}

.hero-button:hover{
    background:rgba(217,107,147,.35);
    transform:translateY(-3px);
}

@media(max-width:700px){

    .hero{
        height:70vh;
    }

    .hero img{
        width:100%;
        height:100%;
        object-fit:cover;
        opacity:1;
        transform:none;
        animation:heroImageFade 1.2s ease forwards;
    }

}

@keyframes heroImageFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}

/* ========== SHOP HEADER ========== */

.shop-header{
    text-align:center;
    padding:20px 10px;
}

.shop-header h2{
    font-size:36px;
    margin-bottom:15px;
    color:#eee8df;
    font-family:"Cormorant Garamond",serif;
    font-weight:300;
}

.shop-header p{
    color:#9b948d;
    font-size:16px;
}


/* ========== SHOP GRID ========== */

.shop-grid{
    max-width:1300px;
    margin:0 auto;
    padding:20px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.shop-card{
    padding:30px;
}

.shop-card img{
    width:100%;
    aspect-ratio:2 / 3;
    object-fit:cover;
    display:block;
    border-radius:2px;
    box-shadow:0 15px 40px rgba(0,0,0,.45);
    transition:.5s ease;
}

.shop-card img:hover{
    transform:scale(1.05);
}

.shop-card h2{
    color:#eee8df;
    text-align:left;
    font-size:18px;
    font-weight:500;
    margin:20px 0 10px;
}

.shop-card .preis{
    color:#d96b93;
    text-align:left;
    font-size:20px;
    font-weight:600;
    margin:0 0 20px;
}

.shop-card .status{
    margin-bottom:20px;
}

.alter-preis {
    text-decoration: line-through;
    opacity: 0.5;
    margin-right: 12px;
}

.sale-preis {
    font-weight: bold;
    color: var(--pink);
}


/* ========== SHOP BUTTON ========== */

.shop-button{
    display:block;
    width:100%;
    text-align:center;
    background:rgba(217,107,147,.12);
    color:#d96b93;
    padding:10px;
    text-decoration:none;
    border:1px solid rgba(217,107,147,.25);
    cursor:pointer;
    transition:all .55s cubic-bezier(.4,0,.2,1);
    letter-spacing:1px;
}

.shop-button:hover{
    background:rgba(217,107,147,.25);
    border-color:#d96b93;
    box-shadow:0 0 20px rgba(217,107,147,.25);
}


/* ========== STATUS ========== */

.status{
    display:inline-block;
    padding:4px 10px;
    font-size:13px;
    letter-spacing:.5px;
}

.status.verfügbar{
    background:rgba(217,107,147,.12);
    color:#d96b93;
    border:1px solid rgba(217,107,147,.25);
}

.status.reserviert{
    background:rgba(238,232,223,.08);
    color:#eee8df;
    border:1px solid rgba(238,232,223,.18);
}

.status.verkauft{
    background:rgba(155,148,141,.08);
    color:#9b948d;
    border:1px solid rgba(155,148,141,.15);
}


/* ========== MOBILE SHOP ========== */

@media(max-width:700px){

    .shop-grid{
        grid-template-columns:1fr;
        gap:20px;
        padding:15px;
    }

    .shop-card{
        display:flex;
        align-items:stretch;
        gap:15px;
        padding:15px;
        padding-bottom:35px;
        border-bottom:1px solid rgba(200,140,80,.2);
        margin-bottom:0;
        animation:mobileReveal .9s ease forwards;
    }

    .shop-card:last-child{
        border-bottom:none;
    }

    .shop-card img{
        width:90px;
        height:auto;
        flex-shrink:0;
    }

    .shop-card img:hover{
        transform:none;
    }

    .shop-info{
        flex:1;
        display:flex;
        flex-direction:column;
        justify-content:flex-start;
    }

    .shop-card h2{
        margin:0 0 8px;
        font-size:16px;
    }

    .shop-card .preis{
        margin:0 0 8px;
        font-size:15px;
    }

    .shop-card .status{
        display:inline-flex;
        width:fit-content;
        align-self:flex-start;
        padding:4px 8px;
        font-size:13px;
        margin:0;
    }

    .shop-card .shop-button{
        align-self:flex-end;
        flex-shrink:0;
        padding:8px 12px;
        font-size:13px;
        width:auto;
        white-space:nowrap;
    }

    .shop-header{
        padding:10px;
    }

    .shop-header h2{
        font-size:28px;
        margin-bottom:8px;
    }

    .shop-header p{
        font-size:15px;
    }

}

@keyframes mobileReveal{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ========== KAUFSEITE ========== */

.kaufseite{
    max-width:1200px;
    margin:60px auto;
    padding:0;
}

.buy-layout{
    display:grid;
    grid-template-columns:350px 1fr;
    gap:60px;
    align-items:start;
}

.buy-image img{
    width:100%;
    display:block;
    border-radius:2px;
}

.buy-content h1{
    margin-top:0;
    text-align:left;
}

.buy-content .preis{
    font-size:30px;
    font-weight:600;
    margin:20px 0;
    padding:10px;
}


/* ========== FORMULAR ========== */

.kauf-formular{
    width:100%;
}

.kauf-formular label{
    display:block;
    margin-top:20px;
    margin-bottom:8px;
    color:var(--text);
    font-size:16px;
}

.kauf-formular input,
.kauf-formular textarea{
    width:100%;
    padding:12px;
    border:1px solid #474037;
    font-size:16px;
    font-family:inherit;
    background:var(--background);
    color:var(--accent);
    box-sizing:border-box;
}

.kauf-formular textarea{
    height:120px;
    resize:vertical;
}

.kauf-formular input:focus,
.kauf-formular textarea:focus{
    outline:none;
}

.kauf-formular input::placeholder,
.kauf-formular textarea::placeholder{
    color:var(--muted);
}

.kauf-formular button{
    width:100%;
    margin-top:25px;
    padding:14px;
    display:block;
    text-align:center;
    background:rgba(157,144,125,.15);
    color:var(--accent);
    border:none;
    cursor:pointer;
    transition:all .55s cubic-bezier(.4,0,.2,1);
}

.kauf-formular button:hover{
    background:rgba(157,144,125,.50);
}


/* Autofill */

.kauf-formular input:-webkit-autofill,
.kauf-formular textarea:-webkit-autofill,
.kauf-formular select:-webkit-autofill{
    -webkit-text-fill-color:#f4d8e4;
    -webkit-box-shadow:0 0 0 1000px #11100f inset;
    transition:background-color 9999s ease-in-out 0s;
}


/* Checkbox */

.checkbox,
.kauf-formular label.checkbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:20px;
    font-size:15px;
    line-height:1.5;
    color:var(--text);
}

.checkbox input,
.kauf-formular label.checkbox input{
    width:auto;
    margin-top:4px;
}


/* ========== PRODUCT INFO ========== */

.produkt-info{
    margin-bottom:30px;
}

.produkt-info h3{
    line-height:1;
}

.produkt-info ul{
    list-style:none;
    padding:10px;
}

.produkt-info li{
    margin-bottom:12px;
}

.produkt-info li::before{
    content:"✓";
    margin-right:10px;
}

.bestell-hinweis{
    margin-top:30px;
    margin-bottom:30px;
    padding:20px;
    border-left:1px solid var(--accent);
    color:var(--text);
    font-size:16px;
    line-height:1.6;
}

.bestell-hinweis strong{
    display:block;
    color:var(--accent);
    margin-bottom:10px;
}

.bestell-hinweis p{
    margin:8px 0;
}


/* ========== BACK LINK ========== */

.back-link{
    display:inline-block;
    text-align:center;
    background:rgba(217,107,147,.12);
    color:#d96b93;
    padding:12px 30px;
    margin:10px 0;
    text-decoration:none;
    letter-spacing:1px;
    font-size:14px;
    border:1px solid rgba(217,107,147,.25);
    transition:all .55s cubic-bezier(.4,0,.2,1);
}

.back-link:hover{
    background:rgba(217,107,147,.25);
    border-color:#d96b93;
    color:#eee8df;
    box-shadow:0 0 20px rgba(217,107,147,.25);
}


/* ========== MOBILE KAUFSEITE ========== */

@media(max-width:900px){

    .buy-layout{
        grid-template-columns:1fr;
    }

    .buy-image img{
        max-width:350px;
        margin:auto;
    }

}

@media(max-width:600px){

    .kaufseite{
        margin:40px auto;
        padding:0 15px;
    }

    .buy-image img{
        max-width:280px;
    }

    .buy-content h1{
        font-size:28px;
    }

    .buy-content .preis{
        font-size:26px;
    }

    .kauf-formular input,
    .kauf-formular textarea{
        padding:10px;
    }

    .kauf-formular textarea{
        min-height:160px;
        line-height:1.5;
        padding:12px;
    }

    .kauf-formular button{
        font-size:16px;
    }

}

/* ========== COMMISSION ========== */

.commission-header{
    max-width:700px;
    margin:80px auto 50px;
    text-align:left;
}

.commission-header h1{
    text-align:center;
}

.commission-header p{
    color:var(--muted);
    line-height:1.6;
    font-size:16px;
}

.commission-info{
    max-width:600px;
    margin:0 auto 60px;
}

.commission-info h2{
    text-align:center;
    margin-bottom:30px;
}

.commission-info ul{
    list-style:none;
    padding:0;
}

.commission-info li{
    margin-bottom:15px;
}

.commission-info li::before{
    content:"✓";
    margin-right:10px;
}

.commission-form{
    max-width:600px;
    margin:0 auto 80px;
}

.commission-form h2{
    text-align:center;
    margin-bottom:30px;
}

.commission-form .kauf-formular{
    width:100%;
}


/* ========== LEGAL ========== */

.legal-page{
    max-width:900px;
    margin:80px auto;
    padding:0 30px;
    color:var(--text);
    text-align:left;
}

.legal-page h1{
    text-align:center;
    margin-bottom:50px;
    font-size:36px;
}

.legal-page h2{
    font-size:22px;
    font-weight:600;
    margin-top:35px;
    margin-bottom:12px;
}

.legal-page p{
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin-bottom:20px;
}

.legal-page a{
    color:var(--accent);
    text-decoration:none;
    font-weight:600;
}

.legal-page a:hover{
    opacity:.7;
}

.applies-title{
    font-weight:bold;
    margin-top:25px!important;
    margin-bottom:10px!important;
}

.refund-list{
    padding-left:20px;
    margin:0;
    line-height:1.7;
}

.refund-list li{
    margin-bottom:8px;
}

/* ========== LEGAL CONTENT BOX ========== */

.legal-content{
    width:100%;
    max-width:850px;
    padding:60px;
    border:1px solid rgba(238,232,223,.15);
    background:rgba(17,16,15,.45);
}


/* Mobile */

@media(max-width:600px){

    .legal{
        padding-left:5%;
        padding-right:5%;
    }

    .legal-content{
        width:100%;
        padding:30px 20px;
    }

    .legal-content h1{
        font-size:40px;
    }

    .legal-content h2{
        font-size:28px;
    }

    .legal-content h1::after,
    .legal-content h2.title-center::after{
        width:60%;
    }

}

.legal-content h1{
    font-family:"Cormorant Garamond",serif;
    font-size:35px;
    font-weight:300;
    margin:0 0 50px;
    padding-bottom:20px;
    text-align:center;
    position:relative;
}


.legal-content h1::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:300px;
    height:1px;
    background:#d96b93;
    transform:translateX(-50%);
}

.legal-content ul{
    color:#9b948d;
    line-height:1.8;
    margin-left:25px;
}

.legal-content li::marker{
    color:#d96b93;
}


/* ========== CHECKBOX ========== */

.checkbox{
    display:flex;
    gap:10px;
    align-items:flex-start;
    margin-top:20px;
    font-size:15px;
    line-height:1.5;
    color:var(--text);
}

.checkbox input{
    width:auto;
    margin-top:4px;
}


/* ========== FAQ ========== */

.faq-page{
    max-width:800px;
    margin:80px auto;
    padding:0 30px;
    color:var(--text);
}

.faq-page h1{
    color:var(--text);
    text-align:center;
    font-size:36px;
    margin-bottom:50px;
}

.faq-item{
    max-width:700px;
    margin:0 auto;
}

.faq-item h2{
    text-align:center;
    font-size:22px;
    color:var(--accent);
    margin-top:35px;
    margin-bottom:20px;
}

.faq-page p{
    font-size:16px;
    line-height:1.7;
    color:var(--muted);
    margin-bottom:25px;
}


/* ========== CONTACT ========== */

.contact-page{
    max-width:700px;
    margin:80px auto;
    padding:0 30px;
    text-align:center;
}

.contact-page h1{
    font-size:36px;
    margin-bottom:50px;
    color:var(--text);
}

.contact-page h2{
    color:var(--accent);
    font-family:"Cormorant Garamond",serif;
    font-weight:300;
}

.contact-page p{
    font-size:16px;
    line-height:1.7;
    text-align:left;
    margin-bottom:20px;
    color:var(--muted);
}

.contact-divider{
    width:85%;
    height:1px;
    margin:40px auto;
    background:var(--line);
}

.contact-email{
    padding:10px 0;
}

.email-link{
    display:inline-block;
    font-size:16px;
    color:var(--muted);
    text-decoration:none;
    border-bottom:1px solid transparent;
    transition:.3s ease;
}

.email-link:hover{
    border-bottom:1px solid var(--muted);
}

.contact-page .confirm-line,
.faq-page .confirm-line{
    height:1px;
    width:85%;
    margin:40px auto;
    background:linear-gradient(90deg,transparent,#292522,transparent);
    position:relative;
}

.contact-page .confirm-line::after,
.faq-page .confirm-line::after{
    content:"✦  ✧  ✦";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:0 18px;
    background:#11100f;
    color:#d96b93;
    font-size:14px;
    letter-spacing:5px;
    text-shadow:0 0 10px rgba(217,107,147,.5);
}

.contact-page h2:not(:first-of-type){
    border-top:none;
    padding-top:0;
}

.contact-mail{
    margin-top:40px;
    color:#d96b93;
    text-decoration:none;
    font-size:18px;
    letter-spacing:1px;
    position:relative;
}

.contact-mail::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:100%;
    height:1px;
    background:#d96b93;
    transform:scaleX(.3);
    transition:.4s;
}

.contact-mail:hover::after{
    transform:scaleX(1);
}

/* ========== ORDER BOXES ========== */

.bestellung,
.confirm-box{
    max-width:700px;
    margin:80px auto;
    padding:40px;
    border:1px solid var(--line);
    background:var(--background);
    color:var(--text);
}


/* COMPLETE ORDER */

.bestellung{
    text-align:center;
}

.bestellung h2{
    text-align:center;
    font-size:32px;
    margin-bottom:30px;
}

.bestellung p{
    text-align:left;
    font-size:16px;
    line-height:1.7;
    margin-bottom:20px;
}

.success-text{
    text-align:center!important;
    font-size:20px!important;
}


.next-step{
    margin:40px 0;
    padding:25px 0;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.next-step h3{
    color:var(--accent);
    font-size:20px;
    margin-bottom:15px;
}

.thank-you{
    margin-top:35px;
}


/* ========== FANTASY FRAME ========== */

.complete-box,
.confirm-box{
    position:relative;
    border:1px solid rgba(238,232,223,.12);
}

.complete-box{
    overflow:hidden;
}

.complete-box .star,
.confirm-box .star{
    position:absolute;
    color:#d96b93;
    font-size:18px;
    line-height:1;
    text-shadow:0 0 10px rgba(217,107,147,.5);
}


.complete-box .top-left{
    top:-12px;
    left:-12px;
}

.complete-box .top-right{
    top:-12px;
    right:-12px;
}

.complete-box .bottom-left{
    bottom:-12px;
    left:-12px;
}

.complete-box .bottom-right{
    bottom:-12px;
    right:-12px;
}


/* ========== CONFIRM PAGE ========== */

.confirm-page{
    max-width:700px;
    margin:80px auto;
    padding:0 30px;
    color:var(--text);
}

.confirm-page h1{
    text-align:center;
    font-size:36px;
    margin-bottom:20px;
}

.confirm-intro{
    text-align:center;
    color:var(--muted);
    font-size:16px;
    line-height:1.6;
    margin-bottom:40px;
}


.confirm-box{
    padding:50px 40px;
    background:#11100f;
}


.confirm-box .top-left{
    top:-9px;
    left:-8px;
}

.confirm-box .top-right{
    top:-9px;
    right:-8px;
}

.confirm-box .bottom-left{
    bottom:-10px;
    left:-8px;
}

.confirm-box .bottom-right{
    bottom:-10px;
    right:-8px;
}


.confirm-box h2{
    text-align:center;
    font-size:24px;
    font-weight:500;
    color:var(--accent);
    margin:0 0 25px;
}


.confirm-line{
    height:1px;
    width:100%;
    margin:35px 0;
    background:linear-gradient(
        90deg,
        transparent,
        #292522 20%,
        #292522 80%,
        transparent
    );
}


.confirm-box p{
    color:var(--text);
    line-height:1.7;
    margin:20px 0;
}

.confirm-box strong{
    color:var(--accent);
}


/* Produktbild */

.confirm-product{
    display:flex;
    gap:35px;
    align-items:flex-start;
    margin:30px 0;
}

.confirm-cover-image{
    flex:0 0 180px;
}

.confirm-cover-image img{
    width:180px;
    border:1px solid var(--line);
}

.confirm-product-info{
    flex:1;
}


/* ========== PAGINATION ========== */

.pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin:60px 0 40px;
}

.pagination a{
    display:inline-block;
    min-width:40px;
    padding:10px 14px;
    text-align:center;
    text-decoration:none;
    background:rgba(217,107,147,.12);
    color:#d96b93;
    border:1px solid rgba(217,107,147,.25);
    letter-spacing:1px;
    font-size:14px;
    transition:all .55s cubic-bezier(.4,0,.2,1);
}

.pagination a:hover{
    background:rgba(217,107,147,.25);
    border-color:#d96b93;
    color:#eee8df;
    box-shadow:0 0 20px rgba(217,107,147,.25);
}

.pagination a.active{
    background:rgba(217,107,147,.35);
    border-color:#d96b93;
    color:#eee8df;
    box-shadow:0 0 20px rgba(217,107,147,.25);
}


/* ========== RESERVATION ========== */

.reservation-note{
    margin-top:30px;
    margin-bottom:30px;
    padding:20px;
    border:1px solid var(--line);
    background:rgba(200,140,80,.05);
    font-size:16px;
    line-height:1.6;
}

/* ========== FOOTER ========== */

.footer{
    padding:60px 8%;
    border-top:0px solid #292522;
    text-align:center;
    position:relative;
}

.footer-links{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:45px;
}

.footer-links a{
    color:#9b948d;
    text-decoration:none;
    font-size:13px;
    letter-spacing:1px;
    position:relative;
    transition:.3s;
}

.footer-links a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:0;
    height:1px;
    background:#d96b93;
    transition:.3s;
}

.footer-links a:hover{
    color:#eee8df;
}

.footer-links a:hover::after{
    width:100%;
}


.footer-brand{
    text-align:center;
    margin-top:50px;
}

.footer-brand p{
    color:#9b948d;
    font-size:15px;
    margin:0;
}

.footer-brand h3{
    margin:0 0 10px;
    font-size:24px;
    font-weight:normal;
}


.footer-payment{
    position:absolute;
    right:30px;
    bottom:25px;
    text-align:center;
}

.footer-payment p{
    margin:0 0 8px;
    font-size:14px;
    color:var(--muted);
}

.footer-payment img{
    height:28px;
    width:auto;
}

.footer::before{
    content:"";
    position:absolute;
    top:23px;
    left:8%;
    right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,#292522 20%,#292522 80%,transparent);
}

.footer::after{
    content:"✦  ✧  ✦";
    position:absolute;
    top:11px;
    left:50%;
    transform:translateX(-50%);
    padding:0 25px;
    background:var(--background);
    color:var(--accent);
    font-size:14px;
    letter-spacing:6px;
    text-shadow:0 0 10px rgba(217,107,147,.5);
}


/* ========== MOBILE ========== */

@media(max-width:900px){

    .buy-layout{
        grid-template-columns:1fr;
    }

    .buy-image img{
        max-width:350px;
        margin:auto;
    }

}


@media(max-width:700px){

    .hero{
        height:70vh;
    }

    .hero img{
        width:100%;
        height:100%;
        object-fit:cover;
        opacity:1;
        transform:none;
        animation:heroImageFade 1.2s ease forwards;
    }


    .pagination{
        display:none;
    }


    .footer-links{
        flex-direction:column;
        align-items:center;
        gap:20px;
    }


    .footer-payment{
        position:static;
        margin-top:30px;
    }


    .shop-grid{
        grid-template-columns:1fr;
        gap:20px;
        padding:15px;
    }


    .shop-card{
        display:flex;
        align-items:stretch;
        gap:15px;
        padding:15px;
        padding-bottom:35px;
        border-bottom:1px solid rgba(200,140,80,.2);
    }


    .shop-card:last-child{
        border-bottom:none;
    }


    .shop-card img{
        width:90px;
        height:auto;
        flex-shrink:0;
    }


    .shop-info{
        flex:1;
        display:flex;
        flex-direction:column;
    }


    .shop-card h2{
        margin:0 0 8px;
        font-size:16px;
    }


    .shop-card .preis{
        margin:0 0 8px;
        font-size:15px;
    }


    .shop-card .status{
        display:inline-flex;
        width:fit-content;
        align-self:flex-start;
        padding:4px 8px;
        font-size:13px;
    }


    .shop-card .shop-button{
        align-self:flex-end;
        padding:8px 12px;
        font-size:13px;
        width:auto;
        white-space:nowrap;
    }


    .shop-header{
        padding:10px;
    }


    .shop-header h2{
        font-size:28px;
    }


    .shop-header p{
        font-size:15px;
    }


    .bestellung{
        margin:50px 20px;
        padding:25px;
    }


    .confirm-page{
        margin:50px auto;
        padding:0 20px;
    }


    .confirm-box{
        padding:25px;
    }


    .confirm-product{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }


    .confirm-page h1{
        font-size:28px;
    }


    .kaufseite{
        margin:40px auto;
        padding:0 15px;
    }


    .buy-image img{
        max-width:280px;
    }


    .buy-content h1{
        font-size:28px;
    }


    .buy-content .preis{
        font-size:26px;
    }


    .kauf-formular input,
    .kauf-formular textarea{
        padding:10px;
    }


    .kauf-formular textarea{
        min-height:160px;
    }


    .kauf-formular button{
        font-size:16px;
    }


    .legal-content{
        padding:30px 20px;
    }


    .legal-content h1{
        font-size:40px;
    }


    .legal-content h2{
        font-size:28px;
    }

}


/* ========== ANIMATIONS ========== */

@keyframes heroImageFade{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }

}


@media(max-width:700px){

    .shop-card{
        animation:mobileReveal .9s ease forwards;
    }

}


@keyframes mobileReveal{

    from{
        opacity:0;
        transform:translateY(25px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* ========== FANTASY BACKGROUND ========== */

.stars,
.magic-dust{
    position:fixed;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
}


/* ========== STARS ========== */

.stars span{
    position:absolute;
    color:#d96b93;
    font-size:18px;
    opacity:.35;
    text-shadow:
    0 0 12px rgba(217,107,147,.6);
    animation:starGlow 4s infinite ease-in-out;
}


.stars span:nth-child(1){
    top:15%;
    left:10%;
}

.stars span:nth-child(2){
    top:35%;
    left:85%;
}

.stars span:nth-child(3){
    top:70%;
    left:20%;
}

.stars span:nth-child(4){
    top:80%;
    left:75%;
}

.stars span:nth-child(5){
    top:45%;
    left:50%;
}


@keyframes starGlow{

    0%,100%{
        opacity:.25;
        transform:scale(1);
    }

    50%{
        opacity:.8;
        transform:scale(1.15);
    }

}


/* ========== MAGIC DUST ========== */

.magic-dust span{
    position:absolute;
    width:4px;
    height:4px;
    background:#f4d8e4;
    border-radius:50%;
    opacity:0;
    animation:dustFloat 8s infinite ease-in-out;
    box-shadow:
    0 0 10px rgba(244,216,228,.8);
}


.magic-dust span:nth-child(1){
    top:20%;
    left:15%;
    animation-delay:0s;
}

.magic-dust span:nth-child(2){
    top:40%;
    left:70%;
    animation-delay:2s;
}

.magic-dust span:nth-child(3){
    top:75%;
    left:35%;
    animation-delay:4s;
}

.magic-dust span:nth-child(4){
    top:60%;
    left:85%;
    animation-delay:1s;
}

.magic-dust span:nth-child(5){
    top:30%;
    left:50%;
    animation-delay:3s;
}

.magic-dust span:nth-child(6){
    top:85%;
    left:20%;
    animation-delay:5s;
}

.magic-dust span:nth-child(7){
    top:15%;
    left:90%;
    animation-delay:6s;
}

.magic-dust span:nth-child(8){
    top:55%;
    left:10%;
    animation-delay:7s;
}


@keyframes dustFloat{

    0%{
        opacity:0;
        transform:translateY(0) scale(.5);
    }

    30%{
        opacity:.8;
    }

    50%{
        transform:translateY(-25px) scale(1);
    }

    70%{
        opacity:.5;
    }

    100%{
        opacity:0;
        transform:translateY(-50px) scale(.5);
    }

}


/* ========== SHOOTING STAR ========== */

.complete-box{
    overflow:hidden;
}


.shooting-star{
    position:absolute;
    top:-20px;
    left:-120px;
    width:120px;
    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        #d96b93
    );

    transform:rotate(45deg);
    opacity:0;

    animation:shootStar 6s infinite ease-in-out;
}


.shooting-star::after{
    content:"✦";
    position:absolute;
    right:-5px;
    top:50%;
    transform:translateY(-50%);

    color:#f4d8e4;
    font-size:18px;

    text-shadow:
    0 0 15px #d96b93;
}


@keyframes shootStar{

    0%{
        opacity:0;
        transform:translate(0,0) rotate(45deg);
    }

    10%{
        opacity:1;
    }

    35%{
        opacity:1;
        transform:translate(320px,320px) rotate(45deg);
    }

    45%{
        opacity:0;
        transform:translate(380px,380px) rotate(45deg);
    }

    100%{
        opacity:0;
        transform:translate(0,0) rotate(45deg);
    }

}


/* Mobile Hintergrund */

@media(max-width:700px){

    .stars{
        display:none;
    }

}

@media(max-width:700px){

    nav {
        gap:22px;
    }

    .nav-links a:hover,
    .footer-links a:hover{
        color:inherit;
    }

    .nav-links a:hover::after,
    .footer-links a:hover::after{
        width:0;
    }

}

@media(max-width:700px){

    nav a:hover{
        color:#9b948d;
    }

    nav a:hover::after{
        width:0;
    }

}
.honeypot{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    clip-path:inset(50%);
    white-space:nowrap;
}

.optional-extras {
    margin: 30px 0;
    padding: 20px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.02);
}

.optional-extras h3 {
    margin-bottom: 8px;
}

.optional-extras p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 15px;
}

.required-confirmations {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid var(--line);
}