ClaudeandClaude Opus 5.5
17bce304eb
Die Messung am iPhone (iOS 26.2, App vom Home-Bildschirm) zeigt die
Ursache: Auf der Startseite ist das Fenster 1002 px hoch. Im Chat
schrumpft die Spalte auf den Kopf (alles andere steht fest), die Seite
wird kürzer als der Bildschirm, und iOS hält unten rund 60 pt für eine
Safari-Leiste frei, die es in der App nicht gibt: 932 px, Leiste und
Eingabe stehen zu hoch, darunter ein weißer Streifen. Mit der Tastatur
hat das nichts zu tun.
Am Handy hat die Spalte im Chat jetzt wie in den anderen Bereichen
mindestens volle Bildschirmhöhe (100vh, dann 100lvh). Ohne
Browserleisten scrollt die Seite dadurch nicht; in Chromium sind alle
Chat-Bilder am Handy und Desktop pixelgleich zu main.
Der Höhen-Wächter aus 0fa8fdb (Hülle aus- und einblenden) hat nicht
geholfen und ist wieder raus. Die Messung bleibt für die Kontrolle am
iPhone und wird danach entfernt.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
221 lines
19 KiB
CSS
221 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) {
|
|
/* Mindestens volle Bildschirmhöhe wie die anderen Bereiche (.kn-spalte, 100vh): ist die Seite kürzer, hält iOS 26 in der App vom Home-Bildschirm
|
|
unten rund 60 pt für eine Safari-Leiste frei, die es dort nicht gibt. Das Fenster wird kleiner (gemessen am iPhone 2026-10-29: 1002 → 932 px),
|
|
Leiste und Eingabe stehen zu hoch, darunter ein weißer Streifen. lvh = Höhe ohne Browserleisten; die Seite scrollt dadurch nicht. */
|
|
.kn-spalte:has(#bereich-chat:not([hidden])) { display: block; height: auto; min-height: 100vh; min-height: 100lvh; }
|
|
.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; }
|
|
}
|