/* Grundlegendes Reset und Schriftart */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 2rem;
    color: #1f2937;
    overscroll-behavior-y: none;
}

/* Die Haupt-Karte */
.card {
    max-width: 900px;
    margin: 0 auto;
    background: white;
    border-radius: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 10;
}

/* Optimierung für mobile Geräte */
@media (max-width: 640px) {
    body { padding: 0.5rem; }
    .card { border-radius: 1.5rem; }
    #optionsList div { padding: 1rem; font-size: 1.125rem; }
}

.hidden { display: none !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px; }
::-webkit-scrollbar-thumb { background: #c084fc; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #9333ea; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.3); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.5); }

/* === MOBILE APP MODE (Strict Sandwich Layout) === */
@media (max-width: 767px) {
    /* 1. Viewport: 100dvh ist der Schlüssel für Mobile Browser! */
    html, body {
        height: 100dvh; /* Dynamic Height: Reagiert auf Adressleiste */
        width: 100%;
        overflow: hidden;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 2. Karte als Flex-Container */
    .card {
        height: 100dvh; /* Auch hier Dynamic Height */
        max-height: 100dvh !important;
        border-radius: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
    }

    /* 3. Struktur-Klassen */
    
    /* Der Wrapper für jede View (Sandwich) 
       ÄNDERUNG: flex: 1 statt height: 100%, damit Platz für AppFooter bleibt */
    .mobile-sandwich {
        display: flex;
        flex-direction: column;
        flex: 1;        /* Nimmt den verfügbaren Platz */
        min-height: 0;  /* Verhindert Overflow-Probleme */
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Header & Footer Container */
    .mobile-shrink {
        flex-shrink: 0;
        z-index: 30;
        background: white;
        width: 100%;
        position: relative;
        /* ÄNDERUNG: Safe Area für iPhone X+ (Home Balken unten) */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .mobile-header-shadow {
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.15);
        border-bottom: 1px solid rgba(0,0,0,0.05);
    }

    .mobile-footer-shadow {
        box-shadow: 0 -4px 12px -2px rgba(0, 0, 0, 0.15);
        border-top: 1px solid rgba(0,0,0,0.05);
    }

    /* Der Content: Scrollt IN SICH */
    .mobile-scroll {
        flex-grow: 1;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        padding: 1rem;
        padding-bottom: 2rem; 
    }
}