/* =========================================================
   cards-fix.css
   Zentrale Korrekturdatei fuer Startseite und Unterseiten
   ========================================================= */

:root{
    --card-gap: 10px;

    --card-vertical-width: 306px;
    --card-vertical-height: 622px;

    --card-horizontal-width: 622px;
    --card-horizontal-height: 306px;
    --card-horizontal-image-width: 235px;

    --video-card-width: 854px;
    --video-inner-width: 852px;
    --video-inner-height: 480px;
}

/* =========================================================
   1) Globale Startseiten-Contentcontainer
   ========================================================= */

#mainspacekeeper,
#fixed_content,
#mainscrolldiv,
#ilContentContainer,
#il_center_col,
.ilContentFixed,
.il-layout-page-content .container-fluid,
.il-layout-page-content .row{
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    box-sizing:border-box !important;
}

#mainspacekeeper,
#fixed_content,
#mainscrolldiv,
#ilContentContainer{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

#il_center_col{
    flex:0 0 100% !important;
    max-width:100% !important;
}

/* =========================================================
   2) Grundraster fuer Kartenlisten
   ========================================================= */

.card-columns,
.startseite-team-page .team-card-list{
    display:flex !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
    align-items:flex-start !important;
    column-count:unset !important;
    column-gap:0 !important;
    gap:0 !important;
    width:100%;
    margin:0 auto !important;
    padding:0 !important;
}

.card-columns > .card,
.startseite-team-page .team-card-list > .card{
    margin:calc(var(--card-gap) / 2) !important;
}

/* =========================================================
   3) Teamseite: enge Wrapper aufbrechen
   ========================================================= */

.startseite-team-page #ilContentContainer,
.startseite-team-page #il_center_col,
.startseite-team-page #mainscrolldiv,
.startseite-team-page .ilContentFixed,
.startseite-team-page .container-fluid,
.startseite-team-page .container{
    width:100% !important;
    max-width:100% !important;
}

.startseite-team-page .1stcontainer,
.startseite-team-page .2ndcontainer,
.startseite-team-page .3rdcontainer{
    width:92% !important;
    max-width:2400px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* =========================================================
   4) Horizontale Karten
   ========================================================= */

.card-columns > .card.card-horizontal,
.team-card-list > .card.card-horizontal{
    width:var(--card-horizontal-width) !important;
    min-width:var(--card-horizontal-width) !important;
    max-width:var(--card-horizontal-width) !important;
    height:var(--card-horizontal-height) !important;
    min-height:var(--card-horizontal-height) !important;
    max-height:var(--card-horizontal-height) !important;
    flex:0 0 var(--card-horizontal-width) !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:1em !important;
    box-sizing:border-box !important;
}

.card-columns > .card.card-horizontal .row2,
.team-card-list > .card.card-horizontal .row2{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    margin-left:0 !important;
    margin-right:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:1em !important;
    overflow:hidden !important;
}

/* Gesamte horizontale Kachel sauber rund */
.card-columns > .card.card-horizontal,
.card-columns > .card.card-horizontal .row2,
.card-columns > .card.card-horizontal .col-md-7,
.card-columns > .card.card-horizontal .card-block,
.team-card-list > .card.card-horizontal,
.team-card-list > .card.card-horizontal .row2,
.team-card-list > .card.card-horizontal .col-md-7,
.team-card-list > .card.card-horizontal .card-block{
    border-radius:1em !important;
    overflow:hidden !important;
}

/* Linke Bildspalte:
   Bild selbst als eigener runder Block mit Abstand zum Text */
.card-columns > .card.card-horizontal .wrapthumbnail,
.team-card-list > .card.card-horizontal .wrapthumbnail{
    flex:0 0 var(--card-horizontal-image-width) !important;
    width:var(--card-horizontal-image-width) !important;
    min-width:var(--card-horizontal-image-width) !important;
    max-width:var(--card-horizontal-image-width) !important;
    height:var(--card-horizontal-height) !important;
    padding:1px !important;
    display:block !important;
    overflow:visible !important;
    border-radius:0 !important;
    box-sizing:border-box !important;
}

.card-columns > .card.card-horizontal .wrapthumbnail > a,
.team-card-list > .card.card-horizontal .wrapthumbnail > a{
    display:block !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border-radius:1em !important;
}

.card-columns > .card.card-horizontal .thumbnail,
.team-card-list > .card.card-horizontal .thumbnail{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    margin:0 !important;
    padding:0 !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    border-radius:1em !important;
    overflow:hidden !important;
    background-clip:padding-box !important;
}

/* Rechte Textspalte */
.card-columns > .card.card-horizontal .col-md-7,
.team-card-list > .card.card-horizontal .col-md-7{
    flex:0 0 calc(100% - var(--card-horizontal-image-width)) !important;
    max-width:calc(100% - var(--card-horizontal-image-width)) !important;
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
    height:var(--card-horizontal-height) !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Innerer Inhaltsblock */
.card-columns > .card.card-horizontal .card-block,
.team-card-list > .card.card-horizontal .card-block{
    display:flex !important;
    flex-direction:column !important;
    justify-content:flex-start !important;
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    padding:8px 18px 12px 18px !important;
    min-width:0 !important;
    box-sizing:border-box !important;
}

/* Titel horizontal */
.card-columns > .card.card-horizontal .card-title,
.card-columns > .card.card-horizontal .card-title a,
.team-card-list > .card.card-horizontal .card-title,
.team-card-list > .card.card-horizontal .card-title a{
    display:block !important;
    margin-bottom:6px !important;
    line-height:1.1 !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    hyphens:auto !important;
    -webkit-hyphens:auto !important;
    -ms-hyphens:auto !important;
}

/* Fliesstext */
.card-columns > .card.card-horizontal .card-text,
.team-card-list > .card.card-horizontal .card-text{
    margin-bottom:8px !important;
    line-height:1.35 !important;
    overflow-wrap:break-word !important;
    word-break:break-word !important;
    min-width:0 !important;
    flex:1 1 auto !important;
    overflow:hidden !important;
}

/* Metafooter unten reservieren */
.card-columns > .card.card-horizontal .metafooter,
.team-card-list > .card.card-horizontal .metafooter{
    margin-top:auto !important;
    width:100% !important;
    min-width:0 !important;
    padding-top:4px !important;
    flex:0 0 64px !important;
    overflow:hidden !important;
}

/* Footer-Inhalt in horizontalen Karten */
.card-columns > .card.card-horizontal .wrapfooter,
.team-card-list > .card.card-horizontal .wrapfooter{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    width:100% !important;
    min-width:0 !important;
    padding:0 32px 0 0 !important;
}

.card-columns > .card.card-horizontal .meta-footer-thumb,
.team-card-list > .card.card-horizontal .meta-footer-thumb{
    flex:0 0 auto !important;
}

/* Autorbild */
.card-columns > .card.card-horizontal .author-thumb,
.team-card-list > .card.card-horizontal .author-thumb{
    width:56px !important;
    height:56px !important;
    display:block !important;
    object-fit:cover !important;
    border-radius:50% !important;
    overflow:hidden !important;
}

/* Textblock im Footer */
.card-columns > .card.card-horizontal .author-meta,
.team-card-list > .card.card-horizontal .author-meta{
    flex:1 1 auto !important;
    min-width:0 !important;
    line-height:1.25 !important;
    overflow:hidden !important;
}

.card-columns > .card.card-horizontal .post-name,
.card-columns > .card.card-horizontal .post-name a,
.team-card-list > .card.card-horizontal .post-name,
.team-card-list > .card.card-horizontal .post-name a{
    display:block !important;
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:break-word !important;
}

.card-columns > .card.card-horizontal .post-read-more,
.team-card-list > .card.card-horizontal .post-read-more{
    flex:0 0 auto !important;
    text-align:center !important;
    margin-left:8px !important;
    margin-right:0 !important;
}

.card-columns > .card.card-horizontal .post-read-more a,
.team-card-list > .card.card-horizontal .post-read-more a{
    display:inline-block !important;
    white-space:nowrap !important;
}

.card-columns > .card.card-horizontal .post-read-more sup,
.team-card-list > .card.card-horizontal .post-read-more sup{
    position:static !important;
    font-size:11px !important;
    line-height:1.15 !important;
}

.card-columns > .card.card-horizontal .dot,
.team-card-list > .card.card-horizontal .dot{
    display:inline-block !important;
    margin:0 6px !important;
}

/* =========================================================
   5) Vertikale Karten
   ========================================================= */

.card-columns > .card:not(.card-horizontal):not(.card-vertical):not(.listrecent),
.card-columns > .card.card-vertical{
    width:var(--card-vertical-width) !important;
    min-width:var(--card-vertical-width) !important;
    max-width:var(--card-vertical-width) !important;
    height:var(--card-vertical-height) !important;
    min-height:var(--card-vertical-height) !important;
    max-height:var(--card-vertical-height) !important;
    flex:0 0 var(--card-vertical-width) !important;
    display:block !important;
    overflow:hidden !important;
    border-radius:1em !important;
    box-sizing:border-box !important;
}

.card-columns > .card:not(.card-horizontal):not(.card-vertical):not(.listrecent) .card-title,
.card-columns > .card:not(.card-horizontal):not(.card-vertical):not(.listrecent) .card-title a,
.card-columns > .card.card-vertical .card-title,
.card-columns > .card.card-vertical .card-title a{
    display:block !important;
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
    hyphens:auto !important;
    -webkit-hyphens:auto !important;
    -ms-hyphens:auto !important;
    line-height:1.15 !important;
}

.card-columns > .card:not(.card-horizontal):not(.card-vertical):not(.listrecent) .card-block,
.card-columns > .card.card-vertical .card-block{
    padding-left:8px !important;
    padding-right:8px !important;
    box-sizing:border-box !important;
}

/* Wichtig fuer Flex-/Row-Strukturen */
.card-block,
.col-md-7,
.transp{
    min-width:0 !important;
}

/* =========================================================
   6) Abschnittstitel
   ========================================================= */

.section-title{
    padding-left:24px !important;
    padding-right:12px !important;
    box-sizing:border-box !important;
}

/* =========================================================
   7) Videocontainer
   ========================================================= */

.videocontainer .card-columns{
    display:flex !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    gap:0 !important;
    margin:0 auto !important;
    padding:0 !important;
}

.videocontainer .card-columns > .card{
    width:var(--video-card-width) !important;
    min-width:var(--video-card-width) !important;
    max-width:var(--video-card-width) !important;
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    flex:0 0 auto !important;
    display:block !important;
    margin:9px auto !important;
    border-radius:1em !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
}

.videocontainer .card video,
.videocontainer .card .responsive-video{
    display:block !important;
    width:var(--video-inner-width) !important;
    min-width:var(--video-inner-width) !important;
    max-width:var(--video-inner-width) !important;
    height:var(--video-inner-height) !important;
    min-height:var(--video-inner-height) !important;
    max-height:var(--video-inner-height) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    border-radius:1em !important;
    overflow:hidden !important;
}

.videocontainer .card .row2,
.videocontainer .card .card-block{
    width:var(--video-card-width) !important;
    max-width:var(--video-card-width) !important;
    height:auto !important;
    min-height:auto !important;
    overflow:visible !important;
    box-sizing:border-box !important;
}

.videocontainer .card .card-block{
    display:block !important;
    margin:10px auto !important;
    padding:10px !important;
}

.videocontainer .card .card-text,
.videocontainer .card .metafooter{
    overflow:visible !important;
    flex:none !important;
}

/* =========================================================
   8) Sehr breite Displays
   ========================================================= */

@media (min-width:1600px){
    .startseite-team-page .1stcontainer,
    .startseite-team-page .2ndcontainer,
    .startseite-team-page .3rdcontainer{
        max-width:3000px !important;
    }
}

/* =========================================================
   9) Tablet / kleinere Desktops
   ========================================================= */

@media (max-width:991px){
    .startseite-team-page .1stcontainer,
    .startseite-team-page .2ndcontainer,
    .startseite-team-page .3rdcontainer{
        width:95% !important;
        max-width:95% !important;
    }
}

/* =========================================================
   10) Schmale Displays
   ========================================================= */

@media (max-width:767px){
    .card-columns > .card.card-horizontal,
    .team-card-list > .card.card-horizontal{
        width:340px !important;
        min-width:340px !important;
        max-width:340px !important;
        height:620px !important;
        min-height:620px !important;
        max-height:620px !important;
        flex:0 0 340px !important;
    }

    .card-columns > .card.card-horizontal .row2,
    .team-card-list > .card.card-horizontal .row2{
        flex-direction:column !important;
        flex-wrap:nowrap !important;
        height:100% !important;
    }

    .card-columns > .card.card-horizontal .wrapthumbnail,
    .team-card-list > .card.card-horizontal .wrapthumbnail{
        flex:0 0 260px !important;
        width:100% !important;
        min-width:100% !important;
        max-width:100% !important;
        height:260px !important;
        padding:1px 1px 0 1px !important;
        border-radius:0 !important;
    }

    .card-columns > .card.card-horizontal .wrapthumbnail > a,
    .team-card-list > .card.card-horizontal .wrapthumbnail > a{
        width:100% !important;
        height:100% !important;
        border-radius:1em !important;
        overflow:hidden !important;
    }

    .card-columns > .card.card-horizontal .thumbnail,
    .team-card-list > .card.card-horizontal .thumbnail{
        width:100% !important;
        height:100% !important;
        border-radius:1em !important;
        overflow:hidden !important;
    }

    .card-columns > .card.card-horizontal .col-md-7,
    .team-card-list > .card.card-horizontal .col-md-7{
        flex:0 0 calc(100% - 260px) !important;
        max-width:100% !important;
        height:calc(620px - 260px) !important;
    }

    .card-columns > .card.card-horizontal .card-block,
    .team-card-list > .card.card-horizontal .card-block{
        padding:8px 14px 12px 14px !important;
    }

    .card-columns > .card.card-horizontal .wrapfooter,
    .team-card-list > .card.card-horizontal .wrapfooter{
        padding-right:20px !important;
        gap:8px !important;
    }

    .videocontainer .card-columns > .card{
        width:94vw !important;
        min-width:94vw !important;
        max-width:94vw !important;
    }

    .videocontainer .card video,
    .videocontainer .card .responsive-video{
        width:calc(94vw - 2px) !important;
        min-width:calc(94vw - 2px) !important;
        max-width:calc(94vw - 2px) !important;
        height:auto !important;
        min-height:auto !important;
        max-height:none !important;
    }

    .videocontainer .card .row2,
    .videocontainer .card .card-block{
        width:94vw !important;
        max-width:94vw !important;
    }
}

/* =========================================================
   11) Sehr schmale Displays
   ========================================================= */

@media (max-width:379px){
    .card-columns > .card.card-horizontal,
    .team-card-list > .card.card-horizontal{
        width:94vw !important;
        min-width:94vw !important;
        max-width:94vw !important;
        height:620px !important;
        flex:0 0 94vw !important;
    }

    .card-columns > .card:not(.card-horizontal):not(.card-vertical):not(.listrecent),
    .card-columns > .card.card-vertical{
        width:94vw !important;
        min-width:94vw !important;
        max-width:94vw !important;
        flex:0 0 94vw !important;
    }
}