/* ========================================================
           MOBILE DARSTELLUNG
        ========================================================= */

        @media (max-width: 768px) {
            .tour-decision-content { padding: 22px 18px 18px; }
            .tour-decision-header { align-items: flex-start; gap: 12px; }
            .tour-decision-icon { width: 46px; height: 46px; border-radius: 14px; }
            .tour-decision-header h3 { font-size: 1.18rem; }
            .tour-decision-buttons { flex-direction: column; }
            .tour-decision-buttons .btn-creator { width: 100%; }
            h1 { font-size: 2.8rem; }
            .hero-sub { font-size: 1.1rem; margin-bottom: 30px; }
            .features-grid { flex-direction: column; align-items: flex-start; gap: 15px; margin-top: 20px; }
            .feature { flex-direction: row; text-align: left; padding: 0; }
            .feature:not(:last-child)::after { display: none; }
            .hero-container { margin-left: 0; padding: 20px; padding-top: 120px; }
            .top-nav { top: 15px; right: 15px; flex-direction: column; align-items: flex-end; gap: 10px; }
            .btn-twitch-topright { padding: 8px 16px; font-size: 0.85rem; }
            .logo-wrapper { margin-bottom: 15px; }
            .app-logo { height: 45px; }
            .logo-title .fw-bold { font-size: 1.8rem; }
            .logo-title .fw-light { font-size: 1.2rem; }
            .footer-tagline { font-size: 0.75rem; bottom: 15px; }
            #top-center-status { font-size: 0.75rem; padding: 5px 12px; }
            .dashboard-box { padding: 15px; }
            .tab-btn { padding: 10px 5px; font-size: 0.85rem; }
            #settings-view,
            #discover-view { padding: calc(env(safe-area-inset-top, 0px) + 76px) 12px calc(env(safe-area-inset-bottom, 0px) + 18px); }
            .settings-box { width: calc(100% - 24px); max-width: none; max-height: calc(100dvh - 24px); padding: 18px; }
            #settings-view .settings-box { width: 100%; max-height: none; }
            .settings-section { padding: 15px; }
            .settings-language-row { align-items: stretch; flex-direction: column; gap: 8px; }
            #lang-select-settings { width: 100%; min-height: 44px; }
            .share-link-row { align-items: stretch; flex-direction: column; gap: 4px; }
            .share-link-output { width: 100%; }
            #share-copy-button { width: 100%; min-height: 44px; }
            .discover-header h2 { font-size: 1.6rem; }
            .discover-grid { grid-template-columns: 1fr; }
            .tour-date-summary,
            .tour-date-fields,
            .tour-planning-fields { grid-template-columns: 1fr; }
        }

        /* ========================================================
           MOBILE KARTEN- UND TOURENBEDIENUNG
        ========================================================= */

        @media (max-width: 780px) {
            html, body { height: 100dvh; min-height: 100dvh; -webkit-text-size-adjust: 100%; }
            #map { width: 100%; height: 100dvh; }

            body.free-drive-active {
                background-color: #121212;
                background-image: none;
            }
            body.free-drive-active #map {
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100dvh;
                border: 0;
                border-radius: 0;
                clip-path: none;
                box-shadow: none;
            }
            body.free-drive-active #poi-toolbar {
                top: calc(env(safe-area-inset-top, 0px) + 70px);
                right: auto;
                left: 12px;
            }
            body.free-drive-active .privacy-point-panel {
                top: calc(env(safe-area-inset-top, 0px) + 116px);
                right: 12px;
                left: 12px;
                width: auto;
            }

            .top-left-nav {
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                left: 10px;
                z-index: 170;
            }
            .btn-menu {
                width: 48px;
                height: 48px;
                padding: 0;
                border-radius: 14px;
                font-size: 1.05rem;
                box-shadow: 0 8px 24px rgba(0,0,0,0.38);
            }
            .btn-menu #lbl-menu { display: none; }
            .menu-dropdown { min-width: 220px; max-height: min(70dvh, 470px); overflow-y: auto; }

            #top-center-status {
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                left: 68px;
                right: 68px;
                width: auto;
                min-width: 0;
                height: 48px;
                box-sizing: border-box;
                transform: none;
                justify-content: center;
                padding: 7px 10px;
                overflow: hidden;
                border-radius: 14px;
                white-space: nowrap;
                box-shadow: 0 8px 24px rgba(0,0,0,0.38);
            }
            #top-center-status #status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

            .logged-top-right {
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                right: 10px;
                z-index: 170;
                gap: 0;
            }
            .logged-top-right > .user-box { display: none !important; }
            .mobile-profile-toggle {
                display: flex;
                width: 48px;
                height: 48px;
                align-items: center;
                justify-content: center;
                padding: 4px;
                overflow: hidden;
                border: 1px solid rgba(255,255,255,0.2);
                border-radius: 14px;
                background: rgba(20, 20, 20, 0.88);
                color: #fff;
                box-shadow: 0 8px 24px rgba(0,0,0,0.38);
                backdrop-filter: blur(12px);
                cursor: pointer;
            }
            .mobile-profile-avatar { display: flex; width: 36px; height: 36px; align-items: center; justify-content: center; overflow: hidden; border: 2px solid var(--tour-purple); border-radius: 50%; background: #171c31; box-sizing: border-box; }
            .mobile-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
            .mobile-profile-menu {
                display: none;
                position: fixed;
                top: calc(env(safe-area-inset-top, 0px) + 66px);
                right: 10px;
                z-index: 175;
                width: min(240px, calc(100vw - 20px));
                box-sizing: border-box;
                padding: 14px;
                border: 1px solid rgba(168,85,247,0.48);
                border-radius: 16px;
                background: linear-gradient(145deg, rgba(8,15,39,0.98), rgba(15,17,39,0.97));
                box-shadow: 0 18px 42px rgba(0,0,0,0.58);
                backdrop-filter: blur(16px);
            }
            .mobile-profile-menu.is-open { display: block; }
            .mobile-profile-name { padding: 2px 2px 12px; overflow: hidden; color: #fff; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
            .mobile-profile-logout { display: block; margin-top: 4px; padding: 11px 12px; border: 1px solid rgba(255,90,110,0.25); border-radius: 10px; background: rgba(110,20,40,0.18); color: #ff8a9b; font-size: 0.88rem; font-weight: 800; text-align: center; text-decoration: none; }

            .tile-switcher-toggle {
                display: none;
                position: fixed;
                right: 66px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
                z-index: 165;
                width: 46px;
                height: 46px;
                align-items: center;
                justify-content: center;
                padding: 0;
                border: 1px solid rgba(255,255,255,0.18);
                border-radius: 13px;
                background: rgba(7, 13, 34, 0.9);
                color: #fff;
                box-shadow: 0 8px 24px rgba(0,0,0,0.46);
                backdrop-filter: blur(12px);
                cursor: pointer;
                font-size: 1.15rem;
            }
            .tile-switcher-toggle svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
            .tile-switcher-toggle.is-visible { display: flex; }
            #tile-switcher,
            body.tour-workspace-active #tile-switcher {
                display: none !important;
                position: fixed;
                right: 66px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
                width: auto;
                max-width: calc(100vw - 88px);
                gap: 7px;
                padding: 7px;
                border-radius: 14px;
                z-index: 166;
            }
            #tile-switcher.mobile-open,
            body.tour-workspace-active #tile-switcher.mobile-open { display: flex !important; }
            .tile-option { width: 58px; height: 58px; flex: 0 0 auto; }
            .tile-label { font-size: 0.68rem; }

            .mapboxgl-ctrl-bottom-right {
                right: 10px !important;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
            }
            .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib { bottom: -11px !important; }

            body.tour-workspace-active #tour-workspace-title {
                top: calc(env(safe-area-inset-top, 0px) + 18px);
                left: 68px;
                right: 108px;
                overflow: hidden;
                font-size: 1.25rem;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            body.tour-workspace-active #tour-sidebar {
                top: calc(env(safe-area-inset-top, 0px) + 10px);
                bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
                left: 10px;
                width: min(86vw, 320px);
                padding: 20px 14px 14px;
                border-radius: 16px;
            }
            body.tour-workspace-active #tour-sidebar-open {
                top: calc(env(safe-area-inset-top, 0px) + 14px);
                left: 12px;
                width: 44px;
                height: 44px;
            }
            body.tour-workspace-active #map {
                top: calc(env(safe-area-inset-top, 0px) + 68px);
                right: 10px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
                left: 10px;
                border-radius: 15px;
                clip-path: inset(0 round 15px);
            }

            body.tour-workspace-active #route-creator-toolbar {
                right: 10px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
                left: 10px;
                width: auto;
                min-height: 0;
                max-height: 132px;
                box-sizing: border-box;
                flex-direction: column;
                align-items: stretch;
                gap: 9px;
                padding: 12px;
                overflow: hidden;
                border-radius: 18px;
                background: linear-gradient(145deg, rgba(8, 15, 39, 0.97), rgba(5, 11, 30, 0.95));
                transition: max-height 0.24s ease, box-shadow 0.24s ease;
            }
            body.tour-workspace-active.tour-planning-active #map {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
            }
            body.tour-workspace-active.tour-planning-active #route-creator-toolbar,
            body.tour-workspace-active.tour-readonly-active #route-creator-toolbar {
                min-height: 0;
            }
            body.tour-workspace-active.tour-readonly-active #map {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 104px);
            }
            body.tour-workspace-active.tour-planning-active #tile-switcher,
            body.tour-workspace-active.tour-readonly-active #tile-switcher {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 172px);
            }
            body.tour-workspace-active.tour-planning-active #tile-switcher-toggle,
            body.tour-workspace-active.tour-readonly-active #tile-switcher-toggle {
                bottom: calc(env(safe-area-inset-bottom, 0px) + 114px);
            }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded {
                max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 88px);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                box-shadow: 0 -12px 50px rgba(0,0,0,0.72), 0 0 24px rgba(126, 50, 230, 0.18);
            }
            body.tour-workspace-active .tour-toolbar-toggle {
                display: flex;
                position: absolute;
                top: 8px;
                right: 10px;
                z-index: 2;
                width: 38px;
                height: 34px;
                align-items: center;
                justify-content: center;
                padding: 0;
                border: 1px solid rgba(255,255,255,0.15);
                border-radius: 10px;
                background: rgba(255,255,255,0.06);
                color: var(--tour-cyan);
                cursor: pointer;
                font-size: 1.1rem;
            }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded .tour-toolbar-toggle { transform: rotate(180deg); }
            body.tour-workspace-active .creator-info { min-width: 0; padding: 0 42px 0 2px; text-align: left; }
            body.tour-workspace-active .creator-info h4 { margin: 0; overflow: hidden; font-size: 0.94rem; text-overflow: ellipsis; white-space: nowrap; }
            body.tour-workspace-active .creator-info p { margin-top: 4px; overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
            body.tour-workspace-active .mobile-tour-status {
                display: inline-flex;
                align-items: center;
                min-height: 28px;
                padding: 5px 11px;
                box-sizing: border-box;
                border: 1px solid rgba(91,141,255,0.5);
                border-radius: 999px;
                background: rgba(31,65,130,0.2);
                color: var(--tour-blue);
                font-size: 0.78rem;
                font-weight: 800;
                line-height: 1;
            }
            body.tour-workspace-active .mobile-tour-status[data-status="active"] { border-color: rgba(66,228,235,0.52); background: rgba(30,120,126,0.2); color: var(--tour-cyan); }
            body.tour-workspace-active .mobile-tour-status[data-status="paused"] { border-color: rgba(185,103,255,0.56); background: rgba(126,50,230,0.2); color: var(--tour-purple-bright); }
            body.tour-workspace-active .mobile-tour-status[data-status="completed"] { border-color: rgba(66,228,235,0.52); background: rgba(30,120,126,0.2); color: var(--tour-cyan); }
            body.tour-workspace-active .mobile-tour-status[data-status="editing"] { border-color: rgba(255,184,77,0.5); background: rgba(145,90,20,0.2); color: #ffc066; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded) .creator-info h4,
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded) .creator-info p { display: none; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded) .tour-planning-fields { display: none !important; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded) .creator-buttons > * { display: none !important; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded).mobile-primary-visible .creator-buttons { display: block; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded).mobile-primary-visible #creator-btn-tour { display: block !important; width: 100%; }
            body.tour-workspace-active #route-creator-toolbar:not(.mobile-expanded):not(.mobile-primary-visible) .creator-buttons { display: none; }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded .creator-buttons {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 9px;
                width: 100%;
            }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded .tour-planning-fields { width: 100%; min-width: 0; }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded .tour-select { grid-column: 1 / -1; width: 100%; min-width: 0; }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded .btn-creator { width: 100%; min-width: 0; min-height: 46px; padding: 9px 10px; }
            body.tour-workspace-active #route-creator-toolbar.mobile-expanded #creator-btn-tour { grid-column: 1 / -1; }

            body.tour-workspace-active #tile-switcher-toggle {
                right: 76px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 114px);
            }
            body.tour-workspace-active #tile-switcher {
                right: 76px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 172px);
            }
            body.tour-workspace-active .mapboxgl-ctrl-bottom-right {
                right: 10px !important;
                bottom: 10px !important;
            }
            body.tour-workspace-active .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib { bottom: -7px !important; }
            body.mobile-tour-toolbar-expanded #tile-switcher-toggle,
            body.mobile-tour-toolbar-expanded #tile-switcher { display: none !important; }

            body.tour-workspace-active #poi-toolbar {
                top: calc(env(safe-area-inset-top, 0px) + 76px);
                right: 18px;
                left: 18px;
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: 5px;
                scrollbar-width: none;
            }
            body.tour-workspace-active #poi-toolbar::-webkit-scrollbar { display: none; }
            body.tour-workspace-active .btn-poi-toggle { flex: 0 0 auto; padding: 7px 10px; font-size: 0.76rem; }
            body.tour-workspace-active .route-poi-panel {
                top: calc(env(safe-area-inset-top, 0px) + 116px);
                right: 14px;
                left: 14px;
                width: auto;
                max-height: min(42dvh, 330px);
                overflow-y: auto;
            }
            body.tour-workspace-active .route-poi-results {
                right: 14px;
                bottom: calc(env(safe-area-inset-bottom, 0px) + 116px);
                left: 14px;
                max-height: 170px;
            }
            body.tour-workspace-active .route-poi-card {
                width: min(270px, 78vw);
                min-width: min(270px, 78vw);
                max-height: 148px;
            }
            body.mobile-tour-toolbar-expanded .route-poi-panel,
            body.mobile-tour-toolbar-expanded .route-poi-results { display: none !important; }
        }

        @media (max-width: 768px) {
            .google-maps-modal-box {
                width: calc(100vw - 24px);
                max-width: none;
                padding: 20px 16px;
            }
            .google-maps-actions { grid-template-columns: 1fr; }
            .google-maps-actions .google-maps-open { grid-column: auto; }
            .google-maps-actions .btn-creator { width: 100%; }
            .gpx-export-actions { grid-template-columns: 1fr; }
            .gpx-export-actions .btn-creator { width: 100%; }
            .tour-export-section,
            .tour-import-section { padding: 14px 12px; }
            .tour-exchange-close-row .btn-creator { width: 100%; }
        }