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

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

:root {
  /* Hex-Wert in HSL-Wert umgewandelt eintragen*/
  /* Hauptfarbe*/
  --primary-h: 215;
  --primary-s: 100%;
  --primary-l: 27%;
  /* Zweitfarbe*/
  --secondary-h: 199;
  --secondary-s: 79%;
  --secondary-l: 49%;
  /* neutrale Drittfarbe*/
  --tertiary-h: 15;
  --tertiary-s: 0%;
  --tertiary-l: 95%;
  /* extra call-to-action-farbe*/
  --cta-h: 30;
  --cta-s: 100%;
  --cta-l: 64%;
  /*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;
}
