:root {
    --tsoRacing: rgb(28, 78, 53);   /* 134d37 */
    --tsoEmerald: rgb(23, 115, 88); /* 177358 */
    --tsoSage: rgb(118, 153, 133);  /* 769985 */
    --tsoJade: rgb(41, 133, 113);   /* 298571 */
    --tsoSand: rgb(234, 227, 217);  /* e9e3d7 */
    --tsoClay: rgb(207, 200, 183);  /* cfc8b7 */
    --tsoStone: rgb(186, 178, 159); /* bab29f */
    --tsoTaupe: rgb(141, 137, 122); /* 8d897a */

    --sidebarWidth: 340px;
    --backgroundColor: #fff;
    --baseColor: var(--tsoRacing);
    --borderColor: var(--tsoRacing);
    --secondaryColor: #a4b4b2;
    --baseLinearGradient: linear-gradient(180deg, rgba(234,227,217,1) 0%, rgba(234,227,217,0.92) 10.27%, rgba(234,227,217,0.69) 28.36%, rgba(234,227,217,0.6) 50%, rgba(234,227,217,0.65) 79.31%, rgba(234,227,217,1) 100%);
    --fontColor: #000;
    --boxShadow: 0 3px 6px rgba(0, 0, 0, 0.161);
    --borderRadius: 0;
}

body {
    font-family: "Roboto", Sans-Serif;
}

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

h1 {
    --headingH1FontSize: 4.0625rem;

    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    padding-bottom: 1.125rem;
    position: relative;
}

    h1:after {
        content: "";
        border-bottom: 4px solid #000;
        display: block;
        width: 80px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

h2 {
    --headingH2FontSize: 1.875rem;

    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    padding-bottom: 1.125rem;
    position: relative;
}

    h2:after {
        content: "";
        border-bottom: 4px solid #000;
        display: block;
        width: 40px;
        position: absolute;
        left: 0;
        bottom: 0;
    }

h3 {
    --headingH3FontSize: 1rem;

    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
}

input,
select,
textarea {
    --inputFgColor: #000;
    --inputBgColor: #fff;
    --inputBorderColor: var(--baseColor);
    --inputBorderWidth: 1px;
    --inputBorderRadius: 0.5rem;
}

textarea {
    resize: vertical;
}

button, .button {
    --buttonFontSize: 1rem;
    --buttonFgColor: #000;
    --buttonBgColor: #fff;
    --buttonBorderWidth: 1.5px;
    --buttonBorderColor: var(--baseColor);
    --buttonBorderRadius: 0;
    --buttonPadding: 0.5rem 2.5rem;

    font-weight: lighter;
}

.heading--border {
    --headingBorderColor: #000;
    --headingBorderWidth: 80px;
    position: relative;
    padding-bottom: 1rem;
}

.heading--border:after {
        content: "";
        border-bottom: 4px solid var(--headingBorderColor);
        display: block;
        width: var(--headingBorderWidth);
        position: absolute;
        left: 0;
        bottom: 0;
}

.sidebar {
    --navTextColor: var(--fontColor);
    --navSubMenuBackgroundColor: #f7f3ea;
    --navSubMenuActiveBackgroundColor: var(--navActiveBackgroundColor);
    --navIconColor: var(--tsoSage);
    --navIconColorHover: var(--tsoRacing);
    --navIconColorActive: var(--navIconColorHover);
    --navBorderWidth: 2px;
    --navBorderColor: transparent;
    --navBorderColorHover: var(--tsoRacing);
    --navBorderColorActive: var(--tsoRacing);
    --navActiveBackgroundColor: #b1bfb4;

    background: rgb(234,227,217);
    background: linear-gradient(180deg, rgba(234,227,217,1) 0%, rgba(234,227,217,0.92) 10.27%, rgba(234,227,217,0.69) 28.36%, rgba(234,227,217,0.6) 50%, rgba(234,227,217,0.65) 79.31%, rgba(234,227,217,1) 100%);
    background-color: rgb(234,227,217);
    border-right: none;
    box-shadow: none;
}

    .sidebar a {
        color: var(--navTextColor);
    }

.sidebar__logo img {
    max-width: 100px;
}

.sidebar__session {
    color: var(--navTextColor);
    background: rgb(186,178,159);
    background: linear-gradient(180deg, rgba(186,178,159,1) 0%, rgba(186,178,159,0.92) 10.27%, rgba(186,178,159,0.69) 28.36%, rgba(186,178,159,0.6) 50%, rgba(186,178,159,0.65) 79.31%, rgba(186,178,159,1) 100%);
    display: flex;
    flex-direction: column;
    width: 290px;
}

.sidebar__session__userAvatar {
    font-size: 2.5rem;
    color: #fff;
    background-color: var(--baseColor);
    border-radius: 100%;
    width: 75px;
    height: 75px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebar__session__userId {
    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    font-size: 1.25rem;
    font-weight: normal;
    text-align: center;
    padding: 0.5rem 0;
}


.sidebar__session__timer {
    color: rgb(112, 112, 112);
    text-align: center;
    font-weight: 300;
    margin-top: 0;
}

    .sidebar__session__timer span {
        font-size: 18px;
        display: inline;
    }

    .sidebar__session__timer button {
        background-color: var(--baseColor);
        color: #fff;
        font-weight: 500;
        padding: 0.5rem 1.5rem;
    }

        .sidebar__session__timer button:hover {
            background-color: var(--baseColor);
        }

.sidebar__navigation {
    margin: 2.5rem 0 0.5rem;
    scrollbar-color: var(--tsoStone) var(--tsoSand);
    scrollbar-width: thin;
}

    .sidebar__navigation a {
        padding: 0.75rem;
        font-size: 1.275rem;
        font-weight: 300;
        border: 2px solid transparent;
    }

        .sidebar__navigation a.active {
            color: var(--navTextColor);
            border-right: 2px solid var(--baseColor);
            border-left: 2px solid var(--baseColor);
            border-bottom: 2px solid var(--baseColor);
            border-top: 2px solid var(--baseColor);
            border-radius: 0.2rem;
            font-weight: 500;
        }

        .sidebar__navigation a:hover {
            border-radius: 0.2rem;
            font-weight: 500;
        }

        .sidebar__navigation a i {
            font-size: 1.75rem;
            margin-right: 1.25rem;
        }

@media only screen and (max-width: 576px) {
    .header__logo {
        max-width: 300px;
        display: flex;
        align-self: center;
        margin-bottom: 1rem;
    }

        .header__logo img {
            width: 100%;
        }
}

.main {
    color: var(--fontColor);
    padding: 1.75rem 3.125rem 6.75rem;
}

    .main h1 {
        margin-bottom: 1.875rem;
    }

.main__header-meta {
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
}

@media only screen and (max-width: 576px) {
    .main__header-meta {
        flex-direction: column;
        justify-content: initial;
        margin-bottom: 2.5rem;
    }
}

.main__topBar {
    background-color: transparent;
    color: var(--fontColor);
    padding: 0.75rem 1rem;
    margin: -1rem -2rem 1rem;
}

@media only screen and (max-width: 576px) {
    .main__topBar h1 {
        margin: 0;
        white-space: pre-wrap;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .main__topBar a {
        color: var(--fontColor);
    }
}

.main__postback {
}

    .main__postback a {
        color: #000;
        font-weight: lighter;
        font-style: italic;
        display: inline-flex;
        align-items: center;
        position: relative;
        left: -12px;
    }

    .main__postback i {
        font-size: 2.5rem;
        margin-right: 0.75rem;
    }

.main__header-meta .contact-card__contact {
    width: auto;
    flex-direction: row;
}

@media only screen and (max-width: 576px) {
    .main__header-meta .contact-card__contact {
        margin-top: 1rem;
        justify-content: center;
    }
}

.main__header-meta .contact-card__contact-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    margin: 0 1rem 0 0;
    flex-shrink: 0;
}

.main__header-meta .contact-item__icon {
    text-align: left;
    min-width: 1rem;
}

.main__header-meta .contact-card__contact-name {
    font-size: 1.15rem;
}

.main__header-meta .contact-details__item:not(:only-child):not(:last-child) {
    margin-bottom: 0.25rem;
}

.pagination {
    --paginationItemFgColor: var(--fontColor);
    --paginationItemBgColor: #fff;
    --paginationItemFgColorHover: var(--tsoSand);
    --paginationItemBgColorHover: var(--tsoRacing);
    --paginationItemPadding: 0.25rem 0.55rem;
    --paginationItemMargin: 0 0.25rem;
    --paginationItemBorderRadius: 0.3rem;
    --paginationItemBorderColor: var(--borderColor);
    text-align: right;
    margin-top: 1rem;
    padding: 0;
}

    .pagination a {
        font-weight: bold;
    }

        /*Vor/Zurueck/Erste/Letzte Buttons*/
        .pagination a:nth-child(-n+2),
        .pagination a:nth-last-child(-n+2) {
            margin: 0;
            border: 0;
        }

.login {
    flex: 0 0 auto;
    width: 320px;
}

    .login, .login a {
        color: var(--fontColor);
    }

        .login form {
            border: 0;
        }

        .login h2::after {
            display: none;
        }

.login__actions button {
    font-weight: lighter;
    text-transform: none;
}

/* ab Hier Boxen, die später ins Base.css gehören */

overview {
    display: list-item;
}

.overview {
    --overviewItem: #718096;
    --overviewItemActive: var(--baseColor);
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 1rem;
    flex-direction: column;
    max-width: 400px;
    min-width: 300px;
}

@media only screen and (min-width: 1140px) {
    .overview {
        flex-direction: row;
    }
}

@media only screen and (min-width: 1140px) {
    .overview {
        display: grid;
        grid-gap: 1rem;
        /* grid-template-columns: minmax(275px, 1fr) minmax(275px, 1fr) minmax(275px, 1fr); */
    }
}

.overview__item {
    background-color: #fff;
    border-radius: 0.3rem;
    border: 1px solid var(--overviewItem);
    display: flex;
    flex: 1;
    text-decoration: none;
    box-shadow: var(--boxShadow);
    transition: transform .3s ease;
}

    .overview__item.active,
    .overview__item:hover {
        border-color: var(--overviewItemActive);
    }

    .overview__item:not(:last-child) {
        margin-bottom: 1rem;
    }

@media only screen and (min-width: 1140px) {
    .overview__item:not(:last-child) {
        margin-bottom: 0;
    }
}

.overview__item__icon {
    background-color: var(--overviewItem);
    color: #fff;
    padding: 1rem 0;
    font-size: 2.5rem;
    border-radius: 0.2rem 0 0 0.2rem;
    width: 5rem;
    text-align: center;
}

.overview__item.active .overview__item__icon,
.overview__item:hover .overview__item__icon {
    background-color: var(--overviewItemActive);
}

.overview__item__text {
    color: var(--overviewItem);
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    text-align: right;
}

.overview__item.active .overview__item__text {
    color: var(--overviewItemActive);
}

.overview__item__text strong {
    font-size: 2rem;
    font-weight: normal;
}

.overview__item:hover {
    transform: scale(1.05);
}
/* .overviewhover:hover .overview__item__icon{
  opacity: 0.3;
  transition: .5s ease;
}
.overviewhover:hover .overview__item__text{
  opacity: 0.3;
}
.overview__item__icon{
  opacity: 1;
  transition: .5s ease;
}
.overview__item__text{
  opacity: 1;
  transition: .5s ease;
} */


.imagecardgrid {
    display: flex;
    flex: 1;
    justify-items: center;
    justify-content: center;
    align-items: center;
    display: grid;
    grid-gap: 24px;
    row-gap: 24px;
    column-gap: 24px;
    grid-template-columns: repeat(1, 1fr);
}

@media only screen and (min-width: 1050px) {
    .imagecardgrid {
        flex-direction: row;
    }
}

@media only screen and (min-width: 1050px) {
    .imagecardgrid {
        display: grid;
        grid-gap: 24px;
        row-gap: 24px;
        column-gap: 24px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-columns: minmax(296px, 1fr) minmax(296px, 1fr);
    }
}

@media only screen and (min-width: 1450px) {
    .imagecardgrid {
        flex-direction: row;
    }
}

@media only screen and (min-width: 1450px) {
    .imagecardgrid {
        display: grid;
        grid-gap: 24px;
        row-gap: 24px;
        column-gap: 24px;
        grid-template-columns: repeat(auto-fit, minmax(296px, 1fr));
    }
}

.file-upload {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
}

.file-upload__input {
    display: none;
}

.file-upload__button {
    cursor: pointer;
    margin-right: 15px;
}

/* .file-upload__button:active{
  background: #777;
} */

.file-upload__label {
    max-width: 250px;
    font-size: 0.95em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.file-uload--over {
    border-style: solid;
    border-color: #04574d;
    color: #04574d;
}

.simpleList__item {
    --simpleListItemFontSize: 1rem;
    --simpleListItemFgColor: var(--fontColor);
    --simpleListItemPadding: 0.75rem 0;
    --simpleListItemBorderWidth: 0 0 1px;
    --simpleListItemBorderColor: var(--baseColor);
}

    .simpleList__item .col input.ahrefbutton {
        background-color: transparent;
        border: 0;
        color: #04574d;
        font-weight: bold;
        text-decoration: underline;
        padding: 0;
        text-align: left;
        cursor: pointer;
    }

.card {
    --cardBgColor: #fff;
    --cardBorderWidth: 1px;
    --cardHeaderBgColor: transparent;
    --cardHeaderFgColor: var(--fontColor);
    --cardHeaderBorderWidth: 0;
    --cardHeaderBorderColor: transparent;
    --cardHeaderFontSize: 2.1875rem;
    --cardHeaderPadding: 1.5rem 1.25rem;
    --cardBodyBgColor: var(--cardBgColor);
    --cardBodyFgColor: var(--fontColor);
    --cardBodyBorderColor: transparent;
    --cardBodyPadding: 0 4rem 1rem;
    --cardFooterPadding: 0.5rem 1.25rem;
}

    .card:not(.filter--hidden) {
        --cardBorderColor: var(--baseColor);
    }

.card--table {
    --cardHeaderBgColor: transparent;
    --cardHeaderFgColor: var(--fontColor);
    --cardHeaderFontSize: 2.1875rem;
    --cardBodyBgColor: transparent;
    --cardBodyFgColor: var(--fontColor);
    margin-bottom: 5.625rem;
}

    .card--table > .card__header {
        margin-bottom: 2rem;
    }

        .card--table > .card__header h3 {
            margin: 0;
            padding-bottom: 1rem;
        }

.card--no-shadow {
    --cardBoxShadow: none;
}

.card--no-border {
    --cardBorderWidth: 0;
    --cardBorderColor: transparent;
    --cardHeaderBorderWidth: 0;
    --cardHeaderBorderColor: transparent;
    --cardBodyBorderColor: transparent;
}

.card--no-spacing {
    --cardHeaderPadding: 0;
    --cardBodyPadding: 0;
}


.card--chart {
    --cardHeaderBgColor: #fff;
    --cardBodyBgColor: #fff;
    --cardBodyBorderColor: #000;
    --cardBodyPadding: 0 0 1rem;
    background: var(--baseLinearGradient);
    padding-bottom: 0.5rem;
    margin-bottom: 5.625rem;
}

    .card--chart .card__header {
        margin-bottom: 0;
        padding-bottom: 2rem;
    }

        .card--chart .card__header h3 {
            margin: 0;
        }

    .card--chart .card__body {
        border-width: 1px;
        border-style: solid;
        margin: 2rem;
    }

.card__header {
    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    align-items: center;
}

    .card__header h3 {
        font-weight: normal;
        margin: 0 auto;
        white-space: pre-wrap;
        word-break: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .card__header input.ahrefbutton {
        background-color: transparent;
        border: 0;
        color: #04574d;
        font-weight: bold;
        text-decoration: underline;
        padding: 0;
        text-align: left;
        cursor: pointer;
    }

    .card__header a {
        color: var(--baseColor);
    }

.card__body {
}

.card__footer {
}

table thead th {
    border-bottom: 2px solid var(--borderColor);
    text-transform: initial;
    font-size: 1rem;
    font-weight: bold;
}

    table thead th a {
        color: var(--baseColor);
    }

table tbody td input.ahrefbutton {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    color: #04574d;
    font-weight: bold;
    text-decoration: underline;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

table tbody td button.ahrefbutton {
    background-color: transparent;
    border: 0;
    color: #04574d;
    font-weight: bold;
    text-decoration: underline;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.table-row__toggle-details-btn {
    --buttonFgColor: var(--baseColor);
    --buttonPadding: 0.5rem 1rem;
    --buttonBorderWidth: 0;
}

.table-row__details {
    display: none;
}

    .table-row__details .card {
        margin: 1rem 0;
    }

    .table-row__details .row-details__close-btn {
        --buttonPadding: 0.5rem 0.75rem 0.25rem;
        --buttonFontSize: 2rem;
        --buttonBorderRadius: 0.5rem;
        line-height: 1;
    }

	.table-row__details table thead th {
		position: unset;
	}


@media only screen and (min-width: 1140px) {
    .simpleList__item {
        --simpleListItemPadding: 0.75rem 0;
    }
}

.simpleList__item dt {
    font-weight: normal;
}

.simpleList__item dt,
.simpleList__item dd {
    line-height: 2;
}

.alert {
    margin-bottom: 2rem;
}

.summary {
    margin-bottom: 2rem;
}

.summary__item {
    --summaryItemFgColor: #000;
    --summaryItemBgColor: #fff;
    text-decoration: none;
}

a.summary__item,
a.summary__item * {
    cursor: pointer;
}

.summary__item--jumper {
    cursor: pointer;
}

    .summary__item--jumper .summary__item__text {
        text-align: left;
    }

        .summary__item--jumper .summary__item__text strong {
            font-size: 1.5rem;
        }

.summary--counter {
}

    .summary--counter .summary__item {
        --summaryItemBgColor: rgb(234,227,217);
        --summaryItemFgColorActive: #000;
        --summaryItemBgColorActive: transparent;
        background: var(--baseLinearGradient);
        box-shadow: none;
        border: 0;
        padding: 1.25rem 1rem;
    }

    .summary--counter .summary__item__text {
        text-align: center;
        padding: 0;
    }

        .summary--counter .summary__item__text strong {
            font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
        }

        .summary--counter .summary__item__text span {
            padding-top: 0.5rem;
        }

.contact-card {
    max-width: 50%;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    max-width: 650px;
}

    .contact-card .card__header h3 {
        margin: 0;
    }

    .contact-card .card__body {
        --cardBodyPadding: 0 1.25rem 2rem;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        flex: 1;
    }

@media only screen and (min-width: 576px) {
    .contact-card .card__body {
        flex-direction: row;
    }
}

.contact-card__contact {
    display: flex;
    flex-direction: column;
}

    .contact-card__contact:not(:only-child):not(:last-child) {
        margin-bottom: 2rem;
    }

@media only screen and (min-width: 576px) {
    .contact-card__contact:not(:only-child):not(:last-child) {
        margin-bottom: 0;
    }
}

@media only screen and (min-width: 576px) {
    .contact-card__contact {
        width: 50%;
    }
}

.contact-card__contact-avatar {
    font-size: 2.5rem;
    color: var(--baseColor);
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 100%;
    width: 105px;
    height: 105px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-card__contact-name {
    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem 0;
}

.contact-card__details {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}
.news-card {
	display: flex;
	margin-bottom: 2rem;
	max-width: 650px;
	min-height: 500px;
}

@media only screen and (min-width: 768px) {
  .news-card {
	margin-left: 1rem;
	min-height: auto;
  }
}

.client-card {
    margin-bottom: 2rem;
    display: flex;
    flex-direction: row;
}

.client-card__avatar {
    font-size: 1.5rem;
    color: var(--baseColor);
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 100%;
    width: 64px;
    height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.client-card__info {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;
    flex: 1;
    justify-content: space-around;
}

    .client-card__info em {
        font-style: normal;
    }

    .client-card__info strong {
        font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
        font-size: 1.25rem;
        font-weight: normal;
    }

.contact-details__item {
    display: flex;
    flex-wrap: nowrap;
    line-height: 1.25;
}

    .contact-details__item:not(:only-child):not(:last-child) {
        margin-bottom: 0.5rem;
    }


.contact-item__icon {
    color: var(--tsoJade);
    min-width: 2.5rem;
    margin-right: 1.25rem;
    line-height: inherit;
}

.contact-item__text {
    flex: 1;
    padding-right: 1rem;
    min-width: 0;
}

    .contact-item__text a {
        color: var(--fontColor);
        text-decoration: none;
    }

.table--full-width {
    width: 100%;
}

.table--table-row-column tbody {
    border: 0;
}

    .table--table-row-column tbody tr {
        display: flex;
        flex-direction: column;
    }

        .table--table-row-column tbody tr td:first-child:not(:only-child) {
            font-size: 1.15rem;
            font-weight: 500;
        }

        .table--table-row-column tbody tr td:last-child:empty {
            display: none;
        }

    .table--table-row-column tbody td:not(:first-child):not(:last-child) {
        --tableCellPadding: 0 1.25rem 1rem;
    }

.filter {
    --cardHeaderPadding: 0;
    --cardBodyPadding: 1rem;
    --cardFooterPadding: 0 1.25rem 1rem;
    --cardFooterBorderColor: transparent;
    position: relative;
    margin-top: 4rem;
}

    .filter .card__header h3 {
        display: none;
    }

    .filter .card__body label {
        font-weight: 500;
    }

.filter__options {
    display: flex;
    justify-content: end;
    position: absolute;
    top: -4rem;
    width: 100%;
}

.button--icon {
    border-color: transparent;
    --buttonFgColor: var(--tsoSage);
    --buttonPadding: 0.5rem;
    --buttonFontSize: 2rem;
    transition: color linear 0.1s;
}

    .button--icon.filter-toggle-visibility {
        align-items: center;
        display: flex;
    }

        .button--icon.filter-toggle-visibility:before {
            content: "Filter";
            color: var(--fontColor);
            font-size: 1.25rem;
            padding-right: 0.5rem;
        }

        .button--icon.filter-toggle-visibility:hover,
        .filter:not(.filter--hidden) .button--icon.filter-toggle-visibility {
            color: var(--tsoRacing);
        }

.products--grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 2rem;
    margin-bottom: 4rem;
}

@media only screen and (min-width: 1240px) {
    .products--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.product {
    --cardHeaderPadding: 2rem;
    --cardBodyPadding: 0 2rem 1rem;
    --cardFooterPadding: 0.5rem 1.25rem 2rem;
    --cardFooterBorderColor: transparent;
    margin-bottom: 5rem;
}


.product--size_md {
    margin-bottom: 0;
}

.product .card__header h3 {
    margin: 0;
}

.product__description {
    font-size: 1.2rem;
    font-weight: lighter;
}

    .product__description p {
        line-height: 1.5;
    }

.product__image {
    display: flex;
    flex-direction: column;
    align-items: start;
}

    .product__image img {
        max-height: 150px;
    }

.product__details {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin: 4rem 0 2rem;
}

@media only screen and (min-width: 1800px) {
    .product__details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 1rem 2rem;
    }
}

.product--size_md .product__details {
    display: flex;
    flex-direction: column;
}

.product__details div {
    border-bottom: 1px solid var(--baseColor);
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0.25rem 0;
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 1140px) {
    .product__details div {
        flex-direction: row;
        margin-bottom: 0;
    }
}

.product__details dt {
    padding-right: 1rem;
    font-weight: 500;
    color: var(--fontColor);
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 1140px) {
    .product__details dt {
        margin-bottom: 0;
    }
}

.product__details dd {
    font-family: "OldStandardTT", TimesNewRoman, "Times New Roman";
    flex: 1;
    display: flex;
    align-items: center;
    line-height: 1.25;
}

@media only screen and (min-width: 1140px) {
    .product__details dd {
        justify-content: end;
    }
}

.product__downloads {
    margin-bottom: 2rem;
}

    .product__downloads ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0.5rem 2rem;
    }

@media only screen and (min-width: 1140px) {
    .product__downloads ul {
        grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
    }
}

.product__downloads li {
    display: inline-flex;
}

.product__downloads a {
    text-decoration: none;
    font-weight: lighter;
    color: #707070;
    display: inline-flex;
    align-items: end;
    flex: 1;
}

.product__downloads span {
}

.product__link {
    text-align: right;
}

    .product__link form {
        display: inline-flex;
    }

.products-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media only screen and (max-width: 1600px) {
    .products-featured {
        grid-template-columns: repeat(1, 1fr);
    }
}

.product--size_sm {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0.75rem;
}

    .product--size_sm h3 {
        font-family: "Roboto", Sans-Serif;
        font-size: 1.5rem;
        font-weight: 500;
        margin: 0 0 1rem;
    }

.product-featured__image {
    display: flex;
    flex: 0 0 175px;
    justify-content: start;
    align-items: start;
}

    .product-featured__image img {
        max-width: 125px;
    }

.product-featured__info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product--size_sm .product__details {
    margin: 0;
}

@media only screen and (min-width: 1800px) {
    .product--size_sm .product__details {
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 0;
    }
}

.product--size_sm .product__details div {
    font-size: 1.15rem;
    border: 0;
    padding: 0.05rem 0;
}

.product--size_sm .product__details dt {
    font-weight: lighter;
    justify-content: start;
    width: 50%;
}

    .product--size_sm .product__details dt::after {
        content: ":";
    }

.product--size_sm .product__details dd {
    font-family: "Roboto", Sans-Serif;
    font-weight: lighter;
    justify-content: start;
    width: 50%;
}

.product--size_sm .product__link a,
.product--size_sm .product__link button {
    --buttonPadding: 0.25rem 1rem;
    --buttonFontSize: 0.85rem;
}

.download-icon {
    font-size: 2.5rem;
    color: var(--tsoSage);
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: var(--tsoSage);
    width: 40px;
    height: 30px;
    margin-right: 1rem;
    padding: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.download-icon--small {
    font-size: 1.5rem;
    width: 30px;
    height: 20px;
}

.download-icon::before {
    background-color: var(--backgroundColor);
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: -1px;
    width: calc(100% + 2px);
    height: 14px;
}

.download-icon--small::before {
    height: 10px;
}

.download-icon i {
    z-index: 1;
}

.form-col__date i[class*="calendar"] {
    color: var(--tsoRacing);
}

.scrolltop-button {
    font-size: 4rem;
    background-color: transparent;
    border: 0;
    padding: 0 2rem;
    line-height: 1;
    position: absolute;
    bottom: 2rem;
    right: 0;
    z-index: 100;
    display: none;
}


[data-tooltip]::after {
	background: rgb(234,227,217) linear-gradient(180deg, rgb(186, 178, 159) 0%, rgba(186,178,159,0.92) 10.27%, rgba(186,178,159,0.69) 28.36%, rgba(186,178,159,0.6) 50%, rgba(186,178,159,0.65) 79.31%, rgb(186, 178, 159) 100%);
}

* Zu speziell um in base.css aufzunehmen */
.inline-row {
	display: flex;
}

.inline-row--column {
	flex-direction: column;
}

.form-col--column {
	flex-direction: column;
}