/* ############################################################
##
## CSS zu "Homepage Thomas Zeh"
##
## Es gibt verschiedene Möglichkeiten, eine CSS-Datei zu gliedern.
## Diese ist gegliedert nach:
## - geometrische Aufteilung der Seite
## - Text-Formatierung
## - Farbgestaltung
##
############################################################### */


/* ######## Geometrische Aufteilung der Seite ######## */

body {
  direction: ltr;
  max-width: 65em;
  min-width: 35em;
  margin-left:auto;
  margin-right:auto;
  border-radius: 1em;
}

/* -------- Kopf -------- */

header, 
footer {
  padding: 1em;  
}

header {
  border-radius: 1em 1em 0 0;
}

header img {
	height: 5em;
}

footer {
  border-radius: 0 0 1em 1em;
}

/* -------- Menü-Leiste -------- */

nav {
  width: 100%;
  float: left;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
  font-weight: bold;
  line-height: normal;
}

nav ul {
  padding: 0;
  list-style-type: none;
}

nav li {
  float: left;
  padding: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
  margin: 0 0.2em;
  border-style: solid solid none;
  border-width: 1px;
}

nav a
{
  text-decoration: none;
  margin: 0 1px;
}


/* -------- Hauptspalten und Nebenspalten -------- */


/* Die Spalten werden alternativ verwendet. 
   Unterschiede gibt es in Bezug auf die darin enthaltenen Container.
   Z.B. wird das Archiv in der Hauptspalte dargestellt. Allerdings werden darin 
   enthaltene Elemente teilweise anders formatiert, als in anderen 
   Hauptspalten.
   Die Hinweise auf externe Veranstaltungen erfolgen in der rechten 
   Seitenspalte, werden aber blasser angezeigt, um sie von eigenen 
   Veranstaltungen zu unterscheiden.
   Statt die Anzahl der dort verwendeten Format-Definitionen zu erhöhen,
   wird dann Bezug auf den umgebenden Container genommen.
   Dadurch wird es auch möglich, dass ein Block, der eine Veranstaltung 
   beschreibt, ohne Veränderung der Tags von einer Ankündigung ins Archiv 
   geschoben werden kann. Bei der Ankündigung sind Datum und 
   Veranstaltungs-Ort wichtig, im Archiv sind sie weniger wichtig und 
   können deshalb so weniger prominent dargestellt werden.
*/

main {
  position: static;
  padding: 1em 0 0;
  width: 57.8%;
  float: left;
  margin-bottom: 1em;
}

aside {
  padding: 1em 0 0;
  float: right;
  width: 42%;
  margin-bottom: 1em;
}

section {
  margin: 0.5em;
  border-radius: 0.7em;
  border: 2px solid;
  padding: 0.5em;
}

footer {
  border-top: 0.2em solid;
  margin-top: 1em;
  clear: both;  
}

.links img {   /* Container links für Icon */
  float: left;
}

p.clear {      /* Unterer Rand des Headers*/
  height: 0;
  margin: 0;
  clear: both;
}

figure img {
  border-radius: 0.7em;
  max-width: 100%;
}

/* ######## Text-Formatierung ###################################### */


/* -------- Silbentrennung -------- */

p {
  margin-top: 0.2em; 
  -webkit-hyphens: auto;  /* für Chrome, Safari  */
  -ms-hyphens: auto;      /* für Internet-Explorer */
  -moz-hyphens: auto;     /* für Firefox (Gecko) */
  hyphens: auto;
  word-break: normal;
  
  quotes: "\201E" "\201D";
}

body {
  font-family: "Times New Roman", Times, FreeSerif, serif;
}

/* -------- header -------- */
header p.titel,
header p.untertitel {
  margin: 0;
}

header p.titel {
  font-weight: bold;
  font-size:200%;
}

header p.untertitel {
  font-style: italic;
  font-size:150%;
} 

/* -------- Überschriften -------- */
h1, h2 {
  font-weight: bold;
  font-style: normal;  
  margin: 0;
  margin-top: 0.5em;
}

h1 {
  font-size:140%;
  padding-top: 1em;
  margin-left: 0.5em;
}

h2 {
  font-size:120%;
}

main > h2,
aside > h2 {
  margin-top: 1em;
  margin-left: 0.5em;
}

p {
  font-size: 100.1%; /* Wegen eines Bugs in einem Browser soll es keine 100% sein */  
  margin: 0.2em 0;
}

/* -------- Books */
.books .autor {
  font-style: italic;	
}

.books .titel {
  font-weight: bold;
}

/* -------- Events -------- */

h3 {
  font-size: 105%;
  margin-bottom: 0.2em;
}

hr {
  width:50%;
  text-align:center;
}

/* ######## Farb-Schema ######## */


/* Grundfarbe ist: #0033cc, ein satter Blau-Ton.
Von diesem Grundton leiten sich die anderen Farben ab, 
indem er entweder mit Weiß (Hintergrund) oder 
Schwarz (Schrift) abgemischt wird. 
Siehe hierzu: https://www.w3schools.com/colors/colors_picker.asp?color=0033cc
 */

/* -------- Hintergründe -------- */
header,
footer {
  background: linear-gradient(to bottom, #e6ecff, #e6ecff, #e6ecff, #e6ecff, #b3c6ff)
  /* 85% Weiß*/
}

nav {
  background-color: #b3c6ff;
  /* 85% Weiß*/
}

html
 {
  background-color: #808080;
  /* hellgrau*/
}

body,
nav li:focus,
nav li:hover,
nav li:active,
nav .self {
  background-color: #e6ecff;
  /* 95% Weiß*/
}

section {
  background-color: #ffffff;
  /* Weiß */
}

/* -------- Schrift -------- */
header,
h1,
h2,
h3,
h3 a,
nav a span,
nav li.aktiv span,
hr {
  color: #001a66;
  /* 80% Schwarz */
}

body > h1 {
  text-shadow: 0 0 0.05em #001a66, 0 0 0.5em #001a66, 0 0 1em #001a66;
  color: #ffffff;
}

/* -------- Rahmen -------- */
nav li,
footer {
  border-color: #001a66;
}

section {
  border-color: #b3c6ff;
  box-shadow: 0.1em 0.2em 0.25em #001a66;
}

aside img {
/*  border-color: #b3c6ff;*/
  box-shadow: 0.1em 0.2em 0.25em #001a66;
}