html, body, div, p, h1, h2, h3, span, a, table, td, form, input, textarea, select
{ margin: 0px; padding: 0px; font-family: 'Ubuntu', Calibri, Verdana; font-size: 16px; line-height: 24px; color: #333; }
h1 { font-size: 30px; line-height: 34px; font-weight: 200; color: rgb(6,88,166); margin: 15px 0px 35px 0px; text-transform: normal; }
body.folgeseite h1 { font-size: 32px; }
h2 { font-size: 26px; line-height: 28px; font-weight: 200; color: rgb(6,88,166); margin: 15px 0px 20px 0px; text-transform: uppercase; }
body.folgeseite h2 { margin: 35px 0px 30px 0px; text-transform: none; }
body.folgeseite h2.sub { margin: -25px 0px 45px 0px; color: rgba(6,88,166,0.4); }
h3 { font-size: 19px; line-height: 22px; font-weight: 200; color: rgb(6,88,166); margin: 20px 0px 20px 0px; text-transform: normal; }
h4 { font-size: 17px; line-height: 20px; font-weight: 200; color: rgb(6,88,166); margin: 10px 0px 10px 0px; text-transform: normal; }
body.folgeseite h1, h1.mit_linie { padding-bottom: 12px; margin-bottom: 40px; border-bottom: 1px solid rgba(6,88,166,0.25); }
h2.mit_linie { padding-bottom: 12px; margin-bottom: 40px; border-bottom: 1px solid rgba(6,88,166,0.25); }
@media only screen and (max-width: 994px) {
body.folgeseite h1 { font-size: 26px; line-height: 30px; }
body.folgeseite h2 { font-size: 22px; line-height: 26px; margin: 25px 0px 20px 0px; text-transform: none; }
}
hr { background-color: none; border: 0; height: 1px; border-bottom: 1px solid #d0e0ee; }
.centered { text-align: center; }
body { width: 100%; height: 100%; background-color: #fff; }
img { vertical-align: middle; outline: none; }
a { outline: none; }
div { box-sizing: border-box; }
input, textarea, select { border-radius: 0; }
input[type=text], textarea { -webkit-appearance: none; } /* verhindert den Schatten-Effekt auf iOS-Geräten und im Safari*/
.clear { display: block; clear: both; }
.rounded { -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
.rounded_oben { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px;
-moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px; }
.rounded_unten { -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }
.rounded_links { -moz-border-radius-topleft: 3px; -webkit-border-top-left-radius: 3px; border-top-left-radius: 3px;
-moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; border-bottom-left-radius: 3px; }
.rounded_rechts { -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; border-top-right-radius: 3px;
-moz-border-radius-bottomright: 3px; -webkit-border-bottom-right-radius: 3px; border-bottom-right-radius: 3px; }
.rounded_big { -moz-border-radius: 10px; border-radius: 10px; -webkit-border-radius: 10px; }
.shadow { -moz-box-shadow: 0px 2px 10px #000; -webkit-box-shadow: 0px 2px 10px #000; box-shadow: 0px 2px 10px #000; }
.shadow { /*IE6 hack*/ _border: 1px solid #a6a6a6; }
.shadow { /*IE8 hack*/ border: 1px solid #a6a6a6\9; }
.shadow_big { -moz-box-shadow: 0px 0px 30px #333; -webkit-box-shadow: 0px 0px 30px #333; box-shadow: 0px 0px 30px #333; }
.shadow_big { /*IE6 hack*/ _border: 2px solid #333; }
.shadow_big { /*IE8 hack*/ border: 2px solid #333\9; }
.shadow_light { -moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.4); box-shadow: 0px 0px 10px rgba(0,0,0,0.4); }
.opacity_25 { opacity: 0.25; filter(opacity=0.25); }
.strtoupper { text-transform: uppercase; }
.small { font-size: 11px; }
.smaller { font-size: 10px; }
.grau { color: #999; }
.gruen { color: #50b147; }
.blau { color: #0058a5; }
.gelb { /*color: #edc112;*/ color: #c69900; }
.align_left { display: inline; float: left; }
.align_right { display: inline; float: right; }
/* Icons */
i { color: inherit; }
/* ---- Links ---- */
a, a:link, a:active, a:visited { text-decoration: none; color: #0058a5; font-size: inherit; transition: all 0.60s ease-out 0s; }
a:hover { text-decoration: none; color: #0270d0; font-size: inherit; }
a.bn { padding: 10px 18px; background-color: #bbb; color: #fff; cursor: pointer; }
a.bn_small { padding: 7px 12px; font-size: 14px; }
a.bn_bg_ci { background-color: red; color: #fff; font-size: 19px; fonts-weight: 900; padding: 12px 20px; text-align: center; text-transform: uppercase; transition: all 0.35s ease-in-out 0s; }
a.bn_bg_ci:hover { background-color: red; text-decoration: none; }
a.bn_bg_ci i.fa { color: #fff; margin-right: 8px;}
a.bn_border_ci { background-color: transparent; border: 1px solid red; color: red; transition: all 0.35s ease-in-out 0s;}
a.bn_border_ci:hover { background-color: transparent; border: 1px solid red; text-decoration: none; }
a.bn_border_ci i.fa { color: red; margin-right: 8px; }
a.bn_border { display: inline-block; border: 1px solid #d4d4d5; text-transform: uppercase; background-color: #fff; color: #58595b; padding: 8px 16px; text-align: center; box-sizing: border-box; transition: all 0.35s ease-in-out 0s; z-index: 10; }
a.bn_border:hover { border: 1px solid #58595b; color: #252525; text-decoration: none; }
a.bn_border i { color: inherit; font-size: 40px; line-height: 26px; font-weight: 100; }
.bn_blau { font-size: inherit; color: #fff; padding: 5px 10px; background-color: #3c7ec1; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.2s ease-in-out 0.25s; }
.bn_blau:hover { background-color: #78b6e4; text-decoration: none; }
a.bn_weiss, .bn_weiss { width: auto; height: auto; font-size: inherit; color: #fff; padding: 5px 10px; background-color: #fff; text-align: center; text-decoration: none; transition: all 0.2s ease-in-out 0.25s; }
a.bn_weiss:hover, .bn_weiss:hover { background-color: #e3edf9; text-decoration: none; }
a.bn_raute_blau { padding: 3px 0px 4px 27px; color: #0058a5; cursor: pointer; background-image: url(../images/raute-blau@3x.png); background-repeat: no-repeat; background-position: 0px 7px; background-size: 20px auto; transition: all 0.20s ease-out 0s;}
a.bn_raute_blau:hover { color: #0058a5; background-position: 3px 7px; }
.bn_raute_gelb { padding: 3px 0px 4px 27px; color: #c69900; background-image: url(../images/raute-gelb-neu@3x.png); background-repeat: no-repeat; background-position: 0px 7px; background-size: 20px auto; }
.bn_raute_gelb:hover { background-position: 3px 7px; }
a:hover .bn_raute_gelb { background-position: 3px 7px; }
a.gelb { /*color: #edc112;*/ color: #c69900; }
a.gelb:hover { /*color: #ffcc00;*/ color: #edc112; }
/* ---- Tabellen, Formulare ---- */
table.width100 { width: 100%; margin: 20px 0px; }
table.widthmax { width: 100%; max-width: 320px; margin: 20px 0px; }
th { font-weight: 900; text-align: left; }
td { font-weight: 400; text-align: left; }
table.widthmax th.right { text-align: right; vertical-align: bottom; }
table.widthmax td .bn_bg_ci { display: block; clear: both; margin: 5px 0px; width: 100%; box-sizing: border-box; }
table.widthmax td.abstand { padding: 7px; }
table.border_ci { margin: 20px 0px; padding: 0px; border-spacing: 0; border-collapse: collapse; }
table.border_ci tr { background-color: #edf4fa; }
table.border_ci tr:nth-child(odd) { background-color: #f6fbfd; }
table.border_ci tr.highlight { background-color: #1d70b7; }
table.border_ci th { font-weight: 500; color: #000; padding: 10px 20px; }
table.border_ci td { font-weight: 200; color: #000; padding: 10px 20px; }
table.border_ci tr.highlight td, table.border_ci tr.highlight th,
table.border_ci tr.highlight td * { color: #fff; }
input.disabled { border: 1px solid #eee; background-color: #fefefe; color: #bbb; font-style: italic; }
.form-validation.alert-danger { margin-bottom: 20px; }
.form-validation.alert-success { display: inline-block; clear: both; margin: 20px 0px; padding: 15px 20px; box-sizing: border-box; color: #50b147; border: 1px solid #50b147; background-color: rgba(255,255,255,0.9); -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
.form-validation.alert-success i.fa { font-size: 20px; vertical-align: middle; }
.form-validation.with-spinner { }
a.ausklapp_button { display: block; clear: both; width: 100%; height: auto; margin: 8px 0px 20px 0px; padding: 6px 0px 7px 28px; color: #1d70b7; box-sizing: border-box; border-top: 1px solid #c1d5e8; border-bottom: 1px solid #c1d5e8; background-position: 0px 15px; }
a.ausklapp_button:hover { background-position: 3px 15px; }
a.ausklapp_button.active { background-position: 3px 15px; border-bottom: none; color: 3d7ebf; background-image: url(../images/raute-blau-o@3x.png); }
.ausklapp_layer { border-bottom: 1px solid #1d70b7; padding-top: 0px; padding-bottom: 35px; }
/* --------------- Allgemeine Klassen für DIV-Aufbau ------------- */
.container { position: relative; align: center; width: 600px; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; z-index: 590; }
.container-full { position: relative; align: center; width: 100%; height: auto; margin: 0px auto; padding: 0px 15px; margin-left: auto; margin-right: auto; box-sizing: border-box; background-color: transparent; z-index: 590; }
.content-center { text-align: center; }
.content-right { text-align: right; }
.zentriert { align: center; margin: 0px auto; padding-top: 40px; width: 600px; height: auto; min-height: 400px; }
.section { position: relative; color: inherit; padding: 30px 0; }
.section-std-padding { padding: 25px 0px; }
.section-big-padding { padding: 60px 0px; }
.first-section { padding-top: 180px; }
.a_sprung { position: absolute; margin-top: -140px; width: 100%; /*height: 2px; border-top: 1px solid red;*/ }
.a_sprung-s { position: absolute; margin-top: -88px; width: 100%; /*height: 2px; border-top: 1px solid red;*/ }
.paginierung_seiten { margin: 20px 0px; padding: 10px 15px; box-sizing: border-box; border-top: 1px solid #d0e0ee; border-bottom: 1px solid #d0e0ee; }
.paginierung_seiten a, .paginierung_seiten .active { display: inline-block; padding: 2px 4px; width: 20px; text-align: center; margin: 0px 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
.paginierung_seiten a:hover { background-color: #d8e4ef; }
.paginierung_seiten .active { background-color: #1d70b7; color: #fff; }
/* Drittel-Box */
.content-col3-1 { position: relative; display: inline-block; float: left; margin: 0px; width: 32%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; z-index: 990; }
/* Zwei-Drittel-Box */
.content-col3-2 { position: relative; float: left; margin: 0px; width: 66%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 20px; background-color: transparent; z-index: 990; }
/* Halb-Box */
.content-col2-1 { position: relative; float: left; margin: 0px; width: 48%; margin-right: 1%; margin-left: 1%; height: auto; box-sizing: border-box; padding: 20px 0px; background-color: transparent; z-index: 990; }
/* Full-Row */
.content-full-row { position: relative; display: block; clear: both; width: 100%; height: auto; margin: 35px 0px; }
.content-full-row img { position: relative; width: 100%; height: auto; }
.two-text-columns { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 4rem; -webkit-column-gap: 4rem; column-gap: 4rem; }
@media only screen and (max-width: 780px) {
.two-text-columns { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
.two-text-columns div { margin-bottom: 25px; }
}
/* Margins für Boxen in Zeilen */
.row { width: 100%; height: auto; display: inline-block; padding: 0px; margin: 0px; box-sizing: border-box; }
.row div.content-col3-1:first-child { margin-left: 0; }
.row div.content-col3-2:first-child { margin-left: 0; }
.row div.content-col2-1:first-child { margin-left: 0; }
.row div.content-col3-1:last-child { margin-right: 0; }
.row div.content-col3-2:last-child { margin-right: 0; }
.row div.content-col2-1:last-child { margin-right: 0; }
.row:after { content: ""; display: table; clear: both; float: none; width: 100%; height: 0px; }
/* --------- Boxmodell ------- */
#head { position: absolute; display: block; margin: 0px; width: 100%; height: auto; padding: 0px 0px; box-sizing: border-box; background-color: #fff; box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); z-index: 800; }
#top_bar { position: relative; display: block; clear: both; width: 100%; height: 48px; box-sizing: border-box; padding: 12px 0px; color: #fff; font-size: 13px; background-color: rgba(6,88,166,0.9); }
#top_bar .container { font-size: inherit; }
#top_bar .container div.element { display: inline; margin-right: 12px; font-size: inherit; color: #fff; }
#top_bar .container div.element i { font-size: 14px; margin-right: 4px; color: #fff; }
#top_bar .container div.element > a { font-size: inherit; color: #fff; padding: 5px 10px; margin-left: 5px; background-color: #3c7ec1; text-align: center; text-decoration: none; transition: all 0.7s ease-out 0s; }
#top_bar .container div.element > a:hover { background-color: #78b6e4; text-decoration: none; }
#top_bar .container div.element > a.active { background-color: #78b6e4; text-decoration: none; }
/* Fontsizechanger */
#top_bar a.fontsizechanger { cursor: pointer; z-index: 9999; }
#top_bar .container div.element > a.fontsizechanger.active { background-color: #78b6e4 !important; text-decoration: none; }
#top_bar a.fontsizechanger img { width: 20px; height: auto; }
#top_bar a.fontsizechanger i.fa { display: inline-block; color: inherit; padding-top: 2px; }
#top_bar a.fontsizechanger i.fa-angle-up { display: none; }
#top_bar .select_fontsizes { display: none; position: absolute; margin-top: 4px; padding: 6px 0px; margin-left: -13px; background-color: #1e68af; z-index: 999; }
#top_bar .select_fontsizes a { display: block; clear: both; padding: 7px 25px 7px 25px; box-sizing: border-box; background-color: #1e68af; text-align: center; text-decoration: none; color: #fff; transition: all 0.7s ease-in-out 0s; }
#top_bar .select_fontsizes a:hover { background-color: #3077bc; text-decoration: none; }
#top_bar .select_fontsizes a.active { background-color: #78b6e4; color: #fff; }
#top_bar .select_fontsizes a img { display: inline-block; vertical-align: middle; height: 20px; margin-top: -2px; margin-right: 5px; }
/* Google-Suche */
#top_bar .container div.element_gsearch { margin-left: 8px; }
#top_bar .container div.element_gsearch span { color: inherit; }
#gsearch_mobile { display: none; }
#gsearch_embed { display: inline-block; float: right; width: 270px; height: 30px; margin-top: -2px; }
#___gcse_0 { }
td.gsc-input { width: 190px; }
.gsc-input-box { width: 190px; height: 28px !important; margin-top: -4px !important; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
td#gs_tti50.gsib_a { padding: 2px 8px !important; margin: 0; background-color: transparent !important; }
input#gsc-i-id1.gsc-input { margin-top: -5px !important; font-size: 13px; background-color: transparent !important; }
.gsst_a { width: 24px; height: 22px; text-align: center; }
#gs_st50 { }
input.gsc-search-button, input.gsc-search-button:hover, input.gsc-search-button:focus { background-color: #3d7ebf; border-color: transparent !important; transition: background-color 0.2s ease-in-out 0.25s;}
input.gsc-search-button:hover, input.gsc-search-button:focus { background-color: #78b6e4 !important; }
.gsc-control-searchbox-only.gsc-control-searchbox-only-de { margin: 0; padding: 0; }
#nav_bar { position: relative; display: block; clear: both; width: 100%; height: 98px; padding: 0px; box-sizing: border-box; background-color: transparent; /*transition: all 0.5s ease-in-out 0.5s;*/ }
#nav_bar .container { z-index: 400; }
#logo { display: inline-block; float: left; width: 170px; height: 69px; margin-top: 17px; /*transition: all 0.05s ease-in-out 0.05s;*/ }
#logo img { width: 100%; height: auto; vertical-align: middle; }
#navigation { /* wird in den MediaQuerys definiert */ }
#navigation ul li a { text-transform: none; }
#toggle_mobile_navigation { display: block; float: right; padding: 0px; margin: 0px; font-size: 21px; margin-top: 0px; cursor: pointer; padding: 10px; transition: all 0.25s ease-in-out 0s; }
#toggle_mobile_navigation i { font-size: 38px; color: #0058a5; }
@media only screen and (max-width: 998px) {
#head { }
#toggle_mobile_navigation { position: absolute; right: 10px; z-index: 9999; }
#toggle_mobile_navigation.active i { color: #3d7ebf; }
#navigation { position: fixed; display: none; overflow: auto; width: 100%; height: 100%; left: 0px; top: 119px; margin: 0px; right: 0; box-sizing: border-box; padding: 30px 0px 40px 0px; background-color: rgba(255,255,255,0.95); z-index: 890; -webkit-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); -moz-box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); box-shadow: inset 0px 2px 1px 0px rgba(0,0,0,0.27); }
#top_bar .container div i { font-size: 13px; margin-right: 3px; z-index: 990;}
#nav_bar { display: block; clear: both; height: 72px; padding: 8px 0px; z-index: 970; }
#logo { width: 140px; height: 50px; margin-top: 0px; z-index: 999; }
#logo img { }
#navigation > ul { display: block; clear: both; width: 100%; height: 100%; margin: 0px; padding: 0px; z-index: 900; }
#navigation > ul > li { display: block; clear: both; float: left; width: 100%; height: auto; margin: 2px 0px; padding: 1px 0px; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.1); }
#navigation ul li a { display: block; float: left; width: 100%; height: auto; padding: 9px 20px 10px 20px; box-sizing: border-box; text-transform: normal; font-size: 18px; line-height: 19px; text-align: left; color: #000; }
#navigation ul li a:hover { text-decoration: none; color: #0058a5; }
#navigation > ul > li.active > a { color: #0058a5; }
#navigation > ul > li > ul > li.active > a { color: #0058a5; }
#navigation > ul > li > ul { display: block; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; }
#navigation > ul > li > ul > li { display: inline-block; clear: both; float: left; width: 100%; height: auto; margin: 2px 0px; padding: 0px 20px; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.05); }
#navigation > ul > li > ul > li:last-child { border-bottom: none; }
#navigation > ul > li > ul > li > a { display: inline-block; float: left; width: 100%; height: auto; padding: 6px 10px 6px 30px; text-transform: normal; font-size: 16px; text-align: left; color: #000; }
#top_bar .container div.element_fontsizechanger { display: none; }
#top_bar .container div.element_gsearch { margin-left: 0px; }
#top_bar .container div.element_gsearch span { display: none; }
#gsearch_embed { display: none; }
#gsearch_mobile { display: inline-block; }
}
@media only screen and (min-width: 999px) {
#head { }
#toggle_mobile_navigation { display: none; }
#navigation { display: inline-block !important; float: right; width: auto; height: 98px; box-sizing: border-box; margin: 0px; padding: 0px; text-align: right; z-index: 900; }
#navigation ul { display: block; clear: both; float: none; width: 100%; height: 100%; margin: 0px auto 0px auto; align: center; padding: 0px; }
#navigation ul li { display: inline-block; float: none; width: auto; height: 100%; margin: 0px 0px; padding: 0px 0px 0px 0px; }
#navigation > ul > li > a { display: inline-block; float: none; width: auto; height: 100%; padding: 39px 5px 0px 5px; margin: 0px 0px 0px 13px; font-size: 18px; /*line-height: 26px;*/ font-weight: 400; color: #000; box-sizing: border-box; transition: all 0.25s ease-in-out 0s; }
#navigation ul li a:hover, #navigation ul li.hover > a { text-decoration: none; color: #11678f; }
#navigation ul li.active > a { color: #0d6bbe; }
#navigation > ul > li > ul { position: absolute; display: none; width: auto; min-width: 180px; height: auto; border: none; margin: 0px; margin-left: 5px; padding: 10px 15px 15px 15px; background-color: rgba(255,255,255,1); -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.4); box-shadow: 0px 2px 2px rgba(0,0,0,0.4); }
#navigation > ul > li > ul li { display: block; clear: both; width: auto; height: auto; text-align: left; margin: 0px; padding: 0px; }
#navigation > ul > li > ul li a { display: block; clear: both; width: auto; height: auto; padding: 8px 35px 8px 15px; margin: 0px; font-size: 16px; color: #000; box-sizing: border-box; border-bottom: 1px solid rgba(0,0,0,0.05);}
#navigation > ul > li > ul li a:hover, #navigation ul li ul.subnavi li a.hover { text-decoration: none; color: #0058a5; }
#navigation > ul > li > ul li.active a { color: #0d6bbe; }
#navigation > ul > li > ul > li > ul { margin-left: 15px; }
#navigation > ul > li > ul li:last-child a { border-bottom: none; }
#navigation > ul > li > ul { display: none; }
#head.sticky #navigation { height: 90px; margin-top: 0px; padding: 0px 0px; }
#head.sticky #navigation > ul > li > a { padding: 32px 5px; }
}
@media only screen and (min-width: 999px) and (max-width: 1199px) {
#navigation > ul > li > a { padding-left: 4px; padding-right: 4px; margin: 0px 0px 0px 4px; }
#head.sticky #navigation > ul > li > a { padding: 32px 4px; }
}
/* ---- Sticky-Darstellungen ---- */
#head.sticky { position: fixed; height: 90px; padding: 0px 0px; top: 0; box-shadow: 0 0 5px 0 rgba(0,0,0,0.4); background-color: rgba(255,255,255,1); opacity: 1; transition-duration: 0.1s, 0.1s, 0.1s, 0.2s; transition-property: width, height, background-color, transform; transition-timing-function: ease, ease, ease, ease; }
#head.sticky #top_bar { display: none; }
#head.sticky #nav_bar { padding: 0px 0px; }
#head.sticky #nav_bar #logo { margin-top: 10px; padding-top: 0px; padding-bottom: 0px; }
#head.sticky #nav_bar #logo img { height: auto; padding: 0; }
#head.sticky #toggle_mobile_navigation { margin-top: 0px; }
@media only screen and (max-width: 998px) {
#head.sticky { height: 75px; }
#head.sticky #top_bar { }
#head.sticky #nav_bar { height: 55px; padding: 0px; box-sizing: border-box; }
#head.sticky #nav_bar .container { padding-top: 0px; }
#head.sticky #nav_bar #logo { padding-top: 0px; padding-bottom: 0px; }
#head.sticky #nav_bar #logo img { }
#head.sticky #navigation { top: 0px; padding-top: 72px; padding: 0px; }
#head.sticky #toggle_mobile_navigation { margin-top: 7px; }
}
/* ------ Section-Formatierungen ------ */
#section-slideshow { display: block; clear: both; width: 100%; height: auto; box-sizing: content-box; min-height: 100px; height: 38vw; padding-top: 140px; padding-bottom: 0px; background-repeat: no-repeat; background-position: center center; background-size: cover; overflow: hidden; z-index: 700; }
#section-slideshow .anim-slider { min-height: 100px; height: 38vw; margin-top: 0px; background-color: #fff;}
#section-slideshow .anim-slide { opacity: 0; }
#section-slideshow .anim-slide:before { content:''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.02); }
#section-slideshow .anim-slide-this { opacity: 1;}
#section-slideshow .anim-dots { opacity: 1; bottom: 0.5vw; }
#section-slideshow .anim-dots span { margin: 3px 6px; background-color: rgba(0,0,0,0.4); -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.4); box-shadow: 0px 0px 3px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.6); -moz-border-radius: 9px; border-radius: 9px; -webkit-border-radius: 9px; }
#section-slideshow .anim-dots span.anim-dots-this { background-color: rgba(255,255,255,1.0); }
#section-slideshow .anim-dots span.anim-dots-this::after { background: transparent none repeat scroll 0 0; }
#section-slideshow li.anim-slide { background-color: #fff; background-size: cover; background-position: center center; }
#section-slideshow .anim-slider .claim { position: absolute; width: 100%; height: auto; box-sizing: border-box; left: 0; top: 0; }
#section-slideshow .anim-slider .claim p { height: auto; vertical-align: middle; font-size: 35px; font-size: 2.7vw; margin-top: 24%; padding: 40px 70px 44px 40px; padding: 3vw 6vw 3.2vw 5vw; color: #fff; font-weight: normal; text-transform: uppercase; text-align: left; background-image: url(../images/claim-bg@2x.png); background-repeat: no-repeat; background-size: 100% auto; background-position: left; }
#section-slideshow .anim-slider .claim h1 { height: auto; vertical-align: middle; font-size: 35px; font-size: 2.7vw; margin-top: 24%; padding: 40px 70px 44px 40px; padding: 3vw 6vw 3.2vw 5vw; color: #fff; font-weight: normal; text-transform: uppercase; text-align: left; background-image: url(../images/claim-bg@2x.png); background-repeat: no-repeat; background-size: 100% auto; background-position: left; }
#section-slideshow .anim-slider .claim h2 { height: auto; vertical-align: middle; font-size: 35px; font-size: 2.7vw; margin-top: 24%; padding: 40px 70px 44px 40px; padding: 3vw 6vw 3.2vw 5vw; color: #fff; font-weight: normal; text-transform: none; text-align: left; background-image: url(../images/claim-bg@2x.png); background-repeat: no-repeat; background-size: 100% auto; background-position: left; }
#section-slideshow .anim-slider .claim h1 a,
#section-slideshow .anim-slider .claim h2 a { position: relative; display: inline-block; height: 100%; line-height: inherit; padding-right: 60px; padding-right: 1.3em; color: inherit; font-size: inherit; background-image: url('../images/button_pfeil-r@x3.png'); background-position: center right; background-repeat: no-repeat; background-size: auto 0.72em; }
#section-slideshow .anim-slider .claim h1 a:hover,
#section-slideshow .anim-slider .claim h2 a:hover { color: rgba(255,255,255,0.7); }
#section-slideshow .anim-arrows-prev { left: 0 !important; padding: 16px 18px !important; background-color: rgba(0,0,0,0.25); z-index: 400; transition: all 0.60s ease-out 0s; }
#section-slideshow .anim-arrows-next { right: 0 !important; padding: 16px 18px !important; background-color: rgba(0,0,0,0.25); z-index: 400; transition: all 0.60s ease-out 0s;}
#section-slideshow .anim-arrows-prev i, #section-slideshow .anim-arrows-next i { color: #fff; font-size: 26px; opacity: 0.8; transition: all 0.60s ease-out 0s; }
#section-slideshow .anim-arrows-prev:hover, #section-slideshow .anim-arrows-next:hover { background-color: rgba(0,0,0,0.55); }
#section-slideshow .anim-arrows-prev:hover i, #section-slideshow .anim-arrows-next:hover i { opacity: 0.95; }
@media only screen and (max-width: 994px) {
#section-slideshow { min-height: 360px; min-height: 64vw; padding-top: 120px; }
#section-slideshow .anim-slider { min-height: 400px; min-height: 64vw; }
#section-slideshow .anim-slider .claim h1 { font-size: 26px; font-size: 4.8vw; line-height: 0.9em; padding: 5vw 7vw 5vw 4vw; margin-top: 45%; margin-top: 44vw; }
#section-slideshow .anim-slider .claim h2 { font-size: 26px; font-size: 4.8vw; line-height: 0.9em; padding: 5vw 7vw 5vw 4vw; margin-top: 45%; margin-top: 46vw; }
#section-slideshow .anim-dots { display: none; }
#section-slideshow .anim-arrows-prev { opacity: 1; padding: 8px 10px !important; background-color: rgba(255,255,255,0.25); z-index: 400; }
#section-slideshow .anim-arrows-next { opacity: 1; padding: 8px 10px !important; background-color: rgba(255,255,255,0.25); z-index: 400; }
#section-slideshow .anim-arrows-prev img, #section-slideshow .anim-arrows-next i { font-size: 16px; }
}
#section-intro { padding: 0px; }
#section-intro .container { padding-bottom: 5px; }
#section-intro .content-col3-1 { padding-right: 25px; }
#section-intro .content-col3-1 .box_schnelleinstieg { padding: 25px; box-sizing: border-box; color: #4eb14a; background-color: #f0f8ec; background-image: url(../images/bg_schnelleinstieg@2x.png); background-repeat: no-repeat; background-position: right bottom; background-size: 50% auto; }
#section-intro .content-col3-1 .box_schnelleinstieg h2, #section-intro .col_schnell .box_schnelleinstieg a { color: inherit; }
#section-intro .box_schnelleinstieg h2, #section-intro .box_schnelleinstieg a { color: inherit; }
#section-intro .box_schnelleinstieg h2 { margin: 0px 0px 23px 0px; }
#section-intro .box_schnelleinstieg ul { margin: 8px 0px; padding: 0px; list-style-type: none; }
#section-intro .box_schnelleinstieg ul li { margin: 6px 0px; }
#section-intro .box_schnelleinstieg ul li a { font-size: 17px; padding: 3px 0px 4px 27px; background-image: url(../images/raute-gruen@3x.png); background-repeat: no-repeat; background-position: 0px 9px; background-size: 20px auto; }
#section-intro .box_schnelleinstieg ul li a:hover { color: #069400; background-position: 3px 9px; }
#section-intro .content-col3-1 .box_klima { color: #0058a5; }
#section-intro .content-col3-1 .wetter { padding: 20px 0px 24px 0px; color: inherit; }
#section-intro .content-col3-1 .wetter .align_left { font-size: 20px; padding-top: 14px; font-weight: 300; }
#section-intro .content-col3-1 .wetter .align_right { font-size: 30px; font-weight: 200; }
#section-intro .content-col3-1 .wetter #weather { font-size: 30px; font-weight: 200; }
#section-intro .content-col3-1 .wetter #weather div { font-size: inherit; font-weight: inherit; }
#section-intro .content-col3-1 .wetter #weather div i { font-size: 50px; vertical-align: -25%; line-height: 45px; margin-right: 6px; margin-bottom: -9px; }
#section-intro .content-col3-1 .freibad { padding: 20px 0px; border-top: 1px solid rgba(0,88,165,0.25); color: inherit; }
#section-intro .content-col3-1 .freibad .align_left { font-size: 20px; line-height: 20px; padding-top: 4px; font-weight: 300; }
#section-intro .content-col3-1 .freibad .align_right { width: 200px; font-size: 30px; font-weight: 200; padding-top: 4px; }
#section-intro .content-col3-1 .freibad small.state { display: block; width: 200px; float: right; font-size: 12px; margin-top: 0px; text-align: right; box-sizing: border-box; color: rgba(6,88,166,0.4); font-weight: 100; padding-right: 4px; padding-top: 0px; }
#section-intro .content-col3-1 div { color: inherit; }
#section-intro .content-col3-2 { padding: 45px 0px 20px 0px; box-sizing: border-box; }
#section-intro .content-col3-2 h2, #section-intro .col_aktuelles h3, #section-intro .col_aktuelles a { color: #0058a5; }
#section-intro .content-col3-2 h2 { margin: 0px 0px 10px 0px; }
#section-intro .content-col3-2 .align_right { padding-top: 5px;}
#section-intro .content-col3-2 .align_right a { font-size: 17px; vertical-align: middle; }
#section-intro .content-col3-2 .align_right a i { font-size: 19px; margin-right: 6px; }
.row.aktuelles_teaser .content-col3-1 { }
.row.aktuelles_teaser .content-col3-1 div.thumb { display: block; clear: both; width: 100%; height: 152px; overflow: hidden !important; background-color: #1d70b7; }
.row.aktuelles_teaser .content-col3-1 div.thumb .img_bg { width: 100%; height: 100%; opacity: 1.0; background-repeat: no-repeat; background-size: cover; background-position: center center; transition: all 0.25s ease-in-out 0s; }
.row.aktuelles_teaser .content-col3-1 a:hover div.thumb.hovereffect .img_bg { opacity: 0.65; -webkit-transform: scale(1.10); -moz-transform: scale(1.10); -ms-transform: scale(1.10); -o-transform: scale(1.10); transform: scale(1.10); }
.row.aktuelles_teaser .content-col3-1 h3 { margin-bottom: 8px; }
.row.aktuelles_teaser .content-col3-1 .datum { color: #90b1ce !important; margin: 4px 0px; }
.row.aktuelles_teaser .content-col3-1 p { margin-bottom: 10px; }
@media only screen and (max-width: 994px) {
#section-intro .section-std-padding { padding-bottom: 0px; }
#section-intro .content-col3-1 { padding-right: 0px; }
#section-intro .content-col3-1 .box_schnelleinstieg { }
#section-intro .content-col3-1 .box_klima { border-bottom: 1px solid rgba(0,88,165,0.25); }
#section-intro .content-col3-1 .box_klima .wetter { width: 47%; float: left; border: none; }
#section-intro .content-col3-1 .box_klima .freibad { width: 47%; float: right; border: none; }
#section-intro .content-col3-1 .box_klima .freibad small { font-size: 12px; }
#section-intro .content-col3-2 { margin-bottom: 5px; }
.row.aktuelles_teaser { margin-top: 15px; }
.row.aktuelles_teaser .content-col3-1 div.thumb { float: left; width: 50%; height: 30vw; margin: 10px 20px 30px 0px; }
.row.aktuelles_teaser .content-col3-1 h3 { margin-top: 6px; }
}
@media only screen and (max-width: 780px) {
#section-intro .content-col3-1 .box_klima .wetter { width: 100%; float: none; }
#section-intro .content-col3-1 .box_klima .freibad { width: 100%; float: none; }
}
#section-veranstaltungen { background-color: #fdfaf4; color: #c69900; padding-bottom: 0px; }
#section-veranstaltungen .section-wrapper { padding-top: 10px; padding-bottom: 3px; }
#section-veranstaltungen div, #section-veranstaltungen h2, #section-veranstaltungen h3 { color: inherit; }
#section-veranstaltungen .align_right { padding-top: 20px; }
#section-veranstaltungen .align_right a { margin-left: 20px; }
#section-veranstaltungen .align_right a i.fa { font-size: 20px; margin-right: 3px; margin-top: -3px; vertical-align: middle; line-height: 8px; }
.slider_veranstaltungen { display: block; clear: both; width: 100%; min-height: 100px; margin: 25px 0px 0px 0px; padding: 0px 0px 0px 0px; /*overflow: hidden;*/ }
.slider_veranstaltungen .tag.slick-slide { display: table-cell; vertical-align: middle; width: 33.5338%; margin: 0px 6px; min-height: 90px; text-align: left; }
.slider_veranstaltungen .tag.slick-slide .datum { display: block; clear: both; margin: 0px 0px 10px 0px; font-size: 22px; font-weight: 100; color: #626465 !important; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung { width: 95%; margin: 5px 0px 5px 0px; height: auto; min-height: 80px; cursor: pointer; padding: 20px 15px 12px 20px; box-sizing: border-box; display: block; clear: both; margin: 5px 0px 20px 0px; background-color: rgba(255,255,255,0.9); -moz-box-shadow: 0px 0px 4px rgba(155,122,13,0.2); -webkit-box-shadow: 0px 0px 4px rgba(155,122,13,0.2); box-shadow: 0px 0px 4px rgba(155,122,13,0.2); transition: all 0.25s ease-in-out 0s; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung:hover { background-color: rgba(255,255,255,1.0); -moz-box-shadow: 0px 0px 6px rgba(155,122,13,0.4); -webkit-box-shadow: 0px 0px 6px rgba(155,122,13,0.4); box-shadow: 0px 0px 6px rgba(155,122,13,0.4);}
.slider_veranstaltungen .tag.slick-slide .veranstaltung a { margin: 0px auto; cursor: pointer; text-align: left; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung h3 { margin: 0px 0px 8px 0px; font-size: 20px; line-height: 22px; color: #c69900 !important; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung p { margin: 0px; font-size: 15px; line-height: 19px; color: #3a3a3c !important; font-weight: 100; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung i.fa { color: #777 !important; font-weight: 100; font-size: 15px; margin-right: 2px; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung .align_left { margin: 15px 0px 0px 0px; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung .align_right { margin: 15px 0px 0px 0px; font-size: 17px; color: #c69900 !important; font-weight: 200; }
.slider_veranstaltungen .slick-dots { position: relative; bottom: 0px; }
.slider_veranstaltungen .slick-dots li { height: 20px; margin: 0 2px; padding: 0; position: relative; width: 20px; }
.slider_veranstaltungen .slick-dots li button::before { color: black; content: "•"; font-family: "slick"; font-size: 12px; color: #555; height: 20px; left: 0; line-height: 30px; opacity: 0.25; position: absolute; text-align: center; top: 0; width: 20px; }
.slider_veranstaltungen .slick-dots li button { width: 20px; height: 20px; padding: 4px; }
.slider_veranstaltungen .slick-prev { left: 0px; margin-left: -32px; }
.slider_veranstaltungen .slick-next { left: auto; right: 0px; margin-right: -32px;}
@media only screen and (min-width: 996px) and (max-width: 1060px) {
.slider_veranstaltungen .slick-prev { left: 0px; margin-left: 0px; top: auto; bottom: 10px; }
.slider_veranstaltungen .slick-next { left: auto; right: 0px; margin-right: 0px; top: auto; bottom: 10px; }
}
.slider_veranstaltungen .slick-prev::before { content: ""; }
.slider_veranstaltungen .slick-next::before { content: ""; }
.slider_veranstaltungen .slick-prev::before, .slider_veranstaltungen .slick-next::before { color: #d8a700; font-family: "Fontawesome"; font-size: 34px; line-height: 1; opacity: 1; }
@media only screen and (max-width: 994px) {
.slider_veranstaltungen .tag.slick-slide{ padding-top: 40px; }
.slider_veranstaltungen.slick-slider { margin-bottom: 15px !important; }
.slider_veranstaltungen .slick-dots { margin-top: -10px; margin-bottom: 0px; padding-bottom: 0px; }
.slider_veranstaltungen .slick-dots li { margin: 0 1px; }
.slider_veranstaltungen .slick-dots li button::before { font-size: 11px; }
.slider_veranstaltungen .slick-dots li button { padding: 3px 1px; }
.slider_veranstaltungen .slick-prev { left: 0px; margin-left: -10px; top: 0px; bottom: auto; }
.slider_veranstaltungen .slick-next { left: auto; right: 0px; margin-right: -10px; top: 0px; bottom: auto; }
}
#section-infos-u-links { background-color: #f7f8fb; }
#section-infos-u-links h2, #section-infos-u-links h3, #section-infos-u-links a { color: #0058a5; }
#section-infos-u-links h2 { margin: 0px 0px 12px 0px; }
#section-infos-u-links .align_right { padding-top: 7px; }
#section-infos-u-links .align_right a { font-size: 17px; vertical-align: middle; }
#section-infos-u-links .align_right a i { font-size: 19px; margin-right: 6px; }
#section-infos-u-links .content-col3-1 { }
#section-infos-u-links .content-col3-1 div.thumb { height: 200px; }
#section-infos-u-links .content-col3-1 h3 { font-size: 17px; margin-bottom: 10px; font-weight: 400; }
#section-infos-u-links .content-col3-1 p { margin-bottom: 10px; }
#section-infos-u-links .content-col3-1 a { font-size: 17px; font-weight: 400; background-position: 0px 9px; }
#section-infos-u-links .content-col3-1 a:hover { background-position: 3px 9px; }
/* Formatierungen für Folgeseiten */
#abstand_folgeseiten { display: block; clear: both; width: 100%; height: 146px; padding: 0px 0px 0px 0px; }
#section-headpic { display: block; clear: both; width: 100%; height: 250px; height: 15vw; margin: 0px 0px 0px 0px; background-size: cover; background-position: center center; background-color: #eff3f8; }
.brotkruemel { display: block; clear: both; width: 100%; height: auto; padding: 13px 0px 10px 0px; background-color: #f8f9fb; border-bottom: 1px solid #eef3f9; }
.brotkruemel .container { font-size: 13px; color: #808284; font-weight: 100; padding-left: 0px; }
.brotkruemel .container span { font-size: inherit; color: inherit; }
#section-inhalt { margin-bottom: 60px; }
body.folgeseite #section-inhalt .container { min-height: 260px; }
body.folgeseite #section-inhalt .hinweis { color: #479918; background-color: #f0f8ec; padding: 12px 16px; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
body.folgeseite #section-inhalt .rot { color: #d4293d; background-color: #f9f2f3; -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; }
@media only screen and (max-width: 994px) {
body.folgeseite #section-inhalt .container { padding-top: 0px; }
}
/* Icon-Links mit kleinem Abstand zum Icon versehen */
body.folgeseite #section-inhalt a > img { margin-right: 5px; }
body.folgeseite #section-inhalt img { max-width: 100%; height: auto; }
/* Darstellung z.B. für Aktuelles-Übersicht */
body.folgeseite .content-col3-1 div.thumb { display: block; clear: both; width: 100%; height: 240px; overflow: hidden !important; background-color: #1d70b7; }
body.folgeseite .content-col3-1 div.thumb .img_bg { width: 100%; height: 100%; opacity: 1.0; background-repeat: no-repeat; background-size: cover; background-position: center center; transition: all 0.25s ease-in-out 0s; }
body.folgeseite .content-col3-1 a:hover div.thumb .img_bg { opacity: 0.65; -webkit-transform: scale(1.10); -moz-transform: scale(1.10); -ms-transform: scale(1.10); -o-transform: scale(1.10); transform: scale(1.10); }
body.folgeseite .content-col3-2 h2 { margin-top: 15px; margin-bottom: 20px; }
body.folgeseite .content-col3-2 h3 { margin-bottom: 15px; }
body.folgeseite .content-col3-2 .datum { color: #90b1ce; font-size: 1.1em; margin: 4px 0px 10px 0px; }
body.folgeseite .content-col3-2 p { margin-bottom: 25px; }
@media only screen and (max-width: 994px) {
body.folgeseite .content-col3-1 div.thumb { height: 60%; height: 45vw; margin-top: 30px; }
body.folgeseite .content-col3-2 h2 { margin-top: 5px; }
}
/* Formatierungen für Tögings Geschichte*/
.zeitstrahl { position: relative; width: 100%; height: auto; margin: 30px 0px; padding-top: 10px; padding-bottom: 200px; background-image: url(../images/zeitstrahl_1px.png); background-repeat: repeat-y; background-position: center center; }
.zeitstrahl .meilenstein { position: relative; width: 100%; height: auto; margin: 0px 0px 70px 0px; overflow: hidden; }
.zeitstrahl .meilenstein h2 { padding: 6px 4px 12px 4px; margin: 40px 0px 0px 0px; text-align: center; color: #0058a5; font-weight: 400; font-size: 29px; background-color: #fff; }
.zeitstrahl .meilenstein .punkt { display: block; clear: both; margin: -12px 0px 0px 0px; text-align: center; color: #8fb8df; }
.zeitstrahl .meilenstein .punkt i { color: inherit; font-size: 12px; }
.zeitstrahl .element { position: relative; display: block; clear: both; width: 447px; height: 263px; margin: -95px 0px 10px 100px; }
.zeitstrahl .element_rechts { float: right; margin-left: 0px; margin-right: 100px; }
.zeitstrahl .element a { transition: all 0.35s ease-in-out 0s; }
.zeitstrahl .element a:hover { opacity: 0.85; }
.zeitstrahl .element .image { position: absolute; width: 447px; height: 263px; margin: 0px; background-size: cover; background-position: center center; }
.zeitstrahl .element .image .maske_sprechblase { width: 100%; height: 100%; opacity: 1.0; background-image: url(../images/maske-sprechblase-links.png); background-repeat: no-repeat; background-position: 0px 0px; }
.zeitstrahl .element .image .maske_sprechblase.rechts { background-image: url(../images/maske-sprechblase-rechts.png); }
.zeitstrahl .element.with_image .image .maske_sprechblase { background-image: url(../images/maske-sprechblase-links_dunkler.png); }
.zeitstrahl .element.with_image .image .maske_sprechblase.rechts { background-image: url(../images/maske-sprechblase-rechts_dunkler.png); }
.zeitstrahl .element .desc { position: absolute; width: 415px; height: 95px; margin: 125px 0px 25px 16px; padding: 12px 15px 5px 20px; box-sizing: border-box; color: #fff; /*background-color: rgba(0,0,0,0.3);*/ }
.zeitstrahl .element_rechts .desc { margin: 125px 0px 25px 15px; }
.zeitstrahl .element .desc h2 { font-size: 24px; color: inherit; margin: 3px 0px 8px 0px; line-height: 23px; text-transform: none; }
.zeitstrahl .element .desc h2.small { font-size: 22px; }
.zeitstrahl .element .desc h3 { color: inherit; margin: 0px; text-transform: none; }
.zeitstrahl .element .desc h3 i { font-size: 20px; margin-right: 6px; }
.zeitstrahl .element .inhalt { position: absolute; width: 414px; height: 220px; overflow-y: auto; margin: 20px 0px 0px 16px; padding: 12px 15px 0px 20px; line-height: 20px; box-sizing: border-box; color: #fff; }
.zeitstrahl .element .inhalt h2 { color: inherit; margin: 0px 0px 12px 0px; text-transform: uppercase; }
.zeitstrahl .element .inhalt h3 { color: inherit; margin: 0px; text-transform: none; }
.zeitstrahl .element .inhalt h3 i { font-size: 20px; margin-right: 6px; }
.zeitstrahl .element .inhalt em { color: inherit; }
.zeitstrahl .element .inhalt.bigger { font-size: 24px; line-height: 28px; }
.zeitstrahl .element .inhalt.big { font-size: 18px; line-height: 22px; }
.zeitstrahl .element .inhalt.small { font-size: 16px; line-height: 17px; }
.zeitstrahl .element .inhalt.smaller { font-size: 15px; line-height: 16px; }
.zeitstrahl .element .inhalt.smallest { font-size: 14px; line-height: 15px; }
.zeitstrahl .element .inhalt em { font-size: inherit; line-height: inherit; }
@media only screen and (max-width: 1305px) {
.zeitstrahl .element { margin-left: 0px; }
.zeitstrahl .element_rechts { margin-right: 0px; }
}
@media only screen and (max-width: 1020px) {
.zeitstrahl { background-position: 4px 0px; padding-bottom: 560px; }
.zeitstrahl .meilenstein { margin: 40px 0px 20px 0px; }
.zeitstrahl .meilenstein h2 { float: left; margin-left: 24px; margin-top: 10px; padding: 4px 0px; text-align: left; }
.zeitstrahl .meilenstein .punkt { float: left; margin-top: -35px; }
.zeitstrahl .element { display: block; clear: both; float: left; margin: 5px 0px 5px 40px; }
.zeitstrahl .element { width: 97%; max-width: 447px; margin: 0px 0px 5px 10px; }
.zeitstrahl .element .image { width: 100%; height: 100%;}
.zeitstrahl .element .image img { width: 100%; height: 100%; }
.zeitstrahl .element .image .maske_sprechblase { width: 100%; height: 100%; background-image: url(../images/maske-sprechblase-rechts.png) !important; background-size: 100% 100%; }
.zeitstrahl .element.with_image .image .maske_sprechblase { width: 100%; height: 100%; background-image: url(../images/maske-sprechblase-rechts_dunkler.png) !important; background-size: 100% 100%; }
.zeitstrahl .element .desc { width: 90%; height: 100%; padding: 5px 15px; background-color: transparent; }
.zeitstrahl .element .desc h2 { font-size: 19px; line-height: 21px; }
.zeitstrahl .element .desc h3 { font-size: 18px; line-height: 22px; }
.zeitstrahl .element .inhalt { width: 90%; max-width: 90%; padding: 10px; height: 100%; font-size: 15px; line-height: 16px; }
.zeitstrahl .element .inhalt h2 { font-size: 20px; line-height: 24px; }
.zeitstrahl .element .inhalt h3 { font-size: 18px; line-height: 22px; }
}
/* Ausklapp-Listen */
h2.slide_titel { display: block; clear: both; font-size: 22px; font-weight: 100; margin: 0px !important; padding: 12px 34px; cursor: pointer; border-bottom: 1px solid #d0e0ee; background-image: url(../images/raute-blau@3x.png); transition: all 0.1s ease-in-out 0.05s; background-repeat: no-repeat; background-position: 0px 23px; background-size: 25px auto; }
h2.slide_titel:hover { background-position: 6px 23px; }
h2.slide_titel.active { border-bottom: 1px solid #f4fafe; background-image: url(../images/raute-blau-o@3x.png); }
.slide_inhalt { display: block; clear: both; font-size: 16px; font-weight: 300; margin: 0px; padding: 32px 30px; border-bottom: 1px solid #d0e0ee; background-color: #f3f8fb; }
/* Veranstaltungsdetailseite */
.veranstaltungs_wrapper { width: 100%; height: auto; margin: 10px 0px 45px 0px; padding: 0px; background-color: rgba(6,88,166,0.04); -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.2); box-shadow: 0px 0px 6px rgba(0,0,0,0.2); }
.veranstaltungsbild { display: inline-block; float: left; width: 72%; height: auto; margin: 0px; padding: 0px; }
.veranstaltungsbild img { width: 100%; height: auto; /*max-height: 500px;*/ padding: 0px; margin: 0px; }
.veranstaltungsinfos { display: inline-block; float: right; width: 28%; height: auto; margin: 0px 0px 0px 0px; box-sizing: border-box; padding: 10px 20px 10px 30px; }
.veranstaltungsinfos .row { border-top: 1px solid #d0e0ee; }
.veranstaltungsinfos .row:first-child { border-top: none; }
.veranstaltungsinfos.ohne_bild { display: block; float: none; width: 100%; height: auto; margin: 0px 0px 0px 0px; box-sizing: border-box; padding: 10px 20px 10px 30px; }
.veranstaltungsinfos.ohne_bild .row { width: 33%; padding-right: 30px; display: inline-block; border: none; vertical-align: top; }
.veranstaltungsinfos.ohne_bild .row_zwei { width: 66%; }
.veranstaltungsinfos.ohne_bild .row_drei { width: 100%; }
.veranstaltungsinfos h3 { text-transform: uppercase; margin-bottom: 5px; font-weight: 500; }
.veranstaltungsinfos p { display: block; clear: both; margin-bottom: 18px; }
.veranstaltungsinfos small,
.veranstaltungsinfos small * { font-size: 14px; color: rgba(0,0,0,0.65); }
.veranstaltungs_wrapper .clear { width: 100%; }
.wochentag_eintrag { display: block; clear: both; vertical-align: top; }
.wochentag_umrundet { display: inline-block; margin: 3px 0px 6px 19px; padding: 3px 4px; box-sizing: border-box; width: 34px; height: 34px; text-align: center; font-weight: 500; font-size: 15px; color: rgb(6,88,166); border: 2px solid rgb(6,88,166); -moz-border-radius: 99px; border-radius: 99px; -webkit-border-radius: 99px; }
.veranstaltungsinfos.ohne_bild .wochentag_eintrag { width: 33%; padding-right: 20px; display: inline-block; }
@media only screen and (max-width: 994px) {
.veranstaltungsinfos.ohne_bild .row { width: 100%; display: block; clear: both; border-top: 1px solid #d0e0ee;}
.veranstaltungsinfos.ohne_bild .row:first-child { border-top: none; }
.veranstaltungsinfos.ohne_bild .wochentag_eintrag { width: 100%; padding-right: 0px; display: block; }
}
/* Formular "Veranstaltung eintragen" */
form[name=veranstaltung_eintragen] { display: block; clear: both; margin: 15px 0px; padding: 10px 15px; background-color: rgba(6,88,166,0.03); }
form[name=veranstaltung_eintragen] .row { margin: 0px 0px 0px 0px; }
form[name=veranstaltung_eintragen] h3 { margin: 0px 0px 25px 0px; }
form[name=veranstaltung_eintragen] .form-group { margin: 15px 0; }
form[name=veranstaltung_eintragen] .form-control { border: 1px solid #ccc; color: #555; display: block; font-size: 14px; height: 36px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; background-color: rgba(255, 255, 255, 0.85); color: #444; font-size: inherit; height: 32px; line-height: inherit; padding: 6px 12px; box-sizing: border-box; }
form[name=veranstaltung_eintragen] .form-control:focus { color: #555; border: 1px solid #aaa; }
form[name=veranstaltung_eintragen] textarea.form-control { height: auto; font-family: inherit; resize: none; }
form[name=veranstaltung_eintragen] .info { display: block; clear: both; width: 100%; height: auto; color: #92b6d8; font-size: 15px; margin: 12px 0px 8px 2px; font-weight: 200; }
form[name=veranstaltung_eintragen] .btn { cursor: pointer; display: inline-block; font-family: inherit; font-weight: normal; text-transform: none; border: none; width: 100%; line-height: 1.42857; margin-bottom: 0; text-align: center; vertical-align: middle; white-space: nowrap; font-size: 15px; line-height: 1.33333; padding: 10px 16px; transition: all 0.60s ease-out 0s; background-color: rgba(6,88,166,1); color: #fff; }
form[name=veranstaltung_eintragen] .btn:hover { background-color: #0065c6; }
form[name=veranstaltung_eintragen] .alert { display: block; clear: both; }
form[name=veranstaltung_eintragen] .alert-danger { padding: 4px 5px; background-color: #f7e2e0; border: 1px solid #cc5449; color: #cc5449; font-size: 14px; }
form[name=veranstaltung_eintragen] .alert-danger ul { margin: 0px; padding: 0px; }
form[name=veranstaltung_eintragen] .alert-danger ul li { color: #cc5449; font-size: 14px; margin-left: 25px; }
div.belegungsplan_export_wrapper { display: block; clear: both; height: auto; padding-bottom: 20px; border-bottom: 1px solid rgba(6,88,166,0.25); margin-bottom: 30px; }
div.belegungsplan_export_wrapper .belegungsplan_export { display: none; background-color: rgba(6,88,166,0.08); padding: 30px 40px; }
a.toggle_export,
div.belegungsplan_export_wrapper input[type=submit] { cursor: pointer; display: inline-block; font-family: inherit; font-weight: normal; text-transform: none; border: none; line-height: 1.42857; margin-bottom: 0; text-align: center; vertical-align: middle; white-space: nowrap; font-size: 15px; line-height: 1.33333; padding: 8px 16px; transition: all 0.60s ease-out 0s; background-color: rgba(6,88,166,1); color: #fff; }
a.toggle_export:hover,
div.belegungsplan_export_wrapper h3 { margin-top: 0px; }
div.belegungsplan_export_wrapper input[type=submit]:hover{ background-color: #0065c6; }
div.belegungsplan_export_wrapper select[name=kw] { margin-left: 10px; padding-left: 8px; padding-right: 8px; margin-right: 30px; }
div.belegungsplan_export_wrapper select[name=y] { margin-left: 10px; padding-left: 8px; padding-right: 8px; margin-right: 30px; }
div.belegungsplan_export_wrapper input[type=submit] { float: right; border: none; }
div.belegungsplan_export_wrapper.active a.toggle_export { display: none; }
div.belegungsplan_export_wrapper.active .belegungsplan_export { display: block; }
@media only screen and (min-width: 994px) {
div.belegungsplan_export_wrapper .content-col3-1 { padding-top: 0px; padding-bottom: 0px; }
}
/* CMS-Inhaltselement Ausklapp-Liste */
.o_accordion-liste { margin: 10px 0 20px 0; }
.o_accordion-liste + .o_accordion-liste { margin-top: 50px; }
@media only screen and (min-width: 994px) {
.o_accordion-liste + .o_accordion-liste { margin-top: 70px; }
}
/* CMS-Inhaltselement B-ITE Stellen ausgeben */
.joboffers-block { margin: 40px 0 60px 0; }
@media only screen and (min-width: 994px) {
.joboffers-block { margin: 50px 0 80px 0; }
}
.row.row_decide { text-align: center; margin-top: 25px; }
.row.row_decide .decide4 { padding: 0px; }
.row.row_decide .decide4 a { display: block; padding: 20px; border: 1px solid rgba(6,88,166,0.1); background-color: rgba(6,88,166,0.05); transition: all 0.20s ease-in-out 0s; text-align: center; }
.row.row_decide .decide4 a:hover { border: 1px solid rgba(6,88,166,0.4); background-color: rgba(6,88,166,0.15); }
.row.row_decide .decide4 a.active { border: 1px solid rgba(6,88,166,0.5); background-color: rgba(6,88,166,0.25); }
.row.row_decide .decide4 img { width: 40%; height: auto; max-width: 110px; margin: 0px auto; }
.row.row_decide .decide4 h3 { margin: 15px auto 10px auto; text-align: center; font-weight: 400; font-size: 1.3em; }
.row.row_decide .decide4 p { margin: 0px auto; text-align: center; font-weight: 0.95em; line-height: 1.18em; }
.row.row_decide .decide-oder { color: rgba(6,88,166,0.6); vertical-align: middle; text-transform: none; font-size: 1.15em; font-style: italic; }
@media only screen and (min-width: 994px) {
.decide4 a { padding: 20px 30px 25px 30px; }
.row.row_decide .decide-oder { padding-top: 120px; }
}
#gmap { width: 100%; height: 600px; background-color: #efefef; }
.map_link_centered { display: block; clear: both; width: 100%; height: auto; padding: 8px 10px; margin: 0px 0px 10px 0px; text-align: center; background-color: #1d70b7; color: #fff; }
.map_link_centered a { display: block; width: 100%; color: #fff; }
.map_link_centered a:hover { color: #dae5ef; }
@media only screen and (max-width: 994px) {
#gmap { height: 70vw; }
}
a.stichwort_buchstabe { display: inline-block; padding: 3px 7px; min-width: 18px; margin-right: 3px; margin-top: 3px; margin-bottom: 3px; text-align: center; font-weight: 300; background-color: rgba(6,88,166,0.8); border: 1px solid rgba(6,88,166,1.0); color: #fff; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
a.stichwort_buchstabe:hover { border: 1px solid rgba(6,88,166,1.0); color: rgba(6,88,166,1.0); background-color: #fff; }
.kalender_filter { display: block; clear: both; margin: 0px 0px 35px 0px; }
.kalender_filter a { display: inline-block; float: left; margin: 0px; padding: 6px 25px; -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3); box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
.kalender_filter a span { color: inherit; }
.kalender_filter a:hover { background-color: #0270d0; color: #fff; }
.kalender_filter a.active { background-color: #0058a5; color: #fff; }
.kalender_filter a i.fa { font-size: 19px; margin-right: 5px; color: inherit; }
@media all and (max-width:990px) {
.kalender_filter a { width: 50%; margin: 0px; box-sizing: border-box; padding: 6px 10px; }
}
/* Buttons in Kalender für Mobile-Ansicht ein- bzw. ausblenden*/
@media all and (max-width: 994px) {
.vorabauswahl { display: block; clear: both; width: 100%; height: 110px; margin: 10px 0px 15px 0px; overflow: hidden; overflow-x: auto; background-color: #fdfdfd; -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3); box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.3); }
.vorabauswahl_wrapper { display: inline-table; table-layout: fixed; width: 100%; height: 100%; }
.vorabauswahl div { display: table-cell; vertical-align: top; width: auto; width: 180px; padding: 8px 5px; text-align: center; height: 100%; font-size: 0.80rem; line-height: 1.1em; word-break:normal; margin: 0px 0px; }
.vorabauswahl div input { margin-bottom: 9px; }
.fc-toolbar .fc-center { display: block; clear: both; margin-top: 20px; width: 100%; text-align: center; }
.fc-toolbar .fc-center h2 { float: none; margin-top: 0px; margin-left: auto !important; text-align: center; }
.fc .fc-right .fc-button { display: none; }
/*.fc .fc-right .fc-button-group .fc-agendaOneDayMobile-button { display: inline-block; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }*/
}
@media all and (min-width: 995px) {
.vorabauswahl { display: none; }
.fc .fc-right .fc-button { display: inline-block; }
.fc .fc-right .fc-button-group .fc-agendaOneDayMobile-button { display: none; }
.fc .fc-right .fc-button-group .fc-agendaOneDayMobile-button + .fc-button { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
}
/* Freibad Wassertemparaturen */
body.temperaturen-freibad .brotkruemel { display: none; }
@media all and (max-width: 994px) {
body.temperaturen-freibad #top_bar { height: 38px; padding: 7px 0px; }
body.temperaturen-freibad #abstand_folgeseiten { height: 112px; }
body.temperaturen-freibad #section-inhalt { padding-top: 20px; }
}
.row.freibad-temperaturen { margin: 0px 0px; }
.row.freibad-temperaturen .content-col3-1 { }
.row.freibad-temperaturen .content-col3-1 .title { }
/* Darstellung auf Startseite */
.box_klima .row.freibad-temperaturen { float: right; width: 200px; }
.box_klima .row.freibad-temperaturen .content-col3-1 { width: 33.32%; padding: 0px 5px !important; margin: 0px; }
.box_klima .row.freibad-temperaturen .content-col3-1 .title { width: 100%; font-size: 12px; text-align: right; margin: 0px; padding: 0px; }
.box_klima .row.freibad-temperaturen .content-col3-1 .desc { width: 100%; font-size: 16px; text-align: right; font-weight: 500; }
/* Darstellung auf Folgeseiten */
body.folgeseite .row.freibad-temperaturen { padding: 5px; padding-top: 50px; padding-left: 0px; background-position: top left; background-image: url('../images/icon_freibad-temp@2x.png'); background-repeat: no-repeat; background-size: 50px auto; }
body.folgeseite .row.freibad-temperaturen .content-col3-1 { padding: 15px 10px; margin: 10px 0px; border-bottom: 3px solid rgba(6,88,166,0.35); -moz-border-radius: 2px; border-radius: 2px; -webkit-border-radius: 2px; -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.2); box-shadow: 0px 0px 5px rgba(0,0,0,0.2); }
body.folgeseite .row.freibad-temperaturen .content-col3-1 .title { display: inline-block; float: left; font-size: 16px; color: rgb(6,88,166); text-align: left; margin: 0px; padding: 0px; font-weight: 400; }
body.folgeseite .row.freibad-temperaturen .content-col3-1 .desc { display: inline-block; float: right; font-size: 26px; color: rgb(6,88,166); text-align: right; font-weight: 200; }
body.folgeseite .row.freibad-temperaturen + small.state { display: block; width: 100%; margin-top: -12px; text-align: right; box-sizing: border-box; color: rgba(6,88,166,0.5); font-weight: 100; padding-right: 16px; padding-top: 0px; }
@media all and (min-width: 995px) {
body.folgeseite .row.freibad-temperaturen { padding: 10px; padding-left: 80px; background-position: center left; }
body.folgeseite .row.freibad-temperaturen .content-col3-1 { padding: 25px 25px; margin: 0px 0.667%; }
}
/* Inhaltselemente zu BayernPortal-Schnittstelle */
form.search_bayernportal { border: none; }
form.search_bayernportal fieldset { border: none; padding: 0; margin: 15px 0 10px 0px; }
form.search_bayernportal fieldset input { position: relative; display: block; width: 100%; height: 50px; padding: 4px 16px 4px 48px; box-sizing: border-box; font-size: 20px; font-weight: 300; border: 1px solid rgba(6,88,166,0.5); outline: none; transition: 0.2s ease-in 0s; background-color: rgba(6,88,166,0.01); border-radius: 4px; }
form.search_bayernportal fieldset::before { content: ''; position: absolute; display: inline-block; width: 21px; height: 21px; margin: 13px 0 0 13px; background-image: url('/templates/images/icon_search.svg'); background-repeat: no-repeat; background-size: contain; background-position: center center; opacity: 0.4; }
form.search_bayernportal fieldset input:focus { border: 1px solid rgba(6,88,166,0.8); color: #222; background-color: rgba(6,88,166,0.07); }
form.search_bayernportal fieldset input + .loading { position: absolute; margin-top: -30px; margin-left: 50%; transform: translateX(-50%); }
.slide_inhalt.bayernportal_data { padding: 10px 15px; }
.slide_inhalt.bayernportal_data .description { padding-left: 20px; }
.slide_inhalt.bayernportal_data .description ul { margin-left: 0; padding-left: 0; }
.slide_inhalt.bayernportal_data .link-buttons { display: block; clear: both; margin-top: 5px; }
.slide_inhalt.bayernportal_data .link-buttons > a { display: inline-block; margin-top: 3px; margin-bottom: 12px; font-weight: 300; padding: 2px 8px 2px 30px; color: #fff; background-color: rgba(6,88,166,0.7); }
.slide_inhalt.bayernportal_data .link-buttons > a:hover { background-color: rgba(6,88,166,0.99); }
.slide_inhalt.bayernportal_data .link-buttons > a::before { color: #fff; margin-left: -1.5em; }
@media all and (min-width: 995px) {
.slide_inhalt.bayernportal_data { padding: 15px 30px; }
.slide_inhalt.bayernportal_data .description { padding-left: 30px; }
.slide_inhalt.bayernportal_data .link-buttons > a { margin-top: 5px; margin-bottom: 10px; margin-right: 30px; }
}
/* Loading Animation - Spinner (Pure CSS) */
.lds-roller { display: inline-block; position: relative; width: 40px; height: 40px; }
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; }
.lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ddd; margin: -4px 0 0 -4px; }
.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 68px; left: 56px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 71px; left: 48px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 72px; left: 40px; }
.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 71px; left: 32px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 68px; left: 24px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 63px; left: 17px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 56px; left: 12px; }
@keyframes lds-roller {
0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }
}
ul.link-list { margin: 0; padding: 0; list-style-type: none; }
ul.link-list > li { margin: 17px 0; padding: 0; }
ul.link-list > li.hide { display: none; opacity: 0.2; }
ul.link-list > li.show { opacity: 1; }
ul.link-list li h3,
ul.link-list li h4 { margin: 0; padding: 0; }
ul.link-list li a.external { margin: 0; padding: 0; padding-left: 1.8em; }
ul.link-list li a.external::before { content: "\f08e"; font-family: FontAwesome; position: absolute; margin-left: -1.6em; width: 1.3em; font-size: 0.89rem; margin-top: 1px; }
ul.link-list li ul { list-style-type: none; }
ul.link-list li ul li { margin: 4px 0; padding-left: 1.6em; color: #333; }
ul.link-list li ul li::before { content: "\f0f6"; font-family: FontAwesome; position: absolute; margin-left: -1.3em; width: 1.3em; }
ul.link-list li ul li a.without-link { color: #000; }
/* ---- ENDE Section-Formatierungen ---- */
#foot { position: relative; width: 100%; min-height: 100px; height: auto; padding: 15px 0px 18px 0px; box-sizing: border-box; font-size: 14px; color: #78b5e3; text-align: left; background-color: #1f69ac; border-bottom: 10px solid #074e91; z-index: 200; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1f69ac+0,1f69ac+53,0558a6+100 */ background: #1f69ac; /* Old browsers */ background: -moz-linear-gradient(top, #1f69ac 0%, #1f69ac 53%, #0558a6 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #1f69ac 0%,#1f69ac 53%,#0558a6 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #1f69ac 0%,#1f69ac 53%,#0558a6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f69ac', endColorstr='#0558a6',GradientType=0 ); /* IE6-9 */ }
#foot .container { padding: 0px; }
#foot * { font-size: inherit; color: inherit; }
#foot h3 { text-transform: uppercase; font-size: 19px; }
#foot .align_left { text-align: left; }
#foot .content-col3-1 img.wappen { margin: 0px 20px 20px 0px; }
#foot .content-col3-1 a { color: #c6e4f7; transition: all 0.20s ease-in-out 0s; }
#foot .content-col3-1 a:hover { color: #f0f9ff; text-decoration: none; }
#foot .content-col3-1.foot_kontakt {}
#foot .content-col3-1.foot_kontakt i { display: inline-block; float: left; font-size: 19px; line-height: 22px; margin-bottom: -8px; margin-right: 5px; }
#foot .content-col3-1 ul { display: block; clear: both; float: left; width: 100%; height: auto; margin: 0px 0px; padding: 0px; }
#foot .content-col3-1 ul li { display: block; clear: both; width: auto; height: auto; margin: 0px auto 0px auto; text-align: left; padding: 0px 0px 0px 0px; }
#foot .content-col3-1ul li a { display: block; float: left; width: auto; height: auto; text-align: left; padding: 0px 10px; margin: 0px; font-size: 17px; font-weight: 200; color: #000; box-sizing: border-box; transition: all 0.25s ease-in-out 0s; }
#foot .content-col3-1 ul li a:hover { text-decoration: none; color: #f0f9ff; }
#foot .content-col3-1 ul li.active a { color: #fff; font-weight: 700; }
#scroll-down { position: absolute; right: 40px; margin-top: -90px; height: 50px; z-index: 720; }
#scroll-down a { background-color: rgba(255,255,255,0.95); width: 44px; height: 44px; padding: 9px 9px 10px 9px; text-align: center; box-sizing: border-box; display: block; box-sizing: border-box; -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.2s ease-in-out 0s; z-index: 450; }
#scroll-down a:hover { margin-top: 4px; background-color: rgba(255,255,255,1); }
#scroll-down a img { width: 19px; height: auto; }
#scroll-down a:hover img { color: inherit; }
@media only screen and (max-width: 994px) {
#scroll-down { display: none; }
}
#back-top { position: fixed; right: 20px; bottom: 100px; margin-top: -68px; height: 50px; z-index: 700; }
#back-top a { background-color: rgba(255,255,255,0.95); width: 44px; height: 44px; padding: 9px 9px 10px 9px; text-align: center; box-sizing: border-box; display: block; box-sizing: border-box; -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.2); box-shadow: 0px 0px 8px rgba(0,0,0,0.2); -moz-border-radius: 3px; border-radius: 3px; -webkit-border-radius: 3px; transition: all 0.2s ease-in-out 0s; z-index: 450; }
#back-top a:hover { background-color: rgba(255,255,255,1); }
#back-top a img { width: 19px; height: auto; }
#back-top a:hover img { color: inherit; }
@media only screen and (max-width: 994px) {
#back-top { right: 15px; bottom: 15px; margin-top: -68px; height: 50px; }
}
/* -------------------- Animations-Effekte -------------------- */
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.come-in {
transform: translateY(150px);
animation: come-in 0.9s ease forwards;
}
.already-visible {
transform: translateY(0);
animation: none;
}
@keyframes come-in {
to { transform: translateY(0); }
}
@-webkit-keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* --------------- Mobile-Darstellung bis zu 994px, aber einspaltige Inhaltsdarstellung bereits ab 780px nach unten --------------- */
@media only screen and (max-width: 994px) {
.hide4mobile { display: none; }
.container { width: 740px; }
.content-col3-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }
.section.dreispaltig .content-col3-1 { min-height: auto; height: auto; margin-bottom: 0px; padding: 10px 0px 50px 0px; }
.content-col3-1 .pic { height: auto; }
.content-col3-2 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }
.content-col2-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; margin-right: 0px; padding: 0px; margin-bottom: 30px; }
a.a_sprung { margin-top: -60px; }
a.a_sprung-s { margin-top: -40px; }
a.bn_bg_ci { width: 100%; padding: 12px 40px; box-sizing: border-box; }
table.border_ci th { padding: 10px 10px; }
table.border_ci td { padding: 10px 10px; }
img.img_responsiv_full { width: 100% !important; max-width: 100%; height: auto; margin: 15px 0px 25px 0px !important; }
img.img_responsiv_half { width: 50% !important; max-width: 100%; height: auto; }
#foot { padding: 40px 20px 20px 20px; padding-top: 4vw; }
#foot .content-col3-1 { display: block; clear: both; margin: 10px auto; align: center; text-align: center; }
#foot .content-col3-1 img.wappen { margin: 10px 0px 5px 0px; }
#foot .content-col3-1 .align_left { width: 100%; box-sizing: border-box; display: block; clear: both; margin: 0px auto; align: center; text-align: center; }
#foot .content-col3-1.foot_kontakt { display: block; clear: both; margin: 10px auto; align: center; text-align: center; line-height: 24px; }
#foot .content-col3-1.foot_kontakt i.fa { float: none; text-align: center; }
#foot .content-col3-1 ul { display: block; clear: both; margin: 10px auto; align: center; text-align: center; }
#foot .content-col3-1 ul li { display: block; clear: both; text-align: center; }
/* -------------------- Spezielle Formatierungen -------------------- */
#abstand_folgeseiten { height: 120px; }
.brotkruemel { padding: 10px 0px;}
.brotkruemel .container { font-size: 12px; color: #808284; padding-left: 10px; }
#section-headpic { height: 20vw; }
.veranstaltungsbild { display: block; float: none; clear: both; width: 100%; height: auto; margin: 0px; padding: 0px; }
.veranstaltungsinfos { display: block; float: none; clear: both; width: 100%; margin: 10px 0px; }
}
@media only screen and (max-width: 780px) {
.container { width: 100%; box-sizing: border-box; padding-left: 10px; padding-right: 10px; }
.content-col3-1 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }
.content-col3-2 { display: block; height: auto; max-width: 100%; width: 100%; margin-left: 0px; padding: 0px; margin-bottom: 30px; }
.content-col2-1 { display: block; clear: both; width: 100%; height: auto; padding: 0px 0px; margin-bottom: 30px; }
/* -------------------- Spezielle Formatierungen -------------------- */
#section-veranstaltungen .align_right { display: block; clear: both; float: left; text-align: left; padding-top: 10px; }
#section-veranstaltungen .align_right a { margin-left: 0px; margin-right: 15px; }
.slider_veranstaltungen { }
.slider_veranstaltungen .tag.slick-slide { width: 30%; margin: 0px 5px; }
.slider_veranstaltungen .tag.slick-slide .veranstaltung { }
.slider_veranstaltungen .tag.slick-slide .veranstaltung h3 { font-size: 17px; }
#section-headpic { height: 30vw; }
}
@media only screen and (max-width: 560px) {
.hide4smartmobiles { display: none; }
/* -------------------- Spezielle Formatierungen -------------------- */
#section-veranstaltungen .align_right { display: block; clear: both; float: left; text-align: left; padding-top: 5px; }
#section-veranstaltungen .align_right a { display: block; clear: both; float: left; text-align: left; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; }
#section-headpic { height: 45vw; }
}
@media only screen and (min-width: 995px) {
.container { width: 980px; }
#top_bar .container { padding-left: 0px; padding-right: 0px; }
#nav_bar .container { padding-left: 0px; padding-right: 0px; }
.content-col3-1 { position: relative; float: left; width: 32%; height: auto; padding: 20px 0px; }
.content-col3-2 { position: relative; float: left; width: 66%; height: auto; padding: 20px 0px; }
.content-col2-1 { position: relative; float: left; width: 49%; height: auto; padding: 20px 0px; }
/* -------------------- Spezielle Formatierungen -------------------- */
}
@media only screen and (min-width: 1200px) {
.container { /*margin: 0px 10px;*/ width: 1170px; }
/* -------------------- Spezielle Formatierungen -------------------- */
}
/* ----------------------- Verläufe -------------------------*/
.verlauf_blau-dunkelblau { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#03407d+0,3d7dbd+100 */
background: #03407d; /* Old browsers */
background: -moz-linear-gradient(45deg, #03407d 0%, #3d7dbd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #03407d 0%,#3d7dbd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #03407d 0%,#3d7dbd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#03407d', endColorstr='#3d7dbd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}