ClaudeandClaude Sonnet 5.5
f8962ffa50
Der Banner stand im Fluss (relative) und schob den Kopf nach unten, das am Handy feste Blatt begann aber fest bei der Kopfhöhe: es deckte den unteren Teil des Kopfs samt Profilbild ab (Konto und Abmelden nicht erreichbar); am Desktop blieb das Menü bei fest 36 px stehen, der Banner ist aber 40 px hoch und beim Scrollen blieb eine Lücke. Jetzt bleibt der Banner oben stehen (sticky), huelle.js setzt --kn-banner-h auf seine Höhe (auch bei Umbruch am Handy), und Kopf, Menü, Blatt und Konto-Popover beginnen darunter. Werkzeug-Ansicht kn-huelle-banner-blatt. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
196 lines
16 KiB
CSS
196 lines
16 KiB
CSS
/* Kundenansicht neu: Hülle (Menü, Kopf, Blatt, Leiste, Streifen, Konto). Weiß, Haarlinie, Schwarz; keine Verläufe, kein Glas.
|
|
Die Grundregeln gelten am Desktop, die Handy-Abfrage überschreibt für das Handy. */
|
|
|
|
/* ---------- Blatt (Etage 2) ---------- */
|
|
|
|
.kn-blatt { background: var(--kn-bg); }
|
|
.kn-haupt[inert] { display: none; } /* Desktop: die Unterseite ersetzt die Hauptseite in der Spalte */
|
|
|
|
.kn-brot { margin-bottom: 8px; font-size: 13px; line-height: 20px; color: var(--kn-text-2); }
|
|
.kn-brot a { color: var(--kn-text-2); }
|
|
.kn-brot-trenner { color: var(--kn-text-3); }
|
|
.kn-brot [aria-current="page"] { color: var(--kn-text); }
|
|
|
|
.kn-zurueck { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 6px; font-size: 15px; font-weight: 600; color: var(--kn-text); }
|
|
.kn-zurueck::before { content: ""; width: 9px; height: 9px; margin-left: 4px; border: solid; border-width: 0 0 2px 2px; transform: rotate(45deg); }
|
|
.kn-zurueck--voll { flex: 1; }
|
|
.kn-zurueck .kn-l { position: relative; line-height: 20px; }
|
|
.kn-vl { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--kn-line); }
|
|
.kn-punkt { position: absolute; top: -2px; left: 100%; width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; background: #b3093c; box-shadow: 0 0 0 2px var(--kn-bg); }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn { --kn-unten: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom)); }
|
|
.kn-blatt {
|
|
position: fixed; inset: calc(var(--kn-banner-h) + var(--kn-kopf-h) + env(safe-area-inset-top)) 0 var(--kn-unten, var(--kn-zeile-h)); z-index: 20;
|
|
overflow-y: auto; overscroll-behavior: contain; border-radius: 12px 12px 0 0;
|
|
box-shadow: 0 0 0 1px rgba(26,31,54,.06), 0 -8px 24px rgba(26,31,54,.1);
|
|
transform: translateY(100%); transition: transform 550ms var(--kn-bremse);
|
|
}
|
|
.kn-blatt--auf { transform: none; }
|
|
.kn-haupt[inert] { display: block; } /* am Handy bleibt die Hauptseite unter dem Blatt stehen */
|
|
.kn-brot { display: none; }
|
|
}
|
|
|
|
/* ---------- Streifen (Widerrufsfrist) ---------- */
|
|
|
|
.kn-streifen { display: flex; align-items: center; min-height: 44px; padding: 0 48px; background: var(--kn-orange-bg); color: var(--kn-orange-fg); font-size: 14px; line-height: 20px; font-weight: 600; }
|
|
.kn-streifen-link { margin-left: 6px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
|
|
.kn-tastatur .kn-streifen { display: none; }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn-streifen { position: fixed; left: 0; right: 0; bottom: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom)); z-index: 30; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
|
|
.kn-streifen-link { min-height: 44px; display: inline-flex; align-items: center; }
|
|
.kn-hat-streifen { --kn-unten: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 44px); }
|
|
.kn-hat-streifen .kn-haupt { padding-bottom: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 28px + 44px); }
|
|
}
|
|
|
|
/* ---------- Konto (Popover am Desktop, Sheet am Handy) ---------- */
|
|
|
|
.kn-avatar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
|
|
.kn-avatar-kreis { display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: var(--kn-grau-bg); color: var(--kn-grau-fg); font-size: 12px; line-height: 16px; font-weight: 600; }
|
|
.kn-avatar img { display: none; width: 100%; height: 100%; object-fit: cover; }
|
|
.kn-avatar.has-img img { display: block; }
|
|
.kn-avatar.has-img .kn-initialen { display: none; }
|
|
|
|
.kn-konto-wurzel { position: fixed; inset: 0; z-index: 60; }
|
|
.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: calc(var(--kn-banner-h) + 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: 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; }
|
|
.kn-konto-zeile[data-konto="abmelden"] { border-bottom: 0; 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); }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn-konto-scrim { background: var(--kn-overlay); animation: kn-einblenden .3s ease-out; }
|
|
.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; }
|
|
}
|
|
@keyframes kn-sheet-hoch { from { transform: translateY(100%); } }
|
|
|
|
/* ---------- Sperre der Mitarbeiter-Kundenansicht (E-Fix F2) ----------
|
|
public/kundenansicht.js hängt bei 409 view_replaced bzw. 401 view_expired ein div.kb-view-overlay (role alertdialog) an den Body. Die alte Seite
|
|
gestaltet es in kundenbereich.css, die dashboard.html nicht lädt: hier die Regeln für die neue Seite. Deckend weiß über allem (Konto 60, Leiste 40),
|
|
damit nichts Veraltetes bedienbar bleibt. */
|
|
.kb-view-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: var(--kn-bg); }
|
|
.kb-view-overlay-card { width: 100%; max-width: 420px; text-align: center; }
|
|
.kb-view-overlay-card p { margin: 0 0 24px; font-size: 17px; line-height: 26px; color: var(--kn-text); }
|
|
.kb-view-overlay-card button { min-height: 44px; padding: 0 24px; border-radius: var(--kn-radius); background: var(--kn-accent); color: #fff; font-weight: 600; box-shadow: var(--kn-shadow-btn); }
|
|
.kb-view-overlay-card button:hover { background: var(--kn-accent-hover); }
|
|
|
|
/* ---------- Gerüst: Spalte, Inhalt, Menü (Desktop) und Kopf ---------- */
|
|
|
|
.kn { --kn-kopf-h: 52px; --kn-banner-h: 0px; } /* --kn-banner-h setzt huelle.js auf die Höhe des Mitarbeiter-Banners (E-Fix M4): Kopf, Menü, Blatt und Konto beginnen darunter */
|
|
|
|
.kn-skip { position: absolute; top: -48px; left: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--kn-radius); background: var(--kn-accent); color: #fff; font-weight: 600; }
|
|
.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: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 6px max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); 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-menue { position: fixed; inset: var(--kn-banner-h) auto 0 0; z-index: 20; display: flex; flex-direction: column; gap: 2px; width: var(--kn-sidebar-w); padding: 20px 12px; overflow-y: auto; border-right: 1px solid var(--kn-line); background: var(--kn-bg); }
|
|
.kn-marke { padding: 0 10px 16px; font-size: 15px; line-height: 24px; font-weight: 600; }
|
|
.kn-nav-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; border-radius: var(--kn-radius); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--kn-text-2); text-align: left; }
|
|
.kn-nav-item:hover { background: var(--kn-bg-hover); color: var(--kn-text); }
|
|
.kn-nav-item[aria-current="page"] { background: var(--kn-accent-soft); color: var(--kn-accent); font-weight: 600; }
|
|
.kn-nav-zahl { font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--kn-text-2); }
|
|
.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: sticky; top: var(--kn-banner-h); 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; }
|
|
#kn-fehler { margin: 16px 48px 0; }
|
|
@media (max-width: 1100px) {
|
|
.kn-haupt, .kn-blatt { padding: 32px 28px 80px; }
|
|
#kn-fehler { margin: 16px 28px 0; }
|
|
.kn-streifen { padding: 0 28px; }
|
|
}
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn-menue { display: none; }
|
|
.kn-spalte { margin-left: 0; }
|
|
.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) max(8px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); 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; }
|
|
.kn-haupt { max-width: none; padding: 2px max(16px, env(safe-area-inset-right)) calc(var(--kn-zeile-h) + env(safe-area-inset-bottom) + 28px) max(16px, env(safe-area-inset-left)); }
|
|
.kn-blatt { max-width: none; padding: 0 max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); }
|
|
.kn-haupt .kn-titel, .kn-blatt .kn-titel { margin: 6px 0 10px; font-size: 28px; line-height: 34px; }
|
|
.kn-banner button { min-height: 44px; }
|
|
#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 ---------- */
|
|
|
|
.kn-leiste { display: none; }
|
|
.kn-leiste-reel { height: var(--kn-zeile-h); overflow: hidden; }
|
|
.kn-rw { display: flex; align-items: center; height: var(--kn-zeile-h); padding: 0 max(4px, env(safe-area-inset-right)) 0 max(4px, env(safe-area-inset-left)); transition: transform 550ms var(--kn-bremse), visibility 0s; }
|
|
.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; 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-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; }
|
|
/* 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. */
|
|
.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); } }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn-leiste { display: block; position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; border-top: 1px solid var(--kn-line); background: var(--kn-bg); padding-bottom: env(safe-area-inset-bottom); }
|
|
.kn.kn-tastatur { --kn-unten: 0px; }
|
|
}
|
|
.kn-tastatur .kn-leiste { transform: translateY(110%); visibility: hidden; transition: transform 400ms var(--kn-bremse), visibility 0s 400ms; }
|
|
|
|
/* ---------- Querformat (Handy gedreht): niedrigere Zeile, keine große Überschrift ---------- */
|
|
|
|
@media (max-height: 500px) and (max-width: 880px), (max-height: 500px) and (pointer: coarse) {
|
|
.kn { --kn-zeile-h: 44px; --kn-kopf-h: 44px; }
|
|
.kn-leiste-reel[data-etage="offen"] .kn-rw { transform: translateY(-44px); }
|
|
.kn-haupt .kn-titel, .kn-blatt .kn-titel { display: none; }
|
|
.kn-kopf-titel { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* ---------- Bewegung reduziert: keine Federn, höchstens kurzes Überblenden ---------- */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.kn-gleiter, .kn-overlay, .kn-rw, .kn-t { transition: none; }
|
|
.kn-blatt { transform: none; opacity: 0; transition: opacity 150ms; }
|
|
.kn-blatt--auf { opacity: 1; }
|
|
.kn-konto-scrim, .kn-konto { animation: kn-einblenden 150ms ease-out; }
|
|
.kn-zahl { animation: none; }
|
|
.kn-zahl--weg { transition: none; }
|
|
.kn-kopf, .kn-kopf-titel, .kn-tastatur .kn-leiste { transition-duration: 150ms; }
|
|
}
|