<!-- ════════════════════════════════════════════════════════════════
     PROFI UMZUG WIEN — PREISRECHNER
     Einfach diesen gesamten Block in ein "Custom HTML" / "HTML-Widget"
     einfügen. Funktioniert eigenständig, keine Abhängigkeiten.

     ANPASSEN (siehe Kommentare im Script weiter unten):
       1. Preise in "CONFIG.prices" an Ihre Kalkulation anpassen
       2. WhatsApp-Nummer / Formular-URL im Button-Link eintragen
       3. Farben optional in "--pu-*" CSS-Variablen ändern
     ════════════════════════════════════════════════════════════════ -->

<style>
  /* Alle Stile sind auf .pu-calc beschränkt — kein Konflikt mit Ihrer Seite */
  .pu-calc {
    /* ══ FARBEN HIER ANPASSEN ══ */
    --pu-bg: #1A1614;
    --pu-bg-soft: rgba(255, 255, 255, 0.06);
    --pu-bg-hover: rgba(255, 255, 255, 0.12);
    --pu-text: #FDFAF3;
    --pu-text-soft: rgba(253, 250, 243, 0.7);
    --pu-accent: #D4A055;
    --pu-accent-dark: #B88545;
    --pu-border: rgba(253, 250, 243, 0.15);

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--pu-bg);
    color: var(--pu-text);
    border-radius: 12px;
    padding: 40px;
    max-width: 900px;
    margin: 32px auto;
    position: relative;
    overflow: hidden;
    line-height: 1.5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
  .pu-calc *, .pu-calc *::before, .pu-calc *::after { box-sizing: border-box; }

  .pu-calc::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(212, 160, 85, 0.15) 0%, transparent 70%);
    pointer-events: none;
  }

  .pu-calc__inner { position: relative; z-index: 1; }

  .pu-calc__head { margin-bottom: 32px; }
  .pu-calc__eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pu-accent);
    margin-bottom: 12px;
  }
  .pu-calc__title {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
    color: var(--pu-text);
  }
  .pu-calc__sub {
    color: var(--pu-text-soft);
    font-size: 15px;
    margin: 0;
  }

  .pu-calc__step { margin-bottom: 24px; }
  .pu-calc__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--pu-accent);
    margin-bottom: 12px;
  }
  .pu-calc__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    background: var(--pu-accent);
    color: var(--pu-bg);
    border-radius: 50%;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
  }
  .pu-calc__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .pu-calc__chip {
    padding: 10px 18px;
    background: var(--pu-bg-soft);
    border: 1px solid var(--pu-border);
    border-radius: 999px;
    font-size: 14px;
    color: var(--pu-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-weight: 500;
  }
  .pu-calc__chip:hover {
    background: var(--pu-bg-hover);
    border-color: rgba(253, 250, 243, 0.3);
  }
  .pu-calc__chip.is-active {
    background: var(--pu-accent);
    border-color: var(--pu-accent);
    color: var(--pu-bg);
    font-weight: 700;
  }

  .pu-calc__extras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin-top: 12px;
  }
  .pu-calc__checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--pu-bg-soft);
    border: 1px solid var(--pu-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
  }
  .pu-calc__checkbox:hover { background: var(--pu-bg-hover); }
  .pu-calc__checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .pu-calc__tick {
    flex-shrink: 0;
    width: 20px; height: 20px;
    border: 1.5px solid var(--pu-border);
    border-radius: 4px;
    display: grid;
    place-items: center;
    transition: all 0.2s;
  }
  .pu-calc__checkbox input:checked ~ .pu-calc__tick {
    background: var(--pu-accent);
    border-color: var(--pu-accent);
  }
  .pu-calc__tick::after {
    content: '';
    width: 10px; height: 6px;
    border-left: 2px solid var(--pu-bg);
    border-bottom: 2px solid var(--pu-bg);
    transform: rotate(-45deg) translateY(-2px);
    opacity: 0;
    transition: opacity 0.2s;
  }
  .pu-calc__checkbox input:checked ~ .pu-calc__tick::after { opacity: 1; }
  .pu-calc__checkbox-label {
    font-size: 14px;
    color: var(--pu-text);
  }
  .pu-calc__checkbox-label small {
    display: block;
    color: var(--pu-text-soft);
    font-size: 12px;
    margin-top: 2px;
  }

  .pu-calc__result {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--pu-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
  }
  .pu-calc__result-label {
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--pu-text-soft);
    margin-bottom: 6px;
    font-weight: 600;
  }
  .pu-calc__price {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--pu-text);
    transition: color 0.3s;
  }
  .pu-calc__price em {
    color: var(--pu-accent);
    font-style: normal;
  }
  .pu-calc__price-hint {
    font-size: 12px;
    color: var(--pu-text-soft);
    margin-top: 8px;
  }

  .pu-calc__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    background: var(--pu-accent);
    color: var(--pu-bg);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.2s;
    font-family: inherit;
    border: none;
    cursor: pointer;
  }
  .pu-calc__cta:hover {
    background: var(--pu-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(212, 160, 85, 0.3);
    color: var(--pu-bg);
  }
  .pu-calc__cta-arrow {
    transition: transform 0.2s;
  }
  .pu-calc__cta:hover .pu-calc__cta-arrow {
    transform: translateX(4px);
  }

  @media (max-width: 640px) {
    .pu-calc { padding: 24px; border-radius: 8px; }
    .pu-calc__result { flex-direction: column; align-items: stretch; }
    .pu-calc__cta { justify-content: center; }
  }
</style>

<div class="pu-calc">
  <div class="pu-calc__inner">

    <div class="pu-calc__head">
      <div class="pu-calc__eyebrow">Preisrechner</div>
      <h3 class="pu-calc__title">In 30 Sekunden zum Richtpreis — ohne Registrierung.</h3>
      <p class="pu-calc__sub">Wählen Sie Ihre Eckdaten. Das finale Festpreis-Angebot erhalten Sie kostenlos nach kurzer Besichtigung.</p>
    </div>

    <!-- Schritt 1: Wohnungsgröße -->
    <div class="pu-calc__step">
      <div class="pu-calc__label"><span class="pu-calc__num">1</span> Wohnungsgröße</div>
      <div class="pu-calc__options" data-pu-step="size">
        <button type="button" class="pu-calc__chip" data-pu-val="1">1 Zimmer</button>
        <button type="button" class="pu-calc__chip is-active" data-pu-val="2">2 Zimmer</button>
        <button type="button" class="pu-calc__chip" data-pu-val="3">3 Zimmer</button>
        <button type="button" class="pu-calc__chip" data-pu-val="4">4+ Zimmer</button>
        <button type="button" class="pu-calc__chip" data-pu-val="office">Büro / Firma</button>
      </div>
    </div>

    <!-- Schritt 2: Entfernung -->
    <div class="pu-calc__step">
      <div class="pu-calc__label"><span class="pu-calc__num">2</span> Wohin geht's?</div>
      <div class="pu-calc__options" data-pu-step="distance">
        <button type="button" class="pu-calc__chip is-active" data-pu-val="wien">Innerhalb Wien</button>
        <button type="button" class="pu-calc__chip" data-pu-val="umland">Wien → Umland</button>
        <button type="button" class="pu-calc__chip" data-pu-val="at">Innerhalb Österreich</button>
        <button type="button" class="pu-calc__chip" data-pu-val="eu">Ausland (EU)</button>
      </div>
    </div>

    <!-- Schritt 3: Stockwerk -->
    <div class="pu-calc__step">
      <div class="pu-calc__label"><span class="pu-calc__num">3</span> Stockwerk (ohne Aufzug)</div>
      <div class="pu-calc__options" data-pu-step="floor">
        <button type="button" class="pu-calc__chip is-active" data-pu-val="elevator">Mit Aufzug / EG</button>
        <button type="button" class="pu-calc__chip" data-pu-val="1">1. Stock</button>
        <button type="button" class="pu-calc__chip" data-pu-val="2">2. Stock</button>
        <button type="button" class="pu-calc__chip" data-pu-val="3">3. Stock</button>
        <button type="button" class="pu-calc__chip" data-pu-val="4">4. Stock oder höher</button>
      </div>
    </div>

    <!-- Schritt 4: Zusatzleistungen -->
    <div class="pu-calc__step">
      <div class="pu-calc__label"><span class="pu-calc__num">4</span> Zusatzleistungen (optional)</div>
      <div class="pu-calc__extras">
        <label class="pu-calc__checkbox">
          <input type="checkbox" data-pu-extra="packing">
          <span class="pu-calc__tick"></span>
          <span class="pu-calc__checkbox-label">
            Verpackungsservice
            <small>Wir packen für Sie ein &amp; aus</small>
          </span>
        </label>
        <label class="pu-calc__checkbox">
          <input type="checkbox" data-pu-extra="assembly">
          <span class="pu-calc__tick"></span>
          <span class="pu-calc__checkbox-label">
            Möbelmontage
            <small>De- &amp; Montage Ihrer Möbel</small>
          </span>
        </label>
        <label class="pu-calc__checkbox">
          <input type="checkbox" data-pu-extra="parking">
          <span class="pu-calc__tick"></span>
          <span class="pu-calc__checkbox-label">
            Halteverbotszone
            <small>Wir beantragen &amp; stellen auf</small>
          </span>
        </label>
        <label class="pu-calc__checkbox">
          <input type="checkbox" data-pu-extra="disposal">
          <span class="pu-calc__tick"></span>
          <span class="pu-calc__checkbox-label">
            Entrümpelung
            <small>Besenrein, fachgerechte Entsorgung</small>
          </span>
        </label>
      </div>
    </div>

    <!-- Ergebnis -->
    <div class="pu-calc__result">
      <div>
        <div class="pu-calc__result-label">Voraussichtlicher Preis</div>
        <div class="pu-calc__price">€&nbsp;<em data-pu-output="low">690</em>&nbsp;–&nbsp;<em data-pu-output="high">950</em></div>
        <div class="pu-calc__price-hint">Richtpreis inkl. MwSt. · Endpreis nach kostenloser Besichtigung</div>
      </div>
      <!-- ══ LINK HIER ANPASSEN: WhatsApp-Nachricht oder eigenes Formular ══ -->
      <a href="https://wa.me/436767270006?text=Hallo%20Profi-Umzug%2C%20ich%20h%C3%A4tte%20gerne%20ein%20Festpreis-Angebot." class="pu-calc__cta">
        Jetzt Festpreis anfordern
        <span class="pu-calc__cta-arrow">→</span>
      </a>
    </div>

  </div>
</div>

<script>
(function() {
  'use strict';

  // ══════════════════════════════════════════════════════════════
  //   KONFIGURATION — HIER PREISE ANPASSEN
  //   Hinweis: Alle Werte in Euro. Die tatsächliche Spanne ergibt
  //   sich aus -5% (unten) bis +20% (oben) vom Grundpreis.
  // ══════════════════════════════════════════════════════════════
  var CONFIG = {
    // Grundpreise je Wohnungsgröße (innerhalb Wien, mit Aufzug, ohne Extras)
    sizePrice: {
      '1':      450,   // 1 Zimmer
      '2':      780,   // 2 Zimmer
      '3':     1150,   // 3 Zimmer
      '4':     1650,   // 4+ Zimmer
      'office': 1900   // Büro / Firma
    },

    // Faktor je nach Entfernung (1.0 = innerhalb Wien)
    distanceFactor: {
      'wien':   1.00,
      'umland': 1.60,
      'at':     1.95,
      'eu':     2.90
    },

    // Pauschale für Stockwerk ohne Aufzug (in Euro, wird aufaddiert)
    floorSurcharge: {
      'elevator': 0,
      '1':      100,
      '2':      190,
      '3':      250,
      '4':      300
    },

    // Zusatzleistungen
    extras: {
      packing:  { type: 'multiplier', value: 0.30 },  // +30% vom Grundpreis
      assembly: { type: 'flat',       value: 220 },   // Pauschale in Euro
      parking:  { type: 'flat',       value: 260 },   // Pauschale in Euro
      disposal: { type: 'flat',       value: 350 }    // Pauschale in Euro
    },

    // Preisspanne (Min-/Max-Faktor um den berechneten Wert)
    rangeLow:  0.95,
    rangeHigh: 1.25
  };
  // ══════════════════════════════════════════════════════════════

  var root = document.querySelector('.pu-calc');
  if (!root) return;

  var state = {
    size: '2',
    distance: 'wien',
    floor: 'elevator',
    extras: {}
  };

  // Chip-Gruppen (Single-Select)
  root.querySelectorAll('.pu-calc__options').forEach(function(group) {
    group.addEventListener('click', function(e) {
      var btn = e.target.closest('.pu-calc__chip');
      if (!btn) return;
      var step = group.getAttribute('data-pu-step');
      group.querySelectorAll('.pu-calc__chip').forEach(function(c) {
        c.classList.remove('is-active');
      });
      btn.classList.add('is-active');
      state[step] = btn.getAttribute('data-pu-val');
      recalculate();
    });
  });

  // Checkboxen für Extras
  root.querySelectorAll('[data-pu-extra]').forEach(function(cb) {
    cb.addEventListener('change', function() {
      state.extras[cb.getAttribute('data-pu-extra')] = cb.checked;
      recalculate();
    });
  });

  function recalculate() {
    // 1. Grundpreis nach Größe
    var base = CONFIG.sizePrice[state.size] || 0;

    // 2. Entfernungsfaktor
    var distFactor = CONFIG.distanceFactor[state.distance] || 1;
    var price = base * distFactor;

    // 3. Stockwerk-Pauschale
    price += CONFIG.floorSurcharge[state.floor] || 0;

    // 4. Extras
    Object.keys(state.extras).forEach(function(key) {
      if (!state.extras[key]) return;
      var rule = CONFIG.extras[key];
      if (!rule) return;
      if (rule.type === 'multiplier') {
        price += base * rule.value;
      } else if (rule.type === 'flat') {
        price += rule.value;
      }
    });

    // 5. Spanne berechnen (auf 10er gerundet)
    var low = Math.round((price * CONFIG.rangeLow) / 10) * 10;
    var high = Math.round((price * CONFIG.rangeHigh) / 10) * 10;

    // 6. Ausgabe
    var outLow = root.querySelector('[data-pu-output="low"]');
    var outHigh = root.querySelector('[data-pu-output="high"]');
    if (outLow) outLow.textContent = formatPrice(low);
    if (outHigh) outHigh.textContent = formatPrice(high);
  }

  function formatPrice(n) {
    return n.toLocaleString('de-AT');
  }

  // Initial berechnen
  recalculate();
})();
</script>

<!-- ════════════════════════════════════════════════════════════════
     Ende Preisrechner
     ════════════════════════════════════════════════════════════════ -->