/* =============================================================================
   DELTA METRON — wissen.css  (Wissen: Uebersicht /wissen/, Artikel, /ueber)
   ─────────────────────────────────────────────────────────────────────────
   Seit 16.10.2026. Braucht tokens.css, shared.css und site.css davor —
   Leiste, Fuss, Knoepfe, Pillen, Glas, FAQ und Anmeldefenster kommen von
   dort. Hier steht nur, was es nur im Wissen gibt (Register 0d):
   Beitragskarte im Magazin-Stil, Artikelseite und die Seite „Über Delta
   Metron“ (Zeitstrahl, Buecherregal). Nur Ocean; Deutsch und Englisch
   (/en/…) mit denselben Klassen.
============================================================================= */

/* ── Leiste: aktueller Bereich (nur hier — die Landingpage hat keinen) ─── */
.s-navlink.is-on { color: var(--t1); background: var(--sel-on); }

/* ── Kopf der Uebersicht ────────────────────────────────────────────────── */
.s-kb-hero { position: relative; isolation: isolate; padding-top: 88px; }
.s-kb-hero .s-head { margin-bottom: 72px; }
/* Banner (seit 16.10.2026): Foto rechts hinter der Ueberschrift, an allen Raendern
   weich in den Seitengrund ausgeblendet (links am staerksten); die Ueberschrift steht in der
   leeren linken Haelfte des Bildes. Nur Schmuck — alt="" */
.s-kb-banner { position: absolute; z-index: -1; top: 0; right: 0; width: 82%; height: auto; pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent); -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 30%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent); mask-composite: intersect; }
.s-kb-hero .s-lead { max-width: 640px; }
.s-kb-hero .s-d1 { max-width: 9.5em; }   /* bleibt in der leeren linken Bildhaelfte: DE zwei, EN drei Zeilen (EN lief ins Banner, User 17.10.2026) */

/* ── Beitragskarte (Magazin-Stil): kein Rahmen, grosses eigenes Bild oben,
   Datum, Ueberschrift, Anriss, „Weiterlesen“. Bild = Chart in der Farbe
   des Themas (Bewertung --dmkc-dcf, Kennzahlen --dmkc-grw; Banken & REITs
   bekommen --dmkc-ev mit dem ersten Artikel dazu). ──────────────────────── */
.s-kb-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px var(--sp-sl-lg); }
.s-kb-card { display: flex; flex-direction: column; color: inherit; }   /* Reihe gleich hoch: „Weiterlesen“ steht unten buendig */
.s-kb-card.is-val { --mc: var(--dmkc-dcf); }
.s-kb-card.is-num { --mc: var(--dmkc-grw); }
.s-kb-card.is-bank { --mc: var(--dmkc-ev); }
.s-kb-card.is-qual { --mc: var(--blue); }
/* Bildfarbe --ic (seit 17.10.2026): Rand beim Ueberfahren folgt der Hauptfarbe
   des Titelbilds, nicht der Rubrik (Sicherheitsmarge: Rubrik Bewertung, Bild
   Gold). Ohne Klasse = Rubrikfarbe. Neue Bildfarbe erst mit dem ersten Bild. */
.s-kb-card { --ic: var(--mc); }
.s-kb-card.ic-gold { --ic: var(--today); }
.s-kb-card.ic-green { --ic: var(--green); }
.s-kb-card.ic-blue { --ic: var(--blue); }
.s-kb-card.ic-bronze { --ic: var(--dmkc-ev); }
.s-kb-card.ic-dvd { --ic: var(--dvd); }   /* Dividenden = Farbe der Dividenden-Saeulen in der App */
.s-kb-cover { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-sl-card); overflow: hidden;
    background: radial-gradient(120% 90% at 85% 100%, color-mix(in srgb, var(--ic) 34%, transparent), transparent 60%),
                radial-gradient(80% 70% at 10% 0%, color-mix(in srgb, var(--acc) 12%, transparent), transparent 70%), var(--card);
    box-shadow: 0 0 0 1px var(--glass-edge); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.s-kb-card:hover .s-kb-cover { transform: translateY(-4px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ic) 50%, transparent), 0 24px 48px rgba(0,0,0,.5); }
.s-kb-badge { position: absolute; top: var(--sp-sl-md); left: var(--sp-sl-md); z-index: 1; display: inline-flex; align-items: center; gap: var(--sp-sl-sm);
    height: 28px; padding: 0 var(--sp-sl-sm); border-radius: var(--r-sl-inner); background: rgba(2,3,5,.55);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--t1); font-size: var(--fs-sl-sm); font-weight: var(--fw-medium); }
.s-kb-badge i { width: 8px; height: 8px; border-radius: 2px; background: var(--ic); }   /* Punkt = Bildfarbe wie der Rand (User 17.10.2026) */
/* Titelbild (seit 16.10.2026): Foto je Artikel (Register 0d „Titelbilder“),
   fuellt das Bild ganz; nur die Themen-Pille liegt darueber — keine Zahl,
   kein Text auf dem Bild (User 16.10.2026: „clean“). */
.s-kb-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-kb-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: var(--sp-sl-lg); }
.s-kb-date { font-size: var(--fs-sl-md); font-weight: var(--fw-medium); color: var(--t2); }
.s-kb-body h2 { margin: 0; font-size: 30px; line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: -.015em; text-wrap: balance; }   /* bleibt beim Ueberfahren weiss (User 17.10.2026) */
.s-kb-body p { margin: 0; font-size: var(--fs-sl-bd); line-height: 1.65; color: var(--t1); }   /* hell wie die Ueberschrift (User 16.10.2026, „zu dunkel“) */
.s-kb-more { display: inline-flex; align-items: center; gap: var(--sp-sl-sm); margin-top: auto; padding-top: var(--sp-sl-sm); font-size: var(--fs-sl-bd); font-weight: var(--fw-medium); color: var(--t1); }
.s-kb-more svg { width: 18px; height: 18px; transition: transform .2s var(--ease); }
a.s-kb-card:hover .s-kb-more svg { transform: translateX(4px); }
/* Angekuendigt: kein Link, leiser */
.s-kb-card.is-soon .s-kb-cover { opacity: .75; }
.s-kb-card.is-soon h2 { color: var(--t2); }
.s-kb-card.is-soon p { color: var(--t2); }

/* ── „Wer hier schreibt“ auf der Uebersicht (fuehrt zu /ueber) ─────────── */
.s-kb-who { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-sl-lg); align-items: start; max-width: 820px; margin-top: 120px; }
.s-kb-who .s-ava { width: 64px; height: 64px; border-radius: var(--r-avatar); display: grid; place-items: center; background: linear-gradient(135deg, #1b3554, var(--brand-acc)); color: #fff; font-size: 20px; font-weight: var(--fw-semibold); }
.s-kb-who h2 { margin: 12px 0 var(--sp-sl-sm); font-size: 26px; line-height: 1.2; font-weight: var(--fw-semibold); letter-spacing: -.015em; }
.s-kb-who p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--t2); }

/* ── Werbe-Band am Ende der Uebersicht ──────────────────────────────────── */
.s-kb-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-sl-lg); align-items: center; margin-top: 120px; padding: 40px; border-radius: var(--r-sl-card); }
.s-kb-band h2 { margin: 0 0 var(--sp-sl-sm); font-size: 22px; font-weight: var(--fw-semibold); }
.s-kb-band .s-lead { font-size: 15px; }

/* ── Artikel ────────────────────────────────────────────────────────────── */
.s-art { display: grid; grid-template-columns: minmax(0, 720px) 260px; gap: 72px; padding-top: 56px; }
.s-crumb { display: flex; gap: var(--sp-sl-sm); margin-bottom: var(--sp-sl-lg); font-size: 13px; color: var(--t3); }
.s-crumb a:hover { color: var(--t1); }
.s-byline { display: flex; align-items: center; gap: 12px; margin: var(--sp-sl-lg) 0 40px; font-size: 13px; line-height: 1.5; color: var(--t3); }
.s-byline .s-ava { flex: none; width: 36px; height: 36px; border-radius: var(--r-avatar); display: grid; place-items: center; background: linear-gradient(135deg, #1b3554, var(--brand-acc)); color: #fff; font-size: 13px; font-weight: var(--fw-semibold); }
.s-byline b { color: var(--t1); font-weight: var(--fw-medium); }
/* „Kurz gesagt“: die Antwort in drei Saetzen, getoent in der Markenfarbe */
.s-tldr { padding: 20px var(--sp-sl-lg); border-radius: var(--r-sl-card); background: color-mix(in srgb, var(--brand-acc) 10%, var(--card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-acc) 35%, transparent); }
.s-tldr .s-tag { margin-bottom: 12px; background: color-mix(in srgb, var(--brand-acc) 22%, transparent); color: #5eead4; }
.s-tldr p { margin: 0; font-size: var(--fs-sl-bd); line-height: 1.65; color: var(--t1); }
/* Fliesstext */
.s-prose h2 { margin: 56px 0 12px; font-size: 24px; line-height: 1.25; font-weight: var(--fw-semibold); letter-spacing: -.01em; scroll-margin-top: 88px; }
.s-prose p { font-size: var(--fs-sl-bd); line-height: 1.75; color: var(--t2); }
.s-prose p { margin: 0 0 var(--sp-sl-md); }
.s-prose strong { color: var(--t1); font-weight: var(--fw-medium); }
.s-prose p a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--t3); text-underline-offset: 3px; transition: text-decoration-color .15s; }
.s-prose p a:hover { text-decoration-color: currentColor; }
/* Drei Zutaten als kleine Karten (Farbe = Modellposition) */
.s-ingr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-sl-md); margin: var(--sp-sl-lg) 0; }
.s-ingr div { padding: var(--sp-sl-md); border-radius: var(--r-sl-card); background: var(--card); box-shadow: 0 0 0 1px var(--bdr); }
.s-ingr i { display: block; width: 8px; height: 8px; margin-bottom: 12px; border-radius: 2px; }
.s-ingr .is-p1 i { background: var(--dmkc-dcf); } .s-ingr .is-p2 i { background: var(--dmkc-grw); } .s-ingr .is-p3 i { background: var(--dmkc-ev); }
.s-ingr b { display: block; margin-bottom: var(--sp-sl-xs); font-size: var(--fs-sl-md); font-weight: var(--fw-semibold); color: var(--t1); }
.s-ingr span { font-size: 13px; line-height: 1.5; color: var(--t2); }
/* Formel: MathML, vom Browser gesetzt — kein Bild, keine Bibliothek */
.s-formula { margin: var(--sp-sl-lg) 0; padding: var(--sp-sl-lg); border-radius: var(--r-sl-card); background: var(--card); box-shadow: 0 0 0 1px var(--bdr); overflow-x: auto; }
.s-formula math { display: block; font-size: 22px; color: var(--t1); }
.s-formula dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-sl-xs) var(--sp-sl-md); margin: var(--sp-sl-lg) 0 0; padding-top: var(--sp-sl-md); border-top: 1px solid var(--bdr-soft); font-size: var(--fs-sl-md); }
.s-formula dt { color: var(--t1); font-weight: var(--fw-medium); font-style: italic; }
.s-formula dd { margin: 0; color: var(--t2); }
/* Rechentabelle */
.s-calc { margin: var(--sp-sl-lg) 0; border-radius: var(--r-sl-card); background: var(--card); box-shadow: 0 0 0 1px var(--bdr); overflow: hidden; }
.s-calc-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--bdr-soft); }
.s-calc-h b { font-size: var(--fs-sl-md); font-weight: var(--fw-semibold); }
.s-calc table { width: 100%; border-collapse: collapse; font-size: var(--fs-sl-md); font-variant-numeric: tabular-nums; }
.s-calc th, .s-calc td { padding: 10px 20px; text-align: right; border-bottom: 1px solid var(--bdr-soft); }
.s-calc th { font-size: var(--fs-sl-sm); font-weight: var(--fw-medium); color: var(--t3); }
.s-calc th:first-child, .s-calc td:first-child { text-align: left; color: var(--t2); }
.s-calc td { color: var(--t1); }
.s-calc tr.is-sum td { font-weight: var(--fw-medium); }
.s-calc tr.is-res td { font-size: var(--fs-sl-bd); font-weight: var(--fw-semibold); color: var(--t1); border-bottom: 0; background: color-mix(in srgb, var(--dmkc-dcf) 10%, transparent); }
.s-calc-f { padding: 10px 20px; font-size: var(--fs-sl-sm); color: var(--t3); }
/* Typische Fehler: nummerierte Liste */
.s-mist { display: flex; gap: var(--sp-sl-md); padding: var(--sp-sl-md) 0; border-top: 1px solid var(--bdr-soft); }
.s-mist-n { flex: none; width: 28px; height: 28px; border-radius: var(--r-avatar); display: grid; place-items: center; background: var(--neutral-bg); color: var(--t1); font-size: 13px; font-weight: var(--fw-semibold); }
.s-mist b { display: block; margin-bottom: 2px; font-size: var(--fs-sl-bd); font-weight: var(--fw-medium); color: var(--t1); }
.s-mist span { font-size: 15px; line-height: 1.65; color: var(--t2); }
/* Founding-Kasten im Artikel */
.s-offer { margin: var(--sp-sl-xl) 0; padding: 28px; border-radius: var(--r-sl-card); }
.s-offer h2 { margin: 12px 0 6px; font-size: 22px; font-weight: var(--fw-semibold); }
.s-offer p { margin: 0 0 20px; font-size: 15px; color: var(--t2); }
/* Autorenkasten unter dem Artikel */
.s-author { display: flex; gap: var(--sp-sl-md); align-items: flex-start; margin-top: var(--sp-sl-xl); padding: var(--sp-sl-lg); border-radius: var(--r-sl-card); }
.s-author .s-ava { flex: none; width: 48px; height: 48px; border-radius: var(--r-avatar); display: grid; place-items: center; background: linear-gradient(135deg, #1b3554, var(--brand-acc)); color: #fff; font-weight: var(--fw-semibold); }
.s-author b { display: block; margin-bottom: var(--sp-sl-xs); font-size: var(--fs-sl-bd); font-weight: var(--fw-semibold); }
.s-author p { margin: 0 0 var(--sp-sl-sm); font-size: var(--fs-sl-md); line-height: 1.6; color: var(--t2); }
.s-author-links { display: flex; flex-wrap: wrap; gap: var(--sp-sl-md); }
/* Links im Autorenkasten sind Knoepfe (User 16.10.2026): „Meine Geschichte“
   als .dm-act, YouTube als .s-yt.is-btn — beide 40px wie der YouTube-Knopf. */
.s-author-links { margin-top: var(--sp-sl-md); }
.s-art .s-faq { max-width: none; }
.s-disc { margin-top: var(--sp-sl-lg); padding-top: var(--sp-sl-md); border-top: 1px solid var(--bdr-soft); font-size: var(--fs-sl-sm); color: var(--t3); }
/* Seitenspalte: Inhaltsliste neben dem Titel. Kein Kasten — eine Haarlinie
   links fuehrt das Auge, der Knopf steht frei darunter (User 16.10.2026: der
   Glaskasten war zu schwer). Klebend, aber OHNE Rucken: die Klebe-Hoehe ist
   genau die Startlage (Leiste 64 + Rand 1 + Abstand der Seite 56 = 121px).
   So steht sie vom ersten Moment an still und laeuft erst am Artikelende mit
   nach oben (User 16.10.2026). Vorher klebte sie bei 96px und rutschte beim
   ersten Scrollen 25px hoch. Aendert sich die Leiste oder .s-art padding-top,
   muss dieser Wert mit. */
.s-toc { position: sticky; top: 121px; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sl-lg); }
.s-toc-nav { display: flex; flex-direction: column; }
.s-toc-nav > span { display: block; margin-bottom: 12px; font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase; color: var(--t3); }
.s-toc-nav a { display: block; padding: 6px 0 6px var(--sp-sl-md); border-left: 1px solid var(--bdr); font-size: 13px; line-height: 1.45; color: var(--t3); transition: color .15s, border-color .15s; }
.s-toc-nav a:hover { color: var(--t1); border-left-color: var(--t2); }
/* Ende der Seite: Zurueck-Knopf dicht unter dem Hinweis, Fuss naeher als auf
   der Landingpage (dort 144px zwischen grossen Abschnitten; hier wirkte das
   Ende leer, User 16.10.2026). wissen.css laedt nach site.css. */
.s-back { margin-top: var(--sp-sl-lg); }
.s-footer { margin-top: 96px; }
/* Ort-Klasse fuer .dm-act: nur Groesse — 40px wie .s-yt.is-btn daneben. */
.s-author-links .dm-act, .s-back .dm-act { height: 40px; padding: 0 var(--sp-sl-md); font-size: var(--fs-sl-md); }

/* ── Über Delta Metron (/ueber) ─────────────────────────────────────────── */
.s-ab-hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-sl-md); max-width: 820px; padding-top: 88px; }
.s-ab-hero .s-byline { margin: var(--sp-sl-sm) 0; }
.s-ab-hero .s-lead { font-size: 18px; line-height: 1.65; }
/* YouTube-Knopf: Bauart .s-yt aus site.css (Leiste des Trailers) — hier frei
   auf der Seite; Abstand nur ueber den Behaelter. */
.s-ab-yt { display: flex; align-items: center; gap: var(--sp-sl-md); }
/* Freistehend als Knopf (User 16.10.2026: „schöner YouTube-Knopf wie im
   Videofenster“): Rahmen wie .dm-act, Logo in YouTube-Rot mit weissem
   Dreieck wie im Fuss — in Ruhe schon erkennbar, beim Ueberfahren die Flaeche. */
.s-yt.is-btn { height: 40px; margin-left: 0; padding: 0 var(--sp-sl-md) 0 12px; gap: 10px; border: 1px solid var(--act-bdr); color: var(--t1); font-size: var(--fs-sl-md); font-weight: var(--fw-medium); }
.s-yt.is-btn svg { width: 22px; height: 22px; color: #FF0000; }
.s-yt.is-btn .yt-play { fill: #fff; }
.s-yt.is-btn:hover { background: var(--act-hover); color: var(--t1); }
.s-ab-yt p { margin: 0; font-size: var(--fs-sl-md); color: var(--t2); }
/* Geschichte: eine Spalte ohne Seitenleiste — ein Lebenslauf braucht kein
   Inhaltsverzeichnis. */
.s-ab-body { max-width: 720px; margin-top: 40px; }
.s-ab-body .s-ab-yt { margin-top: var(--sp-sl-xl); padding-top: var(--sp-sl-lg); border-top: 1px solid var(--bdr-soft); }
/* Zeitstrahl: eine Linie, ein Punkt je Station, Datum darueber */
.s-tl { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-sl-md); margin: 72px 0 0; padding: 0; list-style: none; }
.s-tl::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--bdr); }
.s-tl li { position: relative; display: flex; flex-direction: column; gap: 28px; }
.s-tl li::after { content: ""; position: absolute; left: 0; top: 30px; width: 9px; height: 9px; border-radius: var(--r-avatar); background: var(--brand-acc); box-shadow: 0 0 0 4px var(--bg); }
.s-tl li:last-child::after { background: var(--pos); }
.s-tl b { font-size: var(--fs-sl-md); font-weight: var(--fw-semibold); color: var(--t1); white-space: nowrap; }
.s-tl span { font-size: 13px; line-height: 1.5; color: var(--t2); }
/* Buecherregal: Foto links, je Autor eine Erkenntnis rechts */
.s-shelf { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-sl-lg); align-items: start; margin: var(--sp-sl-lg) 0; }
.s-shelf figure { margin: 0; }
.s-shelf img { width: 100%; height: auto; border-radius: var(--r-sl-card); box-shadow: 0 0 0 1px var(--bdr); }
.s-shelf ul { margin: 0; padding: 0; list-style: none; }
.s-shelf li { display: flex; flex-direction: column; gap: var(--sp-sl-xs); padding: var(--sp-sl-md) 0; border-top: 1px solid var(--bdr-soft); }
.s-shelf li:first-child { padding-top: 0; border-top: 0; }
.s-shelf b { font-size: var(--fs-sl-bd); font-weight: var(--fw-semibold); color: var(--t1); }
.s-shelf em { font-style: normal; font-size: 13px; color: var(--t3); }
.s-shelf span { font-size: 15px; line-height: 1.65; color: var(--t2); }
.s-shelf strong { color: var(--t1); font-weight: var(--fw-medium); }

/* ── Schmaler ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .s-art { grid-template-columns: minmax(0, 1fr); } .s-toc { display: none; } }
@media (max-width: 1024px) { .s-kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s-tl { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--sp-sl-lg); } .s-tl::before { display: none; } }
@media (max-width: 760px) {
    .s-kb-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sl-xl); }
    .s-kb-band { grid-template-columns: minmax(0, 1fr); padding: var(--sp-sl-lg); }
    .s-ingr { grid-template-columns: minmax(0, 1fr); }
    .s-kb-hero, .s-ab-hero { padding-top: var(--sp-sl-xl); }
    .s-kb-banner { position: static; width: 100%; margin-bottom: var(--sp-sl-lg); -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to bottom, #000 70%, transparent); }
    /* Zeitleiste auf dem Handy: eine Zeile zum Wischen, beginnt beim aeltesten
       Jahr, rechter Rand weich ausgeblendet (User 17.10.2026, Variante A). */
    .s-tl { display: flex; gap: 28px; margin-inline: calc(-1 * var(--main-padding)); padding: 0 var(--main-padding) 8px;
        overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--main-padding); scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
    .s-tl::-webkit-scrollbar { display: none; }
    .s-tl li { flex: 0 0 130px; scroll-snap-align: start; gap: 22px; }
    .s-tl li::before { content: ""; position: absolute; top: 34px; left: 0; right: -28px; height: 1px; background: var(--bdr); }
    .s-tl li:last-child::before { right: 0; }
    .s-shelf { grid-template-columns: minmax(0, 1fr); }
}