Sprungmarken brechen um statt zu scrollen, keine Silbentrennung in Ueberschriften

Rueckmeldung 22.08.2026: "ich will nicht dass man die hin und her
schieben muss man soll die alle sehen aber nicht schieben muessen."

Richtig, und aus zwei Gruenden: Eine Wischleiste verbirgt, DASS es noch
mehr gibt -- was rechts aus dem Bild ragt, existiert fuer die meisten
Menschen schlicht nicht. Dazu kam ein haesslicher Scrollbalken quer ueber
die Seite. Jetzt brechen die Knoepfe um, alle fuenf sind auf einen Blick
da, auch bei 320px.

Der Text in den Knoepfen darf dabei mitbrechen (white-space: normal) --
ohne das sprengt ein langer Name wie "Buchhaltungs- &
Steuerverwaltungsseiten" auf schmalen Bildschirmen die Zeile und der
waagerechte Ueberlauf waere durch die Hintertuer zurueck.

Dabei mitgefunden: "hyphens: auto" auf Ueberschriften. Auf dem Handy
stand dadurch "Alles, was vorher ge-klaert sein sollte". Der Browser
trennt damit nach Silben, auch wenn ueberhaupt kein Platzproblem
besteht. In Fliesstext ist das ein Gewinn, in grossen Ueberschriften
sieht es billig aus -- und genau die sind das Erste, was jemand sieht.
overflow-wrap: break-word bleibt und faengt echte Ueberlaeufe weiterhin ab.

Pruefskript: die Sprungmarken-Leisten waren als "absichtlich scrollbar"
von der Ueberlaufpruefung ausgenommen. Diese Ausnahme ist raus -- sonst
wuerde ein zurueckkehrender Ueberlauf dort nie auffallen. 45/45 weiterhin
sauber.

Co-Authored-By: Claude Opus 5 <[email protected]>

assets/css/webdesign.css

@@ -146,10 +146,19 @@ body.wd::after {
   letter-spacing: -.015em;
   margin: 0 0 .5em;
   color: var(--wd-text);
-  /* Verhindert, dass lange deutsche Komposita ("Buchhaltungsverwaltungs-
-     seiten") auf dem Handy aus dem Kasten laufen. */
+  /* Lange deutsche Komposita ("Buchhaltungsverwaltungsseiten") duerfen auf
+     dem Handy nicht aus dem Kasten laufen — dafuer reicht
+     overflow-wrap: break-word. Es greift NUR im Notfall, wenn ein Wort
+     sonst wirklich ueberlaufen wuerde.
+
+     "hyphens: auto" stand hier zusaetzlich und ist wieder raus: der
+     Browser trennt damit nach Silben, auch wenn gar kein Platzproblem
+     besteht. Auf dem Handy stand dadurch "Alles, was vorher ge-klaert
+     sein sollte" in der Ueberschrift. In Fliesstext ist Silbentrennung
+     ein Gewinn, in grossen Ueberschriften sieht sie schlicht billig aus —
+     und genau die sind das Erste, was jemand von der Seite sieht. */
   overflow-wrap: break-word;
-  hyphens: auto;
+  hyphens: manual;
 }
 .wd h1 { font-size: clamp(2.15rem, 5.6vw, 3.9rem); font-weight: 800; }
 .wd h2 { font-size: clamp(1.75rem, 4.2vw, 2.75rem); font-weight: 800; }

server/pruefe-webdesign-handy.mjs

@@ -72,8 +72,12 @@ for (const pfad of SEITEN) {
       for (const el of document.querySelectorAll("body *")) {
         const s = getComputedStyle(el);
         if (s.display === "none" || s.visibility === "hidden") continue;
-        // Absichtlich waagerecht scrollbare Leisten ausnehmen
-        if (el.closest(".ls-sprung, .fq-sprung, .wd-tabelle-rahmen")) continue;
+        /* Nur noch die Tabellen sind absichtlich waagerecht scrollbar.
+           Die Sprungmarken-Leisten (.ls-sprung, .fq-sprung) waren es
+           frueher auch und standen deshalb hier — seit sie umbrechen
+           (Rueckmeldung 22.08.2026) muessen sie mitgeprueft werden,
+           sonst faellt ein zurueckkehrender Ueberlauf nie auf. */
+        if (el.closest(".wd-tabelle-rahmen")) continue;
         const r = el.getBoundingClientRect();
         if (r.width === 0 || r.height === 0) continue;
         if (r.right > vp + 1.5) {

webdesign/faq.html

@@ -23,14 +23,29 @@
     padding-bottom: .5rem; margin-bottom: 1.1rem;
     border-bottom: 1px solid var(--wd-rand);
   }
-  /* Sprungmarken wie auf der Leistungsseite: waagerecht wischbar statt
-     über vier Zeilen umbrechend. */
-  .fq-sprung { display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem; scroll-snap-type: x proximity; }
+  /* Sprungmarken.
+     Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
+     "ich will nicht dass man die hin und her schieben muss man soll die
+     alle sehen aber nicht schieben muessen" -- voellig richtig. Eine
+     Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild
+     ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein
+     haesslicher Balken quer ueber die Seite.
+     Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf
+     dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer
+     Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die
+     Zeile und der waagerechte Ueberlauf waere durch die Hintertuer
+     zurueck. */
+  .fq-sprung {
+    display: flex; flex-wrap: wrap; gap: .5rem;
+    padding: .2rem 0 1rem;
+  }
   .fq-sprung a {
-    flex: 0 0 auto; scroll-snap-align: start;
-    padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
-    border-radius: 999px; border: 1px solid var(--wd-rand);
-    font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
+    flex: 0 1 auto;
+    padding: .55rem 1rem; min-height: 44px;
+    display: inline-flex; align-items: center; justify-content: center;
+    border-radius: 12px; border: 1px solid var(--wd-rand);
+    font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
+    white-space: normal; text-align: center; line-height: 1.25;
   }
   .fq-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }
 </style>

webdesign/leistungen.html

@@ -16,19 +16,29 @@
 <link rel="stylesheet" href="/assets/css/main.css?v=20260822wd2" />
 <link rel="stylesheet" href="/assets/css/webdesign.css?v=20260822wd2" />
 <style>
-  /* Sprungmarken-Leiste: auf schmalen Bildschirmen waagerecht wischbar
-     statt umbrechend — vier lange deutsche Paketnamen ergeben sonst vier
-     Zeilen, die den halben ersten Bildschirm fressen. */
+  /* Sprungmarken.
+     Frueher eine waagerecht wischbare Leiste. Rueckmeldung 22.08.2026:
+     "ich will nicht dass man die hin und her schieben muss man soll die
+     alle sehen aber nicht schieben muessen" -- voellig richtig. Eine
+     Wischleiste verbirgt, DASS es noch mehr gibt: was rechts aus dem Bild
+     ragt, existiert fuer die meisten Menschen nicht. Dazu kommt ein
+     haesslicher Balken quer ueber die Seite.
+     Jetzt bricht die Leiste einfach um. Der Text in den Knoepfen darf
+     dabei mitbrechen (white-space: normal) -- sonst sprengt ein langer
+     Name wie "Buchhaltungs- & Steuerverwaltungsseiten" auf 320px die
+     Zeile und der waagerechte Ueberlauf waere durch die Hintertuer
+     zurueck. */
   .ls-sprung {
-    display: flex; gap: .5rem; overflow-x: auto; padding: .2rem .2rem 1rem;
-    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
-    scroll-snap-type: x proximity;
+    display: flex; flex-wrap: wrap; gap: .5rem;
+    padding: .2rem 0 1rem;
   }
   .ls-sprung a {
-    flex: 0 0 auto; scroll-snap-align: start;
-    padding: .6rem 1rem; min-height: 44px; display: inline-flex; align-items: center;
-    border-radius: 999px; border: 1px solid var(--wd-rand);
-    font-size: .92rem; font-weight: 600; color: var(--wd-text-mid); white-space: nowrap;
+    flex: 0 1 auto;
+    padding: .55rem 1rem; min-height: 44px;
+    display: inline-flex; align-items: center; justify-content: center;
+    border-radius: 12px; border: 1px solid var(--wd-rand);
+    font-size: .92rem; font-weight: 600; color: var(--wd-text-mid);
+    white-space: normal; text-align: center; line-height: 1.25;
   }
   .ls-sprung a:hover { color: var(--wd-text); border-color: var(--wd-rand-stark); background: rgba(127,208,232,.06); }