/*------------------*\
    Kundenspezifische CSS
\*------------------*/

/* -- colors -------------*/

:root {
    /* Hex-Wert in HSL-Wert umgewandelt eintragen*/
    /* Hauptfarbe*/
    --primary-h: 87;
    --primary-s: 16%;
    --primary-l: 42%;
    /* Zweitfarbe*/
    --secondary-h: 0;
    --secondary-s: 0%;
    --secondary-l: 41%;
    /* neutrale Drittfarbe*/
    --tertiary-h: 0;
    --tertiary-s: 0%;
    --tertiary-l: 75%;
    /* extra call-to-action-farbe*/
    --cta-h: 0;
    --cta-s: 50%;
    --cta-l: 46%;
    /*Basisfarben*/
    --light: #efefef;
    --dark: #444;
    --white: #fff;
    --black: #000;
    --error: #d00;

    /* ab hier nichts mehr eintragen*/
    --primary-hsl: var(--primary-h), var(--primary-s), var(--primary-l);
    --primary: hsl(var(--primary-hsl));
    --primary-5: hsla(var(--primary-hsl), 0.05);
    --primary-10: hsla(var(--primary-hsl), 0.1);
    --primary-20: hsla(var(--primary-hsl), 0.2);
    --primary-50: hsla(var(--primary-hsl), 0.5);
    --primary-90: hsla(var(--primary-hsl), 0.9);
    --primary-darken: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) - 15%));
    --primary-lighten: hsl(var(--primary-h), var(--primary-s), calc(var(--primary-l) + 20%));
    --primary-gradient: linear-gradient(135deg, var(--primary), var(--primary-50));

    --secondary-hsl: var(--secondary-h), var(--secondary-s), var(--secondary-l);
    --secondary: hsl(var(--secondary-hsl));
    --secondary-5: hsla(var(--secondary-hsl), 0.05);
    --secondary-10: hsla(var(--secondary-hsl), 0.1);
    --secondary-20: hsla(var(--secondary-hsl), 0.2);
    --secondary-50: hsla(var(--secondary-hsl), 0.5);
    --secondary-90: hsla(var(--secondary-hsl), 0.9);
    --secondary-darken: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) - 15%));
    --secondary-lighten: hsl(var(--secondary-h), var(--secondary-s), calc(var(--secondary-l) + 20%));
    --secondary-gradient: linear-gradient(135deg, var(--secondary), var(--secondary-50));

    --tertiary-hsl: var(--tertiary-h), var(--tertiary-s), var(--tertiary-l);
    --tertiary: hsl(var(--tertiary-hsl));
    --tertiary-5: hsla(var(--tertiary-hsl), 0.05);
    --tertiary-10: hsla(var(--tertiary-hsl), 0.1);
    --tertiary-20: hsla(var(--tertiary-hsl), 0.2);
    --tertiary-50: hsla(var(--tertiary-hsl), 0.5);
    --tertiary-90: hsla(var(--tertiary-hsl), 0.9);
    --tertiary-darken: hsl(var(--tertiary-h), var(--tertiary-s), calc(var(--tertiary-l) - 15%));
    --tertiary-lighten: hsl(var(--tertiary-h), var(--tertiary-s), calc(var(--tertiary-l) + 20%));
    --tertiary-gradient: linear-gradient(135deg, var(--tertiary), var(--tertiary-50));

    --cta-hsl: var(--cta-h), var(--cta-s), var(--cta-l);
    --cta: hsl(var(--cta-hsl));
    --cta-5: hsla(var(--cta-hsl), 0.05);
    --cta-10: hsla(var(--cta-hsl), 0.1);
    --cta-20: hsla(var(--cta-hsl), 0.2);
    --cta-50: hsla(var(--cta-hsl), 0.5);
    --cta-90: hsla(var(--cta-hsl), 0.9);
    --cta-darken: hsl(var(--cta-h), var(--cta-s), calc(var(--cta-l) - 15%));
    --cta-lighten: hsl(var(--cta-h), var(--cta-s), calc(var(--cta-l) + 20%));
}

h2 {
    color: var(--primary);
}

a {
    color: var(--primary) !important;
}

a.secondary {
    color: var(--secondary) !important;
}

a.cta {
    color: var(--cta) !important;
}

@media screen and (min-width: 1000px) {
    .footer a,
    .footer a.primary,
    .footer a.secondary,
    .footer a.cta {
        cursor: pointer;
        color: var(--dark) !important;
        text-decoration: none;
    }
}

.bg-primary a,
.bg-gradient-primary a {
    color: var(--white) !important;
}

.primary {
    color: var(--primary) !important;
}

.primary-lighten {
    color: var(--primary-lighten) !important;
}

.primary-darken {
    color: var(--primary-darken) !important;
}

.secondary {
    color: var(--secondary) !important;
}

.secondary-lighten {
    color: var(--secondary-lighten) !important;
}

.secondary-darken {
    color: var(--secondary-darken) !important;
}

.tertiary {
    color: var(--tertiary) !important;
}

.light {
    color: var(--light) !important;
}

.dark {
    color: var(--dark) !important;
}

.black {
    color: var(--black) !important;
}

.white {
    color: var(--white) !important;
}

.error {
    color: var(--error) !important;
}

.cta {
    color: var(--cta) !important;
}

.bg-primary {
    background: var(--primary) !important;
    color: var(--white);
}

.bg-secondary {
    background-color: var(--secondary) !important;
    color: var(--white);
}

.bg-tertiary {
    background-color: var(--tertiary) !important;
    color: var(--black);
}

.bg-light {
    background-color: var(--light) !important;
    color: var(--dark);
}

.bg-cta {
    background-color: var(--cta) !important;
    color: var(--white);
}

/* Gradients */
.bg-gradient-primary {
    background: none !important;
    background-image: var(--primary-gradient) !important;
}

.bg-gradient-secondary {
    background: none !important;
    background-image: var(--secondary-gradient) !important;
}

.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary ul,
.bg-primary ol,
.bg-primary .figure-caption,
.bg-primary p,
.bg-primary label,
.bg-secondary h1,
.bg-secondary h2,
.bg-secondary h3,
.bg-secondary h4,
.bg-secondary ul,
.bg-secondary ol,
.bg-secondary .figure-caption,
.bg-secondary p,
.bg-gradient-primary label,
.bg-gradient-primary h1,
.bg-gradient-primary h2,
.bg-gradient-primary h3,
.bg-gradient-primary h4,
.bg-gradient-primary ul,
.bg-gradient-primary ol,
.bg-gradient-primary .figure-caption,
.bg-gradient-primary p,
.bg-gradient-primary label,
.bg-gradient-secondary h1,
.bg-gradient-secondary h2,
.bg-gradient-secondary h3,
.bg-gradient-secondary h4,
.bg-gradient-secondary ul,
.bg-gradient-secondary ol,
.bg-gradient-secondary .figure-caption,
.bg-gradient-secondary p,
.bg-gradient-primary label {
    color: var(--white);
}

.bg-primary .card h2,
.bg-primary .card h3,
.bg-primary .card h4,
.bg-primary .card ul,
.bg-primary .card ol,
.bg-primary .card .figure-caption,
.bg-primary .card p,
.bg-secondary .card h2,
.bg-secondary .card h3,
.bg-secondary .card h4,
.bg-secondary .card ul,
.bg-secondary .card ol,
.bg-secondary .card .figure-caption,
.bg-secondary .card p,
.bg-gradient-primary .card h2,
.bg-gradient-primary .card h3,
.bg-gradient-primary .card h4,
.bg-gradient-primary .card ul,
.bg-gradient-primary .card ol,
.bg-gradient-primary .card .figure-caption,
.bg-gradient-primary .card p,
.bg-gradient-secondary .card h2,
.bg-gradient-secondary .card h3,
.bg-gradient-secondary .card h4,
.bg-gradient-secondary .card ul,
.bg-gradient-secondary .card ol,
.bg-gradient-secondary .card .figure-caption,
.bg-gradient-secondary .card p {
    color: var(--black);
}

.bg-primary-secondary .card *,
.bg--secondary .card *,
.bg-gradient-primary .card *,
.bg--primary .card * {
    color: var(--black);
}

/*------------------*\
    buttons
\*------------------*/
.btn-primary,
.btn-primary.disabled {
    background: var(--primary) !important;
    border: 1px solid var(--primary-30);
    color: var(--white) !important;
    opacity: 1;
}

.btn-cta,
.btn-cta.disabled {
    background: var(--cta) !important;
    border: 1px solid var(--cta-30);
    color: var(--white) !important;
    opacity: 1;
}

.btn-cta:hover {
    opacity: 0.8;
}

.btn-primary-gradient,
.btn-primary-gradient.disabled {
    background: none !important;
    background-image: var(--primary-gradient) !important;
    border: 1px solid var(--primary-30);
    color: var(--white) !important;
    opacity: 1;
}

.btn-primary:hover,
.btn-primary.disabled:hover,
.btn-primary-gradient:hover,
.btn-primary-gradient.disabled:hover {
    background: var(--primary-darken) !important;
}

.btn-secondary,
.btn-secondary.disabled {
    background: var(--secondary) !important;
    border: 1px solid var(--secondary-30);
    color: var(--white);
    opacity: 1;
}

.btn-secondary-gradient,
.btn-secondary-gradient.disabled {
    background: none !important;
    background-image: var(--secondary-gradient) !important;
    border: 1px solid var(--secondary-30);
    color: var(--white);
    opacity: 1;
}

.btn-secondary:hover,
.btn-secondary.disabled:hover,
.btn-secondary-gradient:hover,
.btn-secondary-gradient.disabled:hover {
    background: var(--secondary-darken) !important;
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
    background-color: var(--primary) !important;
    opacity: 0.9 !important;
}

a.bg-secondary:focus,
a.bg-secondary:hover,
button.bg-secondary:focus,
button.bg-secondary:hover {
    background-color: var(--secondary) !important;
    opacity: 0.9 !important;
}

a.bg-cta:focus,
a.bg-cta:hover,
button.bg-cta:focus,
button.bg-cta:hover {
    background-color: var(--cta) !important;
    opacity: 0.9 !important;
}

/*------------------*\
    Formular
\*------------------*/
#contact-form .message {
    background-color: var(--primary);
}

#contact-form .with-errors li {
    color: var(--error);
}

/*------------------------------------*\
    Icons Feather 
\*------------------------------------*/

.icon-list {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

.icon-list .feather {
    width: 32px;
    height: 32px;
    padding-right: 1rem;
    stroke-width: 3;
    /*stroke: var(--primary);*/
}

.icon-list .feather.bold {
    stroke-width: 5;
    /*stroke: var(--primary);*/
}

.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: inline-block;
}

.feather.small {
    height: 16px;
}

.primary .feather {
    stroke: var(--primary);
}

.primary-darken .feather {
    stroke: var(--primary-darken);
}

.primary-lighten .feather {
    stroke: var(--primary-lighten);
}

.secondary .feather {
    stroke: var(--secondary);
}

.secondary-darken .feather {
    stroke: var(--secondary-darken);
}

.secondary-lighten .feather {
    stroke: var(--secondary-lighten);
}

.big-icons .feather {
    width: 60px;
    height: 60px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.big-icons .feather.primary {
    stroke: var(--primary);
}

.big-icons .feather.primary-darken {
    stroke: var(--primary-darken);
}

.big-icons .feather.primary-lighten {
    stroke: var(--primary-lighten);
}

.big-icons .feather.secondary {
    stroke: var(--secondary);
}

.big-icons .feather.secondary-darken {
    stroke: var(--secondary-darken);
}

.big-icons .feather.secondary-lighten {
    stroke: var(--secondary-lighten);
}

svg + a {
    padding-left: 0.25rem;
}