Aussengelaende in Schraegsicht von Suedwesten

Veranda und Terrasse gibt es zweimal, je Wohnpartei eine. In der Draufsicht
laege das obere Paar genau auf dem unteren: nicht auseinanderzuhalten und
schon gar nicht getrennt anzuklicken. Deshalb wird AG nicht flach von oben
gezeichnet, sondern schraeg von Suedwesten - von dort sieht man den Hof, auf
den die Veranden zeigen, und die Ostseite des Hauses traegt nichts, was
vorkommen muesste.

restricted/aussenplan.php haelt die Projektion und die Geometrie. Gezeichnet
wird in Militaerprojektion, nicht in echter Perspektive:

    X = x·cos φ − y·sin φ
    Y = (x·sin φ + y·cos φ)·STAUCHUNG − z·UEBERHOEHUNG

Der Grundriss bleibt dabei masshaltig - Geraden bleiben gerade, Rechtecke
Rechtecke. Genau deshalb diese und keine perspektivische: die Flaechen lassen
sich am Luftbild von oben abklicken, und dieselben Zahlen ergeben ohne Umweg
die Schraegsicht. Eine echte Perspektive muesste man neu vermessen.

Das Vorzeichen des Winkels bestimmt die Himmelsrichtung. Bei +35° zeigt der
Y-Gradient nach Osten und Sueden, die naechste Ecke waere die suedoestliche;
fuer Suedwesten muss er negativ sein. Was die Paare trennt, ist ohnehin nicht
die Drehung, sondern Stauchung und Ueberhoehung - bei 1,4 stehen Terrasse EG
und Terrasse OG rund 34 Einheiten auseinander, eine Kachel ist 19 hoch.

Hoehen: Traufe 6 m, First 9 m, Carport 2,5 m. Die OG-Ebene ist mit 3 m
angenommen - die halbe Traufhoehe bei zwei Geschossen.

tools/lageplan.php nimmt dafuer jetzt je Flaeche eine Hoehe entgegen und
zeigt die Schraegsicht live neben dem Luftbild: nur dort sieht man beim
Abklicken, ob die Paare wirklich auseinandergehen. Die Vorschau rechnet
dieselben Formeln im Browser nach; massgeblich bleibt der PHP-Code, von dem
spaeter die gezeichnete Etage und die Kachelpositionen kommen.

Dazu die Raeume: aus "Veranda" und "Terrasse" werden je zwei, eine pro
Partei. Welche der vier Geraete zu welcher gehoeren, sagt kein Name - die
beiden Wechselrichter tragen immerhin "OG" ("Veranda OG2-4", "Veranda
UG/OG1"), Licht und Rollladen der Terrasse gar nichts. Sie stehen deshalb
vorlaeufig auf Veranda OG und Terrasse EG.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

tools/lageplan.php

@@ -2,16 +2,21 @@
 /**
  * Messblatt für den Lageplan des Außengeländes.
  *
- * OG, EG und UG haben je ein Bild in assets/img - Renderings aus der
- * Planungssoftware, Puppenhausschnitt von schräg oben. Für das Außengelände
- * gibt es so ein Bild nicht: die Software kennt nur das einzelne Gebäude,
- * nicht das Grundstück. Der Plan für AG entsteht deshalb als Vektor direkt im
- * SVG von restricted/home.php - Haus, Carport, Garage, Pergola, Terrasse und
- * Garten als Flächen.
+ * OG, EG und UG haben je ein Rendering in assets/img - Puppenhausschnitt von
+ * schräg oben. Für das Außengelände gibt es so ein Bild nicht: die
+ * Planungssoftware kennt nur das einzelne Gebäude, nicht das Grundstück. Der
+ * Plan für AG entsteht deshalb als Vektor, gezeichnet aus der Geometrie in
+ * restricted/aussenplan.php - und die entsteht hier.
  *
- * Diese Seite liefert die Koordinaten dafür. Als Hintergrund liegt das
- * amtliche Luftbild (DOP20, 20 cm Bodenauflösung), abgeklickt wird darauf
- * Fläche für Fläche; darunter fallen die fertigen <polygon>-Zeilen heraus.
+ * Abgeklickt wird auf dem amtlichen Luftbild (DOP20, 20 cm Bodenauflösung).
+ * Daneben steht die Vorschau in derselben Schrägsicht von Südwesten, in der
+ * die Etage später gezeichnet wird: nur dort sieht man, ob Terrasse OG und
+ * Terrasse EG wirklich auseinandergehen.
+ *
+ * Warum das überhaupt geht: die Projektion in aussenplan.php ist eine
+ * Militärprojektion. Sie lässt den Grundriss maßhaltig, also reichen die
+ * Koordinaten aus der Draufsicht plus eine Höhe je Fläche. Eine echte
+ * Perspektive müsste man neu vermessen.
  *
  * Warum nicht einfach am Bild abmessen: die Zeichenfläche ist 400 × 300 groß
  * und hat mit Metern nichts zu tun. Wer das im Kopf umrechnet, verrechnet
@@ -21,41 +26,31 @@
  * liegt also keine Kopie im Repository. Der Ausschnitt lässt sich über die
  * Adresszeile verschieben, ohne diese Datei anzufassen:
  *
- *   tools/lageplan.php?lat=47.5781&lon=10.2628&breite=120
+ *   tools/lageplan.php?lat=47.5781&lon=10.2628&breite=70
  *
  * "breite" ist die Kantenlänge des Ausschnitts in Metern; die Höhe ergibt
  * sich aus dem Seitenverhältnis 4:3 der Zeichenfläche.
  *
  * Aufruf: http://<host>/smart/tools/lageplan.php
  *
- * Bewusst eine eigene Seite und kein Eintrag im Menü: sie wird einmal
- * gebraucht und danach nie wieder - genau wie kachelpositionen.php, mit der
- * sie sich die Bauart teilt.
+ * Bewusst eine eigene Seite und kein Eintrag im Menü: sie wird gebraucht,
+ * wenn sich draußen etwas ändert, und das ist selten - genau wie
+ * kachelpositionen.php, mit der sie sich die Bauart teilt.
  */
 
 require_once(__DIR__ . "/../helper.php");
 require_once(__DIR__ . "/../restricted/rooms.php");
+require_once(__DIR__ . "/../restricted/aussenplan.php");
 
 if (!checkLogin()) {
     http_response_code(403);
     exit;
 }
 
-/** So groß ist die Zeichenfläche - siehe restricted/home.php. */
-const PLAN_BREIT = 400;
-const PLAN_HOCH  = 300;
-
-/** So groß ist eine Kachel, für die vorgeschlagene x/y-Zeile. */
-const KACHEL_BREIT = 24;
-const KACHEL_HOCH  = 19;
-
 /** Welche Etage hier vermessen wird. */
 const ETAGE = "AG";
 
-/**
- * Das Luftbild. CC BY 4.0 - die Namensnennung steht unten auf der Seite und
- * gehört dort hin, auch wenn die Seite nur intern erreichbar ist.
- */
+/** Das Luftbild. CC BY 4.0 - die Namensnennung steht unten auf der Seite. */
 const WMS_URL   = "https://geoservices.bayern.de/od/wms/dop/v1/dop20";
 const WMS_LAYER = "by_dop20c";
 
@@ -70,9 +65,9 @@ const WMS_SCHAERFE = 3;
  */
 $lat    = isset($_GET["lat"]) ? floatval($_GET["lat"]) : 47.5781;
 $lon    = isset($_GET["lon"]) ? floatval($_GET["lon"]) : 10.2628;
-$breite = isset($_GET["breite"]) ? floatval($_GET["breite"]) : 120.0;
+$breite = isset($_GET["breite"]) ? floatval($_GET["breite"]) : 70.0;
 $breite = max(20.0, min(400.0, $breite));
-$hoehe  = $breite * PLAN_HOCH / PLAN_BREIT;
+$hoehe  = $breite * PLAN_HOEHE / PLAN_BREITE;
 
 /**
  * WGS84 nach UTM Zone 32 Nord (EPSG:25832).
@@ -122,31 +117,56 @@ $luftbild = WMS_URL . "?" . http_build_query([
     "SERVICE" => "WMS", "VERSION" => "1.3.0", "REQUEST" => "GetMap",
     "LAYERS" => WMS_LAYER, "STYLES" => "", "CRS" => "EPSG:25832",
     "BBOX" => $bbox,
-    "WIDTH"  => (int) (PLAN_BREIT * WMS_SCHAERFE),
-    "HEIGHT" => (int) (PLAN_HOCH * WMS_SCHAERFE),
+    "WIDTH"  => (int) (PLAN_BREITE * WMS_SCHAERFE),
+    "HEIGHT" => (int) (PLAN_HOEHE * WMS_SCHAERFE),
     "FORMAT" => "image/jpeg",
 ]);
 
 /**
  * Die Flächen, die abgeklickt werden.
  *
- * Sie kommen aus der Raumtabelle - ein neuer AG-Raum in rooms.php taucht hier
- * von selbst auf. Das Haus steht davor, obwohl es kein Raum ist: es ist der
- * Umriss, an dem sich beim Zeichnen alles andere ausrichtet.
+ * Die Räume kommen aus der Raumtabelle - ein neuer AG-Raum in rooms.php
+ * taucht hier von selbst auf. Davor stehen Haus und Hof: sie sind keine Räume
+ * und tragen keine Kachel, aber ohne sie wäre der Plan ein paar Flecken im
+ * Nichts. Das Haus ist zusätzlich der Umriss, an dem sich beim Zeichnen alles
+ * andere ausrichtet, deshalb steht es ganz vorn.
+ *
+ * "z" ist die Höhe über Gelände, "hoehe" die Bauhöhe darüber. Die Vorgaben
+ * sind das, was am häufigsten stimmt: eine ebenerdige, flache Fläche.
  */
-$flaechen = [["schluessel" => "haus", "name" => "Haus", "raum" => null]];
+$flaechen = [
+    ["schluessel" => "haus", "name" => "Haus", "raum" => null,
+     "z" => 0, "hoehe" => 6, "dach" => 3],
+    ["schluessel" => "hof",  "name" => "Hof",  "raum" => null,
+     "z" => 0, "hoehe" => 0, "dach" => 0],
+];
 foreach (allRooms() as $raum) {
     if ($raum["floor"] !== ETAGE) {
         continue;
     }
-    $flaechen[] = ["schluessel" => $raum["id"], "name" => $raum["mqtt"], "raum" => $raum];
+    // Was auf der OG-Ebene liegt, steht drei Meter höher - die Traufe liegt
+    // auf sechs Metern, bei zwei Geschossen ist das die halbe Höhe. Der
+    // Carport OG heisst zwar OG, steht aber auf dem Boden; deshalb entscheidet
+    // die Bauart und nicht der Name.
+    $obenAuf = in_array($raum["mqtt"], ["Veranda OG", "Terrasse OG"], true);
+    $mitDach = in_array($raum["mqtt"], ["Carport OG", "Garage"], true);
+    $flaechen[] = [
+        "schluessel" => $raum["id"],
+        "name"       => $raum["mqtt"],
+        "raum"       => $raum,
+        "z"          => $obenAuf ? 3.0 : 0.0,
+        "hoehe"      => $mitDach ? 2.5 : 0.0,
+        "dach"       => 0,
+    ];
 }
 
-// Genug unterscheidbare Farben, danach wiederholen sie sich - bei sieben
-// Flächen kommt es dazu nicht.
-$farben = ["#ffbe3c", "#35b6cf", "#7ed957", "#ff7a7a", "#c58cff", "#ffe066", "#6ee7c8"];
+// Genug unterscheidbare Farben für die Bedienung; gezeichnet wird später mit
+// den Farben aus aussenFarbe().
+$stifte = ["#ffbe3c", "#35b6cf", "#7ed957", "#ff7a7a", "#c58cff", "#ffe066",
+           "#6ee7c8", "#ff9f5c", "#9ec5ff", "#f78fd0", "#b5e48c"];
 foreach ($flaechen as $i => $f) {
-    $flaechen[$i]["farbe"] = $farben[$i % count($farben)];
+    $flaechen[$i]["stift"] = $stifte[$i % count($stifte)];
+    $flaechen[$i]["farbe"] = aussenFarbe($f["name"]);
 }
 
 ?><!doctype html>
@@ -171,7 +191,7 @@ foreach ($flaechen as $i => $f) {
     background: var(--grund); color: var(--schrift);
     font: 15px/1.55 -apple-system, "Segoe UI", Roboto, sans-serif;
   }
-  .huelle { max-width: 900px; margin: 0 auto; }
+  .huelle { max-width: 1000px; margin: 0 auto; }
   h1 { font-size: 1.35rem; margin: 0 0 .3rem; }
   .vorwort { color: var(--leise); margin: 0 0 1.2rem; max-width: 62ch; }
   .vorwort code, .quelle code {
@@ -182,14 +202,21 @@ foreach ($flaechen as $i => $f) {
     background: var(--karte); border: 1px solid var(--linie);
     border-radius: .6rem; padding: .8rem; margin-bottom: 1.2rem;
   }
+  .nebeneinander { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
+  @media (max-width: 720px) { .nebeneinander { grid-template-columns: 1fr; } }
+  .nebeneinander h3 {
+    font-size: .82rem; font-weight: 600; color: var(--leise);
+    margin: 0 0 .3rem; text-transform: uppercase; letter-spacing: .04em;
+  }
   .plan {
     display: block; width: 100%; height: auto; border-radius: .4rem;
-    cursor: crosshair; touch-action: none; background: #0b0d10;
+    touch-action: none; background: #0b0d10;
   }
+  #plan { cursor: crosshair; }
   .achsen text { fill: #ffffffaa; font: 7px sans-serif; }
   .stift { stroke: #ffbe3c; stroke-width: .4; stroke-dasharray: 3 3; }
-  .name { font: 5px sans-serif; text-anchor: middle; paint-order: stroke;
-          stroke: #000a; stroke-width: 1.4; }
+  .name { font: 6px sans-serif; text-anchor: middle; paint-order: stroke;
+          stroke: #000a; stroke-width: 1.8; }
 
   .waehler { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .2rem; }
   .waehler button {
@@ -202,6 +229,13 @@ foreach ($flaechen as $i => $f) {
   .waehler .tupfen { width: .7rem; height: .7rem; border-radius: 50%; }
   .waehler .zahl { color: var(--leise); font-variant-numeric: tabular-nums; }
 
+  .hoehen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
+            margin: .7rem 0 0; font-size: .88rem; color: var(--leise); }
+  .hoehen input {
+    font: inherit; width: 4.2rem; padding: .15rem .35rem; text-align: right;
+    background: var(--grund); color: var(--schrift);
+    border: 1px solid var(--linie); border-radius: .3rem;
+  }
   .knoepfe { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
   .knoepfe button {
     font: inherit; font-size: .88rem; cursor: pointer; padding: .25rem .6rem;
@@ -213,7 +247,7 @@ foreach ($flaechen as $i => $f) {
 
   h2 { font-size: .95rem; margin: 1.4rem 0 .4rem; font-weight: 600; }
   textarea {
-    width: 100%; box-sizing: border-box; min-height: 9rem; resize: vertical;
+    width: 100%; box-sizing: border-box; min-height: 11rem; resize: vertical;
     background: var(--karte); color: var(--schrift);
     border: 1px solid var(--linie); border-radius: .4rem; padding: .6rem;
     font-family: ui-monospace, Consolas, monospace; font-size: .82rem; line-height: 1.5;
@@ -227,47 +261,59 @@ foreach ($flaechen as $i => $f) {
 
 <h1>Lageplan Außengelände</h1>
 <p class="vorwort">
-  Die Zeichenfläche ist <?= PLAN_BREIT ?> &times; <?= PLAN_HOCH ?> und zeigt hier
+  Links das Luftbild von oben, rechts die Vorschau in der Schrägsicht von
+  Südwesten, in der die Etage später gezeichnet wird. Der Ausschnitt zeigt
   <b><?= rtrim(rtrim(number_format($breite, 1, ",", ""), "0"), ",") ?> &times;
   <?= rtrim(rtrim(number_format($hoehe, 1, ",", ""), "0"), ",") ?> m</b> &ndash;
-  eine Einheit sind <?= number_format($breite / PLAN_BREIT, 2, ",", "") ?> m.
-  Wähle eine Fläche und klick ihre Ecken der Reihe nach ab; <b>Backspace</b> nimmt
-  den letzten Punkt zurück. Unten stehen die fertigen Zeilen für
-  <code>restricted/home.php</code> und <code>restricted/rooms.php</code>.
+  eine Einheit sind <?= number_format($breite / PLAN_BREITE, 2, ",", "") ?> m.
+  Wähle eine Fläche, klick ihre Ecken der Reihe nach ab und stell darunter ihre
+  Höhe ein; <b>Backspace</b> nimmt den letzten Punkt zurück. Unten stehen die
+  fertigen Zeilen für <code>restricted/aussenplan.php</code>.
   Passt der Ausschnitt nicht, verschieb ihn über <code>?lat=</code>,
   <code>?lon=</code> und <code>?breite=</code> in der Adresszeile.
 </p>
 
 <section class="etage">
-  <svg viewBox="0 0 <?= PLAN_BREIT ?> <?= PLAN_HOCH ?>" class="plan" id="plan">
-    <defs>
-      <pattern id="raster" width="10" height="10" patternUnits="userSpaceOnUse">
-        <path d="M10 0H0V10" fill="none" stroke="#ffffff22" stroke-width=".4"/>
-      </pattern>
-    </defs>
-    <image href="<?= htmlspecialchars($luftbild, ENT_QUOTES) ?>" x="0" y="0"
-           width="<?= PLAN_BREIT ?>" height="<?= PLAN_HOCH ?>"/>
-    <rect x="0" y="0" width="<?= PLAN_BREIT ?>" height="<?= PLAN_HOCH ?>" fill="url(#raster)"/>
-
-    <g class="achsen">
-<?php for ($v = 50; $v < PLAN_BREIT; $v += 50): ?>
-      <text x="<?= $v ?>" y="9" text-anchor="middle"><?= $v ?></text>
+  <div class="nebeneinander">
+    <div>
+      <h3>Draufsicht &ndash; hier wird geklickt</h3>
+      <svg viewBox="0 0 <?= PLAN_BREITE ?> <?= PLAN_HOEHE ?>" class="plan" id="plan">
+        <defs>
+          <pattern id="raster" width="10" height="10" patternUnits="userSpaceOnUse">
+            <path d="M10 0H0V10" fill="none" stroke="#ffffff22" stroke-width=".4"/>
+          </pattern>
+        </defs>
+        <image href="<?= htmlspecialchars($luftbild, ENT_QUOTES) ?>" x="0" y="0"
+               width="<?= PLAN_BREITE ?>" height="<?= PLAN_HOEHE ?>"/>
+        <rect x="0" y="0" width="<?= PLAN_BREITE ?>" height="<?= PLAN_HOEHE ?>" fill="url(#raster)"/>
+        <g class="achsen">
+<?php for ($v = 50; $v < PLAN_BREITE; $v += 50): ?>
+          <text x="<?= $v ?>" y="9" text-anchor="middle"><?= $v ?></text>
 <?php endfor; ?>
-<?php for ($v = 50; $v < PLAN_HOCH; $v += 50): ?>
-      <text x="4" y="<?= $v + 3 ?>"><?= $v ?></text>
+<?php for ($v = 50; $v < PLAN_HOEHE; $v += 50): ?>
+          <text x="4" y="<?= $v + 3 ?>"><?= $v ?></text>
 <?php endfor; ?>
-    </g>
-
-    <!-- Hierein zeichnet das Skript die abgeklickten Flächen. -->
-    <g id="gezeichnet"></g>
-
-    <g id="stift" style="display:none">
-      <line class="stift" x1="<?= -PLAN_BREIT ?>" x2="<?= PLAN_BREIT ?>"/>
-      <line class="stift" y1="<?= -PLAN_HOCH ?>" y2="<?= PLAN_HOCH ?>"/>
-    </g>
-  </svg>
+        </g>
+        <g id="gezeichnet"></g>
+        <g id="stift" style="display:none">
+          <line class="stift" x1="<?= -PLAN_BREITE ?>" x2="<?= PLAN_BREITE ?>"/>
+          <line class="stift" y1="<?= -PLAN_HOEHE ?>" y2="<?= PLAN_HOEHE ?>"/>
+        </g>
+      </svg>
+    </div>
+    <div>
+      <h3>Schrägsicht von Südwesten &ndash; so wird es aussehen</h3>
+      <svg viewBox="0 0 <?= PLAN_BREITE ?> <?= PLAN_HOEHE ?>" class="plan" id="schraeg"></svg>
+    </div>
+  </div>
 
   <div class="waehler" id="waehler"></div>
+  <div class="hoehen">
+    <span id="hoehenName"></span>
+    <label>Höhe über Gelände <input type="number" id="feldZ" step="0.5" min="0" max="20"> m</label>
+    <label>Bauhöhe <input type="number" id="feldH" step="0.5" min="0" max="20"> m</label>
+    <label id="dachHuelle">Dach darüber <input type="number" id="feldDach" step="0.5" min="0" max="20"> m</label>
+  </div>
   <div class="knoepfe">
     <button type="button" id="btnZurueck">Punkt zurück</button>
     <button type="button" id="btnLeeren">Diese Fläche leeren</button>
@@ -276,11 +322,8 @@ foreach ($flaechen as $i => $f) {
   <p class="hinweis" id="hinweis">Fläche wählen und die erste Ecke anklicken …</p>
 </section>
 
-<h2>Für <code>restricted/home.php</code> &ndash; der Plan</h2>
-<textarea id="ausgabePlan" readonly spellcheck="false"></textarea>
-
-<h2>Für <code>restricted/rooms.php</code> &ndash; die Kacheln</h2>
-<textarea id="ausgabeRaeume" readonly spellcheck="false"></textarea>
+<h2>Für <code>restricted/aussenplan.php</code> &ndash; in <code>aussenFlaechen()</code></h2>
+<textarea id="ausgabe" readonly spellcheck="false"></textarea>
 
 <p class="quelle">
   Luftbild: <b>Datenquelle Bayerische Vermessungsverwaltung</b> &ndash;
@@ -293,36 +336,42 @@ foreach ($flaechen as $i => $f) {
 </div>
 
 <script>
-  // Der Server schreibt hier hinein, was oben in den Konstanten steht.
-  const PLAN_B = <?= PLAN_BREIT ?>, PLAN_H = <?= PLAN_HOCH ?>;
-  const KACHEL_B = <?= KACHEL_BREIT ?>, KACHEL_H = <?= KACHEL_HOCH ?>;
-  const METER_JE_EINHEIT = <?= json_encode(round($breite / PLAN_BREIT, 4)) ?>;
+  // Der Server schreibt hier hinein, was in aussenplan.php steht - damit
+  // Vorschau und spaetere Zeichnung dieselbe Projektion benutzen.
+  const PLAN_B = <?= PLAN_BREITE ?>, PLAN_H = <?= PLAN_HOEHE ?>, RAND = <?= PLAN_RAND ?>;
+  const WINKEL = <?= PLAN_WINKEL ?>, STAUCHUNG = <?= PLAN_STAUCHUNG ?>,
+        UEBERHOEHUNG = <?= PLAN_UEBERHOEHUNG ?>;
+  const METER_JE_EINHEIT = <?= json_encode(round($breite / PLAN_BREITE, 4)) ?>;
   const FLAECHEN = <?= json_encode($flaechen, JSON_UNESCAPED_UNICODE) ?>;
-  const ETAGE = <?= json_encode(ETAGE) ?>;
 
-  // Abgeklicktes überlebt einen Neuladen - sieben Flächen sind Arbeit, die
+  // Abgeklicktes ueberlebt einen Neuladen - neun Flaechen sind Arbeit, die
   // man nicht wegen eines Fehlklicks auf F5 noch einmal machen will.
-  const SPEICHER = "lageplan-" + ETAGE;
-  let punkte = {};
-  try { punkte = JSON.parse(localStorage.getItem(SPEICHER)) || {}; } catch (e) { punkte = {}; }
-  FLAECHEN.forEach(f => { if (!Array.isArray(punkte[f.schluessel])) punkte[f.schluessel] = []; });
+  const SPEICHER = "lageplan-<?= ETAGE ?>";
+  let daten = {};
+  try { daten = JSON.parse(localStorage.getItem(SPEICHER)) || {}; } catch (e) { daten = {}; }
+  FLAECHEN.forEach(f => {
+    const d = daten[f.schluessel] || {};
+    daten[f.schluessel] = {
+      punkte: Array.isArray(d.punkte) ? d.punkte : [],
+      z:     typeof d.z     === "number" ? d.z     : f.z,
+      hoehe: typeof d.hoehe === "number" ? d.hoehe : f.hoehe,
+      dach:  typeof d.dach  === "number" ? d.dach  : f.dach
+    };
+  });
 
   let aktiv = FLAECHEN[0].schluessel;
 
   const svg = document.getElementById("plan");
   const gezeichnet = document.getElementById("gezeichnet");
+  const schraeg = document.getElementById("schraeg");
   const stift = document.getElementById("stift");
   const hinweis = document.getElementById("hinweis");
 
-  function flaeche(schluessel) {
-    return FLAECHEN.find(f => f.schluessel === schluessel);
-  }
-
-  /** Mittelpunkt einer Fläche - Mittel der Ecken, gut genug für eine Kachel. */
-  function mitte(liste) {
-    const s = liste.reduce((a, p) => [a[0] + p[0], a[1] + p[1]], [0, 0]);
-    return [s[0] / liste.length, s[1] / liste.length];
-  }
+  const flaeche = s => FLAECHEN.find(f => f.schluessel === s);
+  const mitte = l => {
+    const s = l.reduce((a, p) => [a[0] + p[0], a[1] + p[1]], [0, 0]);
+    return [s[0] / l.length, s[1] / l.length];
+  };
 
   function element(name, attribute) {
     const e = document.createElementNS("http://www.w3.org/2000/svg", name);
@@ -330,34 +379,126 @@ foreach ($flaechen as $i => $f) {
     return e;
   }
 
-  function zeichne() {
+  // --- Draufsicht ---------------------------------------------------------
+
+  function zeichnePlan() {
     gezeichnet.innerHTML = "";
     FLAECHEN.forEach(f => {
-      const liste = punkte[f.schluessel];
+      const liste = daten[f.schluessel].punkte;
       if (!liste.length) return;
       const zug = liste.map(p => p.join(",")).join(" ");
-      // Solange eine Fläche noch nicht drei Ecken hat, ist sie ein Linienzug
-      // und keine Fläche - ein Polygon sähe dann nach etwas aus, was es
-      // noch nicht ist.
+      // Unter drei Ecken ist es ein Linienzug und keine Flaeche - ein Polygon
+      // saehe nach etwas aus, was es noch nicht ist.
       gezeichnet.appendChild(element(liste.length > 2 ? "polygon" : "polyline", {
-        points: zug, fill: liste.length > 2 ? f.farbe + "44" : "none",
-        stroke: f.farbe, "stroke-width": f.schluessel === aktiv ? 1.1 : 0.7,
+        points: zug, fill: liste.length > 2 ? f.stift + "44" : "none",
+        stroke: f.stift, "stroke-width": f.schluessel === aktiv ? 1.1 : 0.7,
         "stroke-linejoin": "round"
       }));
       liste.forEach(p => gezeichnet.appendChild(
-        element("circle", { cx: p[0], cy: p[1], r: 1.2, fill: f.farbe })));
-      if (liste.length > 2) {
-        const m = mitte(liste);
-        const t = element("text", { x: m[0], y: m[1] + 1.8, class: "name", fill: f.farbe });
-        t.textContent = f.name;
-        gezeichnet.appendChild(t);
-      }
+        element("circle", { cx: p[0], cy: p[1], r: 1.2, fill: f.stift })));
     });
-    zeichneWaehler();
-    schreibeAusgabe();
-    try { localStorage.setItem(SPEICHER, JSON.stringify(punkte)); } catch (e) { /* egal */ }
   }
 
+  // --- Schraegsicht -------------------------------------------------------
+  //
+  // Dieselben Formeln wie aussenProjektor() und aussenEinpassung() in
+  // restricted/aussenplan.php. Massgeblich ist der PHP-Code: von dort kommen
+  // spaeter die gezeichnete Etage und die Kachelpositionen. Hier geht es nur
+  // darum, waehrend des Abklickens zu sehen, ob die Paare auseinandergehen.
+
+  function projiziere(x, y, z) {
+    const w = WINKEL * Math.PI / 180, c = Math.cos(w), s = Math.sin(w);
+    return [x * c - y * s, (x * s + y * c) * STAUCHUNG - z * UEBERHOEHUNG];
+  }
+
+  function inMeter(punkt) {
+    return [punkt[0] * METER_JE_EINHEIT, punkt[1] * METER_JE_EINHEIT];
+  }
+
+  function koerper() {
+    return FLAECHEN
+      .filter(f => daten[f.schluessel].punkte.length > 2)
+      .map(f => {
+        const d = daten[f.schluessel];
+        return { f: f, ecken: d.punkte.map(inMeter), z: d.z, hoehe: d.hoehe, dach: d.dach };
+      });
+  }
+
+  function einpassung(liste) {
+    const xs = [], ys = [];
+    liste.forEach(k => k.ecken.forEach(([x, y]) => {
+      [k.z, k.z + k.hoehe + k.dach].forEach(z => {
+        const p = projiziere(x, y, z); xs.push(p[0]); ys.push(p[1]);
+      });
+    }));
+    if (!xs.length) return null;
+    const bx = Math.max(...xs) - Math.min(...xs), by = Math.max(...ys) - Math.min(...ys);
+    const m = Math.min(bx > 0 ? (PLAN_B - 2 * RAND) / bx : Infinity,
+                       by > 0 ? (PLAN_H - 2 * RAND) / by : Infinity);
+    const ms = isFinite(m) ? m : 1;
+    return { ms: ms,
+             dx: (PLAN_B - bx * ms) / 2 - Math.min(...xs) * ms,
+             dy: (PLAN_H - by * ms) / 2 - Math.min(...ys) * ms };
+  }
+
+  function dunkler(hex, faktor) {
+    const n = parseInt(hex.slice(1), 16);
+    return "rgb(" + [n >> 16, (n >> 8) & 255, n & 255]
+      .map(v => Math.round(v * faktor)).join(",") + ")";
+  }
+
+  function zeichneSchraeg() {
+    schraeg.innerHTML = "";
+    const liste = koerper();
+    const e = einpassung(liste);
+    if (!e) {
+      schraeg.appendChild(element("text", { x: PLAN_B / 2, y: PLAN_H / 2,
+        fill: "#9aa0a6", "font-size": 9, "text-anchor": "middle" }))
+        .textContent = "Noch keine Fläche mit drei Ecken.";
+      return;
+    }
+    const P = (x, y, z) => {
+      const p = projiziere(x, y, z);
+      return [p[0] * e.ms + e.dx, p[1] * e.ms + e.dy];
+    };
+
+    const stuecke = liste.map(k => {
+      const tiefe = Math.min(...k.ecken.map(([x, y]) => P(x, y, 0)[1]));
+      const unten = k.ecken.map(([x, y]) => P(x, y, k.z));
+      const oben  = k.ecken.map(([x, y]) => P(x, y, k.z + k.hoehe));
+      const teile = [];
+      if (k.hoehe > 0) {
+        for (let i = 0; i < k.ecken.length; i++) {
+          const j = (i + 1) % k.ecken.length;
+          teile.push({ pkt: [unten[i], unten[j], oben[j], oben[i]],
+                       farbe: dunkler(k.f.farbe, .62) });
+        }
+      }
+      teile.push({ pkt: oben, farbe: k.f.farbe });
+      if (k.dach > 0 && k.ecken.length === 4) {
+        const c = k.ecken;
+        const f1 = P((c[0][0] + c[3][0]) / 2, (c[0][1] + c[3][1]) / 2, k.z + k.hoehe + k.dach);
+        const f2 = P((c[1][0] + c[2][0]) / 2, (c[1][1] + c[2][1]) / 2, k.z + k.hoehe + k.dach);
+        teile.push({ pkt: [oben[0], oben[1], f2, f1], farbe: "#b5563a" });
+        teile.push({ pkt: [oben[3], oben[2], f2, f1], farbe: dunkler("#b5563a", .78) });
+      }
+      return { tiefe: tiefe, teile: teile, name: k.f.name, mitte: mitte(oben) };
+    }).sort((a, b) => a.tiefe - b.tiefe);
+
+    stuecke.forEach(s => s.teile.forEach(t => schraeg.appendChild(element("polygon", {
+      points: t.pkt.map(p => p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" "),
+      fill: t.farbe, stroke: "#ffffff30", "stroke-width": .4
+    }))));
+    stuecke.forEach(s => {
+      const t = element("text", { x: s.mitte[0].toFixed(1), y: (s.mitte[1] + 2).toFixed(1),
+                                  class: "name", fill: "#fff" });
+      t.textContent = s.name;
+      schraeg.appendChild(t);
+    });
+  }
+
+  // --- Bedienung ----------------------------------------------------------
+
   function zeichneWaehler() {
     const ziel = document.getElementById("waehler");
     ziel.innerHTML = "";
@@ -365,34 +506,43 @@ foreach ($flaechen as $i => $f) {
       const b = document.createElement("button");
       b.type = "button";
       b.setAttribute("aria-pressed", f.schluessel === aktiv ? "true" : "false");
-      b.innerHTML = "<span class='tupfen' style='background:" + f.farbe + "'></span>"
-                  + f.name + " <span class='zahl'>" + punkte[f.schluessel].length + "</span>";
-      b.onclick = () => { aktiv = f.schluessel; zeichne(); };
+      b.innerHTML = "<span class='tupfen' style='background:" + f.stift + "'></span>"
+                  + f.name + " <span class='zahl'>" + daten[f.schluessel].punkte.length + "</span>";
+      b.onclick = () => { aktiv = f.schluessel; alles(); };
       ziel.appendChild(b);
     });
+    const d = daten[aktiv];
+    document.getElementById("hoehenName").innerHTML = "<b>" + flaeche(aktiv).name + "</b>:";
+    document.getElementById("feldZ").value = d.z;
+    document.getElementById("feldH").value = d.hoehe;
+    document.getElementById("feldDach").value = d.dach;
+    // Ein Dach hat nur, was auch eine Bauhoehe hat - sonst schwebte es.
+    document.getElementById("dachHuelle").style.display = d.hoehe > 0 ? "" : "none";
   }
 
   function schreibeAusgabe() {
-    const plan = [];
-    const raeume = [];
+    const zeilen = [];
     FLAECHEN.forEach(f => {
-      const liste = punkte[f.schluessel];
-      if (liste.length < 3) return;
-      plan.push('<polygon class="ag-' + f.schluessel + '" points="'
-                + liste.map(p => p.join(",")).join(" ") + '"/>');
-      if (!f.raum) return;   // das Haus ist kein Raum und bekommt keine Kachel
-      const m = mitte(liste);
-      raeume.push('    ["floor" => "' + ETAGE + '", "mqtt" => "' + f.raum.mqtt
-                + '", "id" => "' + f.raum.id + '",'
-                + ' "x" => ' + Math.round(m[0] - KACHEL_B / 2)
-                + ', "y" => ' + Math.round(m[1] - KACHEL_H / 2) + ', "werte" => []],');
+      const d = daten[f.schluessel];
+      if (d.punkte.length < 3) return;
+      const ecken = d.punkte.map(inMeter)
+        .map(p => "[" + p[0].toFixed(1) + ", " + p[1].toFixed(1) + "]").join(", ");
+      zeilen.push('        ["raum" => ' + (f.raum ? '"' + f.raum.mqtt + '"' : "null")
+        + ', "z" => ' + d.z + ', "hoehe" => ' + d.hoehe + ', "dach" => ' + d.dach
+        + ',\n         "farbe" => "' + f.farbe + '",\n'
+        + '         "ecken" => [' + ecken + ']],');
     });
-    document.getElementById("ausgabePlan").value = plan.length
-      ? plan.join("\n")
+    document.getElementById("ausgabe").value = zeilen.length
+      ? zeilen.join("\n")
       : "Noch nichts abgeklickt - eine Fläche braucht mindestens drei Ecken.";
-    document.getElementById("ausgabeRaeume").value = raeume.length
-      ? raeume.join("\n")
-      : "Noch nichts abgeklickt.";
+  }
+
+  function alles() {
+    zeichnePlan();
+    zeichneSchraeg();
+    zeichneWaehler();
+    schreibeAusgabe();
+    try { localStorage.setItem(SPEICHER, JSON.stringify(daten)); } catch (e) { /* egal */ }
   }
 
   function stelle(ereignis) {
@@ -406,11 +556,10 @@ foreach ($flaechen as $i => $f) {
   svg.addEventListener("pointermove", e => {
     const [x, y] = stelle(e);
     stift.style.display = "";
-    stift.querySelector("line:first-child").setAttribute("y1", y);
-    stift.querySelector("line:first-child").setAttribute("y2", y);
-    stift.querySelector("line:last-child").setAttribute("x1", x);
-    stift.querySelector("line:last-child").setAttribute("x2", x);
-    const liste = punkte[aktiv];
+    const zeilen = stift.querySelectorAll("line");
+    zeilen[0].setAttribute("y1", y); zeilen[0].setAttribute("y2", y);
+    zeilen[1].setAttribute("x1", x); zeilen[1].setAttribute("x2", x);
+    const liste = daten[aktiv].punkte;
     let text = "<b>" + flaeche(aktiv).name + "</b> &ndash; " + x + "," + y
              + " &nbsp;(" + (x * METER_JE_EINHEIT).toFixed(1) + " m, "
              + (y * METER_JE_EINHEIT).toFixed(1) + " m)";
@@ -427,24 +576,34 @@ foreach ($flaechen as $i => $f) {
     hinweis.textContent = "Fläche wählen und die erste Ecke anklicken …";
   });
 
-  svg.addEventListener("click", e => {
-    punkte[aktiv].push(stelle(e));
-    zeichne();
-  });
+  svg.addEventListener("click", e => { daten[aktiv].punkte.push(stelle(e)); alles(); });
 
   document.addEventListener("keydown", e => {
-    if (e.key === "Backspace") { e.preventDefault(); punkte[aktiv].pop(); zeichne(); }
+    if (e.key === "Backspace" && e.target.tagName !== "INPUT") {
+      e.preventDefault(); daten[aktiv].punkte.pop(); alles();
+    }
   });
 
-  document.getElementById("btnZurueck").onclick = () => { punkte[aktiv].pop(); zeichne(); };
-  document.getElementById("btnLeeren").onclick = () => { punkte[aktiv] = []; zeichne(); };
+  ["feldZ", "feldH", "feldDach"].forEach((id, i) => {
+    document.getElementById(id).addEventListener("input", e => {
+      const wert = parseFloat(e.target.value);
+      daten[aktiv][["z", "hoehe", "dach"][i]] = isNaN(wert) ? 0 : wert;
+      zeichneSchraeg(); schreibeAusgabe();
+      if (i === 1) document.getElementById("dachHuelle").style.display =
+        daten[aktiv].hoehe > 0 ? "" : "none";
+      try { localStorage.setItem(SPEICHER, JSON.stringify(daten)); } catch (err) { /* egal */ }
+    });
+  });
+
+  document.getElementById("btnZurueck").onclick = () => { daten[aktiv].punkte.pop(); alles(); };
+  document.getElementById("btnLeeren").onclick = () => { daten[aktiv].punkte = []; alles(); };
   document.getElementById("btnAllesLeeren").onclick = () => {
     if (!confirm("Alle abgeklickten Flächen verwerfen?")) return;
-    FLAECHEN.forEach(f => { punkte[f.schluessel] = []; });
-    zeichne();
+    FLAECHEN.forEach(f => { daten[f.schluessel].punkte = []; });
+    alles();
   };
 
-  zeichne();
+  alles();
 </script>
 </body>
 </html>