/*-----| PARAMS |---------------------------------------------------------------------------------------------------------------- WHITE rgba( 255,255,255,1 ) ffffff BLACK rgba( 50,50,50,1 ) 323232 BLUE rgba( 0,88,162,1 ) 0058a2 YELLOW ffaf36 Z-Stack Header: 1000 Main: 10 Footer: 1 background: #d4eaf6; -------| END PARAMS |--------------------------------------------------------------------------------------------------------------*/ /*====================================================================================================================================================== */ /*-----| Skelleton |------------------------------------------------------------------------------------------------------------- */ html { height: 100%; font-size: 16px; font-family: 'Roboto', sans-serif; } @media screen and (min-width: 640px) { html { font-size: calc(16px + 2 * ((100vw - 640px) / 1280)); } } @media screen and (min-width: 1920px) { html { font-size: 18px; } } h1 { font-size: 3.25rem; font-weight: 300; } h2 { font-size: 2rem; font-weight: 300; } h3, .fNavi, .fc-left h2 { font-size: 1.625rem; font-weight: 500; } h4 { font-size: 1.25rem; font-weight: 400; } h5 { font-size: 1.125rem; } @media screen and (max-width: 640px) { h1 { font-size: 2.25rem; font-weight: 300; } h2 { font-size: 1.75rem; font-weight: 300; } h3, .fNavi, .fc-left h2 { font-size: 1.35rem; font-weight: 500; } h4 { font-size: 1.125rem; font-weight: 400; } h5 { font-size: 1.05rem; } } strong, b { font-weight: 700; } .textright { text-align: right;} .textsmall { font-size: 0.8rem; } body { height: 100%; line-height: 1.5; } body > table { width: 100%; max-width: 100%; min-height: 100vH; } body > table > tbody > tr, body > table > tbody > tr > td { height: 100%; } #goUp { display: none; position: fixed; right: 0; bottom: 48px; z-index: 100000; width: 32px; height: 32px; background: #ffffff; border-radius: 6px 0 0 6px; line-height: 30px; text-align: center; box-shadow: 0 0 20px rgba( 0,0,0,0.2 ); cursor: pointer; } #goUp:hover { background: #0058a2; color: #ffffff; } body.scrolled #goUp { display: block; } main .block_10000 > h1, main .block_10000 > h2 { padding-bottom: 30px; } main .block_10000 > p, main .block_10000 > table, main .block_10000 > h3, main .block_10000 > h4, main .block_10000 > h5 { padding-bottom: 15px; } main .block_10000 > ul, main .block_10000 > ol, main .block_10000 > ul > li, main .block_10000 > ol > li { padding-bottom: 8px; } main .block_10000 > *:last-child { padding-bottom: 0; } /*-----| End Skelleton |------------------------------------------------------------------------------------------------------------- */ /*-----| End Header 1 |------------------------------------------------------------------------------------------------------------- */ /*=========================================================================================================================================================================================================================================================*/ /***********************************************************************************************************************************************************************************************************************************************************/ /*=========================================================================================================================================================================================================================================================*/ /*-----| SIDENAVIGATION |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #cms_sidebar { position: relative; z-index: 1; height: 0; } #cms_sidebar > div { position: absolute; left: -270px; width: 240px; padding: 30px 0; } #cms_sidebar > div > div > ul { padding: 20px 0 0 0; } #cms_sidebar > div > div > ul > li { list-style: none; border-bottom: 1px solid #d4eaf6; } #cms_sidebar > div > div > ul > li:first-of-type{ border-top: 1px solid #d4eaf6; } #cms_sidebar > div > div > ul > li > a { display: block; /*height: 51px;*/ padding: 9px 20px 9px 10px; line-height: 30px; font-size: 1.125rem; color: #0083C7; border-top: 1px solid #ffffff; border-bottom: 1px solid #ffffff; } #cms_sidebar > div > div > ul > li > a:hover { background: #f4f9fe; color: #0083C7; } #cms_sidebar > div > div > ul > li.current > a { position: relative; background: #0083C7; color: #ffffff; } #cms_sidebar > div > div > ul > li.current > a:before { display: block; content: "\f078"; height: 51px; position: absolute; top: 50%; right: 10px; margin-top: -10px; line-height: 20px; font-size: 10px; font-family: "FontAwesome"; } #cms_sidebar > div > div > ul > li > div > ul { padding: 20px 0; } #cms_sidebar > div > div > ul > li > div > ul > li { list-style: none; } #cms_sidebar > div > div > ul > li > div > ul > li > a { position: relative; display: block; padding: 8px 20px 8px 25px; line-height: 24px; font-size: 1.125rem; color: #0083C7; } #cms_sidebar > div > div > ul > li > div > ul > li > a:hover { background: #f4f9fe; color: #0083C7; } #cms_sidebar > div > div > ul > li > div > ul > li.current > a { position: relative; background: #f4f9fe; color: #0083C7; } #cms_sidebar > div > div > ul > li > div > ul > li.current > a:before { display: block; content: "\f054"; height: 51px; position: absolute; top: 50%; right: 10px; margin-top: -10px; line-height: 20px; font-size: 10px; font-family: "FontAwesome"; } @media screen and (max-width: 1599px) { #cms_sidebar { display: none; } } /*-----| END SIDENAVIGATION |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*-----| INDEX A-Z / ONLINE Schalter |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .inlineabc { margin: -2px; } .inlineabc ul { padding: 0 !important; } .inlineabc ul li { padding: 2px; list-style: none; } .inlineabc ul li.breaker { width: 100%; padding: 0; } .inlineabc ul li span, .inlineabc ul li a { display: block; width: 34px; height: 44px; border-style: solid; border-width: 1px; border-radius: 4px; line-height: 42px; text-align: center; } #schalter .inlineabc > ul:nth-of-type(1) li:nth-of-type(1) a { width: 72px; } .inlineabc ul li span { color: #cccccc; border-color: #eeeeee; } .inlineabc ul li a { color: #0083C7; border-color: #d4eaf6; } .inlineabc ul li a:hover, .inlineabc ul li.current a { border-color: #0083C7; } @media screen and (max-width: 640px) { .inlineabc ul li.breaker { display: none; } } .az_letter_lst { position: relative; padding: 0 0 0 90px !important; } .az_letter_lst li { list-style: none; } .az_letter_lst li:first-of-type { position: absolute; left: 0; top: 0; } .az_letter_lst li:first-of-type h1 { line-height: 50px; } .az_letter_lst li a { display: block; position: relative; padding: 0 0 0 12px; line-height: 28px; } .az_letter_lst li a:before { display: block; content: "\f054"; position: absolute; left: 0; top: 0; font-size: 10px; line-height: 28px; font-family: "FontAwesome"; } .az_search_lst { margin: -30px; } .az_search_lst ul { padding: 0 !important; } .az_search_lst ul li { list-style: none; } .az_search_lst ul li a { display: block; position: relative; padding: 0 0 0 12px; line-height: 28px; } .az_search_lst ul li a:before { display: block; content: "\f054"; position: absolute; left: 0; top: 0; font-size: 10px; line-height: 28px; font-family: "FontAwesome"; } .schalterTbl { width: 100%; } .schalterTbl td { padding: 15px 10px; line-height: 30px; white-space: nowrap; } .schalterTbl td:first-of-type { width: 100%; padding-left: 20px; white-space: normal; } .schalterTbl td:last-of-type { padding-right: 20px; } .schalterTbl thead tr td { padding-bottom: 25px; font-size: 2rem; font-weight: 300; color: #0083C7; border-bottom: 3px solid #0083C7; } .schalterTbl tbody tr td { font-size: 1.25rem; border-bottom: 1px solid #e3f1fd; } .schalterTbl tbody tr td a.svgimg { float: left; display: inline-block; width: 25px; height: 27px; text-align: center; background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 959px) { .schalterTbl thead { display: none; } .schalterTbl, .schalterTbl tbody, .schalterTbl tbody tr, .schalterTbl tbody tr td { display: block; } .schalterTbl tbody tr { padding: 5px 10px; border-top: 1px solid #e3f1fd; } .schalterTbl tbody tr:after { display: block; content: ""; clear: both; } .schalterTbl tbody tr td { float: left; padding: 5px 10px !important; border-bottom: none; } .schalterTbl tbody tr td:nth-of-type(1), .schalterTbl tbody tr td:nth-of-type(2), .schalterTbl tbody tr td:nth-of-type(3) { width: 100%; } } /*-----| END INDEX A-Z / ONLINE Schalter |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*-----| BAUGESUCHE |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .bauTbl { width: 100%; } .bauTbl td { padding: 10px 0; } .bauTbl td:first-of-type { padding: 10px 15px 10px 0; line-height: 24px; } .bauTbl td:last-of-type { padding: 10px 0 10px 15px; line-height: 24px; } .bauTbl thead tr td { padding-bottom: 25px; font-size: 1.5rem; font-weight: 300; color: #0083C7; border-bottom: 3px solid #0083C7; } .bauTbl tbody tr { border-bottom: 3px solid #e3f1fd; } .bauTbl tbody tr.hide { display: none !important; } .bauTbl tbody tr td span { display: none; } @media screen and (max-width: 768px) { .bauTbl, .bauTbl tbody, .bauTbl tbody tr, .bauTbl tbody tr td { display: block; } .bauTbl td:first-of-type { padding: 10px 0; white-space: normal; } .bauTbl td:last-of-type { padding: 0 0 10px 0; } .bauTbl thead { display: none; } } .bhs { padding-bottom: 15px; } .bhs:last-child { padding-bottom: 0; } .bhs span { display: block !important; font-weight: bold; } .searchbox_small { background: #eeeeee; } .searchbox_small .cms_padding_1 { padding: 5px 15px; } /*-----| END BAUGESUCHE |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*-----| CMS CATEGORY CLASSES |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .catpadding { padding: 30px 0; } .categorypaddingwithbordertop { padding: 30px 0; border-top: 1px solid #efefef; } /*-----| END CMS CATEGORY CLASSES |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ /*-----| CMS ARTICLE CLASSES |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .portrait { padding: 20px; } .portrait div.art.block { position: relative; min-height: 50%; padding: 16.6666%; } .portrait div.cms_img { position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; padding: 20px; border: 1px solid #E8E7E8; border-radius: 4px; display: flex; flex-wrap: wrap; align-content: center; align-items: center; } .portrait div.cms_img .cms_img_zoom { display: none; } .portrait div.cms_img picture { position: relative; display: block; width: 100%; padding: 25%; } .portrait div.cms_img picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: contain; } .portrait div.cms_img .picture { position: relative; display: block; width: 100%; padding: 25%; } .portrait div.cms_img .picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: contain; } .portrait div.cms_img .cms_img_bg img { display: none; } .portrait div.cms_img .cms_alt { display: block; width: 100%; padding: 8% 0 2% 0; line-height: 1.5; text-align: center; } .portrait div.cms_img .cms_legend { display: block; width: 100%; font-size: 2rem; font-weight: 300; line-height: 1.5; text-align: center; } .portrait div.cms_img .cms_legend span { font-size: 1.25rem; } @media screen and (max-width: 1400px) { .portrait div.art.block { width: 33.3333%; min-height: 33.3333%; padding: 10px; } .portrait div.cms_img { position: static; height: 100%; } } @media screen and (min-width: 960px) and (max-width: 1100px) { .portrait div.art.block { width: 50%; } .portrait > div > div > div { height: auto; } } @media screen and (min-width: 641px) and (max-width: 959px) { .portrait div.art.block { width: 33.3333% !important; padding: 10px; } .portrait div.cms_img { position: static; height: 100%; } } @media screen and (max-width: 640px) { .portrait div.art.block { width: 50% !important; min-height: 33.3333%; padding: 10px; } .portrait div.cms_img { position: static; height: 100%; } } .serviceslinks .cms_img a { display: block; color: #000000; } .serviceslinks .cms_img a:hover { color: #0083C7; } .serviceslinks .servicelink_imagebox { position: relative; padding: 50%; margin-bottom: 15px; } .serviceslinks .servicelink_imagebox picture { position: absolute; left: 15px; top: 0; right: 15px; bottom: 0; } .serviceslinks .servicelink_imagebox picture img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: contain; } .serviceslinks .cms_legend { text-align: center; font-style: normal; font-size: 18px; } /*-----| END CMS ARTICLE CLASSES |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .openinghours { padding: 30px; background: #e8e7e8; } .openinghours .select_box { background: #ffffff; border-radius: 4px; } .openinghours_box > div { margin: 0 -30px; } .box_navigation { margin: 0 -30px; } .box_navigation ul li { list-style: none; } .box_navigation ul li a { display: block; min-height: 100%; padding: 20px; border: 2px solid #E3F1FD; border-radius: 4px; color: #000000; text-align: center; opacity: 1; } .box_navigation ul li a:hover { border: 2px solid #0083C7; } .box_navigation ul li a:hover h2, .box_navigation ul li a:hover h4 { color: #0083C7; } .box_navigation ul li a > div { height: 100%; min-height: 130px; } .box_navigation ul li a > div > div { width: 100%; } .box_service { margin: 0 -30px; } .box_service ul li { list-style: none; } .box_service ul li a { display: block; color: #000000; text-align: center; opacity: 1; } .box_service ul li a h4 { font-weight: 500; } .box_service ul li a:hover h4 { color: #0083C7; } .box_service ul li a > div:first-of-type { padding: 10px; text-align: center; } .box_service ul li a > div:first-of-type i { font-size: 3rem; } .box_service ul li a > div:first-of-type div { padding: 15%; background-repeat: no-repeat; background-position: center; background-size: contain; } .box_section { margin: 0 -30px; } .box_section ul li { list-style: none; } .box_section ul li.ns > div { position: relative; padding: 20px; text-align: center; cursor: pointer; height: 100%; border: 2px solid #ffffff; border-radius: 4px; } .box_section ul li.ns.open > div { border: 2px solid #0083C7; } .box_section ul li.ns.open > div:before { display: block; content: ""; position: absolute; left: 50%; bottom: -20px; margin: 0 0 0 -15px; border-style: solid; border-width: 15px; border-color: transparent transparent #0083C7 transparent; } .box_section ul li.ns div h4 { font-weight: 500; } .box_section ul li.ns div:hover h4 { color: #0083C7; } .box_section ul li.ns div > div:first-of-type { padding: 10px; } .box_section ul li.ns div > div:first-of-type div { padding: 15%; background-repeat: no-repeat; background-position: center; background-size: contain; } .box_section ul li#ns_det > div { margin: -12px 0 0 0; border-top: 2px solid #0083C7; background: #e3f1fd; } /*-----| AGENDA |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ .agenda_lst { padding: 0 !important; } .agenda_lst li { padding: 0 0 20px 0; list-style: none; } .agenda_lst li:last-of-type { padding: 0; } .agenda_lst li > div { position: relative; padding: 15px; /*padding: 20px 20px 20px 100px;*/ border-radius: 4px; border: 2px solid #E8E7E8; cursor: pointer; } .agenda_lst li > div:before { display: block; content: none; /*content: "\f005";*/ position: absolute; left: 20px; top: 20px; width: 54px; height: 54px; padding: 1px 0 0 1px; line-height: 49px; text-align: center; font-family: "FontAwesome"; font-size: 24px; color: #7A7E82; border-radius: 50%; border: 2px solid #7A7E82; box-sizing: border-box; } .agenda_lst .agenda_date { padding: 0 0 15px 0; color: #7A7E82; opacity: 0.8; } .agenda_lst .agenda_title { padding: 0 0 15px 0; } .agenda_lst .agenda_text { height: 34px; padding: 0 0 15px 0; line-height: 19px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .agenda_lst table { width: 100%; } .agenda_lst table td:first-of-type { padding: 3px 6px 0 0; white-space: nowrap; } .agenda_lst table td:last-of-type { width: 100%; padding: 3px 0 0 0; } .agenda_lst table tr:last-of-type td:last-of-type { padding-right: 100px; } .agenda_lst .agenda_more { position: absolute; right: 20px; bottom: 20px; color: #0083C7; opacity: 0.8; } .agenda_lst .agenda_more span { display: none; } .agenda_lst li > div:hover { border-color: #0083C7; } .agenda_lst li > div:hover:before { border-color: #0083C7; color: #0083C7; } .agenda_lst li > div:hover .agenda_title { color: #0083C7; } .agenda_lst li > div:hover .agenda_more { opacity: 1; } .agenda_lst li > div:hover .agenda_more span { display: inline; } #ui-datepicker-div { z-index: 100 !important; } .evt_date { } .evt_date table { width: 100%; } .evt_date table td:first-of-type { white-space: nowrap; padding: 5px 15px 0 0; } .evt_date table td:last-of-type { width: 100%; padding: 5px 0 0 0; } .evt_text { padding: 15px 0 0 0; } .evt_price { padding: 15px 0 0 0; } .evt_contact { padding: 15px 0 0 0; } .evt_place { padding: 15px 0 0 0; } .evt_organizer { padding: 15px 0 0 0; } #agenda_frame .flex_box_25 { width: 25% !important; } #agenda_frame .flex_box_75 { width: 75% !important; } #agenda_frame .frm_input_box { padding-bottom: 15px; } #agenda_frame .frm_input_box:last-child { padding-bottom: 0; } #agenda_frame .frm_input_box > *:first-child { width: 20%; text-align: right; padding-right: 15px; font-weight: bold; line-height: 40px; } #agenda_frame .frm_input_box > *:last-child { width: 80%; } #agenda_frame .frm_button button { position: relative; height: 100%; padding: 50%; } #agenda_frame .frm_button button:before { display: block; content: "\f002"; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; line-height: 64px; text-align: center; font-family: "FontAwesome"; font-size: 48px; box-sizing: border-box; } @media screen and (max-width: 640px) { #agenda_frame .frm_input_box > *:first-child { display: none; } #agenda_frame .frm_input_box > *:last-child { width: 100% !important; } } #infobox { position: relative; min-height: 48px; margin: 20px 0 0 0; padding: 20px; border: #0083C7 solid; border-width: 2px 2px 2px 48px; } #infobox:before { display: block; content: "\f129"; position: absolute; left: -36px; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 0; line-height: 24px; text-align: center; font-family: "FontAwesome"; font-size: 24px; box-sizing: border-box; color: #ffffff; } /*=========================================================================================================================================================================================================================================================*/ @media screen and (min-width: 960px) { .home_left { padding-right: 15px; } .home_right { padding-left: 15px; } } /*-----| Footer |--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ footer { margin-top: 80px; } footer a { color: #ffffff; } footer a:hover { color: #000000; } footer .cms_img { position: relative; padding: 20%; background: #ffffff; border-radius: 4px; } footer .cms_legend { display: none; } footer .cms_img a { display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } footer .cms_img picture { display: block; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; } footer .cms_img picture img { width: 100%; height: 100%; object-position: center; object-fit: contain; } footer .cms_img .picture { display: block; position: absolute; left: 10px; top: 10px; right: 10px; bottom: 10px; } footer .cms_img .picture img { width: 100%; height: 100%; object-position: center; object-fit: contain; } footer .cms_img .cms_img_zoom { display: none; } footer article.partnerlinks .cms_padding_1 { padding: 25px 15px; } footer article.partnerlinks .cms_padding_1 .cms_padding_1 { padding: 5px 15px; } /*-----| End Footer |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ /*-----| MAIN |------------------------------------------------------------------------------------------------------------- */ main { display: block; } main:after { display: block; content: ""; visibility: hidden; height: 1px; margin-top: -1px; } main .inlinesearch { background: #d4eaf6; border-radius: 4px; } main .inlinesearch h2 { color: #0083C7; line-height: 60px; } .nopaddingbutmargin { padding-bottom: 30px; } /*-----| End MAIN |------------------------------------------------------------------------------------------------------------- */ /*====================================================================================================================================================== */ #panorama { margin-bottom: 30px; } #panorama #static { max-width: 1920px; margin: 0 auto; } .portrait .cms_legend { font-style: normal; } .news_section.news_section_header { margin-bottom: -30px; } .news_section.news_section_header .news_date { padding: 30px 15px 0 15px; color: #77787A; } .art.block > p > a:hover { text-decoration: underline; } .news_teaser .news_info h2, .news_teaser .news_info h3 { padding: 0 0 15px 0; } .news_teaser a:hover .news_info h2, .news_teaser a:hover .news_info .news_more, .artlst_tpl_200008 > a:hover > div h3 { color: #0083C7 !important; } header nav#hNavigation > div > ul > li.current > a, header nav#hNavigation > div > ul > li > ul > li.current > a { color: #0083C7; } .background_top_themen { position: relative; height: 200px; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .top_themen_teaser h3, .top_themen_teaser p { color: #000000 !important; } .top_themen_teaser h3 { padding: 0 0 15px 0; } .artlst_tpl_200008 > a > div { position: relative; display: table; width: 100%; height: 100%; border: 2px solid rgb(232, 231, 232); } .artlst_tpl_200008 > a:hover > div { background: rgba(230,232,230, 0.4) !important; } .artlst_tpl_200008 > a > div { position: relative; } .teaser_tags { position: absolute; width: 100%; top: 0; left: 0; } .teaser_tag { display: table; float: left; background: #0083C7; color: #FFF; padding: 5px; margin: 0 1px 0 0; } .teaser_tag:last-of-type() { margin: 0 !important; } .top_themen_teaser { height: auto !important; } .catRef_200182 > div.cms_container_wide > .flex_container { padding: 15px; } .abteilungs_text a { color: #ffffff; } .abteilungs_text a:hover { text-decoration: underline; }