@charset "utf-8";
/* CSS Document */

/* Fonts sind lokal abgelegt um Abmahnungen zu vermeiden. gemäß DSGVO ist die Nutzung z.B. der Googleapis ohne Zustimmung des Nutzers nicht zulässig*/

/* latin-ext */
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/playball/Playball-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playball';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/playball/Playball-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
	background: #a7fd8c;
	color: #004B00;
}

body {
	
	font-family: sans-serif;
	margin: 1em auto;
	max-width: 65em;	
}

h1, article, main, aside, main svg {
	/*border: 1px none;*/
	margin: 0px;
	padding: .5em 1em;
}	

img {
  width: 100%;
  float: center;
  border: 1px none; 
}

h1  {
	font-family: Playball;
	font-size: 2.5rem;
}

h2  {
	font-family: Playball;
	font-size: 1.5rem;
}

h3  {
	color: red;
	font-family: Playball;
	font-size: 1.5rem;
}
	
h4 {
	text-decoration: underline;
	font-weight: normal;
}

article li {
	margin-bottom:1em;
}

aside h2 {
	/*font-size: 1.8rem;
	color: #004B00;*/
}

#logo {
 display:inline-block;
 text-shadow: none; 
 color: transparent;
 background-image:url("../img/logodick.png");
 background-size:contain;
 width:92px;
 height:60px;
}


#bordered {
    border-style: solid;
	border-width: 1px;
	border-color: black;
	padding-left: 1em;
	padding-right: 1em
}

#smallertext {
	font-size: 0.8em;
}

#strongtext {
	font-size: 1.2em;
}

#textrot {
	color: red;
	font-size: 0.8em;
}
	
#img25 {
	width: 25%;
	float: right;
	margin-left: 0.2em;
}


figure figcaption {
  font-style: italic;
}

nav a {
  background: #004B00;
  border: 1px solid; 
  border-color: #f0d9a2;
  /*border-left-color: #f0d9a2;*/
  color:  #f0d9a2;
}

nav a:hover, nav a:focus, #styleswitcher  button:hover, #styleswitcher  button:focus {
  background: #00ff00;
  border-color: #004B00;
  color:  #004B00;
}

nav a[aria-current=page] {
	color:#00ff00;
	font-weight:bold;
}
nav a[aria-current=page]:hover,nav a[aria-current=page]:focus {
	color:#004B00;

}

a {
  color: blue;
}


/* Ab hier responsives Layout */

#bildbreit {
	width: 90%;
	margin-bottom: 0.5em;
}


body {
  display: flex;
  flex-flow: row wrap;
  
}

/* Mobile first - alle Dokument-Blöcke bekommen 100% Breite */
header, nav, article, section, aside, footer {
  border: 1px none;
  padding: 0.5em;
  margin: 0.5em;
  flex: 1 100%;
}

article img {
	width: 90%;
	float: center;
	margin: 0.5em 1em;
}
article li {
	width: 100%;
  }


figure {
  display: inline-block;
  width: 90%;
  margin: 0.2em;
  }

figure img {
	width: 100%;  
	
}


header {
  display: flex;
  flex-flow: row wrap;
}
header * {
  flex: 1 1 0%;
}
header img {
  flex: 0 0 150px;
  margin-right: 20px;
}
header nav {
  flex: 1 1 100%;
}
nav, nav ul, nav li{
  margin: 0;
  padding: 0;
  border: none;
}
nav ul {
  display: flex;
  flex-direction: column;
}
nav li {
  border-radius: 1em;
  list-style-type: none;
  margin: 0.5em 0;
  padding:0;
  flex: 1 1 100%;
}
nav li a { border-radius: 1em; }

nav a {
  display: inline-block;
  margin: 0;
  width: 96%;
  padding: 0.5em 2%;
  text-decoration: none;
  text-align: center;
}

footer {
  display: flex;
  flex-flow: row wrap;
}
footer * {
  flex: 1 1 0%;
  justify-content: space-between;
}
footer p:last-child {
  text-align: right;
}


/* Smart Phones und Tablets mit mittlerer Auflösung */
@media all and (min-width: 35em) {
	

  header img {
    margin-right: 50px;
  }
  nav ul {
    flex-direction: row;
  }
  nav li {
    flex: 1 1 0%;
  }
  
  nav li a{ border-radius: 0; }
  nav li:first-child  a{ border-radius: 1em 0 0 1em; }
  nav li:last-child  a{ border-radius: 0 1em 1em 0; }

  
  article {
    order: 2;
  }
  
  article img {
	width: 30%;
	float: right;
	margin-left: 0.2em;
  }
 
  article li {
	width:60%;
  }

  
  #news {
    flex: 1 auto;
    order: 3;
  }

  aside {
    /* durch auto werden die beiden asides in eine Zeile gesetzt */
    flex: 1 auto;
    order: 4;
  }
  
  figure {
  display: inline-block;
  width: 49%;
  margin: 0.2em;
  }
  
  footer {
    order: 5;
  }
  
  #bildbreit {
	width: 51%;
	float: right;
	margin-left: 1.0em;
	margin-bottom: 0.5em;
  }

}

     /* Large screens */
@media all and (min-width: 50em) {
  article {
    /* Der Article wird 2.5x so breit wie die beiden asides! */
    order: 3;
    flex: 5 1 0%;
  }
  
  aside {
    flex: 2 1 0%;
  }
  
  #news { azimuth:  
    flex: 2 1 0%;
    order: 2;
    align-self: center;
    height: 12em;
  }
  
  figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
  }
  
  figure img {
    width: 100%;
  } 
  #bildcontainer {
	  /* damit fotos rechtsbüündg untereinander dargestellt werden */ 
	width: 33%;
	float: right;
	margin-left: 0.2em;
  }
  
}

/* Terminkalender */

table, th, td { 
	width: 100%;
  	border: 1px solid; 
  	border-collapse: collapse; 
  	color: #5d0505;
}

th, td {
	padding: .5em;
}

th {
	background: #a7fd8c;;
	color: orange;
}

caption {
	caption-side: bottom;
	padding-top: 2em;
	font-style: italic;
}