Navigation leichter: Handy-Leiste, Schwarz nur für die Hauptaktion, Verträge mit zwei Reitern, kürzeres Konto (V3, V5, V7, V8)

V3: In der Fahrstuhl-Zeile läuft unter dem aktiven Wort eine dünne Linie statt des schwarzen Blocks; das Wort wird dunkel und fett. Die weiße Overlay-Kopie bleibt im Baum, wird aber nicht mehr gezeigt.
V5: Terminplaner: Tag/Woche/Monat als hellgrauer Umschalter mit weißer Auswahl, Filter als leise Chips. „Einschalten“ in der Liste Entdecken ist ein heller Knopf; schwarz bleibt der Knopf der Bestätigungsseite.
V7: Verträge nur noch mit Abo und Rechnungen. Das Stundenkonto steht beim Wartungs-Abo als Abschnitt unter dem Abo (ohne doppelte Warnungen), #stunden springt dorthin. Der E-Mail-Speicher ist die Unterseite #speicher (Link „ändern“ in der Abo-Zeile), ohne Widerrufsstreifen wie die anderen Bestellseiten. Alte Links bleiben gültig.
V8: Konto mit vier Zeilen (Passwort, Verträge kündigen, Vertrag widerrufen, Abmelden), Datenschutz und Impressum klein darunter.

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

public/neu/module.css

@@ -109,14 +109,15 @@
 .kn .tm-reiter:focus-visible { outline-offset: -2px; }
 .kn .tm-panel:focus { outline: none; }
 
-/* ---- Werkzeugleiste: Ansicht, Pfeile, Sprung, Filter ---- */
+/* ---- Werkzeugleiste: Ansicht, Pfeile, Sprung, Filter ----
+   Navigation leichter (V5): Schwarz nur für die Hauptaktion. Die Ansicht (Tag/Woche/Monat) ist ein hellgrauer Umschalter mit weißer Auswahl,
+   die Filter sind leise Chips mit grauer Auswahl; schwarz bleibt „+ Termin eintragen“. */
 .kn .tm-leiste { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
 .kn .tm-leiste [hidden], .kn .tm-filter[hidden] { display: none; }
-.kn .tm-segment { display: inline-flex; border-radius: var(--kn-radius); background: var(--kn-bg); box-shadow: var(--kn-ring); overflow: hidden; }
-.kn .tm-seg { min-height: 32px; padding: 0 14px; border: 0; background: none; color: var(--kn-text); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .12s; }
-.kn .tm-seg + .tm-seg { box-shadow: -1px 0 0 var(--kn-line); }
-.kn .tm-seg:hover { background: var(--kn-bg-hover); }
-.kn .tm-seg[aria-pressed='true'] { background: var(--kn-accent); color: #fff; }
+.kn .tm-segment { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--kn-bg-subtle); box-shadow: inset 0 0 0 1px var(--kn-line); overflow: hidden; }
+.kn .tm-seg { min-height: 28px; padding: 0 14px; border: 0; border-radius: 6px; background: none; color: var(--kn-text-2); font: inherit; font-weight: 500; cursor: pointer; transition: background-color .12s, color .12s; }
+.kn .tm-seg:hover { color: var(--kn-text); }
+.kn .tm-seg[aria-pressed='true'] { background: var(--kn-bg); color: var(--kn-text); font-weight: 600; box-shadow: var(--kn-ring); }
 .kn .tm-nav { display: inline-flex; align-items: center; gap: 6px; }
 .kn .tm-heute { min-width: 72px; }
 .kn .tm-pfeil { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--kn-radius); background: var(--kn-bg); box-shadow: var(--kn-ring); color: var(--kn-text); font: inherit; font-size: 18px; line-height: 1; cursor: pointer; }
@@ -124,9 +125,9 @@
 .kn .tm-sprung { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--kn-text-2); }
 .kn .tm-zeitraum { margin: 20px 0 8px; font-size: 17px; line-height: 24px; font-weight: 600; }
 .kn .tm-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
-.kn .tm-chip { min-height: 28px; padding: 0 12px; border: 0; border-radius: var(--kn-radius); background: var(--kn-bg); box-shadow: var(--kn-ring); color: var(--kn-text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .12s; }
-.kn .tm-chip:hover { background: var(--kn-bg-hover); }
-.kn .tm-chip[aria-pressed='true'] { background: var(--kn-accent); color: #fff; }
+.kn .tm-chip { min-height: 28px; padding: 0 10px; border: 0; border-radius: var(--kn-radius); background: none; color: var(--kn-text-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background-color .12s, color .12s; }
+.kn .tm-chip:hover { background: var(--kn-bg-hover); color: var(--kn-text); }
+.kn .tm-chip[aria-pressed='true'] { background: var(--kn-grau-bg); color: var(--kn-text); font-weight: 600; }
 .kn .tm-werkzeug-zeile { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
 .kn .tm-werkzeuge { display: contents; }
 .kn .tm-werkzeuge button[aria-expanded='true'] { background: var(--kn-bg-hover); }
@@ -340,6 +341,8 @@
   .kn .tm-leiste { gap: 8px; }
   .kn .tm-segment { width: 100%; }
   .kn .tm-seg { flex: 1; padding-left: 8px; padding-right: 8px; }
+  .kn .tm-filter { gap: 2px; } /* die fünf leisen Chips passen auf 390 px in eine Zeile */
+  .kn .tm-chip { padding-left: 8px; padding-right: 8px; }
   .kn .tm-nav { width: 100%; }
   .kn .tm-nav .tm-heute { flex: 1; }
   .kn .tm-sprung { width: 100%; }