ClaudeandClaude Opus 5.5
bd7b1fc671
In der installierten App auf dem iPhone hing die Tab-Leiste auf kurzen Seiten (z. B. leere Tabs Projekte, Rechnungen, Fortschritt) 59 px ueber dem unteren Rand, darunter ein schwarzer Streifen; im Chat nicht. Das ist ein bekannter WebKit-Fehler bei black-translucent: Der Layout-Bereich ist um die Hoehe der Statusleiste kuerzer als der Bildschirm, und auf Seiten, die kuerzer als der Bildschirm sind, docken fixierte Leisten an dieses zu kurze Ende. Der Chat ist hoeher als der Bildschirm und war deshalb nicht betroffen. - Installierte App auf iOS: Seite mindestens bildschirmhoch. Die Hoehe kommt aus screen.* (--kb-screen-h), weil innerHeight, 100svh und 100dvh in diesem Zustand selbst zu kurz sein koennen. Das gilt auch fuer den Login und die Chat-Hoehe. - Safari im Browser, Android und Desktop unveraendert (pixelgleich). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
675 lines
42 KiB
CSS
675 lines
42 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);
|
||
}
|
||
.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.
|
||
Installierte App auf dem iPhone: Bildschirmhoehe (--kb-screen-h), dvh ist dort teils zu kurz */
|
||
#view-chat.active {
|
||
display: flex; flex-direction: column;
|
||
height: calc(100vh - var(--kb-appbar-h) - var(--kb-tabbar-h) - 20px);
|
||
height: calc(max(100dvh, var(--kb-screen-h, 0px)) - 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; }
|
||
}
|