Fix character-counter leak into saved values and hero/heading layout

BewerbungWebseite/Pages/Shared/_PortfolioStyles.cshtml

@@ -23,6 +23,16 @@
             overflow-wrap: break-word;
         }
 
+        /* Grosse Ueberschriften (h1) sind meist ein einzelnes Wort oder wenige
+           kurze Woerter -- ein Umbruch mitten im Wort sieht dort schlimmer aus
+           als ein leichtes Ueberlaufen. Nur an Leerzeichen umbrechen; ein
+           einzelnes zu langes Wort laeuft notfalls ueber statt zerrissen zu
+           werden. */
+        #hero h1, #about h1, #skills h1, #projects h1, #goals h1, #experience h1, #documents h1, #contact h1 {
+            overflow-wrap: normal;
+            word-break: normal;
+        }
+
         #about {
             background: #fff;
         }
@@ -162,6 +172,13 @@
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
+
+            /* Feste Innenabstaende statt sich auf die Zentrierung durch
+               align-items: center zu verlassen: bei kurzem Text sackt der
+               Inhalt sonst so weit nach oben, dass der Kicker unter der
+               halbtransparenten Nav-Leiste verschwindet, und unten fehlt
+               dann Platz nach den Social-Links. */
+            padding: 140px 0 60px;
         }
 
         #hero .slider-content h1 {

BewerbungWebseite/wwwroot/css/page-editor.css

@@ -82,6 +82,16 @@
     cursor: text;
 }
 
+/* Grosse Ueberschriften (h1) sind meist ein einzelnes Wort oder wenige kurze
+   Woerter -- ein Umbruch mitten im Wort (siehe oben) sieht dort schlimmer aus
+   als ein leichtes Ueberlaufen. Deshalb hier zurueck auf normales Verhalten:
+   nur an Leerzeichen umbrechen, ein einzelnes zu langes Wort laeuft notfalls
+   ueber statt zerrissen zu werden. */
+.pe-editing h1[contenteditable="true"] {
+    overflow-wrap: normal;
+    word-break: normal;
+}
+
 .pe-editing [contenteditable="true"]:focus {
     outline: 2px solid #2f6bff;
     background: rgba(47, 107, 255, .08);

BewerbungWebseite/wwwroot/js/page-editor.js

@@ -75,11 +75,34 @@
         return text.trim();
     }
 
+    // Liest den sichtbaren Text eines Feldes. Der Zeichenzaehler (.pe-charcount)
+    // steht bei den meisten Feldern als Geschwister ausserhalb -- bei der
+    // hervorgehobenen letzten Hero-Titelzeile aber technisch bedingt *innerhalb*
+    // desselben Elements, das hier ausgelesen wird (Feld und Listen-Eintrag sind
+    // dort zwei verschachtelte Elemente statt eines). Ohne dieses Ausblenden
+    // wuerde "3 / 50" als echter Text mitgespeichert. Kurzes Verstecken statt
+    // eines Klons, damit innerText zuverlaessig auf dem echten, gerenderten
+    // Element berechnet wird (auf einem loesgeloesten Klon liefert innerText in
+    // manchen Browsern keine verlaesslichen Werte).
     function readValue(node) {
         if (node.tagName === "INPUT" || node.tagName === "TEXTAREA") {
             return node.value;
         }
-        return normalizeText(node.innerText, node.dataset.multiline === "true");
+
+        var counters = node.querySelectorAll(".pe-charcount");
+        var previousDisplay = [];
+        counters.forEach(function (counter, i) {
+            previousDisplay[i] = counter.style.display;
+            counter.style.display = "none";
+        });
+
+        var text = node.innerText;
+
+        counters.forEach(function (counter, i) {
+            counter.style.display = previousDisplay[i];
+        });
+
+        return normalizeText(text, node.dataset.multiline === "true");
     }
 
     function collect(container) {