/* ============================================================
   Herbano Ratgeber — Typography
   Globale Heading + Body-Defaults für Magefan-Blog-Routen.
   Scoped auf .post-description (Magefan-Content-Wrapper).
   ============================================================ */

/* ---------- Body-Defaults ---------- */
body.blog-page {
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-body);
    line-height: var(--hb-lh-body);
    color: var(--hb-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Headings (im Magefan-Content) ---------- */
body.blog-page .post-description h1,
body.blog-page .post-description h2,
body.blog-page .post-description h3,
body.blog-page .post-description h4,
body.blog-page .post-description h5,
body.blog-page .post-description h6 {
    font-family: var(--hb-f-display);
    font-weight: 600;
    color: var(--hb-ink);
    text-transform: none;
    letter-spacing: var(--hb-tracking-tight);
    line-height: var(--hb-lh-snug);
    margin: 0 0 var(--hb-sp-3);
}

body.blog-page .post-description h1 {
    font-size: var(--hb-fs-h1);
    color: var(--hb-accent);
    line-height: var(--hb-lh-tight);
    margin-bottom: var(--hb-sp-4);
    margin-top: var(--hb-sp-6);
}

body.blog-page .post-description h2 {
    font-size: var(--hb-fs-h2);
    color: var(--hb-accent);
    margin-top: var(--hb-sp-6);
}

body.blog-page .post-description h3 {
    font-size: var(--hb-fs-h3);
    color: var(--hb-ink);
    margin-top: var(--hb-sp-5);
}

body.blog-page .post-description h4 {
    font-size: var(--hb-fs-h4);
    color: var(--hb-ink);
    margin-top: var(--hb-sp-4);
}

/* ---------- Body-Text ---------- */
body.blog-page .post-description p {
    font-family: var(--hb-f-read);
    font-size: 18px;
    line-height: 1.6;
    color: var(--hb-ink);
    margin: 0 0 var(--hb-sp-4);
    text-wrap: pretty;
}

body.blog-page .post-description p:last-child {
    margin-bottom: 0;
}

body.blog-page .post-description strong {
    color: var(--hb-ink);
    font-weight: 600;
}

body.blog-page .post-description em {
    font-style: italic;
}

/* ---------- Links (nur in Inline-Text, nicht in Cards/Buttons) ---------- */
body.blog-page .post-description p a,
body.blog-page .post-description li a,
body.blog-page .post-description blockquote a {
    color: var(--hb-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--hb-dur-micro) var(--hb-ease);
}

body.blog-page .post-description p a:hover,
body.blog-page .post-description li a:hover,
body.blog-page .post-description blockquote a:hover {
    color: var(--hb-accent-dark);
}

/* ---------- Listen ---------- */
body.blog-page .post-description ul,
body.blog-page .post-description ol {
    margin: 0 0 var(--hb-sp-4);
    padding-left: var(--hb-sp-5);
    line-height: var(--hb-lh-body);
}

body.blog-page .post-description li {
    font-family: var(--hb-f-read);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: var(--hb-sp-2);
}

body.blog-page .post-description ul {
    list-style: disc;
}

body.blog-page .post-description ol {
    list-style: decimal;
}

/* ---------- Blockquote ---------- */
body.blog-page .post-description blockquote {
    background: var(--hb-mist);
    border-radius: var(--hb-r-lg);
    padding: var(--hb-sp-6) var(--hb-sp-7);
    margin: var(--hb-sp-6) 0;
    font-family: var(--hb-f-display);
    font-weight: 500;
    font-size: var(--hb-fs-lead);
    line-height: var(--hb-lh-body);
    color: var(--hb-accent);
    border-left: 4px solid var(--hb-accent);
}

/* ---------- Bilder mit Bildunterschrift (figure/figcaption) ---------- */
body.blog-page .post-description figure {
    margin: var(--hb-sp-6) auto;
    max-width: 100%;
    text-align: center;
}
body.blog-page .post-description figure img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--hb-r-lg);
}
body.blog-page .post-description figcaption,
body.blog-page .herbano-article__main figcaption {
    margin-top: var(--hb-sp-2);
    text-align: center;
}
body.blog-page .post-description figcaption,
body.blog-page .post-description figcaption p,
body.blog-page .herbano-article__main figcaption,
body.blog-page .herbano-article__main figcaption p {
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-caption) !important;
    line-height: var(--hb-lh-body);
    color: var(--hb-ink-3) !important;
    font-style: italic;
    margin-bottom: 0;
}

/* ---------- Mobile-Anpassungen ---------- */
@media (max-width: 768px) {
    body.blog-page .post-description h1 {
        font-size: 32px;
    }
    body.blog-page .post-description h2 {
        font-size: 26px;
    }
    body.blog-page .post-description h3 {
        font-size: 20px;
    }
    body.blog-page .post-description h4 {
        font-size: 18px;
    }
    body.blog-page .post-description figcaption,
    body.blog-page .post-description figcaption p,
    body.blog-page .herbano-article__main figcaption,
    body.blog-page .herbano-article__main figcaption p {
        font-size: 11px !important;
    }
}

/* ============================================================
   Inline-Bilder im Ratgeber (Content liegt in .herbano-article__main,
   NICHT .post-description → die figure/img-Regeln oben greifen hier nicht).
   Redaktioneller Look: runde Ecken 12px, kein Rahmen, Caption ruhig, mobil höher.
   ============================================================ */
   body.blog-page .herbano-article__main figure {
    margin: 32px 0;
}
body.blog-page .herbano-article__main figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px !important;
}
/* Caption: linksbündig + nicht kursiv (Grau/Größe bleiben aus den Regeln oben) */
body.blog-page .herbano-article__main figcaption,
body.blog-page .herbano-article__main figcaption p {
    text-align: left !important;
    font-style: normal !important;
}
/* Mobil: 16:9 wirkt zu flach → etwas höheres Format (3:2), mittig beschnitten */
@media (max-width: 768px) {
    body.blog-page .herbano-article__main figure {
        margin: 24px 0;
    }
    body.blog-page .herbano-article__main figure img {
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* ============================================================
   Blog-Kommentare (Magefan) — an Herbano-Design angepasst
   ============================================================ */
   #post-comments {
    font-family: 'Open Sans', system-ui, sans-serif;
}
#post-comments .c-count { margin-bottom: 20px; }
#post-comments .c-count strong {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; font-size: 22px; color: #1a1a1a;
}

/* Formular */
#post-comments .c-replyform {
    background: #f8f8f8; border-radius: 12px; padding: 20px; margin-bottom: 32px;
}
#post-comments textarea,
#post-comments input.input-text {
    width: 100%; box-sizing: border-box;
    font-family: 'Open Sans', system-ui, sans-serif; font-size: 15px; color: #1a1a1a;
    background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
#post-comments textarea { min-height: 110px; resize: vertical; margin-bottom: 12px; }
#post-comments textarea:focus,
#post-comments input.input-text:focus {
    outline: none; border-color: #467c48; box-shadow: 0 0 0 3px rgba(70,124,72,.15);
}
#post-comments .lr-hld { display: flex; gap: 12px; margin-bottom: 12px; }
#post-comments .lr-hld .left-hld,
#post-comments .lr-hld .right-hld { flex: 1; }
#post-comments button[type="submit"] {
    background: #467c48; color: #fff;
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
    border: none; border-radius: 8px; padding: 12px 28px; cursor: pointer;
    transition: background .15s ease;
}
#post-comments button[type="submit"]:hover { background: #3a6b3c; }
#post-comments .c-btn-hld label { font-size: 13px; color: #6b6b6b; }
#post-comments a { color: #467c48; }

/* Kommentar-Liste */
#post-comments .c-comments { display: flex; flex-direction: column; gap: 20px; }
#post-comments .c-comment { display: flex; gap: 12px; }
#post-comments .c-post {
    flex: 1; background: #f8f8f8; border-radius: 12px; padding: 16px 18px;
}
#post-comments .p-info { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
#post-comments .p-name {
    font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; color: #1a1a1a;
}
#post-comments .publish-date { font-size: 12px; color: #9b9b9b; }
#post-comments .p-text { font-size: 15px; line-height: 1.6; color: #2d2d2d; }
#post-comments .reply-action {
    display: inline-block; margin-top: 8px;
    font-size: 13px; font-weight: 600; color: #467c48; text-decoration: none;
}
#post-comments .p-replies {
    margin-top: 16px; padding-left: 20px; border-left: 2px solid #e5f0eb;
    display: flex; flex-direction: column; gap: 16px;
}
#post-comments .c-allcomments,
#post-comments .c-more a {
    display: inline-block; margin-top: 12px; font-weight: 600; color: #467c48; text-decoration: none;
}

@media (max-width: 768px) {
    #post-comments { margin-top: 36px; padding-top: 24px; }
    #post-comments .c-count strong { font-size: 19px; }
    #post-comments .lr-hld { flex-direction: column; gap: 12px; }
    #post-comments .c-replyform { padding: 16px; }
}

/* AJAX-Rückmeldung fürs Kommentar-Formular */
.herbano-comment-note {
    border-radius: 8px; padding: 14px 16px; margin: 0 0 20px;
    font-family: 'Open Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.5;
}
.herbano-comment-note.is-ok  { background: #e5f0eb; color: #2d5530; border: 1px solid #467c48; }
.herbano-comment-note.is-err { background: #fdecea; color: #b33a2e; border: 1px solid #e0a19b; }

/* Kommentar-Sektion: Abstand + Trennlinie + eigene Überschrift */
.herbano-comments {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid #e6e6e6;
}
.herbano-comments__heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; font-size: 24px; color: #1a1a1a;
    margin: 0 0 20px;
}
/* Magefans englische „0 Kommentar(e)"-Zeile ausblenden */
#post-comments .c-count { display: none; }

/* Flache Kommentare: Antworten-Funktion + „mehr laden" ausblenden
   (deren JS läuft in Hyvä nicht → sonst tote Buttons) */
   #post-comments .p-actions,
   #post-comments #c-replyform-comment,
   #post-comments .c-more,
   #post-comments .c-allcomments { display: none; }