#headBar {min-height: 88px;}
#mainNavigation .level_1 li.submenu ul.fullSubNav {top: 181px !important}
#container {padding-top: 181px !important}


.h2size {
  font-size: 26px !important;
}
.h3size {
  font-size: 21px !important;
}
h2.eb_claim {margin-bottom: 3%}
h2.eb_claim img {display: inline-block; vertical-align: middle; margin: 0 5px}



/*MOBILE*/
@media(max-width: 1060px)
{		

	#headBar {min-height: 88px;}
	#mainNavigation .level_1 li.submenu ul.fullSubNav {top: 169px !important}
	#container {padding-top: 197px !important}

	/*HEADER*/
	#headBar {padding-top: 10px !important;padding-bottom: 10px !important; align-items: initial !important}
	#logo a {flex-wrap: wrap; gap: 7px;width: 100%}
	#searchBar {position: absolute; width: 70%; right: 0}
	#mainNavigation {display: none}
	.mm-wrapper--opened #mobileNav {display: initial}
	#mobileNavTrigger {display: flex !important}

}
@media(max-width: 768px)
{	
	#container {padding-top: 222px !important}
}	

figure a[target=_blank]:after {display: none !important}

.faqButton {height: 45px;width: 200px;background-color: var(--red);color: #fff;border: none;outline: 0;border-radius: 3.5em;text-align: center;display: flex !important;align-items: center;justify-content: center;margin: auto;margin-top: 3%;margin-bottom: 3%;}
.faqButton a {color: #fff !important}
.faqButton:hover {background-color: var(--red-hover)}

.polaroidTeaserFrame a:after {display: none !important}

/*--------------------------------------------*/
/*------- GENERAL --> COLORS -------------*/
/*--------------------------------------------*/


/*DARKGRAY*/
.darkGray {background-color: #bec8cf}
.darkestGray {background-color:#5b5b5b; color: #fff}

/*LIGHTGRAY*/
.lightgray {background-color: #f5f5f5}
.gray {background-color: #e2e5e7}

/*WHITEBACK*/
.whiteBack {background-color: #fff !important}

/*BOXED*/
.boxed {border: 1px solid #e2e5e7}

/*--------------------------------------------*/
/*------- INDIVIDUAL --> ELBINSELBRÜCKEN -------------*/
/*--------------------------------------------*/

/*--------------------------------------------*/
/*------- PAGE --> SÜDERELBBRÜCKE & Norderelbbrücke -------------*/
/*--------------------------------------------*/
.subjectTilesRow {display: flex; justify-content: center}
.infoMarktTile {width: 26%;text-align: center;margin: 0 1%;background-color: #D7DCE1;padding: 25px;border-radius: 3.5px;position: relative}
.infoMarktTile:hover {box-shadow: 2px 2px 5px rgb(0 0 0 / 30%);}

.subjectTilesRow.tiles_4 {justify-content: space-between}
.subjectTilesRow.tiles_4 .infoMarktTile {width: 24%; margin: 0}
.subjectTilesRow.tiles_4 .infoMarktTile h3 {font-size: 22px !important}

.subjectTilesRow .infoMarktTile.infoHightlight {background-color: #f0f3f5}
.subjectTilesRow .infoMarktTile .infoMarktTile_stoerer {position: absolute;bottom: 0;width: 110px;height: 110px;border-radius: 50%;background-color: var(--red);display: flex;justify-content: center;align-items: center;color: var(--white);font-family: var(--font-bold);left: calc(50% - 50px);transform: rotate(-8deg);}
/*.subjectTilesRow.tileInfoStoerer .infoMarktTile button {position: relative; padding-bottom: 130px}*/
.subjectTilesRow.tileInfoStoerer .infoMarktTile figure {max-width: 100px; margin: 0 auto}

.subjectTilesRow .pg_lightboxFrameOuter .row.center {display: flex;flex-wrap: wrap;flex-direction: column-reverse;}
.subjectTilesRow .pg_lightboxFrameOuter figure img {max-width: 100% !important}

/*--------------------------------------------*/
/*------- GENERAL --> HEADER -------------*/
/*--------------------------------------------*/

#topBar {padding-top: 10px}
#topBar.inside {padding-right: 0}
#topBar ul {display: flex; justify-content: flex-end}
#topBar ul li {display: inline-block; margin-left: 3%; font-size: 15px; opacity: 0.7}

#pageTitle {float: left;margin-left: 30px}
#pageTitle p {margin: 0; font-size: 20px; color: var(--default-textColor);font-family: var(--font-bold); line-height: normal}
#pageTitle .subHeadline {font-family: var(--font-headlight); font-size: 16px}
#pageTitle .subHeadline img {display: inline-block; width: 20px; vertical-align: middle; margin: 0}

body.home #pageTitle {display: none}

#newsticker {height: 41px;padding: 9px 0;background-color: #eaedee;border-top: 1px solid #d7dce1;}
#tickerInner {position: relative; overflow: visible; font-size: 0.9em}
#tickerInner a {color: #ec0016}
#tickerInner p {margin: 0;padding: 0;}
#newstickerlist {height: 26px;overflow: hidden;position: absolute;top: 0;white-space: nowrap;}
#newstickerlist {white-space: nowrap;}
#infoMail {display: none}


/*--------------------------------------------*/
/*------- GENERAL --> Newsletter Button -------------*/
/*--------------------------------------------*/
#nlButton {height: 83px; width: 83px;position: fixed; overflow: hidden; bottom: 12.2rem; right: 4rem;border-radius: 50px; background-color: var(--red); z-index: 9999999;-webkit-box-shadow: 0 0.1rem 2rem 0 rgb(34 36 43 / 40%);box-shadow: 0 0.1rem 2rem 0 rgb(34 36 43 / 40%);-webkit-transition: all .3s ease;transition: all .3s ease;cursor: pointer;z-index: 999999999}
#nlButton button {width: 100%; height: 100%}
#nlButton button:focus-visible {outline-offset: -5px;border-radius: 50%;}
#nlButton img {width: 45px;margin-left: 13px;}
#nlButtonText {font-family: var(--font-bold);opacity: 1; color: #fff; font-size: 1em;position: absolute;left: 62px;width: 200px;top: 31px;}
#nlButton:hover {width: 274px}

#nlButtonLightBoxBack {display: none; position: fixed; background-color: rgba(0,0,0,0.8); top:0; left: 0; width: 100%; height: 100%; z-index: 9999999999}
#nlButtonLightBoxCloser {position: fixed; top: 3%; right: 3%; font-size: 2em; color: #fff; cursor: pointer}
#nlButtonLightBoxCloser:focus-visible {outline: 2px dashed var(--white) !important;}
#nlButtonLightBox {background-color: #fff; color: var(--default-textColor); position: fixed; width: 60%; top: 12%; left: 20%; bottom: 12%; overflow: hidden; /*padding: 3%*/;max-height: 600px;}
#nlButtonLightBox iframe {width: 100%; height: 100%; border: none; outline: 0}
#nlButtonLightBox a {color: var(--default-textColor)}
#nlButtonLightBoxBack.active {display: block}
#article-61 .contactFormCheckbox {margin-top: 0}


@media (max-width: 850px)
{
	#nlButtonLightBox {width: 80%; left: 10%}
	#article-61 .captcha {width: 100%}
	#article-61	.cBLabelOuter {width: 80% !important}
	#article-61	.row.checkbox {padding-left: 0}
	#article-61	#SUBBTN {width: 100%}
}

/*--------------------------------------------*/
/*------- GENERAL --> SOCIAL MEDIA ICONS -------------*/
/*--------------------------------------------*/
#socialMediaFrame {text-align: center}
#socialMediaFrame ul {margin-top: 4%; display: flex; justify-content: center; align-items: center; overflow: visible}
#socialMediaFrame ul li {margin: 0 2%; list-style-type: none}
#socialMediaFrame ul li img {width: 35px}
#socialMediaFrame a:after {display: none}

/*--------------------------------------------*/
/*------- GENERAL --> FOOTER --> ICON MENU -------------*/
/*--------------------------------------------*/
#iconMenu {padding-left: 5%}
#iconMenu .iconCol {width: 30%; float: left; text-align: center; opacity: 0.5}
#iconMenu .iconCol .iconBox {width: 100px;
    height: 100px;
    border: 4px solid;
    border-radius: 50%;
    padding: 22px;
    font-size: 2em;
    margin: auto}
#iconMenu .iconCol:hover {opacity: 1; cursor: pointer}


/*--------------------------------------------*/
/*------- GENERAL --> FOOTER ICONS -------------*/
/*--------------------------------------------*/
#footerIconsFrame {display: flex; align-items: center; justify-content: center; text-align: center}
#footerIconsFrame .ce_text {width: 25%}
#footerIconsFrame img {max-width: 80px; min-width: 80px; margin: 0 auto}
#footerIconsFrame a:focus-visible {margin: 2px}

/*--------------------------------------------*/
/*------- GENERAL --> FOOTER --> KACHELSYSTEM -------------*/
/*--------------------------------------------*/
.footerTileFrame {display: flex; overflow: visible}
.footerTileFrame .footerTile {position: relative;margin: 1%; transition: all .75s ease-in-out;padding: 35px; border-radius: 4px; /*width: 23%;*/ box-shadow: 0 0 1rem 0 #d7dce1; text-align: center;transition: all .75s ease-in-out;cursor: pointer}
.footerTileFrame .footerTileLink {position: absolute; width: 100%; top: 0; left: 0; height: 100%}
.footerTileFrame .footerTile:hover {box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.23), 0 0.5rem 1.6rem 0 rgba(0,0,0,0.23); text-decoration: underline}
.footerTileFrame .footerTile h3 {margin: 20px 0}

/*--------------------------------------------*/
/*------- GENERAL --> FOOTER --> KACHELSYSTEM -------------*/
/*--------------------------------------------*/
.teaserTileFrame {display: flex; overflow: visible}
.teaserTileFrame > div {position: relative;margin: 1%; transition: all .75s ease-in-out;padding: 35px; border-radius: 4px; /*width: 23%;*/ box-shadow: 0 0 1rem 0 #d7dce1; text-align: center;transition: all .75s ease-in-out;cursor: pointer}
.teaserTileFrame > div .teaserTileLink {position: absolute; width: 100%; top: 0; left: 0; height: 100%}
.teaserTileFrame > div:hover {box-shadow: 0 0 0.5rem 0 rgba(0,0,0,0.23), 0 0.5rem 1.6rem 0 rgba(0,0,0,0.23); text-decoration: underline}
.teaserTileFrame > div h3, .teaserTileFrame > div h2 {font-size: 24px; margin: 20px 0}


/*--------------------------------------------*/
/*------- GENERAL --> RECHTE SPALTE (SERVICE) -------------*/
/*--------------------------------------------*/
#rightColumn {font-size: 16px}




/* KACHELSYSTEM */
.tileRow {display: flex; align-items: center; margin-bottom: 3%}
.tileRow > .backpic, .tileRow > .ce_text {width: 50%;transition: all .75s ease-in-out;}

.tileRow > div.ce_text {padding: 0 50px}
.tileRow .backpic {position: relative; overflow: hidden;border-top-left-radius: 4.5px;border-bottom-left-radius: 4.5px;}
.tileRow .backpic .copytextLayer {left: 0}


/*MIT ANIMATION
#tileRowFrame {overflow: visible}
#tileRowFrame .tileRow > .backpic {transform: translateX(-20rem);}
#tileRowFrame .tileRow > .ce_text {transform: translateX(20rem);}
#tileRowFrame .tileRow > div.ce_text {opacity: 0.6}
#tileRowFrame .tileRow.active  > .backpic, #tileRowFrame .tileRow.active > .ce_text {transform: translateX(0); opacity:1} 
*/
@media(max-width: 768px)
{
	.tileRow {flex-wrap: wrap}
	.tileRow > .backpic, .tileRow > .ce_text {width: 100%}	
	.tileRow div.ce_text {padding: 3% 0}
}



/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*--------------------------- HOME ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/

body.home .backpic #headline h2 img {display: inline-block; vertical-align: middle;margin: 0 10px;max-width: 25px}


#IAKMAP {padding: 10px;text-align: center;margin-bottom: 3%}
#IAKMAP iframe {box-shadow: 0 0 1rem 0 #d7dce1;}
#IAKMAP iframe:hover {box-shadow: 0 0 0.5rem 0 rgba(0,0,0,.23), 0 0.5rem 1.6rem 0 rgba(0,0,0,.2)}
#IAKMAP #skipMapLink:focus-visible {position: initial;display: block;height: auto;padding: 10px 0;width: 40%;margin: auto;margin-bottom: 3%}


.home .mod_breadcrumb {display: none}

#scrollIAKBtn {position: absolute;font-size: 0.9em;top: 550px;right: 10px;box-shadow: 2px 2px 5px rgb(0,0,0,0.3);}
#scrollIAKBtn button {padding: 12px;background-color: #fff; color: var(--default-textColor); cursor: pointer; border-radius: 4px;}
#scrollIAKBtn:hover button {background-color: var(--default-textColor); color: #fff}
#scrollIAKBtn button:focus-visible {}

/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*--------------------------- PAGES ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
.projectNavigation ul {overflow: visible; display: flex; flex-wrap: wrap}
.projectNavigation ul li {margin-right: 5px; padding: 0 10px 0 0; list-style-type: none}
.projectNavigation ul li:after {content: "|"; margin-left: 10px}
.projectNavigation ul li:last-child:after {content: ""}
.projectNavigation ul li a, .projectNavigation ul li button {cursor: pointer; color: var(--default-textColor); margin: 2px}
.projectNavigation ul li a:focus-visible, .projectNavigation ul li button:focus-visible {display: inline-block; padding: 4px}
.projectNavigation ul li a:hover, .projectNavigation ul li button:hover {color: var(--red)}

/*--------------------------------------------*/
/*------- PAGE --> SÜDERELBBRÜCKE & Norderelbbrücke -------------*/
/*--------------------------------------------*/
#euLogo {margin-bottom: 6%; margin-top: 0; text-align: center}
#euLogo img {max-width: 300px; margin: 0 auto;display: inline-block}




/*--------------------------------------------*/
/*------- PAGE --> PLANUNG -------------*/
/*--------------------------------------------*/
#loadTreeFrame {position: relative; padding-right: 0; padding: 7% 0 10% 0}
#loadTreeLine {position: absolute; width: 2px; top: 0; bottom: 5%; background-color: #646973; left: calc(50% - 1px)}
#loadTreeLine:before {content:""; width: 20px; height: 20px; border-radius: 50%; background-color: #646973; position: absolute; top: 0; left: -9px}
#loadTreeLine:after {content:""; width: 20px; height: 20px; border-radius: 50%; background-color: #646973; position: absolute; bottom: 0; left: -9px}


#loadTreeFrame div.ce_text {
    -webkit-transition: all 1.85s cubic-bezier(.23,1,.32,1);
    -moz-transition: all 1.85s cubic-bezier(.23,1,.32,1);
    -ms-transition: all 1.85s cubic-bezier(.23,1,.32,1);
    -o-transition: all 1.85s cubic-bezier(.23,1,.32,1);
    transition: all 1.85s cubic-bezier(.23,1,.32,1);
}

#loadTreeFrame div.ce_text {width: 50%; position: relative; opacity: 0.2; transform: translatey(10rem); margin-top: -7%}
#loadTreeFrame div.ce_text.active {opacity: 1;transform: translatey(0rem)} 


#loadTreeFrame div.ce_text h3 {font-size: 30px}
#loadTreeFrame div.ce_text p , #loadTreeFrame div.ce_text h4 {margin-bottom: 10px; font-size: 15px}
#loadTreeFrame div.ce_text h5 {font-size: 18px}
#loadTreeFrame div.ce_text:before {content:""; position: absolute; top: 47px; width: 8%; height: 2px; background-color: #646973} 
#loadTreeFrame div.ce_text:nth-child(2n):before {right: 0}
#loadTreeFrame div.ce_text:nth-child(2n-1):before {left: 0}

#loadTreeFrame div.ce_text:nth-child(2n) {text-align: right; padding-right: 5%}
#loadTreeFrame div.ce_text:nth-child(2n-1) {margin-left: 50%; text-align: left; padding-left: 5%}

/*MIT BILD*/
#loadTreeFrame div.ce_text.loadTreeWithPic:before {top: -13px}
#loadTreeFrame div.ce_text.loadTreeWithPic figure {position: absolute;top: -75px;width: 132px;height: 132px;border-radius: 50%;border: 2px solid #646973}
#loadTreeFrame div.ce_text.loadTreeWithPic figure img {max-width: 200%}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n-1) figure {left: -24px}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n-1) h3 {padding-top: 80px}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) figure {right: -28px}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) h3 {padding-top: 80px}


/*--------------------------------------------*/
/*------- PAGE --> PFAs -------------*/
/*--------------------------------------------*/
.pfa .ce_image.first img {margin: 0 auto}

/***************************************************/
/******BREAKS*******/
/***************************************************/

@media (max-width: 1300px)
{
	
	.subNavPoint {background-color: #ec0016;color: #fff;}
	.subNavPoint strong span {position: relative}
	.subNavPoint strong span:after {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #fff; border-radius: 3.5px}
	
	/*HOME --> IAK*/
	#IAKMAP {position: relative;padding-bottom: 38%;height: 0;overflow: hidden;width: 100%;height: auto}
    #IAKMAP iframe {max-width: 100%;box-shadow: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%}
	
}

@media (max-width: 1182px)
{
	/*LOATREE 1182 !!*/
	#loadTreeFrame {padding-bottom: 7%; margin-bottom: 6%}
	#loadTreeLine {left: 3%; bottom: 0}
	#loadTreeFrame div.ce_text {width: 95%; margin-top: 0;margin-bottom: 5%}
	#loadTreeFrame div.ce_text h3 {font-size: 24px}
	#loadTreeFrame div.ce_text:before {width: 4%}
	#loadTreeFrame div.ce_text:nth-child(2n-1) {margin-left: 3%;width: 95%;}
	#loadTreeFrame div.ce_text:nth-child(2n) {padding-right: 0;text-align: left;padding-left: 5%;margin-left: 3%;}
    #loadTreeFrame div.ce_text:nth-child(2n):before {left: 0}

}

@media (max-width: 950px)
{
    .teaserTileFrame {flex-wrap: wrap}
    .teaserTileFrame > div {width: 100%; }

}

@media (max-width: 768px)
{


	.footerTileFrame {display: inherit}
	.footerTileFrame .footerTile {width: 95%; margin: 0 auto; margin-bottom: 3%}
	#footerIconsFrame {display: block}
	#footerIconsFrame .ce_text {width: 100%; margin-bottom: 12%}
	
	/*GENERAL ELEMENTS*/
	.mod_article > .backpic, .mod_article > .backpic .container .inside {height: 300px !important; font-size: 0.75em; min-height: 0}
	.mod_article .backpic {background-attachment: initial !important; overflow: hidden}
	#ScrollToTop {transform: scale(0.7); right: 0px; bottom: 10px}
	
	#socialMediaFrame ul li {margin: 0 4%}
	#socialMediaFrame ul li img {width: 30px}
	
	/*HOME*/
	#scrollIAKBtn {right: 7px !important;top: 180px;font-size: 14px;}
	#nlButton {transform: scale(0.7);right: 0%;bottom: 80px}

	/*PROJEKTE*/
	.projectNavigation ul {display: block; margin-bottom: 6%}
	.projectNavigation ul li {text-align: center; position: relative; padding: 10px 0}
	.projectNavigation ul li:after {content: "";width: 100%;height: 1px;bottom: 0px;margin: 0;background-color: var(--default-textColor);display: block;position: absolute;}	

	.subjectTilesRow {display: block}
	.infoMarktTile, .subjectTilesRow.tiles_4 .infoMarktTile {width: 100%; margin-bottom: 3%}
	.infoMarktTile figure {max-width: 100px; margin: 0 auto}
	
	#meilensteine {margin-top: 6%; margin-bottom: 6%}
	#infomarkt {margin-top: 3%}

}

@media (max-width: 575px)
{

	/*LOATREE 575 !!*/
	#loadTreeLine {left: calc(50% - 1px);z-index: -1;}
	#loadTreeFrame div.ce_text:before {display: none}
	#loadTreeFrame div.ce_text {background-color: #fff; text-align: center !important; padding: 20px 0 !important;opacity: 1 !important}
	
}




