/* Webfonts licensed from MyFonts (Neue Haas Grotesk, Linotype) and Canada Type (Orpheus Pro).
   Subject to the End User License Agreement entered into by the website owner.
   All other parties are explicitly restricted from using these webfonts.
   Declared by hand rather than using the kit's own CSS: MyFonts ships each weight as a
   separate family with no font-weight descriptor, which makes the browser synthesise a
   fake bold on top of an already-bold face. Enabling Family Style Linking did not change
   the emitted CSS. Medium is 500 and Bold is 700 in BOTH families. */

@font-face { font-family: "Neue Haas Grotesk Display"; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskDisplayPro65Medium/font.woff2') format('woff2'),
       url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskDisplayPro65Medium/font.woff') format('woff'); }

@font-face { font-family: "Neue Haas Grotesk Display"; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskDisplayPro75Bold/font.woff2') format('woff2'),
       url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskDisplayPro75Bold/font.woff') format('woff'); }

@font-face { font-family: "Neue Haas Grotesk Text"; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro55Roman/font.woff2') format('woff2'),
       url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro55Roman/font.woff') format('woff'); }

@font-face { font-family: "Neue Haas Grotesk Text"; font-weight: 500; font-style: normal; font-display: swap;
  src: url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro65Medium/font.woff2') format('woff2'),
       url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro65Medium/font.woff') format('woff'); }

@font-face { font-family: "Neue Haas Grotesk Text"; font-weight: 700; font-style: normal; font-display: swap;
  src: url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro75Bold/font.woff2') format('woff2'),
       url('fonts/SignalFontsKitHaas/webFonts/NeueHaasGroteskTextPro75Bold/font.woff') format('woff'); }

@font-face { font-family: "Orpheus Pro"; font-weight: 400; font-style: normal; font-display: swap;
  src: url('fonts/OrpheusPro_Regular_web/OrpheusPro-Regular.woff2') format('woff2'),
       url('fonts/OrpheusPro_Regular_web/OrpheusPro-Regular.woff') format('woff'); }

/* ============================================
   SIGNAL DESIGN SYSTEM: SHARED STYLESHEET
   Tokens, reset, type roles, shared components.
   ============================================ */

:root {
  --magenta: #FF006E;
  --orange: #FF5E00;
  --violet: #6A00FF;
  --graphite: #2B2B2B;
  --graphite-deep: #1A1A1A;
  --white: #FFFFFF;
  --off-white: #F7F7F7;
  --light-grey: #D9D9D9;
  --mid-grey: #999999;
  --page-grey: #E8E8E8;

  --display: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text:    "Neue Haas Grotesk Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:   "Orpheus Pro", Georgia, "Times New Roman", serif;
}

/* ============================================
   RESET
   ============================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; max-width: 100vw; }

body {
  background: var(--white);
  color: var(--graphite);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip, not hidden: `hidden` makes the body a scroll container, which stops
     position: sticky working for its children (the mobile .nav--article bar).
     `clip` clips the same overflow without creating one. */
  overflow-x: clip;
  max-width: 100vw;
}

::selection {
  background: var(--magenta);
  color: var(--white);
}

a { color: inherit; text-decoration: none; }

/* ============================================
   SKIP LINK
   ============================================ */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  font-family: var(--text);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: var(--graphite-deep);
  padding: 12px 24px;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.skip-link:focus-visible {
  top: 16px;
}

/* ============================================
   FOCUS
   ============================================ */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--graphite-deep);
  outline-offset: 2px;
}

.nav a:focus-visible,
.footer a:focus-visible {
  outline-color: var(--white);
}

.conversion-section a:focus-visible,
.conversion-section button:focus-visible {
  outline-color: var(--white);
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  transition: background 0.3s ease;
}

.nav--scrolled {
  background: rgba(26, 26, 26, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav-logo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.nav-logo img {
  display: block;
  height: 56px;
  width: auto;
  transition: height 0.3s ease;
}

.nav--scrolled .nav-logo img {
  height: 32px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  font-family: var(--text);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

.nav-links a:hover {
  color: var(--white);
}

.nav-cta {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 500;
  color: #111111 !important;
  background: var(--magenta);
  padding: 8px 20px;
  letter-spacing: 0.02em;
  border-radius: 0;
  transition: background 0.2s ease;
}

.nav-cta:hover {
  background: #E00060;
}

.nav.nav--scrolled .nav-logo {
  color: var(--white);
}

/* Article nav: light-ground variant */
.nav--article .nav-logo {
  color: var(--graphite);
}

.nav--article .nav-links a {
  color: rgba(43, 43, 43, 0.6);
}

.nav--article .nav-links a:hover {
  color: var(--graphite);
}

.nav--article.nav--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nav--article.nav--scrolled .nav-logo {
  color: var(--graphite);
}

.nav--article.nav--scrolled .nav-links a {
  color: rgba(43, 43, 43, 0.6);
}

.nav--article.nav--scrolled .nav-links a:hover {
  color: var(--graphite);
}

.nav--article .nav-cta {
  color: #111111 !important;
}

.nav--article a:focus-visible {
  outline-color: var(--graphite-deep);
}

/* ============================================
   BUTTONS
   ============================================ */
.btn-primary {
  font-family: var(--text);
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  background: var(--magenta);
  padding: 12px 28px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.2s ease;
}

.btn-primary:hover {
  background: #E00060;
}

.btn-secondary {
  font-family: var(--text);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 11px 24px;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.2s ease;
}

.btn-secondary:hover {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   SIGNAL OBJECT: SMALL (hero card)
   ============================================ */
.so-label {
  font-family: var(--text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 16px;
}

.so-title {
  font-family: var(--text);
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 8px;
}

.so-desc {
  font-family: var(--text);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 20px;
}

.so-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 16px;
}

.so-meta-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.so-meta-label {
  font-family: var(--text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.so-meta-value {
  font-family: var(--text);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  font-variant-numeric: tabular-nums;
}

.so-demo-notice {
  font-family: var(--text);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* ============================================
   SIGNAL OBJECT: FULL
   ============================================ */
.signal-object-full {
  background: var(--graphite-deep);
  padding: 40px 44px;
  max-width: 920px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.sof-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.sof-status {
  font-family: var(--text);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--graphite-deep);
  background: var(--magenta);
  padding: 3px 8px;
  border-radius: 1px;
}

.sof-category {
  font-family: var(--text);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.sof-date {
  font-family: var(--text);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.sof-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 12px;
  max-width: 640px;
  letter-spacing: -0.01em;
}

.sof-summary {
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  max-width: 600px;
  margin-bottom: 28px;
}

.sof-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sof-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sof-field-label {
  font-family: var(--text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.sof-field-value {
  font-family: var(--text);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.sof-field-value--magenta {
  color: var(--magenta);
}

.sof-demo {
  font-family: var(--text);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  letter-spacing: 0.02em;
}

/* ============================================
   CONVERSION
   ============================================ */
.conversion-section {
  background: var(--magenta);
  padding: 64px 48px;
}

.conversion-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.conversion-headline {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.conversion-cta {
  font-family: var(--text);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: var(--graphite-deep);
  padding: 14px 32px;
  border: none;
  border-radius: 0;
  cursor: pointer;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.conversion-cta:hover {
  background: var(--graphite);
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--graphite-deep);
  padding: 40px 48px;
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  gap: 24px;
  list-style: none;
}

.footer-links a {
  font-family: var(--text);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: rgba(255, 255, 255, 0.7);
}

.footer-copy {
  font-family: var(--text);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   RESPONSIVE: SHARED COMPONENTS
   ============================================ */
@media (max-width: 900px) {
  .nav {
    padding: 16px 20px;
  }

  .nav {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  /* Sticky, not fixed: the nav keeps its space in the flow, so no page needs a
     compensating padding-top. White at rest, because sticky already overlaps the
     copy in the first 60px of scroll, before .nav--scrolled lands; once scrolled
     the shared .nav--article.nav--scrolled ground takes over at 95% and blurred,
     the same translucency as desktop. */
  .nav--article {
    position: sticky;
    top: 0;
    background: var(--white);
  }

  .nav-links {
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .signal-object-full {
    padding: 28px;
  }

  .sof-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sof-title {
    font-size: 18px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .sof-fields {
    grid-template-columns: 1fr 1fr;
  }

  .sof-summary {
    max-width: 100%;
  }

  .conversion-section {
    padding: 48px 24px;
  }

  .conversion-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .conversion-headline {
    font-size: 28px;
  }

  .footer {
    padding: 32px 24px;
  }

  .footer-inner {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 16px;
  }
}

/* ============================================
   ARTICLE LAYOUT: ASYMMETRIC
   Rail 220px | gap 64px | column 660px | void
   ============================================ */
.article-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 120px 48px 0;
  display: grid;
  grid-template-columns: 220px 660px;
  gap: 0 64px;
  align-items: start;
}

/* ============================================
   RAIL: sticky metadata
   ============================================ */
.article-rail {
  position: sticky;
  top: 80px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-date {
  font-family: var(--text);
  font-size: 13px;
  color: #666666;
  font-variant-numeric: tabular-nums;
}

.article-tag {
  font-family: var(--text);
  font-size: 12px;
  font-weight: 500;
  color: var(--magenta);
  letter-spacing: 0.01em;
}

.article-reading-time {
  font-family: var(--text);
  font-size: 13px;
  color: #666666;
}

.article-source-count {
  font-family: var(--text);
  font-size: 13px;
  color: #666666;
}

/* ============================================
   READING COLUMN
   ============================================ */
.article-column {
  max-width: 660px;
  min-width: 0;
}

.article-headline {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--graphite);
  margin-bottom: 20px;
}

.article-standfirst {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.6;
  color: var(--graphite);
  margin-bottom: 0;
}

/* ============================================
   ARRIVAL WINDOW: full-bleed dark band
   ============================================ */
.article-arrival-band {
  background: var(--graphite-deep);
  padding: 40px 0;
  margin-top: 48px;
}

.article-arrival-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}

.arrival-meta {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.arrival-title {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--white);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  max-width: 720px;
}

.arrival-fields {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.arrival-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.arrival-field-label {
  font-family: var(--text);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.arrival-field-value {
  font-family: var(--text);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.arrival-field-value--magenta {
  color: var(--magenta);
}

/* ============================================
   INFOGRAPHIC: spans rail + column = 944px
   ============================================ */
.article-infographic {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 48px;
}

.article-infographic-trigger {
  display: block;
  cursor: zoom-in;
  border: none;
  background: none;
  padding: 0;
  width: 944px;
  max-width: 100%;
}

.article-infographic-trigger img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================
   LIGHTBOX
   ============================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(26, 26, 26, 0.95);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.lightbox[aria-hidden="false"] {
  display: block;
  padding: 72px 0 56px;
}

.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 301;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-family: var(--text);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: border-color 0.2s ease;
}

.lightbox-close:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

.lightbox-img {
  width: min(1024px, 100vw);
  max-width: none;
  max-height: none;
  height: auto;
  display: block;
  margin: 0 auto;
  touch-action: pinch-zoom;
}

/* ============================================
   ARTICLE BODY: asymmetric within 1280px
   ============================================ */
.article-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 64px;
  /* Offset to align with reading column: 220px rail + 64px gap */
  padding-left: calc(48px + 220px + 64px);
}

.article-body-inner {
  max-width: 660px;
}

.article-body h2 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--graphite);
  margin-top: 56px;
  margin-bottom: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.article-body h2::after {
  content: ".";
  color: var(--magenta);
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body p {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--graphite);
  margin-bottom: 20px;
}

.article-body ul {
  list-style: none;
  margin-bottom: 20px;
}

.article-body li {
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  color: var(--graphite);
  margin-bottom: 12px;
  padding-left: 20px;
  position: relative;
}

.article-body li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--magenta);
}

.cite {
  font-family: var(--text);
  font-size: 14px;
  color: #666666;
  white-space: nowrap;
}

/* ============================================
   OTHER STORIES
   ============================================ */
.other-stories {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 64px;
  padding-left: calc(48px + 220px + 64px);
}

.other-stories-inner {
  max-width: 660px;
}

.other-stories-heading {
  font-family: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666666;
  margin-bottom: 20px;
  padding-top: 48px;
  border-top: 1px solid var(--page-grey);
}

.other-stories-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.other-stories-list a {
  font-family: var(--text);
  font-size: 17px;
  font-weight: 500;
  color: var(--graphite);
  line-height: 1.35;
  transition: color 0.2s ease;
  display: block;
}

.other-stories-list a:hover {
  color: var(--magenta);
}

.other-stories-tag {
  font-family: var(--text);
  font-size: 12px;
  color: #666666;
  margin-top: 2px;
}

/* ============================================
   ARTICLE RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .article-container {
    display: block;
    padding: 16px 20px 0;
  }

  .article-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 24px;
    padding-top: 0;
  }

  /* Text pages: the section links in the rail are a desktop aid; on mobile they are noise. */
  .article-rail:has(.textpage-rail-link) {
    display: none;
  }

  .article-headline {
    font-size: 28px;
  }

  .article-arrival-band {
    margin-top: 32px;
    padding: 28px 0;
  }

  .article-arrival-inner {
    padding: 0 20px;
  }

  .arrival-fields {
    flex-direction: column;
    gap: 16px;
  }

  .arrival-title {
    font-size: 18px;
  }

  .article-infographic {
    padding: 40px 0;
    max-width: 100%;
  }

  .article-infographic-trigger {
    width: 100%;
  }

  .article-body {
    padding: 0 20px 48px;
    padding-left: 20px;
  }

  .article-body p {
    font-size: 17px;
  }

  .other-stories {
    padding: 0 20px 48px;
    padding-left: 20px;
  }

  .lightbox-img {
    width: 100vw;
    max-width: none;
    max-height: none;
  }
}

/* ============================================
   TEXT PAGE: Methodik, Angebot, Über uns, legal
   ============================================ */
.textpage-rail-link {
  font-family: var(--text);
  font-size: 13px;
  color: #666666;
  text-decoration: none;
}
.textpage-rail-link:hover,
.textpage-rail-link:focus-visible { color: var(--graphite); text-decoration: underline; }
.textpage-marke {
  display: block;
  width: 160px;
  height: auto;
  margin: 72px 0 16px;
}
.article-body .textpage-marke + h2 { margin-top: 0; }
.textpage-gloss {
  font-family: var(--text);
  font-size: 15px;
  color: #666666;
  margin: -6px 0 20px;
}
.article-body a.textpage-weiter {
  color: var(--graphite);
  text-decoration: none;
  border-bottom: 2px solid var(--magenta);
  padding-bottom: 2px;
}
.textpage-foto {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 8px;
}
.textpage-foto img,
.article-body .textpage-bild {
  display: block;
  width: 944px;
  max-width: 100%;
  height: auto;
}
.article-body .textpage-bild { width: 100%; margin: 8px 0 28px; }
.article-body .textpage-portrait { display: block; width: 320px; max-width: 100%; height: auto; margin: 0 0 24px; }
.article-body h3 {
  font-family: var(--text);
  font-size: 18px;
  font-weight: 700;
  color: var(--graphite);
  margin: 36px 0 10px;
  line-height: 1.35;
}
.article-body .textpage-rolle { font-family: var(--text); font-size: 15px; color: #666666; margin: -6px 0 16px; }
.article-body ul.textpage-liste li { margin-bottom: 10px; }
@media (max-width: 900px) {
  .textpage-foto { padding: 32px 0 8px; }
}
.textpage-body { padding-top: 48px; }
.textpage-chart { margin: 32px 0 36px; }
.textpage-chart img { display: block; width: 100%; height: auto; }
.textpage-chart figcaption {
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.5;
  color: var(--graphite);
  margin: 14px 0 6px;
}
.article-body .textpage-chart-fuss {
  font-family: var(--text);
  font-size: 13px;
  line-height: 1.5;
  color: #666666;
  margin: 0;
}

/* Vorlauf row table (/methodik/vorlauf, assets/vorlauf-tabelle.js) */
.vorlauf-filter { margin: 28px 0 12px; font-family: var(--text); font-size: 15px; }
.vorlauf-filter label { margin-right: 8px; color: var(--graphite); }
.vorlauf-filter select {
  font: inherit;
  color: var(--graphite);
  padding: 4px 8px;
  border: 1px solid var(--mid-grey);
  border-radius: 2px;
  background: var(--white);
  max-width: 100%;
}
.vorlauf-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.4;
  color: var(--graphite);
  margin: 12px 0 10px;
}
.vorlauf-tabelle thead th {
  text-align: left;
  font-weight: 700;
  font-size: 13px;
  vertical-align: bottom;
  padding: 0 10px 8px 0;
  border-bottom: 2px solid var(--graphite);
}
.vorlauf-sort {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.vorlauf-sort::after { content: " \2195"; color: #666666; }
th[aria-sort="ascending"] .vorlauf-sort::after { content: " \2191"; color: var(--graphite); }
th[aria-sort="descending"] .vorlauf-sort::after { content: " \2193"; color: var(--graphite); }
.vorlauf-sort:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }
.vorlauf-tabelle td,
.vorlauf-tabelle tbody th {
  text-align: left;
  font-weight: 400;
  vertical-align: top;
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--light-grey);
}
.vorlauf-tabelle tr.vorlauf-gruppe th {
  font-weight: 700;
  font-size: 15px;
  padding: 22px 0 6px;
  border-bottom: 1px solid var(--graphite);
}
.vorlauf-tabelle td { white-space: nowrap; }
.vorlauf-tabelle .vorlauf-abstand { font-weight: 700; }
.vorlauf-tabelle .vorlauf-quelle { white-space: normal; }
.vorlauf-quelle a { display: block; color: var(--graphite); }
.vorlauf-kern {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  color: var(--white);
  background: var(--graphite);
  border-left: 3px solid var(--magenta);
  border-radius: 2px;
  white-space: nowrap;
}
.article-body .vorlauf-note { font-family: var(--text); font-size: 13px; color: #666666; margin: 0 0 24px; }
@media (max-width: 640px) {
  .vorlauf-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vorlauf-tabelle,
  .vorlauf-tabelle tbody,
  .vorlauf-tabelle tr,
  .vorlauf-tabelle th,
  .vorlauf-tabelle td { display: block; width: auto; }
  .vorlauf-tabelle tbody[hidden] { display: none; }
  .vorlauf-tabelle tr { padding: 10px 0; border-bottom: 1px solid var(--light-grey); }
  .vorlauf-tabelle tr.vorlauf-gruppe { padding: 0; border-bottom: 0; }
  .vorlauf-tabelle td,
  .vorlauf-tabelle tbody th { border-bottom: 0; padding: 1px 0; white-space: normal; }
  .vorlauf-tabelle tbody th { font-weight: 700; padding-bottom: 4px; }
  .vorlauf-tabelle td::before { content: attr(data-label) ": "; color: #666666; font-weight: 400; }
  .vorlauf-quelle a { display: inline; margin-right: 10px; }
}

/* ============================================
   MOBILE NAVIGATION (assets/nav.js)
   75vw panel from the right on graphite-deep, dimmed backdrop.
   Only active when nav.js has run (html.js-mnav); otherwise the wrapped nav stays.
   ============================================ */
:root {
  --mnav-ready: 1;
}

.mnav-toggle,
.mnav-backdrop,
.mnav {
  display: none;
}

@media (max-width: 900px) {
  .js-mnav .nav-links,
  .js-mnav header.nav .in > a:not(.logo) {
    display: none;
  }

  .js-mnav .nav,
  .js-mnav header.nav .in {
    flex-wrap: nowrap;
  }

  .js-mnav header.nav .logo {
    flex-basis: auto;
  }

  .mnav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }

  .nav--article .mnav-toggle {
    color: var(--graphite);
  }

  .mnav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
  }

  .mnav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
  }

  .mnav {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    width: 75vw;
    padding: 20px 24px 32px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--graphite-deep);
    color: var(--white);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.24s ease, visibility 0s linear 0.24s;
  }

  .mnav-open .mnav-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.24s ease, visibility 0s;
  }

  .mnav-open .mnav {
    transform: none;
    visibility: visible;
    transition: transform 0.24s ease, visibility 0s;
  }

  html.mnav-open,
  html.mnav-open body {
    overflow: hidden;
  }

  .mnav-close {
    position: relative;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 -10px 24px auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--white);
    cursor: pointer;
  }

  .mnav-close span {
    position: absolute;
    top: 21px;
    left: 11px;
    width: 22px;
    height: 2px;
    background: currentColor;
  }

  .mnav-close span:first-child { transform: rotate(45deg); }
  .mnav-close span:last-child  { transform: rotate(-45deg); }

  .mnav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .mnav a {
    display: block;
    padding: 12px 0;
    font-family: var(--text);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--white);
    text-decoration: none;
  }

  .mnav a[aria-current] {
    font-weight: 500;
  }

  .mnav a[aria-current]::after {
    content: ".";
    color: var(--magenta);
  }

  .mnav a:hover {
    text-decoration: underline;
  }

  .mnav a:focus-visible,
  .mnav button:focus-visible,
  header.nav .mnav-toggle:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 2px;
  }

  .nav--article .mnav-toggle:focus-visible {
    outline: 2px solid var(--graphite-deep);
    outline-offset: 2px;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .mnav,
  .mnav-backdrop,
  .mnav-open .mnav,
  .mnav-open .mnav-backdrop {
    transition: none;
  }
}