/* Paket A – nur nach initMobileNavigation aktiv. Alle Bestandsziele bleiben. */
body.pa-navigation {
    --pa-nav-surface: #0c1d35;
    --pa-nav-text: #edf5ff;
    --pa-nav-muted: #b3c5de;
    --pa-nav-line: #294766;
    --pa-nav-accent: #32c7ff;
    --pa-nav-selected: #153961;
    padding-bottom: var(--pa-nav-clearance, calc(92px + env(safe-area-inset-bottom, 0px)));
}
body.pa-navigation[data-theme="hell"], body.pa-navigation[data-theme="sonnenlicht"] {
    --pa-nav-surface: #fff;
    --pa-nav-text: #102536;
    --pa-nav-muted: #41586b;
    --pa-nav-line: #aabccc;
    --pa-nav-accent: #005b9d;
    --pa-nav-selected: #e3edf8;
}
body.pa-navigation[data-theme="sonnenlicht"] {
    --pa-nav-text: #000; --pa-nav-muted: #222; --pa-nav-line: #202020;
}
.pa-navigation .app-header {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto);
    gap: 12px;
    padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
    background: var(--pa-nav-surface);
    color: var(--pa-nav-text);
    border-color: var(--pa-nav-line);
}
.pa-navigation .app-header :is(.logo-area, .header-center, .header-actions) { min-width: 0; }
.pa-navigation .app-header .app-title { color: var(--pa-nav-text); overflow-wrap: anywhere; }
.pa-navigation .header-center { flex-wrap: wrap; }
.pa-navigation .drone-switcher { min-width: 0; max-width: 100%; min-height: 44px; }
.pa-navigation .dji-device-status { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.pa-navigation .dji-device-status-dot { flex-shrink: 0; }
body.pa-navigation:is([data-theme="hell"], [data-theme="sonnenlicht"]) .dji-device-status.is-offline { color: #9b2020; border-color: #9b2020; }
body.pa-navigation:is([data-theme="hell"], [data-theme="sonnenlicht"]) .dji-device-status.is-online { color: #00694e; border-color: #00694e; }
body.pa-navigation:is([data-theme="hell"], [data-theme="sonnenlicht"]) .dji-device-status.has-warning { color: #774300; border-color: #774300; }
.pa-navigation .app-header .header-icon { width: 44px; height: 44px; flex: 0 0 44px; }
.pa-navigation .user-dropdown { max-width: calc(100vw - 24px); max-height: calc(100dvh - 176px); overflow-y: auto; }
.pa-navigation .bottom-nav {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
    background: var(--pa-nav-surface); border-color: var(--pa-nav-line);
}
.pa-navigation .bottom-nav :is(.nav-item, .pa-more-trigger) {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-width: 0; min-height: 56px; gap: 4px; padding: 6px 2px;
    color: var(--pa-nav-muted); background: transparent; border: 1px solid transparent;
    border-radius: 10px; font: inherit; font-size: .75rem; line-height: 1.25;
    white-space: normal; overflow-wrap: anywhere; cursor: pointer;
}
.pa-navigation .bottom-nav :is(.nav-item.active, .pa-more-trigger.active) {
    color: var(--pa-nav-accent); background: var(--pa-nav-selected); border-color: var(--pa-nav-line);
}
.pa-more-icon { font-size: 22px; line-height: 24px; letter-spacing: 2px; }
.pa-navigation :is(.nav-item, .pa-more-trigger, .pa-more-close):focus-visible { outline: 3px solid var(--pa-nav-accent); outline-offset: 2px; }
.pa-navigation .pa-more-dialog {
    position: fixed; inset: auto 8px max(84px, calc(76px + env(safe-area-inset-bottom, 0px)));
    width: min(420px, calc(100% - 16px)); max-width: calc(100% - 16px);
    max-height: calc(100dvh - 110px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin: 0 auto; padding: 0; overflow: auto; overscroll-behavior: contain;
    border: 2px solid var(--pa-nav-line); border-radius: 16px;
    background: var(--pa-nav-surface); color: var(--pa-nav-text);
}
.pa-more-dialog::backdrop { background: #020a16aa; }
.pa-more-sheet { padding: 16px; }
.pa-more-sheet h2 { margin: 0 0 12px; font-size: 1.2rem; color: inherit; }
.pa-more-links { display: grid; gap: 8px; }
.pa-navigation .pa-more-links .nav-item, .pa-more-close {
    display: flex; flex-direction: row; justify-content: flex-start; align-items: center;
    width: 100%; min-height: 48px; padding: 10px 12px; gap: 12px;
    border: 1px solid var(--pa-nav-line); border-radius: 10px; font: inherit;
    background: var(--pa-nav-selected); color: var(--pa-nav-text); white-space: normal; overflow-wrap: anywhere;
}
.pa-more-links .nav-item.active { font-weight: 700; }
.pa-more-close { justify-content: center; margin-top: 16px; cursor: pointer; }
.pa-navigation-compact .bottom-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
    .pa-navigation .app-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; }
    .pa-navigation .header-center { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
    .pa-navigation .header-actions { grid-column: 2; grid-row: 1; }
    .pa-navigation .header-actions :is(.header-quote, .version-badge-header) { display: none; }
    .pa-navigation .header-actions { gap: 4px; }
    .pa-navigation .app-title { font-size: .875rem; }
    .pa-navigation .logo-area { gap: 6px; }
    .pa-navigation .header-logo { width: 32px; }
    .pa-navigation .header-center .drone-switcher { flex: 1 1 140px; }
    .pa-navigation .dji-device-status { flex: 1 1 180px; }
}
@media (max-height: 500px) {
    .pa-navigation .app-header { position: relative; }
    .pa-navigation .pa-more-dialog { inset-block-end: 76px; max-height: calc(100dvh - 92px); }
}
@media (prefers-reduced-motion: reduce) {
    .pa-navigation :is(.nav-item, .pa-more-trigger) { transition: none; }
}