/* KFZ Office Pro: split automotive mark and theme-aware outlined lettering. */
.kfzop-brand-link,
.kfzop-mobile-brand {
    --kfzop-ink: var(--text, #243640);
    color: var(--kfzop-ink);
    text-decoration: none;
    width: fit-content;
    flex-shrink: 0;
}
:root[data-theme="dark"] :is(.kfzop-brand-link, .kfzop-mobile-brand) {
    --kfzop-ink: var(--text, #e7ebf0);
}
.kfzop-brand-link:focus-visible,
.kfzop-mobile-brand:focus-visible {
    outline: 2px solid var(--primary, #91b2d1);
    outline-offset: 6px;
    border-radius: 4px;
}
.kfzop-brand-link .kfzop-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    direction: ltr;
    unicode-bidi: isolate;
    vertical-align: middle;
    color: var(--kfzop-ink);
    line-height: 1;
}
.kfzop-symbol {
    display: block;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    object-fit: contain;
}
.kfzop-type {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 120px;
    flex: 0 0 120px;
}
.kfzop-wordmark,
.kfzop-descriptor {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}
.kfzop-descriptor { opacity: .82; }
.sidebar > .kfzop-brand-link { width: 100%; }
.sidebar .kfzop-symbol { width: 38px; height: 38px; flex-basis: 38px; }
.sidebar .kfzop-type { width: 112px; flex-basis: 112px; }
.kfzop-mobile-brand { display: inline-flex; align-items: center; }
.kfzop-mobile-brand .kfzop-symbol { width: 32px; height: 32px; flex-basis: 32px; }
.kfzop-brand-link--compact .kfzop-brand { gap: 8px; }
.kfzop-brand-link--compact .kfzop-symbol { width: 25px; height: 25px; flex-basis: 25px; }
.kfzop-brand-link--compact .kfzop-type { width: 78px; flex-basis: 78px; }
.kfzop-brand-link--compact .kfzop-descriptor { display: none; }
.showcase-brand .kfzop-symbol { width: 24px; height: 24px; flex-basis: 24px; }
.workplace-brand.kfzop-brand-link { display: inline-block; margin-bottom: 26px; }
.kfzop-error-brand { display: flex; margin: 0 auto 28px; }
#header .kfzop-admin-brand .kfzop-brand { color: var(--header-link-color, #fff); }
#header .kfzop-admin-brand .kfzop-symbol { width: 34px; height: 34px; flex-basis: 34px; }
#header .kfzop-admin-brand .kfzop-type { width: 102px; flex-basis: 102px; }


.kfzop-lock-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 26px;
}
.kfzop-lock-header .workplace-brand { margin-bottom: 0; }

@media (max-width: 600px) {
    :is(.mk-header, .login-header) .kfzop-descriptor { display: none; }
    .app-body .mobile-topbar-row > .kfzop-mobile-brand { margin-inline-end: auto; }
    :is(.mk-header, .login-header) .kfzop-symbol { width: 32px; height: 32px; flex-basis: 32px; }
    :is(.mk-header, .login-header) .kfzop-type { width: 99px; flex-basis: 99px; }
    :is(.mk-header, .login-header) .kfzop-brand { gap: 8px; }
    /* Keep language, appearance and account actions accessible in the public header. */
    .public-header .kfzop-type { display: none; }
    .public-header .kfzop-symbol { width: 34px; height: 34px; flex-basis: 34px; }
    .public-header .kfzop-brand { gap: 0; }
}
@media (max-width: 480px) {
    .login-page.entry-page .entry-header-actions { gap: 8px; }
    .login-header :is(.language-current, .language-chevron) { display: none; }
    .login-header .language-trigger { width: 38px; padding: 8px; }
    .login-header .language-panel { position: fixed; inset-block-start: 74px; inset-inline-end: 12px; }
    .kfzop-lock-header :is(.language-current, .language-chevron) { display: none; }
    .kfzop-lock-header .language-trigger { width: 38px; padding: 8px; }
    .public-body .public-header nav { gap: 6px; }
    .public-header .text-link { font-size: 12px; }
    .public-header .btn-primary { padding-inline: 8px; }
}
@media (max-width: 380px) {
    :is(.mk-header, .login-header) .kfzop-type { width: 84px; flex-basis: 84px; }
}
@media (max-width: 360px) {
    .app-body .mobile-topbar-row { gap: 4px; }
    /* This header already puts account actions on a second row. */
    .public-header .kfzop-type { display: block; }
    .public-header .kfzop-brand { gap: 11px; }
    .mk-header .kfzop-type { display: none; }
    .mk-header .kfzop-brand { gap: 0; }
}