diff --git a/assets/css/webdesign.css b/assets/css/webdesign.css
index 2ed8ef65..106e6839 100644
--- a/assets/css/webdesign.css
+++ b/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; }
diff --git a/server/pruefe-webdesign-handy.mjs b/server/pruefe-webdesign-handy.mjs
index adf9fa4c..2a721f06 100644
--- a/server/pruefe-webdesign-handy.mjs
+++ b/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) {
diff --git a/webdesign/faq.html b/webdesign/faq.html
index 3fd89ff9..fe343c0b 100644
--- a/webdesign/faq.html
+++ b/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); }
diff --git a/webdesign/leistungen.html b/webdesign/leistungen.html
index dc1eb5b8..4e30929f 100644
--- a/webdesign/leistungen.html
+++ b/webdesign/leistungen.html
@@ -16,19 +16,29 @@