/* FrachtImperium Mobile V2
   Ziel: Handy bekommt eine neutrale, bedienbare App-Ansicht.
   Desktop bleibt unangetastet. */

@media (max-width: 760px) {
    :root {
        --fi-mobile-bg: #05070c;
        --fi-mobile-panel: rgba(13, 20, 34, .96);
        --fi-mobile-panel-2: rgba(18, 28, 46, .96);
        --fi-mobile-border: rgba(255,255,255,.11);
        --fi-mobile-text: #f7fafc;
        --fi-mobile-muted: #aeb8c9;
        --fi-mobile-gold: #f5b84b;
        --fi-mobile-gold-2: #ffd98a;
    }

    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: var(--fi-mobile-bg) !important;
        color: var(--fi-mobile-text) !important;
        -webkit-text-size-adjust: 100%;
    }

    body::before,
    body::after {
        display: none !important;
        content: none !important;
    }

    img, video, canvas, svg {
        max-width: 100% !important;
    }

    /* Öffentliche Startseite / index.php */
    .topbar {
        position: relative !important;
        min-height: 0 !important;
        padding: 12px 10px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        overflow: hidden !important;
    }

    .topbar .brand,
    .brand {
        width: 100% !important;
        justify-content: center !important;
        gap: 10px !important;
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1 !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .brand-mark {
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .topbar nav {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr 1.35fr !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .topbar nav a,
    .topbar nav .btn.small {
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 8px !important;
        border-radius: 12px !important;
        text-align: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .hero {
        min-height: auto !important;
        display: block !important;
        padding: 18px 14px 34px !important;
        background:
            radial-gradient(circle at 20% 0%, rgba(245,184,75,.12), transparent 32%),
            linear-gradient(180deg, #0a1020 0%, #05070c 100%) !important;
        overflow: visible !important;
    }

    .hero::before,
    .hero::after,
    .hero-image-full {
        display: none !important;
        content: none !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 20px 18px !important;
        border-radius: 20px !important;
        background: rgba(8, 13, 24, .94) !important;
        border: 1px solid var(--fi-mobile-border) !important;
        box-shadow: 0 18px 44px rgba(0,0,0,.35) !important;
    }

    .hero-kicker,
    .kicker {
        display: block !important;
        width: 100% !important;
        margin: 0 0 14px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        letter-spacing: .12em !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .hero h1 {
        font-size: clamp(30px, 9vw, 42px) !important;
        line-height: 1.04 !important;
        letter-spacing: -.045em !important;
        margin: 0 0 14px !important;
        word-break: normal !important;
        hyphens: auto !important;
    }

    .hero p {
        max-width: none !important;
        margin: 0 0 18px !important;
        font-size: 16px !important;
        line-height: 1.58 !important;
    }

    .actions,
    .hero .actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn, button, .hero-btn, .pc-mini-link {
        min-height: 44px !important;
        border-radius: 14px !important;
        touch-action: manipulation !important;
    }

    .hero-stats {
        grid-template-columns: repeat(3, minmax(0,1fr)) !important;
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .stat-box {
        padding: 11px 8px !important;
        border-radius: 14px !important;
        text-align: center !important;
    }

    .stat-box strong {
        font-size: 16px !important;
    }

    .stat-box span {
        font-size: 11px !important;
    }

    .section,
    .auth-shell,
    .office-main,
    .wrap,
    .pc-scene,
    .screen-body {
        width: 100% !important;
        max-width: 100% !important;
    }

    .section {
        padding: 28px 14px !important;
    }

    .section-title {
        display: block !important;
        margin-bottom: 14px !important;
    }

    .section-title h2 {
        font-size: 26px !important;
    }

    .grid,
    .grid.three,
    .modules-grid,
    .screenshot-gallery {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .card {
        min-height: 0 !important;
        padding: 16px !important;
        border-radius: 18px !important;
    }

    /* zentrale Spiel-Statusbar */
    .fi-statusbar {
        width: 100% !important;
        min-height: 0 !important;
        padding: 10px 10px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .fi-brand {
        width: 100% !important;
        justify-content: center !important;
        font-size: clamp(22px, 6vw, 28px) !important;
        line-height: 1 !important;
    }

    .fi-brand-mark {
        width: 36px !important;
        height: 36px !important;
        flex-basis: 36px !important;
    }

    .fi-status-center,
    .fi-status-right {
        width: 100% !important;
        min-width: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        overflow: visible !important;
        flex-wrap: nowrap !important;
    }

    .fi-pill,
    .fi-timer,
    .fi-logout,
    .fi-profile-link,
    .fi-no-timer {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 7px 8px !important;
        border-radius: 13px !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: 12px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .fi-pill strong,
    .fi-timer small {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .fi-no-timer,
    .fi-timer {
        display: none !important;
    }

    .fi-profile-link {
        font-size: 18px !important;
    }

    /* Büro und Stadt: Mobile = neutrales App-Menü statt unpräziser Hotspots */
    .game-shell,
    .scene-wrap {
        display: block !important;
        min-height: 0 !important;
        overflow: visible !important;
        background: #05070c !important;
    }

    .office-scene,
    .city-scene {
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        padding: 226px 16px 30px !important;
        background-color: #05070c !important;
        background-repeat: no-repeat !important;
        background-position: center top !important;
        background-size: 100% 210px !important;
        overflow: visible !important;
    }

    .office-scene {
        background-image:
            linear-gradient(180deg, rgba(0,0,0,.08), rgba(5,7,12,.75) 82%, #05070c 100%),
            url('/public/assets/img/office-bg.jpg') !important;
    }

    .city-scene {
        background-image:
            linear-gradient(180deg, rgba(0,0,0,.06), rgba(5,7,12,.72) 82%, #05070c 100%),
            url('/public/assets/img/stadt-bg.jpg') !important;
    }

    .scene-vignette,
    .scene-help,
    .welcome-box {
        display: none !important;
    }

    .hotspot {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        min-height: 74px !important;
        padding: 12px 10px !important;
        border-radius: 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: var(--fi-mobile-panel-2) !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        color: var(--fi-mobile-text) !important;
        font-size: 18px !important;
        font-weight: 950 !important;
        text-align: center !important;
    }

    .hotspot:first-of-type {
        background: linear-gradient(180deg, #ffd98a, #f5b84b) !important;
        color: #171006 !important;
        border-color: rgba(255,217,138,.5) !important;
    }

    .hotspot-dot {
        display: none !important;
    }

    .hotspot-label {
        display: inline !important;
        position: static !important;
        transform: none !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        white-space: normal !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    /* PC-/Monitor-Seiten: Rahmen schlank machen */
    .pc-scene {
        min-height: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    .monitor-wrap,
    .monitor-frame,
    .monitor-bezel,
    .monitor-screen {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

    .monitor-stand,
    .monitor-base,
    .window-controls {
        display: none !important;
    }

    .screen-topbar {
        padding: 12px 14px !important;
        display: flex !important;
        justify-content: center !important;
    }

    .screen-title {
        font-size: 12px !important;
    }

    .screen-clock {
        display: none !important;
    }

    .screen-body {
        padding: 14px !important;
    }

    .pc-mini-nav,
    .hero-actions,
    .filters {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
        overflow: visible !important;
    }

    .pc-mini-link,
    .filters .btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 9px 8px !important;
        font-size: 13px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .hero-panel,
    .modules-section {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .hero-card,
    .info-card,
    .module-card,
    .feed-card,
    .panel,
    .card,
    .stat {
        border-radius: 18px !important;
    }

    .hero-card {
        min-height: 0 !important;
        padding: 18px !important;
    }

    .hero-card h1 {
        font-size: 30px !important;
        line-height: 1.05 !important;
    }

    .module-card {
        min-height: 128px !important;
        padding: 16px !important;
    }

    .module-card h3 {
        font-size: 21px !important;
    }

    /* Statistiken: nicht mehr als Endlos-Einzelsäulen */
    .stats,
    .stats-strip,
    .maintenance-summary,
    .parking-box,
    .info-list,
    .summary-grid,
    .kpi-grid,
    .analytics-grid,
    .bank-grid,
    .cards-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        margin-bottom: 14px !important;
    }

    .stat,
    .stat-card,
    .parking-item,
    .info-row,
    .kpi-card,
    .summary-card {
        min-height: 0 !important;
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .stat span,
    .stat-card .label,
    .parking-item span,
    .kpi-card span,
    .summary-card span {
        font-size: 11px !important;
        letter-spacing: .06em !important;
    }

    .stat strong,
    .stat-card .value,
    .parking-item strong,
    .kpi-card strong,
    .summary-card strong {
        font-size: clamp(20px, 6vw, 26px) !important;
        line-height: 1.1 !important;
        word-break: keep-all !important;
    }

    .stat:nth-child(n+7),
    .stats-strip .stat-card:nth-child(n+5) {
        display: none !important;
    }

    .panel-head {
        padding: 14px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .panel-head h2,
    h1 {
        font-size: clamp(26px, 8vw, 36px) !important;
        line-height: 1.08 !important;
    }

    .top {
        padding: 0 14px !important;
        margin: 14px 0 !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .top > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .top .btn,
    .top a.btn {
        width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* Listen/Karten */
    .grid,
    .fleet-grid,
    .screenshot-gallery,
    .candidates-grid,
    .employee-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 10px !important;
    }

    .fleet-card,
    .card {
        width: 100% !important;
        overflow: hidden !important;
    }

    .fleet-thumb,
    .image {
        height: auto !important;
        min-height: 160px !important;
        max-height: 260px !important;
    }

    .fleet-thumb img,
    .image img {
        width: 100% !important;
        height: auto !important;
        max-height: 260px !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .fleet-info,
    .details,
    .detail-grid,
    .form-grid,
    .compact-form.two,
    .compact-form.one,
    .one-line-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .fleet-actions {
        grid-template-columns: 1fr !important;
    }

    details.fold {
        grid-column: auto !important;
    }

    /* Tabellen bleiben bedienbar, ohne Layout zu sprengen */
    table {
        min-width: 720px !important;
        width: 100% !important;
    }

    .table-wrap,
    .statement-table,
    .bank-table,
    .analytics-table,
    .panel:has(table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    th, td {
        font-size: 12px !important;
        padding: 10px 9px !important;
        white-space: nowrap !important;
    }

    /* Europakarte */
    #map,
    .map,
    .leaflet-container {
        width: 100% !important;
        height: min(58vh, 520px) !important;
        min-height: 420px !important;
    }

    .map-shell,
    .map-wrap,
    .map-panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Formularfelder */
    input, select, textarea {
        min-height: 42px !important;
        font-size: 16px !important;
    }
}

@media (max-width: 420px) {
    .fi-status-center,
    .fi-status-right,
    .topbar nav,
    .pc-mini-nav,
    .filters,
    .office-scene,
    .city-scene {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fi-pill,
    .fi-logout,
    .fi-profile-link {
        font-size: 11px !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }

    .office-scene,
    .city-scene {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hotspot {
        min-height: 68px !important;
        font-size: 16px !important;
    }
}

/* FrachtImperium Mobile V3
   Strategie: keine große Kachelwüste auf Büro/Stadt.
   Handy bekommt ein kompaktes Popup-Menü; Bildbereiche bleiben nur noch Atmosphäre. */
@media (max-width: 760px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        background: #05070c !important;
    }

    body {
        padding-bottom: 86px !important;
    }

    /* Alte V1/V2-Kachelmenüs auf Büro/Stadt komplett ausblenden.
       Navigation läuft mobil über das schwebende Menü unten rechts. */
    .fi-mobile-nav,
    .office-mobile-nav,
    .city-mobile-nav,
    .mobile-nav,
    .mobile-quick-nav,
    .mobile-action-grid,
    .mobile-grid-nav {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Desktop-Hotspots auf kleinen Displays aus, damit nichts seitlich verschoben wird. */
    .office-scene .hotspot,
    .city-scene .hotspot,
    .scene-help,
    .scene-vignette {
        display: none !important;
    }

    .game-shell,
    .scene-wrap {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: auto !important;
        overflow: visible !important;
        background: #05070c !important;
    }

    /* Büro/Stadt: nur ein ruhiger Bildkopf, keine riesige Scrollebene. */
    .office-scene,
    .city-scene {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
        display: block !important;
        overflow: hidden !important;
        background-color: #05070c !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-position: center center !important;
    }

    .office-scene::before,
    .city-scene::before {
        content: "" !important;
        display: block !important;
        width: 100% !important;
        height: clamp(150px, 42vw, 230px) !important;
        background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(5,7,12,.95)) !important;
        pointer-events: none !important;
    }

    /* V1 hatte ein ::after als Bildplatzhalter gesetzt. Das führt hier zu doppelten/versetzten Layouts. */
    .office-scene::after,
    .city-scene::after {
        display: none !important;
        content: none !important;
        height: 0 !important;
    }

    /* Mobile Statusbar: keine breite Scroll-Leiste, keine Firmen-/Kapital-Wand. */
    .fi-statusbar {
        width: 100% !important;
        max-width: 100vw !important;
        min-height: 0 !important;
        padding: 10px 10px 12px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        overflow: hidden !important;
    }

    .fi-brand {
        justify-content: center !important;
        width: 100% !important;
        font-size: 20px !important;
    }

    .fi-status-center {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }

    .fi-status-right {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr !important;
        gap: 7px !important;
        width: 100% !important;
        justify-content: stretch !important;
        overflow: hidden !important;
    }

    .fi-status-center .fi-pill:nth-child(n+4),
    .fi-status-center .fi-timer:nth-child(n+4),
    .fi-status-center .fi-no-timer {
        display: none !important;
    }

    .fi-pill,
    .fi-timer,
    .fi-logout,
    .fi-profile-link {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 8px 8px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: 13px !important;
    }

    .fi-profile-link {
        font-size: 20px !important;
    }

    /* Öffentliches Header-Menü: sauber zentriert statt verschoben. */
    .topbar {
        width: 100% !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }

    .topbar nav {
        grid-template-columns: 1fr 1fr !important;
    }

    .topbar nav a.btn,
    .topbar nav .btn.small {
        grid-column: 1 / -1 !important;
    }

    /* Schwebendes Mobile-Menü */
    .fi-mobile-drawer {
        display: block !important;
        position: fixed !important;
        right: 14px !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 99999 !important;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
    }

    .fi-mobile-drawer > summary {
        list-style: none !important;
        cursor: pointer !important;
        min-width: 132px !important;
        min-height: 52px !important;
        padding: 0 18px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #111827 !important;
        background: linear-gradient(180deg, #ffd98a, #f5b84b) !important;
        border: 1px solid rgba(255,217,138,.55) !important;
        box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.12) inset !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        user-select: none !important;
    }

    .fi-mobile-drawer > summary::-webkit-details-marker {
        display: none !important;
    }

    .fi-mobile-drawer[open] > summary {
        background: linear-gradient(180deg, #f8fafc, #dbe4f0) !important;
    }

    .fi-mobile-drawer-panel {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        max-height: min(72vh, 620px) !important;
        overflow-y: auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 9px !important;
        padding: 14px !important;
        border-radius: 22px !important;
        background: rgba(7, 11, 18, .98) !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        box-shadow: 0 24px 80px rgba(0,0,0,.72) !important;
        backdrop-filter: blur(10px) !important;
    }

    .fi-mobile-drawer-panel a {
        min-height: 54px !important;
        padding: 11px 10px !important;
        border-radius: 15px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        color: #f8fafc !important;
        text-decoration: none !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1.15 !important;
        background: rgba(15, 23, 42, .94) !important;
        border: 1px solid rgba(255,255,255,.10) !important;
    }

    .fi-mobile-drawer-panel a.primary {
        color: #111827 !important;
        background: linear-gradient(180deg, #ffd98a, #f5b84b) !important;
        border-color: rgba(255,217,138,.55) !important;
    }

    .fi-mobile-drawer-panel a.danger {
        color: #fecaca !important;
        background: rgba(127,29,29,.50) !important;
        border-color: rgba(239,68,68,.45) !important;
    }

    /* Stat-Blöcke auf Unterseiten nicht mehr als endlose Monsterkarten. */
    .stats,
    .stats-strip,
    .parking-box,
    .maintenance-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .stat,
    .stat-card,
    .parking-item {
        min-height: 0 !important;
        padding: 11px 12px !important;
        border-radius: 14px !important;
    }

    .stat span,
    .stat-card .label,
    .parking-item span {
        font-size: 11px !important;
        margin-bottom: 4px !important;
        letter-spacing: .06em !important;
    }

    .stat strong,
    .stat-card .value,
    .parking-item strong {
        font-size: 20px !important;
        line-height: 1.1 !important;
        word-break: normal !important;
    }

    .stat-card .sub {
        display: none !important;
    }

    /* Karten, die gut funktionieren, behalten wir – nur etwas kompakter. */
    .fleet-card,
    .card,
    .module-card,
    .panel {
        max-width: 100% !important;
    }

    /* Falls ältere mobile.css noch geladen ist, darf sie keine seitlichen Offsets erzwingen. */
    .office-scene > *,
    .city-scene > * {
        max-width: 100% !important;
    }
}

@media (min-width: 761px) {
    .fi-mobile-drawer {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .fi-mobile-drawer-panel {
        grid-template-columns: 1fr !important;
    }

    .fi-status-center,
    .fi-status-right,
    .stats,
    .stats-strip,
    .parking-box,
    .maintenance-summary {
        grid-template-columns: 1fr 1fr !important;
    }
}