/* ----------------------------------------------------------------------------- *
 *                           Styles der Basisversion                             *
 * ----------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"
 * http://www.paulirish.com/2012/box-sizing-border-box-ftw/
 * << apply a natural box layout model to all elements >>
 * ----------------------------------------------------------------------------- */
*, *:before, *:after {
    -webkit-box-sizing: border-box; /* Safari/Chrome, andere WebKit-Browser */
    -moz-box-sizing: border-box; /* Firefox, andere Gecko-Browser */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/* ----------------------------------------------------------------------------- */
.page-wrapper {
    margin: 0px;
}

header {
    width: 100%;
	position: fixed;
	padding: 0px;
	background-color: #000000;
	text-align: center;
}

header img {
	max-width: 100%;
	height: auto;
	padding: 0.7em 0px 0px 0px;
}

footer {
	z-index: 5;
	width: 100%;
    padding: 0.05em 10px;
	color: #000000;
	font-size: 0.8em; /* 12px */
	position: fixed;
	bottom: 0;
}

footer .select {
	color: #000000;
	font-weight: bold;
}

footer a:link {
	color: #000000;
	text-decoration: none;
}

footer a:visited {
	color: #000000;
	text-decoration: none;
}

footer a:hover {
	color: #ffffff;
}

section {
    padding: 0px 20px;
}

section img {
	max-width: 100%;
	height: auto;
	border: 0px;
}

section a img { border: 0; }

.mainContent {
    width: 100%;
	text-align: center;
    border-top: 1px solid transparent;
    padding: 0.8em 0px;
}

.mainContentGes {
    width: 100%;
	text-align: left;
    border-top: 1px solid transparent;
    padding: 0.8em 0px;
	font-size: 0.8em;
}

article {
	margin: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.headtext img {
	display: none;
}

.hideOnMobile {
	display: none;
}

div#button {
    border: 0px;
	margin: auto;
	padding: 8.0em 0px 5.0em 0px;
}

div#button img {
	max-width: 100%; 
	height: auto; 
}

@media print {
	 .hideOnMobile {
	display: table-cell; }
}



/* ----------------------------------------------------------------------------- *
 *                             Tabelle                                           *
 * ----------------------------------------------------------------------------- */

table	{ 
	width: 100%; 
	margin: 0px; 
	border: 1px solid #88ba14; 
}

thead {
	margin: 0px; 
	font-size: 1.0em; 
	line-height: 1.3em; 
	border: 1px; 
	background-color: #88ba14; 
	color: #ffffff; 
}

th {
	padding: 10px 0px 10px 2px;
}

tr, td	{ 
	margin: 0px; 
	padding: 2px 0px 2px 2px; 
	text-align: left; 
	vertical-align: top; 
	font-size: 1.0em; 
	line-height: 1.4em; 
	border: 1px solid #88ba14;
}

tr, td p {
	padding: 0px 0px 5px 0px;
	margin: 0px;
}

col#colkurs { 
	width: 30%; 
}

col#coldetails {
	width: 50%;
}



/* ----------------------------------------------------------------------------- *
 *                             Responsive Popup                                  *
 * ----------------------------------------------------------------------------- */
	button {
	border: 0px;
	background-color: #FFFFFF;
	color: #88ba14;
	font-weight: bold;
	padding: 2px 0px 2px 2px;
	text-align: left;
	}
	
	button:hover {
	color: #e6e6e6;
	}

    .popup-overlay {
      display: none; /* Versteckt am Anfang */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    .popup {
      background: #fff;
      padding: 20px;
      border-radius: 10px;
      max-width: 90%;
      width: 400px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.3);
      text-align: center;
    }

    .popup h2 {
      margin-top: 0;
    }

    .popup button {
      margin-top: 20px;
      padding: 10px 20px;
      background: #88ba14;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .popup button:hover {
      background: #88ba14;
    }

@media (max-width: 500px) {
      .popup {
        width: 90%;
        padding: 15px;
      }
    }

/* ----------------------------------------------------------------------------- *
 *                             Textauszeichnungen                                *
 * ----------------------------------------------------------------------------- */
h1 {
    margin: 0.6em 0px;
}

h2 {
    margin: 0.6em 0px;
}

h3 {
    margin: 0.6em 0px;
	font-size: 1.0em;
}

.box.teaser p {
	padding: 0px;
	margin: 0 0 0.8em 0;
}

ul {
    padding: 0;
    margin: 0 0 0.625em 20px;
}

ul li {
	padding: 0px 0px 0px 0px;
}

ol {
    padding: 0;
    margin: 0 0 0.625em 0px;
}

ol li {
	padding: 0px 0px 5px 0px;
}



/* ----------------------------------------------------------------------------- *
 *                                  Navigation                                   *
 * ----------------------------------------------------------------------------- */
nav ul {
    margin: 0;
}

nav ul > li {
    margin-left: 0;
    border-bottom: 1px solid rgba(250, 250, 250, 0.6);
}

nav ul > li > a, nav ul > li > strong {
    padding: 0.3em 20px;
    display: block;
}

nav ul a:link {
    text-decoration: none;
}

/* ----------------------------------------------------------------------------- *
 *                                  Kopfbild                                     *
 * ----------------------------------------------------------------------------- */

div#headimage {
    border: 0px;
	margin: 0px;
	padding: 0px;
}
div#headimage img {
	max-width: 100%; 
	height: auto; 
	margin: 0px;
	display: block;
}


/* ----------------------------------------------------------------------------- * 
 *                                  Slideshow                                    *
 * ----------------------------------------------------------------------------- */
 
div#slideshow {
    border-bottom: 0px;
	height: auto; 
	margin: 0px;
	overflow: hidden;
}
div#slideshow img {
	width: 300%; 
	height: auto; 
	margin: 0;
}
.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
}
.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
}
.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
}
.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
}


/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media screen and (max-width: 46.85em)
{
/* ----------------------------------------------------------------------------- *
 *                                  Tabelle                                      *
 * ----------------------------------------------------------------------------- */
	tr, th, td {
		display: block;
	}
	
	tbody th, td {
		text-align: center;
		padding: 0px 0px 10px 0px; 
	}
	
	tr {
		padding: 0px;
		border-top: 0 none;
		text-align: center;
	}
	
	th {
		padding: 0px;
	}
	
	td {
		padding: 0px;
		border: 0px;
	}
	
	col#colkurs { 
	width: 100%; 
}
}


/* ----------------------------------------------------------------------------- *
 *                           Styles der Tabletversion                            *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
    
    /* Schriftverkleinerung wird für große Screens wieder aufgehoben */
    @media only screen and (max-width: 78em) {
        body {
            font-size: 0.938em; /* 15px */
        }
		
		.box.teaser {
		float: left;
		margin: 0 0 0.5em 0;
		width: 100%;
		}
		
		.box.teaser figure {
		width: 30%;
 		height: 30%;
 		float: left;
 		margin: 0 2% 2% 0;
		}
	}
	
    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
    }
	
    .mainContent {
        width: 100%;
        float: left;
    	padding: 190px 10% 3.0em 10%;
        border-top: none;
    }
	
    .mainContentGes {
        width: 100%;
        float: left;
    	padding: 190px 10% 3.0em 10%;
        border-top: none;
    }	

	footer {
        padding: 0.1em 20px;
    }

    section {
        padding: 50px 20px;
    }
		
	.headtext img {
		display: inline;
	}
	
	.hideOnMobile {
		display: table-cell;
	}
	
	div#slideshow {
		width: 100%; 
	}
	
	div#slideshow img {
		width: 100%; 
	}
			
    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
        overflow: hidden;
        font-size: 1.0em; /* 16px */
    }

    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
    }

    nav ul > li > a {
        padding: 0.6em 10px 0.6em 10px;
        display: inline-block;
		text-align: center;
    }
	
}

/* ----------------------------------------------------------------------------- *
 *                          Styles für kleine Desktops                           *
 *                           1024px / 16px/em = 64em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 64em) {

    nav {
         box-shadow: none;
    }

	    .main {
        /* clearing für die floatenden gleichlangen Spalten (.mainContent und .aside) */
        overflow: hidden;
    }

    .mainContent {
        width: 100%;
        float: left;
    	padding: 190px 10% 3.0em 10%;
        border-top: none;
    }
	
    .mainContentGes {
        width: 100%;
        float: left;
    	padding: 190px 10% 3.0em 10%;
        border-top: none;
    }	
	
	div#slideshow {
		width: 100%; 
		margin: auto;
	}
	
	div#slideshow img {
		width: 100%; 
	}
	
/* ----------------------------------------------------------------------------- * 
 *                  Teaserboxen mit Bild und Text .box.teaser                    *
 * ----------------------------------------------------------------------------- */

.teaser {
    margin-top: 1.5em;
    padding: 0px;
}

.box.teaser {
    float: left;
    margin-right: 3%;
    width: 30%;
    overflow: auto;
}

.teaser p {
	margin: 0px;
    font-size: 0.8em; /* 12 px */
}

}
/* ----------------------------------------------------------------------------- *
 *                          Styles für große Desktops                            *
 *                           1248px / 16px/em = 78em                             *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 78em) {
	  
    .page-wrapper {
        margin: 0 auto;
        max-width: 78em;
    }
	
	footer {
        padding: 0.1em 50px;
    }
	
	h1 {
		margin: 1.125em 0px;
	}

    section {
    	padding: 50px 120px;
    }
	
	    /* ----------------------------------------------------------------------------- *
     *                                  Navigation                                   *
     * ----------------------------------------------------------------------------- */
    nav {
        /* clearing für die floatenden LIs */
		padding: 0px 20%;
        overflow: hidden;
        font-size: 1.0em; /* 16px */
    }

    nav ul {
        margin: 0px;
    }

    nav ul li {
        float: left;
        border: none;
        width: auto;
    }

    nav ul > li > a {
        padding: 0.6em 10px 0.6em 10px;
        display: inline-block;
		text-align: center;
    }
			
}

/* ----------------------------------------------------------------------------- * 
 *                          Styles für Multi-Toggle-Nav                          *
 * ----------------------------------------------------------------------------- */

header {
    position: relative;
}

/* Menü-Link im Header zum Ein-und Ausblenden des Menüs */
a.toggle-nav {
    display: inline-block;
    position: absolute;
    right: 5%;
    /*top: 1.3em;*/
    top: 0.8em;
    text-decoration: none;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    border-radius: 0.4em;
    cursor: pointer;
    padding: 0.357em 0.5em;
    color: #000000;
    background: #88ba14;
    border: 1px solid #88ba14;
}

a.toggle-nav:hover {
    border: 1px solid #88ba14;
    background: #ffffff;
    color: #000000;
}

/* NEU */
/* ----------------------------------------------------------------------------- *
 *                      Beispiel Multi-Level-Menü im Basis-Layout                *
 * ----------------------------------------------------------------------------- */
/* Clearing von nav, nav.ul, .main mit .clearfix statt mit overflow:hidden;
 * sonst wird die zweite menüebene abgeschnitten! */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

/* ----------------------------------------------------------------------------- *
 *                          Multi-Level-Menü im Basis-Layout                     *
 * ----------------------------------------------------------------------------- */
/* Positionierung der Navigation "auf" dem Hauptinhalt, damit die zweite Menüebenen nicht verdeckt wird. */
nav {
    overflow: inherit;
    position: relative;
    z-index: 10;
    width: 100%;
}

.main {
    z-index: 5;
}

/* Layout und Positionierung der 2. Menüebene */
nav ul ul {
    background-color: #88ba14;
    z-index: 20;
    display: none;
}

nav ul .openmenu ul {
    display: block;
}

nav ul li {
    position: relative;
}

nav ul li li {
	font-size: 14px;
    float: none;
}

nav ul li a:hover {
    background-color: #e6e6e6;
	color: #000000;
}

nav li.act {
	padding: 0px;
    background-color: #e6e6e6;
	color: #000000;
}

nav li.actinf {
	background-color: #e6e6e6;
	color: #000000;
	font-weight: normal;
}

nav ul > li > a, nav ul > li > b, nav ul > li > strong {
	padding: 0.6em 20px;
    display: block;
    font-weight: normal;
}

nav ul > li > b, nav ul > li > strong {
    color: #000000;
}

nav .link {
	padding: 0px 20px;
	color: #000000;
}

#navMain {
    display: none;
}

/* Einblenden des Untermenüs onHover für alle Ebenen */
nav ul li:hover ul {
    display: block;
}

/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Tabletversion                         *
 *                          750px / 16px/em = 46.875em                           *
 * ----------------------------------------------------------------------------- */
@media only screen and (min-width: 46.875em) {
	header {
		position: fixed;
		z-index: 5;
		}

    nav > ul > li {
        height: 2.7em;
        width: 20%; /*richtet sich nach der Anzahl der Menüpunkte */
    }

    /* Layout und Positionierung der 2. Menüebene */
    nav ul ul {
        top: 3.0em;
        position: absolute;
        width: auto;
        margin: 0;
        min-width: 100%;
    }

    nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0.6em 10px;
        display: block;
    }
	
    #navMain {
        display: block;
    }

    /* Menü-Link verstecken in großen Viewports */
    a.toggle-nav {
        display: none;
    }

}



/* ----------------------------------------------------------------------------- *
 *                      Styles für Menü ab Desktopversion                         *
 *                          1024px / 16px/em = 64em                           *
 * ----------------------------------------------------------------------------- */
  

@media only screen and (min-width: 64em) {
    /* 100% Navigation wird hier wieder überschrieben NEIN, NICHT MEHR
    nav {
        width: 20%;
    }

    nav ul {
        margin: 0;
		position: relative;
    }

    nav ul ul {
        position: absolute;
        top: 0;
		left: 100%;
    }

    nav ul li.act ul {
        
    }

    nav > ul > li {
        height: auto;
        width: auto;
    }

    nav ul > li > a, nav ul > li > b, nav ul > li > strong {
        padding: 0.6em 20px;
    }
    nav ul ul > li > a, nav ul ul > li > b, nav ul ul > li > strong {
        padding: 0.7em 20px;
    }	
	
    nav ul li {
        float: none;
    } */
}