knso/Webklar-Kundenbereich
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
57ba2c06f975b73c64fdbbf881828716dc9dcf6f
Webklar-Kundenbereich/public/kundenbereich.css
T
ClaudeandClaude Opus 5.5 57ba2c06f9 App-Ansicht iOS-App: undurchsichtige Statusleiste, Tab-Leiste wieder ganz unten 
Der Fix aus bd7b1fc (Seite mindestens bildschirmhoch) hat nicht gewirkt
und wird zurueckgenommen. Die Ursache ist nicht die Seitenhoehe:
Bei black-translucent ist der Bereich fuer fixierte Elemente in der
installierten iOS-App um die Statusleiste (59 pt) kuerzer als der
Bildschirm. Solange die Seite oben steht, klebt dieser Bereich oben, und
die Tab-Leiste haengt ueber dem unteren Rand. Nach dem Herunterscrollen
sitzt sie richtig, deshalb sah es nur im Chat gut aus.

Mit undurchsichtiger Statusleiste (black) beginnt die App unterhalb der
Statusleiste, und der Bereich ist korrekt bemessen. Nachteil: Der lila
Schimmer reicht nicht mehr hinter die Uhrzeit. Die Abstaende oben kommen
weiter aus env(safe-area-inset-top), das dann 0 ist.

Browser, Android und Desktop unveraendert (pixelgleich).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-26 15:43:37 +00:00

674 lines
42 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Kundenbereich (Design "Kundenbereich Neu"): Kopfzeile, Seitenleiste mit Navigation,
Ansprechpartner und Wartungs-Abo, Inhalt rechts. Basis (Hintergrund, Schrift) aus login.css. */
.kb-page {
--kb-surface: rgba(12, 12, 14, 0.9);
--kb-border: rgba(255, 255, 255, 0.09);
--kb-border-strong: rgba(255, 255, 255, 0.16);
--kb-muted: rgba(255, 255, 255, 0.6);
--kb-faint: rgba(255, 255, 255, 0.42);
--kb-purple: #9d3dfe;
--kb-purple-hover: #8a25f0;
--kb-purple-soft: rgba(157, 61, 254, 0.14);
--kb-purple-line: rgba(157, 61, 254, 0.5);
--kb-lilac: #c9a2ff;
--kb-radius: 14px;
}
.kb-page a { color: #d4b4ff; }
.kb-glow {
position: absolute;
top: 0;
left: 50%;
z-index: 0;
width: min(1200px, 100%);
height: 460px;
transform: translateX(-50%);
background: radial-gradient(ellipse at 50% 0%, rgba(157, 61, 254, 0.2), transparent 68%);
pointer-events: none;
}
/* ------------------------------------------------------------ Kopfzeile --- */
.kb-header {
position: sticky;
top: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding: 16px clamp(16px, 3vw, 36px);
background: rgba(0, 0, 0, 0.72);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--kb-border);
}
.kb-logo { color: #fff !important; text-decoration: none; font-weight: 800; font-size: 15px; letter-spacing: 0.24em; }
.kb-account { display: flex; align-items: center; gap: 14px; min-width: 0; }
.kb-account-text { text-align: right; line-height: 1.35; min-width: 0; }
.kb-account-text strong { display: block; font-size: 14px; }
.kb-account-text span { display: block; font-size: 12px; color: var(--kb-muted); overflow-wrap: anywhere; }
.kb-avatar {
flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
font-size: 13px; font-weight: 700; background: #26124a; border: 1px solid var(--kb-purple-line);
}
.kb-logout {
flex: none; background: transparent; color: #fff; border: 1px solid var(--kb-border-strong); border-radius: 999px;
padding: 9px 18px; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}
.kb-logout:hover { background: #fff; color: #111; }
/* ---------------------------------------------------------------- Raster --- */
.kb-shell {
position: relative;
z-index: 1;
max-width: 1140px;
margin: 0 auto;
padding: 36px clamp(16px, 3vw, 36px) 56px;
display: grid;
grid-template-columns: 236px minmax(0, 1fr);
gap: 36px;
align-items: start;
}
.kb-side { display: grid; gap: 14px; }
.kb-main { min-width: 0; }
.kb-label {
margin: 0 0 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kb-faint);
}
.kb-side > .kb-label { margin: 0 0 -4px 12px; }
/* ------------------------------------------------------------ Navigation --- */
.kb-nav { display: grid; gap: 4px; }
.kb-nav-item {
display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
border-radius: 10px; border: 1px solid transparent; background: transparent;
color: rgba(255, 255, 255, 0.72); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.kb-nav-item::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); }
.kb-nav-item:hover { background: rgba(255, 255, 255, 0.04); color: #fff; }
.kb-nav-item.active { background: var(--kb-purple-soft); border-color: var(--kb-purple-line); color: #fff; font-weight: 700; }
.kb-nav-item.active::before { background: var(--kb-purple); box-shadow: 0 0 8px var(--kb-purple); }
.kb-count { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--kb-faint); }
.kb-badge {
margin-left: auto; min-width: 24px; height: 19px; padding: 0 7px; border-radius: 999px;
display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--kb-purple); color: #fff;
}
.kb-badge-red { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.5); color: #fca5a5; }
/* -------------------------------------------------------- Seitenkarten --- */
.kb-card { padding: 16px; border-radius: var(--kb-radius); background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-card .kb-label, .kb-abo .kb-label { margin-bottom: 8px; }
.kb-contact strong { display: block; font-size: 15px; font-weight: 600; }
.kb-contact span { display: block; margin-top: 2px; font-size: 13px; color: var(--kb-muted); }
.kb-contact button { margin-top: 10px; padding: 0; border: none; background: none; color: #d4b4ff; font: inherit; font-size: 13px; cursor: pointer; }
.kb-contact button:hover { text-decoration: underline; }
.kb-abo {
padding: 18px 16px 16px; border-radius: var(--kb-radius); border: 1px solid rgba(157, 61, 254, 0.45);
background: linear-gradient(180deg, rgba(157, 61, 254, 0.16), rgba(157, 61, 254, 0.04) 55%, rgba(12, 12, 14, 0.92));
}
.kb-abo h3 { margin: 2px 0 10px; font-size: 19px; }
.kb-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.kb-price strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.kb-price span { font-size: 13px; color: var(--kb-muted); }
.kb-price s { color: var(--kb-faint); font-size: 14px; }
.kb-checks { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 7px; font-size: 13px; line-height: 1.4; }
.kb-checks li { position: relative; padding-left: 20px; }
.kb-checks li::before { content: '✓'; position: absolute; left: 0; color: var(--kb-lilac); font-weight: 700; }
.kb-offer-tag {
display: inline-block; margin: 0 0 10px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4);
}
.kb-fine { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--kb-faint); }
.kb-fine a { color: #fff; font-weight: 700; }
.kb-status { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.kb-status-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
.kb-hours {
display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 12px 0 2px; padding: 0; border: none;
background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.kb-hours strong { font-size: 26px; font-variant-numeric: tabular-nums; }
.kb-hours span { font-size: 13px; color: var(--kb-muted); }
.kb-hours em { font-style: normal; font-size: 16px; line-height: 1; color: #d4b4ff; }
.kb-hours:hover span { color: #fff; text-decoration: underline; }
.kb-sub { margin: 0 0 12px; font-size: 12.5px; color: var(--kb-muted); }
.kb-side-btn {
display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.02); color: #fff !important;
font: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; text-decoration: none; cursor: pointer;
}
.kb-side-btn:hover { background: rgba(255, 255, 255, 0.07); }
.kb-side-btn small { font-size: 12px; font-weight: 400; color: var(--kb-muted); }
.kb-side-btn .kb-badge { float: right; margin: 0 0 0 6px; }
.kb-side-alert {
margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.45;
background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4);
}
.kb-divider { border-top: 1px solid var(--kb-border); margin: 14px 0 10px; }
/* --------------------------------------------------------- Inhaltsbereich --- */
.kb-view { display: none; }
.kb-view.active { display: block; }
.kb-head { padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--kb-border); }
.kb-head h1 { margin: 0; font-size: 30px; font-weight: 750; letter-spacing: -0.01em; }
.kb-head p { margin: 6px 0 0; font-size: 15px; color: var(--kb-muted); }
.kb-panel { padding: 20px 22px; border-radius: 16px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-panel + .kb-panel { margin-top: 16px; }
.kb-panel h3 { margin: 0 0 10px; font-size: 16px; }
.kb-empty { color: var(--kb-muted); }
.kb-note { font-size: 13px; color: var(--kb-muted); }
.viewas-banner {
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
padding: 10px 16px; margin-bottom: 18px; border-radius: 12px;
background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.45);
}
.viewas-banner button { background: transparent; color: #fff; border: 1px solid var(--kb-border-strong); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; }
/* Buttons */
.kb-btn-primary {
display: inline-block; padding: 12px 22px; border-radius: 999px; border: none; background: var(--kb-purple);
color: #fff !important; font: inherit; font-weight: 700; font-size: 14px; text-align: center; text-decoration: none; cursor: pointer;
}
.kb-btn-primary:hover { background: var(--kb-purple-hover); }
.kb-btn-primary:disabled { opacity: 0.5; cursor: default; }
.kb-btn-block { display: block; width: 100%; }
/* Buttons im Gutschrift-Formular (app.js) */
.abo-btn {
padding: 12px 22px; border-radius: 999px; border: none; background: var(--kb-purple); color: #fff;
font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.abo-btn:hover { background: var(--kb-purple-hover); }
.abo-btn:disabled { opacity: 0.5; cursor: default; }
.abo-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.kb-btn-outline {
display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
border: 1px solid var(--kb-border-strong); background: transparent; color: #fff !important;
font: inherit; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.kb-btn-outline:hover { background: rgba(255, 255, 255, 0.07); }
.kb-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
/* ---------------------------------------------------------------- Projekte --- */
.kb-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.kb-project { border-radius: 18px; border: 1px solid var(--kb-border); background: rgba(11, 11, 13, 0.94); overflow: hidden; }
.kb-preview {
position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--kb-border);
background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 12px, transparent 12px 24px), #0e0e11;
}
.kb-preview iframe {
position: absolute; top: 0; left: 0; width: 1280px; height: 720px; border: 0;
transform-origin: 0 0; pointer-events: none; background: #fff;
}
.kb-preview-empty {
display: grid; place-items: center; padding: 0 16px; text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; color: var(--kb-faint);
}
.kb-open {
position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px;
background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff !important;
font-size: 13px; font-weight: 700; text-decoration: none;
}
.kb-preview:hover .kb-open { background: #fff; color: #111 !important; }
.kb-project-body { padding: 22px 22px 20px; }
.kb-project-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kb-project-top h2 { margin: 0; font-size: 20px; }
.kb-state { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.kb-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.kb-state-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
.kb-state-wait { color: #fcd34d; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.kb-state-off { color: var(--kb-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--kb-border-strong); }
.kb-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 14px; border: 1px solid var(--kb-border); border-radius: 12px; }
.kb-facts > div { padding: 12px 14px; min-width: 0; }
.kb-facts > div + div { border-left: 1px solid var(--kb-border); }
.kb-facts dt { margin: 0 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint); }
.kb-facts dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.kb-facts .kb-dim { color: var(--kb-muted); }
.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.kb-chip {
padding: 5px 10px; border-radius: 8px; font: inherit; font-size: 12.5px; color: #d8b4fe !important; text-decoration: none;
background: rgba(157, 61, 254, 0.14); border: 1px solid rgba(157, 61, 254, 0.4); cursor: pointer;
}
.kb-chip:hover { background: rgba(157, 61, 254, 0.24); }
.kb-details { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--kb-border); }
.kb-details h3 { margin: 16px 0 8px; font-size: 14px; letter-spacing: 0.02em; }
.kb-details h3:first-child { margin-top: 0; }
.commit-item { padding: 7px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 14px; }
.commit-item:last-child { border-bottom: none; }
.commit-meta { font-size: 12px; color: var(--kb-faint); }
.commit-body { margin: 2px 0 0 8px; font-size: 13px; color: var(--kb-muted); white-space: pre-wrap; }
/* ------------------------------------------ Tabellen, Pills, Aktivitaet --- */
.simple-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.simple-table th, .simple-table td { padding: 10px 10px; text-align: left; border-bottom: 1px solid var(--kb-border); }
.simple-table th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint); }
.simple-table tr:last-child td { border-bottom: none; }
.kb-table-wrap { overflow-x: auto; }
.btn-link { color: #d4b4ff; text-decoration: none; }
.btn-link:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.pill-ok { color: #86efac; background: rgba(74, 222, 128, 0.1); border-color: rgba(74, 222, 128, 0.4); }
.pill-warn { color: #d8b4fe; background: rgba(157, 61, 254, 0.16); border-color: rgba(157, 61, 254, 0.5); }
.pill-red { color: #fca5a5; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.45); }
.pill-muted { color: var(--kb-muted); background: rgba(255, 255, 255, 0.06); border-color: var(--kb-border-strong); }
.pill-git { color: #fdba74; background: rgba(251, 146, 60, 0.12); border-color: rgba(251, 146, 60, 0.45); }
.pill-amber { color: #fcd34d; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }
.activity-item { padding: 14px 0; border-bottom: 1px solid var(--kb-border); }
.activity-item:first-child { padding-top: 0; }
.activity-item:last-child { border-bottom: none; padding-bottom: 0; }
.activity-status { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; font-size: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--kb-border-strong); }
.activity-ws { margin: 4px 0 4px 14px; font-size: 13px; color: rgba(255, 255, 255, 0.78); white-space: pre-wrap; }
/* ------------------------------------------------------------------- Chat --- */
.chat-box { display: flex; flex-direction: column; height: 520px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 10px; }
.chat-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.chat-bubble .chat-meta { display: block; margin-top: 4px; font-size: 11px; opacity: 0.6; }
.chat-bubble.mine { align-self: flex-end; background: rgba(157, 61, 254, 0.26); border: 1px solid rgba(157, 61, 254, 0.5); border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--kb-border-strong); border-bottom-left-radius: 4px; }
.chat-input-row { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.chat-input-row textarea {
flex: 1; resize: none; min-height: 46px; max-height: 130px; padding: 12px 14px; border-radius: 14px;
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit;
}
.chat-hint { margin-top: 6px; font-size: 12px; color: var(--kb-faint); }
/* ------------------------------------------------ Wartungs-Abo (Inhalt) --- */
.abo-features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.abo-features li { position: relative; padding-left: 24px; font-size: 15px; }
.abo-features li::before { content: '✓'; position: absolute; left: 0; color: var(--kb-lilac); font-weight: 700; }
.abo-features small { display: block; font-size: 13px; color: var(--kb-muted); }
.abo-note { font-size: 13px; color: var(--kb-muted); }
.abo-check { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; line-height: 1.45; cursor: pointer; }
.abo-check input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--kb-purple); }
.abo-start-choice { border: none; padding: 0; margin: 14px 0 8px; }
.abo-start-choice legend { margin-bottom: 4px; font-weight: 700; }
.abo-summary-box { margin: 16px 0 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--kb-border-strong); }
.abo-summary { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 6px; }
.abo-summary td { padding: 7px 0; border-bottom: 1px solid var(--kb-border); vertical-align: top; }
.abo-summary td:first-child { width: 26%; padding-right: 12px; color: var(--kb-muted); }
.abo-alert { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.abo-offer-box { margin: 0 0 18px; padding: 14px 16px; border-radius: 14px; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.4); }
.abo-offer-box p { margin: 4px 0 0; }
.kb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kb-stat { padding: 14px 16px; border-radius: 14px; background: var(--kb-surface); border: 1px solid var(--kb-border); }
.kb-stat strong { display: block; font-size: 28px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kb-stat span { font-size: 13px; color: var(--kb-muted); }
/* --------------------------------------------------- Uebernahmegutschrift --- */
.tk-intro { margin: 0 0 14px; max-width: 70ch; }
.tk-notice { margin: 12px 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.4); }
.tk-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kb-border); display: grid; gap: 14px; }
.tk-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.tk-field { border: none; padding: 0; margin: 0; min-width: 0; }
.tk-field > label, .tk-field > legend { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; }
.tk-field small { font-weight: 400; color: var(--kb-muted); }
.tk-field input:not([type=checkbox]), .tk-field select, .tk-field textarea, .tk-reply textarea, .tk-reply input[type=file] {
width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px;
border: 1px solid var(--kb-border-strong); background: rgba(255, 255, 255, 0.05); color: inherit; font: inherit;
}
.tk-field select option { color: #111; }
.tk-field textarea, .tk-reply textarea { min-height: 90px; resize: vertical; }
.tk-services { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.tk-services label { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; cursor: pointer; }
.tk-services input { width: 17px; height: 17px; accent-color: var(--kb-purple); }
.tk-conditions summary { cursor: pointer; font-size: 14px; }
.tk-conditions ol { margin: 8px 0 0; padding-left: 20px; font-size: 13.5px; color: rgba(255, 255, 255, 0.8); }
.tk-conditions li { margin: 4px 0; }
.tk-list { margin-top: 16px; display: grid; gap: 10px; }
.tk-item { padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--kb-border); font-size: 14px; }
.tk-item p { margin: 8px 0 0; }
.tk-item-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.tk-question { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; white-space: pre-wrap; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); }
.tk-reply { margin-top: 10px; display: grid; gap: 8px; }
/* ---------------------------------------------------------- Pflichtlinks --- */
.kb-legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--kb-border); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.kb-legal a { color: var(--kb-muted); }
.kb-legal a.legal-strong { color: #fff; font-weight: 700; text-decoration: underline; }
/* ------------------------------------------ Konto (Avatar-Menue, alle Groessen) --- */
/* Desktop: Popover unter dem Avatar. App-Ansicht: Bottom-Sheet (siehe unten). */
button.kb-avatar {
box-sizing: content-box; padding: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
transition: box-shadow 0.15s;
}
/* Wrapper fuer Logo und App-Titel: am Desktop ohne eigene Box (Kopfzeile wie bisher) */
.kb-bar-title { display: contents; }
button.kb-avatar:hover { box-shadow: 0 0 0 3px rgba(157, 61, 254, 0.35); }
button.kb-avatar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
button.kb-avatar:disabled { cursor: default; box-shadow: none; }
.kb-sheet {
inset: 0; margin: 72px clamp(16px, 3vw, 36px) auto auto; padding: 0; border: none; background: transparent;
width: 340px; max-width: calc(100vw - 32px); max-height: none; overflow: visible; color: #fff;
}
.kb-sheet::backdrop { background: rgba(0, 0, 0, 0.35); transition: opacity 0.2s; }
.kb-sheet.is-closing::backdrop { opacity: 0; }
.kb-sheet-panel {
box-sizing: border-box; max-height: calc(100vh - 96px); overflow-y: auto; padding: 16px;
border-radius: 18px; background: #111114; border: 1px solid var(--kb-border-strong);
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
transition: opacity 0.16s, transform 0.16s;
}
.kb-sheet[open] .kb-sheet-panel { animation: kb-pop-in 0.18s ease-out; }
.kb-sheet.is-closing .kb-sheet-panel { opacity: 0; transform: translateY(-6px) scale(0.98); }
.kb-sheet-grip { display: none; }
.kb-sheet-me { display: flex; align-items: center; gap: 12px; padding: 2px 0 14px; }
.kb-sheet-me .kb-avatar { width: 46px; height: 46px; font-size: 16px; }
.kb-sheet-me-text { flex: 1; min-width: 0; line-height: 1.35; }
.kb-sheet-me-text strong { display: block; font-size: 16px; }
.kb-sheet-me-text span { display: block; font-size: 12.5px; color: var(--kb-muted); overflow-wrap: anywhere; }
.kb-sheet-x {
flex: none; align-self: flex-start; width: 34px; height: 34px; border-radius: 50%; border: none;
background: rgba(255, 255, 255, 0.08); color: #fff; display: grid; place-items: center; cursor: pointer;
}
.kb-sheet-x svg, .kb-install-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
#kb-contact-slot .kb-contact { margin-bottom: 12px; }
.kb-sheet-links {
display: flex; flex-direction: column; margin: 12px 0; border-radius: 14px; overflow: hidden;
border: 1px solid var(--kb-border); background: rgba(255, 255, 255, 0.02);
}
.kb-sheet-links a {
display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px;
color: var(--kb-muted); font-size: 14.5px; text-decoration: none;
}
.kb-sheet-links a + a { border-top: 1px solid var(--kb-border); }
.kb-sheet-links a::after { content: '›'; font-size: 20px; line-height: 1; color: var(--kb-faint); }
.kb-sheet-links a[target='_blank']::after { content: '↗'; font-size: 15px; }
.kb-sheet-links a.legal-strong { color: #fff; font-weight: 700; }
.kb-sheet-links a:active { background: rgba(255, 255, 255, 0.05); }
.kb-sheet-logout {
width: 100%; padding: 13px; border-radius: 14px; border: 1px solid rgba(248, 113, 113, 0.45);
background: rgba(248, 113, 113, 0.08); color: #fca5a5; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
}
.kb-sheet-logout:hover { background: rgba(248, 113, 113, 0.14); }
/* "WEBklar als App": Hinweis im Tab Projekte (ausblendbar) und im Konto-Sheet */
.kb-install {
display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 12px 12px 12px 14px; border-radius: 16px;
background: linear-gradient(135deg, rgba(157, 61, 254, 0.22), rgba(157, 61, 254, 0.06)); border: 1px solid var(--kb-purple-line);
}
.kb-install-card { margin: 0 0 16px; }
.kb-install-icon { flex: none; width: 44px; height: 44px; border-radius: 11px; }
.kb-install-text { flex: 1; min-width: 0; line-height: 1.4; }
.kb-install-text strong { display: block; font-size: 14.5px; }
.kb-install-text span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
.kb-inline-ico { width: 16px; height: 16px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kb-install-go {
flex: none; padding: 9px 14px; border-radius: 999px; border: none; background: var(--kb-purple); color: #fff;
font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.kb-install-x {
flex: none; align-self: flex-start; width: 30px; height: 30px; margin: -6px -6px 0 -4px; border: none; background: none;
color: var(--kb-faint); display: grid; place-items: center; cursor: pointer;
}
/* Elemente, die es nur in der App-Ansicht gibt */
.kb-back, .kb-logo-mark, .kb-app-title, .kb-tab-ico, .kb-nav-item.kb-tab-wartung, .kb-app-only, .kb-install { display: none; }
@keyframes kb-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes kb-sheet-up { from { transform: translateY(100%); } }
@keyframes kb-fade-in { from { opacity: 0; } }
@keyframes kb-view-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes kb-push-in { from { opacity: 0; transform: translateX(32px); } }
@keyframes kb-back-in { from { opacity: 0; transform: translateX(-32px); } }
@keyframes kb-shimmer { to { background-position: -200% 0, 0 0; } }
@media (max-width: 640px) {
.kb-facts { grid-template-columns: 1fr; }
.kb-facts > div + div { border-left: none; border-top: 1px solid var(--kb-border); }
.abo-features { grid-template-columns: 1fr; }
.kb-project-body, .kb-panel { padding: 16px; }
}
/* ----------------------------------------------------- App-Ansicht (Handy) --- */
/* Unter 880px (und Handys quer): Kopfzeile als App-Leiste (Titel erscheint beim Scrollen),
Navigation als Tab-Leiste unten, Karten der Seitenleiste im Konto-Sheet bzw. Tab "Wartung".
Dieselbe Bedingung steht in app.js (appLayout). */
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
.kb-page {
--kb-appbar-h: calc(56px + env(safe-area-inset-top));
--kb-tabbar-h: calc(62px + env(safe-area-inset-bottom));
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
/* Tastatur offen: auf Android wird der Platz der Tab-Leiste frei; auf iOS keine Hoehenaenderung (app.js) */
.kb-page.kb-typing:not(.kb-ios) { --kb-tabbar-h: 0px; }
html.kb-sheet-open { overflow: hidden; }
.kb-desk-only { display: none; }
.kb-app-only { display: inline; }
/* App-Leiste oben */
.kb-header {
flex-wrap: nowrap; gap: 8px; box-sizing: border-box; height: var(--kb-appbar-h);
padding: env(safe-area-inset-top) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
transition: background-color 0.2s, border-color 0.2s;
-webkit-user-select: none; user-select: none;
}
.kb-scrolled .kb-header {
background: rgba(0, 0, 0, 0.8); border-bottom-color: var(--kb-border);
-webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
}
.kb-back {
display: inline-flex; flex: none; align-items: center; gap: 1px; margin-left: -10px; padding: 8px 6px 8px 2px;
border: none; background: none; color: #d4b4ff; font: inherit; font-size: 16px; cursor: pointer;
}
.kb-back svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.kb-bar-title { position: relative; flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; }
.kb-logo {
display: inline-flex; align-items: center; gap: 10px; font-size: 14px; letter-spacing: 0.22em;
transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.kb-logo-mark { display: block; flex: none; width: 28px; height: 28px; border-radius: 8px; }
.kb-app-title {
display: block; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(calc(-50% + 8px)); opacity: 0;
font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
transition: opacity 0.2s, transform 0.2s;
}
.kb-titled .kb-app-title { opacity: 1; transform: translateY(-50%); }
.kb-titled .kb-logo, .kb-subpage .kb-logo { opacity: 0; visibility: hidden; transform: translateY(-8px); }
.kb-account { flex: none; gap: 0; }
.kb-account-text, .kb-logout { display: none; }
.kb-no-sheet .kb-logout { display: inline-block; margin-left: 10px; }
.kb-header .kb-avatar { width: 36px; height: 36px; font-size: 13.5px; }
/* Inhalt: eine Spalte, Platz fuer die Tab-Leiste; auf Tablets mittig begrenzt */
.kb-shell.dashboard-content-reveal {
display: block; max-width: 720px; overflow-x: clip;
padding: 6px max(16px, env(safe-area-inset-right)) calc(var(--kb-tabbar-h) + 28px) max(16px, env(safe-area-inset-left));
animation: kb-fade-in 0.4s ease-out both;
}
.kb-side { display: block; }
.kb-side > .kb-label, .kb-side > .kb-card, .kb-side > .kb-abo { display: none; }
/* Tab-Leiste unten (die Navigation der Seitenleiste) */
.kb-nav {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 0;
padding: 6px max(6px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
background: rgba(12, 12, 14, 0.94); border-top: 1px solid var(--kb-border);
-webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
-webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
transition: transform 0.22s ease;
}
.kb-typing .kb-nav { transform: translateY(110%); }
.kb-nav-item {
position: relative; flex: 1 1 0; min-width: 0; max-width: 120px; flex-direction: column; justify-content: center; gap: 3px;
padding: 4px 0 2px; border: none; border-radius: 12px; background: none; color: rgba(255, 255, 255, 0.55);
font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-align: center; touch-action: manipulation;
}
.kb-nav-item.kb-tab-wartung { display: flex; }
.kb-nav-item::before {
position: absolute; top: 3px; left: 50%; width: 56px; height: 30px; margin-left: -28px; border-radius: 999px;
background: transparent; box-shadow: none; transition: background-color 0.2s;
}
.kb-nav-item:hover { background: none; color: rgba(255, 255, 255, 0.55); }
.kb-nav-item.active, .kb-nav-item.active:hover { background: none; border-color: transparent; color: #fff; font-weight: 700; }
.kb-nav-item.active::before { background: rgba(157, 61, 254, 0.3); box-shadow: none; }
.kb-tab-ico {
display: block; position: relative; width: 24px; height: 24px; margin-top: 3px; fill: none; stroke: currentColor;
stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.12s;
}
.kb-nav-item:active .kb-tab-ico { transform: scale(0.88); }
.kb-tab-label { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-nav-item .kb-count { display: none; }
.kb-nav-item .kb-badge {
position: absolute; top: 0; left: calc(50% + 6px); margin: 0; min-width: 19px; height: 19px; padding: 0 5px;
box-sizing: border-box; font-size: 10.5px; line-height: 1; border: 2px solid #0c0c0e;
}
.kb-nav-item .kb-badge-red, .kb-nav-item .kb-badge-alert { background: #e5484d; color: #fff; }
/* Seiten: grosse Ueberschrift wie in iOS, weiche Uebergaenge */
.kb-head { margin: 6px 0 18px; padding-bottom: 0; border-bottom: none; }
.kb-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.kb-head p { margin-top: 4px; font-size: 14.5px; }
.kb-view.active { animation: kb-view-in 0.24s ease-out; }
body[data-kb-nav='push'] .kb-view.active { animation-name: kb-push-in; }
body[data-kb-nav='back'] .kb-view.active { animation-name: kb-back-in; }
.kb-panel { padding: 16px; border-radius: 18px; }
.viewas-banner { margin-bottom: 12px; }
/* Projekte */
#loading:not(.hidden) {
height: 300px; margin: 0; border-radius: 20px; border: 1px solid var(--kb-border); color: transparent; overflow: hidden;
background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70%) 0 0 / 200% 100%, var(--kb-surface);
animation: kb-shimmer 1.4s linear infinite;
}
.kb-projects { gap: 16px; }
.kb-project { border-radius: 20px; }
.kb-project-body { padding: 16px 16px 18px; }
.kb-project-top { margin-bottom: 12px; }
.kb-project-top h2 { font-size: 19px; }
.kb-open { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 12.5px; }
.kb-chip { padding: 7px 12px; font-size: 13px; }
.kb-project [data-details-btn] { width: 100%; justify-content: center; padding: 12px 16px; font-size: 14px; }
.kb-details .simple-table { font-size: 13px; }
/* Fortschritt als Zeitleiste */
#activity-body .activity-item { position: relative; padding: 0 0 18px 22px; border-bottom: none; }
#activity-body .activity-item::before {
content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%;
background: var(--kb-purple); box-shadow: 0 0 0 3px rgba(157, 61, 254, 0.22);
}
#activity-body .activity-item::after { content: ''; position: absolute; left: 4px; top: 22px; bottom: 2px; width: 1px; background: var(--kb-border-strong); }
#activity-body .activity-item:last-child { padding-bottom: 0; }
#activity-body .activity-item:last-child::after { display: none; }
/* Rechnungen: jede Zeile als Karte */
#invoices-body:has(.kb-invoices) { padding: 0; background: none; border: none; }
.kb-invoices, .kb-invoices tbody { display: block; }
.kb-invoices thead { display: none; }
.kb-invoices tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'no status' 'date amount' 'open open' 'actions actions';
column-gap: 12px; row-gap: 3px; margin-bottom: 10px; padding: 14px 16px 16px; border-radius: 18px;
background: var(--kb-surface); border: 1px solid var(--kb-border);
}
.kb-invoices td { display: block; padding: 0; border: none; }
.kb-invoices .inv-no { grid-area: no; align-self: center; font-size: 15px; font-weight: 700; }
.kb-invoices .inv-no::before { content: 'Rechnung '; }
.kb-invoices .inv-status { grid-area: status; justify-self: end; align-self: center; }
.kb-invoices .inv-date { grid-area: date; align-self: end; font-size: 13px; color: var(--kb-muted); }
.kb-invoices .inv-amount { grid-area: amount; justify-self: end; font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.kb-invoices .inv-open { grid-area: open; font-size: 13px; color: #fca5a5; }
.kb-invoices .inv-open::before { content: 'Offen: '; }
.kb-invoices tr.is-paid .inv-open, .kb-invoices .inv-sep { display: none; }
.kb-invoices .inv-actions { grid-area: actions; display: flex; gap: 8px; margin-top: 12px; white-space: normal !important; }
.kb-invoices .inv-actions .btn-link {
flex: 1; display: flex; align-items: center; justify-content: center; padding: 11px 12px; border-radius: 12px;
border: 1px solid var(--kb-border-strong); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.kb-invoices .inv-actions .btn-link:first-child { background: rgba(157, 61, 254, 0.18); border-color: var(--kb-purple-line); }
.kb-invoices .inv-actions .btn-link:first-child:not(:last-child) { flex: 1.7; }
/* Chat: fuellt den Platz zwischen App-Leiste und Tab-Leiste. 100dvh folgt auf Android der Tastatur
(interactive-widget=resizes-content); auf iOS bleibt die Hoehe, Safari schiebt das Feld selbst hoch */
#view-chat.active {
display: flex; flex-direction: column;
height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
height: calc(100dvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
}
#view-chat .kb-head { flex: none; margin-bottom: 12px; }
#view-chat .chat-box { flex: 1 1 auto; min-height: 0; height: auto; padding: 10px; border-radius: 20px; }
.chat-messages { overscroll-behavior: contain; padding: 4px 2px; }
.chat-bubble { max-width: 84%; font-size: 15px; }
/* Eingabe des Chat-Composers als Pille, passend zu dessen runden Knoepfen (Senden-Knopf: chat-composer.css) */
.chat-input-row textarea { box-sizing: border-box; min-height: 46px; padding: 11px 16px; border-radius: 23px; font-size: 16px; line-height: 1.35; }
/* Tab "Wartung": Abo-Karte gross; darunter Unterseiten Stundenkonto/Bestellung und Gutschrift */
#kb-abo-slot:has(> .kb-abo:not(.hidden)) > .kb-empty { display: none; }
#view-wartung .kb-abo { padding: 20px 18px 18px; border-radius: 20px; }
#view-wartung .kb-abo h3 { font-size: 22px; }
#view-wartung .kb-price strong, #view-wartung .kb-hours strong { font-size: 32px; }
#view-wartung .kb-price span, #view-wartung .kb-hours span, #view-wartung .kb-sub { font-size: 14px; }
#view-wartung .kb-checks { gap: 9px; font-size: 14.5px; }
#view-wartung .kb-fine { font-size: 12.5px; }
#view-wartung .kb-side-alert { font-size: 13.5px; }
#view-wartung .kb-side-btn { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 14px 16px; border-radius: 14px; font-size: 15px; }
#view-wartung .kb-side-btn .kb-badge { float: none; flex: none; margin: 0 0 0 auto; }
#view-wartung .kb-btn-primary { padding: 15px 22px; font-size: 15px; }
.kb-stats { gap: 10px; }
.kb-stat strong { font-size: 24px; }
.abo-summary, .abo-summary tbody, .abo-summary tr, .abo-summary td { display: block; width: auto !important; }
.abo-summary tr { padding: 9px 0; border-bottom: 1px solid var(--kb-border); }
.abo-summary td { padding: 0; border: none; }
.abo-summary td:first-child {
margin-bottom: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kb-faint);
}
#abo-order .kb-actions { flex-direction: column; align-items: stretch; }
#abo-order .kb-btn-primary { padding: 15px 22px; font-size: 15px; }
.abo-actions .abo-btn { flex: 1 1 auto; }
.kb-legal { justify-content: center; gap: 10px 16px; margin-top: 32px; text-align: center; }
/* Konto als Bottom-Sheet */
.kb-install:not(.hidden) { display: flex; }
.kb-sheet { inset: auto 0 0 0; width: 100%; max-width: none; margin: 0; }
.kb-sheet::backdrop { background: rgba(0, 0, 0, 0.55); }
.kb-sheet-panel {
max-height: calc(100vh - env(safe-area-inset-top) - 24px); max-height: calc(100dvh - env(safe-area-inset-top) - 24px);
overscroll-behavior: contain;
padding: 8px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
border-radius: 24px 24px 0 0; border-bottom: none; box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
transition: transform 0.24s ease-in;
}
.kb-sheet[open] .kb-sheet-panel { animation: kb-sheet-up 0.32s cubic-bezier(0.2, 0.9, 0.3, 1); }
.kb-sheet.is-closing .kb-sheet-panel { opacity: 1; transform: translateY(100%); }
.kb-sheet-panel.is-dragging { transition: none; }
.kb-sheet-grip { display: block; width: 40px; height: 5px; margin: 2px auto 12px; border-radius: 3px; background: rgba(255, 255, 255, 0.24); }
.kb-sheet-grip, .kb-sheet-me { touch-action: none; }
.kb-sheet-links a, .kb-sheet-logout { padding-top: 14px; padding-bottom: 14px; }
}
/* App-Ansicht mit Touch: der Hinweis unter dem Chat (Enter-Taste, Anhaenge) kostet zu viel Hoehe,
Bueroklammer und Mikrofon sprechen fuer sich */
@media (max-width: 880px) and (pointer: coarse), (pointer: coarse) and (max-height: 500px) {
.chat-hint { display: none; }
}
/* Handy quer: niedrige Tab-Leiste, Symbol und Text nebeneinander */
@media (max-width: 880px) and (max-height: 500px), (pointer: coarse) and (max-height: 500px) {
.kb-page { --kb-tabbar-h: calc(46px + env(safe-area-inset-bottom)); }
.kb-nav { padding-top: 4px; padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
.kb-nav-item { flex-direction: row; gap: 6px; max-width: 160px; padding: 6px 0; }
.kb-nav-item::before { display: none; }
.kb-nav-item.active { color: #d4b4ff; }
.kb-tab-ico { margin-top: 0; }
.kb-nav-item .kb-badge { position: static; margin-left: -2px; }
/* Chat: Ueberschrift weglassen, sie steht dann in der App-Leiste */
#view-chat .kb-head { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.kb-shell.dashboard-content-reveal, .kb-view.active, .kb-sheet[open] .kb-sheet-panel, #loading:not(.hidden) { animation: none !important; }
.kb-header, .kb-nav, .kb-logo, .kb-app-title, .kb-sheet-panel { transition: none !important; }
}
Reference in new issue View Git Blame Copy Permalink