O:27:"Pimcore\Model\Document\Page":33:{s:8:" * title";s:10:"bekore_spk";s:14:" * description";s:0:"";s:11:" * metaData";a:0:{}s:7:" * type";s:4:"page";s:12:" * prettyUrl";N;s:17:" * targetGroupIds";s:0:"";s:9:" * module";s:0:"";s:13:" * controller";s:57:"IDEALContentBundle\Controller\VKController::defaultAction";s:9:" * action";s:0:"";s:11:" * template";s:33:"IDEALContentBundle::dkb.html.twig";s:12:" * editables";a:38:{s:10:"OG_ENABLED";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:10:"OG_ENABLED";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:7:"OG_TYPE";O:38:"Pimcore\Model\Document\Editable\Select":6:{s:4:"text";s:7:"product";s:7:" * name";s:7:"OG_TYPE";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:8:"OG_TITLE";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:8:"OG_TITLE";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:14:"OG_DESCRIPTION";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:14:"OG_DESCRIPTION";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:8:"OG_IMAGE";O:37:"Pimcore\Model\Document\Editable\Image":14:{s:2:"id";N;s:3:"alt";s:0:"";s:11:"cropPercent";N;s:9:"cropWidth";N;s:10:"cropHeight";N;s:7:"cropTop";N;s:8:"cropLeft";N;s:8:"hotspots";N;s:6:"marker";N;s:7:" * name";s:8:"OG_IMAGE";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:11:"seo_favicon";O:37:"Pimcore\Model\Document\Editable\Image":14:{s:2:"id";N;s:3:"alt";s:0:"";s:11:"cropPercent";N;s:9:"cropWidth";N;s:10:"cropHeight";N;s:7:"cropTop";N;s:8:"cropLeft";N;s:8:"hotspots";N;s:6:"marker";N;s:7:" * name";s:11:"seo_favicon";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:11:"seo_nocache";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:11:"seo_nocache";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:11:"seo_noindex";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:11:"seo_noindex";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:24:"seo_google_verififcation";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:24:"seo_google_verififcation";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:5:"image";O:37:"Pimcore\Model\Document\Editable\Image":14:{s:2:"id";N;s:3:"alt";s:0:"";s:11:"cropPercent";N;s:9:"cropWidth";N;s:10:"cropHeight";N;s:7:"cropTop";N;s:8:"cropLeft";N;s:8:"hotspots";N;s:6:"marker";N;s:7:" * name";s:5:"image";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:18:"stage-headline-top";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:18:"stage-headline-top";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:18:"stage-headline-sub";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:18:"stage-headline-sub";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:4:"menu";O:41:"Pimcore\Model\Document\Editable\Areablock":9:{s:7:"indices";a:0:{}s:7:"current";i:0;s:12:"currentIndex";N;s:15:" * blockStarted";N;s:7:" * name";s:4:"menu";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:7:"content";O:41:"Pimcore\Model\Document\Editable\Areablock":9:{s:7:"indices";a:1:{i:0;a:3:{s:3:"key";s:1:"1";s:4:"type";s:7:"content";s:6:"hidden";b:0;}}s:7:"current";i:0;s:12:"currentIndex";N;s:15:" * blockStarted";N;s:7:" * name";s:7:"content";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:23:"content:1.iframe_anchor";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:23:"content:1.iframe_anchor";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:20:"content:1.iframe_url";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:20:"content:1.iframe_url";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:19:"content:1.iframe_os";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:19:"content:1.iframe_os";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:27:"content:1.iframe_autoresize";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:27:"content:1.iframe_autoresize";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:22:"content:1.iframe_width";O:39:"Pimcore\Model\Document\Editable\Numeric":6:{s:6:"number";s:0:"";s:7:" * name";s:22:"content:1.iframe_width";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:23:"content:1.iframe_height";O:39:"Pimcore\Model\Document\Editable\Numeric":6:{s:6:"number";s:0:"";s:7:" * name";s:23:"content:1.iframe_height";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:28:"content:1.iframe_transparent";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:28:"content:1.iframe_transparent";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:22:"content:1.iframe_style";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:22:"content:1.iframe_style";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:31:"content:1.iframe_toggle_enabled";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:31:"content:1.iframe_toggle_enabled";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:28:"content:1.iframe_toggle_text";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:28:"content:1.iframe_toggle_text";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:31:"content:1.iframe_toggle_default";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:31:"content:1.iframe_toggle_default";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:22:"content:1.iframe_title";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:22:"content:1.iframe_title";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:22:"content:1.iframe_intro";O:39:"Pimcore\Model\Document\Editable\Wysiwyg":6:{s:4:"text";s:0:"";s:7:" * name";s:22:"content:1.iframe_intro";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:19:"content:1.custom_id";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:19:"content:1.custom_id";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:29:"content:1.custom_include_file";O:38:"Pimcore\Model\Document\Editable\Select":6:{s:4:"text";N;s:7:" * name";s:29:"content:1.custom_include_file";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:33:"content:1.content-center-headline";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:33:"content:1.content-center-headline";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:30:"content:1.content-header_style";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:30:"content:1.content-header_style";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:20:"content:1.content-id";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:20:"content:1.content-id";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:23:"content:1.content_style";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:23:"content:1.content_style";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:23:"content:1.content_image";O:38:"Pimcore\Model\Document\Editable\Select":6:{s:4:"text";N;s:7:" * name";s:23:"content:1.content_image";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:20:"content:1.content-bg";O:40:"Pimcore\Model\Document\Editable\Checkbox":6:{s:5:"value";b:0;s:7:" * name";s:20:"content:1.content-bg";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:26:"content:1.content-bg-style";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:26:"content:1.content-bg-style";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:23:"content:1.content-title";O:37:"Pimcore\Model\Document\Editable\Input":6:{s:4:"text";s:0:"";s:7:" * name";s:23:"content:1.content-title";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}s:25:"content:1.content-content";O:39:"Pimcore\Model\Document\Editable\Wysiwyg":6:{s:4:"text";s:12843:"<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" />
<style type="text/css">/* Sparkasse Brand Colors */
    :root {
      --spk-red: #ff0000;
      --spk-red-dark: #e00008;
      --spk-gray-bg: #f2f2f2;
      --spk-text: #333333;
      --spk-light-gray: #dfdfdf;
      --spk-white: #ffffff;
    }

    html { box-sizing: border-box; }
    *, *:before, *:after { box-sizing: inherit; }

    body {
      margin: 0; padding: 0;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      background: var(--spk-gray-bg);
      color: var(--spk-text);
      line-height: 1.5;
    }

    h2, h3 { font-weight: bold; color: var(--spk-text); margin-top: 0; }

    #pagecontainer { width: 100%; padding: 40px 20px; }

    #rechner-inner {
      background: var(--spk-white); 
      padding: 30px; 
      border-radius: 4px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      max-width: 800px; 
      margin: auto;
    }

    .progress-bar { 
      width: 100%; 
      background: var(--spk-light-gray); 
      height: 6px; 
      border-radius: 3px; 
      margin-bottom: 30px; 
      overflow: hidden; 
    }
    .progress { 
      height: 100%; 
      width: 0%; 
      background: var(--spk-red); 
      transition: width 0.4s ease; 
    }

    .step { display: none; }
    .step.active { display: block; animation: fadeIn 0.4s; }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* Options Styling */
    .option { 
      margin: 12px 0; 
      border: 1px solid var(--spk-light-gray);
      border-radius: 4px;
      transition: all 0.2s;
      position: relative;
    }
    .option:hover { border-color: var(--spk-red); background: #fafafa; }
    
    /* Label dehnt sich über die ganze Box aus */
    .option label { 
      display: flex;
      align-items: center;
      padding: 15px;
      width: 100%;
      cursor: pointer;
      font-size: 18px;
    }

    .option input { 
      margin-right: 15px; 
      transform: scale(1.3);
      accent-color: var(--spk-red);
      cursor: pointer;
    }

    .option i { 
      margin-right: 15px; 
      color: var(--spk-red); 
      width: 25px;
      text-align: center;
      font-size: 1.2em;
    }

    /* Summary */
    .summary { 
      margin-top: 20px; 
      padding: 20px;
      background: var(--spk-gray-bg);
      border-radius: 4px;
    }
    .summary h3 { color: var(--spk-red); border-bottom: 2px solid var(--spk-red); padding-bottom: 10px; }
    .summary #selected-options p { 
      margin: 8px 0; 
      font-size: 0.95em; 
      border-bottom: 1px solid #ddd; 
      padding-bottom: 5px;
      display: flex;
      justify-content: space-between;
    }
    
    .summary .total-wrapper { margin-top: 20px; text-align: center; }
    .summary .total { 
      font-size: 2.2em; 
      font-weight: bold;
      color: var(--spk-red); 
      display: block;
    }

    /* Buttons */
    .buttons {
      margin-top: 30px; 
      display: flex; 
      justify-content: space-between; 
      gap: 15px; 
      flex-wrap: wrap;
    }
    
    button {
      font-family: inherit;
      font-size: 16px;
      padding: 12px 25px; 
      border-radius: 4px; 
      font-weight: bold; 
      cursor: pointer;
      transition: all 0.2s;
      border: none;
      flex: 1;
    }

    #nextBtn, #resultBtn { background: var(--spk-red); color: #fff; }
    #nextBtn:hover, #resultBtn:hover { background: var(--spk-red-dark); }

    #prevBtn, #resetBtn {
      background: #fff; 
      color: var(--spk-text);
      border: 1px solid var(--spk-light-gray);
    }
    #prevBtn:hover, #resetBtn:hover { background: var(--spk-gray-bg); }

    @media (max-width: 600px) {
      .buttons button { flex: 1 1 100%; }
    }
</style>
<div id="pagecontainer">
<div id="rechner-inner">
<div class="progress-bar">
<div class="progress" id="progress">&nbsp;</div>
</div>

<div class="container">
<h2>Bestattungskostenrechner</h2>
<!-- Step 1 -->

<div class="step active" id="step-1">
<h3>Bestattungsart wählen</h3>

<div class="option"><label for="feuerbestattung"><input data-label="Feuerbestattung" id="feuerbestattung" name="bestattungsart" onclick="filterGrabOptions(false)" type="radio" value="1300" /> Feuerbestattung </label></div>

<div class="option"><label for="erdbestattung"><input data-label="Erdbestattung" id="erdbestattung" name="bestattungsart" onclick="filterGrabOptions(true)" type="radio" value="3900" /> Erdbestattung </label></div>
</div>
<!-- Step 2 -->

<div class="step" id="step-2">
<h3>Grabstelle wählen</h3>

<div class="option grab-option" id="wahlgrab-option"><label for="wahlgrab"><input data-label="Wahlgrab" id="wahlgrab" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="2000" /> Wahlgrab </label></div>

<div class="option grab-option" id="reihengrab-option"><label for="reihengrab"><input data-label="Reihengrab" id="reihengrab" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="1000" /> Reihengrab </label></div>

<div class="option grab-option" id="anonym-option"><label for="anonym"><input data-label="Anonym" id="anonym" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="700" /> Anonym </label></div>

<div class="option grab-option" id="kolumbarium-option"><label for="kolumbarium"><input data-label="Kolumbarium" id="kolumbarium" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="2300" /> Kolumbarium </label></div>

<div class="option grab-option" id="seebestattung-option"><label for="seebestattung"><input data-label="Seebestattung" id="seebestattung" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="2300" /> Seebestattung </label></div>

<div class="option grab-option" id="baumbestattung-option"><label for="baumbestattung"><input data-label="Baumbestattung" id="baumbestattung" name="grabstelle" onclick="checkGrabsteinVisibility()" type="radio" value="2300" /> Baumbestattung </label></div>
</div>
<!-- Step 3 -->

<div class="step" id="step-3">
<h3>Umfang der Trauerfeier</h3>

<div class="option"><label for="familienkreis"><input data-label="Im engsten Familienkreis" id="familienkreis" name="trauerfeier" type="radio" value="200" /> Im engsten Familienkreis </label></div>

<div class="option"><label for="kleine-feier"><input data-label="Kleine Trauerfeier" id="kleine-feier" name="trauerfeier" type="radio" value="800" /> Kleine Trauerfeier </label></div>

<div class="option"><label for="grosse-feier"><input data-label="Große Trauerfeier" id="grosse-feier" name="trauerfeier" type="radio" value="1500" /> Große Trauerfeier </label></div>

<div class="option"><label for="keine-feier"><input data-label="Keine Trauerfeier" id="keine-feier" name="trauerfeier" type="radio" value="0" /> Keine Trauerfeier </label></div>
</div>
<!-- Step 4 -->

<div class="step" id="step-4">
<h3>Weitere Wünsche (Mehrfachwahl möglich)</h3>

<div class="option" id="grabstein-option"><label for="grabstein"><input data-label="Grabstein" id="grabstein" name="wunsch" type="checkbox" value="3000" /> Grabstein </label></div>

<div class="option"><label for="traueranzeige"><input data-label="Traueranzeige" id="traueranzeige" name="wunsch" type="checkbox" value="400" /> Traueranzeige </label></div>

<div class="option"><label for="blumenschmuck"><input data-label="Blumenschmuck" id="blumenschmuck" name="wunsch" type="checkbox" value="200" /> Blumenschmuck </label></div>

<div class="option"><label for="trauerredner"><input data-label="Trauerredner" id="trauerredner" name="wunsch" type="checkbox" value="400" /> Trauerredner </label></div>
</div>
<!-- Summary -->

<div class="summary" id="summary" style="display:none;">
<h3>Ihre Kostenschätzung</h3>

<div id="selected-options">&nbsp;</div>

<div class="total-wrapper">
<p>Voraussichtliche Gesamtkosten</p>
<span class="total">€</span></div>

<p style="margin-top:20px; font-size: 0.85em; color: #666; line-height: 1.4;">Hinweis: Dies ist eine unverbindliche Schätzung. Damit eine würdevolle Bestattung finanziell abgesichert ist, bietet die Berliner Sparkasse spezielle Vorsorgelösungen bis zu 15.000 € an.</p>
</div>
<!-- Buttons -->

<div class="buttons"><button id="prevBtn" onclick="prevStep()">Zurück</button><button id="nextBtn" onclick="nextStep()">Weiter</button><button id="resetBtn" onclick="resetForm()" style="display:none;">Neue Berechnung</button><button id="resultBtn" onclick="calculateTotal()" style="display:none;">Ergebnis anzeigen</button></div>
</div>
</div>
</div>
<script>
    let currentStep = 1;
    const steps = document.querySelectorAll('.step');
    const totalSteps = steps.length;

    function showStep(step) {
      steps.forEach((el, index) => {
        el.classList.remove('active');
        if (index + 1 === step) el.classList.add('active');
      });

      document.getElementById('prevBtn').style.visibility = step === 1 ? 'hidden' : 'visible';
      document.getElementById('nextBtn').style.display   = step === totalSteps ? 'none' : 'inline-block';
      document.getElementById('resultBtn').style.display = step === totalSteps ? 'inline-block' : 'none';
      document.getElementById('resetBtn').style.display  = 'none';

      updateProgressBar(step);
    }

    function nextStep() {
      // Validierung: Muss im aktuellen Step etwas gewählt sein? (Optional für Step 4)
      const currentStepEl = document.querySelector('.step.active');
      const choices = currentStepEl.querySelectorAll('input:checked');
      
      if (choices.length === 0 && currentStep < 4) { // In Step 4 sind 0 Wünsche erlaubt
          alert("Bitte treffen Sie eine Auswahl.");
          return;
      }

      if (currentStep < totalSteps) {
        currentStep++;
        showStep(currentStep);
      }
    }

    function prevStep() {
      if (currentStep > 1) {
        currentStep--;
        showStep(currentStep);
      }
    }

    function resetForm() {
      document.querySelectorAll('input').forEach(input => input.checked = false);
      currentStep = 1;
      showStep(currentStep);
      document.getElementById('summary').style.display = 'none';
      document.getElementById('prevBtn').style.display = 'inline-block';
    }

    function calculateTotal() {
      let total = 0;
      let selectedOptionsHtml = "";
      const selectedElements = document.querySelectorAll('input:checked');
      
      selectedElements.forEach(option => {
        const val = parseInt(option.value, 10);
        total += val;
        const label = option.getAttribute('data-label');
        selectedOptionsHtml += `<p><span>${label}</span> <span>${val.toLocaleString('de-DE')} &euro;</span></p>`;
      });

      document.getElementById('total').innerText = total.toLocaleString('de-DE');
      document.getElementById('selected-options').innerHTML = selectedOptionsHtml;
      document.getElementById('summary').style.display = 'block';
      
      steps.forEach(step => step.classList.remove('active'));
      document.getElementById('prevBtn').style.display = 'none';
      document.getElementById('nextBtn').style.display = 'none';
      document.getElementById('resultBtn').style.display = 'none';
      document.getElementById('resetBtn').style.display = 'inline-block';
      
      updateProgressBar(totalSteps);
    }

    function filterGrabOptions(isErdbestattung) {
      const hiddenOptions = ['kolumbarium-option', 'seebestattung-option', 'baumbestattung-option'];
      hiddenOptions.forEach(id => {
        const el = document.getElementById(id);
        if (el) el.style.display = isErdbestattung ? 'none' : 'block';
      });
      
      if(isErdbestattung) {
          hiddenOptions.forEach(id => {
              const input = document.querySelector(`#${id} input`);
              if(input) input.checked = false;
          });
      }
      checkGrabsteinVisibility();
    }

    function checkGrabsteinVisibility() {
      const grabsteinOption = document.getElementById('grabstein-option');
      const wahl = document.getElementById('wahlgrab')?.checked;
      const reihen = document.getElementById('reihengrab')?.checked;
      
      if (grabsteinOption) {
        grabsteinOption.style.display = (wahl || reihen) ? 'block' : 'none';
      }
      
      if (!(wahl || reihen)) {
          const gsInput = document.getElementById('grabstein');
          if(gsInput) gsInput.checked = false;
      }
    }

    function updateProgressBar(step) {
      const percentage = ((step - 1) / (totalSteps - 1)) * 100;
      document.getElementById('progress').style.width = percentage + '%';
    }

    showStep(currentStep);
  </script>";s:7:" * name";s:25:"content:1.content-content";s:11:" * realName";N;s:13:" * documentId";i:272;s:12:" * inherited";b:0;s:14:" * inDialogBox";N;}}s:26:" * contentMasterDocumentId";N;s:24:" * supportsContentMaster";b:1;s:26:" * missingRequiredEditable";N;s:5:" * id";i:272;s:11:" * parentId";i:78;s:6:" * key";s:10:"bekore_spk";s:7:" * path";s:5:"/dkb/";s:8:" * index";i:22;s:12:" * published";b:0;s:15:" * creationDate";i:1772203595;s:19:" * modificationDate";i:1772203770;s:12:" * userOwner";i:12;s:19:" * userModification";i:12;s:13:" * properties";a:1:{s:15:"navigation_name";O:22:"Pimcore\Model\Property":8:{s:7:" * name";s:15:"navigation_name";s:7:" * data";s:10:"bekore_spk";s:7:" * type";s:4:"text";s:8:" * ctype";s:8:"document";s:8:" * cpath";N;s:6:" * cid";i:272;s:14:" * inheritable";b:0;s:12:" * inherited";b:0;}}s:11:" * children";a:0:{}s:11:" * siblings";a:0:{}s:14:" * hasSiblings";a:0:{}s:9:" * locked";N;s:15:" * versionCount";i:1;s:25:" * __dataVersionTimestamp";i:1772203595;s:12:" * _fulldump";b:1;s:24:"____pimcore_cache_item__";s:12:"document_272";}