88 lines
6.4 KiB
CSS
88 lines
6.4 KiB
CSS
/* Kundenansicht neu (P3): Aussehen der Ansicht Funktionen (Meine, Entdecken) und der Bestätigungsseite zum Einschalten.
|
|
Besitzer: P3. Weißer Stil: Haarlinien statt Karten, Radien 6 und 12 px (Pillen 999 px), kein Schatten außer dem Ring, kein Gewicht 800,
|
|
keine Animation. Farben als var(--kn-…, Wert) mit den Werten der Übersicht als Fallback. Tap-Ziele sind 44 px hoch. */
|
|
|
|
/* ------------------------------------------------------------------------------------------ Pillen --- */
|
|
.kn-fn-pille {
|
|
display: inline-flex; align-items: center; flex: none; height: 20px; padding: 0 8px; border-radius: 999px;
|
|
font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
|
|
background: var(--kn-grau-bg, #ebeef1); color: var(--kn-grau-fg, #414552);
|
|
}
|
|
.kn-fn-pille--grau { background: var(--kn-grau-bg, #ebeef1); color: var(--kn-grau-fg, #414552); }
|
|
.kn-fn-pille--blau { background: var(--kn-blau-bg, #e0f2fe); color: var(--kn-blau-fg, #075985); }
|
|
.kn-fn-pille--orange { background: var(--kn-orange-bg, #fcedb9); color: var(--kn-orange-fg, #a82c00); }
|
|
.kn-fn-pille--violett { background: var(--kn-violett-bg, #efeafe); color: var(--kn-violett-fg, #5b21b6); }
|
|
.kn-fn-pille--gruen { background: var(--kn-gruen-bg, #d7f7c2); color: var(--kn-gruen-fg, #006908); }
|
|
.kn-fn-pille--rot { background: var(--kn-rot-bg, #ffe7f2); color: var(--kn-rot-fg, #b3093c); }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Knöpfe --- */
|
|
.kn-fn-knopf {
|
|
display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px;
|
|
border: 0; border-radius: 6px; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer;
|
|
background: var(--kn-accent, #111); color: #fff;
|
|
}
|
|
/* Hover: kein hellerer oder dunklerer Ton (die Fläche bleibt genau #111), nur etwas durchscheinend */
|
|
.kn-fn-knopf:hover { opacity: .88; }
|
|
.kn-fn-knopf:disabled, .kn-fn-knopf:disabled:hover {
|
|
background: var(--kn-bg-subtle, #f8f9fb); color: var(--kn-text-3, #8a93a3); cursor: not-allowed; opacity: 1;
|
|
box-shadow: var(--kn-ring, 0 0 0 1px rgba(60,66,87,.16), 0 1px 1px rgba(0,0,0,.06));
|
|
}
|
|
.kn-fn-knopf--zweit {
|
|
background: var(--kn-bg, #fff); color: var(--kn-text, #1a1f36);
|
|
box-shadow: var(--kn-ring, 0 0 0 1px rgba(60,66,87,.16), 0 1px 1px rgba(0,0,0,.06));
|
|
}
|
|
.kn-fn-knopf--zweit:hover { background: var(--kn-bg-hover, #f6f8fa); }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Meldungen --- */
|
|
.kn-fn-meldung { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--kn-danger, #c0123c); overflow-wrap: anywhere; }
|
|
.kn-fn-meldung:empty { display: none; }
|
|
.kn-fn-hinweis, .kn-fn-info { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--kn-text-2, #5e6678); overflow-wrap: anywhere; }
|
|
.kn-fn-info:first-child { margin-top: 0; }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Meine --- */
|
|
.kn-fn-liste { list-style: none; margin: 0; padding: 0; }
|
|
.kn-fn-zeile { border-bottom: 1px solid var(--kn-line, #ebeef1); }
|
|
.kn-fn-zeile:first-child { border-top: 1px solid var(--kn-line, #ebeef1); }
|
|
.kn-fn-zeile-knopf {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 44px; padding: 12px 0;
|
|
text-align: left; background: none; border: 0; cursor: pointer; color: var(--kn-text, #1a1f36);
|
|
}
|
|
.kn-fn-zeile-knopf:hover .kn-fn-name { color: var(--kn-accent, #111); text-decoration: underline; text-decoration-color: var(--kn-line-strong, #d8dde3); text-underline-offset: 3px; }
|
|
.kn-fn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
.kn-fn-name { font-weight: 600; color: var(--kn-text, #1a1f36); overflow-wrap: anywhere; }
|
|
.kn-fn-zeile2 { font-size: 13px; line-height: 20px; color: var(--kn-text-2, #5e6678); overflow-wrap: anywhere; }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Entdecken --- */
|
|
.kn-fn-eintrag { display: flex; flex-direction: column; gap: 16px; padding: 24px 0; border-top: 1px solid var(--kn-line, #ebeef1); }
|
|
.kn-fn-eintrag:last-child { border-bottom: 1px solid var(--kn-line, #ebeef1); }
|
|
.kn-fn-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; background: var(--kn-bg-subtle, #f8f9fb); }
|
|
.kn-fn-eintrag-text { min-width: 0; }
|
|
.kn-fn-eintrag-text h3 { font-size: 16px; line-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
|
|
.kn-fn-beschreibung { margin-top: 4px; color: var(--kn-text-2, #5e6678); overflow-wrap: anywhere; }
|
|
.kn-fn-enthalten { margin: 8px 0 12px; font-size: 13px; line-height: 20px; color: var(--kn-text-2, #5e6678); }
|
|
.kn-fn-wahl { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Bestätigungsseite --- */
|
|
.kn-fn-einschalten { max-width: 560px; }
|
|
.kn-fn-einschalten h2 { margin-bottom: 16px; font-size: 20px; line-height: 28px; font-weight: 600; overflow-wrap: anywhere; }
|
|
.kn-fn-fakten { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 16px; }
|
|
.kn-fn-fakten > div { display: contents; }
|
|
.kn-fn-fakten dt { color: var(--kn-text-2, #5e6678); }
|
|
.kn-fn-fakten dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
|
|
.kn-fn-konto, .kn-fn-recht { margin: 0 0 12px; overflow-wrap: anywhere; }
|
|
.kn-fn-konto { color: var(--kn-text-2, #5e6678); }
|
|
.kn-fn-recht a { text-decoration: underline; text-decoration-color: var(--kn-line-strong, #d8dde3); text-underline-offset: 3px; }
|
|
.kn-fn-recht a:hover { text-decoration-color: currentColor; }
|
|
.kn-fn-einschalten .kn-fn-hinweis { margin: 0 0 12px; }
|
|
.kn-fn-haken { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; margin: 12px 0 0; cursor: pointer; }
|
|
.kn-fn-haken input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--kn-accent, #111); }
|
|
.kn-fn-haken span { min-width: 0; overflow-wrap: anywhere; }
|
|
.kn-fn-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
|
|
|
|
/* ------------------------------------------------------------------------------------------ Breite Fenster --- */
|
|
@media (min-width: 881px) {
|
|
.kn-fn-eintrag { flex-direction: row; align-items: flex-start; gap: 24px; }
|
|
.kn-fn-bild { flex: 0 0 320px; width: 320px; }
|
|
.kn-fn-eintrag-text { flex: 1 1 0; }
|
|
}
|