@charset "UTF-8";
/* == multi-column == */
:root { --column-width: 9rem; --column-gap: 1rem; }
@media (min-width: 40em) { /* (2 * article-margin-h) + (2 * column-width) + column-gap = 20rem = 40em */
  /* - text multicolumn - */
  multi-col {
    columns: var(--column-width) 3;
    column-gap: var(--column-gap);
    column-rule: .0625rem solid var(--text-shadow-color);
    margin: var(--margin-normal) 0;
  }
  multi-col>* {
    margin: 0;
    widows: 2;
    orphans: 4;
  }
  multi-col>*+* {
    margin-top: var(--margin-narrow);
  }
  h2,h3 {
    column-span: all;
  }
  multi-col h3, multi-col h4 {
    break-after: avoid-column;
  }
  
  /* - figgroup multicolumn - */
  fig-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
    grid-gap: var(--column-gap) var(--column-gap);
    margin: var(--margin-narrow) 0;
  }
  fig-group>* {
    margin: 0;
  }
  fig-group figure+figure {
    margin: 0;
  }
}

/* == fixed nav on bigger screens == */
:root {
  --menu-width:         var(--menu-width-max);
  --menu-margin-bottom: 0rem;
  --menu-margin-right:  0rem;
  --max-body-width:     36rem;
}
@media only screen and (min-width: 72em) { /* em in media-query = root-em vom browser = 16px if not changed by the user */
  #navOpener {
    opacity: 0;
  }
  nav {
    left: 0;
    opacity: 1;
  }
  main {
    position: relative;
    left: calc(var(--menu-width) / 2);
  }
}
@media (min-width: 72em) { /* em in media-query = root-em vom browser = 16px if not changed by the user */
  /* restrict the width of the main-part to 36rem,
     otherwise we get either to many columns or to wide ones,
     which looks ugly for the rather short content-blocks,
     that will then only have a few lines per column
  */
  main {
    width: calc(min(100%, calc(var(--max-body-width) + var(--menu-width))) - var(--menu-width));
    margin: 0 auto;
  }
  footer {
    margin-left: var(--menu-width);
    /* should look the same as main, but uses padding instead of margin, so that the background spans the whole width */
    padding: var(--article-margin-h) max(var(--article-margin-h), calc(calc(100% - calc(calc(var(--max-body-width) - calc(2 * var(--article-margin-h))) + var(--menu-width)) ) / 2));
  }
}

/* == changelog multicol-layout == */
@media only screen and (min-width: 60em) and (max-width: 72em),
       (min-width: 80em)
{ /* when the layout uses 3 columns */
  .changelog {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: var(--column-gap);
  }
}

/* == dl-timeline left-align == */
@media only screen and (min-width: 60em) and (max-width: 72em),
       only screen and (min-width: 80em) { /* when the layout uses 3 columns */
  dl.left {
    /* align with column-rule for 3col
     * (100% - (2 * column-gap)) / 3  + (column-gap / 2)
     */
    --dl-left-column: calc(calc(calc(100% - calc(2 * var(--column-gap))) / 3) + calc(var(--column-gap) / 2));
  }
}

/* == open figgroup == */
/* need to be after multicolumn figgroup-code  */
@media only screen and (min-width: 40em) { /*point where it starts to use two columns, otherwise preview-images actually get smaller */
  fig-group:focus-within {
    position: fixed;
    display: block;
    columns: unset;
    margin: 0;
    gap: 0;
    background-color: var(--main-back-color);
    width:100%;
    height:calc(100% - var(--header-height));
    top: var(--header-height);
    left: 0;
    z-index: 11; /* above header (because of shadow) */

    display: flex;
    justify-content: center;
    align-items: center;
    
    --carusell-button-width: 2rem;
    padding: var(--fig-padding) calc(var(--fig-padding) + var(--carusell-button-width));
    --figgroup-h-padding: var(--carusell-button-width);
    --figgroup-v-padding: 0em;
  }
  fig-group:focus-within::before {
    font-size: 2rem;
    content: "×";
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    
    background-color: var(--BWbg);
    color: var(--BWfg);
    text-shadow: none;
    
    border-radius: .125rem;
    position: fixed;
    top: .125rem;
    right: .125rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
  }
  fig-group:focus-within>* {
    margin: 0;
    user-select: none;
  }
  fig-group:focus-within figure {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none; 
/*    margin: auto;*/
  }
  fig-group:focus-within figure img {
    width: auto;
    max-height: calc(calc(calc(100vh - var(--header-height)) - calc(2 * var(--figgroup-v-padding))) - calc(var(--fig-caption-height) + calc(2 * var(--fig-padding))));
    max-width: calc(calc(100vw - calc(2 * var(--figgroup-h-padding))) - calc(2 * var(--fig-padding)));
  }
  fig-group:focus-within figure>* {
    display: none;
  }
  fig-group:focus-within figure:focus>* {
    display: block;
  }
  fig-group:focus-within figure::before,
  fig-group:focus-within figure::after {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    text-shadow: none;
    
    background-color: var(--carusell-button-back);
    color: var(--carusell-button-text);
    width: var(--carusell-button-width);
    height: 100%;
    z-index: +1;
    line-height: 0;
  }
  fig-group:focus-within figure::before {
    content: "〈";
    left: 0;
  }
  fig-group:focus-within figure::after {
    content: "〉";
    right: 0;
  }
  fig-group:focus-within figure:focus::before, /*current*/
  fig-group:focus-within figure:focus::after, /*current*/
  fig-group:focus-within figure+*::after, /* hide all next buttons (unless shown for following element) except the first */
  fig-group:focus-within figure:focus~*::before /* hide prev-buttons from all following elements */
  {
    display: none;
  }
  fig-group:focus-within figure:focus+*::after, /* show next button to the following element */
  fig-group:focus-within figure:first-of-type:focus ~ figure:last-of-type::before /* show prev-button to last element when first is active */
  {
    display: flex;
  }
}
@media only screen and (min-width: 40em) and (orientation: portrait) {
  fig-group:focus-within figure::before,
  fig-group:focus-within figure::after {
    /* swap w/h*/
    height: var(--carusell-button-width);
    width: 100%;
    padding: 0 .5rem;
  }
  fig-group:focus-within figure::before {
    content: "⬅";
    justify-content: flex-start;
  }
  fig-group:focus-within figure::after {
    content: "➡";
    top: auto;
    bottom: 0;
    justify-content: flex-end;
  }
  fig-group:focus-within {
    /* swap h/v*/
    --figgroup-h-padding: 0em;
    --figgroup-v-padding: var(--carusell-button-width);
    /* swap x/y*/
    padding: calc(var(--fig-padding) + var(--carusell-button-width)) var(--fig-padding);
  }
}

@media (min-width: 40em) {
  .pc {
    display: unset;
  }
  .no-pc {
    display: none;
  }
}