/* https://www.cssfontstack.com/Web-Fonts */
@import url(https://fonts.googleapis.com/css?family=Anton);
@import url(https://fonts.googleapis.com/css?family=Baumans);
@import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Playball);

footer {
	font-family: Playball;
}
@charset "utf-8";

html {
  background: #e6ffff;
  color: black;	
  font-family: AvenirWeb,Franklin Gothic Medium
}

body {
  margin: 10px auto;
  max-width: 65em;
}

h1, main, aside, main svg {
  padding: 1em;
  margin: 1em;
}

header {
  border-color: transparent;
}

#logo {
  font-size: 1.5em;
  line-height: 100%;
  display: block;
  background:#8274fb;
  color: #8274fb;
  text-decoration: none;
  border-radius: 50%;
  width: 2.5em;
  height: 1em;
  padding: 1em 0.25em;
  margin: 0 0 1em;
}

/* blauer Balken für Überschrift, News und Footer */
h1, #news, footer {
  margin: 1em 0 0;
  padding: 0.5em 2em;
  background: MidnightBlue;
  color: LightSlateGrey;
  border-radius: 0 1em 0 1em;
}



#hallo {float: left;}

article img {
  width: 30%;
  float: right;
  margin-left: 0.5em;
  border: 4px soild black;

 
 border-style:  ridge;
  border-color: Aqua;
  
  border-width: 10px;
}

figure {
  display: inline-block;
  width: 30%;
  margin: 0.2em;
}
figure img {
  width: 100%;
}
figure figcaption {
  font-style: italic;
}

/* Buttons für Style-Switcher */

#navigation  li {
  list-style-type: none;
  display:inline-block;
}.

#navigation button {
 background: transparent;
 border: 3px solid transparent;
 color: Silver;
 
}

#navigation button:hover, #navigation button:focus{
 background: Navy;
 border: 3px solid Silver;
 color: blue;
}

nav a {
  background: MidnightBlue;
  color: Silver;
  border: 2px solid transprent;
}
nav a:hover, nav a:focus {
  background-color: LightSlateGrey;
  color: white;
  border: 3px  ridge darkblue;
}

nav a[aria-current=page] {
	border: 2px solid;
}



table, th, td { 
  border: 1px solid; 
  border-collapse: collapse; 
}

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

nav, nav ul, nav li {
  margin: 0;
  padding: 0;
  border: none;
}

nav li {
  list-style-type: none;
  margin: 1.3em 0;
}
nav a {
  display: inline-block;
  border-color: transparent;	  
  width: 95%;
  margin: 0;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  border-style:  ridge;
  
}



#news {
  order: 3;
  flex: 1 1 100%;
}



}


footer {
  margin: 1em 0;
  padding: 0 1em;  
}

footer p:last-child {
  text-align: right;
}

/* Smart Phones und Tablets mit mittlerer Auflösung */

header {
  margin: 1em 0;
  padding: 1em 0;
}

h1 {
  height: 1em;
  margin: 5em 0 0;
  padding: 0.5em 2em;
  background: skyblue;
  color: white;
}


nav ul {
  width: 80%;
  margin: -10em 0 0 20%;
}
nav li {
  margin: 0 1em;
  width: 10em;
}
article {
  order: 1;
}
}

/* Terminkalender */

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


th, td {
	padding: .5em;
}



.ol-custom {
   list-style: none;
   counter-reset: kb-count-ol;
}


::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 15px;
}


::-webkit-scrollbar-thumb {
  background: DodgerBlue;
  border-radius: 20px;
}