/* page container */
HTML
{
    OVERFLOW-X: hidden;
}

BODY
{
    BOX-SIZING: border-box;
    DISPLAY: grid;
    GRID-TEMPLATE-ROWS: calc(155 * var(--cms-factor)) auto 1fr auto;
    MARGIN: 0;
    MIN-HEIGHT: 100vh;
    PADDING: 0 calc(40 * var(--cms-factor));
}

/* reduce side padding */
@media (max-width: 800px)
{
    BODY
    {
        GRID-TEMPLATE-ROWS: calc(125 * var(--cms-factor)) auto 1fr auto;
        PADDING: 0 calc(20 * var(--cms-factor));
    }
}

/* header sticky wrapper */
#sticky
{
    GRID-COLUMN: 1 / 2;
    GRID-ROW: 1 / 2;
    LEFT: 0;
    MARGIN: 0 calc(-40 * var(--cms-factor));
    POSITION: sticky;
    RIGHT: 0;
    TOP: 0;
    TRANSITION: transform 0.75s;
    Z-INDEX: 2000;
}

/* reduce side margin */
@media (max-width: 800px)
{
    #sticky
    {
        MARGIN-LEFT: calc(-20 * var(--cms-factor));
        MARGIN-RIGHT: calc(-20 * var(--cms-factor));
    }
}

/* header background */
#sticky:after,
#sticky:before
{
    BACKGROUND: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 35%, rgba(0, 0, 0, 0.5) 65%, rgba(0, 0, 0, 0.25) 85%, transparent 100%);
    BOTTOM: calc(-25 * var(--cms-factor));
    CONTENT: "";
    LEFT: 50%;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100vw;
    TRANSFORM: translateX(-50%);
    Z-INDEX: -1;
}

/* blur background of minimized header */
#sticky:after
{
    BACKGROUND: transparent;
    BOTTOM: calc(-25 * var(--cms-factor));
    TRANSITION: backdrop-filter 0.75s;
}

/* blur header background when minimized or interacted with */
#sticky.minimize:after,
#sticky:focus-within:after,
#sticky:hover:after
{
    BACKDROP-FILTER: blur(calc(10 * var(--cms-factor)));
}

/* class set via javascript */
#sticky:not(:focus-within):not(:hover).minimize
{
    TRANSFORM: translateY(-100%);
}

/* page header */
#head
{
    ALIGN-ITEMS: center;
    BOX-SIZING: border-box;
    DISPLAY: flex;
    GAP: calc(20 * var(--cms-factor));
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    MAX-WIDTH: calc(1440 * var(--cms-factor));
    PADDING: calc(20 * var(--cms-factor));
    WIDTH: 100%;
    Z-INDEX: 2000;
}

/* disable link underline in header */
#head A
{
    TEXT-DECORATION: none;
}

/* slim header */
@media (max-width: 800px)
{
    #head
    {
        PADDING-BOTTOM: calc(15 * var(--cms-factor));
        PADDING-TOP: calc(15 * var(--cms-factor));
    }
}

/* home link */
#logo
{
    FLEX: 0 0 auto;
    MAX-WIDTH: calc(165 * var(--cms-factor));
    ORDER: 0;
    WIDTH: 100%;
}

/* smaller logo */
@media (max-width: 800px)
{
    #logo
    {
        MAX-WIDTH: calc(135 * var(--cms-factor));
    }
}

/* logo image fills home link width */
#logo > IMG
{
    WIDTH: 100%;
}

/* high resolution / mouse main navigation */
@media (min-width: 801px) and (pointer: fine)
{
    /* hide functional checkbox */
    #menu-trigger,

    /* hide unused elements */
    #menu-out,
    #menu-label,
    #menu-close
    {
        DISPLAY: none;
    }

    /* menu container */
    #menu
    {
        FLEX: 1 1 0;
        MARGIN: calc(-5 * var(--cms-factor)) calc(-15 * var(--cms-factor));
        TEXT-ALIGN: right;
    }

    /* general menu list container */
    #menu UL
    {
        LIST-STYLE: none;
        MARGIN: 0;
    }

    /* general menu list item */
    #menu LI
    {
        MARGIN: 0;
        TEXT-ALIGN: left;
    }

    /* general menu link */
    #menu A
    {
        DISPLAY: block;
        PADDING: calc(5 * var(--cms-factor)) calc(15 * var(--cms-factor));
    }

    /* base level menu list item */
    #menu > UL > LI
    {
        DISPLAY: inline-block;
    }

    /* base level menu link */
    #menu > UL > LI > A
    {
        COLOR: var(--cms-color);
        TEXT-TRANSFORM: uppercase;
    }

    /* highlight base level active menu link */
    #menu > UL > LI:has(> A.active):after
    {
        BACKGROUND: var(--cms-color);
        BOTTOM: 0;
        CONTENT: "";
        HEIGHT: calc(2.5 * var(--cms-factor));
        LEFT: calc(15 * var(--cms-factor));
        POSITION: absolute;
        RIGHT: calc(15 * var(--cms-factor));
    }

    /* highlight base level activity of container */
    #menu > UL > LI:has(> A.container):hover A,
    #menu > UL > LI:has(> A.container):focus-within A
    {
        BACKGROUND-COLOR: var(--cms-background-alt);
        COLOR: var(--cms-color-alt);
    }

    /* highlight base level activity of non-container */
    @keyframes menu-underline
    {
          0% { WIDTH: 0; }
        100% { WIDTH: calc(100% - 30 * var(--cms-factor)); }
    }

    #menu > UL > LI > A:not(.container):not(.menu-switch):hover
    {
        COLOR: var(--cms-color-highlight);
    }

    #menu > UL > LI:not(:has(A.container)):hover:after
    {
        ANIMATION: menu-underline 0.5s forwards;
        BACKGROUND: var(--cms-color-highlight);
        BOTTOM: 0;
        CONTENT: "";
        HEIGHT: calc(2.5 * var(--cms-factor));
        LEFT: calc(15 * var(--cms-factor));
        POINTER-EVENTS: none;
        POSITION: absolute;
    }

    /* 2nd+ level menu list container */
    #menu UL UL
    {
        BACKGROUND: var(--cms-background-alt);
        LINE-HEIGHT: 115%;
        MAX-WIDTH: calc(235 * var(--cms-factor));
        MIN-WIDTH: 100%;
        POSITION: absolute;
        RIGHT: 0;
        WIDTH: max-content;
        Z-INDEX: 1000;
    }

    /* 2nd+ level menu link */
    #menu UL UL A
    {
        COLOR: var(--cms-color-alt);
        DISPLAY: block;
        FONT-WEIGHT: normal;
    }

    /* highlight 2nd+ level active menu link */
    #menu UL UL A.active
    {
        FONT-WEIGHT: bold;
    }

    #menu UL UL LI:first-child > A
    {
        PADDING-TOP: calc(12.5 * var(--cms-factor));
    }

    #menu UL UL LI:first-child > A.menu-switch:after
    {
        TOP: calc(7.5 * var(--cms-factor));
    }

    #menu UL UL LI:last-child > A
    {
        PADDING-BOTTOM: calc(12.5 * var(--cms-factor));
    }

    #menu UL UL LI:last-child > A.menu-switch:after
    {
        BOTTOM: calc(7.5 * var(--cms-factor));
    }

    /* put 3rd+ level menu list container on left side */
    #menu UL UL UL
    {
        MIN-WIDTH: 0;
        RIGHT: 100%;
        TOP: 0;
    }

    #menu UL UL LI:not(:first-child) UL
    {
        TOP: calc(-7.5 * var(--cms-factor));
    }

    /* hide 2nd+ menu level */
    #menu LI UL,

    /* hide sub-subsequent item when hovered */
    #menu LI:hover LI UL,
    #menu LI LI:hover LI UL,
    #menu LI LI LI:hover LI UL,
    #menu LI LI LI LI:hover LI UL,
    #menu LI LI LI LI LI:hover LI UL
    {
        OPACITY: 0;
        POINTER-EVENTS: none;
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
    }

    /* show focused 2nd+ menu level */
    #menu A:focus ~ UL,

    /* show 2nd+ menu level that contains focus */
    #menu UL:focus-within,

    /* show subsequent menu item on hover */
    #menu LI:hover UL,
    #menu LI LI:hover UL,
    #menu LI LI LI:hover UL,
    #menu LI LI LI LI:hover UL,
    #menu LI LI LI LI LI:hover UL,
    #menu LI LI LI LI LI LI:hover UL
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
        TRANSITION: opacity 0.5s;
        Z-INDEX: 1000;
    }

    /* make space for open / close button on right side */
    #menu A:has(+ A.menu-switch)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    /* put open / close button on right side */
    #menu A.menu-switch
    {
        BOTTOM: 0;
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 0;
        WIDTH: calc(35 * var(--cms-factor));
    }

    /* display down-pointing arrow on open / close button */
    #menu A.menu-switch:after
    {
        BACKGROUND: var(--cms-color);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    /* highlight arrow on active open / close button */
    #menu A.menu-switch:focus:after,
    #menu A.menu-switch:has(+ UL:focus-within):after,
    #menu LI:hover > A.menu-switch:after
    {
        BACKGROUND-COLOR: var(--cms-color-alt);
    }

    /* make space for 2nd+ level open / close button on left side */
    #menu UL UL A:has(+ A.menu-switch)
    {
        PADDING-LEFT: calc(35 * var(--cms-factor));
        PADDING-RIGHT: calc(15 * var(--cms-factor));
    }

    /* put 2nd+ level open / close button on left side */
    #menu UL UL A.menu-switch
    {
        LEFT: 0;
        RIGHT: auto;
    }

    /* display left-pointing arrow on 2nd+ level open / close button */
    #menu UL UL A.menu-switch:after
    {
        BACKGROUND: var(--cms-color-alt);
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><g transform='rotate(90 320 512)'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></g></svg>");
    }
}

/* low resolution / touch screen main navigation */
@media (max-width: 800px) or (pointer: coarse)
{
    /* clip overflow */
    #sticky
    {
        MARGIN-BOTTOM: calc(-25 * var(--cms-factor));
        OVERFLOW: hidden;
    }

    #sticky:after,
    #sticky:before
    {
        BOTTOM: 0;
    }

    /* class set via javascript */
    #sticky:not(:focus-within):not(:hover).minimize
    {
        TRANSFORM: translateY(calc(-100% + 25 * var(--cms-factor)));
    }

    /* hide functional checkbox */
    #menu-trigger
    {
        DISPLAY: none;
    }

    /* overlay that closes the menu */
    #menu-out
    {
        BACKDROP-FILTER: blur(calc(5 * var(--cms-factor)));
        BACKGROUND: var(--cms-overlay-background);
        INSET: 0;
        OPACITY: 0;
        POSITION: fixed;
        TRANSFORM: translateX(100vw);
        TRANSITION: opacity 0.5s, transform 0s 0.5s;
        WILL-CHANGE: opacity, transform;
        Z-INDEX: 950;
    }

    /* menu open / close button */
    #menu-label,
    #menu-close
    {
        COLOR: var(--cms-color);
        FONT-FAMILY: "Entypo";
        FONT-SIZE: calc(40 * var(--cms-factor));
        FONT-WEIGHT: normal;
        HEIGHT: calc(40 * var(--cms-factor));
        LINE-HEIGHT: calc(40 * var(--cms-factor));
        ORDER: 2;
        TEXT-ALIGN: center;
        WIDTH: calc(40 * var(--cms-factor));
    }

    /* menu container */
    #menu
    {
        BACKGROUND: var(--cms-background);
        BOTTOM: 0;
        BOX-SIZING: border-box;
        CONTAIN: content;
        MAX-WIDTH: calc(350 * var(--cms-factor));
        OVERFLOW-Y: auto;
        PADDING: calc(100 * var(--cms-factor))
                 calc(20 * var(--cms-factor))
                 calc(50 * var(--cms-factor));
        POINTER-EVENTS: none;
        POSITION: fixed;
        RIGHT: 0;
        TOP: 0;
        TRANSFORM: translateX(100%);
        TRANSITION: transform 0.5s;
        WIDTH: 100%;
        WILL-CHANGE: transform;
        Z-INDEX: 975;
    }

    /* menu close button */
    #menu-close
    {
        BACKGROUND: var(--cms-button-background);
        COLOR: var(--cms-button-color);
        RIGHT: calc(20 * var(--cms-factor));
        OPACITY: 0;
        POINTER-EVENTS: none;
        POSITION: fixed;
        TOP: calc(20 * var(--cms-factor));
        TRANSITION: opacity 0.5s;
        WILL-CHANGE: opacity;
        Z-INDEX: 1000;
    }

    /* general menu list container */
    #menu UL
    {
        CONTAIN: content;
        LIST-STYLE: none;
        MARGIN: 0;
    }

    /* general menu list item */
    #menu LI
    {
        MARGIN: 0;
    }

    /* general menu link */
    #menu A
    {
        COLOR: var(--cms-color);
        DISPLAY: block;
        LINE-HEIGHT: calc(30 * var(--cms-factor));
        PADDING: calc(5 * var(--cms-factor)) 0;
        TEXT-WRAP: balance;
    }

    /* highlight active menu link */
    #menu A.active
    {
        COLOR: var(--cms-color-highlight);
    }

    /* 2nd+ level menu list container */
    #menu UL UL
    {
        BORDER-LEFT: calc(2.5 * var(--cms-factor)) solid var(--cms-color);
        PADDING-LEFT: calc(7.5 * var(--cms-factor));
    }

    /* 2nd+ level menu link */
    #menu UL UL A
    {
        FONT-WEIGHT: normal;
    }

    /* show overlay that closes the menu */
    #menu-trigger:checked ~ #menu-out
    {
        OPACITY: 1;
        TRANSFORM: translateX(0);
        TRANSITION: opacity 0.5s;
    }

    /* show menu */
    #menu-trigger:checked ~ #menu
    {
        POINTER-EVENTS: auto;
        TRANSFORM: translateX(0);
    }

    /* show menu close button */
    #menu-trigger:checked ~ #menu-close
    {
        OPACITY: 1;
        POINTER-EVENTS: auto;
    }

    /* hide 2nd+ menu level */
    #menu UL UL
    {
        CLIP-PATH: inset(100% 0 0 0);
        HEIGHT: 0;
        POINTER-EVENTS: none;
        TRANSFORM: translateY(-100%);
        TRANSITION: clip-path 0.5s, height 0.5s 0s, transform 0.5s;
        WILL-CHANGE: clip-path, height, transform;
    }

    /* show focused 2nd+ menu level */
    #menu UL A:focus ~ UL,

    /* show 2nd+ menu level that contains focus */
    #menu UL UL:focus-within
    {
        CLIP-PATH: inset(0 0 0 0);
        HEIGHT: 100%;
        POINTER-EVENTS: auto;
        TRANSFORM: translateY(0);
    }

    /* make space for open / close button on right side */
    #menu A:has(+ A.menu-switch)
    {
        PADDING-RIGHT: calc(35 * var(--cms-factor));
    }

    /* put open / close button on right side */
    #menu A.menu-switch
    {
        BACKGROUND: var(--cms-button-background);
        HEIGHT: calc(30 * var(--cms-factor));
        PADDING: 0;
        POSITION: absolute;
        RIGHT: 0;
        TOP: 5px;
        WIDTH: calc(30 * var(--cms-factor));
    }

    /* highlight active open / close button */
    #menu A.menu-switch:focus,
    #menu A.menu-switch:has(+ UL:focus-within)
    {
        BACKGROUND: var(--cms-button-background-alt);
    }

    /* display down-pointing arrow on open / close button */
    #menu A.menu-switch:after
    {
        BACKGROUND: var(--cms-button-color);
        CONTENT: "";
        INSET: 0;
        MASK-IMAGE: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 1024'><path fill='black' d='M512 320L320 512 128 320 0 448l320 320 320-320L512 320z'/></svg>");
        MASK-POSITION: center;
        MASK-REPEAT: no-repeat;
        MASK-SIZE: calc(10 * var(--cms-factor));
        POSITION: absolute;
    }

    /* highlight down-pointing arrow on active open / close button */
    #menu A.menu-switch:focus:after,
    #menu A.menu-switch:has(+ UL:focus-within):after
    {
        BACKGROUND: var(--cms-button-color-alt);
    }
}

/* header contact data */
#contact1
{
    BORDER-LEFT: calc(2.5 * var(--cms-factor)) solid var(--cms-color);
    FLEX: 0 0 auto;
    FONT-SIZE: calc(15.5 * var(--cms-factor));
    LINE-HEIGHT: 125%;
    PADDING-LEFT: calc(12.5 * var(--cms-factor));
}

#contact1 A
{
    COLOR: var(--cms-color);
    DISPLAY: inline-block;
    FONT-WEIGHT: 500;
    PADDING: calc(3.5 * var(--cms-factor)) 0;
}

#contact1 A:hover
{
    COLOR: var(--cms-color-highlight);
    TEXT-DECORATION: underline;
}

/* low resolution / touch screen main navigation */
@media (max-width: 800px) or (pointer: coarse)
{
    #contact1
    {
        BORDER-LEFT: none;
        BORDER-RIGHT: calc(2.5 * var(--cms-factor)) solid var(--cms-color);
        FLEX: 1 1 0;
        ORDER: 1;
        PADDING: 0 calc(12.5 * var(--cms-factor)) 0 0;
        TEXT-ALIGN: right;
    }
}

/* very low resolution */
@media (max-width: 500px)
{
    #contact1
    {
        DISPLAY: none;
    }
}

/* adapt to reduced side padding */
@media (max-width: 800px)
{
    #banner
    {
        MARGIN: 0 calc(-20 * var(--cms-factor));
    }
}

/* hero image container */
#banner-image
{
    GRID-COLUMN: 1 / 2;
    GRID-ROW: 1 / 3;
    MARGIN: 0 calc(-40 * var(--cms-factor));
    MIN-HEIGHT: 100vh;
}

/* hero image */
#banner-image > IMG
{
    HEIGHT: 100%;
    LEFT: 0;
    OBJECT-FIT: cover;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100%;
}

#banner-image:after
{
    BACKGROUND: rgba(0, 0, 0, 0.1);
    CONTENT: "";
    INSET: 0;
    POSITION: absolute;
    MIX-BLEND-MODE: darken;
}

/* hero content container */
#banner-content
{
    GRID-COLUMN: 1 / 2;
    GRID-ROW: 2 / 3;
    PADDING: calc(20 * var(--cms-factor)) 0;
    PLACE-SELF: center;
    FILTER: drop-shadow(0 0 calc(40 * var(--cms-factor)) var(--cms-background-alt));
}

#banner-image + #banner-content
{
    FILTER: drop-shadow(0 0 calc(40 * var(--cms-factor)) #000000);
}

/* main content container */
#body
{
    CONTAIN: content;
    MARGIN: 0 auto;
    MAX-WIDTH: calc(1280 * var(--cms-factor));
    PADDING: calc(50 * var(--cms-factor)) 0;
    WIDTH: 100%;
}

/* reduce main content container padding */
@media (max-width: 800px)
{
    #body
    {
        PADDING: calc(20 * var(--cms-factor)) 0;
    }
}

/* page footer */
#foot
{
    ALIGN-ITEMS: flex-end;
    COLOR: var(--cms-color-alt);
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: calc(20 * var(--cms-factor));
    JUSTIFY-CONTENT: space-between;
    MARGIN: 0 auto;
    MAX-WIDTH: calc(1400 * var(--cms-factor));
    PADDING: calc(50 * var(--cms-factor)) 0 calc(100 * var(--cms-factor));
    TEXT-ALIGN: left;
    WIDTH: 100%;
}

/* page footer background */
#foot:before
{
    BACKGROUND: linear-gradient(to top, rgba(0, 51, 51, 0.9) 0%, rgba(0, 51, 51, 0.7) 35%, rgba(0, 51, 51, 0.5) 65%, rgba(0, 51, 51, 0.25) 85%, transparent 100%);
    BOTTOM: 0;
    CONTENT: "";
    LEFT: 50%;
    OPACITY: 0.35;
    POSITION: absolute;
    TOP: 0;
    WIDTH: 100vw;
    TRANSFORM: translateX(-50%);
    Z-INDEX: -1;
}

/* page footer link */
#foot A
{
    COLOR: var(--cms-color-alt);
    FONT-WEIGHT: normal;
}

/* underline page footer link */
#foot A:focus,
#foot A:hover
{
    TEXT-DECORATION: underline;
}

/* language selector */
#language
{
    MARGIN: 0 calc(-5 * var(--cms-factor));
    TEXT-TRANSFORM: uppercase;
}

/* language selector link */
#language A
{
    DISPLAY: inline-block;
    PADDING: 0 calc(5 * var(--cms-factor));
}

/* separate adjacent language selector links */
#language A + A
{
    BORDER-LEFT: calc(1.5 * var(--cms-factor)) solid var(--cms-color-alt);
}

/* meta link container */
#link
{
    DISPLAY: flex;
    FLEX-WRAP: wrap;
    GAP: calc(10 * var(--cms-factor));
}

/* landing page menu */
#menu-lp
{
    DISPLAY: flex;
    FLEX: 1 1 100%;
    FLEX-WRAP: wrap;
    GAP: calc(10 * var(--cms-factor));
    JUSTIFY-CONTENT: center;
    MARGIN-TOP: calc(50 * var(--cms-factor));
}

/* top button */
#goto-top
{
    BOTTOM: calc(10 * var(--cms-factor));
    FONT-FAMILY: "Entypo";
    FONT-SIZE: calc(40 * var(--cms-factor));
    FONT-WEIGHT: normal;
    HEIGHT: calc(40 * var(--cms-factor));
    LEFT: calc(50% - 20 * var(--cms-factor));
    LINE-HEIGHT: calc(40 * var(--cms-factor));
    POSITION: fixed;
    TEXT-ALIGN: center;
    TEXT-DECORATION: none;
    TRANSFORM: translateY(calc(50 * var(--cms-factor)));
    TRANSITION: transform 0.5s;
    WIDTH: calc(40 * var(--cms-factor));
    WILL-CHANGE: transform;
}

/* slide in top button */
#goto-top.goto-top-show
{
    TRANSFORM: translateY(0);
}