Kundenansicht neu P1: Korrekturen aus der Sichtprüfung

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

public/neu/huelle.css

@@ -56,10 +56,11 @@
 .kn-konto-wurzel:focus { outline: none; } /* tabindex -1: ein Tipp ins Leere behält die Tasten (Esc, Tab) im Sheet */
 .kn-konto-scrim { position: absolute; inset: 0; background: transparent; }
 .kn-konto { position: absolute; top: 56px; right: 24px; width: 280px; max-height: calc(100vh - 72px); padding: 8px 20px; overflow-y: auto; overscroll-behavior: contain; background: var(--kn-bg); border-radius: var(--kn-radius-lg); box-shadow: var(--kn-shadow-pop); animation: kn-aufpoppen .14s ease-out; }
-.kn-konto-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--kn-line); }
-.kn-konto-name { display: block; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
-.kn-konto-mail { display: block; font-size: 13px; line-height: 18px; color: var(--kn-text-2); overflow-wrap: anywhere; }
-.kn-konto-zu { flex: none; min-height: 32px; padding: 0 4px; font-weight: 600; }
+.kn-konto-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--kn-line); }
+.kn-konto-kopf > div { display: contents; } /* Name neben „Schließen“, die Mail darunter über die volle Breite */
+.kn-konto-name { grid-column: 1; grid-row: 1; display: block; font-size: 17px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
+.kn-konto-mail { grid-column: 1 / -1; grid-row: 2; display: block; font-size: 13px; line-height: 18px; color: var(--kn-text-2); overflow-wrap: anywhere; }
+.kn-konto-zu { grid-column: 2; grid-row: 1; min-height: 32px; padding: 0 4px; font-weight: 600; }
 .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; }
@@ -83,8 +84,8 @@
 .kn-skip:focus { top: 8px; }
 .kn-nur-leser { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
-.kn-banner { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; height: 36px; padding: 0 16px; background: var(--kn-accent); color: #fff; font-size: 13px; line-height: 20px; }
-.kn-banner > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.kn-banner { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 6px 16px; background: var(--kn-accent); color: #fff; font-size: 13px; line-height: 20px; }
+.kn-banner > span { min-width: 0; overflow-wrap: anywhere; }
 .kn-banner button { flex: none; min-height: 28px; padding: 0 4px; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
 .kn-banner:not([hidden]) ~ .kn-huelle .kn-menue { top: 36px; }
 
@@ -97,7 +98,8 @@
 .kn-nav-zahl--heiss { color: var(--kn-rot-fg); font-weight: 600; }
 
 .kn-spalte { position: relative; min-height: 100vh; margin-left: var(--kn-sidebar-w); }
-.kn-kopf { position: absolute; top: 0; right: 0; z-index: 10; display: flex; align-items: center; height: var(--kn-kopf-h); padding: 0 24px; }
+.kn-kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; height: var(--kn-kopf-h); margin-bottom: calc(0px - var(--kn-kopf-h)); padding: 0 24px; pointer-events: none; } /* Desktop: nur das Profilbild, bleibt beim Scrollen oben rechts und schiebt den Inhalt nicht */
+.kn-kopf > * { pointer-events: auto; }
 .kn-kopf-titel { display: none; }
 .kn-haupt, .kn-blatt { max-width: 1160px; padding: 36px 48px 80px; }
 .kn-haupt .kn-titel, .kn-blatt .kn-titel { margin: 0 0 24px; }
@@ -111,7 +113,7 @@
 @media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
   .kn-menue { display: none; }
   .kn-spalte { margin-left: 0; }
-  .kn-kopf { position: sticky; right: auto; justify-content: space-between; height: auto; min-height: calc(var(--kn-kopf-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 20px; border-bottom: 1px solid transparent; background: var(--kn-bg); transition: border-color 300ms; }
+  .kn-kopf { justify-content: space-between; height: auto; min-height: calc(var(--kn-kopf-h) + env(safe-area-inset-top)); margin-bottom: 0; padding: env(safe-area-inset-top) 8px 0 20px; border-bottom: 1px solid transparent; background: var(--kn-bg); transition: border-color 300ms; pointer-events: auto; }
   .kn-scrolled .kn-kopf { border-bottom-color: var(--kn-line); }
   .kn-kopf-titel { display: block; font-size: 15px; line-height: 22px; font-weight: 600; opacity: 0; transform: translateY(5px); transition: opacity 250ms, transform 250ms; }
   .kn-titled .kn-kopf-titel { opacity: 1; transform: none; }
@@ -130,7 +132,7 @@
 .kn-leiste-reel[data-etage="offen"] .kn-rw { transform: translateY(-56px); }
 .kn-leiste-reel[data-etage="offen"] #kn-zeile-haupt, .kn-leiste-reel:not([data-etage="offen"]) #kn-zeile-etage { visibility: hidden; transition: transform 550ms var(--kn-bremse), visibility 0s 550ms; }
 
-.kn-balken { position: relative; flex: 1; min-width: 0; height: 44px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
+.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); }

public/neu/reiter.js

@@ -124,7 +124,8 @@ export function baueReiter({ eintraege, aktiv, art = 'unterstrich', ariaLabel =
     if (!kannMessen()) return
     if (balken) {
       wurzel.classList.remove('kn-schrift-klein', 'kn-fb')
-      if (schriftStufe({ inhaltsBreite: basisEl.scrollWidth, verfuegbar: wurzel.clientWidth }) === 14) wurzel.classList.add('kn-schrift-klein')
+      const luft = typeof getComputedStyle === 'function' ? parseFloat(getComputedStyle(wurzel).paddingRight) || 0 : 0 // Luft rechts gehört nicht zum Platz der Wörter
+      if (schriftStufe({ inhaltsBreite: basisEl.scrollWidth, verfuegbar: wurzel.clientWidth - luft }) === 14) wurzel.classList.add('kn-schrift-klein')
       overlay.style.width = `${rect(basisEl).width}px`
       if (!overlayPasst(tabs.map((t) => rect(t).width), liste.map((e) => rect(e.kopie).width))) wurzel.classList.add('kn-fb')
     }