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/huelle.css

@@ -64,7 +64,10 @@
 .kn-konto-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0; border-bottom: 1px solid var(--kn-line); text-align: left; color: var(--kn-text); }
 .kn-konto-zeile:hover .kn-konto-text { text-decoration: underline; text-decoration-color: var(--kn-line-strong); text-underline-offset: 3px; }
 .kn-konto-zeile--betont .kn-konto-text { font-weight: 600; }
-.kn-konto-zeile[data-konto="abmelden"] { border-bottom: 0; color: var(--kn-text-2); }
+.kn-konto-zeile[data-konto="abmelden"] { color: var(--kn-text-2); }
+/* Navigation leichter (V8): Datenschutz und Impressum klein nebeneinander unter den vier Zeilen */
+.kn-konto-liste { display: flex; flex-wrap: wrap; column-gap: 16px; }
+.kn-konto-zeile--klein { width: auto; min-height: 36px; border-bottom: 0; font-size: 13px; line-height: 18px; color: var(--kn-text-2); }
 .kn-konto-text { display: block; }
 .kn-konto-hinweis { display: block; margin-top: 1px; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--kn-text-2); }
 
@@ -73,6 +76,7 @@
   .kn-konto { top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 92vh; padding: 8px max(20px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border-radius: 12px 12px 0 0; animation: kn-sheet-hoch 500ms var(--kn-bremse); }
   .kn-konto-zu { min-height: 44px; }
   .kn-konto-zeile { min-height: 46px; }
+  .kn-konto-zeile--klein { min-height: 44px; }
 }
 @keyframes kn-sheet-hoch { from { transform: translateY(100%); } }
 
@@ -133,7 +137,9 @@
   #kn-fehler { margin: 12px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
 }
 
-/* ---------- Leiste (Handy): Fahrstuhl-Zeile mit Balken ---------- */
+/* ---------- Leiste (Handy): Fahrstuhl-Zeile mit Linie ----------
+   Unter dem aktiven Wort läuft eine dünne schwarze Linie (der Gleiter), das Wort selbst wird dunkel und fett. Schwarze Flächen bleiben den Knöpfen
+   vorbehalten. Die weiße Overlay-Kopie der Wörter aus reiter.js wird dafür nicht mehr gezeigt. */
 
 .kn-leiste { display: none; }
 .kn-leiste-reel { height: var(--kn-zeile-h); overflow: hidden; }
@@ -144,25 +150,18 @@
 .kn-balken { position: relative; flex: 1; min-width: 0; height: 44px; padding-right: 6px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } /* 6 px Luft rechts: der Zähler am letzten Wort ragt über das Wort hinaus und würde sonst abgeschnitten */
 .kn-balken::-webkit-scrollbar { display: none; }
 .kn-balken-basis { position: relative; z-index: 1; display: flex; width: max-content; min-width: 100%; height: 44px; }
-.kn-gleiter { position: absolute; z-index: 2; top: 4px; left: 0; height: 36px; overflow: hidden; border-radius: 6px; background: var(--kn-accent); pointer-events: none; transition: transform 550ms var(--kn-feder), width 550ms var(--kn-feder); }
-.kn-overlay { position: absolute; top: -4px; left: 0; display: flex; height: 44px; transition: transform 550ms var(--kn-feder); }
-.kn-fb .kn-overlay { display: none; }
-.kn-fb .kn-gleiter { z-index: 0; }
-.kn-fb .kn-t[aria-selected="true"] { color: #fff; }
+.kn-gleiter { position: absolute; z-index: 2; bottom: 2px; left: 0; height: 2px; overflow: hidden; border-radius: 1px; background: var(--kn-accent); pointer-events: none; transition: transform 550ms var(--kn-feder), width 550ms var(--kn-feder); }
+.kn-overlay { display: none; }
 
-.kn-t { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 600; color: var(--kn-text-2); white-space: nowrap; text-align: center; transition: color 250ms; }
+.kn-t { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 4px; font-size: 15px; font-weight: 500; color: var(--kn-text-2); white-space: nowrap; text-align: center; transition: color 250ms; }
+.kn-t[aria-selected="true"] { color: var(--kn-text); font-weight: 600; }
 /* Fokusring: .kn [tabindex]:focus-visible und .kn button:focus-visible (module.css, 0-3-0 und 0-2-1, später geladen) setzen +2px und schlugen die alte Regel
-   (0-2-0); der Ring lag außerhalb und wurde vom Balken (overflow) abgeschnitten. Mit .kn und [role="tab"] (0-4-0) bleibt er innen. Der aktive Reiter liegt
-   auf dem schwarzen Gleiter: dort zeichnet der Gleiter einen hellen Innenring. */
+   (0-2-0); der Ring lag außerhalb und wurde vom Balken (overflow) abgeschnitten. Mit .kn und [role="tab"] (0-4-0) bleibt er innen. */
 .kn .kn-t[role="tab"]:focus-visible { outline-offset: -2px; border-radius: 6px; }
-.kn .kn-balken:has(.kn-t:focus-visible) .kn-gleiter { outline: 2px solid #fff; outline-offset: -3px; }
-.kn .kn-fb .kn-t[aria-selected="true"]:focus-visible { outline-color: #fff; }
 .kn-schrift-klein .kn-t { font-size: 14px; }
-.kn-overlay .kn-t { color: #fff; }
 
 .kn-l { position: relative; line-height: 20px; }
 .kn-zahl { position: absolute; top: -9px; left: 100%; min-width: 16px; height: 16px; margin-left: -6px; padding: 0 4px; border-radius: 8px; background: #b3093c; color: #fff; font-size: 11px; line-height: 16px; font-weight: 700; text-align: center; box-shadow: 0 0 0 2px var(--kn-bg); animation: kn-zahl-ein 400ms cubic-bezier(.3,1.5,.5,1); }
-.kn-overlay .kn-zahl { box-shadow: 0 0 0 2px var(--kn-accent); }
 .kn-reiter-t .kn-zahl { top: -7px; }
 .kn-zahl--weg { transform: scale(0); transition: transform 250ms; animation: none; }
 @keyframes kn-zahl-ein { from { transform: scale(0); } }