/* ######################################################################################################
** ### Globale Layoutanpassungen
** ######################################################################################################
*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700');


* {box-sizing: border-box;}

/* Festlegung der Layoutbreite und Zentrierung */
.ym-wrapper {
	max-width: 1220px;
	margin: 0 auto;
}
.ym-wbox {padding: 0px 20px; }

/* Definition der Spalten */
.ym-col1 {
	position: relative;
	float: left;
	width: 64.407%; /* 760 / 1180 */
}
.ym-col3 {
	position: relative;
	float: right;
	width: 32.203%; /* 380 / 1180 */
	margin: 0;
}

.ym-col1 {padding-bottom: 28px;}


/* Grundlegende Schrift-Definitionen */

body {
	padding: 0;
	font-family: 'Roboto', Arial, sans-serif;
	font-size: 20px;
	line-height: 1.4;
	font-weight: 400;
	
	color: #000000;
	background-color: #F7F7F7;
}

.hover {cursor: pointer;}
a {text-decoration: none; color: inherit;}
main a {text-decoration: underline; color: inherit;}
main a:hover, main a:focus, main a:active, .box-4icon.hover, main .hover a {background-color: #FDD432; text-decoration: none;}


h1 {font-size: 36px; font-weight: 400; margin-bottom: 36px; padding-left: 10px; background-color: #FDD432;}
h2 {font-size: 30px; font-weight: 400; margin-top: 40px; margin-bottom: 20px;}
h3 {font-size: 24px; font-weight: 400; margin-top: 40px; margin-bottom: 20px;}
h4 {font-size: 22px; font-weight: 700; margin-top: 20px; margin-bottom: 20px;}
h5, h6 {font-size: 20px; font-weight: 700; margin-bottom: 14px;}


p {margin-bottom: 28px;}
.mittelzentriert {text-align: center;}
.ueberbreit {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); max-width: calc(100% + 40px); height: auto;}


/* Farben */
.bg-weiss       {background-color: #FFFFFF;}
.bg-weissgrau   {background-color: #F7F7F7;}
.bg-hellgrau    {background-color: #E8E6E3;}
.bg-mittelgrau  {background-color: #D9D8D5;}
.bg-dunkelgrau  {background-color: #5b5a57;}
.bg-schwarzgrau {background-color: #3a3a38;}


.bg-gelb        {background-color: #FDD432;}
.bg-beige       {background-color: #F0E7D5;}

.border-top-gelb {border-top: 2px solid #FDD432;}

.error {color: red;}

.kein-abstand-oben {margin-top: 0px;}


/* ######################################################################################################
** ### skip-links
** ######################################################################################################
*/

a.skip:focus {
	position: fixed;
	z-index: 3;
	display: block;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	text-align: center;
	padding-top: 40vh;
	font-size: 30px;
	background-color: rgba(255, 255, 255, 0.9);
}



/* ######################################################################################################
** ### Elemente des Kopf-Bereichs
** ######################################################################################################
*/

body {}
header {border-top: 2px solid #FDD432;}

/* fix: Sprung zu Anker-Link bei fixiertem Kopf wird von Kopf verdeckt */
:target:before {
	content: '';
	display: block;
	height: 220px; /* fixed header height*/
	margin-top: -220px; /* negative fixed header height */
}


ul.social-icons {list-style-type: none; position: absolute; left: 20; top: 0;}
ul.social-icons , ul.social-icons li {margin: 0; padding: 0;}
ul.social-icons li {display: inline-block;}
ul.social-icons a {display: inline-block; padding: 10px 5px; font-size: 36px; color: #6D6D6D;}
ul.social-icons a:hover, ul.social-icons a:focus, ul.social-icons a:active {color: #000000;}
ul.social-icons i:before {padding: 5px;}


#mod_kopftext {height: 165px; overflow: hidden; transition: height .5s;}
#mod_kopftext a {display: block; padding-top: 23px; padding-right: 60px; line-height: 1; text-align: right; font-family: Arial, sans-serif; letter-spacing: 0.11em; font-size: 24px;}
#mod_kopftext strong {font-size: 36px; letter-spacing: 0;}
#mod_kopftext img {margin-top: 10px; margin-right: -60px; width: auto; height: 60px; transition: height .5s;}


div[data-name="Kopftext"] {background-color: #FFFFFF;}
div[data-name="Such-Box"] {background-color: #E8E6E3;}
div[data-name="Navigations-Menü Komplett"] {background-color: #D9D8D5; line-height: 0;}


.modul-suchbox {padding: 10px 0; position: relative;}
.modul-suchbox .close-searchbox {position: absolute; top: 0; right: 0; padding: 10px;}
.modul-suchbox input {width: 70%; max-width: calc(100% - 260px); margin-right: 20px; padding-left: 10px;}


.kopfbild {
	height: 96px;
	background-image: url('images/Kopfbild.jpg');
	background-position: center center;
	background-repeat: repeat-x;
}

.kopfbild-startseite {
	position: relative;
	height: 456px;
	background-image: url('images/Kopfbild-Startseite.jpg');
}

.slogan {
	position: absolute;
	top: 284px;
	right: 60px;
	margin: 0px;
	text-transform: uppercase;
	font-size: 28px;
	line-height: 1;
	padding: 10px 20px;
	background-color: rgba(255, 255, 255, 0.7);
}


/* ######################################################################################################
** ### Menue
** ######################################################################################################
*/

/* flyout functionality (used for alle flyout menus) */
.flyout ul {list-style-type: none;}
.flyout ul, .flyout li {margin: 0px; padding: 0px;}

.flyout > ul { text-align: left; display: inline-block;}

.flyout li {
	position: relative;
}
.flyout > ul > li {float: left;}
.flyout .untermenu1 > ul {
	position: absolute;
	left: 0px;
	
	visibility: hidden;
	font-size: 0px;
	z-index: -1;
}
.flyout li:hover ul, .flyout a:focus + div.untermenu1 ul, .flyout .hover ul
{visibility: visible; font-size: inherit; z-index: 2;}


/* Definition und Farbgebung Links */
.flyout a {display: block; padding: 5px 0px 5px 30px;}
/* spezielle Einstellungen für Menüpunkte der obersten Ebene */
.flyout > ul > li > a {text-transform: uppercase; padding: 10px 30px;}
/* Einstellugen für Menüpunkte der 3. Ebene */
.flyout ul ul ul a {padding: 3px 0 3px 55px;}

/* Farbgebung */
.flyout a {background-color: #D9D8D5;}
.flyout a:hover, .flyout a:focus, .flyout a:active,
.flyout a.menuxaktiv_back, .flyout a.menuy_aktiv { background-color: #FDD432;}
/* Menüpunkt "Spenden" hat spezielle Farbe */
.menu-li-53 a {background-color: #DFBFF4;}

.flyout ul ul a {border-top: 2px solid #FFFFFF;}
.flyout ul ul ul a {border-top: 0;}
.flyout .untermenu1 > ul {border-bottom: 2px solid #FFFFFF;}


/* Icons zum öffnen und schließen des Burger-Menüs */
.flyout .label, .flyout:after {display: none; cursor: pointer;}
.flyout .label i, .flyout:after { font-size: 36px; line-height: 40px; padding: 4px 20px 6px 20px;}
.flyout:after {font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f00d'; margin-top: 0.3EM;  text-align: right;}


/* Icons zum auf / Zu-Klappen der Unternavigations-Punkte in Burger Menü */
.flyout span.show-more, .flyout span.show-more-dummie {display: none; float: left; padding: 0 20px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 32px; line-height: 1; padding-top: 5px; background-color: rgba(255, 255, 255, 0.1); cursor: pointer;}
.flyout span.show-more:before {content: '\f078';}
.flyout li.hover > a span.show-more:before {content: '\f077';}
.flyout span.show-more-dummie:before {content: '\00A0'; font-size: 15px;}



/* ######################################################################################################
** ### Elemente im Fuss
** ######################################################################################################
*/

footer {background-color: #6D6D6D; color: #FFFFFF; padding: 0; box-shadow: 0 37px #3a3a38 inset; font-size: 16px;}

.linkliste {text-align: center;}
.linkliste h2 {margin: 0; padding: 0; font-size: 16px; margin-bottom: 7px; padding: 7px 0 7px 0;}
.linkliste ul {list-style-type: none;}
.linkliste ul, .linkliste li {margin: 0; padding: 0;}
.linkliste-b-bild-container img {max-width: 80%; height: auto; padding-top: 10px;}


.copyright {margin-top: 28px;}
.copyright img {max-width: 100%; margin-bottom: 56px;}



/* ######################################################################################################
** ### Formatierung im Inhalt / spezielle Artikel-Klassen
** ######################################################################################################
*/
main {position: relative; padding-top: 80px; background-color: #F7F7F7;}

main img {max-width: 100%; height: auto;}

.rs_skip_container {position: absolute; top: -46px;}
.menuid-1 .rs_skip_container {top: 28px;}
.rs_skip_container a:focus, .rs_skip_container a:active, .readspeaker2 a:focus, .readspeaker2 a:active {outline-style: none;}
.rs_skip_container .rsbtn {z-index: 1;}

/* H2 auf Startseite mittelzentriert */
.menuid-1 h2 {text-align:center}

hr {border-width: 0px; border-bottom: 1px solid #D9D8D5; color: transparent; background-color: transparent;}


table {width: 100%; border-spacing: 0px; border-collapse: collapse; font-size: inherit;}
tr {border-bottom: 1px solid #00515A;}
thead tr, tr:last-child {border-width: 2px;}

th {font-weight: 700;}
th, td {text-align: left; vertical-align: top; padding: 9px 10px 9px 0;}

.tabelle-40-60 {}
.tabelle-40-60 td:first-child {width: 40%;}

.kurse_detail table {background-color: #FFFFFF; border: 20px solid #FFFFFF;}

.anzahl_suchbegriffe {text-align: right; font-size: 14px;}

p.text-klein {font-size: 16px;}


img.bildHalbeBreite {width: calc(50% - 10px); height: auto; float: left; margin-right: 20px;}
img.bildVolleBreite {width: 100%; height: auto;}

img.bildRechts {margin-right: 0; float: right; margin-left: 20px;}



/* ######################################################################################################
** ### spezielle Modul-Anpassungen
** ######################################################################################################
*/

ul.weiterul {list-style-type: none;}
ul.weiterul, ul.weiterul li {margin: 0px; padding: 0px;}
ul.weiterul li {display: inline-block; margin-right: 2%;}


.rightitem {margin-bottom: 28px;}

.lum-lightbox {z-index: 2;}
.bildergalerie img {width: 100%; height: auto;}


.p_link_kurse_anmelden {margin-top: 28px;}


.toggle-box-header i {width: 25px;}
.toggle-box-content.box-content {padding-top: 0; padding-left: 0; padding-right: 0;}



/* ######################################################################################################
** ### freie Module
** ######################################################################################################
*/


/* ######################################################################################################
** ### Formulare
** ######################################################################################################
*/

input, select, option, textarea, button {font-family: 'Roboto', Arial, sans-serif; font-size: 20px;}

/* fieldset wie "box-content bg-mittelgrau"*/
fieldset {padding: 20px; background-color: #E8E6E3; margin-bottom: 28px;}
/* legend formatiert wie "ueberbreit" */
legend {margin-left: -20px; margin-right: -20px; width: calc(100% + 40px); padding: 20px 20px 0 20px; }
/* .. und mit Farbe versehen */
legend {font-weight: 700; border-top: 2px solid #FDD432; background-color: #E8E6E3; border-top: 2px solid #FDD432;}

#x_form input[type="text"],
#epayment input[type="text"], #epayment textarea,
#k_form input[type="text"], #k_form textarea,
.labdiv input[type="text"], .labdiv textarea {width: 100%;}

.labdiv {margin-bottom: 7px; overflow: hidden;}
.labdiv2 {margin-bottom: 14px;}

.labdiv2 input[type="radio"], .labdiv2 label {margin-right: 10px;}

/* Elemente "Anzahl" bei Bestellung(en) */
fieldset#field_12 input, fieldset#field_4 input, fieldset#field_13 input, fieldset#field_7 input, fieldset#field_6 input, fieldset#field_5 input, fieldset#field_29 input,
fieldset#plugin_cform_anzahl_kochbuch, fieldset#field_8 ~ fieldset input
{float: right; margin-left: 10px; width: 2EM;}

/* Rueckmeldungen */
#field_11 #labdiv_erwartungen, #field_11 #labdiv_anforderungen, #field_11 #labdiv_faehigkeiten, #field_11 #labdiv_kursgestaltung,
#field_11 #labdiv_erfahrungsaustausch, #field_11 #labdiv_unterkunft_select, #field_11 #labdiv_anregungen, #field_11 #labdiv_vorname
{margin-top: 30px;}
#field_14 #labdiv_hinweisversionen, #field_15 #labdiv_anrede, #field_15 #labdiv_telefonnummer, #field_15 #labdiv_strasse, #field_15 #labdiv_land
{margin-top: 15px;}




/* ######################################################################################################
** ### Unsichtbare Elemente
** ######################################################################################################
*/

/* Unsichtbare Objekte  */
.ignore, .ignoreornot, dfn, #mod_menue #menux, .unsichtbar {
	position: absolute;
	left: -2000px;
	top: -5000px;
	width: 0px;
	height: 0px;
}

.insert, dfn
{display: none;}


/* ######################################################################################################
** ### Drucklayout
** ######################################################################################################
*/

@media print {
	/* unerwünschte Elemente ausblenden */
	a#top, .top_space, header, .kopfbild, .ym-col3, footer.ym-contain-oh,
	div.rs_skip_container, #mod_bildwechsler {
		display: none;
	}
	
	/* Inhaltsbereich anpassen */
	body {width: 690px; background-color: #FF0000;}
	.ym-col1 {width: 100%; float: none;}
	
	/* sonstige Elemente anpassen */
	* body, main {padding-top: 0;}
	h1 {padding-left: 0;}
	
}