body { font: 17px var(--fontText), sans-serif; margin: 0; }
:root {
    --cdPink: #c40075;
    --contentBlue: #415a65;
    --contentBlueDark: #324750;
    --contentBlueLight: #597480;
    --contentGrey: #d6d6d6;
    --contentTextGrey: #666;
    --fontAwesome: FontAwesome-7-Pro, FontAwesome-7-Brands, FontAwesome-7-Duo, FontAwesome-7-Sharp;
    --fontText: Assistant, Arial, Helvetica, sans-serif;
    --fontHeadline: Fairplex-NarrowBook, "Times New Roman", serif;
    --fontNav: Khand-Light, Arial, Helvetica, sans-serif;
    --contentGap: 60px;
}
h1, h2, h3, h4, h5 { font-family: var(--fontHeadline); margin: 0; font-weight: normal; }
h1 { font-size: 1.7em; color: var(--contentBlue); margin-bottom: 40px; }
h5 { font-family: var(--fontNav);}
h6 { font-size: 1.14em; font-weight: normal; margin-top: 0; color: var(--contentBlue);}
.ce-bodytext h2 { color: var(--contentBlue); }

/* Links allgemein */
a { color: var(--cdPink); outline: none; text-decoration: none; }
a::before { font-family: var(--fontAwesome); font-weight: 300; padding-right: .35em; }
a.no-icon::before {content: none!important;}
a[class*=popup-pdf]::before { content: '\f1c1';}
a.internal::before {content: '\f15b'; }
a.external::before {content: '\f08e' !important;  }
a.arrow::before {content: '\f054'; }
a.zip::before {content: '\f1c6';}
a.popup-epaper::before {content: '\f5da'; }
a.word::before {content: '\f1c2'}
a.excel::before {content: '\f1c3'}
a span { color: var(--contentBlueLight); }
/* Read more News and MBox */
.read-more::after { content: '\f054'; font-family: var(--fontAwesome); font-weight: 300; margin-left: 6px; }
.comment { font-size: .94em; color: var(--contentBlue); }

/* 2px Abstand nach unten durch a tag um picture verhndern*/
picture img { display: block;  }

/* Grid */
main>.container { display: flex; flex-direction: column; padding: 0 30px; box-sizing: content-box; margin-top: 44px; }
body:not(.start) .opener { margin-top: -1px; }
.content { margin-bottom: 40px; }
aside, [class^=aside-] { background-color: #ececec;}
.aside-top {order: -1; margin-bottom: 30px; }
.aside-below { margin-bottom: -30px;}
section.col-content>p { font-size: 17px; }

/* Test-Iframe für Poolgroup kann November 2021 wieder raus! */
.iframe-test section.col-content { flex:1; }

/* header */
body:not(.start) header { border-bottom: 1px solid #d6d6d6; }
header .container { display: flex; padding: 28px 15px; justify-content: space-between; }

/* Suche */
.search { margin: 15px 0; }
.search .form-control  { height: 35px; }

.zw-titel { font: 1.58em var(--fontHeadline); color: var(--contentBlue); }

/* Relationen "Mehr zum Thema, lexikon etc. */
[class^=them] { display: flex; flex-flow: wrap column; margin-bottom: 40px; color: var(--contentBlue); }
[class^=them] h2 { margin-bottom: 15px; }
[class^=them] .rel-links { display: flex; flex-direction: column; gap: .3em; margin-top:.8em;}
[class^=them] h3 a { font: .9em var(--fontText); display: flex; gap:.4em; }
[class^=them] a::before { position: relative; top: 3px; width: 20px; padding:0}
[class^=them] a.extern::before { padding-right: 10px;}
[class^=them] a.arrow::before { padding:0 17px 0 2px; }
[class^=them] p { margin: 0;}

/* Lexikon */
.enc { margin-top: 15px; }
.enc ul { list-style: none; margin:0 0 15px; padding: 0;}
.enc ul li { line-height: 26px; }
.enc ul li a::before {content: '\f15b'; padding-right: 5px;}
.enc a span::before { content: '\f178'; font-family: var(--fontAwesome); font-weight: 300; padding:0 5px; }
.enc a span { color: var(--cdPink); }
#lexikon h5 { font-size: 1.25em; margin-bottom: 15px; }

/* Mitgliedsgewerkschaften */
.member ul { display:flex; gap: 10px; margin: 0 0 30px; list-style: none; padding: 0; }
.member .zw-titel { border-bottom: 1px solid #bebebe; margin-bottom: 30px; }
.member ul li:first-child {flex: 0 0 90px;}
.member ul li { font-size: .9em; }
.member img {width: 80px; }

/* Infobox */
[class^=infobox-] { color: #353a43; font-size: .86em; border: 1px solid #bebebe; border-radius: 3px; padding: 20px 20px 10px; margin: 0 0 20px; }
[class^=infobox-] p { margin: 0; }
[class^=infobox-] a { display: inline-block;  text-indent: -20px; margin: 3px 0 12px 20px; }
[class^=infobox-] h4 { margin-top: 20px; font-size: 1.14em }
[class^=infobox-] h5 { font: 1.3em var(--fontHeadline); border-bottom: 1px solid #bebebe; margin-bottom: 14px; padding-bottom: 10px;}

/* alle Tabellen */
.table { border-width: 1px 1px 0; border-style: solid; border-color: #cfcfcf #cfcfcf transparent; box-sizing: border-box;  }
.table ul { display: flex; list-style: none; margin: 0; padding: 20px 0 20px 10px;; border-bottom: 1px solid #cfcfcf;  }
.table ul.head { background-color: #f3f3f3; border-bottom: 1px solid #cfcfcf; color: var(--contentBlue); }
.table .comment { margin: 0; }
.table ul.col-2 li { width: 50%; }
.table ul.col-3 li { width: 33.3333%; }
.table ul.col-4 li { width: 25%; }
.table ul.col-5 li { width: 20%; }
.table ul.col-6 li { width: 16.666667%; }
.table ul.col-7 li { width: 14%; }
.table .comment {font-size: .9em; margin-top: 4px;}

/* Tabelle Logos Mediathek  */
.table.logos ul li:first-child { width:75%;}
.table.logos ul li:nth-child(2), .table.logos ul li:nth-child(3) { display: none;}

/* Nach-oben-Button Seite */
a.page-top { position:fixed; right:0; bottom: 22px; color:#fff;  z-index:5; background-color: var(--cdPink); padding: 14px 15px; }
a.page-top::before { font: 300 1.2em var(--fontAwesome); content: '\f077'; padding-right: 0; }

a.btn { display: block; width: 100%; color:#fff; text-align:center; border:none; background-color:var(--cdPink); padding:12px 15px; cursor:pointer; text-transform: uppercase; }
a.btn:hover { background-color:var(--contentBlue); transition: background-color 350ms; }

/* Printbutton */
a.print-site::after { content:'\f02f'; font:1.3em var(--fontAwesome); display: block;  cursor: pointer; text-align: right; position: relative; margin-bottom: -22px; top: 16px; }

/* livestream Einbindung über iframe */
.video-wrap { margin-bottom: 50px; }

/* YouTube-Consent - Anzeige im Overlay, wenn YouTube nicht erlaubt ist*/
.yt-consent { background-color:#ffffff;width:100%;position:absolute;left:0;top:0;height:100%;white-space: normal;display: flex; align-items: center; justify-content: center; }
.yt-consent h4 { font-size: 0.8em; }
.yt-consent button { font-size: 0.9em; padding:3px 5px; border:1px solid #ccc; color:var(--contentBlue); cursor:pointer; }
/* Datenschutz 7.4 */
.dbb-disallow-youtube { font-size: 1.1em; padding:5px 7px; border:1px solid #ccc; color:var(--contentBlue); cursor:pointer; background-color:#fff; }

@media (min-width: 768px) {

    h1 { font-size: 2.5em;  margin-bottom: 60px; }

    /* Grid */
    main>.container { margin-top: 60px; }


    /* header */
    header.fixed { position:fixed; width:100%; background-color:#fff; z-index:4; box-shadow: 0 1px 4px 0 var(--contentTextGrey); }
    header.fixed a.logo img { position: absolute; bottom: 15px; transition: all 0.5s ease;}
    /* Mobile Suchbox*/
    .mobile-search { display:none; }

    /* Zwei Spalten im Content */
    .content-2 { columns: 2 auto; column-gap: 10px; }
    .content-2 p { margin: 0 0 15px;}
    .content-2 a {display: inline-block; text-indent: -19px; margin-left: 19px;}

    /* Lexikon */
    .enc { display: flex; flex-wrap: wrap; }
    .enc ul:nth-child(2) { margin: 0 2%; }

    /* Relationen "Mehr zum Thema, lexikon etc. */
    /* [class^=them] a { text-indent: 0; margin-left: 0; } */

    /* Mitgliedsgewerkschaften */
    .member ul li {  font-size: 1em; }

    /* Infobox */
    [class^=infobox-] { float: left; width: 40%; margin-left: 18px; }
    .infobox-re { float: right; }

    iframe>html { overflow: hidden!important; }

    /* YouTube-Consent - Anzeige im Overlay, wenn YouTube nicht erlaubt ist*/
    .yt-consent h4 { font-size: 1.4em; }
    .yt-consent button { font-size: 1.1em; padding:5px 7px; }
}

@media (min-width: 992px) {

    /* Grid */
    main>.container {flex-direction: row; padding: 0 15px; gap: 40px; }
    .content {max-width: 860px; width: 66.666666%; margin-bottom: 0; }
    aside { overflow: hidden; width: 33.333333%; max-width: 400px; }
    .aside-top { margin-bottom: 0; }
    .aside-below { margin-bottom: 30px;}

}

@media (min-width: 1200px) {

    /* Lexikon */
    .enc ul li { line-height: 26px; font-size: .95em;}

}

@media (min-width: 1320px) {
    /* Grid */
    main>.container { padding: 0; }
    .container {gap: var(--contentGap) !important; max-width: 1320px; margin: 0 auto; box-sizing: border-box; }
    body:not(.landesbuende) .col-content { overflow: hidden; }
}