Kundenbereich: App-Ansicht fuers Handy (Tab-Leiste, Konto-Sheet, installierbar)
Auf dem Handy (unter 880 px und Handys quer) sieht der Kundenbereich aus wie eine App; der Desktop bleibt pixelgleich. - Kopfzeile als App-Leiste: Logo, beim Scrollen der Seitentitel, Avatar - Navigation als Tab-Leiste unten mit Symbolen und Zaehlern; neuer Tab "Wartung" mit der Abo-Karte, Stundenkonto/Bestellung und Uebernahmegutschrift als Unterseiten mit Zurueck (auch Android-Geste) - Konto als Bottom-Sheet (Ansprechpartner, Vertraege kuendigen/widerrufen, Rechtliches, Abmelden), am Desktop als Popover unter dem Avatar - Rechnungen als Karten, Fortschritt als Zeitleiste, Chat fuellt den Bildschirm; bei offener Tastatur verschwindet die Tab-Leiste (kommt auch nach der Android-Zurueck-Geste wieder) - Installierbar: Manifest, App-Icons (WEBklar-Logo), Favicon, Hinweis "Zum Home-Bildschirm"; Service Worker nur fuer die Offline-Seite, Kundendaten werden nicht zwischengespeichert - Installierte App: Kuendigen/Widerrufen mit Link zurueck in den Kundenbereich (nur dort sichtbar, Texte unveraendert); Login-Links zu Bedingungen/Datenschutz/Impressum oeffnen wie im Dashboard ein neues Fenster - Login mit App-Icon und Abstaenden fuer Statusleiste/Home-Balken - Hinweise "in der Seitenleiste" haben auf dem Handy eine eigene Fassung Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
06e9a0fe8d
commit
20bf5afe28
17 files changed
+999
-36
No files matched your search
+330
-7
@@ -335,17 +335,340 @@
|
||||
.kb-legal a { color: var(--kb-muted); }
|
||||
.kb-legal a.legal-strong { color: #fff; font-weight: 700; text-decoration: underline; }
|
||||
|
||||
/* ----------------------------------------------------------------- Mobil --- */
|
||||
@media (max-width: 880px) {
|
||||
.kb-shell { grid-template-columns: 1fr; gap: 22px; padding-top: 22px; }
|
||||
.kb-side > .kb-label { display: none; }
|
||||
.kb-nav { grid-template-columns: 1fr 1fr; gap: 6px; }
|
||||
.kb-account-text { display: none; }
|
||||
/* ------------------------------------------ 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-head h1 { font-size: 26px; }
|
||||
.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;
|
||||
}
|
||||
.kb-page.kb-typing { --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 (bzw. Tastatur) */
|
||||
#view-chat.active {
|
||||
display: flex; flex-direction: column;
|
||||
height: calc(var(--kb-vvh, 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; }
|
||||
.chat-input-row { gap: 8px; margin-top: 10px; }
|
||||
.chat-input-row textarea { box-sizing: border-box; min-height: 46px; padding: 11px 16px; border-radius: 23px; font-size: 16px; line-height: 1.35; }
|
||||
/* Senden als runder Pfeil-Button; der Text bleibt fuer Screenreader erhalten */
|
||||
.chat-send {
|
||||
flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; font-size: 0; color: transparent;
|
||||
background: var(--kb-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center / 22px no-repeat;
|
||||
}
|
||||
|
||||
/* 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(var(--kb-vvh, 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; }
|
||||
}
|
||||
|
||||
/* Touch: Tastatur-Hinweise zum Chat braucht es nicht */
|
||||
@media (pointer: coarse) {
|
||||
.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 (steht dann in der App-Leiste), einzeilige Eingabe */
|
||||
#view-chat .kb-head { display: none; }
|
||||
.chat-input-row textarea { height: 46px; }
|
||||
}
|
||||
|
||||
@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
Block a user