html {
    font-family: Inter, Arial, sans-serif;
}

:root {
    color-scheme: only light;
}

body {
    margin: 0;
    padding: 0;
    font-family: inherit;
    background: #f8fafc;
    color: #0f172a;
}

/* ========================================
   FOOTER
======================================== */

.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 24px;
    font-size: 13px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
}

.footer-left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.footer-left .version {
    opacity: 0.7;
}

.footer-right {
    display: flex;
    gap: 18px;
}

.footer-right a {
    color: #6b7280;
    text-decoration: none;
}

.footer-right a:hover {
    color: #111827;
}

@media (max-width: 768px) {
    .app-footer {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .footer-right {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

/* ========================================
   iOS APP SAFE AREA + STICKY HEADER FIX
======================================== */

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    min-height: 100dvh;
    overflow-x: hidden;
}

body:has(.app-layout) {
    height: 100%;
    overflow: hidden;
}

.app-layout {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
}

.app-main {
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.app-mobilebar {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding-top: env(safe-area-inset-top);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-content {
    overflow: visible;
    min-height: auto;
    padding-bottom: 24px;
}

.app-footer {
    position: static !important;
    flex: none !important;
    margin-top: 40px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* Nur native iOS App */
html.is-ios-app .app-mobilebar {
    padding-top: env(safe-area-inset-top);
}

html.is-ios-app .app-footer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
}

/* Mobile Sidebar */
@media (max-width: 900px) {
    .app-sidebar {
        z-index: 1200;
        height: 100dvh;
        padding-top: env(safe-area-inset-top);
    }

    .app-overlay {
        z-index: 1100;
    }
}

.app-mobilebar {
    position: sticky;
    top: 0;
    z-index: 1000;

    min-height: 72px;
    box-sizing: border-box;

    padding-top: env(safe-area-inset-top);
    padding-bottom: 12px;

    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ========================================
   iOS APP PAGE TRANSITION - DEAKTIVIERT
   Wichtig: kein transform auf .app-content
======================================== */

html.is-ios-app .app-content {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

html.is-ios-app.is-page-leaving .app-content {
    opacity: 1 !important;
    transform: none !important;
}


/* ========================================
   iOS APP MODAL FIX
======================================== */

html.is-ios-app body.modal-open,
html.is-ios-app body.has-modal,
html.is-ios-app body.is-modal-open {
    overflow: hidden !important;
    position: static !important;
    height: 100% !important;
}

/* Häufige Modal-Wrapper */
html.is-ios-app .modal,
html.is-ios-app .app-modal,
html.is-ios-app .dialog,
html.is-ios-app .popup,
html.is-ios-app .modal-backdrop,
html.is-ios-app .popup-backdrop {
    position: fixed !important;
}

/* Backdrop sauber über App, aber unter Dialog */
html.is-ios-app .modal-backdrop,
html.is-ios-app .popup-backdrop,
html.is-ios-app .app-modal-backdrop {
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 5000 !important;
}

/* Dialog immer über Header/Sidebar */
html.is-ios-app .modal,
html.is-ios-app .app-modal,
html.is-ios-app .dialog,
html.is-ios-app .popup {
    inset: 0 !important;
    z-index: 5010 !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
}

/* Falls dein Modal einen inneren Dialog hat */
html.is-ios-app .modal-dialog,
html.is-ios-app .app-modal-dialog,
html.is-ios-app .popup-dialog,
html.is-ios-app .dialog-box {
    position: relative !important;
    z-index: 5020 !important;
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Weißen Vollflächen-Bug verhindern */
html.is-ios-app .app-content,
html.is-ios-app .app-main,
html.is-ios-app .app-layout {
    background: #f8fafc;
}

/* ========================================
   iOS APP FU-MODAL FIX
======================================== */

html.is-ios-app .fu-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    z-index: 999999 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)) 14px !important;
    box-sizing: border-box !important;

    background: rgba(15, 23, 42, 0.62) !important;
}

html.is-ios-app .fu-modal.hidden {
    display: none !important;
}

html.is-ios-app .fu-modal-content-iframe {
    position: relative !important;
    width: min(560px, 100%) !important;
    height: min(620px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px)) !important;

    background: #fff !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    z-index: 1000000 !important;

    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.30) !important;
}

html.is-ios-app #resultPageFrame {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 420px !important;
    border: 0 !important;
    background: #fff !important;
}

html.is-ios-app .fu-modal-close-x {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 1000001 !important;
}


/* Modal darf niemals vom Page-Fade ausgeblendet werden */
html.is-ios-app body.modal-open .app-content {
    opacity: 1 !important;
    transform: none !important;
}