/*
 * @file artikel.css
 * @project StoffwechselFit
 * @component WordPress-Theme / CSS
 * @purpose Verbindliche Einzelartikeldarstellung
 * @requirements PRJ-INS-20260727-001
 * @findings PRJ-QM-P0-001, PRJ-QM-P0-002
 * @decisions PRJ-ADR-20260727-001, PRJ-ADR-20260727-002
 * @tests SWF-V602-ARTICLE-01 bis -03
 * @security Auf Theme-/Artikelklassen begrenzte Kaskade.
 * @privacy Keine personenbezogenen Daten.
 * @offline Lokale CSS-Datei.
 * @generated false
 * @source_of_truth htdocs/wp-content/themes/stoffwechselfit/assets/css/artikel.css
 * @last_reviewed 2026-07-27
 */
/* ============================================================
   Artikeldarstellung — Ergänzung zum Haupt-Stylesheet
   ============================================================
   Diese Datei enthält NUR artikelspezifische Regeln. Farben, Schriften und
   Grundlayout kommen aus style.css.

   Zur Vorgeschichte: Hier standen früher eigene :root-Variablen und eine
   eigene body-Regel aus einem separaten Entwurf. Sie überschrieben die
   Markenfarben (--ink, --muted) und den Seitenhintergrund — auf jeder
   Artikelseite galt dadurch ein anderes Farbschema als im Rest der Seite.
   Zusätzlich wurde die Datei nur bei is_singular('wissen') geladen, sodass
   Praxistests, Produkte und Rezepte ganz ohne Artikelstile blieben.
   ------------------------------------------------------------ */

/* ---------- Kopfbereich ---------- */
header.art { padding: 40px 0 8px; }

.crumb {
  font-size: 13px;
  color: var(--slate);
  margin-bottom: 18px;
}
.crumb a { color: var(--slate); text-decoration: none; }
.crumb a:hover { color: var(--green-deep); text-decoration: underline; }

.lead {
  font-size: 1.12rem;
  color: var(--ink-soft);
  margin: 0 0 22px;
  line-height: 1.6;
}

/* Metabar: Autor, Stand, Lesezeit */
.metabar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  font-size: 12.5px;
  color: var(--slate);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 12px 0;
  margin-bottom: 6px;
}
.metabar b { color: var(--ink); font-weight: 600; }

/* ---------- Evidenzkennzeichnung ---------- */
/* Die drei Stufen sind das Kernversprechen der Seite — sie müssen auf
   einen Blick unterscheidbar sein, auch ohne Farbwahrnehmung. Deshalb
   zusätzlich unterschiedliche Randstärke. */
.evi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.5;
}
.evi.g,
.evi.gesichert { background: #EAF3DE; color: #27500A; border: 1px solid #C0DD97; }
.evi.p,
.evi.plausibel { background: #E6F1FB; color: #0C447C; border: 1px dashed #9EC4E4; }
.evi.o,
.evi.offen     { background: #FAEEDA; color: #633806; border: 1px dotted #E0B878; }

/* Evidenzstufe als Block im Text */
.tier {
  display: block;
  margin: 22px 0;
  padding: 14px 18px;
  border-left: 4px solid var(--hair-strong);
  background: #FBFAF7;
  border-radius: 0 10px 10px 0;
  font-size: .96rem;
}
.tier .evi { margin-bottom: 8px; }
.tier.gesichert { border-left-color: #27500A; background: #F5FAF0; }
.tier.plausibel { border-left-color: #0C447C; background: #F2F8FD; }
.tier.offen     { border-left-color: #BA7517; background: #FDF8F0; }
.tier b, .tier strong { color: var(--ink); }

/* ---------- Artikeltext ---------- */
article { padding: 20px 0 10px; }
article h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.55rem;
  color: var(--green-deep);
  margin: 38px 0 10px;
  font-weight: 700;
  line-height: 1.25;
}
article h3 {
  font-size: 1.13rem;
  color: var(--ink);
  margin: 26px 0 6px;
  font-weight: 600;
}
article p { font-size: 1.02rem; margin: 0 0 16px; }
article ul, article ol { margin: 0 0 18px 22px; line-height: 1.75; }
article li { margin-bottom: 6px; }

/* ---------- Abbildungen ---------- */
/* Betrifft CGM-Kurven, Produktfotos und Diagramme gleichermaßen. */
figure {
  margin: 26px 0;
  background: var(--white, #fff);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 14px;
  overflow: hidden;
}
figure img,
figure svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
}
figcaption {
  font-size: 13px;
  color: var(--slate);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hair);
  line-height: 1.6;
}

/* Bilder außerhalb von figure nicht überlaufen lassen */
article img { max-width: 100%; height: auto; }

/* ---------- Tabellen ---------- */
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: .95rem;
}
article th, article td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
}
article th { background: #FBFAF7; font-weight: 700; color: var(--ink); }

/* Auf schmalen Bildschirmen seitlich scrollbar statt gequetscht */
.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Quellen ---------- */
.sources, section.sources {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 2px solid var(--hair);
  font-size: .92rem;
}
.sources h2, .sources h3 { font-size: 1.05rem; margin-bottom: 10px; }
.sources ol, .sources ul { margin-left: 20px; line-height: 1.7; }
.sources a { word-break: break-word; }

/* ---------- Fußbereich des Artikels ---------- */
footer.art {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: .9rem;
  color: var(--slate);
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 640px) {
  article h2 { font-size: 1.35rem; margin-top: 30px; }
  article p  { font-size: 1rem; }
  figure     { padding: 10px; margin: 20px 0; }
  .metabar   { gap: 8px 16px; font-size: 12px; }
}

/* ---------- Druck ---------- */
@media print {
  header.art, .metabar { border-color: #ccc; }
  figure { break-inside: avoid; border-color: #ddd; }
  .tier  { break-inside: avoid; }
  article h2, article h3 { break-after: avoid; }
}

/* ============================================================
   Redaktionsblöcke
   ============================================================
   Die Elemente, die im Editor eingesetzt werden können. Ihr Aussehen ist
   hier zentral festgelegt — ändert sich etwas, wirkt es sofort auf allen
   Beiträgen, ohne dass jeder einzeln überarbeitet werden muss.
   ------------------------------------------------------------ */

/* Quellenangabe innerhalb einer Evidenzstufe */
.tier-quelle{margin:10px 0 0;color:var(--slate)}
.tier-quelle small{font-size:.85rem}

/* ---------- Eigene Messung (n=1) ---------- */
/* Bewusst deutlich abgesetzt: Die Trennung zwischen belegtem Wissen und
   persönlicher Beobachtung ist das Kernversprechen der Seite. */
.swf-n1{
  margin:26px 0;
  padding:16px 20px;
  background:#FDF6EE;
  border:1px solid #EBD9C4;
  border-left:4px solid var(--orange);
  border-radius:0 10px 10px 0
}
.swf-n1-label{
  display:inline-block;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#8A4A1E;
  margin-bottom:8px
}
.swf-n1-datum{
  display:inline-block;margin-left:10px;
  font-size:12px;color:var(--slate)
}
.swf-n1-text p:last-child{margin-bottom:0}
.swf-n1-hinweis{
  margin:12px 0 0;padding-top:10px;
  border-top:1px solid #EBD9C4;
  color:#6B5A44
}
.swf-n1-hinweis small{font-size:.86rem;font-style:italic}

/* ---------- Hinweiskästen ---------- */
.swf-hinweis{
  margin:22px 0;padding:14px 18px;
  border-radius:10px;
  border-left:4px solid;
  font-size:.97rem
}
.swf-hinweis p:last-child{margin-bottom:0}
.swf-hinweis-info{background:#F2F8FD;border-left-color:#0C447C;color:#123A5C}
.swf-hinweis-achtung{background:#FDF8F0;border-left-color:#BA7517;color:#6B4A15}
.swf-hinweis-wichtig{background:#FCF0F1;border-left-color:#B32D30;color:#7A2225}

/* ---------- Kennzahl ---------- */
.swf-kennzahl{
  display:inline-flex;flex-direction:column;
  gap:2px;margin:14px 14px 14px 0;
  padding:14px 20px;
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:12px;
  min-width:130px
}
.swf-kennzahl-wert{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:1.7rem;font-weight:800;
  color:var(--green-deep);line-height:1.1;
  font-variant-numeric:tabular-nums
}
.swf-kennzahl-label{
  font-size:12px;font-weight:600;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--slate)
}
.swf-kennzahl-zusatz{font-size:12.5px;color:var(--slate)}

@media (max-width:640px){
  .swf-kennzahl{width:100%;margin-right:0}
  .swf-n1{padding:14px 16px}
}

/* ---------- Praxisexperimente ---------- */
/* Aus dem Klickdummy übernommen. Feste Farbwerte standen dort direkt im HTML
   und hätten das Theme überschrieben — deshalb hier als Klassen. */
.exp-karte{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:16px;
  overflow:hidden;
  margin-bottom:32px
}
.exp-kopf{
  background:linear-gradient(150deg,#2AA860,#137E48);
  padding:26px 32px;color:#fff
}
.exp-kopf h2{color:#fff;font-size:1.5rem;margin:8px 0 0;line-height:1.25}
.exp-kicker{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  color:#EAFBEF
}
.exp-body{padding:28px 32px}
.exp-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;margin-bottom:24px
}
.exp-stat{
  background:#EFF7F2;
  border-radius:12px;
  padding:14px 16px
}
@media (max-width:640px){
  .exp-stats{grid-template-columns:1fr;gap:10px}
  .exp-kopf{padding:20px 22px}
  .exp-kopf h2{font-size:1.3rem}
  .exp-body{padding:22px}
}

/* ---------- Kopfbild ---------- */
/* Das Kopfbild gehört zum Artikelkopf, nicht in den Textfluss. Deshalb ohne
   Rahmen und Hintergrund — anders als Abbildungen im Text, die als Beleg
   dienen und deshalb abgesetzt sind. */
figure.kopfbild{
  border:none;
  background:none;
  padding:0;
  margin:26px 0 8px;
  border-radius:16px;
  overflow:hidden
}
figure.kopfbild svg{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px
}
@media (max-width:640px){
  figure.kopfbild{margin:18px 0 6px}
}

/* Erklärbild im Textverlauf — abgesetzt, weil es zu einer Aussage gehört */
figure.erklaerbild{
  margin:28px 0;
  padding:0;
  border:1px solid var(--hair);
  border-radius:14px;
  overflow:hidden;
  background:var(--white,#fff)
}
figure.erklaerbild svg{width:100%;height:auto;display:block}

/* ============================================================
   Redaktionsbausteine aus den Referenzartikeln
   ============================================================
   Diese Klassen kommen in den Artikeln hundertfach vor, hatten aber keine
   CSS-Regel. Sie wurden beim Aufbau der Artikel eingesetzt, ohne dass die
   Formatierung mitgezogen wurde — die Kästen erschienen dadurch als
   unformatierter Fließtext.

   Übernommen aus den vom Betreiber freigegebenen Referenzartikeln, mit den
   Markenfarben statt der dortigen Variablen.
   ------------------------------------------------------------ */

/* ---------- Das Wichtigste in Kürze ---------- */
.keytakeaway{
  background:var(--white,#fff);
  border-left:4px solid var(--green-deep);
  border-radius:0 10px 10px 0;
  padding:16px 22px;
  margin:26px 0;
}
.keytakeaway h3{
  font-size:1rem;
  margin:0 0 10px;
  color:var(--green-deep);
  font-weight:700;
}
.keytakeaway ul{margin:0 0 0 18px;line-height:1.7}
.keytakeaway li{margin-bottom:5px}
.kt-hinweis{
  margin:10px 0 0;
  padding-top:9px;
  border-top:1px solid var(--hair);
  color:var(--slate);
}
.kt-hinweis small{font-size:.85rem}

/* ---------- Weiterlesen ---------- */
.related{
  border:1px solid var(--hair);
  border-radius:12px;
  padding:16px 22px;
  margin:26px 0;
  background:var(--white,#fff);
}
.related h3,.related .h{
  font-size:.95rem;
  margin:0 0 10px;
  color:var(--green-deep);
  font-weight:700;
}
.related ul{margin:0 0 0 18px;line-height:1.8}
.related a{color:var(--green-deep)}

/* ---------- Hinweiskästen ---------- */
/* Drei Ausprägungen, unterscheidbar auch ohne Farbwahrnehmung: Der Rahmen
   ist unterschiedlich stark, und jeder trägt eine eigene Beschriftung. */
.callout{
  border-radius:12px;
  padding:16px 20px;
  margin:26px 0;
  font-size:.97rem;
  line-height:1.65;
}
.callout p:last-child{margin-bottom:0}
.callout .h{
  font-weight:700;
  font-size:.9rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
}
.callout.info{background:#EDF4FC;color:#123A5C;border:1px solid #CFE2F7}
.callout.info .h{color:#0C447C}
.callout.safety{background:#FDF6EA;color:#6B4A15;border:2px solid #F0D9A8}
.callout.safety .h{color:#8A5A0F}
.callout.evi-note{background:#F1F7EA;color:#2C4A12;border:1px dashed #C0DD97}
.callout.evi-note .h{color:#27500A}

/* ---------- Evidenz-Beschriftung im Fließtext ---------- */
.evilabel{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--green-deep);
  margin:24px 0 2px;
  display:block;
}
.evibox{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:20px 0;
}

/* ---------- Eigene Messung (n=1) ---------- */
.n1{
  background:#FDF6EE;
  border-left:4px solid var(--orange);
  border-radius:0 10px 10px 0;
  padding:14px 20px;
  margin:24px 0;
}

/* ---------- Transparenzhinweis ---------- */
/* Kennzeichnung nach UWG — muss auffallen, ohne zu schreien. */
.transparenz{
  background:#F6F5F1;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:12px 18px;
  margin:24px 0;
  font-size:.9rem;
  color:var(--slate);
}
.transparenz strong{color:var(--ink)}

/* ---------- Rezeptkarten ---------- */
.recipe{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:14px;
  padding:18px 22px;
  margin:20px 0;
}
.recipe h3{margin-top:0}
.recipe-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  font-size:13px;
  color:var(--slate);
  padding:10px 0;
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  margin:12px 0;
}
.recipe-note{
  font-size:.9rem;
  color:var(--slate);
  font-style:italic;
  margin-top:10px;
}

/* ---------- Produktangaben ---------- */
.pgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
  margin:22px 0;
}
.pinfo{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
}
.pbrand{
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--green-deep);
  margin-bottom:4px;
}

/* ---------- Tabellenzeilen ---------- */
tr.odd{background:var(--white,#fff)}
tr.even{background:#FBFAF7}

/* ---------- Querverweise und Sprachhinweis ---------- */
.crossrefs{
  margin:22px 0;
  padding:14px 18px;
  background:#FBFAF7;
  border-radius:10px;
  font-size:.94rem;
}
.swf-langref{
  font-size:.88rem;
  color:var(--slate);
  margin:14px 0;
}
.hcard{
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:18px 0;
  background:var(--white,#fff);
}
.data{font-variant-numeric:tabular-nums}

@media (max-width:640px){
  .keytakeaway,.related,.callout{padding:14px 16px;margin:20px 0}
  .pgrid{grid-template-columns:1fr}
}

/* Tabellenkopf aus konvertierten Dokumenten — Pandoc setzt hier eine
   Klasse statt th-Elementen. Ohne Regel wäre die Kopfzeile nicht
   erkennbar, was die Tabelle für Screenreader wertlos macht. */
tr.header{background:#F5F3EE;font-weight:700}
tr.header td{color:var(--ink);border-bottom:2px solid var(--hair)}

/* WordPress-Blockklassen: Sie kommen aus dem Editor und brauchen hier
   keine eigene Gestaltung, das Grundlayout greift bereits. */

/* ---------- Eigene Messwerte ---------- */
/* Hebt CGM-Beobachtungen hervor, die sonst im Fließtext untergehen.
   Bewusst als Einzelwerte, nicht als Kurve: Eine Kurve behauptet
   Zwischenwerte, die niemand gemessen hat. */
.messwerte{
  margin:28px 0;
  padding:18px 22px;
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:14px;
}
.messwerte h3{
  font-size:.95rem;
  margin:0 0 14px;
  color:var(--green-deep);
  font-weight:700;
}
.mw-reihe{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}
.mw-kachel{
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 16px;
}
.mw-zahl{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1.9rem;
  font-weight:800;
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}
.mw-einheit{
  font-size:11.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--slate);
  margin-top:2px;
}
.mw-label{
  font-size:13px;
  color:var(--ink-soft);
  margin-top:8px;
  line-height:1.5;
}
.mw-hinweis{
  margin:14px 0 0;
  padding-top:11px;
  border-top:1px solid var(--hair);
  color:var(--slate);
}
.mw-hinweis small{font-size:.85rem;font-style:italic}

@media (max-width:640px){
  .mw-reihe{grid-template-columns:1fr}
  .messwerte{padding:14px 16px}
}

/* ---------- CGM-Aufnahmen ---------- */
/* Screenshots aus der Sensor-App. Sie belegen, was im Text steht — deshalb
   mit Rahmen und Bildunterschrift, wie eine Abbildung in einem Fachtext. */
figure.cgm-bild{
  margin:28px 0;
  padding:12px;
  background:var(--white,#fff);
  border:1px solid var(--hair);
  border-radius:14px;
}
figure.cgm-bild img{
  width:100%;
  /* Die Aufnahmen sind Hochformat aus der App. Ohne Begrenzung würden sie
     die halbe Bildschirmhöhe einnehmen und den Lesefluss zerreißen. */
  max-width:380px;
  height:auto;
  display:block;
  margin:0 auto;
  border-radius:8px;
  border:1px solid var(--hair);
}
@media (min-width:900px){
  /* Auf breiten Bildschirmen Bild und Erklärung nebeneinander */
  figure.cgm-bild{
    display:grid;
    grid-template-columns:340px 1fr;
    gap:22px;
    align-items:start;
  }
  figure.cgm-bild figcaption{
    margin-top:0;
    padding-top:0;
    border-top:0;
    border-left:3px solid var(--hair);
    padding-left:18px;
  }
}
figure.cgm-bild figcaption{
  font-size:13px;
  color:var(--slate);
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--hair);
  line-height:1.6;
  text-align:left;
}

/* Rasterlayout für Kennzahlen im Artikelkopf.
   Die Klasse wurde im Inhalt verwendet, ohne dass eine Regel existierte —
   die Elemente stapelten sich dadurch untereinander statt nebeneinander. */
.hgrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px;
  margin:22px 0;
}
@media (max-width:640px){
  .hgrid{grid-template-columns:1fr;gap:12px}
}

/* ---------- Wiederkehrende Textauszeichnungen ---------- */
/* Diese Muster standen hundertfach als Inline-Style im Inhalt. Als Klasse
   sind sie zentral änderbar und folgen der Schriftskala des Themes. */
.bildhinweis{
  font-size:.85rem;
  color:var(--slate);
  margin-top:0;
}
.textnotiz{
  font-size:.8rem;
  color:var(--slate);
  margin:10px 0 0;
  font-style:italic;
}
/* Kennzahl in Auswertungskästen — die Farbe kam bisher als Inline-Wert mit */
.wert-gruen{color:var(--green-deep)}
.wert-orange{color:#BA7517}
.wert-rot{color:#B04A63}
.kennzahl-gross{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1.4rem;
  font-weight:800;
  line-height:1.2;
}
.kennzahl-klein{
  font-size:.8rem;
  color:var(--slate);
  margin-top:4px;
}

/* Letzte wiederkehrende Auszeichnungen aus dem Inhalt */
.liste-eng{margin:6px 0 0;padding-left:20px}
.kachel-schatten{box-shadow:var(--shadow-sm);margin-bottom:22px}
.leise{opacity:.7}

/* ============================================================
   Rezeptfinder
   ============================================================
   Das Werkzeug bringt eigene Klassen mit, für die es keine Regeln gab.
   Ohne sie erscheinen Filterleiste, Karten und Hinweise unformatiert.
   ------------------------------------------------------------ */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chips button,.chips .chip{
  border:1px solid var(--hair);background:var(--white,#fff);
  border-radius:18px;padding:7px 14px;font-size:14px;
  font-family:inherit;cursor:pointer;color:var(--ink)
}
.chips .aktiv,.chips button.aktiv{
  background:var(--green-deep);color:#fff;border-color:var(--green-deep)
}
.badge{
  display:inline-block;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:12px;
  background:var(--gruen-zart,#EAF3DE);color:var(--green-deep);
  letter-spacing:.02em
}
.badge.blutzucker{background:#FDF1EA;color:#8A4A1E}
.badge.methodik{background:#E8F3F5;color:#1E5A66}
.hinweisbox{
  background:#FBFAF7;border:1px solid var(--hair);border-radius:10px;
  padding:14px 18px;margin:20px 0;font-size:.95rem
}
.inhalt{display:block}
.inner{max-width:100%}
.mark,mark{background:#FFF3C4;padding:0 3px;border-radius:3px}
.p100{width:100%}
.pk-txt{font-size:.9rem;color:var(--slate);line-height:1.6}
.port{max-width:100%;height:auto}
.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  margin:18px 0;padding:12px 0;border-bottom:1px solid var(--hair)
}
.toolbar input[type=search],.toolbar select{
  padding:8px 12px;border:1px solid var(--hair);border-radius:8px;
  font-family:inherit;font-size:14px;min-width:0;flex:1 1 180px
}
.rz-kopf{margin-bottom:12px}
.rz-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.schritte{counter-reset:schritt;list-style:none;padding-left:0}
.schritte li{
  counter-increment:schritt;position:relative;
  padding-left:38px;margin-bottom:12px
}
.schritte li::before{
  content:counter(schritt);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--green-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700
}
.stern{color:var(--orange)}
.suche{width:100%;max-width:100%}
.toc,.toc-wrap{
  background:#FBFAF7;border:1px solid var(--hair);border-radius:10px;
  padding:14px 18px;margin:20px 0
}
.toc ul{margin:8px 0 0 18px;line-height:1.8}
.card-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;margin:20px 0
}
.reset{border:none;background:none;padding:0;font:inherit;cursor:pointer}
.serie-nav{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.geplant{opacity:.6}
.meta{font-size:13px;color:var(--slate)}

/* Nur für den Druck */
.druck,.print-kopf,.print-fuss,.printall{display:none}
@media print{
  .druck,.print-kopf,.print-fuss{display:block}
  .chips,.toolbar,.rz-btns{display:none}
}

/* ============================================================
   Überlaufschutz auf schmalen Bildschirmen
   ============================================================
   Ein Browsertest bei 375 Pixel zeigte bei 51 von 176 Artikeln
   waagerechten Überlauf. Ursache sind meist Tabellen, lange Wörter
   ohne Trennmöglichkeit und Elemente mit fester Breite.
   ------------------------------------------------------------ */
.wrap,article,.inhalt{max-width:100%;overflow-wrap:break-word}
article table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
article pre,article code{
  max-width:100%;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
article img,article svg,figure img,figure svg{max-width:100%;height:auto}
article a{overflow-wrap:anywhere}

@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  .mw-reihe,.hgrid,.card-grid,.exp-stats{grid-template-columns:1fr}
  .toolbar{flex-direction:column;align-items:stretch}
  article table{font-size:13px}
  .kd-karten{grid-template-columns:1fr}
}

/* ============================================================
   Überlauf bei Hinweiskästen
   ============================================================
   style.css setzt .callout auf display:flex — gedacht für ein Symbol
   neben dem Text. In Artikeln stehen dort Überschrift und Absätze
   untereinander. Ein Flex-Container ohne Umbruch drückt sie nebeneinander
   und läuft auf schmalen Bildschirmen über.

   Ein Browsertest bei 375 Pixel zeigte das bei 47 von 176 Artikeln.
   ------------------------------------------------------------ */
article .callout,
.wrap .callout{
  display:block;
  max-width:100%;
  overflow-wrap:break-word;
}
article .callout > *,
.wrap .callout > *{
  max-width:100%;
  min-width:0;
}

/* Tabellen: der Rollbereich muss am unmittelbaren Elternelement hängen,
   sonst greift er nicht. Artikel 267 enthält 51 Nährwerttabellen. */
article table,
.wrap table,
figure table{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-collapse:collapse;
}
article table thead,
article table tbody{min-width:100%}
article td,article th{white-space:normal;word-break:normal}

/* Alles, was breiter werden könnte, wird begrenzt */
article > *,
.wrap > *{max-width:100%}
article iframe,article video,article embed{max-width:100%;height:auto}

@media (max-width:480px){
  article .callout{padding:12px 14px}
  article table{font-size:12.5px}
  .mw-zahl{font-size:1.5rem}
}

/* ============================================================
   Tabellen mit fester Spaltenbreite
   ============================================================
   Der Browsertest zeigte Überlauf trotz overflow-x:auto. Ursache sind
   <colgroup>-Angaben mit Prozentbreiten: Sie zwingen die Tabelle auf eine
   Mindestbreite, die der Rollbereich nicht auffangen kann.

   Unter 700 Pixel werden die Spaltenvorgaben aufgehoben und die Tabelle
   bekommt eine eigene Rollfläche.
   ------------------------------------------------------------ */
@media (max-width:700px){
  article col,article colgroup{width:auto !important}
  article table{
    table-layout:auto;
    width:max-content;
    min-width:100%;
  }
  /* Rollfläche um die Tabelle statt an ihr */
  article .tabelle-rollbar{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  article table{display:table}
}

/* Sicherheitsnetz: nichts darf breiter werden als der Rahmen */
@media (max-width:700px){
  article,article > *,.wrap,.wrap > *{
    max-width:100% !important;
    overflow-x:clip;
  }
  article table{overflow-x:auto;display:block}
}


/* Rollcontainer um Tabellen — er begrenzt die Breite, die Tabelle darf
   darin breiter sein und wird waagerecht rollbar. */
.tabelle-rollbar{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:20px 0;
}
.tabelle-rollbar table{
  display:table;
  width:auto;
  min-width:100%;
  margin:0;
}
@media (max-width:700px){
  .tabelle-rollbar table{font-size:13px}
}

/* Kastenüberschrift — sieht aus wie eine Überschrift, ist aber keine.
   Als h3 vor dem ersten Abschnitt erzeugte sie einen Ebenensprung von h1
   auf h3 und störte die Gliederung für Screenreader. */
.kasten-titel{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-size:1rem;
  font-weight:700;
  color:var(--green-deep);
  margin:0 0 10px;
  line-height:1.3;
}

/* Klassen aus mitgelieferten Werkzeugseiten (Rechner, Übersichten).
   Sie kamen mit den Inhalten herein und hatten keine Regel — die Elemente
   erschienen dadurch unformatiert. */
.ausgabe{
  background:#FBFAF7;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:14px 18px;
  margin:16px 0;
  font-variant-numeric:tabular-nums;
}
.datum{font-size:.85rem;color:var(--slate)}
.note{font-size:.9rem;color:var(--slate);margin:10px 0 0}
.zt{font-variant-numeric:tabular-nums;white-space:nowrap}
.pp{margin:12px 0}
.site{max-width:100%}
.swf-logo{font-weight:700;letter-spacing:-.01em}
.swf-stand{font-size:.8rem;color:var(--slate)}


/* ============================================================
   v60.2 — verbindliche Artikeldarstellung (letzte Kaskadenebene)
   ============================================================
   @requirements PRJ-INS-20260727-001
   @findings PRJ-QM-P0-001, PRJ-QM-P0-002
   @tests SWF-V602-ARTICLE-01 bis -03

   Frühere Abschnitte dieser historisch gewachsenen Datei enthielten
   widersprüchliche display- und overflow-Regeln. Diese abschließende,
   strikt auf die Einzelartikel begrenzte Ebene definiert den Endzustand.
   Sie überschreibt keine gespeicherten Artikel und keine Archivseiten.
   ------------------------------------------------------------ */
.wissen-artikel-wrap{
  width:100%;
  min-width:0;
  overflow:visible;
}
.wissen-artikel-wrap > .wrap{
  width:min(calc(100% - 32px), 820px);
  max-width:820px !important;
  margin-inline:auto;
  padding-inline:0;
  overflow:visible !important;
}
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap footer.art,
.wissen-artikel-wrap article{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:visible !important;
}
.wissen-artikel-wrap article > *,
.wissen-artikel-wrap header.art > *,
.wissen-artikel-wrap footer.art > *{
  min-width:0;
  max-width:100%;
}
.wissen-artikel-wrap figure{
  display:block;
  width:100%;
  max-width:100%;
  margin:28px 0;
  overflow:hidden;
}
.wissen-artikel-wrap figure img,
.wissen-artikel-wrap figure svg,
.wissen-artikel-wrap article img,
.wissen-artikel-wrap article svg{
  display:block;
  width:auto;
  max-width:100% !important;
  height:auto !important;
  margin-inline:auto;
  object-fit:contain;
}
.wissen-artikel-wrap figure.kopfbild svg,
.wissen-artikel-wrap figure.erklaerbild svg{
  width:100%;
}
.wissen-artikel-wrap figcaption{
  max-width:100%;
  padding:9px 12px;
  overflow-wrap:anywhere;
}
.wissen-artikel-wrap .callout,
.wissen-artikel-wrap .tier,
.wissen-artikel-wrap .keytakeaway,
.wissen-artikel-wrap .messwerte,
.wissen-artikel-wrap .related,
.wissen-artikel-wrap .sources{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-wrap:break-word;
}
.wissen-artikel-wrap .tabelle-rollbar{
  display:block;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  margin:18px 0;
  border-radius:10px;
}
.wissen-artikel-wrap .tabelle-rollbar table{
  display:table !important;
  width:100%;
  min-width:640px;
  max-width:none;
  margin:0;
  table-layout:auto;
}
/* Nicht umschlossene Tabellen bleiben nutzbar, statt am Rand abgeschnitten zu werden. */
.wissen-artikel-wrap article > table,
.wissen-artikel-wrap figure > table{
  display:block !important;
  width:100%;
  max-width:100%;
  overflow-x:auto !important;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.wissen-artikel-wrap pre,
.wissen-artikel-wrap code{
  max-width:100%;
  overflow-x:auto;
}
.wissen-artikel-wrap iframe,
.wissen-artikel-wrap video,
.wissen-artikel-wrap embed{
  display:block;
  width:100%;
  max-width:100%;
}
@media (max-width:700px){
  .wissen-artikel-wrap > .wrap{
    width:min(calc(100% - 28px), 820px);
  }
  .wissen-artikel-wrap article,
  .wissen-artikel-wrap article > *,
  .wissen-artikel-wrap > .wrap,
  .wissen-artikel-wrap > .wrap > *{
    overflow-x:visible !important;
  }
  .wissen-artikel-wrap .tabelle-rollbar{
    overflow-x:auto !important;
  }
  .wissen-artikel-wrap .tabelle-rollbar table{
    min-width:680px;
  }
}


/* v60.6: lesefreundliche Artikelbreite und zurückhaltende Praxis-Screenshots. */
.wissen-artikel-wrap{padding-inline:0}
.wissen-artikel-wrap > .wrap{max-width:820px!important}
.wissen-artikel-wrap article img:not(.emoji),.wissen-artikel-wrap article figure img{max-width:min(100%,720px)!important;max-height:520px!important;object-fit:contain!important}
body.single-praxistest .wissen-artikel-wrap article img,body.single-praxistest .wissen-artikel-wrap figure img{max-width:min(100%,680px)!important;max-height:460px!important;background:#f8faf7;border-radius:16px;padding:6px}
.wissen-artikel-wrap figure.kopfbild,.wissen-artikel-wrap figure.erklaerbild{max-width:820px;margin-inline:auto}


/* ==========================================================================
   v60.6.1 – Einzelartikel kompakt und lesefreundlich
   Finding: PRJ-QM-P1-021
   Ursache:
   - Die Offline-Vorschau verwendete .preview-article-shell statt
     .wissen-artikel-wrap. Dadurch griffen die v60.6-Breitenregeln dort nicht.
   - Inline-Styles einzelner Produktbilder setzten width:100%; ohne den
     passenden Wrapper wirkten Fotos und Messbilder nahezu vollflächig.
   Ziel:
   - Einheitliche, zentrierte Lesespalte für Wissen, Praxislabor und Produkte.
   - Abbildungen bleiben vollständig sichtbar, aber dominieren den Text nicht.
   - Tabellen dürfen horizontal scrollen, ohne die Lesespalte zu verbreitern.
   ========================================================================== */

/* Äußerer Artikelrahmen: auf Desktop nie mehr randfüllend. */
.wissen-artikel-wrap,
.preview-article-shell > .wrap {
  width:min(calc(100% - 48px), 860px) !important;
  max-width:860px !important;
  margin-inline:auto !important;
  padding:48px 0 64px !important;
}

/* Vorformatierte Artikel enthalten teilweise selbst eine .wrap-Klasse.
   Diese innere Hülle darf die Breitenbegrenzung nicht wieder aufheben. */
.wissen-artikel-wrap > .wrap,
.preview-article-shell > .wrap > .wrap {
  width:100% !important;
  max-width:100% !important;
  margin-inline:auto !important;
  padding-inline:0 !important;
}

/* Lesespalte für Überschrift, Text und Fußbereich. */
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap article,
.wissen-artikel-wrap footer.art,
.preview-article-shell header.art,
.preview-article-shell article,
.preview-article-shell footer.art {
  width:100% !important;
  max-width:760px !important;
  margin-inline:auto !important;
}

/* Große Erklärgrafiken bleiben breiter als der Fließtext möglich,
   Fotos und Screenshots werden aber deutlich zurückgenommen. */
.wissen-artikel-wrap figure,
.preview-article-shell figure {
  width:100% !important;
  max-width:640px !important;
  margin:28px auto !important;
}

.wissen-artikel-wrap figure.kopfbild,
.preview-article-shell figure.kopfbild {
  max-width:700px !important;
}

.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild {
  max-width:600px !important;
}

.wissen-artikel-wrap article img:not(.emoji),
.wissen-artikel-wrap figure img,
.preview-article-shell article img:not(.emoji),
.preview-article-shell figure img {
  display:block !important;
  width:auto !important;
  max-width:100% !important;
  max-height:440px !important;
  height:auto !important;
  margin-inline:auto !important;
  object-fit:contain !important;
}

/* Produktfotos (Dose, Etikett, Pulver, fertiger Shake) sollen den Artikel
   unterstützen und nicht die gesamte Bildschirmhöhe belegen. */
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild {
  max-width:520px !important;
}

body.single-produkt .wissen-artikel-wrap figure.erklaerbild img,
body.preview-single-product .preview-article-shell figure.erklaerbild img {
  max-width:500px !important;
  max-height:380px !important;
  border-radius:14px;
  background:#F8FAF7;
}

/* Praxis-Messwerte und Smartphone-Screenshots kleiner als Erklärgrafiken. */
body.single-praxistest .wissen-artikel-wrap figure,
body.preview-single-praxis .preview-article-shell figure {
  max-width:600px !important;
}

body.single-praxistest .wissen-artikel-wrap figure img,
body.preview-single-praxis .preview-article-shell figure img {
  max-width:580px !important;
  max-height:400px !important;
}

/* Breite Tabellen bleiben innerhalb der Lesespalte bedienbar. */
.wissen-artikel-wrap article > table,
.preview-article-shell article > table {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

/* Mobil: nutzbarer Seitenrand, Bilder dürfen die verfügbare Breite ausnutzen. */
@media (max-width:700px) {
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap {
    width:min(calc(100% - 28px), 860px) !important;
    padding:30px 0 46px !important;
  }

  .wissen-artikel-wrap header.art,
  .wissen-artikel-wrap article,
  .wissen-artikel-wrap footer.art,
  .preview-article-shell header.art,
  .preview-article-shell article,
  .preview-article-shell footer.art,
  .wissen-artikel-wrap figure,
  .preview-article-shell figure {
    max-width:100% !important;
  }

  body.single-produkt .wissen-artikel-wrap figure.erklaerbild img,
  body.preview-single-product .preview-article-shell figure.erklaerbild img,
  body.single-praxistest .wissen-artikel-wrap figure img,
  body.preview-single-praxis .preview-article-shell figure img {
    max-width:100% !important;
    max-height:420px !important;
  }
}

/* ========================================================================
   v60.7.3 · individuelle Artikelbilder und größere Infografiken
   Requirements: PRJ-INS-20260728-6073-003/004
   Findings: PRJ-QM-P1-6073-003/004
   ======================================================================== */
.wissen-artikel-wrap figure.swf-individual-hero,
.preview-article-shell figure.swf-individual-hero {
  width:100% !important;
  max-width:740px !important;
  margin:30px auto 34px !important;
  border-radius:22px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(20,60,40,.08);
}
.wissen-artikel-wrap figure.swf-individual-hero img,
.preview-article-shell figure.swf-individual-hero img {
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:460px !important;
  object-fit:contain !important;
  margin:0 auto !important;
  background:#fbfcf9;
}
.wissen-artikel-wrap figure.swf-individual-hero figcaption,
.preview-article-shell figure.swf-individual-hero figcaption {
  padding:10px 14px 12px;
  margin:0;
  border-top:1px solid #e9e4db;
  color:#66746b;
  font-size:.86rem;
}

/* Erklärgrafiken dürfen breiter als der Fließtext sein. Reale Produkt- und
   Praxisfotos bleiben durch die nachfolgenden Typregeln bewusst kompakter. */
.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild {
  width:100% !important;
  max-width:720px !important;
}
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
}
.wissen-artikel-wrap figure.erklaerbild > img,
.preview-article-shell figure.erklaerbild > img {
  max-width:720px !important;
  max-height:520px !important;
}
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild {
  max-width:540px !important;
}
body.single-produkt .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-product .preview-article-shell figure.erklaerbild > img {
  max-width:520px !important;
  max-height:400px !important;
}
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-praxis .preview-article-shell figure.erklaerbild {
  max-width:620px !important;
}
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-praxis .preview-article-shell figure.erklaerbild > img {
  max-width:600px !important;
  max-height:420px !important;
}
@media(max-width:700px){
  .wissen-artikel-wrap figure.swf-individual-hero,
  .preview-article-shell figure.swf-individual-hero,
  .wissen-artikel-wrap figure.erklaerbild,
  .preview-article-shell figure.erklaerbild {
    max-width:100% !important;
  }
}

/* ==========================================================================
   v60.7.4 – Abbildungen bündig zur Lesespalte
   Requirements: PRJ-INS-20260728-6074-001
   Finding: PRJ-QM-P1-6074-001
   Purpose:
   - Der Rahmen jeder Artikelabbildung beginnt und endet bündig mit dem
     Fließtext.
   - Produktfotos und Praxis-Screenshots bleiben innerhalb dieses Rahmens
     bewusst kleiner und werden zentriert dargestellt.
   - Infografiken dürfen die volle Lesespaltenbreite nutzen.
   ========================================================================== */
.wissen-artikel-wrap figure,
.preview-article-shell figure,
.wissen-artikel-wrap figure.kopfbild,
.preview-article-shell figure.kopfbild,
.wissen-artikel-wrap figure.erklaerbild,
.preview-article-shell figure.erklaerbild,
.wissen-artikel-wrap figure.swf-individual-hero,
.preview-article-shell figure.swf-individual-hero {
  box-sizing:border-box;
  width:100% !important;
  max-width:760px !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Infografiken nutzen die bündige Breite vollständig. */
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg {
  width:100% !important;
  max-width:100% !important;
}

/* Reale Bilder bleiben lesefreundlich, während Rahmen und Beschriftung
   weiterhin bündig zur Textspalte verlaufen. */
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-product .preview-article-shell figure.erklaerbild,
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.preview-single-praxis .preview-article-shell figure.erklaerbild {
  max-width:760px !important;
}

body.single-produkt .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-product .preview-article-shell figure.erklaerbild > img {
  max-width:520px !important;
  max-height:400px !important;
}

body.single-praxistest .wissen-artikel-wrap figure.erklaerbild > img,
body.preview-single-praxis .preview-article-shell figure.erklaerbild > img {
  max-width:600px !important;
  max-height:420px !important;
}

.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption {
  box-sizing:border-box;
  width:100%;
  text-align:left;
}

@media (max-width:700px){
  .wissen-artikel-wrap figure,
  .preview-article-shell figure,
  .wissen-artikel-wrap figure.kopfbild,
  .preview-article-shell figure.kopfbild,
  .wissen-artikel-wrap figure.erklaerbild,
  .preview-article-shell figure.erklaerbild,
  .wissen-artikel-wrap figure.swf-individual-hero,
  .preview-article-shell figure.swf-individual-hero {
    max-width:100% !important;
  }
}


/* ==========================================================================
   v60.7.7 – durchgehende Lesekante für Text, Bilder, Tabellen und Bildtitel
   Requirements: PRJ-INS-20260728-6077-003/004
   Findings: PRJ-QM-P1-6077-003
   ========================================================================== */
.wissen-artikel-wrap,
.preview-article-shell > .wrap{
  width:min(calc(100% - 48px),820px)!important;
  max-width:820px!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap header.art,
.wissen-artikel-wrap article,
.wissen-artikel-wrap footer.art,
.preview-article-shell header.art,
.preview-article-shell article,
.preview-article-shell footer.art,
.wissen-artikel-wrap > figure,
.preview-article-shell > .wrap > figure{
  width:100%!important;
  max-width:820px!important;
  margin-left:0!important;
  margin-right:0!important;
}

/* Jedes direkte Inhaltselement folgt derselben linken und rechten Kante. */
.wissen-artikel-wrap article > *,
.preview-article-shell article > *{
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-left:0;
  margin-right:0;
}
.wissen-artikel-wrap article figure,
.preview-article-shell article figure,
.wissen-artikel-wrap > figure,
.preview-article-shell > .wrap > figure{
  width:100%!important;
  max-width:100%!important;
  margin:30px 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.wissen-artikel-wrap figure > img,
.wissen-artikel-wrap figure > svg,
.preview-article-shell figure > img,
.preview-article-shell figure > svg{
  box-sizing:border-box;
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  border:1px solid var(--hair)!important;
  border-radius:18px!important;
  background:#fff;
}
.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption{
  width:100%!important;
  margin:0!important;
  padding:10px 0 0!important;
  border:0!important;
  text-align:left!important;
  line-height:1.55;
}

/* Reale Hochformatfotos/Screenshots nutzen eine bündige Leinwand.
   Das Motiv bleibt vollständig sichtbar, ohne die Textbreite zu verlassen. */
body.single-produkt .wissen-artikel-wrap figure > img,
body.preview-single-product .preview-article-shell figure > img,
body.single-praxistest .wissen-artikel-wrap figure > img,
body.preview-single-praxis .preview-article-shell figure > img{
  width:100%!important;
  height:min(520px,65vw)!important;
  max-height:520px!important;
  object-fit:contain!important;
  padding:18px!important;
  background:#f8faf7!important;
}

/* Infografiken/SVGs sind vollständig lesbar und exakt textbündig. */
.wissen-artikel-wrap figure.erklaerbild > svg,
.preview-article-shell figure.erklaerbild > svg{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
}

/* Tabellen und Callouts teilen dieselbe Inhaltskante. */
.wissen-artikel-wrap article table,
.preview-article-shell article table,
.wissen-artikel-wrap article .tabelle-scroll,
.preview-article-shell article .tabelle-scroll{
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}

@media(max-width:700px){
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap{
    width:min(calc(100% - 28px),820px)!important;
  }
  body.single-produkt .wissen-artikel-wrap figure > img,
  body.preview-single-product .preview-article-shell figure > img,
  body.single-praxistest .wissen-artikel-wrap figure > img,
  body.preview-single-praxis .preview-article-shell figure > img{
    height:min(480px,100vw)!important;
    padding:10px!important;
  }
}

/* ========================================================================
   v60.7.8 – einheitliche Lesekante für Wissen, Praxislabor und Produkte
   Requirements: PRJ-INS-20260729-6078-001
   Finding: PRJ-QM-P1-6078-001
   Purpose:
   - Text, Überschriften, Tabellen, Abbildungsrahmen und Bildunterschriften
     beginnen und enden exakt auf derselben Lesekante.
   - Hochformatige Produkt- und Praxisbilder bleiben innerhalb einer
     textbündigen Leinwand vollständig sichtbar, ohne den Artikel zu sprengen.
   ======================================================================== */
:root{--swf-article-reading-width:820px}
.wissen-artikel-wrap,
.preview-article-shell > .wrap{
  width:min(calc(100% - 48px),var(--swf-article-reading-width))!important;
  max-width:var(--swf-article-reading-width)!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap > .wrap,
.preview-article-shell > .wrap > .wrap,
.wissen-artikel-wrap :is(header.art,article,footer.art),
.preview-article-shell :is(header.art,article,footer.art){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap article > *,
.preview-article-shell article > *{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.wissen-artikel-wrap :is(article figure,> figure),
.preview-article-shell :is(article figure,> .wrap > figure){
  box-sizing:border-box!important;
  display:block!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:30px 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.wissen-artikel-wrap figure > :is(img,svg),
.preview-article-shell figure > :is(img,svg){
  box-sizing:border-box!important;
  display:block!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--hair)!important;
  border-radius:18px!important;
  background:#fff!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure > svg,
.preview-article-shell figure > svg{
  block-size:auto!important;
  max-block-size:none!important;
}
/* Fotos und Screenshots erhalten eine volle, textbündige Leinwand. */
body.single-produkt .wissen-artikel-wrap figure > img,
body.preview-single-product .preview-article-shell figure > img,
body.single-praxistest .wissen-artikel-wrap figure > img,
body.preview-single-praxis .preview-article-shell figure > img{
  inline-size:100%!important;
  block-size:clamp(300px,46vw,520px)!important;
  max-block-size:520px!important;
  padding:18px!important;
  background:#f8faf7!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure figcaption,
.preview-article-shell figure figcaption{
  box-sizing:border-box!important;
  inline-size:100%!important;
  max-inline-size:none!important;
  margin:0!important;
  padding:10px 0 0!important;
  border:0!important;
  text-align:left!important;
}
@media(max-width:700px){
  .wissen-artikel-wrap,
  .preview-article-shell > .wrap{
    width:min(calc(100% - 28px),var(--swf-article-reading-width))!important;
  }
  body.single-produkt .wissen-artikel-wrap figure > img,
  body.preview-single-product .preview-article-shell figure > img,
  body.single-praxistest .wissen-artikel-wrap figure > img,
  body.preview-single-praxis .preview-article-shell figure > img{
    block-size:clamp(260px,92vw,460px)!important;
    padding:10px!important;
  }
}


/* ========================================================================
   v60.7.9 – finaler responsiver Einzelartikelvertrag
   Requirements: PRJ-INS-20260729-6079-001/002
   Finding: PRJ-QM-P1-6079-001
   Source of truth:
   Diese letzte Kaskadenebene ersetzt widersprüchliche ältere Breitenregeln.
   Die äußere Komponente bleibt vollbreit; ausschließlich die innere .wrap
   bildet die zentrierte und mit dem Viewport wachsende Lesespalte.
   ======================================================================== */
:root{
  --swf-article-fluid:clamp(840px,64vw,1000px);
  --swf-article-gutter:clamp(16px,3.2vw,52px);
}
.wissen-artikel-wrap{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:clamp(34px,4vw,62px) 0 clamp(54px,6vw,88px)!important;
  overflow:visible!important;
}
.wissen-artikel-wrap>.wrap{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--swf-article-gutter))),var(--swf-article-fluid))!important;
  max-width:none!important;
  margin-inline:auto!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap>.wrap>.wrap,
.wissen-artikel-wrap :is(header.art,article,footer.art){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin-inline:0!important;
  padding-inline:0!important;
}
.wissen-artikel-wrap header.art h1{
  font-size:clamp(2.1rem,3.2vw,3.45rem)!important;
  line-height:1.08!important;
}
.wissen-artikel-wrap header.art .lead,
.wissen-artikel-wrap article{
  font-size:clamp(1.04rem,.45vw + .93rem,1.22rem)!important;
  line-height:1.72!important;
}
.wissen-artikel-wrap article>*{
  box-sizing:border-box!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
.wissen-artikel-wrap article :is(h2,h3,h4){width:100%!important}

/* Abbildung, Grafik und Bildunterschrift bilden eine einzige textbündige
   Komponente. Rahmen und Untertitel liegen auf exakt derselben Außenkante
   wie Überschrift und Fließtext. */
.wissen-artikel-wrap :is(article figure,>.wrap>figure){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:clamp(28px,3vw,44px) 0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--hair)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.wissen-artikel-wrap figure>:is(img,svg){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  object-fit:contain!important;
}
.wissen-artikel-wrap figure figcaption{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:11px 16px 13px!important;
  border-top:1px solid var(--hair)!important;
  color:var(--slate)!important;
  text-align:left!important;
  font-size:.9rem!important;
  line-height:1.45!important;
}

/* Originalfotos und Messwert-Screenshots bleiben vollständig sichtbar. Die
   Leinwand ist textbündig, das Motiv erhält innen einen ruhigen Rand. */
body.single-produkt .wissen-artikel-wrap figure>:is(img:not(.emoji)),
body.single-praxistest .wissen-artikel-wrap figure>:is(img:not(.emoji)){
  width:100%!important;
  height:clamp(380px,48vw,620px)!important;
  max-height:620px!important;
  padding:clamp(12px,2vw,26px)!important;
  background:#f8faf7!important;
  object-fit:contain!important;
}
/* SVG-Infografiken erhalten immer die volle verfügbare Breite. */
.wissen-artikel-wrap figure>:is(svg),
.wissen-artikel-wrap figure.erklaerbild>svg{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  padding:0!important;
}
.wissen-artikel-wrap :is(table,.tabelle-scroll,.tabelle-rollbar,pre,iframe,video){
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
}
@media(max-width:700px){
  :root{--swf-article-gutter:14px}
  .wissen-artikel-wrap{padding-top:28px!important}
  .wissen-artikel-wrap header.art h1{font-size:clamp(1.85rem,9vw,2.55rem)!important}
  body.single-produkt .wissen-artikel-wrap figure>:is(img:not(.emoji)),
  body.single-praxistest .wissen-artikel-wrap figure>:is(img:not(.emoji)){
    height:clamp(280px,100vw,480px)!important;
    padding:10px!important;
  }
}

/* v60.7.9 – Spezifitätsabschluss für historisch klassifizierte Abbildungen. */
.wissen-artikel-wrap article figure,
.wissen-artikel-wrap article figure.kopfbild,
.wissen-artikel-wrap article figure.erklaerbild,
.wissen-artikel-wrap article figure.swf-individual-hero,
.wissen-artikel-wrap>.wrap>figure,
.wissen-artikel-wrap>.wrap>figure.kopfbild,
.wissen-artikel-wrap>.wrap>figure.erklaerbild,
.wissen-artikel-wrap>.wrap>figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* v60.7.9 – Kopfbilder außerhalb des article-Elements ebenfalls textbündig. */
.wissen-artikel-wrap figure,
.wissen-artikel-wrap figure.kopfbild,
.wissen-artikel-wrap figure.erklaerbild,
.wissen-artikel-wrap figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}
/* v60.7.9 – Produkttest/Praxislabor: ältere 520/600-Pixel-Figurenbreiten aufheben. */
body.single-produkt .wissen-artikel-wrap figure,
body.single-produkt .wissen-artikel-wrap figure.kopfbild,
body.single-produkt .wissen-artikel-wrap figure.erklaerbild,
body.single-produkt .wissen-artikel-wrap figure.swf-individual-hero,
body.single-praxistest .wissen-artikel-wrap figure,
body.single-praxistest .wissen-artikel-wrap figure.kopfbild,
body.single-praxistest .wissen-artikel-wrap figure.erklaerbild,
body.single-praxistest .wissen-artikel-wrap figure.swf-individual-hero{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
}


/* ========================================================================
   v60.7.10 – sichere Aufzählungen in Akzent- und Hinweisboxen
   Requirements: PRJ-INS-20260729-60710-001
   Finding: PRJ-QM-P1-60710-001
   Security/Accessibility:
   Die Akzentlinie ist dekorativ. Sie darf weder Listenmarker verdecken noch
   die Textlesbarkeit bei Zoom, schmalen Viewports oder großen Schriftgraden
   beeinträchtigen.
   ======================================================================== */
:is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway{
  position:relative!important;
  border-left:0!important;
  border-radius:12px!important;
  padding:18px 24px 18px 38px!important;
  overflow:visible!important;
}
:is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:12px 0 0 12px;
  background:var(--green-deep);
  pointer-events:none;
}
:is(.wissen-artikel-wrap,.preview-article-shell) :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.callout) :is(ul,ol){
  box-sizing:border-box!important;
  margin:.45rem 0 0!important;
  padding-left:1.45rem!important;
  list-style-position:outside!important;
}
:is(.wissen-artikel-wrap,.preview-article-shell) :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.callout) li{
  margin:.22rem 0!important;
  padding-left:.12rem!important;
}
/* Die statische Vorschau hatte durch einen historischen Reset den Innenraum
   direkter Artikelboxen entfernt. Diese Regeln stellen ihn wieder her. */
.preview-article-shell article > :is(.keytakeaway,.tier,.swf-n1,.swf-hinweis,.n1,.related){
  padding:18px 24px!important;
}
.preview-article-shell article > .keytakeaway{
  padding-left:38px!important;
}
@media(max-width:620px){
  :is(.wissen-artikel-wrap,.preview-article-shell) .keytakeaway{
    padding:16px 18px 16px 32px!important;
  }
  .preview-article-shell article > .keytakeaway{padding-left:32px!important}
}