@charset 'utf-8';
/* ==========================================================================
     Kunstvolle Styles fuer k u n s t l e b t
   ==========================================================================
     Basiert auf Phil Warehams Textpattern default theme => github.com/textpattern/textpattern-default-theme // 09-2015
     Kompatibilitaet: IE ab Version 9; Chrome, Firefox, Safari und Opera in den jeweils letzten zwei 'stable' Versionen.
     11-01-2018, Martin Niggemann, weltrettung.org */


/*   Farben
   ==========================================================================
	 Magenta         #F0F; rgba(255, 0, 255, 1);
*/


/*   Fonts
   ========================================================================== */

/* Montserrat 
	=> montserrat.zkysky.com.ar/en // SIL Open Font License */
@font-face 											{ font-family: 'montserrat'; font-weight: normal; font-style: normal;
														src: url('../fonts/montserrat/montserrat-regular-webfont.eot');
														src: url('../fonts/montserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
														     url('../fonts/montserrat/montserrat-regular-webfont.woff2') format('woff2'),
														     url('../fonts/montserrat/montserrat-regular-webfont.woff') format('woff'); }
/* Merriweather 
	=> sorkintype.com // SIL Open Font License */
@font-face 											{ font-family: 'merriweather'; font-weight: normal; font-style: normal;
														src: url('../fonts/merriweather/merriweather-regular-webfont.eot');
														src: url('../fonts/merriweather/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
														     url('../fonts/merriweather/merriweather-regular-webfont.woff2') format('woff2'),
														     url('../fonts/merriweather/merriweather-regular-webfont.woff') format('woff'); }
/* Slick Slider Icon Font */
@font-face											{ font-family: 'slick'; font-weight: normal; font-style: normal;
														src: url('../fonts/slick/slick.eot');
														src: url('../fonts/slick/slick.eot?#iefix') format('embedded-opentype'), 
														     url('../fonts/slick/slick.woff') format('woff'), 
														     url('../fonts/slick/slick.ttf') format('truetype'); }


/* ==========================================================================
     Styling und Layout fuer alle Ausgabegeraete
   ========================================================================== */
   
   
/*   HTML5 Display Definitionen
   ========================================================================== */

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary 
													{ display: block; }
audio, canvas, progress, video 						{ display: inline-block; vertical-align: baseline; }
[hidden], template 									{ display: none; }
a, input, button 									{ -ms-touch-action: none;  } /* touch-action: none; die Tap Verzoegerung in IE 10+ entfernen */
summary 											{ cursor: pointer; }

/* IE10 Viewport Hack fuer Surface/Desktop Windows 8 Bug => getbootstrap.com/getting-started/#support-ie10-width
@-moz-viewport 										{ width: device-width; }
@-ms-viewport 										{ width: device-width; }
@-webkit-viewport 									{ width: device-width; }
@viewport 											{ width: device-width; } */


/*   Clearfix
   ========================================================================== */
/* => nicolasgallagher.com/micro-clearfix-hack/ */

header:after, footer:after, nav ul:after, nav ol:after, .clearfix:after, .container:after, .paginator:after, .logo-header:after, .teaser:after
													{ content: ""; display: table; clear: both; }


/* ==========================================================================
     Styling und Layout fuer Screen (mobile first)
   ========================================================================== */

@media screen {

/*   Layout
   ========================================================================== */

html 												{ -webkit-tap-highlight-color: rgba(0, 102, 255, 0.5); overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body 												{ background: white; position: relative; margin: 0; min-height: 100vh; /* body fuellt kompletten Viewport */ }
.wrapper 											{ padding: 1px 0 1em; }
.container, .logo-header, .site-navigation
									 				{ margin: 0 auto; width: 90%; max-width: 86em; }
.site-header 										{ padding: 1em 0; background: rgba(255, 255, 255, 0.95); }
.site-header h1 									{ margin: 0; }
.site-header h3 									{ margin: 0.5em 0 0; }
.logo-header .logo									{ float: left; width: 7em; height: 9.833em; }
.logo-header .logo a								{ display: block; }
.logo-header .logo img								{ width: 9.833em; height: 9.833em; }
.logo-header .freund								{ float: right; width: auto; }
.logo-header .freund a								{ display: block; color: black; padding: .25em .45em .15em; border: 0.188em solid magenta; font-size: 1.125em; 
													  -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.logo-header .freund a:hover						{ background: magenta; color: white; }

.site-footer 										{ padding: 0.5em 0; border-top: .333em solid black; clear: both; }

[role="article"] 									{ margin-bottom: 2em; word-wrap: break-word; /* verhindert, dass extrem lange Woerter das Layout zerschiessen */ }
.complementary-content 								{ margin: 2em -6% 0; padding: 0 6%; word-wrap: break-word; }


/*   Navigation
   ========================================================================== */

.site-navigation 									{ }
.site-navigation ul 								{ margin: 0 auto; padding: 0; max-width: 86em; list-style: none; }
.site-navigation li 								{ border-top: 1px solid black; -webkit-transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear;}
.site-navigation li:hover 							{ }
.site-navigation li:active a						{ /* -webkit-box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); */ }
.site-navigation li.active a						{ /* -webkit-box-shadow: none; box-shadow: none; */ }
.site-navigation a 									{ display: block; padding: 0.5em 6%; color: black; }
.site-navigation a:hover							{ text-decoration: none; }
.site-navigation a:active 							{ text-decoration: none; }

.site-navigation li ul 								{ display: none; text-transform: none; }
.site-navigation li.open ul							{ display: block; }

.site-navigation li.active							{ }
.site-navigation li.active a						{ color: magenta; }
.site-navigation li li								{ border: 0; }
.site-navigation li.active li a						{ color: black; }
.site-navigation li li a.active						{ color: magenta; }

.site-footer .site-navigation ul 					{ padding: 1em 0 2em; }
.site-footer .site-navigation li 					{ border: 0; }
.site-footer .site-navigation a 					{ border: 0; padding: 0.5em 0; color: #aaa; }

.mobile-navbar										{ display: none; }

/*   Links
   ========================================================================== */

a 													{ text-decoration: none; color: magenta; 
													  text-decoration-skip: ink edges; /* unterbricht die decoration-Linie, um darunter liegenden Text zu zeigen */ 
													  background-color: transparent; /* entfernt grauen Hintergund von aktiven Links in IE 10 */ }
a:hover, a:active 									{ outline: 0; text-decoration: none; color: black; }
a:focus 											{ outline: 0; }

h1 a 												{ color: black; }
h1 a:hover, h1 a:active 							{ color: black; }

.paginator 											{ clear: both; }
.paginator [rel="prev"] 							{ float: left; }
.paginator [rel="next"] 							{ float: right; }


/*   Typografie
   ========================================================================== */
     
*::selection										{ background: black; color: magenta; }
*::-moz-selection									{ background: black; color: magenta; }
*::-webkit-selection 								{ background: black; color: magenta; }

html 												{ font-size: 100%; line-height: 1.5em; }
body 												{ font-family: "merriweather", serif; letter-spacing: 0; color: black; }
.site-navigation ul									{ font-family: "montserrat", sans-serif; letter-spacing: 0.02em; font-size: 0.889em; font-weight: normal; }
.wrapper > .container > section, 
.wrapper > .container > main, 
.wrapper > .container > aside 						{ font-size: 0.889em; }

h1, h2, h3, h4, h5, h6, .logo-header				{ clear: both; font-family: "montserrat", sans-serif; letter-spacing: 0; font-weight: normal; }
h1 													{ font-size: 1.875em; line-height: 1.333em; margin:.8em 0; }
h2 													{ font-size: 1.875em; line-height: 1.333em; margin:.8em 0; }
h3 													{ font-size: 1.500em; line-height: 1.400em; margin: 1em 0; }
h4 													{ font-size: 1.250em; line-height: 1.440em; margin: 1em 0; }
h5 													{ font-size: 1.000em; line-height: 1.500em; margin:.4em 0; text-transform: uppercase; letter-spacing: .02em; }
h6 													{ font-size: 1.000em; line-height: 1.500em; margin: 1em 0; }
p													{ margin: .8em 0; }

/* Webfontloader */
.wf-loading body									{ font-family: Georgia, serif !important; letter-spacing: 0.053em !important; }
.wf-loading .site-navigation, .wf-loading h1, .wf-loading h2, .wf-loading h3, .wf-loading h4, .wf-loading h5, .wf-loading h6
													{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; letter-spacing: 0.072em !important; }

b, strong 											{ font-weight: normal; /* benoetigt fuer 'bolder' Style */ }
address 											{ margin: 1em 0; }

blockquote 											{ font-size: 1.25em; line-height: 1.4em; font-style: normal; margin: 0.8em 0; text-align: center; }
dfn 												{ font-style: normal; }
abbr[title], dfn[title] 							{ border-bottom: 1px dotted; cursor: help; }
mark, var 											{ border-radius: 0.25em; padding: 0 0.25em; color: #333333; background: #fff9e1; }
pre, code, kbd, samp 								{ font-size: 0.875em; line-height: 1.5em; border: 1px solid #e3e3e3; border-radius: 0.286em; color: #333333; background-color: #f7f7f7; font-family: Menlo, Consolas, Monaco, monospace; }
code, kbd, samp 									{ padding: 1px 0.214em; }
pre 												{ word-wrap: normal; overflow-x: auto; padding: 0.571em 1.143em; tab-size: 4; }
pre code 											{ font-size: 1em; border: 0; padding: 0; background-color: transparent; }
sub, sup.footnote, sup 								{ font-size: 0.625em; line-height: 0em; position: relative; vertical-align: baseline; }
sup 												{ top: -0.5em; }
sub 												{ bottom: -0.25em; }
small, figcaption, tfoot, .footnote 				{ font-size: 0.75em; line-height: 1.5em; }
figcaption, tfoot, .footnote 						{ color: #888888; }
figcaption 											{ margin-top: 0.5em; font-style: normal; }
hr 													{ margin: 1em 0; width: 3em; border: 0; border-bottom: .333em solid black; height: 0; text-align: left; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }


/*   Eingebettete Medien
   ========================================================================== */

img, video 											{ max-width: 100%; height: auto; }
img 												{ border: 0; vertical-align: middle; /* entfernt den Abstand unter dem Bild, ueber dem umgebenden Container */ }

img.align-left 										{ float: left; margin: 1em 1em 1em 0; }
img.align-right 									{ float: right; margin: 1em 0 1em 1em; }
img.align-center 									{ display: block; margin: 1em auto; }

figure 												{ margin: 0; }
audio:not([controls]) 								{ display: none; height: 0; }
svg:not(:root) 										{ overflow: hidden; }


/*  Tabellen
   ========================================================================== */

table 												{ margin-bottom: 1em; border-collapse: collapse; border-spacing: 0; width: 100%; }
caption 											{ font-style: normal; text-align: left; margin-bottom: 0.5em; }
th, td 												{ vertical-align: top; text-align: left; border-bottom: 1px solid #aaa; padding: 0.25em; }
thead tr:first-child th, thead tr:first-child td 	{ padding-top: 0; }
thead tr:last-child th, thead tr:last-child td 		{ border-bottom: 2px solid #aaa; }
tfoot th, tfoot td 									{ padding: 0.333em; }
tfoot tr:last-child th, tfoot tr:last-child td 		{ border-bottom: 0; padding-bottom: 0; }
tbody tr:first-child td, tbody tr:first-child th 	{ border-top: 1px solid #aaa; }
[rowspan] 											{ vertical-align: middle; }


/*   Listen
   ========================================================================== */

menu, ol, ul 										{ padding: 0 0 0 2em; }
li > ul, li > ol 									{ margin: 0; }
dd 													{ margin: 0 0 0 2em; }
dt 													{ font-style: normal; }


/*  Formulare mit Browser-Resets
   ========================================================================== */

fieldset 											{ margin: 1em 0; border: 0; padding: 1px 0; min-width: 0; }
legend 												{ font-family: "montserrat", sans-serif; text-transform: uppercase; letter-spacing: .02em; border: 0; padding: .5em 0; }
button, input, optgroup, select, textarea 			{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 100%; font-size: 1em; line-height: 1.5em; margin: 0; max-width: 100%; font-family: "montserrat", sans-serif; vertical-align: baseline; }

input::-moz-placeholder, 
textarea::-moz-placeholder 							{ color: #999; }
input:-ms-input-placeholder, 
textarea:-ms-input-placeholder 						{ color: #999; }
input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder 				{ color: #999; }

button::-moz-focus-inner, input::-moz-focus-inner 	{ border: 0; padding: 0; }
input[type="search"]::-webkit-search-decoration 	{ -webkit-appearance: none; }
input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], select, textarea 
													{ width: 60%;
													 -webkit-transition: box-shadow 0.2s linear; transition: box-shadow 0.2s linear; -webkit-appearance: none; border: 1px solid #aaa; border-radius: 0; padding: 0.5em 0.1875em; height: 2.5em; background: #ffffff; }
input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, select:focus, textarea:focus 
													{ background: #efefef; border-color: #777; }
input[type="color"] 								{ padding: 0; }
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button 	{ height: auto; }
input[type="checkbox"], input[type="radio"] 		{ padding: 0; }
input[type="checkbox"], 
input[type="radio"]			 						{ margin: 0 0.5em 0 0; }

select 												{ text-transform: none; }
select[size], select[multiple] 						{ height: auto; }
select[size="0"], select[size="1"] 					{ height: 2.5em; }

form ul												{ list-style-type: none; }
form ul input[type="checkbox"], 
form ul input[type="radio"]			 				{ margin: 0 0.5em 0 -1.4em; }
label												{ padding: .6em 0 0 0; display: block; }
#wrap_Inputfield_einverstanden > label.InputfieldHeader,
.Inputfield_website									{ display: none; }
#ui-datepicker-div									{ background: rgba(255, 255, 255, 0.85); font-family: "montserrat", sans-serif; }


/*
}  Ende @media screen

@media screen and (-webkit-min-device-pixel-ratio: 0) {

select[size], select[multiple], select[multiple][size]
													{ padding-right: 0.5em; background-image: none; }
select, select[size="0"], select[size="1"] 			{ padding-right: 1.5em; background-size: 1.0625em 0.3125em;
													  background: #ffffff url("data:image/svg+xml,<svg version='1.1' baseProfile='full' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='17px' height='5px' viewBox='0 0 17 5' enable-background='new 0 0 17 5' xml:space='preserve'><polygon fill='#333333' points='0,0 5,5 10,0'/></svg>") right center no-repeat; }

} Ende @media screen and (-webkit-min-device-pixel-ratio: 0)

@media screen { 
*/

optgroup 											{ font-style: normal; font-weight: normal; color: #333333; }
textarea 											{ height: auto; min-height: 3em; overflow: auto; resize: vertical; vertical-align: top; width: 100%; }
button[disabled], input[disabled], input[type="button"][disabled], input[type="reset"][disabled], input[type="submit"][disabled], select[disabled], select[disabled] option, select[disabled] optgroup, textarea[disabled], span.disabled 
													{ -webkit-box-shadow: none !important; box-shadow: none !important; opacity: 1; border-color: #e3e3e3 !important; color: #aaaaaa !important; background: #eeeeee !important; text-shadow: none !important; cursor: default !important; }

.small input 										{ width: 25%; min-width: 151px; }
.small textarea 									{ height: 5.5em; }
.large input 										{ width: 50%; min-width: 302px; }
.large textarea 									{ height: 9.75em; }

label:after, /* zum Testen */
input[required="required"]:after,
.required:after										{ content: '\a0*' !important; color: magenta; }
form ul label:after									{ content: normal !important; } 

/*:not(output):invalid,
:not(output):-moz-submit-invalid,*/
:not(output):-moz-ui-invalid			 			{ box-shadow: 0 0 1.5px 1px magenta; border-color: magenta; }

/* 
input:focus:invalid, select:focus:invalid, textarea:focus:invalid 
													{ -webkit-box-shadow: none; box-shadow: none; border-color: #9d261d; }
*/

/*   Buttons
   ========================================================================== */

button 												{ overflow: visible; text-transform: none; margin: 1em 0;
													 -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
button, input[type="button"], input[type="reset"], input[type="submit"] /* SVG-Hintergrundbilder entfernt */
													{ color: black; text-transform: uppercase; letter-spacing: .02em;
													  border: 1px solid #aaa; border-radius: 0.5em; padding: 0.5em 0.75em; width: auto; height: 2.5em; font-weight: normal; text-align: center; display: inline-block; cursor: pointer; 
													  background-color: #dddddd; background-size: 100%; background-image: -webkit-linear-gradient(#eeeeee, #dddddd); background-image: linear-gradient(#eeeeee, #dddddd); -webkit-transition: all 0.2s linear; transition: all 0.2s linear; -webkit-appearance: none; 
													  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover 
													{ border-color: #777; color: magenta; background-color: #e8e8e8; background-size: 100%; background-image: -webkit-linear-gradient(#f8f8f8, #e8e8e8); background-image: linear-gradient(#f8f8f8, #e8e8e8); text-decoration: none; }
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active 
													{ border-color: #777; color: #1a1a1a; background-color: #e4e4e4; -webkit-box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); box-shadow: inset 0 0.2em 0.25em rgba(0, 0, 0, 0.15); background-size: 100%; background-image: -webkit-linear-gradient(#d3d3d3, #e4e4e4); background-image: linear-gradient(#d3d3d3, #e4e4e4); text-decoration: none; }
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus 
													{ border-color: #7fb2ff; }


/*   Google maps
   ========================================================================== */

#googlemap img, #googlemap object, #googlemap embed { max-width: none; }
#map_canvas img, #map_canvas object, #map_canvas embed
													{ max-width: none; }

/*   Plugins etc
   ========================================================================== */

/* Slider: slick-theme.css 
	=> kenwheeler.github.io/slick/ */
	
.slick-loading .slick-list 							{ background: #fff url('../scripts/Vendor/slick/ajax-loader.gif') center center no-repeat; }

.slick-prev, .slick-next 							{ font-size: 0; line-height: 0; position: absolute; top: 0; bottom: 0; z-index: 10; display: block; width: 15%; height: 100%; padding: 0;
													  cursor: pointer; color: transparent; border: none; outline: none; background: transparent; 
													  /* -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); */ }
.slick-prev:hover, .slick-prev:focus, 
.slick-next:hover, .slick-next:focus 				{ color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, 
.slick-next:hover:before, .slick-next:focus:before	{ opacity: 1; }
.slick-prev.slick-disabled:before, 
.slick-next.slick-disabled:before 					{ opacity: .25; }
.slick-prev 										{ left: 0; }
.slick-next 										{ right: 0; }
/* prev-next Icons aus 
.slick-prev:before, .slick-next:before 				{ font-family: 'slick'; font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-prev:before 									{ content: '←'; }
.slick-next:before 									{ content: '→'; } */

.slick-dots 										{ display: none !important; position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } 
.slick-dots li 										{ position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button 								{ font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; }
.slick-dots li button:hover,
.slick-dots li button:focus 						{ outline: none; }
.slick-dots li button:hover:before,
.slick-dots li button:focus:before 					{ opacity: 1; }
.slick-dots li button:before 						{ font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0; width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before 			{ opacity: .75; color: black; }

.slider												{ /*! margin: 0 0 .5em 0; */ }
.slider .slick-slide								{ position: relative; }
.slider .slick-slide img							{ width: 100%; }
.slider-caption										{ position: absolute; bottom: .6em; left: 1.6em; }
.slider-caption h2									{ }
	.caption-white, .caption-white a				{ color: white !important; }
	.caption-black, .caption-black a				{ color: black !important; }
.draggable											{ cursor: grab; }

/* hero */
.hero												{ margin: 0 0 .5em 0; }
.hero > div											{ position: relative; }
.hero div img										{ width: 100%; }

/* teaser ohne table */
.teaser												{ margin: 0; }
.teaser-row											{ }
.teaser-box											{ width: 50%; float: left; border: 1px solid white; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.teaser img											{ opacity: 1; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.teaser-0											{ }
.teaser-caption										{ position: absolute; top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.6); 
													 -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.teaser-caption h4									{ text-align: center; margin: .4em 0; font-size: 1em; }
.teaser a											{ display: block; background: white; position: relative; }
.teaser a:hover .teaser-caption						{ background: rgba(255, 255, 255, 1); }
.teaser a:hover img									{ opacity: .7; }

/* Tabs mit :target: 
	=> cssdeck.com/labs/demo-for-tabbed-layout-with-css-target */

/* Set the target element as a fixed position element to prevent page jump */
.kalender span 										{ display:block; position: fixed; top: 0; left: 0; }

/* Basic tab dimension */
#tab 												{  }
#tab > ul 											{ margin: 0 0; padding: 0 0; height: 3em; border-bottom: .333em solid black; overflow: hidden; text-transform: uppercase; letter-spacing: .02em; font-family: "montserrat", sans-serif; }
#tab > ul li 										{ float: left; display: inline; list-style: none; margin: 0 .111em 0 0; padding: 0 0; }
#tab > ul li a 										{ display: block; background-color: white; font-size: 1em; line-height: 2; height: 3em; color: black; text-decoration: none; padding: .5em 1.1em .5em 0; }
/* Farbe fuer abgelaufene Monate */
#tab ul li.expired a	 							{ background-color: white; color: #BBB; }
#tab > ul li a:hover								{ color: magenta !important; }
#tab > ul li a:active								{ color: #FF8FFF !important; }
#tab > div 											{ clear: both; background-color: white; padding: 0 0; height: 0; overflow: hidden; visibility: hidden;
													 -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; }

/* Here's the CSS :target job list */
/* Reset the FIRST/ACTIVE tab button and the FIRST/ACTIVE tab content to the default behaviour if the hash is active */
/*.kalender span:target ~ #tab > ul li:first-child a */
.kalender span:target ~ #tab > ul li.active a	 	{ background-color: white; color: black; cursor: pointer; }
/*.kalender span:target ~ #tab > div:first-of-type */
.kalender span:target ~ #tab > div.active		 	{ visibility: hidden; height: 0; padding: 0 0; }


/* Always show the FIRST tab container by default
.kalender span ~ #tab > div:first-of-type, */
/* Always show the ACTIVE tab container by default */
.kalender span ~ #tab > div.active,
/* Show a specific tab content based on the 'selected' target element */
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4, 
#tab-5:target ~ #tab > div.tab-content-5,
#tab-6:target ~ #tab > div.tab-content-6,
#tab-7:target ~ #tab > div.tab-content-7,
#tab-8:target ~ #tab > div.tab-content-8, 
#tab-9:target ~ #tab > div.tab-content-9			{ visibility: visible; height: auto; padding: 1em 0; }

/* Always set the FIRST tab with a 'current color' by default
.kalender span ~ #tab > ul li:first-child a, */
/* Always set the ACTIVE tab with a 'current color' by default */
.kalender span ~ #tab > ul li.active a,
/* Set the current tab button color based on the 'selected' target element */
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"],
#tab-5:target ~ #tab > ul li a[href$="#tab-5"],
#tab-6:target ~ #tab > ul li a[href$="#tab-6"],
#tab-7:target ~ #tab > ul li a[href$="#tab-7"],
#tab-8:target ~ #tab > ul li a[href$="#tab-8"],
#tab-9:target ~ #tab > ul li a[href$="#tab-9"]		{ background-color: white; color: magenta; cursor: default; }


/* ==========================================================================
        SingleColumn und Cardlayout Galerieseite; added 20.1.2021 lum
 ========================================================================== */
.singleColumn main{
	float: none;
	width: auto;
}
.listWrapper{
/*	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1rem;*/

}
.card{
	overflow: hidden;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}
.card h3{
	margin-top: 0.3rem;
}
	.card a 													{ text-decoration: none; color: #000;
		text-decoration-skip: ink edges; /* unterbricht die decoration-Linie, um darunter liegenden Text zu zeigen */
		background-color: transparent; /* entfernt grauen Hintergund von aktiven Links in IE 10 */ }
	.card 	a:hover, a:active 									{ outline: 0; text-decoration: none; color: magenta; }
	.card 	a:focus 											{ outline: 0; }
	.card img:hover{
		opacity: 0.8;
		transition: all 200ms;
	}
/* ==========================================================================
     Ende @media screen
   ========================================================================== */

}


/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 500px und darueber
   ========================================================================== */
   
@media only screen and (min-width: 500px) {

.listWrapper{
	column-count: 2;
	column-gap: 1rem;
	}
} /* Ende @media only screen and (min-width: 500px) */


/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 768px und darueber
   ========================================================================== */

@media only screen and (min-width: 768px) {

html 												{ font-size: 112.5%; }


.slider-caption h2									{ font-size: 3em; line-height: 1; margin: .1em 0; width: 70%; }
.teaser-caption h4									{ margin: .4em 0; font-size: 1em; }



a													{-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }

/* Zweispaltiges Layout */
main 												{ float: left; margin: 0 0 0 1.6em; width: 46%; }
.complementary-content 								{ float: right; margin: 4.65em 1.6em 0 0; padding: 0; width: 46%; }

/* teaser als table */
.teaser												{ margin: 0 -.666em; width: calc(100% + 1.332em); }
.teaser												{ display: table; table-layout: fixed; border-collapse: separate; border-spacing: .666em 0; margin: 0 -.666em; width: calc(100% + 1.332em); }
.teaser-row											{ display: table-row; }
.teaser-box											{ display: table-cell; width: auto; float: none; border: 0; }

.singleColumn main{
	float: none;
	margin: 0 1.6em ;
}
	.listWrapper{
		column-count: 3;
		column-gap: 1rem;
	}
	.card h3{
		font-size: 1em;
	}

} /* Ende @media only screen and (min-width: 768px)

/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 985 und darueber
   ========================================================================== */

@media only screen and (min-width: 985px) {
	.site-header										{ position: fixed; width: 100%; z-index: 15; padding: 2.444em 0 1em; height: 8.556em; }
	.wrapper											{ padding-top: 12em; }
	.container, .logo-header, .site-navigation	{ margin: 0 auto; width: 80%; max-width: 86em; }
	/* Desktop-Version der Navigation, ueberschreibt mobile first Regeln  */
	.site-navigation 									{ margin: 0 auto; width: 80%; max-width: 86em; position: relative; }
	.site-navigation ul 								{ position: absolute; bottom: 1.556em; right: 0; width: auto; }
	.site-navigation li 								{ position: relative; float: left; border-top: 0; line-height: 1.2;  }
	.site-navigation li:first-child 					{ }
	.site-navigation a 									{ padding: .4em 0 0 0; margin: 0 0 0 .416em; width: 8em; border-bottom: .222em solid black;
		-webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
	.site-navigation li.active a						{ border-color: magenta; color: black; }
	.site-navigation li:hover a							{ border-color: magenta; }
	.site-navigation li:active a						{ border-color: magenta; color: magenta; }

	/* .site-navigation li:hover ul, */
	.site-navigation li.open ul							{ display: block; position: absolute; top: 2.15em; bottom: auto; left: .833em; z-index: 20; padding: 2em 0 1em 0; height: auto; background: rgba(255, 255, 255, 0.85); }
	.site-navigation li li								{ position: static; float: none; padding: .2em 0; }
	.site-navigation li li a							{ border: 0; }
	.site-navigation li li a:hover						{ color: magenta; }
	.site-navigation li li a.active						{ color: magenta; cursor: default; }

	.site-footer .site-navigation						{ position: static; bottom: auto; right: auto; margin: 2em auto; width: 100%; max-width: none; }
	.site-footer .site-navigation ul 					{ position: static; bottom: auto; right: auto; width: auto; float: right; text-transform: none; }
	.site-footer .site-navigation a 					{ padding: .4em 0 0 0; margin: 0 0 0 .833em; width: auto; border-bottom: 0; color: #aaa; }
	.site-footer .site-navigation li.active a			{ color: magenta; }

	.mobile-navbar										{ display: none; }


}
/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 1100px und darueber
   ========================================================================== */

@media only screen and (min-width: 1100px) {

.logo-header .logo									{ width: 9.833em; }
.logo-header .freund a								{ font-size: 1.438em; }

.slider-caption h2									{ font-size: 5.5em; margin: .1em 0; width: 50%; }
.teaser-caption h4									{ text-transform: uppercase; letter-spacing: .02em; }

	.listWrapper{
		column-count: 4;
		column-gap: 1rem;
	}
	.card h3{
		font-size: 1em;
	}

} /* Ende @media only screen and (min-width: 1100px)


/* ==========================================================================
     Zusaetzliches Layout fuer Screens mit 1280px und darueber
   ========================================================================== */

@media only screen and (min-width: 1280px) {

.site-navigation ul 								{ text-transform: uppercase; }
.site-navigation a 									{ margin: 0 0 0 .833em; width: 10.222em; border-bottom: .333em solid black; }

	.listWrapper{
		grid-template-columns:  repeat(4, 1fr);
	}

} /* Ende @media only screen and (min-width: 1280px)


/* ==========================================================================
     Zusaetzliches Layout fuer Browser, die object-fit unterstuetzen (alle exc. IE11 + Edge15)
   ========================================================================== */

@supports (object-fit: cover) {

.slider .slick-slide img							{ height: calc(100vh - 17em); width: 100%; object-fit: cover; }
.hero div img										{ height: calc(100vh - 19.3em); width: 100%; object-fit: cover; }

} /* Ende @supports (object-fit: cover)




/* ==========================================================================
     Druckversion
   ========================================================================== */

@media print {

/* Schwarz druckt schneller => sanbeiji.com/archives/953 */
* 													{ -webkit-box-shadow: none !important; box-shadow: none !important; color: black !important; text-shadow: none !important; background: transparent !important; }
body 												{ font-family: "montserrat", sans-serif; font-size: 8pt; line-height: 1.5; margin: 0.5cm; padding: 2em 5em; }
.site-header 										{ border-bottom: solid 1pt black; }
.site-footer 										{ margin-top: 12pt; border-top: solid 1pt black; }

/* Unrelevantes verstecken */ 
nav, audio, video, form, #comments-form, .comments h4 a:last-child, .complementary-content, .paginator 
													{ display: none; }
/* URLs von Links mitdrucken
a 													{ text-decoration: none; }
a[href]:after 										{ content: " (" attr(href) ")"; }
h1 a[href]:after, h2 a[href]:after, h3 a[href]:after, sup a[href]:after, a[itemprop="discussionUrl"]:after, a[rel="tag"]:after 
													{ content: ""; } */
/* Abkuerzungen ausschreiben
abbr[title]:after 									{ content: " (" attr(title) ")"; } */

h1 													{ font-size: 32pt; line-height: 36pt; font-weight: normal; margin: 16pt 0; }
h2 													{ font-size: 24pt; line-height: 28pt; page-break-after: avoid; orphans: 2; widows: 2; margin: 14pt 0; }
h3 													{ font-size: 18pt; line-height: 22pt; page-break-after: avoid; orphans: 2; widows: 2; margin: 12pt 0; }
h4 													{ font-size: 14pt; line-height: 18pt; page-break-after: avoid; orphans: 2; widows: 2; margin: 11pt 0; }
h5 													{ font-size: 12pt; line-height: 16pt; page-break-after: avoid; orphans: 2; widows: 2; margin: 10pt 0; }
h6 													{ font-size: 10pt; line-height: 14pt; page-break-after: avoid; orphans: 2; widows: 2; margin: 9pt 0; }
p 													{ orphans: 2; widows: 2; }
footer, figcaption, tfoot, small, .footnote 		{ font-size: 6pt; }
blockquote 											{ font-size: 16pt; border-left: 3pt solid black; padding: 0 0 0 8pt; page-break-inside: avoid; }
pre 												{ margin-bottom: 8pt; border: solid 1pt black; padding: 8pt; }
.comments 											{ page-break-inside: avoid; }
pre, code, kbd, samp, var 							{ font-family: "Courier New", Courier, monospace; }
dfn, q, dt 											{ font-style: normal; }

img 												{ max-width: 100% !important; page-break-inside: avoid; }
img.align-left 										{ float: left; margin: 1em 1em 1em 0; }
img.align-right 									{ float: right; margin: 1em 0 1em 1em; }
img.align-center 									{ display: block; margin: 1em auto; }
figure 												{ margin-bottom: 8pt; }
figcaption 											{ margin-top: 4pt; }

ul 													{ list-style: square; padding: 0 0 8pt 1.8em; }
ol 													{ list-style: decimal; padding: 0 0 8pt 1.8em; }
dl 													{ padding: 0 0 8pt 1.8em; }

table 												{ margin-bottom: 8pt; width: 100%; }
caption 											{ font-weight: normal; text-align: left; margin-bottom: 4pt; }
/* Tabellenkopf ueber mehrere Seiten hinweg drucken => css-discuss.incutio.com/wiki/Printing_Tables */
thead 												{ display: table-header-group; }
thead th 											{ border-top: 1pt solid black; }
tr 													{ page-break-inside: avoid; }
th, td 												{ border-bottom: solid 1pt black; padding: 4pt 8pt; }

} /* Ende @media print */
/* ==========================================================================
     Anmeldeformular
   ========================================================================== */
#FormBuilder_privatmitgliedschaft-familien #wrap_Inputfield_mitgliedschaft{
	display: none;
}
/* ==========================================================================
     Zusätzliche Teile wegen Corona Info
   ========================================================================== */
.footeradd-wrapper{
	display: flex;
	flex-direction: column;
}
.exceptional{
	color: magenta ;
	font-weight: bold;
	font-size: 0.8rem;
	font-family: montserrat, sans-serif;
	margin: 1rem 0;
	width: 100%;
}
.exceptional-link{
	position: absolute;
	right:0;
	bottom:1rem;
	line-height: 1.2rem;
	text-decoration:underline;
	width: 15em;
}
.logo-header{
	position: relative;
}
.logo-bundesverband{
	width: 150px;
	height: auto;
	margin-top: 1rem;
}
@media only screen and (min-width: 768px) {
	.footeradd-wrapper{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	.exceptional{
		color: magenta ;
		font-weight: bold;
		font-size: 0.8rem;
		margin-top: 1rem;
		width: 60%;
	}
	.exceptional-link{
		position: absolute;
		left:40%;
		bottom:auto;
		top:0;
	}
}