/* ============================================
   MOBILE.CSS - Responsive Styles
   Betrifft NUR Bildschirme < 768px
   Desktop bleibt komplett unberührt!
   ============================================ */

@media (max-width: 768px) {
    
    /* === ALLGEMEIN === */
    body {
        font-size: 14px;
    }
    
    /* === LAYER 0: STARTBILD === */
    
    /* Bild füllt ganzen Screen */
    .compost-start {
        width: 100vw;
        height: 100vh;
    }
    
    .compost-photo {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }
    
    /* Kugel kleiner auf Mobile */
    .black-orb {
        width: 80px;
        height: 80px;
    }
    
    .book-reveal {
        width: 140px;
        height: 180px;
    }
    
    .book-reveal .book-icon {
        font-size: 60px;
    }
    
    /* === LAYER 1: KAPITEL === */
    .toc-container {
        padding: 10px;
    }
    
    .toc-header h1 {
        font-size: 1.5em;
    }
    
    .toc-header h2 {
        font-size: 1em;
    }
    
    .part-title {
        font-size: 1.1em;
        padding: 10px;
    }
    
    .chapter-item {
        padding: 8px 10px;
        font-size: 0.9em;
    }
    
    .chapter-words {
        display: none; /* Wort-Anzahl verstecken auf Mobile */
    }
    
    /* Reading View */
    .reading-container {
        padding: 15px;
    }
    
    #chapter-title {
        font-size: 1.3em;
    }
    
    #chapter-content {
        font-size: 1em;
        line-height: 1.6;
    }
    
    .reading-nav {
        flex-direction: column;
        gap: 10px;
    }
    
    .reading-nav button {
        width: 100%;
        padding: 12px;
    }
    
    /* === LAYER 2: BIO-PARAMETER === */
    #layer2 {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .split-container {
        flex-direction: column;
        padding: 10px;
        gap: 15px;
        height: auto;
        min-height: 100vh;
    }
    
    .split-left,
    .split-middle,
    .split-right {
        width: 100%;
        max-height: none;
        padding: 15px;
    }
    
    .split-left {
        max-height: 200px;
        overflow-y: auto;
    }
    
    .split-right {
        min-height: 200px;
        margin-bottom: 80px; /* Platz für Bakterium-Button */
    }
    
    .param-control {
        margin-bottom: 12px;
    }
    
    .param-control label {
        font-size: 0.9em;
    }
    
    .btn-generate,
    .btn-humus {
        width: 100%;
        padding: 12px;
        font-size: 1em;
    }
    
    #generated-text {
        min-height: 150px;
        font-size: 0.95em;
    }
    
    /* === LAYER 3: KI === */
    .ki-container {
        padding: 10px;
        transform: none; /* Kein Zoom auf Mobile */
    }
    
    .ki-box {
        width: 95%;
        padding: 15px;
        margin: 10px 0;
    }
    
    .ki-box h3 {
        font-size: 1.1em;
    }
    
    #ki-input-text {
        height: 120px;
        font-size: 0.95em;
    }
    
    .param-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .param-row label {
        min-width: auto;
    }
    
    .param-row select,
    .param-row input[type="range"] {
        width: 100%;
    }
    
    .btn-ferment {
        padding: 12px 20px;
        font-size: 1em;
    }
    
    .output-text {
        min-height: 150px;
        max-height: 300px;
        font-size: 0.95em;
    }
    
    /* === LAYER 4: HUMUS === */
    .humus-fullscreen {
        padding: 10px;
    }
    
    .btn-export-float {
        bottom: 20px;
        right: 20px;
        padding: 10px 15px;
        font-size: 0.9em;
    }
    
    /* === NAVIGATION BUTTONS === */
    .btn-nav {
        width: 45px;
        height: 45px;
        font-size: 1.3em;
    }
    
    /* === BANDCAMP PLAYER === */
    .bandcamp-container {
        width: 90%;
        padding: 15px;
        bottom: 80px;
    }
    
    .bandcamp-container select {
        font-size: 14px;
    }
    
    /* === SWIPE HINT === */
    .swipe-hint {
        display: block;
        position: fixed;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: #888;
        padding: 8px 15px;
        border-radius: 20px;
        font-size: 0.8em;
        z-index: 1000;
        pointer-events: none;
    }
}

/* Swipe Hint nur auf Mobile zeigen */
.swipe-hint {
    display: none;
}

/* ALTE Navigation Buttons - VERSTECKT (ersetzt durch Bakterium) */
.btn-nav {
    display: none !important;
}

/* Touch-Feedback */
@media (hover: none) and (pointer: coarse) {
    .black-orb:active,
    .book-reveal:active,
    #generated-text:active,
    .ki-box:active {
        transform: scale(0.98);
        transition: transform 0.1s;
    }
}

/* === ALTE NAVIGATION BUTTONS - ENTFERNT ===
   Navigation erfolgt jetzt über Rand-Klick (Desktop) 
   und Bakterium-Button (Mobile)
*/

@keyframes pulse-forward {
    0%, 100% { box-shadow: 0 0 5px rgba(46, 204, 113, 0.3); }
    50% { box-shadow: 0 0 15px rgba(46, 204, 113, 0.6); }
}