.cpge-background-wrapper {
    position: relative;
    overflow: hidden;
}

.cpge-background-wrapper > .cpge-background-image {
    position: absolute;
    max-width: none;
    pointer-events: none;
}

.cpge-background-wrapper > .cpge-content {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------
   CPGE VIDEO-/BILD-BLOCK (volle Breite, 1–2 Medien)
--------------------------------------------------- */

.cpge-video-block {
    width: 100%;
    max-width: 100%;
}

/* "Spalten" sind jetzt nur noch Bereiche untereinander */
.cpge-video-block__col {
    width: 100%;
    min-width: 0;
    margin-bottom: 16px;
}

.cpge-video-block__col:last-child {
    margin-bottom: 0;
}

/* Kompatibilitäts-Klassen – kein Spaltenlayout mehr */
.cpge-video-block__col--videos,
.cpge-video-block__col--content {
    width: 100%;
}

/* Inneres Grid für 1 oder 2 Medien */
.cpge-video-block__videos-inner {
    display: grid;
    gap: 10px;
}

.cpge-video-block__videos-inner.cpge-video-count-1 {
    grid-template-columns: 1fr;
}

.cpge-video-block__videos-inner.cpge-video-count-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Medien-Wrapper: Quadrat oder Originalformat */
.cpge-video-block__video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #111;
}

/* Per Block definierte Formate */
.cpge-video-block__video-wrapper.is-aspect-square {
    aspect-ratio: 1 / 1;
}

.cpge-video-block__video-wrapper.is-aspect-original {
    aspect-ratio: auto;
}

/* Medien füllen immer die gesamte Breite */
.cpge-video-block__media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* wird durch Klassen verfeinert */
}

/* object-fit Klassen */
.cpge-media-fit-cover {
    object-fit: cover;
}
.cpge-media-fit-contain {
    object-fit: contain;
}
.cpge-media-fit-fill {
    object-fit: fill;
}
.cpge-media-fit-none {
    object-fit: none;
}
.cpge-media-fit-scale-down {
    object-fit: scale-down;
}

/* Bei Originalformat: Höhe automatisch */
.cpge-video-block__video-wrapper.is-aspect-original .cpge-video-block__media {
    height: auto;
}

/* Placeholder, wenn kein Medium gesetzt ist */
.cpge-video-block__video-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #888;
    background: repeating-linear-gradient(
        45deg,
        #f3f3f3,
        #f3f3f3 10px,
        #e5e5e5 10px,
        #e5e5e5 20px
    );
    text-align: center;
    padding: 8px;
}

/* Content-Bereich (falls du ihn später wieder nutzt) */
.cpge-video-block__col--content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------------------------------------------------
   MOBILE (max-width: 768px)
   - Nur noch der erste Medien-Eintrag sichtbar
   - Block bleibt volle Breite
--------------------------------------------------- */

@media (max-width: 768px) {
    .cpge-video-block__videos-inner {
        grid-template-columns: 1fr !important;
    }

    /* Zweites Medium komplett ausblenden */
    .cpge-video-block__video-wrapper.is-video-2 {
        display: none;
    }
}




/* Basis: Weite Blöcke zentrieren */
.alignwide,
.wp-block[data-align="wide"] {
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Bis 1400px Viewport-Breite: 90vw */
@media (max-width: 1399px) {
    .alignwide,
    .wp-block[data-align="wide"] {
        width: 90vw;
        max-width: 90vw; /* damit nichts größer wird als 90vw */
    }
}

/* Ab 1400px Viewport-Breite: 70vw, begrenzt auf max. 1400px */
@media (min-width: 1400px) {
    .alignwide,
    .wp-block[data-align="wide"] {
        width: 70vw;
        max-width: 1400px;
    }
}