/*========================================
  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) {

    /* WICHTIG: Umgestellt von Float auf Flexbox. Titelseiten (Cover-
       Bilder) dürfen nicht beschnitten werden und können daher je nach
       Original-Seitenverhältnis sehr hoch werden. Der alte Float-Ansatz
       (Bild floated, Text per margin-left daneben via "Shape-Wrapping")
       ist genau bei so hohen Bildern fragil und kann dazu führen, dass
       der Text unerwartet unter das Bild rutscht. Flexbox positioniert
       beide Spalten robust nebeneinander, unabhängig von der Höhe. */
    .vce-lay-i {
        display: flex;
        align-items: flex-start;
        gap: 40px;
        width: 100%;
        margin: 0 0 20px 0;
    }

    /* Clearfix (siehe .vce-lay-i:after weiter unten) wird für den
       Flexbox-Fall nicht mehr gebraucht - ein generierter Pseudo-
       Element-Inhalt würde in einem Flex-Container sonst selbst zum
       (leeren) Flex-Item und potenziell den "gap"-Abstand verfälschen. */
    .vce-lay-i:after {
        display: none;
    }

    .vce-lay-i .meta-image {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Kein object-fit/max-height mehr - das Bild wird in voller Höhe
       im Original-Seitenverhältnis angezeigt (kein Beschnitt), die
       Breite ist über die 50%-Spalte begrenzt. */
    .vce-lay-i img {
        display: block;
        width: 100%;
        height: auto;
    }

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

    .vce-lay-i .entry-wrapper {
        flex: 1;
        min-width: 0;
    }

    .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;
    }

}


/*========================================
  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 {
        flex: 0 0 48%;
        max-width: 48%;
    }

}


/*========================================
  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%;
        height: auto;
    }

    .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%;
        height: auto;
    }

    .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;
}

/* Gemeindebrief-Archiv: Scale-Hover-Effekt (vom Theme, greift generell
   auf Beitragsbilder) für Layout I hier deaktivieren - bei Titelseiten-
   Covern wirkt das Hineinzoomen störend. Nur in diesem Kontext, Layout I
   wird auch anderswo (z.B. im Slider) genutzt und soll dort unverändert
   bleiben. */
body.post-type-archive-gemeindebrief .vce-lay-i img,
body.post-type-archive-gemeindebrief .vce-lay-i .meta-image:hover img,
body.post-type-archive-gemeindebrief .vce-lay-i:hover img {
    transform: none !important;
    transition: none !important;
}

.vce-lay-i .post-list {
    font-size: 85%;
}