:root {
  --horizontal-space-0: 3px;
  --horizontal-space-1: 5px;
  --horizontal-space-2: 15px;
  --horizontal-space-3: 20px; 
  --horizontal-space-4: 30px;
  --horizontal-space-5: 40px;
  --horizontal-space-6: 50px;
  --horizontal-space-7: 60px;
  --horizontal-space-8: 70px;
  --horizontal-space-9: 100px;
  --vertical-space-0: 2px;
  --vertical-space-1: 5px;
  --vertical-space-2: 8px;
  --vertical-space-3: 12px;
  --vertical-space-4: 20px;
  --vertical-space-5: 30px;
  --vertical-space-6: 40px;
  --vertical-space-7: 50px;
  --vertical-space-8: 60px;
  --vertical-space-9: 70px;
  --vertical-space-10: 80px;
}

.mar {margin-top: var(--vertical-space-0); margin-left: var(--horizontal-space-0);}
.mar-1 {margin-top: var(--vertical-space-1); margin-left: var(--horizontal-space-1);}
.mar-2 {margin-top: var(--vertical-space-2); margin-left: var(--horizontal-space-2);}
.mar-3 {margin-top: var(--vertical-space-3); margin-left: var(--horizontal-space-3);}
.mar-4 {margin-top: var(--vertical-space-4); margin-left: var(--horizontal-space-4);}

.pad {padding-top: var(--vertical-space-0); padding-left: var(--horizontal-space-0);}
.pad-1 {padding-top: var(--vertical-space-1); padding-left: var(--horizontal-space-1);}
.pad-2 {padding-top: var(--vertical-space-2); padding-left: var(--horizontal-space-2);}
.pad-3 {padding-top: var(--vertical-space-3); padding-left: var(--horizontal-space-3);}
.pad-4 {padding-top: var(--vertical-space-4); padding-left: var(--horizontal-space-4);}

.pad-l {padding-left: var(--horizontal-space-0);}
.pad-l-1 {padding-left: var(--horizontal-space-1);}
.pad-l-2 {padding-left: var(--horizontal-space-2);}
.pad-l-3 {padding-left: var(--horizontal-space-3);}
.pad-l-4 {padding-left: var(--horizontal-space-4);}
.pad-l-5 {padding-left: var(--horizontal-space-5);}
.pad-l-6 {padding-left: var(--horizontal-space-6);}
.pad-l-7 {padding-left: var(--horizontal-space-7);}
.pad-l-8 {padding-left: var(--horizontal-space-8);}
.pad-l-9 {padding-left: var(--horizontal-space-9);}
.pad-l-10 {padding-left: var(--horizontal-space-10);}

.pad-r {padding-right: var(--horizontal-space-0);}
.pad-r-1 {padding-right: var(--horizontal-space-1);}
.pad-r-2 {padding-right: var(--horizontal-space-2);}
.pad-r-3 {padding-right: var(--horizontal-space-3);}
.pad-r-4 {padding-right: var(--horizontal-space-4);}
.pad-r-5 {padding-right: var(--horizontal-space-5);}
.pad-r-6 {padding-right: var(--horizontal-space-6);}
.pad-r-7 {padding-right: var(--horizontal-space-7);}
.pad-r-8 {padding-right: var(--horizontal-space-8);}
.pad-r-9 {padding-right: var(--horizontal-space-9);}
.pad-r-10 {padding-right: var(--horizontal-space-10);}

.pad-b {padding-bottom: var(--vertical-space-0);}
.pad-b-1 {padding-bottom: var(--vertical-space-1);}
.pad-b-2 {padding-bottom: var(--vertical-space-2);}
.pad-b-3 {padding-bottom: var(--vertical-space-3);}
.pad-b-4 {padding-bottom: var(--vertical-space-4);}
.pad-b-5 {padding-bottom: var(--vertical-space-5);}
.pad-b-6 {padding-bottom: var(--vertical-space-6);}
.pad-b-7 {padding-bottom: var(--vertical-space-7);}
.pad-b-8 {padding-bottom: var(--vertical-space-8);}
.pad-b-9 {padding-bottom: var(--vertical-space-9);}
.pad-b-10 {padding-bottom: var(--vertical-space-10);}

.pad-t {padding-top: var(--vertical-space-0);}
.pad-t-1 {padding-top: var(--vertical-space-1);}
.pad-t-2 {padding-top: var(--vertical-space-2);}
.pad-t-3 {padding-top: var(--vertical-space-3);}
.pad-t-4 {padding-top: var(--vertical-space-4);}
.pad-t-5 {padding-top: var(--vertical-space-5);}
.pad-t-6 {padding-top: var(--vertical-space-6);}
.pad-t-7 {padding-top: var(--vertical-space-7);}
.pad-t-8 {padding-top: var(--vertical-space-8);}
.pad-t-9 {padding-top: var(--vertical-space-9);}
.pad-t-10 {padding-top: var(--vertical-space-10);}

.mar-r {margin-right: var(--horizontal-space-0);}
.mar-r-1 {margin-right: var(--horizontal-space-1);}
.mar-r-2 {margin-right: var(--horizontal-space-2);}
.mar-r-3 {margin-right: var(--horizontal-space-3);}
.mar-r-4 {margin-right: var(--horizontal-space-4);}
.mar-r-5 {margin-right: var(--horizontal-space-5);}
.mar-r-6 {margin-right: var(--horizontal-space-6);}
.mar-r-7 {margin-right: var(--horizontal-space-7);}
.mar-r-8 {margin-right: var(--horizontal-space-8);}
.mar-r-9 {margin-right: var(--horizontal-space-9);}
.mar-r-10 {margin-right: var(--horizontal-space-10);}

.mar-l-1 {margin-left: var(--horizontal-space-0);}
.mar-l-2 {margin-left: var(--horizontal-space-1);}
.mar-l-3 {margin-left: var(--horizontal-space-2);}
.mar-l-4 {margin-left: var(--horizontal-space-3);}
.mar-l-5 {margin-left: var(--horizontal-space-4);}
.mar-l-6 {margin-left: var(--horizontal-space-5);}
.mar-l-7 {margin-left: var(--horizontal-space-6);}
.mar-l-8 {margin-left: var(--horizontal-space-7);}
.mar-l-9 {margin-left: var(--horizontal-space-8);}
.mar-l-10 {margin-left: var(--horizontal-space-9);}

.mar-b {margin-bottom: var(--vertical-space-0);}
.mar-b-1 {margin-bottom: var(--vertical-space-1);}
.mar-b-2 {margin-bottom: var(--vertical-space-2);}
.mar-b-3 {margin-bottom: var(--vertical-space-3);}
.mar-b-4 {margin-bottom: var(--vertical-space-4);}
.mar-b-5 {margin-bottom: var(--vertical-space-5);}
.mar-b-6 {margin-bottom: var(--vertical-space-6);}
.mar-b-7 {margin-bottom: var(--vertical-space-7);}
.mar-b-8 {margin-bottom: var(--vertical-space-8);}
.mar-b-9 {margin-bottom: var(--vertical-space-9);}
.mar-b-10 {margin-bottom: var(--vertical-space-10);}

.mar-t {margin-top: var(--vertical-space-0);}
.mar-t-1 {margin-top: var(--vertical-space-1);}
.mar-t-2 {margin-top: var(--vertical-space-2);}
.mar-t-3 {margin-top: var(--vertical-space-3);}
.mar-t-4 {margin-top: var(--vertical-space-4);}
.mar-t-5 {margin-top: var(--vertical-space-5);}
.mar-t-6 {margin-top: var(--vertical-space-6);}
.mar-t-7 {margin-top: var(--vertical-space-7);}
.mar-t-8 {margin-top: var(--vertical-space-8);}
.mar-t-9 {margin-top: var(--vertical-space-9);}
.mar-t-10 {margin-top: var(--vertical-space-10);}



:root {
  --font-size-0: 13px;
  --font-size-1: 24px;
  --font-size-2: 23px;
  --font-size-3: 30px;
  --font-size-info-column: 15px;
  --font-size-caption: 20px;
  --line-height-1: 1.375; /* 24px / 33px */
  --line-height-caption: 18px;
  --info-column-heading-gap: 4px;
  --padding-top-1: 3px;
  --line-offset-1: 2px;

  /* list rhythm */
  --line-height-list: 1.32;
  --catalog-year-width: 6.5em;
  --catalog-category-width: 8em;
  /* shared by catalog, menu and footer: title & description start on the same line as "©";
     the list keeps enough room for its titles on narrow screens */
  --catalog-columns: minmax(520px, 1.4fr) minmax(280px, 1fr);
  --catalog-column-gap: var(--horizontal-space-6);
  --catalog-dot-size: 0.95em;
  /* widest figure of Suisse Intl ("0"), so all digits line up */
  --digit-width: 0.66em;
  --year-dash-space: 0.1em;
  --caption-number-gap: 1em;

  /* slideshow: the centred image fills the height, the ones beside it shrink to this share */
  --slideshow-side-scale: 0.6;
  /* widest the centred image may get, as a share of the slideshow width */
  --slideshow-max-width: 0.8;
  --slideshow-transition: 0.5s ease;
  /* cursor on the whole site (basic.css): a black dot as wide as the one beside the titles
     (● at --catalog-dot-size: 9.8 px here, 8.2 px up to 1600 px) */
  --cursor-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='6' cy='6' r='4.9'/%3E%3C/svg%3E") 6 6, pointer;
  --catalog-dot-offset-y: -1px;

  /* menus & navigation */
  --menu-padding-y: var(--vertical-space-3);
  --menu-padding-x: var(--page-padding-x);
  --menu-item-gap: var(--horizontal-space-5);
  --catalog-mobile-menu-height: 2.8em;

  /* site chrome */
  /* single side inset for all content; borders stay full-bleed and get their padding per container */
  --page-padding-x: var(--horizontal-space-2);
  --site-header-padding-y: var(--vertical-space-2);
  --site-header-padding-x: var(--page-padding-x);
  --site-footer-padding-y: var(--vertical-space-3);

  --grid-gap-1: 25px;
  --border-width-1: 0.4px;
  --border-width-2: 4px;
  --border-width-3: 3px;
  --color-0: rgb(253, 253, 253);
  --color-1: black;
  --color-3: rgb(95, 31, 185);
  --color-2: lightgrey;
  --color-4: #2A1A1A;
  --color-5: rgb(246, 246, 246);
  --color-6: rgb(255, 0, 0);
  --color-7: rgb(232, 232, 232);
  --color-8: rgb(196, 196, 196);
  
  --scrollbar-width: 5px;
  --radius-1: 0.5vw;
  --radius-2: 8px;
  --radius-3: 3px;
  --grid-gap-1: 30px;
  --grid-gap-2: 0.5vw;
  --bar-height-1: 25px;

  --line-thickness-1: 0.2px;
  --line-thickness-2: 0.5px;
  --line-thickness-3: 0.7px;
  --line-thickness-4: 1px;
  --line-thickness-5: 2px;

  --border-radius-1: 8px;
  --border-radius-2: 4px;

  --width-0: 100%;
  --width-1: 410px;
  --width-2: 100%;
  --width-3: 440px;
  --width-4: 80px;
  --width-5: 60px;
  /* wide enough for the info columns' longest lines without wrapping */
  --width-info-overlay: 62em;
  --height-product-cover: 72vh;
  --line-height-product-details: 1.2;
  --menu-height: calc(var(--menu-padding-y) * 2 + var(--font-size-1) * var(--line-height-1) + var(--line-thickness-4));

  --height-1: 60px;
  --header-height-1: 27px;
  --site-header-height: calc(var(--site-header-padding-y) * 2 + 1em * var(--line-height-1));

  --shadow-info-overlay: 0 8px 28px rgba(0, 0, 0, 0.1);

  --gap-1: 10px;
  --transition-1: 0.3s; 

  --font-family-1: 'Suisse Intl', Helvetica, "Helvetica Neue", Arial, sans-serif;
  --font-family-2: 'Times New Roman', Times, serif;
}

@media only screen and (max-width: 800px) {
  :root {
    --width-1: 100%;
    --width-2: 100vw;
  }
}

/* laptops (e.g. MacBook Pro 14" = 1512px, MacBook Air 13" = 1470px) */
@media only screen and (max-width: 1600px) {
  :root {
    --font-size-0: 12px;
    --font-size-1: 20px;
    --font-size-2: 19px;
    --font-size-3: 26px;
    --font-size-info-column: 14px;
    --font-size-caption: 17px;
    --line-height-1: 1.35; /* 20px / 27px */
    --cursor-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Ccircle cx='5' cy='5' r='4.1'/%3E%3C/svg%3E") 5 5, pointer;
  }
}

@media only screen and (max-width: 900px) {
  :root {
    --font-size-0: 12px;
    --font-size-1: 18px;
    --font-size-2: 17px;
    --font-size-3: 23px;
    --font-size-info-column: 13px;
    --font-size-caption: 15px;
    --line-height-1: 1.3333; /* 18px / 24px */
    --line-height-caption: 18px;
    /* a range with a short end year on one line ("2011 – 13": six digits and the dash) */
    --catalog-year-width: calc(6 * var(--digit-width) + 2 * var(--year-dash-space) + 0.52em);
    /* slideshow on phones: every image has the same width, 80 % of the screen width
       (on short screens less, so a 2:3 portrait stays within about two thirds of the height) */
    --slideshow-mobile-width: min(80vw, 45vh);
    /* tallest an image gets: a 3:5 portrait at that width, so all the usual portraits keep the full width;
       only narrower ones (e.g. panoramas on end) get smaller instead of filling the screen */
    --slideshow-mobile-height: calc(var(--slideshow-mobile-width) * 5 / 3);
  }
}

.ff-1, .ff-1-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-1);
  line-height: var(--line-height-1);
  font-weight: normal;
  white-space: 'pre-wrap',
}
.ff-2, .ff-2-f * {
  font-family: var(--font-family-1);
  font-size: var(--font-size-0);
  line-height: var(--line-height-1);
  font-weight: normal;
}
.ff-3, .ff-3-f * {
  font-family: var(--font-family-2);
  font-size: var(--font-size-3)!important;
  line-height: var(--line-height-1);
  font-weight: normal;
}

.fs-0 {font-size: var(--font-size-0);}
.fs-0 * {font-size: var(--font-size-0)!important;}
.fs-2 {font-size: var(--font-size-2);}
.fs-2-abs * {font-size: var(--font-size-2);}
.fs-1 {font-size: var(--font-size-1);}

.c1 {color: var(--color-1)}
.c2 {color: var(--color-2)}
.c3 {color: var(--color-3)}
.c4 {color: var(--color-4)}
.c5 {color: var(--color-5)}
.c6 {color: var(--color-6)}
.c7 {color: var(--color-7)}
.c8 {color: var(--color-8)}

.bc1 {background: var(--color-1)}
.bc2 {background: var(--color-2)}
.bc3 {background: var(--color-3)}
.bc4 {background: var(--color-4)}
.bc5 {background: var(--color-5)}
.bc6 {background: var(--color-6)}
.bc7 {background: var(--color-7)}


.width-0{width: var(--width-0)}
.width-1{width: var(--width-1)}
.width-2{width: var(--width-2)}
.width-3{width: var(--width-3)}
.width-4{width: var(--width-4)}
.width-5{width: var(--width-5)}

.border-1 {border: var(--border-width-1) solid var(--color-1); border-radius: var(--radius-3);}

.height-1 {height: var(--height-1)}

.gap-1 {grid-gap: var(--grid-gap-1);}
.gap-2 {grid-gap: var(--grid-gap-2);}

.noevents {pointer-events: none;}
.underline { text-decoration: underline;}
::-webkit-scrollbar {display: none;}

.editbox {
  background: var(--color-5);
  box-shadow: 0 0 5px 5px var(--color-5);
}

.cl:hover {color: rgb(49, 49, 49);}
.cur {font-style: italic}
.flex {display: flex}
.bl {display: block;}
.inl {display: inline-block;}
.al-c {text-align: center;}
.al-r {text-align: right;}
.al-l {text-align: left;}

.cur {font-style: italic;}
.diff {mix-blend-mode: difference;}

.grid-2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: var(--grid-gap-1);}
.grid-3 {display: grid; grid-template-columns: repeat(3, 1fr);}
.grid-4 {display: grid; grid-template-columns: repeat(4, 1fr);}
.grid-5 {display: grid; grid-template-columns: repeat(5, 1fr);}
.grid-6 {display: grid; grid-template-columns: repeat(8, 1fr);}

.komma .ch::after {content: ",";}
.komma .ch:last-child::after {content: "";}

.bold * { font-weight: bold;}

.nowrap {white-space: nowrap;}



.link {
  text-decoration: dotted underline;
  background: transparent;
  text-decoration-thickness: var(--line-thickness-5);
  text-underline-offset: var(--line-offset-1);
  font-size: var(--font-size-2);
}
.link:hover {
  color: var(--color-1);
}

.komma .ch {
  display: inline-block;
}
.komma .ch::after {
  content: ",";
  margin-right: 4px;
}
.komma .ch:last-child::after {
  content: "";
}