/* =====================================================================
   Shared editorial / prose (single tool, stack, comparison, article, page).
   Re-skins the legacy .sc-editorial-section / .sc-main-text / .sc-sidebar-*
   content into the light kit, and styles raw post_content via .sc-prose.
   ===================================================================== */
.sk-page .breadcrumb,
.sk-page .sc-breadcrumb {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.sk-page .sc-breadcrumb a { color: var(--green-2); font-weight: 600; }
.sk-page .sc-breadcrumb span { color: var(--muted); opacity: 0.7; }

.sc-editorial-section { margin: 0 0 28px; }
.sc-editorial-section > h2 {
    font-size: 26px;
    font-weight: 800;
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}
.sc-editorial-section > h3 { font-size: 18px; font-weight: 750; margin: 0 0 10px; }

/* Raw post content. */
.sc-prose { color: var(--ink); font-size: 16.5px; line-height: 1.7; }
.sc-prose > * { margin: 0 0 18px; }

/* ---- Long unbreakable tokens (ST-321, measured 2026-08-04) ----
   A bare URL in a citation line is a page-level overflow source that NO element
   scan can find: the text run inflates its parent's scrollWidth without any
   element box crossing the viewport, so the usual
   `getBoundingClientRect().right > innerWidth` sweep returns an EMPTY offender
   list. Measured on /de/deutschland/balkonkraftwerk/rechtslage/ at 390px:
   `p.sc-cite` ending in a bare https:// URL rendered a 576px text run inside a
   350px column, giving documentElement.scrollWidth = 596.
   Find this class with Range.getClientRects() on text nodes (qa/overflow-find-text.mjs),
   not with an element sweep.
   ** This is NOT the wide-table rule above. ** .sc-table-scroll contains its
   min-width:520px table correctly (measured: client 350 / scroll 520, overflow-x
   auto, `SCROLLS(ok)`). Do not weaken or remove that min-width for this symptom —
   it is what keeps wide tables readable while scrolling. */
.sc-prose { overflow-wrap: break-word; }
.sc-sources, .sc-sources p, .sc-cite { overflow-wrap: anywhere; }
.sc-prose h2 { font-size: 26px; font-weight: 800; margin: 34px 0 14px; line-height: 1.2; }
.sc-prose h3 { font-size: 20px; font-weight: 750; margin: 26px 0 10px; }
.sc-prose h4 { font-size: 17px; font-weight: 750; margin: 22px 0 8px; }
.sc-prose p, .sc-prose li { color: var(--ink); }
.sc-prose a { color: var(--green-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sc-prose ul, .sc-prose ol { padding-left: 22px; }
.sc-prose li { margin: 0 0 8px; }
.sc-prose img { border-radius: var(--radius); border: 1px solid var(--line); }
.sc-prose blockquote {
    margin: 0 0 18px;
    padding: 14px 18px;
    border-left: 4px solid var(--green);
    background: var(--panel-2);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--ink);
}
.sc-prose code {
    background: #eef3ef;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 1px 6px;
    font-size: .9em;
}
.sc-prose pre {
    background: var(--ink-dark);
    color: #eafff5;
    padding: 16px;
    border-radius: var(--radius);
    overflow: auto;
}
.sc-prose pre code { background: none; border: 0; color: inherit; padding: 0; }

/* Lists rendered by sc_v2_render_list(). */
.sc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sc-list li {
    position: relative;
    padding-left: 26px;
    color: var(--ink);
    line-height: 1.5;
}
.sc-list li::before {
    content: "";
    position: absolute; left: 0; top: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f5e49' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l4 4 10-11'/></svg>") center / 11px no-repeat,
        var(--mint);
}
.sc-list-cons li::before {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391412a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6 6 18'/></svg>") center / 11px no-repeat,
        #ffe3d8;
}

/* Pros & cons. */
.sc-pros-cons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sc-pros-col, .sc-cons-col {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 18px;
}
.sc-pros-col h3, .sc-cons-col h3 { margin: 0 0 12px; font-size: 16px; }

/* Sidebar cards (legacy .sc-sidebar-* re-skin). */
.sc-sidebar-sticky { position: sticky; top: 98px; display: grid; gap: 16px; }
.sc-sidebar-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 20px;
}
.sc-sidebar-card.emphasis, .sc-sidebar-cta { border-color: #b7d9ce; background: linear-gradient(180deg, #ffffff, #f0faf5); }
.sc-sidebar-title { font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--green-2); font-weight: 800; margin: 0 0 12px; }
.sc-sidebar-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.sc-sidebar-facts li { color: var(--ink); }
.sc-sidebar-facts a { color: var(--green-2); }
.sc-sidebar-rating { text-align: center; background: var(--ink-dark); color: #fff; border-color: var(--ink-dark); }
.sc-sidebar-rating .sc-rating-value { display: block; font-size: 44px; font-weight: 900; line-height: 1; }
.sc-sidebar-rating .sc-rating-label { display: block; font-weight: 700; margin-top: 6px; }
.sc-sidebar-rating .sc-rating-caption { display: block; color: #cae5dc; font-size: 13px; margin-top: 6px; }
.sc-btn-primary {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; min-height: 46px; padding: 0 18px;
    border-radius: var(--radius); border: 1px solid var(--green);
    background: var(--green); color: #fff; font-weight: 780; cursor: pointer;
}
.sc-btn-primary:hover { filter: brightness(1.06); color: #fff; text-decoration: none; }
.sc-sidebar-cta-note { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.sc-disclosure { font-size: 12px; color: var(--muted); margin: 8px 0 0; }
.sc-hero-cta-wrap { margin-top: 22px; }

/* Related-in-cluster module. auto-fit/minmax (not a fixed repeat(3,...)) so the
   ST-412 "Latest news" 4th column added to this same grid never overflows or
   squashes into a fractional column — 1/2/3/4 columns all lay out cleanly. */
.sc-related-cluster .sc-cluster-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.sc-cluster-col {
    border: 1px solid var(--line); border-radius: var(--radius);
    background: var(--panel); padding: 18px;
}
.sc-cluster-col__title { font-size: 15px; margin: 0 0 12px; }
.sc-cluster-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.sc-cluster-links a { color: var(--green-2); font-size: 14px; }

@media (max-width: 860px) {
    .sc-pros-cons-grid { grid-template-columns: 1fr; }
    .sc-related-cluster .sc-cluster-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   Responsive collapse (desktop-first; sensible reflow on smaller screens)
   ===================================================================== */
@media (max-width: 1180px) {
    .hero { grid-template-columns: 1fr; }
    .review-hero { grid-template-columns: 1fr; }
    .grid.aside { grid-template-columns: 1fr; }
    .article-shell { grid-template-columns: 1fr; }
    .article-body { max-width: none; }
    .sidebar { position: static; }
    .sk-page h1 { font-size: 52px; }
}
@media (max-width: 960px) {
    .grid.four { grid-template-columns: repeat(2, 1fr); }
    .grid.three { grid-template-columns: repeat(2, 1fr); }
    .matrix { grid-template-columns: 1fr; }
    .matrix div:nth-child(5n) { border-right: 1px solid var(--line); }
    .matrix div { border-right: 0; }
}
@media (max-width: 720px) {
    .sk-page { padding: 30px 0 54px; }
    .sk-page h1 { font-size: 38px; }
    .sk-page h2 { font-size: 27px; }
    .grid.three, .grid.two, .grid.four { grid-template-columns: 1fr; }
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
    .toolbar { grid-template-columns: 1fr; }
    .metric-grid { grid-template-columns: 1fr; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .review-title { padding: 22px; }
    .product-logo { width: 56px; height: 56px; }
    /* Side by side, the 56px logo + 16px gap left the h1 about 232px of a
       390px screen, which is what turned a long title into 9 lines. Stacking
       gives the title the full column; the logo keeps its visual role. */
    .product-lockup { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---- Language switcher ---- */
.sc-langswitch { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.sc-langswitch__item {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 7px;
    /* Measured at 28x19 on 2026-08-07 — the smallest interactive element on
       the site, and the one that switches language. */
    min-height: 44px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    text-decoration: none;
    color: var(--muted);
    border: 1px solid transparent;
    line-height: 1;
}
.sc-langswitch__item + .sc-langswitch__item { position: relative; }
.sc-langswitch__item + .sc-langswitch__item::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: var(--line, currentColor);
    opacity: .35;
}
.sc-langswitch__item:hover { color: var(--text); background: var(--panel-2); }
.sc-langswitch__item.is-current { color: var(--text); border-color: var(--line, currentColor); }
@media (max-width: 640px) { .sc-langswitch { margin-right: 4px; } }

/* Language switcher placement: header on desktop, footer on mobile.
   .sk-header__inner does not shrink, so the switcher overflowed narrow viewports by ~34px. */
.sc-footer-langswitch { display: none; }
@media (max-width: 640px) {
    .sk-header__tools .sc-langswitch { display: none; }
    .sc-footer-langswitch { display: block; margin: 8px 0; }
    .sc-footer-langswitch .sc-langswitch { margin-right: 0; }
}

/* langswitch-tightened: the header row is tight at 1280-1340px; the switcher pushed
   .sk-header__tools ~6px past the viewport. Shrink its footprint rather than let the
   header scroll horizontally. */
.sc-langswitch { gap: 3px; margin-right: 6px; }
.sc-langswitch__item { font-size: 11px; padding: 3px 5px; }

/* ---------------------------------------------------------------------------
   Stack jump nav (ST-342). A stack renders up to four distinct parts — guide,
   lean-vs-advanced, build stages, verdict — and only one of them had an id, so
   nothing could link to a part of a stack and the build order was undiscoverable
   without scrolling past the whole guide.
   Pills are min-height 44px deliberately: ux-audit.mjs counts interactive
   elements under 44x44 (WCAG 2.5.8) and these pages already report 15-20.
--------------------------------------------------------------------------- */
.sc-stack-jump {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 0 22px; padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
}
.sc-stack-jump__label {
    font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    opacity: .7; margin-right: 2px;
}
.sc-stack-jump a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; font-weight: 600; line-height: 1.2;
    color: var(--ink); text-decoration: none; background: var(--paper);
}
.sc-stack-jump a:hover, .sc-stack-jump a:focus-visible {
    border-color: var(--green); color: var(--green-2);
}
/* Anchor targets must not land underneath the sticky header. */
#guide, #substitutions, #build-stages, #final-recommendation { scroll-margin-top: 90px; }