/* MATIS LABS Newsroom
   Editorial, ruhig und klar: News statt Karten-Sammlung. */

.blog-page {
    --news-ink: #080b14;
    --news-night: #05060f;
    --news-night-soft: #101522;
    --news-copy: #596274;
    --news-paper: #f4f5f7;
    --news-warm: #eee9df;
    --news-white: #fff;
    --news-line: #d8dce4;
    --news-gold: #c5a35e;
    --news-gold-dark: #8e6c2d;
    background: var(--news-paper);
    color: var(--news-ink);
}

.blog-page main { overflow: clip; }

.blog-page header {
    box-shadow: 0 1px 0 rgba(8, 11, 20, 0.08);
}

/* ───────────────────────────────────────────── Leitstory */
.blog-page .blog-hero {
    position: relative;
    min-height: min(835px, 92vh);
    padding: clamp(8rem, 10vw, 9.5rem) 0 clamp(5.5rem, 8vw, 7rem);
    overflow: hidden;
    background:
        radial-gradient(circle at 81% 26%, rgba(197, 163, 94, 0.19), transparent 27%),
        linear-gradient(140deg, #05060f 0%, #090d19 61%, #05060f 100%) !important;
    color: #fff;
}

.blog-page .blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(110deg, #000 10%, transparent 88%);
}

.blog-page .blog-hero::after {
    content: "";
    position: absolute;
    width: min(70vw, 920px);
    aspect-ratio: 1;
    right: -34vw;
    top: -35vw;
    border: 1px solid rgba(197,163,94,.24);
    border-radius: 50%;
    box-shadow: 0 0 0 9vw rgba(197,163,94,.035), 0 0 0 18vw rgba(197,163,94,.022);
    pointer-events: none;
}

.blog-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(440px, 1.08fr);
    align-items: center;
    gap: clamp(3.2rem, 7vw, 7.5rem);
}

.blog-kicker,
.blog-section-index,
.blog-filter-label,
.blog-newsline-label,
.blog-topic-main > span {
    font: 700 .68rem/1.4 var(--font-mono);
    letter-spacing: .105em;
    text-transform: uppercase;
}

.blog-kicker {
    display: flex;
    align-items: center;
    gap: .8rem;
    color: var(--news-gold);
}

.blog-kicker > span {
    width: 2rem;
    height: 1px;
    background: currentColor;
}

.blog-title {
    margin: clamp(1.4rem, 2.5vw, 2.2rem) 0 0;
    color: #fff !important;
    font-size: clamp(3.25rem, 5.7vw, 6.25rem);
    line-height: .88;
    letter-spacing: -.072em;
}

.blog-title-mask {
    display: block;
    overflow: hidden;
    padding: .05em .08em .1em 0;
}

.blog-title-line {
    display: block;
    transform: translateY(112%);
    opacity: 0;
    transition: transform 920ms cubic-bezier(.16,1,.3,1), opacity 250ms ease;
}

.blog-title-mask:nth-child(2) .blog-title-line { transition-delay: 100ms; }
.blog-title-mask:nth-child(3) .blog-title-line { transition-delay: 200ms; }
.blog-hero-copy.active .blog-title-line { transform: translateY(0); opacity: 1; }
.blog-title-line--gold { color: var(--news-gold) !important; }

.blog-hero-description {
    max-width: 39rem;
    margin: clamp(1.4rem, 2.5vw, 2.1rem) 0 0;
    color: rgba(238,241,248,.72);
    font-size: clamp(1rem, 1.3vw, 1.16rem);
    line-height: 1.7;
}

.blog-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 2rem;
}

.blog-button {
    display: inline-flex;
    min-height: 3.35rem;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .84rem 1.08rem;
    border: 1px solid transparent;
    border-radius: .48rem;
    color: #fff;
    font-size: .88rem;
    font-weight: 750;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.blog-button--gold { min-width: 14rem; background: #9b772f; border-color: #9b772f; }
.blog-button--ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); }
.blog-button:hover,
.blog-button:focus-visible { transform: translateY(-2px); color: #fff; }
.blog-button--gold:hover,
.blog-button--gold:focus-visible { background: #b38c3f; }
.blog-button--ghost:hover,
.blog-button--ghost:focus-visible { border-color: var(--news-gold); background: rgba(197,163,94,.1); }

.blog-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.45rem;
    margin-top: clamp(2.4rem, 4vw, 3.7rem);
    color: rgba(238,241,248,.53);
    font: 650 .63rem/1.4 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.blog-hero-facts span { display: inline-flex; align-items: center; gap: .55rem; }
.blog-hero-facts span::before { content: ""; width: .3rem; height: .3rem; border-radius: 50%; background: var(--news-gold); }

.blog-featured {
    position: relative;
    display: block;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 1.4rem;
    background: rgba(255,255,255,.05);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 2.8rem 7rem rgba(0,0,0,.34);
    transform: rotate(.25deg);
    transition: transform 500ms cubic-bezier(.16,1,.3,1), border-color 300ms ease;
}

.blog-featured:hover,
.blog-featured:focus-visible { transform: translateY(-8px); border-color: rgba(197,163,94,.58); color: #fff; }
.blog-featured-visual { position: relative; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.12); }
.blog-featured-visual img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 800ms cubic-bezier(.16,1,.3,1); }
.blog-featured:hover .blog-featured-visual img { transform: scale(1.035); }
.blog-featured-number { position: absolute; top: 1rem; right: 1rem; display: grid; width: 2.65rem; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 50%; background: rgba(5,6,15,.72); color: rgba(255,255,255,.7); font: 700 .65rem var(--font-mono); backdrop-filter: blur(10px); }
.blog-featured-content { padding: clamp(1.3rem, 2.3vw, 1.9rem); }
.blog-featured-meta { display: flex; justify-content: space-between; color: var(--news-gold); font: 700 .62rem var(--font-mono); letter-spacing: .09em; }
.blog-featured h2 { max-width: 26ch; margin: 1rem 0 1.4rem; color: #fff; font-size: clamp(1.5rem, 2.5vw, 2.3rem); line-height: 1.07; letter-spacing: -.045em; }
.blog-featured-link { display: flex; justify-content: space-between; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.72); font-size: .84rem; font-weight: 700; }

/* ───────────────────────────────────────────── Newsline */
.blog-newsline {
    position: relative;
    z-index: 3;
    border-bottom: 1px solid #d2d6de;
    background: #fff;
}

.blog-newsline-inner {
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    align-items: center;
    gap: 2rem;
    min-height: 4.7rem;
}

.blog-newsline-label { display: inline-flex; align-items: center; gap: .55rem; color: var(--news-ink); white-space: nowrap; }
.blog-newsline-label i { width: .45rem; height: .45rem; border-radius: 50%; background: #24a663; box-shadow: 0 0 0 .3rem rgba(36,166,99,.1); }
.blog-newsline-track { display: flex; overflow-x: auto; scrollbar-width: none; }
.blog-newsline-track::-webkit-scrollbar { display: none; }
.blog-newsline-track a { flex: 0 0 auto; padding: .35rem 1.45rem; border-left: 1px solid #e1e4ea; color: #4e5768; font-size: .82rem; font-weight: 650; text-decoration: none; }
.blog-newsline-track a:hover { color: var(--news-gold-dark); }

/* ───────────────────────────────────────────── Themenwelten */
.blog-topics-section { padding: clamp(6rem, 10vw, 10rem) 0; background: #fff; }
.blog-topics-container { max-width: 1160px; }
.blog-section-head { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); align-items: end; gap: clamp(2rem,7vw,8rem); margin-bottom: clamp(2.5rem,5vw,4.5rem); }
.blog-section-index { color: var(--news-gold-dark); }
.blog-section-head h2,
.blog-index-heading h2,
.blog-subscribe-panel h2,
.blog-guide-panel h2 { margin: .8rem 0 0; color: var(--news-ink); font-size: clamp(2.7rem,5.4vw,5.4rem); line-height: .92; letter-spacing: -.068em; }
.blog-section-head > p,
.blog-index-heading > p { max-width: 32rem; margin: 0; color: var(--news-copy); line-height: 1.72; }

.blog-topic-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; }
.blog-topic {
    position: relative;
    display: flex;
    min-height: 30rem;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1.25rem;
    color: #fff;
    box-shadow: 0 1.6rem 4rem rgba(8,11,20,.14);
    isolation: isolate;
}
.blog-topic::before { content: ""; position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; transition: transform 900ms cubic-bezier(.16,1,.3,1); }
.blog-topic::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,15,.18), rgba(5,6,15,.94) 86%); }
.blog-topic:hover::before { transform: scale(1.045); }
.blog-topic--ai { grid-column: span 7; }
.blog-topic--compliance { grid-column: span 5; }
.blog-topic--software { grid-column: span 5; }
.blog-topic--practice { grid-column: span 7; }
.blog-topic--ai::before { background-image: url("img/corporate/local-ai-dgx-spark-room-v2.jpg"); }
.blog-topic--compliance::before { background-image: url("img/foerderungen/programm-beratung-v1.jpg"); }
.blog-topic--software::before { background-image: url("img/mloffice/workday/workday-general-1200.webp"); }
.blog-topic--practice::before { background-image: url("img/foerderungen/programm-prozesse-v1.jpg"); }
.blog-topic-main { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; padding: clamp(1.6rem,3.5vw,2.7rem); color: #fff; text-decoration: none; }
.blog-topic-main:hover { color: #fff; }
.blog-topic-main > span { margin-bottom: 1.1rem; color: var(--news-gold); }
.blog-topic h3 { max-width: 16ch; margin: 0; color: #fff; font-size: clamp(1.8rem,3.2vw,3.15rem); line-height: .98; letter-spacing: -.055em; }
.blog-topic p { max-width: 34rem; margin: 1rem 0 0; color: rgba(255,255,255,.68); line-height: 1.62; }
.blog-topic-feed { display: flex; justify-content: space-between; margin: 0 clamp(1.6rem,3.5vw,2.7rem); padding: 1rem 0 1.35rem; border-top: 1px solid rgba(255,255,255,.2); color: #fff; font: 700 .72rem var(--font-mono); text-decoration: none; }
.blog-topic-feed:hover { color: var(--news-gold); }

/* ───────────────────────────────────────────── Newsstream */
.blog-index-section { padding: clamp(6rem,10vw,9rem) 0; background: var(--news-paper); }
.blog-index-container { max-width: 1160px; }
.blog-index-heading { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); align-items: end; gap: clamp(2rem,7vw,8rem); padding-bottom: clamp(2.2rem,4vw,3.3rem); border-bottom: 1px solid #cfd4dd; }

.blog-page .blog-filter { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: .55rem; margin: 1.5rem 0 2.25rem; }
.blog-filter-label { margin-right: .65rem; color: #6f7787; }
.blog-page .blog-pill { padding: .68rem .95rem; border: 1px solid #d2d7df; border-radius: 999px; background: rgba(255,255,255,.78); color: #4a5364; font: 650 .65rem var(--font-mono); }
.blog-page .blog-pill:hover { border-color: var(--news-gold-dark); color: var(--news-ink); }
.blog-page .blog-pill.aktiv { border-color: var(--news-ink); background: var(--news-ink); color: #fff; }

.blog-page .blog-liste { display: grid; grid-template-columns: minmax(0,1.22fr) minmax(320px,.78fr); gap: 1.1rem; }
.blog-card-shell { position: relative; min-width: 0; }
.blog-card-shell[hidden] { display: none !important; }
.blog-page .blog-karte { display: flex; min-height: 100%; flex-direction: column; overflow: hidden; border: 1px solid #d7dce5; border-radius: 1.2rem; background: rgba(255,255,255,.92); color: var(--news-ink); text-decoration: none; box-shadow: 0 1.2rem 3rem rgba(8,11,20,.055); transition: transform 350ms cubic-bezier(.16,1,.3,1), border-color 220ms ease, box-shadow 300ms ease; }
.blog-card-shell:hover .blog-karte { transform: translateY(-7px); border-color: rgba(142,108,45,.65); box-shadow: 0 1.9rem 4.4rem rgba(8,11,20,.13); }
.blog-page .blog-karte-bild { display: block; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; transition: transform 800ms cubic-bezier(.16,1,.3,1); }
.blog-card-shell:hover .blog-karte-bild { transform: scale(1.025); }
.blog-page .blog-karte-kopf { padding: clamp(1.4rem,2.7vw,2rem) clamp(1.4rem,2.7vw,2rem) 0; }
.blog-page .blog-karte-meta { display: flex; flex-wrap: wrap; gap: .55rem; color: #737c8d; font: 650 .62rem var(--font-mono); letter-spacing: .04em; }
.blog-page .blog-karte-kategorie { color: var(--news-gold-dark); font-weight: 800; }
.blog-page .blog-karte h3 { margin: .95rem 0 .7rem; color: var(--news-ink); font-size: clamp(1.6rem,2.8vw,2.45rem); line-height: 1.04; letter-spacing: -.05em; }
.blog-page .blog-card-shell:nth-child(2) .blog-karte h3 { font-size: clamp(1.5rem,2.35vw,2.05rem); }
.blog-page .blog-karte p { flex: 1; padding: 0 clamp(1.4rem,2.7vw,2rem); color: var(--news-copy); font-size: .95rem; line-height: 1.66; }
.blog-page .blog-karte-fuss { display: flex; align-items: center; justify-content: space-between; margin-top: 1.4rem; padding: 1.15rem clamp(1.4rem,2.7vw,2rem) 1.45rem; border-top: 1px solid #e1e5eb; color: var(--news-ink); font-size: .72rem; font-weight: 800; }
.blog-page .blog-karte-fuss::after { content: "↗"; color: var(--news-gold-dark); font-size: 1rem; }
.blog-share-button { position: absolute; z-index: 4; top: 1rem; right: 1rem; display: inline-flex; min-height: 2.55rem; align-items: center; gap: .5rem; padding: .55rem .78rem; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(5,6,15,.76); color: #fff; font: 700 .65rem var(--font-mono); backdrop-filter: blur(12px); cursor: pointer; transition: background 180ms ease, transform 180ms ease, border-color 180ms ease; }
.blog-share-button svg { width: 1rem; height: 1rem; fill: currentColor; }
.blog-share-button:hover,
.blog-share-button:focus-visible { transform: translateY(-2px); border-color: var(--news-gold); background: var(--news-night); }
.blog-page .blog-leer { margin: 1rem 0 0; border: 1px solid var(--news-line); border-radius: .8rem; background: #fff; }

/* ───────────────────────────────────────────── Abos & Leitfäden */
.blog-conversion-section { padding: 0 0 clamp(6rem,10vw,9rem); background: var(--news-paper); }
.blog-conversion-grid { display: grid; max-width: 1160px; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 1.1rem; }
.blog-subscribe-panel,
.blog-guide-panel { min-height: 30rem; padding: clamp(2rem,4vw,3.5rem); border-radius: 1.25rem; }
.blog-subscribe-panel { border: 1px solid #d7dce5; background: #fff; }
.blog-subscribe-panel h2 { max-width: 10ch; }
.blog-subscribe-panel > p,
.blog-guide-panel p { max-width: 36rem; margin: 1.3rem 0 0; color: var(--news-copy); line-height: 1.68; }
.blog-page .blog-abo { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: clamp(2rem,4vw,3.25rem); }
.blog-page .blog-abo a { padding: .7rem .88rem; border: 1px solid #d7dce5; border-radius: 999px; background: #f7f8fa; color: #273044; font: 650 .68rem/1.2 var(--font-mono); text-decoration: none; transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }
.blog-page .blog-abo a::before { content: "◉"; margin-right: .45rem; color: var(--news-gold-dark); }
.blog-page .blog-abo a:hover,
.blog-page .blog-abo a:focus-visible { transform: translateY(-2px); border-color: var(--news-gold-dark); background: #fff; color: var(--news-ink); }
.blog-guide-panel { display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(197,163,94,.32); background: radial-gradient(circle at 100% 0%, rgba(197,163,94,.18), transparent 35%), linear-gradient(145deg,#080b14,#121827); color: #fff; text-decoration: none; box-shadow: 0 1.8rem 4rem rgba(8,11,20,.16); transition: transform 350ms cubic-bezier(.16,1,.3,1), border-color 250ms ease; }
.blog-guide-panel:hover,
.blog-guide-panel:focus-visible { transform: translateY(-6px); border-color: var(--news-gold); color: #fff; }
.blog-guide-panel .blog-section-index { color: var(--news-gold); }
.blog-guide-panel h2 { max-width: 8ch; color: #fff; font-size: clamp(2.6rem,4.5vw,4.5rem); }
.blog-guide-panel p { color: rgba(238,241,248,.66); }
.blog-guide-link { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); color: #fff; font-weight: 800; }

@media (max-width: 1020px) {
    .blog-page .blog-hero { min-height: auto; }
    .blog-hero-grid { grid-template-columns: 1fr; }
    .blog-hero-copy { max-width: 760px; }
    .blog-featured { max-width: 780px; }
    .blog-topic--ai,
    .blog-topic--compliance,
    .blog-topic--software,
    .blog-topic--practice { grid-column: span 6; }
    .blog-page .blog-liste,
    .blog-conversion-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
    .blog-page .blog-hero { padding-top: 7.4rem; padding-bottom: 4.6rem; }
    .blog-hero-grid { gap: 3.2rem; }
    .blog-title { font-size: clamp(3.15rem,14vw,5.2rem); }
    .blog-newsline-inner { grid-template-columns: 1fr; gap: .4rem; padding-top: .9rem; padding-bottom: .8rem; }
    .blog-newsline-track { margin-inline: -1rem; padding-inline: 1rem; }
    .blog-section-head,
    .blog-index-heading { grid-template-columns: 1fr; gap: 1.35rem; }
    .blog-topic-grid { grid-template-columns: 1fr; }
    .blog-topic--ai,
    .blog-topic--compliance,
    .blog-topic--software,
    .blog-topic--practice { grid-column: auto; min-height: 25rem; }
    .blog-page .blog-filter { align-items: flex-start; }
    .blog-filter-label { flex: 0 0 100%; margin-bottom: .2rem; }
    .blog-page .blog-liste,
    .blog-conversion-grid { grid-template-columns: 1fr; }
    .blog-page .blog-card-shell:nth-child(2) .blog-karte h3 { font-size: clamp(1.55rem,7vw,2.15rem); }
    .blog-subscribe-panel,
    .blog-guide-panel { min-height: 25rem; }
}

@media (max-width: 520px) {
    .blog-hero-actions { flex-direction: column; }
    .blog-button { width: 100%; }
    .blog-hero-facts { display: grid; grid-template-columns: 1fr 1fr; }
    .blog-page .blog-karte-meta span:nth-of-type(2),
    .blog-page .blog-karte-meta span:nth-of-type(4) { display: none; }
    .blog-share-button span { display: none; }
    .blog-share-button { width: 2.65rem; justify-content: center; padding: .55rem; }
    .blog-subscribe-panel,
    .blog-guide-panel { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-title-line { transform: none; opacity: 1; transition: none; }
    .blog-topic::before,
    .blog-karte,
    .blog-karte-bild { transition: none !important; }
}