(() => { "use strict"; const EMBED_MARKUP = "

STANDARDISIERT GEBAUT. INDIVIDUELL GEWÄHLT.

Ein Zuhause.
Nach Ihren Vorstellungen.\n

Schritt für Schritt zu Ihrem Zuhause. Wählen Sie Haus, Ausstattung und Extras; zum Abschluss prüfen Sie alle Entscheidungen und bereiten Ihre Anfrage vor.

\nSCHRITT FÜR SCHRITT

Ihr Haus beginnt
mit einer Entscheidung.

\n \n

IHR AUSGEWÄHLTES MODELL

Klassiker 130

\nSatteldach\n

130 m² · 1 Wohneinheit

\nSchematische Illustration\n

Schritt 1 von 10

\nHaus & Größe\n

Ihre Preissumme–\n

\n01

Welches Haus passt zu Ihnen?

Vier Formen. Kalkulierte Modelle und Ihre Wunschgrößen.

\n\n

\nWohnfläche\n

\n\n\n

\n \n \n \n \n \n \n\n

\n \n

EINE GUTE ENTSCHEIDUNG BRAUCHT EINEN VERGLEICH.

Ihre Varianten nebeneinander.

Speichern Sie bis zu drei Konfigurationen. Ihre Auswahl bleibt in diesem Browser erhalten.

\n\n

\n↔

Was wäre, wenn?

Andere Größe, andere Ausbaustufe, ein Extra mehr.
Speichern Sie Ihre erste Variante und vergleichen Sie die Möglichkeiten.

\nErste Variante konfigurieren ↑\n

KLARE GRUNDLAGE

Wissen, was dabei ist.

Was ist im Hauspreis enthalten?

Gebäudehülle, modellbezogener Transport nach Baden-Württemberg und Hausmontage. Je nach Ausbaustufe kommen Haustechnik, Estrich mit Fußbodenheizung und Innenausbau hinzu. Fenster und Haustür gehören zur Hülle. Der Dachumfang und die konkrete Ausstattung müssen im verbindlichen Angebot bestätigt werden.

Welche Kosten kommen projektbezogen hinzu?

Grundstück, Bodenplatte/Fundament, Erdarbeiten, Kran und Gerüst, Küche, Außenanlagen, Erschließung und Hausanschlüsse sowie Planung, Genehmigungen und weitere Baunebenkosten. Garage: Fundament und Zufahrt separat. PV: möglicher Zählerschrank-Umbau separat. Die Auswahl ist eine Hauspreiskalkulation, kein Gesamtbudget für das Bauprojekt.

Wie werden Konzept und Kalkulation kombiniert?

Die Modellnamen Classic und Stadtvilla entsprechen den kalkulierten Typen Klassiker und Turmdach. Die zusätzlichen Konzeptgrößen werden als Wunschgrößen angeboten und haben noch keinen Hauspreis. Einzel- und Doppelgarage verwenden die aktuelle Kalkulation. Die älteren Konzeptwerte von 6.000 €, 10.000 € und 3.000 € für Carport sind keine bestätigten Bruttopreise und werden nicht ungeprüft übernommen. Neue Ausstattungen und Mehrpreise bleiben sichtbar als Preis auf Anfrage.

QNG, Effizienzstandard, Heizungsmarke und PV-Anbieter sind offene Angaben im Konzept und werden projektbezogen geklärt.

Auf welcher Kalkulation beruhen die Preise?

JaWaHaus24_Kalkulation_FIANL.xlsx, zuletzt überarbeitete Version 8 vom 08.10.2026. Enthalten sind die 20 % Zielmarge, modellbezogene Montage, geschätzte Spachtel- und Malerflächen und die aktualisierten Türmengen mit 500 € netto je Tür inkl. Montage. Selbstkosten ÷ 0,80 ergeben den Nettoverkaufspreis vor Website-Rundung. Haus und Garage werden mit 19 % Umsatzsteuer gerechnet, PV separat mit dem ausgewählten Satz.

Lieferantenangebote, tatsächliche Flächen, Transport und endgültiger Leistungsumfang sind vor einem verbindlichen Festpreis zu bestätigen. Keine zugesicherten Förderungen oder Zertifizierungen.

"; const EMBED_STYLES = ":host{display:block;width:100%;min-width:0;}\n:host{--ink:#243b33;--muted:#68746d;--paper:#f5f5ee;--line:#dfe3d8;--lime:#d7e4b4;--white:#fff;--radius:18px}*{box-sizing:border-box}:host{scroll-behavior:smooth;scroll-padding-top:24px}.jawahaus24-inner{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,Arial,Helvetica,sans-serif;font-size:15px;line-height:1.55}a{color:inherit}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #8cab59;outline-offset:4px}input:focus-visible+.choice{outline:3px solid #8cab59;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-100px;left:16px;background:var(--ink);color:white;padding:12px;z-index:100}.skip:focus{top:12px}.header{height:94px;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1440px;margin:auto;padding:0 64px;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:27px;line-height:1;letter-spacing:-1.4px;font-weight:800;display:flex;align-items:center}.brand span{font-weight:400}.brand i{width:7px;height:7px;border-radius:50%;background:#92a963;display:inline-block;margin:13px 0 0 3px}.private{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:30px;padding:6px 12px;color:var(--muted);font-size:12px}.private svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.compare-nav{text-decoration:none;font-size:13px;display:flex;align-items:center;gap:12px}.compare-nav span:first-child{background:var(--ink);color:white;border-radius:50%;width:23px;height:23px;text-align:center;line-height:23px}.compare-nav span:last-child{font-size:23px}main{max-width:1440px;margin:auto;padding:0 64px}.intro{display:flex;align-items:flex-end;justify-content:space-between;padding:64px 0 44px;gap:30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.6px;margin:0 0 14px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(34px,4.4vw,62px);line-height:1.09;letter-spacing:-2.6px;font-weight:500;margin-bottom:22px}h1 span{color:#76876b}.intro-copy{font-size:15px;color:var(--muted);max-width:480px;margin-bottom:0}.intro-mark{border-left:1px solid #c4cabb;padding-left:30px;margin-bottom:7px;min-width:200px}.intro-mark>span{font-size:12px;letter-spacing:2px;color:#84917b}.intro-mark p{font-size:15px;margin:14px 0 0}.config-layout{display:grid;grid-template-columns:minmax(0,1fr) 356px;align-items:start;gap:28px}.visual-card{background:#e9eddf;border-radius:var(--radius);overflow:hidden;position:relative}.visual-top{padding:26px 30px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}.visual-top .eyebrow{font-size:9px;margin-bottom:5px;color:var(--muted)}.visual-top h2{font-size:26px;letter-spacing:-1px;font-weight:500;margin:0}.model-tag{font-size:11px;background:rgba(255,255,255,.7);padding:6px 10px;border-radius:30px;white-space:nowrap}.house-visual{height:310px;display:flex;align-items:center;justify-content:center;padding:0 16px}.house-visual svg{width:100%;height:100%;max-width:670px}.visual-bottom{display:flex;align-items:center;justify-content:space-between;padding:15px 30px 22px;gap:15px;font-size:12px}.visual-bottom>span{font-size:10px;color:var(--muted)}.step-nav{display:flex;justify-content:space-between;padding:23px 8px;border-bottom:1px solid var(--line);gap:12px}.step-nav a{font-size:12px;text-decoration:none}.step-nav span{color:#99a186;margin-right:8px}.config-section{padding:34px 0 32px;border-bottom:1px solid var(--line)}.section-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:23px}.section-number{font-size:12px;border:1px solid #c9d0c2;border-radius:50%;width:31px;height:31px;display:grid;place-items:center;flex-shrink:0}.section-head h2{font-size:23px;letter-spacing:-.6px;font-weight:500;line-height:1.25;margin:1px 0 6px}.section-head p{color:var(--muted);font-size:13px;margin-bottom:0}fieldset{border:0;margin:0;padding:0;min-width:0}legend{font-size:13px;font-weight:600;margin-bottom:12px}.family-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.radio-label{position:relative;display:block;cursor:pointer}.radio-label input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.choice{border:1px solid var(--line);border-radius:12px;background:#fbfcf8;transition:background .15s,border-color .15s;display:flex;flex-direction:column;height:100%;position:relative}.choice:hover{border-color:#a1b28e}.radio-label input:checked+.choice{border-color:var(--ink);background:#e8eedc;box-shadow:inset 0 0 0 1px var(--ink)}.choice .radio-dot{position:absolute;right:10px;top:10px;width:13px;height:13px;border:1px solid #b7c2ad;border-radius:50%}.radio-label input:checked+.choice .radio-dot{border:4px solid var(--ink);background:var(--lime)}.family-choice{padding:22px 13px 15px}.family-icon{width:50px;height:38px;margin:0 0 14px}.family-choice strong{font-size:13px;font-weight:600}.family-choice small{font-size:10px;color:var(--muted);margin-top:3px}.size-field{margin-top:24px}.size-options{display:flex;gap:9px;flex-wrap:wrap}.size-choice{padding:11px 20px;min-width:100px;text-align:center;font-size:14px}.size-choice .radio-dot{display:none}.field-note{color:var(--muted);font-size:11px;line-height:1.55;margin:12px 0 0}.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stage-choice{padding:18px 14px 15px}.stage-choice .step-label{font-size:9px;letter-spacing:1px;color:var(--muted);margin-bottom:9px}.stage-choice strong{font-size:13px;display:block;margin:0 0 6px}.stage-choice .stage-desc{font-size:11px;color:var(--muted);min-height:36px;line-height:1.5}.stage-choice .stage-price{font-size:15px;font-weight:600;border-top:1px solid #dce1d3;margin-top:14px;padding-top:12px}.scope-details{font-size:12px;margin-top:17px}details summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}details summary::-webkit-details-marker{display:none}details summary:after{content:'+';font-size:20px;font-weight:400}details[open] summary:after{content:'−'}#stage-details{background:#eef0e7;padding:18px;margin-top:12px;border-radius:12px}#stage-details h3{font-size:14px;margin-bottom:9px}#stage-details ul{padding-left:17px;margin:0 0 10px;color:var(--muted)}#stage-details p{margin:0;color:var(--muted);font-size:11px}.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.option-choice{padding:18px 13px;min-height:111px}.option-choice strong{font-size:12px;padding-right:13px;line-height:1.45}.option-choice small{font-size:10px;color:var(--muted);margin:4px 0 12px}.option-choice .option-price{font-size:15px;margin-top:auto;font-weight:600}.pv-field{margin-top:28px}.tax-field{padding:16px;background:#eef0e7;border-radius:12px;margin-top:14px}.tax-field label{display:block;font-size:12px;margin-bottom:7px}.tax-field select{max-width:100%;width:100%;font-size:12px;padding:10px;border:1px solid #c8d0bd;background:#fbfcf8;color:var(--ink);border-radius:7px}.summary{position:sticky;top:24px;border-radius:var(--radius);background:var(--white);padding:29px 27px 0;border:1px solid var(--line)}.summary>.eyebrow{color:var(--muted);font-size:9px}.summary h2{font-size:24px;font-weight:500;letter-spacing:-.7px;margin-bottom:5px}.summary-meta{font-size:12px;color:var(--muted);margin-bottom:24px}.price-head{background:var(--ink);color:var(--white);border-radius:12px;padding:23px 19px;margin-bottom:21px;display:flex;flex-direction:column}.price-head>span{font-size:11px;color:#ccd7c9}.price-head strong{font-size:36px;letter-spacing:-1.2px;line-height:1.2;margin:10px 0 7px;white-space:nowrap;font-weight:500}.price-head .price-caption{font-size:10px}.price-lines{margin:0 0 20px}.price-lines>div{display:flex;align-items:flex-start;justify-content:space-between;font-size:12px;margin-bottom:14px;gap:10px}.price-lines dt{color:var(--muted);max-width:65%}.price-lines dt span{display:block;font-size:10px}.price-lines dd{margin:0;white-space:nowrap;font-weight:600}.tax-details{font-size:11px;border-top:1px solid var(--line);padding-top:13px}.tax-details summary{font-weight:600}.tax-details dl>div{display:flex;justify-content:space-between;gap:9px;margin:8px 0}.tax-details dd{margin:0;white-space:nowrap}.tax-details p{font-size:10px;color:var(--muted);margin:12px 0 0}.summary-actions{margin:21px 0 15px;display:grid;gap:9px}.button{border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-size:12px;line-height:1.5;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;text-decoration:none}.button.primary{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:600;justify-content:space-between}.button.primary:hover{background:#c6d99d}.button.secondary{background:transparent;color:var(--ink)}.button.secondary:hover{background:#f1f3ea}.button span{font-size:17px}.summary-note{font-size:10px;line-height:1.55;color:var(--muted);margin-bottom:19px}.summary-footer{display:flex;align-items:center;gap:7px;border-top:1px solid var(--line);padding:15px 0;font-size:9px;color:var(--muted)}.status-dot{width:5px;height:5px;border-radius:50%;background:#91a56c}.comparison{padding:60px 0}.comparison-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:28px}.comparison-head h2,.notes h2{font-size:32px;letter-spacing:-1.1px;font-weight:500;line-height:1.2;margin-bottom:10px}.comparison-head p:not(.eyebrow){font-size:13px;color:var(--muted);margin:0}.empty-compare{border:1px dashed #bfcab1;border-radius:var(--radius);text-align:center;padding:38px 24px;background:#eef0e6}.empty-compare>span{font-size:35px;color:#8c9e79}.empty-compare h3{font-size:21px;font-weight:500;margin:9px 0}.empty-compare p{font-size:13px;color:var(--muted);margin-bottom:18px}.empty-compare a{font-size:12px;text-underline-offset:4px}.compare-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}.variant-card{padding:24px;background:white;border:1px solid var(--line);border-radius:var(--radius)}.variant-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.variant-top .eyebrow{margin:0;color:var(--muted);font-size:9px}.icon-button{border:0;background:transparent;width:32px;height:32px;font-size:20px;color:var(--muted);border-radius:6px}.icon-button:hover{background:#f0f2e9}.variant-card h3{font-size:21px;font-weight:500;letter-spacing:-.5px;margin:15px 0 4px}.variant-meta{font-size:11px;color:var(--muted);margin-bottom:15px}.variant-total{font-size:29px;line-height:1.2;font-weight:500;letter-spacing:-1px;white-space:nowrap}.variant-delta{font-size:11px;color:#6b8058;margin:6px 0 18px;min-height:17px}.variant-card dl{font-size:11px;margin-bottom:20px}.variant-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}.variant-card dt{color:var(--muted)}.variant-card dd{margin:0;text-align:right;max-width:65%}.variant-card .button{width:100%}.notes{display:grid;grid-template-columns:1fr 1.6fr;gap:80px;border-top:1px solid var(--line);padding:40px 0 56px}.notes-content details{padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.notes-content details:first-child{padding-top:0}.notes-content details p{font-size:12px;color:var(--muted);margin:12px 0 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:white;border-radius:10px;padding:13px 20px;box-shadow:0 5px 30px #243b3320;font-size:13px;max-width:calc(100% - 30px);width:max-content;z-index:100;transition:opacity .2s,transform .2s}.toast.visible{opacity:1;transform:translate(-50%,0)}footer{max-width:1440px;margin:auto;border-top:1px solid var(--line);padding:28px 64px;display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:22px}footer p,footer>span{margin:0;font-size:11px;color:var(--muted)}.error{border:1px solid #bb745a;padding:20px;border-radius:12px;background:#fff3e9;margin:15px 0}[hidden]{display:none!important}\n@media(min-width:1450px){.config-layout{grid-template-columns:minmax(0,1fr) 380px}.house-visual{height:350px}}\n@media(max-width:1100px){.header,main,footer{padding-left:32px;padding-right:32px}.config-layout{grid-template-columns:minmax(0,1fr) 315px;gap:22px}.summary{padding:24px 21px 0}.price-head strong{font-size:31px}.family-choice{padding-left:10px;padding-right:8px}.family-choice strong{font-size:12px}.stage-choice{padding:16px 10px}.stage-choice strong{font-size:12px}.option-choice{padding:16px 10px}.intro{padding-top:48px}.intro-mark{display:none}.notes{gap:40px}.house-visual{height:280px}}\n@media(max-width:860px){.config-layout{grid-template-columns:minmax(0,1fr)}.summary{position:static;max-width:none;padding:25px 28px 0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.summary>.eyebrow,.summary h2,.summary-meta{grid-column:1/-1}.price-head{grid-column:1;grid-row:4/7;align-self:start;margin-bottom:18px}.price-lines{grid-column:2;grid-row:4;margin-top:5px}.tax-details{grid-column:2;grid-row:5}.summary-actions{grid-column:1/-1;grid-template-columns:1fr 1fr;margin-top:7px}.summary-note,.summary-footer{grid-column:1/-1}.house-visual{height:340px}.family-choice{padding:22px 16px 16px}.stage-choice{padding:18px 16px}.compare-grid{gap:12px}.variant-card{padding:18px}.variant-total{font-size:24px}.intro{padding:42px 0 30px}h1{font-size:48px}}\n@media(max-width:590px){.header{height:76px;padding:0 20px;gap:14px}.brand{font-size:23px}.private{display:none}.compare-nav{font-size:11px;gap:7px}.compare-nav span:last-child{display:none}main{padding:0 20px}.intro{padding:36px 0 27px}h1{font-size:37px;letter-spacing:-1.6px}.eyebrow{font-size:8px;letter-spacing:1.2px}.intro-copy{font-size:13px;max-width:350px}.config-layout{gap:24px}.visual-top{padding:21px 20px 0}.visual-top h2{font-size:23px}.house-visual{height:235px;padding:0 5px}.visual-bottom{padding:10px 20px 19px;font-size:10px;gap:8px}.visual-bottom>span{font-size:8px}.step-nav{padding:18px 0;gap:6px}.step-nav a{font-size:10px}.step-nav span{margin-right:4px}.config-section{padding:28px 0}.section-head{gap:12px;margin-bottom:20px}.section-head h2{font-size:21px}.section-head p{font-size:12px}.family-grid{grid-template-columns:repeat(2,1fr);gap:10px}.family-choice{padding:18px 15px 15px;display:grid;grid-template-columns:45px 1fr;column-gap:12px;align-items:center}.family-icon{width:44px;height:34px;grid-row:1/3;margin:0}.family-choice strong{font-size:13px}.family-choice small{font-size:9px}.family-choice .radio-dot{top:7px;right:7px;width:10px;height:10px}.radio-label input:checked+.family-choice .radio-dot{border-width:3px}.size-choice{padding:10px 16px;min-width:95px}.stage-grid{grid-template-columns:1fr}.stage-choice{display:grid;grid-template-columns:1fr auto;padding:17px;column-gap:15px}.stage-choice .step-label{grid-column:1;font-size:8px;margin-bottom:3px}.stage-choice strong{grid-column:1;font-size:14px;margin-bottom:3px}.stage-choice .stage-desc{grid-column:1;min-height:0}.stage-choice .stage-price{grid-column:2;grid-row:2/4;border:0;padding:0;margin:0;align-self:center;font-size:15px}.stage-choice .radio-dot{top:9px;right:12px}.option-grid{grid-template-columns:1fr}.option-choice{min-height:0;display:grid;grid-template-columns:1fr auto;padding:15px;gap:3px 12px}.option-choice strong{font-size:13px;grid-column:1}.option-choice small{grid-column:1;margin:0;font-size:10px}.option-choice .option-price{grid-column:2;grid-row:1/3;align-self:center;margin:0;padding-right:20px;font-size:14px}.option-choice .radio-dot{top:50%;transform:translateY(-50%);right:12px}.summary{display:block;padding:25px 23px 0}.summary .price-head strong{font-size:36px}.summary-actions{display:grid;grid-template-columns:1fr;margin-top:20px}.summary>.eyebrow{font-size:9px}.comparison{padding:42px 0}.comparison-head{display:block}.comparison-head h2,.notes h2{font-size:27px}.comparison-head .button{margin-top:18px;width:100%}.compare-grid{grid-template-columns:1fr}.variant-card{padding:22px}.variant-total{font-size:30px}.variant-card dl{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.variant-card dl>div{display:block}.variant-card dd{text-align:left;max-width:100%;margin-top:4px}.notes{grid-template-columns:1fr;gap:10px;padding:30px 0}.notes h2{margin-bottom:0}footer{padding:23px 20px;flex-wrap:wrap;gap:13px}footer .brand{font-size:20px}footer p{display:none}footer>span{font-size:10px}.toast{bottom:15px;font-size:12px}}\n@media(prefers-reduced-motion:reduce){:host{scroll-behavior:auto}*{transition:none!important}}\n@media print{.header,.step-nav,.summary-actions,.compare-nav,footer,.toast,.config-section,.notes,.intro-mark,.skip{display:none!important}.jawahaus24-inner{background:white;font-size:11px}main{padding:0}.intro{padding:10px 0 20px}h1{font-size:28px}.config-layout{grid-template-columns:1fr 1fr}.summary{position:static;display:block;padding:18px}.house-visual{height:220px}.price-head{color:var(--ink);background:#edf1e4}.price-head>span{color:var(--muted)}.comparison{padding:25px 0}.comparison-head .button,.variant-card .button,.icon-button{display:none}.compare-grid{grid-template-columns:repeat(3,1fr)}.variant-card{break-inside:avoid;padding:15px}.variant-total{font-size:22px}.tax-details[open]{display:block}}\n\n.step-nav{overflow-x:auto;justify-content:flex-start;gap:23px}.step-nav a{white-space:nowrap}.size-choice small{display:block;font-size:9px;font-weight:400;color:var(--muted);margin-top:3px}.request-sizes>.field-note{margin:18px 0 9px}.request-size{background:#f6f3e9}.garage-grid{grid-template-columns:repeat(2,1fr)}.designer-group{margin:26px 0}.designer-group:first-child{margin-top:0}.designer-group legend{margin-bottom:12px;font-size:14px}.designer-group legend small{font-size:10px;display:block;color:var(--muted);font-weight:400;margin-top:3px}.design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.design-choice{padding:16px 13px;min-height:100px}.design-choice strong{font-size:12px;line-height:1.4;padding-right:12px}.design-choice>small{font-size:10px;color:var(--muted);margin-top:4px}.design-price{font-size:9px;color:#879170;margin-top:9px}.swatch-choice .color-sample{width:31px;height:31px;border-radius:50%;background:var(--sample);border:1px solid #243b3324;margin:0 0 11px}.sample-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.sample-choice{padding:12px 9px 14px;align-items:center;text-align:center;min-height:150px}.sample-choice strong{padding-right:0;margin-top:3px;font-size:11px}.sample-choice .design-price{margin-top:auto;padding-top:8px;font-size:8px}.sample-choice .radio-dot{width:10px;height:10px;right:7px;top:7px}.sample-choice input:checked+.choice .radio-dot{border-width:3px}.object-sample{width:70px;height:80px;max-width:100%}.bath-sample{width:100%;height:80px}.floor-sample{display:block;width:70px;max-width:100%;height:74px;background:repeating-linear-gradient(90deg,transparent 0px,transparent 16px,#fff3 17px,#25382d25 18px),repeating-linear-gradient(7deg,#fff1 0px,#fff1 1px,#0001 2px,transparent 3px,transparent 8px),var(--sample);border-radius:6px;margin:3px 0 9px;transform:skewY(-4deg)}.floor-sample.parquet{background:repeating-linear-gradient(45deg,#ffffff15 0px,#ffffff15 8px,#38483630 9px,transparent 10px,transparent 18px),var(--sample)}.sample-note{border-left:2px solid #b6c996;padding:3px 0 3px 12px;font-size:11px;color:var(--muted);margin-bottom:24px}.standard-list{padding:16px;background:#eef0e7;border-radius:10px;margin-top:12px;font-size:11px;color:var(--muted)}.standard-list p:last-child{margin-bottom:0}.pending-price{padding:13px;border:1px solid #e3d7b1;border-radius:10px;background:#faf5e7;font-size:10px;margin-bottom:20px}.pending-price>strong{font-size:11px;font-weight:600}.pending-price details{margin:8px 0}.pending-price ul{padding-left:16px;margin:8px 0;line-height:1.8}.pending-price>span{color:#7d755e;display:block;margin-top:6px}.pending-price summary:after{font-size:14px}.selection-details{margin:20px 0;padding-top:13px;border-top:1px solid var(--line);font-size:12px}.selection-details dl{margin:8px 0}.selection-details dl>div{display:flex;justify-content:space-between;gap:18px;padding:8px 0;border-bottom:1px solid #e8eade;font-size:11px}.selection-details dt{color:var(--muted)}.selection-details dd{margin:0;text-align:right;max-width:65%}.summary-selection{font-size:11px}.summary-selection dl{max-height:360px;overflow:auto}.summary-selection dl>div{font-size:10px}.request-link{display:block;text-align:center;font-size:11px;text-underline-offset:4px;margin:14px 0 20px}.request-total{font-size:29px!important}.compare-warning{background:#f5ecd7;border-radius:10px;padding:14px 17px;font-size:12px;color:#76623d;margin-bottom:22px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.contact-grid label,.message-label,.email-settings label{font-size:12px;display:block;color:var(--muted)}#request-form input,#request-form textarea{display:block;width:100%;border:1px solid #ccd3c1;background:#fcfcf8;border-radius:8px;padding:12px;color:var(--ink);font:inherit;font-size:13px;margin-top:6px}#request-form input:focus,#request-form textarea:focus{outline:2px solid #a1b982;outline-offset:2px}.message-label{margin-top:17px}#request-form textarea{resize:vertical;min-height:100px}#export-request{width:100%;margin:20px 0 16px;justify-content:center}.email-settings{font-size:12px}.email-settings>label{margin-top:13px}#email-request{margin-top:12px;width:100%}#comfort-options{border-top:1px solid var(--line);padding-top:20px}.request-section .designer-group{margin-top:24px}.summary .pending-price,.summary .summary-selection,.summary .request-link{grid-column:1/-1}.price-head .request-total{white-space:normal}.variant-card dl{max-height:520px;overflow:auto}.variant-card .variant-delta{min-height:34px}\n@media(max-width:1100px){.sample-grid{gap:6px}.sample-choice{padding:12px 5px}.sample-choice strong{font-size:10px}.sample-choice .design-price{font-size:8px}.design-choice strong{font-size:11px}.step-nav{gap:14px}.object-sample{height:65px}.bath-sample{height:65px}.floor-sample{height:65px}}\n@media(max-width:860px){.summary .price-head{grid-row:auto}.summary .price-lines{grid-row:auto}.summary .tax-details{grid-column:1/-1;grid-row:auto}.summary .pending-price{grid-row:auto}.sample-choice strong{font-size:11px}.sample-choice .design-price{font-size:9px}.object-sample{height:80px}.bath-sample{height:80px}.floor-sample{height:74px}}\n@media(max-width:590px){.design-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.bath-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-choice{min-height:156px;padding:12px 9px}.design-choice strong{font-size:12px}.sample-choice strong{font-size:11px}.object-sample{height:80px}.design-price{font-size:9px}.garage-grid{grid-template-columns:1fr}.step-nav{gap:17px}.contact-grid{grid-template-columns:1fr}.selection-details dl>div{gap:12px}.summary .summary-selection{margin-top:20px}.price-head .request-total{font-size:31px!important}.variant-card dl{display:block;max-height:none}.variant-card dl>div{display:flex}.variant-card dd{max-width:65%;text-align:right}.variant-card .variant-delta{min-height:0}}\n@media print{.request-section,.designer-group,.sample-note,#interior-disabled,.sample-choice,.email-settings{display:none}.summary-selection[open] dl{max-height:none}.variant-card dl{max-height:none;overflow:visible}.compare-warning,.pending-price{break-inside:avoid}.summary .price-lines{display:block}.variant-card .variant-total{font-size:19px}}\n\n.intro{padding-top:40px;padding-bottom:32px}h1{font-size:clamp(34px,4vw,55px)}.visual-card{margin-bottom:20px}.house-visual{height:250px}.wizard-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:25px 28px 20px;min-width:0}.wizard-top{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-bottom:12px}.wizard-top p{margin:0}.wizard-top .eyebrow{font-size:9px;letter-spacing:1.2px;color:var(--muted)}.wizard-top strong{font-weight:500;font-size:17px}.wizard-price{font-size:12px;white-space:nowrap;color:var(--muted);text-align:right}.wizard-price>span{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-top:2px}.wizard-progress{display:block;width:100%;height:4px;appearance:none;-webkit-appearance:none;border:none;border-radius:8px;background:#e7ecdf;overflow:hidden;margin-bottom:18px}.wizard-progress::-webkit-progress-bar{background:#e7ecdf}.wizard-progress::-webkit-progress-value{background:#8ea766}.wizard-progress::-moz-progress-bar{background:#8ea766}.wizard-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:0 0 20px;border-bottom:1px solid var(--line);margin-bottom:0}.wizard-tab{display:flex;align-items:center;gap:7px;border:0;border-radius:7px;background:#f2f4ec;color:var(--muted);padding:8px 10px;font-size:10px}.wizard-tab>span{font-size:9px;opacity:.8}.wizard-tab.active{background:var(--ink);color:#f9fbed}.wizard-tab.previous{color:var(--ink);background:#edf2e3}.wizard-tab:hover{background:#e1eacb;color:var(--ink)}.wizard-panel .config-section{border-bottom:0;padding-top:28px;padding-bottom:20px}.wizard-panel .section-head h2{font-size:25px}.wizard-panel .section-number{background:#f0f4e7;border-color:#d2ddc2}.wizard-navigation{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:20px;border-top:1px solid var(--line);margin-top:8px}.wizard-navigation .button{min-width:113px}.wizard-navigation .primary{justify-content:center;min-width:150px}.wizard-navigation>p{margin:0;font-size:10px;line-height:1.5;color:var(--muted);flex:1;text-align:center}.review-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}.review-links button{background:#edf2e3;border:1px solid #d9e1ce;border-radius:7px;font-size:10px;color:var(--ink);padding:7px 9px}.review-links button:hover{background:#dce8c4}.wizard-review-note{font-size:11px;color:var(--muted);background:#eef3e6;border-radius:10px;padding:13px 16px;margin-top:18px;margin-bottom:0}.request-section .selection-details{margin-top:5px}.summary{top:18px}.summary .summary-footer{padding-bottom:13px}.summary .summary-actions{margin-top:16px}.summary .request-link{margin-bottom:14px}#heading-house-choice:focus,#heading-stage-choice:focus,#heading-appearance-choice:focus,#heading-entrance-choice:focus,#heading-floor-choice:focus,#heading-doors-choice:focus,#heading-interior-choice:focus,#heading-extra-choice:focus,#heading-addons-choice:focus,#heading-request-choice:focus{outline:0}.config-layout{scroll-margin-top:18px}\n@media(max-width:1100px){.wizard-panel{padding:23px 21px 18px}.wizard-panel .section-head h2{font-size:22px}.wizard-navigation{gap:10px}.wizard-navigation .button{min-width:90px}.wizard-navigation .primary{min-width:115px}.wizard-tab{font-size:9px;padding:7px 9px}.wizard-top strong{font-size:15px}}\n@media(max-width:860px){.house-visual{height:270px}.wizard-navigation{position:sticky;bottom:12px;border:1px solid #d7dfca;background:#fafcf5eF;backdrop-filter:blur(12px);border-radius:12px;padding:12px 14px;box-shadow:0 5px 20px #243b3310;z-index:5;margin-top:15px}.wizard-top strong{font-size:17px}.wizard-panel{padding:23px 25px 16px}}\n@media(max-width:590px){.intro{padding:30px 0 23px}h1{font-size:37px}.visual-card{margin-bottom:16px}.house-visual{height:205px}.visual-top{padding-top:18px}.visual-top h2{font-size:22px}.visual-bottom{padding-bottom:16px}.wizard-panel{padding:19px 16px 15px}.wizard-top{align-items:flex-start;gap:9px}.wizard-top strong{font-size:15px}.wizard-top .eyebrow{font-size:8px;margin-bottom:3px}.wizard-price{font-size:9px}.wizard-price>span{font-size:12px;max-width:120px;white-space:normal}.wizard-tabs{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:12px;margin-right:-16px;padding-right:16px}.wizard-tab{white-space:nowrap;font-size:10px;padding:8px 10px;flex-shrink:0}.wizard-panel .section-head h2{font-size:21px}.wizard-panel .config-section{padding-top:25px}.wizard-panel .section-head{gap:10px}.wizard-panel .family-choice{padding-left:10px;column-gap:8px;grid-template-columns:34px 1fr}.wizard-panel .family-icon{width:33px}.wizard-panel .family-choice strong{font-size:12px}.wizard-panel .family-choice small{font-size:8px}.wizard-navigation{bottom:10px;padding:10px;gap:8px}.wizard-navigation .button{padding:10px 11px;font-size:11px;min-width:86px}.wizard-navigation .primary{min-width:110px}.wizard-navigation>p{font-size:9px;max-width:95px}.review-links{gap:6px}.review-links button{font-size:9px}.wizard-panel .designer-group legend{font-size:13px}.wizard-progress{margin-bottom:14px}.config-layout{scroll-margin-top:10px}.toast{bottom:83px}}\n.wizard-nav-center{flex:1;text-align:center;max-width:260px}.wizard-nav-center>p{margin:0;font-size:10px;line-height:1.5;color:var(--muted)}.wizard-nav-center>strong{display:none;font-size:12px;line-height:1.4;color:var(--ink);font-weight:600;margin-top:2px}\n@media(max-width:860px){.wizard-nav-center>strong{display:block}}\n@media(max-width:590px){.wizard-nav-center{max-width:110px}.wizard-nav-center>p{font-size:8px}.wizard-nav-center>strong{font-size:10px}}\n@media print{.wizard-top,.wizard-progress,.wizard-tabs,.wizard-navigation,.wizard-review-note,.review-links{display:none!important}.wizard-panel{padding:0;border:0}.config-layout{display:block}.visual-card{display:none}.summary{break-inside:avoid}.wizard-panel .config-section{display:none!important}}\n"; const EMBED_DATA = { "source": { "filename": "JaWaHaus24_Kalkulation_FIANL.xlsx", "version": 8, "date": "2026-10-08" }, "margin": 0.2, "vat": 0.19, "defaultPvVat": 0.0, "models": [{ "id": "klassiker-130", "family": "Klassiker", "name": "Klassiker 130", "area": 130.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 7.0, "transport": 7500.0, "paintWalls": 325.0, "paintCeilings": 130.0 }, { "id": "klassiker-150", "family": "Klassiker", "name": "Klassiker 150", "area": 150.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 9.0, "transport": 8500.0, "paintWalls": 375.0, "paintCeilings": 150.0 }, { "id": "klassiker-168", "family": "Klassiker", "name": "Klassiker 168", "area": 168.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 9.0, "transport": 9500.0, "paintWalls": 420.0, "paintCeilings": 168.0 }, { "id": "turmdach-120", "family": "Turmdach", "name": "Turmdach 120", "area": 120.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 8.0, "transport": 8000.0, "paintWalls": 300.0, "paintCeilings": 120.0 }, { "id": "turmdach-140", "family": "Turmdach", "name": "Turmdach 140", "area": 140.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 8.0, "transport": 9000.0, "paintWalls": 350.0, "paintCeilings": 140.0 }, { "id": "turmdach-180", "family": "Turmdach", "name": "Turmdach 180", "area": 180.0, "units": 1.0, "stairsPerUnit": 1.0, "doorsPerUnit": 10.0, "transport": 11000.0, "paintWalls": 450.0, "paintCeilings": 180.0 }, { "id": "bungalow-96", "family": "Bungalow", "name": "Bungalow 96", "area": 96.0, "units": 1.0, "stairsPerUnit": 0.0, "doorsPerUnit": 5.0, "transport": 5500.0, "paintWalls": 240.0, "paintCeilings": 96.0 }, { "id": "bungalow-117", "family": "Bungalow", "name": "Bungalow 117", "area": 117.0, "units": 1.0, "stairsPerUnit": 0.0, "doorsPerUnit": 7.0, "transport": 6500.0, "paintWalls": 292.5, "paintCeilings": 117.0 }, { "id": "bungalow-142", "family": "Bungalow", "name": "Bungalow 142", "area": 142.0, "units": 1.0, "stairsPerUnit": 0.0, "doorsPerUnit": 8.0, "transport": 8000.0, "paintWalls": 355.0, "paintCeilings": 142.0 }, { "id": "doppelhaus-256", "family": "Doppelhaus", "name": "Doppelhaus 2 × 128", "area": 256.0, "units": 2.0, "stairsPerUnit": 1.0, "doorsPerUnit": 7.0, "transport": 15000.0, "paintWalls": 640.0, "paintCeilings": 256.0 }], "rates": { "shell": 700, "assemblyFixed": 3000, "assemblyArea": 97.5, "towerExtra": 2000, "bungalowExtra": 0.1, "assemblyBuffer": 0.1, "electric": 70, "plumbing": 35, "underfloor": 50, "screed": 35, "heatPump": 12000, "ventilation": 6000, "commissioning": 3000, "paint": 35, "floor": 40, "tileFloorPerUnit": 12, "tilesPerUnit": 4000, "bathPerUnit": 13000, "door": 500, "miscPerUnit": 1000, "stairs": 4500 }, "garages": [{ "id": "none", "name": "Keine Garage", "cost": 0 }, { "id": "single", "name": "Einzelgarage", "cost": 8000 }, { "id": "double", "name": "Doppelgarage", "cost": 14000 }, { "id": "carport", "name": "Carport", "cost": null, "conceptPrice": 3000 }], "pv": [{ "id": "none", "name": "Keine PV-Anlage", "cost": 0 }, { "id": "pv7", "name": "7 kWp · ohne Speicher", "cost": 10500 }, { "id": "pv10", "name": "10 kWp · 10 kWh Speicher", "cost": 17000 }] }; function mountJaWaHaus24() { const host = window.document.getElementById("jawahaus24-widget"); if (!host) return false; if (host.dataset.jawahausMounted === 'true') return true; const root = host.shadowRoot || host.attachShadow({ mode: 'open' }); root.innerHTML = EMBED_MARKUP; const style = window.document.createElement('style'); style.textContent = EMBED_STYLES; root.prepend(style); const document = { getElementById: id => root.getElementById(id), addEventListener: (...args) => root.addEventListener(...args), get activeElement() { return root.activeElement; }, createElement: (...args) => window.document.createElement(...args), body: root }; host.dataset.jawahausMounted = 'true'; // choices.js const BRAND_NAMES = { Klassiker: 'Classic', Turmdach: 'Stadtvilla', Bungalow: 'Bungalow', Doppelhaus: 'Doppelhaus' }; const REQUEST_SIZES = { Klassiker: [120, 150, 180], Turmdach: [120, 150, 180], Bungalow: [100, 120, 150], Doppelhaus: [240] }; const DEFAULT_DESIGN = { roof: 'anthracite', windows: 'white', facade: 'white', pastel: 'sage', entrance: 'entry1', canopy: 'none', floorType: 'design', floor: 'floor1', doorType: 'modern', door: 'door1', handleColor: 'steel', handle: 'handle1', socket: 'socket1', bath: 'bath1', stairs: 'closed', stairColor: 'oak', shutters: 'manual', walls: 'smooth', smart: 'no', kitchen: 'no', staging: 'no', landscape: 'no', wallbox: 'no', qng: 'no' }; const patterns = (prefix, names) => names.map((name, i) => ({ id: prefix + (i + 1), name, pending: i > 0 })); const OPTIONS = { roof: [{ id: 'anthracite', name: 'Anthrazit', color: '#454a48' }, { id: 'red', name: 'Rot', color: '#a75740', pending: true }], windows: [{ id: 'white', name: 'Weiß', sub: 'Rollläden Hellgrau', color: '#efeee7' }, { id: 'anthracite', name: 'Anthrazit', sub: 'Rollläden Anthrazit', color: '#454a48', pending: true }, { id: 'wood', name: 'Holzdekor', sub: 'Rollladenfarbe im Angebot klären', color: '#ab8155', pending: true }], facade: [{ id: 'white', name: 'Weiß', color: '#f5f4e9' }, { id: 'lightgrey', name: 'Hellgrau', color: '#bcbeb6', pending: true }, { id: 'darkgrey', name: 'Dunkelgrau', color: '#727b74', pending: true }, { id: 'pastel', name: 'Pastell', color: '#becbb3', pending: true }, { id: 'cream', name: 'Creme', color: '#e6d7b7', pending: true }], pastel: [{ id: 'sage', name: 'Salbei', color: '#bdcbb3', pending: true }, { id: 'sand', name: 'Sand', color: '#dac9b2', pending: true }, { id: 'blue', name: 'Blaugrau', color: '#b5c6cd', pending: true }], entrance: patterns('entry', ['Pur', 'Lichtband', 'Horizont', 'Glaslinie', 'Rahmen']), canopy: [{ id: 'none', name: 'Kein Vordach' }, ...patterns('canopy', ['Glas', 'Flachdach', 'Metall', 'Holz', 'Seitenteil']).map(o => ({ ...o, pending: true }))], floorType: [{ id: 'laminate', name: 'Laminat' }, { id: 'parquet', name: 'Parkett', pending: true }, { id: 'design', name: 'Designboden' }], floor: patterns('floor', ['Eiche Natur', 'Eiche Hell', 'Eiche Rauch', 'Nussbaum', 'Steingrau']), doorType: [{ id: 'wood', name: 'Klassische Holztüren', pending: true }, { id: 'glass', name: 'Glastüren', pending: true }, { id: 'modern', name: 'Moderne Türen' }], door: patterns('door', ['Pur', 'Horizont', 'Rahmen', 'Licht', 'Kontrast']), handleColor: [{ id: 'steel', name: 'Edelstahl', color: '#b7bfc0' }, { id: 'gold', name: 'Gold', color: '#b49658', pending: true }, { id: 'black', name: 'Schwarz', color: '#323935', pending: true }], handle: patterns('handle', ['Gerade', 'Rund', 'Winkel', 'Schmal', 'Oval']), socket: patterns('socket', ['Pur Weiß', 'Soft Weiß', 'Rahmen Grau', 'Matt Schwarz', 'Kontrast Weiß']), bath: [{ id: 'bath1', name: 'Modern', sub: 'Walk-In-Dusche' }, { id: 'bath2', name: 'Klassisch', sub: 'Badewanne', pending: true }, { id: 'bath3', name: 'Landhaus', sub: 'Holzoptik', pending: true }, { id: 'bath4', name: 'Minimalistisch', sub: 'Klare Linien', pending: true }, { id: 'bath5', name: 'Familienbad', sub: 'Doppelwaschtisch', pending: true }], stairs: [{ id: 'closed', name: 'Geschlossene Stufen' }, { id: 'open', name: 'Offene Stufen', pending: true }], stairColor: [{ id: 'oak', name: 'Eiche Natur', color: '#b9986c' }, { id: 'light', name: 'Eiche Hell', color: '#d9c7a2', pending: true }, { id: 'walnut', name: 'Nussbaum', color: '#7b5f48', pending: true }, { id: 'white', name: 'Weiß', color: '#eeeeea', pending: true }, { id: 'anthracite', name: 'Anthrazit', color: '#444b47', pending: true }], shutters: [{ id: 'manual', name: 'Manuell' }, { id: 'electric', name: 'Elektrisch', pending: true }], walls: [{ id: 'smooth', name: 'Weiß glatt · Q3' }, { id: 'wallpaper', name: 'Raufaser weiß', pending: true }], smart: [{ id: 'no', name: 'Ohne Smarthome' }, { id: 'yes', name: 'Smarthome wünschen', pending: true }], kitchen: [{ id: 'no', name: 'Keine Küchenplanung' }, { id: 'yes', name: 'Küchenbauer einbinden', pending: true }], staging: [{ id: 'no', name: 'Kein Homestaging' }, { id: 'yes', name: 'Homestaging wünschen', pending: true }], landscape: [{ id: 'no', name: 'Keine Landschaftsplanung' }, { id: 'project', name: 'Landschaftsbauer · einmalig', pending: true }, { id: 'subscription', name: 'Pflege-Abo anfragen', pending: true }], wallbox: [{ id: 'no', name: 'Keine Wallbox' }, { id: 'yes', name: 'Wallbox wünschen', pending: true }], qng: [{ id: 'no', name: 'Standard im Angebot klären' }, { id: 'yes', name: 'QNG / Effizienzstandard prüfen', pending: true }] }; const LABELS = { roof: 'Dachziegelfarbe', windows: 'Fenster & Rollläden', facade: 'Fassade', pastel: 'Pastellton', entrance: 'Eingangstür', canopy: 'Vordach', floorType: 'Bodenart', floor: 'Bodenmuster', doorType: 'Innentürart', door: 'Innentürmodell', handleColor: 'Klinkenfarbe', handle: 'Klinkenmodell', socket: 'Steckdosenmodell', bath: 'Musterbad', stairs: 'Innentreppe', stairColor: 'Treppenfarbe', shutters: 'Rollladenbedienung', walls: 'Innenwände', smart: 'Smarthome', kitchen: 'Küchenplanung', staging: 'Homestaging', landscape: 'Landschaftsbauer', wallbox: 'Wallbox', qng: 'QNG / Effizienzstandard' }; const labelChoice = (key, value) => OPTIONS[key]?.find(o => o.id === value)?.name || 'Keine Auswahl'; const displayName = (model, state) => `${BRAND_NAMES[model.family]} ${state.requestedArea ? (model.units === 2 ? '2 × ' + state.requestedArea / 2 : state.requestedArea) : (model.units === 2 ? '2 × 128' : model.area)}`; function activeKeys(model, state) { const base = ['roof', 'windows', 'facade', 'entrance', 'canopy', 'shutters']; if (state.design.facade === 'pastel') base.push('pastel'); if (state.stage === 'complete') { base.push('floorType', 'floor', 'doorType', 'door', 'handleColor', 'handle', 'socket', 'bath', 'walls'); if (model.stairsPerUnit) base.push('stairs', 'stairColor'); } if (state.stage !== 'shell') base.push('smart', 'wallbox'); base.push('kitchen', 'staging', 'landscape', 'qng'); return base; } function pendingChoices(model, state) { const pending = activeKeys(model, state).filter(k => OPTIONS[k].find(o => o.id === state.design[k])?.pending).map(k => `${LABELS[k]}: ${labelChoice(k, state.design[k])}`); if (state.requestedArea) pending.unshift(`Wunschgröße ${model.units === 2 ? '2 × ' + state.requestedArea / 2 : state.requestedArea} m²: noch nicht kalkuliert`); if (state.garage === 'carport') pending.push('Carport: Preis und Leistungsumfang bestätigen'); return pending; } function selectionLines(model, state) { return activeKeys(model, state).map(k => [LABELS[k], labelChoice(k, state.design[k]) + (k === 'windows' ? ' · ' + OPTIONS.windows.find(o => o.id === state.design.windows).sub : '')]); } // model.js const STAGES = [ { id: 'shell', name: 'Ausbauhaus', sourceName: 'Rohbau Plus', short: 'Innenausbau in Eigenleistung', items: ['Gebäudehülle mit Dach gemäß Kalkulationsannahme', 'Fenster, Haustür und manuelle Rollläden', 'Innenwände und Decken, Gipskarton unverspachtelt', 'Elektroleerrohre und Dosen', 'Transport nach Baden-Württemberg und Hausmontage'], excluded: 'Haustechnik, Estrich mit Fußbodenheizung und weiterer Innenausbau sind in dieser Stufe nicht enthalten.' }, { id: 'technical', name: 'Ausbauhaus Plus', sourceName: 'Technikfertig', short: 'Technik fertig. Ausbau selbst gestalten.', items: ['Alle Leistungen des Ausbauhauses', 'Elektro und Sanitär-Rohinstallation', 'Wärmepumpe, Lüftung und Inbetriebnahme', 'Fußbodenheizung und Estrich'], excluded: 'Spachtel- und Malerarbeiten, Bodenbeläge, fertige Bäder, Innentüren und Treppe sind in dieser Stufe nicht enthalten.' }, { id: 'complete', name: 'Schlüsselfertig', sourceName: 'Bezugsfertig', short: 'Innen fertig. Bereit für Ihren Einzug.', items: ['Alle Leistungen des Ausbauhauses Plus', 'Q3-Spachteln, Grundierung und weiße Anstriche', 'Bodenbeläge und Standardfliesen', 'Bad und Gäste-WC nach Standardumfang', 'Innentüren inklusive Montage', 'Treppe bei mehrgeschossigen Häusern'], excluded: 'Küche, Grundstück, Bodenplatte/Fundament, Kran/Gerüst, Außenanlagen und weitere Baunebenkosten bleiben separat.' } ]; const FAMILIES = [ { name: 'Klassiker', tag: 'Satteldach', desc: '130 / 150 / 168 m²' }, { name: 'Turmdach', tag: 'Turmdach', desc: '120 / 140 / 180 m²' }, { name: 'Bungalow', tag: 'Eine Ebene', desc: '96 / 117 / 142 m²' }, { name: 'Doppelhaus', tag: 'Zwei Wohneinheiten', desc: '2 × 128 m²' } ]; const DEFAULT_STATE = { modelId: 'klassiker-130', stage: 'complete', garage: 'none', pv: 'none', pvVat: 0, requestedArea: null, design: { ...DEFAULT_DESIGN } }; function normaliseState(data, input = {}) { const state = { ...DEFAULT_STATE, design: { ...DEFAULT_DESIGN } }; if (data.models.some(m => m.id === input.modelId)) state.modelId = input.modelId; if (STAGES.some(s => s.id === input.stage)) state.stage = input.stage; if (data.garages.some(g => g.id === input.garage)) state.garage = input.garage; if (data.pv.some(p => p.id === input.pv)) state.pv = input.pv; if (input.pvVat === 0 || input.pvVat === 0.19) state.pvVat = input.pvVat; const model = data.models.find(m => m.id === state.modelId); if (REQUEST_SIZES[model.family].includes(input.requestedArea) && !data.models.some(m => m.family === model.family && m.area === input.requestedArea)) state.requestedArea = input.requestedArea; for (const key of Object.keys(DEFAULT_DESIGN)) if (OPTIONS[key].some(o => o.id === input.design?.[key])) state.design[key] = input.design[key]; return state; } const cents = n => Math.round((n + Number.EPSILON) * 100); function price(data, state) { const m = data.models.find(m => m.id === state.modelId), r = data.rates; const stageIndex = STAGES.findIndex(s => s.id === state.stage); const garage = data.garages.find(g => g.id === state.garage), pv = data.pv.find(p => p.id === state.pv); if (!m || stageIndex < 0 || !garage || !pv || ![0, .19].includes(state.pvVat)) throw new Error('Ungültige Konfiguration'); const assembly = Math.ceil(((r.assemblyFixed + m.area * r.assemblyArea * (m.family === 'Bungalow' ? 1 + r.bungalowExtra : 1) + (m.family === 'Turmdach' ? r.towerExtra : 0)) * (1 + r.assemblyBuffer)) / 100) * 100; const shell = m.area * r.shell + m.transport + assembly; const technical = m.area * (r.electric + r.plumbing + r.underfloor + r.screed) + m.units * (r.heatPump + r.ventilation + r.commissioning); const finish = (m.paintWalls + m.paintCeilings) * r.paint + (m.area - m.units * r.tileFloorPerUnit) * r.floor + m.units * (r.tilesPerUnit + r.bathPerUnit + m.doorsPerUnit * r.door + r.miscPerUnit + m.stairsPerUnit * r.stairs); const costs = [shell, shell + technical, shell + technical + finish]; const houseRawNet = costs[stageIndex] / (1 - data.margin); const houseRawGross = houseRawNet * (1 + data.vat); const houseGross = Math.ceil((houseRawGross - 1e-8) / 1000) * 1000; const houseNetCents = cents(houseGross / (1 + data.vat)); const garageNetCents = garage.cost === null ? 0 : cents(garage.cost / (1 - data.margin)); const pvNetCents = cents(pv.cost / (1 - data.margin)); const houseGrossCents = cents(houseGross); const garageVatCents = cents(garageNetCents / 100 * data.vat), pvVatCents = cents(pvNetCents / 100 * state.pvVat); const garageGrossCents = garageNetCents + garageVatCents, pvGrossCents = pvNetCents + pvVatCents; const netCents = houseNetCents + garageNetCents + pvNetCents; const standardVatCents = houseGrossCents - houseNetCents + garageVatCents; const totalCents = houseGrossCents + garageGrossCents + pvGrossCents; return { model: m, stage: STAGES[stageIndex], garage, pv, costs, assembly, houseRawNet, houseRawGross, houseGrossCents, garageGrossCents, pvGrossCents, houseNetCents, garageNetCents, pvNetCents, netCents, standardVatCents, pvVatCents, totalCents, roundingCents: cents(houseGross - houseRawGross) }; } function changeSelection(data, state, key, value) { if (key === 'family') { const model = data.models.find(m => m.family === value); if (!model) throw new Error('Unbekannter Haustyp'); return { ...state, modelId: model.id, requestedArea: null }; } if (key.startsWith('design.')) { const field = key.slice(7); if (!OPTIONS[field]?.some(o => o.id === value)) throw new Error('Ungültige Ausstattung'); return { ...state, design: { ...state.design, [field]: value } }; } if (key === 'requestedArea') { const area = Number(value), model = data.models.find(m => m.id === state.modelId); if (!REQUEST_SIZES[model.family].includes(area)) throw new Error('Ungültige Wunschgröße'); const existing = data.models.find(m => m.family === model.family && m.area === area); return existing ? { ...state, modelId: existing.id, requestedArea: null } : { ...state, requestedArea: area }; } if (key === 'modelId') { if (!data.models.some(m => m.id === value)) throw new Error('Ungültiges Modell'); return { ...state, modelId: value, requestedArea: null }; } const next = { ...state, [key]: key === 'pvVat' ? Number(value) : value }; const valid = normaliseState(data, next); if (!['stage', 'garage', 'pv', 'pvVat'].includes(key) || valid[key] !== next[key]) throw new Error('Ungültige Auswahl'); return valid; } const signature = state => [state.modelId, state.stage, state.garage, state.pv, state.pv === 'none' ? 0 : state.pvVat, state.requestedArea || '', ...Object.keys(DEFAULT_DESIGN).map(k => state.design?.[k] ?? DEFAULT_DESIGN[k])].join('|'); function addVariant(variants, state) { if (variants.some(v => signature(v.state) === signature(state))) return { variants, message: 'Diese Konfiguration ist bereits im Vergleich.' }; if (variants.length >= 3) return { variants, message: 'Drei Varianten sind gespeichert. Entfernen Sie zuerst eine Variante.' }; const id = globalThis.crypto?.randomUUID?.() ?? 'v-' + Date.now() + '-' + Math.random().toString(36).slice(2); return { variants: [...variants, { id, state: { ...state, design: { ...DEFAULT_DESIGN, ...state.design } } }], message: 'Variante gespeichert. Sie finden sie im Vergleich weiter unten.' }; } function restored(data, raw) { if (!raw || raw.schema !== 1 || raw.sourceVersion !== data.source.version) return { state: { ...DEFAULT_STATE }, variants: [] }; const seen = new Set(); const variants = Array.isArray(raw.variants) ? raw.variants.slice(0, 3).flatMap((v, i) => { if (!v || typeof v !== 'object' || !v.state) return []; const state = normaliseState(data, v.state); if (signature(state) !== signature(v.state) || seen.has(signature(state))) return []; seen.add(signature(state)); return [{ id: 'restored-' + i, state }]; }) : []; return { state: normaliseState(data, raw.state), variants }; } // previews.js function samplePreview(key, option, design) { const n = Number(option.id.match(/\d+/)?.[0] || 1), color = option.color; if (color) return ``; if (key === 'floor') { const shades = ['#b7986e', '#d9c6a5', '#988879', '#7c5a44', '#9d9e94']; return ``; } if (key === 'entrance' || key === 'door') { const glass = key === 'door' && design.doorType === 'glass', wood = key === 'door' && design.doorType === 'wood'; const fill = key === 'entrance' ? (design.windows === 'anthracite' ? '#444c48' : design.windows === 'wood' ? '#a9845c' : '#eeeae0') : glass ? '#b8cdca' : wood ? '#b79367' : '#f1efe6'; return ``; } if (key === 'socket') return ``; if (key === 'handle') return ``; if (key === 'bath') { const tint = ['#e2e9e1', '#eee5d9', '#e5d5bb', '#e7e8e4', '#d8e3e4'][n - 1]; return ``; } if (key === 'canopy' && option.id !== 'none') return ``; return ''; } // illustration.js function familyIcon(family) { const path = family === 'Bungalow' ? 'M4 22 25 10l23 12M8 21v16h36V21' : family === 'Turmdach' ? 'M3 17 14 7h25l12 10M8 17v24h38V17' : family === 'Doppelhaus' ? 'M2 20 15 7l13 13 13-13 13 13M6 19v23h43V19M28 20v22' : 'M3 22 27 4l23 18M8 19v23h37V19'; return ``; } function houseIllustration(m, state) { const d = { ...DEFAULT_DESIGN, ...state.design }; const roofColor = d.roof === 'red' ? '#a15c44' : '#58685d', roofFront = d.roof === 'red' ? '#824533' : '#3e5044'; const facadeColor = (d.facade === 'pastel' ? OPTIONS.pastel.find(x => x.id === d.pastel) : OPTIONS.facade.find(x => x.id === d.facade)).color; const facadeSide = d.facade === 'darkgrey' ? '#626b65' : d.facade === 'cream' ? '#d5c5a5' : d.facade === 'lightgrey' ? '#a3a69f' : d.facade === 'pastel' ? facadeColor : '#daddcd'; const frame = d.windows === 'anthracite' ? '#414b44' : d.windows === 'wood' ? '#a9845c' : '#dedfcf'; const low = m.family === 'Bungalow', double = m.family === 'Doppelhaus', tower = m.family === 'Turmdach'; const top = low ? 240 : 185, bottom = 330, peak = top - (low ? 63 : 73); const roof = tower ? `` : ``; const windows = [200, 290].map(x => ``).join(''); const upper = low ? '' : ``; const solar = state.pv === 'none' ? '' : ``; const garage = state.garage === 'none' ? '' : `${state.garage === 'double' ? '' : ''}`; return ``; } // wizard.js const ALL_STEPS = [ { id: 'house-choice', label: 'Haus & Größe' }, { id: 'stage-choice', label: 'Ausbaustufe' }, { id: 'appearance-choice', label: 'Außenfarben' }, { id: 'entrance-choice', label: 'Eingang & Rollläden' }, { id: 'floor-choice', label: 'Böden & Wände', completeOnly: true }, { id: 'doors-choice', label: 'Türen & Details', completeOnly: true }, { id: 'interior-choice', label: 'Bad & Treppe', completeOnly: true }, { id: 'extra-choice', label: 'Garage & PV' }, { id: 'addons-choice', label: 'Komfort & Extras' }, { id: 'request-choice', label: 'Prüfen & Anfrage' } ]; const availableSteps = state => ALL_STEPS.filter(s => !s.completeOnly || state.stage === 'complete'); function createWizard(doc, { initialId = 'house-choice', onMove = () => { } } = {}) { let currentId = initialId, state = { stage: 'complete' }; const el = id => doc.getElementById(id); function render(nextState) { state = nextState; const steps = availableSteps(state); if (!steps.some(s => s.id === currentId)) currentId = steps[0].id; const index = steps.findIndex(s => s.id === currentId), current = steps[index]; ALL_STEPS.forEach(step => { el(step.id).hidden = step.id !== currentId; }); steps.forEach((step, i) => { el('number-' + step.id).textContent = String(i + 1).padStart(2, '0'); }); el('wizard-count').textContent = `Schritt ${index + 1} von ${steps.length}`; el('wizard-label').textContent = current.label; el('wizard-progress').value = index + 1; el('wizard-progress').max = steps.length; el('wizard-progress').setAttribute('aria-valuetext', `Schritt ${index + 1} von ${steps.length}: ${current.label}`); el('wizard-tabs').innerHTML = steps.map((step, i) => ``).join(''); el('wizard-back').disabled = index === 0; el('wizard-next').hidden = index === steps.length - 1; el('wizard-next').textContent = index === steps.length - 2 ? 'Zur Übersicht →' : 'Weiter →'; el('wizard-next-hint').textContent = index === steps.length - 1 ? 'Prüfen Sie Ihre Auswahl und bereiten Sie Ihre Anfrage vor.' : `Als Nächstes: ${steps[index + 1].label}`; el('wizard-review-note').hidden = currentId !== 'request-choice'; el('review-links').innerHTML = steps.slice(0, -1).map(step => ``).join(''); return { index, total: steps.length, currentId }; } function go(id, { focus = true } = {}) { if (!availableSteps(state).some(s => s.id === id)) return false; currentId = id; render(state); onMove(currentId); if (focus) { el('configurator').scrollIntoView({ behavior: 'smooth', block: 'start' }); el('heading-' + id).focus({ preventScroll: true }); } return true; } function move(direction) { const steps = availableSteps(state), index = steps.findIndex(s => s.id === currentId), next = steps[index + direction]; return next ? go(next.id) : false; } return { render, go, next: () => move(1), back: () => move(-1), get currentId() { return currentId; } }; } // app-v2.js const $ = id => document.getElementById(id); const money = n => new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 2, minimumFractionDigits: n % 100 === 0 ? 0 : 2 }).format(n / 100); const esc = s => String(s).replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c])); const STORAGE = 'jawahaus24-configurator-v1'; let data, state = { ...DEFAULT_STATE, design: { ...DEFAULT_DESIGN } }, variants = [], storageOK = true, toastTimer, wizard; const radio = (key, value, checked, content, css) => { const id = `${key.replace('.', '-')}-${String(value).replace(/\s/g, '-')}`; return `${content}`; }; const rows = items => items.map(([a, b]) => `

${esc(a)}

${esc(b)}

`).join(''); function toast(message) { $('toast').textContent = message; $('toast').classList.add('visible'); clearTimeout(toastTimer); toastTimer = setTimeout(() => $('toast').classList.remove('visible'), 5000); } function persist() { try { localStorage.setItem(STORAGE, JSON.stringify({ schema: 1, sourceVersion: data.source.version, state, variants, stepId: wizard?.currentId || 'house-choice' })); } catch { if (storageOK) { storageOK = false; toast('Speicherung ist gesperrt. Die Auswahl bleibt für diese Sitzung verfügbar.'); } } } function knownTotal(p, s) { return s.requestedArea ? p.garageGrossCents + p.pvGrossCents : p.totalCents; } function totalLabel(p, s) { return s.requestedArea ? 'Preis auf Anfrage' : money(knownTotal(p, s)) + (pendingChoices(p.model, s).length ? ' + offene Aufpreise' : ''); } function designGroup(key, style = 'compact') { const options = OPTIONS[key]; return `

${LABELS[key]}${key === 'entrance' ? 'Farbe passend zu den Fenstern' : ''}

${options.map(o => radio('design.' + key, o.id, o.id === state.design[key], `${samplePreview(key, o, state.design)}${o.name}${o.sub ? `${o.sub}` : ''}${o.pending ? 'Preis auf Anfrage' : o.id === 'none' || o.id === 'no' ? 'Nicht gewählt' : 'Standard / Planumfang'}`, 'design-choice ' + (o.color ? 'swatch-choice' : '') + (style === 'sample' ? ' sample-choice' : ''))).join('')}

`; } function renderDesign(p) { $('exterior-options').innerHTML = designGroup('roof') + designGroup('windows') + designGroup('facade') + (state.design.facade === 'pastel' ? designGroup('pastel') : ''); $('entrance-options').innerHTML = designGroup('entrance', 'sample') + designGroup('canopy', 'sample') + designGroup('shutters'); $('interior-disabled').hidden = state.stage === 'complete'; $('interior-options').hidden = state.stage !== 'complete'; $('interior-options').innerHTML = designGroup('floorType') + designGroup('floor', 'sample') + designGroup('walls'); $('door-options').innerHTML = designGroup('doorType') + designGroup('door', 'sample') + designGroup('handleColor') + designGroup('handle', 'sample') + designGroup('socket', 'sample'); $('bath-options').innerHTML = designGroup('bath', 'sample') + (p.model.stairsPerUnit ? designGroup('stairs') + designGroup('stairColor') : '

Beim Bungalow wird keine Innentreppe benötigt.

'); $('comfort-options').innerHTML = state.stage === 'shell' ? '

Smarthome und Wallbox können ab Ausbauhaus Plus angefragt werden.

' : designGroup('smart') + designGroup('wallbox'); $('addons-options').innerHTML = designGroup('kitchen') + designGroup('staging') + designGroup('landscape') + designGroup('qng'); const lines = selectionLines(p.model, state), full = [['Haus', displayName(p.model, state)], ['Wohnfläche', (state.requestedArea || p.model.area) + ' m²' + (p.model.units === 2 ? ' · beide Hälften' : '')], ['Ausbaustufe', p.stage.name], ['Garage', p.garage.name], ['Photovoltaik', p.pv.name], ...lines]; $('full-selection').innerHTML = rows(full); $('summary-selection').innerHTML = rows(lines); } function render() { const focused = document.activeElement?.id, p = price(data, state), m = p.model, pending = pendingChoices(m, state), name = displayName(m, state), area = state.requestedArea || m.area; $('model-title').textContent = name; $('summary-title').textContent = name; $('model-tag').textContent = FAMILIES.find(f => f.name === m.family).tag; $('model-stats').textContent = `${area} m² Wohnfläche · ${m.units} ${m.units === 1 ? 'Wohneinheit' : 'Wohneinheiten'}`; $('summary-meta').textContent = `${area} m²${m.units === 2 ? ' · beide Haushälften' : ''} · ${p.stage.name}`; $('house-visual').innerHTML = houseIllustration({ ...m, name }, state); $('families').innerHTML = FAMILIES.map(f => radio('family', f.name, f.name === m.family, `${familyIcon(f.name)}${BRAND_NAMES[f.name]}${f.name === 'Klassiker' ? 'Satteldach' : f.name === 'Turmdach' ? 'Stadtvilla mit Turmdach' : f.desc}`, 'family-choice')).join(''); $('sizes').innerHTML = data.models.filter(x => x.family === m.family).map(x => radio('modelId', x.id, x.id === m.id && !state.requestedArea, `${x.units === 2 ? '2 × 128' : x.area} m²Kalkuliertes Modell`, 'size-choice')).join(''); const requests = REQUEST_SIZES[m.family].filter(a => !data.models.some(x => x.family === m.family && x.area === a)); $('request-sizes').innerHTML = requests.length ? `

Weitere Größen aus Ihrem Konzept · Preis auf Anfrage

${requests.map(a => radio('requestedArea', a, a === state.requestedArea, `${m.units === 2 ? '2 × ' + a / 2 : a} m²Wunschgröße`, 'size-choice request-size')).join('')}

` : ''; $('request-size-notice').hidden = !state.requestedArea; $('double-notice').hidden = m.units !== 2; $('stages').innerHTML = STAGES.map((s, i) => radio('stage', s.id, s.id === state.stage, `STUFE ${i + 1}${s.name}${s.short}${state.requestedArea ? 'Auf Anfrage' : money(price(data, { ...state, stage: s.id }).houseGrossCents)}`, 'stage-choice')).join(''); $('stage-details').innerHTML = `

${p.stage.name}

${i}

${p.stage.excluded}

`; $('garages').innerHTML = data.garages.map(g => radio('garage', g.id, g.id === state.garage, `${g.name}${g.id === 'none' ? 'Ohne Zusatzkosten' : g.id === 'carport' ? 'Konzept-Richtwert 3.000 € · offen' : g.id === 'single' ? 'Ein Stellplatz' : 'Zwei Stellplätze'}${g.cost === null ? 'Preis auf Anfrage' : g.id === 'none' ? '0 €' : '+ ' + money(price(data, { ...state, garage: g.id }).garageGrossCents)}`, 'option-choice')).join(''); $('pv-options').innerHTML = data.pv.map(v => radio('pv', v.id, v.id === state.pv, `${v.name}${v.id === 'none' ? 'Ohne Zusatzkosten' : 'inkl. ' + (state.pvVat === 0 ? '0' : '19') + ' % USt.'}${v.id === 'none' ? '0 €' : '+ ' + money(price(data, { ...state, pv: v.id }).pvGrossCents)}`, 'option-choice')).join(''); $('pv-tax-field').hidden = state.pv === 'none'; $('pv-tax').value = String(state.pvVat); $('price-heading').textContent = state.requestedArea ? 'Hauspreis noch offen' : pending.length ? 'Bekannte Bruttopreissumme' : 'Konfigurierter Bruttopreis'; $('total-price').textContent = state.requestedArea ? 'Auf Anfrage' : money(p.totalCents); $('total-price').classList.toggle('request-total', Boolean(state.requestedArea)); $('price-caption').textContent = state.requestedArea ? `Bekannte Extras: ${money(knownTotal(p, state))} brutto` : pending.length ? 'zzgl. offener Aufpreise · kein vollständiger Endpreis' : 'inkl. ausgewiesener Umsatzsteuer'; $('house-price').textContent = state.requestedArea ? 'Auf Anfrage' : money(p.houseGrossCents); $('garage-price').textContent = state.garage === 'carport' ? 'Auf Anfrage' : money(p.garageGrossCents); $('pv-price').textContent = money(p.pvGrossCents); $('house-stage').textContent = p.stage.name; $('garage-label').textContent = p.garage.name; $('pv-label').textContent = p.pv.name; $('pending-price').hidden = pending.length === 0; $('pending-price').innerHTML = `${pending.length} ${pending.length === 1 ? 'Preisposition ist' : 'Preispositionen sind'} noch offen

Offene Positionen ansehen

${esc(x)}

Diese Positionen sind in der bekannten Summe nicht bepreist. Das individuelle Angebot enthält den vollständigen Preis.`; const tax = state.requestedArea ? [['Bekannte Extras brutto', money(knownTotal(p, state))], ['Hauspreis', 'noch nicht kalkuliert'], ['Netto / Steuer gesamt', 'nach Hauskalkulation verfügbar']] : [['Haus kalkuliert brutto', money(Math.round(p.houseRawGross * 100))], ['Rundung Hauspreis', '+ ' + money(p.roundingCents)], ['Bekannte Summe netto', money(p.netCents)], ['USt. Haus/Garage · 19 %', money(p.standardVatCents)], ['USt. PV · ' + (state.pvVat === 0 ? '0' : '19') + ' %', money(p.pvVatCents)], ['Bekannte Summe brutto', money(p.totalCents)]]; $('tax-breakdown').innerHTML = rows(tax); $('save-variant').disabled = false; $('export-current').disabled = false; renderDesign(p); renderCompare(); $('wizard-price').textContent = state.requestedArea ? 'Auf Anfrage' : money(p.totalCents) + (pending.length ? ' + offene Aufpreise' : ''); $('wizard-nav-price').textContent = $('wizard-price').textContent; wizard.render(state); if (focused && $(focused)) $(focused).focus({ preventScroll: true }); } function renderCompare() { $('variant-count').textContent = String(variants.length); $('export-comparison').hidden = variants.length === 0; if (!variants.length) { $('compare-content').innerHTML = '

Was wäre, wenn?

Andere Größe, andere Farben, ein anderes Musterbad.
Speichern Sie Ihre erste Variante und vergleichen Sie die Möglichkeiten.

Erste Variante konfigurieren ↑

'; return; } const prices = variants.map(v => price(data, v.state)); const complete = variants.map((v, i) => pendingChoices(prices[i].model, v.state).length === 0), hasPending = complete.some(x => !x), minimum = hasPending ? null : Math.min(...prices.map(p => p.totalCents)); $('compare-content').innerHTML = (hasPending ? '

Mindestens eine Variante hat offene Preise. Ein Vergleich der vollständigen Endpreise ist erst nach Angebot möglich.

' : '') + `

${variants.map((v, i) => { const p = prices[i], pending = pendingChoices(p.model, v.state); return `

VARIANTE ${String(i + 1).padStart(2, '0')}

${displayName(p.model, v.state)}

${p.model.units === 2 ? 'Beide Haushälften · ' : ''}${v.state.requestedArea || p.model.area} m²

${v.state.requestedArea ? 'Auf Anfrage' : money(p.totalCents)}

${pending.length ? `${pending.length} offene Preispositionen · bekannte Summe` : variants.length === 1 ? 'Bruttopreis inkl. ausgewiesener USt.' : hasPending ? 'Vollständig kalkulierte Standardauswahl' : p.totalCents === minimum ? 'Günstigste gespeicherte Variante' : '+ ' + money(p.totalCents - minimum) + ' zur günstigsten Variante'}

${rows([['Ausbaustufe', p.stage.name], ['Haus brutto', v.state.requestedArea ? 'Auf Anfrage' : money(p.houseGrossCents)], ['Garage', p.garage.name], ['Garage brutto', v.state.garage === 'carport' ? 'Auf Anfrage' : money(p.garageGrossCents)], ['Photovoltaik', p.pv.name], ['PV brutto', money(p.pvGrossCents)], ['PV-Umsatzsteuer', v.state.pv === 'none' ? 'Nicht ausgewählt' : v.state.pvVat === 0 ? '0 % (begünstigt)' : '19 %'], ['Wohneinheiten', String(p.model.units)], ...selectionLines(p.model, v.state)])}

`; }).join('')}

`; } function textSummary(s, index) { const p = price(data, s), pending = pendingChoices(p.model, s), details = selectionLines(p.model, s).map(([k, v]) => `${k}: ${v}`).join('\n'); return `${index ? 'VARIANTE ' + index + '\n' : ''}${displayName(p.model, s)} · ${s.requestedArea || p.model.area} m²${p.model.units === 2 ? ' · beide Haushälften zusammen' : ''}\nAusbaustufe: ${p.stage.name}\nHaus brutto: ${s.requestedArea ? 'Preis auf Anfrage' : money(p.houseGrossCents) + ' (Website-Rundung)'}\nGarage: ${p.garage.name} · ${s.garage === 'carport' ? 'Preis auf Anfrage' : money(p.garageGrossCents) + ' brutto'}\nPV: ${p.pv.name} · ${money(p.pvGrossCents)} brutto\nPV-Umsatzsteuer: ${s.pv === 'none' ? 'nicht ausgewählt' : s.pvVat === 0 ? '0 % bei erfüllten Voraussetzungen' : '19 %'}\n${s.requestedArea ? 'Bekannte Extras brutto: ' + money(knownTotal(p, s)) : 'Bekannte Summe netto: ' + money(p.netCents) + '\nUSt. Haus/Garage (19 %): ' + money(p.standardVatCents) + '\nUSt. PV: ' + money(p.pvVatCents)}\n${pending.length ? 'BEKANNTE SUMME / KEIN ENDPREIS' : 'GESAMTPREIS BRUTTO'}: ${totalLabel(p, s)}\n\nAUSSTATTUNG\n${details}\n${pending.length ? '\nOFFENE PREISE\n' + pending.map(x => '- ' + x).join('\n') + '\n' : ''}`; } function requestContacts() { return [['Name', 'customer-name'], ['E-Mail', 'customer-email'], ['Telefon', 'customer-phone'], ['Bauort / PLZ', 'project-location'], ['Nachricht', 'customer-message']].map(([label, id]) => [label, $(id).value.trim()]).filter(([, value]) => value).map(([label, value]) => `${label}: ${value}`).join('\n'); } function outputText(compare = false, request = false) { return `JaWaHaus24 · ${request ? 'Angebotsanfrage' : compare ? 'Variantenvergleich' : 'Hauskonfiguration'}\nPreisgrundlage: Version 8 vom 08.10.2026\nErstellt: ${new Date().toLocaleDateString('de-DE')}\n\n${request ? requestContacts() + '\n\n' : ''}${compare ? variants.map((v, i) => textSummary(v.state, i + 1)).join('\n') : textSummary(state)}\nGEWÜNSCHTER STANDARD LAUT KONZEPT\nAluminium-Regenrinnen; Außenfensterbänke passend zur Fensterfarbe; Innenfensterbänke Kunststein weiß; Außenwasserhahn; Außenlicht und Außensteckdose. Diese Details, Heizungsmarke, PV-Anbieter und gegebenenfalls QNG/Effizienzstandard im Angebot bestätigen. Keine automatische Preiszusage für zusätzliche Standarddetails.\n\nHauspreise: 20 % Zielmarge und Website-Rundung auf volle 1.000 €. Garage und PV nach aktueller Kalkulation, neue Ausstattungen ohne bestätigte Aufpreise bleiben offen.\nUnverbindliche Planwerte, kein Gesamtbudget für das Bauprojekt.\nNicht enthalten: Grundstück, Bodenplatte/Fundament, Erdarbeiten, Kran/Gerüst, Küche, Außenanlagen, Erschließung, Hausanschlüsse, Planung/Genehmigungen und weitere Baunebenkosten. Garage: Fundament und Zufahrt separat. PV: möglicher Zählerschrank-Umbau separat.\nMusterillustrationen sind keine zugesicherten Lieferantenprodukte. Lieferumfang, Aufmaße und Preise vor einem verbindlichen Festpreis bestätigen.\n`; } function download(compare = false, request = false) { if (request && !$('request-form').reportValidity()) return; const url = URL.createObjectURL(new Blob(['\uFEFF' + outputText(compare, request)], { type: 'text/plain;charset=utf-8' })); const a = document.createElement('a'); a.href = url; a.download = request ? 'JaWaHaus24_Angebotsanfrage.txt' : compare ? 'JaWaHaus24_Variantenvergleich.txt' : 'JaWaHaus24_Hauskonfiguration.txt'; document.body.append(a); a.click(); a.remove(); setTimeout(() => URL.revokeObjectURL(url), 1000); toast(request ? 'Angebotsanfrage heruntergeladen. Sie können sie an den Vertrieb senden.' : compare ? 'Vergleich heruntergeladen.' : 'Konfiguration heruntergeladen.'); } function emailRequest() { const recipient = $('request-recipient'); if (!recipient.value.trim()) { recipient.focus(); toast('Tragen Sie zuerst die Vertriebsadresse als Empfänger ein.'); return; } if (!$('request-form').reportValidity()) return; const a = document.createElement('a'); a.href = `mailto:${encodeURIComponent(recipient.value.trim())}?subject=${encodeURIComponent('Angebotsanfrage JaWaHaus24 · ' + displayName(price(data, state).model, state))}&body=${encodeURIComponent(outputText(false, true))}`; document.body.append(a); a.click(); a.remove(); toast('E-Mail-Entwurf vorbereitet. Prüfen und versenden Sie ihn in Ihrem E-Mail-Programm.'); } function handleChange(event) { if (!data) return; const t = event.target; let key = t.name, value = t.value; if (t.id === 'pv-tax') key = 'pvVat'; if (!['family', 'modelId', 'requestedArea', 'stage', 'garage', 'pv', 'pvVat'].includes(key) && !key?.startsWith('design.')) return; try { state = changeSelection(data, state, key, value); persist(); render(); } catch { toast('Diese Auswahl konnte nicht übernommen werden.'); } } function handleClick(event) { if (!data) return; const anchor = event.target.closest('a[href^="#"]'); if (anchor) { const id = anchor.getAttribute('href').slice(1); if (ALL_STEPS.some(s => s.id === id)) { event.preventDefault(); wizard.go(id); return; } const target = $(id); if (target) { event.preventDefault(); target.scrollIntoView({ behavior: 'smooth', block: 'start' }); return; } } const button = event.target.closest('button'); if (!button) return; if (button.id === 'wizard-next') { wizard.next(); return; } if (button.id === 'wizard-back') { wizard.back(); return; } if (button.dataset.step) { wizard.go(button.dataset.step); return; } if (button.id === 'save-variant') { const result = addVariant(variants, state); variants = result.variants; persist(); renderCompare(); toast(result.message); } if (button.id === 'export-current') download(); if (button.id === 'export-comparison') download(true); if (button.id === 'export-request') download(false, true); if (button.id === 'email-request') emailRequest(); if (button.dataset.remove) { variants = variants.filter(v => v.id !== button.dataset.remove); persist(); renderCompare(); toast('Variante entfernt.'); } if (button.dataset.load) { const v = variants.find(v => v.id === button.dataset.load); if (v) { state = normaliseState(data, v.state); render(); wizard.go('house-choice'); toast('Gespeicherte Variante mit allen Ausstattungen geladen.'); } } } async function init() { try { data = EMBED_DATA; if (data.models.length !== 10 || data.margin !== .2) throw new Error('Ungültige Preisdaten'); let initialId = 'house-choice'; try { const raw = JSON.parse(localStorage.getItem(STORAGE)); const saved = restored(data, raw); state = saved.state; variants = saved.variants; if (raw?.schema === 1 && raw?.sourceVersion === data.source.version && typeof raw.stepId === 'string') initialId = raw.stepId; } catch { state = normaliseState(data); variants = []; } wizard = createWizard(document, { initialId, onMove: persist }); document.addEventListener('change', handleChange); document.addEventListener('click', handleClick); $('request-form').addEventListener('submit', e => e.preventDefault()); render(); const hash = globalThis.location?.hash?.slice(1); if (ALL_STEPS.some(s => s.id === hash)) wizard.go(hash); } catch (error) { $('load-error').hidden = false; $('total-price').textContent = 'Nicht verfügbar'; $('save-variant').disabled = true; $('export-current').disabled = true; console.error('Konfigurator konnte nicht gestartet werden:', error); } } init(); return true; } if (!mountJaWaHaus24()) { const observer = new MutationObserver(() => { if (mountJaWaHaus24()) observer.disconnect(); }); observer.observe(window.document.documentElement, { childList: true, subtree: true }); window.setTimeout(() => observer.disconnect(), 30000); } })();

Ein Zuhause.
Nach Ihren Vorstellungen.\n

Klassiker 130

Welches Haus passt zu Ihnen?

Wie viel möchten Sie selbst machen?

Geben Sie Ihrem Haus Charakter.

Ein Eingang, der zu Ihnen passt.

Ihr Boden. Ihre Atmosphäre.

Die Details machen den Unterschied.

Ihr Badezimmer. Ihr Rückzugsort.

Die Extras für Ihren Alltag.

Mehr Möglichkeiten für Ihr Zuhause.

Aus Ihrer Idee wird eine Anfrage.

Ihre Varianten nebeneinander.

Was wäre, wenn?

Wissen, was dabei ist.

${p.stage.name}

Was wäre, wenn?

${displayName(p.model, v.state)}

Ein Zuhause.Nach Ihren Vorstellungen.\n

Klassiker 130

Welches Haus passt zu Ihnen?

Wie viel möchten Sie selbst machen?

Geben Sie Ihrem Haus Charakter.

Ein Eingang, der zu Ihnen passt.

Ihr Boden. Ihre Atmosphäre.

Die Details machen den Unterschied.

Ihr Badezimmer. Ihr Rückzugsort.

Die Extras für Ihren Alltag.

Mehr Möglichkeiten für Ihr Zuhause.

Aus Ihrer Idee wird eine Anfrage.

Ihre Varianten nebeneinander.

Was wäre, wenn?

Wissen, was dabei ist.

${p.stage.name}

Was wäre, wenn?

${displayName(p.model, v.state)}

Ein Zuhause.
Nach Ihren Vorstellungen.\n