/* ============================================================
   DZIP — Wissen / Fachbeiträge
   Redaktionelles Artikel-Layout für /wissen/*.html.

   Ergänzt dzip.css, ersetzt nichts: Farben, Typografie und Abstände
   kommen aus den Tokens von dzip.css; wiederverwendet werden .container,
   .eyebrow, .display, .headline, .btn, .textlink, .rule-gold,
   .dossier-note und .section--mesh-offset. Alle neuen Klassen tragen das
   Präfix .wissen-. Einbindung NACH dzip.css.

   Gestalterische Grundidee (siehe Manuskript-Hinweise): hochwertiger
   medizinisch-wissenschaftlicher Editorial-Beitrag — viel Weißraum, klare
   Typografie, sparsame Goldakzente, keine Animationen im Artikel.
   ============================================================ */

/* ---------- Lesespalte ---------- */
/* Normale Seitenbreite (wie .container); Fließtext bleibt auf 2/3 der Breite begrenzt
   (Zeilenlänge), Kopf, Boxen und Grafiken nutzen die volle Breite. */
.wissen-container { max-width: var(--container); }
.wissen-body > :is(p, ul, ol, h2, h3, h4),
.wissen-subtitle { max-width: 75%; }
@media (max-width: 940px) {
  .wissen-body > :is(p, ul, ol, h2, h3, h4),
  .wissen-subtitle { max-width: 100%; }
}

/* Fokusring in --ink: Gold erreicht auf Creme nur ~2,7:1 (WCAG 1.4.11 verlangt 3:1). */
.wissen-article a:focus-visible,
.wissen-related a:focus-visible,
.wissen-cta a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* ---------- Artikelkopf ---------- */
.wissen-head {
  padding-top: clamp(8rem, 12vw, 10.5rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.wissen-breadcrumb { margin-bottom: clamp(2rem, 4vw, 3rem); }
.wissen-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.65rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-muted);
}
.wissen-breadcrumb li + li::before {
  content: "›";
  margin-right: 0.65rem;
  color: var(--gold);
}
.wissen-breadcrumb a {
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wissen-breadcrumb a:hover,
.wissen-breadcrumb a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.wissen-breadcrumb [aria-current="page"] { color: var(--ink); }

.wissen-eyebrow { margin-bottom: 1.5rem; }

.wissen-title {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem);
  line-height: 1.05;
}

.wissen-subtitle {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  line-height: 1.35;
  color: var(--ink-muted);
  margin: 1.6rem 0 0;
  text-wrap: balance;
}

.wissen-byline {
  position: relative;
  margin-top: clamp(1.8rem, 3.5vw, 2.6rem);
  padding-top: 1.4rem;
}
.wissen-byline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 46px;
  height: 1px;
  background: var(--gold);
}
.wissen-byline__author {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.wissen-byline__dates {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/* ---------- Fließtext ---------- */
.wissen-body {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  font-size: calc(1.22rem * var(--type-scale));
  line-height: 1.75;
}
.wissen-body p { margin: 0 0 1.25em; text-wrap: pretty; }
.wissen-body p:last-child { margin-bottom: 0; }
.wissen-body strong { font-weight: 600; }

.wissen-body h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.85rem, 3.4vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: clamp(3rem, 6vw, 4.5rem) 0 1.4rem;
  text-wrap: balance;
}
.wissen-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.3vw, 1.7rem);
  line-height: 1.2;
  margin: 2.4rem 0 0.9rem;
  text-wrap: balance;
}
.wissen-body h2 + h3 { margin-top: 1.6rem; }

.wissen-body p a:not(.btn),
.wissen-body li a:not(.btn) {
  border-bottom: 1px solid var(--gold);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wissen-body p a:not(.btn):hover,
.wissen-body li a:not(.btn):hover { color: var(--ink-muted); border-bottom-color: var(--ink-muted); }

/* Listen: feiner Goldstrich statt Punkt */
.wissen-body ul {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
.wissen-body ul > li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.6em;
}
.wissen-body ul > li:last-child { margin-bottom: 0; }
.wissen-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.85rem;
  height: 1px;
  background: var(--gold);
}

/* Einleitung (Lead) */
.wissen-body .wissen-lead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.5vw, 1.72rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.5em;
  text-wrap: pretty;
}
.wissen-body .wissen-lead strong { font-weight: 600; }

/* Schlusszeile */
.wissen-body .wissen-signature {
  margin-top: 2.2rem;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.7rem);
  line-height: 1.3;
}

/* ---------- Callout: eine Kernaussage, ohne Kasten ---------- */
.wissen-callout {
  margin: clamp(2.2rem, 4vw, 3rem) 0;
  padding: 0.15rem 0 0.15rem 1.6rem;
  border-left: 2px solid var(--gold);
}
.wissen-body .wissen-callout p {
  margin: 0 0 0.6em;
  font-family: var(--serif);
  font-size: clamp(1.32rem, 2.2vw, 1.58rem);
  font-weight: 500;
  line-height: 1.38;
  color: var(--ink);
}
.wissen-body .wissen-callout p:last-child { margin-bottom: 0; }

/* ---------- Pull-Quote: typografischer Break, keine Box ---------- */
.wissen-pullquote {
  margin: clamp(3.2rem, 7vw, 5.5rem) 0;
  padding: 0;
}
.wissen-pullquote::before {
  content: "";
  display: block;
  width: 46px;
  height: 1px;
  background: var(--gold);
  margin-bottom: 1.6rem;
}
/* Kursiv setzt Pull-Quotes klar von den (aufrechten) Überschriften ab. */
.wissen-body .wissen-pullquote p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.45rem, 2.5vw, 1.85rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.wissen-body .wissen-pullquote--key { margin-block: clamp(4rem, 9vw, 7rem); }
.wissen-body .wissen-pullquote--key p {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.2;
}

/* ---------- Hinweiskasten (baut auf .dossier-note auf) ---------- */
.wissen-body .wissen-box { margin: 2.6rem 0; padding: 1.7rem 1.9rem; }
.wissen-body .wissen-box p {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--ink);
}
.wissen-body .wissen-box p + p { margin-top: 0.8rem; }
/* Boxlabel: kleiner Text, daher dunkler als das Gold der Basis (Kontrast) */
.wissen-box .dossier-note__label { color: var(--ink-muted); }
.wissen-body .wissen-box .wissen-box__title {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.2vw, 1.55rem);
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.wissen-body .wissen-box ul { margin: 0; }
.wissen-body .wissen-box ul > li { font-size: 1.15rem; line-height: 1.6; }

/* ---------- Die zwölf Hallmarks: geordnete Liste ---------- */
.wissen-hallmarks {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 0;
  counter-reset: hallmark;
  border-top: 1px solid var(--hairline);
}
.wissen-body .wissen-hallmarks > li {
  position: relative;
  counter-increment: hallmark;
  margin: 0;
  padding: 2rem 0 1.4rem 4.4rem;
  border-bottom: 1px solid var(--hairline-soft);
}
.wissen-body .wissen-hallmarks > li::before {
  content: counter(hallmark, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2.1rem;
  width: auto;
  height: auto;
  background: none;
  font-family: var(--serif);
  font-size: 1.6rem;
  line-height: 1.2;
  color: #9c7b41; /* dunkleres Gold (Hover-Ton von .btn--gold): ≥ 3:1 für große Schrift */
  font-variant-numeric: lining-nums tabular-nums;
}
.wissen-body .wissen-hallmarks h3 { margin: 0 0 0.9rem; }

/* ---------- Seiten-Modell (Genetik/Epigenetik) ---------- */
.wissen-model { margin: clamp(2.6rem, 5vw, 3.8rem) 0; }
.wissen-model__bracket {
  position: relative;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wissen-model__bracket::before,
.wissen-model__bracket::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 0.55rem;
  background: var(--gold);
}
/* Die Haken zeigen zur Seitenreihe hin: oben ┌──┐, unten └──┘ */
.wissen-model__bracket--top { padding-bottom: 0.9rem; border-bottom: 1px solid var(--gold); }
.wissen-model__bracket--top::before,
.wissen-model__bracket--top::after { bottom: -0.55rem; }
.wissen-model__bracket--bottom { padding-top: 0.9rem; border-top: 1px solid var(--gold); }
.wissen-model__bracket--bottom::before,
.wissen-model__bracket--bottom::after { top: calc(-0.55rem - 1px); }
.wissen-model__bracket::before { left: 0; }
.wissen-model__bracket::after { right: 0; }

.wissen-model__pages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.4rem, 3vw, 2rem);
}
.wissen-model__svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(28, 31, 38, 0.1));
}
.wissen-model__sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wissen-body .wissen-model__note {
  margin: 1.1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ---------- Handlungslink im Text ---------- */
.wissen-inline-cta { margin-top: 2rem; }
.wissen-inline-cta .btn,
.wissen-cta .btn { white-space: normal; text-align: center; }

/* ---------- Quellen ---------- */
.wissen-sources {
  margin-top: clamp(1rem, 2vw, 2rem);
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}
.wissen-sources h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  margin: 0 0 1.2rem;
}
.wissen-sources ol,
.wissen-sources ul { margin: 0; padding-left: 1.4rem; }
.wissen-sources ul { list-style: none; padding-left: 0; }
.wissen-sources li {
  margin: 0 0 0.9rem;
  padding-left: 0.3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-muted);
}
.wissen-sources ul li { padding-left: 0; }
.wissen-sources li:last-child { margin-bottom: 0; }
.wissen-sources a {
  color: var(--ink);
  font-weight: 500;
  border-bottom: 1px solid var(--gold);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.wissen-sources a:hover { color: var(--ink-muted); border-bottom-color: var(--ink-muted); }
.wissen-sources a .ext { color: var(--gold); margin-left: 0.2em; }

/* ---------- Autorenabschluss ---------- */
.wissen-authorclose {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
}
.wissen-authorclose__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
}
.wissen-authorclose__role {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  color: var(--ink-muted);
}

/* ---------- Weiterführende Beiträge ---------- */
.wissen-related { margin-top: clamp(3rem, 6vw, 5rem); }
.wissen-related .section-head { max-width: none; }
.wissen-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.wissen-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  background: var(--cream);
  border: 1px solid var(--hairline);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.wissen-card:hover { border-color: var(--gold); box-shadow: 0 18px 40px rgba(28, 31, 38, 0.08); }
.wissen-card__kicker {
  margin: 0 0 1rem;
  font-size: calc(0.85rem * var(--type-scale));
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.wissen-card h3 {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: clamp(calc(1.66rem * var(--type-scale)), calc(2.44vw * var(--type-scale)), calc(2rem * var(--type-scale)));
  font-weight: 500;
  line-height: 1.2;
}
/* Ganze Karte klickbar: der Titel-Link spannt sich über die Karte */
.wissen-card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Ein einziger Fokusring, und zwar um die ganze Karte (statt um den Titeltext) */
.wissen-card h3 a:focus-visible { outline: none; }
.wissen-card h3 a:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.wissen-card__teaser {
  margin: 0 0 1.2rem;
  font-size: calc(1.12rem * var(--type-scale));
  line-height: 1.6;
  color: var(--ink-muted);
}
.wissen-card__author {
  margin: 0 0 1.6rem;
  font-size: calc(0.97rem * var(--type-scale));
  color: var(--ink-muted);
}
.wissen-card__cta { margin-top: auto; align-self: flex-start; border-bottom: 0; padding-bottom: 0; }
.wissen-card__cta .arrow { font-size: 1.5rem; line-height: 1; }
.wissen-card:hover .wissen-card__cta { gap: 0.85em; }
.wissen-related__back { margin: clamp(1.8rem, 3vw, 2.4rem) 0 0; }

/* Dreispaltige Variante für die Artikelkarten auf Startseite und Ärztlicher Leitung */
.wissen-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 940px) {
  .wissen-cards--three { grid-template-columns: 1fr; }
}

/* ---------- Sanfter Abschluss ---------- */
.wissen-cta { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.wissen-cta .rule-gold { margin-bottom: 1.8rem; }
.wissen-cta__statement {
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* ---------- Responsiv ---------- */
@media (max-width: 940px) {
  .wissen-cards { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .wissen-model__pages {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    max-width: 13rem;
    margin-inline: auto;
  }
  .wissen-model__bracket { letter-spacing: 0.1em; }
}

@media (max-width: 600px) {
  .wissen-head { padding-top: 7rem; }
  .wissen-body { font-size: 1.12rem; line-height: 1.7; }
  .wissen-body .wissen-box { padding: 1.4rem 1.3rem; }
  .wissen-callout { padding-left: 1.15rem; }
  .wissen-body .wissen-pullquote p { font-size: 1.5rem; }
  .wissen-body .wissen-pullquote--key p { font-size: 1.7rem; }
  .wissen-body .wissen-hallmarks > li { padding: 1.6rem 0 1.2rem; }
  .wissen-body .wissen-hallmarks > li::before {
    position: static;
    display: block;
    margin-bottom: 0.4rem;
  }
  .wissen-inline-cta .btn,
  .wissen-cta .btn-row .btn { width: 100%; }
  .wissen-cta .btn-row { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .wissen-breadcrumb a,
  .wissen-body p a,
  .wissen-body li a,
  .wissen-sources a,
  .wissen-card { transition: none; }
}