/* Persistente Navigation und Orientierung für alle Kundenbereiche. */
/* Der Portalrahmen soll beim Wechsel nicht mit der ganzen Seite ausblenden. */
@view-transition { navigation: none; }
*, *::before, *::after { box-sizing: border-box; }
.portal-integrated [hidden] { display: none; }
.portal-integrated .sfx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.portal-skip { position: fixed; top: 8px; left: 8px; transform: translateY(-160%); z-index: var(--sfx-z-dialog); }
.portal-skip:focus { transform: none; }
.portal-integrated .sfx-sidebar { border-radius: 0 var(--md-sys-shape-corner-large) var(--md-sys-shape-corner-large) 0; }
.portal-integrated .sfx-sidebar__brand { flex-wrap: wrap; min-height: 72px; }
.portal-integrated .sfx-sidebar__account { text-decoration: none; }
.portal-integrated .sfx-sidebar__account strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-integrated .sfx-header { padding-inline: 24px; }
.portal-workspace { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal-workspace-role { font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.portal-workspace-account { font: var(--md-sys-typescale-body-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-workspace-account:not(:empty) { padding-left: 12px; border-left: 1px solid var(--md-sys-color-outline-variant); }
.portal-mobile-account { display: none; }
.portal-logout { flex-shrink: 0; }
.portal-integrated .sfx-header [data-theme-cycle] { flex-shrink: 0; }
.portal-integrated :where(button, a, input, select, textarea, summary) { scroll-margin-block: 88px 112px; }
.portal-integrated summary:focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; border-radius: var(--md-sys-shape-corner-extra-small); }
.portal-integrated .sfx-main .sfx-card { box-shadow: none; }
.portal-integrated .sfx-page-title { text-wrap: balance; }
.portal-integrated .sfx-page-desc { max-width: 68ch; line-height: 1.6; }
@media(min-width:1440px) { .portal-integrated .sfx-shell { grid-template-columns: 256px minmax(0, 1fr); } }
@media(min-width:600px) and (max-width:1439px) {
 .portal-workspace-role { display: none; }
 .portal-integrated .sfx-sidebar { border-radius: 0; }
}
.portal-integrated .sfx-sidebar__brand img { max-width: 200px; object-fit: contain; }
.portal-integrated .sfx-main { width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px; }
.portal-integrated .sfx-main > * { min-width: 0; }
.portal-context { display: flex; flex-direction: column; gap: 20px; margin-bottom: 24px; }
.portal-event-heading { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.portal-event-heading h1 { overflow-wrap: anywhere; margin: 0; max-width: 32ch; }
.portal-event-heading .sfx-badge { flex-shrink: 0; }
.portal-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.portal-breadcrumb a { overflow-wrap: anywhere; }
.portal-event-nav { max-width: 100%; flex-wrap: nowrap; scrollbar-width: thin; }
.portal-event-nav .sfx-tab { flex: 0 0 auto; text-decoration: none; min-height: 48px; }
.portal-event-nav .sfx-tab.is-active { color: var(--md-sys-color-primary); }
.portal-event-nav .sfx-tab:focus-visible { outline-offset: -3px; }
.portal-breadcrumb .sfx-icon { font-size: 16px; }
.portal-integrated .glossary-main, .portal-integrated .reviews-main { gap: 24px; }
.portal-integrated .glossary-main .portal-context, .portal-integrated .reviews-main .portal-context { margin-bottom: 0; }
.portal-integrated .glossary-heading h2, .portal-integrated .reviews-heading h2 { margin: 0; }
.portal-form-actions { position: sticky; bottom: 16px; z-index: var(--sfx-z-header); display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; padding: 16px; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container); box-shadow: var(--md-sys-elevation-level1); }
.portal-form-actions > .sfx-grow { min-width: 120px; }
.portal-form-actions > div { display: flex; gap: 8px; flex-wrap: wrap; }
.portal-integrated .sfx-toast-region { top: 80px; right: 16px; bottom: auto; left: auto; }
.portal-integrated .glossary-actions { flex-wrap: wrap; }
.portal-integrated .glossary-actions > div { flex-wrap: wrap; }
.portal-integrated:has([data-nav="monitoring"]) .sfx-navbar__item { min-width: 0; flex: 1; }
@media(max-width:599px) {
 .portal-integrated .sfx-sidebar { display: none; }
 .portal-integrated .sfx-header { padding-inline: 16px 8px; gap: 4px; }
 .portal-integrated .translate-header-brand { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; margin: 0; }
 .portal-workspace { display: none; }
 .portal-mobile-account { display: block; max-width: 180px; font: var(--md-sys-typescale-label-small); color: var(--md-sys-color-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .portal-mobile-account:empty { display: none; }
 .portal-logout { width: 44px; padding: 0; }
 .portal-logout-label { display: none; }
 .portal-integrated .sfx-main { padding: 16px 16px calc(104px + env(safe-area-inset-bottom)); }
 .portal-integrated[data-portal-page="konto"] .sfx-main { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }
 .portal-integrated .sfx-navbar { height: calc(80px + env(safe-area-inset-bottom)); padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
 .portal-integrated .glossary-actions { bottom: calc(88px + env(safe-area-inset-bottom)); }
 .portal-event-heading { gap: 12px; }
 .portal-event-heading h1 { font: var(--md-sys-typescale-headline-small); }
 .portal-form-actions { bottom: calc(88px + env(safe-area-inset-bottom)); padding: 12px; gap: 8px; }
 .portal-form-actions > .sfx-grow { flex-basis: 100%; }
 .portal-integrated .sfx-btn { min-height: 44px; }
}

/* Same-document navigation: the frame remains still, only page content transitions. */
html:has(.portal-integrated) { view-transition-name: none; }
.portal-integrated .sfx-main { view-transition-name: portal-content; }
.portal-integrated .portal-context { view-transition-name: portal-context; }
::view-transition-group(portal-content) { animation: none; }
::view-transition-old(portal-content), ::view-transition-new(portal-content) { height: auto; object-fit: none; object-position: top left; }
::view-transition-old(portal-content) { animation: sfx-vt-out var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized-accelerate) both; }
::view-transition-new(portal-content) { animation: sfx-vt-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both; }
::view-transition-group(portal-context), ::view-transition-old(portal-context), ::view-transition-new(portal-context) { animation: none; }
::view-transition-old(portal-context) { display: none; }
.portal-navigation-progress { position: fixed; top: 64px; inset-inline: 0; z-index: var(--sfx-z-header); height: 3px; border-radius: 0; }
.portal-navigation-error { margin: 16px 24px 0; }
@media(prefers-reduced-motion: reduce) {
 ::view-transition-group(portal-content), ::view-transition-old(portal-content), ::view-transition-new(portal-content) { animation: none; }
}