/* STUDIO Leseansicht für Blogartikel (post.hbs → article.hbs mit reading=true).
   Ein Raster für alles: Text in einer Spalte von höchstens 680px (etwa 70 Zeichen pro Zeile), Bilder „breit“ laufen
   bis 1080px, Bilder „ganze Breite“ bis zum Rand mit schmalem weißem Rand und runden Ecken wie das Startbild.
   Abstände kommen aus wenigen Größen in em, darum wachsen sie mit der Schrift:
   Absatz zu Absatz klein, vor Bildern und Karten mittel, vor Zwischenüberschriften groß. Über einer Überschrift
   ist immer mehr Platz als darunter, so gehört sie sichtbar zum folgenden Text.
   Schrift: Inter, Text 18 bis 20px, Überschriften in Stufen von etwa 1,25. Karten aus dem Editor als hellgraue Kacheln.
   Alte Regeln aus post-content.css mit !important gelten hier nicht (dort mit :not(.post-reading *) ausgenommen). */

.post-reading {
    --r-text: var(--text-color);
    --r-muted: #707070;
    --r-line: #E6E6E6;
    --r-tile: #F5F5F5;
    --r-tile-hover: #EDEDED;
    --r-dark: #141414;

    --r-gutter: max(26px, 1.8vw);
    --r-measure: 680px;
    --r-wide: 1080px;

    --r-radius: clamp(12px, 1.1vw, 18px);
    --r-radius-big: clamp(20px, 2.4vw, 40px);

    --r-size: clamp(18px, 17px + 0.14vw, 20px);
    --r-leading: 1.65;

    /* Abstände als Vielfache der Textgröße. Bewusst nicht in em: Sonst wüchse der Abstand mit der Schrift
       des Elements selbst, über einer großen Überschrift oder einem großen Zitat wäre er dann viel größer als darunter */
    --r-gap: calc(var(--r-size) * 1.05);        /* Absatz zu Absatz */
    --r-gap-block: calc(var(--r-size) * 2.4);   /* vor und nach Bildern, Zitaten, Karten */
    --r-gap-quote: calc(var(--r-size) * 2.9);   /* vor und nach dem großen Zitat, gleich viel */
    --r-gap-h2: calc(var(--r-size) * 6.4);      /* vor einer H2 */
    --r-gap-h3: calc(var(--r-size) * 3.2);
    --r-gap-h4: calc(var(--r-size) * 2);
    --r-gap-h2-h3: calc(var(--r-size) * 1.5);
    --r-after-h2: calc(var(--r-size) * 1.6);    /* zwischen Überschrift und Text */
    --r-after-h3: calc(var(--r-size) * 0.8);
    --r-after-h4: calc(var(--r-size) * 0.4);
    --r-after-heading-block: calc(var(--r-size) * 1.6);

    counter-reset: r-chapter;
}

@media (max-width: 767px) {
    .post-reading {
        --r-gutter: 18px;
        --r-leading: 1.6;
        --r-gap-block: calc(var(--r-size) * 2);
        --r-gap-quote: calc(var(--r-size) * 2.4);
        --r-gap-h2: calc(var(--r-size) * 4.6);
        --r-gap-h3: calc(var(--r-size) * 2.6);
        --r-after-h2: calc(var(--r-size) * 1.3);
    }
}

.post-reading [hidden] {
    display: none !important;
}


/* ============ Kopf ============ */

.post-reading .post-hero {
    display: flex;
    flex-direction: column;
    width: min(var(--r-wide) + 2 * var(--r-gutter), 100%);
    margin: 0 auto;
    padding: max(150px, calc(10.4vw * var(--scale))) var(--r-gutter) 0;
}

.post-reading .post-hero > * {
    min-width: 0;
}

/* Mit Titelbild genau ein Bildschirm hoch: Das Bild wächst in den Platz, den Datum, Titel und Einleitung übrig lassen
   (es wird dafür passend beschnitten). Beim ersten Scrollen beginnt der Text. Das Bild behält eine Mindesthöhe,
   am Handy reicht der Platz darum oft nicht ganz, dann beginnt das Bild am unteren Rand.
   Über dem Artikel hält main Platz für das senkrechte Logo frei (navbar.css). Den ziehen wir hier ab. */
.post-reading {
    --r-above: max(0px, calc(var(--logo-vertical-height) - var(--logo-vertical-offset)));
}

.post-reading .post-hero:has(.post-hero-image) {
    min-height: calc(100svh - var(--r-above));
    padding-bottom: var(--r-gutter);
}

/* Breite Bildschirme: Der Kopf steht rechts neben dem Logo, der Platz darüber ist nicht nötig */
@media (min-width: 1240px) {
    .site-main > main:has(> .post-reading) {
        padding-top: 0;
    }

    .post-reading {
        --r-above: 0px;
    }

    .post-reading .post-hero {
        padding-top: max(132px, calc(9.2vw * var(--scale)));
    }
}

.post-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    color: var(--r-muted);
    font-family: var(--font2);
    font-size: 15px;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.post-hero-when {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
}

.post-hero-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: currentColor;
}

.post-reading .post-hero-title {
    max-width: 18ch;
    margin: max(22px, 1.6vw) 0 0 -0.04em;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: clamp(40px, 5.6vw, 88px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.045em;
    text-wrap: balance;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Getrennter Titel: Thema schwarz, Aussage grau und etwas breiter, damit sie nicht zu viele Zeilen braucht */
.post-reading .post-hero-title.is-split {
    max-width: 22ch;
}

.post-title-head,
.post-title-tail {
    display: block;
}

.post-title-tail {
    color: var(--r-muted);
}

.post-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.post-reading .post-hero-excerpt {
    max-width: 34em;
    margin-top: max(22px, 1.7vw);
    color: var(--r-text);
    font-family: var(--font2);
    font-size: clamp(19px, 1.45vw, 23px);
    line-height: 1.45;
    letter-spacing: -0.015em;
    text-wrap: pretty;
}

.post-hero-image {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    margin-top: max(40px, 3.2vw);
}

.post-hero-image-frame {
    position: relative;
    flex: 1 1 auto;
    min-height: max(200px, 28svh);
    border-radius: var(--r-radius-big);
    background-color: var(--r-tile);
    overflow: hidden;
}

.post-hero-image-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-reading .post-hero-image figcaption {
    margin-top: 12px;
    color: var(--r-muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
}


/* ============ Raster des Textes ============ */

.post-reading .post-content {
    display: block;
    width: 100%;
}

.post-reading .post-content-inner-wrapper {
    margin-top: max(64px, 5vw);
}

.post-reading[data-has-featured-image='false'] .post-content-inner-wrapper,
.post-reading:has(.post-hero-excerpt):not(:has(.post-hero-image)) .post-content-inner-wrapper {
    margin-top: max(56px, 4.4vw);
}

.post-reading .post-content-inner {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--r-gutter), 1fr)
        [wide-start] minmax(0, calc((var(--r-wide) - var(--r-measure)) / 2))
        [content-start] min(var(--r-measure), 100% - 2 * var(--r-gutter))
        [content-end] minmax(0, calc((var(--r-wide) - var(--r-measure)) / 2))
        [wide-end] minmax(var(--r-gutter), 1fr) [full-end];
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--r-text);
    font-family: var(--font2);
    font-size: var(--r-size);
    line-height: var(--r-leading);
    letter-spacing: -0.011em;
    font-optical-sizing: auto;
}

.post-reading .post-content-inner > * {
    grid-column: content;
    min-width: 0;
    margin: 0;
}

.post-reading .post-content-inner > .kg-width-wide,
.post-reading .post-content-inner > .kg-gallery-card {
    grid-column: wide;
}

.post-reading .post-content-inner > .kg-width-full {
    grid-column: full;
    margin-inline: var(--r-gutter);
}

/* Abstände. Rasterzellen fassen Ränder nicht zusammen, darum hat jedes Element nur Platz nach oben.
   Die Reihenfolge der Regeln ist gewollt: Spätere gewinnen. */

.post-reading .post-content-inner > * + * {
    margin-top: var(--r-gap);
}

.post-reading .post-content-inner > :is(figure, blockquote, aside, hr, pre, table, .kg-card, .kg-blockquote-alt, iframe, div:not([class])) ,
.post-reading .post-content-inner > :is(figure, blockquote, aside, hr, pre, table, .kg-card, .kg-blockquote-alt, iframe, div:not([class])) + * {
    margin-top: var(--r-gap-block);
}

.post-reading .post-content-inner > :first-child {
    margin-top: 0;
}

/* Karten direkt untereinander (zwei Bilder, mehrere Klappkarten) rücken zusammen */
.post-reading .post-content-inner > :is(.kg-image-card, .kg-gallery-card):not(.kg-card-hascaption) + :is(.kg-image-card, .kg-gallery-card) {
    margin-top: 10px;
}

.post-reading .post-content-inner > .kg-toggle-card + .kg-toggle-card,
.post-reading .post-content-inner > .kg-callout-card + .kg-callout-card,
.post-reading .post-content-inner > .kg-bookmark-card + .kg-bookmark-card,
.post-reading .post-content-inner > .kg-file-card + .kg-file-card {
    margin-top: 10px;
}

.post-reading .post-content-inner > * + h2 { margin-top: var(--r-gap-h2); }
.post-reading .post-content-inner > * + h3 { margin-top: var(--r-gap-h3); }
.post-reading .post-content-inner > * + :is(h4, h5, h6) { margin-top: var(--r-gap-h4); }
.post-reading .post-content-inner > h2 + h3 { margin-top: var(--r-gap-h2-h3); }

.post-reading .post-content-inner > h2 + * { margin-top: var(--r-after-h2); }
.post-reading .post-content-inner > h3 + * { margin-top: var(--r-after-h3); }
.post-reading .post-content-inner > :is(h4, h5, h6) + * { margin-top: var(--r-after-h4); }
.post-reading .post-content-inner > :is(h2, h3, h4, h5, h6) + :is(figure, blockquote, aside, pre, table, .kg-card, .kg-blockquote-alt) { margin-top: var(--r-after-heading-block); }


/* ============ Text ============ */

.post-reading .post-content-inner p,
.post-reading .post-content-inner li {
    color: var(--r-text);
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.post-reading .post-content-inner > p {
    text-wrap: pretty;
    hanging-punctuation: first;
}

/* Der erste Absatz ist der Einstieg: etwas größer, so findet das Auge den Anfang */
.post-reading .post-content-inner > p:first-child {
    font-size: 1.14em;
    line-height: 1.55;
    letter-spacing: -0.016em;
}

.post-reading .post-content-inner strong,
.post-reading .post-content-inner b {
    color: var(--r-text);
    font-weight: 600;
}

.post-reading .post-content-inner em,
.post-reading .post-content-inner i {
    font-style: italic;
}

.post-reading .post-content-inner a:not([class]) {
    color: var(--r-text);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, var(--r-text) 35%, transparent);
    transition: text-decoration-color .2s ease;
}

.post-reading .post-content-inner a:not([class]):hover {
    text-decoration-color: var(--r-text);
}

.post-reading .post-content-inner a:not([class]):focus-visible {
    outline: 2px solid var(--r-text);
    outline-offset: 2px;
    border-radius: 3px;
}

.post-reading .post-content-inner mark {
    padding: 0.05em 0.2em;
    border-radius: 4px;
    background-color: #E9E9E9;
    color: var(--r-text);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.post-reading .post-content-inner :not(pre) > code {
    padding: 0.12em 0.36em;
    border-radius: 6px;
    background-color: var(--r-tile);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.86em;
    letter-spacing: 0;
}

.post-reading .post-content-inner sup,
.post-reading .post-content-inner sub {
    font-size: 0.7em;
    line-height: 0;
}

/* Am Handy dürfen lange deutsche Wörter getrennt werden, sonst reißen sie Löcher in die Zeilen */
@media (max-width: 600px) {
    .post-reading .post-content-inner > p,
    .post-reading .post-content-inner li {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
}


/* ============ Überschriften ============ */

.post-reading .post-content-inner > :is(h2, h3, h4, h5, h6) {
    color: var(--r-text);
    font-family: var(--font1);
    font-weight: 500;
    text-wrap: balance;
    scroll-margin-top: 110px;
}

/* H2 ist ein neues Kapitel: kleine graue Nummer darüber, wie in der Übersicht der Lese-Pille */
.post-reading .post-content-inner > h2 {
    counter-increment: r-chapter;
    font-size: clamp(28px, 1.3em + 0.7vw, 38px);
    line-height: 1.12;
    letter-spacing: -0.032em;
}

.post-reading .post-content-inner > h2::before {
    content: counter(r-chapter, decimal-leading-zero);
    display: block;
    margin-bottom: 0.7em;
    color: var(--r-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.post-reading .post-content-inner > h3 {
    font-size: clamp(22px, 1.25em, 25px);
    line-height: 1.25;
    letter-spacing: -0.022em;
}

.post-reading .post-content-inner > h4 {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.012em;
}

.post-reading .post-content-inner > h5 {
    font-size: 0.9em;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.005em;
}

.post-reading .post-content-inner > h6 {
    color: var(--r-muted);
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}


/* ============ Listen ============ */

.post-reading .post-content-inner :is(ul, ol) {
    margin-top: 0;
    padding-left: 0;
    list-style: none;
}

.post-reading .post-content-inner > :is(ul, ol) {
    margin-top: var(--r-gap);
}

.post-reading .post-content-inner li {
    position: relative;
    margin: 0;
    padding-left: 1.5em;
}

.post-reading .post-content-inner li + li {
    margin-top: 0.55em;
}

.post-reading .post-content-inner li > :is(ul, ol) {
    margin-top: 0.55em;
    padding-top: 0;
}

/* Punkt: klein, rund, auf Höhe der Kleinbuchstaben der ersten Zeile */
.post-reading .post-content-inner ul > li::before {
    content: "";
    position: absolute;
    top: calc(var(--r-leading) * 0.5em - 0.16em);
    left: 0.4em;
    width: 0.32em;
    height: 0.32em;
    border-radius: 50%;
    background-color: currentColor;
}

.post-reading .post-content-inner ul ul > li::before {
    background-color: transparent;
    box-shadow: inset 0 0 0 1.2px currentColor;
}

/* Nummern grau und zweistellig wie in der Übersicht: 01, 02 */
.post-reading .post-content-inner ol {
    counter-reset: r-list;
}

.post-reading .post-content-inner ol > li {
    counter-increment: r-list;
    padding-left: 2em;
}

.post-reading .post-content-inner ol > li::before {
    content: counter(r-list, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--r-muted);
    font-size: 0.82em;
    font-weight: 500;
    line-height: calc(var(--r-leading) / 0.82 * 1em);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
}


/* ============ Zitate ============ */

/* Zitat (erster Klick auf Zitat im Editor): leise, aber klar eine fremde Stimme. Text so groß wie der Lauftext,
   kursiv und etwas eingerückt, davor hängt ein kleines graues rundes Anführungszeichen. Keine Kachel, kein Fett:
   So sieht es nie nach Überschrift aus und verträgt sich auch mehrfach im Artikel mit dem Rest */
.post-reading .post-content-inner > blockquote:not(.kg-blockquote-alt) {
    position: relative;
    padding: 0 0 0 2.1em;
    border: 0;
    background: none;
    color: var(--r-text);
    font-family: var(--font2);
    font-size: 1.04em;
    font-style: italic;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.012em;
    text-wrap: pretty;
}

.post-reading .post-content-inner > blockquote:not(.kg-blockquote-alt)::before {
    content: "";
    position: absolute;
    top: 0.35em;
    left: 0.15em;
    width: 1.1em;
    height: 0.95em;
    background-color: #BDBDBD;
    -webkit-mask: var(--r-quote-mark) center / contain no-repeat;
    mask: var(--r-quote-mark) center / contain no-repeat;
}

.post-reading {
    --r-quote-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 15'%3E%3Cpath d='M5 1.2C2.4 2.6.8 5 .8 8.2v2.9a3 3 0 0 0 3 3h1.1a3 3 0 0 0 3-3v-.6a3 3 0 0 0-3-3H3.6c.2-1.6 1.1-2.9 2.6-3.9z M14.6 1.2c-2.6 1.4-4.2 3.8-4.2 7v2.9a3 3 0 0 0 3 3h1.1a3 3 0 0 0 3-3v-.6a3 3 0 0 0-3-3h-1.3c.2-1.6 1.1-2.9 2.6-3.9z'/%3E%3C/svg%3E");
}

/* Weniger Abstand als bei Bildern: Das Zitat gehört zum Lauftext */
.post-reading .post-content-inner > blockquote:not(.kg-blockquote-alt),
.post-reading .post-content-inner > blockquote:not(.kg-blockquote-alt) + :not(h2, h3, h4, h5, h6) {
    margin-top: calc(var(--r-size) * 1.7);
}

.post-reading .post-content-inner > blockquote:not(.kg-blockquote-alt) em {
    font-style: normal;
}

/* Zitat groß (zweiter Klick im Editor): Kernsatz zum Hängenbleiben. Groß, darüber nur ein kurzer runder Strich. Oben und unten gleich viel Luft, etwas mehr als bei Bildern:
   Der Satz steht für sich, der Text läuft aber ohne Bruch weiter */
.post-reading .post-content-inner > .kg-blockquote-alt {
    padding: 0;
    border: 0;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: clamp(26px, 1.25em + 0.75vw, 36px);
    font-style: normal;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.032em;
    text-align: left;
    text-wrap: balance;
}

.post-reading .post-content-inner > .kg-blockquote-alt::before {
    content: "";
    display: block;
    width: 36px;
    height: 3px;
    margin-bottom: 0.6em;
    border-radius: 3px;
    background-color: var(--r-text);
}

.post-reading .post-content-inner > .kg-blockquote-alt,
.post-reading .post-content-inner > .kg-blockquote-alt + :not(h2, h3, h4, h5, h6) {
    margin-top: var(--r-gap-quote);
}

.post-reading .post-content-inner > :is(blockquote, .kg-blockquote-alt) p {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.post-reading .post-content-inner > :is(blockquote, .kg-blockquote-alt) p + p {
    margin-top: 0.6em;
}

.post-reading .post-content-inner > :is(blockquote, .kg-blockquote-alt) em {
    font-style: italic;
}


/* ============ Trennlinie ============ */

/* Drei kleine Punkte statt einer harten Linie: eine Pause im Text */
.post-reading .post-content-inner > hr {
    position: relative;
    height: 6px;
    background: none;
    border: 0;
}

.post-reading .post-content-inner > hr::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--r-text);
    box-shadow: -20px 0 0 var(--r-text), 20px 0 0 var(--r-text);
}

.post-reading .post-content-inner > hr + * {
    margin-top: var(--r-gap-block);
}


/* ============ Bilder und Galerien ============ */

.post-reading .post-content-inner figure {
    text-align: left;
}

.post-reading .kg-image-card {
    margin-bottom: 0;
}

/* Bilder füllen immer ihre Spalte: Text, breit oder ganze Breite. So bleibt die Kante links und rechts ruhig */
.post-reading .kg-image-card img,
.post-reading .kg-image-card picture {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-radius);
}

/* Hochformat (js/post-reading.js setzt is-portrait): In voller Breite wäre es zu hoch und schöbe den Text weg.
   Am Computer steht es darum schmaler links, die Bildunterschrift unten rechts daneben, wie in einem Magazin.
   Ohne Bildunterschrift steht es mittig. Am Handy höchstens drei Viertel des Bildschirms hoch */
@media (min-width: 768px) {
    .post-reading .post-content-inner > .kg-image-card.is-portrait:not(.kg-width-wide, .kg-width-full) {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 24px;
        height: max-content; /* sonst zählt Chrome den Abstand darüber doppelt und unten fehlt Luft */
    }

    .post-reading .post-content-inner > .kg-image-card.is-portrait.kg-card-hascaption:not(.kg-width-wide, .kg-width-full) {
        justify-content: flex-start;
    }

    /* Breite aus dem Seitenverhältnis (--r-ratio setzt js/post-reading.js), so steht das Bild schon vor dem Laden richtig.
       Ohne Prozent: Das Raster misst sonst die Höhe falsch und lässt Platz über dem Bild */
    .post-reading .kg-image-card.is-portrait:not(.kg-width-wide, .kg-width-full) img {
        flex: none;
        width: min(0.58 * min(var(--r-measure), 100vw - 2 * var(--r-gutter)), min(72svh, 620px) * var(--r-ratio, 0.8));
    }

    .post-reading .kg-image-card.is-portrait:not(.kg-width-wide, .kg-width-full) figcaption {
        flex: 1;
        margin-top: 0;
        padding-bottom: 2px;
    }
}

@media (max-width: 767px) {
    .post-reading .kg-image-card.is-portrait img {
        width: min(100vw - 2 * var(--r-gutter), 75svh * var(--r-ratio, 0.8));
        margin-inline: auto;
    }
}

.post-reading .kg-image-card.kg-width-full img {
    border-radius: var(--r-radius-big);
}

.post-reading .kg-gallery-card {
    --gap: 8px;
}

.post-reading .kg-gallery-row:not(:first-of-type) {
    margin-top: var(--gap);
}

.post-reading .kg-gallery-image:not(:first-of-type) {
    margin-left: var(--gap);
}

.post-reading .kg-gallery-image img {
    border-radius: calc(var(--r-radius) * 0.7);
    object-fit: cover;
    background-color: var(--r-tile);
}

/* Bildunterschrift: klein, grau, linksbündig an der Kante des Bildes */
.post-reading .post-content-inner figcaption {
    max-width: 60ch;
    margin-top: 12px;
    color: var(--r-muted);
    font-family: var(--font2);
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.005em;
    text-align: left;
    text-wrap: pretty;
}

.post-reading .post-content-inner figcaption a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Beim Scrollen kommen Bilder ruhig hoch. Nur wo der Browser das ohne JavaScript kann, nie bei „Bewegung reduzieren“ */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .post-reading .post-content-inner > :is(.kg-image-card, .kg-gallery-card, .kg-video-card) {
            animation: r-rise linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 70%;
        }
    }
}

/* Bild-Zoom (Lightense): Die Bewegung oben macht das Bild zu einer eigenen Ebene, dann läge das große Bild
   unter dem weißen Hintergrund und man sähe nichts. Solange ein Bild offen ist, ruht die Bewegung */
.post-reading .post-content-inner > :has(.lightense-open, .lightense-transitioning, .lightense-wrap) {
    animation: none !important;
}

@keyframes r-rise {
    from {
        opacity: 0.25;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}


/* ============ Lesezeichen (Link als Kachel) ============ */

.post-reading .kg-bookmark-card {
    width: 100%;
}

.post-reading .kg-bookmark-card a.kg-bookmark-container {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 132px;
    padding: 6px;
    border: 0;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    color: var(--r-text);
    text-decoration: none;
    overflow: hidden;
    transition: background-color .25s ease;
}

.post-reading .kg-bookmark-card a.kg-bookmark-container:hover {
    background-color: var(--r-tile-hover);
    border: 0;
}

.post-reading .kg-bookmark-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
}

.post-reading .kg-bookmark-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--r-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.post-reading .kg-bookmark-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: none;
    margin-top: 6px;
    overflow: hidden;
    color: var(--r-muted);
    font-size: 15px;
    line-height: 1.45;
    letter-spacing: -0.005em;
}

.post-reading .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    color: var(--r-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
}

.post-reading .kg-bookmark-metadata > * {
    margin: 0;
}

.post-reading .kg-bookmark-icon {
    width: 18px;
    height: 18px;
    flex: none;
    border-radius: 5px;
}

.post-reading .kg-bookmark-author,
.post-reading .kg-bookmark-publisher {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ghost schreibt den Namen der Seite zweimal. Wir zeigen ihn einmal */
.post-reading .kg-bookmark-publisher,
.post-reading .kg-bookmark-metadata > span:nth-of-type(2)::before {
    display: none;
}

/* Pfeil im schwarzen Kreis, wie im Knopf „Newsletter“. Dreht beim Drüberfahren */
.post-reading .kg-bookmark-metadata::after {
    content: "";
    flex: none;
    width: 28px;
    height: 28px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--r-text) var(--r-arrow-light) center / 15px no-repeat;
    transition: transform .5s var(--ease-transition);
}

.post-reading .kg-bookmark-container:hover .kg-bookmark-metadata::after,
.post-reading .kg-bookmark-container:focus-visible .kg-bookmark-metadata::after {
    transform: rotate(-45deg);
}

.post-reading .kg-bookmark-thumbnail {
    position: relative;
    flex: 0 0 auto;
    width: var(--r-thumb);
    min-height: 0;
    max-height: none;
    border-radius: calc(var(--r-radius) - 6px);
    overflow: hidden;
}

.post-reading .kg-bookmark-card {
    --r-thumb: min(32%, 210px);
}

.post-reading .kg-bookmark-card:not(:has(.kg-bookmark-thumbnail)) {
    --r-thumb: 0px;
}

.post-reading .kg-bookmark-thumbnail img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
    transition: transform .6s var(--ease-transition);
}

.post-reading .kg-bookmark-container:hover .kg-bookmark-thumbnail img {
    transform: scale(1.04);
}

@media (max-width: 520px) {
    .post-reading .kg-bookmark-card {
        --r-thumb: 30%;
    }

    .post-reading .kg-bookmark-title {
        font-size: 16px;
    }

    .post-reading .kg-bookmark-description {
        -webkit-line-clamp: 2;
        font-size: 14px;
    }

    .post-reading .kg-bookmark-content {
        padding: 10px 10px 10px 12px;
    }
}


/* ============ Hinweis-Kachel (Callout) ============ */

/* Alle Farben aus dem Editor werden hellgrau, „Accent“ wird dunkel. So bleibt die Seite schwarz-weiß */
.post-reading .kg-callout-card {
    display: flex;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    color: var(--r-text);
    font-size: 0.95em;
    line-height: 1.55;
}

.post-reading .kg-callout-card-white {
    background-color: var(--background-color);
    box-shadow: inset 0 0 0 1px var(--r-line);
}

.post-reading .kg-callout-card-accent {
    background-color: var(--r-dark);
    color: #FFFFFF;
}

.post-reading .kg-callout-card-accent :is(a, strong, em, .kg-callout-text) {
    color: #FFFFFF !important;
}

.post-reading .kg-callout-card div.kg-callout-emoji {
    flex: none;
    font-size: 1.15em;
    line-height: 1.35;
}

.post-reading .kg-callout-card div.kg-callout-text {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}


/* ============ Klappkarte (Toggle) ============ */

.post-reading .kg-toggle-card {
    padding: 0;
    border: 0;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    box-shadow: none;
    overflow: hidden;
}

.post-reading .kg-toggle-card .kg-toggle-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 16px 16px 22px;
    cursor: pointer;
}

.post-reading .kg-toggle-card h4.kg-toggle-heading-text {
    flex: 1;
    margin: 0;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.012em;
}

.post-reading .kg-toggle-card .kg-toggle-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--r-text);
    cursor: pointer;
}

.post-reading .kg-toggle-card .kg-toggle-card-icon svg {
    width: 12px;
    height: 12px;
    transition: transform .4s var(--ease-transition);
}

.post-reading .kg-toggle-card .kg-toggle-card-icon svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4px;
}

.post-reading .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon svg {
    transform: rotate(180deg);
}

.post-reading .kg-toggle-card .kg-toggle-content {
    padding: 0 22px 20px;
    color: var(--r-text);
    font-size: 0.95em;
    line-height: 1.6;
}

.post-reading .kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content {
    display: none;
}

.post-reading .kg-toggle-card .kg-toggle-content > * + * {
    margin-top: 0.8em;
}


/* ============ Knöpfe ============ */

/* Knopf aus dem Editor und Knöpfe im Ende des Artikels: schwarze Pille mit weißem Pfeilkreis,
   die Umkehrung des Knopfs „Newsletter“ oben in der Navigation */
.post-reading .kg-button-card {
    display: flex;
    justify-content: center;
}

.post-reading .kg-button-card.kg-align-left {
    justify-content: flex-start;
}

.post-reading .kg-button-card a.kg-btn,
.post-reading .kg-header-card a.kg-header-card-button,
.post-reading .kg-product-card a.kg-product-card-button,
.post-pill-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 7px 0 22px;
    border: 0;
    border-radius: 999px;
    background-color: var(--r-text);
    color: var(--background-color) !important;
    font-family: var(--font2);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s ease;
}

.post-reading .kg-button-card a.kg-btn::after,
.post-reading .kg-header-card a.kg-header-card-button::after,
.post-reading .kg-product-card a.kg-product-card-button::after {
    content: "";
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--background-color) var(--r-arrow-dark) center / 17px no-repeat;
    transition: transform .5s var(--ease-transition);
}

.post-reading {
    --r-arrow-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.92308 5L15 10.0769L9.92308 15.1538M14.2949 10.0769L4 10.0769' stroke='white' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
    --r-arrow-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M9.92308 5L15 10.0769L9.92308 15.1538M14.2949 10.0769L4 10.0769' stroke='%23141414' stroke-width='1.4' stroke-linecap='square'/%3E%3C/svg%3E");
}

.post-reading .kg-button-card a.kg-btn:hover::after,
.post-reading .kg-header-card a.kg-header-card-button:hover::after,
.post-reading .kg-product-card a.kg-product-card-button:hover::after {
    transform: rotate(-45deg);
}

.post-reading .kg-button-card a.kg-btn:hover,
.post-pill-button:hover {
    background-color: #000000;
}

.post-pill-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--background-color);
    color: var(--r-text);
}

.post-pill-button-icon svg {
    width: 17px;
    height: 17px;
    transition: transform .5s var(--ease-transition);
}

.post-pill-button:hover .post-pill-button-icon svg,
.post-pill-button:focus-visible .post-pill-button-icon svg {
    transform: rotate(-45deg);
}


/* ============ Newsletter-Karte im Text ============ */

/* Dunkle Karte wie das Cookie-Fenster und der Footer. Ghost setzt Farben direkt am Element, darum !important */
.post-reading .kg-signup-card {
    width: 100% !important;
    max-width: none;
    border-radius: var(--r-radius-big);
    background-color: var(--r-dark) !important;
    overflow: hidden;
}

.post-reading .kg-signup-card .kg-signup-card-content {
    margin: 0;
}

.post-reading .kg-signup-card .kg-signup-card-text {
    padding: clamp(28px, 3.4vw, 48px);
    text-align: left;
    align-items: flex-start;
}

.post-reading .kg-signup-card h2.kg-signup-card-heading {
    margin: 0;
    color: #FFFFFF !important;
    font-family: var(--font1);
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.032em;
    text-wrap: balance;
}

.post-reading .kg-signup-card .kg-signup-card-subheading {
    max-width: 34em;
    margin-top: 12px;
    color: rgba(255, 255, 255, .7) !important;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.008em;
}

.post-reading .kg-signup-card .kg-signup-card-form {
    width: 100%;
    max-width: 460px;
    margin-top: 24px;
}

.post-reading .kg-signup-card .kg-signup-card-fields {
    display: flex;
    gap: 6px;
    height: auto;
    padding: 5px;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .1);
}

.post-reading .kg-signup-card .kg-signup-card-input {
    flex: 1;
    min-width: 0;
    height: 44px;
    padding: 0 16px;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    font-size: 16px;
}

.post-reading .kg-signup-card .kg-signup-card-input::placeholder {
    color: rgba(255, 255, 255, .5);
}

.post-reading .kg-signup-card .kg-signup-card-button {
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background-color: #FFFFFF !important;
    color: var(--r-dark) !important;
    font-size: 15px;
    font-weight: 500;
}

.post-reading .kg-signup-card :is(.kg-signup-card-success, .kg-signup-card-error, .kg-signup-card-disclaimer) {
    color: rgba(255, 255, 255, .7) !important;
    font-size: 14px;
}


/* ============ Einbettungen, Videos, Audio, Datei, Produkt ============ */

.post-reading .kg-embed-card {
    width: 100%;
}

.post-reading .kg-embed-card :is(iframe[src*="youtube"], iframe[src*="vimeo"], iframe[data-src*="youtube"], iframe[data-src*="vimeo"]) {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
}

/* Beitrag von X: Solange X nicht erlaubt ist (Cookie-Banner) oder lädt, steht der Text als ruhige graue Kachel da */
.post-reading .kg-embed-card:has(.twitter-tweet) {
    align-items: stretch;
}

.post-reading .kg-embed-card blockquote.twitter-tweet {
    margin: 0;
    padding: 20px 22px;
    border: 0;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    color: var(--r-text);
    font-family: var(--font2);
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -0.005em;
}

.post-reading .kg-embed-card blockquote.twitter-tweet p {
    font: inherit;
    letter-spacing: inherit;
    margin-bottom: 0.7em;
}

.post-reading .kg-embed-card blockquote.twitter-tweet a {
    color: var(--r-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.post-reading .kg-embed-card .twitter-tweet-rendered {
    margin-inline: auto !important;
}

.post-reading .kg-video-card,
.post-reading .kg-video-card video {
    border-radius: var(--r-radius);
    overflow: hidden;
}

.post-reading .kg-audio-card,
.post-reading .kg-file-card a.kg-file-card-container,
.post-reading .kg-product-card-container,
.post-reading .kg-cta-card {
    border: 0 !important;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    box-shadow: none;
}

.post-reading .kg-file-card a.kg-file-card-container {
    padding: 18px 20px;
    color: var(--r-text);
    text-decoration: none;
    transition: background-color .25s ease;
}

.post-reading .kg-file-card a.kg-file-card-container:hover {
    background-color: var(--r-tile-hover);
}

.post-reading .kg-file-card-contents {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.post-reading .kg-file-card-title {
    line-height: 1.3;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.012em;
}

.post-reading .kg-file-card-caption,
.post-reading .kg-file-card-metadata {
    margin: 0;
    color: var(--r-muted);
    font-size: 14px;
    line-height: 1.4;
}

.post-reading .kg-file-card-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border: 0;
    border-radius: 50%;
    background-color: var(--r-text);
}

.post-reading .kg-file-card-icon svg {
    width: 24px;
    height: 24px;
    color: var(--background-color);
}

.post-reading .kg-product-card-container {
    padding: 22px;
}

.post-reading .kg-product-card-image {
    border-radius: calc(var(--r-radius) - 6px);
}

.post-reading .kg-product-card h4.kg-product-card-title {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.022em;
}

.post-reading .kg-cta-card {
    padding: 22px;
}

.post-reading .kg-cta-card .kg-cta-button {
    border-radius: 999px;
}


/* ============ Code und Tabellen ============ */

.post-reading .post-content-inner > pre {
    padding: 20px 22px;
    border-radius: var(--r-radius);
    background-color: var(--r-dark);
    color: #F5F5F5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14.5px;
    line-height: 1.6;
    letter-spacing: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-reading .post-content-inner > pre code {
    font: inherit;
    color: inherit;
    background: none;
}

.post-reading .post-content-inner table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.post-reading .post-content-inner thead {
    background: none;
    color: var(--r-text);
}

.post-reading .post-content-inner th {
    padding: 0 16px 10px 0;
    border-bottom: 1px solid var(--r-text);
    font-size: inherit;
    font-weight: 600;
    text-align: left;
}

.post-reading .post-content-inner td {
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--r-line);
    font-size: inherit;
    vertical-align: top;
}

/* Breite Tabellen scrollen am Handy seitlich in ihrer Spalte, die Seite bleibt ruhig */
.post-reading .post-content-inner > div:has(> table) {
    overflow-x: auto;
}


/* ============ Header-Karte ============ */

.post-reading .kg-header-card {
    border-radius: var(--r-radius-big);
    overflow: hidden;
}

.post-reading .kg-header-card.kg-width-full {
    border-radius: var(--r-radius-big) !important;
}


/* ============ Beiträge nur für Mitglieder ============ */

/* Ghost zeigt den Anfang und darunter diese Kachel (partials/content-cta.hbs) */
.post-reading .fading-content > * + * {
    margin-top: var(--r-gap);
}

.post-reading .post-upgrade-cta {
    margin-top: var(--r-gap-block);
    padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px);
    border: 0;
    border-radius: var(--r-radius-big);
    background-color: var(--r-tile);
}

.post-reading .post-content .post-upgrade-cta h2 {
    margin: 0;
    color: var(--r-text);
    font-family: var(--font1);
    font-size: clamp(26px, 2.4vw, 34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.032em;
    text-transform: none !important;
    text-wrap: balance;
}

.post-reading .post-upgrade-cta-paragraph {
    max-width: 34em;
    margin: 12px auto 24px;
}

.post-reading .post-upgrade-cta-paragraph p {
    color: var(--r-muted);
    font-size: 16px;
    line-height: 1.5;
}

.post-reading .post-upgrade-cta .button {
    height: 48px;
    padding: 0 24px;
    border-radius: 999px;
}


/* ============ Ende des Artikels ============ */

.post-reading .article-footer {
    padding: 0 var(--r-gutter);
}

.post-end {
    display: grid;
    gap: 14px;
    max-width: var(--r-measure);
    margin: var(--r-gap-h2) auto 0;
    font-family: var(--font2);
}

.post-end-label {
    display: block;
    color: var(--r-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
}

.post-share-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 22px;
    border-top: 1px solid var(--r-line);
}

.post-share-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px 0 10px;
    border: 0;
    border-radius: 999px;
    background-color: var(--r-tile);
    color: var(--r-text);
    font-family: var(--font2);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.post-share-pill:hover {
    background-color: var(--r-tile-hover);
}

.post-share-pill:focus-visible,
.post-neighbour:focus-visible,
.post-pill-button:focus-visible,
.reading-pill-button:focus-visible {
    outline: 2px solid var(--r-text);
    outline-offset: 2px;
}

.post-share-pill-icon {
    justify-content: center;
    width: 40px;
    padding: 0;
}

/* Am Handy steht „Teilen“ vorne. Damit alles in eine Zeile passt, ist „Link kopieren“ dort nur das Symbol.
   Nach dem Kopieren steht kurz „Link kopiert“ daneben */
.post-share-row.has-native [data-share-copy]:not(.is-copied) {
    justify-content: center;
    width: 40px;
    padding: 0;
}

.post-share-row.has-native [data-share-copy]:not(.is-copied) [data-share-copy-label] {
    display: none;
}

.post-share-icon {
    display: flex;
    width: 22px;
    height: 22px;
}

.post-share-pill-icon .post-share-icon {
    width: 18px;
    height: 18px;
}

.post-share-icon svg {
    width: 100%;
    height: 100%;
}

.post-neighbours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: var(--r-wide);
    margin: max(72px, 5.5vw) calc((var(--r-measure) - min(var(--r-wide), 100vw - 2 * var(--r-gutter))) / 2) 0;
}

.post-neighbours:empty {
    display: none;
}

.post-neighbour {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--r-text);
    text-decoration: none;
}

.post-neighbour-next:only-child {
    grid-column: 2;
}

.post-neighbour-image {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
    border-radius: var(--r-radius);
    background-color: var(--r-tile);
    overflow: hidden;
}

.post-neighbour-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--ease-transition);
}

.post-neighbour:hover .post-neighbour-image img {
    transform: scale(1.03);
}

.post-neighbour-title {
    font-size: clamp(20px, 1.6vw, 26px);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.post-neighbour:hover .post-title-head {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.14em;
}

.post-reading .comments-section {
    max-width: var(--r-measure);
    margin: max(72px, 5.5vw) auto 0;
}

.post-reading .article-footer {
    padding-bottom: max(120px, 9vw);
}

@media (max-width: 767px) {
    .post-reading .post-hero {
        padding-top: 104px;
    }

    .post-hero-image-frame {
        min-height: 58vw;
    }

    .post-hero-meta {
        font-size: 14px;
    }

    .post-reading .post-hero-title {
        font-size: clamp(36px, 10.4vw, 48px);
        line-height: 1.02;
    }

    .post-hero-image {
        margin-top: 32px;
    }

    .post-neighbours {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-inline: 0;
    }

    .post-neighbour-next:only-child {
        grid-column: auto;
    }
}


/* ============ Lese-Pille ============ */

.reading-pill {
    --r-pill-bottom: calc(18px + env(safe-area-inset-bottom));
    --r-pill-width: 520px;
    position: fixed;
    left: 50%;
    bottom: var(--r-pill-bottom);
    z-index: 900;
    width: min(var(--r-pill-width), 100vw - 36px);
    transform: translate(-50%, calc(100% + 40px));
    opacity: 0;
    pointer-events: none;
    transition: transform .6s var(--ease-transition), opacity .4s ease;
}

.reading-pill.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

.reading-pill-button {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 7px 0 18px;
    border: 0;
    border-radius: 999px;
    color: var(--r-text);
    background: none;
    font-family: var(--font2);
    font-size: 15px;
    line-height: 1;
    text-align: left;
    cursor: pointer;
    isolation: isolate;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Glas wie die Navigations-Pille */
.reading-pill-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background-color: rgba(255, 255, 255, .82);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 16px 40px -18px rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .reading-pill-button::before {
        background-color: rgba(255, 255, 255, .95);
    }
}

/* Fortschritt: die Fläche füllt sich von links grau, so wie der Knopf „Mehr laden“ auf der Blogseite */
.reading-pill-fill {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, .055);
    transform-origin: left center;
    transform: scaleX(var(--reading-progress, 0));
}

.reading-pill-count {
    flex: none;
    color: var(--r-muted);
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.reading-pill-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.reading-pill-time {
    flex: none;
    color: var(--r-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.reading-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--r-text);
    color: var(--background-color);
}

.reading-pill-icon svg {
    width: 18px;
    height: 18px;
    transition: transform .5s var(--ease-transition);
}

.reading-pill.is-open .reading-pill-icon svg {
    transform: rotate(180deg);
}

/* Übersicht: weiße Karte über der Pille, Einträge wie die Übersicht im Impressum.
   Sie liegt als Popover über allem, darum fest am Bildschirm, genau über der Pille */
.reading-outline {
    position: fixed;
    inset: auto 0 calc(var(--r-pill-bottom) + 52px + 8px) 0;
    width: min(var(--r-pill-width), 100vw - 36px);
    max-height: min(62svh, 560px);
    margin: 0 auto;
    padding: 8px;
    border: 0;
    border-radius: 24px;
    background-color: rgba(255, 255, 255, .94);
    color: var(--r-text);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 24px 60px -24px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(22px) saturate(1.8);
    backdrop-filter: blur(22px) saturate(1.8);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.reading-outline:not(:popover-open) {
    display: none;
}

.reading-outline:popover-open {
    display: block;
    animation: r-outline-in .4s var(--ease-transition);
}

@keyframes r-outline-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98);
    }
}

.reading-outline-label {
    display: block;
    padding: 10px 14px 6px;
    color: var(--r-muted);
    font-size: 13px;
    line-height: 1.4;
}

.reading-outline-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reading-outline-link {
    display: flex;
    align-items: baseline;
    gap: 14px;
    width: 100%;
    padding: 11px 14px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--r-text);
    font-family: var(--font2);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.reading-outline-link:hover,
.reading-outline-link:focus-visible {
    background-color: rgba(0, 0, 0, .04);
    outline: none;
}

.reading-outline-link[aria-current="true"] {
    background-color: rgba(0, 0, 0, .065);
}

.reading-outline-number {
    flex: none;
    min-width: 2ch;
    color: var(--r-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .reading-pill {
        --r-pill-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .reading-pill-button {
        height: 50px;
        padding-left: 16px;
    }
}

/* Ruhig bei „Bewegung reduzieren“: alles erscheint sofort, nichts gleitet */
@media (prefers-reduced-motion: reduce) {
    .reading-pill,
    .reading-pill-icon svg,
    .post-neighbour-image img,
    .kg-bookmark-thumbnail img,
    .post-reading .kg-bookmark-metadata::after,
    .post-pill-button-icon svg {
        transition: none !important;
    }

    .reading-outline:popover-open {
        animation: none;
    }
}

@media print {
    .reading-pill,
    .post-share-row,
    .post-neighbours {
        display: none !important;
    }
}