:root {

    /* lemonyellow */
    --lemonyellow-50: #fffdeb;
    --lemonyellow-100: #fffbca;
    --lemonyellow-200: #fff79e;
    --lemonyellow-300: #fff474;
    --lemonyellow-400: #fff04d;
    --lemonyellow-500: #ffea00;
    --lemonyellow-600: #e6d200;
    --lemonyellow-700: #ccbb00;
    --lemonyellow-800: #b3a400;
    --lemonyellow-900: #998c00;
    /* yelloworange */
    --yelloworange-50: #fef9ec;
    --yelloworange-100: #fcf1cf;
    --yelloworange-200: #fae4a3;
    --yelloworange-300: #f8d97c;
    --yelloworange-400: #f6ce55;
    --yelloworange-500: #f4c025;
    --yelloworange-600: #daa60b;
    --yelloworange-700: #c2940a;
    --yelloworange-800: #a57e09;
    --yelloworange-900: #886806;
    /* carrotorange */
    --carrotorange-50: #fff5eb;
    --carrotorange-100: #ffe6cc;
    --carrotorange-200: #ffcf9e;
    --carrotorange-300: #ffba75;
    --carrotorange-400: #ffa64d;
    --carrotorange-500: #ff8c1a;
    --carrotorange-600: #e57300;
    --carrotorange-700: #c76300;
    --carrotorange-800: #a85400;
    --carrotorange-900: #8f4700;
    /* khaki */
    --khaki-50: #f8f6f2;
    --khaki-100: #ede9de;
    --khaki-200: #dcd6c1;
    --khaki-300: #cdc4a7;
    --khaki-400: #bfb38d;
    --khaki-500: #ac9d6c;
    --khaki-600: #938453;
    --khaki-700: #837549;
    --khaki-800: #6f643e;
    --khaki-900: #5b5233;
    /* red */
    --red-50: #fdedec;
    --red-100: #fbd3d0;
    --red-200: #f8aba5;
    --red-300: #f58780;
    --red-400: #f2645a;
    --red-500: #ee382b;
    --red-600: #d41e11;
    --red-700: #bd1b0f;
    --red-800: #a0170d;
    --red-900: #80120a;
    /* limegreen */
    --limegreen-50: #f0f9f1;
    --limegreen-100: #daf1dc;
    --limegreen-200: #b8e5bd;
    --limegreen-300: #9adaa1;
    --limegreen-400: #7dcf85;
    --limegreen-500: #57c162;
    --limegreen-600: #3ea849;
    --limegreen-700: #379540;
    --limegreen-800: #2d7b35;
    --limegreen-900: #225d28;
    /* pinegreen */
    --pinegreen-50: #f3f7f6;
    --pinegreen-100: #e0ebe9;
    --pinegreen-200: #c3dad6;
    --pinegreen-300: #aacac4;
    --pinegreen-400: #91bab3;
    --pinegreen-500: #72A79D;
    --pinegreen-600: #588d83;
    --pinegreen-700: #4f7d75;
    --pinegreen-800: #41685f;
    --pinegreen-900: #314e4a;
    /* iceblue */
    --iceblue-50: #eefafc;
    --iceblue-100: #d4f3f7;
    --iceblue-200: #aee8ef;
    --iceblue-300: #8bdee9;
    --iceblue-400: #69d4e2;
    --iceblue-500: #3ec8da;
    --iceblue-600: #25afc1;
    --iceblue-700: #219bab;
    --iceblue-800: #1b808d;
    --iceblue-900: #14616c;
    /* purple */
    --purple-50: #fbeffb;
    --purple-100: #f4d7f4;
    --purple-200: #e9b4e9;
    --purple-300: #e094e0;
    --purple-400: #d775d7;
    --purple-500: #cb4dcb;
    --purple-600: #b234b2;
    --purple-700: #9e2e9e;
    --purple-800: #862786;
    --purple-900: #6b1e6b;
    /* metalgray */
    --metalgray-50: #f9fafb;
    --metalgray-100: #f1f2f4;
    --metalgray-200: #e3e5e8;
    --metalgray-300: #d3d6da;
    --metalgray-400: #b1b9c3;
    --metalgray-500: #9098a2;
    --metalgray-600: #6f7a85;
    --metalgray-700: #5d656f;
    --metalgray-800: #454b54;
    --metalgray-900: #2f3337;
    /* neutrals */
    --neutrals-50: #ffffff;
    --neutrals-100: #f5f5f5;
    --neutrals-200: #ededed;
    --neutrals-300: #d4d4d4;
    --neutrals-400: #a6a6a6;
    --neutrals-500: #8c8c8c;
    --neutrals-600: #666666;
    --neutrals-700: #4d4d4d;
    --neutrals-800: #262626;
    --neutrals-900: #000000;

    /* Semantic colors */

    /* Areas */
    --areas-waermepumpe: #ee382b;
    --areas-warmwasser: #ee382b;
    --areas-heizen: #ff8c1a;
    --areas-photovoltaik: #f4c025;
    --areas-heizstab: #f4c025;
    --areas-netzeinspeisung: #8c8c8c;
    --areas-netzbezug: #8c8c8c;
    --areas-fehlende: #8c8c8c;
    --areas-abtauung: #588d83;
    --areas-eauto: #3ea849;
    --areas-eladestation: #3ea849;
    --areas-batterieladung: #bfb38d;
    --areas-batterieentladung: #bfb38d;
    --areas-heizkessel: #b234b2;
    --areas-kuehlen: #3ec8da;
    --areas-quellen-allgemein: #454B54;

    /* Notification */
    --notification-danger: #d41e11;
    --notification-warning: #ff8c1a;
    --notification-success: #57C162;
    --notification-info: #3ec8da;

    /* Operating */

    --operating-mode-on: #3ea849;
    --operating-mode-off: #d41e11;
    --operating-mode-disabled: #b1b9c3;

    /* Overlay */

    --overlay-dark: #454b54;
    --overlay-light: #9098a2;

    /* Energylabels */

    --energylabels-D: #d41e11;
    --energylabels-C: #ff8c1a;
    --energylabels-B: #f4c025;
    --energylabels-A: #7dcf85;
    --energylabels-A-p: #3ea849;
    --energylabels-A-pp: #2d7b35;




    /* Boxshadows */

    /* Subtle */
    --boxshadow-subtle-bottom: 0px 4px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-top: 0px -4px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-left: -4px 0px 8px rgba(0, 0, 0, 0.05);
    --boxshadow-subtle-right: 4px 0px 8px rgba(0, 0, 0, 0.05);

    /* Base */
    --boxshadow-base-bottom: 0px 6px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-top: 0px -6px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-left: -6px 0px 10px rgba(0, 0, 0, 0.07);
    --boxshadow-base-right: 6px 0px 10px rgba(0, 0, 0, 0.07);

    /* Intense */
    --boxshadow-intense-bottom: 0px 8px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-top: 0px -8px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-left: -8px 0px 12px rgba(0, 0, 0, 0.1);
    --boxshadow-intense-right: 8px 0px 12px rgba(0, 0, 0, 0.1);


}

/* Colors */

/* Lemonyellow */
.lemonyellow-100 {color: var(--lemonyellow-100);}
.lemonyellow-200 {color: var(--lemonyellow-200);}
.lemonyellow-300 {color: var(--lemonyellow-300);}
.lemonyellow-400 {color: var(--lemonyellow-400);}
.lemonyellow-500 {color: var(--lemonyellow-500);}
.lemonyellow-600 {color: var(--lemonyellow-600);}
.lemonyellow-700 {color: var(--lemonyellow-700);}
.lemonyellow-800 {color: var(--lemonyellow-800);}
.lemonyellow-900 {color: var(--lemonyellow-900);}
/* Yelloworange */
.yelloworange-100 {color: var(--yelloworange-100);}
.yelloworange-200 {color: var(--yelloworange-200);}
.yelloworange-300 {color: var(--yelloworange-300);}
.yelloworange-400 {color: var(--yelloworange-400);}
.yelloworange-500 {color: var(--yelloworange-500);}
.yelloworange-600 {color: var(--yelloworange-600);}
.yelloworange-700 {color: var(--yelloworange-700);}
.yelloworange-800 {color: var(--yelloworange-800);}
.yelloworange-900 {color: var(--yelloworange-900);}
/* Carrotorange */
.carrotorange-100 {color: var(--carrotorange-100);}
.carrotorange-200 {color: var(--carrotorange-200);}
.carrotorange-300 {color: var(--carrotorange-300);}
.carrotorange-400 {color: var(--carrotorange-400);}
.carrotorange-500 {color: var(--carrotorange-500);}
.carrotorange-600 {color: var(--carrotorange-600);}
.carrotorange-700 {color: var(--carrotorange-700);}
.carrotorange-800 {color: var(--carrotorange-800);}
.carrotorange-900 {color: var(--carrotorange-900);}
/* Khaki */
.khaki-100 {color: var(--khaki-100);}
.khaki-200 {color: var(--khaki-200);}
.khaki-300 {color: var(--khaki-300);}
.khaki-400 {color: var(--khaki-400);}
.khaki-500 {color: var(--khaki-500);}
.khaki-600 {color: var(--khaki-600);}
.khaki-700 {color: var(--khaki-700);}
.khaki-800 {color: var(--khaki-800);}
.khaki-900 {color: var(--khaki-900);}
/* Red */
.red-100 {color: var(--red-100);}
.red-200 {color: var(--red-200);}
.red-300 {color: var(--red-300);}
.red-400 {color: var(--red-400);}
.red-500 {color: var(--red-500);}
.red-600 {color: var(--red-600);}
.red-700 {color: var(--red-700);}
.red-800 {color: var(--red-800);}
.red-900 {color: var(--red-900);}
/* Limegreen */
.limegreen-100 {color: var(--limegreen-100);}
.limegreen-200 {color: var(--limegreen-200);}
.limegreen-300 {color: var(--limegreen-300);}
.limegreen-400 {color: var(--limegreen-400);}
.limegreen-500 {color: var(--limegreen-500);}
.limegreen-600 {color: var(--limegreen-600);}
.limegreen-700 {color: var(--limegreen-700);}
.limegreen-800 {color: var(--limegreen-800);}
.limegreen-900 {color: var(--limegreen-900);}
/* Pinegreen */
.pinegreen-100 {color: var(--pinegreen-100);}
.pinegreen-300 {color: var(--pinegreen-300);}
.pinegreen-400 {color: var(--pinegreen-400);}
.pinegreen-500 {color: var(--pinegreen-500);}
.pinegreen-600 {color: var(--pinegreen-600);}
.pinegreen-700 {color: var(--pinegreen-700);}
.pinegreen-800 {color: var(--pinegreen-800);}
.pinegreen-900 {color: var(--pinegreen-900);}
/* Iceblue */
.iceblue-100 {color: var(--iceblue-100);}
.iceblue-200 {color: var(--iceblue-200);}
.iceblue-300 {color: var(--iceblue-300);}
.iceblue-400 {color: var(--iceblue-400);}
.iceblue-500 {color: var(--iceblue-500);}
.iceblue-600 {color: var(--iceblue-600);}
.iceblue-700 {color: var(--iceblue-700);}
.iceblue-800 {color: var(--iceblue-800);}
.iceblue-900 {color: var(--iceblue-900);}
/* Purple */
.purple-100 {color: var(--purple-100);}
.purple-200 {color: var(--purple-200);}
.purple-300 {color: var(--purple-300);}
.purple-400 {color: var(--purple-400);}
.purple-500 {color: var(--purple-500);}
.purple-600 {color: var(--purple-600);}
.purple-700 {color: var(--purple-700);}
.purple-800 {color: var(--purple-800);}
.purple-900 {color: var(--purple-900);}
/* Metalgray */
.metalgray-100 {color: var(--metalgray-100);}
.metalgray-200 {color: var(--metalgray-200);}
.metalgray-300 {color: var(--metalgray-300);}
.metalgray-400 {color: var(--metalgray-400);}
.metalgray-500 {color: var(--metalgray-500);}
.metalgray-600 {color: var(--metalgray-600);}
.metalgray-700 {color: var(--metalgray-700);}
.metalgray-800 {color: var(--metalgray-800);}
.metalgray-900 {color: var(--metalgray-900);}
/* Neutral */
.neutral-50 {color: var(--neutrals-50);}
.neutral-100 {color: var(--neutrals-100);}
.neutral-200 {color: var(--neutrals-200);}
.neutral-300 {color: var(--neutrals-300);}
.neutral-400 {color: var(--neutrals-400);}
.neutral-500 {color: var(--neutrals-500);}
.neutral-600 {color: var(--neutrals-600);}
.neutral-700 {color: var(--neutrals-700);}
.neutral-800 {color: var(--neutrals-800);}
.neutral-900 {color: var(--neutrals-900);}
/* Notification Colors */
.notification-danger { color: var(--notification-danger);}
.notification-warning { color: var(--notification-warning);}
.notification-success { color: var(--notification-success);}
.notification-info { color: var(--notification-info);}


/* Typgraphy */

/* Heading */

.header-6xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 115%;
}

.header-5xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 115%;
}

.header-4xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 32px;
    line-height: 120%;
}

.header-3xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 28px;
    line-height: 120%;
}

.header-2xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 120%;
}

.header-xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 130%;
}

.header-lg {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
}

.header-md {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 145%;
}

.nav-header {
    font: 700 16px/1 Aller;
}

/* Text */

.text-6xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 48px;
    line-height: 120%;
}

.text-5xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 120%;
}

.text-4xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 32px;
    line-height: 120%;
}

.text-3xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    line-height: 120%;
}

.text-2xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 120%;
}

.text-xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
}

.text-lg {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}

.text-md {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 145%;
}

.text-sm {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
}

.text-xs {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
}

/* Link */

.link {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    text-decoration-line: underline;
}

.link:hover {
    cursor: pointer;
}

.link-lg {
    font-size: 18px;
    line-height: 120%;
}

.link-md {
    font-size: 16px;
    line-height: 140%;
}

.link-sm {
    font-size: 14px;
    line-height: 140%;
}

.link-xs {
    font-size: 12px;
    line-height: 140%;
}

/* Button */

.button-text-xl {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 110%;
}

.button-text-lg {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 110%;
}

.button-text-md {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 110%;
}

.button-text-sm {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 110%;
    margin-bottom: -2px;
}

/* Specialbutton */

.specialbutton-lg {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 110%;
}

.specialbutton-md {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 110%;
    margin-bottom: -1px;
}

.specialbutton-sm {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 110%;
}

/* Tag */

.tag {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 100%;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Navigation */

.navigation-lg {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 120%;
}

.navigation-md-bold {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
}

.navigation-md {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
}

.navigation-sm {
    font-family: 'Aller', 'al';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 140%;
}

@media screen and (max-width: 768px)  {
    .header-6xl {
        font-family: 'Aller', 'al';
        font-style: normal;
        font-weight: 700;
        font-size: 32px;
        line-height: 120%;
    }
}