@import "mixins";
@import "variables-layout";
@import "_theme/variables-layout";

@import "_theme/fonts";
@import "../_vendor/vendor";

@import "root-variables";
@import "scss-variables";
@import "_theme/variables";

@import "scaffolding/helper-classes";
@import "scaffolding/typo";
@import "scaffolding/forms";
@import "scaffolding/buttons";
@import "scaffolding/spacing";
@import "scaffolding/hacks";


html {
  scroll-behavior: smooth;
  font-size: var(--bs-body-font-size);

  body {
    transition: padding-top 0.5s ease, opacity 0.25s ease;
    opacity: 0;

    *[id] {
      scroll-behavior: smooth;
      scroll-margin-top: 175px;
    }

    &.is--scrolling {
      *[id] {
        scroll-behavior: smooth;
        scroll-margin-top: 100px;
      }
    }

    &#tinymce {
      @include padding(7px 12px);
      opacity: 1;
    }

    @import "areas/header";
    @import "areas/main";
    @import "areas/aside";
    @import "areas/footer";

    @import "elements/elements";
    @import "elements/navigation";
    @import "elements/modal";
    @import "elements/form-elements";
    @import "elements/slider";
    @import "elements/news";
    @import "elements/events";
    @import "elements/contao-accordions";
    @import "elements/ce_downloads";
    @import "elements/ce_image";
    @import "elements/ce_gallery";
    @import "elements/megamenu";
    @import "elements/breadcrumb";
    @import "elements/mmenu";
    @import "elements/offcanvas";
    @import "elements/search";
    @import "elements/fixed-stoerer-base";
    @import "elements/tooltips";
    @import "elements/alerts";
    @import "_theme/includes";

    .mod_newsreader {
      p.back {
        margin-top: 1.5rem;
      }
    }

    .mod_eventlist {
      .row {
        .event {
          height: 100%;
          padding-bottom: 60px;
          position: relative;

          time {
            font-weight: 700;
          }

          .event--image-wrapper {
            @include aspect-ratio(1,1);
          }

          .event--content-wrapper {

            .event--button {
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
              text-align: center;
            }
          }
        }
      }
    }

    .ce_rsce_equalboxfield {
      &.colored_tiles {

        .ce--equalboxfield {
          > .row {
            > div {
              @include aspect-ratio(1,1);

              .box--element.box--element {
                > .row,
                > .row > .col {
                  height: 100%;
                }
                .box--details {
                  height: 100%;
                  justify-content: center !important;
                  padding: 4.5rem 1.5rem 1.5rem;
                  position: relative;

                  .box--headline {
                    position: absolute;
                    top: 1.5rem;
                    left: 1.5rem;
                    right: 1.5rem;
                  }
                  .box--text {
                    margin-top: 0;
                    max-height: 100%;
                    display: flex;
                    justify-content: center;

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

      }
    }

    .shop--spartipp {
      border: 1px solid var(--bs-primary);
      padding: 10px 15px;
      position: relative;

      h5:is(h5) {
        margin-bottom: .75rem;
        text-transform: none;
        font-weight: 700;
        line-height: 42px;
        padding-left: 48px;
        padding-right: 48px;
        @include font-size(22px);
        text-align: center;

      }

      p {
        line-height: 1.3;
      }

      .ico {
        position: absolute;
        left: 15px;
        top: 10px;
        font-size: 42px;
      }
    }

    .pagination-wrapper {
      padding-top: 2.5rem;

      .pagination {
        justify-content: flex-end;

        --bs-pagination-color: var(--bs-primary);
        --bs-pagination-hover-color: var(--bs-light);
        --bs-pagination-active-color: var(--bs-light);
        --bs-pagination-bg: transparent;
        --bs-pagination-hover-bg: var(--bs-primary);
        --bs-pagination-active-bg: var(--bs-primary);
        --bs-pagination-border-color: var(--bs-primary);
        --bs-pagination-hover-border-color: var(--bs-primary);
        --bs-pagination-active-border-color: var(--bs-primary);
        --bs-pagination-border-radius: 1.5rem;
        --bs-pagination-border-width: 2px;

        :not(:first-child) {
          .page-link {
            margin-left: 0;
            border-left-width: 0;
          }
        }
        :not(:last-child) {
          .page-link {
            border-right-width: 1px;
          }
        }
      }
    }

    /** Backgrounds Weinlinien **/
    .bg- {
      &affenflasche {
        background-color: #1d5e41;
      }
      &bluetenedition {
        background-color: #FFA6C3;
      }
      &buddelflasche {
        background-color: #FF9D3D;
      }
      &das_besondere_fass {
        background-color: #B7C6CE;
      }
      &selektion_klaer {
        background-color: #333366;
      }
      &sekt_secco {
        background-color: #981A67;
      }
      &winzeredition {
        background-color: #A3243F;
      }
      &monkeymountain {
        background-color: #43A39C;
      }
      &extra_gelb {
        background-color: #FFC107;
      }

      &affenflasche,
      &bluetenedition,
      &das_besondere_fass,
      &extra_gelb {
        --bs-headline-color: var(--bs-anthracite);
        * {
          color: var(--bs-anthracite);
          border-color: var(--bs-anthracite);
        }
        .btn {
          --bs-btn-color: var(--bs-anthracite);
          --bs-btn-hover-bg: var(--bs-anthracite);
          --bs-btn-active-bg: var(--bs-anthracite);
          --bs-btn-border-color: var(--bs-anthracite);
          --bs-btn-hover-border-color: var(--bs-anthracite);
          --bs-btn-active-border-color: var(--bs-anthracite);
          --bs-btn-hover: var(--bs-anthracite);

          &:hover,
          &:active {
            > i
            {
              color: inherit;
            }
          }
        }

        .pagination {
          --bs-pagination-color: var(--bs-anthracite);
          --bs-pagination-hover-color: var(--bs-light);
          --bs-pagination-active-color: var(--bs-light);
          --bs-pagination-bg: transparent;
          --bs-pagination-hover-bg: var(--bs-anthracite);
          --bs-pagination-active-bg: var(--bs-anthracite);
          --bs-pagination-border-color: var(--bs-anthracite);
          --bs-pagination-hover-border-color: var(--bs-anthracite);
          --bs-pagination-active-border-color: var(--bs-anthracite);
        }
      }

      &selektion_klaer,
      &winzeredition,
      &monkeymountain,
      &buddelflasche,
      &sekt_secco {
        --bs-headline-color: var(--bs-light);
        :not(dropdown) * {
          color: var(--bs-light);
          border-color: var(--bs-light);
        }
        .btn {
          --bs-btn-color: var(--bs-light);
        }

        .pagination {
          --bs-pagination-color: var(--bs-light);
          --bs-pagination-hover-color: var(--bs-primary);
          --bs-pagination-active-color: var(--bs-primary);
          --bs-pagination-bg: transparent;
          --bs-pagination-hover-bg: var(--bs-light);
          --bs-pagination-active-bg: var(--bs-light);
          --bs-pagination-border-color: var(--bs-light);
          --bs-pagination-hover-border-color: var(--bs-light);
          --bs-pagination-active-border-color: var(--bs-light);
        }
      }
    }

  }
}

@import "_theme/styles";