.elementor-135 .elementor-element.elementor-element-6c2c6c1a{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-135 .elementor-element.elementor-element-6c2c6c1a:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-6c2c6c1a > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sanierungsheldin.de/wp-content/uploads/2025/09/AdobeStock_672122236-scaled.jpeg");background-position:top center;background-repeat:no-repeat;background-size:cover;}.elementor-135 .elementor-element.elementor-element-72e38c5c{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-135 .elementor-element.elementor-element-55b610a2{--display:flex;--gap:0px 20px;--row-gap:0px;--column-gap:20px;}.elementor-135 .elementor-element.elementor-element-7c057ca7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-135 .elementor-element.elementor-element-7c057ca7{color:var( --e-global-color-sk_color_2 );font-size:36px;font-weight:900;line-height:39px;}.elementor-135 .elementor-element.elementor-element-43849d4c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-135 .elementor-element.elementor-element-43849d4c:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-43849d4c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF24;}.elementor-135 .elementor-element.elementor-element-2ca6e7af{--display:flex;--gap:0px 040px;--row-gap:0px;--column-gap:040px;}.elementor-135 .elementor-element.elementor-element-3aa531a2{--display:grid;--e-con-grid-template-columns:1fr 1fr;--e-con-grid-template-rows:repeat(1, 1fr);--gap:0px 0px;--row-gap:0px;--column-gap:0px;--grid-auto-flow:row;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-71f3f156{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overflow:hidden;--border-radius:15px 15px 15px 15px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-348a8edf > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;border-style:solid;border-radius:15px 15px 15px 15px;}.elementor-135 .elementor-element.elementor-element-348a8edf .elementor-wrapper{--video-aspect-ratio:1.77777;}.elementor-135 .elementor-element.elementor-element-79c326e0{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-135 .elementor-element.elementor-element-71bebaa0 .elementor-heading-title{font-size:20px;}.elementor-135 .elementor-element.elementor-element-71bebaa0.elementor-widget-heading .elementor-heading-title, .elementor-135 .elementor-element.elementor-element-71bebaa0.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:var( --e-global-color-accent );}.elementor-135 .elementor-element.elementor-element-1011aec4{color:var( --e-global-color-sk_color_2 );}.elementor-135 .elementor-element.elementor-element-7d229d6f{--display:flex;}.elementor-135 .elementor-element.elementor-element-78b1d194{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0;}.elementor-135 .elementor-element.elementor-element-78b1d194:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-78b1d194 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url("https://sanierungsheldin.de/wp-content/uploads/2025/09/AdobeStock_672122236-scaled.jpeg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-135 .elementor-element.elementor-element-78b1d194::before, .elementor-135 .elementor-element.elementor-element-78b1d194 > .elementor-background-video-container::before, .elementor-135 .elementor-element.elementor-element-78b1d194 > .e-con-inner > .elementor-background-video-container::before, .elementor-135 .elementor-element.elementor-element-78b1d194 > .elementor-background-slideshow::before, .elementor-135 .elementor-element.elementor-element-78b1d194 > .e-con-inner > .elementor-background-slideshow::before, .elementor-135 .elementor-element.elementor-element-78b1d194 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-secondary );--background-overlay:'';}.elementor-135 .elementor-element.elementor-element-1230093c{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-5f69b44e{--spacer-size:50px;}.elementor-135 .elementor-element.elementor-element-3bbb5b27 > .elementor-widget-container{margin:0px 0px -10px 0px;padding:0px 0px 0px 0px;}.elementor-135 .elementor-element.elementor-element-3bbb5b27{text-align:center;color:var( --e-global-color-sk_color_1 );font-family:"Roboto", Sans-serif;font-size:74px;font-weight:500;}.elementor-135 .elementor-element.elementor-element-5b5243a5{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-5b5243a5.e-con{--flex-grow:0;--flex-shrink:1;}.elementor-135 .elementor-element.elementor-element-5dee20d9{text-align:center;color:var( --e-global-color-sk_color_1 );font-family:"Roboto", Sans-serif;font-size:30px;font-weight:400;}.elementor-135 .elementor-element.elementor-element-d53b794{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-135 .elementor-element.elementor-element-32a52e20 > .elementor-widget-container{background-color:var( --e-global-color-primary );padding:5px 20px 5px 20px;border-radius:5px 5px 5px 5px;}.elementor-135 .elementor-element.elementor-element-32a52e20{text-align:center;color:#FFFFFF;}.elementor-135 .elementor-element.elementor-element-35c18da4{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-422ae20a{--spacer-size:50px;}.elementor-135 .elementor-element.elementor-element-3262601b{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-135 .elementor-element.elementor-element-c14fdc{--display:flex;}.elementor-135 .elementor-element.elementor-element-c14fdc.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-135 .elementor-element.elementor-element-7e6af206{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:10px 10px 10px 10px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-2fbd6174{--display:flex;--border-radius:10px 10px 10px 10px;--padding-top:2em;--padding-bottom:2em;--padding-left:2em;--padding-right:2em;}.elementor-135 .elementor-element.elementor-element-2fbd6174:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-2fbd6174 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );}.elementor-135 .elementor-element.elementor-element-5376ed20.elementor-widget-heading .elementor-heading-title, .elementor-135 .elementor-element.elementor-element-5376ed20.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:var( --e-global-color-sk_color_2 );}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:last-child){padding-block-end:calc(2px/2);}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-items:not(.elementor-inline-items) .elementor-icon-list-item:not(:first-child){margin-block-start:calc(2px/2);}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item{margin-inline:calc(2px/2);}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-items.elementor-inline-items{margin-inline:calc(-2px/2);}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:after{inset-inline-end:calc(-2px/2);}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-icon i{color:#FFFFFF;transition:color 0.3s;}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-icon svg{fill:#FFFFFF;transition:fill 0.3s;}.elementor-135 .elementor-element.elementor-element-18c9444c{--e-icon-list-icon-size:25px;--icon-vertical-offset:0px;}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-item > .elementor-icon-list-text, .elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-item > a{font-size:23px;font-weight:bold;}.elementor-135 .elementor-element.elementor-element-18c9444c .elementor-icon-list-text{color:var( --e-global-color-sk_color_2 );transition:color 0.3s;}.elementor-135 .elementor-element.elementor-element-884614 .elementor-button{background-color:#0080B6;font-size:23px;}.elementor-135 .elementor-element.elementor-element-884614{width:100%;max-width:100%;}.elementor-135 .elementor-element.elementor-element-884614.elementor-element{--align-self:stretch;--flex-grow:1;--flex-shrink:0;}.elementor-135 .elementor-element.elementor-element-1cabc752{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.5;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:040px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-135 .elementor-element.elementor-element-1cabc752:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-1cabc752 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sanierungsheldin.de/wp-content/uploads/2025/09/AdobeStock_672122236-scaled.jpeg");background-position:bottom right;background-repeat:no-repeat;background-size:cover;}.elementor-135 .elementor-element.elementor-element-1cabc752::before, .elementor-135 .elementor-element.elementor-element-1cabc752 > .elementor-background-video-container::before, .elementor-135 .elementor-element.elementor-element-1cabc752 > .e-con-inner > .elementor-background-video-container::before, .elementor-135 .elementor-element.elementor-element-1cabc752 > .elementor-background-slideshow::before, .elementor-135 .elementor-element.elementor-element-1cabc752 > .e-con-inner > .elementor-background-slideshow::before, .elementor-135 .elementor-element.elementor-element-1cabc752 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-135 .elementor-element.elementor-element-1cabc752 > .elementor-shape-bottom svg, .elementor-135 .elementor-element.elementor-element-1cabc752 > .e-con-inner > .elementor-shape-bottom svg{width:calc(134% + 1.3px);height:150px;}.elementor-135 .elementor-element.elementor-element-7747df7f{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--border-radius:30px 30px 30px 30px;box-shadow:0px 0px 40px 5px rgba(0,0,0,0.5);--padding-top:40px;--padding-bottom:40px;--padding-left:20px;--padding-right:20px;}.elementor-135 .elementor-element.elementor-element-7747df7f:not(.elementor-motion-effects-element-type-background), .elementor-135 .elementor-element.elementor-element-7747df7f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFFE3;}.elementor-135 .elementor-element.elementor-element-7747df7f.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-135 .elementor-element.elementor-element-550e7320 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-135 .elementor-element.elementor-element-550e7320{text-align:center;}.elementor-135 .elementor-element.elementor-element-550e7320 .elementor-heading-title{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-135 .elementor-element.elementor-element-550e7320.elementor-widget-heading .elementor-heading-title, .elementor-135 .elementor-element.elementor-element-550e7320.elementor-widget-heading .elementor-heading-title.elementor-heading-title a{color:var( --e-global-color-accent );}.elementor-135 .elementor-element.elementor-element-7283b025{text-align:center;color:var( --e-global-color-primary );font-family:"Roboto", Sans-serif;font-size:52px;font-weight:600;line-height:0.9em;}.elementor-135 .elementor-element.elementor-element-603c4d44 > .elementor-widget-container{margin:025px 0px 25px 0px;}.elementor-135 .elementor-element.elementor-element-603c4d44{text-align:center;color:var( --e-global-color-secondary );font-family:"Roboto", Sans-serif;font-size:27px;font-weight:400;line-height:25px;}.elementor-135 .elementor-element.elementor-element-521fc725 > .elementor-widget-container{background-color:#00000000;margin:0px 0px 0px 0px;padding:0px 10px 0px 10px;border-radius:5px 5px 5px 5px;}.elementor-135 .elementor-element.elementor-element-521fc725{font-family:"Roboto", Sans-serif;font-size:12px;font-weight:400;}.elementor-135 .elementor-element.elementor-element-22d249c1{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-135 .elementor-element.elementor-element-aef9137{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-135 .elementor-element.elementor-element-2198daf{--display:flex;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-135 .elementor-element.elementor-element-72e38c5c{--grid-auto-flow:row;}.elementor-135 .elementor-element.elementor-element-3aa531a2{--grid-auto-flow:row;}.elementor-135 .elementor-element.elementor-element-7747df7f{--margin-top:0px;--margin-bottom:0px;--margin-left:040px;--margin-right:40px;}.elementor-135 .elementor-element.elementor-element-550e7320 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}}@media(max-width:767px){.elementor-135 .elementor-element.elementor-element-72e38c5c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-135 .elementor-element.elementor-element-3aa531a2{--e-con-grid-template-columns:1;--grid-auto-flow:row;}.elementor-135 .elementor-element.elementor-element-1cabc752{--padding-top:20px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-135 .elementor-element.elementor-element-7747df7f{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:30px;--padding-right:30px;}.elementor-135 .elementor-element.elementor-element-550e7320 > .elementor-widget-container{margin:-10px -10px -10px -10px;}.elementor-135 .elementor-element.elementor-element-550e7320 .elementor-heading-title{font-size:var( --e-global-typography-secondary-font-size );}.elementor-135 .elementor-element.elementor-element-521fc725 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-135 .elementor-element.elementor-element-521fc725{font-size:10px;}}@media(min-width:768px){.elementor-135 .elementor-element.elementor-element-78b1d194{--content-width:100%;}.elementor-135 .elementor-element.elementor-element-d53b794{--width:100%;}.elementor-135 .elementor-element.elementor-element-c14fdc{--width:59.13%;}.elementor-135 .elementor-element.elementor-element-7747df7f{--width:40%;}.elementor-135 .elementor-element.elementor-element-22d249c1{--width:50%;}}@media(max-width:1024px) and (min-width:768px){.elementor-135 .elementor-element.elementor-element-7747df7f{--width:90%;}}/* Start custom CSS for container, class: .elementor-element-3aa531a2 */.hero-video-text-wrapper iframe {
  pointer-events: none; /* block iframe click until we handle it */
}

.hero-video-text-wrapper.clicked {
    grid-template-columns: 1fr;
}

.hero-video-text-wrapper.clicked iframe {
  pointer-events: auto; /* allow clicks to reach iframe after first click */
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-43849d4c */.hero-registration {
    backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-7e6af206 */.glassmorph {
background: rgba(255, 255, 255, 0.2);

box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-2198daf */<!-- FASSADEN-CHECK – Zum Durchklicken (für WordPress HTML-Block) -->
<div id="fassaden-check-wrapper">
  <div class="fassaden-check-card">
    <h2>Welche Fassade passt zu mir?</h2>
    <p class="fassaden-intro">
      Beantworten Sie ein paar Fragen – am Ende sehen Sie, ob <strong>Prefa</strong>, 
      <strong>Schiefer</strong> oder <strong>Holzschalung</strong> am besten zu Ihnen passt.
    </p>

    <!-- Fortschrittsanzeige -->
    <div class="fassaden-progress">
      <div class="fassaden-progress-bar" id="fassaden-progress-bar"></div>
    </div>
    <p class="fassaden-progress-text" id="fassaden-progress-text">Frage 1 von 5</p>

    <!-- Schritt 1 -->
    <div class="fassaden-step active" data-step="1">
      <h3>1. Wie wirkt Ihr Haus vom Stil her?</h3>
      <div class="fassaden-options">
        <button type="button" class="fassaden-option" data-material="prefa">
          🏢 Modern & pur
        </button>
        <button type="button" class="fassaden-option" data-material="schiefer">
          🏛 Klassisch & elegant
        </button>
        <button type="button" class="fassaden-option" data-material="holz">
          🏡 Natürlich & gemütlich
        </button>
      </div>
    </div>

    <!-- Schritt 2 -->
    <div class="fassaden-step" data-step="2">
      <h3>2. Wie wichtig ist Ihnen der Pflegeaufwand?</h3>
      <div class="fassaden-options">
        <button type="button" class="fassaden-option" data-material="prefa,schiefer">
          🛡️ Möglichst wenig Pflege, sehr langlebig
        </button>
        <button type="button" class="fassaden-option" data-material="holz">
          🌿 Natürliches Material, Pflege ist für mich okay
        </button>
      </div>
    </div>

    <!-- Schritt 3 -->
    <div class="fassaden-step" data-step="3">
      <h3>3. Welche Optik spricht Sie am meisten an?</h3>
      <div class="fassaden-options">
        <button type="button" class="fassaden-option" data-material="prefa">
          🎨 Klare Linien, einheitliche Farben (modern)
        </button>
        <button type="button" class="fassaden-option" data-material="schiefer">
          ⛰️ Natürliche Struktur & variierende Töne
        </button>
        <button type="button" class="fassaden-option" data-material="holz">
          🌲 Warmes Holz mit sichtbarer Maserung
        </button>
      </div>
    </div>

    <!-- Schritt 4 -->
    <div class="fassaden-step" data-step="4">
      <h3>4. Wie schätzen Sie Ihr Budget ein?</h3>
      <div class="fassaden-options">
        <button type="button" class="fassaden-option" data-material="schiefer">
          💰 Ich investiere gern in eine sehr hochwertige, langlebige Lösung
        </button>
        <button type="button" class="fassaden-option" data-material="prefa">
          💳 Modern & langlebig, aber trotzdem im Rahmen
        </button>
        <button type="button" class="fassaden-option" data-material="holz">
          🪵 Natürlich & flexibel, Kosten im Auge behalten
        </button>
      </div>
    </div>

    <!-- Schritt 5 -->
    <div class="fassaden-step" data-step="5">
      <h3>5. Wie sind Lage & Witterung bei Ihnen?</h3>
      <div class="fassaden-options">
        <button type="button" class="fassaden-option" data-material="prefa,schiefer">
          🌧️ Viel Regen/Wind – es muss richtig robust sein
        </button>
        <button type="button" class="fassaden-option" data-material="holz">
          ☀️ Eher sonnig, geschützte Lage
        </button>
      </div>
    </div>

    <!-- Ergebnis -->
    <div id="fassaden-result" class="fassaden-result" style="display:none;">
      <h3>Ihr Ergebnis</h3>
      <p id="fassaden-result-text"></p>

      <div class="fassaden-result-material" id="fassaden-result-prefa" style="display:none;">
        <h4>Empfehlung: Prefa-Fassade</h4>
        <p>
          Prefa ist ideal für Sie, wenn Sie eine <strong>moderne, sehr langlebige und 
          pflegeleichte Fassade</strong> möchten. Perfekt bei starker Witterung, 
          vielen Farbvarianten und klarer Optik.
        </p>
      </div>

      <div class="fassaden-result-material" id="fassaden-result-schiefer" style="display:none;">
        <h4>Empfehlung: Schiefer-Fassade</h4>
        <p>
          Schiefer passt zu Ihnen, wenn Sie eine <strong>zeitlose, elegante und 
          natürliche Fassade</strong> schätzen. Sehr langlebig, hochwertig und 
          besonders charakterstark – jede Fläche ist ein Unikat.
        </p>
      </div>

      <div class="fassaden-result-material" id="fassaden-result-holz" style="display:none;">
        <h4>Empfehlung: Holzschalung</h4>
        <p>
          Holzschalung ist richtig für Sie, wenn Sie eine <strong>warme, natürliche 
          Optik</strong> lieben und bereit sind, etwas Pflege zu investieren. 
          Ideal für gemütliche, wohnliche Fassaden.
        </p>
      </div>

      <div class="fassaden-result-material" id="fassaden-result-multi" style="display:none;">
        <h4>Empfehlung: Mehrere Optionen passen zu Ihnen</h4>
        <p>
          Nach Ihren Antworten passen gleich mehrere Fassadenarten gut zu Ihnen. 
          <strong>Prefa</strong> bietet moderne Robustheit, <strong>Schiefer</strong> 
          klassische Eleganz, und <strong>Holzschalung</strong> natürliche Wärme. 
          Im persönlichen Gespräch finden wir heraus, was wirklich perfekt passt.
        </p>
      </div>

      <button type="button" id="fassaden-restart" class="fassaden-restart">
        Test neu starten
      </button>
    </div>
  </div>
</div>

<style>
  #fassaden-check-wrapper {
    max-width: 700px;
    margin: 2rem auto;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  }

  .fassaden-check-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  }

  .fassaden-check-card h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 1.7rem;
    font-weight: 700;
  }

  .fassaden-intro {
    margin-bottom: 1.5rem;
    color: #555;
    font-size: 0.95rem;
  }

  .fassaden-progress {
    width: 100%;
    height: 6px;
    background: #eee;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 0.5rem;
  }

  .fassaden-progress-bar {
    height: 100%;
    width: 20%;
    background: #333;
    transition: width 0.3s ease;
  }

  .fassaden-progress-text {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
  }

  .fassaden-step {
    display: none;
  }

  .fassaden-step.active {
    display: block;
  }

  .fassaden-step h3 {
    margin-bottom: 0.75rem;
    font-size: 1.15rem;
  }

  .fassaden-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  @media (min-width: 600px) {
    .fassaden-options {
      grid-template-columns: 1fr 1fr;
    }
  }

  .fassaden-option {
    border: 1px solid #ddd;
    border-radius: 999px;
    padding: 0.6rem 0.9rem;
    background: #fafafa;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
    white-space: normal;
  }

  .fassaden-option:hover {
    background: #f0f0f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
  }

  .fassaden-result {
    margin-top: 1rem;
  }

  .fassaden-result h3 {
    margin-bottom: 0.75rem;
  }

  .fassaden-result-material {
    background: #f8f8f8;
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin-bottom: 0.75rem;
  }

  .fassaden-restart {
    margin-top: 0.5rem;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-size: 0.95rem;
    background: #333;
    color: #fff;
  }

  .fassaden-restart:hover {
    opacity: 0.9;
  }
</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var steps = document.querySelectorAll(".fassaden-step");
    var totalSteps = steps.length;
    var currentStep = 1;

    var scores = {
      prefa: 0,
      schiefer: 0,
      holz: 0
    };

    var progressBar = document.getElementById("fassaden-progress-bar");
    var progressText = document.getElementById("fassaden-progress-text");
    var resultContainer = document.getElementById("fassaden-result");
    var resultText = document.getElementById("fassaden-result-text");

    var resultPrefa = document.getElementById("fassaden-result-prefa");
    var resultSchiefer = document.getElementById("fassaden-result-schiefer");
    var resultHolz = document.getElementById("fassaden-result-holz");
    var resultMulti = document.getElementById("fassaden-result-multi");
    var restartBtn = document.getElementById("fassaden-restart");

    function updateProgress() {
      var percent = (currentStep / totalSteps) * 100;
      progressBar.style.width = percent + "%";
      progressText.textContent = "Frage " + currentStep + " von " + totalSteps;
    }

    function showStep(stepNumber) {
      steps.forEach(function (step) {
        if (parseInt(step.getAttribute("data-step"), 10) === stepNumber) {
          step.classList.add("active");
        } else {
          step.classList.remove("active");
        }
      });
      updateProgress();
    }

    function showResult() {
      // Schritt-Container ausblenden
      steps.forEach(function (step) {
        step.classList.remove("active");
      });

      // Ergebnis ausrechnen
      var maxScore = Math.max(scores.prefa, scores.schiefer, scores.holz);
      var winners = [];
      for (var key in scores) {
        if (scores.hasOwnProperty(key) && scores[key] === maxScore && maxScore > 0) {
          winners.push(key);
        }
      }

      // Alle Ergebnisboxen verstecken
      resultPrefa.style.display = "none";
      resultSchiefer.style.display = "none";
      resultHolz.style.display = "none";
      resultMulti.style.display = "none";

      if (winners.length === 1) {
        var material = winners[0];
        if (material === "prefa") {
          resultText.textContent = "Auf Basis Ihrer Antworten passt eine Prefa-Fassade besonders gut zu Ihnen.";
          resultPrefa.style.display = "block";
        } else if (material === "schiefer") {
          resultText.textContent = "Auf Basis Ihrer Antworten passt eine Schiefer-Fassade besonders gut zu Ihnen.";
          resultSchiefer.style.display = "block";
        } else if (material === "holz") {
          resultText.textContent = "Auf Basis Ihrer Antworten passt eine Holzschalung besonders gut zu Ihnen.";
          resultHolz.style.display = "block";
        }
      } else {
        // Mehrere gleich gut passend
        resultText.textContent = "Mehrere Fassadenarten passen sehr gut zu Ihren Antworten.";
        resultMulti.style.display = "block";
      }

      resultContainer.style.display = "block";
      progressBar.style.width = "100%";
      progressText.textContent = "Fertig";
    }

    function resetQuiz() {
      scores.prefa = 0;
      scores.schiefer = 0;
      scores.holz = 0;
      currentStep = 1;
      resultContainer.style.display = "none";
      showStep(currentStep);
    }

    // Klick-Events für Optionen
    var optionButtons = document.querySelectorAll(".fassaden-option");
    optionButtons.forEach(function (btn) {
      btn.addEventListener("click", function () {
        var materials = btn.getAttribute("data-material").split(",");
        materials.forEach(function (matRaw) {
          var mat = matRaw.trim();
          if (mat && scores.hasOwnProperty(mat)) {
            scores[mat] += 1;
          }
        });

        if (currentStep < totalSteps) {
          currentStep += 1;
          showStep(currentStep);
        } else {
          showResult();
        }
      });
    });

    restartBtn.addEventListener("click", function () {
      resetQuiz();
    });

    // Initial anzeigen
    showStep(currentStep);
  });
</script>/* End custom CSS */