@import "definitions";
@import "reset";
@import "grid";
@import "/assets/fonts/icomoon/style.css";

// General styles
* {
    box-sizing: border-box;
}

html {
    overflow-y: scroll;

    // Sticky footer
    height: 100%;
    //font-size:1rem;
    font-size: @font-size-body-mobile;
    .responsive-md({
        //font-size:1.2rem;
        font-size: @font-size-body;
    });
}

body {
    // Needed for Sticky footer
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: @font-family-text;
    font-weight: @body-weight;
    color: @color-font;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: @color-primary;
    .smooth();
    &:hover {
        color:@color-primary-hover;
        text-decoration: none;
    }
}

h1 {
    color: @color-h1;
    font-size: @font-size-h1;
    font-family: @font-family-headlines;
    font-weight: @h1-weight;
    //font-size: 1.8em;
    //.responsive-md({
    //    font-size: 2.4em;
    //});
}
h2 {
    color: @color-h2;
    //font-size: 1.8em;
    font-size: @font-size-h2;
    font-family: @font-family-headlines;
    font-weight: @h2-weight;
    //.responsive-md({
    //    font-size: 2.4em;
    //});
}
h1, h2 {
    margin-bottom:0.7em;
}

h3 {
    color: @color-h3;
    font-family: @font-family-headlines;
    font-size: @font-size-h3;
    font-weight: @h3-weight;
    //font-size: 1.8em;
    //.responsive-md({
    //    font-size: 2.4em;
    //});
    //text-align:center;
    margin-bottom:0.7em;
}

.title--custom,
.title--grey,
.title--dark {
    > * {
        margin-bottom: 0;
        padding-top: 2rem;
        padding-bottom:0.7em;
    }
}

.title--custom {
    background-color: var(--custom-background, transparent);
    &.title--border {
        background-color: transparent;
        > * {
            background-color: var(--custom-background, transparent);
            padding-left: 2rem;
            padding-right: 2rem;
            margin: 0 auto;
            max-width: @container-max-width - 2rem;
            .responsive-md({
                padding-left: 100px;
                padding-right: 100px;
            });
        }
    }
}
.title--grey {
    background-color: @color-background-primary;
    &.title--border {
        background-color: transparent;
        > * {
            background-color: @color-background-primary;
        }
    }
}
.title--dark {
    background-color: @color-background-secondary;
    &.title--border {
        background-color: transparent;
        > * {
            background-color: @color-background-secondary;
        }
    }
}

.fr-view h1,
.fr-view h2,
.fr-view h3,
.fr-view h4,
.fr-view h5,
.fr-view h6 {
    font-weight: unset;
    font-size: unset;
    line-height: unset;
    text-align: unset;
    margin-bottom:0;
    color: unset;
}

.entry {
    padding-bottom:65px;
    .responsive-md({
        padding-bottom:90px;
    });

    &--grey {
        background-color: @color-background-primary;
        .button{
            background-color: @color-background-secondary;

            &:hover {
                background-color: darken(@color-background-secondary, 10%);
            }
        }
    }
    &--dark {
        background-color: @color-background-secondary;
        /*.button{
            background-color: @color-background-primary;

            &:hover {
                background-color: darken(@color-background-primary, 10%);
            }
        }*/
    }
    &--custom {
        background-color: var(--custom-background, transparent);
    }

    &__centeredtext {
        text-align: center;
        hyphens: auto;
    }

    &__leftorientedtext {
        text-align: left;
    }
}

header {
    flex: none;
}

main {
    flex:1 0 auto;
    display: flex;
    flex-direction: column;
    > section {
        position:relative;
    }

    .mainWrapper {
        display:flex;
        article {
            width:100%;
            min-width:0;
        }
        &.withaside {
            .responsive-md({
                padding-left:@gutter;
                width:100%;
                max-width:@container-max-width;
                margin:0 auto;
                article {
                    padding-left:@gutter*2;
                }
            });
        }
    }
}

footer {
    flex: none;
}

/* .form - styles */
.form {
    &--small {
        font-size:0.8rem;
    }
    &--maxwidth {
        .responsive-md({
            max-width:640px;
        });
    }
    /*label {
        margin-bottom:0;
        margin-top: 0.5rem;
        float:left;
        width:100px;
        + .input,
        + .si-select {
            width:~'calc(100% - 100px)';
        }
    }*/
}

.styledInput.si-select .si-options a.si-disabled {
    text-decoration: line-through;
    cursor: default;
    color:grey;
}

.fieldset {
    margin-bottom:@gutter;
    &:last-child {
        margin-bottom:0;
    }
}

.legend {
    font-size:1.125rem;
    font-weight: @font-weight-medium;
    margin-bottom:1rem;
}

/* inputs und textareas. checkboxen, radios und selects siehe .styledInput */
select,	/* Fallback-Styles für die Selects, für den Zeitraum bis styledInput geladen und initialisiert ist */
.input {
    border:1px solid @color-lines;
    padding:.86rem .9rem;
    margin-bottom:5px;
    float:left;
    width:100%;
    font-size:1rem;
    &.error {
        border-color:@color-error;
    }
    &::placeholder {
        color:@color-placeholder;
        opacity:1;
    }
    .responsive-md({
        padding:.5rem .9rem;
    });
    &--textarea {
        height:200px;
    }
    &--big {
        padding:.86rem .9rem;
    }
    &--plz {
        width: 85px;
        margin-right: 5px;
    }
    &--ort {
        width:~'calc(100% - 90px)';
    }
    &--search {
        float:none;
        width:100%;
        padding-right:4rem;
        margin-bottom:0;
        text-overflow: ellipsis;
    }
}

select {
    /* styling selects siehe .styledInput */
    /* Fallback-Styles für die Selects, für den Zeitraum bis styledInput geladen und initialisiert ist */
    color:@color-placeholder;
}

.checkbox,
.radio {
    /* styling checkboxen und radios siehe .styledInput */
}

.styledInput {
    /* Select */
    &.si-select {
        margin-bottom:5px;
        float:left;
        width:100%;
        font-size:1rem;
        cursor:pointer;
        border:1px solid @color-lines;
        select {
            cursor:pointer;
        }
        > span {
            display:block;
            text-overflow:ellipsis;
            padding:.86rem 0 .86rem .9rem;
            margin-right:1.1rem;
            .responsive-md({
                padding: .5rem 0 .5rem .9rem;
            });
            &:after {
                content: '';
                background-image:url(/assets/icons/dropdown.svg);
                background-size:contain;
                background-repeat:no-repeat;
                background-position:center;
                width:8px;
                height:10px;
                top: 50%;
                margin-top: -5px;
                position:absolute;
                right:0.5rem;
                pointer-events:none;
            }
        }
        &[data-val=""] {
            > span {
                color:@color-placeholder;
            }
        }
        .si-options {
            margin-top:1px;
            > div {
                box-shadow:3px 3px 3px rgba(0,0,0,0.05), -3px 3px 3px rgba(0,0,0,0.05);
                background:#fff;
            }
            a {
                padding:.86rem .9rem;
                color:#000;
                &.si-selected {
                    font-weight: @font-weight-medium;
                }
                &.si-hover {
                    background:@color-background-primary;
                }
                &[data-val=""] {
                    color:@color-tertiary;
                }
            }
        }
        &.topbar {
            border:none;
            font-size:0.9rem;
            margin-bottom:0;
            .si-options {
                margin-top:0;
            }
        }
        &.error {
            border-color:@color-error;
        }
    }

    /* Radio + Checkbox */
    &.si-checkbox,
    &.si-radio {
        float: left;
        margin-top:0.1em;
        height:1.5em;
        width:1.5em;
        vertical-align:middle;
        margin-right:0.5em;
        border:1px solid #b7b7b7;
        border-radius:50%;
        + label {
            float: left;
            width:~'calc(100% - 40px)';
            margin-top:0.1em;
        }
        &.checkbox--inline,
        &.radio--inline {
            float:none;
            + label {
                float:none;
                width:auto;
            }
        }
    }

    /* Radio + Checkbox unchecked */
    &.empty {
    }
    /* Radio + Checkbox checked */
    &.checked {
        &:before {
            content:'';
            width: 50%;
            height: 50%;
            position: absolute;
            background: black;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

button[type="submit"],
input[type="submit"] {
    cursor:pointer;
}

input[type="submit"] {
    width:auto;
    margin-bottom:0;
}

/* Buttons */
.button {
    display:inline-block;
	vertical-align:top;
    background:@color-primary;
    color:#fff;
    padding:.93rem 1.2rem;
    border-radius: 10px;
    .responsive-md({
        padding:0.6rem 0.8rem;
    });
    font-weight: @font-weight-medium;
    .smooth();
    &:not(:disabled) {
        cursor: pointer;
    }
    &:hover, &.active {
        background:@color-primary-hover;
        color:#fff;
    }
    &--nobackground {
        background:transparent;
        color:@color-primary;
        &:hover {
            background:transparent;
            color:@color-secondary;
            &.icon {
                &:before,
                &:after {
                    filter:brightness(.7);
                }
            }
        }
    }
    &--nopadding {
        padding-left: 0;
    }
    &--textcentered {
        text-align:center;
    }
    &--big {
        padding: 1.1rem 1.3rem;
    }
    &--big,
    &--md-big {
        .responsive-md({
            padding:.93rem 1.3rem;
        });
    }
    &--style2 {
        background:@color-secondary;
        font-weight: @font-weight-normal;
    }
    &#headerBasketCount {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}
	&#headerBasketValue {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	&.icon {
        &:before,
        &:after {
            content:'';
            width: 16px;
            height: 16px;
            display: inline-block;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            vertical-align: middle;
            transition:filter .2s ease;
        }
        &--mail {
            &:before,
            &:after {
                background-image:url(/assets/icons/icon_mail.svg);
                vertical-align:-0.2em;
            }
        }
        &--basket {
            
			&:before {
                background-image:url(/assets/icons/icon_basket.svg);
            }
        }
        &--rememberlist {
            &:before {
                background-image:url(/assets/icons/icon_rememberlist.svg);
            }
        }
        &--left {
            &:before {
                margin-right:5px;
            }
            &:after {
                display:none;
            }
        }
        &--right {
            &:after {
                margin-left:5px;
            }
            &:before {
                display:none;
            }
        }
        &--big {
            .responsive-md({
                &:before,
                &:after {
                    width: 35px;
                    height: 35px;
                }
            });
        }
    }
}

/* Custom Formulare */
@checkbox-width: 1.5em;
.formwrapper {
    // background: @color-bg-light;
    padding: 2.5rem 0 4rem;
}
.form {
    &__error {
        color: @color-primary;
        margin-top: .3em;
        display: block;
        font-size: .9em;
    }

    &__input {
        padding:.86rem .9rem;
        border: 1px solid @color-lines;
        margin-top: @gutter;
        width: 100%;
        display: block;
        .responsive-md({
            padding:.5rem .9rem;
        });
        &::placeholder {
            //text-transform: uppercase;
            //font-weight: @font-weight-medium;
        }

        &--error {
            border-bottom: 1px solid @color-primary !important;
            //color: @color-primary;

            &.styledInput.si-select {
                border-bottom: 1px solid @color-primary !important;
            }
        }
    }

    &__checkbox {
        -webkit-appearance: initial !important;
        -moz-appearance: initial !important;
        appearance: initial !important;

        &:checked,
        &:not(:checked) {
            position: absolute;
            left: -9999px;

            + label {
                position: relative;
                padding-left: @checkbox-width + 1em;
                cursor: pointer;
                display: inline-block;
                //padding-top: .4em;
                margin-bottom: .6em;

                //.responsive-md({
                //	padding-top: 0;
                //});

                // checkbox
                &:before {
                    content: '';
                    position: absolute;
                    left: 0;
                    width: @checkbox-width;
                    height: @checkbox-width;
                    background: @color-background-secondary;
                    top: 2px;
                }

                // checkmark
                &:after {
                    content: '\e90a';
                    font-family: 'icomoon' !important;
                    width: calc(@checkbox-width ~" - 2 * 2px");
                    height: calc(@checkbox-width ~" - 2 * 2px");
                    position: absolute;
                    top: 4px;
                    left: 2px;
                    transition: all .2s ease;
                    font-size: 1em;
                    line-height: 1;
                }
            }
        }

        &:not(:checked) + label:after {
            opacity: 0;
        }

        &:checked + label {

            &:after {
                opacity: 1;
            }
        }

        &--style2 {
            &:checked,
            &:not(:checked) {
                + label {
                    //color: @color-font;

                    // checkbox
                    &:before {
                        //border: 2px solid @color-font;
                        background: #fff;
                        top: 0;
                    }

                    // checkmark
                    &:after {
                        //color: @color-font;
                        top: 2px;
                    }
                }
            }
        }

        &--radio {
            &:checked,
            &:not(:checked) {
                + label {
                    // box
                    &:before {
                        border-radius: 100%;
                        border: 2px solid #BCBCBC;
                        background: #fff;
                        top: 0;
                    }

                    // dot
                    &:after {
                        width: calc(@checkbox-width ~" - 2 * 4px");
                        height: calc(@checkbox-width ~" - 2 * 4px");
                        top: 4px;
                        left: 4px;
                        border-radius: 100%;
                        content: '';
                        background: @color-font;
                        font-size: 1em;
                    }

                }
            }
        }
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;

    &-focusable:focus {
        //position: static;
        width: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        clip: auto;
        clip-path: none;
        z-index: 99999;
    }
}

.fileupload {
    &__input {
        display: none;
    }

    &__button {
        margin-bottom: 0;
        position: relative;
        padding-left: 3em;

        &:before {
            content: '\e918';
            font-family: icomoon;
            position: absolute;
            left: 1em;
            font-size: 1.2em;
            top: 50%;
            transform: translateY(-50%);
        }
    }
}

/* Textlink-Pfeil */
.arrow {
    &:before {
        content: '';
        width: 15px;
        height: 12px;
        display: inline-block;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        vertical-align: -0.05em;
        margin-right:0.4em;
        transition:filter .2s ease;
    }
    &--right {
        &:before {
            content:'→';
        }
    }
    &--left {
        &:before {
            content: "<";//background-image:url(/assets/icons/slider_left.svg);
            color: #919191;
            -webkit-transform: scaleX(.6);
            transform: scaleX(.6);
            -webkit-transform-origin: left;
            transform-origin: left;
            display: inline-block;
            font-size: 1.3em;
            padding-left: .6em;
            padding-right: .1em;
            vertical-align: -.05em;
        }
    }
    &:hover:before {
        filter: brightness(.7);
    }
}

/* Globale Swiper Button Styles */
.swiper-button-prev,
.swiper-button-next {
    &.swiper-button-custom {
        width:25px;
        height:25px;
        background-size:contain;
        //top:40%;
        background-repeat: no-repeat;
        &::after {
            content: '';
        }
        &:hover {
            filter:grayscale(0%);
        }
        &--prev {
            background-image:url(/assets/icons/slider_left.svg);
            filter:grayscale(100%);
            background-position:left center;
            left:@gutter;
            &.swiper-button-custom--inside {
                .responsive-md({
                    background-image:url(/assets/icons/slider_left_white.svg);
                });
            }
        }
        &--next {
            background-image:url(/assets/icons/slider_right.svg);
            filter:grayscale(100%);
            background-position:right center;
            right:@gutter;
            &.swiper-button-custom--inside {
                .responsive-md({
                    background-image:url(/assets/icons/slider_right_white.svg);
                });
            }
        }
        &--inside {
            margin-top:0;
            top:auto;
            bottom:2rem;
            .responsive-md({
                top:50%;
                transform:translateY(-50%);
                background-color:rgba(0,0,0,0.5);
                padding:25px;
                background-size:25%;
                background-position:center;
            });
        }
    }
}

.Warenkorb__lagerinfo {
    color:@color-primary;
    border:1px solid @color-primary;
    padding: 0.3em 0.5em;
    margin-top: 0.2em;
    display: inline-block;
    border-radius:4px;
}

/* Boxen: Checkout, Login, Kundenbereich (In Kombination mit grid verwenden) */
.box {
    background:#fff;
    padding: @gutter*2 @gutter 0 @gutter;
    margin-bottom: @gutter;
    margin-left: -@gutter;
    margin-right: -@gutter;
    &:last-child {
        margin-bottom:0;
    }
    .responsive-sm({
        padding:@gutter*2 @gutter*2 0 @gutter*2;
        margin-left:0;
        margin-right:0;
    });
    &__title {
        font-size: 1.875rem;
        font-weight: @font-weight-bold;
        padding-bottom:@gutter*2;
        &--counter {
            &:before {
                counter-increment: checkoutSteps;
                content:counter(checkoutSteps);
                background: @color-primary;
                border-radius: 50%;
                display: inline-block;
                height: 1.5em;
                width: 1.5em;
                color: white;
                text-align: center;
                font-weight: @font-weight-normal;
                margin-right: .8em;
            }
        }
    }
    &__content {
        padding-bottom:@gutter*2;
    }
}

.title {
    &__black {
        color: black;
    }
}

/* Start - Freshpage elements (these classes are defined in Freshpage and setable) */
.tbltype {
    &-Standard {
        width:auto !important;
        height:auto !important;
        tr {
            td {
                padding-right:0.5em;
                &:last-child {
                    padding-right:0;
                }
            }
        }
    }
    &-striped {
        width:auto !important;
        height:auto !important;
        tr {
            &:nth-child(2n-1) {
                background-color:@color-background-primary;
            }
            td {
                padding:0.5em;
                vertical-align:top;
            }
        }
    }
    &-border {
        width:auto !important;
        height:auto !important;
        tr {
            td {
                padding:0.5em;
                vertical-align:top;
                border:1px solid @color-lines;
            }
        }
    }
}

b,
strong {
    font-weight: @font-weight-bold;
}

.small, .fr-view .small {
    font-size: 0.75rem;
}

.normal, .fr-view .normal {
    font-size: 1rem;
}

.big, .fr-view .big {
    font-size: 1.3rem;
}

body.fr-view b, body.fr-view strong{
    font-weight: @font-weight-bold !important;
    /* font-family: 'DaxComp' !important;  */
}
body.fr-view i, body.fr-view em{
    font-style:italic !important;
    /* font-family: 'DaxComp' !important; */
}
body li, body ul {
    list-style-position: inside;
}

img {
    max-width: 100%;
    height:auto;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}
/* End - Freshpage elements  */