/* web fonts */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Noto Sans'), local('NotoSans'), url('/fonts/noto_sans_regular.woff') format('woff');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Noto Sans Bold'), local('NotoSans-Bold'), url('/fonts/noto_sans_bold.woff') format('woff');
}

/* icon font */
@font-face {
  font-family: 'icons';
  font-weight: normal;
  font-style: normal;
  src: url('/fonts/icons.woff?cyjuc6') format('woff');
}

/* basics */

body {
  min-width: 20em;
  background-color: #ffffff;
  font-family: 'Noto Sans', sans-serif;
  font-style: normal;
  font-weight: normal;
}

div.imgsvg {
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

div.imgsvg > img.svg {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

header, nav, main, article, section, footer, picture {
  display: block;
  overflow: hidden;
}

div.main-column {
  max-width: 60em;
  margin: 0 auto;
  position: relative;
}
/* main-column in mobile format */
@media (max-width: 45em) {
  margin: 0em;
}

/* general link style */
a {
  color: #fa7300;
  text-decoration: none;
  /* TODO hover effect */
  transition: color 0.4s ease/*, text-shadow 0.4s ease*/;
}

a:visited {
  /* TODO Farbe anpassen */
  color: #c03900;
  text-decoration: none;
  /* FIXME hover effect of visited links is defective */
}

a:hover {
  /* TODO hover effect */
  color: #0000ff;
  /*text-shadow: 0 0 .05em #fa7300;*/
}

/* background styles */

header {
  background: #fa7300;
  background: radial-gradient(circle farthest-corner at 0% 100%, #fa7300 40%, #fa9b4b 40.1%, #fa9b4b 60%, #fab77e 60.1%);
}

.bgclear {
  /* TODO choose color */
  background-color: #ffffff;
}

.bgcalm {
  /* TODO choose color(s) */
  background: #e5e5e5;
  background: radial-gradient(circle farthest-corner at 100% 100%, #e5e5e5 40%, #f0f0f0 40.1%, #f0f0f0 60%, #fafafa 60.1%);
}

.bgexcite {
  /* TODO choose color(s) - must be clearly distinguishable from link colors */
  background: #fa7300;
  background: radial-gradient(circle farthest-corner at 0% 100%, #fa7300 40%, #fa9b4b 40.1%, #fa9b4b 60%, #fab77e 60.1%);
}

footer {
  /* TODO choose background style */
  background: #e5e5e5;
  background: radial-gradient(circle farthest-corner at 100% 100%, #e5e5e5 40%, #f0f0f0 40.1%, #f0f0f0 60%, #fafafa 60.1%);
}

/* header: logo and text */

header {
  position: relative;
  width: 100%;
}

div.header-container {
  position: relative;
  left: 0;
  top: 0;
  height: 4.5em;
  padding: 0em;
  margin: 0em;
}

div.header-container h1 {
  font-weight: bold;
  font-size: 1.5em;
  position: absolute;
  margin: 0.2em 0em 0em 1em;
  color: #000000;
}

div.header-container h2 {
  font-weight: normal;
  font-size: 1em;
  position: absolute;
  margin: 2.1em 0em 0em 1.5em;
  color: #000000;
}

/* header in mobile format */
@media (max-width: 45em) {
  header {
    min-width: 20em;
  }

  div.header-container {
    height: 4em;
  }

  div.header-container h1 {
    margin: 0.6em 0em 0em 1em;
  }

  div.header-container h2 {
    display: none;
  }

  div.header-container {
    min-width: 20em;
  }
}

/* main */

main {
  min-width: 20em;
}

/* picture fade effect */

img {
  display: inline-block;
  width: 100%;
}

picture.fade-left::before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* TODO adjust size of fade effect */
  width: 4em;
}

picture.fade-right::after {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  /* TODO adjust size of fade effect */
  width: 4em;
}

picture.fade-color-white::before {
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

picture.fade-color-white::after {
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}

/* common definitions for section and article */
section, article {
  widows: 2;
  orphans: 2;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin: 0em;
  padding: 0em;
}

section h1, article h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 0em 0em 0.5em 0em;
  /* TODO Schriftgröße, Abstände */
}

@media (max-width: 45em) {
  section h1, article h1 {
    font-size: 1.5em;
  }
}

section h2, article h2 {
  font-weight: bold;
  font-size: 1.5em;
  margin: 0em 0em 0.5em 0em;
  /* TODO Schriftgröße, Abstände */
}

section h3, article h3 {
  font-weight: bold;
  font-size: 1em;
  margin: 0em;
  /* TODO Schriftgröße, Abstände */
}
/* TODO auch für andere verwendete Überschriften definieren */

section p, article p {
  font-size: 1em;
  font-style: normal;
  margin: 0em;
  margin-bottom: .5em;
  padding: 0em;
}

/* section */
/* TODO create rules for heading, picture and text */
section p.lead-text {
  font-size: 1.5em;
}

section .box-left, section .box-right {
  position: relative;
  z-index: 100;
  max-width: 50%;
  min-width: 40%;
  box-sizing: border-box;
}

section .box-left {
  float: left;
}

section .box-right {
  float: right;
}

section .box-text {
  box-sizing: border-box;
  padding: .5em;
}

@media (max-width: 45em) {
  /* TODO change box position and size in mobile format */
  section .box-left, section .box-right {
    max-width: 100%;
  }

  section .box-right {
    float: left;
    clear: all;
  }
}

/* article */
/* TODO create rules for heading, picture and text */
article {
  padding: .5em;
}

article h2 {
  margin: 1em 0em 0.5em 0em;
  /* TODO Schriftgröße, Abstände */
}
/* TODO auch für andere verwendete Überschriften definieren (Gemeinsamkeiten oben) */

article p {
  margin: 0em 0em 1em 0em;
}

/* content specific styles */

section#introduction picture {
  margin-bottom: -0.5em; /* FIXME picture tag is a litte higher than contained image */
}

section#introduction div.box-right {
  /* TODO style it */
}

section#introduction picture {
  /* TODO style it */
}

/* news */
section#news {
  padding: 1em;
}

section#news ul {
  margin: 0em;
  padding: 0em;
}

section#news li {
  list-style-type: none;
  margin: 0em;
  display: block;
  width: 33%;
  box-sizing: border-box;
  padding: .5em;
  float: left;
}

@media (min-width: 60.001em) {
  section#news li:nth-child(3n+4) {
    clear: left;
  }
}

@media (max-width: 60em) {
  section#news li {
    width: 50%;
  }

  section#news li:nth-child(2n+3) {
    clear: left;
  }
}

@media (max-width: 40em) {
  section#news li {
    width: 100%;
    clear: left;
  }
}

section#news li > a {
  color: #000000;
  text-decoration: none;
  display: block;
  box-sizing: border-box;
  border: 0.1em solid #fa7300;
  border-radius: 1em;
  padding: .5em;
  /* TODO hover effect */
  transition: border-color 0.4s ease;
}

section#news li > a:visited {
  color: #7f7f7f;
  text-decoration: none;
}

section#news li > a span.more {
  color: #fa7300;
  /* hover effect */
  transition: color 0.4s ease;
}

section#news li > a:visited span.more {
  color: #7f7f7f;
}

section#news li > a:visited {
  color: #7f7f7f;
  border-color: #7f7f7f;
  text-decoration: none;
}

section#news li > a:hover {
  /* TODO hover effect */
   border-color: #0000ff;
  /* FIXME hover effect of visited links is defective */
}

section#news li > a:hover span.more {
  /* hover effect */
  color: #0000ff;
  /* FIXME hover effect of visited links is defective */
}

/* footer */

section#info, section#legalnotice {
  padding: .5em;
}

/* wide screen */
@media (min-width: 30em) {
  section#info div.outline {
    float: left;
    box-sizing: border-box;
    width: 50%;
  }

  section#legalnotice {
    clear: both;
  }
}

section#info div.outline > ul {
  margin: 0em 0em 1em 0em;
  padding: 0em;
}

section#info div.outline > ul > li {
  list-style-type: none;
}

p#copyright {
  font-size: 0.8em;
  margin-top: 1.25em;
}

/* button to top */

a#button-top {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  position: fixed;
  right: 0.5em;
  bottom: 0.5em;
  z-index: 997;
  background-color: #ffffff;
  border: 0.25em solid #a0a0a0;
  border-radius: 0.5em;
  color: #a0a0a0;
  text-decoration: none;
  opacity: 0.5;
}

a#button-top:visited {
  color: #a0a0a0;
  text-decoration: none;
}

/* icon font */
.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  font-size: 2em;
  margin: 0.1em 0.1em;

  /* better font rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-small {
  font-size: 1em;
}

/* icons */
.icon-mail:before {
  content: "\e945";
}
.icon-phone:before {
  content: "\e958";
}
.icon-encryption:before {
  content: "\e98f";
}
.icon-top:before {
  content: "\ea3a";
}