/* ==========================================================================
   FRIESS METALLBAU — MAIN STYLESHEET
   Structure: Tokens -> Reset/Normalize -> Base -> Primitives -> Components
              -> Sections -> Utilities -> Page-specific overrides
   All spacing / colour / radius / typography / shadow values are exposed
   below as custom properties. Reference via var(--token-name); never a
   raw hex or px literal. Add new tokens here first if one is missing.
   ========================================================================== */

:root {
    /* ---- Color: brand ---- */
    --color-primary: #004183;
    /* Friess blue */
    --color-primary-dark: #002346;
    --color-primary-alt: #003265;
    --color-primary-darkest: #001224;
    --color-accent-blue: #54a9ff;

    /* ---- Color: neutrals ---- */
    --color-white: #fff;
    --color-black: #000;
    --color-cream: #f6f4f3;
    --color-neutral-100: #f2f2f2;
    --color-gray-150: #e4e4e4;
    --color-gray-200: #d9d9d9;
    --color-gray-225: #e4e4e4;
    --color-gray-250: #dcdfde;
    --color-gray-300: #ccc;
    --color-gray-400: #a1acb0;
    --color-gray-600: #666;

    /* ---- Shadows ---- */
    --shadow-xs: 0 .1px .3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.12);
    --shadow-sm: 0 .3px .4px rgba(0, 0, 0, 0.025), 0 .9px 1.5px rgba(0, 0, 0, 0.05), 0 3.5px 6px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 .9px 1.5px rgba(0, 0, 0, 0.03), 0 3.1px 5.5px rgba(0, 0, 0, 0.08), 0 14px 25px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014), 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038), 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085), 0 30px 42px -1px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012), 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035), 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07), 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117), 0 46px 60px -6px rgba(0, 0, 0, 0.2);

    /* ---- Vendor plugin overrides (Swiper reads this custom property) ---- */
    --swiper-navigation-color: var(--color-primary);
}

/* ════════════════════════ RESET / NORMALIZE ════════════════════════ */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: 0;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

/* ════════════════════════════════ BASE ════════════════════════════════ */

*,
*::before,
*::after,
input[type="search"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

html {
    font-size: 62.5%
}

body {
    font-size: 16px;
    font: 1.6rem/1.5 "Karla", Helvetica, Arial, Geneva, sans-serif;
    position: relative
}

h1,
h2,
h3,
h4,
h5,
h6,
caption,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0 0 .75em;
    line-height: 1.2;
    font-weight: bold;
    color: var(--color-primary-dark)
}

h1,
.h1 {
    font-size: 3.6rem;
    letter-spacing: .025em;
    font-weight: normal
}

h2,
caption,
.h2 {
    font-size: 2.4rem;
    letter-spacing: .015em;
    font-weight: normal
}

h3,
.h3 {
    font-size: 2.1rem;
    letter-spacing: .025em;
    font-weight: normal
}

h4,
.h4 {
    font-size: 1em
}

h5,
.h5 {
    margin: 0 0 .4em;
    font-size: 1em
}

h6,
.h6 {
    margin: 0 0 .2em;
    font-size: 1em
}

p,
ul,
ol,
dl,
blockquote,
pre,
fieldset,
figure,
address,
table,
details,
iframe,
video,
audio,
.p,
.box,
.table-responsive,
.media-responsive,
.flex-search,
.mb,
.mod-wrapper,
.accordion,
[data-oembed-url],
[class*="col-"] {
    margin: 0 0 1.5em
}

.p {
    font-size: 1em;
    font-weight: normal
}

li ul,
li ol {
    margin: 0
}

ul,
ol {
    padding-left: 0
}

ul {
    list-style: outside disc
}

ol {
    list-style-position: outside
}

ol ol,
ul ul {
    margin-bottom: 0
}

li {
    margin: 0 0 0 1.5em
}

ol ol li,
ul ul li {
    margin: 0 0 0 3em
}

dt {
    font-weight: bold
}

dd {
    padding-left: 1.5em
}

abbr[title] {
    cursor: help
}

hr {
    clear: both;
    height: 1px;
    margin: 1.5em 0;
    border: 0;
    color: var(--color-gray-600);
    background-color: var(--color-gray-600)
}

img,
embed,
object,
video {
    max-width: 100%;
    height: auto;
    vertical-align: middle
}

video,
audio {
    display: block
}

figcaption {
    margin-top: .75em;
    font-style: italic
}

blockquote {
    padding: 0 1.5em;
    font-style: italic
}

tt,
code,
kbd,
samp,
pre {
    font-family: "Courier New", Courier, mono
}

kbd {
    border-style: solid;
    border-width: 1px 2px 2px 1px;
    padding: 0 2px;
    border-radius: 3px;
    background-color: var(--color-cream)
}

figcaption,
small,
.small,
.form-hint,
label.error,
.asset-meta,
.cookie-alert {
    font-size: .92em
}

iframe {
    display: block;
    border: 0;
    padding: 0;
    width: 100%
}

dialog {
    border: 0;
    padding: 1.5em;
    overflow: initial;
    width: 90%;
    max-width: 800px;
    box-shadow: var(--shadow-lg);
    border-radius: .2em;
    background-color: var(--color-white);
}

dialog::backdrop {
    background-color: rgba(0, 0, 0, .7)
}

dialog>button {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2em;
    aspect-ratio: 1;
    padding: 0;
    transform: translate(50%, -50%);
    border-radius: 100vw
}

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

    dialog>button {
        top: 25px;
        right: 25px;
        border: 1px solid black !important;
    }
    #js-dialog-19.card-overlay{
        padding-top: 31px;
    }
}

summary {
    list-style: none;
    font-weight: bold
}

@supports not (-ms-ime-align:auto) {
    summary {
        cursor: pointer;
        margin: -1.5em;
        padding: 1.5em;
        overflow: hidden
    }

    summary::-webkit-details-marker {
        display: none
    }

    summary {
        display: flex;
        align-items: baseline
    }

    summary::before {
        content: "";
        position: relative;
        flex: 0 0 auto;
        top: .2em;
        width: 1em;
        height: 1em;
        margin-right: .5em;
        background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M441.9%20167.3l-19.8-19.8c-4.7-4.7-12.3-4.7-17%200L224%20328.2%2042.9%20147.5c-4.7-4.7-12.3-4.7-17%200L6.1%20167.3c-4.7%204.7-4.7%2012.3%200%2017l209.4%20209.4c4.7%204.7%2012.3%204.7%2017%200l209.4-209.4c4.7-4.7%204.7-12.3%200-17z%22%2F%3E%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: .75em .86em;
        transform: rotate(-90deg);
        transition: transform .2s
    }

    details[open] summary::before {
        transform: rotate(0)
    }

    summary>* {
        display: inline;
        margin-bottom: 0
    }

    summary+* {
        margin-top: 1.5em
    }
}

.optimale-zeilenlaenge {
    color: red
}

a {
    color: var(--color-primary);
    text-decoration: none
}

a:focus,
a:hover,
a:active {
    color: var(--color-black);
    text-decoration: underline
}

:focus:not(:focus-visible) {
    outline: 0
}

a img {
    border: 0
}

[href^="http:"]::after,
[href^="https:"]::after,
.show-icon[href^="/"]::after,
.document-lst::after,
[href$=".csv" i]::before,
[href*=".csv?" i]::before,
[href$=".doc" i]::before,
[href*=".doc?" i]::before,
[href$=".docx" i]::before,
[href*=".docx?" i]::before,
[href$=".dotx" i]::before,
[href*=".dotx?" i]::before,
[href$=".docm" i]::before,
[href*=".docm?" i]::before,
[href$=".dot" i]::before,
[href*=".dot?" i]::before,
[href$=".jpg" i]::before,
[href*=".jpg?" i]::before,
[href$=".jpeg" i]::before,
[href*=".jpeg?" i]::before,
[href$=".gif" i]::before,
[href*=".gif?" i]::before,
[href$=".eps" i]::before,
[href*=".eps?" i]::before,
[href$=".pdf" i]::before,
[href*=".pdf?" i]::before,
[href$=".png" i]::before,
[href*=".png?" i]::before,
[href$=".potm" i]::before,
[href*=".potm?" i]::before,
[href$=".potx" i]::before,
[href*=".potx?" i]::before,
[href$=".pps" i]::before,
[href*=".pps?" i]::before,
[href$=".ppsm" i]::before,
[href*=".ppsm?" i]::before,
[href$=".ppsx" i]::before,
[href*=".ppsx?" i]::before,
[href$=".ppt" i]::before,
[href*=".ppt?" i]::before,
[href$=".pptm" i]::before,
[href*=".pptm?" i]::before,
[href$=".pptx" i]::before,
[href*=".pptx?" i]::before,
[href$=".psd" i]::before,
[href*=".psd? " i]::before,
[href$=".rss" i]::before,
[href*=".rss?" i]::before,
[href$=".rtf" i]::before,
[href*=".rtf" i]::before,
[href$=".svg" i]::before,
[href*=".svg?" i]::before,
[href$=".tif" i]::before,
[href*=".tif?" i]::before,
[href$=".tiff" i]::before,
[href*=".tiff?" i]::before,
[href$=".txt" i]::before,
[href*=".txt?" i]::before,
[href$=".vcf" i]::before,
[href*=".vcf?" i]::before,
[href$=".xlam" i]::before,
[href*=".xlam?" i]::before,
[href$=".xls" i]::before,
[href*=".xls?" i]::before,
[href$=".xlt" i]::before,
[href*=".xlt?" i]::before,
[href$=".xlsb" i]::before,
[href*=".xlsb?" i]::before,
[href$=".xlsm" i]::before,
[href*=".xlsm?" i]::before,
[href$=".xlsx" i]::before,
[href*=".xlsx?" i]::before,
[href$=".xltm" i]::before,
[href*=".xltm?" i]::before,
[href$=".xltx" i]::before,
[href*=".xltx?" i]::before,
[href$=".zip" i]::before,
[href*=".zip?" i]::before,
[href^="mailto\3A"]::before,
[data-email-link]::before,
[href^="tel\3A"]::before,
[href^="https://www.google.com/maps/"]::before,
[href^="http://www.google.com/maps/"]::before,
[href^="https://maps.google.com/"]::before,
[href^="http://maps.google.com/"]::before,
[href^="https://goo.gl/maps/"]::before,
.download-icn::before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    padding-right: .25em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0)
}

[href$=".doc" i]::before,
[href*=".doc?" i]::before,
[href$=".docm" i]::before,
[href*=".docm?" i]::before,
[href$=".docx" i]::before,
[href*=".docx?" i]::before,
[href$=".dot" i]::before,
[href*=".dot?" i]::before,
[href$=".dotx" i]::before,
[href*=".dotx?" i]::before,
[href$=".rtf" i]::before,
[href*=".rtf?" i]::before {
    content: "\f1c2"
}

[href$=".pdf" i]::before,
[href*=".pdf?" i]::before {
    content: "\f1c1"
}

[href$=".potm" i]::before,
[href*=".potm?" i]::before,
[href$=".potx" i]::before,
[href*=".potx?" i]::before,
[href$=".pps" i]::before,
[href*=".pps?" i]::before,
[href$=".ppsm" i]::before,
[href*=".ppsm?" i]::before,
[href$=".ppsx" i]::before,
[href*=".ppsx?" i]::before,
[href$=".ppt" i]::before,
[href*=".ppt?" i]::before,
[href$=".pptm" i]::before,
[href*=".pptm?" i]::before,
[href$=".pptx" i]::before,
[href*=".pptx?" i]::before {
    content: "\f1c4"
}

[href$=".rss" i]::before,
[href*=".rss?" i]::before {
    content: "\f09e"
}

[href$=".txt" i]::before,
[href*=".txt?" i]::before {
    content: "\f0f6"
}

[href$=".vcf" i]::before,
[href*=".vcf?" i]::before {
    content: "\f007"
}

[href$=".csv" i]::before,
[href*=".csv?" i]::before,
[href$=".xlam" i]::before,
[href*=".xlam?" i]::before,
[href$=".xls" i]::before,
[href*=".xls?" i]::before,
[href$=".xlt" i]::before,
[href*=".xlt?" i]::before,
[href$=".xlsb" i]::before,
[href*=".xlsb?" i]::before,
[href$=".xlsm" i]::before,
[href*=".xlsm?" i]::before,
[href$=".xlsx" i]::before,
[href*=".xlsx?" i]::before,
[href$=".xltm" i]::before,
[href*=".xltm?" i]::before,
[href$=".xltx" i]::before,
[href*=".xltx?" i]::before {
    content: "\f1c3"
}

[href$=".zip" i]::before,
[href*=".zip?" i]::before {
    content: "\f1c6"
}

[href^="https://www.google.com/maps/"]::before,
[href^="http://www.google.com/maps/"]::before,
[href^="https://maps.google.com/"]::before,
[href^="http://maps.google.com/"]::before,
[href^="https://goo.gl/maps/"]::before {
    content: "\f041"
}

[href$=".jpg" i]::before,
[href*=".jpg?" i]::before,
[href$=".jpeg" i]::before,
[href*=".jpeg?" i]::before,
[href$=".gif" i]::before,
[href*=".gif?" i]::before,
[href$=".eps" i]::before,
[href*=".eps?" i]::before,
[href$=".png" i]::before,
[href*=".png?" i]::before,
[href$=".psd" i]::before,
[href*=".psd?" i]::before,
[href$=".svg" i]::before,
[href*=".svg?" i]::before,
[href$=".tif" i]::before,
[href*=".tif?" i]::before,
[href$=".tiff" i]::before,
[href*=".tiff?" i]::before {
    content: "\f1c5"
}

.download-icn::before {
    content: "\f019"
}

[href^="mailto:"]::before,
[data-email-link]::before {
    content: "\f003"
}

[href^="tel:"]::before {
    content: "\f095"
}

[href^="http:"]::after,
[href^="https:"]::after {
    padding-right: 0;
    padding-left: .25em;
    content: "\f08e"
}

[href*=".friess-metallbau.ch"]::after,
[href*=".backslash.ch"]::after,
[data-email-link]::after,
.no-icon::after,
.no-icon::before,
.nav [href]::after,
.subnav [href]::after,
.footer [href]::after,
.mod-dam--gallery a::before {
    content: none;
    padding: 0
}

.os-url .show-icon[href^="https://govis-friess-metallbau.backslash.ch"]::after,
.os-url .show-icon[href^="https://www.friess-metallbau.ch"]::after,
.show-icon[href^="/"]::after {
    content: "\f0c1"
}

.document-lst::after {
    content: "\f0c5"
}

fieldset {
    clear: both;
    min-width: 0;
    border: 1px solid var(--color-gray-600);
    padding: 1.5em
}

fieldset.reset {
    margin: 0;
    border: 0;
    padding: 0;
    background-color: transparent
}

legend {
    display: table;
    color: var(--color-black);
    font-weight: bold;
    font-size: 1.17em
}

[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=file],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea,
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    border: 1px solid var(--color-gray-300);
    padding: .25em .5em;
    background-color: var(--color-white);
    border-radius: 2px
}

textarea {
    min-height: 5em;
    resize: vertical
}

select:not([multiple]) {
    display: block;
    padding-right: 1.5em;
    width: 100%;
    max-width: 100%;
    margin: 0;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik00NDEuOSAxNjcuM2wtMTkuOC0xOS44Yy00LjctNC43LTEyLjMtNC43LTE3IDBMMjI0IDMyOC4yIDQyLjkgMTQ3LjVjLTQuNy00LjctMTIuMy00LjctMTcgMEw2LjEgMTY3LjNjLTQuNyA0LjctNC43IDEyLjMgMCAxN2wyMDkuNCAyMDkuNGM0LjcgNC43IDEyLjMgNC43IDE3IDBsMjA5LjQtMjA5LjRjNC43LTQuNyA0LjctMTIuMyAwLTE3eiI+PC9wYXRoPjwvc3ZnPg==');
    background-repeat: no-repeat;
    background-position: right .75em top 50%;
    background-size: .75em .86em
}

select::-ms-expand {
    display: none
}

::-webkit-date-and-time-value {
    min-height: 1.25em
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

[type=checkbox],
[type=radio] {
    border: 0;
    margin-right: .25em
}

[type=date]:focus,
[type=datetime]:focus,
[type=datetime-local]:focus,
[type=email]:focus,
[type=file]:focus,
[type=month]:focus,
[type=number]:focus,
[type=password]:focus,
[type=search]:focus,
[type=tel]:focus,
[type=text]:focus,
[type=time]:focus,
[type=url]:focus,
[type=week]:focus,
select:focus,
textarea:focus,
button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus,
summary:focus {
    outline: 3px solid transparent;
    border-color: #0074a9;
    box-shadow: 0 0 0 5px rgba(21, 156, 228, 0.4)
}

[disabled],
[readonly] {
    border-style: dotted;
    cursor: not-allowed
}

[disabled] {
    opacity: .5
}

button+button[type=reset] {
    margin-left: 1em
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

caption {
    text-align: left
}

table th,
table td {
    vertical-align: top;
    border-bottom: 1px solid var(--color-neutral-100);
    padding: .5em .5em
}

table th {
    text-align: left;
    font-weight: normal
}

table:not(.calendar) thead th {
    vertical-align: bottom;
    border-bottom-width: 2px;
    padding: .5em .5em;
    font-size: 1.6rem;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: .01em
}

table tbody th,
table tfoot th {
    border-right: 1px solid var(--color-neutral-100)
}

table tr:first-child th,
table tr:first-child td {
    border-top: 1px solid var(--color-neutral-100)
}

table:not(.calendar) thead tr:first-child th,
table:not(.calendar) thead tr:first-child td {
    border-top: 0
}

table:not(.calendar) thead~tbody tr:last-child {
    border-bottom: 2px solid var(--color-neutral-100)
}

table tfoot tr:first-child td {
    border-top: 2px solid var(--color-neutral-100)
}

table tfoot tr:last-child th,
table tfoot tr:last-child td {
    border-top: 2px solid var(--color-neutral-100);
    border-bottom: 6px double var(--color-neutral-100);
    font-weight: bold
}

table.auto {
    width: auto
}

table.fixed,
.tbl-fixed {
    table-layout: fixed
}

th[align="left"],
th.left,
td.left {
    float: none;
    text-align: left
}

th[align="center"],
th.center,
td.center {
    text-align: center
}

th[align="right"],
th.right,
td.right,
.tbl-no {
    float: none;
    text-align: right
}

table.no-pad th:first-child,
table.no-pad td:first-child {
    padding-left: 0
}

table.no-pad th:last-child,
table.no-pad td:last-child {
    padding-right: 0
}

table.zebra tbody tr:nth-child(even),
ul.zebra>li:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.05)
}

table.hover tbody tr:hover,
table.hover tfoot tr:hover,
ul.hover>li:hover {
    background-color: rgba(0, 0, 0, 0.05)
}

table.grid th,
table.grid td {
    border-left: 1px solid var(--color-neutral-100)
}

table.grid th:last-child,
table.grid td:last-child {
    border-right: 1px solid var(--color-neutral-100)
}

table.presentation,
table.presentation th,
table.presentation td,
table.presentation tr:first-child th,
table.presentation tr:first-child td,
table.presentation thead~tbody tr:last-child,
table.reset,
table.reset th,
table.reset td,
table.reset tr:first-child th,
table.reset tr:first-child td,
table.reset thead~tbody tr:last-child {
    border: 0;
    padding: 0
}

.table-responsive {
    position: relative;
    z-index: 1
}

.table-responsive>table {
    margin-bottom: 0
}

.media-responsive {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.media-responsive iframe,
.media-responsive object,
.media-responsive embed,
.editor .media-responsive img.cke_iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

pre,
.table-responsive,
.visible-scrollbar {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

pre::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.visible-scrollbar::-webkit-scrollbar {
    height: 8px;
    width: 8px
}

pre::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.visible-scrollbar:-webkit-scrollbar-track {
    background-color: var(--color-cream)
}

pre::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.visible-scrollbar::-webkit-scrollbar-thumb {
    background-color: grey;
    border-radius: 20em
}

pre::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.visible-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-black)
}

.vcard .region,
.vcard .country-name,
.vcard .url {
    display: none
}

[hidden],
.none,
.screenhidden,
.printvisible {
    display: none
}

.block,
.screenvisible,
.printhidden {
    display: block
}

.visuallyhidden,
.invis,
.sr,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    -webkit-clip-path: inset(100%);
    clip-path: inset(100%);
    overflow: hidden
}

.nmb {
    margin-bottom: 0
}

.right {
    float: right
}

.left {
    float: left
}

.clear {
    clear: both
}

.clearfix::after,
.cf::after,
.row::after {
    content: "";
    display: table;
    clear: both
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.alignleft,
.alignright,
.aligncenter {
    max-width: 50%;
    margin: 1.5em
}

.alignleft {
    float: left;
    margin-top: 0;
    margin-left: 0
}

.aligncenter {
    clear: both;
    display: block;
    margin-right: auto;
    margin-left: auto
}

.alignright {
    float: right;
    margin-top: 0;
    margin-right: 0
}

.reverse {
    display: flex;
    flex-direction: column
}

.reverse>.reverse__child,
.reverse>.date,
.reverse>.visuallyfirst,
.reverse>.mod-entry-meta {
    order: -1
}

.reset,
.reset li,
nav ul,
nav ul li {
    list-style: none outside none;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 0
}

nav ul {
    margin-bottom: 0
}

nav li::before {
    content: "\200B";
    position: absolute
}

.nobr {
    white-space: nowrap
}

details,
.box {
    padding: 2em;
    color: var(--color-white);
    background-color: var(--color-primary)
}

.box a {
    color: var(--color-accent-blue)
}

.box:not([class*=box--]) h1,
.box:not([class*=box--]) h2,
.box:not([class*=box--]) h3,
.box:not([class*=box--]) h4,
.box:not([class*=box--]) h5,
.box:not([class*=box--]) h6 {
    color: var(--color-white)
}

.box--warning,
.cookie-alert {
    border-color: #faebcc;
    color: #85662b;
    background-color: #fcf8e3
}

.box--success {
    border-color: #d6e9c6;
    color: #337234;
    background-color: #dff0d8
}

.box--error {
    border-color: #ebccd1;
    color: #a43431;
    background-color: #f2dede
}

.box--info {
    border-color: #bce8f1;
    color: #216b8b;
    background-color: #d9edf7
}

blockquote>*:last-child,
details>*:last-child,
summary~div>*:last-child,
fieldset>*:last-child,
th>*:last-child,
td>*:last-child,
.box>*:last-child,
.row>[class*="col-"]>*:last-child,
.lc-reset>*:last-child,
.katabox>*:last-child {
    margin-bottom: 0
}

.link-expanded {
    position: relative
}

.link-expanded a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.skiplinks__link {
    position: absolute;
    top: -9999px;
    left: 1.5em;
    z-index: 10;
    padding: .5em 1em;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-black)
}

.skiplinks__link:focus,
.skiplinks__link:active {
    top: 1.5em;
    color: var(--color-white)
}

/* ═══════════════════ PRIMITIVES & COMPONENTS ═══════════════════ */
/* Buttons, grid, cards, forms, nav, and composed widgets. This region is
   dense and cross-referenced; rules have been left in their original
   relative order to avoid changing cascade/specificity outcomes. */

.btn,
.btn:link,
.btn:visited {
    display: inline-block;
    border: 0;
    padding: .5em 1em;
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    line-height: inherit;
    background-color: var(--color-primary);
    border-radius: 3px;
    cursor: pointer
}

.btn:hover,
.btn:focus {
    color: var(--color-white);
    text-decoration: none !important;
    background-color: var(--color-black)
}

.btn:active {
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3)
}

.btn--small,
.btn--small {
    padding: .1em .5em
}

.btn[type="reset"],
.btn--secondary {
    background-color: grey
}

.btn--invis,
.btn--ghost {
    border: 0;
    color: var(--color-black);
    background-color: transparent
}

.btn--ghost {
    border: 1px solid var(--color-gray-600)
}

.btn--fullwidth {
    width: 100%
}

.btn--reject {
    background-color: red
}

.btn--accept {
    background-color: green
}

@media screen and (prefers-reduced-motion:reduce),
(update:slow) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important
    }
}

.row {
    clear: both
}

[class*="col-"] {
    position: relative;
    float: left;
    margin-left: 0;
    min-height: 1px
}

[class*="col-"]:first-child {
    margin-left: 0
}

.col-1 {
    width: 8.333333333333332%
}

.col-2 {
    width: 16.666666666666664%
}

.col-3 {
    width: 25%
}

.col-4 {
    width: 33.33333333333333%
}

.col-5 {
    width: 41.66666666666667%
}

.col-6,
.col-half {
    width: 50%
}

.col-7 {
    width: 58.333333333333336%
}

.col-8 {
    width: 66.66666666666666%
}

.col-9 {
    width: 75%
}

.col-10 {
    width: 83.33333333333334%
}

.col-11 {
    width: 91.66666666666666%
}

.col-12 {
    width: 100%
}

.editor .element,
.editor .team-contact,
.editor .team-contact--content,
.editor .team-contact--img {
    position: relative;
    border: 1px dotted red
}

.editor .element::before {
    content: 'Container';
    position: absolute;
    top: 0;
    right: 0;
    padding: 3px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-white);
    background-color: red
}

.editor img.cke_iframe {
    width: 100% !important;
    height: 100% !important
}

.mod-lst>.mod-entry {
    border-top: 1px solid var(--color-gray-600);
    padding: .75em 0
}

.mod-entry:first-child {
    border-top: 0;
    padding-top: 0
}

.mod-entry>*:last-child,
.mod-entry a>*:last-child {
    margin-bottom: 0
}

.mod-entry-meta {
    display: block;
    margin-bottom: .5em;
    color: #767676;
    font-size: .875em
}

.mod-entry-title {
    margin-bottom: .5em
}

.mod-entry-title a {
    display: block
}

.mod-entry-lead {
    font-weight: bold
}

.mod-entry-img {
    display: block
}

.mod-nav {
    overflow: hidden;
    margin: .5em 0 1.5em
}

.mod-nav li {
    display: inline-block;
    margin-right: 1em !important
}

.mod-nav a {
    font-size: 1em;
    color: #273941;
    text-decoration: none
}

.mod-nav a:hover,
.mod-nav a:focus,
.mod-nav .active a {
    color: var(--color-black)
}

.mod-nav .active a {
    font-weight: bold
}

.login-pw-reset {
    float: right
}

@media only screen and (max-width:32.5em) {
    .login-pw-reset {
        float: none;
        margin-top: .75em;
        text-align: center
    }
}

.asset-meta {
    white-space: nowrap
}

.asset-type {
    text-transform: uppercase
}

.form-builder .clearfix,
.form-builder .cf {
    margin-bottom: .75em
}

.form-builder .form-builder-container {
    margin-bottom: 1.5em
}

.form-builder fieldset>*:last-child,
.form-builder .last,
.form-builder .form-builder-container>*:last-child {
    margin-bottom: 0
}

.form-builder .clearfix>label,
.form-builder .cf>label,
.form-builder .form-option-lst-title {
    display: block;
    float: left;
    width: 50%;
    padding-top: .2em;
    padding-right: 2em
}

.form-builder label>em,
.form-builder legend>em {
    font-style: normal
}

.form-builder legend.form-option-lst-title {
    font-size: 1em;
    color: currentColor;
    font-weight: normal
}

.form-builder .form-option-lst-title label {
    display: inline
}

.form-builder input,
.form-builder textarea,
.form-builder select {
    float: right;
    width: 50%
}

.form-builder input[type=submit],
.form-builder button {
    float: none;
    width: auto
}

.form-builder .form-hint,
.form-builder label.error,
.form-builder .password-strength,
.form-builder .password-rules {
    clear: both;
    display: block;
    float: right;
    width: 50%;
    margin: .5em 0 0;
    color: #585858
}

.form-builder label.error+label.error {
    margin-top: 0;
    padding-top: 0
}

.form-builder .form-option-lst .form-hint {
    float: none;
    width: auto
}

.form-builder .required>label,
.form-builder .required .form-option-lst-title,
.form-builder .password-strength__rule-title {
    font-weight: bold
}

.form-builder .form-required-hint {
    font-style: normal
}

.form-builder .required>label.error {
    font-weight: normal
}

.form-builder input.error,
.form-builder label.error {
    color: red
}

.form-builder label.error {
    padding-right: 0
}

.form-builder .form-option-lst-show-title .form-option-lst,
.form-builder .form-sizer-wrapper {
    width: 50%;
    float: right
}

.form-builder .form-option-lst>ul {
    margin-bottom: 0
}

.form-builder .form-option-lst li label {
    display: block;
    padding-right: 0;
    padding-left: 1.5em
}

.form-builder .form-option-lst li label>input {
    width: auto;
    float: none;
    margin-left: -1.5em
}

div:not([class*="form-option-lst-show-title"]) label.error {
    float: none;
    width: 100%
}

.form-builder .form-builder-btn {
    margin-bottom: 2.4em
}

.form-builder .form-builder-btn-group p {
    display: inline-block;
    margin: 0 1.5em 0 0
}

.form-builder .form-sizer label {
    white-space: nowrap;
    float: none;
    width: 100%;
    padding-right: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.form-builder .form-sizer input {
    float: none;
    width: 100%
}

.form-builder .form-sizer {
    float: left;
    margin-bottom: 0
}

.form-builder .form-sizer-25,
.form-builder .form-street-component .form-sizer:last-child,
.form-builder .form-zip-component .form-sizer:first-child {
    width: 23%
}

.form-builder .form-sizer-50 {
    width: 48%
}

.form-builder .form-sizer-75,
.form-builder .form-street-component .form-sizer:first-child,
.form-builder .form-zip-component .form-sizer:last-child {
    width: 73%
}

.form-sizer+.form-sizer {
    float: right
}

.form-builder .form-builder-tac {
    position: relative
}

.form-builder .form-builder-tac label {
    float: none;
    width: 100%;
    padding-top: 0;
    padding-right: 0;
    padding-left: 1.5em;
    font-weight: normal
}

.form-builder .form-builder-tac input[type=checkbox] {
    float: none;
    width: auto;
    position: absolute;
    left: 0;
    top: .3em
}

.form-builder .clearfix.stacked>* {
    display: block;
    float: none;
    width: 100%;
    padding-right: 0
}

.form-builder .clearfix.stacked>label {
    padding-top: 0;
    margin-bottom: .25em
}

.form-builder-30 .clearfix>label,
.form-builder-30 .cf>label,
.form-builder-30 .form-option-lst-title {
    width: 30%
}

.form-builder-30 input,
.form-builder-30 textarea,
.form-builder-30 select,
.form-builder-30 .form-hint,
.form-builder-30 label.error,
.form-builder-30 .form-option-lst-show-title .form-option-lst,
.form-builder-30 .form-sizer-wrapper {
    width: 70%
}

@media only screen and (max-width:32.5em) {

    .form-builder label,
    .form-builder .clearfix>label,
    .form-builder .cf>label,
    .form-builder input,
    .form-builder textarea,
    .form-builder select,
    .form-builder .form-option-lst-show-title .form-option-lst,
    .form-builder .form-option-lst-title,
    .form-builder .form-hint,
    .form-builder label.error,
    .form-builder .form-sizer-wrapper,
    .form-builder .password-strength,
    .form-builder .password-rules {
        display: block;
        float: none;
        width: 100%
    }

    .form-builder .clearfix>label,
    .form-builder .cf>label {
        padding-right: 0;
        padding-bottom: .2em
    }

    .form-builder input[type=radio],
    .form-builder input[type=checkbox] {
        display: inline;
        width: auto
    }

    .form-builder [type=submit],
    .form-builder button {
        width: 100%
    }

    .form-builder .form-builder-btn-group p {
        display: block;
        margin: 0
    }

    .form-builder .form-builder-btn-group>p+p {
        margin-top: .7em
    }

    button+button[type=reset] {
        margin-top: .7em;
        margin-left: 0
    }
}

.form-to-wizard-commands .btn+.btn {
    margin-left: 1.5em
}

.form-to-wizard-current {
    font-weight: bold
}

.form-to-wizard-current~li {
    color: grey
}

.flex-search {
    display: flex
}

.flex-search>label {
    margin-right: 1em;
    align-self: center
}

.form-builder.flex-search>label,
.form-builder .flex-search>label {
    margin-right: 1em;
    width: auto;
    padding-right: 0
}

.flex-search>input {
    flex: 1 1 auto;
    min-width: 0;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.flex-search>button {
    flex: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-right: 1em;
    padding-left: 1em
}

.calendar {
    width: 50%;
    line-height: 2;
    border-top: 1px solid var(--color-gray-300)
}

.calendar,
.calendar th,
.calendar td {
    color: var(--color-black);
    font-weight: inherit
}

.calendar th,
.calendar td {
    width: 14.28571428571429%;
    border: 1px solid var(--color-gray-300);
    padding: 0;
    text-align: center;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.5)
}

.calendar th {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    background-color: transparent
}

.calendar tbody {
    background-color: var(--color-gray-250)
}

.calendar a {
    display: block;
    text-decoration: none;
    text-shadow: 0 1px 0 var(--color-white)
}

.calendar tbody a {
    transition: box-shadow .3s ease
}

.calendar tbody a:hover,
.calendar tbody a:focus {
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .25)
}

.cal-year a {
    display: inline
}

@media only screen and (max-width:37.5em) {
    .calendar {
        width: 100%
    }
}

.cal-entry {
    font-weight: bold
}

.cal-noentry a {
    color: #707070
}

.cal-noentry a:hover,
.cal-noentry a:focus {
    color: var(--color-black)
}

.cal-disabled,
.cal-disabled-legend span {
    color: #adadad;
    background-color: #eee
}

.cal-othermonth {
    background-color: var(--color-white)
}

.cal-today,
.cal-today-legend span {
    color: var(--color-white);
    background-color: var(--color-black);
    box-shadow: none !important
}

.cal-today a,
.cal-today a:hover,
.cal-today a:focus {
    color: var(--color-white);
    text-shadow: none
}

.cal-selected {
    box-shadow: none !important
}

.cal-selected a,
.cal-selected-legend span {
    outline: 3px solid #ff0
}

.calendar-legend {
    margin-bottom: 1.5em;
    font-size: 1em;
    -webkit-column-gap: 1em;
    -moz-column-gap: 1em;
    column-gap: 1em;
    -webkit-columns: 2 10em;
    -moz-columns: 2 10em;
    columns: 2 10em
}

.calendar-legend li {
    display: inline-flex;
    align-items: center;
    width: 100%;
    margin-bottom: .25em
}

.calendar-legend span {
    display: block;
    float: left;
    width: 1.4em;
    height: 1.4em;
    margin-right: .5em;
    border: 1px solid var(--color-gray-300)
}

.cal-allfree.cal-allfree,
.cal-available.cal-available,
.cal-partlyfree.cal-partlyfree,
.cal-almostsoldout.cal-almostsoldout,
.cal-full.cal-full {
    box-shadow: none
}

.cal-allfree,
.cal-allfree-legend span,
.cal-available,
.cal-available-legend span {
    background-color: #008000
}

.cal-partlyfree,
.cal-partlyfree-legend span {
    background-color: #fffc00
}

.cal-almostsoldout,
.cal-almostsoldout-legend span {
    background-color: #ff9c00
}

.cal-full,
.cal-full-legend span {
    background-color: red
}

.cal-partlyfree a:link {
    color: var(--color-black)
}

.cal-allfree a:link,
.cal-available a:link,
.cal-almostsoldout a:link,
.cal-full a:link {
    color: var(--color-white);
    text-shadow: 0 1px 0 var(--color-black)
}

.travelpass .calendar {
    width: 100%
}

.travelpass-cal-wrapper,
.travelpass-order-wrapper {
    width: 48.181818181818%;
    float: left
}

.travelpass-order-wrapper {
    margin-left: 3.636363636364%
}

.terms {
    margin-bottom: 1.5em
}

@media only screen and (max-width:48em) {

    .travelpass-cal-wrapper,
    .travelpass-order-wrapper {
        float: none;
        width: 100%;
        margin-left: 0
    }
}

ul.gallery-magnific {
    overflow: hidden
}

ul.gallery-magnific li {
    float: left;
    max-width: 30.769230769231%;
    margin: 3.846153846154%;
    margin-top: 0;
    margin-right: 0
}

ul.gallery-magnific li:nth-child(3n+1) {
    clear: left;
    margin-left: 0
}

@supports (display:grid) {
    ul.gallery-magnific {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 1.5em;
        gap: 1.5em
    }

    ul.gallery-magnific li,
    ul.gallery-magnific li:nth-child(1n+1) {
        max-width: none;
        margin: 0
    }
}

ul.gallery-magnific a {
    display: block;
    text-decoration: none
}

ul.gallery-magnific figure {
    margin-bottom: 0
}

ul.gallery-magnific figcaption {
    padding: 0 .5em .5em;
    text-align: center
}

ul.gallery-magnific img {
    display: block;
    margin: 0 auto;
    max-height: 120.14px;
    min-height: 120.14px;
    width: 100%;
    object-fit: cover;
}

.mfp-content figcaption {
    margin-top: 0
}

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

    ul.gallery-magnific img {
        max-height: 220px;
        min-height: 220px;
    }
}
@media only screen and (max-width: 768px) {

    ul.gallery-magnific li,
    ul.gallery-magnific li:nth-child(3n+1) {
        clear: none;
        max-width: 46.153846153846%;
        margin-left: 3.846153846154%
    }
    ul.gallery-magnific li:nth-child(2n+1) {
        clear: left;
        margin-left: 0
    }
    @supports (display:grid) {
        ul.gallery-magnific {
            grid-template-columns: 1fr 1fr
        }

        ul.gallery-magnific li,
        ul.gallery-magnific li:nth-child(1n+1) {
            max-width: none;
            margin: 0
        }
    }
    ul.gallery-magnific img {
        max-height: 310px;
        min-height: 310px;
    }
}
@media only screen and (max-width: 568px) {

    ul.gallery-magnific img {
        max-height: 220px;
        min-height: 220px;
    }
}
@media only screen and (max-width: 368px) {

    ul.gallery-magnific img {
        max-height: 220px;
        min-height: 220px;
    }
}


.breadcrumb {
    position: relative;
    overflow: hidden
}

.breadcrumb::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 100%;
    pointer-events: none;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%)
}

.breadcrumb__lst {
    display: flex;
    width: 100%;
    margin: 0;
    padding: .5em 0;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.breadcrumb__item {
    position: relative;
    padding-right: .5em;
    white-space: nowrap
}

.breadcrumb__item:last-child {
    padding-right: 1em
}

.breadcrumb__link {
    text-decoration: none
}

.breadcrumb__item:not(:first-child)::before {
    content: "\f105";
    display: inline-block;
    margin: 0 .75em;
    font-family: FontAwesome
}

.breadcrumb__dropdown {
    display: none;
    position: absolute;
    top: 1.55rem;
    left: 0;
    z-index: 800
}

.breadcrumb__dropdown.expanded {
    display: block
}

.breadcrumb__dropdown ul {
    min-width: 200px
}

.os-article {
    width: 85%
}

.os-price {
    width: 15%;
    text-align: right
}

.os-price-detail {
    text-align: right;
    border-top: 1px solid var(--color-gray-400);
    border-bottom: 3px double var(--color-gray-400);
    padding: .25em 0 .15em 0
}

.infobox {
    overflow: hidden;
    margin-bottom: 1.5em;
    font-size: 1em
}

.infobox>div {
    float: left;
    width: 50%
}

.infobox>div+div {
    float: right
}

.infobox>div:first-of-type {
    padding-right: 1em
}

.infobox>div>p {
    margin-bottom: .7em
}

.sales-basket-infobox .btn {
    display: block;
    color: var(--color-white);
    padding: .25em .5em
}

.sales-basket-article {
    width: 100%
}

.sales-basket-tbl {
    font-size: 1em
}

.sales-basket-quant {
    white-space: nowrap
}

.sales-updatequantity {
    width: 3em
}

.sales-subtotal,
.sales-fee,
.sales-shippingprice {
    font-size: 1em
}

.sales-subtotal {
    border-bottom-width: 2px;
    font-weight: bold
}

.cc-lst li {
    position: relative;
    display: flex;
    margin-bottom: .5em
}

.cc-lst li>* {
    transition: all .2s ease-in-out
}

.cc-lst label {
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-gray-200);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0);
    cursor: pointer
}

.cc-lst .cc-lst-img {
    flex: 0 0 auto;
    min-width: 50px;
    max-width: 80px;
    margin: 5px;
    filter: grayscale(100%)
}

.cc-lst .cc-lst-img>img {
    display: block;
    width: 100%
}

.cc-lst .cc-lst-txt {
    display: block;
    flex: 1 1 auto;
    padding-left: 1em;
    align-self: center
}

.cc-lst input[type="radio"] {
    position: absolute;
    display: inline;
    left: -1000px;
    width: 0;
    height: 0;
    overflow: hidden
}

.cc-lst input[type="radio"]:checked~label {
    border: 2px solid #49b1eb;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3)
}

.cc-lst input[type="radio"]:checked~.cc-lst-img {
    filter: none
}

.cc-lst input[type="radio"]:checked~.cc-lst-txt {
    font-weight: 500
}

.subscription-opt-lst thead th {
    white-space: nowrap
}

.col-subscription-title {
    width: 100%
}

.col-subscription-html,
.col-subscription-plain,
.col-subscription-sms {
    text-align: center
}

.subscription-opt-lst input {
    float: none;
    width: auto
}

.col-subscription-delivery {
    padding-right: 0
}

.col-subscription-delivery ul {
    margin: 0
}

.col-subscription-delivery label {
    white-space: nowrap
}

.subscription-opt-lst [class*="col-"] {
    margin-left: 0;
    float: none
}

.mod-index-toc {
    position: relative;
    margin-bottom: 2em;
    overflow: hidden;
    background-color: var(--color-cream)
}

.mod-index-toc ul {
    display: table;
    table-layout: fixed;
    width: 100%;
    margin: 0
}

.mod-index-toc li {
    display: table-cell;
    text-align: center;
    display: table-cell;
    white-space: nowrap
}

.mod-index-toc a {
    display: block;
    padding: .25em 0;
    color: var(--color-gray-600);
    text-decoration: none;
    box-shadow: inset 1px 0 rgba(0, 0, 0, 0.2)
}

.mod-index-toc li:first-child a {
    box-shadow: none
}

.mod-index-toc a:hover,
.mod-index-toc a:focus {
    color: var(--color-black)
}

@media only screen and (max-width:32.5em) {
    .mod-index-toc::after {
        display: block;
        pointer-events: none;
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 20%;
        height: 100%;
        background-image: -moz-linear-gradient(left, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 100%);
        background-image: -webkit-linear-gradient(left, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 100%);
        background-image: linear-gradient(to right, rgba(240, 240, 240, 0) 0%, rgba(240, 240, 240, 1) 100%)
    }

    .mod-index-toc ul {
        display: block;
        width: auto;
        margin: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch
    }

    .mod-index-toc a {
        padding: .25em .5em
    }
}

.mod-index-pages>div {
    margin-bottom: 1.5em
}

.mod-index-pages>div>h2 {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    top: 0;
    border-top: 1px solid var(--color-gray-600);
    padding: .25em;
    color: var(--color-black);
    background-color: #ececec
}

.mod-index-pages>div:target {
    background-color: var(--color-cream)
}

.mod-index-pages>div:target h2 {
    color: var(--color-white);
    background-color: var(--color-gray-600)
}

.mod-index-pages>div:target ul {
    padding-bottom: 1em
}

.collection-lst {
    margin-bottom: 0
}

.collection-item {
    display: block;
    float: left
}

.collection-item::after {
    content: '\00A0\00A0/\00A0\00A0'
}

.collection-item:last-child::after {
    content: none
}

.js-accordion {
    border-bottom: 1px solid var(--color-gray-225);
    margin-bottom: 1.5em
}

.js-accordion_control {
    margin-bottom: 0;
    border-top: 1px solid var(--color-gray-225);
    padding: .25em 0;
    cursor: pointer
}

.js-accordion_control::after {
    float: right;
    padding-right: .5em;
    content: "\f077";
    display: inline-block;
    font: normal normal .7em/1.8 FontAwesome;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    -webkit-transition: all .5s ease;
    transition: all .5s ease
}

.js-accordion_control--active::after {
    content: "\f078"
}

.js-accordion-content {
    padding: .7em 0
}

.js-accordion-content>*:last-child {
    margin-bottom: 0
}

.mod-blog .mod-entry {
    clear: both
}

.mod-blog .mod-entry--has-img>a {
    overflow: hidden;
    padding-top: .75em
}

.mod-blog .mod-entry-title {
    clear: none
}

.mod-blog .mod-entry img.alignright {
    margin: 0 0 3.448275862069% 3.448275862069%;
    max-width: 48.275862068966%
}

.news-stats {
    border: 1px solid var(--color-gray-200);
    border-right: 0;
    border-left: 0;
    padding: 1em
}

.mod-lst-comments li {
    list-style: none
}

.mod-lst-comments>li {
    margin-left: 0
}

.mod-comments .mod-entry-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: .7em
}

.mod-comments .mod-entry-header>* {
    margin: 0
}

.mod-comments .mod-entry-body {
    margin-bottom: .7em
}

.mod-comments .mod-entry-footer {
    text-align: right
}

.mod-entry-footer+ol {
    margin-top: .75em
}

.mod-entry-footer+ol>.mod-entry,
.mod-entry-footer+ol>.mod-entry:first-child {
    border-top: 1px solid var(--color-gray-200)
}

.mod-comments .mod-entry-footer a {
    border-bottom: 0;
    font-size: .86666666666667em
}

.cookie-alert {
    position: fixed;
    z-index: 1;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 1em 0
}

.btn-row {
    text-align: center
}

.btn-row button+button {
    margin-left: 1em
}

.katabox {
    position: relative;
    border: 1px solid var(--color-black);
    padding: 2em 1.5em
}

.katabox::before,
.katabox::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(45deg, #ffeb3b, #ffeb3b 10px, var(--color-black) 10px, var(--color-black) 20px)
}

.katabox::after {
    top: auto;
    bottom: 0
}

.katabox__title {
    text-align: center
}

.hamburger {
    display: block;
    position: relative;
    z-index: 4;
    flex: 0 0 auto;
    margin: 0;
    width: 55px;
    height: 45px;
    border: 1px solid var(--color-white);
    text-indent: -9999px;
    border-radius: 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    background-color: transparent;
    transition: background-color .5s
}

.hamburger span {
    content: '';
    display: block;
    position: absolute;
    left: 10px;
    height: 3px;
    width: 35px;
    background: var(--color-white);
    border-radius: 2px;
    opacity: 1;
    transform: rotate(0deg);
    transition: .25s ease-in-out
}

.hamburger span:nth-child(1) {
    top: 11px
}

.hamburger span:nth-child(2),
.hamburger span:nth-child(3) {
    top: 21px
}

.hamburger span:nth-child(4) {
    top: 31px
}

.hamburger--active {
    background-color: var(--color-black)
}

.hamburger--active span:nth-child(1) {
    top: 20px;
    width: 0%;
    left: 50%
}

.hamburger--active span:nth-child(2) {
    transform: rotate(45deg)
}

.hamburger--active span:nth-child(3) {
    transform: rotate(-45deg)
}

.hamburger--active span:nth-child(4) {
    top: 20px;
    width: 0%;
    left: 50%
}

.mobilenav {
    display: none
}

@media only screen and (max-width:32.5em) {
    .mainnav {
        display: none
    }

    .mobilenav {
        display: block
    }
}

.mobilenav__container {
    display: none;
    position: absolute;
    left: 0;
    top: 400%;
    z-index: 100;
    width: 100%;
    padding: 0 0 1.5em;
    background-color: var(--color-white);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5)
}

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

    .mobilenav__container {
        top: 492%;
    }
}

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

    .mobilenav__container {
        top: 365%;
    }
}

.mobilenav__bg {
    display: none;
    position: fixed;
    z-index: 3;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.2)
}

.mobilenav-box {
    width: 100%
}

.mobilenav-box .level-nav {
    margin: 0
}

.mobilenav-box .levelup span {
    float: left;
    position: static;
    right: inherit
}

.govis-menu-node-item {
    position: relative;
    margin: 0;
}

.govis-menu-node-item.title,
.govis-menu-node-item>a {
    position: relative;
    width: 100%;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 1em .75em 1em 3%;
    list-style-type: none;
    color: var(--color-white);
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none
}

.govis-menu-node-item>a {
    display: block;
    color: var(--color-primary-alt)
}

.govis-menu-node-item>a:hover,
.govis-menu-node-item>a:focus {
    text-decoration: none
}

.govis-menu-node-item.folder>a {
    padding-right: 25%
}

.govis-menu-node-item>ul {
    position: relative;
    z-index: 1
}

.title .govis-menu-node-controller {
    left: 0;
    top: 0;
    right: inherit
}

.mobilenav-current-pagetitle a {
    display: flex;
    padding-right: 3%;
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: normal;
    color: var(--color-white);
    background-color: var(--color-primary-dark)
}

.mobilenav-current-pagetitle a .icon {
    margin-right: .5em;
    transition: transform .2s 0s;
    transform: translateX(0) scale(1.5)
}

.mobilenav-current-pagetitle a:hover .icon,
.mobilenav-current-pagetitle a:focus .icon {
    transform: translateX(-.25em) scale(1.5)
}

/* Mobile navigation slide-in dynamic menu (merged from Custom.css patches) */

.mobilenav .mobilenav-block {
    position: relative;
    overflow: hidden;
    background-color: var(--color-white);
    transition: height .3s cubic-bezier(.4, 0, .2, 1)
}

.mobilenav .govis-menu-node-item {
    display: flex;
    align-items: stretch;
    background-color: var(--color-white);
    margin: 0;
    position: static !important;
    width: 100%
}

.mobilenav .govis-menu-node-item > a {
    flex: 1;
    display: block;
    padding: 16px 14px 16px 3%;
    font-size: 1.6rem;
    color: var(--color-primary-alt) !important;
    border-bottom: 1px solid var(--color-primary-dark);
    border-bottom: 1px solid #505050;
    font-weight: 400;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-color: var(--color-white)
}

.mobilenav .govis-menu-node-item > a:hover,
.mobilenav .govis-menu-node-item > a:focus {
    color: var(--color-black) !important;
    text-decoration: none
}

.mobilenav .govis-menu-node-controller {
    flex: 0 0 calc(3% + 54px);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-alt) !important;
    cursor: pointer;
    padding: 0;
    height: auto;
    position: relative;
    border-bottom: 1px solid #505050;
    border-left: 1px solid #505050;
    top: -0.5px;
}

.mobilenav .govis-menu-node-controller:hover,
.mobilenav .govis-menu-node-controller:focus {
    background-color: var(--color-primary-dark) !important
}

.mobilenav .govis-menu-node-controller .icon {
    width: 24px;
    height: 24px;
    fill: var(--color-white);
    stroke: var(--color-white);
    stroke-width: 2px;
    transform: rotate(0deg)
}

.mobilenav .govis-menu-node--level-2,
.mobilenav .govis-menu-node--level-3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    background-color: var(--color-white);
    z-index: 100;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
    padding: 0;
    margin: 0
}

.mobilenav .govis-menu-node--level-3 {
    z-index: 101;
}

.mobilenav .govis-menu-node--level-2.slide-in,
.mobilenav .govis-menu-node--level-3.slide-in {
    transform: translateX(0);
    visibility: visible
}

.mobilenav .mobilenav-back-item {
    display: flex;
    align-items: stretch;
    background-color: var(--color-primary-dark);
    border-bottom: 1px solid var(--color-gray-200);
    margin: 0;
    width: 100%
}

.mobilenav .js-mobilenav-back {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.898em 3% 0.898em .75em;
    padding-right: 3%;
    font-size: 21px;
    color: var(--color-white) !important;
    font-weight: 400;
    text-transform: uppercase;
    background-color: var(--color-primary-dark);
    border: 0;
    cursor: pointer;
    text-align: left;
    letter-spacing: 2px;
    white-space: normal;
}

.mobilenav .js-mobilenav-back:hover,
.mobilenav .js-mobilenav-back:focus {
    background-color: var(--color-primary-darkest)
}

.mobilenav .js-mobilenav-back .icon {
    width: 31px;
    height: 31.5px;
    fill: var(--color-white);
    stroke: var(--color-white);
    stroke-width: 2px;
    margin-right: .61em;
    top: 0px;
    position: relative;
}

.no-js .govis-menu-node-controller {
    display: none
}

.govis-menu-node-controller {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: calc(3% + 54px);
    height: 100%;
    border: 0;
    border-top: 1px solid transparent;
    cursor: pointer;
    font-size: 1em;
    text-align: center;
    background: var(--color-primary-alt);
    border-radius: 0
}

.govis-menu-node-controller .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: var(--color-white);
    transform: rotate(0deg) scale(1.5);
    transition: transform .2s ease
}

.govis-menu-node-controller:hover .icon {
    transform: translateX(.25em) scale(1.5)
}

.govis-menu-node-controller.loading .icon {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

/* fa-spin keyframes removed here: exact duplicate already defined in Vendor.css (FontAwesome bundle). The .icon animation-name: fa-spin above resolves against that global definition. */

html:has(dialog[open]) {
    overflow: hidden
}

.card--overlay .card__body {
    flex-direction: row;
    gap: 1.5em
}

.card--overlay .card__body>* {
    flex: 1 1 auto;
    width: 100%
}

.card--overlay .card__desc {
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    color: var(--color-black);
}
.card__footer .nmb{
    color: var(--color-black);
}

.card--overlay .card__txt>:last-child {
    margin-bottom: 0
}

@media only screen and (max-width:32.5em) {
    .card--overlay .card__body {
        flex-direction: column
    }
}

.card--overlay .card__footer {
    margin-block-start: 1.5em;
    padding-block-start: .5em;
    border-top: 1px solid var(--color-primary);
    text-align: right
}

.card--overlay .card__footer p {
    margin-block-end: .5em
}

.card--overlay .socialmedialinks {
    display: flex;
    gap: .75em;
    justify-content: end;
    font-size: 1.5em
}
.card--overlay .socialmedialinks svg{
    fill: var(--color-primary);
}

/* SlideGlass information dialog (merged from Custom.css): matches the live centered card layout */

#js-dialog-19.card-overlay {
    width: min(90vw, 800px);
    max-width: 800px;
    max-height: calc(100vh - 3rem);
    margin: auto;
    padding: 1.5em;
    overflow: visible;
    border: 0;
    border-radius: .2em;
    background: var(--color-white);
    color: var(--color-black);
    box-shadow: var(--shadow-lg)
}

#js-dialog-19.card-overlay::backdrop {
    background: rgba(0, 0, 0, .7)
}

#js-dialog-19 .card__header {
    margin: 0 0 1em
}

#js-dialog-19 .card__title {
    color: var(--color-primary-dark);
    font-size: 3.6rem;
    line-height: 1.2
}

#js-dialog-19 .card__body {
    display: flex;
    align-items: flex-start;
    gap: 1.5em
}

#js-dialog-19 .card__body > * {
    min-width: 0;
    flex: 1 1 0
}

#js-dialog-19 .card__media {
    order: -1
}

#js-dialog-19 .card__img {
    display: block;
    width: 100%;
    height: auto
}

#js-dialog-19 .card__desc {
    margin: 0 0 1.5em;
    font-size: 1.8rem;
    line-height: 1.5
}

#js-dialog-19 .card-overlay__close {
    z-index: 2;
    border: 0;
    color: var(--color-white);
    background: var(--color-white);
    cursor: pointer
}

#js-dialog-19 .card-overlay__close svg {
    pointer-events: none
}

@media only screen and (max-width: 32.5em) {
    #js-dialog-19.card-overlay {
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 2rem);
        padding: 1em;
        padding-top: 31px;
        overflow-y: auto
    }

    #js-dialog-19 .card__body {
        align-items: stretch;
        flex-direction: column;
        gap: 1em
    }

    #js-dialog-19 .card__media {
        order: -1
    }

    #js-dialog-19 .card__title {
        font-size: 2.8rem
    }

    #js-dialog-19 .card__desc {
        font-size: 1.6rem
    }
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* ════════════════════════════════════════════════════════════════════════
   FLAGGED: EMBEDDED VENDOR CODE (PocketGrid 1.1.0)
   This is a third-party grid framework, not site design. It belongs in
   Vendor.css per project convention, but its rules are interleaved with
   surrounding responsive overrides inside the same @media blocks below,
   so it has been left in place for this pass to avoid any cascade-order
   risk. Do not hand-edit rules in this block; treat as vendor and plan a
   dedicated, visually-verified extraction into Vendor.css separately.
   ════════════════════════════════════════════════════════════════════════ */

/*! PocketGrid 1.1.0
* Copyright 2013 Arnaud Leray
* MIT License
*/
.block-group,
.block,
.block-group:after,
.block:after,
.block-group:before,
.block:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.block-group,
.row {
    zoom: 1
}

.block-group:before,
.block-group:after,
.row:before,
.row:after {
    display: table;
    content: "";
    line-height: 0
}

.block-group:after,
.row:after {
    clear: both
}

.block-group,
.row {
    list-style-type: none;
    padding: 0;
    margin: 0
}

.block-group>.block-group,
.row>.row {
    clear: none;
    float: left;
    margin: 0 !important
}

.block,
[class*="col-"] {
    float: left;
    width: 100%
}

.block-group,
.row {
    margin: -0.9375em -0.9375em 1em -0.9375em
}

.block,
[class*="col-"] {
    padding: .9375em;
    margin-bottom: 0
}

.col-1 {
    width: 8.33333333%
}

.col-2 {
    width: 16.66666667%
}

.col-3 {
    width: 25%
}

.col-4 {
    width: 33.33333333%
}

.col-5 {
    width: 41.66666667%
}

.col-6,
.col-half {
    width: 50%
}

.col-7 {
    width: 58.33333333%
}

.col-8 {
    width: 66.66666667%
}

.col-9 {
    width: 75%
}

.col-10 {
    width: 83.33333333%
}

.col-11 {
    width: 91.66666667%
}

.col-12 {
    width: 100%
}

html,
body {
    overflow-x: hidden
}

body {
    background-color: var(--color-white);
    color: var(--color-primary-dark)
}

.wrapper {
    width: 90%;
    max-width: 1410px;
    margin: 0 auto
}

.desktop {
    display: block
}

.mobile {
    display: none
}

a {
    transition: color .4s
}

.header {
    position: relative;
    background-color: var(--color-primary)
}

.header > .wrapper {
    padding: 50px 0 40px
}

.header .header-container {
    display: flex
}

.header .logo {
    flex-basis: 30%
}

.header .logo a{
    display: block;
}

.header .logo img {
    width: 330px;
    height: 112px
}

.header .header-tools {
    flex-basis: 70%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between
}

.searchform {
    display: flex;
    border: 1px solid var(--color-white);
    width: 329px;
    opacity: .5;
    transition: all .3s;
    position: relative;
    top: -15px
}

.searchform .searchform__input {
    flex-basis: 85%;
    min-width: 0;
    background-color: transparent;
    border: 0;
    color: var(--color-white);
    padding: .9em 1em
}

.searchform .searchform__input::placeholder {
    color: var(--color-white);
    letter-spacing: .03em
}

.searchform .searchform__submit {
    flex-basis: 15%;
    min-width: 0;
    background-color: transparent;
    padding: 0;
    border: 0
}

.searchform .searchform__submit svg {
    width: 100%;
    height: 22px;
    fill: var(--color-white)
}

.searchform .searchform__submit:hover {
    cursor: pointer
}

.searchform:hover {
    opacity: 1
}

.searchform:focus-within {
    opacity: 1
}

.navbar {
    position: relative;
    z-index: 1000
}

.navbar .wrapper {
    height: 0
}

.banner {
    width: 100%;
    display: flex
}

.banner__image {
    flex-basis: 63%;
    min-width: 0
}

.js-images-slider {
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.banner__image img {
    display: block;
    object-fit: cover;
    font-family: 'object-fit: cover;';
    width: 100%;
    height: 512px
}

.banner__text {
    flex-basis: 37%;
    min-width: 0;
    background-color: #e5e5e5;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

.banner__bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0;
}

.banner__text .inner {
    width: 48%;
    margin-left: 50px;
    margin-bottom: 70px;
    padding-bottom: 35px;
    padding-right: 35px;
    border-bottom: 1px solid var(--color-primary);
    position: relative;
    z-index: 1;
}

.banner__text .inner:after {
    content: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2037%2018.25%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%2314437f%22%20stroke-linecap%3D%22square%22%20stroke-miterlimit%3D%2210%22%3E%3Cpath%20d%3D%22m.5%2017.75h12%22%2F%3E%3Cpath%20d%3D%22m24.5%2017.75h12%22%2F%3E%3Cpath%20d%3D%22m18.75.5v12%22%2F%3E%3Cpath%20d%3D%22m23.5%2013.5%208-8%22%2F%3E%3Cpath%20d%3D%22m6.5%205.5%208%208%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);
    position: absolute;
    bottom: -1px;
    right: -42px;
    display: block;
    width: 36px;
    height: 18px
}

.banner__text p {
    font-size: 2.25em;
    line-height: 1.2;
    font-weight: bold;
    color: var(--color-primary);
    margin: 0;
    max-width: 98%;
}

.banner .swiper-wrapper {
    margin: 0 !important
}

.content-page-layout {
    padding-top: 100px;
    padding-bottom: 0
}

.content-page-layout .wrapper {
    padding: 0 6%
}

.content-page-layout .content-grid {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.content-page-layout .content-grid .main {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 71%;
    order: 2;
    padding: 0 0 50px 150px;
    min-width: 0
}

.content-page-layout .content-grid .main p {
    line-height: 1.6
}

.content-page-layout .content-grid .contentnav {
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 29%;
    min-width: 0;
    order: 1
}

.contentnav {
    padding-top: 8px;
    padding-bottom: 40px
}

.contentnav h2 {
    font-size: 1.3125em;
    font-weight: normal;
    border-bottom: 1px solid var(--color-primary-dark);
    padding: .6em 24px;
    background-color: var(--color-primary);
    color: var(--color-white);
    margin-bottom: 8px
}

.contentnav>ul li {
    margin-left: 0;
    margin-bottom: 0
}

.contentnav>ul li a {
    display: inline-block;
    text-decoration: none;
    color: var(--color-primary-dark);
    padding: .4em 15px .4em 18px;
    width: 100%;
    position: relative;
    transition: none;
    hyphens: auto
}

.contentnav>ul li a:focus,
.contentnav>ul li a:hover {
    background-color: var(--color-gray-150)
}

.contentnav>ul li li>a {
    padding-left: 24px
}

.contentnav>ul li li li>a {
    padding-left: 48px
}

.contentnav>ul li li li li>a {
    padding-left: 72px
}

.contentnav>ul>li.active>a,
.contentnav>ul>li.current>a {
    background-color: #f4f4f3;
    color: var(--color-black);
    font-weight: bold;
}

.contentnav>ul ul {
    padding-top: 8px;
    padding-bottom: 8px
}

.contentnav>ul>li.folder>a {
    display: flex;
    justify-content: space-between
}

.contentnav>ul>li.folder>a:after {
    content: "\f107";
    font-family: "FontAwesome";
    right: 5px;
    display: block;
    font-size: 1.4em;
    font-weight: 300;
    height: 1em;
    line-height: 1
}

.contentnav>ul>li.folder>a ~ .level-2 {
    display: none;
}

.contentnav>ul li.folder.active>a {
    font-weight: bold
}

.contentnav>ul>li.folder.active>a {
    display: flex;
    justify-content: space-between;
    font-weight: bold
}

.contentnav>ul>li.folder.active>a ~ .level-2,
.contentnav>ul>li.folder:has(.active)>a ~ .level-2 {
    display: block;
}
.contentnav>ul>li.folder:has(.active)>a:after{
    content: "\f106";
    font-family: "FontAwesome";
    right: 5px;
    display: block;
    font-size: 1.4em;
    font-weight: 300;
    height: 1em;
    line-height: 1;
}
.contentnav>ul>li.folder:has(.active)>a {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-weight: bold;
}
.contentnav>ul li.active>a{
    font-weight: bold;
    background-color: #f4f4f3;
}

.contentnav>ul>li.folder.active>a:after {
    content: "\f106";
    font-family: "FontAwesome";
    right: 5px;
    display: block;
    font-size: 1.4em;
    font-weight: 300;
    height: 1em;
    line-height: 1
}

.contentnav>ul>li {
    margin-bottom: 8px
}

.contentnav>ul>li>a {
    font-size: 1.3125em;
    padding: .6em 24px;
    background-color: var(--color-gray-225);
}
.contentnav>ul>li:first-of-type>a {
    background-color: var(--color-primary);
    color: var(--color-white);
    max-height: 51.38px;
    display: flex;
    align-items: center;

    font-size: 1.3125em;
    font-weight: normal;
    padding: .6em 24px;
    background-color: #004183;
    color: #fff;
    /* Team page wordings 
    letter-spacing: .015em;
    line-height: 1.2; */
    margin-bottom: 8px;
}

.contentnav:has(.nav__title)>ul>li:first-of-type>a {
    background-color: var(--color-gray-225);
    color: var(--color-primary-dark);
    max-height: unset;
}

.contentnav:has(.nav__title)>ul>li.active>a {
    font-weight: bold;
    background-color: #f4f4f3;
    color: var(--color-black);
    position: relative;
}

.home-portrait {
    background-color: var(--color-primary);
    padding: 70px 0 100px;
    color: var(--color-primary-dark);
    background-repeat: no-repeat, repeat;
    background-position: 15% 0, 0 0;
    background-blend-mode: screen, normal
}

.home-portrait h2 {
    font-size: 2.1875em;
    font-weight: normal;
    margin-bottom: 1em;
    color: var(--color-primary-dark) !important
}

.home-portrait p {
    font-size: 1.375em
}

.home-portrait .inner {
    padding: 0 8% 0 25%
}

.home-portrait .inner *:last-child {
    margin-bottom: 0
}

.home-portrait img {
    margin-left: 100px;
    margin-top: -30px
}

.home-teasers {
    padding: 60px 0
}

.home-teasers .swiper-container {
    position: relative
}

.home-teasers .swiper-button-prev {
    top: 47%;
    left: -30px
}

.home-teasers .swiper-button-next {
    top: 47%;
    right: -30px
}

.home-teasers h2 {
    font-size: 2.25em;
    font-weight: normal;
    border-bottom: 1px solid var(--color-primary);
    padding-left: 65px;
    margin-bottom: 2em
}

.home-teasers h2 span {
    display: inline-block;
    background-color: var(--color-white);
    position: relative;
    bottom: -0.3em;
    left: -15px;
    padding: 0 15px
}

.home-teasers .link-more {
    left: 65px;
    bottom: 0;
    z-index: 1;
    margin: 0 0 .6em
}

.home-teasers .link-more a {
    text-decoration: underline
}

.project-teasers {
    margin: 0 0 2.5em
}

.project-teasers>li {
    transition: transform .3s;
    margin: 0;
    box-shadow: 0 10px 12px rgba(0, 0, 0, 0.2);
    height: auto
}

.project-teasers>li img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
    display: block;
    height: 300px;
    width: 100%
}

.project-teasers>li p {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-primary);
    color: var(--color-white);
    margin: 0;
    min-height: 95px;
    font-size: 1.25em;
    padding: 10px 20px;
    line-height: 1.2em
}

.project-teasers>li p a {
    color: var(--color-white);
    text-decoration: none
}

.project-teasers>li:hover {
    box-shadow: none
}

.project-teasers>li:hover p {
    background-color: var(--color-accent-blue);
    color: var(--color-white)
}

.project-teasers>li:hover p a {
    color: var(--color-white)
}

.cta-container {
    background-color: #ddd;
    padding: 50px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-container .cta-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
}

.cta-container .wrapper {
    position: relative;
    z-index: 1;
    padding: 0 6%;
}

.cta-container h2 {
    font-size: 2.1875em;
    font-weight: normal;
    margin-bottom: 1em;
    color: var(--color-primary-dark)
}

.cta-container p {
    font-size: 1.375em
}

.cta-container p:last-child {
    margin-bottom: 0
}

footer {
    line-height: 1.5;
    padding-top: 1.5em;
    padding-bottom: 0;
    background-color: var(--color-primary-alt)
}

footer address {
    font-style: normal;
    color: var(--color-white)
}

footer .footer-grid {
    display: flex;
    margin: 0 -0.9375em 2em -0.9375em
}

footer .footer-grid>div {
    box-sizing: content-box;
    margin: 0
}

footer .footer-grid>div *:last-child {
    margin-bottom: 0
}

footer .footer-address {
    padding: 0 .9375em;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 0;
    flex-basis: calc(50% - 0.9375em*2)
}

footer .footer-service {
    padding: 0 .9375em;
    flex-shrink: 0;
    flex-grow: 0;
    min-width: 0;
    flex-basis: calc(50% - 0.9375em*2)
}

footer ul,
footer table td,
footer p,
footer address {
    font-size: 1em;
    color: var(--color-white);
    letter-spacing: .015em;
    line-height: 2em
}

footer p:last-child {
    margin-bottom: 0
}

footer a {
    color: var(--color-accent-blue);
    text-decoration: none
}

footer a:focus,
footer a:hover,
footer a:active {
    color: var(--color-white);
    text-decoration: underline
}

footer .footer-address address {
    padding-left: 0
}

footer .footer-service {
    position: relative;
    text-align: right
}

footer .footer-service ul.servicelinks {
    margin: 0 0 1.5em;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end
}

footer .footer-service ul.servicelinks > p > a{
    color: #cbcac8;
}

footer .footer-service ul.servicelinks > p > a::before {
    display: none;
}

footer .footer-service ul.servicelinks li {
    margin: 0 0 0 1em;
    display: inline-block;
    padding: 0
}

footer .footer-service ul.servicelinks li a {
    display: block;
    padding: 0;
    text-decoration: none;
    color: #cbcac8
}

footer .footer-service ul.servicelinks li a:hover {
    color: var(--color-white);
    text-decoration: underline
}

footer .footer-service ul.servicelinks li:last-child {
    border-right: 0
}

footer .creator {
    padding: 1em 0;
    background-color: var(--color-black);
    text-align: right
}

footer .footer-partner {
    background-color: var(--color-primary-dark);
    padding: 20px 0 40px
}

footer .footer-partner .wrapper {
    display: flex;
    align-items: center
}

footer .footer-partner .wrapper a {
    flex-basis: auto;
    margin-left: 2em;
    display: block
}

footer .footer-partner .wrapper p {
    margin: 0
}

footer .footer-partner .wrapper .footer-logo {
    height: 40px;
    width: auto
}

footer .footer-partner .wrapper .footer-logo-large {
    height: 80px;
    width: auto
}

.footer .socialmedialinks {
    display: flex
}

.footer .socialmedialinks li {
    margin-inline-end: 16px;
    font-size: 24px
}

.mobilenav {
    position: absolute;
    top: 20px;
    padding-left: 5%;
    padding-right: 5%;
    width: 100%
}

.mobilenav .hamburger {
    margin: auto 0 auto auto
}

.team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 15px
}

.reverse .team-contact--img {
    order: -1;
    margin-bottom: 10px
}

.team h2 {
    margin: 0;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0
}

.team h2 [href^="mailto:"]::before {
    display: none
}

.team p {
    color: var(--color-primary)
}

.team-contact--content {
    position: relative
}

.team-contact--content h2 a::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.team__lst {
    display: grid;
    grid-template-columns: 100%;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1em;
    margin-bottom: 5em
}

.member {
    position: relative;
    aspect-ratio: 71 / 48
}

.member__txt-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.5em;
    background-color: rgba(255, 255, 255, 0.8);
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 12 4 4;
    opacity: 0;
    transition: opacity .2s;
    overflow: auto
}

.member.active .member__txt-container {
    opacity: 1
}

.member:hover .member__txt-container,
.member:focus-within .member__txt-container {
    opacity: 1
}

.member__txt-container--bg-blue {
    color: var(--color-white);
    background-color: rgba(0, 50, 101, 0.8)
}

.member__title,
.member a {
    color: inherit
}

.member__img-container,
.member__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden
}

.mainnav {
    margin: 0;
    display: inline-block;
    float: right;
    position: relative;
    top: -88px;
    height: 0
}

.mainnav:after {
    content: "";
    position: absolute;
    background-color: var(--color-primary-alt);
    width: 100vw;
    left: 60%;
    height: 88px;
    top: 0;
    z-index: 0
}

.menu {
    box-sizing: border-box;
    list-style: none;
    padding: 0 0 0 20px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: relative;
    right: -20px;
    background-color: var(--color-primary-alt)
}

.menu>li {
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    margin-right: 0
}

.menu>li>a {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--color-white);
    display: inline-table;
    padding: 0 20px;
    line-height: 88px;
    height: 88px;
    text-decoration: none;
    letter-spacing: .02em;
    text-align: center;
    transition: color .3s
}

.menu>li>a {
    position: relative
}

.menu>li.active>a,
.menu>li>a:hover,
.menu>li>a.open {
    color: var(--color-accent-blue)
}

.menu>li>a.open:focus,
.menu>li>a:focus {
    outline: 0;
    box-shadow: 0 0 0 2px var(--color-white) inset, 0 0 4px rgba(0, 0, 0, 0.8)
}

.menu-panel {
    width: 281px;
    left: 0;
    right: 0;
    background: var(--color-white);
    cursor: default;
    line-height: normal;
    margin: 0;
    max-height: 0;
    padding: 20px 0 15px;
    position: absolute;
    z-index: 10001;
    transition: opacity 300ms ease 300ms, max-height 300ms ease 300ms, visibility 0s linear 0s, top 0s linear 0s;
    opacity: 0;
    visibility: hidden;
    top: -9999em;
    box-shadow: 0 5px 5px rgba(0, 0, 10, 0.2)
}

.menu-panel.open {
    max-height: 800px;
    top: 88px;
    visibility: visible;
    opacity: 1
}

.menu>li:nth-child(5) .menu-panel {
    right: 0;
    left: auto
}

.menu>li:last-child .menu-panel {
    right: 0;
    left: auto
}

.menu-panel a {
    color: var(--color-primary-alt);
    display: block;
    font-size: 1em;
    line-height: 1.3;
    margin: 0;
    text-decoration: none;
    position: relative;
    padding: 8px 15px 8px 20px
}

.menu-panel a:focus {
    outline: var(--color-black) solid 2px;
    outline-offset: -2px
}

.menu-panel>ul {
    list-style: none;
    width: 100%;
    margin: 0 auto;
    padding: 0
}

.menu-panel>ul li {
    display: block;
    list-style: none;
    margin: 0 0 5px;
    padding: 0
}

.menu-panel>ul li.menu-panel-group>a {
    display: block;
    font-size: 1.125em;
    border-bottom: 1px solid silver;
    margin-bottom: 15px
}

.menu-panel li.active>a {
    color: var(--color-primary);
    font-weight: bold
}

.menu-panel li.current>a {
    color: var(--color-primary);
    font-weight: bold
}

.menu-panel li a:hover {
    background-color: var(--color-gray-150)
}

@media only screen and (max-width:85.625em) {
    .menu>li>a {
        font-size: 1.125em
    }
}

@media only screen and (max-width:78.125em) {
    .menu>li>a {
        font-size: 1em;
        padding: 15px
    }
}

@media only screen and (max-width:90em) {
    .banner__text p {
        font-size: 1.8em;
        max-width: 100%;
    }

    .project-teasers>li img {
        height: 18vw
    }

    .content-page-layout .content-grid .main {
        padding: 0 0 0 60px
    }
}

@media only screen and (max-width:78.125em) {
    .project-teasers>li img {
        height: 15vw
    }
}

@media only screen and (max-width:75.000em) {
    .content-page-layout .wrapper {
        padding-left: 0;
        padding-right: 0
    }

    .content-page-layout .content-grid .main {
        padding: 0 0 0 50px
    }

    .project-teasers>li img {
        height: 30vw
    }

    .banner__text .inner {
        width: 60%
    }
}

@media only screen and (max-width:64em) {
    .header .header-tools {
        flex-basis: 70%;
        justify-content: flex-end
    }

    .content-page-layout .content-grid .main {
        padding: 0 50px
    }

    .mainnav {
        display: none
    }

    .mobilenav {
        display: block
    }
}

@media only screen and (max-width:60em) {
    .content-page-layout {
        padding-top: 50px
    }

    .content-page-layout .content-grid .contentnav {
        display: none
    }

    .content-page-layout .content-grid .main {
        flex-basis: 100%;
        padding: 0 60px
    }

    .project-teasers>li img {
        height: 30vw
    }

    .footer .footer-grid {
        flex-wrap: wrap
    }

    .footer .footer-address {
        order: 1;
        flex-basis: calc(100% - 30px);
        margin-bottom: 2em
    }

    .footer .footer-service {
        order: 2;
        flex-basis: calc(100% - 30px);
        margin-bottom: 2em
    }
}

@media only screen and (max-width:48em) {
    .header > .wrapper {
        padding-top: 20px
    }

    .header .header-container {
        flex-direction: column;
        align-items: flex-start
    }

    .header .logo {
        min-width: 0;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        padding-right: 50%;
        margin-bottom: 20px
    }

    .header .header-tools {
        flex-basis: 100%;
        width: 100%;
    }

    .header .header-tools .searchform {
        width: 100%;
        top: 0
    }

    .project-teasers>li img {
        height: 30vw
    }

    .content-page-layout .content-grid .main {
        min-width: 0;
        flex-basis: 100%;
        padding: 0 5%
    }

    .banner__image {
        flex-basis: 50%
    }

    .banner__image img {
        height: 200px
    }

    .banner__text {
        flex-basis: 50%
    }

    .banner__text p {
        font-size: 1em
    }

    .banner__text .inner {
        margin-left: 25px;
        margin-bottom: 20px;
        width: 50%
    }

    .home-portrait .inner {
        padding-left: 0
    }

    .home-portrait .inner h2 {
        font-size: 1.8em
    }

    .home-portrait .inner p {
        font-size: 1.1em
    }

    .team {
        display: block
    }
}

@media only screen and (max-width:38em) {
    .project-teasers>li img {
        height: 60vw
    }

    h1 {
        word-wrap: break-word;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto
    }
}

@media only screen and (max-width:32.5em) {
    .wrapper {
        width: 90%
    }

    .header > .wrapper {
        padding-top: 20px;
        padding-bottom: 20px
    }

    .header .header-container {
        flex-direction: column;
        align-items: flex-start
    }

    .header .logo {
        min-width: 0;
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 100%;
        padding-right: 50%
    }

    .header .logo img {
        height: 75px
    }

    .header .header-tools {
        flex-basis: 100%;
    }

    .header .header-tools .searchform {
        width: 100%;
        top: 0
    }

    .banner__text .inner {
        margin-left: 15px;
        margin-bottom: 20px;
        width: 50%
    }

    .home-portrait img {
        margin-left: 0;
        margin-top: 0
    }

    .content-page-layout .content-grid .main {
        min-width: 0;
        flex-basis: 100%;
        padding: 0
    }

    .footer .footer-grid {
        flex-direction: column
    }

    .footer .footer-service,
    .footer .footer-address {
        flex-basis: calc(100% - 30px);
        margin-bottom: 3em
    }

    .footer .footer-partner p {
        line-height: 1.7;
        font-size: .8em
    }

    .footer .footer-service {
        text-align: left
    }

    .footer .footer-service ul.servicelinks {
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start
    }

    .footer .footer-service ul.servicelinks li {
        margin-left: 0
    }

    .footer .footer-service ul.servicelinks .created{
        margin: 0;
    }

    .footer .footer-service img {
        height: 120px
    }

    .block-group,
    .row {
        margin: .8em -0.4em .8em -0.4em
    }

    .block,
    [class*="col-"] {
        padding: .8em .4em;
        margin-bottom: 0
    }

    .col-1,
    .col-2,
    .col-3,
    .col-4,
    .col-5,
    .col-6,
    .col-half,
    .col-7,
    .col-8,
    .col-9,
    .col-10,
    .col-11,
    .col-12 {
        width: 100%
    }

    .alignleft,
    .alignright,
    .aligncenter {
        float: none;
        display: block;
        max-width: 100%;
        margin: 1.5em 0
    }

    .aligncenter {
        display: table;
        width: auto
    }

    .aligncenter figcaption {
        display: table-caption;
        caption-side: bottom
    }

    .table-responsive {
        border-right: 1px solid var(--color-gray-250);
        border-bottom: 0
    }

    .desktop {
        display: none
    }

    .mobile {
        display: block
    }
}

/* ════ SITE FONTS (@font-face) — part of Base ════ */

@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB_XvYC6trAT7RQNNK2EG7SIwPWMNlCVytER0IPh7KX59Z0CnSKYmkvjnJSTyQB.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB_XvYC6trAT7RQNNK2EG7SIwPWMNlCVytER0IPh7KX59Z0CnSKbGkvjnJSTw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB_XvYC6trAT7RQNNK2EG7SIwPWMNlCVytER0IPh7KX59Z0CnSKYmkvjnJSTyQB.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB_XvYC6trAT7RQNNK2EG7SIwPWMNlCVytER0IPh7KX59Z0CnSKbGkvjnJSTw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB9XvYC6trAT55ZBi1ueQVIjQTD_JrIH2G7nytkHRyQ8p4wUjm6bmMorHBiTg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB9XvYC6trAT55ZBi1ueQVIjQTD_JrIH2G7nytkHRyQ8p4wUje6bmMorHA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB9XvYC6trAT55ZBi1ueQVIjQTD_JrIH2G7nytkHRyQ8p4wUjm6bmMorHBiTg.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../Fonts/s_karla_v30_qkB9XvYC6trAT55ZBi1ueQVIjQTD_JrIH2G7nytkHRyQ8p4wUje6bmMorHA.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}



/* ==========================================================================
   TYPO3 WE COOKIE CONSENT (KLARO) — EXACT MATCH TO LOCAL DESIGN
   ========================================================================== */

.tx-we-cookie-consent,
#klaro,
#klaro .klaro.we_cookie_consent {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    z-index: 2147483647 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #2c2f31 !important;
    line-height: 1.5 !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

#klaro .cookie-notice {
    background-color: #ffffff !important;
    box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.15) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

#klaro .cn-body {
    width: 90%;
    max-width: 1410px;
    margin: 0 auto !important;
    padding: 1.75rem 6% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1rem 2.5rem !important;
    box-sizing: border-box !important;
    position: relative !important;
    float: none !important;
}

/* Header Title ("Datenschutzeinstellungen") */
#klaro .cn-body::before {
    content: "Datenschutzeinstellungen" !important;
    display: block !important;
    width: 100% !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #2c2f31 !important;
    margin-bottom: 0.25rem !important;
}

/* Left side description text */
#klaro .cn-body > p {
    flex: 1 1 500px !important;
    max-width: 68% !important;
    margin: 0 !important;
    font-size: 1.4rem !important;
    color: #5e6266 !important;
    line-height: 1.55 !important;
}

#klaro .cn-body > p span {
    color: inherit !important;
    font-size: inherit !important;
}

#klaro .cn-body > p a {
    color: #2c2f31 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

#klaro .cn-body > p a:hover {
    color: #004183 !important;
}

/* Disable overlapping default Klaro absolute icons */
#klaro .cn-ok ::before,
#klaro .cn-ok ::after,
#klaro .cm-btn::before,
#klaro .cm-btn::after,
#klaro .cn-learn-more::before,
#klaro .cn-learn-more::after,
#klaro .cm-link::before,
#klaro .cm-link::after {
    content: none !important;
    display: none !important;
}

#klaro .cn-ok svg,
#klaro .cn-ok img,
#klaro .cn-ok i {
    display: none !important;
}

/* Right side buttons container (2-row stack) */
#klaro .cn-ok {
    flex: 0 0 350px !important;
    width: 350px !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    transform: none !important;
}

/* Top Button Row (Accept All / Accept Necessary) */
#klaro .cn-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    width: 100% !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    transform: none !important;
    max-width: 100% !important;
}

/* Primary buttons (Dark style) */
#klaro .cm-btn {
    flex: 1 1 50% !important;
    width: 50% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    background-color: #30363c !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid #30363c !important;
    border-radius: 4px !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 1.3rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    cursor: pointer !important;
    outline: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    box-sizing: border-box !important;
    white-space: normal !important; /* Allows 2-line text like "Nur notwendige akzeptieren" */
    margin: 0 !important;
    min-height: 48px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: static !important;
    float: none !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#klaro .cm-btn:hover,
#klaro .cm-btn:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

/* Secondary button: Settings (Bottom row full-width) */
#klaro .cn-learn-more,
#klaro .cm-link {
    order: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    background-color: #eaeff2 !important;
    background-image: none !important;
    color: #2c2f31 !important;
    border: 1px solid #eaeff2 !important;
    border-radius: 4px !important;
    padding: 0.6rem 1rem 0.9rem 1rem !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-height: 42px !important;
    box-shadow: none !important;
    text-shadow: none !important;
    position: static !important;
    float: none !important;
    transform: none !important;
}

.klaro.we_cookie_consent .cookie-modal .cm-modal.cm-klaro .cm-footer > * {
    gap: 10px;
}

#klaro .cn-learn-more:hover,
#klaro .cn-learn-more:focus,
#klaro .cm-link:hover,
#klaro .cm-link:focus {
    background-color: #d4dae0 !important;
    border-color: #d4dae0 !important;
    color: #000000 !important;
    text-decoration: none !important;
}

/* Bottom full-width footer strip */
#klaro .cn-footer {
    background-color: #eaeff2 !important;
    border-top: 1px solid #e4eaed !important;
    padding: 0.45rem 1.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

#klaro .cn-footer-inner {
    max-width: 1410px !important;
    margin: 0 auto !important;
    display: flex !important;
    gap: 1.5rem !important;
}

#klaro .cn-footer a {
    color: #5e6266 !important;
    font-size: 0.825rem !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#klaro .cn-footer a:hover {
    color: #004183 !important;
    text-decoration: underline !important;
}

/* Mobile Responsiveness */
@media screen and (max-width: 992px) {
    #klaro .cn-body > p {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    #klaro .cn-ok {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 576px) {
    #klaro .cn-buttons {
        flex-direction: column !important;
    }

    #klaro .cm-btn {
        width: 100% !important;
    }
}