body {
	margin: 0;
	padding: 0;
	background: #fff;
	font: normal medium "Trebuchet MS", Arial, Helvetica, sans-serif;
}

dd, p, blockquote, ul, ol, label {
	margin-top: 0;
	line-height: 180%;
	text-align: justify;
}

ol.small {
	 font-size: smaller;
}

img {
	border: none;
}

blockquote {
    margin: 0;
    font-size: 1em;
}


h1, h2, h3 {
    font-size: medium;
	text-transform: uppercase;
}

h1 {
	font-size: 1.2em;
    margin-bottom: 1.2em;
}

h1.next {
	margin-top: 2em;
}

h2.next {
	margin-top: 2em;
}

h2 {
	margin: 0;
    margin-bottom: 0.65em;
	font-size: 1em;
}

h2.index {
	font-size: 1.2em;
    margin-bottom: 1.2em;
	margin-top: 0.6em;
}

h2.archiv {
	margin: 0;
	margin-top: 2em;
    margin-bottom: 1.2em;
	font-size: 1.2em;
	text-transform: none;
}

a {
    color: #429648;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

ul {
	padding-left: 1em;
	margin-top: 1em;
}

ul li {
	padding-bottom: 0.5em;
}

dt {
    margin-top: 1em;
    font-weight: bold;
    font-style: italic;
}

iframe.improtermine {
    border: 3px dotted #429648;
	display: block;
    width: 100%;
    height: 350px;
}

.margintop {
	margin-top: 1.2em;
}

p.margintop {
	margin-top: 2.2em;
}

.lined {
	margin: 0 0 15px 0;
	padding: 0 0 10px 0;
}


.eventdate {
    font-weight: bold;
}
.eventtitle {
	margin-bottom: 1.5em;
}

.video, .album  {
	margin-bottom: 3em;
}

.video.last, .album.last {
	margin-bottom: 1em;
}

.video label, .video video, .album img, .album label {
	display: block;
	margin-top: 0.1em;
}

.info {
	margin-bottom: 0.6em;
}


.clear {
	margin: 0;
	padding: 0;
	clear:both;
}

#facebook {
	padding-top: 24px;
	border-bottom: none;
}

.facebookbox {
	margin-top: 10px;
	border: 1px solid #ccc;
}

.subsection_box {
    display: flex; 
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
}

#header {
	max-width: 900px;
	margin: 20px auto 0 auto;
	padding: 86px 0 0 0;
	background: url(../images/banner.gif) repeat-x;
	background-color: #fff;
	text-align: center;
}

#header_logobereich{
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
}

#Logo {
    margin: 10px 15px 10px 10px;
}

/* Im Sinne, des Semantischen Webs sollte ich wohl auch hier die Zitate als blockquote oder cite
 * ausführen. Und alle blockquotes/cites entsprechend formatieren.*/
.zitatbox {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    margin: 10px 15px 10px 10px;
}

.zitatbox_img100 {
    max-width: 100px;
    height: auto;
}

.zitatbox_img_cont {
    width: 100%;
    height: auto;
}

.Zitat90 {
    font-style: italic;
    width: 90%;
    margin-top: 5px;
    text-align: center;
    line-height: 150%;
}

.Zitat { 
    font-style: italic;
    max-width: 200px;
    margin-top: 5px;
    text-align: center;
    line-height: 150%;
}



.Person {
    text-align: right;
    font-size: 0.9em;
}

#footer {
	max-width: 900px;
	margin: 0 auto 20px auto;
	padding: 20px 0 20px 0;
	background-color: #fff;
	color: #ccc;
	text-align: center;
}

#footer div {
    background-color: #B1C700;
    color: #6A6C6F;
}

#menu a {
	height: 17px;
	padding: 0 17px 0 19px;
	text-decoration: none;
    color: #429648;
}

#menu span {
	height: 17px;
	padding: 0 17px 0 19px;
	text-decoration: none;
    background: #429648;
    color: #fff;
}

#menu a:hover {
	text-decoration: underline;
}


#menu .active a {
	text-decoration: underline;
}

/* Hide Hamburger */
#menu label, #hamburger { display: none; }

/* Anmerkungen zum Mehrspaltendesign:
 * auf einer Internetseite, die für Desktopansicht designt ist, kann es ganz gut aussehen, wenn,
 * die Spalten unterschiedlich breit sind. Wird allerdings in einem Flexboxlayout mit zwei unterschiedlichen
 * Spalten die Fensterbreite verringert, dann kommt es zumindest solange noch genügend Platz ist, dazu, dass 
 * diese beiden Spalten zwar, wie gewollt, in einer Spalte vertikal angeordnet werden (also die eine weiter oben die zweite 
 * weiter unten), aber unterschiedlich breit sind. Das sieht nicht so gut aus. Da es keinen einfachen Weg gibt, über CSS 
 * festzustellen, ob jetzt ein oder zwei Spalten dargestellt werden, muss hier wohl oder übel der Weg gegangen werden,
 * für unterschiedliche Anzeigebreiten unterschiedlichen styles anzubieten. Media Queries 
 * https://www.w3schools.com/css/css3_mediaqueries_ex.asp
 * https://www.w3schools.com/css/css_rwd_intro.asp
 * 
 * Dabei hilft, dass die Einheit px nicht tatsächliche pixel sind, sondern sie hat einen festgelegten Wert, der eine fixen Länge entspricht
 * und zwar auf jedem display/gerät 
 * 
 * Wie auch auf der w3schools Seite dargestellt, empfiehlt es sich, das Grunddesign für das kleinste Gerät zu machen und dann die großeren
 * über @media hinzu zu fügen. Daher sollen auch hier zuerst die styles für Handy stehen und dann die @media, die die abweichenden classes 
 * und ids beinhalten.
 * 
 * Extra small devices (phones, 600px and down)
 * @media only screen and (max-width: 600px) {...}
 *
 * Small devices (portrait tablets and large phones, 600px and up)
 * @media only screen and (min-width: 600px) {...}
 *
 * Medium devices (landscape tablets, 768px and up)
 * @media only screen and (min-width: 768px) {...}
 *
 * Large devices (laptops/desktops, 992px and up) 
 * @media only screen and (min-width: 992px) {...}
 *
 * Extra large devices (large laptops and desktops, 1200px and up)
 * @media only screen and (min-width: 1200px) {...} 
 */

/* hier unterhalb einfügen: styles für Telefone und Tablets, also ich würde die Spalten gleich breit machen */
@media only screen and (max-width: 799px) {
    #menu {
        margin-top: 20px;
        text-align: left;
      	/*background-color: #f0f;*/
        position: absolute;
        top: 5px;
        left: 0px;
        z-index: 1;
    }
    #hamitems {
        display: flex;
        flex-wrap: wrap;
        justify-content: left;
        padding: 5px;
        list-style: none;
        line-height: 20px;
        text-align: left;
        white-space: nowrap;
        background-color: #fff;
    }

    /* Show Hamburger Icon */
  #menu label { 
    display: inline-block; 
    color: white;
    background: #429648;
    font-style: normal;
    padding: 10px;
    font-size: 1.2em;
    border-radius: 3px;
    border-color: white;/*#B1C700; /*hätte gerne einen hellgrünen Rand rundum ...*/
    border-width: 7px;
  }

   #hamitems a {
    box-sizing: border-box;
    display: block;
    font-size: 1.2em;
    margin:10px;
  }
  
  #hamitems span{
    box-sizing: border-box;
    display: block;
    font-size: 1.2em;
    margin:10px;
 /*   color: white;
    background: #429648;*/
  }

    /* Toggle Show/Hide Menu */
   #hamitems { display: none; }
   #menu input:checked ~ #hamitems { display: block; }

  
    #content {
        display: flex; 
        flex-wrap: wrap; 
        flex-direction: column;
        justify-content: space-around;
        margin: 5px auto;
    }

    .section, .section_last {
        display: flex; 
        flex-wrap: wrap; 
        max-width: 400px;
        margin: 5px auto;
        padding: 0 10px;
/*        border-bottom: 1px dashed #ccc; */
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
}

/* für Medien, die breiter als 800 px sind, sollen dann die Spalten unterschiedlich breit sein, so wie in der ursprünlichen HP */
@media only screen and (min-width: 800px) {
    #hamitems {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 17px auto 0 auto;
        padding: 0;
        list-style: none;
        line-height: normal;
        text-align: center;
        white-space: nowrap;
    }
    #menu {
        margin-top: 20px;
    }
    #content {
        display: flex; 
        flex-wrap: wrap; 
        justify-content: space-around;
        max-width: 900px;
        margin: 0 auto;
        padding: 40px 50px 0 50px;
    }
    
    .section {
    	display: flex; 
        flex-wrap: wrap; 
	    flex-direction: column;
        max-width: 100%;
        margin: 5px auto;
        border-bottom: 1px dashed #ccc;
    }
    
    .section_last{
    	display: flex; 
        flex-wrap: wrap; 
	    flex-direction: column;
        max-width: 100%;
        margin: 5px auto;
    }
 
    .subsection30 {
        max-width: 30%;
    }
    .subsection45 {
        max-width: 45%;
    }

    .subsection62 {
        max-width: 62%;
    }
    /* Die nachfolgenden Klassen mit dem "order" Parameter, dienen dazu auf breiteren Bildschirmen die Bilder abwechselnd rechts und links haben zu können. Im html Code wird die Reihenfolge so festgelegt, dass immer Bild auf Text folgt, sodass auf schmalen Bildschirmen keine zwei Bilder untereinander kommen. Wird jetzt bei der ersten Subsection im Flexcontainer ein "order: 1;" gesetzt, wird die nachgereiht. Der Defaultwert ist 0.*/
    .subsection30_o1 {
        max-width: 30%;
        order: 1;
    }
    .subsection45_o1 {
        max-width: 45%;
        order: 1;
    }

    .subsection62_o1 {
        max-width: 62%;
        order: 1;
    }


}