@import url('./wish-guest.css');

/* Alternative zu Wish: nur Seitenornamentik + transparentere Karten */

:root {
    --clean-panel-bg:
        /*linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 100%),
        linear-gradient(135deg, #f7f1e7 0%, #ede4d8 100%);*/
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%),
        linear-gradient(135deg, rgba(247, 241, 231, 0.2) 0%, rgba(237, 228, 216, 0.2) 100%);
        /*linear-gradient(135deg, #f7f1e7 0%, #ede4d8 100%);*/
}

body::before,
body::after {
    width: min(20vw, 220px);
    opacity: 0.30;
}

body::before {
    left: calc(50% - 610px);
}

body::after {
    right: calc(50% - 610px);
}

.container::before,
.container::after,
.event-info::after,
.invitation-card::after {
    display: none;
}

.card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.46) 0%, rgba(255, 255, 255, 0.12) 100%),
        linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
}

.event-info,
.invitation-card {
    background: var(--clean-panel-bg) !important;
}

.card::before,
.event-info::before,
.invitation-card::before {
    display: block;
    border-color: rgba(139, 131, 118, 0.14);
}

.event-details,
.guests-section,
input[type="email"],
textarea {
    background: rgba(255, 255, 255, 0.3);
}

/* Ab ~1220px werden die Ranken seitlich abgeschnitten → rechtzeitig an den Rand verschieben */
@media (max-width: 1220px) {
    body::before {
        left: 0;
    }

    body::after {
        right: 0;
    }
}

/* Ab 900px Breite mit vw skalieren statt fixer Breite */
@media (max-width: 900px) {
    body::before,
    body::after {
        width: 18vw;
    }
}

@media (max-width: 768px) {
    body::before,
    body::after {
        width: 18vw;
        opacity: 0.28;
    }
}

/* Sehr kleine Bildschirme: etwas schmäler und transparenter, aber weiterhin sichtbar */
@media (max-width: 480px) {
    body::before,
    body::after {
        width: 15vw;
        opacity: 0.22;
    }
}