.ytelement {border: 2px solid #f00;display: flex;align-items: center;justify-content: center;font-family: var(--font-bold)}
.ytelement:before {content: "Videos mit BahnX funktionieren nicht unter dev-Seiten. Zum Testen BahnX in diesem Element deaktivieren.";width: 80%;text-align: center;}


body {overflow-x: hidden}

/*
#article-256 > .backpic .layer, #article-2 > .backpic .layer, #article-128 > .backpic .layer 
{position: absolute;width: 100%;height: 100%;top: 0;left: 0;
background: -webkit-radial-gradient(bottom right, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0) 36%);
background: radial-gradient(bottom right, rgba(0, 0, 0, 0.65) 10%, rgba(0, 0, 0, 0) 36%);}
*/
.row > .ce_text.col6 > p {margin-top: 0}

/*--------------------------------------------*/
/*------- GENERAL --> TRANSITION + LAYOUT BUILDER -------------*/
/*--------------------------------------------*/
#header, .home .mod_newslist, #downloadWindow, .serviceIcon, 
#mainNav ul li, #mainNav ul.level_1 li a:before, #seaBox, #navBar, #ScrollToTop, #mainNav .level_1 > li:before
{
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    -moz-transition: all .45s cubic-bezier(.23,1,.32,1);
    -ms-transition: all .45s cubic-bezier(.23,1,.32,1);
    -o-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
}


#usercentrics-root {overflow: hidden}

.noMargin {margin: 0}
.noPadTop {padding-top: 0}

/*--------------------------------------------*/
/*------- GENERAL --> FONTS -------------*/
/*--------------------------------------------*/



.headline10 h3, .headlineAsH4 h3 {font-size: 1em}
.headline09 h3, .headlineAsH5 h3, h3.headlineAsH5, .h3ash5 h3  {font-size: 0.85em;}
.headlineAsH5 h2, h2.headlineAsH5 {font-size: 0.85em;margin-bottom: 15px}
h2.headlineAsH5:after, .headlineAsH5 h2:after {display: none}

span > a, p > a, td > a {color: var(--red)}
figure a[target=_blank]:after {content: ""}

.textup {text-transform: uppercase}
.textbold {font-family: var(--font-bold)}
.textcenter, .pagination {text-align: center}
.textright {text-align: right}
.smalltext, .caption, .layout_short, p.info, p.back > a, .mod_eventlist .header {font-size: 12px;line-height: 1.6em}

strong, p > a, #pg_sJRSCurMonth, td > a {font-family: var(--font-bold)}
#main .ce_text p a:hover, #main td > a:hover {text-decoration: underline}




/*--------------------------------------------*/
/*------- 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}


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

/*CONTAO TOOLBAR*/
.cto-toolbar {z-index: 999999999999999999999999999999999;position: fixed;top: 0;width: 100%;}


/*SPRACHWECHSLER*/
body.normLanguagePage .mod_changelanguage li.active {display: none}
.mod_changelanguage {position: absolute;top: 98px;right: 5%}
.mod_changelanguage ul {display: flex;align-items: center;flex-direction: row-reverse}
.mod_changelanguage li {display: inline-block;margin: 0 2px;}
.mod_changelanguage li:last-child:after {content: "|"; padding-left: 5px}
body.lsExplainPage .mod_changelanguage li:last-child:after {content: "";}
.mod_changelanguage li.active {color: #ec0015}
.mod_changelanguage li:first-child strong, .mod_changelanguage li:first-child a {display: inline-block; vertical-align: middle;display: flex;align-items: center;}
.mod_changelanguage li:first-child.active strong:after {content: url("/files/sysImg/easyReadIcon_red.png");display: inline-block;vertical-align: middle;margin-left: 5px; padding-top: 4px}
.mod_changelanguage li:first-child a:after {content: url("/files/sysImg/easyReadIcon_black.png");display: inline-block;vertical-align: middle;margin-left: 5px; padding-top: 4px}
.mod_changelanguage a:focus-visible {margin: 2px; padding: 2px}

/*--------------------------------------------*/
/*------- GENERAL --> Headerbackpics -------------*/
/*--------------------------------------------
.backpic {position: relative; overflow: hidden}
.backpic .innerInside {position: absolute; bottom: 20%; color: #fff; text-shadow: 2px 2px 10px rgba(0,0,0,0.6)}
.backpic .innerInside h1 {font-size: 4.2em; margin-bottom: 0;text-shadow: 2px 2px 5px rgba(0,0,0,0.6);}
.backpic .innerInside h2:after {display: none} 
.backpic .copytxt {position: absolute; bottom: 10px; right: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 1}

.backpic .copytextLayer {position: absolute; bottom: 0px; right: 0px; left: 10px; text-align: right; font-size: 14px; color: #fff;text-shadow: 2px 2px 5px rgba(0,0,0,0.4);z-index: 1}
.backpic .copytextLayer span {position: absolute;bottom: 0;right: -100%;z-index: 1;padding: 0.5em 0.75em;color: #fff;background: rgba(19, 24, 33, 0.5);border-radius: 0.25rem 0 0 0;backdrop-filter: blur(20px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1);}
.backpic .copytextLayer:before {color: #fff !important;background: rgba(19, 24, 33, 0.75) !important;position: absolute;bottom: 0.5rem;right: 0.5rem;z-index: 1;display: flex;align-items: center;justify-content: center;width: 1.5rem;height: 1.5rem;font-size: 1rem;line-height: 1.5rem;color: #131821;text-align: center;cursor: pointer;content: "\f1f9";font-family: "Font Awesome 5 Free";background: rgba(255, 255, 255, 0.5);border-radius: 10rem;backdrop-filter: blur(10px);transition: all 0.2s cubic-bezier(0.15,0,0.45,1)}
.backpic .copytextLayer:hover span {opacity: 1;right: 0;}
.backpic .copytextLayer:hover:before {opacity: 0}
*/
/*--------------------------------------------*/
/*------- GENERAL --> Big Red Icons -------------*/
/*--------------------------------------------*/
.iconRow .icon {text-align: center}
.iconRow .icon figure {/*width: 150px; height: 150px; border-radius: 50%; text-align: center; background-color: #ec0015;*/margin: 0 auto; margin-bottom: 30px; padding-top: 30px}
.iconRow .icon figure img {margin: 0 auto; max-width: 128px}

/*--------------------------------------------*/
/*------- GENERAL --> SERVICEICONS -------------*/
/*--------------------------------------------*/
#serviceIconsBar {position: fixed; right: 0; top: 125px;z-index: 9999999999;color: #000}
#serviceIconsBar .serviceIcon {padding: 16px 0;width: 85px;height: 85px;text-align: center;border-radius: 50%;background-color: #ec0015;margin: 10px;color: #fff;cursor: pointer;font-size: 2.2em;box-shadow: 2px 2px 5px rgb(0,0,0,0.4)}
#lsHintLink {position: fixed; right: 0; top: 220px;z-index: 9999999999;color: #000}
#lsHintLink .lsHintLinkIcon {padding: 16px 0;width: 85px;height: 85px;text-align: center;border-radius: 50%;background-color: #ec0015;margin: 10px;color: #fff;cursor: pointer;font-size: 2.2em;box-shadow: 2px 2px 5px rgb(0,0,0,0.4)}
#lsHintLink a:after {display: none}


#downloadWindow {position: fixed; top: 0; right: 0; width: 30%; height: 100vw; background-color: #F0F3F5; padding: 50px; z-index: 99999999999; margin-right: -30%}
#downloadWindow.active {margin-right: 0}

/*--------------------------------------------*/
/*------- GENERAL --> FOOTER --> SOCIALS + EU LOGO -------------*/
/*--------------------------------------------*/
#socialFrame ul {text-align: center;display: flex;justify-content: center; align-items: center}
#socialFrame li {display: inline-block; margin: 0 2%; font-size: 2.6em; color: #ec0015; cursor: pointer}
#socialFrame li a {display: flex;padding: 20px}
#socialFrame li a:after {display: none}
#twLink img {max-width: 36px}
#twLink a {background: url("https://www.karlsruhe-basel.de/files/sysImg/x-logo-black.svg") 50% 50% no-repeat;background-size: contain;height: 60px !important;width: 60px}
#twLink a:hover {background: url("https://www.karlsruhe-basel.de/files/sysImg/x-logo-white.svg") 50% 50% no-repeat;background-size: contain;}    

#fbLink:hover a {color: #3b5998}
#twLink:hover a {color: #000}
#instaLink:hover a {color: #e5006d}
#ytLink:hover a {color: #c4302b}
#socialFrame a:focus-visible {margin: 2px; padding: 2px}

/*--------------------------------------------*/
/*------- GENERAL --> FOOTER -------------*/
/*--------------------------------------------*/
#footer a:after {display: none}

#euLogo {display: flex;justify-content: flex-end;margin: 0 0 40px 0;}
#euLogo  img {max-height: 42px}
#dTaktLogo {display: flex;justify-content: flex-end; margin: 0px 0 30px 0}
#dTaktLogo a img {width: 200px; margin: 0 auto}
#dTaktLogo a[target="_blank"]::after {content: ""}

@media(max-width: 768px)
{
	#dTaktLogo {margin: 40px 0}
}


/*--------------------------------------------*/
/*------- GENERAL --> KACHELSYSTEM -------------*/
/*--------------------------------------------*/
.footerTile {float: left; position: relative; overflow: hidden}
.footerTile.col2 {font-size: 0.8em}
.footerTile .backpic {transition: all .75s ease-in-out;}
.footerTile:hover .backpic {transform: scale(1.075)}
.footerTile .inside {width: 100%; padding: 50px 20px}
.footerTile .innerInside {position: absolute; width: 100%; height: 100%; top: 0; left: 0; bottom:0; right: 0;background-color: rgba(0, 0, 0, 0.6);padding: 35px 15px}
.footerTile .innerLink {border-top: 2px solid rgba(0,0,0,0.6);border-bottom: 1px solid rgba(0,0,0,0.6);border-left: 1px solid rgba(0,0,0,0.6);border-right: 1px solid rgba(0,0,0,0.6);position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; text-shadow: 2px 2px 5px rgba(0,0,0,0.6)}
.tileFrame {border-bottom: 1px solid rgba(0,0,0,0.6);}
.footerTile .innerLink h3 {font-size: 1.8em;position: absolute; margin: 0; padding: 0 30px !important}
.footerTile.tile33 {width: 33.33333%}
.footerTile.tile66 {width: 66.66666%}
.footerTile.tile100 {width: 100%}
.footerTile h1, .footerTile h3 {hyphens: auto; -ms-hyphens: auto; -webkit-hyphens: auto;font-size: 2.4em;}

body.smallView .footerTile .backpic {height: 200px !important}
body.smallView .footerTile .innerInside {font-size: 0.5em}
.footerTile .innerLink:focus-visible {outline: 4px dashed var(--white) !important;outline-offset: -4px;width: calc(100% - 4px);height: calc(100% - 4px)}


/*--------------------------------------------*/
/*------- GENERAL --> IAG MAP -------------*/
/*--------------------------------------------*/
#mapFrame iframe {border: 0; outline: none}


/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*--------------------------- HOME ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
.home .mod_breadcrumb {display: none}

/*--------------------------------------------*/
/*------- HOME --> MOVIE -------------*/
/*--------------------------------------------*/

#head_EU_Logo {margin-top: 40px;}
#head_EU_Logo img {min-width: 215px;max-width: 400px;width: 25%}


/*LIGHTBOX*/
#videoBoxTrigger {position: absolute; right: 10px; bottom: 100px; font-size: 2em;color: #fff; display: flex; align-items: center; z-index: 9; cursor: pointer;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: #fff;
    justify-content: center;}
#videoBoxTrigger button {border: none;width: 85px;height: 85px;border-radius: 50%;color: var(--red);display: flex;align-items: center;justify-content: center}    
#videoBoxTrigger img {width: 50px;margin-top: -4px;}
#videoBoxBack {position: fixed;width: 100%;height: 100%;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(0,0,0,0.9);z-index: 9999999999}
#videoBoxCloser {position: absolute;top: 2%; right: 2%; color: #fff; font-size: 2em; z-index: 9999999999;cursor: pointer }
#videoBoxCloser button {border: none;color: #fff;font-size: 38px;}
#videoBox {position: fixed; top: 5%; bottom: 10%; width: 80%; left: 10%;z-index: 9999999999;}
#videoBoxInner {position: relative; padding-bottom: 56.5%; height: 0;}
#videoBox iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; outline: 0}

body.overflowHidden {overflow: hidden}


/*--------------------------------------------*/
/*------- HOME --> ST�RER HEADPIC -------------*/
/*--------------------------------------------*/
#redHint2 {transform: rotate(15deg);position: absolute;top: 300px;right: -39px;z-index: 9;background-color: #ec0015; border-bottom-left-radius: 3.5px;  border-top-left-radius: 3.5px;box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.2); -webkit-user-select: none; -ms-user-select: none; user-select: none}
#redHint2 a {color: #fff;padding: 15px 50px 15px 15px; display: block; font-family: var(--font-bold); font-size: 1.1rem}
#redHint2 a span {display: block}
@media (max-width: 900px)
{
	#redHint2 {transform: scale(0.6) rotate(0deg);top: 180px;transform-origin: 100% 50%;right: 0}
	#redHint2 a {font-size: 0.9em; padding: 10px}
}

#redHint {transform: rotate(15deg);position: absolute;top: 430px;right: -39px;z-index: 999999;background-color: #ec0015; border-bottom-left-radius: 3.5px;  border-top-left-radius: 3.5px;box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.2); -webkit-user-select: none; -ms-user-select: none; user-select: none}
#redHint a {color: #fff;padding: 15px 50px 15px 15px; display: block; font-family: var(--font-bold); font-size: 1.3rem}
@media (max-width: 900px)
{
	#redHint {transform: scale(0.8) rotate(0deg);top: 480px;transform-origin: 100% 50%;right: 0}
	#redHint a {font-size: 0.9em; padding: 10px}
}


#redHintRound {position: absolute;top: 350px;right: 10px;width: 200px;height: 200px;transform: rotate(-8deg);text-align: center;border-radius: 50%;z-index: 999999;background-color: #ec0015;padding: 12px;display: flex;justify-content: center;align-items: center;box-shadow: 2px 2px 5px rgb(0,0,0,0.2);-webkit-user-select: none;-ms-user-select: none;user-select: none}
#redHintRound a {color: #fff}    
@media (max-width: 1040px)
{
	#redHintRound {transform: scale(0.8) rotate(-8deg);top: 250px;transform-origin: 100% 50%;}
}
@media (max-width: 800px)
{
    #redHintRound {transform: scale(0.5) rotate(-8deg);}
}    
/*--------------------------------------------*/
/*------- HOME --> NEWSLIST -------------*/
/*--------------------------------------------*/

.IAKMAP {max-width: 1400px; margin: 0 auto; margin-bottom: 3%; height: 650px; overflow: hidden}




/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*--------------------------- PAGES ---------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------*/
/*------- PAGES --> LOGGED IN -------------*/
body.loggedInPages #mainNav li {margin: 0 2% 0 0; font-size: 0.9em}


#aktuelles-reader {position: relative}
#aktuelles-reader .pdf_link {position: absolute; bottom: 3%; left: 5%; width: 90%}
#aktuelles-reader .pdf_link a img {display: none}
#aktuelles-reader .pdf_link a:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f019";
    margin: 5px 2% 0 0;
    display: inline-block; }
#aktuelles-reader .pdf_link a:after {content:"Diesen Artikel als PDF speichern"; display: inline-block;vertical-align: middle}    

/*--------------------------------------------*/
/*------- PAGES --> PFAs -------------*/
.pfaLanding .footerTile .backpic {height: 250px !important}

/*--------------------------------------------*/
/*------- PAGES --> PFAs -------------*/
#bookNavigation, #bookNavigation .empty {display: none !important}
#bookNavigation.active {display: block !important}
#bookNavigation .prev, #bookNavigation .next {position: fixed; top: 50%; width: 50px; height: 50px; border-radius: 50px; overflow: hidden; background-color: #3c414b;z-index: 99999999999;padding: 0 20px;
    -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);}
#bookNavigation .prev:hover, #bookNavigation .next:hover {width: auto}
#bookNavigation .prev a, #bookNavigation .next a {height: 50px;color: #fff;text-align: center;display: flex;justify-content: center;align-items: center}
#bookNavigation .prev {left: 1%}
#bookNavigation .next {right: 1%}
.pfaUeberblick #bookNavigation, .noBookNavigation #bookNavigation {display: none !important}
#bookNavigation li i {font-size: 1.6}
#bookNavigation li i, #bookNavigation li span {display: inline-block;} 
#bookNavigation li span {display: none}
#bookNavigation li:hover span {display: inline-block;} 
#bookNavigation .prev span {margin-left: 10px}
#bookNavigation .next span {margin-right: 10px}
#bookNavigation .prev a:focus-visible, #bookNavigation .next a:focus-visible {height: 40px; width: 40px; border-radius: 50%; margin-left: -15px; margin-top: 5px}
/*#*/


/*--------------------------------------------*/
/*------- PAGES --> PROJEKTBESCHREIBUNG -------------*/
#mapTextRow {position: relative; min-height: 600px}
#mapTextRow .ce_image {    position: absolute;
    top: 0;
    right: 0;
    width: auto;}

/*--------------------------------------------*/
/*------- PAGES --> BAUSTELLEN BLOG -------------*/
#loadTreeFrame {position: relative; padding-right: 0; padding-top: 7%; min-height: 1700px}
#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}
#loadTreePic {position: absolute; top: 0; bottom: 0;z-index: -1; width: 100%; left: 0%;/* max-width: 1080px; min-width: 1080px*/}


#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%; overflow: hidden}
#loadTreeFrame div.ce_text.active {opacity: 1;transform: translatey(0rem)} 


#loadTreeFrame div.ce_text h2 {font-size: 30px}
#loadTreeFrame div.ce_text h2:after {display: none}
#loadTreeFrame div.ce_text h5 {margin-bottom: 10px}
#loadTreeFrame div.ce_text:before {content:""; position: absolute; top: 60px; width: 60px; 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: 60px}
#loadTreeFrame div.ce_text:nth-child(2n-1) {margin-left: 50%; text-align: left; padding-left: 60px}

/*MIT BILD*/
#loadTreeFrame {padding-bottom: 10%}
#loadTreeFrame div.ce_text.loadTreeWithPic {margin-top: -3%}
#loadTreeFrame div.ce_text.loadTreeWithPic p {margin: 0}
#loadTreeFrame div.ce_text.loadTreeWithPic h2 {margin: 0;padding: 10px 0 5px 0;}
#loadTreeFrame div.ce_text.loadTreeWithPic h2 button {border: none; outline: 0; font-family: inherit; font-size: 23px; border: none; outline: 0; padding: 0; text-align: left}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) h2 button {text-align: right}
#loadTreeFrame div.ce_text.loadTreeWithPic h2 button:focus-visible {padding: 2px}
#loadTreeFrame div.ce_text.loadTreeWithPic figure, #loadTreeFrame div.ce_text.loadTreeWithPic .row.Pic  {position: absolute;top: 0px;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 {top: -13px}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n-1) .col12 {padding-left: 150px;}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) figure, #loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) .row.Pic  {right: 60px; top: 0px}
#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) .col12 {padding-right: 150px}
#loadTreeFrame div.ce_text.loadTreeWithPic .row.Pic  {cursor: pointer}
#loadTreeFrame div.ce_text.loadTreeWithPic .bl_kat {margin-bottom: 10px}
#loadTreeFrame .pagination {position: absolute;bottom: 0;width: 100%;left: 0;margin-bottom: 0;}
#loadTreeFrame .pagination li.previous, #loadTreeFrame .pagination li.next {display: none}    
#loadTreeFrame .pagination a:focus-visible {margin: 2px; padding: 2px}


/*--------------------------------------------*/
/*------- PAGES --> KACHELSYSTEM-------------*/
/*--------------------------------------------*/
#tileRowFrame {overflow: visible}
.tileRow {height: 500px; display: table; vertical-align: middle; width: 100%}
.tileRow div {display: table-cell; vertical-align: middle; width: 50%;transition: all .75s ease-in-out; opacity: 0.7}
.tileRow div.ce_text {padding: 0 50px; transition-delay: 0.3s;}

.tileRow > div:first-child {transform: translateX(-8rem);}
.tileRow > div:last-child {transform: translateX(8rem);}
.tileRow.active > div {transform: translateZ(0);opacity: 1} 
.tileRow .backpic {border-radius: 4px}
.tileRow .ce_player video {max-width: 100%; border-radius: 4px}

.tileRow .backpic {overflow: hidden; position: relative}
.tileRow .backpic .copytextLayer {width: 100%; opacity: 1}
.tileRow .backpic .copytextLayer:hover span, .tileRow .backpic .copytextLayer:before {right: 1rem} 

/*--------------------------------------------*/
/*------- PAGES --> STRECKENABSCHNITTE -------------*/
/*--------------------------------------------*/
#PFAINSERT {min-height: 800px}
#PFAINSERT > .row > .ce_text > h3 {font-size: 2em; color: #31b3b1; margin-bottom: 10px}



/*--------------------------------------------*/
/*------- PAGES --> DOWNLOADS -------------*/
.ce_download.pgSlide {padding: 0}
.ce_download {padding: 20px 0 20px 20px; border-bottom: 1px solid #3c414b;}
.ce_download a, .ce_download span {display: inline-block}
.ce_download .text {width: 68%}
.ce_download .date {font-size: 10px}
.ce_download .size, .ce_download a {width: 15%}
.ce_download a {padding: 8px 16px;border: 1px solid #000;border-radius: 6px; text-align: center; background-color: #fff; font-size: 16px}
.ce_download a:hover {background-color: #000; color: #fff}

.layout_full .ce_download .text {font-family: var(--font-bold); width: 83%}
.layout_full .ce_download .size {display: none}

.col6 .ce_download a, .col6 .ce_download span {hyphens: auto;-moz-hyphens: auto; -webkit-hyphens: auto; font-size: 16px; vertical-align: middle}
.col6 .ce_download .size {display: none}
.col6 .ce_download a {width: 25%}
.col6 .ce_download .text {width: 74%} 

#presse .ce_download .text {width: 70%;margin-right: 2%;}
#presse .ce_download a {width: 20%}
#presse #newsKatMenu {overflow: hidden}
@media (max-width: 1320px)
{
	#presse #newsKatMenu > .col8 > div {width: 100%}
}
@media (max-width: 999px)
{

	#presse .ce_download .text, #presse .ce_download a,  #presse .ce_download .bl_katitems,  #presse .ce_download span  {display: block; width: 100% !important; float: none}
	#presse .ce_download a {margin-top: 3%}
}


/*--------------------------------------------*/
/*------- PAGE --> DOWNLOAD SLIDER ------------*/
/*--------------------------------------------*/
.ce_download.pgSlide {opacity: 1; border-radius: 4px; position: relative;}
/*.ce_download.pgSlide:before {content:"PDF"; position: absolute; top: 10px; left: 10px; padding: 2px 10px; background-color: #000; color: #fff; border-radius: 4px; font-size: 14px}*/
.ce_download.pgSlide .size {display: block; font-size: 14px}
.ce_download.pgSlide a { width: 100%; max-width: 100%; float: none}
.ce_download.pgSlide a:before {display: none}
.ce_download.pgSlide h3 {display: none; margin-bottom: 5px; z-index: 999; color: #fff}
.ce_download.pgSlide a:focus-visible {margin: 2px; padding: 2px}


.pg_downloadBackColor {padding: 80px 25px 25px 25px;background-color: #3c414b; color: #fff; height: 100%;}
.pg_downloadTitle {margin-top: 10px}

.ce_download.pgSlide {border-bottom: none}
.pg_downloadBackPicFrame a {border: none; padding: 0; float: none !important}
.pg_downloadBackPic {position: relative;border: 1px solid #3c414b}
.pg_downloadBackPic:before, .pg_downloadBackPic:after {transition: opacity .3s ease;}
.pg_downloadBackPic:before {content: ""; position: absolute; top: 0; width: 100%; left: 0; height: 100%; background-color:rgba(236,0,22,0.77);opacity: 0}
.ce_download.pgSlide:hover .pg_downloadBackPic:before {opacity: 1}
.pg_downloadBackPic:after {content: url("/files/sysImg/ic-db_action_download_32_white.svg");width: 100%;position: absolute;left: 0;top: 0%;opacity: 0;transform: scale(0.3);transform-origin: 50% 17%}
.ce_download.pgSlide:hover .pg_downloadBackPic:after {opacity: 1}    

.biggerDownloadPics .pg_downloadBackPic {height: 420px !important}

/*--------------------------------------------*/
/*------- PAGE --> LOGIN ------------*/
/*--------------------------------------------*/
#article-271 .mod_login {max-width: 650px; margin: 0 auto}


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

@media(max-width: 1480px)
{
	#mainNav li {margin: 0 2% 0 0}
	
	/*DOWNLOADS*/
	.ce_download {padding: 20px 0; overflow: hidden}
	.ce_download .text, .layout_full .ce_download .text {width: 100%; margin-bottom: 3%;word-break: break-word;}
	.ce_download .text a[href^="tel:"] {padding: 0;border: 0; background-color: #fff; width: auto}
	.ce_download .size, .ce_download a {width: 45%; font-size: 0.8em}
	.ce_download a {max-width: 200px; float: right}
}	

@media (max-width: 1182px)
{
	#searchBar {width: 30%}
	
	
	/*LOATREE 1182 !!*/
	#loadTreeFrame {padding-bottom: 7%; margin-bottom: 6%; padding-top: 12%}
	#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}
	
	#loadTreeFrame div.ce_text.loadTreeWithPic .row.Pic {left: calc(50% - 68px);}
	#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n-1) .col12 {padding-left: 0; padding-top: 128px}
	#loadTreeFrame div.ce_text.loadTreeWithPic:nth-child(2n) .col12 {padding-right	: 0; padding-top: 128px}

	.footerTile .innerLink h3 {-moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;}

}

@media(max-width: 1175px)
{
	#mainNav {display: none}
	#mobMenuTrigger {display: block}
	html.mm-opened #mainmenuMobile {display: initial}
}

@media (max-width: 950px)
{
	#headBar {padding: 0;height: 125px}

	#header .inside {position: relative}
	#searchBar {position: absolute;top: 8px;right: 0;padding-top: 0; width: 70%}
	#logo, #pageTitle {float: none; margin: 10px 0 0 0}
	#serviceIconsBar, #lsHintLink {transform: scale(0.6);transform-origin: 100% 50%;}
	#serviceIconsBar {top: 105px;}
	#lsHintLink {top: 170px}

	.mod_changelanguage {font-size: 16px;top: 147px; left: 90px; right: initial}
	
	#container {padding-top: 183px}

	#ScrollToTop {transform:scale(0.6);transform-origin: 100% 50%;right: 1%}

	.roundCta {width: 145px;padding-left: 100px;}
	.roundCta:before {display: block;}
	
	/*�bersichtskarte*/
	.noBookNavigation * {-webkit-user-select: none; -ms-user-select: none; user-select: none;}

	/*------- PAGES --> TERMINE --> EVENTS -------------*/
	.event.layout_teaser {display: block !important; margin-left: 1%}
	.event.layout_teaser .col4, .event.layout_teaser .col8.last {width: 100%; flex: initial; max-width: 100%}
	.event.layout_teaser .col4 {height: 250px; margin-top: 0 !important}
	

}


@media (max-width: 768px)
{
	#main h1, #main h2, #main h3, #main h4 {-moz-hyphens: auto;-o-hyphens: auto;-webkit-hyphens: auto;-ms-hyphens: auto;hyphens: auto;}
	h1 {font-size: 1.6em}
	h2 {font-size: 1.2em}
	h2, h2.ce_headline {margin-bottom: 30px}
	h2:after {bottom: -12px; height: 5px}

	figure.image_container.float_right, figure.image_container.float_left {float: none;margin: 0 0 3% 0 !important; width: 100%}
	.ce_accordionSingle .accordion, .ce_accordionStart .accordion {padding: 0 10px 0 50px}

	.mod_changelanguage {left: 63px; top: 135px}
	
	.IAKMAP {height: auto}

	.backpic {height: 300px !important}
	.backpic .innerInside h1 {font-size: 1.7em}
	#mapTextRow .backpic {height: 600px !important}
	
	.footerTile.tile33, .footerTile.tile66 {width: 100%; float: none}
	body.smallView .footerTile .innerInside {font-size: 1em}
	.footerTile .innerInside {padding: 40px 0 0 10px}
	.footerTile .innerInside h1, .footerTile .innerInside h3 {padding-left: 0;font-size: 1em}
	
	#tileRowFrame {overflow: hidden}
	.tileRow {height: auto;margin-bottom: 3%;position: relative;padding-top: 300px;}
	.tileRow .backpic {position: absolute;top: 0;}
	
	.tileRow div {width: 100%; display: block}
	.tileRow div.ce_text {padding: 25px 0}
	
	#socialFrame li {font-size: 2em}

	.YTvideobox {height: auto !important}
	.visibleRow {overflow: hidden}
	
	/*SPECIAL FIXES*/
	#content-pfa-1-2-131 > div.visibleRow.inside.bigspace > div.row.bigspace > div {width: 100% !important; min-height: 320px}
	#content-pfa-1-0 > div.backpic > div.layer > div > div > div > div > h1 {font-size: 1.9em}
	
	.biggerDownloadPics .pg_downloadBackPic {height: 200px !important}
	
}

@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}
	#loadTreeFrame .pagination {bottom: -1%; font-size: 14px}
}




/* Foundation v2.1.4 http://foundation.zurb.com */
/* Artfully masterminded by ZURB  */

/* -------------------------------------------------- 
   Table of Contents
-----------------------------------------------------*/
/*.pinned {font-family: "DBScreenSansBold";}*/

.ce_table {position: relative;padding: 0 0 20px 20px;}
.tableBorderLeft {position: absolute; position: absolute; left: 0; top: 0; height: 95%; background-color: #ec0015;width: 4px}
.tableBorderLeft:before {content: "";position: absolute;top: -14px;left: -7px; width: 10px; height: 10px; border-radius: 50%;border: 4px solid #ec0015}
.tableBorderLeft:after {content: "";position: absolute;bottom: -14px;left: -7px; width: 10px; height: 10px; border-radius: 50%;border: 4px solid #ec0015}

table.responsive {border-collapse: collapse; text-shadow: 1px 1px 2px rgba(0,0,0,0.2); width: 100%}
table.responsive tr {border-bottom: 1px solid #d7dce1}
table.responsive .col_1 {background-color: #ec0015; color: #fff; text-align: left; padding-left: 40px}
table.responsive tr:last-child {border-bottom: 0}
table.responsive td {width: 50%}

/* -----------------------------------------
   Shared Styles
----------------------------------------- */

table th { font-family: var(--font-bold); }
table td, table th { padding: 10px 15px; text-align: left; }

/* Mobile */
@media only screen and (max-width: 767px) {
	.ce_table {margin-bottom: 6%; margin-top: 6%}
	table.responsive { margin-bottom: 0; font-size: 0.7em}
	
	.pinned { position: absolute; left: 0; top: -2px; height: 100%; background: #fff; width: 50%; overflow: hidden; overflow-x: scroll; border-left: 1px solid #d7dce1; box-shadow: 2px 2px 5px rgb(0,0,0,0.3);font-size: 0.7em}
	.pinned table { border-right: none; border-left: none; width: 100%}
	.pinned table th, .pinned table td { white-space: nowrap}
	.pinned td:last-child { border-bottom: 0; }
	.pinned tr {height: auto !important}
	
	div.table-wrapper { position: relative; margin-bottom: 0px; overflow: hidden; border-right: 1px solid #ccc; }
	div.table-wrapper div.scrollable { margin-left: 50%; }
	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
	
	table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
	table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
	
	.tableBorderLeft {left: 10px; top: -5px}
}