/**======================================================================
 * VARIABLES
 *=====================================================================*/
/**----------------------------------------------------------------------
 * DEBUGGING
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * COLORS
 *---------------------------------------------------------------------*/
:root {
  --c-grayscale-heading: Grauskala;
  --c-grayscale-black: #000000;
  --c-grayscale-white: #ffffff;
  --c-grayscale-gray-07: #070707;
  --c-grayscale-gray-37: #373737;
  --c-grayscale-gray-55: #555555;
  --c-grayscale-gray-78: #787878;
  --c-grayscale-gray-99: #999999;
  --c-grayscale-gray-bb: #bbbbbb;
  --c-grayscale-gray-dd: #dddddd;
  --c-grayscale-gray-eb: #ebebeb;
  --c-grayscale-gray-f0: #f0f0f0;
  --c-grayscale-gray-f5: #f5f5f5;
  --c-grayscale-gray-fa: #fafafa;
  --c-main-heading: Farbskala 1;
  --c-main-c1-main: #ca1c20;
  --c-main-c2-main: #921517;
  --c-main-c3-main: #ffd6d7;
  --c-second-heading: Farbskala 2;
  --c-second-c1-second: #bf1d72;
  --c-second-c2-second: #861952;
  --c-second-c3-second: #ffdaed;
  --c-third-heading: Farbskala 3;
  --c-third-c1-third: #743794;
  --c-third-c2-third: #571d76;
  --c-third-c3-third: #f3ddff;
  --c-fourth-heading: Farbskala 4;
  --c-fourth-c1-fourth: #ca1c20;
  --c-fourth-c2-fourth: #921517;
  --c-fourth-c3-fourth: #ffd6d7;
  --c-fifth-heading: Farbskala 5;
  --c-fifth-c1-fifth: #ca1c20;
  --c-fifth-c2-fifth: #921517;
  --c-fifth-c3-fifth: #ffd6d7;
  --c-highlight-c1: var(--c-main-c1-main, $c1-main);
  --c-highlight-c2: var(--c-main-c2-main, $c2-main);
  --c-highlight-c3: var(--c-main-c3-main, $c3-main);
  --c-highlight-g1: linear-gradient(-90deg, var(--c-second-c1-second) 0%, var(--c-main-c1-main) 100%);
  --c-special-heading: Sonderfarben;
  --c-special-c1-error: #ca1c20;
  --c-special-c2-error: #921517;
  --c-special-c3-error: #ffd6d7;
  --c-special-c1-success: #54ba7e;
  --c-special-c2-success: #3e865c;
  --c-special-c3-success: #e5f3eb;
}

/**----------------------------------------------------------------------
 * FONTS
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * BORDER
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * TRANSITIONS
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * SHADOWS
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * SPACERS
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * GRID
 *---------------------------------------------------------------------*/
/**----------------------------------------------------------------------
 * SITE_GLOBALS
 *---------------------------------------------------------------------*/
/**
 * Square calculations
 */
/**
 * Other dimensions calculations
 */
/******************************************************************

    SETTINGS: FONTS

    USAGE:
    @include fontstyle(
        $style: false,
        $scale: 1,
        $fz: false,
        $lh: false,
        $important: false
    );

    USAGE SHORT:
    @include fontstyle("fs-sm", $important: 1);

    INFO FOR CALC:
    Use LG Breakpoint as Max Width

******************************************************************/
/*
  Returns a CSS clamp function which resolves to $size-at-min-width when page width is
  below $min-width, $size-at-max-width when page width is above $max-width,
  and linearly scales between the two between $min-width and $max-width
*/
body:after {
  content: "xs";
  display: inline-block;
  background: #bf1d72;
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 100;
  width: 50px;
  padding: 0.5rem 0.7rem;
  text-align: center;
  color: #fafafa;
}

@media (min-width: 481px) {
  body:after {
    content: "sm";
  }
}

@media (min-width: 901px) {
  body:after {
    content: "md";
  }
}

@media (min-width: 1366px) {
  body:after {
    content: "lg";
  }
}

@media (min-width: 1920px) {
  body:after {
    content: "xl";
  }
}

body .grid-overlay {
  display: none;
}

/*# sourceMappingURL=../../maps/debug.css.map */