/* Ratgeber: article, hub and overview pages (on top of subpage.css) */

/* Long-form text: readable line length, aligned left with the hero */
.content.article{max-width:calc(880px + 2 * var(--pad))}

.article-meta{font-size:13px;color:#767676;letter-spacing:0.02em}

.content h3{font-size:clamp(17px,1.4vw,21px);font-weight:600;color:#111;line-height:1.3;margin:clamp(24px,3.5vh,32px) 0 clamp(10px,1.4vh,14px)}
.content ol{margin:0 0 clamp(16px,2.5vh,22px) 0;padding-left:0;list-style:none;counter-reset:ol}
.content ol > li{counter-increment:ol}
.content ol > li::before{content:counter(ol);top:0;width:auto;height:auto;border-radius:0;background:none;font-weight:600;color:#111}
.content a:not(.detail-cta){text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.content a:not(.detail-cta):hover{color:#555}

/* Draft notice (removed once the article is medically reviewed) */
.draft-note{background:#fff7e0;border:1px solid #f0dca0;border-radius:14px;padding:14px 18px;font-size:14px;color:#5c4a12;line-height:1.6;margin-bottom:clamp(24px,3.5vh,36px)}
.draft-note strong{color:#5c4a12}

/* "Kurz beantwortet" + "Auf einen Blick" */
.answer,.facts,.callout{background:#f7f7f5;border-radius:clamp(16px,1.6vw,22px);padding:clamp(22px,2.4vw,30px);margin-bottom:clamp(16px,2.5vh,24px)}
.answer-title,.facts-title{text-transform:uppercase;letter-spacing:0.14em;font-size:11px;color:#6b6b6b;margin-bottom:10px}
.answer p:not(.answer-title){font-size:clamp(16px,1.25vw,19px);color:#111;line-height:1.65}
.facts dl{display:grid;grid-template-columns:1fr 1fr;gap:14px 28px}
@media(max-width:600px){.facts dl{grid-template-columns:1fr}}
.facts dl div{border-top:1px solid #e6e6e2;padding-top:10px}
.facts dt{font-size:13px;color:#6b6b6b;margin-bottom:2px}
.facts dd{font-size:clamp(15px,1.1vw,16px);color:#111;line-height:1.5}
.facts + h2,.answer + h2{margin-top:clamp(36px,5vh,52px)}

.callout{margin:clamp(20px,3vh,28px) 0}
.callout p{font-size:clamp(15px,1.1vw,17px);color:#333;line-height:1.7}
.callout p + p{margin-top:10px}
.callout ul{margin:10px 0 0}

/* Comparison tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:clamp(16px,2.5vh,24px) 0 clamp(20px,3vh,28px);border-radius:clamp(16px,1.6vw,22px);background:#f7f7f5}
.table-wrap table{width:100%;border-collapse:collapse;font-size:clamp(14px,1vw,15px);line-height:1.5;min-width:560px}
.table-wrap th,.table-wrap td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid #e6e6e2}
.table-wrap thead th{font-weight:600;color:#111;background:#efefec}
.table-wrap tbody th{font-weight:500;color:#111}
.table-wrap td{color:#333}
.table-wrap tr:last-child td,.table-wrap tr:last-child th{border-bottom:none}

/* Sources */
.sources{margin-top:clamp(36px,5vh,52px)}
.sources h2{font-size:clamp(18px,1.6vw,22px)!important;margin-bottom:12px!important}
.sources li{font-size:14px!important;color:#555;line-height:1.6;margin-bottom:8px}
.sources li::before{color:#767676!important;font-weight:500!important}
.sources a{word-break:break-word}

/* Cards: short description under the title */
.rel-excerpt{font-size:clamp(13px,1vw,15px);color:#555;line-height:1.6;margin-top:10px}

/* Four topic cards: one row on desktop, 2 × 2 on tablets */
@media(min-width:1101px){.rel-grid:has(> .rel-card:nth-child(4):last-child){grid-template-columns:repeat(4,1fr)}}
@media(min-width:761px) and (max-width:1100px){.rel-grid:has(> .rel-card:nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}}