/* ========================================
   TYPO3 Text Element - Layout 20
   Große Headline links, Fließtext rechts
   ======================================== */

/* Wrapper für 2-Spalten-Layout */
.frame-layout-20.frame-type-text > header,
.frame-layout-20.frame-type-text > header + p,
.frame-layout-20.frame-type-text > header + * {
    max-width: 1433px;
    margin: 0 auto;
}

/* Grid/Flex Layout für Header + Content */
.frame-layout-20.frame-type-text {
    max-width: 1433px;
    margin: 0 auto;
    padding: 80px 0 55px 0;
    display: grid;
    overflow: hidden;
    grid-template-columns: 46% 47%;
    gap: 5%;
    align-items: start;
}

/* ========================================
   Linke Spalte - Große Headline (H2)
   ======================================== */

.frame-layout-20.frame-type-text header {
    grid-column: 1;
    padding: 0;
}

.frame-layout-20.frame-type-text h2 {
    font-size: 4.8rem;
    font-weight: 200;
    line-height: 1.1;
    margin: 0;
    color: #000000;
}

/* "wie hausgemacht" fett */
.frame-layout-20.frame-type-text h2 strong {
    font-weight: 700;
}

/* ========================================
   Rechte Spalte - Fließtext
   ======================================== */

/* Wrapper für alle <p> Tags */
.frame-layout-20.frame-type-text > p {
    grid-column: 2;
    margin: 0;
}

/* Erstes <p> - kein extra Abstand oben */
.frame-layout-20.frame-type-text > p:first-of-type {
    margin-top: 0;
}

/* Paragraphen Styling */
.frame-layout-20.frame-type-text p {
    font-size: 1.25rem;
    font-weight: 200;
    line-height: 1.8;
    color: #000000;
    margin-bottom: 24px;
}

.frame-layout-20.frame-type-text p:last-child {
    margin-bottom: 0;
}

/* Fetter Text */
.frame-layout-20.frame-type-text p strong {
    font-weight: 700;
}


/* ========================================
   Responsive - Desktop
   ======================================== */

@media (max-width: 1400px) {
    .frame-layout-20.frame-type-text {
        grid-template-columns: 38% 57%;
        gap: 5%;
    }

    .frame-layout-20.frame-type-text h2 {
        font-size: 3rem;
    }
}

@media (max-width: 1200px) {
    .frame-layout-20.frame-type-text {
        grid-template-columns: 40% 55%;
        padding: 60px 40px;
    }

}

/* ========================================
   Responsive - Tablet
   ======================================== */

@media (max-width: 991px) {
    .frame-layout-20.frame-type-text {
        grid-template-columns: 1fr; /* Single Column */
        gap: 40px;
        padding: 50px 30px;
    }

    .frame-layout-20.frame-type-text header,
    .frame-layout-20.frame-type-text > p {
        grid-column: 1;
    }

    .frame-layout-20.frame-type-text h2 {
        font-size: 2.25rem;
        margin-bottom: 0;
    }

    .frame-layout-20.frame-type-text p {
        font-size: 1.125rem;
        margin-bottom: 20px;
    }
}

/* ========================================
   Responsive - Mobile
   ======================================== */

@media (max-width: 768px) {
    .frame-layout-20.frame-type-text {
        padding: 40px 20px;
        gap: 30px;
    }

    .frame-layout-20.frame-type-text h2 {
        font-size: 1.875rem;
    }

    .frame-layout-20.frame-type-text p {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {
    .frame-layout-20.frame-type-text {
        padding: 40px 20px;
    }

    .frame-layout-20.frame-type-text h2 {
        font-size: 1.625rem;
    }

}

/* ========================================
   Print
   ======================================== */

@media print {
    .frame-layout-20.frame-type-text {
        grid-template-columns: 1fr;
        gap: 20px;
        page-break-inside: avoid;
    }

    .frame-layout-20.frame-type-text header,
    .frame-layout-20.frame-type-text > p {
        grid-column: 1;
    }
}