/* Die Klasse, die per JS hinzugefügt wird */
        .highlight-target {
            animation: highlight-pulse 2.5s ease-out forwards !important;
            border-radius: 4px;
            transition: all 0.5s;
        }

        /* Styling für den Direktlink "→" */
        .direct-post-link {
            float: right;
            font-size: 1.5em;
            text-decoration: none;
            padding: 0.1em 25px;
        }

        .direct-post-link:hover {
            text-decoration: none;
        }

        /* Styling für die Themenfilter-Buttons */
        .theme-filter-button {
            background-color: var(--color-bg-secondary);
            color: var(--color-text);
            border: 1px solid var(--color-border);
            padding: 8px 15px;
            margin-right: 8px;
            margin-bottom: 8px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }

        .theme-filter-button:hover,
        .theme-filter-button.active { /* 'active' Klasse für später, wenn Filter aktiv ist */
            background-color: var(--color-primary);
            color: var(--color-bg);
            border-color: var(--color-primary);
        }

        #theme-filters h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: var(--color-heading);
        }

        /* Styling für die einzelnen Themen-Filter-Buttons */
        .theme-filter-button {
            background-color: var(--color-background-light); /* Leichterer Hintergrund für Buttons */
            color: var(--color-text-dark);
            border: 1px solid var(--color-border);
            padding: 6px 12px;
            margin: 5px; /* Abstand zwischen den Buttons */
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 0.9em;
            display: inline-block; /* Für nebeneinanderliegende Buttons */
        }

        .theme-filter-button:hover {
            background-color: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-text-light);
        }

        .theme-filter-button.active {
            background-color: var(--color-accent);
            border-color: var(--color-accent);
            color: var(--color-text-light); /* Kontrastfarbe für aktive Buttons */
            font-weight: bold;
        }

        .post-tags {
            float: right;
        }
/*
        .post-date {

        }
*/
        .meta {
            margin-bottom: 1.5em;
        }

        .post-excerpt {
            font-style: italic;
        }



        /* NEUES STYLING - NEUE INSTANZ*/

        /* Grundlegende Post Card Stile */
.post-card {
    border: 1px solid #eee;
    margin-bottom: 1em;
    padding: 1em;
    border-radius: 5px;
    background: var(--color-bg-light);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    /* Transition für das Hervorheben beim Magic Jump */
    transition: background-color 0.3s ease-in-out;
}

/* Cursor für klickbare Elemente in der Post-Card */
.post-card .post-header,
.post-card .excerpt,
.post-card .hashtags {
    cursor: pointer;
}

/* Vollständiger Inhaltsbereich, standardmäßig versteckt und mit Transition */
.full-content-area {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Sanftes Zusammenklappen */
    padding-top: 1em;
/*    color: transparent; */
    color: var(--color-text);    
}

/* Wenn die Post-Card expandiert ist */
.post-card.is-expanded .full-content-area {
    max-height: 2000px; /* Ein ausreichend großer Wert für den Inhalt */
    transition: max-height 0.5s ease-in; /* Etwas langsameres Expandieren */
    padding-top: 1em; /* Padding hinzufügen, wenn sichtbar */
/*    color: var(--color-text); */
}

/* Texte der content Area */
.post-card.is-expanded .full-content-area p,
.full-content-area p {
    text-indent: 2em;
}

/* Filter-Button Stile */
.filter-button {
    padding: 0.5em 1em;
    margin: 0 0.5em 0.5em 0;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
    border-radius: 3px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.filter-button:hover {
    background-color: #e0e0e0;
}

.filter-button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

/* Filter-Container umschalten */
#theme-filters.is-hidden {
    display: none;
}

/* Scroll-to-Top Button */
#scrollToTopBtn {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 18px;
    opacity: 0; /* Für die Transition */
    transition: opacity 0.3s ease-in-out;
}

#scrollToTopBtn.show {
    display: block;
    opacity: 1;
}

/* Magic Jump Hervorhebung */
@keyframes highlight-fade {
    0% { background-color: yellow; box-shadow: 0 0 15px yellow; }
    50% { background-color: rgba(255, 255, 0, 0.5); }
    100% { background-color: transparent; box-shadow: none; }
}

.post-card.highlight-target {
    animation: highlight-fade 3s ease-out forwards;
}

.no-posts-found {
    text-align: center;
    color: #888;
    margin-top: 2em;
}

.error {
    color: red;
    font-weight: bold;
}