/* ==========================================
   THETA / TYPO3 Layout
   Datei: 30_layout.css

   Ziel:
   - 2-, 3- und 4-Spalten-Container sauber darstellen
   - Equal-Container: Spalten gleich hoch, Inhalte einzeln pflegbar
   - Keine künstlichen Text-Mindesthöhen
   - Keine Subgrid-Logik
   - Box-Höhen werden bei Bedarf durch 00_Java.js angeglichen
========================================== */

/* ==========================================
   Grundraster: 2 / 3 / 4 Spalten
========================================== */

.layout-2cols,
.layout-3cols,
.layout-4cols{
    display:grid;
    align-items:stretch;
}

.layout-2cols{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:40px;
}

.layout-3cols{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:30px;
}

.layout-4cols{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
}

.layout-2cols > .col,
.layout-3cols > .col,
.layout-4cols > .col{
    width:100%;
    min-width:0;
    min-height:100%;
}

/* ==========================================
   Equal-Container: Spalten gleich hoch
   Wichtig: Inhaltselemente bleiben natürlich hoch.
   Die THETA-Box-Höhen werden per 00_Java.js synchronisiert.
========================================== */

.layout-2cols-equal,
.layout-3cols-equal,
.layout-4cols-equal{
    display:grid;
    align-items:stretch;
}

.layout-2cols-equal{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:40px;
}

.layout-3cols-equal{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:30px;
}

.layout-4cols-equal{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:20px;
}

.layout-2cols-equal > .col,
.layout-3cols-equal > .col,
.layout-4cols-equal > .col{
    display:flex;
    flex-direction:column;
    align-items:stretch;

    width:100%;
    min-width:0;
    min-height:100%;
}

/* TYPO3-Frames in Equal-Spalten nicht künstlich strecken */
.layout-2cols-equal > .col > .frame,
.layout-3cols-equal > .col > .frame,
.layout-4cols-equal > .col > .frame{
    flex:0 0 auto;
    display:block;
    height:auto;
    min-height:0;
}

/* Letztes Element optional nach unten drücken, z.B. Button/CTA */
.layout-2cols-equal > .col > .frame:last-child,
.layout-3cols-equal > .col > .frame:last-child,
.layout-4cols-equal > .col > .frame:last-child{
    margin-top:0;
}

/* ==========================================
   THETA Boxen in Spalten
   Die eigentliche Höhenangleichung macht 00_Java.js.
   Hier nur saubere Rahmenbedingungen.
========================================== */

.layout-2cols-equal .frame-type-text:has(.theta-box),
.layout-3cols-equal .frame-type-text:has(.theta-box),
.layout-4cols-equal .frame-type-text:has(.theta-box),
.layout-2cols .frame-type-text:has(.theta-box),
.layout-3cols .frame-type-text:has(.theta-box),
.layout-4cols .frame-type-text:has(.theta-box){
    display:flex;
    flex-direction:column;
}

.layout-2cols-equal .frame-type-text:has(.theta-box) > .theta-box,
.layout-3cols-equal .frame-type-text:has(.theta-box) > .theta-box,
.layout-4cols-equal .frame-type-text:has(.theta-box) > .theta-box,
.layout-2cols .frame-type-text:has(.theta-box) > .theta-box,
.layout-3cols .frame-type-text:has(.theta-box) > .theta-box,
.layout-4cols .frame-type-text:has(.theta-box) > .theta-box{
    width:100%;
    box-sizing:border-box;
}

/* Compact-Boxen bleiben bewusst niedrig */
.layout-2cols-equal .theta-box-compact,
.layout-3cols-equal .theta-box-compact,
.layout-4cols-equal .theta-box-compact,
.layout-2cols .theta-box-compact,
.layout-3cols .theta-box-compact,
.layout-4cols .theta-box-compact{
    height:auto !important;
    min-height:0 !important;
}

/* ==========================================
   Buttons in Spalten
========================================== */

.layout-2cols-equal .theta-button-center,
.layout-3cols-equal .theta-button-center,
.layout-4cols-equal .theta-button-center,
.layout-2cols .theta-button-center,
.layout-3cols .theta-button-center,
.layout-4cols .theta-button-center{
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
}

/* ==========================================
   Bilder in Spalten
========================================== */

.layout-2cols img,
.layout-3cols img,
.layout-4cols img,
.layout-2cols-equal img,
.layout-3cols-equal img,
.layout-4cols-equal img{
    max-width:100%;
    height:auto;
}

/* Optional: TYPO3-Bildstruktur nicht unnötig aufziehen */
.layout-2cols .ce-image,
.layout-3cols .ce-image,
.layout-4cols .ce-image,
.layout-2cols-equal .ce-image,
.layout-3cols-equal .ce-image,
.layout-4cols-equal .ce-image,
.layout-2cols .ce-gallery,
.layout-3cols .ce-gallery,
.layout-4cols .ce-gallery,
.layout-2cols-equal .ce-gallery,
.layout-3cols-equal .ce-gallery,
.layout-4cols-equal .ce-gallery{
    max-width:100%;
}

/* ==========================================
   Spezialfall 2 Spalten: Text + Bild
   Nutze .layout-2cols, wenn Bild/Text unterschiedlich breit sein sollen.
========================================== */

.layout-2cols.theta-image-text,
.layout-2cols.layout-image-text{
    display:flex;
    align-items:stretch;
    gap:40px;
}

.layout-2cols.theta-image-text > .col,
.layout-2cols.layout-image-text > .col{
    min-width:0;
}

.layout-2cols.theta-image-text > .col:not(:has(.ce-image)),
.layout-2cols.layout-image-text > .col:not(:has(.ce-image)){
    flex:1 1 clamp(300px, 40%, 520px);
}

.layout-2cols.theta-image-text > .col:has(.ce-image),
.layout-2cols.layout-image-text > .col:has(.ce-image){
    flex:0 1 60%;
    max-width:60%;
}

.layout-2cols.theta-image-text > .col:has(.ce-image) .frame,
.layout-2cols.theta-image-text > .col:has(.ce-image) .ce-image,
.layout-2cols.theta-image-text > .col:has(.ce-image) .ce-gallery,
.layout-2cols.theta-image-text > .col:has(.ce-image) .ce-row,
.layout-2cols.theta-image-text > .col:has(.ce-image) .ce-column,
.layout-2cols.theta-image-text > .col:has(.ce-image) figure,
.layout-2cols.theta-image-text > .col:has(.ce-image) picture,
.layout-2cols.layout-image-text > .col:has(.ce-image) .frame,
.layout-2cols.layout-image-text > .col:has(.ce-image) .ce-image,
.layout-2cols.layout-image-text > .col:has(.ce-image) .ce-gallery,
.layout-2cols.layout-image-text > .col:has(.ce-image) .ce-row,
.layout-2cols.layout-image-text > .col:has(.ce-image) .ce-column,
.layout-2cols.layout-image-text > .col:has(.ce-image) figure,
.layout-2cols.layout-image-text > .col:has(.ce-image) picture{
    width:auto !important;
    max-width:100% !important;
}

.layout-2cols.theta-image-text > .col:has(.ce-image) img,
.layout-2cols.layout-image-text > .col:has(.ce-image) img{
    width:auto !important;
    max-width:100% !important;
    height:auto !important;
}

.layout-2cols.theta-image-text > .col:first-child:has(.ce-image),
.layout-2cols.layout-image-text > .col:first-child:has(.ce-image){
    display:flex;
    justify-content:flex-end;
}

/* ==========================================
   CTA-Container
========================================== */

.layout-cta{
    display:grid;
    grid-template-columns:2fr 2fr 2fr 1fr;
    gap:20px;
    align-items:center;
}

.layout-cta .cta-button,
.layout-cta-3cols .cta-col-button{
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
}

.layout-cta-footer{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:30px;
    align-items:center;
}

.layout-cta-footer > .col{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.layout-cta-footer .cta-button{
    display:flex;
    justify-content:center;
    align-items:center;
}

/* ==========================================
   Container: Appearance-Hintergrund nutzen
========================================== */

.layout-2cols > .col,
.layout-3cols > .col,
.layout-4cols > .col,
.layout-2cols-equal > .col,
.layout-3cols-equal > .col,
.layout-4cols-equal > .col,
.layout-cta > .cta-text1,
.layout-cta > .cta-text2,
.layout-cta > .cta-text3,
.layout-cta > .cta-button{
    background:transparent !important;
}

.layout-2cols[class*="bg-"],
.layout-3cols[class*="bg-"],
.layout-4cols[class*="bg-"],
.layout-2cols-equal[class*="bg-"],
.layout-3cols-equal[class*="bg-"],
.layout-4cols-equal[class*="bg-"],
.layout-cta[class*="bg-"],
.layout-cta-footer[class*="bg-"]{
    padding:15px 20px;
}

/* ==========================================
   TYPO3 Headlines
========================================== */

.ce-headline-left{
    text-align:left;
}

.ce-headline-center{
    text-align:center;
}

.ce-headline-right{
    text-align:right;
}

/* ==========================================
   Mobile
========================================== */

@media(max-width:1400px){

    .layout-2cols,
    .layout-3cols,
    .layout-4cols,
    .layout-2cols-equal,
    .layout-3cols-equal,
    .layout-4cols-equal,
    .layout-cta,
    .layout-cta-footer{
        grid-template-columns:1fr !important;
    }

    .layout-2cols.theta-image-text,
    .layout-2cols.layout-image-text{
        display:flex;
        flex-direction:column;
    }

    .layout-2cols.theta-image-text > .col,
    .layout-2cols.layout-image-text > .col,
    .layout-2cols.theta-image-text > .col:has(.ce-image),
    .layout-2cols.layout-image-text > .col:has(.ce-image){
        flex:0 0 auto;
        max-width:100%;
        width:100%;
    }
}

/******/


/* Accordion: 2-Spalten-Inhalte nicht in der Höhe strecken */
.theta-accordion-content .layout-2cols-equal{
    align-items:start !important;
}

.theta-accordion-content .layout-2cols-equal > .col{
    display:block !important;
    min-height:0 !important;
}

.theta-accordion-content .layout-2cols-equal > .col > .frame{
    height:auto !important;
    min-height:0 !important;
}