/* ==== Allgemein ==== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

body, .portfolio-section {
    font-family: 'Montserrat', Arial, sans-serif;
    color: #ededed;
}

.portfolio-section {
    margin: 2vw auto 0 auto;
    max-width: 82vw;
    text-align: center;
}


.portfolio-section h2 {
    color: #fff;
    font-size: 2.9vw;
    font-weight: 700;
    letter-spacing: 0.01em;
    padding-top: 6vw;     /* vorher 0, jetzt viel mehr Abstand nach oben */
    margin-bottom: 5vw;  /* vorher 2vw, jetzt mehr Abstand nach unten */
}


/* ==== Portfolio-Grid & Kacheln ==== */
.portfolio-grid,
.portfolio-grid-2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2vw;
    justify-items: center;
    margin-bottom: 15vw;
    padding-top:1vw;
}
.portfolio-grid-2 {
    gap: 3vw;
}

/* Einzelfelder */
.portfolio-tile {
    background: #222228;
    border-radius: 1.5vw;
    box-shadow: 0 6px 32px #0006;
    width: 18vw;
    min-width: 180px;
    max-width: 290px;
    padding: 0.9vw 0.8vw 0.8vw 0.8vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.17s, box-shadow 0.17s;
}
.portfolio-tile:hover {
    transform: scale(1.045) translateY(-0.2vw);
    box-shadow: 0 12px 44px #ffe97a33, 0 8px 44px #000b;
}
.portfolio-tile img {
    width: 100%;
    border-radius: 1.1vw;
    object-fit: cover;
    aspect-ratio: 4/3;
    margin-bottom: 1vw;
    box-shadow: 0 2px 14px #0008;
    cursor: pointer;
    transition: box-shadow 0.16s, transform 0.16s;
}
.portfolio-tile h3 {
    margin: 0 0 0.7vw 0;
    color: #ffe97a;
    font-size: 1.13vw;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
}
.portfolio-tile-desc {
    margin-top: 0.5vw;
    font-size: 0.8vw;
}
.portfolio-tile-desc a {
    color: #ffe97a;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.16s;
}
.portfolio-tile-desc a:hover {
    color: #fff3a0;
    text-decoration: underline;
}

/* ==== Doppelte Breite für "Besondere Anlässe" ==== */
.tile-double {
    grid-column: span 2;
    width: 100%;
    max-width: unset;
    align-items: stretch;
    justify-content: stretch;
}
.tile-double h3 {
    color: #ffe97a;
    font-size: 1.4vw;
    font-weight: 700;
    text-align: center;
    margin: 0 0 1vw 0;
}
.tile-double-innergrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1vw;
    width: 100%;
}
.tile-double-innergrid img {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 1vw;
    object-fit: cover;
    box-shadow: 0 2px 10px #0008;
    margin-bottom: 0.5vw;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.15s;
}
.tile-double-innergrid img:hover {
    transform: none !important;
    box-shadow: 0 2px 10px #0008 !important;
}

/* ==== Responsive ==== */
@media (max-width: 900px) {
    .portfolio-section h2 {
        font-size: 6vw;
    }
    .portfolio-grid,
    .portfolio-grid-2 {
        grid-template-columns: 1fr;
        gap: 6vw;
    }
    .portfolio-tile,
    .tile-double {
        width: 95vw;
        min-width: unset;
        max-width: 100vw;
        border-radius: 3vw;
        padding: 3vw 2vw 2vw 2vw;
    }
    .portfolio-tile h3, .tile-double h3 {
        font-size: 4vw;
    }
    .portfolio-tile-desc {
        font-size: 3vw;
    }
    .portfolio-tile img, .tile-double-innergrid img {
        border-radius: 2vw;
        aspect-ratio: 4/3;
        margin-bottom: 3vw;
    }
    .tile-double-innergrid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==== Farbakzente ==== */
.highlight-yellow { color: #ffe97a; font-weight: 700;}
.highlight-blue { color: #8be9fd; font-weight: 700;}
.bold { font-weight: 700; color: #fff; }

/* Abstand zwischen den beiden doppelten Kacheln */
.double-gap {
    gap: 4vw !important;
}

/* Großes Bild in den doppelten Boxen */
.big-preview {
    width: 68%;
    aspect-ratio: 4/3;
    border-radius: 1vw;
    margin: 1.5vw auto 0 auto;
    box-shadow: 0 2px 12px #0008;
    cursor: pointer;
    object-fit: cover;
    display: block;
    transition: box-shadow 0.18s, transform 0.18s;
}
.big-preview:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 32px #ffe97a44, 0 6px 32px #000b;
}

/* ==== Portfolio-Overlay (Modal) ==== */
.portfolio-modal {
    display: none;
    position: fixed;
    z-index: 8888;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(20,20,20,0.88);
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
}
.portfolio-modal.active { display: flex; }

.portfolio-modal-content {
    background: #181819;
    border-radius: 2vw;
    margin: 2vw auto;
    height:80vh;
    padding: 3vw 2vw 2vw 2vw;
    max-width: 85vw;
    width: 100%;
    box-shadow: 0 6px 48px #000d;
    position: relative;
    text-align: center;
    animation: fadeInModal 0.3s;
}

@keyframes fadeInModal {
    from { opacity: 0; transform: translateY(4vw);}
    to   { opacity: 1; transform: translateY(0);}
}

.portfolio-modal-close,
.video-modal-close {
    position: absolute;
    top: 1.2vw;
    right: 2vw;
    font-size: 3vw;
    color: #ffe97a;
    cursor: pointer;
    font-weight: bold;
    z-index: 2;
    transition: color 0.16s;
}
.portfolio-modal-close:hover,
.video-modal-close:hover {
    color: #fff3a0;
}

/* Scrollbar für Modal-Grid */
.portfolio-modal .portfolio-grid {
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 1.5vw;
    scrollbar-gutter: stable;
}

/* ==== Video-Modal ==== */
.video-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0; top: 0; width: 100vw; height: 100vh;
    background: rgba(20,20,20,0.9);
    justify-content: center;
    align-items: center;
}
.video-modal.active { display: flex; }
.video-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #181819;
    border-radius: 2vw;
    padding: 2vw;
    box-shadow: 0 6px 48px #000d;
    min-width: 320px;
    max-width: 85vw;
    width: 100%;
    text-align: center;
    animation: fadeInModal 0.3s;
    min-height: 60vh;
    max-height: 88vh;
    position: relative;
}

/* Schließen-X (oben rechts) für beide Modals (siehe oben) */

/* Video-Player Styling */
#modal-play-video {
    height: 100%;
    width: auto;
    max-height: 80vh;
    max-width: 90vw;
    border-radius: 1vw;
    background: #111;
    margin-top: 2vw;
    display: block;
}

/* Responsive Video */
@media (max-width:900px) {
    #modal-play-video {
        width: 90vw;
        max-width: 98vw;
        max-height: 60vh;
    }
}

.portfolio-tile img {
    width: 100%;
    height: 9vw;         /* z.B. auf 8vw beschränken, statt aspect-ratio */
    max-height: 20vw;   /* Für kleinere Bildschirme ein Limit */
    min-height: 80px;    /* Minimum, falls gewünscht */
    border-radius: 1.1vw;
    object-fit: cover;
    margin-bottom: 0.4vw;
    box-shadow: 0 2px 14px #0008;
    cursor: pointer;
    transition: box-shadow 0.16s, transform 0.16s;
}
.portfolio-tile {
    padding: 0.6vw 0.5vw 0.5vw 0.5vw;
}

/* Nur für die „normalen“ Kacheln Pointer zeigen */
.portfolio-tile {
    cursor: pointer;
}
/* Aber NICHT für die inneren Kacheln in speziellen Grids (falls gewünscht): */
.tile-double-innergrid .portfolio-tile,
.tile-double-innergrid img {
    cursor: default;
}


.portfolio-grid,
.portfolio-grid-2 {
    column-gap: 0;   /* Horizontaler Abstand – z.B. 1vw statt 3vw */
    row-gap: 3vw;      /* Vertikal kann ruhig größer bleiben */
}

.portfolio-tile-desc {
    margin-top: 0.5vw;
    font-size: 0.8vw;
    font-weight: 400;       /* oder 700 für noch fetter */
    color: #ffe97a;         /* Gelbton */
}

/* Die beiden großen Blöcke schmäler machen */
.portfolio-grid.double-gap {
    max-width: 77vw;     /* vorher evtl. 82vw oder mehr */
    margin-left: auto;
    margin-right: auto;
}

/* Optional: Wenn die Boxen IMMER zu breit sind */
.tile-double {
    max-width: 45vw;     /* oder noch weniger, je nach Geschmack */
    width: 100%;
}

.tile-double-innergrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 3 Spalten */
    gap: 1vw;
    width: 100%;
}

#single-image-modal .portfolio-modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#single-image-view {
    max-width: 92vw;
    width: auto !important;
    aspect-ratio: auto;
    border-radius: 2vw !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    background: #222;        /* Optional: für PNGs mit Transparenz */
    box-shadow: 0 2px 32px #0008;
    transition: border-radius 0.18s;
}


#foto-gallery-grid .gallery-image {
    width: auto;
    height: 12vw;          /* begrenzt die Höhe */
    object-fit: cover;    /* schneidet ggf. ein wenig ab, aber immer schönes Raster */
    border-radius: 1vw;
    box-shadow: 0 2px 14px #0008;
    cursor: pointer;
    margin-bottom: 1vw;
}
body.noscroll, html.noscroll {
    overflow: hidden !important;
    height: 100vh;
    width: 100vw;
    position: relative;
}
.portfolio-modal .portfolio-grid {
    max-height: 62vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding-right: 1.5vw;
}

#single-image-modal .portfolio-modal-content {
    max-width: 105vw !important; /* oder 110vw, wenn du es GANZ breit willst */
}

#single-image-view {
    max-width: 98vw !important;
    max-height: 85vh;
    width: auto !important;
    height: auto !important;
    aspect-ratio: auto;
    border-radius: 2vw !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    background: #222;
    box-shadow: 0 2px 32px #0008;
    transition: border-radius 0.18s;
}

/* Optional: Noch mehr für Ultra-Querformat */
@media (min-width: 1200px) {
    #single-image-modal .portfolio-modal-content {
        max-width: 75vw !important;
    }
    #single-image-view {
        max-width: 1160px !important;
    }
}

/* Hover-Effekt für Fotos in der Galerie */
#foto-gallery-grid .gallery-image {
    transition: transform 0.18s cubic-bezier(.33,1.41,.63,1.01), box-shadow 0.16s;
    box-shadow: 0 2px 14px #0008;
}
#foto-gallery-grid .gallery-image:hover {
    transform: scale(1.06) translateY(-0.4vw);
    box-shadow: 0 8px 24px #ffe97a33, 0 8px 24px #000b;
    z-index: 2;
}