/* ========================================
   TYPO3 Textpic Element - NUR für Layout 10 & 11
   ======================================== */

/* Frame Container - NUR Layout 10 & 11 */
.frame-layout-10.frame-type-textpic,
.frame-layout-11.frame-type-textpic {
    padding: 56px 0;
    overflow: hidden;
}

/* CE-Textpic Container - NUR Layout 10 & 11 */
.frame-layout-10 .ce-textpic,
.frame-layout-11 .ce-textpic {
    max-width: 1433px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* ========================================
   Bild LINKS (ce-left)
   ======================================== */

.frame-layout-10 .ce-textpic.ce-left,
.frame-layout-11 .ce-textpic.ce-left {
    flex-direction: row;
    align-items: flex-start;
}

/* ========================================
   Bild RECHTS (ce-right)
   ======================================== */

.frame-layout-10 .ce-textpic.ce-right,
.frame-layout-11 .ce-textpic.ce-right {
    flex-direction: row-reverse;
    align-items: flex-start;
}

/* ========================================
   Gallery (Bild Container)
   ======================================== */

.frame-layout-10 .ce-gallery,
.frame-layout-11 .ce-gallery {
    flex: 0 0 45%;
    max-width: 580px;
}

.frame-layout-10 .ce-column,
.frame-layout-11 .ce-column {
    position: relative;
}

/* Image */
.frame-layout-10 .ce-gallery img,
.frame-layout-11 .ce-gallery img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* ========================================
   Figure Caption - Klein, unten rechts/links im Bild
   ======================================== */

/* Caption bei Bild links */
.frame-layout-10 .ce-textpic.ce-left .image-caption,
.frame-layout-11 .ce-textpic.ce-left .image-caption {
    position: absolute;
    bottom: 32px;
    right: 32px;
    color: #ffffff;
    font-size: 1.0rem;
    line-height: 1.3;
    text-align: right;
    max-width: 150px;
    margin: 0;
}

/* Caption bei Bild rechts */
.frame-layout-10 .ce-textpic.ce-right .image-caption,
.frame-layout-11 .ce-textpic.ce-right .image-caption {
    position: absolute;
    bottom: 32px;
    left: 32px;
    color: #ffffff;
    font-size: 1.0rem;
    line-height: 1.3;
    text-align: left;
    max-width: 150px;
    margin: 0;
}

/* ========================================
   Bodytext (Text Container)
   ======================================== */

.frame-layout-10 .ce-bodytext,
.frame-layout-11 .ce-bodytext {
    flex: 1;
    max-width: 660px;
}

/* Header */
.frame-layout-10 .ce-bodytext header,
.frame-layout-11 .ce-bodytext header {
    margin-bottom: 30px;
}

/* H2 - Nummer (/ 01) */
.frame-layout-10 .ce-bodytext h2,
.frame-layout-11 .ce-bodytext h2 {
    font-size: 5rem;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 22px;
}

/* H3 - Überschrift (Qualität wie frisch) */
.frame-layout-10 .ce-bodytext h3,
.frame-layout-11 .ce-bodytext h3 {
    font-size: 2.25rem;
    font-weight: 200;
    line-height: 1;
    margin-bottom: 22px;
}

/* Paragraphs */
.frame-layout-10 .ce-bodytext p,
.frame-layout-11 .ce-bodytext p {
    font-size: 1.25rem;
    font-weight: 200;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 16px;
}

.frame-layout-10 .ce-bodytext p strong,
.frame-layout-11 .ce-bodytext p strong {
    font-weight: 700;
}

/* Links */
.frame-layout-10 .ce-bodytext a,
.frame-layout-11 .ce-bodytext a {
    color: #000000;
    text-decoration: underline;
    font-weight: 700;
}

/* ========================================
   Layout 10 - Schwarze Headlines
   ======================================== */

.frame-layout-10 .ce-bodytext h2,
.frame-layout-10 .ce-bodytext h3 {
    color: #000000;
}

/* ========================================
   Layout 11 - Rote Headlines
   ======================================== */

.frame-layout-11 .ce-bodytext h2,
.frame-layout-11 .ce-bodytext h3 {
    color: #e73331;
}

/* ========================================
   Responsive - NUR für Layout 10 & 11
   ======================================== */

@media (max-width: 1200px) {
    .frame-layout-10 .ce-textpic,
    .frame-layout-11 .ce-textpic {
        gap: 50px;
    }

    .frame-layout-10 .ce-bodytext h2,
    .frame-layout-11 .ce-bodytext h2 {
        font-size: 4rem;
    }

    .frame-layout-10 .ce-bodytext h3,
    .frame-layout-11 .ce-bodytext h3 {
        font-size: 2rem;
    }
}

@media (max-width: 991px) {
    .frame-layout-10.frame-type-textpic,
    .frame-layout-11.frame-type-textpic {
        padding: 40px 20px;
    }

    .frame-layout-10 .ce-textpic,
    .frame-layout-11 .ce-textpic {
        flex-direction: column;
        gap: 40px;
    }

    /* Auf Mobile immer Bild oben, Text unten */
    .frame-layout-10 .ce-textpic.ce-left,
    .frame-layout-10 .ce-textpic.ce-right,
    .frame-layout-11 .ce-textpic.ce-left,
    .frame-layout-11 .ce-textpic.ce-right {
        flex-direction: column;
        align-items: flex-start;
    }

    .frame-layout-10 .ce-gallery,
    .frame-layout-11 .ce-gallery {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .frame-layout-10 .ce-bodytext,
    .frame-layout-11 .ce-bodytext {
        max-width: 95%;
    }

    .frame-layout-10 .ce-bodytext p,
    .frame-layout-11 .ce-bodytext p {
        font-size: 1.125rem;
    }

}

@media (max-width: 768px) {
    .frame-layout-10 .ce-textpic,
    .frame-layout-11 .ce-textpic {
        padding: 0 20px;
        gap: 30px;
    }

    .frame-layout-10 .ce-bodytext h2,
    .frame-layout-11 .ce-bodytext h2 {
        font-size: 3rem;
    }

    .frame-layout-10 .ce-bodytext h3,
    .frame-layout-11 .ce-bodytext h3 {
        font-size: 1.75rem;
    }

    .frame-layout-10 .ce-bodytext p,
    .frame-layout-11 .ce-bodytext p {
        font-size: 1.1rem;
    }

    /* Caption auf Mobile anpassen */
    .frame-layout-10 .ce-textpic .image-caption,
    .frame-layout-11 .ce-textpic .image-caption {
        font-size: 0.9rem;
        bottom: 20px;
        left: 20px;
        right: 20px;
        max-width: 200px;
    }
}

@media (max-width: 576px) {
    .frame-layout-10 .ce-bodytext h2,
    .frame-layout-11 .ce-bodytext h2 {
        font-size: 2.5rem;
    }

    .frame-layout-10 .ce-bodytext h3,
    .frame-layout-11 .ce-bodytext h3 {
        font-size: 1.5rem;
    }

}