/* =========================================================
   Knowhow-Artikel - aufgewertetes Text-Layout (additiv zu .ds-page)
   Wirkt NUR auf .ds-article; Support/Unternehmen (.ds-page) bleiben
   voellig unberuehrt. Nutzt die Variablen aus textpage.css.
   An textpage.css anhaengen (oder als eigene Datei NACH textpage.css laden).
   ========================================================= */

/* Lesespalte + ruhigerer Rhythmus */
.ds-article .ds-wrap{ max-width:820px; margin:0 auto; padding:0 20px; }
.ds-article .ds-section{ padding:30px 0; }

/* Kopf */
.ds-article .ds-head{ padding:56px 0 34px; text-align:center; }
.ds-article .ds-head h1{ font-size:40px; line-height:1.12; letter-spacing:-.6px; font-weight:600; }
.ds-article .ds-head .ds-divider{ margin:18px auto 20px; }
.ds-article .ds-lead{ font-size:20px; line-height:1.55; color:var(--ink); max-width:640px; margin:0 auto; text-align:center; }

/* Fliesstext linksbuendig, angenehme Lesebreite */
.ds-article h2{ text-align:left; font-size:26px; line-height:1.25; font-weight:600; }
.ds-article .ds-section:not(.ds-head):not(.ds-knowledge):not(.ds-cta) > .ds-wrap > .ds-divider{ margin:14px 0 20px; }
.ds-article p{ text-align:left; font-size:18px; line-height:1.72; color:#46525c; margin:0 0 16px; }
.ds-article p:last-child{ margin-bottom:0; }
.ds-article strong{ color:var(--ink); }

/* Liste mit Akzent-Haken */
.ds-article .ds-list{ list-style:none; padding-left:0; margin:4px 0 0; }
.ds-article .ds-list li{ position:relative; padding-left:30px; margin:.55em 0; font-size:17px; line-height:1.55; color:#46525c; }
.ds-article .ds-list li::before{ content:""; position:absolute; left:7px; top:4px; width:7px; height:12px; border:solid var(--orange); border-width:0 2px 2px 0; transform:rotate(45deg); }

/* Hinweis-/Empfehlungs-Kasten */
.ds-article .ds-callout{ padding:16px 0; }
.ds-article .ds-callout .ds-wrap{ background:#fff7ef; border:1px solid #f1d7b9; border-left:4px solid var(--orange); border-radius:12px; padding:24px 28px; }
.ds-article .ds-callout-label{ display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); margin-bottom:6px; }
.ds-article .ds-callout h2{ font-size:20px; margin:0 0 8px; }
.ds-article .ds-callout p{ margin-bottom:0; }
.ds-article .ds-callout--rec .ds-wrap{ background:#eef6f0; border-color:#cfe6d6; border-left-color:#3a9d5d; }
.ds-article .ds-callout--rec .ds-callout-label{ color:#3a9d5d; }

/* Weiterfuehrendes Wissen - linksbuendig wie der Fliesstext oben */
.ds-article .ds-knowledge h2{ text-align:left; }
.ds-article .ds-knowledge .ds-divider{ margin:14px 0 20px; }
.ds-article .ds-knowledge p{ text-align:left; max-width:none; margin:0 0 22px; }

/* Weiterfuehrendes Wissen - Kacheln (topic-machine-card aus der DB) */
.ds-article .category-machine-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:6px; }
.ds-article .topic-machine-card{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.ds-article .topic-machine-card .topic-machine-image{ display:none; }   /* text-first: kein Kachelbild */
.ds-article .topic-machine-card h3{ margin:0 0 8px; font-size:18px; line-height:1.25; font-weight:600; }
.ds-article .topic-machine-card h3 a{ color:var(--ink); text-decoration:none; }
.ds-article .topic-machine-card h3 a:hover{ color:var(--orange); }
.ds-article .topic-machine-description{ color:var(--muted); font-size:15px; line-height:1.55; margin:0 0 16px;
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.ds-article .topic-machine-footer{ margin-top:auto; }
.ds-article .topic-machine-footer .button{ display:inline-block; background:transparent; color:var(--orange); padding:0; font-size:15px; font-weight:700; border:0; }
.ds-article .topic-machine-footer .button:hover{ filter:none; text-decoration:underline; }
.ds-article .topic-machine-footer .button::after{ content:" \2192"; }

/* FAQ - Ueberschrift links, Akkordeon in Lesespalte */
.ds-article .ds-faq h2{ text-align:left; }

/* CTA als weisse Karte mit Rahmen (Footer-Farbe), Icon links / Text rechts */
.ds-article .ds-cta{ padding:34px 0 10px; }
.ds-article .ds-cta .ds-wrap{ background:transparent; border:0; border-radius:0; padding:6px 0; text-align:left; }
.ds-article .ds-cta-inner{ display:flex; align-items:flex-start; gap:28px; }
.ds-article .ds-cta-icon{ margin-top:2px; }
.ds-article .ds-cta-icon{ flex:0 0 auto; width:78px; height:78px; border-radius:50%; background:rgba(236,147,69,.12); color:var(--orange); display:flex; align-items:center; justify-content:center; }
.ds-article .ds-cta-icon svg{ width:38px; height:38px; }
.ds-article .ds-cta-body{ flex:1; min-width:0; }
.ds-article .ds-cta h2{ text-align:left; color:#29353F; font-size:23px; margin:0; }
.ds-article .ds-cta .ds-divider{ margin:12px 0 14px; }
.ds-article .ds-cta p{ text-align:left; color:var(--muted); max-width:none; margin:0 0 16px; }
.ds-article .ds-cta .ds-btn{ margin-top:0; }
@media (max-width:600px){
  .ds-article .ds-cta-inner{ flex-direction:column; text-align:center; gap:16px; }
  .ds-article .ds-cta h2, .ds-article .ds-cta p{ text-align:center; }
  .ds-article .ds-cta .ds-divider{ margin:12px auto 14px; }
}

/* Mobil */
@media (max-width:767px){
  .ds-article .ds-head{ padding:34px 0 24px; }
  .ds-article .ds-head h1{ font-size:27px; }
  .ds-article .ds-lead{ font-size:18px; }
  .ds-article h2{ font-size:22px; }
  .ds-article p{ font-size:16px; }
  .ds-article .ds-cta .ds-wrap{ padding:26px 20px; }
}