/*
Theme Name: Flurwork
Author: Portalworks
Version: 1.0.0
Text Domain: flurwork
*/

/* libre-franklin-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 300;
    src: url('assets/fonts/libre-franklin-v19-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* libre-franklin-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 400;
    src: url('assets/fonts/libre-franklin-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* libre-franklin-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 500;
    src: url('assets/fonts/libre-franklin-v19-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* libre-franklin-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 600;
    src: url('assets/fonts/libre-franklin-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  /* libre-franklin-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Libre Franklin';
    font-style: normal;
    font-weight: 700;
    src: url('assets/fonts/libre-franklin-v19-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  
  
  
  
  /***************************************************************
                           ROOT
  ***************************************************************/
  :root {
      --font-primary: 'Libre Franklin', sans-serif;
  
      --primary-title-color: #b75c3d;
      --secondary-title-color: #0d9297;
      --third-title-color: #666f9a;
      --fourth-title-color: #878465;
  
      --primary-bg-color: #f9e7df;
      --secondary-bg-color: #f6f9ed;
      --third-bg-color: #fbf7f0;
      --form-color: #845d39;
  }
	  .no-customize-support #wp-admin-bar-wp-logo{
			display: none !important;
		}
.no-customize-support #wp-admin-bar-new-post {
	display: none !important;
}
.navbar {
	z-index: 1999;
	background-color: #fff !important;
}
  /*************************
          BODY
  **************************/
  body {
      color: var(--black);
      font-family: var(--font-primary);
      overflow-x: hidden;
      #content {
          padding-top: 95.25px;
      }
      
  }
	body.admin-bar {
		#content {
			padding-top: calc(95.25px + 46px);
		}
	}
  	.admin-bar nav {
		top: 46px;
	}
.admin-bar .offcanvas-header {
	margin-top: 46px;
}
  /*******************************
          PRE-DEFINED CLASSES
  ********************************/
  .btn-primary {
      background-color: #fff;
      color: var(--fourth-title-color);
      border-radius: 22px;
      font-weight: 600;
      border: 2px solid var(--fourth-title-color);
      padding: 13px 18px;
      line-height: 1;
  }
  .btn-primary:hover,
  .btn-primary:active,
  .btn:focus-visible {
      background-color: var(--fourth-title-color) !important;
      color: #fff;
      border-color: #fff !important;
      box-shadow: none;
      outline: 0;
  }
  b, strong {
      font-weight: 700;
  }
  .text-primary-color {
      color: var(--primary-title-color)
  }
  .editor.text-primary-color {
      a {
          color: var(--primary-title-color);
      }
  }
  .text-secondary-color {
      color: var(--secondary-title-color)
  }
  .editor.text-secondary-color {
      a {
          color: var(--secondary-title-color);
      }
  }
  .text-third-color {
      color: var(--third-title-color)
  }
  .editor.text-third-color {
      span {
          color: var(--fourth-title-color) !important;
      }
      a {
          color: var(--third-title-color);
      }
  }
  .text-fourth-color {
      color: var(--fourth-title-color)
  }
  .editor.text-fourth-color {
      a {
          color: var(--fourth-title-color);
      }
  }
  
  
  .bg-primary-color {
      background-color: var(--primary-bg-color) !important;
  }
  .bg-secondary-color {
      background-color: var(--secondary-bg-color) !important;
  }
  .bg-third-color {
      background-color: var(--third-bg-color) !important;
  }
  
  .section-padding {
      padding-top: 35px;
      padding-bottom: 35px;
  }
  
  
  
  .container-fluid,
  .container {
      padding-left: 20px;
      padding-right: 20px;
  }
  
  .editor {
      h1 {
          font-weight: 600;
          font-size: 34px;
          margin-bottom: 24px;
      }
      h2 {
          font-size: 21px;
          font-weight: 600;
      }
      ul, ol {
          padding-left: 15px;
      }
      p, ul li, ol li {
          font-size: 18px;
          font-weight: 300;
          color: #000;
      }
      p:last-child {
          margin-bottom: 0;
      }
      li ul {
          padding-left: 17px;
      }
      li ul li {
          list-style: '–  ';
      }
	  a {
		  color: #000;
	  }
  }
  
  
  @media (min-width: 768px){
  
      .container-fluid {
          padding-left: 40px;
          padding-right: 40px;
      }
      .section-padding {
          padding-top: 60px;
          padding-bottom: 60px;
      }
  }
  @media (min-width: 992px){
	  .btn-primary {
		  font-size: 25px;
	  }
	  .admin-bar nav {
			top: 32px;
		}
	  .admin-bar .offcanvas-header {
		  margin-top: 32px;
	  }
      .max-width-editor {
          max-width: 439px;
      }
      .pb-lg-140 {
          padding-bottom: 140px;
      }
      .lage-image-3 {
          max-height: 700px;
      }
      body {
          #content {
              padding-top: 161.138px;
          }
      }
	  body.admin-bar {
		  #content {
			  padding-top: calc(161.138px + 32px);
		  }
	  }
      .margin-left-minus {
          margin-left: -100px;
      }
      .margin-top-minus {
          margin-top: -100px;
      }
      .margin-bottom-100 {
          margin-bottom: 100px;
      }
      .pt-lg-100 {
          padding-top: 100px;
      }
      .w-lg-100 {
          width: 100% !important;
      }
      .w-lg-75 {
          width: 75% !important;
      }
      .w-lg-50 {
          width: 50% !important;
      }
      .w-lg-30 {
          width: 30% !important;
      }
      .editor {
          h1 {
              font-size: 60px;
          }
          h2 {
              font-size: 41px;
          }
          p, ul li, ol li {
              font-size: 25px;
          }
          ul, ol {
              padding-left: 22px;
          }
      }
  }
  @media (min-width: 1200px){
      .max-width-editor {
          max-width: 459px;
      }
      .editor {
          h1 {
              font-size: 80px;
          }
      }
      .margin-left-xl-minus {
          margin-left: -100px;
      }
  }
  .navbar, .offcanvas-header {
      padding-top: 30px;
      padding-bottom: 15px;
  }
  .navbar-brand, .offcanvas-header .logo {
      width: 160px;
      height: auto;
      display: block;
      & img {
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 100%;
          object-fit: contain;
      }
  }
  
  .navbar-toggler-icon:focus-visible, .navbar-toggler, .navbar-toggler:focus, .navbar-toggler:focus-visible, .offcanvas-header button:focus, select:focus, select:focus-visible, .btn-close:focus {
      outline: none;
      box-shadow: none;
      border: none;
  }
.navbar-toggler {
	display: flex; 
	flex-direction: column;
	gap: 5px;
	z-index: 4444;
	position: relative;
	top: -7px;
}

.navbar-toggler span{
	height: 3px;
	width: 1.5rem;
	background-color: #000;
	transition: all 0.3s ease-in-out;
}
.navbar-toggler.active .top {
  transform: rotate(135deg) translate(6px,-6px);
}
.navbar-toggler .mid {
	opacity: 1;
	transform: scaleX(100%);
}
.navbar-toggler.active .mid {
	opacity: 0;
  transform: scaleX(0%);
}
.navbar-toggler.active .bottom {
  transform: rotate(-135deg) translate(5px,6px);
}

.navbar-brand{
	z-index: 4444;
}
.offcanvas-backdrop.show {
	opacity: 0;
}
  .navbar-toggler-icon {
      width: 25px;
      height: 25px;
      background-image: url("assets/images/Hamburger-Menue.svg");
	  position: relative;
  		top: -10px;
	  z-index: 44444;
  }
  .btn-close {
	  margin-top: 2px !important;
      height: 25px;
      width: 25px;
      background: transparent url("assets/images/hamburger-close.png") center/1em no-repeat;
      background-size: 1em;
      background-size: contain;
      opacity: 0;
	  visibility: hidden;
	  scale: 0;
  }
.offcanvas-header .logo {
	opacity: 0;
	visibility: hidden;
}
  .offcanvas-header, .offcanvas-body {
      padding-left: 0;
      padding-right: 0;
  }
  .navbar-nav {
      padding-top: 45px;
      padding-bottom: 25px;
      gap: 15px;
  }
  .menu-item a {
      color: #000;
      text-decoration: none;
      font-size: 25px;
      font-weight: 600;
  }
  .current-menu-item a {
      color: var(--primary-title-color);
  }
  .swiper-slide {
      max-height: 800px;
      img {
          aspect-ratio: 16/9;
      }
  }
  .hero-section {
      background: #FFF;
      background: linear-gradient(0deg, rgb(255, 255, 255) 50%, rgb(249, 231, 223) 60%);
  }
  .hero-text {
      font-size: 14vw;
      margin-top: -16%;
      font-weight: 600;
      line-height: 1.2;
      padding-right: 10px;
      text-align: end;
      z-index: 3;
  }
  
  .flurwork-section {
      background-image: url(assets/images/flur-bgy.png);
      background-position: left top;
      background-size: 100% 100%;
      background-repeat: no-repeat;
  }
      .swiper-button-prev {
          rotate: 180deg;
      }
      .swiper-button-next, .swiper-button-prev {
          width: 40px;
      }
      .swiper-button-next::after, .swiper-button-prev::after {
          content: '';
          background-image: url(assets/images/chevron.svg);
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
          width: 40px;
          height: 80px;
      }
      .map-img {
          width: 100%;
          position: relative;
      }
  
  .angebot-section {
  
      background-image: url(assets/images/flur-bg-left.png);
      background-position: right top;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      .mobile-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(3, 1fr); 
      }
  
      .mobile-grid-1 { grid-area: 1 / 1 / 3 / 2; }
      .mobile-grid-2 { grid-area: 1 / 2 / 4 / 3; } 
  }
  .kontakt-section {
      .mobile-grid {
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(3, 1fr); 
      }
  
      .mobile-grid-1 { grid-area: 1 / 1 / 4 / 2; }
      .mobile-grid-2 { grid-area: 1 / 2 / 3 / 3; } 
      h1 {
          margin-top: 35px;
      }
  }
  
  input {
      width: 100%;
      border: 2px solid var(--form-color);
      font-size: 19px;
      font-weight: 600;
      padding: 10px 20px;
	  border-radius: 0 !important;
      color: var(--form-color);
  }
  input:focus-visible {
      outline: 0;
  }
  input::placeholder {
      opacity: 1;
      color: #000;
  }
  .wpcf7-list-item-label {
      color: var(--form-color);
  }
  .wpcf7-list-item {
    margin-left: 0;
  }
  .wpcf7-checkbox  .wpcf7-list-item  {
    width: 50%;
  }
  .wpcf7-checkbox  .wpcf7-list-item.last {
    width: 100%;
  }

  .wpcf7-list-item label {
      display: flex;
      gap: 10px;
      font-weight: 600;
      font-size: 19px;
      align-items: center;
      & input[type="checkbox"] {
          display: block;
          width: 16px;
          height: 16px;
          flex-shrink: 0;
          border: 2px solid var(--form-color);
          border-radius: 0 !important;
          appearance: none;
      }
  }
  input[type="checkbox"]{
      padding: 0 !important;
  }
  .checkboxes-label {
      font-size: 18px;
      margin-bottom: 24px;
      font-weight: 300;
  }
  .custom-checkboxes {
      row-gap: 7px;
      input[type="checkbox"]{
          position: relative;
          padding: 0 !important;
  
      }
      input[type="checkbox"]::before {
          scale: 0;
          transition: all 0.1s ease-in-out;
      }
      input[type="checkbox"]::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var(--form-color);
          background-image: url('assets/images/check.svg');
          background-size: 70%;
          background-position: center;
          background-repeat: no-repeat;
          
      }
      input[type="checkbox"]:checked::before {
          scale: 1;
      }
      & .wpcf7-acceptance .wpcf7-list-item-label{
          font-size: 14px !important;
          font-weight: 300;
          a {
              color: var(--form-color);
          }
      }
  }
  form p {
      margin-bottom: 0;
  }
  .wpcf7-submit {
      border: 2px solid var(--form-color) !important;
      border-radius: 0;
      background-color: #fff !important;
      color: var(--form-color) !important;
      font-weight: 600;
  }
  .wpcf7-submit:hover {
      background-color: var(--form-color) !important;
      color: #fff !important;
  }
 
  .wpcf7-list-item.last{ 
      width: 100%;
  }
  
  
  .parallax-image {
      /* transition: transform .7s ease; */
      transform: translateY(0);
  }
  
  .parallax-image.parallax-down {
      transform: translateY(-20px);
  }
  
  .devider {
      width: 100%;
      height: 2px;
      background-color: #000;
      display: inline-block;
      margin-top: 30px;
      margin-bottom: 30px;
  }
  footer {
      padding-bottom: 30px;
      padding-top: 30px;
  }
  .footer-text, .footer-links {
      font-size: 14px;
      gap: 5px 14px;
      .contact-info, a {
          color: #000;
          /* margin-left: 7px;
          margin-right: 7px; */
          position: relative;
          &::before {
              content: '';
              position: absolute;
              top: 2px;
              width: 1px;
              height: 90%;
              right: -7px;
              background-color: #000;
          }
      }
      .contact-info:last-child, a:last-child {
          &::before {
              content: none;
          }
      }
      
  }
  
  @media (min-width: 576px){
      .hero-text {
          font-size: 80px;
      }
  }
  @media (min-width: 768px){
      .hero-text {
          font-size: 111px;
      }
      .wpcf7-list-item label {
          font-size: 25px;
      }
  
  }
  @media (min-width: 992px){
	  .navbar-toggler span{
		  height: 6px;
		  width: 3.5rem;
	  }
	  .navbar-toggler.active .top {
		  transform: rotate(135deg) translate(8px,-6px);
	  }
	  .navbar-toggler.active .bottom {
		  transform: rotate(-135deg) translate(10px,6px);
	  }
	  .custom-checkboxes input[type="checkbox"] {
	width: 28px !important;
	height: 28px !important;
}
	  .custom-checkboxes {
  & .wpcf7-acceptance .wpcf7-list-item-label {
    font-size: 20px !important;
    font-weight: 300;
  }
}
      .parallax-image.parallax-down {
          transform: translateY(-30px);
      }
      .map-wrap::before {
          content: '';
          width: 100%;
          height: 300px;
          background-color: var(--secondary-bg-color);
          top: -300px;
          left: 0;
          z-index: -1;
          position: absolute;
      }
      
      .map-img {
          width: 47%;
          position: absolute;
      }
  
      .swiper-button-next, .swiper-button-prev {
          width: 70px;
      }
      .swiper-button-next::after, .swiper-button-prev::after {
          width: 70px;
          height: 130px;
      }
      .navbar-toggler-icon {
          width: 3.5rem;
          height: 3.5rem;
		  position: relative;
		  top: -15px;
      }
      .btn-close {
          height: 50px;
          width: 50px;
      }
      .navbar-brand, .offcanvas-header .logo {
          width: 244px;
      }
  
      .navbar-nav {
          padding-top: 95px; 
          padding-bottom: 65px;
          gap: 30px;
      }
      .menu-item a {
          font-size: 40px;
      }
      .hero-text {
          margin-left: -80px;
          font-size: 89px;
          text-align: start;
          margin-top: 0;
      }
      .hero-section {
          .row {
              position: relative;
          }
          .hero-text, .editor {
              position: relative;
              z-index: 3;
          }
          .second-image {
              position: absolute;
              top: 140px;
              left: 50%;
              transform: translateX(-50%);
              z-index: 1;
              max-width: 190px;
          }
          .third-image {
              position: absolute;
              left: 55%;
              top: 290px;
              z-index: 2;
          }
      }
      .hero-second {
          .img-box1 {
              margin-top: -70px;
              position: relative;
              z-index: 1;
          }
          .img-box2 {
              margin-left: -80px;
          }
      }
  
      .flurwork-section {
          margin-top: -300px;
          background-size: 100% 100%;
          .editor {
              position: relative;
              z-index: 3;
          }
      }
      .lage-image-2 {
          width: 90%;
      }
      .lage-image-3 {
          width: 40% !important;
      }
      .navbar, .offcanvas-header {
          padding-top: 60px;
          padding-bottom: 30px;
      }
      .angebot-first-image {
          margin-left: 100px;
          margin-right: -100px;
          position: relative;
          z-index: 3;
      }
      .angebot-second-image {
          margin-top: 100px;
      }
      .angebot-section {
          background-size: 100% 100%;
      }
      .custom-checkboxes {
          &.wpcf7-acceptance .wpcf7-list-item-label{
              font-size: 20px !important;
          }
      }
      .img-kontakt {
          position: absolute;
          top: 400px;
          max-width: 400px;
          right: 12px;
      }
  
      .footer-text {
          font-size: 18px;
      }
      .footer-links {
          font-size: 18px;
      }
  
  }
  @media (min-width: 1200px){
      .hero-text {
          font-size: 105px;
          margin-left: -89px;
      }
      .hero-section {
          .second-image {
              max-width: 230px;
          }
      }
      .img-kontakt {
          top: 550px;
      }
  }
  @media (min-width: 1400px){
      .hero-text {
          font-size: 121px;
          margin-left: -100px;
      }
      .hero-section {
          .second-image {
              max-width: 340px;
          }
          .third-image {
              top: 424px;
          }
      }
      .img-kontakt {
          top: 600px;
      }
	  .flurwork-section .swiper{
		  max-width: 1920px;
	  }
	  .flurwork-section {
		  background-image: url(assets/images/flur-bgy-1920.png); 
	  }
  }
	@media (min-width: 1920px){
		.flurwork-section {
			background-image: url(assets/images/flur-bgy-1920.png);
			background-size: 1920px;
			background-position: center;
		}
	}