{"id":14,"date":"2024-10-06T11:45:34","date_gmt":"2024-10-06T09:45:34","guid":{"rendered":"http:\/\/magu-swiss.ch\/?page_id=14"},"modified":"2024-10-30T21:10:31","modified_gmt":"2024-10-30T20:10:31","slug":"startseite","status":"publish","type":"page","link":"https:\/\/magu-swiss.ch\/it\/startseite\/","title":{"rendered":"Startseite"},"content":{"rendered":"<section class=\"bde-section-14-196 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-14-197 bde-code-block\">\n\n  <div class=\"slider-container\">\n  <div class=\"slider\">\n    <div class=\"slide\" id=\"slide1\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/1-Hausbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Zuhause der<br>Tr\u00e4ume \u2013 nachhaltig und<br>zukunftssicher bauen<\/h1>\n        <a href=\"#\" class=\"cta-button\">Angebot einholen<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide2\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/2-flachdachsanierung.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Flachdach sanieren \u2013<br>langlebig, robust<br>und wetterfest<\/h1>\n        <a href=\"#\" class=\"cta-button\">Mehr erfahren<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide3\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/3-Poolbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Traum-Pool gestalten \u2013<br>Sommer neu erleben<\/h1>\n        <a href=\"#\" class=\"cta-button\">Jetzt planen<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide1-clone\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/1-Hausbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Zuhause der<br>Tr\u00e4ume \u2013 nachhaltig und<br>zukunftssicher bauen<\/h1>\n        <a href=\"#\" class=\"cta-button\">Mehr erfahren<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"progress-bar-container\">\n    <div class=\"progress-bar\" id=\"progress1\"><\/div>\n    <div class=\"progress-bar\" id=\"progress2\"><\/div>\n    <div class=\"progress-bar\" id=\"progress3\"><\/div>\n  <\/div>\n  <div class=\"slide-navigation\">\n    <button data-target=\"slide1\">Hausbau<\/button>\n    <button data-target=\"slide2\">Flachdachsanierung<\/button>\n    <button data-target=\"slide3\">Poolbau<\/button>\n  <\/div>\n<\/div>\n\n<style>\n  .slider-container {\n    position: relative;\n    width: 100%;\n    margin: 0 auto;\n    overflow: hidden;\n    height: 82vh;\n  }\n\n  .slider {\n    display: flex;\n    transition: transform 1s ease-in-out;\n    height: 100%;\n    will-change: transform;\n  }\n\n  .slide {\n    min-width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    position: relative;\n    z-index: 0;\n  }\n\n  .slider-image-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 1;\n  }\n\n  .slide-content {\n    text-align: center;\n    color: #fff;\n    z-index: 2;\n  }\n\n  \/* Standard-Schriftgr\u00f6\u00dfe f\u00fcr gr\u00f6\u00dfere Bildschirme *\/\n.slide-content h1 {\n    font-size: 3rem; \/* Vorher war es 3rem *\/\n    margin-bottom: 20px;\n    color: #fff;\n}\n\n  .cta-button {\n    display: inline-block;\n    border: 1px solid #fff;\n    padding: 15px 30px;\n    color: #fff !important;\n    text-decoration: none;\n    font-size: 1.3rem;\n    font-weight: 400;\n    letter-spacing: 1.1px;\n    text-transform: uppercase;\n    transition: background 0.3s;\n  }\n\n  .cta-button:hover {\n    background: #fff;\n    color: #000 !important;\n  }\n\n  .progress-bar-container {\n    position: absolute;\n    bottom: 100px;\n    width: 100%;\n    display: flex;\n    justify-content: space-around;\n  }\n\n  .progress-bar {\n    width: 30%;\n    height: 5px;\n    background: lightgray;\n    position: relative;\n  }\n\n  .progress-bar.active::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: #d1392c;\n    animation: progressAnimation 6s linear;\n  }\n\n  @keyframes progressAnimation {\n    from {\n      width: 0;\n    }\n    to {\n      width: 100%;\n    }\n  }\n\n  .slide-navigation {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    display: flex;\n    justify-content: space-around;\n    padding: 10px;\n    hyphens: auto;\n  }\n\n  .slide-navigation button {\n    cursor: pointer;\n    border: none;\n    background: none;\n    padding: 10px;\n    font-size: 24px;\n    font-weight: 600;\n    color: #fff;\n  }\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 1023px) {\n    .slide-content h1 {\n        font-size: 2.75rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 768px) {\n    .slide-content h1 {\n        font-size: 2.5rem;\n    }\n  \t.slide-navigation button {\n      font-size: 22px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 692px) {\n    .slide-content h1 {\n        font-size: 2.25rem;\n    }\n  \t.slide-navigation button {\n      font-size: 20px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 500px) {\n    .slide-content h1 {\n        font-size: 2rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 420px) {\n    .slide-content h1 {\n        font-size: 1.75rem;\n    }\n  \t.slide-navigation button {\n      font-size: 18px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 379px) {\n\t.slide-navigation {\n      \tbottom: 20px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 355px) {\n    .slide-content h1 {\n        font-size: 1.5rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 300px) {\n    .slide-content h1 {\n        font-size: 1.4rem;\n    }\n  \t.slide-navigation button {\n      font-size: 16px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 270px) {\n    .slide-content h1 {\n        font-size: 1rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 239px) {\n\t.progress-bar-container {\n      bottom: 130px;\n    }\n}\n\n<\/style>\n\n<script>\n  let currentIndex = 0;\n  const slides = document.querySelectorAll('.slide');\n  const progressBars = document.querySelectorAll('.progress-bar');\n  const slider = document.querySelector('.slider');\n  const buttons = document.querySelectorAll('.slide-navigation button');\n  const totalSlides = slides.length;\n  let autoSlideInterval;\n\n  function updateSlide(index) {\n    slider.style.transition = 'transform 1s ease-in-out';\n    slider.style.transform = `translateX(-${index * 100}%)`;\n    progressBars.forEach((bar, i) => {\n      if (i === index % (totalSlides - 1)) {\n        bar.classList.add('active');\n      } else {\n        bar.classList.remove('active');\n      }\n    });\n  }\n\n  buttons.forEach((button, index) => {\n    button.addEventListener('click', () => {\n      currentIndex = index;\n      updateSlide(currentIndex);\n      resetAutoSlide();\n    });\n  });\n\n  function autoSlide() {\n    currentIndex++;\n    if (currentIndex === totalSlides) {\n      slider.style.transition = 'none';\n      currentIndex = 0;\n      slider.style.transform = `translateX(0)`;\n      resetProgressBars();\n      setTimeout(() => {\n        slider.style.transition = 'transform 1s ease-in-out';\n        currentIndex++;\n        updateSlide(currentIndex);\n      }, 50);\n    } else {\n      updateSlide(currentIndex);\n    }\n  }\n\n  function resetProgressBars() {\n    progressBars.forEach(bar => {\n      bar.classList.remove('active');\n    });\n    progressBars[0].classList.add('active');\n  }\n\n  function resetAutoSlide() {\n    clearInterval(autoSlideInterval);\n    autoSlideInterval = setInterval(() => {\n      autoSlide();\n    }, 6000); \/\/ Set to 6000ms to match the progress bar animation duration\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    progressBars[currentIndex].classList.add('active');\n    autoSlideInterval = setInterval(() => {\n      autoSlide();\n    }, 6000); \/\/ Set to 6000ms to match the progress bar animation duration\n  });\n<\/script>\n\n\n\n<\/div><div class=\"bde-div-14-200 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-14-202 bde-text\">\nThis is a basic text element.\n<\/div>\n<\/div><\/div>\n<\/section><section class=\"bde-section-14-201 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><\/div>\n<\/section><section class=\"bde-section-14-203 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-code-block-14-204 bde-code-block\">\n\n  <div class=\"slider-container\">\n  <div class=\"slider\">\n    <div class=\"slide\" id=\"slide1\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/1-Hausbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Zuhause der<br>Tr\u00e4ume \u2013 nachhaltig und<br>zukunftssicher bauen<\/h1>\n        <a href=\"#\" class=\"cta-button\">Angebot einholen<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide2\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/2-flachdachsanierung.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Flachdach sanieren \u2013<br>langlebig, robust<br>und wetterfest<\/h1>\n        <a href=\"#\" class=\"cta-button\">Mehr erfahren<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide3\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/3-Poolbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Traum-Pool gestalten \u2013<br>Sommer neu erleben<\/h1>\n        <a href=\"#\" class=\"cta-button\">Jetzt planen<\/a>\n      <\/div>\n    <\/div>\n    <div class=\"slide\" id=\"slide1-clone\" style=\"background-image: url('\/wp-content\/uploads\/2024\/10\/1-Hausbau.webp');\">\n      <div class=\"slider-image-overlay\"><\/div>\n      <div class=\"slide-content\">\n        <h1>Ihr Zuhause der<br>Tr\u00e4ume \u2013 nachhaltig und<br>zukunftssicher bauen<\/h1>\n        <a href=\"#\" class=\"cta-button\">Mehr erfahren<\/a>\n      <\/div>\n    <\/div>\n  <\/div>\n  <div class=\"progress-bar-container\">\n    <div class=\"progress-bar\" id=\"progress1\"><\/div>\n    <div class=\"progress-bar\" id=\"progress2\"><\/div>\n    <div class=\"progress-bar\" id=\"progress3\"><\/div>\n  <\/div>\n  <div class=\"slide-navigation\">\n    <button data-target=\"slide1\">Hausbau<\/button>\n    <button data-target=\"slide2\">Flachdachsanierung<\/button>\n    <button data-target=\"slide3\">Poolbau<\/button>\n  <\/div>\n<\/div>\n\n<style>\n  .slider-container {\n    position: relative;\n    width: 100%;\n    margin: 0 auto;\n    overflow: hidden;\n    height: 82vh;\n  }\n\n  .slider {\n    display: flex;\n    transition: transform 1s ease-in-out;\n    height: 100%;\n    will-change: transform;\n  }\n\n  .slide {\n    min-width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    background-size: cover;\n    background-position: center;\n    position: relative;\n    z-index: 0;\n  }\n\n  .slider-image-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(0, 0, 0, 0.4);\n    z-index: 1;\n  }\n\n  .slide-content {\n    text-align: center;\n    color: #fff;\n    z-index: 2;\n  }\n\n  \/* Standard-Schriftgr\u00f6\u00dfe f\u00fcr gr\u00f6\u00dfere Bildschirme *\/\n.slide-content h1 {\n    font-size: 3rem; \/* Vorher war es 3rem *\/\n    margin-bottom: 20px;\n    color: #fff;\n}\n\n  .cta-button {\n    display: inline-block;\n    border: 1px solid #fff;\n    padding: 15px 30px;\n    color: #fff !important;\n    text-decoration: none;\n    font-size: 1.3rem;\n    font-weight: 400;\n    letter-spacing: 1.1px;\n    text-transform: uppercase;\n    transition: background 0.3s;\n  }\n\n  .cta-button:hover {\n    background: #fff;\n    color: #000 !important;\n  }\n\n  .progress-bar-container {\n    position: absolute;\n    bottom: 100px;\n    width: 100%;\n    display: flex;\n    justify-content: space-around;\n  }\n\n  .progress-bar {\n    width: 30%;\n    height: 5px;\n    background: lightgray;\n    position: relative;\n  }\n\n  .progress-bar.active::after {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    background: #d1392c;\n    animation: progressAnimation 6s linear;\n  }\n\n  @keyframes progressAnimation {\n    from {\n      width: 0;\n    }\n    to {\n      width: 100%;\n    }\n  }\n\n  .slide-navigation {\n    position: absolute;\n    bottom: 40px;\n    width: 100%;\n    display: flex;\n    justify-content: space-around;\n    padding: 10px;\n    hyphens: auto;\n  }\n\n  .slide-navigation button {\n    cursor: pointer;\n    border: none;\n    background: none;\n    padding: 10px;\n    font-size: 24px;\n    font-weight: 600;\n    color: #fff;\n  }\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 1023px) {\n    .slide-content h1 {\n        font-size: 2.75rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 768px) {\n    .slide-content h1 {\n        font-size: 2.5rem;\n    }\n  \t.slide-navigation button {\n      font-size: 22px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 692px) {\n    .slide-content h1 {\n        font-size: 2.25rem;\n    }\n  \t.slide-navigation button {\n      font-size: 20px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 500px) {\n    .slide-content h1 {\n        font-size: 2rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 420px) {\n    .slide-content h1 {\n        font-size: 1.75rem;\n    }\n  \t.slide-navigation button {\n      font-size: 18px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 379px) {\n\t.slide-navigation {\n      \tbottom: 20px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 355px) {\n    .slide-content h1 {\n        font-size: 1.5rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 300px) {\n    .slide-content h1 {\n        font-size: 1.4rem;\n    }\n  \t.slide-navigation button {\n      font-size: 16px;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 270px) {\n    .slide-content h1 {\n        font-size: 1rem;\n    }\n}\n\n\/* Kleinere Schriftgr\u00f6\u00dfe f\u00fcr mobile Ger\u00e4te *\/\n@media (max-width: 239px) {\n\t.progress-bar-container {\n      bottom: 130px;\n    }\n}\n\n<\/style>\n\n<script>\n  let currentIndex = 0;\n  const slides = document.querySelectorAll('.slide');\n  const progressBars = document.querySelectorAll('.progress-bar');\n  const slider = document.querySelector('.slider');\n  const buttons = document.querySelectorAll('.slide-navigation button');\n  const totalSlides = slides.length;\n  let autoSlideInterval;\n\n  function updateSlide(index) {\n    slider.style.transition = 'transform 1s ease-in-out';\n    slider.style.transform = `translateX(-${index * 100}%)`;\n    progressBars.forEach((bar, i) => {\n      if (i === index % (totalSlides - 1)) {\n        bar.classList.add('active');\n      } else {\n        bar.classList.remove('active');\n      }\n    });\n  }\n\n  buttons.forEach((button, index) => {\n    button.addEventListener('click', () => {\n      currentIndex = index;\n      updateSlide(currentIndex);\n      resetAutoSlide();\n    });\n  });\n\n  function autoSlide() {\n    currentIndex++;\n    if (currentIndex === totalSlides) {\n      slider.style.transition = 'none';\n      currentIndex = 0;\n      slider.style.transform = `translateX(0)`;\n      resetProgressBars();\n      setTimeout(() => {\n        slider.style.transition = 'transform 1s ease-in-out';\n        currentIndex++;\n        updateSlide(currentIndex);\n      }, 50);\n    } else {\n      updateSlide(currentIndex);\n    }\n  }\n\n  function resetProgressBars() {\n    progressBars.forEach(bar => {\n      bar.classList.remove('active');\n    });\n    progressBars[0].classList.add('active');\n  }\n\n  function resetAutoSlide() {\n    clearInterval(autoSlideInterval);\n    autoSlideInterval = setInterval(() => {\n      autoSlide();\n    }, 6000); \/\/ Set to 6000ms to match the progress bar animation duration\n  }\n\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    progressBars[currentIndex].classList.add('active');\n    autoSlideInterval = setInterval(() => {\n      autoSlide();\n    }, 6000); \/\/ Set to 6000ms to match the progress bar animation duration\n  });\n<\/script>\n\n\n\n<\/div><div class=\"bde-div-14-205 bde-div\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-14-206 bde-text\">\nThis is a basic text element.\n<\/div>\n<\/div><\/div>\n<\/section>","protected":false},"excerpt":{"rendered":"<p>Ihr Zuhause derTr\u00e4ume \u2013 nachhaltig undzukunftssicher bauen Angebot einholen Ihr Flachdach sanieren \u2013langlebig, robustund wetterfest Mehr erfahren Traum-Pool gestalten \u2013Sommer neu erleben Jetzt planen Ihr Zuhause derTr\u00e4ume \u2013 nachhaltig undzukunftssicher bauen Mehr erfahren Hausbau Flachdachsanierung Poolbau This is a basic text element. Ihr Zuhause derTr\u00e4ume \u2013 nachhaltig undzukunftssicher bauen Angebot einholen Ihr Flachdach sanieren \u2013langlebig, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-14","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/pages\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":197,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/pages\/14\/revisions"}],"predecessor-version":[{"id":233,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/pages\/14\/revisions\/233"}],"wp:attachment":[{"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/magu-swiss.ch\/it\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}