main {
    padding: var(--site-header-padding-y) var(--site-header-padding-x);
}

.SiteHeader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    padding: var(--site-header-padding-y) var(--site-header-padding-x);
    background: white;
}

.SiteHeader a {
    text-decoration: none;
    color: inherit;
}

body.is-info-open .InfoOverlay-toggle {
    visibility: hidden;
}

.SiteHeader .InnerHeader {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.SiteHeader-actions {
    display: flex;
    align-items: baseline;
    gap: var(--menu-item-gap);
}

.InfoOverlay-toggle {
    padding: 0;
    text-align: right;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

.InfoOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    pointer-events: none;
}

.InfoOverlay[hidden] {
    display: none;
}

.InfoOverlay-panel {
    position: relative;
    pointer-events: auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-info-overlay);
    padding: var(--site-header-padding-y) var(--horizontal-space-5) var(--vertical-space-6);
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* sits exactly where the Info toggle is, right edge on the page padding */
.InfoOverlay-close {
    position: absolute;
    top: var(--site-header-padding-y);
    right: var(--site-header-padding-x);
    padding: 0;
    text-align: right;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

.InfoOverlay-inner {
    width: 100%;
    max-width: var(--width-info-overlay);
    margin: 0 auto;
}

.InfoOverlay-intro {
    margin: 0 0 var(--vertical-space-6);
    text-align: left;
}

/* one empty line between the intro and the CV link */
.InfoOverlay-cv {
    margin-top: calc(1em * var(--line-height-1));
}

.InfoOverlay-cv a,
.InfoOverlay-column a {
    color: inherit;
    text-decoration: none;
}

.InfoOverlay-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--horizontal-space-9);
    row-gap: var(--vertical-space-4);
}

/* below the overlay's full width the columns move closer together, so the entries fit on one line a little earlier */
@media only screen and (min-width: 901px) and (max-width: 1320px) {
    .InfoOverlay-columns {
        column-gap: var(--horizontal-space-5);
    }
}

/* one line per entry once there is room for it; a longer entry widens its column instead of running into the next */
@media only screen and (min-width: 1192px) {
    .InfoOverlay-columns {
        grid-template-columns: repeat(3, minmax(max-content, 1fr));
    }

    .InfoOverlay-column p {
        white-space: nowrap;
    }
}

.InfoOverlay-column p:first-child {
    font-size: var(--font-size-info-column);
    margin-bottom: var(--info-column-heading-gap);
}

/* legal links live in the footer on desktop, in the overlay on mobile */
.InfoOverlay-legal {
    display: none;
}

.InfoOverlay-legal a {
    color: inherit;
    text-decoration: none;
}

.Catalog-hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: var(--site-header-height) 0 0;
}

.Catalog-slideshow {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* an entry without images keeps the slideshow's space, so the menu below stays at the same height */
.Catalog-slideshow:not(.has-entry) {
    visibility: hidden;
}

.Catalog-shopcover {
    display: none;
    flex: 1;
    min-height: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
}

body.is-shop-view .Catalog-shopcover {
    display: flex;
}

.Catalog-shopcover img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.Entry-slideshow {
    height: 100%;
}

.Entry-slideshow[hidden] {
    display: none;
}

.Slideshow-track {
    display: flex;
    align-items: flex-end;
    height: 100%;
    transition: transform var(--slideshow-transition);
}

.Slideshow-track.is-jumping,
.Slideshow-track.is-jumping .Slideshow-slide,
.Slideshow-track.is-jumping img {
    transition: none;
}

/* the track loops: the current slide sits centred, its neighbours show cut off at the edges */
.Slideshow-slide {
    flex: 0 0 auto;
    margin: 0;
    padding-right: var(--horizontal-space-2);
    display: flex;
    align-items: flex-end;
    transition: width var(--slideshow-transition);
}

/* script.js sizes every image at its original proportions: full height in the centre, smaller beside it,
   and width and height animate along with the track, so the images grow and shrink as they slide */
.Slideshow-slide img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
    transition: width var(--slideshow-transition), height var(--slideshow-transition);
    /* the low-res placeholder from img.php, laid out like the image (object-fit on phones) until it has loaded */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

.Slideshow-slide--top {
    align-self: flex-start;
}

.Slideshow-slide--bottom {
    align-self: flex-end;
}

.Catalog-menu {
    display: grid;
    grid-template-columns: var(--catalog-columns);
    column-gap: var(--catalog-column-gap);
    align-items: baseline;
    flex-shrink: 0;
    padding: var(--menu-padding-y) var(--page-padding-x);
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Catalog-menu-nav,
.Catalog-menu-meta,
.Catalog-menu-slides {
    display: flex;
    align-items: baseline;
    gap: var(--menu-item-gap);
}

.Catalog-menu-filter,
.Catalog-menu-link {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
    text-decoration: none;
}

.Catalog-menu-filter::after {
    content: "●";
    position: relative;
    top: var(--catalog-dot-offset-y);
    font-size: var(--catalog-dot-size);
    margin-left: 0.2em;
    color: var(--color-0);
}

.Catalog-menu-filter.is-active::after {
    color: inherit;
}

.Catalog-menu-bag {
    display: none;
    color: inherit;
    text-decoration: none;
}

.Catalog-menu-meta {
    justify-content: space-between;
    min-width: 0;
}

.Catalog-menu-title {
    margin: 0;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.Catalog-menu-slides {
    flex-shrink: 0;
}

.Catalog-menu-slides {
    gap: var(--horizontal-space-2);
}

.Slideshow-prev,
.Slideshow-next {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

.Slideshow-hit {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 30%;
}

.Slideshow-hit--prev {
    left: 0;
}

.Slideshow-hit--next {
    right: 0;
}

.Catalog {
    display: grid;
    grid-template-columns: var(--catalog-columns);
    column-gap: var(--catalog-column-gap);
    align-items: start;
}

.Catalog-list {
    display: flex;
    flex-direction: column;
}

.Catalog-row {
    display: grid;
    grid-template-columns: var(--catalog-year-width) minmax(0, 1fr) var(--catalog-category-width);
    column-gap: var(--horizontal-space-3);
    width: 100%;
    padding: 0;
    line-height: var(--line-height-list);
    margin: 0;
    border: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
}

.Catalog-row.is-hidden,
.Catalog-item.is-hidden {
    display: none;
}

.Catalog-row.is-active,
.Catalog-row:hover,
.Catalog-item.is-active .Catalog-row {
    color: var(--color-1);
}

.Catalog-year {
    white-space: nowrap;
}

/* mono digits (monoDigits() in the year-range plugin): each one sits centred in a cell as wide as the widest digit */
.Digit {
    display: inline-block;
    width: var(--digit-width);
    text-align: center;
}

.Dash {
    margin: 0 var(--year-dash-space);
}

.Catalog-title {
    min-width: 0;
}

.Catalog-dot {
    display: none;
    margin-left: 0.2em;
    line-height: 1;
    vertical-align: baseline;
}

.Catalog-dot::before {
    content: "●";
    position: relative;
    top: var(--catalog-dot-offset-y);
    font-size: var(--catalog-dot-size);
}

.Catalog-row.is-active .Catalog-dot,
.Catalog-item.is-active .Catalog-dot {
    display: inline;
}

.Catalog-row--mobile {
    display: none;
}

.Catalog-category {
    text-align: left;
    white-space: nowrap;
}

.Catalog-detail {
    position: sticky;
    top: var(--vertical-space-1);
}

.Catalog-panel[hidden] {
    display: none;
}

.Catalog-description {
    margin-bottom: var(--vertical-space-4);
}

.Catalog-captions-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: var(--horizontal-space-3);
    align-items: baseline;
}

.Catalog-caption-toggle {
    justify-self: start;
    padding: 0;
    font: inherit;
    font-size: var(--font-size-1);
    line-height: var(--line-height-1);
    color: inherit;
}

.Catalog-caption-grid {
    columns: 2;
    column-gap: var(--horizontal-space-3);
    font-size: var(--font-size-info-column);
    line-height: var(--line-height-caption);
}

/* hanging numbers: the caption text wraps in its own column next to the number */
.Catalog-caption {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--caption-number-gap);
    margin: 0;
    break-inside: avoid;
}

body.is-shop-view {
    background: white;
}

body.is-shop-view .Catalog-hero .Catalog-slideshow,
body.is-shop-view .Catalog-menu-meta,
body.is-shop-view .Catalog {
    display: none;
}

body.is-shop-view .Shop-grid {
    display: grid;
}

body.is-shop-view .SiteFooter {
    margin-top: 0;
}

.Shop-grid {
    display: none;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
}

.Shop-tile {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1 / 1;
    min-width: 0;
    padding: var(--vertical-space-6) var(--page-padding-x) var(--vertical-space-2);
    border-right: var(--line-thickness-4) solid var(--color-1);
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Shop-tile-link {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 0;
    color: inherit;
    text-decoration: none;
}

.Shop-tile:nth-child(3n) {
    border-right: 0;
}

/* Only the tiles in the last row: from the first tile of that row onwards */
.Shop-tile:nth-child(3n+1):nth-last-child(-n+3),
.Shop-tile:nth-child(3n+1):nth-last-child(-n+3) ~ .Shop-tile {
    border-bottom: 0;
}

.Shop-tile-image {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--vertical-space-4);
}

.Shop-tile-image img {
    width: auto;
    max-width: 70%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

.Shop-tile-title {
    margin: 0;
}

body.template-shop,
body.template-cart {
    background: white;
}

body.template-shop .Catalog-menu-meta {
    display: none;
}

body.template-shop .Catalog-menu {
    grid-template-columns: 1fr;
}

body.template-shop .Shop-grid,
body.template-cart .Shop-grid {
    display: grid;
}

body.template-cart .Shop-grid {
    border-top: var(--line-thickness-4) solid var(--color-1);
}

body.template-shop .SiteFooter,
body.template-cart .SiteFooter {
    margin-top: 0;
}

.Product {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--horizontal-space-3);
    align-content: center;
    min-height: calc(100vh - var(--menu-height));
    padding: var(--site-header-height) var(--page-padding-x);
}

.Product-cover {
    display: flex;
    justify-content: center;
    margin: 0;
}

.Product-cover img {
    width: auto;
    max-width: 100%;
    height: var(--height-product-cover);
    object-fit: contain;
}

.Product-info {
    display: flex;
    flex-direction: column;
    min-height: var(--height-product-cover);
}

.Product-title {
    margin-bottom: calc(var(--font-size-1) * var(--line-height-1));
}

.Product-description {
    max-width: 35em;
}

.Product-description p {
    margin: 0 0 var(--vertical-space-3);
}

.Product-meta {
    margin-top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--horizontal-space-3);
    align-items: end;
    max-width: 32em;
}

.Product-details p,
.Product-vat {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-product-details);
}

.Product-details p {
    margin: 0;
}

.Product-buy {
    text-align: center;
}

.Product-vat {
    margin: 0 0 var(--vertical-space-2);
}

.Product-add {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--horizontal-space-3);
    width: 100%;
    padding: calc(var(--vertical-space-2) * 2) var(--horizontal-space-5);
    border: var(--line-thickness-4) solid var(--color-1);
    border-radius: 999px;
    background: white;
    font: inherit;
    color: inherit;
}

.Product-add:hover {
    background: var(--color-1);
    color: white;
}

.Product-menu {
    padding: 0;
}

.Cart {
    --cart-summary-width: 24%;
    --cart-row-height: 7em;
    --cart-image-width: 9em;
    --cart-column-gap: var(--horizontal-space-4);
    padding: calc(var(--site-header-height) + var(--vertical-space-6)) 0 var(--vertical-space-9);
}

.Cart-top {
    grid-column: 1;
    align-self: end;
    margin: 0;
    padding: 0 var(--page-padding-x) var(--vertical-space-4);
}

.Cart-title {
    margin: 0;
}

.Cart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, var(--cart-summary-width));
    grid-template-rows: var(--cart-grid-rows);
    column-gap: var(--cart-column-gap);
}

.Cart-items {
    display: contents;
    list-style: none;
    margin: 0;
    padding: 0;
}

.Cart-item {
    grid-column: 1;
    display: grid;
    grid-template-columns: var(--cart-image-width) minmax(0, 1fr) 6em 5em;
    column-gap: var(--horizontal-space-3);
    align-items: start;
    height: var(--cart-row-height);
    padding: 0 var(--page-padding-x);
    border-top: var(--line-thickness-4) solid var(--color-1);
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Cart-items .Cart-item + .Cart-item {
    border-top: 0;
}

.Cart-totals {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    margin-right: var(--page-padding-x);
}

.Cart-totals > * {
    grid-column: 1;
}

.Cart-summary-title {
    align-self: end;
    margin: 0;
    padding: 0 var(--page-padding-x) var(--vertical-space-4);
}

.Cart-total,
.Cart-totalStack {
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Cart-total--subtotal {
    border-top: var(--line-thickness-4) solid var(--color-1);
}

.Cart-total {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--horizontal-space-4);
    height: var(--cart-row-height);
    padding: var(--vertical-space-3) var(--page-padding-x) 0;
}

.Cart-total span {
    margin: 0;
}

.Cart-totalStack {
    display: flex;
    flex-direction: column;
    height: var(--cart-row-height);
    padding: 0;
}

.Cart-totalStack .Cart-total {
    flex: 1;
    height: auto;
    border-bottom: 0;
}

.Cart-totalStack .Cart-total--shipment {
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Cart-empty {
    margin: 0;
    padding: 0 var(--page-padding-x);
}

.Cart-item-image {
    grid-column: 1;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    align-self: stretch;
    width: var(--cart-image-width);
    min-height: 0;
    color: inherit;
}

.Cart-item-info {
    grid-column: 2;
}

.Cart-item-info,
.Cart-item-qty,
.Cart-item-removeForm {
    padding-top: var(--vertical-space-3);
}

.Cart-item-qty {
    grid-column: 3;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--horizontal-space-2);
}

.Cart-item-removeForm {
    grid-column: 4;
    justify-self: end;
}

.Cart-item-image img {
    width: auto;
    height: 100%;
    max-width: 100%;
    display: block;
}

.Cart-item-title,
.Cart-item-price {
    margin: 0;
}

.Cart-item-title {
    margin-bottom: var(--vertical-space-1);
}

.Cart-item-qty button,
.Cart-item-remove {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: inherit;
}

.Cart-item-remove {
    text-decoration: underline;
}

.Cart-checkoutForm {
    align-self: start;
    margin-top: var(--vertical-space-6);
    padding: 0;
}

.Cart-notice {
    margin: 0 0 var(--vertical-space-2);
}

.Cart-checkout {
    width: 100%;
    padding: var(--vertical-space-3) var(--horizontal-space-4);
    border: var(--line-thickness-4) solid var(--color-1);
    border-radius: 999px;
    background: var(--color-1);
    color: white;
    font: inherit;
}

.Cart-checkout:hover {
    background: white;
    color: var(--color-1);
}

a.Cart-checkout {
    display: block;
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
}

.Product-add.is-soldout {
    margin: 0;
    box-sizing: border-box;
    opacity: 0.4;
}

.Product-add.is-soldout:hover {
    background: white;
    color: inherit;
}

/* Checkout: address form left, order summary right – same columns as the cart */
.Checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(200px, var(--cart-summary-width));
    column-gap: var(--cart-column-gap);
    align-items: start;
}

.Checkout-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-top: var(--line-thickness-4) solid var(--color-1);
}

.Checkout-field {
    display: flex;
    flex-direction: column;
    gap: var(--vertical-space-1);
    min-width: 0;
    padding: var(--vertical-space-3) var(--page-padding-x);
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Checkout-field.is-wide {
    grid-column: 1 / -1;
}

.Checkout-field:not(.is-wide) + .Checkout-field:not(.is-wide) {
    border-left: var(--line-thickness-4) solid var(--color-1);
}

.Checkout-label,
.Checkout-optional,
.Checkout-note,
.Checkout-error,
.Checkout-terms {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.Checkout-optional {
    opacity: 0.4;
}

.Checkout-field input,
.Checkout-field select {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.Checkout-field input:focus,
.Checkout-field select:focus {
    outline: none;
}

.Checkout-field:focus-within .Checkout-label {
    text-decoration: underline;
}

.Checkout-error {
    margin: 0;
    color: red;
}

.Checkout-error--form {
    padding: 0 var(--page-padding-x) var(--vertical-space-3);
}

.Checkout-back {
    padding: var(--vertical-space-4) var(--page-padding-x) 0;
}

.Checkout-back a,
.Checkout-terms a {
    color: inherit;
}

.Checkout-summary {
    display: flex;
    flex-direction: column;
    margin-right: var(--page-padding-x);
}

.Checkout-summary .Cart-summary-title {
    align-self: auto;
}

.Checkout-items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--line-thickness-4) solid var(--color-1);
}

.Checkout-summary .Cart-total {
    height: auto;
    padding-bottom: var(--vertical-space-3);
}

.Checkout-terms {
    display: flex;
    align-items: flex-start;
    gap: var(--horizontal-space-2);
    margin-top: var(--vertical-space-4);
    padding: 0 var(--page-padding-x);
}

.Checkout-terms input {
    flex: 0 0 auto;
    margin: 0.2em 0 0;
    accent-color: var(--color-1);
}

.Checkout-terms.has-error span {
    color: red;
}

.Checkout-summary > .Checkout-error {
    padding: var(--vertical-space-1) var(--page-padding-x) 0;
}

.Checkout-summary .Cart-checkout {
    margin-top: var(--vertical-space-5);
}

.Checkout-note {
    margin: var(--vertical-space-2) 0 0;
    padding: 0 var(--page-padding-x);
    text-align: center;
    opacity: 0.6;
}

.Checkout-resultText {
    max-width: 32em;
    padding: var(--vertical-space-3) var(--page-padding-x) 0;
    border-top: var(--line-thickness-4) solid var(--color-1);
}

.Checkout-resultText .Checkout-back {
    padding: 0;
}

.Checkout-resultText .Cart-checkout {
    max-width: 16em;
    margin-top: var(--vertical-space-5);
}

@media only screen and (max-width: 900px) {
    /* on phones the bag count sits behind „Shop“ in the catalog menu */
    .SiteHeader-bag {
        display: none;
    }

    .Catalog-menu-bag {
        display: inline;
        margin-left: 0.25em;
    }

    body.template-home,
    body.template-default,
    body.template-shop {
        padding-bottom: calc(var(--catalog-mobile-menu-height) + env(safe-area-inset-bottom, 0px));
    }

    .InfoOverlay-columns {
        grid-template-columns: 1fr;
    }

    .InfoOverlay-column p:first-child {
        padding-left: calc(var(--catalog-year-width) + var(--horizontal-space-3));
        font-size: var(--font-size-1);
        margin-bottom: 0;
    }

    .InfoOverlay-panel {
        padding-top: calc(var(--site-header-height) + var(--vertical-space-2));
        padding-left: var(--horizontal-space-2);
        padding-right: var(--horizontal-space-4);
        padding-bottom: calc(var(--vertical-space-6) * 2 + env(safe-area-inset-bottom, 0px));
    }

    .InfoOverlay-legal {
        display: flex;
        flex-direction: column;
        margin-top: var(--vertical-space-4);
        padding-left: calc(var(--catalog-year-width) + var(--horizontal-space-3));
        font-size: var(--font-size-1);
    }

    .Catalog-hero {
        height: auto;
        min-height: 0;
        padding-top: var(--site-header-height);
    }

    /* no fixed height: the tallest image of the entry sets it, so the list below stays put while sliding */
    .Catalog-slideshow,
    .Entry-slideshow,
    .Slideshow-track {
        height: auto;
    }

    .Catalog-slideshow {
        flex: none;
        /* doubles the gap to the header and the list; below minus the 1px of .Slideshow-track */
        padding: var(--site-header-padding-y) 0 calc(var(--site-header-padding-y) - 1px);
        /* horizontal swipes go to script.js, vertical ones still scroll the page */
        touch-action: pan-y;
    }

    .Catalog-slideshow:not(.has-entry) {
        display: none;
    }

    .Catalog-shopcover {
        flex: none;
    }

    /* as wide as the slideshow images */
    .Catalog-shopcover img {
        width: var(--slideshow-mobile-width);
        height: auto;
        max-height: var(--slideshow-mobile-height);
    }

    /* no arrows: the slides change by themselves until the first tap or swipe (script.js),
       a tap on the left or right half steps that way */
    .Slideshow-hit {
        display: block;
        width: 50%;
    }

    /* iOS Safari left the bottom pixel row of the tallest image behind at the clipped edge,
       as a thin line under the shorter images: the image must not touch that edge */
    .Slideshow-track {
        padding-bottom: 1px;
        /* entries with only landscape images keep at least half the screen; the images sit centred in it */
        min-height: 50vh;
    }

    .Slideshow-slide {
        flex: 0 0 100%;
        padding-right: 0;
        justify-content: center;
    }

    /* shorter images sit centred against the tallest one */
    .Slideshow-slide--top,
    .Slideshow-slide--bottom {
        align-self: center;
    }

    /* the same width for every image, the height follows from it (img.php writes width/height,
       so the space is right before the image loads) */
    .Slideshow-slide img {
        width: var(--slideshow-mobile-width);
        height: auto;
        max-height: var(--slideshow-mobile-height);
        object-fit: contain;
        object-position: center;
        background-position: center;
    }

    .Catalog-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        grid-template-columns: 1fr;
        row-gap: 0;
        margin: 0;
        background: white;
        border-top: var(--line-thickness-4) solid var(--color-1);
        border-bottom: 0;
        padding: var(--vertical-space-3) var(--page-padding-x);
        padding-bottom: calc(var(--vertical-space-3) + env(safe-area-inset-bottom, 0px));
    }

    /* space-between spreads the filters; the gap only keeps them apart on narrow phones */
    .Catalog-menu-nav {
        width: 100%;
        justify-content: space-between;
        gap: var(--horizontal-space-1);
    }

    .Catalog-menu-meta {
        display: none;
    }

    .Catalog {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .Catalog-list,
    .Catalog-item {
        min-width: 0;
    }

    .Catalog-detail {
        display: none;
    }

    .Catalog-row--desktop {
        display: none;
    }

    .Catalog-row--mobile {
        display: flex;
        align-items: baseline;
        column-gap: var(--horizontal-space-3);
        min-width: 0;
    }

    /* fixed width: never grows with a long range and pushes the title aside */
    .Catalog-row--mobile .Catalog-year {
        flex: 0 0 var(--catalog-year-width);
        min-width: 0;
        white-space: normal;
    }

    .Catalog-row--mobile .Catalog-meta {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .Catalog-row--mobile .Catalog-title,
    .Catalog-row--mobile .Catalog-category {
        display: inline;
        white-space: nowrap;
        text-align: left;
    }

    .Catalog-row--mobile .Catalog-category::before {
        content: ", ";
    }

    /* dot sits outside the ellipsed meta so it stays visible on truncated rows */
    .Catalog-row--mobile .Catalog-dot {
        flex-shrink: 0;
        margin-left: calc(0.2em - var(--horizontal-space-3));
    }

    .Catalog-row--mobile .Catalog-meta > .Catalog-dot {
        display: none;
        margin-left: 0.2em;
    }

    /* the open entry shows its whole line, wrapped, with the dot behind its last word */
    .Catalog-item.is-open .Catalog-row--mobile .Catalog-meta,
    .Catalog-item.is-open .Catalog-row--mobile .Catalog-title {
        white-space: normal;
    }

    .Catalog-item.is-open .Catalog-row--mobile .Catalog-meta > .Catalog-dot {
        display: inline;
    }

    .Catalog-item.is-open .Catalog-row--mobile > .Catalog-dot {
        display: none;
    }

    /* same columns as .Catalog-row--mobile so the captions line up with the titles */
    .Catalog-captions-wrap {
        grid-template-columns: var(--catalog-year-width) minmax(0, 1fr);
    }

    .Catalog-caption-grid {
        columns: 1;
    }

    .Catalog-panel-slot .Catalog-panel:not([hidden]) {
        max-width: 100%;
        overflow-wrap: break-word;
        padding: var(--vertical-space-4) 0 var(--vertical-space-6);
    }

    body.is-shop-view .Shop-grid,
    body.template-shop .Shop-grid,
    body.template-cart .Shop-grid {
        padding: 0;
    }

    .Shop-grid {
        grid-template-columns: 1fr;
    }

    .Shop-tile {
        aspect-ratio: auto;
        padding: var(--vertical-space-5) var(--page-padding-x) var(--vertical-space-4);
        border-right: 0;
    }

    .Shop-tile:nth-child(3n+1):nth-last-child(-n+3),
    .Shop-tile:nth-child(3n+1):nth-last-child(-n+3) ~ .Shop-tile {
        border-bottom: var(--line-thickness-4) solid var(--color-1);
    }

    .Shop-tile:first-child {
        border-top: var(--line-thickness-4) solid var(--color-1);
    }

    .Shop-tile-link {
        flex: none;
        justify-content: space-between;
        gap: var(--vertical-space-5);
        min-height: 42vh;
    }

    .Shop-tile-image {
        flex: none;
        width: 75%;
        margin-inline: auto;
        margin-bottom: 0;
        justify-content: center;
    }

    .Shop-tile-image.is-landscape {
        width: 100%;
        margin-inline: 0;
    }

    .Shop-tile-image img {
        width: 100%;
        max-width: 100%;
        max-height: none;
        height: auto;
    }

    .Product,
    .Product-meta {
        grid-template-columns: 1fr;
    }

    .Product {
        min-height: 0;
        width: 100%;
        row-gap: var(--vertical-space-5);
        padding: calc(var(--site-header-height) + var(--vertical-space-5)) var(--page-padding-x) var(--vertical-space-6);
        border-bottom: var(--line-thickness-4) solid var(--color-1);
    }

    body.template-shop .Shop-tile:first-child,
    body.template-cart .Shop-tile:first-child {
        border-top: 0;
    }

    .Product-cover {
        width: 75%;
        margin-inline: auto;
    }

    .Product-cover.is-landscape {
        width: 100%;
    }

    .Product-cover img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .Product-info {
        min-height: 0;
    }

    .Product-meta {
        margin-top: var(--vertical-space-4);
    }

    .Product-buy {
        text-align: center;
        margin-top: var(--vertical-space-5);
    }

    .Product-vat {
        text-align: center;
    }

    .Product-add {
        width: 100%;
        min-width: 0;
    }

    .Cart {
        padding-top: calc(var(--site-header-height) + var(--vertical-space-2));
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--vertical-space-6);
    }

    .Cart-top {
        grid-column: 1;
        grid-row: auto;
        padding: 0 var(--page-padding-x) var(--vertical-space-3);
    }

    .Cart-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .Cart-items {
        display: block;
    }

    .Cart-summary-title,
    .Cart-item-removeForm {
        display: none;
    }

    .Cart-totals {
        grid-column: 1;
        grid-row: auto;
        display: flex;
        flex-direction: column;
        margin-top: 0;
        margin-right: 0;
    }

    .Cart-totals > * {
        grid-column: auto;
        grid-row: auto !important;
    }

    .Cart-totalStack {
        display: contents;
        height: auto;
        border-bottom: 0;
    }

    .Cart-totalStack .Cart-total {
        border-bottom: var(--line-thickness-4) solid var(--color-1);
    }

    .Cart-total,
    .Cart-item {
        height: auto;
    }

    .Cart-item {
        grid-column: auto;
        grid-row: auto !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "image qty"
            "info info";
        row-gap: var(--vertical-space-4);
        align-items: start;
        padding: var(--vertical-space-4) var(--page-padding-x) calc(var(--vertical-space-3) + var(--vertical-space-1));
    }

    .Cart-items .Cart-item:first-child {
        border-top: 0;
        padding-top: 0;
    }

    .Cart-item-image {
        grid-area: image;
        width: auto;
        height: auto;
        justify-content: flex-start;
    }

    .Cart-item-image img {
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 10em;
        object-fit: contain;
    }

    .Cart-item-qty {
        grid-area: qty;
        justify-content: flex-end;
        padding-top: 0;
    }

    .Cart-item-info {
        grid-area: info;
        padding-top: 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--horizontal-space-3);
    }

    .Cart-item-title {
        margin-bottom: 0;
    }

    .Cart-total {
        padding: var(--vertical-space-3) var(--page-padding-x);
    }

    .Cart-total--subtotal {
        border-top: 0;
        border-bottom: 0;
        padding-top: var(--vertical-space-4);
        padding-bottom: var(--vertical-space-2);
    }

    .Cart-totalStack .Cart-total--shipment {
        padding-top: var(--vertical-space-2);
        padding-bottom: var(--vertical-space-4);
    }

    .Cart-totalStack .Cart-total--total {
        border-bottom: 0;
        padding-top: var(--vertical-space-3);
        padding-bottom: 0;
    }

    .Cart-checkoutForm {
        align-self: stretch;
        width: 100%;
        margin-top: var(--vertical-space-6);
        margin-bottom: var(--vertical-space-6);
        padding: 0 var(--page-padding-x);
    }

    .Checkout {
        grid-template-columns: 1fr;
        row-gap: var(--vertical-space-6);
    }

    .Checkout-fields {
        grid-template-columns: 1fr;
    }

    .Checkout-field:not(.is-wide) + .Checkout-field:not(.is-wide) {
        border-left: 0;
    }

    .Checkout-summary {
        margin-right: 0;
        margin-bottom: var(--vertical-space-6);
    }

    .Checkout-summary .Cart-summary-title {
        display: block;
    }

    .Checkout-summary .Cart-checkout {
        width: calc(100% - 2 * var(--page-padding-x));
        margin-left: var(--page-padding-x);
    }
}

.SiteFooter {
    margin-top: var(--vertical-space-9);
    border-top: var(--line-thickness-4) solid var(--color-1);
}

.SiteFooter-inner {
    display: grid;
    grid-template-columns: var(--catalog-columns);
    column-gap: var(--catalog-column-gap);
    align-items: baseline;
    padding: var(--site-footer-padding-y) var(--page-padding-x);
}

/* the bottom row keeps its links on one line; on narrow screens its right column grows past the catalog column instead of wrapping */
@media only screen and (min-width: 901px) {
    .SiteFooter-inner:not(.SiteFooter-newsletter) {
        grid-template-columns: minmax(0, 1.4fr) minmax(max-content, 1fr);
    }
}

.SiteFooter-title,
.SiteFooter-copy {
    margin: 0;
}

.SiteFooter-copy {
    white-space: nowrap;
}

.SiteFooter-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--horizontal-space-4);
    min-width: 0;
}

.SiteFooter-nav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 0 var(--menu-item-gap);
    min-width: 0;
}

/* just above the mobile layout the links move closer, so they don't push into the site title */
@media only screen and (min-width: 901px) and (max-width: 960px) {
    .SiteFooter-nav {
        gap: 0 var(--horizontal-space-3);
    }
}

.SiteFooter-title a,
.SiteFooter-nav a,
.SiteFooter-toggle {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.SiteFooter-toggle {
    padding: 0;
    font: inherit;
}

.SiteFooter-short {
    display: none;
}

/* newsletter sign-up, sent to rapidmail by script.js; title and form sit in the footer's two columns */
.SiteFooter-newsletter[hidden] {
    display: none;
}

.SiteFooter-newsletter {
    align-items: start;
    padding-bottom: var(--vertical-space-5);
    border-bottom: var(--line-thickness-4) solid var(--color-1);
}

.Newsletter {
    display: flex;
    flex-direction: column;
    gap: var(--vertical-space-3);
    min-width: 0;
}

.Newsletter-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--vertical-space-2) var(--horizontal-space-4);
}

.Newsletter-field {
    flex: 1 1 8em;
    min-width: 0;
}

.Newsletter-field input {
    width: 100%;
    padding: 0;
    border: 0;
    border-bottom: var(--line-thickness-4) solid var(--color-1);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}

.Newsletter-field input::placeholder {
    color: var(--color-1);
    opacity: 0.4;
}

/* the line stays black while typing; the cursor shows which field is active */
.Newsletter-field input:focus {
    outline: none;
}

.Newsletter-field.has-error input {
    border-bottom-color: red;
}

.Newsletter-submit {
    flex: 0 0 auto;
    padding: 0;
    font: inherit;
}

.Newsletter-submit:disabled {
    opacity: 0.4;
}

.Newsletter-note,
.Newsletter-status {
    font-size: var(--font-size-caption);
    line-height: var(--line-height-caption);
}

.Newsletter-note a {
    color: inherit;
    text-decoration: none;
}

.Newsletter.is-sent .Newsletter-fields,
.Newsletter.is-sent .Newsletter-note {
    display: none;
}

.Newsletter.is-sent .Newsletter-status {
    font-size: inherit;
    line-height: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media only screen and (max-width: 900px) {
    .SiteFooter-inner {
        grid-template-columns: 1fr;
        row-gap: var(--vertical-space-3);
    }

    /* site title and year share the top line, the links run below. The links stay on one line: once they no longer fit at the normal size, the type switches to vw (German is longer because of "Datenschutz") */
    .SiteFooter-inner:not(.SiteFooter-newsletter) {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: var(--horizontal-space-4);
        row-gap: 0;
        font-size: min(1em, 4.75vw);
    }

    html:lang(de) .SiteFooter-inner:not(.SiteFooter-newsletter) {
        font-size: min(1em, 4.1vw);
    }

    .SiteFooter-meta {
        display: contents;
    }

    .SiteFooter-nav {
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: 0 var(--horizontal-space-1);
    }

    .SiteFooter-long {
        display: none;
    }

    .SiteFooter-short {
        display: inline;
    }
}

/* the footer sits at the bottom of the window, also when the text is short */
body.template-legal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: white;
}

body.template-legal .Legal {
    flex: 1 0 auto;
}

/* font-size sits on the columns so 1em in --site-header-height resolves to the header size */
.Legal {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--horizontal-space-4);
    row-gap: var(--vertical-space-6);
    padding-top: var(--site-header-height);
    padding-bottom: var(--vertical-space-9);
}

.Legal-meta,
.Legal-privacy {
    font-size: var(--font-size-0);
}

.Legal-meta {
    grid-column: 6 / span 2;
}

.Legal-privacy {
    grid-column: 8 / -1;
}

/* paragraphs are separated by one empty line */
.Legal-meta p,
.Legal-privacy p {
    margin: 0 0 calc(1em * var(--line-height-1));
}

.Legal-meta p:last-child,
.Legal-privacy p:last-child {
    margin-bottom: 0;
}

.Legal a {
    color: inherit;
    text-decoration: none;
}

@media only screen and (max-width: 900px) {
    .Legal {
        grid-template-columns: 1fr;
        padding-top: calc(var(--site-header-height) + var(--vertical-space-6));
    }

    /* bold words in textarea content act as indented subheadings */
    main strong,
    .InfoOverlay strong {
        display: block;
        padding-left: calc(var(--catalog-year-width) + var(--horizontal-space-3));
    }

    .Legal-meta,
    .Legal-privacy {
        grid-column: 1;
        font-size: var(--font-size-1);
    }
}

@media (hover: hover) {
    .SiteHeader .InnerHeader > a:hover,
    .SiteHeader-bag:hover,
    .InfoOverlay-toggle:hover,
    .InfoOverlay-close:hover,
    .SiteFooter-title a:hover,
    .SiteFooter-nav a:hover,
    .SiteFooter-toggle:hover,
    .InfoOverlay-inner a:hover,
    .Legal a:hover,
    .Newsletter-note a:hover,
    .Newsletter-submit:not(:disabled):hover,
    .Catalog-row:hover,
    .Catalog-caption-toggle:hover,
    .Slideshow-prev:hover,
    .Slideshow-next:hover,
    .Cart-item-qty button:hover,
    .Cart-item-remove:hover,
    .Checkout-back a:hover,
    .Checkout-terms a:hover,
    .Shop-tile-link:hover .Shop-tile-title {
        opacity: 0.5;
    }

    .Catalog-menu-filter:hover::after {
        color: inherit;
    }
}