:root {
    --bg-page: #f4f4f7;
    --bg-content: #ffffff;
    --primary: #122c42;
    --nav-bg: #1b3e5b;
    --nav-hover: #29597a;
    --header-bg: #0f2537;
}

body {
    margin: 0; font-family: "Cambria", serif; background: var(--bg-page);
}

#page-container {
    max-width: 1100px; margin: 30px auto; background: var(--bg-content);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); display: flex; flex-direction: column;
}

/* LOGO WEISS */
#kopf {
    height: 140px; padding: 0 40px; background-color: var(--header-bg);
    background-image: linear-gradient(rgba(15,37,55,0.3), rgba(15,37,55,0.5)), url("images/kopfbild.png");
    background-size: cover; display: flex; align-items: center; justify-content: space-between; color: #fff;
}
#logo {
    height: 110px;
    filter: invert(100%) brightness(200%); /* Macht das graue Logo rein weiß */
}

/* NAVIGATION */
#navigation { background: var(--nav-bg); }
#navigation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-end; }
#navigation a { display: block; padding: 15px 25px; color: #fff; text-decoration: none; font-weight: bold; }
#navigation a:hover, #navigation a.active { background: var(--nav-hover); }

/* CONTENT GRID */
#content-grid { display: grid; grid-template-columns: 1fr 300px; gap: 40px; padding: 40px; }

#kontakt-aside {
    background: #f9f9fb; padding: 20px; border: 1px solid #ddd; border-radius: 8px; text-align: center; height: fit-content;
}
#bild-heidi { width: 100%; border: 4px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.1); margin-bottom: 15px; }

/* BUCH BOXEN (ABWECHSELND) */
.buch-box { display: flex; gap: 30px; margin-bottom: 50px; align-items: flex-start; }
.buch-box.alt { flex-direction: row-reverse; text-align: right; }
.buch-box img { width: 200px; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.price { font-weight: bold; color: var(--primary); }

/* GALERIE */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; margin: 20px 0; }
.thumb img { width: 100%; height: 130px; object-fit: cover; border-radius: 4px; transition: transform 0.2s; border: 1px solid #ddd; }
.thumb:hover img { transform: scale(1.05); }

/* LIGHTBOX DESIGN */
.lightbox {
    position: fixed; inset: 0; background: rgba(255, 255, 255, 0.95);
    z-index: 2000; display: none; align-items: center; justify-content: center; padding: 40px;
}
.lightbox:target { display: flex; }
.lightbox img {
    max-width: 90%; max-height: 85vh; border-radius: 4px;
    box-shadow: 0 10px 50px rgba(0,0,0,0.25); border: 1px solid #ccc;
}
.lightbox .close {
    position: absolute; top: 20px; right: 40px; font-size: 60px;
    color: #333; text-decoration: none; font-weight: 200;
}

/* FOOTER */
#footer { background: var(--primary); color: #fff; padding: 20px; text-align: center; }
#footer a { color: #fff; text-decoration: none; }

@media (max-width: 900px) {
    #content-grid { grid-template-columns: 1fr; }
    .buch-box, .buch-box.alt { flex-direction: column; text-align: left; }
    .buch-box img { width: 100%; max-width: 300px; }
}