@charset "UTF-8";

/* custom tokens: changes and additions to the tokens.css */
:root {
    --color-scheme: light only;

    /* material-web */
    --md-sys-color-primary-seed: var(--md-source);
    --md-sys-color-secondary-seed: #7b9694;
    --md-sys-color-tertiary-seed: #f7e07f;
    --md-sys-color-neutral-seed: #8e9191;
    --md-sys-color-primary: var(--md-sys-color-primary-seed);
    --md-sys-color-secondary: var(--md-sys-color-secondary-seed);
    --md-sys-color-tertiary: var(--md-sys-color-tertiary-seed);

    /* Explicitly define these values here because they are hardcoded in the material-web library (with, obviously, wrong values) */
    --md-elevated-button-label-text-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-filled-button-label-text-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-tonal-button-label-text-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-outlined-button-label-text-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-text-button-label-text-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-outlined-field-content-type: var(--md-sys-typescale-label-large-font-weight) var(--md-sys-typescale-label-large-font-size)/var(--md-sys-typescale-label-large-height) var(--md-sys-typescale-label-large-font-family-name);
    --md-outlined-text-field-input-text-type: var(--md-sys-typescale-body-large-font-weight) var(--md-sys-typescale-body-large-font-size)/var(--md-sys-typescale-body-large-height) var(--md-sys-typescale-body-large-font-family-name);

    --bs-body-bg: var(--md-sys-color-surface);

    /* set custom line heights. The line heights are relative to the font size. Between 6 und 8 px more than the font size.
       Here we add ca. 10% to each value as it is defined in the token.css. */
    --md-sys-typescale-display-large-height: 70px;
    --md-sys-typescale-display-medium-height: 57px;
    --md-sys-typescale-display-small-height: 48px;
    --md-sys-typescale-headline-large-height: 44px;
    --md-sys-typescale-headline-medium-height: 40px;
    --md-sys-typescale-headline-small-height: 35px;
    --md-sys-typescale-body-large-height: 26px;
    --md-sys-typescale-body-medium-height: 22px;
    --md-sys-typescale-body-small-height: 18px;
    --md-sys-typescale-label-large-height: 22px;
    --md-sys-typescale-label-medium-height: 18px;
    --md-sys-typescale-label-small-height: 18px;
    --md-sys-typescale-title-large-height: 31px;
    --md-sys-typescale-title-medium-height: 26px;
    --md-sys-typescale-title-small-height: 22px;

}

.grecaptcha-badge {
    visibility: hidden;
}

.navigation-padding {
    padding-top: 4rem !important;
}

/* override for large screens */
@media (min-width: 992px) {
    .navigation-padding {
        padding-top: 8.7rem !important;
    }
}

/* css */
.navbar.spaced {
    /* override default padding between navigation elements */
    --bs-navbar-nav-link-padding-x: 1rem;
}

.navbar {
    /* override color of navigation entries */
    --bs-navbar-color: rgba(0, 0, 0, 1);
    --bs-navbar-hover-color: var(--md-sys-color-primary);
}

.recaptcha a {
    color: var(--md-sys-color-primary);
}

.recaptcha a:hover {
    opacity: 0.8;
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    border-radius: 8px;
    background-color: #e7e7e7;
    border: 1px solid #cacaca;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
}

html::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: var(--md-ref-palette-primary20);
}

@media(min-width: 992px) {
    .py-lg-6 {
        padding-top: 4rem !important;
        padding-bottom: 4rem !important;
    }

    .py-lg-7 {
        padding-top: 5.5rem !important;
        padding-bottom: 5.5rem !important;
    }

    .py-lg-8 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}

.navigation .navbar {
    background-color: var(--md-sys-color-surface) !important;
    padding-left: 5%;
    padding-right: 5%;
}

.hero-section {
    background-color: var(--md-ref-palette-tertiary98);
    padding-left: 5%;
    padding-right: 5%;
    background-image: url("../assets/assets/images/tailorfast_Stilelement_POS_RGB.svg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: right;
}

.background-45 {
    background-size: 45%;
}

.background-55 {
    background-size: 55%;
}

.hero-section .sub-title {
    --md-sys-typescale-label-large-font-size: 22px;
}

.hero-section .title {
    --md-sys-typescale-display-large-font-size: 54px;
}

.teaser-section {
    padding-left: 5%;
    padding-right: 5%;
}

.teaser-section .title-large {
    /* make title large style bold for the teaser section */
    --md-sys-typescale-title-large-font-weight: 600;
    max-width: 80%
}

.company-details-section {
    padding-left: 5%;
    padding-right: 5%;
    min-height: 100px;
}

.teaser-section .mdi {
    display: flex;
    align-items: center;
}

.mdi svg {
    color: var(--md-sys-color-primary);
}

.nav-link .mdi svg {
    color: var(--bs-nav-link-color);
}

:is(.nav-link:hover, .nav-link:focus) .mdi svg {
    color: var(--bs-nav-link-hover-color);
}

.navbar-expand-lg .navbar-nav .nav-link.dropdown-item {
    padding-right: var(--bs-dropdown-item-padding-x);
    padding-left: var(--bs-dropdown-item-padding-x);
}

.icon72 {
    width: 72px;
    height: 72px;
}

.icon48 {
    width: 48px;
    height: 48px;
}

.icon24 {
    width: 24px;
    height: 24px;
}

.mdi-door .icon72 {
    /* override icon size of the door icon because it has too much padding. Icons look not the same size otherwise. */
    width: 79px;
    height: 79px;
}

.tailorfast-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-sys-color-primary);
}

.sections-section,
.blog-section,
.back {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-sys-color-surface);
}

.values-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-sys-color-primary);
}

.values-section li:not(:last-child) {
    margin-bottom: 20px;
}

.services-section {
    padding-left: 5%;
    padding-right: 5%;
}

.blog-section {
    padding-left: 5%;
    padding-right: 5%;
}

:is(.services-section, .blog-section) .card {
    background-color: var(--md-ref-palette-tertiary95);
    --bs-card-border-color: none;
}

.blog-section h2 {
    margin-top: 4rem;
}

.blog-section p {
    margin-top: 2rem;
}

.customer-section {
    padding-left: 5%;
    padding-right: 5%;
}

.image-section img {
    max-height: auto;
    object-fit: cover;
}

.showcase-section {
    padding-left: 5%;
    padding-right: 5%;
}

.showcase-section .showcase-chips md-filled-button {
    --md-filled-button-container-color: var(--md-ref-palette-tertiary98);
    --md-filled-button-label-text-color: var(--md-sys-color-on-tertiary-container);
    --md-filled-button-hover-state-layer-color: var(--md-ref-palette-tertiary98);
    --md-filled-button-hover-label-text-color: var(--md-sys-color-on-tertiary-container);
    --md-filled-button-focus-state-layer-color: var(--md-ref-palette-tertiary98);
    --md-filled-button-focus-label-text-color: var(--md-sys-color-on-tertiary-container);
    --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-tertiary-container);
    --md-filled-button-pressed-state-layer-color: var(--md-ref-palette-tertiary98);
}

.showcase-section .showcase-chips md-filled-button.active {
    --md-filled-button-container-color: var(--md-sys-color-primary);
    --md-filled-button-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-button-hover-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-button-focus-label-text-color: var(--md-sys-color-on-primary);
    --md-filled-button-pressed-label-text-color: var(--md-sys-color-on-primary);
}

.showcase-section ul {
    list-style-type: none;
}

.showcase-section .demo {
    overscroll-behavior: contain;
    background-color: var(--md-ref-palette-tertiary98);
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
}

#closeShowcaseButton {
    position: absolute;
    bottom: 150px;
    left: 100px;
    z-index: 1100
}

.infoTooltip {
    width: 150px;
    background-color: var(--md-ref-palette-tertiary90);
    color: var(--md-sys-color-on-tertiary-container);
    border-radius: 6px;

    position: absolute;
    z-index: 1101;

    /* fade out after 5 seconds */
    /* must play together with the run demo javascript */
    animation: fadeOut 2s forwards;
    animation-delay: 5s;
}

.infoTooltip::after {
    content: " ";
    position: absolute;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent var(--md-ref-palette-tertiary90) transparent transparent;
}

#closeShowcaseButtonTooltip {
    bottom: 135px;
    left: 210px;
}

#closeShowcaseButtonTooltip::after {
    top: 50%;
}

#startShowcaseNotReadyTooltip::after {
    top: 25%;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;

        /* disable mouse and touch on the div (otherwise the area in the app, where the tooltip was, is not clickable */
        pointer-events: none;
        touch-action: none;
    }
}

/* override for large screens */
@media (min-width: 992px) {
    .showcase-section .demo {
        background-image: url("../assets/assets/images/tailorfast_Stilelement_POS_RGB.svg");
    }
}

#tryMeOverlay {
    position: absolute;
    display: block;
    width: 221px;
    height: 467.5px;
    border-radius: 25px;
    background-color: var(--md-ref-palette-tertiary10);
    opacity: 0.8;
    color: var(--md-sys-color-on-tertiary);
    z-index: 2;
    cursor: pointer;
}

#tryMeOverlay svg {
    transform: rotate(-30deg);
}

.demo-section {
    padding-left: 5%;
    padding-right: 5%;
    background-image: url("../assets/assets/images/tailorfast_Stilelement_POS_RGB.svg");
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: right;
}

.footer-section {
    padding-left: 5%;
    padding-right: 5%;
    --md-text-button-label-text-color: var(--md-sys-color-on-surface);
    --md-text-button-hover-label-text-color: var(--md-sys-color-on-surface);
    --md-text-button-focus-state-layer-color: var(--md-sys-color-on-surface);
    --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface);
    --md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface);
}

.footer-section .mdi svg {
    color: var(--md-sys-color-on-surface);
}

.logo {
    width: 200px;
}

.swiper.whatIsTailorfast,
.swiper.features,
.swiper.articles {
    /* Fixes the problem that the most right swiper container (card) has no rounded corners on the right side. */
    padding-right: 13px;
}


.swiper-button-next::after,
.swiper-button-prev::after {
    /* Removes the default swiper icon */
    content: "";
}

/* Resolves a conflict between the swiper and bootstrap that causes wrong wrapping */
.row.articles>* {
    max-width: unset;
}

.swiper-button-prev,
.swiper-button-next {
    position: inherit;
    --swiper-navigation-size: 72px;
    width: var(--swiper-navigation-size);
    height: auto;
}

:is(.swiper-button-next,
    .swiper-button-prev).swiper-button-disabled {
    opacity: 0;
}

.swiper-slide {
    height: auto;
}

#flutter_host {
    /* Need that scrolling the flutter app does not scroll the page */
    touch-action: none;
}

#flutter_host flt-glass-pane {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.clubs-logo.kmu {
    height: 15px;
    width: 318px;
}

/* override for large screens */
@media (min-width: 992px) {
    .clubs-logo.kmu {
        height: 30px;
        width: 636px;
    }
}

/* kontakt.html */
.contact-options-section {
    padding-left: 5%;
    padding-right: 5%;
    --md-sys-typescale-display-small-font-size: 24px;
    --md-text-button-container-height: 70px;
}

@media (min-width: 992px) {
    .contact-options-section {
        /* for large screens use default size */
        --md-sys-typescale-display-small-font-size: 36px;
    }
}

.contact-form-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-ref-palette-tertiary98);
}

.contact-form-section md-outlined-text-field {
    width: 100%;
}

/* portal-entwicklung.html */
.future-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-sys-color-primary);
}

.features-section {
    padding-left: 5%;
    padding-right: 5%;
}

.features-section .card {
    background-color: var(--md-ref-palette-tertiary95);
    --bs-card-border-color: none;
}

/* digitalisierungs-roadmap.html */
.digitalization-roadmap-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-ref-palette-tertiary98);
}

.digitalization-roadmap-section.left {
    background-color: var(--md-ref-palette-tertiary98);
}

.digitalization-roadmap-section.right {
    background-color: var(--md-sys-color-surface);
}

/* team.html */
.team-section {
    padding-left: 5%;
    padding-right: 5%;
}

.team-section.left {
    background-color: var(--md-ref-palette-tertiary95);
}

/* kostenloses-erstgespraech.html */
.initial-consultation-form-section {
    padding-left: 5%;
    padding-right: 5%;
    background-color: var(--md-ref-palette-tertiary98);
}

.initial-consultation-form-section md-outlined-text-field {
    width: 100%;
}

#flutter_dialog.modal {
    padding-left: 0px;
    padding-right: 0px;
    --bs-modal-padding: 0px;
}

#flutter_dialog .modal-body {
    /* Need that scrolling the flutter app does not scroll the page */
    touch-action: none;
}

.emphasize {
    background-color: var(--md-ref-palette-tertiary98);
}

.emphasize-off {
    background-color: var(--md-sys-color-surface);
}

/* override for large screens */
@media (min-width: 992px) {
    .emphasize-lg {
        background-color: var(--md-ref-palette-tertiary98);
    }

    .emphasize-lg-off {
        background-color: var(--md-sys-color-surface);
    }
}

.dropdown-toggle::after {
    display: none !important;
}

.customer-section img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    filter: grayscale(100%);
}

.customer-section img:hover {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    filter: grayscale(0%);
}