/*
 Theme Name:   liseDESIGN Theme
 Theme URI:    https://lisedesign.de
 Description:  Child Theme
 Author:       Elisabeth Hütter
 Author URI:   https://lisedesign.de
 Template:     generatepress
 Version:      0.1
*/


/* Clamp Typography */
/* Set Font Family */ 

.ff-body {
	font-family: var(--gp-font--body);
}

.ff-heading {
	font-family: var(--gp-font--head);
}

.ff-sub-heading {
	font-family: var(--gp-font--sub-head);
}


h1, .fs-h1 {
	font-size: clamp(2.3rem, -1.875rem + 10.156vi, 6.25rem);
	font-family: var(--gp-font--head);
	padding-bottom: 0px;
	font-weight: 700;
}

h2, .fs-h2 {
	font-size: clamp(2.1rem, -1.875rem + 10.156vi, 3.375rem);
	font-family: var(--gp-font--sub-head);
	padding-bottom: 0px;
}

h3, .fs-h3 {
	font-size: clamp(1.875rem, 1.7045rem + 0.6818vw, 2.25rem);
	font-family: var(--gp-font--sub-head);
	font-weight: 400;
	padding-bottom: 0px;
}

h4, .fs-h4 {
	font-size: clamp(1.563rem, 1.094rem + 0.977vi, 1.875rem);
	font-family: var(--gp-font--sub-head);
	font-weight: 400;
	padding-bottom: 0px;
}

h5, .fs-h5 {
	font-size: clamp(1.5625rem, 1.4205rem + 0.5682vw, 1.875rem);
	font-family: var(--gp-font--underhead);
	font-weight: 400;
}

h6, .fs-h6-blogdaten {
	font-size: clamp(1.4063rem, 1.2784rem + 0.5114vw, 1.6875rem);
	font-family: var(--gp-font--sub-head);
	font-weight: 400;
}

h6, .fs-h6-footer-head {
	font-size: clamp(1.259rem, 1.0625rem + 0.3906vw, 1.395rem); /* 22-20 px */
	font-family: var(--gp-font--sub-head);
	font-weight: 700;
}

h6, .fs-h6-footer-info {
	font-size: clamp(1.125rem, 0.9375rem + 0.3906vw, 1.25rem); /* 18-16 px */
	font-family: var(--gp-font--sub-head);
	font-weight: 400;
}

p, .fs-p {
	font-size: clamp(1.0417rem, 0.947rem + 0.3788vw, 1.25rem);
	font-family: var(--gp-font--body);
	padding-bottom: 0px;
}

/* BUTTON MIT HOVER-EFFEKT */

.button {
  background-color: #dbf227 !important;
  color: #000000 !important;
  border: none;
  border-radius:2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4063rem, 1.2784rem + 0.5114vw, 1.6875rem);           
  line-height: 1.1;
  padding: 0.2em 0.8em;        
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transform: rotate(-2deg);
  position: relative;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;         
  overflow: visible;
}

.button:focus {
  outline: 0;
}

.button:after {
  content: '';
  position: absolute;
  border: 1.5px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
  border-radius: 2px;
  pointer-events: none;
  transition: bottom 0.2s, left 0.2s;
}

.button:hover,
.button:focus {
  background-color: #dbf227 !important;
  color: #000000 !important;
}

.button:hover::after,
.button:focus::after {
  bottom: 6px;
  left: 6px;
}

@media (min-width: 768px) {
  .button {
    font-size: 1.1rem;
    padding: 0.6em 2.2em;
  }
}

/* BUTTON BACK TO TOP */
.generate-back-to-top {
  background-color: #dbf227;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.75rem;
  border: none;
  box-sizing: border-box;
  text-decoration: none;
  transform: rotate(-4deg);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;

  color: #dbf227;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus {
  color: #000000 !important;
  background-color: #dbf227 !important;
  outline: 0;
}

.generate-back-to-top::after {
  content: '';
  position: absolute;
  border: 1.5px solid #000000;
  bottom: 4px;
  left: 4px;
  width: calc(100% - 1px);
  height: calc(100% - 1px);
}

.generate-back-to-top:hover::after {
  bottom: 6px;
  left: 6px;
  pointer-events: none;
}

.gp-icon.icon-arrow-up svg {
  fill: #000000;
  width: 1em;
  height: 1em;
}