/* ==========================================================================
   Artikel v1 — EIN Layout fuer alle Beitraege (Blog und Magazin)
   Prototyp 2026-09-23 (DUNBAR + RAMS). Ersetzt nach Freigabe single.css,
   artikel-shared.css und die fuenf artikel-<layout>.css.
   Zone: Marketing (brand-guide §15.1). Piktogramme nach §12 (rote Linien, gezeichnet).
   Werte nur ueber Brand-Tokens (tokens.css), Fallbacks fuer den Prototyp.
   ========================================================================== */

.ik-artikel {
    --a-black: var(--ik-black, #0A0A0A);
    --a-white: #FFFFFF;
    --a-gray: var(--ik-gray, #F6F5F3);
    --a-line: var(--ik-gray-border, #E8E6E1);
    --a-red: var(--ik-red, #B5453A);
    --a-red-dark: var(--ik-red-dark, #6B251F);
    --a-text-2: var(--ik-text-secondary, #555555);
    --a-head: "Cabinet Grotesk", "Inter", system-ui, sans-serif;
    --a-body: "Switzer", "Inter", system-ui, sans-serif;
    --a-col: 38rem;          /* Textspalte 608 px: bei 19 px rund 71 Zeichen je Zeile (Galerie-Grade 45 bis 75) */
    --a-gutter: 24px;
    --a-toc: 208px;
    color: var(--a-black);
    background: var(--a-white);
    font-family: "Switzer", "Inter", system-ui, sans-serif;
    font-size: 18px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.ik-artikel *, .ik-artikel *::before, .ik-artikel *::after { box-sizing: border-box; }

/* Lesefortschritt */
.ik-progress {
    position: fixed; top: 0; left: 0; z-index: 1001;
    height: 2px; width: 0; background: var(--ik-red, #B5453A);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Raster: Textspalte in der Mitte, Inhalt links daneben (ab 1180 px)
   -------------------------------------------------------------------------- */
.ik-artikel__raster {
    display: grid;
    grid-template-columns: minmax(0, var(--a-col));
    justify-content: center;
    padding: 0 var(--a-gutter);
}
.ik-artikel__kopf, .ik-artikel__bild, .ik-artikel__text, .ik-artikel__toc { min-width: 0; }

@media (min-width: 1180px) {
    .ik-artikel__raster {
        grid-template-columns: 1fr minmax(0, var(--a-col)) 1fr;
        column-gap: 56px;
        max-width: 1320px;
        margin: 0 auto;
    }
    .ik-artikel__kopf, .ik-artikel__bild { grid-column: 2 / 4; max-width: 52rem; }
    .ik-artikel__text { grid-column: 2; grid-row: 3; }
    .ik-artikel__toc { grid-column: 1; grid-row: 3; justify-self: end; width: var(--a-toc); }
}

/* --------------------------------------------------------------------------
   Kopf
   -------------------------------------------------------------------------- */
.ik-artikel__kopf { padding: 56px 0 40px; }
.ik-artikel__pfad {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 20px;
    font: 500 11px/1.4 var(--a-body); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--a-text-2);
}
.ik-artikel__pfad a { color: var(--a-text-2); text-decoration: none; display: inline-block; padding: 14px 0; margin: -14px 0; }
.ik-artikel__pfad a:hover { color: var(--a-black); }
.ik-artikel__pfad span[aria-hidden] { color: var(--a-line); }
.ik-artikel__titel {
    margin: 0;
    font: 300 clamp(32px, 5vw, 58px)/1.08 var(--a-head);
    letter-spacing: -0.03em;
    color: var(--a-black);
    text-wrap: balance;
    max-width: 22ch;
}
.ik-artikel__lede {
    margin: 24px 0 0; max-width: 36em;
    font: 400 20px/1.55 var(--a-body); color: var(--a-text-2);
}
.ik-artikel__meta {
    display: flex; align-items: center; gap: 12px;
    margin: 32px 0 0;
    font: 400 14px/1.4 var(--a-body); color: var(--a-text-2);
}
.ik-artikel__meta img { width: 36px; height: 36px; object-fit: cover; border-radius: 0; flex: none; }
.ik-artikel__meta b { font-weight: 500; color: var(--a-black); }
.ik-artikel__meta i { font-style: normal; color: var(--a-line); }

/* Titelbild */
.ik-artikel__bild { margin: 0 0 8px; }
.ik-artikel__bild img {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    outline: 0.5px solid var(--a-line); outline-offset: -0.5px;
}
.ik-artikel__bild figcaption { margin-top: 10px; font: 400 13px/1.5 var(--a-body); color: var(--a-text-2); }

@media (max-width: 767px) {
    .ik-artikel__kopf { padding: 36px 0 28px; }
    .ik-artikel__titel { font-size: clamp(30px, 8.4vw, 38px); line-height: 1.1; letter-spacing: -0.025em; }
    .ik-artikel__lede { font-size: 18px; margin-top: 18px; }
    .ik-artikel__meta { margin-top: 24px; font-size: 13px; }
    .ik-artikel__bild { margin: 0 calc(var(--a-gutter) * -1) 4px; max-width: none; width: calc(100% + var(--a-gutter) * 2); }   /* randlos am Handy */
    .ik-artikel__bild figcaption { padding: 0 var(--a-gutter); }
}

/* --------------------------------------------------------------------------
   Kleine Beschriftung und Piktogramm-Rahmen
   -------------------------------------------------------------------------- */
.ik-label, .ik-artikel p.ik-label, .ik-prose p.ik-label {
    margin: 0 0 8px;
    font: 500 11px/1.4 var(--a-body); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--a-text-2);
}
.ik-picto { display: block; width: 48px; height: 48px; color: var(--ik-red, #B5453A); --sw: 1.7; flex: none; }
.ik-picto svg { display: block; width: 100%; height: 100%; }
.ik-picto svg path { stroke-width: var(--sw); }
.ik-picto svg path.h2 { stroke-width: calc(var(--sw) * .55); }
.ik-picto--s { width: 32px; height: 32px; --sw: 2.55; }
@media (min-width: 768px) {
    .ik-picto { width: 56px; height: 56px; --sw: 1.46; }
    .ik-picto--s { width: 40px; height: 40px; --sw: 2.04; }
}

/* --------------------------------------------------------------------------
   Auf einen Blick (ersetzt TL;DR, eine Zusammenfassung je Beitrag)
   -------------------------------------------------------------------------- */
.ik-blick {
    display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "p l" "b b";
    column-gap: 14px; row-gap: 12px; align-items: center;
    margin: 40px 0 40px; padding: 24px 0 28px;
    border-top: 1px solid var(--a-black);
    border-bottom: 0.5px solid var(--a-line);
}
.ik-blick > .ik-picto { grid-area: p; width: 40px; height: 40px; --sw: 2.04; }
.ik-blick > .ik-label { grid-area: l; margin: 0; }
.ik-blick > .ik-blick__body { grid-area: b; }
.ik-blick p { margin: 0; }
.ik-blick .ik-blick__text { font-size: 18px; line-height: 1.6; color: var(--a-black); }
.ik-blick .ik-blick__text + .ik-blick__text { margin-top: 12px; }
@media (min-width: 768px) {
    .ik-blick { grid-template-columns: 56px 1fr; grid-template-areas: "p l" "p b"; column-gap: 24px; row-gap: 6px; align-items: start; margin: 48px 0 56px; }
    .ik-blick > .ik-picto { width: 56px; height: 56px; --sw: 1.46; }
    .ik-blick > .ik-label { align-self: end; }
    .ik-blick .ik-blick__text { font-size: 19px; }
}

/* Inhaltsverzeichnis: aufklappbar im Text bis 1179 px, feste Randspalte ab 1180 px */
.ik-toc-inline { margin: 0 0 48px; border-top: 0.5px solid var(--a-line); border-bottom: 0.5px solid var(--a-line); }
.ik-artikel__text > .ik-toc-inline:first-child { margin-top: 32px; }
.ik-blick + .ik-toc-inline { margin-top: -16px; border-top: 0; }
.ik-toc-inline summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 52px; cursor: pointer; list-style: none;
    font: 500 14px/1.4 var(--a-body); color: var(--a-black);
}
.ik-toc-inline summary::-webkit-details-marker { display: none; }
.ik-toc-inline summary .ik-label { margin: 0; }
.ik-toc-inline summary em { font-style: normal; font-weight: 400; color: var(--a-text-2); margin-left: auto; }
.ik-plus { position: relative; width: 14px; height: 14px; flex: none; }
.ik-plus::before, .ik-plus::after {
    content: ""; position: absolute; left: 0; top: 6.25px; width: 14px; height: 1.5px; background: var(--a-black);
    transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ik-plus::after { transform: rotate(90deg); }
details[open] > summary .ik-plus::after { transform: rotate(0deg); }
.ik-toc-list { list-style: none; margin: 0; padding: 0 0 20px; counter-reset: none; }
.ik-toc-list li { margin: 0; padding: 0; }
.ik-toc-list li::before { content: none; }
.ik-toc-list a {
    display: grid; grid-template-columns: 28px 1fr; gap: 8px;
    padding: 10px 0; min-height: 44px; text-decoration: none; color: var(--a-text-2);
    font: 400 15px/1.45 var(--a-body);
}
.ik-toc-list a span { font: 500 13px/1.7 var(--a-head); color: var(--a-text-2); }
.ik-toc-list a:hover { color: var(--a-black); }

.ik-artikel__toc { display: none; }
@media (min-width: 1180px) {
    .ik-toc-inline { display: none; }
    .ik-artikel__toc {
        display: block; position: sticky; top: 104px; align-self: start;
        padding-top: 64px; max-height: calc(100vh - 120px); overflow: auto;
    }
    .ik-artikel__toc .ik-toc-list a { font-size: 14px; padding: 7px 0; }
    .ik-artikel__toc .ik-toc-list a.is-aktiv { color: var(--a-black); }
    .ik-artikel__toc .ik-toc-list a.is-aktiv span { color: var(--ik-red, #B5453A); }
}

/* --------------------------------------------------------------------------
   Fliesstext
   -------------------------------------------------------------------------- */
.ik-prose { padding-bottom: 24px; }
.ik-prose > * { margin-top: 0; }
.ik-prose p { margin: 0 0 1.35em; font-size: 18px; line-height: 1.7; color: var(--a-black); }
.ik-prose strong, .ik-prose b { font-weight: 500; color: var(--a-black); }
.ik-prose em, .ik-prose i { font-style: normal; font-weight: 500; }
.ik-prose a {
    color: var(--ik-red, #B5453A);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
    transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ik-prose a:hover { color: var(--a-red-dark); }

.ik-prose h2 {
    margin: 72px 0 20px; scroll-margin-top: 96px;
    font: 300 clamp(27px, 3vw, 34px)/1.15 var(--a-head); letter-spacing: -0.02em;
    color: var(--a-black); text-wrap: balance;
}
.ik-prose .ik-kap {
    margin: 72px 0 10px;
    font: 500 18px/1 var(--a-head); letter-spacing: 0.02em; color: var(--ik-red, #B5453A);
}
.ik-prose .ik-kap + h2 { margin-top: 0; }
.ik-prose h3 {
    margin: 44px 0 12px; scroll-margin-top: 96px;
    font: 500 21px/1.3 var(--a-head); letter-spacing: -0.01em; color: var(--a-black);
}
.ik-prose h4 { margin: 32px 0 8px; font: 500 18px/1.35 var(--a-head); color: var(--a-black); }
.ik-prose > :first-child, .ik-prose > .ik-blick:first-child + * { margin-top: 0; }

.ik-prose ul, .ik-prose ol { margin: 0 0 1.5em; padding: 0; list-style: none; }
.ik-prose li { position: relative; margin: 0 0 10px; padding-left: 26px; font-size: 18px; line-height: 1.65; }
.ik-prose ul > li::before {
    content: ""; position: absolute; left: 3px; top: 0.72em;
    width: 5px; height: 5px; background: var(--ik-red, #B5453A);
}
.ik-prose ol { counter-reset: ik-ol; }
.ik-prose ol > li { counter-increment: ik-ol; padding-left: 34px; }
.ik-prose ol > li::before {
    content: counter(ik-ol, decimal-leading-zero); position: absolute; left: 0; top: 0.1em;
    font: 500 15px/1.65 var(--a-head); color: var(--ik-red, #B5453A);
}
.ik-prose li > ul, .ik-prose li > ol { margin: 10px 0 0; }

.ik-prose blockquote {
    margin: 48px 0; padding: 28px 0;
    border: 0; border-top: 0.5px solid var(--a-black); border-bottom: 0.5px solid var(--a-line);
    background: none;
}
.ik-prose blockquote p {
    margin: 0 0 12px; font: 300 24px/1.4 var(--a-head); letter-spacing: -0.01em; font-style: normal; color: var(--a-black);
}
.ik-prose blockquote p:last-child { margin-bottom: 0; }
.ik-prose blockquote cite { display: block; margin-top: 12px; font: 400 14px/1.4 var(--a-body); font-style: normal; color: var(--a-text-2); }

.ik-prose figure { margin: 40px 0; }
.ik-prose img { display: block; max-width: 100%; height: auto; border-radius: 0; outline: 0.5px solid var(--a-line); outline-offset: -0.5px; }
.ik-prose figcaption { margin-top: 10px; font: 400 13px/1.5 var(--a-body); color: var(--a-text-2); text-align: left; }
.ik-prose hr { margin: 56px 0; border: 0; border-top: 0.5px solid var(--a-line); }

.ik-table { margin: 32px 0 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ik-table table { width: 100%; min-width: 520px; border-collapse: collapse; border-radius: 0; overflow: visible; font: 400 15px/1.5 var(--a-body); }
.ik-table th {
    padding: 12px 14px; text-align: left; vertical-align: bottom;
    background: var(--a-black); color: #FFFFFF; font-weight: 500; font-size: 13px; letter-spacing: 0.02em;
}
.ik-table td { padding: 12px 14px; vertical-align: top; border-bottom: 0.5px solid var(--a-line); }
.ik-table tr:nth-child(even) td { background: var(--a-gray); }
.ik-table strong { font-weight: 500; }

@media (min-width: 768px) {
    .ik-prose p, .ik-prose li { font-size: 19px; }
    .ik-note p, .ik-faq__a p { font-size: 18px; }
}
@media (max-width: 767px) {
    .ik-prose p, .ik-prose li { hyphens: auto; -webkit-hyphens: auto; }
    .ik-prose h2 { margin-top: 56px; }
    .ik-prose .ik-kap { margin-top: 56px; }
    .ik-prose h3 { font-size: 19px; margin-top: 36px; }
    .ik-prose blockquote p { font-size: 21px; }
}

/* --------------------------------------------------------------------------
   Hinweis-Kaesten mit Piktogramm: Aus der Praxis, Erfahrungswert, Aus dem Podcast, Wichtig
   -------------------------------------------------------------------------- */
.ik-note {
    display: grid; grid-template-columns: 40px 1fr; grid-template-areas: "p l" "b b";
    column-gap: 14px; row-gap: 10px; align-items: center;
    margin: 36px 0 40px; padding: 20px 20px 24px;
    background: var(--a-gray);
}
.ik-note > .ik-picto { grid-area: p; width: 40px; height: 40px; --sw: 2.04; }
.ik-note > .ik-label { grid-area: l; margin: 0; color: var(--a-black); }
.ik-note > .ik-note__body { grid-area: b; }
.ik-note p { margin: 0 0 12px; font-size: 17px; line-height: 1.65; }
.ik-note p:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
    .ik-note { grid-template-columns: 56px 1fr; grid-template-areas: "p l" "p b"; column-gap: 24px; row-gap: 6px; align-items: start; padding: 28px 32px 30px 28px; }
    .ik-note > .ik-picto { width: 56px; height: 56px; --sw: 1.46; }
    .ik-note > .ik-label { align-self: end; }
}

/* Was du stattdessen tun solltest / Um ... zu ...: typografisch, ohne Piktogramm */
.ik-statt, .ik-schritt { position: relative; padding-left: 30px; }
.ik-statt::before, .ik-schritt::before {
    content: "\2192"; position: absolute; left: 0; top: 0;
    font: 400 20px/1.55 var(--a-head); color: var(--ik-red, #B5453A);
}
.ik-statt .ik-label { color: var(--a-black); margin-bottom: 6px; }
.ik-statt::before { top: -4px; }

/* --------------------------------------------------------------------------
   Haeufige Fragen: aufklappbar
   -------------------------------------------------------------------------- */
.ik-faq { margin: 72px 0 24px; }
.ik-faq__kopf { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; align-items: center; margin-bottom: 16px; }
.ik-faq__kopf h2 { margin: 0 !important; }
@media (min-width: 768px) { .ik-faq__kopf { grid-template-columns: 56px 1fr; column-gap: 24px; } }
.ik-faq__item { border-top: 0.5px solid var(--a-line); }
.ik-faq__item:last-child { border-bottom: 0.5px solid var(--a-line); }
.ik-faq__item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    min-height: 60px; padding: 18px 0; cursor: pointer; list-style: none;
}
.ik-faq__item summary::-webkit-details-marker { display: none; }
.ik-faq__item summary h3 { margin: 0 !important; font: 500 19px/1.35 var(--a-head); letter-spacing: -0.005em; }
.ik-faq__a { padding: 0 0 20px; }
.ik-faq__a p { font-size: 17px; }
.ik-faq__a > :last-child { margin-bottom: 0; }

/* Fazit */
.ik-fazit { margin: 80px 0 0; padding-top: 28px; border-top: 1px solid var(--a-black); }
.ik-fazit > h2 { margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   Ende: Newsletter (einzige Anmeldung unter dem Beitrag)
   -------------------------------------------------------------------------- */
.ik-nl { margin: 72px 0 0; padding: 56px var(--a-gutter) 64px; background: var(--a-gray); }
.ik-nl__in { max-width: var(--a-col); margin: 0 auto; }
.ik-nl__kopf { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ik-nl__kopf .ik-label { margin: 0; }
.ik-nl__titel {
    margin: 0 0 16px;
    font: 300 clamp(30px, 4vw, 42px)/1.1 var(--a-head); letter-spacing: -0.025em; color: var(--a-black);
    text-wrap: balance;
}
.ik-nl__sub { margin: 0 0 28px; font: 400 17px/1.65 var(--a-body); color: var(--a-text-2); max-width: 34em; }
.ik-nl__nutzen { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 14px; }
.ik-nl__nutzen li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: center; margin: 0; padding: 0; }
.ik-nl__nutzen li::before { content: none; }
.ik-nl__nutzen .ik-picto { width: 40px; height: 40px; --sw: 2.04; }
.ik-nl__nutzen span:last-child { font: 500 16px/1.4 var(--a-body); color: var(--a-black); }

.ik-nl__form { display: flex; gap: 0; max-width: 34rem; border: 1px solid var(--a-line); background: #FFFFFF; }
.ik-nl__form:focus-within { border-color: var(--a-black); }
.ik-nl__form input {
    flex: 1; min-width: 0; padding: 15px 16px; border: 0; background: transparent; border-radius: 0;
    font: 400 16px/1.4 var(--a-body); color: var(--a-black);
}
.ik-artikel .ik-nl__form input[type="email"] { border-radius: 0; -webkit-appearance: none; appearance: none; box-shadow: none; }
.ik-nl__form input::placeholder { color: var(--ik-text-tertiary, #999999); }
.ik-nl__form input:focus { outline: none; }
.ik-nl__form button {
    flex: none; min-height: 52px; padding: 11px 23px; border: 0; border-radius: 0; cursor: pointer;
    font: 500 14px/1 var(--a-body); letter-spacing: 0.01em; color: #FFFFFF; white-space: nowrap;
    background: linear-gradient(135deg, #B5453A 0%, #D85B4F 25%, #B5453A 50%, #9A3231 75%, #7A1420 100%);
    background-size: 200% 200%;
    animation: ik-liquid-flow 4s ease-in-out infinite;
    transition: box-shadow 350ms ease;
}
.ik-nl__form button:hover { box-shadow: 0 0 16px rgba(216, 91, 79, 0.38), 0 0 36px rgba(181, 69, 58, 0.15); }
.ik-nl__form button:focus-visible, .ik-nl__form input:focus-visible { outline: 1.5px solid var(--ik-red, #B5453A); outline-offset: 2px; }
@keyframes ik-liquid-flow { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
.ik-nl__klein { margin: 14px 0 0; font: 400 12px/1.5 var(--a-body); color: var(--a-text-2); }
.ik-nl__klein a { color: var(--a-text-2); text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 1024px) {
    .ik-nl { padding: 80px var(--a-gutter) 88px; }
    .ik-nl__in {
        max-width: 1040px;
        display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); column-gap: 72px; align-items: start;
        grid-template-areas: "kopf nutzen" "titel nutzen" "sub nutzen" "form nutzen" "klein nutzen";
    }
    .ik-nl__kopf { grid-area: kopf; }
    .ik-nl__titel { grid-area: titel; }
    .ik-nl__sub { grid-area: sub; }
    .ik-nl__form { grid-area: form; }
    .ik-nl__klein { grid-area: klein; }
    .ik-nl__nutzen { grid-area: nutzen; align-self: center; margin: 0; gap: 22px; }
    .ik-nl__nutzen li { grid-template-columns: 56px 1fr; column-gap: 20px; }
    .ik-nl__nutzen .ik-picto { width: 56px; height: 56px; --sw: 1.46; }
    .ik-nl__nutzen span:last-child { font-size: 17px; }
}
@media (max-width: 599px) {
    .ik-nl { padding: 44px var(--a-gutter) 52px; }
    .ik-nl__form { flex-direction: column; border: 0; background: transparent; gap: 12px; }
    .ik-nl__form input { border: 1px solid var(--a-line); background: #FFFFFF; font-size: 18px; padding: 14px 16px; }
    .ik-nl__form input:focus { border-color: var(--a-black); }
    .ik-nl__form button { width: 100%; }
}

/* Sammler-Variante (Magazin): ohne Piktogramme, gleiche Form */
.ik-nl--sammler .ik-nl__in { max-width: var(--a-col); display: block; }
.ik-nl--sammler .ik-nl__titel { font-size: clamp(28px, 3.4vw, 36px); }

/* --------------------------------------------------------------------------
   Newsletter inline (v2): derselbe Block, jetzt im Fliesstext vor der
   mittleren Kapitelgrenze (build.py newsletter_einschieben). Schmaler als
   vorher, Nutzen-Zeilen bleiben unter dem Text statt daneben, darum bei
   jeder Breite einspaltig -- die Desktop-Zweispalte von .ik-nl bleibt aus.
   Selektoren zwei Klassen tief, damit sie .ik-prose h2/p/ul unabhaengig
   von der Reihenfolge im Stylesheet schlagen (Spezifitaet vor Fliesstext).
   -------------------------------------------------------------------------- */
.ik-nl.ik-nl--inline {
    margin: 56px 0 48px; padding: 32px 24px 36px; background: var(--a-gray);
}
.ik-nl--inline .ik-nl__in { max-width: none; margin: 0; }
.ik-nl--inline .ik-nl__titel {
    margin: 0 0 14px;
    font: 300 clamp(26px, 3.4vw, 32px)/1.15 var(--a-head); letter-spacing: -0.02em;
    color: var(--a-black); text-wrap: balance;
}
.ik-nl--inline .ik-nl__sub {
    margin: 0 0 24px; font: 400 16px/1.6 var(--a-body); color: var(--a-text-2); max-width: none;
}
.ik-nl--inline .ik-nl__nutzen {
    list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px;
}
.ik-nl--inline .ik-nl__nutzen li {
    position: static; margin: 0; padding: 0;
    display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: center;
}
.ik-nl--inline .ik-nl__nutzen li::before { content: none; }
.ik-nl--inline .ik-nl__klein { margin: 14px 0 0; font: 400 12px/1.5 var(--a-body); color: var(--a-text-2); }
@media (min-width: 768px) {
    .ik-nl.ik-nl--inline { padding: 40px 40px 44px; }
}
@media (min-width: 1024px) {
    /* Beat die Desktop-Zweispalte von .ik-nl__in (Zeile ~376): Einschub bleibt einspaltig */
    .ik-nl--inline .ik-nl__in { display: block; max-width: none; }
    .ik-nl--inline .ik-nl__nutzen { margin: 0 0 28px; gap: 14px; }
    .ik-nl--inline .ik-nl__nutzen li { grid-template-columns: 40px 1fr; column-gap: 16px; }
    .ik-nl--inline .ik-nl__nutzen .ik-picto { width: 40px; height: 40px; --sw: 2.04; }
    .ik-nl--inline .ik-nl__nutzen span:last-child { font-size: 16px; }
}
@media (max-width: 599px) {
    .ik-nl.ik-nl--inline { padding: 28px 20px 32px; margin: 48px 0 40px; }
}

/* --------------------------------------------------------------------------
   Akademie-Block am Ende (v2, nur Blog): Text von der Live-Seite /akademie/.
   Dunkelflaeche ausschliesslich #0A0A0A (Brand-Guide: Aubergine gestrichen
   2026-09-16), Ghost-Dark-Knopf -- kein gefuellter Button ausserhalb von
   Formularen. Letzter Block im Artikel, danach nur noch das helle
   "Weiterlesen": nie zwei dunkle Flaechen aneinander.
   -------------------------------------------------------------------------- */
.ik-aka { margin: 72px 0 0; padding: 64px var(--a-gutter) 72px; background: var(--a-black); }
.ik-aka__in { max-width: var(--a-col); margin: 0 auto; }
.ik-aka__kopf { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.ik-aka__kopf .ik-label { margin: 0; color: rgba(255, 255, 255, 0.7); }
.ik-aka__titel {
    margin: 0 0 16px; font: 300 clamp(28px, 3.6vw, 38px)/1.15 var(--a-head); letter-spacing: -0.02em;
    color: #FFFFFF; text-wrap: balance;
}
.ik-aka__sub { margin: 0 0 32px; font: 400 17px/1.65 var(--a-body); color: rgba(255, 255, 255, 0.78); max-width: 34em; }
.ik-aka__zahlen {
    display: flex; flex-wrap: wrap; gap: 24px 40px; margin: 0 0 36px;
    padding-top: 24px; border-top: 0.5px solid rgba(255, 255, 255, 0.22);
}
.ik-aka__zahl { display: flex; flex-direction: column; gap: 4px; }
.ik-aka__zahl b { font: 300 32px/1 var(--a-head); letter-spacing: -0.02em; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.ik-aka__zahl span { font: 400 13px/1.4 var(--a-body); color: rgba(255, 255, 255, 0.7); }
@media (min-width: 768px) {
    .ik-aka { padding: 88px var(--a-gutter) 96px; }
    .ik-aka__zahl b { font-size: 40px; }
}

/* Ghost-Dark-Button (Brand-Guide: einzig zulaessige Standalone-CTA auf Dunkel) */
.ik-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px;
    font: 500 14px/1 var(--a-body); letter-spacing: 0.01em;
    padding: 14px 24px; border-radius: 0; cursor: pointer; text-decoration: none;
    transition: border-color 200ms ease;
}
.ik-btn--ghost-dark { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.35); }
.ik-btn--ghost-dark:hover { border-color: rgba(255, 255, 255, 0.6); }
.ik-btn:focus-visible { outline: 1.5px solid #FFFFFF; outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Weiterlesen
   -------------------------------------------------------------------------- */
.ik-weiter { max-width: 1152px; margin: 0 auto; padding: 72px var(--a-gutter) 96px; }
.ik-weiter__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.ik-weiter__kopf h2 { margin: 0; font: 300 clamp(28px, 3vw, 34px)/1.15 var(--a-head); letter-spacing: -0.02em; }
.ik-weiter__kopf a { font: 500 13px/1.4 var(--a-body); color: var(--a-black); text-decoration: none; white-space: nowrap; padding: 13px 0; }
.ik-weiter__kopf a:hover { color: var(--ik-red, #B5453A); }
.ik-weiter__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ik-karte { display: block; text-decoration: none; color: var(--a-black); }
.ik-karte__bild { aspect-ratio: 3 / 2; overflow: hidden; background: var(--a-gray); margin-bottom: 16px; }
.ik-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 250ms ease; }
.ik-karte:hover .ik-karte__bild img { opacity: 0.88; }
.ik-karte .ik-label { margin-bottom: 6px; }
.ik-karte h3 { margin: 0; font: 500 19px/1.3 var(--a-head); letter-spacing: -0.005em; text-wrap: balance; }
@media (max-width: 767px) {
    .ik-weiter { padding: 56px var(--a-gutter) 72px; }
    .ik-weiter__liste { grid-template-columns: 1fr; gap: 20px; }
    .ik-karte { display: grid; grid-template-columns: 112px 1fr; column-gap: 16px; align-items: start; }
    .ik-karte__bild { margin: 0; aspect-ratio: 1 / 1; }
    .ik-karte h3 { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .ik-nl__form button { animation: none; background-position: 50% 50%; }
    .ik-plus::before, .ik-plus::after, .ik-prose a, .ik-karte__bild img { transition: none; }
}