/* ############################################################
##
## CSS zu "Ontologenkreis Darmstadt"
##
## 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 ######## */

html {
  scroll-padding-top: 4em; /* Höhe des Sticky-Menüs */
}

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

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

header, 
footer {
  padding: 0.5em 1em 0.5em 0.5em;  
}

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

header .icon {
  z-index: 1000; /* Im Vordergrund */  
  float: left;
  padding: -1em 0 0 -1em;
  height: 5em;
}
footer {

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

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

nav {
  position: sticky;
  top: 0; /* Definiert den Abstand vom oberen Rand */
  z-index: 1000; /* Im Vordergrund */  
  width: 100%;
  float: left;
  padding: 0;
  margin: 0 0 0.5em 0;
  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: 0;
  width: 65%;
  float: left;
  margin-bottom: 1em;
}

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

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

@media screen and (max-width: 50em) {
  main {
    width: 100%;
    float: none;
  }

  aside {
    float: none;
    width: 100%;
  }
}

/* ######## Boxen ################################################## */
header figure {
	margin: 0;
	padding: 0;
	float: left;
	height: 7em;
}

.icon img {
	height: 100%;
}

section {
  border-radius: 0.7em;
  padding: 0.7em;
  margin-bottom: 1em;
  scroll-margin-top: 50px;
}

main > section {
  margin: 0.5em 1em 1em 1em;
}

aside section {
  margin: 0.5em 1em 1em 0;
}

#map {
  clear: both;
  width: 100%;
  padding: 0;
  margin-top: 1em;
}

.ort {
  margin: 0;
}

.vortrag {
  margin: 0.5em 0 1em 1em;
}

.button {
  display: inline-block;
  padding: 0.5em 1em;              /* oben/unten 0.5em, rechts/links 1em */
  border-radius: 0.5em;            /* abgerundete Ecken */
  text-decoration: none;           /* kein Unterstrich */
  background-clip: padding-box;    /* sauberer Innenabstand */
  border: 2px solid white;         /* Weißer Rahmen für Kontrast */
  font-weight: bold;
  font-size: 1em;
}

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


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

p {
  -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";
}

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

.titel,
.untertitel,
nav,
h1, h2, h3, h4 {
  font-family: "Arial", "Verdana", "Helvetica", Sans-serif;
}

/* -------- header -------- */
.titel,
.untertitel {
  text-align: right;
  margin: 0;
}

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

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

/* -------- Überschriften -------- */
h1, h2, h3 {
  font-weight: bold;
  font-style: normal;  
}

h1 {
  font-size:140%;
  margin: 0 0 0.5em 0.7em;
}

h2 {
  font-size:120%;
  margin: 1.7em 0 0.7em 0.7em;
}

section h2 {
  margin: 0 0 0.7em 0;
}

h3 {
  font-size:115%;
  margin: 0;
}

p {
  font-size: 115.1%; /* Wegen eines Bugs in einem Browser soll es keine 100% sein */  
  margin: 0 0 0.7em 0;
  line-height: 1.3;
  
}
/* -------- Events -------- */

time,
.termin {
  font-style: normal;
  text-align: left;
  font-weight: bold;
  margin-bottom: 0;
}

.referent,
.institut
{
  font-style: italic;
}

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

.referent,
.institut
 {
  font-size: 100.1%;
  font-weight: normal;
  font-style: italic;
  margin-top: 0.2em;
  margin-bottom: 0;
}

.referent a {
  text-decoration: none;
  list-style-type: none;
}

#archive time,
#archive .termin {
  font-weight: normal;
  text-align: right;
  font-weight: normal;
}

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

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

/* -------- Hintergründe -------- */
header,
nav,
footer,
header div {
  background-color: #caba9b;
}

html {
  background-color: #c0c0c0;
}

body,
div,
nav li:hover,
nav li:focus,
nav li:active,
nav .self {
  background-color: #ebe5d9;
}

.event,
.paragraph,
.vortrag {
  background-color: #ffffff;
  /* Weiß */
}

p.referent a:hover,
p.referent a:focus {
  background-color: #c0c0c0;
}

.button {
  background-color: #7d5a4f;
}

.button:hover {
  filter: brightness(90%);
}

section {
  box-shadow: 0.1em 0.2em 0.25em #4f4f4f;
}

/* -------- Schrift -------- */
header,
h1,
h2,
h3,
h3 a,
time,
.referent a,
.termin,
nav a span,
nav li,
hr {
  color: #4f4f4f;
}

nav li {
  border-color: #4f4f4f;
}

section {
  border: 1px solid #4f4f4f;
}

footer {
  border-top: 0.2em solid #4f4f4f;
}

.button {
  color: white;
}

/* ======== Externe Veranstaltungen ======== */

#freunde .paragraph {
  color: #808080;
}

#freunde h1,
#freunde h2,
#freunde h3,
#freunde p,
#freunde time {
  color: #caba9b;
}

#freunde section {
  box-shadow: 0.1em 0.2em 0.25em #caba9b;
}


#freunde a:link {
  /* a normal, unvisited link, 70% Weiß, zusätzlich */
  color: #ccccff;
}

#freunde a:visited {
  /* a link the user has visited, 70% Weiß, zusätzlich */
  color: #cc99ff;
}

#freunde a:hover {
  color: #0000ff;
}