/* ================================================= */
/* STILE FÜR EINZELNE BLOG-ARTIKEL        */
/* ================================================= */

.post-detail {
    /* Braucht Platz nach oben wegen des fixierten Headers */
    padding-top: 15rem; 
    padding-bottom: 10rem;
    background: var(--bg-color);
}

.post-container {
    /* Limitiert die Breite, damit Text gut lesbar ist */
    max-width: 90rem; 
    margin: 0 auto; /* Zentriert den Container */
    padding: 0 4%; /* Etwas Abstand an den Seiten bei schmalen Bildschirmen */
}

/* 1. Der Titel */
.post-container h1 {
    font-size: 4.8rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

/* 2. Metadaten (Autor, Datum) */
.post-meta {
    font-size: 1.6rem;
    color: var(--second-bg-color); /* Nutzt dein Grau */
    font-weight: 500;
    margin-bottom: 3rem;
    display: flex;
    gap: 1.5rem; /* Abstand zwischen Autor und Datum */
}

.post-meta span {
    color: var(--main-color); /* Nutzt deine Hauptfarbe */
}

/* 3. Das Hauptbild */
.post-image {
    width: 100%;
    margin-bottom: 4rem;
}

.post-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: .8rem; /* Passt zu deinem Stil */
    box-shadow: 0 .4rem .8rem rgba(0, 0, 0, 0.1);
}

.post-content p {
    font-size: 1.8rem; /* Etwas größer für bessere Lesbarkeit */
    line-height: 1.7; /* Zeilenabstand ist super wichtig */
    color: var(--text-color);
    margin-bottom: 2.5rem;
}

.post-content h2,
.post-content h3 {
    font-weight: 700;
    color: var(--text-color);
    margin-top: 5rem; /* Viel Abstand nach oben */
    margin-bottom: 2rem; /* Weniger Abstand nach unten */
}

.post-content h2 {
    font-size: 3.2rem;
}

.post-content h3 {
    font-size: 2.6rem;
}

.post-content ul,
.post-content ol {
    font-size: 1.8rem;
    line-height: 1.7;
    margin-left: 3rem;
    margin-bottom: 2.5rem;
}

.post-content li {
    margin-bottom: 1rem;
}

.post-content blockquote {
    font-size: 2rem;
    font-style: italic;
    color: var(--second-bg-color);
    border-left: .4rem solid var(--main-color); /* Zitat-Strich */
    padding-left: 3rem;
    margin: 3rem 0;
    margin-left: 2rem;
}

/* 5. Der "Zurück"-Button */
.post-container .btn {
    /* Wiederverwendung deines .btn-Stils */
    margin-top: 4rem;
    width: 22rem; /* Etwas breiter für "Zurück zur Übersicht" */

    /* Die Stile sind schon in deiner general_settings.css,
       aber hier sind sie zur Sicherheit nochmal, 
       falls du sie nicht global hast.
    */
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 4.5rem;
    background: transparent;
    border: .2rem solid var(--main-color);
    border-radius: .8rem;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .1rem;
    color: var(--main-color);
    z-index: 1;
    overflow: hidden;
    transition: .5s;
}

.post-container .btn:hover {
    color: var(--bg-color);
}

.post-container .btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: var(--main-color);
    z-index: -1;
    transition: .5s;
}

.post-container .btn:hover::before {
    width: 100%;
}