/*========================================
  LAYOUT I - Responsive Version
  
  Desktop & Tablet Landscape: 50/50 Split (Bild links, Content rechts)
  Tablet Portrait & Mobile: Layout A Stil (Bild oben, Content zentriert)
========================================*/


/*========================================
  DESKTOP & TABLET LANDSCAPE (1024px+)
  50/50 Split Layout
========================================*/

@media only screen and (min-width: 1024px) {

    .vce-lay-i {
        float: left;
        width: 100%;
        /*padding-bottom: 15px;*/
        margin: 0 0 20px 0;
    }

    .vce-lay-i .meta-image {
        float: left;
        width: 50%;
        margin-right: 40px;
    }

    .vce-lay-i img {
        width: 100%;
        float: left;
    }

    .vce-slider-pagination .vce-lay-i .meta-image {
        max-height: 500px;
        overflow: hidden;
    }

    .vce-lay-i .entry-header {
        margin-bottom: 15px;
        margin-top: 15px;
        margin-right: 15px;
    }

    .vce-lay-i .entry-content {
        margin: 0 15px 0 0;
        text-align: left;
        font-size: 1.7rem;
    }

    .vce-lay-i .meta-category {
        display: block;
    }

    .vce-lay-i .entry-title {
        max-width: none;
        line-height: 0.95;
        margin: 0 0 10px;
        text-align: left;
    }

    .vce-lay-i .entry-title a {
        font-size: 3.0rem;
    }

    .vce-lay-i p {
        margin-bottom: 15px;
    }

    .vce-lay-i .entry-content.lay-i-content {
        text-align: left;
    }

    .vce-lay-i .entry-content.lay-i-content .more-link {
        display: none;
    }

    .vce-lay-i .vce-read-more {
        border: 1px solid;
        border-radius: 4px;
        padding: 6px 0 7px;
        margin: 15px 0 20px;
        display: inline-block;
        width: 130px;
        text-align: center;
        text-decoration: none;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }

    .vce-lay-i .vce-read-more:hover {
        color: #FFF;
    }

    /* Slider-spezifische Anpassungen */
    .vce-slider-pagination .vce-lay-i {
        width: 767px;
        margin-right: 19px;
        margin-left: -1px;
    }

    .vce-sid-none .vce-slider-pagination .vce-lay-i {
        width: 1097px;
    }

    /* Grid/nth-child Spacing wie andere Layouts */
    .vce-sid-right .vce-lay-i,
    .vce-sid-left .vce-lay-i {
        margin: 0 0 20px 0;
    }

    .vce-sid-none .vce-lay-i {
        margin: 0 0 20px 0;
    }
    
    .entry-wrapper {
        margin-left: 40px;
    }

}


/*========================================
  TABLET LANDSCAPE (1024px - 1200px)
  Kleinere Anpassungen für 50/50 Split
========================================*/

@media only screen and (min-width: 1024px) and (max-width: 1200px) {

    .vce-lay-i .entry-title a {
        font-size: 2.4rem;
        line-height: 1.1;
    }

    .vce-lay-i .meta-image {
        width: 48%;
        margin-right: 30px;
    }

}


/*========================================
  TABLET PORTRAIT (671px - 1023px)
  Layout A Stil: Bild oben, Content zentriert
========================================*/

@media only screen and (min-width: 671px) and (max-width: 1023px) {

    .vce-lay-i {
        float: left;
        width: 100%;
        /*padding-bottom: 15px;*/
        margin: 0 0 20px 0;
    }

    /* Bild: Full-Width oben */
    .vce-lay-i .meta-image {
        float: left;
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .vce-lay-i img {
        width: 100%;
        max-height: 400px;
        object-fit: cover;
    }

    .vce-slider-pagination .vce-lay-i .meta-image {
        max-height: 400px;
        overflow: hidden;
    }

    /* Header & Content: Zentriert */
    .vce-lay-i .entry-header {
        margin: 0 0 10px;
        text-align: center;
        float: left;
        width: 100%;
    }

    .vce-lay-i .meta-category {
        text-align: center;
        display: block;
    }

    .vce-lay-i .entry-title {
        text-align: center;
        padding: 0 50px;
        margin: 0 auto 10px;
        max-width: 600px;
        line-height: 1.18;
    }

    .vce-lay-i .entry-title a {
        font-size: 2.4rem;
        line-height: 1.25;
    }

    .vce-lay-i .entry-meta {
        text-align: center;
    }

    .vce-lay-i .entry-content {
        text-align: center;
        padding: 0 50px;
        margin: 0 auto;
        float: left;
        width: 100%;
    }

    .vce-lay-i .entry-content.lay-i-content {
        text-align: center;
        max-width: 600px;
    }

    .vce-lay-i p {
        margin-bottom: 15px;
    }

    .vce-lay-i .vce-read-more {
        border: 1px solid;
        border-radius: 4px;
        padding: 6px 0 7px;
        margin: 15px auto 20px;
        display: block;
        width: 130px;
        text-align: center;
        text-decoration: none;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }

    .vce-lay-i .vce-read-more:hover {
        color: #FFF;
    }

    /* Slider-Anpassungen */
    .vce-slider-pagination .vce-lay-i {
        width: 100%;
        margin: 0 0 20px;
    }

    .vce-sid-none .vce-slider-pagination .vce-lay-i {
        width: 100%;
    }

}


/*========================================
  MOBILE (bis 670px)
  Layout A Stil: Kompakter, alles zentriert
========================================*/

@media only screen and (max-width: 670px) {

    .vce-lay-i {
        float: left;
        width: 100%;
        /*padding-bottom: 15px;*/
        margin: 0 0 20px 0;
    }

    /* Bild: Full-Width oben */
    .vce-lay-i .meta-image {
        float: left;
        width: 100%;
        margin-right: 0;
        margin-bottom: 12px;
    }

    .vce-lay-i img {
        width: 100%;
        max-height: 250px;
        object-fit: cover;
    }

    .vce-slider-pagination .vce-lay-i .meta-image {
        max-height: 250px;
        overflow: hidden;
    }

    /* Header & Content: Zentriert mit weniger Padding */
    .vce-lay-i .entry-header {
        margin: 0 0 10px;
        text-align: center;
        float: left;
        width: 100%;
    }

    .vce-lay-i .meta-category {
        text-align: center;
        display: block;
    }

    .vce-lay-i .entry-title {
        text-align: center;
        padding: 0 20px;
        margin: 0 auto 10px;
        line-height: 1.25;
    }

    .vce-lay-i .entry-title a {
        font-size: 2.0rem;
        line-height: 1.3;
    }

    .vce-lay-i .entry-meta {
        text-align: center;
    }

    .vce-lay-i .entry-content {
        text-align: center;
        padding: 0 20px;
        margin: 0 auto;
        float: left;
        width: 100%;
    }

    .vce-lay-i .entry-content.lay-i-content {
        text-align: center;
    }

    .vce-lay-i p {
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 22px;
    }

    .vce-lay-i .vce-read-more {
        border: 1px solid;
        border-radius: 4px;
        padding: 6px 0 7px;
        margin: 15px auto 20px;
        display: block;
        width: 130px;
        text-align: center;
        text-decoration: none;
        font-size: 14px;
        -webkit-transition: all .1s ease-in-out;
        -moz-transition: all .1s ease-in-out;
        -ms-transition: all .1s ease-in-out;
        -o-transition: all .1s ease-in-out;
        transition: all .1s ease-in-out;
    }

    .vce-lay-i .vce-read-more:hover {
        color: #FFF;
    }

    /* Slider-Anpassungen */
    .vce-slider-pagination .vce-lay-i {
        width: 100%;
        margin: 0 0 20px;
    }

}


/*========================================
  ZUSÄTZLICHE ANPASSUNGEN
  Für Konsistenz mit anderen Layouts
========================================*/

/* Format Icon Positioning (falls verwendet) */
.vce-lay-i .vce-format-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

@media only screen and (max-width: 1023px) {
    .vce-lay-i .vce-format-icon {
        top: 10px;
        right: 10px;
    }
}

/* Meta Category Styling */
.vce-lay-i .meta-category a {
    font-size: 14px;
    line-height: 26px;
    display: inline-block;
}

@media only screen and (max-width: 670px) {
    .vce-lay-i .meta-category a {
        font-size: 13px;
        line-height: 22px;
    }
}

/* Entry Meta */
.vce-lay-i .entry-meta div,
.vce-lay-i .entry-meta div a {
    line-height: 1.29;
    display: inline-block;
    text-decoration: none;
}

.vce-lay-i .entry-meta div a:hover {
    text-decoration: underline;
}

/* Sidebar-Varianten */
.vce-sid-none .vce-lay-i {
    width: 100%;
}

.vce-sid-right .vce-lay-i,
.vce-sid-left .vce-lay-i {
    width: 100%;
}

/* Clearfix */
.vce-lay-i:after {
    content: "";
    display: table;
    clear: both;
}