/*
 * Article building blocks (src/utils/article-markdown.js). Same rules as the
 * rest of the system: radius 0, no shadows, 2px ink borders, one yellow block
 * per viewport, body text never below 16px.
 */

/* Title illustration: replaces the text cover on the page (the cover stays
   for link previews). No caption, full measure. */
.prose figure.art-titelbild { margin: 0 0 var(--space-7); }
.prose figure.art-titelbild svg { display: block; width: 100%; height: auto; border: 2px solid var(--ink); }

/* Das Wichtigste in Kürze */
.art-kurz { border: 3px solid var(--ink); background: var(--papier); margin: 0 0 var(--space-7); }
.prose .art-kurz__head, .prose .art-hinweis__kopf, .prose .art-check__head, .prose .art-rechner__head, .prose .art-lead__head { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin: 0; }
.prose .art-kurz__head { background: var(--ink); color: var(--signal); padding: 10px 16px; }
.prose .art-kurz ul { list-style: none; margin: 0; padding: 4px 16px 8px; }
.prose .art-kurz li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 12px 0; margin: 0; border-bottom: 2px solid var(--papier-2); font-size: 17px; line-height: 1.45; }
.prose .art-kurz li:last-child { border-bottom: 0; }
.prose .art-kurz li::before { content: ""; width: 12px; height: 12px; background: var(--signal); border: 2px solid var(--ink); margin-top: 6px; }

/* Hinweise */
.art-hinweis { border: 2px solid var(--ink); padding: 16px 18px 16px 24px; margin: var(--space-6) 0; position: relative; }
.art-hinweis::before { content: ""; position: absolute; left: -2px; top: -2px; bottom: -2px; width: 8px; background: var(--ink); }
.art-hinweis--achtung::before { background: var(--signal); border: 2px solid var(--ink); width: 6px; }
.art-hinweis--tipp { background: var(--papier-2); }
.prose .art-hinweis__kopf { margin-bottom: 6px; }
.prose .art-hinweis p:last-child { margin-bottom: 0; }

/* Urteils-Zitat */
.prose figure.art-zitat { margin: var(--space-7) 0; border-top: 4px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 20px 0 16px; }
.prose .art-zitat blockquote { border: 0; padding: 0; margin: 0; font-style: normal; color: var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; }
.prose .art-zitat blockquote::before { content: "„"; }
.prose .art-zitat blockquote::after { content: "“"; }
.prose .art-zitat figcaption { margin-top: 12px; text-transform: uppercase; letter-spacing: .08em; }

/* Kennzahlen */
.art-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); margin: var(--space-6) 0; }
.art-zahlen--2 { grid-template-columns: repeat(2, 1fr); }
.art-zahl { padding: 16px; border-right: 2px solid var(--ink); }
.art-zahl:last-child { border-right: 0; }
.art-zahl--signal { background: var(--signal); }
.art-zahl b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 36px; line-height: 1; letter-spacing: -.03em; }
.art-zahl span { display: block; margin-top: 8px; font-size: 16px; line-height: 1.35; color: var(--ink-700); }
@media (max-width: 560px) {
  .art-zahlen, .art-zahlen--2 { grid-template-columns: 1fr; }
  .art-zahl { border-right: 0; border-bottom: 2px solid var(--ink); }
  .art-zahl:last-child { border-bottom: 0; }
}

/* Checkliste */
.art-check { margin: var(--space-6) 0; }
.prose .art-check__head { margin-bottom: 10px; }
.prose .art-check ol { counter-reset: s; list-style: none; margin: 0; padding: 0; border: 2px solid var(--ink); }
.prose .art-check li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; margin: 0; border-bottom: 2px solid var(--ink); }
.prose .art-check li:last-child { border-bottom: 0; }
.prose .art-check li::before { content: counter(s, decimal-leading-zero); background: var(--ink); color: var(--signal); font-family: var(--font-mono); font-weight: 700; font-size: 17px; display: grid; place-items: center; }
.art-check label { display: grid; grid-template-columns: 1fr 24px; gap: 12px; align-items: start; padding: 12px 16px; font-size: 17px; line-height: 1.45; cursor: pointer; }
.art-check input { width: 22px; height: 22px; accent-color: #0c0c0d; margin: 2px 0 0; }
.art-check label:has(input:checked) span { color: var(--ink-500); text-decoration: line-through; }
.prose .art-check__count { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin: 10px 0 0; color: var(--ink-700); }

/* Quellen: Marke im Text, Liste unten aufklappbar */
.prose a.art-az { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; color: var(--ink-500); text-decoration: none; border-bottom: 1px solid var(--ink-500); white-space: nowrap; }
.prose a.art-az:hover { color: var(--ink); background: var(--signal); border-bottom-color: var(--ink); }
.art-quellen { border-top: 2px solid var(--ink); margin-top: var(--space-8); }
.art-quellen summary { font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 0; cursor: pointer; list-style: none; }
.art-quellen summary::-webkit-details-marker { display: none; }
.art-quellen summary::after { content: " +"; }
.art-quellen[open] summary::after { content: " –"; }
.prose .art-quellen ul, .prose .art-quellen ol { font-size: 15px; line-height: 1.6; color: var(--ink-700); }
.prose .art-quellen a { color: var(--ink-700); }

/* Lead: E-Mail-Feld in den Check */
.art-lead { border: 3px solid var(--ink); background: var(--signal); padding: 18px; margin: var(--space-7) 0; }
.prose .art-lead__head { font-family: var(--font-display); font-weight: 900; letter-spacing: -.01em; font-size: 24px; }
.prose .art-lead__sub { font-size: 16px; margin: 4px 0 12px; }
.art-lead__row { display: flex; }
.art-lead__row input { flex: 1; min-width: 0; border: 2px solid var(--ink); border-right: 0; padding: 12px 14px; font-size: 17px; background: var(--papier); font-family: var(--font-body); border-radius: 0; }
.art-lead__row .sld-btn { text-decoration: none; }

/* Verjährungsrechner */
.art-rechner { border: 3px solid var(--ink); margin: var(--space-7) 0; }
.prose .art-rechner__head { background: var(--ink); color: var(--signal); padding: 10px 16px; }
.art-rechner__body { padding: 16px 18px; display: grid; gap: 12px; font-size: 17px; }
.art-rechner select { display: block; margin-top: 8px; font-size: 17px; padding: 10px 12px; border: 2px solid var(--ink); background: var(--papier); font-family: var(--font-body); border-radius: 0; }
.prose .art-rechner__out { background: var(--signal); border: 2px solid var(--ink); padding: 12px 16px; margin: 0; }
.prose .art-rechner__out b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -.02em; }
.prose .art-rechner__note { font-size: 16px; color: var(--ink-700); margin: 0; }

/* The prose link rule (ink, underline, yellow hover) would otherwise win over
   the button inside the lead box and paint ink text on an ink button. On the
   yellow box, hover inverts to papier rather than to the box's own yellow. */
.prose .art-lead .sld-btn { color: var(--btn-fg); text-decoration: none; }
.prose .art-lead .sld-btn:hover { background: var(--papier); color: var(--ink); }