33 lines
2.0 KiB
CSS
33 lines
2.0 KiB
CSS
/* Kundenansicht neu: Hülle (Menü, Kopf, Blatt, Leiste, Streifen, Konto). Weiß, Haarlinie, Schwarz; keine Verläufe, kein Glas.
|
|
Die Grundregeln gelten am Desktop, die Handy-Abfrage überschreibt für das Handy. */
|
|
|
|
/* ---------- Blatt (Etage 2) ---------- */
|
|
|
|
.kn-blatt { max-width: 1160px; padding: 36px 48px 80px; background: var(--kn-bg); }
|
|
.kn-haupt[inert] { display: none; } /* Desktop: die Unterseite ersetzt die Hauptseite in der Spalte */
|
|
|
|
.kn-brot { margin-bottom: 8px; font-size: 13px; line-height: 20px; color: var(--kn-text-2); }
|
|
.kn-brot a { color: var(--kn-text-2); }
|
|
.kn-brot-trenner { color: var(--kn-text-3); }
|
|
.kn-brot [aria-current="page"] { color: var(--kn-text); }
|
|
|
|
.kn-zurueck { position: relative; display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 8px 0 6px; font-size: 15px; font-weight: 600; color: var(--kn-text); }
|
|
.kn-zurueck::before { content: ""; width: 9px; height: 9px; margin-left: 4px; border: solid; border-width: 0 0 2px 2px; transform: rotate(45deg); }
|
|
.kn-zurueck--voll { flex: 1; }
|
|
.kn-zurueck .kn-l { position: relative; line-height: 20px; }
|
|
.kn-vl { flex: none; width: 1px; height: 24px; margin: 0 4px; background: var(--kn-line); }
|
|
.kn-punkt { position: absolute; top: -2px; left: 100%; width: 9px; height: 9px; margin-left: 2px; border-radius: 50%; background: #b3093c; box-shadow: 0 0 0 2px var(--kn-bg); }
|
|
|
|
@media (max-width: 880px), (pointer: coarse) and (max-height: 500px) {
|
|
.kn { --kn-unten: calc(var(--kn-zeile-h) + env(safe-area-inset-bottom)); }
|
|
.kn-blatt {
|
|
position: fixed; inset: 0 0 var(--kn-unten, var(--kn-zeile-h)); z-index: 20; max-width: none; padding: 0 16px 24px;
|
|
overflow-y: auto; overscroll-behavior: contain; border-radius: 12px 12px 0 0;
|
|
box-shadow: 0 0 0 1px rgba(26,31,54,.06), 0 -8px 24px rgba(26,31,54,.1);
|
|
transform: translateY(100%); transition: transform 550ms var(--kn-bremse);
|
|
}
|
|
.kn-blatt--auf { transform: none; }
|
|
.kn-haupt[inert] { display: block; } /* am Handy bleibt die Hauptseite unter dem Blatt stehen */
|
|
.kn-brot { display: none; }
|
|
}
|