/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url(./Noto_Sans/NotoSans-Italic.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 700;
  src: url(./Noto_Sans/NotoSans-BoldItalic.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(./Noto_Sans/NotoSans-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url(./Noto_Sans/NotoSans-Bold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: url(./Noto_Serif/NotoSerif-Italic.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 700;
  src: url(./Noto_Serif/NotoSerif-Bold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: url(./Noto_Serif/NotoSerif-Regular.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: url(./Noto_Serif/NotoSerif-Bold.ttf) format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; padding: 0; margin: 0; border: 0; }

body { font-family: 'Noto Serif', serif; font-weight: 400; padding: 4em 2em; max-width: 900px; margin: auto; }
body:after { content: ""; display: block; clear: both; height: 0; }

h1,h2,h3,h4,h5 { font-weight: 400; }
h1 { font-size: 40px; }
h2 { font-size: 22px; color: #c41215; padding-bottom: 1em; }
h3 { font-size: 22px; padding-bottom: 1.5em; }
p, ul, ol { font-size: 16px; line-height: 1.4em; padding-bottom: 1.5em; -ms-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; list-style: none; }
li { padding-left: 1em; }
li:before { content: "• "; display: inline-block; width: 1em; margin-left: -1em; font-style: 20px; color: #c41215; }

a { color: #c41215; text-decoration: none; }
a:hover { color: #2c2f7c; text-decoration: none; }

.red  { color: #c41215; }
.blue { color: #2c2f7c; }
.punkt {color: #c41215; }

#fronti { border-radius: 0.2em; height: 10em; width: auto; margin-bottom: 2em; margin-top: 1em;  }

article, aside { padding: 0 1em; }

article { float: left; width: 70%; padding-bottom: 3em;  }
header { height: 16em; background: 0em 0em  no-repeat url(logo.svg); background-size:5.5em auto; }
header h1 { font-size: 45px; padding-top: 2.5em; line-height: 1.2;}
header h1 span { display: block; }
header .logo {}
section { padding-bottom: 1em; }

aside { font-family: 'Noto Sans', serif; float: right; width: 30%; padding-bottom: 3em; padding-top: 2.5em;  } 
aside * { color: #2c2f7c; } 

article::after, aside::after { content:""; display: block; clear: both; } 

@media only screen and ( max-width: 700px ) {
  article { width: 100%; display: block; clear: both; }
  header h1 { font-size: 35px; }
  header { background-size: 4em;}
  aside { width: 100%;  display: block; clear: both; } 
}