/* ==========================================================================
   equestrianwearfactory.com — article-components.css
   Elemente in .article-content (Typografie, Listen, Tabellen, Abbildungen,
   Hinweisbox, Checkliste) + CTA-Band. Ruhig: feine Linien, Sand, Waldgrün.
   ========================================================================== */

.article-content{font-size:var(--fs-body);line-height:1.72;color:var(--ink)}
.article-content > * + *{margin-top:20px}
.article-content p{margin-bottom:0}
.article-content > p:first-child{font-size:var(--fs-lead);line-height:1.6}
.article-content h2{font-size:clamp(28px,2.6vw,36px);line-height:1.15;color:var(--green);margin-top:52px;padding-top:26px;border-top:1px solid var(--line);scroll-margin-top:110px}
.article-content h3{font-size:var(--fs-h3);line-height:1.3;color:var(--ink);margin-top:32px;scroll-margin-top:110px}
.article-content h4{font-size:var(--fs-body);font-weight:600;color:var(--ink);margin-top:24px}
.article-content h2 + *,.article-content h3 + *{margin-top:14px}
.article-content strong{font-weight:600;color:var(--ink)}
.article-content a{color:var(--green);font-weight:600;text-decoration:underline;text-decoration-color:var(--green-200);text-decoration-thickness:1.5px;text-underline-offset:3px}
.article-content a:hover{text-decoration-color:var(--green)}
.article-content ul,.article-content ol{padding-left:1.35em}
.article-content li + li{margin-top:8px}
.article-content li p{margin:0}
.article-content li::marker{color:var(--stone-600)}

/* Bilder */
.article-content img{max-width:100%;height:auto;display:block;margin:1.5rem auto;border-radius:var(--r-card)}
.article-content iframe{max-width:100%;display:block;margin:1.5rem auto;border-radius:var(--r-card)}
.article-content figure{margin:32px 0 0}
.article-content figure img{margin:0;width:100%;height:auto;max-height:480px;object-fit:cover;object-position:50% 40%;background:var(--sand-100)}
.article-content figcaption{font-size:var(--fs-small);line-height:1.5;color:var(--stone-600);margin-top:10px}

/* Tabellen */
.article-content .table-scroll{margin-top:24px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff}
.article-content table{border-collapse:collapse;width:100%;font-size:var(--fs-small);line-height:1.5}
.article-content thead th{background:var(--sand-100);font:600 var(--fs-label)/1.3 var(--ff-sans);letter-spacing:.04em;text-align:left;padding:12px 16px;color:var(--ink)}
.article-content tbody td,.article-content tbody th{border-top:1px solid var(--line);padding:12px 16px;vertical-align:top;text-align:left}
.article-content tbody th{font-weight:600;color:var(--green)}
.article-content tbody tr:nth-child(even){background:var(--sand-50)}

/* Zitat, Hinweis, Trennlinie */
.article-content blockquote{margin:32px 0 0;padding:4px 0 4px 22px;border-left:2px solid var(--green);font-family:var(--ff-serif);font-size:24px;line-height:1.35;color:var(--green)}
.article-content .callout{margin-top:28px;padding:20px 24px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--green);border-radius:var(--r-card)}
.article-content .callout p + p{margin-top:8px}
.article-content hr{border:0;border-top:1px solid var(--line);margin:40px 0}
.article-content code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;background:var(--sand-100);padding:2px 6px;border-radius:3px}

/* Checkliste: Haken als feine Linie, keine Nummern-Deko */
.article-content .check-list{list-style:none;padding-left:0;display:grid;gap:10px}
.article-content .check-list li{position:relative;padding-left:30px}
.article-content .check-list li + li{margin-top:0}
.article-content .check-list li::before{content:"";position:absolute;left:4px;top:.5em;width:12px;height:7px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}

/* ---------- CTA-Band ---------- */
.cta-banner{margin:48px 0 0;padding:28px 32px;border-radius:var(--r-card);background:var(--green);color:var(--green-200);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 32px;align-items:center}
.cta-banner-title{font-family:var(--ff-serif);font-weight:600;font-size:28px;line-height:1.15;color:#fff;margin:0}
.cta-banner-body{font-size:var(--fs-small);line-height:1.55;margin:8px 0 0}
.cta-banner a.btn-p{background:#fff;color:var(--green);white-space:nowrap}
.cta-banner a.btn-p:hover{background:var(--sand-100)}
.cta-banner--light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.cta-banner--light .cta-banner-title{color:var(--green)}
.cta-banner--light a.btn-p{background:var(--green);color:#fff}
.article-content .cta-banner a.btn-p{text-decoration:none}

@media (max-width:767px){
  .article-content > p:first-child{font-size:var(--fs-body)}
  .article-content h2{margin-top:40px;padding-top:20px}
  .article-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .article-content .table-scroll table{min-width:540px}
  .cta-banner{grid-template-columns:minmax(0,1fr);padding:24px 20px}
  .cta-banner a.btn-p{width:100%;white-space:normal;text-align:center}
}