@font-face {
    font-family: Cormorant Light;
    src: url(../../fonts/cormotant/CormorantUpright-Light.ttf);
}

@font-face {
    font-family: Cormorant Bold;
    src: url(../../fonts/cormotant/CormorantUpright-Bold.ttf);
}

@font-face {
    font-family: Cormorant Medium;
    src: url(../../fonts/cormotant/CormorantUpright-Medium.ttf);
}

@font-face {
    font-family: Cormorant Regular;
    src: url(../../fonts/cormotant/CormorantUpright-Regular.ttf);
}

@font-face {
    font-family: Cormorant Semibold;
    src: url(../../fonts/cormotant/CormorantUpright-SemiBold.ttf);
}

body {
    position: relative;
    background-image: url("../../img/wedding/body-bg.svg");
    background-repeat: repeat;
}

.cormorant-light {
    font-family: "Cormorant Light", serif;
    font-weight: 300;
    font-style: normal;
}

.cormorant-regular {
    font-family: "Cormorant Regular", serif;
    font-weight: 400;
    font-style: normal;
}

.cormorant-medium {
    font-family: "Cormorant Medium", serif;
    font-weight: 500;
    font-style: normal;
}

.cormorant-semibold {
    font-family: "Cormorant Semibold", serif;
    font-weight: 600;
    font-style: normal;
}

.cormorant-bold {
    font-family: "Cormorant Bold", serif;
    font-weight: 700;
    font-style: normal;
}

#top-image-container {
    position: relative;
    background-image: url(../../img/wedding/hero-image.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(369px, 180vh, 1000px)
}

/* EIN Kind, das den Parent vollständig überdeckt + abdunkelt */
#top-image-container .top-cover {
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
/ padding: 2 rem;
    padding-top: 0rem;
}

.fill-white {
    fill: #FFF;
}

.top-cover .display-1 {
    font-size: calc(1.625rem + 4.5vw);
}

#counter-info-container {
    top: -8rem;
}

#counter-info-container > svg {
    width: 9rem;
    height: 9rem;
    display: block;
    margin: 0 auto;
}

/*Timer-Container */
.cd-wrap {
    background: #f2f2f2;
    border-radius: 28px;
    padding: 28px 22px;
    max-width: 1100px;
    margin: 1rem auto;
    box-shadow: 0 24px 50px rgba(9, 30, 66, .08),
    0 2px 8px rgba(9, 30, 66, .04);
}

/* Grid */
.cd-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: center;
    text-align: center;
}

.cd-item {
    padding: 0;
}

.cd-num {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 600;
    color: #444;
    line-height: 1;
}

.cd-label {
    margin-top: 8px;
    font-style: italic;
    color: #6b6b6b;
    letter-spacing: .02em;
}

.cd-item:not(:last-of-type) {
    border-right: 1px solid rgba(107, 107, 107, 0.32);
}
/*Galery*/

.masonry{
    column-count: 2;
    column-gap: 18px;
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 10px;
}
.masonry .g-item{
    display: inline-block;
    width: 100%;
    margin: 0 0 18px;
    break-inside: avoid;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transition: transform .3s;
    position: relative;
}
.masonry img{
    width: 100%;
    height: auto;
    display: block;
}

.masonry .g-item::after {
    content: "";                /* sonst wird es nicht angezeigt */
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(13, 10, 10, 0.5); /* halbtransparentes Schwarz */
    opacity: 0;                 /* zuerst unsichtbar */
    transition: opacity .3s;
}
.masonry .g-item:hover {
    transform: scale(1.02);
}
.masonry .g-item:hover::after {
    opacity: 1;                 /* beim Hover sichtbar */
}

.fill-helloramge {
    fill: #fed8c2;
}

/* Responsive: 1 Spalte auf sehr schmalen Screens, 3 auf großen */
@media (max-width: 640px){ #gallery{ column-count: 1 } }