/*
https://www.w3schools.com/css/css_units.asp
https://www.w3schools.com/css/css_padding.asp
https://www.w3schools.com/css/css_margin.asp
https://www.w3schools.com/css/css_selectors.asp
https://www.w3schools.com/css/css_attribute_selectors.asp
https://www.w3schools.com/css/css_combinators.asp
*/


/*** Universal setting *********************************/
*,
*:after,
*:before{
  margin:     0;
  padding:    0;
  box-sizing: border-box;
}

/*** Variable definitions and values *****************/
:root {
  /* --browser-padding:        2vh 0vw 2vh 0vw ; */
  --padding-top:            2vh;
  --padding-right:          4vw;
  --padding-bottom:         2vh;
  --padding-left:           4vw;

  --content-width:          46rem;

  --color-text-dark:        rgb(53, 53, 68);
  --color-text-grey2:        rgb(2, 108, 150);
  --color-black:            #000;
  --color-white:            #fff;
  --color-grey:             #777;
  --color-light:            #efefef;
  --color-text:             var(--color-black);
  --color-text-grey:        var(--color-grey);
  --color-background:       var(--color-white);
  --color-code-light-grey:  #cacbd1;
  --color-code-comment:     #a9aaad;
  --color-code-white:       #c5c9c6;
  --color-code-red:         #dc6666;
  --color-code-orange:      #de935f;
  --color-code-yellow:      #f0c674;
  --color-code-green:       #a7bd68;
  --color-code-aqua:        #8abeb7;
  --color-code-blue:        #7e9abf;
  --color-code-purple:      #b294bb;
}

/*** Webfonts *****************************************/
@font-face {
  font-family: 'JakartaSans';
  src: url('../fonts/JakartaSans/PlusJakartaSans[wght].ttf') format(truetype) tech(variations); /* Modern Browsers */
  font-weight: 200 800;
}


/*++ General settings *********************************/
html {
}

body {
  padding-top:      0;
  padding-bottom:   0;
  padding-left:     0;
  padding-right:    0;
  margin:           0 auto;
  font-family:      "JakartaSans", "ArtegraSoft",  "IBM Plex Sans",  Noto Sans, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: var(--color-background);
  color:            var(--color-text-black);
}

/*** Image related settings ******************************/

img {
  max-width:100%;
}

img.clickzoom:hover:not(:active) {
  box-sizing: border-box;
  border:         1px solid;
}

img.clickzoom:active {
  position:       fixed;
  bottom:         0;
  top:            0;
  left:           0;
  right:          0;
  max-height:     88vh;
  max-width:      88vw;
  z-index:        99999;
  transition:     .2s;
  margin:         auto;
  box-shadow:     0 0 0 100vmax rgba(0,0,0,.3);
  pointer-events: none;
  /*
  https://stackoverflow.com/questions/45143916/dim-entire-screen-except-a-fixed-area
  */
}

figure.figa {
  width: 100%
}
figure.fig025 {
  width: 24.6%
}
figure.fig033 {
  width: 33.2%
}
figure.fig050 {
  width: 49.5%
}
figure.fig067 {
  width: 66.2%
}
figure.fig075 {
  width: 74.6%
}
figure.fig100 {
  width: 100%
}

/*** Text related settings ******************************/
ul {
  list-style: disc inside ;
}

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

/*
a:hover {
  background: #000;
  color: #fff;
}
*/

strong, b {
  font-weight: 600;
}

/*
p:has(a.download) {
  color:     blue;
  font-size: 0.9rem;
}
*/

h1 {
  color:   var(--color-text-grey);
  font-size: 1.6rem;
  font-weight: 300;
  margin-top: 1rem;
  margin-bottom: 1rem;
  text-align: left;
}

h2 {
  color:   var(--color-text-grey);
  font-size: 1.3rem;
  font-weight: 300;
  margin-top: 1rem;
  margin-bottom: 0.2rem;
  text-align: left;
}

h3 {
  color:         var(--color-text-grey);
  font-size:     1.1rem;
  font-weight:   300;
  margin-top:    1rem;
  margin-bottom: 0.2rem;
  text-align:    left;
}

h4 {
  color:         var(--color-text-grey);
  font-size:     1.0rem;
  font-weight:   300;
  margin-top:    0rem;
  margin-bottom: 0rem;
  text-align:    left;
}

section.text figure {
  padding-right: 1.5rem;
}

section.text h1,
section.text h2,
section.text h3,
section.text ul,
section.text p {
  clear: left;
}

.text {
  line-height: 1.5rem;
}

.text > *:first-child {
  margin-top: 0;
}

.text a {
  position: relative;
  white-space: nowrap;
  /*font-weight: 500;*/
  z-index: 1;
  display: inline-block;
  /*border-bottom: 1px solid #0000aa;*/
  text-decoration-line: underline;
  text-underline-offset: 12%;
  text-decoration-thickness: 7%;
  text-decoration-color: #4477cc;
}

.text figcaption a {
  text-decoration: none;
}


/*
 section.text {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-end;
  }
*/

.text figure {
  display:        inline-block;
  padding-top:    0.0rem;
  padding-bottom: 0.0rem;
  vertical-align: baseline;
}

.text figure {
  padding-top:    0.0rem;
  padding-bottom: 0.0rem;
}

/*** Tables **********************************************/

td {
  padding-right:   1rem;
}

table {
  margin-top:      0.2rem;
  margin-bottom:   1.0rem;
  font-size:       0.8rem;
  border-collapse: collapse;
}

/*** Download Links ***************************************/

a.download {
  font-size:       0.8rem;
}


/*** Site header and navigation ***************************/

header.site {
  background-color: var(--color-background);
  max-width:        var(--content-width);
  padding-top:      var(--padding-top);
  padding-left:     var(--padding-left);
  padding-right:    var(--padding-right);
  margin:           auto;
  padding-bottom:   1.0rem;
}

nav > ul.pages {
  display:          inline-block;
}

nav > ul.languages {
  display:          inline-block;
}

nav > ul > li {
  display:          inline-block;
}

nav > ol.breadcrumbs {
  display:          block;
}


nav > ul.pages a,
nav > ul.languages a {
  position:         relative;
  text-transform:   uppercase;
  font-size:        .8rem;
  letter-spacing:   .1em;
  padding:          0rem 0rem;
  font-weight:      700;
  line-height:      2em;
  margin-right:     0.8rem;
}

/*
nav.menu a {
  position:         relative;
  text-transform:   uppercase;
  font-size:        .8rem;
  letter-spacing:   .1em;
  padding:          0rem 0rem;
  font-weight:      700;
  line-height:      2em;
  margin-right:     0.8rem;
}
*/

nav a[aria-current] {
  border-bottom:  2px solid var(--color-text-grey2);
}

nav a.selected-language  {
  border-bottom:  2px solid var(--color-text-grey2);
}

nav a:hover {
 border-bottom:   2px solid #dddddd;
}
/*
nav.menu a[aria-current] {
  border-bottom:  2px solid var(--color-text-grey2);
}

nav.menu a.selected-language  {
  border-bottom:  2px solid var(--color-text-grey2);
}

nav.menu a:hover {
 border-bottom:   2px solid #dddddd;
}
*/

/*** Site header and navigation, breadcrumbs **********/

nav ol.breadcrumbs li {
  display:        inline-block;
  color:          currentColor;
  text-transform: lowercase;
}

nav ol.breadcrumbs a {
  color:          grey;
  font-style:     italic;
  font-size:      .71rem;
}

nav ol.breadcrumbs li:not(:last-of-type)::after {
  content:        '>';
  color:          currentColor;
  font-size:      .71rem;
}

nav .breadcrumbs a:hover {
 border-bottom:   1px solid #dddddd;
}

/*** Site footer *************************************/

footer {
  background-color:var(--color-background);
  border-top: 1px solid white);
}

div.footer {
  max-width:      var(--content-width);
  margin:         auto;
  padding-left:   var(--padding-left);
  padding-right:  var(--padding-right);
  padding-top:    .5rem;
  padding-bottom: var(--padding-bottom);

  text-align: left;
  line-height: 1.5em;
 }

.footer a {
  display: inline-block;
  font-size: .8rem;
}

.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid #000;
  width: 7.5rem;
}
.social a:hover {
  background: #000;
  color: #fff;
}

/*** Page header ******************************************/

/*
header.page h1 {
  max-width:      var(--content-width);
  padding-top:    0.2rem;
  padding-left:   var(--padding-left);
  padding-right:  var(--padding-right);
  padding-bottom: 1rem;
  margin:         auto;
}
*/
/*** Articles page **************************************/

section.gallery ul {
  list-style:            none ;
  display:               grid;
  grid-template-columns: 100%;
  row-gap:               1rem;
  column-gap:            0%;
}

section.gallery ul.cols-1 {
  grid-template-columns: 100%;
}
section.gallery ul.cols-2 {
  grid-template-columns: 48% 48%;
  column-gap:            4%;
}
section.gallery ul.cols-3 {
  grid-template-columns: 32% 32% 32%;
  column-gap:            2%;
}
section.gallery ul.cols-4 {
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  column-gap:            2%;
}

/*
.gallery li {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
 }
*/

li.article-exerpt {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
 }

/*
 section.gallery fig  {
  min-height: 1.6rem;
 }
*/


.article-exerpt,
.teaser {
  line-height:   1.5em;
  margin-bottom: 1.0em;
  color:         #444;
}

article > header > h1 {
 margin-bottom: 0.2rem;
}
p.date-author {
  font-size:     0.71rem;
  font-weight:   400;
  color:         var(--color-text-grey);
  padding-bottom: 0.5rem;
}

.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.0em;
  font-size:     1.0rem;
  font-weight:   400;
  color:         #444;
}

 .text ol {
  padding-left:    1rem;
  display:         inline-block;
  list-style-type: decimal;
}

 .text ul {
  padding-left:    1rem;
  display:         inline-block;
  list-style-position: outside;
  padding-left: 1em;
}

 .article figcaption {
  font-size:   0.6rem;
  line-height: 0.7em
}

/*** OTHERS **********************************/

main {
  margin:         auto;
  min-height: calc(100vh - 10rem);
}

main > header,
main > article,
main > section {
  max-width:      var(--content-width);
  padding-left:   var(--padding-left);
  padding-right:  var(--padding-right);
  margin:         auto;
}

figure.max-w,
section.max-w {
  max-width:      100%;
  padding-left:   0;
  padding-right:  0;
  margin:         auto;
}

figure.wide-w,
section.wide-w {
  max-width:      100%;
  padding-left:   var(--padding-left);
  padding-right:  var(--padding-right);
  margin:         auto;
}

content-w,
figure.content-w,
section.content-w {
  max-width:      var(--content-width);
  padding-left:   var(--padding-left);
  padding-right:  var(--padding-right);
  margin:         auto;
}



/*** Responsive settings - Screen *********************/

@media screen and (max-width: 500px) {

  div.scroll-table-wrapper {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .scroll-table-wrapper > table {
    border-collapse: collapse;
    width: 100%;
    td, th {
      padding-left: .5rem;
    }
    background-color: #f6f6f6;
    tbody tr:nth-child(odd) {
      background-color: #e6e6e6;
    }
    white-space: nowrap;
  }

}

@media (min-width: 621px) {

  nav > ul.languages {
    float: right;
  }

}

@media screen and (max-width: 620px) {

  nav > ul.pages {
    display: block;
  }

  nav > ul.languages {
    display: block;
  }

  nav > ul.languages,
  nav > ul.pages > li {
    display:          block;
    background-color: #e6e6e6;
    margin-top:       0.4rem;
    margin-buttom:    0.4rem;
    padding-left:     0.6rem;
  }

  nav ol.breadcrumbs {
    display: block;
  }
}

@media screen and (max-width: 500px) {

  section.teaser figure,
  section.text figure {
    width:100%;
    padding-right: 0rem;
  }

  section.gallery ul.cols-4,
  section.gallery ul.cols-3,
  section.gallery ul.cols-2 {
    /* set all multiple columns to a single one*/
    grid-template-columns: 100%;
  }
}



/*** Responsive settings - Print *********************/


@page {
  margin-top:    15mm;
  margin-bottom: 20mm;
  margin-left:   20mm;
  margin-right:  15mm;
}

/*@media screen and (min-width: 1000px),*/
@media print {
body {
/*background-color: #dd0000;*/
}

  h1, h2, h3, h4, h5, h6  {
    color:     black;
    page-break-after: avoid;
  }

  p.article-exerpt-teaser,
  .teaser p,
  .text p,
  .text ol,
  .text ul   {
    line-height: 1.5rem;
    font-size:   10pt;
    color:       black;
  }

  nav > ol.breadcrumbs {
    display: none;
  }
}