/* reset */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i, 
dl, dt, dd, ul, ol, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, 
section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing: border-box;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
  margin: 0;
}
blockquote, q { quotes: none }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
/* end reset */
.flex {
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  flex-flow: row wrap; 
  justify-content: flex-start;
  align-items: flex-start;
}
.flexwrap         { flex-wrap: wrap; }
.flexstart        { justify-content: flex-start; }
.flexend          { justify-content: flex-end; }
.flexspacebetween { justify-content: space-between; }
.flexspaceevenly  { justify-content: space-evently; }
.alignbaseline    { align-self: last baseline; }

header {
  margin: 0;
  background-color: grey;
  color: hsl(0, 0%, 100%);
}
header .h1, header .h2, header .h3, header .h4, header .h5, header .h6 {
  margin-top: 10px;
  color: hsl(0, 0%, 100%);
}
header h1 { 
  margin: 0.5ex 20px 0.5ex 20px;
  font-size: 30pt;
  color: hsl(0, 0%, 100%);
}
header h3 { 
  margin: 0 20px 20px 20px;
  color: hsl(0, 0%, 100%);
}
header .logo {
  display: flex;
}
header .logo-top {
  width: clamp(120px, 33.332%, 420px);
}
footer {
  align-items: baseline;
  padding: 4px 8px 0px 8px;
  background-color: grey;
}
footer > div { 
  width: 18em; 
  height: 3ex;
 }
footer p, footer a {
  font-family: Montserrat;
  font-size: 12pt;
  color: hsl(0, 0%, 100%);
}
footer a { 
  color: hsl(0, 0%, 100%); 
}
footer a:hover { 
  color: #2c1376 
}
footer a img {
  border-radius: 4px;
  height: 40px;
}
@font-face {
  font-family: 'MontserratLight';
  font-style: light;
  font-weight: 300;
  src: local('Montserrat'), url('../fonts/Montserrat-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat'), url('../fonts/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'MontserratItalic';
  font-style: italic;
  font-weight: 400;
  src: local('Montserrat'), url('../fonts/Montserrat-Italic.ttf') format('truetype');
}
@font-face {
  font-family: 'MontserratMedium';
  font-style: medium;
  font-weight: 500;
  src: local('Montserrat'), url('../fonts/Montserrat-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'MontserratMedium';
  font-style: semibold;
  font-weight: 600;
  src: local('Montserrat'), url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
}
html, body, main, header, footer { 
  width: 100%
  max-width: 100vw;
  overflow-x: hidden;
}
body {
  max-width: 940px;
  margin: auto;
  background-color: lightgrey;
  line-height: 130%;
}
div, p, a, input, label, header, aside, menu, body {
  font-family: Montserrat;
  color: hsl(0, 0%, 13%);
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6 .h6 {
  margin-top: 0.5em; 
  margin-bottom: 0.8ex;
  line-height: 100%;
  font-family: Montserrat;
  color: #2c1376;
}
h1, .h1 { font-size: 30pt }
h2, .h2 { font-size: 21pt }
h3, .h3 { font-size: 18pt }
h4, .h4 { font-size: 16pt }
h5, .h5 { font-size: 14pt }
h6, .h6 { font-size: 12pt }
p, .p { font-size: 14pt }
ul, ol {
  list-style: none;
  margin: 20px;
  font-size: 14pt;
  line-height: 130%;
}
ul.dots { list-style: initial }
ul li, ol li { margin-top: 10px;}
ol {
  list-style-type: decimal;
  white-space: nowrap;
}
a {
  text-decoration: none;
  color: #2c1376;
}
a:hover { color: #210f5b }
/* Buttons */
button, .button {
  border: 1px solid hsl(0, 0%, 13%);
  border-radius: 5px;
  box-shadow: none;
  cursor: pointer;
  position: relative;
  padding: 0.6ex 0.6em;
  margin: 16px 5px 5px 5px;
  font-family: Montserrat;
  font-size: 14pt;
  color: hsl(0, 0%, 13%);
  background-color: transparent;
}
button:hover, .button:hover {
  color: hsl(0, 0%, 100%);
}
button.footerbutton {
  margin-top: 5px;
  padding: 8px 8px 2px 8px;
  border-radius: 10px;
}
.maincategorie {
  font-family: Montserrat;
  font-size: 18pt;
  font-weight: 600;
  margin: 1px 1px 1px 5px;
}
.subcategorie {
  font-family: Montserrat;
  font-size: 12pt;
  font-weight: 400;
  margin: 1px 1px 1px 20px;
}
.blogdate {
  display: inline-block;
  position: relative;
  top: -7px;
  padding: 5px 10px;
  font-size: 14pt;
}
/* Images */
.image-top-article { width: 100%; padding-top: 5px; }
.image-top { width: 100%; padding: 0 0 6px 0; }
.image-top-left  { width: 100%; padding: 0 20px 10px 0; }
.image-top-right { width: 100%; padding: 0 0 10px 20px: }
.img50 { width: 50%; padding: 5px 0 6px 0; }
.img100 { width: 100%; padding: 5px 0 6px 0; }
.image-bottom { width: 100%; padding: 10px 0 0 0; }
.mauer { margin: auto; }

/* Gallery */
div.gallery {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
  width: 190px;
}
div.gallery img {
  width: 190px;
  height: 100%;
}
div.gallery.scalew img:active {
  transform: scale(1);
  position: fixed;
  width: 940px;
  max-width: 100vw;
  height: auto;
  margin: 0;
  top: 0;
  --leftm: calc( 50vw - 478px );
  left: var(--leftm);
}
div.gallery.scaleh img:active {
  transform: scale(1);
  position: fixed;
  width: auto;
  height: 100vh;
  margin: 0;
  top: 0;
  --leftm: calc( 50vw - 150px );
  left: var(--leftm);
}
div.gallery.scale img:hover {
  transform: scale(1.0);
  cursor: pointer;
}
div.gallery div.desc {
  padding: 1ex 0.4em;
  text-align: center;
  font-style: italic;
}
/* Columns */
.col { 
   column-gap: 2em;
   -moz-column-gap: 2em;
   -webkit-column-gap: 2em;
   column-rule: 1px dotted #210f5b; 
   -moz-column-rule: 1px dotted #210f5b; 
   -webkit-column-rule: 1px dotted #210f5b; 
}
.col-2 { 
   column-count: 2;
   -moz-column-count: 2;
   -webkit-column-count: 2;
}
.col-1 { 
   column-count: 1;
   -moz-column-count: 1;
   -webkit-column-count: 1;
}
.col p {
   margin: 0;
   padding: 0;
   font-size: 14pt; 
   line-height: 130%;
   text-align: justify; 
   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
   orphans: 3; 
   widows: 3;
}
section {
  width: 100%;
  background-color: lightgrey;
}
article {
  flex: 4 1 50%;
}
article.card, .cardcolumn {
  flex: 2 1 15%;
}
article {
  padding: 2% 2% 2% 0; 
  background-color: lightgrey;
  color: hsl(0, 0%, 13%);
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
article .headline {
  margin-top: 0.5ex; 
  margin-bottom: 0.8ex;
  line-height: 100%;
  font-family: Montserrat;
  color: #2c1376;
  font-size: 30pt;
  width: 100%;
}
article p {
  font-size: 14pt;
  line-height: 130%;
  text-align: justify;
  padding-top: 0.8ex;
}
.header-pages article p.text-marked {
  color: hsl(92, 100%, 26%);
}
.header-index article p.text-marked {
  color: hsl(0, 0%, 13%);
}
article .col {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-rule: 1px dotted #210f5b; 
  -moz-column-rule: 1px dotted #210f5b; 
  -webkit-column-rule: 1px dotted #210f5b; 
}
article .no-col {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}
article { 
}
article.card {
  margin: 3ex 0; 
  padding: 1ex 1em; 
  background-color: hsl(100, 100%, 95%);
  border-radius: 10px;
  border: solid 1pt #b1df92;
}
article.card p {
  font-size: 12pt;
  margin: 0 0 1ex 0;
  text-align: left;
}
article.card p a {
  font-size: 12pt; 
}
article.card .col {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}
.catlist {
  font-size: 12pt;
  font-weight: 400;
  font-family: OpenSans;
  width: 312px;
  padding: 5px;
}
.catlist .maincat {
  font-size: 16pt;
  font-weight: 600;
}
.catlist a, .catlist p {
  display: inline-flex;
  align-items: center;
  width: 312px;
}
.catlist img {
  width: 70px;
  padding: 3px 5px 3px 10px;
}
.videoframe { width:960px; height:540px; }
@media print {
  @page {
    size: auto;
    margin: 5%;
  }
  body {
    transform: scale(0.95);  
    margin: 0;
  }
  header {
    height: 60px;
    background-image: none;
    color: #2c1376;
    border: 1px blue;
  } 
  footer {
    display: none;
  }
}
@media screen and (max-width: 1260px) { 
article .col {
  column-count: 2;
  -moz-column-count: 2;
  -webkit-column-count: 2;
}
article.card .col {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}
article { padding: 2% 2% 2% 1%;}

div.gallery.scalew img:active {
    --leftm: 0;
  }
.videoframe { width:800px; height:450px; }
}
@media screen and (max-width: 840px) { 
  article.col {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
  article.card > .col {
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;
  }
  article {
    flex: 4 1 100%;
  }
  article.card {
    flex: 1 1 0%;
  }
.videoframe { width:480px; height:270px; }
}
@media screen and (max-width: 480px) { 
article .col {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}
article.card .col {
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}
  article {
    flex: 4 1 100%;
  }
  article.card {
    flex: 1 1 0%;
  }
.videoframe { width:240px; height:135px; }
}
/* utility */
* { box-sizing: border-box }
.right { float: right }
.left { float: left }
.fullwidth { width: 100% }
.clear { clear: both }
.no-pad { padding: 0 }
.pad-left { padding-left: 20px }
.space-bottom { margin-bottom: 6pt; }
.no-margin { margin: 0 }
.no-margin-left { margin-left: 0 }
.no-margin-right { margin-right: 0 }
.no-margin-top { margin-top: 0 }
.margin-top { margin-top: 10px; }
.no-margin-bottom { margin-bottom: 0 }
.no-margin-vertical {
  margin-top: 0;
  margin-bottom: 0;
}
.center { 
  -webkit-justify-content:center;
  -ms-flex-pack:center;
  justify-content: center;
  width: 100%;
}
.text-center { text-align:center }
.text-bold, b { 
  font-weight: 600;
  line-height: 18pt;
  font-size: 17pt;
}
.text-italic { font-style: italic }
.opaque { opacity: 0.5; }
.roundcorners { border-radius: 10px; }
.border-box { box-sizing: border-box }
.row:after {
  content: "";
  clear: both;
  display: block;
}
.rule {
  border-bottom: 1px solid black;
  width:50%;
  margin: auto;
}
.no-hyphen { hyphens: none }
.subtitle {
  font-style: italic;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext, .tooltip .tooltiptextL, .tooltip .tooltiptextR {
    visibility: hidden;
    
    top: -34px;
    background-color: #210f5b;
    color: hsl(70, 100%, 97%);
    text-align: center;
    font-size: 11pt;
    font-weight: bold;
    padding: 5px;
    border-radius: 3px;
    position: absolute;
    z-index: 1;
    white-space: nowrap;
}
.tooltip .tooltiptext, .tooltip .tooltiptextL {
    left: 0px;
}
.tooltip .tooltiptextR {
    right: 0px;
}
.tooltip:hover .tooltiptextL, .tooltip:hover .tooltiptextR {
    visibility: visible;
}