/* Webhosting – Artikelgestaltung, freigegebener Entwurf, Helfer 2.0.4.
 * Nur innerhalb .wh-article. Keine globalen table-/h2-/body-Regeln.
 * Für den bestehenden Helfer als Ersatz/Erweiterung von assets/article.css.
 * Zusätzliche Bausteine (Navigation, Hinweise) brauchen passendes HTML.
 * Keine Inhalte werden versteckt, gekürzt oder automatisch verlinkt.
 */
.wh-article {
  --wh-ink: #172b43;
  --wh-text: #33445a;
  --wh-muted: #59697c;
  --wh-accent: #0a7068;
  --wh-line: #dce5ec;
  --wh-soft: #f3f7fa;
  --wh-white: #ffffff;
  --wh-radius: 16px;
  --wh-shadow: 0 12px 34px -14px rgba(25, 45, 70, .26), 0 2px 7px rgba(25, 45, 70, .04);
  max-inline-size: 820px;
  min-inline-size: 0;
  margin-inline: auto;
  font-family: inherit;
  font-size: clamp(17px, 1rem + .15vw, 19px);
  line-height: 1.8;
  color: var(--wh-text);
  overflow-wrap: break-word;
  text-align: start;
}
.wh-article, .wh-article * { box-sizing: border-box; }
.wh-article p { margin-block: 0 1.2em; line-height: inherit; }
.wh-article .wh-lead {
  color: var(--wh-ink);
  font-size: clamp(20px, 1.15rem + .3vw, 23px);
  line-height: 1.65;
  font-weight: 400;
  margin-block: 0 1.5em;
}
.wh-article h2 {
  color: var(--wh-ink);
  font-family: inherit;
  font-size: clamp(25px, 1.3rem + .6vw, 32px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.018em;
  text-transform: none;
  margin-block: 2.3em .8em;
  scroll-margin-block-start: 120px;
}
.wh-article h3 {
  color: var(--wh-ink); font-family: inherit;
  font-size: clamp(21px, 1.1rem + .3vw, 25px);
  font-weight: 650; line-height: 1.4;
  margin-block: 1.5em .65em;
  scroll-margin-block-start: 120px;
}
.wh-article strong { color: var(--wh-ink); font-weight: 700; }
.wh-article a {
  color: var(--wh-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: .18em;
}
.wh-article a:hover { color: var(--wh-ink); }
.wh-article :is(a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--wh-accent); outline-offset: 4px; border-radius: 4px;
}
.wh-article ul, .wh-article ol { padding-inline-start: 1.3em; margin-block: 1em 1.4em; }
.wh-article li { margin-block: .45em; padding-inline-start: .2em; }
.wh-article li::marker { color: var(--wh-accent); }
.wh-article :not(pre) > code {
  background: #edf3f6; color: #294760;
  border: 1px solid #dfe8ee; border-radius: 5px;
  padding: .1em .33em;
  font-size: .87em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: normal; overflow-wrap: anywhere;
}
/* Leicht abgesetzte Tabellenkarte; echte, zugängliche HTML-Tabelle. */
.wh-article .wh-table-scroll {
  max-inline-size: 100%; min-inline-size: 0;
  overflow-x: auto; overscroll-behavior-inline: contain;
  margin-block: 2rem 2.5rem;
  border: 1px solid var(--wh-line);
  border-radius: var(--wh-radius);
  background: var(--wh-white);
  box-shadow: var(--wh-shadow);
  scrollbar-color: #93a6b8 #edf2f6;
}
.wh-article table {
  inline-size: 100%; min-inline-size: 640px;
  margin: 0; border: 0; border-collapse: separate; border-spacing: 0;
  background: var(--wh-white); font-size: 16px; line-height: 1.6;
}
.wh-article table caption {
  padding: 22px 24px;
  caption-side: top; text-align: start;
  font-size: 19px; line-height: 1.45; font-weight: 700;
  color: var(--wh-ink); background: var(--wh-white);
  border-block-end: 1px solid var(--wh-line);
}
.wh-article table :is(th, td) {
  border: 0; padding: 18px 20px; vertical-align: top;
  text-align: start; background: transparent; color: var(--wh-text);
  overflow-wrap: break-word; word-break: normal;
}
.wh-article table thead th {
  background: #1b344d; color: #ffffff;
  font-size: 14px; line-height: 1.5; font-weight: 650;
  border-inline-end: 1px solid rgba(255,255,255,.1);
}
.wh-article table thead th:last-child { border-inline-end: 0; }
.wh-article table tbody tr :is(th, td) { border-block-end: 1px solid #e4ebf0; }
.wh-article table tbody tr:nth-child(even) :is(th, td) { background: #f5f8fa; }
.wh-article table tbody tr:last-child :is(th, td) { border-block-end: 0; }
.wh-article table tbody :is(th[scope="row"], td:first-child) { font-weight: 600; color: var(--wh-ink); }
.wh-article table [data-wh-numeric="true"] { text-align: end; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .wh-article table tbody tr:hover :is(th,td) { background: #edf6f4; } }
.wh-article .wh-table-help { font-size: 14px; color: var(--wh-muted); margin-block: -.9rem 1.5rem; }
/* Optionale, sparsam eingesetzte redaktionelle Hinweisbox. Inhalt bleibt HTML. */
.wh-article .wh-callout {
  padding: 22px 26px; margin-block: 2rem;
  border: 1px solid #cee5df; border-inline-start: 4px solid var(--wh-accent);
  border-radius: 12px; background: #f0f8f5;
  box-shadow: 0 7px 23px -16px rgba(16,62,62,.2);
}
.wh-article .wh-callout p:last-child { margin-block-end: 0; }
.wh-article .wh-callout .wh-callout-title { color: #155c52; font-size: 17px; font-weight: 700; margin-block: 0 .55rem; }
.wh-article .wh-callout.wh-callout-warning { background: #fff8ed; border-color: #efdec4; border-inline-start-color: #a5650f; }
.wh-article .wh-callout-warning .wh-callout-title { color: #815015; }
/* Optionales Inhaltsverzeichnis, aus echten Abschnittsüberschriften. */
.wh-article .wh-toc { padding-block: 18px; margin-block: 1.6rem 2.4rem; border-block: 1px solid var(--wh-line); }
.wh-article .wh-toc-title { font-size: 14px; font-weight: 700; color: var(--wh-muted); margin-block-end: 12px; }
.wh-article .wh-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; }
.wh-article .wh-toc li { padding: 0; margin: 0; }
.wh-article .wh-toc a { display: block; padding: 7px 13px; background: var(--wh-soft); border-radius: 7px; font-size: 14px; font-weight: 550; text-decoration: none; }
.wh-article .wh-toc a:hover { background: #e3f0ec; }
/* Code bleibt kopierbarer Text. Kein neues Highlighting-JavaScript. */
.wh-article .wh-code {
  color: #e1edf8; background: #14283d;
  border: 1px solid #243e55; border-radius: 12px;
  padding: 22px 24px; margin-block: 1.4rem 2rem;
  max-inline-size: 100%; min-inline-size: 0; overflow-x: auto;
  white-space: pre; font-size: 14px; line-height: 1.8;
  box-shadow: 0 10px 28px -18px rgba(15,37,58,.65);
  text-align: left; direction: ltr;
}
.wh-article .wh-code code { color: inherit; background: transparent; border: 0; padding: 0; font: inherit; white-space: inherit; }
.wh-article .wh-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wh-article .wh-figure { margin: 2.2rem 0; }
.wh-article .wh-figure img { display: block; inline-size: 100%; block-size: auto; border-radius: 14px; }
.wh-article figcaption { color: var(--wh-muted); font-size: 14px; line-height: 1.6; margin-block: .85rem 0; }
.wh-article .wh-chart {
  border: 1px solid var(--wh-line); border-radius: var(--wh-radius);
  padding: 25px; margin: 2rem 0; background: var(--wh-white);
  box-shadow: var(--wh-shadow);
}
.wh-article .wh-chart > figcaption { font-size: 19px; font-weight: 700; margin-block: 0 .5rem; color: var(--wh-ink); }
.wh-article .wh-chart-unit { font-size: 14px; color: var(--wh-muted); }
.wh-article .wh-chart-row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,2fr) minmax(3em,auto); gap: 14px; align-items: center; margin-block: 14px; font-size: 15px; }
.wh-article .wh-chart-track { display: block; height: 16px; background: #e8eff3; border-radius: 5px; overflow: hidden; }
.wh-article .wh-chart-bar { display: block; height: 100%; border-radius: 5px; background: #168478; }
.wh-article .wh-chart-number { font-variant-numeric: tabular-nums; font-weight: 650; text-align: end; }
.wh-article .wh-chart details { overflow-x: auto; }
.wh-article summary { cursor: pointer; color: var(--wh-ink); font-size: 15px; font-weight: 600; padding-block: .6rem; }
.wh-article .wh-sources {
  margin-block: 3rem 0; padding-block: 1.5rem 0;
  border-block-start: 1px solid var(--wh-line);
  font-size: 14px; color: var(--wh-muted);
}
.wh-article .wh-sources h2 { font-size: 20px; margin-block: 0 1rem; }
.wh-article .wh-sources p { line-height: 1.65; }
.wh-article .wh-sources ul { list-style: none; padding: 0; }
.wh-article .wh-sources li { margin-block: .6rem; padding: 0; overflow-wrap: anywhere; }
.wh-article .wh-source-url { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
@media (max-width: 600px) {
  .wh-article { font-size: 17px; line-height: 1.75; }
  .wh-article h2 { margin-block-start: 1.9em; }
  .wh-article .wh-table-scroll { border-radius: 12px; margin-block: 1.5rem 2rem; }
  .wh-article table caption { padding: 18px; font-size: 17px; }
  .wh-article table :is(th,td) { padding: 14px 16px; }
  .wh-article .wh-callout { padding: 18px; }
  .wh-article .wh-chart { padding: 18px; }
  .wh-article .wh-chart-row { grid-template-columns: minmax(0,1fr) minmax(0,1.3fr) auto; gap: 8px; font-size: 13px; }
  .wh-article .wh-code { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) { .wh-article * { scroll-behavior: auto; } }
@media print {
  .wh-article { max-inline-size: none; color: #111; font-size: 11pt; }
  .wh-article .wh-toc { display: none; }
  .wh-article .wh-table-scroll { overflow: visible; box-shadow: none; border-radius: 0; }
  .wh-article table { min-inline-size: 0; font-size: 9pt; }
  .wh-article table thead th { color: #111; background: #eee; }
  .wh-article .wh-callout, .wh-article .wh-chart { box-shadow: none; }
  .wh-article .wh-code { color: #111; background: #f5f5f5; white-space: pre-wrap; }
}

/* Isolate long chart values and source addresses on narrow/translated layouts. */
.wh-article .wh-chart-number { min-inline-size: 0; overflow-wrap: anywhere; }
.wh-article .wh-source-url { direction: ltr; unicode-bidi: isolate; }
.wh-article .wh-toc a { overflow-wrap: anywhere; }