ClaudeandClaude Opus 5.5
35d98da977
- Kundenbereich und Admin-Chat: Bueroklammer-Menue (Bild, Kamera, Datei), Mikrofon fuer Sprachnachrichten, Vorschau vor dem Senden mit Upload-Fortschritt, Einfuegen (Strg+V) und Hineinziehen von Dateien - Kamera: am Handy/Tablet die Kamera-App, am Rechner die Kamera im Browser mit Vorschau, Kamerawechsel und "Nochmal" - Sprachnachricht: Aufnahme mit Zeit und Pegel, vorher anhoerbar oder direkt senden, hoechstens 5 Minuten - Verlauf: Bilder (einzeln bzw. Raster, Grossansicht), Player fuer Sprachnachrichten, Datei-Kacheln mit Download - Server: jede Datei einzeln roh hochgeladen (max. 25 MB, 10 je Nachricht, max. 3 gleichzeitig), Typ aus dem Inhalt, nur erlaubte Endungen, keine Programme; Ablage unter upload-data/chat/<Kunde>/ ausserhalb von public/, Auslieferung nur mit Login; Bilder, Audio und PDF inline, alles andere als Download (nosniff, CSP sandbox) - Nicht gesendete Anhaenge werden nach 24 Stunden geloescht - Benachrichtigungs-Mail nennt nur Art und Namen der Anhaenge - Appwrite: neues Attribut portalMessages.attachments (scripts/setup-chat-collection.mjs, vor dem Deploy ausfuehren) - Datenschutzerklaerung Abschnitt 6 ergaenzt (Stand 26.09.2026), PDF neu Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
352 lines
22 KiB
CSS
352 lines
22 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; }
|
|
|
|
/* ----------------------------------------------------------------- Mobil --- */
|
|
@media (max-width: 880px) {
|
|
.kb-shell { grid-template-columns: 1fr; gap: 22px; padding-top: 22px; }
|
|
.kb-side > .kb-label { display: none; }
|
|
.kb-nav { grid-template-columns: 1fr 1fr; gap: 6px; }
|
|
.kb-account-text { display: none; }
|
|
}
|
|
@media (max-width: 640px) {
|
|
.kb-facts { grid-template-columns: 1fr; }
|
|
.kb-facts > div + div { border-left: none; border-top: 1px solid var(--kb-border); }
|
|
.abo-features { grid-template-columns: 1fr; }
|
|
.kb-head h1 { font-size: 26px; }
|
|
.kb-project-body, .kb-panel { padding: 16px; }
|
|
}
|