f/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../fonts/open-sans-v29-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v29-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/open-sans-v29-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v29-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v29-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-300italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300;
  src: local(''),
       url('../fonts/open-sans-v29-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-800 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/open-sans-v29-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local(''),
       url('../fonts/open-sans-v29-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-500italic - latin */
@font-face { 
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 500;
  src: local(''),
       url('../fonts/open-sans-v29-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-600italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 600;
  src: local(''),
       url('../fonts/open-sans-v29-latin-600italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-600italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* open-sans-700italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local(''),
       url('../fonts/open-sans-v29-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
} 

/* open-sans-800italic - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 800;
  src: local(''),
       url('../fonts/open-sans-v29-latin-800italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/open-sans-v29-latin-800italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* orbitron-regular - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/orbitron-v24-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* orbitron-500 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../fonts/orbitron-v24-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* orbitron-600 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../fonts/orbitron-v24-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* orbitron-700 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/orbitron-v24-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* orbitron-800 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 800;
  src: local(''),
       url('../fonts/orbitron-v24-latin-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* orbitron-900 - latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 900;
  src: local(''),
       url('../fonts/orbitron-v24-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/orbitron-v24-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}


a:focus {outline:none;}
a:-moz-focus-inner {border:0;}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}


html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
	font-family: 'Open Sans', sans-serif;
}

.pure-g { display: flex; flex-flow: row wrap; }   /*Bugfix für Firefox-equal-height – sonst nur für -ms- und -webkit- in pureio 0.5.  sollte in 0.6 weg sein */



html, body {
	font-family: 'Open Sans', sans-serif;
	font-weight:300;
	line-height:1.75;
	 scroll-behavior:smooth;
}
@media (min-width: 48em) {
	html, body { min-height:100%; height:100%; }
}
a {
	display:inline-block;
	text-decoration:none;
	color:rgb(0,171,165);
}

.buttonlink {
	display:inline-block;
	background-color:white;
	color:rgb(0,171,165);
	border:1px solid rgb(0,171,165);
	font-weight:600;
	padding:0.25rem 1rem;
	margin-top:1rem;
	margin-bottom:1rem;
	font-size:0.9rem;
}

a:hover {
}
h1, h2, h3, h4, h5, h6 {
	color: rgb(0,171,165);
	font-family:"Orbitron";
	font-style:normal;
	font-weight:400;
	letter-spacing:2px;
	line-height:1.25;
}
h1 { font-size:1.5em; margin:0.6em 0 0.4em 0;}
h2 { font-size:1em; line-height:1.4;}
h3 { font-size:1em; }	
p, #content li, .contul li  { font-size:0.85em; line-height:1.6; }
p {margin:0 0 0.5em 0;}
strong {color:rgb(0,171,165); font-weight:600;}


blockquote {
	color:#000;
	font-style:italic;

	margin-left:15%;
	width:60%;
	margin-top:2rem;
	margin-bottom:4rem;

	position:relative;
	z-index:0;

	background-color: #f7f7f7;
	padding: 1rem;
	border-radius: 0.5rem;

}
blockquote p {
	font-size:1rem;
	line-height:1.75;
}

blockquote:before {
	display:block;
	position:absolute;
	top:0rem;
	left:-4.5rem;
	font-size:9rem;
	line-height:1rem;
	content:"»";
	color:rgb(0,171,165);
	opacity:0.2;
	z-index:-1;

}

blockquote footer {
	margin:0;
}
blockquote cite {
	color:rgb(0,171,165);
	font-weight:bold;
	display:block;
	margin-top:0.66rem;
}

blockquote:nth-child(2n) {
	margin-left:calc(15% + 4.5rem);
}

@media (max-width: 36em) {
	blockquote {
		width:calc(95% - 3rem);
		margin-right:0 !important;
		margin-left: 3rem !important;
	}

	blockquote:before {
		left:-3rem;
		top:0.5rem;
		font-size:6rem;
		line-height:1rem;
	}
}

aside blockquote {
	width:100%;
	margin-top:1.5rem;
	margin-left:0 !important;
	text-align:left;
	margin-bottom:0rem;
}

aside blockquote:before {
	top:-1rem; 
	left:-1.2rem;
	font-size:6rem;
	line-height:1rem;
	content:"»";
	color:rgb(0,171,165);
	opacity:0.2;
	z-index:-1;
}

aside blockquote {
	font-size:13px;
	line-height:1.6;
}




.flexbottom {
	display:flex;
	flex-direction:column;
}
.flexbottom > * {
	margin-top:auto;
}

.flexcenter {
	display:flex;
	margin-left:auto; margin-right:auto;
	align-items: flex-start;
}


@media (min-width: 64em) {
	h1 { font-size:1.8em; }
	h2 { font-size:1em; letter-spacing:1px; }
	h3 { font-size:0.75em; }
}
@media (min-width:80em) {
	h1 { font-size:2em; }
	h2 { font-size:1.2em; }
	h3 { font-size:1.1em; }
	p, #content li, .contul li  { font-size:0.9em; }
}


#cont-agb h2 {
	font-family:Open Sans;
	font-weight:600;
	letter-spacing:0;
}
#cont-agb ol {
	padding-left:15px;
}
#cont-agb ol li {
	margin-bottom:0.5em;
}





body {
    background-color: #f7f7f7;
    background-image: url("../img/beton.jpg");
    background-position: center top;
    background-attachment:fixed;
    background-repeat:no-repeat;
    background-size: auto;
    overflow-y:scroll;


}
@media (min-width:48em) {
	body {
	    background-color: #f7f7f7;
	    background-image: url("../img/beton.jpg");
	    background-position: center bottom;
	    background-size: cover;
	}
}
#subclickcatcher {
	position:absolute;
	z-index:20;
	top:0; bottom:0;
	left:0; right:0;
	display:none;
	transform: translateZ(0);
}
#container {
	position:relative;
	height:100%;
	margin:0 auto;
	padding:0 20px;
}
@media (min-width: 35.5em) {
	#container { 
		width:34.5em; 
		padding:0 20px;
	}
}
@media (min-width: 48em) {
	#container { 
		width:46em;
		padding:0 20px;
	}
}
@media (min-width: 64em) {
	#container { 
		width:60em;
		padding:0 30px;
	}
}
@media (min-width: 80em) {
	#container { 
		width:76em;
		max-width:1280px;
		padding:0 40px;
	}
}

main img { 
	max-width:100%;
}

header {
	padding:20px 0;
}

header #logo {
	padding:0 23%;
}
@media (min-width: 35.5em) {
	header #logo {padding:0 30px;}
}

@media (min-width: 64em) {
	header #logo {padding:0 40px;}
}


header #logo a {
	display:block;
	border:none;
}
header #logo a img {
	width:100%;
}

footer {margin-bottom:1rem;}

main {
	position:relative;
	background:white;
	border-radius:20px;
	box-shadow:0 0 40px #999, 0 0 5px #000;
	margin-bottom:10px;
 
}
@media (min-width: 80em) {
	main { min-height:500px; }
}

main aside, main article {
	padding:15px 15px 0 15px;
}

@media (min-width: 48em) {
	main aside, main article { 
		min-height:450px;
	}
}
@media (min-width: 64em) {
	main aside, main article { 
		padding:25px 10px 0px 25px;
	}
	main article { 
		padding:25px 25px 0px 25px;
	}

}
@media (min-width: 80em) {
	main aside, main article { 
		min-height:500px; 
	}
}


main aside {
	display:none !important;
}
main aside.showmobile {
	display:inline-block !important;
	border-bottom:2px dotted #ccc;
}

main aside.showmobile h2 {
	display:none;
}

@media (min-width: 48em) {
	main aside {
		display:inline-block !important;
		border-bottom:none;
		border-right:2px dotted #ccc;
		padding-top:10px;
	}
	main aside.showmobile {
		border-bottom:none;
	}
	
	main aside.showmobile h2 {
		display:block;
	}
}
main aside h2 {
	margin-top:40px;
}
main aside li > i {
	display:block;
	padding-top:10px;
	font-size:0.9em;
}

main aside .submenu {
	list-style-type:none;
	padding:0;
	font-size:0.8em;
//	display:none;
}
@media (min-width: 48em) {
	main aside .submenu {
//		display:block;
	}
}
@media (min-width: 64em) {
	main aside .submenu {
		font-size:1em;
	}
}

main aside .submenu a {
	display:block;
}

main aside .submenu b {
	display:block;
	border-bottom:1px dotted #ccc;
	margin-top:20px;
	margin-bottom:30px;
}

/* ==========================================================================
   Hauptmenü
   ========================================================================== */

#mainmenuicon {
	position:relative;
	z-index:100;
	display:block;
	cursor:pointer;
}
@media (min-width: 48em) {
	#mainmenuicon {
		display:none;
	}
}

#mainmenu {
	position:relative;
	z-index:100;
	display:block;
	margin:30px 10% 0 10%;
	transform: translateZ(0);
}
@media (min-width: 35.5em) {
	#mainmenu { margin:0px; }
}
@media (min-width: 48em) {
	#mainmenu { 
		margin:0px; top:20px; 
		display:inline-block;
	}
}
@media (min-width: 64em) {
	#mainmenu { top:35px; }
}
@media (min-width: 80em) {
	#mainmenu { top:65px; }
}

#mainmenu ul {
	margin:0;
	padding:0;
	list-style-type:none;
	display:inline-block;
	width:100%;
}
@media (min-width: 48em) {
	#mainmenu ul {float:right; width:auto;}
}


#mainmenu ul li {
	display:block;
	position:relative;
	border-left:2px solid white;
	vertical-align:top;
	overflow-x:visible;
	letter-spacing:normal;
}
#mainmenu ul li.facebookbutton {
	display:none;
}
@media (min-width: 48em) {
	#mainmenu ul li {
		display:inline-block;
	}
	#mainmenu ul li.facebookbutton {
		display:inline-block;
	}
}

#mainmenu > ul > li > a {
	text-transform:uppercase;
	letter-spacing:1px;
	font-weight:400;
	cursor:pointer;
}
#mainmenu a,
#mainmenu b,
#mainmenu .submenu i 
{
	position:relative;
	display:inline-block;
	width:100%; height:35px; line-height:35px;
	padding:0px 13px;
	background:rgba(255,255,255,0);
	color:#777;
	text-decoration:none;
	font-size:1em;
	font-weight:300;
	white-space:nowrap;
}
#mainmenu .submenu i {
	display:none;
}
@media (min-width: 48em) {
	#mainmenu .submenu i { display:block; }
}
@media (min-width: 48em) {
	#mainmenu a, #mainmenu b { font-size:0.8em; height:40px; line-height:40px; }
}
@media (min-width: 64em) {
	#mainmenu a, #mainmenu b { font-size:1em; }
	#mainmenu > ul > li > a { letter-spacing:2px; padding:0px 10px; font-weight:300; }
}
@media (min-width: 80em) {
	#mainmenu a, #mainmenu b { font-size:1.2em; }
	#mainmenu > ul > li > a { letter-spacing:2px; padding:0px 13px; font-weight:300; }
}
#mainmenu li:hover > a,
#mainmenu li.menuactive > a {
	background:rgba(255,255,255,1);
	color:rgb(0,171,165);
	z-index:150;
}

#mainmenu li .submenu {
	display:none;
	background:white;
	transform: translateZ(0);
}
@media (min-width: 48em) {
	#mainmenu li .submenu {
		position:absolute;
		z-index:150;
		min-width:100%;
		box-shadow:0 0 7px #ccc;
	}
}


#mainmenu .submenu li {
	display:block;
	width:100%;
}
#mainmenu .submenu a,
#mainmenu .submenu b,
#mainmenu .submenu i {
		font-size:1em;
		height:30px;
		line-height:30px;

}
#mainmenu .submenu a.mpactive,
#sidebar .submenu a.mpactive {
	font-weight:bold;
}

@media (min-width: 48em) {
	#mainmenu .submenu a,
	#mainmenu .submenu b,
	#mainmenu .submenu i  {
		font-size:0.85em;
	}
}

#mainmenu .submenu a:hover {
	border-bottom:none;
}

#mainmenu .submenu h2 {
	display:none;
/*	font-family:Orbitron;
	color:rgb(0,171,165);
	font-weight:400;
	letter-spacing:1px;
	border-top:1px dotted #ccc;  */
}
#mainmenu .submenu li:first-child b {
	border-top:none;
}



/* ==========================================================================
   Fußbereich
   ========================================================================== */
#footermenu ul {
	float:right;
	margin:0px; padding:0px;
}
#footermenu ul li {
	display:inline-block;
}
#footermenu ul li a{
	border-left: 1px solid white;
	padding:0 10px;
	color:rgb(0,171,165);
	font-size:0.85em;
	text-shadow:0px 0px 2px white;
	font-weight:400;
}



/* ==========================================================================
   Inhaltsspezifisch
   ========================================================================== */
.cont {
	display:inline-block;
	width:100%;
	background-image:url('../img/bg-step.jpg');
	background-position:bottom right;
	background-size:100%;
	background-repeat:no-repeat;
	padding-bottom:250px;  /* Abstandshalter für Hintergrundbild unterhalb */
}
.cont.nobg {
	background:none;
	padding-bottom:0;
	min-height:none;
}

@media (min-width: 20em)   { .cont { padding-bottom:350px; } }   /* Abstandshalter für Hintergrundbild unterhalb */
@media (min-width: 25em)   { .cont { padding-bottom:400px; } }
@media (min-width: 30em)   { .cont { padding-bottom:520px; } }
@media (min-width: 35.5em) { .cont { padding-bottom:500px; } }


@media (min-width: 48em) {
	.cont { 
		padding-bottom:0px;   /* Abstandshalter für Hintergrundbild unterhalb aufgehoben */
		background-size:200px;
		min-height:430px;
	}
}


@media (min-width: 80em) {
	.cont { 
		background-size:300px;
		min-height:530px;
	}
}



.cont ul,
.contul {
	padding:0; padding-left:15px;
	margin:0; margin-bottom:30px;
text-indent: 0px;
list-style-type:none;

}
.cont ul li,
.contul li {
//	color:rgb(0,171,165);
}
.cont ul li:before,
.contul li:before {
	content:"»";
	color:rgb(0,171,165);
	display:inline-block;
	width:15px;
	margin-left:-15px;
}



/* ==========================================================================
   Stundenplan
   ========================================================================== */

	.stundenplan {
		display:none;
		width:100%;
		border-collapse:collapse;
		//margin-top:2rem;
		margin-bottom:2rem;
		background-color:white;
		//box-shadow:0 0 10px 1px rgba(0,0,0,0.15);
	}


	@media (min-width: 48em) {
		.stundenplan {
			display:table;
		}
	}
	



	.stundenplan tr {
		border-top:1px solid #ddd;
		height:100px;
	}

	.stundenplan tr:first-child {
		height:4rem;
		border-top:none;
	}

	.stundenplan tr:last-child {
		border-bottom:0px solid rgb(0,171,165);
	}


	.stundenplan th {
		text-align:center;
		box-sizing:border-box;
	}

	.stundenplan td {
		box-sizing:border-box;
		text-align:center;
		width:18%;
		border-right:1px solid #ddd;
		vertical-align:top;
		padding:1rem 1rem;
		height:100%;
	}

	@media (max-width: 64em) {
		.stundenplan td {
			padding:1rem 0.5rem;
			font-size:0.8rem;
		}
	}

	.stundenplan td:last-child {
		border-right:none;
		}
	
	.stundenplan td:first-child {
		text-align:left;
		font-weight:bold;
		width:10%;
		padding:0rem 1rem 0 1rem;
		vertical-align:middle;
	}
 
	.kurscontainer {
		display:flex;
		flex-direction:column;
		width:100%;
		height:100%;
	}
 
	.kursbox {
		//flex: 1;  /* macht alle kursboxen einheitlich(!) so groß wie möglich, inhalt egal. */
		//max-height:50%;  /* limitiert dann die maximale Größe auf 50% --> das ist nicht sauber, geht nur für 1 / 2 Kurs-Konstellationen */
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		box-shadow:0px 2px 1px -1px rgba(0,0,0,0.1), 0px 4px 5px -3px rgba(0,0,0,0.1), 0px 5px 9px -4px rgba(0,0,0,0.4);
		margin:0.5rem 0;
		//height:100%;
		padding:1rem 0.66rem 0.125rem 0.66rem;
		font-size:0.8rem;
		line-height:1.4;
		transition:all 0.33s ease-out;
		min-height: 225px;
	}
	.kursbox > * {
		width:100%;
	}
	.kursbox > * a {
		display:block;
		width:100%;
	}

	.kursbox:hover {
		transform:scale(1.05);
		box-shadow:0px 2px 2px -1px rgba(0,0,0,0.05), 0px 4px 8px -3px rgba(0,0,0,0.05), 0px 5px 15px -4px rgba(0,0,0,0.2);
	}

	.kurszeit {
		font-weight:bold;
	}
	.kurszeitneu {
		font-weight:bold;
		margin-top:auto;
	}
	.trainerin {
		margin-bottom:0.5rem;
	}
	.kurssub {
		margin-bottom:0.5rem;
		display:none;
	}

	.kursname {
		font-size:1rem;
		font-weight:600;
		line-height:1.25;
	}

	.kursanmeldung {
		border-top:1px dotted #ccc;
		font-size:1rem;
		font-weight:600;
		margin-top:1rem;
		line-height:2;
	}

	.kursanmeldung a {
		padding:0.5rem 0;
		line-height:1.33;
	}

	.kursinfo a:after,
	.kursanmeldung a:after {
		content:"»";
		color:rgb(0,171,165);
		display:inline-block;
		margin-left:3px;
	}
	.startdatum {
		margin-top:auto;
	}
	.startdatumneu {
		margin-top:0;
	}


	.stundenplanmobile {
		display:table;
	}

	@media (min-width: 48em) {
		.stundenplanmobile {
			display:none;
		}
	}

	.stundenplanmobile td:first-child {
		width:30%;
		border-right: none;
	}
	.stundenplanmobile td:last-child {
		width:70%;
	}

	


	.stundenplantitel {
		background-color:#eee; 
		font-weight:bold;
	}
	
	.stundenplantitel > td {
		text-align:center !important;
	}

	.stundenplantitel + tr {
		border:none;
	}



/* ==========================================================================
   Formular
   ========================================================================== */

#box-form {
	display:none;
}

#close-form {
	cursor:pointer;
	color: rgb(0,171,165);
	margin-top:1rem;
}

#form-kursname {
	margin-bottom:2rem;
}

#register {
	margin-bottom:2rem;
}


#register .pure-g > div {
   box-sizing: border-box;
   padding-right:2rem;
}

input, textarea {
	width:100%;
	margin-bottom:2rem;
	border:1px solid #ccc;
	border-top:none;
	border-right:none;
	height:2.25rem;
	padding-left:0.25rem;
}
textarea {
	height:4rem !important;
}

.has-error input {
	border-color: orange;
	background-color:#fff4cb;
}

.has-success input {
	border-color: rgb(0,171,165);
}
.has-error .custom-label {
	color: orange;
}



.custom-check {
    width: 30px;
    height: 30px;
    background-color: #F3F4F4;
    display: inline-block;
    border: 1px solid #E2E2E2;
    cursor: pointer;
    margin-bottom: -8px;
    margin-right: 6px;
    position: relative;
    transition: all 0.3s;
}

.custom-check:hover {
	background-color:#C5C5C5;
	border:1px solid #C5C5C5;
	transition:all 0.1s;
}

.custom-check.checked {
	background-color:rgb(0,171,165);
	transition:all 0.3s;
}

.has-error .custom-check {
	border-color:orange;
	background-color:#fff4cb;
}

.has-error label a {
	color:orange !important;
	text-decoration:underline;
}

.custom-check.checked::after {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	font-size: 20px;
	text-decoration: none;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "×";
	text-align:center;
	line-height: 28px;
	width:100%;
	color: #ffffff;
	left: 0;
	top: 0;
	position: absolute;
}


.select2-container {
	margin-bottom:2rem;
}

.select2-container--default .select2-selection--single {
	border-radius:0;
	border:1px solid #ccc;
	border-top:none;
	border-right:none;
	height:2.25rem;
}

.has-error .select2-container--default .select2-selection--single {
	border-color:orange;
	background-color:#fff4cb;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	//height: 26px;
	//position: absolute;
	//bottom: 1.1rem;
	top:5px;
	//right: 1rem;
	//width: 20px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	padding-top:4px;
}



#sendestatus {
	display:none;  /* später: flex per js */
	flex-direction: column;
	justify-content: center;
	padding:1rem 0 2rem;
	text-align:center;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: white;
} 

#sendestatus.success .statustext-senden,
#sendestatus.success .statustext-error {
	display:none;
}

#sendestatus.success .statustext-success {
	display:block;
}

#sendestatus.error .statustext-senden,
#sendestatus.error .statustext-success {
	display:none;
}

#sendestatus.error .statustext-error {
	display:block;
}





/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}