/* Legacy-bridge — re-skins old class names with Editorial Finance Paper tokens.
   Used by subpages that still ship old body markup. New homepage doesn't need this. */

/* Re-bind legacy color/font tokens to editorial palette so tracker.css + leftover
   inline rules keep working without their original :root block. */
:root {
  --brand-primary:        var(--petrol);
  --brand-primary-dark:   var(--petrol-deep);
  --brand-primary-hover:  var(--petrol-deep);
  --brand-primary-soft:   var(--petrol-soft);
  --brand-accent:         var(--apricot);
  --brand-accent-dark:    var(--apricot-deep);
  --brand-accent-soft:    var(--apricot-soft);
  --bg-page:              var(--paper);
  --bg-card:              var(--paper-deep);
  --bg-card-cream:        var(--paper-deep);
  --bg-elevated:          var(--paper-deep);
  --card-border:          var(--rule);
  --text:                 var(--ink);
  --text-secondary:       var(--ink-2);
  --text-muted:           var(--muted);
  --text-inverse:         var(--paper);
  --font-heading:         var(--font-display);
  --font-body:            var(--font-body);
  --font-accent:          var(--font-marker);
  --font-hand:            var(--font-marker);
  --radius-sm:            var(--r-sm);
  --radius-md:            var(--r-md);
  --radius-lg:            var(--r-lg);
  --radius-xl:            var(--r-xl);
  --shadow-sm:            0 1px 2px rgba(26,24,21,.06);
  --shadow-md:            var(--shadow-raised);
  --shadow-lg:            0 12px 32px rgba(26,24,21,.12);
  --shadow-hover:         0 16px 40px rgba(26,24,21,.15);
}

/* Container/grid rescue */
.container, .article-wrap, .legal-wrap {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.article-wrap, .legal-wrap { padding-block: var(--s-48) var(--s-96); }

/* Hero-hub block */
.hero-hub {
  background: var(--paper);
  padding: var(--s-64) 0 var(--s-48);
  border-bottom: 1px solid var(--rule);
}
.hero-hub--compact { padding: var(--s-32) 0 var(--s-32); }
.hero-hub--compact h1 {
  font-size: clamp(1.75rem, 2.5vw + 0.5rem, var(--fs-44));
  line-height: 1.05;
  margin-bottom: var(--s-8);
  max-width: 16ch;
}
.hero-hub--compact .hero-label { margin-bottom: var(--s-8); }
.hero-hub--compact .hero-sub { font-size: var(--fs-17); margin-top: 0; max-width: 50ch; }

.hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s-48);
  align-items: end;
}
@media (max-width: 1023px) { .hub-head { grid-template-columns: 1fr; gap: var(--s-24); align-items: start; } }

.hub-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16) var(--s-32);
  margin: 0;
  padding: var(--s-16) 0 0;
  border-top: 1px solid var(--rule);
}
.hub-facts > div { min-width: 0; }
.hub-facts dt {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
  font-weight: 600;
}
.hub-facts dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.hub-facts dd a { color: var(--petrol-deep); text-decoration: underline; text-decoration-color: rgba(31,94,85,0.4); text-underline-offset: 3px; }
.hub-facts dd a:hover { background: var(--petrol-soft); }
.hub-facts__split { color: var(--muted); font-weight: 400; }
.hero-hub h1, .article-wrap h1, .legal-wrap h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-size: clamp(2.25rem, 4vw + 0.5rem, var(--fs-60));
  max-width: 22ch;
  margin-bottom: var(--s-16);
}
.hero-hub .hero-sub, .article-wrap .article-lead {
  font-size: var(--fs-20);
  color: var(--ink-2);
  max-width: 60ch;
  line-height: 1.55;
  margin-top: var(--s-8);
}

/* Breadcrumbs */
.breadcrumbs {
  font-size: var(--fs-12);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-16);
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink-2); background: none; }
.breadcrumbs .sep { margin: 0 8px; color: var(--rule); }

/* Eyebrow swap (Caveat marker) */
.hero-label, .section-eyebrow, .pre-headline, .lead-eyebrow {
  font-family: var(--font-marker);
  font-size: 1.25rem;
  color: var(--apricot-deep);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: var(--s-12);
  font-weight: 600;
}

/* Generic intro / disclosure boxes */
.intro-note, .article-disclaimer, .disclaimer, .pull-out, .info-box {
  background: var(--apricot-soft);
  border-left: 4px solid var(--apricot);
  padding: var(--s-24) var(--s-32);
  margin: var(--s-32) 0;
  font-size: var(--fs-16);
  color: var(--ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 65ch;
}
.intro-note strong, .pull-out strong { color: var(--ink); }

/* Depot card list */
.depots { padding: var(--s-48) 0 var(--s-96); }
.depot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-24);
  margin-top: var(--s-32);
}
@media (max-width: 1023px) { .depot-grid { grid-template-columns: 1fr; } }

.depot-card {
  position: relative;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-32) var(--s-24);
  display: flex;
  flex-direction: column;
  transition: transform 180ms, box-shadow 180ms;
}
.depot-card.live { border-left: 4px solid var(--petrol); }
.depot-card.coming { background: transparent; border-style: dashed; }
.depot-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }

.depot-status {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  margin-bottom: var(--s-16);
  border: 1px solid var(--rule);
}
.depot-status.live-tag { background: var(--petrol); color: var(--paper); border-color: var(--petrol); }
.depot-status.coming-tag { background: var(--apricot-soft); color: var(--apricot-deep); border-color: var(--apricot-soft); }

.depot-card h2, .depot-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  margin-bottom: var(--s-4);
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.depot-card .subtitle {
  font-family: var(--font-marker);
  color: var(--apricot-deep);
  font-size: 1.15rem;
  font-style: normal;
  margin-bottom: var(--s-16);
  display: block;
}
.depot-card p {
  font-size: var(--fs-16);
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: var(--s-24);
  flex-grow: 1;
}

.depot-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24);
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-top: var(--s-16);
  border-top: 1px solid var(--rule);
  margin-bottom: var(--s-16);
}
.depot-meta strong { color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-16); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; display: block; }

.depot-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  font-weight: 500;
  color: var(--petrol-deep);
  font-size: var(--fs-14);
  text-decoration: none;
}
.depot-link::after { content: '→'; transition: transform 160ms; }
.depot-card:hover .depot-link::after { transform: translateX(4px); }
.depot-card.coming .depot-link { color: var(--muted); pointer-events: none; }

/* Tracker wrap (lives between hero + tracker mount) */
.tracker-wrap { padding: var(--s-32) 0 var(--s-48); }
.tracker-wrap h2 { font-family: var(--font-display); font-size: var(--fs-32); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--s-12); }
.tracker-wrap .wrap-lead, .tracker-wrap p {
  color: var(--ink-2);
  max-width: 60ch;
  margin-bottom: var(--s-24);
  font-size: var(--fs-17);
}

/* Article body (long-form blog post) */
.article-wrap article, .article-wrap .post-body { max-width: 68ch; margin: 0 auto; }
.article-wrap h2 { margin-block: var(--s-48) var(--s-16); font-size: var(--fs-32); }
.article-wrap h3 { margin-block: var(--s-32) var(--s-12); font-size: var(--fs-24); }
.article-wrap p, .article-wrap ul, .article-wrap ol { margin-block: var(--s-16); }
.article-wrap ul, .article-wrap ol { padding-left: 1.4em; }
.article-wrap li { margin-block: 6px; }
.article-wrap blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-24);
  line-height: 1.4;
  color: var(--ink);
  background: var(--paper-deep);
  border-left: 4px solid var(--apricot);
  padding: var(--s-24) var(--s-32);
  margin-block: var(--s-32);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Tables */
.quick-facts-table, .stat-table, .article-wrap table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--s-24);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-16);
}
.quick-facts-table th, .quick-facts-table td,
.stat-table th, .stat-table td,
.article-wrap th, .article-wrap td {
  text-align: left;
  padding: 12px 8px;
  border-bottom: 1px solid var(--rule);
}
.article-wrap th, .quick-facts-table th, .stat-table th {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: var(--fs-12);
  text-transform: uppercase;
  color: var(--ink-2);
  border-bottom: 1.5px solid var(--ink);
}
.article-wrap td.num, .article-wrap th.num { text-align: right; font-family: var(--font-display); font-weight: 500; }

/* Article meta strip */
.article-meta, .post-meta {
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block: var(--s-12) var(--s-32);
}
.article-meta span + span::before, .post-meta span + span::before { content: " · "; margin: 0 6px; color: var(--rule); }

/* Article TOC / aside */
.toc, .article-aside, aside.toc {
  border-left: 1px solid var(--rule);
  padding-left: var(--s-16);
  font-size: var(--fs-14);
}
.toc h4, .article-aside h4 {
  font-size: var(--fs-12);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: var(--s-12);
}

/* Pillars / blog post cards */
.pillars, .post-list { padding-block: var(--s-48) var(--s-96); }
.post-card, .pillar-card {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms, box-shadow 180ms;
}
.post-card:hover, .pillar-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); }
.post-card h3, .pillar-card h3 { font-size: var(--fs-20); line-height: 1.25; }
.post-card .excerpt, .pillar-card p { font-size: var(--fs-14); color: var(--ink-2); line-height: 1.6; flex: 1; }
.post-card .meta { font-size: var(--fs-12); color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; padding-top: var(--s-8); border-top: 1px solid var(--rule); margin-top: var(--s-4); }

/* Tags / pills (legacy) */
.pillar-tag, .tag-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background: var(--paper-deep);
  color: var(--ink-2);
  font-size: var(--fs-12);
  border: 1px solid var(--rule);
  margin-right: 6px;
  margin-bottom: 6px;
}
.pillar-tags, .post-tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Footer (legacy single-row) — bridge to editorial split */
.site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--s-24);
  font-size: var(--fs-14);
  color: var(--ink-2);
}
.site-footer .footer-inner a { color: var(--ink); margin: 0 var(--s-12) 0 0; text-decoration: none; }
.site-footer .footer-inner a:hover { color: var(--petrol-deep); text-decoration: underline; text-underline-offset: 4px; background: none; }

/* Reveal compatibility — old pages used .reveal/.is-visible */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity 540ms ease-out, transform 540ms cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* Säule charts — burned zone, just keep them readable */
.saule-section, .pillar-section { padding-block: var(--s-48); border-bottom: 1px solid var(--rule); }
.saule-section h2, .pillar-section h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }

/* Legal pages */
.legal-wrap h2 { font-size: var(--fs-24); margin-block: var(--s-32) var(--s-12); }
.legal-wrap p, .legal-wrap li { font-size: var(--fs-16); color: var(--ink); line-height: 1.7; max-width: 68ch; }
.legal-wrap ul { padding-left: 1.4em; margin-block: var(--s-12); }

/* Coming-soon pill (footer) */
.coming-soon { color: var(--apricot-deep); font-family: var(--font-marker); font-size: 1rem; margin-left: 4px; }

/* === Blog index === */
.blog-listing { padding-block: var(--s-32) var(--s-96); }
.filter-tabs {
  display: flex;
  gap: var(--s-24);
  overflow-x: auto;
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
  margin-bottom: var(--s-24);
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.filter-tab:hover { color: var(--ink); }
.filter-tab.active, .filter-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--apricot); }

.blog-count {
  font-size: var(--fs-12);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-32);
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-24);
}
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms, box-shadow 180ms;
}
.blog-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); background: var(--paper-deep); text-decoration: none; }
.blog-card h2 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.blog-card-excerpt { font-size: var(--fs-14); color: var(--ink-2); line-height: 1.6; flex: 1; }

.blog-card-category {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--petrol-deep);
  border: 1px solid var(--rule);
}
.cat-aktien      { color: var(--petrol-deep); }
.cat-tagesgeld   { color: var(--apricot-deep); }
.cat-p2p         { color: var(--ink-2); }
.cat-portfolio   { color: var(--petrol); }
.cat-broker      { color: var(--apricot-deep); }
.cat-steuern     { color: var(--ink-2); }

.blog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-12);
  border-top: 1px solid var(--rule);
  margin-top: var(--s-4);
}
.blog-card-meta {
  display: flex;
  gap: var(--s-12);
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0.04em;
}
.blog-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.blog-card-meta svg { width: 14px; height: 14px; opacity: 0.7; }
.blog-card-link { color: var(--petrol-deep); font-weight: 500; font-size: var(--fs-14); }
.blog-card:hover .blog-card-link::after { transform: translateX(4px); }
.blog-card-link::after { content: " →"; transition: transform 160ms; display: inline-block; }

/* === Article header / hero (long-form) === */
.article-header { padding-block: var(--s-48) var(--s-32); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-48); }
.article-label, .article-eyebrow {
  font-family: var(--font-marker);
  font-size: 1.25rem;
  color: var(--apricot-deep);
  display: inline-block;
  transform: rotate(-2deg);
  margin-bottom: var(--s-12);
  font-weight: 600;
}
.article-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4vw + 0.5rem, var(--fs-60));
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin-bottom: var(--s-16);
  color: var(--ink);
}
.article-content { max-width: 68ch; margin: 0 auto; padding-block: var(--s-32) var(--s-96); font-size: var(--fs-17); line-height: 1.75; color: var(--ink); }
.article-content > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 4.4em;
  float: left;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 -0.04em;
  color: var(--ink);
}
@media (max-width: 480px) {
  .article-content > p:first-of-type::first-letter { font-size: inherit; float: none; margin: 0; line-height: inherit; }
}

/* Callouts / boxes inside articles */
.callout, .callout-apricot, .callout-green {
  border-left: 4px solid var(--apricot);
  background: var(--apricot-soft);
  padding: var(--s-24) var(--s-32);
  margin-block: var(--s-32);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 65ch;
}
.callout-green { border-left-color: var(--success); background: rgba(47, 143, 90, 0.08); }
.callout-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-20); margin-bottom: var(--s-8); }
.caveat-box {
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--petrol);
  padding: var(--s-24) var(--s-32);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  margin-block: var(--s-32);
  max-width: 65ch;
}
.disclaimer-box {
  border-left: 4px solid var(--apricot);
  background: var(--apricot-soft);
  padding: var(--s-24) var(--s-32);
  margin-top: var(--s-48);
  font-size: var(--fs-14);
  color: var(--ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  max-width: 65ch;
}

/* Annotation script accents */
.annotation, .about-annotation {
  font-family: var(--font-marker);
  color: var(--apricot-deep);
  font-size: 1.25rem;
  display: inline-block;
  transform: rotate(-1deg);
  margin-block: var(--s-12);
}

/* === Single-Depot detail hero (quick-stats) === */
.hero-depot {
  padding-block: var(--s-48) var(--s-32);
  border-bottom: 1px solid var(--rule);
}
.container.narrow { max-width: 880px; margin-inline: auto; padding-inline: var(--gutter); }

.quick-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: var(--s-32);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 1023px) { .quick-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .quick-stats { grid-template-columns: 1fr; } }

.quick-stats .stat {
  padding: var(--s-24) var(--s-16);
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.quick-stats .stat:last-child { border-right: 0; }
@media (max-width: 1023px) {
  .quick-stats .stat:nth-child(2n) { border-right: 0; }
  .quick-stats .stat { border-bottom: 1px solid var(--rule); }
  .quick-stats .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 480px) {
  .quick-stats .stat { border-right: 0; border-bottom: 1px solid var(--rule); }
  .quick-stats .stat:last-child { border-bottom: 0; }
}

.stat-label {
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  margin-bottom: 6px;
  font-weight: 600;
}
.stat-value {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.stat-value .unit {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 4px;
}

/* Embed section (tracker container) */
.embed-section { padding-block: var(--s-48); }
.embed-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-16);
  margin-bottom: var(--s-24);
  padding-bottom: var(--s-16);
  border-bottom: 1px solid var(--rule);
}
.embed-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0;
}
.open-link {
  font-size: var(--fs-14);
  color: var(--petrol-deep);
  text-decoration: underline;
  text-decoration-color: rgba(31, 94, 85, 0.4);
  text-underline-offset: 3px;
}
.open-link:hover { background: var(--petrol-soft); }

/* Link cards */
.link-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-16);
  margin-block: var(--s-32);
}
.link-card {
  display: block;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-24);
  text-decoration: none;
  color: inherit;
  transition: transform 180ms, box-shadow 180ms;
}
.link-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-raised); background: var(--paper-deep); text-decoration: none; }
.link-card-label {
  display: block;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apricot-deep);
  margin-bottom: var(--s-8);
  font-weight: 600;
}

/* Content section (long copy below tracker) */
.content-section { padding-block: var(--s-48); border-top: 1px solid var(--rule); }
.content-section h2 { font-size: var(--fs-32); margin-bottom: var(--s-16); }
.content-section h3 { font-size: var(--fs-24); margin-block: var(--s-32) var(--s-12); }
.content-section p, .content-section li { color: var(--ink); font-size: var(--fs-17); line-height: 1.75; max-width: 68ch; }
.content-section ul, .content-section ol { margin-block: var(--s-16); padding-left: 1.4em; }

/* FAQ item (legacy non-double-underscore variant) */
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding-block: var(--s-24);
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-20);
  color: var(--ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-16);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: var(--fs-24); color: var(--apricot-deep); transition: transform 200ms; }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-answer, .faq-item p { margin-top: var(--s-12); color: var(--ink-2); font-size: var(--fs-17); line-height: 1.7; max-width: 65ch; }

/* === Tracker re-skin — Editorial Finance Paper ===
   Heavy override of tracker.css visual tokens. Tracker.js untouched. */

.tracker { font-family: var(--font-body); }

.tracker h1, .tracker h2, .tracker h3, .tracker h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}

.tracker .tr-eyebrow {
  font-family: var(--font-marker) !important;
  color: var(--apricot-deep) !important;
  transform: rotate(-1deg);
  display: inline-block;
  font-size: 1.15rem !important;
  font-weight: 600;
}

/* Hero card — flat, paper-deep, hairline border */
.tracker .tr-hero {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-32) !important;
  box-shadow: none !important;
}
.tracker .tr-hero-number {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--petrol-deep) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tracker .tr-hero-currency { color: var(--petrol-deep) !important; font-weight: 500 !important; }
.tracker .tr-hero-caption { color: var(--ink-2); font-weight: 400; }
.tracker .tr-hero-sub { border-top: 1px solid var(--rule) !important; color: var(--ink-2); }
.tracker .tr-hero-sub strong { color: var(--ink); font-family: var(--font-display); font-weight: 500; }
.tracker .tr-hero-sub .pill-positive { color: var(--success); }
.tracker .tr-hero-sub .pill-negative { color: var(--danger); }

/* KPI grid — hairline-divided strip, no individual cards */
.tracker .tr-kpis {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  gap: 0 !important;
  margin-bottom: var(--s-32);
}
.tracker .tr-kpi {
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: var(--s-24) var(--s-16) !important;
}
.tracker .tr-kpi:last-child { border-right: 0 !important; }
@media (max-width: 780px) {
  .tracker .tr-kpi { border-right: 0 !important; border-bottom: 1px solid var(--rule) !important; }
  .tracker .tr-kpi:nth-last-child(-n+1) { border-bottom: 0 !important; }
  .tracker .tr-kpi:nth-child(odd) { border-right: 1px solid var(--rule) !important; }
}
.tracker .tr-kpi-label {
  font-size: var(--fs-12) !important;
  letter-spacing: 0.08em;
  color: var(--muted) !important;
  font-weight: 600;
}
.tracker .tr-kpi-value {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--fs-32) !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.tracker .tr-kpi-value .unit { color: var(--ink-2); font-weight: 400; }

/* Portfolio chip cards — flat, color-strip top edge */
.tracker .tr-portfolios { gap: var(--s-16) !important; }
.tracker .tr-pchip {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-left-width: 1px !important;
  border-radius: var(--r-lg) !important;
  padding: var(--s-24) !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible !important;
}
.tracker .tr-pchip::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--chip-accent, var(--petrol));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.tracker .tr-pchip[data-status="live"] { border-left: 1px solid var(--rule) !important; }
.tracker .tr-pchip[data-status="coming-soon"] {
  background: transparent !important;
  border-style: dashed !important;
  opacity: 0.92;
}
.tracker .tr-pchip[data-status="coming-soon"]::before { background: var(--apricot); }
.tracker .tr-pchip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised) !important;
  border-color: var(--rule) !important;
}

/* Tag pills — editorial small radius, uppercase Inter */
.tracker .tr-pchip-tag {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 3px 8px !important;
}
.tracker .tr-pchip-tag[data-tag="live"] {
  background: var(--petrol) !important;
  color: var(--paper) !important;
}
.tracker .tr-pchip-tag[data-tag="coming-soon"] {
  background: var(--apricot-soft) !important;
  color: var(--apricot-deep) !important;
}

.tracker .tr-pchip-name {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: var(--fs-24) !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tracker .tr-pchip-subtitle {
  font-family: var(--font-marker);
  color: var(--apricot-deep);
  font-style: normal !important;
  font-size: 1.1rem !important;
  font-weight: 600;
}
.tracker .tr-pchip-desc { color: var(--ink-2); font-size: var(--fs-15, 0.95rem); }
.tracker .tr-pchip-meta {
  font-size: var(--fs-12) !important;
  color: var(--muted) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500 !important;
  border-top: 1px solid var(--rule) !important;
}
.tracker .tr-pchip-data { padding-top: var(--s-12) !important; padding-bottom: var(--s-4) !important; }
.tracker .tr-pchip-kpi .k {
  font-size: var(--fs-12);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tracker .tr-pchip-kpi .v {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  font-size: var(--fs-20) !important;
  letter-spacing: -0.005em;
}
.tracker .tr-pchip-link {
  color: var(--petrol-deep) !important;
  font-size: var(--fs-14);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-12) !important;
  margin-top: auto;
}
.tracker .tr-pchip[data-status="coming-soon"] .tr-pchip-link { color: var(--muted) !important; }

/* Charts — color tokens */
.tracker .tr-chart {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}
.tracker .tr-chart-title { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; color: var(--ink); }
.tracker .tr-bar-received { background: var(--petrol) !important; }
.tracker .tr-bar-forecast { background: var(--apricot-soft) !important; }
.tracker .tr-chart-legend .sw-received { background: var(--petrol) !important; }
.tracker .tr-chart-legend .sw-forecast { background: var(--apricot) !important; }
.tracker .tr-axis { color: var(--muted); font-size: var(--fs-12); letter-spacing: 0.04em; }
.tracker .tr-bar-tooltip {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body);
}

/* Positions table */
.tracker .tr-positions {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}
.tracker .tr-positions h3 { font-family: var(--font-display); font-weight: 500; }
.tracker .tr-positions table { font-variant-numeric: tabular-nums; }
.tracker .tr-positions th {
  font-family: var(--font-body) !important;
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2) !important;
  border-bottom: 1.5px solid var(--ink) !important;
  font-weight: 600;
}
.tracker .tr-positions td { color: var(--ink); border-bottom: 1px solid var(--rule); }
.tracker .tr-positions .sym { color: var(--petrol-deep); font-family: var(--font-display); }
.tracker .tr-positions .name-cell .isin { color: var(--muted); letter-spacing: 0.04em; }

/* Coming-soon notice */
.tracker .tr-coming, .tr-coming {
  background: var(--paper-deep) !important;
  border: 1px dashed var(--rule) !important;
  border-radius: var(--r-lg) !important;
}
.tracker .tr-coming-label, .tr-coming-label {
  color: var(--apricot-deep) !important;
  font-family: var(--font-marker) !important;
  font-size: 1.15rem !important;
  font-weight: 600;
  transform: rotate(-1deg);
  display: inline-block;
}

/* Goal / projection cards */
.tracker .tr-goal-card {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}
.tracker .tr-goal-name { font-family: var(--font-display) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.tracker .tr-goal-bar { background: var(--rule) !important; }
.tracker .tr-goal-bar-fill, .tracker .tr-goal-fill { background: var(--petrol) !important; }
.tracker .tr-goal-badge {
  background: var(--apricot-soft);
  color: var(--apricot-deep);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.06em;
}

/* Projection toggle (Ausschüttend / Thesaurierend buttons) */
.tracker .tr-proj-toggle {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-md) !important;
  padding: 4px;
}
.tracker .tr-proj-toggle-opt {
  border-radius: var(--r-sm) !important;
  font-family: var(--font-body);
  color: var(--ink-2) !important;
}
.tracker .tr-proj-toggle-opt .label { font-family: var(--font-display) !important; font-weight: 500; color: inherit; }
.tracker .tr-proj-toggle-opt .sub { color: var(--muted); }
.tracker .tr-proj-toggle-opt.active {
  background: var(--petrol) !important;
  color: var(--paper) !important;
  box-shadow: none !important;
}
.tracker .tr-proj-toggle-opt.active .sub { color: rgba(247,243,236,0.85) !important; }
.tracker .tr-proj-toggle-opt:hover:not(.active) { background: rgba(26,24,21,0.04) !important; color: var(--ink) !important; }

/* Live toggle (% / €) */
.tracker .tr-live-toggle, .tr-live-toggle {
  background: var(--paper-deep) !important;
  border: 1px solid var(--rule) !important;
  border-radius: var(--r-md) !important;
}
.tracker .tr-live-toggle button, .tr-live-toggle button {
  background: transparent !important;
  color: var(--ink-2) !important;
  border-radius: var(--r-sm) !important;
}
.tracker .tr-live-toggle button.active, .tr-live-toggle button.active {
  background: var(--petrol) !important;
  color: var(--paper) !important;
}

/* Notice / disclaimer */
.tracker .tr-notice {
  background: var(--apricot-soft) !important;
  border-left: 4px solid var(--apricot) !important;
  border-radius: 0 var(--r-md) var(--r-md) 0 !important;
}
.tracker .tr-notice strong { color: var(--apricot-deep) !important; }

/* Stat cells (depots aktiv / prognose 12m / etc — outside tr-kpis) */
.tracker .tr-stat-value, .tracker .tr-stats-value {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums;
}