/* Tankstopp DRIVE 4.13 - enhancement of the existing Magazine layout.
   Loaded after magazine.css; all rules scoped to the existing magazine template. */
.ts-magazine-main {
    --ts-drive-accent: var(--ts-accent, #1c5d4d);
    --ts-drive-ink: var(--ts-ink, #15191d);
    --ts-drive-muted: var(--ts-muted, #66717c);
    --ts-drive-line: var(--ts-line, #e5e8eb);
    background: linear-gradient(180deg, #f9fbfa 0, #fff 540px);
    color: var(--ts-drive-ink);
}
.ts-magazine-main .ts-magazine-shell {
    width: min(1270px, calc(100% - 52px));
    padding-top: 34px;
    padding-bottom: 88px;
}
.ts-magazine-main .ts-magazine-breadcrumb {
    margin-bottom: 25px;
    letter-spacing: .01em;
}
.ts-magazine-main .ts-magazine-grid {
    grid-template-columns: minmax(0, 812px) minmax(265px, 306px);
    gap: clamp(26px, 3.2vw, 46px);
    align-items: start;
}
.ts-magazine-main .ts-magazine-article {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--ts-drive-line);
    border-radius: 26px;
    box-shadow: 0 22px 62px rgba(15, 23, 42, .055);
    padding: clamp(22px, 3.3vw, 39px);
}
.ts-magazine-main .ts-magazine-header { margin-bottom: 26px; }
.ts-magazine-main .ts-magazine-kicker {
    display: inline-flex;
    padding: 7px 11px;
    border-radius: 100px;
    border: 1px solid color-mix(in srgb, var(--ts-drive-accent) 22%, white);
    background: color-mix(in srgb, var(--ts-drive-accent) 9%, white);
    color: var(--ts-drive-accent);
    letter-spacing: .10em;
    font-size: 11px;
}
.ts-magazine-main .ts-magazine-title {
    max-width: none;
    font-size: clamp(36px, 3.7vw, 51px);
    line-height: 1.095;
    font-weight: 800;
    letter-spacing: -.039em;
    margin: 19px 0 19px;
    text-wrap: balance;
}
.ts-magazine-main .ts-magazine-meta {
    gap: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ts-drive-muted);
}
.ts-magazine-main .ts-magazine-hero { margin: 0 0 36px; }
.ts-magazine-main .ts-magazine-hero-image {
    width: 100%;
    max-height: 490px;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    object-fit: cover;
    background: #f2f5f4;
}
.ts-magazine-main .ts-magazine-hero figcaption { margin: 10px 1px 0; }
.ts-magazine-main .ts-magazine-body {
    font-size: 18.5px;
    line-height: 1.77;
    color: #27303a;
    overflow-wrap: break-word;
}
.ts-magazine-main .ts-magazine-body > p,
.ts-magazine-main .ts-magazine-body > ul,
.ts-magazine-main .ts-magazine-body > ol { max-width: 69ch; }
.ts-magazine-main .ts-magazine-body > p.tankstopp-article-lead {
    max-width: 68ch;
    font-size: clamp(20px, 2.1vw, 23px);
    line-height: 1.55;
    font-weight: 580;
    color: #1f292b;
    padding-left: 20px;
    border-left: 3px solid var(--ts-drive-accent);
    margin: 0 0 28px;
}
.ts-magazine-main .ts-magazine-body > p.tankstopp-article-lead strong { font-weight: 650; }
.ts-magazine-main .ts-magazine-body h2 {
    max-width: 25ch;
    margin: 2.0em 0 .58em;
    font-size: clamp(27px, 2.85vw, 32px);
    line-height: 1.18;
    font-weight: 780;
    letter-spacing: -.028em;
    text-wrap: balance;
}
.ts-magazine-main .ts-magazine-body h3 { font-size: 24px; line-height: 1.26; font-weight: 750; }
.ts-magazine-main .ts-magazine-body p { margin-bottom: 1.36em; }
.ts-magazine-main .ts-magazine-body a {
    color: var(--ts-drive-accent);
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.ts-magazine-main .ts-magazine-body :focus-visible,
.ts-magazine-main a:focus-visible {
    outline: 3px solid var(--ts-drive-accent);
    outline-offset: 4px;
}
.ts-magazine-main .ts-magazine-body figure { margin: 33px 0; }
.ts-magazine-main .ts-magazine-body figure img { border-radius: 18px; }
.ts-magazine-main .ts-magazine-body blockquote {
    padding-left: 22px;
    border-left-color: var(--ts-drive-accent);
}
.ts-magazine-main .ts-magazine-sidebar { gap: 16px; }
.ts-magazine-main .ts-magazine-side-card {
    border-radius: 19px;
    padding: 22px;
    box-shadow: 0 10px 29px rgba(15, 23, 42, .027);
}
.ts-magazine-main .ts-magazine-side-card h2 { font-size: 22px; }
.ts-magazine-main .ts-magazine-after-article {
    margin-top: 55px;
    padding-top: 29px;
    border-top: 1px solid var(--ts-drive-line);
}
.ts-magazine-main .ts-magazine-recommendation { border-radius: 20px; }
.ts-magazine-main .ts-magazine-related-card { border-radius: 17px; }
.ts-magazine-main .ts-magazine-related-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 33px rgba(15, 23, 42, .075);
    transition: box-shadow .18s ease, transform .18s ease;
}

/* Editorial modules are supplied by the importer HTML or by the post editor.
   No dynamic/automatically generated claims and no client-side dependencies. */
.ts-magazine-main .ts-drive-insight {
    --ts-drive-insight-color: var(--ts-drive-accent);
    --ts-drive-insight-tint: #f5faf7;
    position: relative;
    isolation: isolate;
    max-width: 100%;
    margin: 35px 0 40px;
    padding: clamp(23px, 3.2vw, 33px);
    border: 1px solid color-mix(in srgb, var(--ts-drive-insight-color) 21%, #e7ecea);
    border-radius: 21px;
    background: linear-gradient(135deg, var(--ts-drive-insight-tint), #fff 82%);
    box-shadow: 0 13px 33px rgba(22, 38, 35, .05);
    overflow: hidden;
    font-size: 16.5px;
    line-height: 1.61;
}
.ts-magazine-main .ts-drive-insight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    bottom: 22px;
    width: 4px;
    border-radius: 0 6px 6px 0;
    background: var(--ts-drive-insight-color);
}
.ts-magazine-main .ts-drive-insight--tip { --ts-drive-insight-tint: #f6f9fb; }
.ts-magazine-main .ts-drive-insight--check { --ts-drive-insight-tint: #f3f7f6; }
.ts-magazine-main .ts-drive-insight--cost {
    --ts-drive-insight-color: #a56a1c;
    --ts-drive-insight-tint: #fffbf1;
}
.ts-magazine-main .ts-drive-insight--warning {
    --ts-drive-insight-color: #a94135;
    --ts-drive-insight-tint: #fff8f5;
}
.ts-magazine-main .ts-drive-insight__eyebrow { margin: 0 0 12px; }
.ts-magazine-main .ts-drive-insight__label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .095em;
    text-transform: uppercase;
    font-weight: 850;
    color: var(--ts-drive-insight-color);
}
.ts-magazine-main .ts-drive-insight__label::before {
    content: "\25C6";
    display: inline-flex;
    width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-size: 10px;
    background: color-mix(in srgb, var(--ts-drive-insight-color) 12%, white);
}
.ts-magazine-main .ts-drive-insight--check .ts-drive-insight__label::before { content: "\2713"; font-size: 15px; }
.ts-magazine-main .ts-drive-insight--cost .ts-drive-insight__label::before { content: "CHF"; font-size: 9px; }
.ts-magazine-main .ts-drive-insight--warning .ts-drive-insight__label::before { content: "!"; font-size: 15px; }
.ts-magazine-main .ts-drive-insight h3.ts-drive-insight__title {
    max-width: none;
    margin: 0 0 12px;
    font-size: clamp(20px, 2.15vw, 24px);
    line-height: 1.24;
    font-weight: 780;
    letter-spacing: -.018em;
    color: var(--ts-drive-ink);
}
.ts-magazine-main .ts-drive-insight__body { color: #36443e; }
.ts-magazine-main .ts-drive-insight__body p { max-width: none; margin: 0 0 12px; }
.ts-magazine-main .ts-drive-insight__body p:last-child { margin-bottom: 0; }
.ts-magazine-main .ts-drive-insight__body ul,
.ts-magazine-main .ts-drive-insight__body ol { margin: 11px 0 0; padding-left: 24px; }
.ts-magazine-main .ts-drive-insight__body li { margin: 6px 0; }
.ts-magazine-main .ts-drive-insight__body strong { font-weight: 750; color: var(--ts-drive-ink); }
.ts-magazine-main .ts-drive-insight__body table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    margin-top: 15px;
    border-collapse: collapse;
    font-size: 15px;
}
.ts-magazine-main .ts-drive-insight__body th,
.ts-magazine-main .ts-drive-insight__body td {
    padding: 11px 13px;
    border-bottom: 1px solid var(--ts-drive-line);
    text-align: left;
    white-space: normal;
}
.ts-magazine-main .ts-drive-insight__body tr:last-child td { border-bottom: 0; }

@supports (animation-timeline: scroll()) {
    .ts-magazine-main::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: 100%;
        height: 3px;
        pointer-events: none;
        background: var(--ts-drive-accent);
        transform-origin: left center;
        animation: ts-drive-reading-progress linear both;
        animation-timeline: scroll(root);
    }
    @keyframes ts-drive-reading-progress {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}
@media (prefers-reduced-motion: reduce) {
    .ts-magazine-main::before { display: none; }
    .ts-magazine-main .ts-magazine-related-card:hover { transform: none; transition: none; }
}
@media (max-width: 1050px) {
    .ts-magazine-main .ts-magazine-grid { grid-template-columns: minmax(0, 1fr); }
    .ts-magazine-main .ts-magazine-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .ts-magazine-main .ts-magazine-shell { width: calc(100% - 24px); padding-top: 19px; padding-bottom: 64px; }
    .ts-magazine-main .ts-magazine-article { padding: 19px; border-radius: 21px; }
    .ts-magazine-main .ts-magazine-title { font-size: clamp(31px, 8vw, 41px); line-height: 1.11; }
    .ts-magazine-main .ts-magazine-hero { margin-bottom: 28px; }
    .ts-magazine-main .ts-magazine-hero-image { border-radius: 13px; }
    .ts-magazine-main .ts-magazine-body { font-size: 17.4px; line-height: 1.71; }
    .ts-magazine-main .ts-magazine-body > p.tankstopp-article-lead { font-size: 20px; padding-left: 15px; }
    .ts-magazine-main .ts-magazine-body h2 { font-size: 27px; }
    .ts-magazine-main .ts-drive-insight { margin: 28px 0 34px; padding: 22px 19px 22px 23px; border-radius: 17px; }
    .ts-magazine-main .ts-drive-insight h3.ts-drive-insight__title { font-size: 22px; }
    .ts-magazine-main .ts-drive-insight__body { font-size: 16px; line-height: 1.6; }
    .ts-magazine-main .ts-magazine-sidebar { grid-template-columns: minmax(0, 1fr); }
    .ts-magazine-main .ts-magazine-recommendation { padding: 22px; }
}
@media (max-width: 370px) {
    .ts-magazine-main .ts-magazine-shell { width: calc(100% - 16px); }
    .ts-magazine-main .ts-magazine-article { padding: 14px; }
    .ts-magazine-main .ts-magazine-meta { gap: 7px; }
    .ts-magazine-main .ts-drive-insight { padding: 20px 15px 20px 21px; }
}

/* 4.13: Accessible topic-specific recommendation; editor-supplied finance table. */
.ts-magazine-main .ts-magazine-recommendation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin: 0 0 44px;
    padding: 26px;
    background: color-mix(in srgb, var(--ts-drive-accent) 6%, #fff);
    border: 1px solid color-mix(in srgb, var(--ts-drive-accent) 16%, #fff);
    border-radius: 20px;
}
.ts-magazine-main .ts-magazine-recommendation h2 {
    margin: 5px 0 7px;
    font-size: clamp(21px, 2.2vw, 26px);
    line-height: 1.2;
    font-weight: 750;
}
.ts-magazine-main .ts-magazine-recommendation p {
    max-width: 530px;
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ts-drive-muted);
}
.ts-magazine-main .ts-magazine-recommendation .ts-magazine-button {
    flex-shrink: 0;
    max-width: 100%;
}
.ts-magazine-main .ts-drive-insight__body table.ts-drive-cost-table {
    display: table;
    width: 100%;
    font-variant-numeric: tabular-nums;
    overflow: visible;
    margin: 14px 0 9px;
    font-size: 15px;
}
.ts-magazine-main .ts-drive-cost-table th {
    font-weight: 500;
    width: 66%;
}
.ts-magazine-main .ts-drive-cost-table td {
    text-align: right;
    font-weight: 700;
    white-space: nowrap;
}
.ts-magazine-main .ts-drive-cost-table .ts-drive-cost-table__total th,
.ts-magazine-main .ts-drive-cost-table .ts-drive-cost-table__total td {
    border-top: 2px solid var(--ts-drive-accent);
    font-weight: 780;
}
.ts-magazine-main .ts-drive-cost-table .ts-drive-cost-table__negative td {
    font-weight: 850;
    color: #a12d36;
}
.ts-magazine-main .ts-drive-insight__body .ts-drive-insight__note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ts-drive-muted);
    margin: 14px 0 0;
}
@media (max-width: 720px) {
    .ts-magazine-main .ts-magazine-recommendation {
        padding: 22px;
        align-items: flex-start;
        flex-direction: column;
    }
    .ts-magazine-main .ts-magazine-recommendation .ts-magazine-button {
        width: 100%;
    }
    .ts-magazine-main .ts-drive-insight__body table.ts-drive-cost-table {
        font-size: 13px;
    }
    .ts-magazine-main .ts-drive-cost-table th,
    .ts-magazine-main .ts-drive-cost-table td { padding: 9px 6px; }
}


/* 4.15: Make use of modern desktop widths without turning paragraphs into
   overly long lines. All selectors remain inside the existing magazine. */
@media (min-width: 1121px) {
    .ts-magazine-main .ts-magazine-shell {
        width: min(1400px, calc(100% - 64px));
    }
    .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 920px) minmax(270px, 310px);
        gap: clamp(30px, 3vw, 48px);
    }
    .ts-magazine-main .ts-magazine-body > p,
    .ts-magazine-main .ts-magazine-body > ul,
    .ts-magazine-main .ts-magazine-body > ol {
        max-width: 73ch;
    }
    .ts-magazine-main .ts-magazine-body h2 {
        max-width: 30ch;
    }
}
@media (min-width: 721px) and (max-width: 1120px) {
    .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .ts-magazine-main .ts-magazine-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Thumbnail-free posts remain readable on mobile instead of reserving an
   empty 118px image column. */
@media (max-width: 720px) {
    .ts-magazine-main .ts-magazine-related-card--no-image .ts-magazine-related-link {
        display: flex;
        flex-direction: column;
    }
    .ts-magazine-main .ts-magazine-related-card--no-image .ts-magazine-related-copy {
        width: 100%;
    }
}


/* 4.16: Actual full-width repair. GeneratePress constrains the parent #page
 * and #content wrappers; changing only .ts-magazine-shell cannot widen them.
 * The body marker is added only for single magazine posts by this plugin. */
body.tankstopp-drive-magazine-wide #page.site,
body.tankstopp-drive-magazine-wide .site.grid-container.container {
    width: 100% !important;
    max-width: none !important;
    margin-inline: auto !important;
}
body.tankstopp-drive-magazine-wide #content.site-content,
body.tankstopp-drive-magazine-wide .site-content:has(> #primary.ts-magazine-main),
body.tankstopp-drive-magazine-wide .content-area:has(> #primary.ts-magazine-main) {
    display: block;
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
    margin-inline: auto !important;
    float: none !important;
}
body.tankstopp-drive-magazine-wide #primary.ts-magazine-main {
    display: block;
    float: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: clip; /* Preserve sticky section navigation */
}
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > p,
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > ul,
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > ol {
    max-width: 75ch;
}
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body h2 {
    max-width: none;
    scroll-margin-top: 108px;
}
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar {
    position: sticky;
    top: 90px;
    align-self: start;
}
.ts-magazine-main .ts-magazine-toc {
    max-height: calc(100dvh - 116px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.ts-magazine-main .ts-magazine-toc h2 {
    margin-bottom: 17px;
    font-size: 20px;
    font-weight: 760;
}
.ts-magazine-main .ts-magazine-toc ol {
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: ts-chapter;
}
.ts-magazine-main .ts-magazine-toc li {
    counter-increment: ts-chapter;
    border-top: 1px solid var(--ts-drive-line);
}
.ts-magazine-main .ts-magazine-toc a {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 9px;
    padding: 11px 0;
    color: var(--ts-drive-ink);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.36;
    text-decoration: none;
}
.ts-magazine-main .ts-magazine-toc a:before {
    content: counter(ts-chapter, decimal-leading-zero);
    color: var(--ts-drive-accent);
    font-size: 11px;
    letter-spacing: .02em;
    padding-top: 2px;
    font-weight: 800;
}
.ts-magazine-main .ts-magazine-toc a:hover { color: var(--ts-drive-accent); }
.ts-magazine-main .ts-magazine-toc a:focus-visible {
    outline: 2px solid var(--ts-drive-accent);
    outline-offset: 2px;
}
@media (min-width: 721px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-shell {
        width: min(1260px, calc(100% - 48px));
    }
}
@media (min-width: 1101px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr) minmax(270px, 300px);
        gap: clamp(28px, 3vw, 42px);
        justify-content: stretch;
    }
}
@media (max-width: 1100px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    /* A chapter index after the entire article would be counterproductive. */
    body.tankstopp-drive-magazine-wide .ts-magazine-sidebar:has(.ts-magazine-toc) {
        display: none;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar {
        position: static;
    }
}
@media (max-width: 720px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-shell {
        width: calc(100% - 24px);
    }
}
@media (max-width: 370px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-shell {
        width: calc(100% - 16px);
    }
}


/* 4.17: Wider editorial stage on large and ultrawide desktops.
 * 4.16 was capped at 1260 CSS px, which leaves excessive empty space on
 * 2560+ px screens or in zoomed-out Chrome. No changes to importer/modules. */
body.tankstopp-drive-magazine-wide #page.site,
body.tankstopp-drive-magazine-wide #content.site-content,
body.tankstopp-drive-magazine-wide #primary.ts-magazine-main {
    overflow: visible !important; /* Allow the chapter rail to remain sticky. */
}
body.tankstopp-drive-magazine-wide #primary.ts-magazine-main {
    min-width: 0;
    background: #f5f8f7;
}
body.tankstopp-drive-magazine-wide .ts-magazine-shell,
body.tankstopp-drive-magazine-wide .ts-magazine-grid,
body.tankstopp-drive-magazine-wide .ts-magazine-article,
body.tankstopp-drive-magazine-wide .ts-magazine-sidebar {
    box-sizing: border-box;
    min-width: 0;
}
@media (min-width: 1101px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-shell {
        width: min(1800px, calc(100% - clamp(52px, 5vw, 112px)));
        max-width: none;
        margin-inline: auto;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr) minmax(330px, 360px);
        gap: clamp(34px, 3vw, 54px);
        align-items: start;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-article {
        padding: clamp(35px, 3vw, 52px);
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > p,
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > ul,
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > ol {
        max-width: 91ch;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body > p.tankstopp-article-lead {
        max-width: 88ch;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-title {
        max-width: 24ch;
        font-size: clamp(42px, 3.4vw, 60px);
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-hero-image {
        max-height: 580px;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar {
        position: sticky;
        top: 88px;
        align-self: start;
        overflow: visible;
        max-height: calc(100dvh - 104px);
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-toc {
        max-height: calc(100dvh - 104px);
        padding: 25px 26px;
        overflow-y: auto;
        border-radius: 20px;
        scrollbar-width: thin;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-toc h2 {
        font-size: 23px;
        margin: 2px 0 16px;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-toc a {
        grid-template-columns: 30px minmax(0, 1fr);
        font-size: 15px;
        font-weight: 650;
        line-height: 1.42;
        gap: 11px;
        padding: 13px 0;
    }
}
/* On laptops the rail keeps its normal proportions; the full-width article
 * is reserved for viewports where two readable columns genuinely fit. */
@media (min-width: 1101px) and (max-width: 1400px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr) 310px;
        gap: 28px;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar {
        max-height: calc(100dvh - 90px);
    }
}
@media (max-width: 1100px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar {
        position: static;
        max-height: none;
    }
}


/* 4.18: Readability and a genuinely persistent chapter rail.
 * The outer width, both editorial info boxes, recommendations, importer,
 * and all other Tankstopp page layouts are intentionally untouched. */
body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body {
    font-size: 19.5px;
    line-height: 1.74;
}
@media (min-width: 1101px) {
    /* Stretch the grid column to the height of the complete article. The
       navigation CARD sticks inside it. A short sticky sidebar grid item
       can stop following before the reader reaches the article's end. */
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar--chapters {
        display: block;
        position: relative !important;
        align-self: stretch;
        height: auto;
        top: auto;
        max-height: none !important;
        overflow: visible !important;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar--chapters > .ts-magazine-toc {
        position: -webkit-sticky;
        position: sticky;
        top: 92px;
        max-height: calc(100vh - 115px);
        max-height: calc(100dvh - 115px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar--chapters .ts-magazine-toc a {
        line-height: 1.46;
        padding-block: 12px;
    }
}
@media (max-width: 1100px) {
    /* The article is single-column; placing a chapter index after the
       article would not be useful. All chapter headings remain in the text. */
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-sidebar--chapters {
        display: none;
    }
}
@media (max-width: 720px) {
    body.tankstopp-drive-magazine-wide .ts-magazine-main .ts-magazine-body {
        font-size: 18px;
        line-height: 1.73;
    }
}


/* 4.19: A viewport-fixed, mobile-safe chapter rail is enabled only when
   scrolling by the scoped JS. The ORIGINAL nav is moved here (not cloned),
   preserving working links and keyboard access. No changes to article boxes. */
body.tankstopp-drive-magazine-wide .ts-drive-toc-portal.ts-magazine-main {
    position: fixed !important;
    display: block !important;
    z-index: 80;
    width: auto;
    max-width: none !important;
    height: auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    pointer-events: none;
}
body.tankstopp-drive-magazine-wide .ts-drive-toc-portal > .ts-magazine-toc {
    display: block;
    box-sizing: border-box;
    width: 100%;
    position: static !important;
    top: auto !important;
    pointer-events: auto;
    max-height: calc(100dvh - 114px);
    overflow-y: auto;
}
@media (max-width: 1100px) {
    body.tankstopp-drive-magazine-wide .ts-drive-toc-portal { display: none !important; }
}

/* 4.22: Small, readable rubric on thematically ranked related articles. */
.ts-magazine-main .ts-magazine-related-copy .ts-magazine-related-category {
    display: block;
    margin: 0 0 7px;
    color: var(--ts-drive-accent);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
}
@media (max-width: 390px) {
    .ts-magazine-main .ts-magazine-related-copy { min-width: 0; }
    .ts-magazine-main .ts-magazine-related-copy h3 { overflow-wrap: anywhere; }
}

.ts-magazine-main .ts-magazine-browse-category {
    margin: 22px 0 0;
    font-size: 14px;
    font-weight: 750;
}
.ts-magazine-main .ts-magazine-browse-category a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ts-drive-accent);
    text-decoration: none;
}
.ts-magazine-main .ts-magazine-browse-category a:hover { text-decoration: underline; }


/* 4.23: The existing desktop chapter list is hidden under 1101px.
   Restore the same real article anchors as a native collapsible mobile index.
   No JS, no duplicate post query, and hidden above the desktop breakpoint. */
.ts-magazine-main .ts-magazine-mobile-toc { display: none; }
@media (max-width: 1100px) {
    .ts-magazine-main .ts-magazine-mobile-toc {
        display: block;
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        margin: 0 0 30px;
        border: 1px solid var(--ts-drive-line);
        border-radius: 15px;
        background: #f7faf8;
        color: var(--ts-drive-ink);
        overflow-wrap: anywhere;
    }
    .ts-magazine-main .ts-magazine-mobile-toc summary {
        display: list-item;
        min-height: 48px;
        padding: 13px 18px;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 750;
        cursor: pointer;
    }
    .ts-magazine-main .ts-magazine-mobile-toc summary span {
        color: var(--ts-drive-muted);
        font-size: 13px;
        font-weight: 500;
        margin-left: 6px;
    }
    .ts-magazine-main .ts-magazine-mobile-toc nav {
        border-top: 1px solid var(--ts-drive-line);
        padding: 7px 12px 12px;
    }
    .ts-magazine-main .ts-magazine-mobile-toc ol {
        margin: 0;
        padding: 0 0 0 25px;
    }
    .ts-magazine-main .ts-magazine-mobile-toc li { margin: 0; padding: 0; }
    .ts-magazine-main .ts-magazine-mobile-toc a {
        display: flex;
        min-height: 44px;
        align-items: center;
        padding: 8px 4px;
        color: var(--ts-drive-accent);
        font-size: 14px;
        line-height: 1.45;
        font-weight: 600;
        text-decoration: none;
        overflow-wrap: anywhere;
    }
    .ts-magazine-main .ts-magazine-mobile-toc a:focus-visible,
    .ts-magazine-main .ts-magazine-mobile-toc summary:focus-visible {
        outline: 2px solid var(--ts-drive-accent);
        outline-offset: 1px;
    }
}