/* Hausplaner (Abschnitt #hausplaner): nutzt die Farben und Maße aus relaunch.css, alle Klassen tragen das Präfix hp- */
.hp [hidden]{display:none!important}
.hp button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hp{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.hp-buehne{position:sticky;top:104px}
.hp-rahmen{aspect-ratio:4/3;max-height:calc(100vh - 290px);min-height:320px;width:100%;background:linear-gradient(#F6F5F1,var(--kalk) 70%);border-radius:var(--r);overflow:hidden;position:relative;touch-action:pan-y;transition:background .8s}
.hp-rahmen canvas{display:block;width:100%;height:100%;cursor:grab;opacity:0;transition:opacity .6s}
.hp-bereit .hp-rahmen canvas{opacity:1}
.hp-rahmen canvas:active{cursor:grabbing}
.hp-laedt{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:32px;color:var(--text-3);font-size:.95rem;pointer-events:none}
.hp-bereit .hp-laedt{display:none}
.hp-ohne3d .hp-laedt span{display:none}
.hp-laedt em{display:none;font-style:normal}
.hp-ohne3d .hp-laedt em{display:block}
.hp-ecke{position:absolute;font-size:.88rem;color:var(--text-2);transition:color .6s;pointer-events:none}
.hp-ecke b{display:block;font-size:1.05rem;font-weight:600;color:var(--text);transition:color .6s}
.hp-phase{left:24px;top:20px}
.hp-dreh{right:24px;top:22px;font-size:.85rem;color:var(--text-3)}
.hp-licht{position:absolute;right:20px;bottom:20px;display:flex;border:1px solid var(--fuge-2);border-radius:var(--r);overflow:hidden;background:rgba(250,250,247,.85);font-size:.88rem}
.hp .hp-licht button{padding:7px 14px;color:var(--text-2)}
.hp .hp-licht button[aria-pressed=true]{background:var(--schiefer);color:#fff}
.hp-rahmen.abend{background:linear-gradient(#171c26,#3a3f4b 75%)}
.hp-rahmen.abend .hp-ecke{color:#AEB4BD}.hp-rahmen.abend .hp-ecke b{color:#fff}
.hp-griff{position:absolute;left:0;top:0;transform:translate(-50%,-50%);padding:6px 12px;border-radius:99px;background:var(--schiefer);color:#fff;font-size:.82rem;font-weight:600;white-space:nowrap;cursor:ew-resize;touch-action:none;user-select:none;font-variant-numeric:tabular-nums;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.hp-griff::before{content:'↔';margin-right:7px;opacity:.7}
.hp:not(.hp-bereit) .hp-griff,.hp:not(.hp-bereit) .hp-ecke,.hp:not(.hp-bereit) .hp-licht{visibility:hidden}

.hp-flaeche{display:flex;gap:10px 36px;align-items:flex-end;flex-wrap:wrap;padding:16px 0 14px;border-bottom:1px solid var(--fuge-2);font-size:.9rem;color:var(--text-2)}
.hp-flaeche b{display:block;font:600 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--display);letter-spacing:-.03em;color:var(--text);font-variant-numeric:tabular-nums}
.hp-flaeche span{display:block}
.hp-unter{display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;padding-top:14px;font-size:.92rem;color:var(--text-2)}
.hp-unter b{color:var(--text);font-weight:500}
.hp-teilen{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;padding-top:10px;font-size:.92rem;color:var(--text-2)}
.hp .hp-teilen button{font-weight:600;color:var(--text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--fuge-2);transition:text-decoration-color .25s}
.hp .hp-teilen button:hover{text-decoration-color:var(--rot)}
.hp-teilen em{font-style:normal;color:#1F7A46}

.hp-vorlagen{font-size:.92rem;color:var(--text-2)}
.hp-haeuser{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px;align-items:start}
.hp .hp-haeuser button{text-align:left;display:flex;flex-direction:column;align-items:stretch}
.hp-haeuser img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);margin-bottom:7px;transition:opacity .2s}
.hp-haeuser button:hover img{opacity:.85}
.hp-haeuser b{display:block;font-size:.85rem;font-weight:600;line-height:1.25;color:var(--text)}

.hp-steps{list-style:none;margin-top:28px;border-top:1px solid var(--fuge-2)}
.hp-step{border-bottom:1px solid var(--fuge-2)}
.hp .hp-step__kopf{display:grid;grid-template-columns:2em 1fr auto;gap:8px;align-items:baseline;width:100%;text-align:left;padding:17px 0}
.hp-step__kopf i{font-style:normal;font-size:.88rem;color:var(--text-3);font-variant-numeric:tabular-nums}
.hp-step__kopf b{font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.hp-step__kopf span{font-size:.9rem;color:var(--text-2);text-align:right}
.hp-step.zu .hp-step__kopf b{color:var(--text-3);font-weight:500}
.hp-step.an .hp-step__kopf i{color:var(--rot-dunkel)}
.hp-step__body{display:none;padding:2px 0 26px 2em}
.hp-step.an .hp-step__body{display:block}
.hp-gruppe{font-size:.85rem;color:var(--text-3);margin:18px 0 10px}
.hp-gruppe:first-child{margin-top:0}
.hp-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hp-opts--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp .hp-opt{border:1px solid var(--fuge-2);border-radius:var(--r);padding:11px 12px 10px;text-align:left;transition:border-color .2s;background:#fff}
.hp .hp-opt:hover{border-color:var(--text-3)}
.hp .hp-opt[aria-pressed=true]{border-color:var(--text);box-shadow:inset 0 0 0 1px var(--text)}
.hp-opt svg{display:block;width:56px;height:36px;margin-bottom:8px;fill:none;stroke:var(--text);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.hp-muster{display:block;height:38px;border-radius:2px;margin-bottom:9px;background-size:110px 110px;background-color:var(--putz)}
.hp-farbe{display:block;height:20px;border-radius:2px;margin-bottom:9px;border:1px solid rgba(0,0,0,.08)}
.hp-opt b{display:block;font-weight:600;font-size:.93rem;line-height:1.25}
.hp-opt small{display:block;font-size:.8rem;color:var(--text-2);line-height:1.3;margin-top:2px}
.hp-regler{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:baseline;margin-top:12px}
.hp-regler label{font-size:.95rem;font-weight:500}
.hp-regler output{font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.hp-regler input{grid-column:1/-1;width:100%;accent-color:var(--schiefer);height:28px}
.hp-tipp{font-size:.85rem;color:var(--text-3);margin-top:10px}
.hp-ergebnis{margin-top:14px;font-size:.92rem;color:var(--text-2)}
.hp-ergebnis b{display:block;color:var(--text);font-weight:600}
.hp-ergebnis b.eng{color:var(--rot-dunkel)}
.hp .hp-weiter{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;margin-top:22px;border:1px solid var(--text);border-radius:var(--r);font-weight:600;font-size:.98rem;transition:background .25s,color .25s}
.hp .hp-weiter:hover{background:var(--text);color:#fff}

.hp-fertig{display:none;padding:28px 0 0;scroll-margin-top:110px}
.hp-fertig.an{display:block}
.hp-fertig h3{margin-bottom:8px}
.hp-fertig p{color:var(--text-2);max-width:44ch}
.hp-cta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:22px}
.hp-fertig small{display:block;margin-top:14px;font-size:.85rem;color:var(--text-3)}
.hp-fuss{margin-top:40px;font-size:.85rem;color:var(--text-3);max-width:80ch}

@media (max-width:900px){
  .hp{grid-template-columns:minmax(0,1fr);gap:20px}
  .hp-buehne{top:64px;z-index:3;background:var(--putz);padding:8px 0 6px;margin:0 -20px;padding-left:20px;padding-right:20px;border-bottom:1px solid var(--fuge-2)}
  .hp-rahmen{aspect-ratio:auto;height:34vh;min-height:220px;max-height:none}
  .hp-flaeche{padding:10px 0 8px;gap:4px 20px;border-bottom:0}
  .hp-flaeche b{font-size:1.5rem}
  .hp-flaeche p{font-size:.82rem;line-height:1.4}
  #hpQmSub2{display:none}
  .hp-fertig{scroll-margin-top:calc(34vh + 190px)}   /* unter dem mitlaufenden Modell landen, nicht dahinter */
  .hp-step{scroll-margin-top:calc(34vh + 190px)}
  .hp-unter,.hp-teilen{display:none}
  .hp-step__body{padding-left:0}
  .hp-haeuser{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hp-dreh{display:none}
  .hp-phase{left:14px;top:12px}
  .hp-licht{right:12px;bottom:12px}
  .hp-teilen--unten{display:flex}
}
@media (min-width:901px){.hp-teilen--unten{display:none}}