/*
  README

  -----------------------------

  CSS Guidelines

  This project follows the BEM (Block Element Modifier ) Pattern.
  ( please refer https://cssguidelin.es/ )

  Global css classes are marked with the prefix "style-", page template classes with "l-" prefix and js classes with "js-".

*/

/* CSS-Variablen */

:root {
    --sph-color--white: #FFFFFF;
    --sph-color--off-white: #F6F6F7;
    --sph-color--dark-teal: #0A415C;
    --sph-color--light-blue: #0090D7;
    --sph-color--tangerine: #FF9900;

    --sph-color--success: #53bb5d;
    --sph-color--warning: #F5AB43;
    --sph-color--error: #FF5A64;

    --sph-gradient--bg-box: linear-gradient(261.23deg, color-mix(in srgb, var(--sph-color--dark-teal) 10%, transparent) -10.62%, color-mix(in srgb, var(--sph-color--dark-teal) 5%, transparent) 109.23%);
    --sph-gradient--dark-teal: linear-gradient(261.23deg, #0A415C -10.62%, rgba(10, 65, 92, 0.9) 109.23%);
    --sph-gradient--bg-box-division: linear-gradient(360deg, rgba(0, 144, 215, 0) 49.73%, rgba(10, 65, 92, 0.05) 100%);
    --sph-gradient--dark-teal-division: linear-gradient(360deg, rgba(10, 65, 92, 0) 49.73%, rgba(10, 65, 92, 0.7) 100%);

    --sph-border-radius--none: 0px;
    --sph-border-radius--s: 5px;
    --sph-border-radius--m: 10px;
    --sph-border-radius--l: clamp(12px, 3vw, 15px);
    --sph-border-radius--xl: clamp(15px, 4vw, 20px);

    --sph-shadow: 0px 20px 40px 0px color-mix(in srgb, var(--sph-color--dark-teal) 25%, transparent);

    --sph-font-size--xs: 0.875rem;
    --sph-font-size--s: 1rem;
    --sph-font-size--m: clamp(1rem, 2vw, 1.125rem);
    --sph-font-size--l: clamp(1.125rem, 2.2vw, 1.25rem);
    --sph-font-size--xl: clamp(1.3125rem, 3vw, 1.5rem);
    --sph-font-size--2xl: 2rem;
    --sph-font-size--3xl: clamp(3.25rem, 8vw, 4.5rem);
    --sph-font-size--4xl: clamp(3.375rem, 10vw, 5.75rem);

    --sph-font: 'proxima-nova', sans-serif;

    --datepicker-color-highlight: var(--sph-color--light-blue);
    --datepicker-color-selected: color-mix(in srgb, var(--sph-color--light-blue), transparent 80%);
}

/* REM */

html {
    -webkit-text-size-adjust: none;
    scroll-behavior: smooth;
}

/* FONT-STYLES */

body {
    background: var(--sph-gradient--bg-box);
    font-family: var(--sph-font);
    font-style: normal;
    font-weight: 500;
    font-size: var(--sph-font-size--m);
    line-height: 1.5;
}

a {
    color: var(--font-color-override, var(--font-color));
    text-decoration: none;
}

p {
    margin-bottom: var(--spacing--3xs);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

ul {
    padding-left: var(--spacing--3xs);
}

ul ::marker {
    color: var(--template-highlight);
}

:where(.bh-bodytext) strong {
    font-weight: 800;
}

:where(.bh-bodytext) *,
*:where(.bh-bodytext) {
    color: var(--font-color-override, var(--font-color));
}

/* Text-Styles */

/*

.style-text-FORMAT {
    font-style
    font-weight
    line-height
    letter-spacing
    text-transform
    color
    margin-bottom;
}
*/

h1,
.style-text--h1 {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--3xl);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--font-color-override, var(--font-color-highlight));
    margin-bottom: var(--spacing--s);
}

h2,
.style-text--h2 {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--2xl);
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--3xs);
}

h3,
.style-text--h3,
.frame-type-menu_sitemap > ul > li > a {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--xl);
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--3xs);
}

h4,
.style-text--h4 {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--m);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--3xs);
}

h5,
.style-text--h5 {
    font-style: normal;
    font-weight: 700;
    font-size: var(--sph-font-size--m);
    line-height: 1.5;
    letter-spacing: 0;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--3xs);
}

h6,
.style-text--h6 {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--xs);
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--4xs);
}

:where(.bh-bodytext) p {
    font-style: normal;
    font-weight: 500;
    font-size: var(--sph-font-size--m);
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--3xs);
}

:where(.bh-bodytext) a {
    color: var(--font-color-override, var(--font-color-highlight));
}

.bh-bodytext--hiden-links a {
    color: var(--font-color-override, var(--font-color));
}

:where(.bh-bodytext) a:hover {
    text-decoration: underline;
}

.style-icon-list,
ul.style-ul--check,
.style-ul--check ul {
    list-style-type: none;
    padding: 0;
}

.style-icon-list li,
ul.style-ul--check li,
.style-ul--check ul li {
    position: relative;
    padding-left: 36px;
    margin-bottom: var(--spacing--3xs);
}

.style-icon-list li::before,
ul.style-ul--check li::before,
.style-ul--check ul li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: 'bakehouse-iconset' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 26px;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
    color: var(--font-color-highlight);
}

.style-ul--check ul li::before,
ul.style-ul--check li::before {
    content: "\e919";
}

@media only screen and (max-width: 420px) {
    h1,
    .style-text--h1 {
        hyphens: auto;
    }
}

.frame-type-menu_sitemap ul li a {
    color: var(--font-color-override, var(--font-color-highlight));
}

.frame-type-menu_sitemap ul li a:hover {
    text-decoration-line: underline;
}

.frame-type-menu_sitemap ul li li::marker {
    content: "– ";
}

/* Formats */

.style-p--big {
    font-style: normal;
    font-weight: 500;
    font-size: var(--sph-font-size--xl);
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--2xs);
}

.style-p--small {
    font-style: normal;
    font-weight: 500;
    font-size: var(--sph-font-size--xs);
    line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
    color: var(--font-color-override, var(--font-color));

    margin-bottom: var(--spacing--xs);
}

.style-p--code {
    font-family: monospace;
    border: 1px solid #2A2824;
    background: rgba(25,25,25,0.95);
    padding: var(--spacing--2xs);
    display: block;
    letter-spacing: -1px;
    color: var(--sph-color--off-white);
    border-radius: var(--sph-border-radius--l);
}

.style-button-text {
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--xs);
    line-height: 1.50;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--font-color-override, var(--font-color));
}

.style-span--highlight {
    color: var(--font-color-highlight);
}

/* Editing-Formats */

.yellow-mark {
    background: yellow;
}

/* Color-Formats */

:where(.bh-bodytext),
.style-color {
    color: var(--font-color-override, var(--font-color));
}

/*
.style-color--COLOR {
    --font-color-override
}
*/

.style-color--off-white {
    --font-color-override: var(--sph-color--off-white);
}

.style-color--dark-teal {
    --font-color-override: var(--sph-color--dark-teal);
}

.style-color--light-blue {
    --font-color-override: var(--sph-color--light-blue);
}

.style-color--tangerine {
    --font-color-override: var(--sph-color--tangerine);
}

.style-color--highlight {
    --font-color-override: var(--font-color-highlight);
}

/* Background-Colors */

.style-bg {
    background: var(--bg-color);
    --font-color: var(--bg-font-color);
    --font-color-highlight: var(--bg-font-color-highlight);
}

.style-bg-font {
    --font-color: var(--bg-font-color);
    --font-color-highlight: var(--bg-font-color-highlight);
}

/* .style-bg--COLOR {
    --bg-color
    --bg-font-color
    --bg-font-color-highlight
} */

.style-bg--white {
    --bg-color: var(--sph-color--white);
}

.style-bg--off-white {
    --bg-color: var(--sph-color--off-white);
}

.style-bg--dark-teal  {
    --bg-color: var(--sph-color--dark-teal);
}

.style-bg--light-blue {
    --bg-color: var(--sph-color--light-blue);
}

.style-bg--tangerine  {
    --bg-color: var(--sph-color--tangerine);
}

.style-bg--gradient-bg-box {
    --bg-color: var(--sph-gradient--bg-box);
}

.style-bg--gradient-bg-box-division {
    --bg-color: var(--sph-gradient--bg-box-division);
}

.style-bg--gradient-dark-teal {
    --bg-color: var(--sph-gradient--dark-teal);
}

.style-bg--gradient-dark-teal-division {
    --bg-color: var(--sph-gradient--dark-teal-division);
}

.style-bg--white,
.style-bg--off-white,
.style-bg--gradient-bg-box,
.style-bg--gradient-bg-box-division {
    --bg-font-color: var(--sph-color--dark-teal);
    --bg-font-color-highlight: var(--sph-color--light-blue);
}

.style-bg--dark-teal,
.style-bg--light-blue,
.style-bg--tangerine,
.style-bg--gradient-dark-teal,
.style-bg--gradient-dark-teal-division,
.style-bg--dark-image {
    --bg-font-color: var(--sph-color--off-white);
    --bg-font-color-highlight: var(--sph-color--off-white);
}

/* style-border-radius */

.style-border-radius {
    border-radius: var(--border-radius);
}

.style-border-radius--none {
    --border-radius: var(--sph-border-radius--none);
}

.style-border-radius--s {
    --border-radius: var(--sph-border-radius--s);
}

.style-border-radius--m {
    --border-radius: var(--sph-border-radius--m);
}

.style-border-radius--l {
    --border-radius: var(--sph-border-radius--l);
}

.style-border-radius--xl {
    --border-radius: var(--sph-border-radius--xl);
}


/* style-interface-icon */

.style-interface-icon {
    font-size: 24px;
    color: var(--font-color-override, var(--font-color));
}

/* toggler-list */

.toggler-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: var(--spacing--4xs);
    margin-bottom: var(--spacing--m);
}

.toggler,
.sph-maincart-category.sph-maincart-category {
    background: color-mix(in srgb, var(--sph-color--dark-teal) 10%, transparent);
    color: var(--sph-color--dark-teal);
    --font-color: var(--sph-color--dark-teal);
    padding: 8px 16px;
    border-radius: 20px;
    line-height: 1.2;
    border: 1px solid color-mix(in srgb, var(--sph-color--dark-teal) 20%, transparent);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: var(--sph-font-size--m);
    transition: color 0.3s, background 0.3s;
}

.toggler:hover,
.sph-maincart-category.sph-maincart-category:hover {
    background: color-mix(in srgb, var(--sph-color--dark-teal) 20%, transparent);
    color: var(--sph-color--dark-teal);
}

.toggler.js-mixitup-filter-active,
.sph-maincart-category.sph-maincart-category.active {
    background: var(--sph-color--dark-teal);
    color: var(--sph-color--off-white);
    --font-color: var(--sph-color--off-white);
}

/* row-link */

.row-link {
    position: relative;
    display: block;
    border-top: 1px solid var(--font-color);
    padding: var(--spacing--3xs) 0;
    padding-right: 30px;
}

.row-link::after {
    content: "\e902";
    font-family: 'bakehouse-iconset' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%);
    font-size: 20px;

    transition: transform 0.3s, color 0.3s;
}

.row-link:hover::after {
    transform: translate(5px,-50%);
    color: var(--font-color-highlight);
}

.row-link:last-child {
    border-bottom: 1px solid var(--font-color);
}

/* data-sph-icon */

.style-sph-icon::before {
    content: "";
    display: block;
    height: 24px;
    width: 24px;
    background-image: var(--sph-icon-url);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: invert(1);
}

/* margin-content-container */

.margin-content-container {
    --margin-content-container__margin-top: var(--spacing--xl);
    --margin-content-container__margin-bottom: var(--spacing--xl);
}

.bhe-state-dragging .margin-content-container:hover > .bhe-container-dropzone {
    min-height: 1px;
    margin-bottom: -1px;
}

.bhe-state-editing
    .bhContainer.margin-content-container
    > .bhElement:nth-child(2):not(.margin-content-element--no-margin):not(.margin-content-element--no-margin-top),
.bhContainer.margin-content-container > .bhElement:first-child:not(.margin-content-element--no-margin):not(.margin-content-element--no-margin-top) {
    margin-top: var(--margin-content-container__margin-top);
}

.bhe-state-editing
    .bhContainer.margin-content-container
    > .bhElement:nth-last-child(2):not(.margin-content-element--no-margin):not(.margin-content-element--no-margin-bottom),
.bhContainer.margin-content-container > .bhElement:last-child:not(.margin-content-element--no-margin):not(.margin-content-element--no-margin-bottom) {
    margin-bottom: var(--margin-content-container__margin-bottom);
}

/* bh-bodytext table */

:root {
    --table-border: 1px solid color-mix(in srgb, var(--sph-color--dark-teal) 20%, transparent);
    --table-border-radius: var(--sph-border-radius--xl);
}

.bh-bodytext .table__container {
    position: relative;
    border-radius: var(--table-border-radius);
    overflow: hidden;
}

.bh-bodytext .table__container__inner {
    overflow: auto;
}

.bh-bodytext table {
    background: var(--sph-color--off-white);
    --font-color: var(--sph-color--dark-teal);
    border-collapse: inherit;
}

.bh-bodytext table tr:first-child td:first-child {
    border-top-left-radius: var(--sph-border-radius--xl);
    border-collapse: inherit;
}

.bh-bodytext table tr:first-child td:last-child {
    border-top-right-radius: var(--sph-border-radius--xl);
    border-collapse: inherit;
}

.bh-bodytext table tr:last-child td:first-child {
    border-bottom-left-radius: var(--sph-border-radius--xl);
    border-collapse: inherit;
}

.bh-bodytext table tr:last-child td:last-child {
    border-bottom-right-radius: var(--sph-border-radius--xl);
    border-collapse: inherit;
}



.bh-bodytext table tr td {
    border-top: var(--table-border);
    height: 47px;
    min-height: 47px;
    padding: 0 5px;
}

.bh-bodytext table tr td:first-child {
    border-left: var(--table-border);
}

.bh-bodytext table tr td:last-child {
    border-right: var(--table-border);
}

.bh-bodytext table tr:last-child td {
    border-bottom: var(--table-border);
}

.bh-bodytext td {
    text-align: center;
    padding: var(--spacing--3xs);
    background: var(--sph-color--white);
}

.bh-bodytext td:first-child {
    text-align: left;
    padding-left: var(--spacing--2xs);
}

.bh-bodytext .nested-table td:first-child {
    vertical-align: top;
}

.bh-bodytext td:first-child {
}


/* style-table--head */

.bh-bodytext .style-table--head tr:first-child {

}

.bh-bodytext .style-table--head tr:first-child td {
    color: var(--sph-color--light-blue);
    font-style: normal;
    font-weight: 800;
    font-size: var(--sph-font-size--xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #e4e9eb;
}

/* style-table--highlight-first-col */

.bh-bodytext .style-table--highlight-first-col td:first-child {
    font-weight: 700;
    position: sticky;
    left: 0;

    max-width: calc(40vh - var(--content-spacing));
}

/* style-table--highlight-last-col */

.bh-bodytext .style-table--highlight-last-col td:last-child {
    font-weight: 700;
}

/* table__container--overflown */

.table__container--overflown {}

.table__container::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    width: calc(var(--content-spacing) + var(--spacing--3xs));
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

.table__container--overflown::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--bg-color, #FFFFFF) 80%, var(--bg-color, #FFFFFF) 100%);
}

.table__container--overflown .style-table--highlight-first-col td:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background: var(--font-color);
    opacity: 0;
    transition: opacity var(--transition-main);

}

.table__container--overflown:not(.table__container--scroll-start) .style-table--highlight-first-col td:first-child::after {
    opacity: 0.2;
}

.table__container--overflown:not(.table__container--scroll-end)::after {
    opacity: 1;
}

/* table__container--touched */

.bh-state-touch .table__container--overflown .table__container__inner::before {
    content: "\e9a2";
    font-family: 'bakehouse-iconset' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    border-radius: 50%;
    font-size: 2.5rem;
    height: 5rem;
    width: 5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;

    position: absolute;
    left: 50%;
    top: 50%;
    background: #ccc;
    color: #000000;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 20px #fff;
    animation: swipe 4s infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 2s;
    transition: opacity var(--transition-main);
}

@keyframes swipe {
    0% {
        transform: translate(-50%, -50%);
    }

    5% {
        transform: translate(-50%, -50%);
    }

    20% {
        transform: translate(50%, -50%);
    }

    40% {
        transform: translate(-150%, -50%);
    }

    55% {
        transform: translate(-50%, -50%);
    }

    100% {
        transform: translate(-50%, -50%);
    }
}

.table__container--touched .table__container__inner::before {
    opacity: 0;
}

/* interface-button */

.interface-button {
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: var(--spacing--3xs);
    height: 55px;
    padding-left: var(--spacing--3xs);
    padding-right: var(--spacing--3xs);
    border-radius: 55px;
    align-self: center;
    transition: background 0.3s;
}

.interface-button:hover {
    background: color-mix(in srgb, var(--bg-color), currentcolor 10%);
}