/* Gaby-Artikeldesign: Blog-Artikel (Ghostwriter-Inhalt) und Reportagen */

.gaby-article-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    min-height: min(78vh, 720px);
    display: flex;
    align-items: flex-end;
    background: #e9e4dc center / cover no-repeat;
    background-image: var(--gaby-article-hero);
}
.gaby-article-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(247, 244, 240, 0) 35%, rgba(247, 244, 240, .82) 72%, var(--gaby-light) 100%);
}
.gaby-article-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
}
.gaby-article-pill {
    display: inline-block;
    padding: .45rem 1.05rem;
    border-radius: 999px;
    background: var(--gaby-primary-gradient);
    color: #1d1b29;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(var(--gaby-primary-rgb), .3);
}
.gaby-article-hero h1 {
    margin: .9rem 0 .6rem;
    font-size: clamp(1.8rem, 4.2vw, 2.9rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
    color: #1d1b29;
}
.gaby-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    color: #5f5a6b;
    font-size: .95rem;
}
.gaby-article-meta span + span::before {
    content: "·";
    margin-right: .9rem;
    color: var(--gaby-primary-dark);
}

.gaby-article {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}
.gaby-article-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #3a3747;
    padding-left: 1.2rem;
    border-left: 3px solid var(--gaby-primary);
    margin-bottom: 2rem;
}
.gaby-prose p, .gaby-prose li { font-size: 1.075rem; line-height: 1.8; color: #3a3747; }
.gaby-prose h2 { font-size: 1.55rem; font-weight: 700; margin: 2.75rem 0 1rem; line-height: 1.25; color: #1d1b29; }
.gaby-prose h3 { font-size: 1.2rem; font-weight: 600; margin: 2rem 0 .75rem; }
.gaby-prose a { color: var(--gaby-primary-dark); text-decoration: underline; text-underline-offset: 3px; }
.gaby-prose img { max-width: 100%; height: auto; }
.gaby-prose ul:not([class]) li::marker { color: var(--gaby-primary-dark); }

.gaby-prose .article-figure, .gaby-rep-figure { margin: 2rem 0; }
.gaby-prose .article-figure img { display: block; width: 100%; border-radius: 1rem; }

.gaby-prose .process-steps { list-style: none; counter-reset: gstep; padding: 0; margin: 2rem 0; }
.gaby-prose .process-steps li { counter-increment: gstep; position: relative; padding: 0 0 1.75rem 4rem; }
.gaby-prose .process-steps li::before {
    content: counter(gstep);
    position: absolute; left: 0; top: 0;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--gaby-primary-gradient); color: #1d1b29; font-weight: 700;
    box-shadow: 0 6px 16px rgba(var(--gaby-primary-rgb), .3);
}
.gaby-prose .process-steps li:not(:last-child)::after {
    content: ""; position: absolute; left: 1.35rem; top: 3rem; bottom: .4rem;
    width: 2px; background: rgba(var(--gaby-primary-rgb), .3);
}
.gaby-prose .process-steps li strong { display: block; font-size: 1.1rem; color: #1d1b29; margin-bottom: .25rem; }

.gaby-prose .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 2rem 0; }
.gaby-prose .stat-grid__item { background: #fff; border-radius: 1rem; padding: 1.25rem; box-shadow: 0 8px 24px rgba(29, 27, 41, .05); }
.gaby-prose .stat-grid__num { font-size: 1.5rem; font-weight: 700; color: var(--gaby-primary-dark); }
.gaby-prose .stat-grid__label { color: #5f5a6b; font-size: .95rem; margin-top: .25rem; }

.gaby-prose .callout {
    margin: 2rem 0; padding: 1.5rem; border-radius: 1.1rem; background: #fff;
    border: 1px solid rgba(var(--gaby-primary-rgb), .35); box-shadow: 0 10px 30px rgba(29, 27, 41, .05);
}
.gaby-prose .callout p:last-child { margin-bottom: 0; }
.gaby-prose .callout__link, .gaby-prose .cta-button, .gaby-article-btn {
    display: inline-block; padding: .8rem 1.4rem; border-radius: 999px;
    background: var(--gaby-primary-gradient); color: #1d1b29 !important; font-weight: 600;
    text-decoration: none !important; box-shadow: 0 8px 20px rgba(var(--gaby-primary-rgb), .3);
}
.gaby-article-btn--outline { background: #fff; border: 1.5px solid var(--gaby-primary); box-shadow: none; }
.gaby-prose .cta-block { margin: 2rem 0; }
.gaby-prose .cta-inline {
    margin: 1.75rem 0; padding: 1rem 1.25rem; border-radius: .9rem;
    background: rgba(var(--gaby-primary-rgb), .1); color: #3a3747;
}
.gaby-prose .highlight-quote {
    margin: 2.25rem 0; padding: .5rem 0 .5rem 1.5rem; border-left: 4px solid var(--gaby-primary);
    font-size: 1.35rem; font-weight: 600; line-height: 1.45; color: #1d1b29;
}
.gaby-prose .check-list { list-style: none; padding: 0; }
.gaby-prose .check-list li { position: relative; padding-left: 2rem; }
.gaby-prose .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--gaby-primary-dark); font-weight: 700; }
.gaby-prose details { background: #fff; border-radius: .9rem; padding: 1rem 1.25rem; margin: .75rem 0; }
.gaby-prose summary { font-weight: 600; cursor: pointer; }

.gaby-article-cta {
    margin-top: 3rem; padding: 2rem; border-radius: 1.25rem; background: #fff;
    box-shadow: 0 10px 30px rgba(29, 27, 41, .06);
}
.gaby-article-cta h2 { margin-top: 0; }
.gaby-article-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1rem; }

/* Blog-Übersicht */
.gaby-blog-head { max-width: 760px; margin: 0 auto 2.5rem; text-align: center; }
.gaby-blog-head h1 { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; margin: 1rem 0 .75rem; }
.gaby-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.5rem; }
.gaby-blog-item {
    display: flex; flex-direction: column; background: #fff; border-radius: 1.25rem; overflow: hidden;
    text-decoration: none; color: inherit; box-shadow: 0 10px 30px rgba(29, 27, 41, .06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.gaby-blog-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(29, 27, 41, .1); }
.gaby-blog-item-img { aspect-ratio: 4 / 3; background: #e9e4dc center / cover no-repeat; }
.gaby-blog-item-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.gaby-blog-item-meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gaby-primary-dark); font-weight: 600; }
.gaby-blog-item h2 { font-size: 1.2rem; font-weight: 700; line-height: 1.3; margin: 0; color: #1d1b29; }
.gaby-blog-item p { margin: 0; color: #5f5a6b; font-size: .98rem; line-height: 1.6; }
.gaby-blog-item-more { margin-top: auto; padding-top: .5rem; font-weight: 600; color: var(--gaby-primary-dark); }

@media (max-width: 1199.98px) {
    .gaby-article, .gaby-article-hero-inner { padding-right: 4.25rem; }
}
@media (max-width: 767.98px) {
    .gaby-article-hero { min-height: 62vh; }
    .gaby-article, .gaby-article-hero-inner { padding-right: 1rem; }
    .gaby-prose h2 { font-size: 1.3rem; }
    .gaby-article-cta { padding: 1.5rem 1.1rem; }
    .gaby-article-actions a { flex: 1 1 100%; text-align: center; }
    .gaby-prose .process-steps li { padding-left: 3.5rem; }
}
