:root {
    --iconAgil: '\f70c';
    --iconArbeitnehmende: '\f007';
    --iconArbeitsvertrag: '\f56c';
    --iconAufbruch: '\f201';
    --iconBeamte: '\f508';
    --iconBeihilfe: '\f0fa';
    --iconBesoldung: '\f51e';
    --iconBetriebsverfassung: '\f1ad';
    --iconCorona: '\e074';
    --iconDialog: '\f4b6';
    --iconDossier: '\f07c';
    --iconDienstrecht: '\f5fd';
    --iconDigital: '\f109';
    --iconDownloads: '\f019';
    --iconDownloadDesktop: '\e164';
    --iconEinladung: '\f044';
    --iconEqual: '\e6b6';
    --iconErgebnis: '\f4c6';
    --iconFAQ: '\f059';
    --iconFeedback: '\f4ad';
    --iconFlugblaetter: '\f1d8';
    --iconFocus: '\f648';
    --iconForderung: '\f0a1';
    --iconGrussworte:'\f256';
    --iconHomeoffice: '\e066';
    --iconInfo: '\f129';
    --iconInfoQuadrat: '\f30f';
    --iconIntern:'\e18e';
    --iconJustiz: '\f0e3';
    --iconKuendigung: '\e060';
    --iconKurznachrichten: '\f252';
    --iconInterview: '\f8cb';
    --iconLivestream:'\f03d';
    --iconMediathek: '\f87c';
    --iconRechtsprechung: '\f24e';
    --iconRueckblick: '\f323';
    --iconPersonalvertretung: '\f500';
    --iconPlakat: '\f543';
    --iconPodcast: '\f130';
    --iconProfil: '\f47f';
    --iconProgramm:'\e0d2';
    --iconSeiteStift: '\e211';
    --iconStart:'\f78a';
    --iconStandpunkt: '\e220';
    --iconTarif: '\f085';
    --iconTermine: '\f073';
    --iconUmfrage: '\f759';
    --iconVeranstaltung: '\e530';
    --iconVersorgung: '\f47c';
    --iconVertrag: '\f573';
    --iconVideo: '\f144';
    --iconVielfalt: '\f63d';
    --iconVita: '\f2bb';
    --iconWahlen: '\f733';
}
/* Allgemein */
.dce-cbanner { position: relative; }
.dce-cbanner .headline,.dce-cbanner .subheadline {font-family: var(--fontHeadline);}
.dce-cbanner .headline a, .dce-cbanner a span { color: #fff;}

.dce-cbanner .cbanner-back img { width: 100%; height: auto; }
.dce-cbanner .cbanner-link { display: flex; }
.dce-cbanner .button { box-sizing: border-box;}
.dce-cbanner .button a::before, .dce-cbanner .button.passive::before {font-family: var(--fontAwesome); font-weight: 200; display: block; margin-bottom: 10px; padding: 0;}

/* Allgemein Fix-Nav Mobil */
.dce-cbanner.mobile-banner  { z-index: 2; width: 100%; }
.dce-cbanner.mobile-banner .cbanner-link .button { width: auto; flex: 1; border-top: 1px solid #566a73; border-right: 1px solid #566a73; }
.dce-cbanner.mobile-banner .cbanner-link .button span  { display: none; }
.dce-cbanner.mobile-banner .cbanner-link .button a, .dce-cbanner.mobile-banner .cbanner-link .button.passive { padding: 12px 0 2px;  }
.dce-cbanner.mobile-banner .cbanner-link .button::before, .dce-cbanner.mobile-banner .cbanner-link .button a::before {  font-size: 36px; }
.dce-cbanner.mobile-banner .button a::before, .dce-cbanner.mobile-banner .button.passive::before { transform: scale(.8);}

/* Layout-1 und Layout-2 allgemein */
.dce-cbanner.layout-1, .dce-cbanner.layout-2 { background-color: var(--contentBlue); }
.dce-cbanner.layout-1 .cbanner-link, .dce-cbanner.layout-2 .cbanner-link { max-width: 1320px; margin: auto; flex-wrap: wrap;  }
.dce-cbanner.layout-1 .conversion, .dce-cbanner.layout-2 .conversion { position: absolute;  top: 14%; left: 3%; display: flex; flex-direction: column;}
.dce-cbanner.layout-1 .conversion .headline, .dce-cbanner.layout-2 .conversion .headline { font-size: calc(20px + (68 - 20) * ((100vw - 320px) / (1200 - 320))); color: #fff; }
.dce-cbanner.layout-1 .cbanner-link, .dce-cbanner.layout-2 .cbanner-link { border-top: 1px solid #566a73; }
.dce-cbanner.layout-1 .button, .dce-cbanner.layout-2 .button { width:33.3333%; border-right: 1px solid #566a73; border-bottom: 1px solid #566a73; }
.dce-cbanner.layout-1 .button a, .dce-cbanner.layout-1 .button.passive,
.dce-cbanner.layout-2 .button a, .dce-cbanner.layout-2 .button.passive { display: flex; flex-direction: column; align-items: center; color: #fff; padding: 20px  6px; box-sizing: border-box; height: 100%;}
.dce-cbanner.layout-1 .button a::before, .dce-cbanner.layout-1 .button.passive::before,
.dce-cbanner.layout-2 .button a::before, .dce-cbanner.layout-2 .button.passive::before { font-size: clamp(38px,3vw,53px);}
.dce-cbanner.layout-1 .button a:hover, .dce-cbanner.layout-1 .button a.current,
.dce-cbanner.layout-2 .button a:hover, .dce-cbanner.layout-2 .button a.current { background-color: #30423d; transition: background-color, 300ms; }
.dce-cbanner.layout-1 .button.passive, .dce-cbanner.layout-2 .button.passive { color:  #b7b7b7; }
.dce-cbanner.layout-1 .button.b1, .dce-cbanner.layout-2 .button.b1 {border-left: 1px solid #566a73;}

/* Layout-1 allgemein */
.dce-cbanner.layout-1 .cbanner-pictures { text-align: center; padding: 20px 0;  }
.dce-cbanner.layout-1 .cbanner-pictures [class^=image-]  { width: 42%; }
.dce-cbanner.layout-1 .button { font: clamp(16px, 2.1vw, 21px) var(--fontNav); }
.dce-cbanner.layout-1 .button.b1 a::before, .dce-cbanner.layout-1 .button.b1.passive::before  {content: var(--iconInfo);}
.dce-cbanner.layout-1 .button.b2 a::before, .dce-cbanner.layout-1 .button.b2.passive::before {content: var(--iconForderung);}
.dce-cbanner.layout-1 .button.b3 a::before, .dce-cbanner.layout-1 .button.b3.passive::before {content: var(--iconTermine);}
.dce-cbanner.layout-1 .button.b4 a::before, .dce-cbanner.layout-1 .button.b4.passive::before {content: var(--iconFlugblaetter);}
.dce-cbanner.layout-1 .button.b5 a::before, .dce-cbanner.layout-1 .button.b5.passive::before {content: var(--iconDownloads);}
.dce-cbanner.layout-1 .button.b6 a::before, .dce-cbanner.layout-1 .button.b6.passive::before { content: var(--iconErgebnis);}

/* Layout-2 allgemein */
.dce-cbanner.layout-2 .button { font-family: var(--fontNav); font-size: calc(12px + (16 - 12) * ((100vw - 300px) / (1050 - 300)));}
.dce-cbanner.layout-2 .button.b1 a::before {content: var(--iconStart);}
.dce-cbanner.layout-2 .button.b2 a::before, .dce-cbanner.layout-2 .button.b2.passive::before {content: var(--iconLivestream);}
.dce-cbanner.layout-2 .button.b3 a::before, .dce-cbanner.layout-2 .button.b3.passive::before {content: var(--iconProgramm);}
.dce-cbanner.layout-2 .button.b4 a::before, .dce-cbanner.layout-2 .button.b4.passive::before {content: var(--iconMediathek);}

@media (min-width: 768px) {
    /* Layout-1 und Layout-2 allgemein */
    .dce-cbanner.layout-1 .button, .dce-cbanner.layout-2 .button { flex: 1; width: auto !important; border-bottom: unset;}

    /* Layout-1 allgemein */
    .dce-cbanner.layout-1 picture {display: block !important;}/* !important um alle anzusprechen die auf Smartphone display: none gesetzt sind */
    .dce-cbanner.layout-1 .cbanner-pictures {position: relative; padding: 0; }

    /* Layout-2 allgemein   */
    .dce-cbanner.layout-2 .conversion { left: 14%; top: 29%;}
}

@media (min-width: 992px) {
    /* Layout-2 allgemein */
    .dce-cbanner.layout-2 .cbanner-link { flex-wrap: nowrap; }
    .dce-cbanner.layout-2 .conversion { top: 34%; }
}