/** * Konto-Symbol mit Benutzermenü für den Header. */ .bul-acc { --bul-main: #db2978; --bul-main-dark: #b81f63; --bul-ink: #181818; --bul-muted: #6b6b70; --bul-line: #e6e6ec; position: relative; display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1; /* Container in Pillenform wie der Button (falls ein Theme einen Rahmen setzt). */ border-radius: 980px !important; } .bul-acc *, .bul-acc *::before, .bul-acc *::after { box-sizing: border-box; } /* Auslöser */ .bul-acc__btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--bul-line); border-radius: 980px; background: #fff; color: var(--bul-ink); font-family: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .bul-acc__btn:hover, .bul-acc__btn:focus-visible { border-color: var(--bul-main); box-shadow: 0 6px 18px rgba(219, 41, 120, 0.16); color: var(--bul-ink); text-decoration: none; } .bul-acc__btn:focus-visible { outline: 2px solid var(--bul-main); outline-offset: 2px; } /* Nur das Symbol, ohne Rahmen und Hintergrund (nicht angemeldet) */ .bul-acc__btn--plain { padding: 4px; border: 0; background: none; box-shadow: none; color: #000; } .bul-acc__btn--plain:hover, .bul-acc__btn--plain:focus-visible { border: 0; background: none; box-shadow: none; color: var(--bul-main); transform: translateY(-1px); } .bul-acc__icon { flex: 0 0 auto; display: block; } .bul-acc__btn-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bul-acc__caret { flex: 0 0 auto; color: var(--bul-muted); transition: transform 0.2s ease; } .bul-acc.is-open .bul-acc__caret { transform: rotate(180deg); } /* Initialen */ .bul-acc__avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; background: linear-gradient(135deg, var(--bul-main) 0%, var(--bul-main-dark) 100%); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; } .bul-acc__avatar--lg { width: 40px; height: 40px; font-size: 15px; } /* Menü */ .bul-acc__menu { /* Variablen hier wiederholen: das Menü wird beim Öffnen nach verschoben und würde die Werte von .bul-acc sonst verlieren. */ --bul-main: #db2978; --bul-main-dark: #b81f63; --bul-ink: #181818; --bul-muted: #6b6b70; --bul-line: #e6e6ec; position: absolute; top: calc(100% + 10px); right: 0; z-index: 2147483000; min-width: 244px; padding: 8px; border: 1px solid var(--bul-line); border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(24, 24, 24, 0.16); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; animation: bul-acc-in 0.18s ease both; } .bul-acc__menu * , .bul-acc__menu *::before, .bul-acc__menu *::after { box-sizing: border-box; } /* Kreis mit Initialen auch im (verschobenen) Menü korrekt einfärben */ .bul-acc__menu .bul-acc__avatar { background: linear-gradient(135deg, var(--bul-main) 0%, var(--bul-main-dark) 100%) !important; color: #fff !important; } .bul-acc__menu[hidden] { display: none; } @keyframes bul-acc-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .bul-acc__menu { animation: none; } } .bul-acc__head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--bul-line); } .bul-acc__who { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .bul-acc__who strong { font-size: 14.5px; font-weight: 700; color: var(--bul-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bul-acc__who small { font-size: 12.5px; color: var(--bul-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bul-acc__link { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 12px; color: var(--bul-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.16s ease, color 0.16s ease; } .bul-acc__link:hover, .bul-acc__link:focus-visible { background: #f6f6f9; color: var(--bul-main); text-decoration: none; } .bul-acc__link .bul-acc__icon { color: var(--bul-muted); transition: color 0.16s ease; } .bul-acc__link:hover .bul-acc__icon { color: var(--bul-main); } .bul-acc__link--out { margin-top: 6px; padding-top: 13px; border-top: 1px solid var(--bul-line); border-radius: 0 0 12px 12px; color: #b3261e; } .bul-acc__link--out:hover { background: rgba(179, 38, 30, 0.07); color: #b3261e; } .bul-acc__link--out .bul-acc__icon { color: #b3261e; } /* Rechts-nach-links */ .rtl .bul-acc__menu { right: auto; left: 0; } /* Handy: Menü an den Bildschirmrand anlegen */ @media (max-width: 520px) { .bul-acc__menu { min-width: 0; width: calc(100vw - 28px); max-width: 320px; } .bul-acc__btn-label { display: none; } }