/* ==========================================================================
   Lesewerkzeuge 2026 (27.10.2026): Lesemodus-Overlay, Vorlese-Leiste,
   Satz-Hervorhebung. Tokens stehen in css/critical-single.css (:root),
   Regeln im Brand Guide unter "Lesewerkzeuge". Nur Abstands-, Radius- und
   Bewegungs-Tokens des Systems.
   ========================================================================== */

/* Satz-Hervorhebung beim Vorlesen: CSS Custom Highlight API ohne DOM-Umbau,
   sonst der ganze Absatz als Rueckfall-Markierung. */
::highlight(nj-tts) {
    background-color: var(--nj-tts-highlight);
    color: inherit;
}

.is-tts-active {
    border-radius: var(--radius-sm);
    box-shadow: -0.5rem 0 0 0 var(--nj-tts-highlight);
}

@supports (selector(::highlight(nj-tts))) {
    .is-tts-active {
        box-shadow: none;
    }
}

/* ---------------------------------------------------------------- Leiste */
.nj-tts-bar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    z-index: 2147482000;
    width: min(34rem, calc(100vw - 2 * var(--space-2)));
    padding: var(--space-1) var(--space-2) var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    box-shadow: 0 13px 34px rgba(16, 19, 26, 0.16);
    opacity: 0;
    transform: translate(-50%, 13px);
    transition:
        opacity var(--motion-standard) var(--motion-snappy),
        transform var(--motion-slow) var(--motion-snappy);
}

.nj-tts-bar.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.nj-tts-bar__progress {
    height: 3px;
    margin: 0 var(--space-2) var(--space-1);
    border-radius: 999px;
    background: var(--color-border);
    overflow: hidden;
}

.nj-tts-bar__progress-fill {
    display: block;
    height: 100%;
    background: var(--color-accent-primary);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform var(--motion-slow) var(--motion-snappy);
}

.nj-tts-bar__row {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.nj-tts-bar__button,
.nj-tts-bar__rate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-primary);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-snappy);
}

.nj-tts-bar__button--main {
    background: var(--color-text-primary);
    color: var(--color-bg-primary);
}

.nj-tts-bar__rate {
    padding: 0 var(--space-2);
    font-size: var(--nj-type-meta);
    font-weight: 700;
    border: 1px solid var(--color-border);
}

.nj-tts-bar__button:not(.nj-tts-bar__button--main):hover,
.nj-tts-bar__rate:hover {
    background: var(--color-bg-secondary);
}

.nj-tts-bar__button:focus-visible,
.nj-tts-bar__rate:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.nj-tts-bar__status {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--nj-type-meta);
    line-height: 1.272;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nj-tts-bar__note {
    margin: 0 var(--space-2);
    font-size: 0.625rem;
    line-height: 1.3;
    color: var(--color-text-secondary);
}

/* ------------------------------------------------------------ Lesemodus */
html.nj-reader-open,
html.nj-reader-open body {
    overflow: hidden;
}

.nj-reader {
    --nj-reader-bg: var(--nj-reader-hell-bg);
    --nj-reader-text: var(--nj-reader-hell-text);
    --nj-reader-muted: var(--nj-reader-hell-muted);
    position: fixed;
    inset: 0;
    z-index: 2147481000;
    display: flex;
    flex-direction: column;
    background: var(--nj-reader-bg);
    color: var(--nj-reader-text);
    opacity: 0;
    transition: opacity var(--motion-standard) var(--motion-snappy);
}

.nj-reader.is-open {
    opacity: 1;
}

.nj-reader[data-theme="sepia"] {
    --nj-reader-bg: var(--nj-reader-sepia-bg);
    --nj-reader-text: var(--nj-reader-sepia-text);
    --nj-reader-muted: var(--nj-reader-sepia-muted);
}

.nj-reader[data-theme="dunkel"] {
    --nj-reader-bg: var(--nj-reader-dunkel-bg);
    --nj-reader-text: var(--nj-reader-dunkel-text);
    --nj-reader-muted: var(--nj-reader-dunkel-muted);
}

.nj-reader__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--space-3) var(--space-1);
    border-bottom: 1px solid color-mix(in srgb, var(--nj-reader-text) 14%, transparent);
    background: var(--nj-reader-bg);
}

.nj-reader__group {
    display: inline-flex;
    gap: 4px;
}

.nj-reader__group--end {
    margin-left: auto;
}

.nj-reader__chip,
.nj-reader__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 1px solid color-mix(in srgb, var(--nj-reader-text) 22%, transparent);
    border-radius: 999px;
    background: transparent;
    color: var(--nj-reader-text);
    font-size: var(--nj-type-meta);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--motion-fast) var(--motion-snappy);
}

.nj-reader__chip[aria-pressed="true"] {
    background: var(--nj-reader-text);
    color: var(--nj-reader-bg);
}

.nj-reader__chip:disabled {
    opacity: 0.4;
    cursor: default;
}

.nj-reader__close {
    padding: 0;
    border-color: transparent;
}

.nj-reader__chip:focus-visible,
.nj-reader__close:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}

.nj-reader__scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-3) calc(var(--space-5) + 89px);
}

.nj-reader__content {
    max-width: var(--nj-reader-measure, 68ch);
    margin: 0 auto;
    font-size: calc(var(--nj-type-body) * var(--nj-reader-scale, 1));
    line-height: var(--nj-reader-leading, 1.618);
}

.nj-reader__content h1 {
    margin: 0 0 var(--space-3);
    font-size: calc(1.6875rem * var(--nj-reader-scale, 1)); /* 27 */
    line-height: 1.272;
    color: var(--nj-reader-text);
}

.nj-reader__content h2,
.nj-reader__content h3 {
    margin: var(--space-4) 0 var(--space-2);
    font-size: calc(var(--nj-type-title-sm) * var(--nj-reader-scale, 1));
    line-height: 1.272;
    color: var(--nj-reader-text);
}

.nj-reader__content p,
.nj-reader__content li {
    color: var(--nj-reader-text);
}

.nj-reader__content p {
    margin: 0 0 var(--space-3);
}

.nj-reader__content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.nj-reader__content .author-info,
.nj-reader__content .article-meta-info__dates,
.nj-reader__content .nj-ai-notice,
.nj-reader__content .article-updates,
.nj-reader__content .article-updates__label {
    color: var(--nj-reader-muted);
    font-size: var(--nj-type-meta);
}

.nj-reader__content .author-info,
.nj-reader__content .article-meta-info__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-2);
    margin-bottom: var(--space-2);
}

.nj-reader__content .article-summary-excerpt {
    max-width: none;
    font-size: inherit;
    line-height: inherit;
    color: var(--nj-reader-text);
}

.nj-reader__content .article-key-points {
    max-width: none;
    background: transparent;
    border-color: color-mix(in srgb, var(--nj-reader-text) 18%, transparent);
}

.nj-reader__content .article-key-points__title,
.nj-reader__content .article-key-points__list {
    color: var(--nj-reader-text);
    font-size: inherit;
    line-height: inherit;
}

/* Autorenzeile, Links und Datumswerte uebernehmen die Lesefarbe, sonst
   bleiben sie im Dunkel- und Sepiamodus in der Seitenfarbe. */
.nj-reader__content .author-info *,
.nj-reader__content .article-meta-info__dates *,
.nj-reader__content .nj-ai-notice * {
    color: inherit;
}

.nj-reader__content .article-body {
    font-size: inherit;
    line-height: inherit;
}

.nj-reader__content .article-body p,
.nj-reader__content .article-body li {
    font-size: inherit;
    line-height: inherit;
}

.nj-reader__content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

.nj-reader__content svg {
    max-width: 1.25rem;
    max-height: 1.25rem;
}

@media (max-width: 40rem) {
    .nj-reader__bar {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .nj-reader__scroll {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .nj-tts-bar,
    .nj-tts-bar__progress-fill,
    .nj-reader {
        transition: none;
    }
}

/* ---------------------------------------------------- Zeitleiste (27.10.) */
.article-timeline {
    max-width: min(var(--article-reading-max-width, 72ch), 50rem);
    margin: var(--space-4) 0 0;
}

.article-timeline__title {
    margin: 0 0 var(--space-2);
    font-size: var(--nj-type-title-sm);
    line-height: 1.272;
}

.article-timeline__list {
    position: relative;
    margin: 0;
    padding: 0 0 0 var(--space-3);
    list-style: none;
}

.article-timeline__list::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    border-radius: 2px;
    background: var(--color-border);
}

.article-timeline__item {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 0 0 var(--space-3);
}

.article-timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3));
    top: 0.35rem;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-bg-primary);
    border: 2px solid var(--color-text-secondary);
}

.article-timeline__item.is-current::before {
    background: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
}

.article-timeline__item.is-new .article-timeline__time::after {
    content: " · Neu seit Deinem letzten Lesen";
    color: var(--color-accent-primary-text);
    font-weight: 700;
}

.article-timeline__time {
    font-size: var(--nj-type-meta);
    color: var(--color-text-secondary);
}

.article-timeline__headline {
    font-size: var(--nj-type-body);
    line-height: 1.272;
    font-weight: 600;
    color: var(--color-text-primary);
}

a.article-timeline__headline {
    text-decoration: none;
}

a.article-timeline__headline:hover,
a.article-timeline__headline:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.article-timeline__line {
    margin: 0;
    font-size: var(--nj-type-meta);
    line-height: 1.618;
    color: var(--color-text-secondary);
}

.nj-reader__content .article-timeline__headline,
.nj-reader__content .article-timeline__line,
.nj-reader__content .article-timeline__time {
    color: var(--nj-reader-text);
}