:root {
    --peach: #FFDAB9;
    --mandarin-light: #FFCC99;
    --mandarin-dark: #F4A460;
    --accent-orange: #FF8C00;
    --deep-brown: #4A2C2A;
    --soft-white: #FFF5EE;
    --twilight-blue: #b3d9ff; /* Ein sanftes Hellblau (Trans-Flagge) */
    --soft-pink: #fbcfe8;     /* Ein zartes Rosa (Trans-Flagge) */
    --deep-night: #2e1065;    /* Ein tiefes Violett/Dunkelblau für den Footer */
    --overlay-bg: rgba(74, 44, 42, 0.96);
}

/* GRUNDGERÜST */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--peach);
    color: var(--deep-brown);
    overflow-x: hidden;
    /* Das hier fehlt für den Einrast-Effekt: */
    scroll-snap-type: y mandatory;
}



h1, h2, h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    margin: 0;
}

section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 80px 10%;
    box-sizing: border-box;
    scroll-snap-align: start;
}

/* FARBVERLÄUFE DER KARTEN */
#start           { background: linear-gradient(180deg, var(--soft-white) 0%, var(--peach) 50%); }
#ueber-mich      { background: linear-gradient(180deg, var(--peach) 50%, var(--peach) 100%); }
#aktuelles-werk  { background: linear-gradient(180deg, var(--peach) 0%, var(--mandarin-light) 100%); }
#werke-regal     { background: linear-gradient(180deg, var(--mandarin-light) 0%, var(--mandarin-dark) 100%); }
#kontakt         { background: linear-gradient(180deg, var(--mandarin-dark) 0%, var(--accent-orange) 100%);}
footer, #footer-area { 
    background: linear-gradient(180deg, var(--accent-orange) 0%, var(--twilight-blue) 50%, var(--soft-pink) 100%);
    color: var(--deep-night); /* Dunkle Schrift für gute Lesbarkeit auf Pastell */
}

.content-box {
    opacity: 0;
    transform: translateY(40px);
    z-index: 10;
    width: 100%;
    max-width: 1100px;
}

/* ZWEI-SPALTEN-LAYOUTS (BIO & FEATURED) */
.split-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
    text-align: left;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 2/3;
    background-color: var(--accent-orange);
    border-radius: 15px;
    box-shadow: 20px 20px 40px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    font-family: 'Playfair Display', serif;
}

/* BÜCHERREGAL MIT GENRES */
.genre-section {
    width: 100%;
    margin-bottom: 50px;
    text-align: left;
}

.genre-title {
    font-size: 1.8rem;
    border-bottom: 2px solid var(--deep-brown);
    margin-bottom: 25px;
    padding-bottom: 5px;
}

.bookshelf {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.book-item {
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 140px;
}

.book-item:hover { transform: translateY(-15px) scale(1.05); }

.cover-small {
    width: 140px;
    height: 210px;
    background-color: var(--accent-orange); /* Fallback, falls Bild lädt */
    border-radius: 2px 8px 8px 2px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
    
    position: relative; /* Wichtig für die Positionierung von Text & Bild */
    overflow: hidden;   /* Schneidet alles ab, was übersteht */
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Das Bild füllt die Karte komplett aus */
.cover-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

/* Der Hover-Effekt: Bild zoomt leicht */
.cover-small:hover img {
    transform: scale(1.1);
}

/* Der "Schatten" für die Lesbarkeit */
.cover-small::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Verlauf von Transparent (oben) zu Dunkel (unten) */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(46, 16, 101, 0.8) 100%);
    z-index: 1;
    pointer-events: none;
}

/* Der Text über dem Bild */
.cover-small span {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 10px; /* Platz zum Atmen */
    box-sizing: border-box;
    
    color: white;
    font-family: 'Playfair Display', serif;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.3;
    z-index: 2; /* Liegt über dem Schatten */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Kleine Kontur für extra Lesbarkeit */
}

/* OVERLAY / MODAL */
.overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: var(--overlay-bg); 
    display: none; 
    z-index: 2000;
    justify-content: center; 
    align-items: center;
    backdrop-filter: blur(8px); /* Sanfter Unschärfe-Effekt im Hintergrund */
}

.overlay-content { 
    background: var(--soft-white); 
    width: 90%; 
    max-width: 900px; 
    max-height: 90vh; /* Verhindert, dass das Modal zu hoch wird */
    overflow-y: auto; /* Scrollbar, falls der Text am Handy zu lang ist */
    padding: 50px; 
    border-radius: 20px; 
    position: relative; 
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}

.overlay-grid { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 40px; 
    text-align: left; 
    align-items: start;
}

/* Der Container für das Cover im Modal */
.modal-cover-large { 
    width: 100%; 
    aspect-ratio: 2/3; 
    background-color: var(--accent-orange); 
    border-radius: 10px; 
    box-shadow: 10px 10px 30px rgba(0,0,0,0.2);
    overflow: hidden; /* Wichtig für das Bild */
}

#modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.close-btn { 
    position: absolute; 
    top: 20px; 
    right: 25px; 
    font-size: 35px; 
    cursor: pointer; 
    color: var(--deep-brown); 
    line-height: 1;
    z-index: 10;
}

/* Spezieller Button für das Modal mit Pride-Glow */
.modal-text .btn {
    background: var(--deep-brown);
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.modal-text .btn:hover {
    transform: scale(1.05);
    /* Ein dezenter Pride-Glow beim Hovern */
    box-shadow: 0 0 20px var(--twilight-blue), 0 0 40px var(--soft-pink);
}

/* Mobile Anpassung für das Modal */
@media (max-width: 768px) {
    .overlay-grid { 
        grid-template-columns: 1fr; 
        gap: 20px; 
    }
    .overlay-content {
        padding: 30px;
        width: 95%;
    }
    .modal-cover-large {
        max-width: 200px;
        margin: 0 auto;
    }
    .modal-text {
        text-align: center;
    }
}

.btn {

    display: inline-block;

    padding: 12px 30px;

    background: var(--deep-brown);

    color: white;

    text-decoration: none;

    border-radius: 50px;

    margin-top: 20px;

    font-weight: 600;

    transition: opacity 0.3s;

}

/* SOCIAL MEDIA BUTTONS */
.social-links a {
    display: inline-block; 
    margin: 15px; 
    padding: 15px 35px; 
    border: 2px solid var(--deep-brown);
    text-decoration: none; 
    color: var(--deep-brown); 
    font-weight: 600; 
    border-radius: 100px; 
    transition: all 0.3s;
}

.social-links a:hover { 
    background-color: var(--deep-brown); 
    color: white; 
    transform: translateY(-3px); /* Kleiner Hüpfer beim Hovern */
    box-shadow: 0 5px 15px rgba(74, 44, 42, 0.2);
}

/* Fact Grid Layout */
.fact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.fact-card {
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.fact-card:hover {
    transform: translateY(-5px);
}

.fact-card h4 {
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #333;
}

.fact-card p {
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Pride Colors für die Kacheln */
.trans-blue { background-color: #e0f2fe; border-left: 5px solid #7dd3fc; } /* Hellblau */
.trans-pink { background-color: #fdf2f8; border-left: 5px solid #f9a8d4; } /* Rosa */
.trans-white { background-color: #ffffff; border-left: 5px solid #e5e7eb; } /* Weiß */

/* FOOTER STYLE */
#footer-area {
    background: var(--deep-brown); /* Dunkler Abschluss */
    color: var(--peach); /* Helle Schrift auf dunklem Grund */
    min-height: 50vh; /* Darf kleiner sein als die anderen Sections */
    text-align: center;
}

.legal-links a {
    color: var(--mandarin-light);
    text-decoration: none;
    border-bottom: 1px dotted var(--mandarin-light);
    transition: color 0.3s;
}

.legal-links a:hover {
    color: white;
    border-bottom: 1px solid white;
}

/* LEGAL OVERLAY ANPASSUNGEN */
.legal-content-box {
    background: var(--soft-white);
    width: 90%;
    max-width: 800px;
    height: 80vh; /* Feste Höhe */
    padding: 60px 40px; /* Mehr Platz innen */
    border-radius: 10px;
    position: relative;
    overflow-y: auto; /* WICHTIG: Damit man scrollen kann */
    color: #333;
    line-height: 1.6;
}

.legal-content-box h2 {
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
    color: var(--deep-brown);
}

.legal-content-box h3 {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

/* Scrollbar hübsch machen (optional) */
.legal-content-box::-webkit-scrollbar {
    width: 8px;
}
.legal-content-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}
.legal-content-box::-webkit-scrollbar-thumb {
    background: var(--mandarin-dark);
    border-radius: 4px;
}


/* Damit das Bild mitscrollen kann, muss der Container oben bündig sein */
#ueber-mich .split-grid {
    align-items: start; 
}

/* Das Bild in der Start-Sektion wird sticky */
#ueber-mich .image-placeholder {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 120px; /* Abstand von oben */
    align-self: start; /* Sicherheitshalber */
    z-index: 5;
}

/* 3. MOBILE ANPASSUNGEN */
@media (max-width: 768px) {
    .split-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .image-placeholder, 
    #ueber-mich  .image-placeholder { /* Auch die Spezial-Regel überschreiben */
        max-width: 250px;
        margin: 0 auto;
        position: static; /* Sticky auf dem Handy deaktivieren */
    }
}