/* Version 12 */

@font-face {
  font-family: 'Gentium Regular';
  src: url("../fonts/Gentium-Regular.ttf");
}

@font-face {
  font-family: 'Gentium Italic';
  src: url("../fonts/Gentium-Italic.ttf");
}

html, body {
  height: 100%;
  background-color: #124c63;
}

body {
  margin: 0px;
  padding: 0px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font: 18px 'Gentium Italic';
  letter-spacing: 0.1rem;
  word-spacing: 0.05rem;
  line-height: 1.6;
  color: white;
}

h1, h2 {
  font-weight: normal;
  line-height: 1.4;
  margin: 1em 0em 0.4em 0em;
}

h1 {
  font-size: 1.4em;
}

h2 {
  font-size: 1.1em;
}

h3 {
  font-size: 1em;
}

p {
  font-size: 0.9em;
  margin: 0.3em 0em 0.7em 1em;
  hyphens: auto;
}

p.cite {
  padding: 2rem 1rem;
  margin: 1rem 0; 
  hyphens: none;
}

ul {
  margin: 0px;
  font-size: 0.9em;
}

.all {
  width: 100%;
  min-width: 800px;
  max-width: 1200px;
  min-height: 100%;
  background-color: #0084b5;
  background-image: url("../bilder/bg_page2.png");
  background-repeat: repeat-y;
  background-size: 100%;
  background-position: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.header {
  height: 2rem;
  width: 100%;
  background-color: #006084;
  background-image: url("../bilder/bg_border2.png");
  background-size: 100%;
  background-repeat: repeat-y;
  border-bottom: 2px solid #a2e5ff;
  flex: none;
}

.footer {
  height: 6rem;
  width: 100%;
  background-color: #006084;
  background-image: url("../bilder/bg_border2.png");
  background-size: 100%;
  background-repeat: repeat-y;
  border-top: 2px solid #a2e5ff;
  flex: none;
}

.side-bar {
  width: 26.1%;
  flex: none;
}

nav {
}

nav ul {
  width: 100%;
  list-style-type: none;
  padding: 0rem;
  margin: 2.5rem 0rem;
  text-align: right;
}

nav li {
  padding: 0.5rem 1rem;
}

nav li:hover, nav li:active, nav li.focus {
  background-color: #006084;
}

a {
  text-decoration: none;
  color: white;
}

nav a {
  font-family: 'Gentium Regular';
  font-size: 1.0rem;
}

.sub-page {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}

.article {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
}

.article-text {
  width: 75%;
  font-size: 1.5rem;
  margin-bottom: 3rem;
}

.top-img {
  width: 100%;
  margin: -5rem 0rem -2rem 0rem;
}

img {
  width: 100%;
}

img#sekretariat {
  width: 40%;
  margin: 1.5rem 2rem 0rem -1.5rem;
  border-bottom: 1px solid white;
  float: left;
}

img#logo { margin: 1rem 0; }

.logo {
  width: 63%;
  max-width: 35rem;
  margin-top: 3rem;
  padding-right: 5%;
  flex: none;
}

.hidden {
  display: none;
}

.no-hyphens { hyphens: none; }

.by { 
  font-size: 0.8em;
  display: block; 
  text-align-last: right; }

@media (max-device-width: 1024px) {
  body { 
    justify-content: flex-start; }
  .header { display: none; }
  .footer { 
    background-image: none; 
    height: 5rem; }
  .sub-page { flex-direction: column; }
  .all { 
    min-width: initial;
    width: 100%;
    background-image: none; }
  .logo { 
    width: 70%;
    margin: 2rem 0rem 0rem 0rem;
    padding: 0rem; }
  .side-bar { 
    width: 100%;
    background-color: #006084; }
  .nav-bar {
    height: 3.5rem;
    overflow: hidden;
    border-bottom: 2px solid white; }
  .nav-bar:hover { height: auto; }
  .nav-bar:active { height: auto; }
  .top-img { margin: 0rem; }
  nav { 
    text-align: right; 
    color: white; }
  nav ul { 
    text-align: center;
    margin-top: 0rem; }
  nav::before {
    font-size: 2.5rem;
    content: "\2261";
    margin: 0rem 1rem; }
  nav a { font-size: 1.3rem; }
  nav li { padding: 1rem; }

  h1 { font-size: 1.5em; }
  h2 { font-size: 1.2em; }
  p { 
    font-size: 1.1em; 
    margin-left: 1em; }
  ul { font-size: 1.1em }
  img#sekretariat { 
    float: left; 
    width: 50%;
    margin-bottom: 3rem;
    }
}

@media (max-device-width: 767px) {
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.2rem; }
  p { 
    font-size: 1.0rem; 
    margin-left: 1em; }
  ul { font-size: 1.0rem }
  nav a { font-size: 1.0rem; }
  nav li { padding: 0.5rem; }
  img#sekretariat { 
    float: none; 
    width: 70%;
    margin: 1rem 0rem 0rem -1rem;}

}