@charset "utf-8";
/* CSS Document */
html {
	overflow-y: scroll;
 	}

*{box-sizing: border-box;
}

body{
	font-family: "Segoe UI", "Lucida Grande", "Helvetica", "Arial", sans-serif;
	color: #b9b9b9 /* #c1c1c1 #999 #333 #3a300f*/;
	background-color: #555 /* #838078  #9c9c9c; #a09983 */;
	line-height: 1.5;
	/*
	font-size: 0.95em;
	*/
	margin: 0;
	}

#wrapper{
	background-color: #222 /* #fff #EDE9DB*/;
	max-width: 1180px /*1024px*/;
	min-width: 768px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: none;
	justify-content: none;
	-webkit-align-items: none;
	align-items: none;
	min-height: 100vh;
	margin: 0 auto;
	box-shadow: 3px 0px 3px rgba(058, 048, 015, 0.7), -3px 0px 3px rgba(058, 048, 015, 0.7);
	/*border: 1px solid red;*/
	}

section, article {
	display: block;
}

div#seo{
	display: none;
}

p, span{
	font-size: 1.08em;
	line-height: 1.65em;
	}

a{
	text-decoration: none;
	color: #b9b9b9;
	background-color: transparent;
}

p a {
	text-decoration: underline;
}

/*----------------- header ------------------------------------------------*/
header{
	position: static;
	background-color: #222 /* #F9F6ED */;
	z-index: 50;
	}

header >div{
	padding-bottom: 20px;
	}

header div img{
	display: block;
	width: 100%;
	height: 100%;
	margin-top: -1px;
	}

header div.headertitel{
	position: static;
	top: 0px;
	align: center;
	padding: 0px;
	/*border: 1px solid pink;*/
	}

header div.headertitel h1{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 1.79em;
	font-style: italic;
	font-weight: 600;
/*	background-color: #ede9db; */
	letter-spacing: 1px;
	text-align: center;
	margin: 0px;
	padding: 5px;
/*border: 1px solid red;*/
	}
header div.headertitel h3{
	text-align: center;
}

/*
header div.headertitel h1 a{
	text-decoration: none;
	}
*/
/*------------------ ende header ------------------------------------------*/
/* --------------------- navi ---------------------------------------------*/
nav {
	display: block;
/*	font-family: "Lucida Sans Unicode", "Helvetica", "Arial", sans-serif; */
	text-align: center;
	border: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-color: #777 /* #3a300f */;
	background-color: #333 /* #fff */;
	margin-bottom: 0px;
	}

nav ul{
	list-style-type: none;
	margin: 0px auto;
	padding: 0px;
	}

nav ul li{
	display: inline-block;
	}

nav ul li a, #navresp >a, #navresp ~a{
	font-size: 1.00em;
	font-weight: 700;
	display: inline-block;
	letter-spacing: 1px;
	text-decoration: none;
	text-transform: uppercase;
	/*color: #3a300f;*/
	margin-right: 5px;
	margin-left: 5px;
	padding: 10px;
	/*border: 1px solid red;*/
	}

nav ul li a:hover, p a:hover, #navresp >a:hover, #navresp ~a:hover{
	color: #d4af37;
	}
nav ul li a:active, p a:active, #navresp >a:active, #navresp ~a:active{
	color: #d4af37;
	}
/*--------- ende navi hauptformatierung -------*/
/*-------------- klappnavigation --------------*/
li{
	position: relative;
	}

li ul{
	position: absolute;
	top: -999px; /*bei verschiebung mit left, war es noch im bild bei einem breiten monitor
	ob die umplatzierung durch left oder top erstellt wird ist egal (<top> wirkt sich beim safari auf pc aus - frage wäre, wie es am mac aussieht, die anderen browser akzeptieren es*/
	/*border: 3px solid red;*/
	padding: 0;
	z-index: 4;
	}

li:hover ul{
	top: 100%;
	}

li ul li a{
	display: block;
	text-align: left;
	font-size: 0.80em;
	font-weight: 500;
	background-color: #fff;
	width: 180px;
	margin-bottom: -1px;
	border: 1px solid #3a300f;
	}

article ul li a {
	color: #3a300f;
	text-decoration: underline;
	background-color: transparent;
}

/*----------ende klappnavigation --------------*/
/*----------- aktuell aufgerufene seite -------*/
.activesitetop{
		color: #d4af37;
	/*
	background-color: rgb(212, 175, 55); fallback
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(212, 175, 55, 0.0)), to(rgba(212, 175, 55, 1.0)));
	background: -moz-linear-gradient(top, rgba(212, 175, 55, 0.0), rgba(212, 175, 55, 1.0));
	background: linear-gradient(top, rgba(212, 175, 55, 0.0), rgba(212, 175, 55, 1.0));
	*/
	}

.activesitedrop{
	color: #d4af37;
	font-weight: 550;
	/* text-decoration: underline;
	text-underline-offset: 5px; */
	text-decoration-thickness: 3px;
	/*	background-color: rgb(212, 175, 55); -- fallback --
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(237, 233, 219)), to(rgb(212, 175, 55)));
		background: -moz-linear-gradient(top, rgb(237, 233, 219), rgb(212, 175, 55));
		background: linear-gradient(top, rgb(237, 233, 219), rgba(212, 175, 55));
		*/
		}
/*
.activesitetop:hover, .activesitedrop:hover{
	color: #9f8329;
} */
/*--------ende aktuell aufgerufene seite ------*/
/* ---- responsive navi 4pc unsichtbar ------- */
#navresp >a{
	display: none;
	/*border: 1px solid red;*/
	}

#navresp ~a{
	display: none;
	}
/* --- ende responsive navi 4pc unsichtbar ------- */
/* -------------- ende navi -----------------------------------------------*/
/* -------------- sections ------------------------------- ----------------*/
div.container_middle{
	/*padding-bottom: 40px;*/
	background-color: #333 /*#222*/;
	}
/*---- section kopf -- ------------------- delete - -----*/
div.sectiontitel{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	/*	border: 1px solid red;*/
	}

div.sectiontitel figure img{
	width: 204px; /*ai zeichenfläche = 340x42*/
	height: 25px;
	}

div.sectiontitel h2{
	font-family: "Segoe UI", sans-serif;
	font-size: 1.65em;
/*	letter-spacing: 1px; */
	font-weight: 600;
	max-width: 70%;
	margin: 10px 0;
	}

div.sectiontitel a{
	font-size: 0.90em;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-underline-offset: 3px;
	margin-left: 10px;
	margin-right: 10px;
	/* letter-spacing: 1px;
	 border: 1px solid red; */
}


/*---- ende section kopf -------*/

/* --- section texte -------------------------------------------- delete ------- */
/* section.textboxen {
	width: 63%;
	margin: 20px auto;
	background-color: #fff;
	padding: 10px;
	border: 2px;
	border-radius: 5px;
	border-style: dotted;
	border-color: #9f8329;
	}

section.textboxen span{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-align: left;
	border: 1px solid red;
	} */

/* --- ende section texte ---*/
/* --- section index ---*/
.why{
	font-size: 1.50em;
}

/* --- ende section index ---*/
/*---- section bilder/gallery-------*/
section.imgbox, section.linkimgbox{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin: 10px auto;
/*border: 3px solid red */
	}

section.imgbox figure{
	background-color: #fff;
	border: 2px;
	border-style: solid;
	border-color: #A09983;
	height: auto; /*width: 304px;*/
	margin: 10px;
	padding: 12px;
	}

section.imgbox img{
	display: block;
	width: 100%;
	border: 1px solid #A09983;
	}

/*grid test layout*/
div.grid{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	grid-gap: 1em;
	grid-auto-rows: minmax(200px, auto);
}

.grid >div{
	border: solid 2px hotpink;
}


/*---- ende section bilder/gallery -------*/
/* - ab hier abgestimmte formatierung zu den seiten -*/
/*textbox mit und ohne verlinkung*/
section.linkimgbox div{
	background-color: #333 /* #fff #F9F6ED*/;
	width: auto
/*	border: 1px;
	border-style: solid;
	border-color: orange; */
	margin: 0px 30px 30px 30px;
/*	padding: 15px; */
	}

section.linkimgbox div.why{
	font-size: 1.35em;
	background-color: #222 /* #fff #F9F6ED*/;
	width: 300px;
	height: 250px;
/*	border: 1px;
	border-style: solid;
	border-color: red; */
	margin: 30px;
	margin-bottom: 70px;
	padding: 0px 15px 15px 15px;
	}



/* --- sections linkbilder bei Leistungen & Portfolio ---*/
section.linkimgbox figure{
	position: relative;
	background-color: #333 /* #fff #F9F6ED*/;
	width: 400px;
	height: 300px;
/*	border: 1px;
	border-style: solid;
	border-color: red; */
	margin: 30px;
	margin-bottom: 70px;
/*	box-shadow:  -1px 2px rgba(0,0,0,0.2); */
	}

section.linkimgbox figure figcaption{
	font-size: 1.5em;
	font-weight: 600;
	display: inline-block;
	letter-spacing: 1px;
	text-decoration: none;
/*	text-transform: uppercase; */
	color: #fff;
	padding-left: 10px;
	padding-top: 50px;
	width: 100%;
	text-align: left;
	margin: auto;
	/*border: 1px solid black;*/
	}

section.linkimgbox img{
	display: block;
	width: 400px;
	/* border: 3px solid #A09983; */
}

section.linkimgbox figure figcaption a{
	font-size: 1.0em;
	font-weight: 600;
	display: inline-block;
	letter-spacing: 1px;
	text-decoration: none;
/*	text-transform: uppercase; */
	color: #fff;
	padding-left: 10px;
	padding-top: 50px;
	width: 100%;
	/*border: 1px solid red;*/
	}

section.linkimgbox figcaption.overlay{
	position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
	background-color:rgba(0,0,0,0.7);
}

section.linkimgbox figure:hover .overlay {
  opacity: 1;
}

section.linkimgbox div.doppelbox {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	/*font-size: 0.85em; */
	width: 500px;
/*	border: 1px solid green; */
}

div.doppelbox h2{
	font-family: "Segoe UI", sans-serif;
	/*font-size: 0.85em; */
}

div.doppelbox h3{
	font-family: "Segoe UI", sans-serif;
	font-weight: 500;
	/*font-size: 0.85em; */
}

/* --- ende sections linkbilde bei Leistungen & Portfolio ---*/
/* --- article in den rubriken, wie schnellzeichnen usw. auch einfluss auf Hallo(doppelklassen) ---*/
.rubrikbox{
/*	background-color: #F9F6ED;
	border: 1px;
	border-radius: 5px;
	border-style: solid;
	border-color: #A09983; */
	width: 100%;
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 20px;
	margin-left: auto;
	/* padding: 10px 15px; */
/*		border: 1px solid red; */
	}

.rubrikbox article{
	margin: 1% 0 2% 0;
/*	border: 1px solid orange; */
	}

.rubrikbox figure{
	width: 70%;
	margin: 10px auto;
/*	border: 5px solid red; */
	}

.rubrikbox figure img{
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
/*	border: 3px solid orange; */
	}

/*

.rubrikbox figure{
	width: 100%; --85%--
	margin: 10px auto; --für bottom 20px auto--
	border: 5px solid red;
	}
.rubrikbox figure img{
	display: block;
	width: 70%; --100%;--
	margin-left: auto;
	margin-right: auto;
	border: 3px solid orange;
	}*/

div.kontaktlink{
	text-align:center;
	}

div.coverbild{
	display: table;
	width: 100%;
}

.coverbild figure{
	position: relative;
	display: table-cell;
	}

.coverbild figure img{
	display: block;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
	/* border: 3px solid orange; */
	}

div.coverbild figure figcaption{
	position: absolute;
	font-family: "Palatino Linotype", "Book Antiqua", serif;
	font-size: 1.30em;
	font-style: italic;
	font-weight: 600;
/*	background-color: #ede9db; */
	letter-spacing: 1px;
	color: #222;
 	top: 10%;
	right: 10%;
}

div.coverbild figure figcaption a{
	color: #222;
}

div.coverbild figure figcaption a:hover{
	color: #fff;
}

.rubrikbox p{
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	width: 70%;
	margin: auto;
/*border: 1px solid green;*/
	}
.rubrikbox h3{
	font-size: 1.50em;
	font-weight: 600;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: 15%;
	/*border: 1px solid blue;*/
	}

/* - impressum formatierung - */
article.imp{
	/*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: 300; */
	font-size: 0.85em;
	/*text-decoration-line: underline;*/
}

p.imp:first-child, p.imp:nth-child(3){
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-weight: 300; */
	/*text-decoration-line: underline;*/
}

p.imp:nth-child(3){
	padding-top: 10px;
}

strong.imp{
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: bold;
}
/* --- ende article in den rubriken, wie schnellzeichnen usw. auch einfluss auf hallo ---*/

/* --- parallax ---*/

#parallax {
	background: url("bilder/index_titelbild_Ende_ziprian.jpg"); /* Stock_04_jziprian.jpg*/
	height: 600px;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	/*background-size: cover;*/
	margin-bottom: 0px;
	padding-bottom: 0px;
/*	border: 3px solid red; */
}

#parallax_innen {
	padding-top: 100px;
	/* padding-bottom: 25px; */
	 font-family: "Segoe UI", sans-serif;
	 font-weight: 500;
	 text-align: right;
	 width: 70%;
	 margin: auto;
/*	border: 3px solid red;*/
 }

/* --- ende parallax ---*/

/*- Hallo & Kontakt satz -------*/
.hallo{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	padding: 10px 7% 20px 7%;
	/*border: 1px solid hotpink;*/
	}

.hallo figure, .hallo article:first-child{
		margin-right: 5%;
		flex: 1;
		}

.hallo figure img{
	width: 330px;
	border: 2px;
	border-bottom-style: solid;
	border-bottom-color: #A09983;
	}

/*
.hallo article:first-child{
	background-color: yellow;
	}*/

.hallo article:nth-child(2), div#container_formular{
	margin: 0;
	flex: 2;
	}

.hallo p{
	width: auto;
	}

.hallo h3{
	margin-bottom: 5px;
	margin-left: 0px;
	}
/*- ende Hallo & Kontakt satz --*/
/* --- FORMULAR --------*/
fieldset{
	background-color: #ccc5b0;
	border-color: #A09983;
	margin: auto;
	}

/*php antwort*/
div#container_formular p{
	color: #3a300f;
	background-color: #ccc5b0;
	border: 1px solid #9f8329;
	width: 100%;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-weight: 600;
	font-size: 1.0em;
	text-align: center;
	margin-top: 10%;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	padding: 15px;
	}

div#container_formular a{
	text-decoration: underline;
	color: #3a300f;
  }

legend{
	color: #3a300f;
	background-color: #EDE9DB;
	border: 1px solid #A09983;
	padding: 2px 7px;
	}

fieldset div{
	margin-top: 10px;
	margin-bottom: 15px;
	/*border: 1px solid blue;*/
	}

label{
	display: inline-block;
	padding-bottom: 2px;
	color: #3a300f;
	/*border: 1px solid hotpink;*/
	}
/*sternchen vor den pflichtfeldern*/
label:not(.ohne):before{
	content: "*";
	color: #9f8329;
	font-weight: 600;
	}

input[type="text"], select, textarea{
	width: 100%;
	background-color: #EDE9DB;
	color: #3a300f;
	border: 1px solid #A09983;
	}

input[type="submit"]{
	background-color: #a09983;
	color: #EDE9DB;
	border: 1px solid #9f8329;
	}

input:hover, select:hover, textarea:hover{
	background-color: #eccd68;
	}

input:focus, select:focus, textarea:focus{
	background-color: #FEEFA2;
	}

input[type="submit"]:hover{
	color: #3a300f;
	}
/* h o n e p o t style zum unsichtbar machen */
.baerennaschen
{
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 0;
        width: 0;
        z-index: -1;
    }

/* --- ende FORMULAR ---*/
/* ########################################
-------------- Kurse #News ---------------
#########################################*/
p.newsPTitel, p.newsPfakten {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

p.newsPTitel{
	font-weight: 800;
}

/*--- Auslistung Kurs --*/
section.rubrikbox article ul{
		padding: 0px;
		width: 70%;
		margin-right: auto;
		margin-left: 17%;
		}

/* --- TABELLE Kurse -------- */
table {
	border-collapse: collapse;
	border: none;
	width: 55%;
	margin-right: auto;
	margin-left: 15%;
	}

th[colspan="2"] {
	text-align: left;
	font-size: 1.15em;
	border: 2px;
	border-bottom-style: solid;
	border-color: #3a300f;
	}

tr{ border: 1px;
	border-bottom-style: solid;
	border-color: #3a300f;
	}

tr:last-child{
	border-bottom-style: none;
	}

td{ font-size: 1.05em;
	line-height: 1.65em;
	padding-top: 5px;
	padding-bottom: 10px;
	}

td:first-child{
	font-weight: 600;
	vertical-align: top;
	padding-right: 10px;}
/* --- ende TABELLE ---- */
/* -------------- ende sections --------------------------------------------*/
/* --------------- footer --------------------------------------------------*/
footer{
	background-color: #222 /* #F9F6ED */;
	border: 1px;
	border-top-style: solid;
	border-color: #777 /*#3a300f */;
	padding: 10px;
	}

footer p, footer address{
	font-size: 0.80em;
	font-style: normal;
	margin-left: 5px;
	}

footer p{
	margin-top: 0px;
	margin-bottom: 0px;
	}
/* ------------------ ende footer -----------------------------------------*/
/* -- transparentrahmen mit fixed funktion um naiv und footer---------------------*/
div.fixed_navi_container{
	position: static; /*fallback*/
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	margin-bottom: 0px;
	width: 100%;
	max-width: 1180px;
	min-width: 320px;
	z-index: 20;
	/*border: 1px solid orange;*/
	}

div.fixed_footer_container{
/*position: static;
	position: fixed; */
	bottom: 0px;
	width: 100%;
	max-width: 1180px;
	min-width: 320px;
	margin-top: 0px;
	/*z-index: 20;*/
	/*border: 1px solid green;*/
	}
/*
div.transparent{
	height: 10px;
	border:1px solid blue;
	}

div.fixed_navi_container div.transparent{
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(30, 30, 30, 1.0)), to(rgba(255, 255, 255, 0.0)));
	background: -moz-linear-gradient(top, rgba(30, 30, 30, 1.0), rgba(255, 255, 255, 0.0));
	background: linear-gradient(top, rgba(30, 30, 30, 1.0), rgba(255, 255, 255, 0.0));
	}

div.fixed_footer_container div.transparent{
	background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.0)), to(rgba(30, 30, 30, 1.0)));
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.0), rgba(30, 30, 30, 1.0));
	background: linear-gradient(top, rgba(255, 255, 255, 0.0), rgba(30, 30, 30, 1.0));
	}
	*/
/* -- ende trasparentrahmen mit fixed funktion um header und footer-----------------*/

/* -----------------------------------
------------ media querie ------------
------------------------------------*/
@media only screen and (max-width:1024px){
/* ---------- header media 1024px ---------*/
div.coverbild figure figcaption{
	font-size: 1.15em;
}
/* ---------- ende media 1024px ---------*/
@media only screen and (max-width:768px){
	/* ---------- header media 700px ---------*/
	#wrapper{
	max-width: 768px;
	min-width: 480px;
	}

	header >div{
	background-size: 10px 10px;
	padding-bottom: 10px;
	}

	header div.headertitel h1{
		font-size: 1.45em;
	}
	/* ---------- ende header media 768px ---------*/
	/* ------- navi media 768px -----------------*/
	nav ul li{
		display: block;
		text-align: left;
		/*border: 1px solid red;*/
		}

	nav ul li a.borderbottom, #navresp >a, #navresp ~a{
		border: 1px;
		border-bottom-style: solid;
		border-color: #3a300f;
		margin-bottom: -1px;
		}

	nav ul li a{
		width: 180px;
		margin-left: 20px;
		}

	/* ------- klappnavie responsive position ---*/
	li ul{
		position: static;
		top: 0px;
		margin-left: 30px;
		}
	/* ------- responsive navi "on" -------------*/
	#navresp{
		display: none;
		}

	#navresp ~a{
		display: block;
		}

	#navresp:target{
		display: block;
	}

	#navresp:target >a{
		display: block;
	}

	#navresp:target ~a{
		display: none;
	}

	.resplast{
			margin-bottom: 30px;
			/*color: red;*/
		}
	/* ------- ende navi media 768px -----------------*/
	/* ------- sections Titel media 768px -------------*/
/* Titel über Coverbild auf index */
	div.coverbild figure figcaption{
		font-size: 0.95em;
		right: 5%;
	}

	div.coverbild figure figcaption p{
		font-size: 0.85em;
		right: 5%;
	}

	div.sectiontitel h2{
		font-size: 1.50em;
	}
	/* --- mini textboxen ----*/
	section.textboxen {
	width: 80%;
	}

	/*-- index why --*/
	.why{
	font-size: 1.25em;
	}
	/* --- rubrikboxen --- */
	/*-war article-.class*/
		/* --- ~ weglassen ---*/
	.rubrikbox figure{
	width: 92%;
	}
	.rubrikbox p{
	width: 90%;
	}
	.rubrikbox h3{
	margin-left: 5%;
	font-size: 1.25em;
	}

	section.linkimgbox div.doppelbox {
		width: 90%;
	/*	border: 1px solid green; */
	}
	/* ------- seite Hallo mit Kontaktformular media 768px------*/
	.hallo{
		-webkit-flex-direction: column;
		flex-direction: column;
		padding-right: 2%;
		padding-left: 2%;
	}

	.hallo article:nth-child(2), div#container_formular{
		margin-top: 20px;
		flex: 1;
	}

	.hallo figure{
		width: 100%;
		margin: auto;
		margin-bottom: 30px;
	}

	.hallo figure img{
	width: 500px;
	margin-right: auto;
	margin-left: auto;
	}

	.hallo article{
		width: 100%;
		margin: auto;
/*	background-color: orange;*/
	}

	div#container_formular{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	}

	/* - media 768px JS slideshow -*/
	figure.imgslide{
	margin-left: 4%;
	/*border: 1px solid red;*/
	}
	.left{
		left: 7%;
	}
	.right{
		right: 7%;
	}
}
/* ------------------------ ende media 768px ---------------------------------*/
@media only screen and (max-width:480px){
	#wrapper{
	max-width: 480px;
	min-width: 320px;
	}
	/* ---------- transparenz media 480px ---------
	div.transparent{
		height: 20px;
	}
	*/
	/* ------- sections Titel media 480px -------------*/

	/* Titel über Coverbild auf index */
		div.coverbild figure figcaption{
			font-size: 0.75em;
			right: 5%;
		}

		div.coverbild figure figcaption p{
			font-size: 0.85em;
			right: 5%;
		}

		#parallax {
			height: 350px;
			background-attachment: inherit;
			background-size: cover;
		}

	div.sectiontitel{
		-webkit-flex-direction: column;
		flex-direction: column;
		margin-bottom: -10px;
		/*border: 1px solid red;*/
	}

	div.sectiontitel figure img{
		width: 136px;
		height: 17px;
	}

	div.sectiontitel h2{
		margin-top: -10px;
		margin-bottom: -10px;
	}
	/*--------- inhalt sections & rubriken media 480px ----------------*/
	/* --- mini textboxen ----*/
	section.textboxen {
	width: 95%;
	}
	/* --- rubrikboxen --- */
	.rubrikbox{
	width: 95%;
	padding: 10px;
	}

	.rubrikbox figure{
	width: 100%;
	}
	.rubrikbox p{
	width: 100%;
	}
	.rubrikbox h3{
	margin-left: 0%;
	}

	section.linkimgbox div.doppelbox {
		width: 95%;
	/*	border: 1px solid green; */
	}
	/* ------- seite Hallo mit Kontaktformular 480px------*/
	.hallo{
	padding-right: 5%;
	padding-left: 5%;
	}
	.hallo figure{
	width: 100%;
	}

	.hallo figure img{
	width: 250px;
	}

	.hallo article{
		width: 100%;
		margin: 5% 0;
	/*background-color: orange;*/
	}

	div#container_formular{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	}

/*- Auflistung Kurs -*/
section.rubrikbox article ul{
			width: 90%;
			margin-left: 7%;
			}

	/*- tabell kurse -*/
	table {
	width: 95%;
	margin-left: auto;
	}

	/* - media 480px JS slideshow -*/
	figure.imgslide{
	margin-left: 0;
	/*border: 1px solid red;*/
}

	a.show{
		top: 45%;
	}
	.left{
		left: 3%;
	}
	.right{
		right: 3%;
	}
	.indicatorblock{
		top: 85%;
		left: 27%;
	}
	.indicator{
		margin-right: 3%;
		margin-left: 3%;
		}
}
/* ------------------------ ende media 480px ---------------------------------*/