/* ==========================================================================
   Blog - öffentlicher Bereich (Übersicht + Detail)
   Eigene, in sich gekapselte Datei (kein globales Overriding) - wird nur
   von Views/Blog/Index.cshtml und Views/Blog/Details.cshtml geladen.
   ========================================================================== */

:root {
    --blog-accent: #B775FF;
    --blog-accent-soft: rgba(183, 117, 255, 0.12);
    --blog-border: rgba(183, 117, 255, 0.18);
    --blog-border-strong: rgba(183, 117, 255, 0.5);
    --blog-text: rgba(255, 255, 255, 0.82);
    --blog-text-dim: rgba(255, 255, 255, 0.55);
    --blog-text-faint: rgba(255, 255, 255, 0.4);
}

/* ---------- Fade-in (respektiert prefers-reduced-motion) ---------- */
.blog-fade-item {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.blog-fade-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .blog-fade-item {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================== HERO ============================== */
#blog-overview .blog-hero {
    text-align: center;
    margin-bottom: 40px;
}

#blog-overview .blog-hero h1 {
    margin-bottom: 14px;
}

#blog-overview .blog-hero-stats {
    color: var(--blog-text-dim);
    font-size: 14.5px;
    letter-spacing: 0.02em;
}

#blog-overview .blog-hero-stats .dot {
    color: var(--blog-accent);
    margin: 0 8px;
}

/* ============================== SEARCH ============================== */
#blog-overview .blog-search-wrap {
    max-width: 480px;
    margin: 34px auto 50px;
    position: relative;
}

#blog-overview .blog-search-wrap iconify-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--blog-accent);
    font-size: 19px;
}

#blog-overview #blogSearch {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--blog-border);
    border-radius: 30px;
    color: #fff;
    padding: 13px 20px 13px 48px;
    font-size: 14.5px;
    transition: border-color 0.25s ease, background 0.25s ease;
}

#blog-overview #blogSearch:focus {
    outline: none;
    border-color: var(--blog-border-strong);
    background: rgba(183, 117, 255, 0.06);
}

#blog-overview #blogSearch::placeholder {
    color: var(--blog-text-faint);
}

#blog-overview .blog-search-empty {
    display: none;
    text-align: center;
    color: var(--blog-text-dim);
    padding: 40px 0;
}

#blog-overview .blog-search-empty.is-active {
    display: block;
}

/* ============================== FEATURED POST ============================== */
#blog-overview .featured-post {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--blog-border);
    border-radius: 24px;
    overflow: hidden;
    text-decoration: none;
    margin-bottom: 60px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#blog-overview .featured-post:hover {
    border-color: var(--blog-border-strong);
    box-shadow: 0 25px 60px rgba(106, 30, 188, 0.28);
}

#blog-overview .featured-post:hover .featured-post-media img {
    transform: scale(1.06);
}

#blog-overview .featured-post-media {
    position: relative;
    min-height: 320px;
    overflow: hidden;
    background: var(--blog-accent-soft);
}

#blog-overview .featured-post-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#blog-overview .featured-post-media.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(183, 117, 255, 0.4);
    font-size: 60px;
    min-height: 320px;
}

#blog-overview .featured-post-body {
    padding: 40px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#blog-overview .featured-post-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    background: var(--blog-accent-soft);
    color: var(--blog-accent);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: 30px;
    margin-bottom: 18px;
}

#blog-overview .featured-post-title {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 16px;
}

#blog-overview .featured-post-summary {
    color: var(--blog-text-dim);
    font-size: 15.5px;
    line-height: 1.7;
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    #blog-overview .featured-post {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================== GRID / CARDS ============================== */
#blog-overview .blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

@media (max-width: 992px) {
    #blog-overview .blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #blog-overview .blog-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.blog-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--blog-border);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.blog-card:hover {
    border-color: var(--blog-border-strong);
    background: rgba(183, 117, 255, 0.07);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(106, 30, 188, 0.25);
}

.blog-card-media {
    position: relative;
    display: block;
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: var(--blog-accent-soft);
}

.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.blog-card:hover .blog-card-media img {
    transform: scale(1.07);
}

.blog-card-media.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(183, 117, 255, 0.4);
    font-size: 40px;
}

.blog-card-reading-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: rgba(15, 14, 16, 0.72);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 11.5px;
    padding: 5px 12px;
    border-radius: 30px;
    border: 1px solid rgba(183, 117, 255, 0.3);
}

.blog-card-body {
    padding: 24px 26px 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-card-date {
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--blog-accent);
    margin-bottom: 10px;
}

.blog-card-title {
    font-size: 19.5px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

.blog-card-title a {
    color: #fff;
    text-decoration: none;
}

.blog-card-title a:hover {
    color: var(--blog-accent);
}

.blog-card-summary {
    color: var(--blog-text-dim);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-author {
    font-size: 12.5px;
    color: var(--blog-text-faint);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
}

/* ---------- Placeholder-Karten (wenn nur 1-2 Beiträge existieren) ---------- */
.blog-card-placeholder {
    border: 1.5px dashed rgba(183, 117, 255, 0.25);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 50px 20px;
    color: var(--blog-text-faint);
    text-align: center;
    font-size: 13.5px;
}

.blog-card-placeholder iconify-icon {
    font-size: 34px;
    color: rgba(183, 117, 255, 0.3);
}

/* ---------- Leerer Zustand (0 Beiträge) ---------- */
#blog-overview .blog-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: var(--blog-text-dim);
}

#blog-overview .blog-empty-state iconify-icon {
    font-size: 54px;
    color: rgba(183, 117, 255, 0.35);
    margin-bottom: 18px;
    display: block;
}

/* ---------- CTA-Box am Seitenende ---------- */
#blog-overview .blog-cta-box {
    margin-top: 70px;
    text-align: center;
    background: linear-gradient(135deg, rgba(183, 117, 255, 0.1), rgba(183, 117, 255, 0.02));
    border: 1px solid var(--blog-border);
    border-radius: 24px;
    padding: 50px 30px;
}

#blog-overview .blog-cta-box h4 {
    color: #fff;
    font-size: 22px;
    margin-bottom: 10px;
}

#blog-overview .blog-cta-box p {
    color: var(--blog-text-dim);
    max-width: 520px;
    margin: 0 auto 24px;
    font-size: 14.5px;
    line-height: 1.7;
}

#blog-overview .blog-cta-box a.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--blog-accent);
    color: #0F0E10;
    font-weight: 700;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#blog-overview .blog-cta-box a.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(183, 117, 255, 0.35);
}

/* ==========================================================================
   DETAIL-SEITE
   ========================================================================== */

/* ---------- Lese-Fortschrittsbalken ---------- */
#blog-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--blog-accent), #6a1ebc);
    z-index: 2000;
    transition: width 0.1s linear;
}

#blog-details .blog-breadcrumb {
    font-size: 13px;
    color: var(--blog-text-faint);
    margin-bottom: 26px;
}

#blog-details .blog-breadcrumb a {
    color: var(--blog-text-dim);
    text-decoration: none;
}

#blog-details .blog-breadcrumb a:hover {
    color: var(--blog-accent);
}

#blog-details .blog-post-header {
    max-width: 900px;
    margin: 0 auto 40px;
    text-align: center;
}

#blog-details .blog-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--blog-accent);
    margin-bottom: 18px;
}

#blog-details .blog-post-meta .dot {
    color: var(--blog-text-faint);
}

#blog-details .blog-post-header h1 {
    line-height: 1.2;
}

#blog-details .blog-post-lead {
    max-width: 760px;
    margin: 18px auto 0;
    color: var(--blog-text-dim);
    font-size: 17px;
    line-height: 1.7;
}

#blog-details .blog-post-cover {
    /* FIX: vorher object-fit: cover + max-height: 460px - dadurch wurde
       das Bild IMMER auf die Boxform zugeschnitten, egal welches
       Seitenverhaeltnis es mitbrachte. Bei Titelbildern mit eingebranntem
       Text nah am Rand (wie hier) wurde so ein Teil des Textes abgeschnitten.
       Jetzt: aspect-ratio 1200/630 (Standardformat fuer Blog-/OG-Titelbilder,
       siehe https://www.featureimg.com/blog/blog-featured-image-size-guide)
       gibt allen Beitraegen eine einheitliche Boxform, und object-fit:
       contain garantiert, dass das Bild NIE beschnitten wird - im
       schlimmsten Fall bleibt oben/unten oder seitlich ein schmaler Rand
       (mit dem Hintergrund der Seite gefuellt), aber nie abgeschnittener
       Inhalt. Kuenftige Titelbilder am besten direkt im Format 1200x630px
       exportieren, dann wird die Box ohne Rand exakt ausgefuellt. */
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: contain;
    background: var(--surface, #17161b);
    border-radius: 22px;
    border: 1px solid var(--blog-border);
    margin: 0 auto 50px;
    display: block;
}

#blog-details .blog-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 60px;
    align-items: start;
    max-width: 1120px;
    margin: 0 auto;
}

@media (max-width: 1199px) {
    #blog-details .blog-detail-layout {
        grid-template-columns: minmax(0, 1fr);
        max-width: 760px;
    }

    #blog-details .blog-toc-sidebar {
        display: none;
    }
}

/* ---------- Artikel-Typografie ---------- */
#blog-details .blog-post-content {
    color: var(--blog-text);
    font-size: 18px;
    line-height: 1.85;
    max-width: 760px;
}

#blog-details .blog-post-content p {
    margin-bottom: 22px;
}

#blog-details .blog-post-content h2,
#blog-details .blog-post-content h3 {
    color: #fff;
    font-weight: 700;
    margin: 46px 0 20px;
    padding-left: 18px;
    border-left: 3px solid var(--blog-accent);
    scroll-margin-top: 100px;
}

#blog-details .blog-post-content h2 {
    font-size: 26px;
}

#blog-details .blog-post-content h3 {
    font-size: 21px;
}

#blog-details .blog-post-content ul,
#blog-details .blog-post-content ol {
    margin: 0 0 22px 22px;
    color: var(--blog-text);
}

#blog-details .blog-post-content li {
    margin-bottom: 8px;
    line-height: 1.75;
}

#blog-details .blog-post-content blockquote {
    margin: 30px 0;
    padding: 18px 26px;
    border-left: 3px solid var(--blog-accent);
    background: var(--blog-accent-soft);
    border-radius: 0 14px 14px 0;
    color: var(--blog-text-dim);
    font-style: italic;
}

#blog-details .blog-post-content code {
    background: rgba(183, 117, 255, 0.12);
    color: #e6dfff;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.9em;
}

#blog-details .blog-post-content pre {
    background: #17151a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px 22px;
    overflow-x: auto;
    margin: 28px 0;
}

#blog-details .blog-post-content pre code {
    background: none;
    padding: 0;
    color: #e6dfff;
}

#blog-details .blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 30px 0;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#blog-details .blog-post-content a {
    color: var(--blog-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#blog-details .blog-post-content hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 40px 0;
}

/* ---------- TOC-Sidebar (sticky, Desktop) ---------- */
#blog-details .blog-toc-sidebar {
    position: sticky;
    top: 110px;
}

#blog-details .blog-toc-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--blog-text-faint);
    margin-bottom: 16px;
}

#blog-details .blog-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#blog-details .blog-toc-list li a {
    display: block;
    padding: 7px 0 7px 18px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--blog-text-dim);
    text-decoration: none;
    font-size: 13.5px;
    line-height: 1.4;
    transition: color 0.2s ease, border-color 0.2s ease;
}

#blog-details .blog-toc-list li.level-3 a {
    padding-left: 32px;
    font-size: 13px;
}

#blog-details .blog-toc-list li a:hover {
    color: #fff;
}

#blog-details .blog-toc-list li a.is-active {
    color: var(--blog-accent);
    border-left-color: var(--blog-accent);
    font-weight: 600;
}

/* ---------- Autoren-Box ---------- */
#blog-details .blog-author-box {
    max-width: 760px;
    margin: 60px 0 0;
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 22px 26px;
}

#blog-details .blog-author-box img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 15%;
    border: 2px solid rgba(183, 117, 255, 0.4);
    flex-shrink: 0;
}

#blog-details .blog-author-box .blog-author-name {
    color: #fff;
    font-weight: 700;
    font-size: 15.5px;
}

#blog-details .blog-author-box .blog-author-role {
    color: var(--blog-text-faint);
    font-size: 13px;
    margin-bottom: 8px;
}

#blog-details .blog-author-box .blog-author-links {
    display: flex;
    gap: 14px;
}

#blog-details .blog-author-box .blog-author-links a {
    color: var(--blog-text-dim);
    font-size: 20px;
    transition: color 0.2s ease;
}

#blog-details .blog-author-box .blog-author-links a:hover {
    color: var(--blog-accent);
}

/* ---------- Teilen-Buttons ---------- */
#blog-details .blog-share-row {
    max-width: 760px;
    margin: 30px 0 0;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#blog-details .blog-share-label {
    color: var(--blog-text-faint);
    font-size: 13px;
    margin-right: 4px;
}

#blog-details .blog-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--blog-text-dim);
    font-size: 17px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#blog-details .blog-share-btn:hover {
    border-color: var(--blog-border-strong);
    color: var(--blog-accent);
    background: var(--blog-accent-soft);
}

#blog-details .blog-copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: #17151a;
    border: 1px solid var(--blog-border-strong);
    color: #fff;
    padding: 12px 22px;
    border-radius: 30px;
    font-size: 13.5px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3000;
}

#blog-details .blog-copy-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- Prev/Next ---------- */
#blog-details .blog-prevnext {
    max-width: 760px;
    margin: 60px 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
}

@media (max-width: 560px) {
    #blog-details .blog-prevnext {
        grid-template-columns: minmax(0, 1fr);
    }
}

#blog-details .blog-prevnext a {
    display: block;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px 22px;
    text-decoration: none;
    transition: all 0.25s ease;
}

#blog-details .blog-prevnext a:hover {
    border-color: var(--blog-border-strong);
    background: var(--blog-accent-soft);
}

#blog-details .blog-prevnext .direction-label {
    display: block;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--blog-text-faint);
    margin-bottom: 8px;
}

#blog-details .blog-prevnext.next-link {
    text-align: right;
}

#blog-details .blog-prevnext .post-title {
    color: #fff;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1.4;
}

/* ---------- Weitere Beiträge ---------- */
#blog-details .blog-related {
    max-width: 1120px;
    margin: 80px auto 0;
}

#blog-details .blog-related h3 {
    margin-bottom: 28px;
}

#blog-details .blog-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

@media (max-width: 992px) {
    #blog-details .blog-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    #blog-details .blog-related-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Kommentare ---------- */
#blog-details .comments-section {
    margin: 80px auto 0;
    max-width: 760px;
}

#blog-details .comment-form textarea {
    width: 100%;
    min-height: 110px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--blog-border);
    border-radius: 14px;
    color: #fff;
    padding: 16px 18px;
    font-size: 14.5px;
    resize: vertical;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#blog-details .comment-form textarea:focus {
    outline: none;
    border-color: var(--blog-border-strong);
    box-shadow: 0 0 0 4px rgba(183, 117, 255, 0.12);
}

#blog-details .comment-form button {
    margin-top: 14px;
    background: var(--blog-accent);
    color: #0F0E10;
    border: none;
    font-weight: 700;
    padding: 11px 28px;
    border-radius: 30px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#blog-details .comment-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(183, 117, 255, 0.3);
}

#blog-details .comment-login-note {
    color: var(--blog-text-dim);
    font-size: 14.5px;
    padding: 18px 22px;
    background: var(--blog-accent-soft);
    border: 1px solid var(--blog-border);
    border-radius: 14px;
}

#blog-details .comment-login-note a {
    color: var(--blog-accent);
    font-weight: 600;
}

#blog-details .comment-list {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#blog-details .comment-item {
    display: flex;
    gap: 14px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px 22px;
}

#blog-details .comment-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--blog-accent-soft);
    color: var(--blog-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
}

#blog-details .comment-item .comment-author {
    font-weight: 700;
    color: #fff;
    font-size: 14.5px;
}

#blog-details .comment-item .comment-date {
    font-size: 12px;
    color: var(--blog-text-faint);
    margin-left: 8px;
}

#blog-details .comment-item .comment-text {
    margin-top: 6px;
    color: var(--blog-text);
    font-size: 14.5px;
    line-height: 1.7;
}

#blog-details .comment-replies {
    margin-top: 16px;
    margin-left: 26px;
    padding-left: 20px;
    border-left: 2px solid var(--blog-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#blog-details .no-comments {
    color: var(--blog-text-faint);
    margin-top: 30px;
}

#blog-details .alert-comment {
    max-width: 760px;
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
}

#blog-details .alert-comment.success {
    background: rgba(46, 204, 113, 0.1);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
}

#blog-details .alert-comment.error {
    background: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}


/* Mobil-Überlauf verhindern: Inhalte (Tabellen, lange Links, Code) dürfen den
   Artikel nicht breiter als den Bildschirm machen - vorher ragte die Seite auf
   dem Handy rechts heraus, weil das Grid "1fr" so breit wie der längste
   Inhalt wurde (jetzt überall minmax(0, 1fr)). */
#blog-details .blog-post-content {
    min-width: 0;
    overflow-wrap: break-word;
}

    #blog-details .blog-post-content table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    #blog-details .blog-post-content img,
    #blog-details .blog-post-content video,
    #blog-details .blog-post-content iframe {
        max-width: 100%;
        height: auto;
    }

/* Autorenbild bleibt rund: die allgemeine Regel "Bilder im Artikel -> height:auto"
   (oben) greift sonst auch hier und macht aus dem Kreis ein Oval. */
#blog-details .blog-post-content .blog-author-box img,
#blog-details .blog-author-box img {
    width: 64px;
    height: 64px;
    max-width: none;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}