ClaudeandClaude Opus 5.5
ba9916cfe6
Der Server bereitet Commits, Tickets und Arbeitseinträge für Kunden auf (server/services/customerProjectView.js), die Rohdaten bleiben intern: - keine Co-Authored-By-/Signed-off-by-Zeilen und KI-Hinweise, keine Commit-Kürzel, Kontonamen, Git-Links oder Branch - technische Commits (Preview-Config, Merges) ausgeblendet, bekannte Automatik-Texte übersetzt, "fix"/"upload" -> "Website aktualisiert" - Ticketstatus und Arbeitsarten auf Deutsch (Open -> Eingegangen, Remote -> Online erledigt, ...), Fortschritt in 4 Schritten - Akquise-Tickets auch in den Projektdetails verborgen - /api/projects ohne Gitea-URL, Repo- und Vorlagennamen Darstellung: Auftragskarte mit Status und Fortschrittsleiste, Zeitleiste "Letzte Änderungen" nach Tagen, Arbeiten mit Farbe/Symbol je Art und Arbeitszeit; der Tab "Fortschritt" nutzt dieselben Bausteine. In der App-Ansicht öffnen sich die Projektdetails als eigene Seite mit Zurück zu "Projekte". Tests: npm test (node --test, 22 Fälle). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
796 lines
50 KiB
CSS
796 lines
50 KiB
CSS
/* 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);
|
||
}
|
||
|
||
/* ---------------------------------------------------------------- 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); }
|
||
/* Button, der wie ein Link aussieht (z. B. "Profilbild" oeffnet das Konto-Menue) */
|
||
.kb-link { padding: 0; border: none; background: none; color: #d4b4ff; font: inherit; text-decoration: underline; cursor: pointer; }
|
||
|
||
.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-chev {
|
||
width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
|
||
transform: rotate(90deg); transition: transform 0.2s;
|
||
}
|
||
.kb-details-btn[aria-expanded='true'] .kb-details-chev { transform: rotate(-90deg); }
|
||
.kb-details { display: grid; gap: 24px; margin-top: 18px; padding-top: 20px; border-top: 1px solid var(--kb-border); }
|
||
|
||
/* --------------------------------------------------------- Projektdetails --- */
|
||
/* Auftrag mit Fortschrittsleiste, Zeitleiste der Aenderungen, Arbeiten mit Symbol je Art.
|
||
Dieselben Bausteine nutzt der Tab "Fortschritt" (app.js: renderOrder, renderWorkEntries). */
|
||
.pd-tone-new { --pd-c: #d8b4fe; --pd-bg: rgba(157, 61, 254, 0.1); --pd-line: rgba(157, 61, 254, 0.4); --pd-bar: #b77bff; }
|
||
.pd-tone-active { --pd-c: #e9d5ff; --pd-bg: rgba(157, 61, 254, 0.2); --pd-line: rgba(157, 61, 254, 0.58); --pd-bar: var(--kb-purple); }
|
||
.pd-tone-waiting { --pd-c: #fcd34d; --pd-bg: rgba(251, 191, 36, 0.12); --pd-line: rgba(251, 191, 36, 0.45); --pd-bar: #f5b82e; }
|
||
.pd-tone-review { --pd-c: #93c5fd; --pd-bg: rgba(59, 130, 246, 0.14); --pd-line: rgba(96, 165, 250, 0.45); --pd-bar: #4f8ff7; }
|
||
.pd-tone-done { --pd-c: #86efac; --pd-bg: rgba(74, 222, 128, 0.09); --pd-line: rgba(74, 222, 128, 0.38); --pd-bar: #34c46a; }
|
||
.pd-tone-paused, .pd-tone-stopped { --pd-c: var(--kb-muted); --pd-bg: rgba(255, 255, 255, 0.05); --pd-line: var(--kb-border-strong); --pd-bar: rgba(255, 255, 255, 0.3); }
|
||
|
||
.pd-order {
|
||
padding: 18px 20px; border-radius: 16px; border: 1px solid var(--pd-line);
|
||
background: linear-gradient(135deg, var(--pd-bg), rgba(255, 255, 255, 0.015) 72%), rgba(12, 12, 14, 0.6);
|
||
}
|
||
.pd-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 14px; flex-wrap: wrap; }
|
||
.pd-order-name { min-width: 0; }
|
||
.pd-order-no { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--kb-muted); }
|
||
.pd-order-name h3 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
|
||
.pd-status {
|
||
flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
|
||
font-size: 12.5px; font-weight: 700; color: var(--pd-c); background: var(--pd-bg); border: 1px solid var(--pd-line);
|
||
}
|
||
.pd-status::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
|
||
.pd-tone-active .pd-status::before, .pd-tone-waiting .pd-status::before, .pd-tone-review .pd-status::before { animation: pd-pulse 1.8s ease-in-out infinite; }
|
||
@keyframes pd-pulse { 50% { opacity: 0.3; } }
|
||
.pd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; }
|
||
.pd-steps li { position: relative; min-width: 0; padding-top: 13px; font-size: 12px; color: var(--kb-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
.pd-steps li::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
|
||
.pd-steps li.is-done { color: var(--kb-muted); }
|
||
.pd-steps li.is-done::before, .pd-steps li.is-current::before { background: var(--pd-bar); }
|
||
.pd-steps li.is-current { color: #fff; font-weight: 700; }
|
||
.pd-order-hint { margin: 14px 0 0; font-size: 13.5px; color: var(--pd-c); }
|
||
|
||
.pd-section { min-width: 0; }
|
||
.pd-title {
|
||
display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 12px; font-weight: 700;
|
||
letter-spacing: 0.12em; text-transform: uppercase; color: var(--kb-muted);
|
||
}
|
||
.pd-ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
|
||
.pd-title .pd-ico { color: var(--kb-lilac); }
|
||
.pd-empty { margin: 0; font-size: 14px; color: var(--kb-muted); }
|
||
.pd-note { margin: 0 0 8px; font-size: 13px; color: var(--kb-muted); }
|
||
|
||
/* Zeitleiste "Letzte Änderungen": Tage als Ueberschrift, jede Aenderung ein Punkt auf der Linie */
|
||
.pd-timeline { position: relative; padding-left: 22px; }
|
||
.pd-timeline::before {
|
||
content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 1px;
|
||
background: linear-gradient(var(--kb-purple-line), rgba(157, 61, 254, 0.06));
|
||
}
|
||
.pd-day + .pd-day { margin-top: 16px; }
|
||
.pd-day-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--kb-lilac); }
|
||
.pd-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
|
||
.pd-change { position: relative; }
|
||
.pd-change::before {
|
||
content: ''; position: absolute; left: -21px; top: 6px; width: 8px; height: 8px; border-radius: 50%;
|
||
background: #0c0c0e; border: 2px solid var(--kb-purple);
|
||
}
|
||
.pd-day:first-child .pd-change:first-child::before { background: var(--kb-purple); box-shadow: 0 0 0 4px rgba(157, 61, 254, 0.22); }
|
||
.pd-change-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
|
||
.pd-change-head strong { font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
|
||
.pd-change-head time { flex: none; font-size: 12px; color: var(--kb-faint); font-variant-numeric: tabular-nums; }
|
||
.pd-change-details { margin: 4px 0 0; padding: 0 0 0 17px; font-size: 13px; line-height: 1.5; color: var(--kb-muted); }
|
||
.pd-change-details li + li { margin-top: 3px; }
|
||
.pd-change-details li::marker { color: var(--kb-faint); }
|
||
|
||
/* Lange Listen gekuerzt; "Weitere … anzeigen" klappt auf */
|
||
.pd-collapsible:not(.is-open) [data-extra] { display: none; }
|
||
.pd-more {
|
||
margin-top: 14px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--kb-border-strong); background: transparent;
|
||
color: #d4b4ff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
|
||
}
|
||
.pd-more:hover { background: rgba(157, 61, 254, 0.12); }
|
||
|
||
/* Arbeiten: Farbe und Symbol je Art (Website-Update, online, vor Ort, Buero) */
|
||
.pd-kind-update { --pd-k: #d8b4fe; --pd-kbg: rgba(157, 61, 254, 0.18); }
|
||
.pd-kind-online { --pd-k: #93c5fd; --pd-kbg: rgba(59, 130, 246, 0.17); }
|
||
.pd-kind-onsite { --pd-k: #5eead4; --pd-kbg: rgba(45, 212, 191, 0.15); }
|
||
.pd-kind-office { --pd-k: #fcd34d; --pd-kbg: rgba(251, 191, 36, 0.15); }
|
||
.pd-kind-work { --pd-k: rgba(255, 255, 255, 0.78); --pd-kbg: rgba(255, 255, 255, 0.08); }
|
||
.pd-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
|
||
.pd-entry {
|
||
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start;
|
||
padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--kb-border);
|
||
}
|
||
.pd-entry-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--pd-k); background: var(--pd-kbg); }
|
||
.pd-entry-ico .pd-ico { width: 19px; height: 19px; }
|
||
.pd-entry-main { min-width: 0; }
|
||
.pd-entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 22px; }
|
||
.pd-entry-head strong { font-size: 14.5px; color: var(--pd-k); }
|
||
.pd-entry-meta { font-size: 12.5px; color: var(--kb-faint); }
|
||
.pd-entry-text { margin: 4px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); white-space: pre-wrap; overflow-wrap: anywhere; }
|
||
.pd-entry-changes { margin: 4px 0 0; padding-left: 17px; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); }
|
||
.pd-entry-changes li::marker { color: var(--pd-k); }
|
||
.pd-time {
|
||
display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
|
||
font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--kb-border-strong);
|
||
}
|
||
.pd-time-ico { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
|
||
|
||
/* Tab "Fortschritt": je Auftrag eine Karte in der Farbe seines Status */
|
||
#activity-body:has(.pd-order-card) { display: grid; gap: 16px; padding: 0; background: none; border: none; }
|
||
.pd-order-card > .pd-collapsible, .pd-order-card > .pd-empty { margin-top: 18px; }
|
||
.pd-order-card .pd-entry { background: rgba(0, 0, 0, 0.28); }
|
||
|
||
/* ------------------------------------------------- Tabellen und Pills --- */
|
||
.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-amber { color: #fcd34d; background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.45); }
|
||
|
||
/* ------------------------------------------------------------------- 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); }
|
||
|
||
/* ------------------------------------------ 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; }
|
||
|
||
.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-label { margin: 4px 0 8px 4px; }
|
||
.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-label + .kb-sheet-links { margin-top: 0; }
|
||
.kb-sheet-links > a, .kb-sheet-links > button {
|
||
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 > button { width: 100%; margin: 0; border: none; background: none; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; }
|
||
.kb-sheet-links > button:disabled { cursor: progress; opacity: 0.6; }
|
||
/* Trennlinien nur zwischen sichtbaren Eintraegen ("Abo verwalten" gibt es nur mit Abo) */
|
||
.kb-sheet-links > :not(.hidden) ~ :not(.hidden) { border-top: 1px solid var(--kb-border); }
|
||
.kb-sheet-links > *::after { content: '›'; font-size: 20px; line-height: 1; color: var(--kb-faint); }
|
||
.kb-sheet-links > [target='_blank']::after, .kb-sheet-links > .kb-sheet-ext::after { content: '↗'; font-size: 15px; }
|
||
.kb-sheet-links > .kb-sheet-ext { color: #fff; font-weight: 600; }
|
||
.kb-sheet-links a.legal-strong { color: #fff; font-weight: 700; }
|
||
.kb-sheet-links > :active { background: rgba(255, 255, 255, 0.05); }
|
||
#kb-sheet-error { margin: -4px 0 12px; }
|
||
.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); }
|
||
/* Sehr alte Browser ohne <dialog> (initAccountSheet): das Menue klappt unter der Kopfzeile auf */
|
||
.kb-no-sheet .kb-sheet { display: none; position: relative; z-index: 6; inset: auto; margin: 12px auto 0; }
|
||
.kb-no-sheet .kb-sheet[open] { display: block; }
|
||
|
||
/* "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 { display: none; }
|
||
.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; }
|
||
/* Projektdetails: der Knopf oeffnet eine eigene Seite (Pfeil nach rechts wie eine Listenzeile) */
|
||
.kb-project [data-details-btn] { width: 100%; justify-content: space-between; padding: 14px 16px 14px 18px; font-size: 15px; }
|
||
.kb-project .kb-details-chev { transform: none; width: 18px; height: 18px; opacity: 0.7; }
|
||
.kb-details .simple-table { font-size: 13px; }
|
||
.kb-details.pd-page { margin: 0; padding: 0; border-top: none; gap: 26px; }
|
||
.pd-order { padding: 16px; border-radius: 18px; }
|
||
.pd-order-name h3 { font-size: 17px; }
|
||
.pd-steps { gap: 5px; }
|
||
.pd-steps li { font-size: 11.5px; letter-spacing: -0.01em; }
|
||
.pd-change-head strong { font-size: 15px; }
|
||
.pd-change-details { font-size: 13.5px; }
|
||
.pd-entry { grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 12px; border-radius: 16px; }
|
||
.pd-entry .pd-time { grid-column: 2; justify-self: start; margin-top: 6px; }
|
||
.pd-entry-text, .pd-entry-changes { font-size: 14px; }
|
||
.pd-more { width: 100%; padding: 12px 14px; font-size: 14px; }
|
||
.pd-order-hint .kb-link { display: inline-block; padding: 6px 0; }
|
||
|
||
/* 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-links > button, .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; }
|
||
}
|
||
|
||
/* Installierte App auf dem iPhone (black-translucent, siehe login.css): 100dvh ist dort um die Statusleiste
|
||
zu kurz, 100lvh die volle Hoehe. Die Seite muss scrollbar bleiben (kein overflow: hidden beim Sheet),
|
||
Overlays werden von oben mit voller Hoehe verankert statt mit inset: 0. */
|
||
@media (display-mode: standalone) {
|
||
@supports (-webkit-touch-callout: none) {
|
||
.kb-page .chat-overlay { top: 0; bottom: auto; height: 100lvh; } /* staerker als inset: 0 aus chat-composer.css */
|
||
}
|
||
}
|
||
@media (display-mode: standalone) and (max-width: 880px), (display-mode: standalone) and (pointer: coarse) and (max-height: 500px) {
|
||
@supports (-webkit-touch-callout: none) {
|
||
#view-chat.active { height: calc(100lvh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px); }
|
||
html.kb-sheet-open { overflow: visible; }
|
||
.kb-sheet[open] { top: 0; bottom: auto; height: 100lvh; max-height: none; display: flex; flex-direction: column; justify-content: flex-end; }
|
||
.kb-sheet-panel { max-height: calc(100lvh - env(safe-area-inset-top) - 24px); }
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.kb-shell.dashboard-content-reveal, .kb-view.active, .kb-sheet[open] .kb-sheet-panel, #loading:not(.hidden), .pd-status::before { animation: none !important; }
|
||
.kb-header, .kb-nav, .kb-logo, .kb-app-title, .kb-sheet-panel, .kb-details-chev { transition: none !important; }
|
||
}
|