body {
    background: #f3efe6;
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 0;
    color: #4b3e2e;
}

.header-container {
    text-align: center;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header-links {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: center;
}

.user-info {
    margin-right: 15px;
    color: #7c5c3e;
}

.login-btn, .logout-btn {
    display: inline-block;
    padding: 6px 12px;
    background-color: #7c5c3e;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
}

.login-btn:hover, .logout-btn:hover {
    background-color: #614730;
}

.logout-btn {
    background-color: #a67c52;
}

.logout-btn:hover {
    background-color: #8c673e;
}

h1 {
    text-align: center;
    margin-top: 30px;
    font-size: 2.5em;
    letter-spacing: 2px;
    color: #7c5c3e;
    text-shadow: 1px 1px 0 #fff;
}

/* Entferne oder kommentiere die alten .buch und .seite Stile aus */
/*
.buch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 40px auto;
    max-width: 1200px;
    gap: 40px;
}

.seite {
    background: #fffbe9;
    border: 2px solid #e2cfa5;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(120, 90, 60, 0.12);
    width: 340px;
    min-height: 420px;
    padding: 28px 24px 18px 24px;
    margin-bottom: 20px;
    position: relative;
    transition: transform 0.15s;
}

.seite:hover {
    transform: scale(1.03) rotate(-1deg);
    box-shadow: 0 8px 32px rgba(120, 90, 60, 0.18);
}

.seite img {
    max-width: 100%;
    max-height: 180px;
    display: block;
    margin: 12px auto 18px auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(120, 90, 60, 0.10);
}

.seite h2 {
    margin-top: 0;
    font-size: 1.4em;
    color: #7c5c3e;
}

.seite h3 {
    margin-bottom: 6px;
    color: #a67c52;
}

.seite p {
    margin: 8px 0;
    line-height: 1.5;
}
*/

/* Neue Stile für das Buch-Layout - Überarbeitet für Zweiseitenansicht */
.book-container {
    width: 1000px; /* Erhöhte Breite für zwei Seiten */
    height: 700px; /* Angepasste Höhe */
    margin: 30px auto; 
    position: relative;
    border: 3px solid #6a4f3a; 
    box-shadow: 0 15px 35px rgba(0,0,0,0.3), inset 0 0 15px rgba(0,0,0,0.1); 
    background: #f0e8d9; 
    border-radius: 5px; 
    perspective: 2500px; /* Erhöhte Perspektive für bessere 3D-Effekte auf breiterem Layout */
    display: flex; /* Um page-spreads zu zentrieren, falls gewünscht, aber primär für innere Struktur relevant*/
    justify-content: center;
    align-items: center;
}

.page-spread {
    display: none; /* Nur der active-spread wird angezeigt */
    width: 100%;
    height: 100%;
    display: flex; /* Linke und rechte Seite nebeneinander */
    position: absolute; /* Spreads überlagern sich, JS steuert Sichtbarkeit */
    top: 0;
    left: 0;
}

.page-spread.active-spread {
    display: flex; /* Aktiven Spread anzeigen */
}

.book-page {
    width: 50%; /* Jede Seite nimmt die Hälfte des Spreads ein */
    height: 100%;
    background: #fffef5; 
    padding: 30px 35px; 
    box-sizing: border-box;
    overflow-y: auto; 
    color: #4b3e2e; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Leichter innerer Schatten für Papiereffekt */
    position: relative; /* Wichtig für z-index und absolute Kindelemente falls nötig */
    /* Entferne alte Transformationen, die für Einzelseitenansicht waren */
    /* transform-origin, transform, backface-visibility werden spezifisch für Animationen gesetzt */ 
    transition: transform 0.8s ease-in-out, opacity 0.6s ease-in-out;
    backface-visibility: hidden; /* Standardmäßig setzen */
}

.left-page {
    border-right: 1px solid #e0d8c8; /* Mittellinie des Buches - rechte Kante der linken Seite */
    transform-origin: right center; /* Linke Seite klappt am rechten Rand */
}

.right-page {
    border-left: 1px solid #e0d8c8; /* Mittellinie des Buches - linke Kante der rechten Seite */
    transform-origin: left center; /* Rechte Seite klappt am linken Rand */
}

/* Styling für Inhalte innerhalb der Seiten bleibt größtenteils wie gehabt */
.book-page h2 {
    margin-top: 0;
    font-size: 1.6em; /* Etwas angepasst für möglicherweise weniger Platz pro Seite */
    color: #7c5c3e;
    border-bottom: 1px solid #e2cfa5;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.book-page p {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 0.95em;
}

.book-page img {
    max-width: 90%; 
    max-height: 200px; /* Etwas reduziert für das Seitenlayout */
    display: block;
    margin: 15px auto; 
    border-radius: 4px; 
    border: 1px solid #e2cfa5;
    box-shadow: 0 2px 8px rgba(120, 90, 60, 0.10);
}

/* Basis für die Klappanimation - wird später im JS getriggert durch Klassen */
.book-page.flipping-out-left {
    transform: rotateY(-180deg);
    opacity: 0.3;
    z-index: 20; /* Muss über der nächsten Seite sein während der Animation */
}

.book-page.flipping-out-right {
    transform: rotateY(180deg);
    opacity: 0.3;
    z-index: 20; /* Muss über der nächsten Seite sein während der Animation */
}

/* Für die einkommenden Seiten (die unter der umblätternden Seite erscheinen) */
/* Diese bleiben vorerst bei transform: rotateY(0deg) und opacity: 1 über die active-spread Klasse */

/* ... restliche CSS ... */

#pageIndicator {
    font-size: 1em;
    color: #7c5c3e;
    margin: 0 15px;
    display: inline-block;
    vertical-align: middle; 
}

/* ... restliche .navigation-controls und andere Stile ... */

.navigation-controls {
    text-align: center;
    margin: 20px auto 40px auto; /* Mehr unterer Abstand */
    max-width: 800px; /* Zentriert unter dem Buch */
}

.navigation-controls button {
    background: #a67c52; /* Dunklere Knöpfe, passend zum Buchrand */
    color: #fff;
    padding: 12px 25px; /* Größere Knöpfe */
    border: none;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    margin: 0 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.navigation-controls button:hover {
    background: #7c5c3e; /* Dunklerer Hover-Effekt */
}

.navigation-controls button:disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

.add-btn, .back-btn, .details-btn, .admin-btn {
    display: inline-block;
    background: #e2cfa5;
    color: #4b3e2e;
    padding: 8px 18px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    margin: 18px 0 12px 0;
    transition: background 0.2s;
}

.add-btn:hover, .back-btn:hover, .details-btn:hover, .admin-btn:hover {
    background: #d1b07a;
}

.admin-btn {
    background: #a67c52;
    color: #fff;
}

.admin-btn:hover {
    background: #7c5c3e;
}

.buch.detail {
    justify-content: center;
    gap: 0;
}

.fehler {
    color: #b94a48;
    background: #fbeee6;
    border: 1px solid #e2cfa5;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: bold;
}

form label {
    display: block;
    margin: 12px 0 6px 0;
    font-weight: bold;
}

form input[type="text"],
form input[type="number"],
form textarea {
    width: 100%;
    padding: 7px;
    border: 1px solid #e2cfa5;
    border-radius: 5px;
    background: #fff;
    font-family: inherit;
    font-size: 1em;
    margin-bottom: 8px;
}

form button[type="submit"] {
    background: #a67c52;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 1.1em;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

form button[type="submit"]:hover {
    background: #7c5c3e;
}

.action-buttons {
    margin-bottom: 20px;
    text-align: right;
}

.edit-btn, .delete-btn {
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    margin-left: 10px;
    cursor: pointer;
}

.edit-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
}

.delete-btn {
    background-color: #f44336;
    color: white;
    border: none;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 16px;
}

.form-group textarea {
    resize: vertical;
}

.submit-btn {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.submit-btn:hover {
    background-color: #45a049;
}

/* Stellen Sie sicher, dass Filterformular gut aussieht */
.filter-form {
    max-width: 800px;
    margin: 20px auto;
    padding: 15px;
    background: #fffbe9;
    border: 1px solid #e2cfa5;
    border-radius: 8px;
    text-align: center;
}

.filter-form label {
    margin-right: 10px;
}

.filter-form select {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #e2cfa5;
    background: #fff;
}

.profile-btn {
    background-color: #3498db;
    color: white;
    padding: 8px 15px;
    border-radius: 4px;
    text-decoration: none;
    margin-right: 10px;
    transition: background-color 0.2s;
}

.profile-btn:hover {
    background-color: #2980b9;
}

.mobile-nav .menu-link.profile {
    background: #3498db;
    color: white;
}

.mobile-nav .menu-link.profile:hover {
    background: #2980b9;
}