@font-face {
    font-family: 'AgencyBold';
    src: local('Agency-Bold'),
        url('../fonts/Agency-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'RobotoRegular';
    src: local('Roboto-Regular'),
        url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.agency-bold{
    font-family:AgencyBold;
}
.roboto-regular{
    font-family:RobotoRegular;
}

#bg-menu {
  background-image:
    radial-gradient(ellipse farthest-corner at center left, #fff3, #0003),
    url('../img/carbonFiberTile2.png');
  background-repeat: repeat, repeat;
  background-size: auto, 13%;
  background-position: 0 0, 0 0;
}
#scrolling-background {
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}
@media (width >= 40rem /* 640px */) {
    #scrolling-background {
        background-image: url('../img/wireframe_smooth.png');
    }
}
@media (width < 40rem /* 640px */) {
    #scrolling-background {
        background-image: url('../img/wireframe_smooth_tight.png');
    }
}
.bg-edge-cut-bottom-right{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9rem), calc(100% - 9rem) 100%, 0% 100%);
}
.bg-edge-cut-bottom-right-small{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.5rem), calc(100% - 4.5rem) 100%, 0% 100%);
}
.dues-button {
    clip-path: polygon(0 .8rem, .8rem 0, 100% 0, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, 0% 100%);
    color:#fff;
    font-family: AgencyBold;
    text-align:center;
    background:linear-gradient(to bottom right, #f69b6a 0%, #f36f21 50%, #f36f21 100%);
    background-position: center left;
    cursor: pointer;
}
.dues-button:hover {
    background: #f36f21;
}
.dues-button-shadow {
    filter: drop-shadow(.1rem .2rem .1rem #0005);
}

.dues-impressum-button {
    background:linear-gradient(to bottom right, #f69b6a 0%, #f36f21 50%, #f36f21 100%);
    clip-path: polygon(0 2rem, 2rem 0, 100% 0, 100% 100%);
}
.dues-impressum-button:hover {
    background: #f36f21;
}

.dues-text-box {
    clip-path: polygon(0 .8rem, .8rem 0, 100% 0, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, 0% 100%);
    background:linear-gradient(to bottom right, #ffe5d6 0%,  #ffc3a2 100%);
}


.bg-startpage {
  background-image:
    radial-gradient(ellipse farthest-corner at center left, rgba(0, 33, 51, 0.733), #05090bf2),
    url('../img/bgRasterTile.png');
  background-repeat: repeat, repeat;
  background-size: auto, 3rem;
  background-position: center, center;
}

:root{
    --mask-width: 50%;
    --handle-size: .5rem;
    --duesentrieb-color: #f36f21;
}
.compare {
    --mask-width: 50%;
    --handle-size: .5rem;

    position: relative;
    border: none;
}
.compare2 {
    --mask-width: 50%;
    --handle-size: .5rem;

    position: relative;
    border: none;
}

/* Trennlinie */
.compare__separator {
    position: absolute;
    top: 0;
    height: 100%;
    left: var(--mask-width);
    width: 2px;
    margin-left: -1px;
    background: var(--duesentrieb-color);
    color: var(--duesentrieb-color);
    z-index: 2;
    pointer-events: none;
}
.compare__icon {
    position: absolute;
    z-index: 1;
    color: #333;
    top: 50%;
    left: var(--mask-width);
    transform-origin: center;
    transform: translate(-50%, -50%) rotate(45deg);
    border: none;
    background-color: #fff;
}
.compare__icon path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
}
.compare__image-one {
    width: 100%;
    display: block;
    border-top-left-radius: .5rem;
}
.compare__mask {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 1;
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    overflow: hidden;
    width: var(--mask-width);
}
.compare__image-two {
    height: 100%;
    width: auto;
    border-bottom-left-radius: .5rem;
}
.compare__input {
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: absolute;
    top: 0;
    left: calc(var(--handle-size) / -2);
    width: calc(100% + var(--handle-size));
    height: 100%;
    opacity: 0;
    z-index: 2;
    cursor: col-resize;
    background-color: transparent;
}

/* Firefox */
.compare__input::-moz-range-track {
    height: 100%;
}
.compare__input::-moz-range-thumb {
    height: 100%;
    width: var(--handle-size);
    border: none;
}

/* Webkit */
.compare__input::-webkit-slider-runnable-track {
    height: 100%;
}
.compare__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 100%;
    width: var(--handle-size);
    border: none;
}