/* =========================================================================
   Condisystems Fachartikel-Designsystem D2 — PRODUKTIVES Stylesheet
   -------------------------------------------------------------------------
   Spezifikation: Wissensplattform/konzept/fachartikel-designsystem.md
   Wird von Wissensplattform/werkzeuge/artikel_bauen.py in die lokale Vorschau
   eingebettet und für WordPress ausgeliefert (Plugin cs-fachartikel).

   Regeln (CLAUDE.md 4b, redaktionelle-gestaltung.md 11-13):
   - ALLES ist auf .cs-artikel begrenzt, keine nackten Elementselektoren
     (artikel_bauen.py prüft das bei jedem Lauf und bricht sonst ab)
   - Poppins 400/500/600 ist die einzige Schriftfamilie. KEIN @font-face hier:
     In WordPress liefert Porto Poppins, die lokale Vorschau bettet die Schrift
     selbst ein (Familie "CS Poppins", Fallback Poppins)
   - Marken-Tokens sind eine KOPIE der Werte aus assets/css/wissen.css,
     damit .cs-artikel in WordPress eigenständig bleibt
   Herkunft je Token: [W] an condisystems.com gemessen (designkonzept.md D-xx)
                      [P] aus der Wissensplattform übernommen
                      [N] neuer Gestaltungswert des Systems D2
   Keine Vorschau-Hilfen (dv-*) in dieser Datei.
   ========================================================================= */

.cs-artikel{
  /* Marke */
  --cs-blau:#2270AE;            /* [W] D-01 */
  --cs-blau-dunkel:#1B5A8C;     /* [P] Hover */
  --cs-blau-hell:#EAF2F9;       /* [P] Conversion-Flächen */
  --cs-flaeche:#F5F8FB;         /* [P] Inhaltsflächen */
  --cs-weiss:#FFFFFF;           /* [W] D-02 */
  --cs-ueberschrift:#212529;    /* [W] D-03 */
  --cs-text:#5E6166;            /* [P] Sekundärtext, Bildunterschriften */
  --cs-text-leise:#6B6F76;      /* [P] Metazeilen */
  --cs-textblau:#143852;        /* [W] D-06 */
  --cs-linie:#E2E8F0;           /* [P] */
  --cs-radius:15px;             /* [W] D-18 */
  --cs-radius-klein:8px;        /* [W] D-27 */
  --cs-schatten:0 1px 10px rgba(0,0,0,.08);
  --cs-schatten-hoch:0 10px 20px rgba(0,0,0,.10);
  --cs-fokus:0 0 0 3px #FFFFFF,0 0 0 6px #2270AE;
  --cs-sans:"CS Poppins","CS Poppins Symbole",Poppins,"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  /* Artikel */
  --cs-lesetext:#43484F;        /* [N] Fließtext, 9,22 : 1 auf Weiß */
  --cs-linie-stark:#C9D6E2;     /* [W] Token von /condicheck/ und /lohnkonditionierung/ */
  --cs-feuchte:#00ADD2;         /* [W] Token von /condicheck/ — NUR Feuchte in Grafiken */
  --cs-g-neutral:#6E7B8F;       /* [N] Grafiklinien, 4,03 : 1 auf --cs-flaeche */
  --cs-hypothetisch:#8F5A0E;    /* [W] Token --warning-text von /condicheck/ */
  /* Maße */
  --cs-bahn:1180px;             /* [P] = Wissensplattform */
  --cs-rand:16px;
  --cs-text-max:700px;          /* [N] Lesespalte */
  --cs-breit-max:880px;         /* [N] Tabellen, Grafiken */
  --cs-toc-breite:248px;
  --cs-toc-abstand:56px;
  --cs-kopf-versatz:104px;      /* Porto-Header mobil (D-13); per Integration setzen */
  --cs-fs-text:16px;
  --cs-lh-text:1.7;

  font-family:var(--cs-sans);font-size:var(--cs-fs-text);line-height:var(--cs-lh-text);
  color:var(--cs-lesetext);background:var(--cs-weiss);
  font-synthesis:none;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
}
@media (min-width:640px){.cs-artikel{--cs-rand:24px;--cs-fs-text:17px}}
@media (min-width:1024px){.cs-artikel{--cs-rand:30px;--cs-kopf-versatz:96px;--cs-lh-text:1.75}}

.cs-artikel *,.cs-artikel *::before,.cs-artikel *::after{box-sizing:border-box}
.cs-artikel [hidden]{display:none !important}
.cs-artikel .cs-nur-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cs-artikel .cs-bahn{max-width:var(--cs-bahn);margin-left:auto;margin-right:auto;
  padding-left:var(--cs-rand);padding-right:var(--cs-rand)}
.cs-artikel a{color:var(--cs-blau);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(34,112,174,.35);
  transition:color .15s ease,text-decoration-color .15s ease}
.cs-artikel a:hover{color:var(--cs-blau-dunkel);text-decoration-color:currentColor}
.cs-artikel a:focus-visible,.cs-artikel button:focus-visible,.cs-artikel summary:focus-visible{
  outline:none;box-shadow:var(--cs-fokus);border-radius:4px}
.cs-artikel strong{font-weight:600;color:var(--cs-ueberschrift)}
.cs-artikel em{font-style:normal;font-weight:500}   /* Poppins Italic wird nicht geladen */
.cs-artikel sup,.cs-artikel sub{line-height:0}
.cs-artikel .cs-formel{white-space:nowrap;font-weight:500;color:var(--cs-ueberschrift);
  font-variant-numeric:tabular-nums}

/* ======================================================= K-01 Artikelkopf */
.cs-artikel .cs-kopf{background:var(--cs-flaeche);border-bottom:1px solid var(--cs-linie);
  padding:20px 0 28px}
@media (min-width:1024px){.cs-artikel .cs-kopf{padding:28px 0 48px}}
.cs-artikel .cs-kopf__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:1024px){
  .cs-artikel .cs-kopf__raster{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
}
.cs-artikel .cs-krume ol{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin:0 0 8px;padding:0;
  list-style:none;font-size:13.5px;line-height:1.4;color:var(--cs-text-leise)}
.cs-artikel .cs-krume li{display:inline-flex;align-items:center}
.cs-artikel .cs-krume li+li::before{content:"";width:6px;height:6px;margin:0 12px 0 10px;
  border-top:1.5px solid #9AA3AE;border-right:1.5px solid #9AA3AE;transform:rotate(45deg)}
.cs-artikel .cs-krume a{display:inline-flex;align-items:center;min-height:40px;color:var(--cs-text);
  text-decoration:none}
.cs-artikel .cs-krume a:hover{color:var(--cs-blau);text-decoration:underline}
.cs-artikel .cs-kicker{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;font-size:13px;
  font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-blau)}
.cs-artikel .cs-kicker::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--cs-blau)}
.cs-artikel .cs-kicker a{color:inherit;text-decoration:none}
.cs-artikel .cs-kicker a:hover{text-decoration:underline}
.cs-artikel .cs-titel{margin:0 0 16px;font-weight:600;font-size:clamp(27px,5.6vw,42px);line-height:1.16;
  letter-spacing:-.025em;color:var(--cs-ueberschrift);hyphens:manual;text-wrap:balance}
.cs-artikel .cs-unterzeile{margin:0 0 22px;max-width:60ch;font-size:clamp(16.5px,2.2vw,19px);line-height:1.6;
  color:var(--cs-text)}
.cs-artikel .cs-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;
  font-size:14px;line-height:1.4;color:var(--cs-text-leise)}
.cs-artikel .cs-meta li{display:inline-flex;align-items:center;gap:8px}
.cs-artikel .cs-meta svg{width:16px;height:16px;flex:none;color:var(--cs-blau)}

/* ======================================================= K-02 Titelmotiv */
.cs-artikel .cs-titelmotiv{margin:0;border-radius:var(--cs-radius);overflow:hidden;line-height:0;
  background:#1E2638;box-shadow:var(--cs-schatten-hoch)}
.cs-artikel .cs-titelmotiv svg,.cs-artikel .cs-titelmotiv img{display:block;width:100%;height:auto;aspect-ratio:16/9}

/* ======================================================= Raster Artikelkörper */
.cs-artikel .cs-koerper{padding-top:36px;padding-bottom:72px}
@media (min-width:1024px){.cs-artikel .cs-koerper{padding-top:56px;padding-bottom:96px}}
.cs-artikel .cs-koerper__raster{display:block}
.cs-artikel .cs-toc-leiste{display:none}
@media (min-width:1200px){
  .cs-artikel .cs-koerper__raster{display:grid;
    grid-template-columns:var(--cs-toc-breite) minmax(0,1fr);column-gap:var(--cs-toc-abstand)}
  .cs-artikel .cs-toc-leiste{display:block}
}

/* Lesefluss: Breakout-Raster. Text 700 px, breite Elemente bis 880 px. */
.cs-artikel .cs-fluss{display:grid;
  grid-template-columns:[breit-start] minmax(0,1fr) [text-start] minmax(0,var(--cs-text-max)) [text-end] minmax(0,1fr) [breit-end];
  max-width:var(--cs-breit-max);margin-left:auto;margin-right:auto}
.cs-artikel .cs-fluss>*{grid-column:text;margin-top:0;margin-bottom:0;min-width:0}
.cs-artikel .cs-fluss>.cs-breit,.cs-artikel .cs-fluss>.cs-kapitel{grid-column:breit-start/breit-end}
.cs-artikel .cs-kapitel{display:grid;grid-template-columns:inherit}
.cs-artikel .cs-kapitel>*{grid-column:text;margin-top:0;margin-bottom:0;min-width:0}
.cs-artikel .cs-kapitel>.cs-breit{grid-column:breit-start/breit-end}

/* Vertikaler Rhythmus: nur margin-top (Rasterkinder kollabieren nicht) */
.cs-artikel .cs-fluss>*+*,.cs-artikel .cs-kapitel>*+*{margin-top:20px}
.cs-artikel .cs-fluss>.cs-kapitel{margin-top:64px}
@media (min-width:1024px){.cs-artikel .cs-fluss>.cs-kapitel{margin-top:80px}}

/* Härtung gegen Theme-Regeln (Porto/Elementor). Gemessen im Schnappschuss der Website mit Vollvergleich aller Elemente
   (werkzeuge/wp_themetest.py --artikel, themetest.js … artikel): Porto setzt font-family auf h1–h4 und line-height auf li;
   Elementor setzt für Figuren im Widget margin:0 (Spezifität 0,4,1) — der Abstand über Abbildungen bliebe sonst weg. */
.cs-artikel h1,.cs-artikel h2,.cs-artikel h3,.cs-artikel h4{font-family:var(--cs-sans)}
.cs-artikel li{line-height:inherit}
.cs-artikel .cs-kapitel>.cs-abb{margin-top:40px !important}

/* ======================================================= K-05 Fließtext */
.cs-artikel .cs-fluss>p,.cs-artikel .cs-kapitel>p{font-size:var(--cs-fs-text);line-height:var(--cs-lh-text)}
.cs-artikel .cs-einstieg{font-size:clamp(18px,2.4vw,20px) !important;line-height:1.62 !important;
  color:var(--cs-ueberschrift)}
.cs-artikel .cs-kapitel__kopf{padding-top:28px;border-top:1px solid var(--cs-linie)}
.cs-artikel .cs-kapitel__nr{display:block;margin:0 0 10px;font-size:13px;font-weight:600;line-height:1;
  letter-spacing:.12em;color:var(--cs-blau);font-variant-numeric:tabular-nums}
.cs-artikel h2.cs-h2{margin:0;font-weight:600;font-size:clamp(23px,3.4vw,30px);line-height:1.24;
  letter-spacing:-.02em;color:var(--cs-ueberschrift);text-wrap:balance}
.cs-artikel .cs-kapitel>.cs-kapitel__kopf+*{margin-top:22px}
.cs-artikel h3.cs-h3{margin:0;font-weight:600;font-size:clamp(18px,2.4vw,20.5px);line-height:1.35;
  letter-spacing:-.012em;color:var(--cs-ueberschrift);text-wrap:balance}
.cs-artikel .cs-kapitel>.cs-h3{margin-top:44px}
.cs-artikel .cs-kapitel>.cs-h3+*{margin-top:12px}
.cs-artikel .cs-h2,.cs-artikel .cs-h3,.cs-artikel [id]{scroll-margin-top:calc(var(--cs-kopf-versatz) + 72px)}
@media (min-width:1200px){
  .cs-artikel .cs-h2,.cs-artikel .cs-h3,.cs-artikel [id]{scroll-margin-top:calc(var(--cs-kopf-versatz) + 28px)}
}
.cs-artikel .cs-fluss ul.cs-liste,.cs-artikel .cs-kapitel ul.cs-liste{margin:0;padding-left:1.2em}
.cs-artikel .cs-liste li::marker{color:var(--cs-blau)}
.cs-artikel .cs-liste li+li{margin-top:8px}

/* Quellenverweis im Text */
.cs-artikel .cs-ref{font-size:12px;font-weight:600;vertical-align:super;line-height:0;white-space:nowrap}
.cs-artikel .cs-ref a{padding:0 1px;text-decoration:none;color:var(--cs-blau)}
.cs-artikel .cs-ref a:hover{text-decoration:underline}

/* ======================================================= K-03 Auf einen Blick */
.cs-artikel .cs-blick{padding:26px 22px 26px;border-radius:var(--cs-radius);background:var(--cs-flaeche);
  border:1px solid #E7EDF3}
@media (min-width:640px){.cs-artikel .cs-blick{padding:30px 34px 32px}}
.cs-artikel .cs-fluss>.cs-blick{margin-top:40px}
.cs-artikel .cs-blick__titel{display:flex;align-items:center;gap:10px;margin:0 0 18px;font-size:13px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cs-blau)}
.cs-artikel .cs-blick__titel svg{width:18px;height:18px;flex:none}
.cs-artikel .cs-blick__liste{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0;padding:0;list-style:none}
@media (min-width:820px){.cs-artikel .cs-blick__liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px}}
.cs-artikel .cs-blick__liste li{position:relative;padding-top:16px;font-size:15.5px;line-height:1.6;color:var(--cs-text)}
.cs-artikel .cs-blick__liste li::before{content:"";position:absolute;left:0;top:0;width:28px;height:2px;
  border-radius:1px;background:var(--cs-blau)}
.cs-artikel .cs-blick__liste strong{font-size:16px;line-height:1.5}

/* ======================================================= K-04 Inhaltsverzeichnis */
/* Desktop: Randspalte */
.cs-artikel .cs-toc-leiste .cs-toc{position:sticky;top:calc(var(--cs-kopf-versatz) + 28px);
  max-height:calc(100vh - var(--cs-kopf-versatz) - 56px);overflow:auto;padding:2px 4px 8px 2px}
.cs-artikel .cs-toc__titel{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cs-ueberschrift)}
.cs-artikel .cs-toc ol{margin:0;padding:0;list-style:none}
.cs-artikel .cs-toc li{margin:0}
.cs-artikel .cs-toc a{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;
  min-height:40px;padding:8px 6px 8px 12px;border-left:2px solid var(--cs-linie);font-size:13.5px;line-height:1.42;
  color:var(--cs-text);text-decoration:none;overflow-wrap:break-word;hyphens:manual}   /* Verzeichnis: keine automatische Trennung (Firefox trennte „rich-tig“); die Randspalte fasst die längsten Wörter */
.cs-artikel .cs-toc a:hover{color:var(--cs-blau);border-left-color:#B8CDE2}
.cs-artikel .cs-toc a.ist-aktiv{color:var(--cs-ueberschrift);font-weight:500;border-left-color:var(--cs-blau)}
.cs-artikel .cs-toc__nr{font-size:12.5px;font-weight:600;color:var(--cs-blau);font-variant-numeric:tabular-nums;
  padding-top:1px}
.cs-artikel .cs-toc__zusatz{margin:22px 0 0;padding:18px 0 0 16px;border-top:1px solid var(--cs-linie);
  font-size:14px;line-height:1.5;color:var(--cs-text)}
.cs-artikel .cs-toc__zusatz a{display:inline;min-height:0;padding:0;border:0;font-weight:500;color:var(--cs-blau)}
.cs-artikel .cs-toc__zusatz a:hover{text-decoration:underline}

/* Tablet / Smartphone: aufklappbares Verzeichnis im Textfluss */
.cs-artikel .cs-toc-inline{border:1px solid var(--cs-linie);border-radius:var(--cs-radius);background:var(--cs-weiss)}
.cs-artikel .cs-fluss>.cs-toc-inline{margin-top:28px}
@media (min-width:1200px){.cs-artikel .cs-toc-inline{display:none}}
.cs-artikel .cs-toc-inline>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:52px;padding:10px 18px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;
  color:var(--cs-ueberschrift);border-radius:var(--cs-radius)}
.cs-artikel .cs-toc-inline>summary::-webkit-details-marker{display:none}
.cs-artikel .cs-toc-inline>summary .cs-toc-inline__zahl{font-weight:500;color:var(--cs-text-leise)}
.cs-artikel .cs-toc-inline>summary svg{width:18px;height:18px;flex:none;color:var(--cs-blau);transition:transform .2s ease}
.cs-artikel .cs-toc-inline[open]>summary svg{transform:rotate(180deg)}
.cs-artikel .cs-toc-inline .cs-toc{padding:4px 12px 14px}
@media (min-width:640px){.cs-artikel .cs-toc-inline .cs-toc ol{columns:2;column-gap:24px}
  .cs-artikel .cs-toc-inline .cs-toc li{break-inside:avoid}}

/* Kapitelleiste (nur mit JavaScript, unter 1200 px) */
.cs-artikel .cs-kapitelleiste{position:fixed;left:0;right:0;top:var(--cs-kopf-versatz);z-index:40;
  background:var(--cs-weiss);border-bottom:1px solid var(--cs-linie);box-shadow:0 4px 10px rgba(0,0,0,.04);
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
/* D2: nur Überblenden, keine Bewegung — die Leiste ragt nie in den Website-Header */
.cs-artikel .cs-kapitelleiste.ist-sichtbar{opacity:1;visibility:visible;transition:opacity .16s ease}
@media (min-width:1200px){.cs-artikel .cs-kapitelleiste{display:none}}
.cs-artikel .cs-kapitelleiste__bahn{display:flex;align-items:center;gap:12px;max-width:var(--cs-breit-max);
  margin:0 auto;padding:2px var(--cs-rand);min-height:44px}
.cs-artikel .cs-kapitelleiste__knopf{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:40px;
  padding:0 14px 0 10px;border:1px solid var(--cs-linie-stark);border-radius:var(--cs-radius-klein);
  background:var(--cs-weiss);color:var(--cs-textblau);font:600 14px/1 var(--cs-sans);cursor:pointer}
.cs-artikel .cs-kapitelleiste__knopf svg{width:18px;height:18px;color:var(--cs-blau)}
.cs-artikel .cs-kapitelleiste__knopf[aria-expanded="true"]{background:var(--cs-blau-hell);border-color:var(--cs-blau)}
.cs-artikel .cs-kapitelleiste__aktuell{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:14px;font-weight:500;color:var(--cs-ueberschrift)}
.cs-artikel .cs-kapitelleiste__panel{max-width:var(--cs-breit-max);margin:0 auto;padding:4px var(--cs-rand) 16px;
  max-height:calc(100vh - var(--cs-kopf-versatz) - 64px);overflow:auto}

/* ======================================================= K-07 Hervorhebungen */
/* Merksatz: typografische Aussage, keine Fläche */
.cs-artikel .cs-merksatz{margin:0;padding:4px 0 4px 22px;border-left:3px solid var(--cs-blau)}
.cs-artikel .cs-kapitel>.cs-merksatz{margin-top:36px}
.cs-artikel .cs-kapitel>.cs-merksatz+*{margin-top:36px}
.cs-artikel .cs-merksatz__label{display:block;margin:0 0 6px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cs-blau)}
.cs-artikel .cs-merksatz p{margin:0;font-size:clamp(18px,2.4vw,21px);line-height:1.5;font-weight:500;
  letter-spacing:-.01em;color:var(--cs-ueberschrift)}

/* Begriff: leiseste Form */
.cs-artikel .cs-begriff{margin:0;padding:16px 0 18px;border-top:1px solid var(--cs-linie);
  border-bottom:1px solid var(--cs-linie);font-size:15.5px;line-height:1.62;color:var(--cs-text)}
.cs-artikel .cs-kapitel>.cs-begriff{margin-top:28px}
.cs-artikel .cs-kapitel>.cs-begriff+*{margin-top:28px}
.cs-artikel .cs-begriff__label{display:block;margin:0 0 4px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cs-text-leise)}
.cs-artikel .cs-begriff__wort{display:block;margin:0 0 6px;font-size:16.5px;font-weight:600;line-height:1.4;
  color:var(--cs-ueberschrift)}
.cs-artikel .cs-begriff p{margin:0}

/* Hinweis (Normbezug, methodische Einschränkung, wichtiger Hinweis) */
.cs-artikel .cs-hinweis{padding:22px 22px 24px;border-radius:var(--cs-radius);background:var(--cs-flaeche);
  font-size:15.5px;line-height:1.65;color:var(--cs-lesetext)}
@media (min-width:640px){.cs-artikel .cs-hinweis{padding:26px 30px 28px}}
.cs-artikel .cs-kapitel>.cs-hinweis{margin-top:32px}
.cs-artikel .cs-kapitel>.cs-hinweis+*{margin-top:32px}
.cs-artikel .cs-hinweis__titel{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;font-size:16px;
  font-weight:600;line-height:1.4;color:var(--cs-ueberschrift)}
.cs-artikel .cs-hinweis__titel svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--cs-blau)}
.cs-artikel .cs-hinweis p{margin:0}
.cs-artikel .cs-hinweis p+p{margin-top:12px;padding-top:12px;border-top:1px solid #E3E9F0}

/* Beispiel (hypothetisch gekennzeichnet) */
.cs-artikel .cs-beispiel{padding:20px 22px 22px;border:1.5px dashed var(--cs-linie-stark);border-radius:var(--cs-radius);
  background:var(--cs-weiss);font-size:15.5px;line-height:1.65;color:var(--cs-lesetext)}
@media (min-width:640px){.cs-artikel .cs-beispiel{padding:24px 28px 26px}}
.cs-artikel .cs-kapitel>.cs-beispiel{margin-top:28px}
.cs-artikel .cs-kapitel>.cs-beispiel+*{margin-top:32px}
.cs-artikel .cs-beispiel__titel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;
  font-size:14px;font-weight:600;line-height:1.4;color:var(--cs-hypothetisch)}
.cs-artikel .cs-beispiel__titel svg{width:18px;height:18px;flex:none}
.cs-artikel .cs-beispiel p{margin:0}

/* Checkliste */
.cs-artikel .cs-checkliste{padding:22px 22px 24px;border:1px solid var(--cs-linie);border-radius:var(--cs-radius);
  background:var(--cs-weiss)}
@media (min-width:640px){.cs-artikel .cs-checkliste{padding:26px 30px 28px}}
.cs-artikel .cs-kapitel>.cs-checkliste{margin-top:36px}
.cs-artikel .cs-checkliste__titel{margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.45;color:var(--cs-ueberschrift)}
.cs-artikel .cs-checkliste ul{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 32px;margin:0;padding:0;list-style:none}
@media (min-width:820px){.cs-artikel .cs-checkliste ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cs-artikel .cs-checkliste li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.55}
.cs-artikel .cs-checkliste li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;
  border:1.5px solid var(--cs-blau);border-radius:4px;background:var(--cs-weiss)}

/* ======================================================= K-08 Abbildungen */
.cs-artikel .cs-abb{margin:0}
.cs-artikel .cs-kapitel>.cs-abb{margin-top:40px}
.cs-artikel .cs-kapitel>.cs-abb+*{margin-top:40px}
.cs-artikel .cs-abb__flaeche{padding:20px 0 14px;background:var(--cs-flaeche);
  margin-left:calc(-1 * var(--cs-rand));margin-right:calc(-1 * var(--cs-rand))}
@media (min-width:640px){.cs-artikel .cs-abb__flaeche{margin-left:0;margin-right:0;border-radius:var(--cs-radius);
  padding:24px 16px 18px}}
.cs-artikel .cs-abb svg{display:block;width:100%;height:auto}
.cs-artikel .cs-abb .g-kompakt{max-width:480px;margin:0 auto}
.cs-artikel .cs-abb .g-breit{display:none}
/* D2: breite Variante erst ab 1024 px — zwischen 820 und 1023 px wäre sie zu klein (11,5 px) */
@media (min-width:1024px){.cs-artikel .cs-abb .g-kompakt{display:none}.cs-artikel .cs-abb .g-breit{display:block}}
.cs-artikel .cs-abb figcaption{max-width:var(--cs-text-max);margin:14px auto 0;font-size:14.5px;line-height:1.6;
  color:var(--cs-text)}
.cs-artikel .cs-abb__nr{font-weight:600;color:var(--cs-ueberschrift)}
/* Schrift in eingebetteten Grafiken */
.cs-artikel .cs-g text{font-family:var(--cs-sans);fill:var(--cs-ueberschrift)}
.cs-artikel .cs-g .t-600{font-weight:600}
.cs-artikel .cs-g .t-500{font-weight:500}
.cs-artikel .cs-g .t-leise{fill:var(--cs-text)}
.cs-artikel .cs-g .t-blau{fill:var(--cs-blau)}
.cs-artikel .cs-g .t-weiss{fill:#FFFFFF}

/* ======================================================= K-06 Tabellen */
.cs-artikel .cs-tabelle{border:1px solid var(--cs-linie);border-radius:var(--cs-radius);background:var(--cs-weiss);
  overflow-x:auto;-webkit-overflow-scrolling:touch}
.cs-artikel .cs-kapitel>.cs-tabelle{margin-top:24px}
.cs-artikel .cs-tabelle:focus-visible{outline:none;box-shadow:var(--cs-fokus)}
.cs-artikel .cs-tabelle table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.55;color:var(--cs-lesetext)}
.cs-artikel .cs-tabelle thead th{padding:14px 18px 12px;background:var(--cs-flaeche);border-bottom:2px solid var(--cs-blau);
  text-align:left;vertical-align:bottom;font-size:14px;font-weight:600;line-height:1.4;color:var(--cs-ueberschrift)}
.cs-artikel .cs-tabelle tbody th{padding:16px 18px;text-align:left;vertical-align:top;font-weight:600;
  color:var(--cs-ueberschrift)}
.cs-artikel .cs-tabelle tbody th{hyphens:manual}   /* Zeilenköpfe nicht trennen (Firefox: „Bauteilanforderun-gen“); Spaltenbreite reicht */
.cs-artikel .cs-tabelle tbody td{padding:16px 18px;vertical-align:top}
.cs-artikel .cs-tabelle tbody tr+tr>*{border-top:1px solid var(--cs-linie)}
.cs-artikel .cs-tabelle .cs-tab__label{display:none}
.cs-artikel .cs-tabelle th,.cs-artikel .cs-tabelle td{hyphens:auto;overflow-wrap:normal;
  hyphenate-limit-chars:9 4 4}   /* nur lange Wörter, mindestens 4 Zeichen je Seite (wo unterstützt); Fallback: normale Trennung */
.cs-artikel .cs-tabelle--4 table{font-size:14.5px}
.cs-artikel .cs-tabelle--4 thead th,.cs-artikel .cs-tabelle--4 tbody th,.cs-artikel .cs-tabelle--4 tbody td{padding-left:14px;padding-right:14px}
.cs-artikel .cs-tabelle--4 tbody th{width:23%}
.cs-artikel .cs-tabelle--3 tbody th{width:27%}
.cs-artikel .cs-tab-hinweis{display:flex;gap:10px;font-size:14px;line-height:1.6;color:var(--cs-text)}
.cs-artikel .cs-kapitel>.cs-tab-hinweis{margin-top:14px}
.cs-artikel .cs-tab-hinweis svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--cs-g-neutral)}
/* Kartenansicht: eine Zeile = ein Block, Spaltenkopf als Zwischenzeile.
   3 Spalten unter 820 px, 4 Spalten unter 1024 px (Satztabellen brauchen dort ≥ 800 px). */
@media (max-width:819px){
  .cs-artikel .cs-tabelle--karten{overflow:visible}
  .cs-artikel .cs-tabelle--karten table,.cs-artikel .cs-tabelle--karten tbody,.cs-artikel .cs-tabelle--karten tr,.cs-artikel .cs-tabelle--karten th,.cs-artikel .cs-tabelle--karten td{display:block;width:auto}
  .cs-artikel .cs-tabelle--karten thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cs-artikel .cs-tabelle--karten tbody tr{padding:18px 18px 20px}
  .cs-artikel .cs-tabelle--karten tbody tr+tr{border-top:1px solid var(--cs-linie)}
  .cs-artikel .cs-tabelle--karten tbody tr+tr>*{border-top:0}
  .cs-artikel .cs-tabelle--karten tbody th{width:auto;padding:0 0 4px;font-size:16.5px;line-height:1.4}
  .cs-artikel .cs-tabelle--karten tbody td{padding:10px 0 0}
  .cs-artikel .cs-tabelle--karten .cs-tab__label{display:block;margin:0 0 2px;font-size:13px;font-weight:600;line-height:1.4;color:var(--cs-blau)}
}
@media (min-width:820px) and (max-width:1023px){
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4{overflow:visible}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 table,.cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody,.cs-artikel .cs-tabelle--karten.cs-tabelle--4 tr,.cs-artikel .cs-tabelle--karten.cs-tabelle--4 th,.cs-artikel .cs-tabelle--karten.cs-tabelle--4 td{display:block;width:auto}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody tr{padding:18px 18px 20px}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody tr+tr{border-top:1px solid var(--cs-linie)}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody tr+tr>*{border-top:0}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody th{width:auto;padding:0 0 4px;font-size:16.5px;line-height:1.4}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 tbody td{padding:10px 0 0}
  .cs-artikel .cs-tabelle--karten.cs-tabelle--4 .cs-tab__label{display:block;margin:0 0 2px;font-size:13px;font-weight:600;line-height:1.4;color:var(--cs-blau)}
}
.cs-artikel .cs-scrollhinweis{display:flex;align-items:center;gap:8px;margin-top:8px !important;font-size:13.5px;
  color:var(--cs-text)}
.cs-artikel .cs-scrollhinweis svg{width:18px;height:18px;flex:none;color:var(--cs-blau)}

/* ======================================================= K-10 CondiCheck-Modul */
.cs-artikel .cs-modul{padding:24px 22px 26px;border-radius:var(--cs-radius);background:var(--cs-blau-hell)}
@media (min-width:640px){.cs-artikel .cs-modul{padding:30px 34px 32px}}
.cs-artikel .cs-kapitel>.cs-modul{margin-top:40px}
.cs-artikel .cs-modul__raster{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:820px){.cs-artikel .cs-modul--mit-aktion .cs-modul__raster{grid-template-columns:minmax(0,1fr) auto;
  gap:40px;align-items:end}}
.cs-artikel .cs-modul__titel{margin:0 0 10px;font-size:clamp(18px,2.4vw,20px);font-weight:600;line-height:1.35;
  letter-spacing:-.01em;color:var(--cs-ueberschrift)}
.cs-artikel .cs-modul p:not(.cs-modul__titel){margin:0;font-size:15.5px;line-height:1.65;color:var(--cs-lesetext)}
.cs-artikel .cs-modul p:not(.cs-modul__titel)+p{margin-top:10px}

/* Knöpfe (= Plattform .cs-knopf, D-18) */
.cs-artikel .cs-knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin:0;
  padding:12px 24px;border:2px solid var(--cs-blau);border-radius:var(--cs-radius);background:var(--cs-weiss);
  color:var(--cs-blau);font:600 15px/1.2 var(--cs-sans);text-decoration:none;white-space:nowrap;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.cs-artikel .cs-knopf:hover{background:var(--cs-blau);color:var(--cs-weiss);text-decoration:none}
.cs-artikel .cs-knopf--voll{background:var(--cs-blau);color:var(--cs-weiss)}
.cs-artikel .cs-knopf--voll:hover{background:var(--cs-blau-dunkel);border-color:var(--cs-blau-dunkel)}
.cs-artikel .cs-knopf svg{width:16px;height:16px;flex:none}
.cs-artikel .cs-knopf:focus-visible{border-radius:var(--cs-radius)}

/* ======================================================= K-11 Kontaktbereich */
.cs-artikel .cs-fluss>.cs-kontakt{margin-top:72px}
.cs-artikel .cs-kontakt{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding:28px 22px;
  border-radius:var(--cs-radius);background:var(--cs-blau-hell);border-top:3px solid var(--cs-blau)}
@media (min-width:640px){.cs-artikel .cs-kontakt{padding:36px 36px}}
@media (min-width:820px){.cs-artikel .cs-kontakt{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:44px;
  align-items:center;padding:40px 44px}}
.cs-artikel .cs-kontakt .cs-h2{font-size:clamp(21px,2.8vw,26px)}
.cs-artikel .cs-kontakt__text p{margin:14px 0 0;font-size:16px;line-height:1.65;color:var(--cs-lesetext)}
.cs-artikel .cs-kontakt__aktion{display:flex;flex-direction:column;gap:6px}
.cs-artikel .cs-kontakt__aktion .cs-knopf{width:100%;margin-bottom:8px}
.cs-artikel .cs-kontakt__direkt{margin:0 0 2px;font-size:13.5px;color:var(--cs-text)}
.cs-artikel .cs-kontakt__weg{display:inline-flex;align-items:center;gap:10px;min-height:40px;font-size:15px;
  font-weight:500;color:var(--cs-textblau);text-decoration:none}
.cs-artikel .cs-kontakt__weg svg{width:18px;height:18px;flex:none;color:var(--cs-blau)}
.cs-artikel .cs-kontakt__weg:hover{color:var(--cs-blau);text-decoration:underline}

/* ======================================================= K-12 FAQ (Akkordeon, nativ: details/summary) */
/* Ruhig und fachlich: feine Linien, keine Flächen, kein Schatten. Blau nur als Akzent (Chevron, Hover, Fokus). Alle Antworten
   stehen im HTML und sind beim Laden zugeklappt; mehrere dürfen gleichzeitig offen sein. Ohne JavaScript voll bedienbar. */
.cs-artikel .cs-faq{margin-top:24px;border-bottom:1px solid var(--cs-linie)}
.cs-artikel .cs-faq__eintrag{border-top:1px solid var(--cs-linie)}
.cs-artikel .cs-faq__frage{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-height:56px;
  margin:0;padding:15px 2px 15px 0;cursor:pointer;list-style:none;font-size:clamp(16.5px,2.2vw,18.5px);font-weight:600;
  line-height:1.4;letter-spacing:-.008em;color:var(--cs-ueberschrift);border-radius:var(--cs-radius-klein);
  overflow-wrap:break-word;hyphens:manual;-webkit-tap-highlight-color:transparent}
.cs-artikel .cs-faq__frage::-webkit-details-marker{display:none}
.cs-artikel .cs-faq__frage::marker{content:""}
.cs-artikel .cs-faq__text{flex:1 1 auto;min-width:0}
.cs-artikel .cs-faq__frage svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--cs-blau);transition:transform .2s ease}
.cs-artikel .cs-faq__eintrag[open]>.cs-faq__frage svg{transform:rotate(180deg)}
.cs-artikel .cs-faq__frage:hover{color:var(--cs-blau)}
.cs-artikel .cs-faq__antwort{padding:0 0 24px}
@media (min-width:640px){.cs-artikel .cs-faq__antwort{padding-right:44px}}
.cs-artikel .cs-faq__antwort>*{margin:0}
.cs-artikel .cs-faq__antwort>*+*{margin-top:14px}
.cs-artikel .cs-faq__antwort p{font-size:var(--cs-fs-text);line-height:var(--cs-lh-text)}

/* ======================================================= K-09 Quellen */
.cs-artikel .cs-quellen__einleitung{font-size:15px !important;line-height:1.65 !important;color:var(--cs-text)}
.cs-artikel .cs-quellen{margin:0;padding:0;list-style:none;counter-reset:none}
.cs-artikel .cs-kapitel>.cs-quellen{margin-top:24px}
.cs-artikel .cs-quellen li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 8px;padding:14px 0;
  border-top:1px solid var(--cs-linie);font-size:15px;line-height:1.6;color:var(--cs-lesetext)}
.cs-artikel .cs-quellen li:last-child{border-bottom:1px solid var(--cs-linie)}
.cs-artikel .cs-quellen li:target{background:var(--cs-blau-hell)}
.cs-artikel .cs-quellen__nr{font-weight:600;color:var(--cs-blau);font-variant-numeric:tabular-nums}
.cs-artikel .cs-quellen__beleg{display:block;margin-top:4px;font-size:14px;line-height:1.6;color:var(--cs-text)}
.cs-artikel .cs-quellen__zurueck{display:inline-flex;align-items:center;min-height:24px;margin-left:6px;text-decoration:none}
.cs-artikel .cs-quellen__zurueck svg{width:14px;height:14px}
.cs-artikel .cs-quellen a[href^="https://doi.org"]{font-weight:500;white-space:nowrap}

/* ======================================================= K-13 Weiterführende Artikel */
.cs-artikel .cs-weiter{padding:56px 0 64px;background:var(--cs-flaeche);border-top:1px solid var(--cs-linie)}
@media (min-width:1024px){.cs-artikel .cs-weiter{padding:64px 0 80px}}
.cs-artikel .cs-weiter__kopf{margin:0 0 24px}
/* Karten = unveränderte Plattformkomponente aus wissen.css (.cs-wissen .cs-karte) */
.cs-artikel .cs-wissen a{text-decoration:none}
.cs-artikel .cs-weiter.cs-wissen{background:var(--cs-flaeche)}

/* ======================================================= Bewegung reduziert */
@media (prefers-reduced-motion:reduce){
  .cs-artikel *,.cs-artikel *::before,.cs-artikel *::after{transition:none !important;animation:none !important}
}