.elementor-148 .elementor-element.elementor-element-be3aba9:not(.elementor-motion-effects-element-type-background), .elementor-148 .elementor-element.elementor-element-be3aba9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-c3f45ea );}.elementor-148 .elementor-element.elementor-element-be3aba9{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-50px;margin-bottom:0px;}.elementor-148 .elementor-element.elementor-element-be3aba9 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-148 .elementor-element.elementor-element-f031d5a{margin-top:130px;margin-bottom:20px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-148 .elementor-element.elementor-element-d8d7022{text-align:start;}.elementor-148 .elementor-element.elementor-element-d8d7022 img{width:250px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-148 .elementor-element.elementor-element-a1ffb06{text-align:start;}.elementor-148 .elementor-element.elementor-element-a1ffb06 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:24px;font-weight:600;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-148 .elementor-element.elementor-element-635bc36{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#CECECE;}.elementor-148 .elementor-element.elementor-element-70495d6{text-align:start;}.elementor-148 .elementor-element.elementor-element-70495d6 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:24px;font-weight:600;color:#FFFFFF;}.elementor-148 .elementor-element.elementor-element-0671545{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;color:#CECECE;}.elementor-148 .elementor-element.elementor-element-84ce49d{text-align:start;}.elementor-148 .elementor-element.elementor-element-84ce49d .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:24px;font-weight:600;color:#FFFFFF;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-148 .elementor-element.elementor-element-9294be4{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-148 .elementor-element.elementor-element-9294be4 .elementor-icon-list-text{color:#CECECE;transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-ba0fa13{text-align:start;}.elementor-148 .elementor-element.elementor-element-ba0fa13 .elementor-heading-title{font-family:"Plus Jakarta Sans", Sans-serif;font-size:24px;font-weight:600;color:#FFFFFF;}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-148 .elementor-element.elementor-element-8a61815{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:400;}.elementor-148 .elementor-element.elementor-element-8a61815 .elementor-icon-list-text{color:#CECECE;transition:color 0.3s;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-148 .elementor-element.elementor-element-c1b6c06{--divider-border-style:solid;--divider-color:#FFFFFF30;--divider-border-width:1px;}.elementor-148 .elementor-element.elementor-element-c1b6c06 .elementor-divider-separator{width:100%;}.elementor-148 .elementor-element.elementor-element-c1b6c06 .elementor-divider{padding-block-start:5px;padding-block-end:5px;}.elementor-148 .elementor-element.elementor-element-d46f910{margin-top:20px;margin-bottom:50px;}.elementor-bc-flex-widget .elementor-148 .elementor-element.elementor-element-dc8543d.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-148 .elementor-element.elementor-element-dc8543d.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-148 .elementor-element.elementor-element-ca76303{width:auto;max-width:auto;padding:0px 50px 0px 0px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:400;}.elementor-148 .elementor-element.elementor-element-ca76303 .elementor-icon-list-text{color:#CECECE;transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-942d960{width:auto;max-width:auto;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(10px/2);}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-10px/2);}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-item > a{font-family:"Plus Jakarta Sans", Sans-serif;font-size:14px;font-weight:400;}.elementor-148 .elementor-element.elementor-element-942d960 .elementor-icon-list-text{color:#CECECE;transition:color 0.3s;}.elementor-148 .elementor-element.elementor-element-0b44cc4.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-148 .elementor-element.elementor-element-0a7e639{width:auto;max-width:auto;text-align:end;}.elementor-148 .elementor-element.elementor-element-0a7e639 img{width:120px;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(min-width:481px){.elementor-148 .elementor-element.elementor-element-684e72c{width:27.923%;}.elementor-148 .elementor-element.elementor-element-35c8fb1{width:25.077%;}.elementor-148 .elementor-element.elementor-element-d520002{width:21.962%;}}/* Start custom CSS for section, class: .elementor-element-be3aba9 */<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Haustechnik Footer</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f3f4f6; /* Example page background to demonstrate transparency */
      color: #111827;
    }

    /* Demo content above footer so you can see the transparent cutout */
    .hero-demo {
      min-height: 40vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      /* Try changing this background to any color or image — the curve remains transparent! */
      background: linear-gradient(135deg, #e0e7ff 0%, #fae8ff 100%);
      text-align: center;
    }

    .hero-demo h1 {
      font-size: 2rem;
      margin-bottom: 8px;
    }

    .hero-demo p {
      color: #4b5563;
      max-width: 600px;
    }

    /* ========================================================
       FOOTER WITH TRANSPARENT CURVE
       ======================================================== */
    .edgetothetop {
      position: relative;
      background-color: #131a20; /* Dark background from screenshot */
      color: #9ca3af;
      padding: 90px 48px 36px;
      margin-top: -50px; /* Pulls footer up so the transparent curve cuts into the section above */

      /* 
        MASK TECHNIQUE:
        Layer 1 (top 50px): SVG path leaving the top-right cutout transparent
        Layer 2 (below 50px): solid fill so the rest of the footer stays fully visible
      */
      -webkit-mask-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L14 0 C 19 0, 23 50, 28 50 L100 50 L100 50 L0 50 Z' fill='%23000'/%3E%3C/svg%3E"),
        linear-gradient(#000, #000);
      -webkit-mask-size: 100% 51px, 100% calc(100% - 49px);
      -webkit-mask-position: top, bottom;
      -webkit-mask-repeat: no-repeat;

      mask-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L14 0 C 19 0, 23 50, 28 50 L100 50 L100 50 L0 50 Z' fill='%23000'/%3E%3C/svg%3E"),
        linear-gradient(#000, #000);
      mask-size: 100% 51px, 100% calc(100% - 49px);
      mask-position: top, bottom;
      mask-repeat: no-repeat;
    }

    .footer-container {
      max-width: 1320px;
      margin: 0 auto;
    }

    /* Grid Layout */
    .footer-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr 0.9fr 0.9fr;
      gap: 40px;
      margin-bottom: 60px;
    }

    @media (max-width: 1024px) {
      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .footer-grid {
        grid-template-columns: 1fr;
      }
      .edgetothetop {
        padding: 80px 24px 30px;
      }
    }

    /* Logo & Branding */
    .logo-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 24px;
      text-decoration: none;
    }

    .logo-icon {
      width: 44px;
      height: 44px;
    }

    .brand-text h3 {
      font-size: 1.2rem;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.1;
    }

    .brand-text span {
      font-size: 0.65rem;
      letter-spacing: 0.05em;
      color: #9ca3af;
    }

    .footer-heading {
      font-size: 1.35rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 16px;
    }

    .company-info {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #cbd5e1;
    }

    .phone-block {
      margin-top: 24px;
    }

    .phone-label {
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 8px;
    }

    .phone-number {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 1rem;
      transition: color 0.2s;
    }

    .phone-number:hover {
      color: #ffffff;
    }

    /* Middle empty/widget placeholder from screenshot */
    .placeholder-box {
      border: 1px dashed rgba(255, 255, 255, 0.2);
      border-radius: 6px;
      min-height: 240px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, 0.4);
      font-size: 1.8rem;
    }

    /* Links Columns */
    .footer-col h4 {
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
      margin-bottom: 20px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .footer-col ul li a {
      color: #cbd5e1;
      text-decoration: none;
      font-size: 0.95rem;
      transition: color 0.2s;
    }

    .footer-col ul li a:hover {
      color: #ffffff;
    }

    /* Bottom Sub-footer Bar */
    .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding-top: 28px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      font-size: 0.85rem;
    }

    .footer-bottom-left {
      display: flex;
      align-items: center;
      gap: 32px;
      flex-wrap: wrap;
    }

    .footer-bottom-links {
      display: flex;
      gap: 20px;
    }

    .footer-bottom-links a {
      color: #9ca3af;
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-bottom-links a:hover {
      color: #ffffff;
    }
  <\/style>
</head>
<body>

  <!-- Section above footer to showcase transparency -->
  <section class="hero-demo">
    <h1>Page Content Above Footer</h1>
    <p>Notice how the wave cut-out on the top of the footer is 100% transparent, blending directly with this gradient background.</p>
  </section>

  <!-- ==================== FOOTER ==================== -->
  <footer class="edgetothetop">
    <div class="footer-container">
      
      <div class="footer-grid">
        <!-- Col 1: Brand & Contact -->
        <div>
          <a href="#" class="logo-wrapper">
            <!-- SH Icon -->
            <svg class="logo-icon" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 25 L50 10 L85 25 L85 75 L50 90 L15 75 Z" stroke="#ffffff" stroke-width="8" fill="none"/>
              <path d="M50 10 L85 25 L85 45 L50 30 Z" fill="#7c3aed"/>
              <text x="30" y="65" font-family="sans-serif" font-weight="900" font-size="40" fill="#ffffff">SH</text>
            </svg>
            <div class="brand-text">
              <h3>Haustechnik</h3>
              <span>Wärme · Wasser · Klima · Energie</span>
            </div>
          </a>

          <h2 class="footer-heading">De toekomst is elektrisch.</h2>
          <div class="company-info">
            <p>Kon. Wilhelminaplein 29</p>
            <p>1062 HJ Amsterdam</p>
            <p>KVK: 82048037</p>
            <p>BTW: NL862317484B01</p>
          </div>

          <div class="phone-block">
            <div class="phone-label">Telefon</div>
            <a href="tel:+8204803712388" class="phone-number">+8204803712388</a>
          </div>
        </div>

        <!-- Col 2: Placeholder Widget / Box from Screenshot -->
        <div>
          <div class="placeholder-box">+</div>
        </div>

        <!-- Col 3: Over Quatt -->
        <div class="footer-col">
          <h4>Over Quatt</h4>
          <ul>
            <li><a href="#">Ons verhaal</a></li>
            <li><a href="#">Nieuws</a></li>
            <li><a href="#">Klantervaringen</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Werken bij Quatt</a></li>
          </ul>
        </div>

        <!-- Col 4: Handige links -->
        <div class="footer-col">
          <h4>Handige links</h4>
          <ul>
            <li><a href="#">Zakelijk</a></li>
            <li><a href="#">Word installatiepartner</a></li>
            <li><a href="#">Help center</a></li>
            <li><a href="#">Hulp nodig? Quatt Support</a></li>
          </ul>
        </div>
      </div>

      <!-- Bottom Bar -->
      <div class="footer-bottom">
        <div class="footer-bottom-left">
          <span>&copy; 2026 Haustechnik</span>
          <div class="footer-bottom-links">
            <a href="#">Impressum</a>
            <a href="#">Datenschutz</a>
            <a href="#">AGB</a>
          </div>
        </div>

        <!-- Mini Brand Logo on Right -->
        <div class="brand-text" style="display: flex; align-items: center; gap: 8px;">
          <svg width="24" height="24" viewBox="0 0 100 100" fill="none">
            <path d="M15 25 L50 10 L85 25 L85 75 L50 90 L15 75 Z" stroke="#ffffff" stroke-width="8"/>
            <path d="M50 10 L85 25 L85 45 L50 30 Z" fill="#7c3aed"/>
          </svg>
          <div>
            <h3 style="font-size: 0.9rem;">Haustechnik</h3>
            <span style="font-size: 0.55rem;">Wärme · Wasser · Klima · Energie</span>
          </div>
        </div>
      </div>

    </div>
  </footer>

</body>
</html>/* End custom CSS */