/* Responsive Styles für Familien Rezeptbuch */

/* Basis Responsive-Styles */
* {
    box-sizing: border-box;
}

/* Viewport Meta-Tag muss im HTML-Header ergänzt werden */

/* Allgemeine Anpassungen */
body {
    min-width: 320px;
}

img {
    max-width: 100%;
    height: auto;
}

/* Responsive-Layout für verschiedene Bildschirmgrößen */

/* Große Tablets und kleine Desktops (bis 1024px) */
@media screen and (max-width: 1024px) {
    .book-container {
        width: 90%;
        max-width: 800px;
        height: 600px;
    }
    
    .header-container, .admin-container {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }
    
    .buch.detail {
        width: 90%;
        max-width: 800px;
    }
}

/* Tablets (bis 768px) */
@media screen and (max-width: 768px) {
    .book-container {
        height: 500px;
    }
    
    .book-page {
        padding: 20px;
    }
    
    .book-page h2 {
        font-size: 1.4em;
    }
    
    .book-page p {
        font-size: 0.9em;
    }
    
    /* Header und Navigationsanpassungen */
    .header-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Admin-Bereich anpassen */
    .nav-menu a {
        padding: 10px 12px;
    }
    
    /* Tabellendarstellung im Admin-Bereich */
    .rezepte-tabelle th, .rezepte-tabelle td {
        padding: 8px;
    }
    
    /* Druckversion anpassen */
    .zutaten-block {
        padding: 10px;
    }
}

/* Smartphones Landscape (bis 640px) */
@media screen and (max-width: 640px) {
    /* Buchansicht ausblenden und durch Liste ersetzen */
    .book-container {
        height: auto;
        border: none;
        box-shadow: none;
        background: transparent;
        perspective: none;
        display: block;
    }
    
    .page-spread {
        display: block !important;
        position: relative;
        margin-bottom: 20px;
    }
    
    .book-page {
        width: 100%;
        height: auto;
        min-height: 200px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        border: 1px solid #e2cfa5;
        border-radius: 8px;
    }
    
    .right-page, .left-page {
        border: none;
    }
    
    /* Navigation anpassen */
    .navigation-controls {
        display: none;
    }
    
    /* Header vereinfachen */
    .header-links {
        gap: 8px;
    }
    
    .add-btn, .back-btn, .details-btn, .admin-btn {
        font-size: 0.9em;
        padding: 6px 10px;
    }
    
    /* Admin-Navigation optimieren */
    .nav-menu {
        display: flex;
        flex-direction: column;
    }
    
    .nav-menu a {
        float: none;
        width: 100%;
        text-align: left;
    }
    
    .nav-menu .logout {
        float: none;
        margin-top: 10px;
    }
    
    /* Tabellendarstellung anpassen */
    .rezepte-tabelle {
        font-size: 0.9em;
    }
    
    .rezepte-tabelle th, .rezepte-tabelle td {
        padding: 6px 4px;
    }
    
    /* Aktionsbuttons */
    .action-btns {
        flex-direction: column;
        gap: 5px;
    }
    
    .btn {
        width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    
    /* Filter-Bereich optimieren */
    .filter-bar {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Smartphones Portrait (bis 480px) */
@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 1.8em;
    }
    
    .header-container {
        margin-top: 15px;
    }
    
    /* Rezeptdetailansicht */
    .buch.detail {
        padding: 15px;
    }
    
    .buch.detail .seite {
        padding: 10px;
    }
    
    /* Formulare anpassen */
    form input[type="text"],
    form input[type="password"],
    form input[type="email"],
    form input[type="number"],
    form select,
    form textarea {
        padding: 8px;
        font-size: 1em;
    }
    
    /* Admin-Tabellen für kleine Bildschirme optimieren */
    table {
        display: block;
        overflow-x: auto;
    }
    
    .rezepte-tabelle th:nth-child(1), 
    .rezepte-tabelle td:nth-child(1) {
        display: none; /* ID ausblenden */
    }
}

/* Spezielle Anpassung für die Druckversion */
@media screen and (max-width: 640px) {
    .zutaten-liste ul {
        padding-left: 10px;
    }
    
    .zubereitung ol {
        padding-left: 15px;
    }
}