/* excire.com — blog post */
/* Title area: generic parallax photo header, dark overlay, white text */
.post__hero { position: relative; background-size: cover; background-position: center; background-attachment: fixed; color: #fff; }
.post__hero::before { content: ""; position: absolute; inset: 0; background: rgb(33,35,36); opacity: .73; }
.post__hero-inner { position: relative; padding-block: 120px 90px; max-width: 980px; }
.post__eyebrow { font-size: 16px; font-weight: var(--fw-medium); margin: 0 0 var(--space-2); opacity: .9; }
.post__title { font-size: var(--fs-h2); font-weight: 700; color: #fff; margin: 0 0 var(--space-3); }
.post__date { margin: 0; color: rgba(255,255,255,.85); font-size: 16px; }

/* ---- New-template posts (auto-detected from live) ---- */
/* Tall hero shows more of the parallax photo; heading sits high. The overlay
   carries the light "ex-foto-bar" graphic at the bottom (over the dark tint),
   and the framed featured image sits below the heading and protrudes ~1/4 of
   its height below the hero — all measured 1:1 from live. */
/* Crop like live: natural size (not "cover"), anchored bottom-left. */
.post__hero--new { background-size: auto; background-position: 0px -130px; }
.post__hero--new::before {
    background: rgb(33,35,36) url('/wp-content/uploads/2023/09/ex-foto-bar.png') 50% 100% / cover no-repeat;
}
/* flow-root so the featured image's negative bottom margin shortens the hero
   (image protrudes below) instead of collapsing out through the hero. */
.post__hero--new .post__hero-inner { padding-block: 50px 0; max-width: 1000px; display: flow-root; }
/* Framed featured image: below the heading, ~3/4 inside the hero, ~1/4 below. */
.post--new .post__feature {
    position: relative; z-index: 2;
    max-width: 820px; margin: var(--space-5) auto -150px;
    text-align: center;
}
.post--new .post__feature img {
    display: block; width: 100%; height: auto;
    border: 10px solid rgba(124,124,124,.37);
    border-radius: 20px;
}
/* Content clears the protruding featured image. */
.post--new .post__body { padding-top: 200px; }
/* Blog body links — blue, no underline (like live). Only in the blog; the TOC
   rule below keeps table-of-contents links black. Specificity beats the global
   ".prose a:not(.btn)" underline rule. */
.post .post__body a:not(.btn) { color: #1B67E6; text-decoration: none; }
.post .post__body a:not(.btn):hover { text-decoration: underline; }
/* Featured-image credit at the very end of the post — black, right-aligned,
   right edge flush with the article content (same 980px column). */
.post__credit-wrap { max-width: 980px; }
.post__credit { text-align: right; color: #000; margin: var(--space-5) 0 0; }
.post__credit em { font-style: normal; }
/* Explanation alert (Elementor "info" style). */
.post__alert {
    background: rgb(217,237,247);
    border-left: 5px solid rgb(188,223,241);
    color: rgb(49,112,143);
    padding: 14px 18px; margin: 0 0 var(--space-5);
    font-size: 14px; line-height: 1.6;
}
/* Table of contents — light grey bordered box (like live). */
.post__toc { margin: 0 0 var(--space-6); background: #f7f7f7; border: 2px solid #9da5ae; border-radius: 5px; padding: 20px 25px; }
.post__toc-title { font-size: 28px; font-weight: var(--fw-regular); margin: 0 0 var(--space-3); }
.post__toc-list { list-style: none; margin: 0; padding: 0; }
.post__toc-list li { position: relative; padding-left: 1.5em; margin-bottom: 10px; font-size: 16px; }
.post__toc-list li::before {   /* small black chevron-right, like the live Elementor TOC marker */
    content: ""; position: absolute; left: .35em; top: .38em;
    width: 6px; height: 6px;
    border-top: 2px solid #000; border-right: 2px solid #000;
    transform: rotate(45deg);
}
/* TOC links: black + regular weight — must beat the blue blog-body link rule
   (.post .post__body a:not(.btn)), since the TOC sits inside .post__body. */
.post .post__body .post__toc-list a { color: #000; font-weight: var(--fw-regular); text-decoration: none; }
.post .post__body .post__toc-list a:hover { color: var(--color-primary); text-decoration: underline; }

/* FAQ accordion uses the canonical style in base.css (shared by every page).
   In the article it just needs a little breathing room top and bottom. */
.post__body .faq__list { margin-block: var(--space-4) var(--space-6); }

/* Call-to-action: photo band on top, grey content box below (like live).
   The photo slowly zooms in on hover (Elementor "zoom-in"), clipped by the box. */
.post__cta { max-width: 980px; margin: var(--space-6) auto; overflow: hidden; }
.post__cta-media { height: 200px; background-size: cover; background-position: 50% 50%; transition: transform 1.5s ease; }
.post__cta:hover .post__cta-media { transform: scale(1.2); }
@media (prefers-reduced-motion: reduce) { .post__cta:hover .post__cta-media { transform: none; } }
.post__cta-body { background: #f9fafa; padding: 35px; text-align: center; }
.post__cta-title { font-size: 34px; font-weight: var(--fw-regular); color: #3f444b; margin: 0 0 var(--space-4); line-height: 1.2; }

/* In-body Elementor buttons (e.g. "14 Tage testen") adopt the global button. */
.post__body .elementor-button-wrapper { text-align: center; margin: var(--space-4) 0; }
.post__body .elementor-button {
    display: inline-block;
    font-family: var(--font-button);
    font-size: 16px; line-height: 1.3; text-transform: uppercase; text-align: center;
    padding: 15px 30px; border-radius: 0;
    background: var(--btn-grad, linear-gradient(135deg, #1B67E6 0%, #00ACFF 100%)); color: #fff;
    transition: background .15s ease;
}
.post__body .elementor-button:hover { background: var(--btn-grad-hover, linear-gradient(135deg, #00ACFF 0%, #1B67E6 100%)); color: #fff; }
.post__body .elementor-button .elementor-button-text { color: #fff; }

/* Related posts ("Weitere Artikel zu diesem Thema"). */
.post__related { padding-block: var(--space-5) var(--space-8); }
.post__related-title { font-size: var(--fs-h2); margin: 0 0 var(--space-5); }
.post__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.post__related-card { display: flex; flex-direction: column; background: #f4f4f4; color: var(--color-text); }
.post__related-media { display: block; aspect-ratio: 5 / 3; overflow: hidden; background: #ebebeb; }
.post__related-media img { width: 100%; height: 100%; object-fit: cover; }
.post__related-cardtitle { padding: 16px 18px; font-weight: var(--fw-medium); line-height: 1.35; }
.post__related-card:hover .post__related-cardtitle { color: var(--color-primary); }

/* Previous / next post navigation (chronological, at the very bottom).
   Sits on a full-width light-grey band, like live. */
.post__nav-band { background: rgba(2, 1, 1, .2); }   /* = ~#ccc over white, as on live */
.post__nav { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-block: 10px; }
.post__nav-link { display: flex; align-items: center; gap: var(--space-3); max-width: 48%; }
.post__nav-next { margin-left: auto; text-align: right; }
.post__nav-arrow { font-size: 30px; color: #d5d8dc; line-height: 1; }
.post__nav-label { display: block; font-size: 16px; color: var(--color-black); }
.post__nav-title { display: block; font-size: 14px; color: #1B67E6; }
.post__nav-link:hover .post__nav-title { text-decoration: underline; }
@media (max-width: 600px) {
    .post__nav { flex-direction: column; }
    .post__nav-link, .post__nav-next { max-width: 100%; margin-left: 0; text-align: left; }
    .post__nav-next { flex-direction: row-reverse; justify-content: flex-end; }
}

.post__body { max-width: 980px; padding-block: var(--space-7); }
.post__body img { width: 100%; height: auto; margin: var(--space-4) 0; }
/* Classic-editor caption figures carry an inline width (e.g. 1500px) — cap them
   so wide images/captions never overflow the content column. */
.post__body figure { max-width: 100%; height: auto; margin: var(--space-4) auto; }
.post__body figure img { margin: 0; }
.post__body figcaption { font-size: 14px; color: var(--color-text-muted); text-align: center; margin-top: 6px; }
.post__body h2 { font-size: var(--fs-h2); font-weight: 600; margin-top: var(--space-6); scroll-margin-top: 80px; }
/* More breathing room between paragraphs */
.post__body p { margin-bottom: 22px; }
.post__body h3 { margin-top: var(--space-5); }
.post__body ul, .post__body ol { margin: var(--space-3) 0; padding-left: 1.3em; }
.post__body li { margin-bottom: var(--space-2); }
.post__table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
.post__body table { border-collapse: collapse; width: 100%; margin: 0; }
.post__body td, .post__body th { border: 1px solid var(--color-border); padding: 8px 12px; text-align: left; }
@media (max-width: 900px) {
    .post__hero { background-attachment: scroll; }
    .post__hero-inner { padding-block: var(--space-7) var(--space-6); }
    .post__hero--new { background-position: center; }
    .post__hero--new .post__hero-inner { padding-block: var(--space-6) 0; }
    .post--new .post__feature { margin: var(--space-4) auto -60px; }
    .post--new .post__body { padding-top: 100px; }
    .post__related-grid { grid-template-columns: 1fr; }
}

/* News listing */
/* Hero carries a large bottom padding; the post grid is pulled up into it so
   the first card row overlaps the title image (measured 1:1 from live:
   hero padding 75px/350px, grid margin-top -200px). */
.newshero { background-size: cover; background-position: center; color: #fff; }
.newshero .container { padding-block: 75px 350px; }
.newshero__title { font-size: var(--fs-h1); font-weight: 700; color: #fff; margin: 0; text-align: left; }
.newslist { position: relative; z-index: 2; }
/* Grid is much narrower than the hero (live: ~300px side padding → ~825px grid
   at 1440, cards ~255px). The clamp reproduces the fixed-300px behaviour while
   staying safe on smaller screens; the hero H1 keeps the full container width. */
.newslist .container {
    max-width: none;
    margin-top: -200px;
    padding: 0 clamp(var(--container-pad), calc((100vw - 800px) / 2), 300px) var(--space-7);
}
.newsgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px 30px; }
.newscard { display: flex; flex-direction: column; background: #f4f4f4; }   /* live: flat light-grey, no shadow */
.newscard__media { display: block; aspect-ratio: 3/2; overflow: hidden; background: #ebebeb; }   /* uniform height across all cards */
.newscard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.newscard__body { padding: 25px; display: flex; flex-direction: column; flex: 1; }
.newscard__title { font-size: 18px; font-weight: var(--fw-medium); line-height: 1.35; margin: 0 0 var(--space-3); overflow-wrap: break-word; hyphens: auto; }
.newscard__title a { color: var(--color-black); }
.newscard__title a:hover { color: var(--color-primary); }
.newscard__date { color: #adadad; font-size: 15px; margin: 0 0 var(--space-3); }
.newscard__more { margin: auto 0 0; }
.newscard__more a { color: var(--color-black); font-size: 13px; font-weight: var(--fw-medium); }
.newscard__more a:hover { color: var(--color-primary); }
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-3); margin-top: var(--space-7); font-size: 18px; }
.pagination a { color: var(--color-text); }
.pagination a:hover, .pagination__cur { color: var(--color-primary); }
.pagination__cur { font-weight: var(--fw-bold); }
@media (max-width: 900px) {
    .newsgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .newshero .container { padding-block: 60px 230px; }
    .newslist .container { margin-top: -190px; }
}
@media (max-width: 600px) {
    .newsgrid { grid-template-columns: 1fr; }
    .newshero .container { padding-block: 48px 210px; }
    .newslist .container { margin-top: -180px; }
}