ClaudeandClaude Sonnet 5.5
670ead3091
Pilot-Feedback 17.10.: Der Chat wirkte durchsichtig und verrutscht. - Handy: Inhalt steht fest zwischen Kopf und Leiste (wie das Blatt); die Eingabe sitzt höchstens 6 px über der Leiste bzw. dem Widerrufsstreifen und bei offener Tastatur am unteren Rand des sichtbaren Bereichs. "Chat" steht klein im Kopf (die H1 bleibt nur für Screenreader), der Kopf ist deckend mit Haarlinie, der Verlauf beginnt direkt darunter und scrollt in sich. - Desktop: Spalte in Fensterhöhe, Chat höchstens 760 px breit und mittig, Verlauf füllt die Höhe, Eingabe am unteren Spaltenrand. - Verlauf steht unten (neueste Nachricht sichtbar), kurze Verläufe unten bei der Eingabe; Blasen fremd #f8f9fb, eigen #ebeef1. - "Senden" bleibt schwarz, auch bei leerem Feld (gesperrt im Ansichtsmodus weiter gedämpft). - haltFokus: Druck auf Senden, Anhang oder Mikrofon nimmt dem Textfeld den Fokus nicht; sonst kommt die Leiste zurück, schiebt die feste Eingabe hoch und der Tipp auf "Senden" geht bei offener Tastatur verloren (im Browser nachgestellt). public/chat-composer.js und die alte Ansicht bleiben unverändert. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
218 lines
19 KiB
CSS
218 lines
19 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; }
|
|
|
|
/* ---------- Chat: Vollbild-Ansicht (E-Fix Chat) ----------
|
|
Solange der Bereich Chat zu sehen ist, füllt er die Höhe: Kopf und Eingabe stehen fest, nur der Verlauf scrollt in sich (Aussehen: ansichten.css).
|
|
Der Chat hat keine Etage, die Hauptseite ist hier nie inert. Desktop: Spalte in Fensterhöhe, die Eingabe am unteren Rand der zentrierten Spalte
|
|
(höchstens 760 px). Handy: der Inhalt steht fest zwischen Kopf und Leiste (wie das Blatt), „Chat“ steht klein im Kopf statt als große Überschrift. */
|
|
.kn-spalte:has(#bereich-chat:not([hidden])) { display: flex; flex-direction: column; height: calc(100vh - var(--kn-banner-h)); height: calc(100dvh - var(--kn-banner-h)); min-height: 0; }
|
|
.kn-spalte:has(#bereich-chat:not([hidden])) > :not(.kn-haupt) { flex: none; }
|
|
.kn-haupt:has(#bereich-chat:not([hidden])) { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; max-width: none; padding-bottom: 24px; }
|
|
.kn-haupt > #bereich-chat:not([hidden]) { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-height: 0; max-width: 760px; margin: 0 auto; }
|
|
#bereich-chat > .kn-titel { flex: none; margin: 0 0 16px; }
|
|
#chat-body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn-spalte:has(#bereich-chat:not([hidden])) { display: block; height: auto; }
|
|
.kn-haupt:has(#bereich-chat:not([hidden])) { 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)); padding: 0 max(16px, env(safe-area-inset-right)) 6px max(16px, env(safe-area-inset-left)); background: var(--kn-bg); }
|
|
#bereich-chat > .kn-titel { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* bleibt für Screenreader die Überschrift der Seite */
|
|
.kn:has(#bereich-chat:not([hidden])) .kn-kopf { height: calc(var(--kn-kopf-h) + env(safe-area-inset-top)); border-bottom-color: var(--kn-line); } /* feste Höhe wie der Rand oben des Inhalts: im Querformat wäre der Kopf mit Haarlinie 1 px höher */
|
|
.kn:has(#bereich-chat:not([hidden])) .kn-kopf-titel { opacity: 1; transform: none; }
|
|
}
|
|
|
|
/* ---------- 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; }
|
|
/* E-Fix M7: die Regel der beiden Fahrstuhl-Zeilen hat Spezifität 1-2-0 und schlug das .kn-rw oben; sie fuhr trotz „Bewegung reduziert“ noch 550 ms.
|
|
Gleiche Selektoren, später im Blatt: die Zeilen tauschen sofort (kein Verzug der Sichtbarkeit), nichts gleitet durch die andere Zeile. */
|
|
.kn-leiste-reel[data-etage="offen"] #kn-zeile-haupt, .kn-leiste-reel:not([data-etage="offen"]) #kn-zeile-etage { 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; }
|
|
}
|