Kundenbereich: Verträge und Abmelden nur noch im Profilbild-Menü

- "Abo verwalten & Rechnungen" (Stripe-Kundenportal) steht nur noch im Konto-Menü
  (Gruppe "Verträge", nur mit Abo). In der Wartungskarte bleibt nur bei fehlgeschlagener
  Abbuchung "Zahlungsart aktualisieren".
- "Verträge hier kündigen" und "Vertrag widerrufen": raus aus Seitenfuß, Wartungskarte und
  Abo-Seite; im Kundenbereich nur noch im Konto-Menü. Ausnahme: während der Widerrufsfrist
  zeigt die Wartungskarte weiter "Vertrag widerrufen · bis TT.MM." (§ 356a BGB: hervorgehoben
  platziert). Öffentlich bleiben beide auf der Login-Seite und im Footer von webklar.com.
- "Abmelden" nicht mehr in der Kopfzeile, nur noch im Konto-Menü.
- Hinweis unter den Rechnungen verweist aufs Profilbild und öffnet das Menü.
- Browser ohne <dialog>: Menü klappt als Box auf (statt Abmelden in der Kopfzeile).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed 2026-09-26 16:43:21 +00:00
1 parent d72d30dd2a
commit 93381a81c5
3 files changed
+79 -48

No files matched your search

+19 -15
View File
@@ -54,11 +54,6 @@
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 {
@@ -165,6 +160,8 @@
.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;
@@ -333,7 +330,6 @@
/* ---------------------------------------------------------- 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). */
@@ -345,7 +341,6 @@ button.kb-avatar {
.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;
@@ -373,24 +368,34 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
}
.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-links a {
.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 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 > 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 a:active { background: rgba(255, 255, 255, 0.05); }
.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 {
@@ -478,8 +483,7 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
.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-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 */
@@ -645,7 +649,7 @@ button.kb-avatar:disabled { cursor: default; box-shadow: none; }
.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; }
.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,