/* Page-specific styles for /de/flyer/logistik-transport — the "Warenfluss als
   Angriffskette" flyer. Builds on flyer-common.css (sheet shell, badges,
   services/process/footer). All colors route through --fp-* tokens from the
   shared file. Spine of the page is a horizontal 4-station chain-flow; every
   other section runs deliberately tight (small type, small gaps) so header +
   chain + 3 scenarios + 3 KPIs + modules/process + CTA band still fit one
   A4 page (this page has more stacked sections than most siblings). */

/* ── Header tightening ──────────────────────────────────────────────────── */

.flyer-page .flyer-subline { max-width: 50em; margin-bottom: .5rem; }

.flyer-section-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fp-muted);
  margin: 0 0 0.45rem;
}

/* ── Chain flow ──────────────────────────────────────────────────────────── */

.flyer-chain-section { margin-bottom: 0.45rem; }

.flyer-chain-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.flyer-chain-card {
  flex: 1 1 0;
  min-width: 0;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 9px;
  padding: 0.3rem 0.48rem;
}

.flyer-chain-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
  border: 1px solid var(--fp-accent-border);
  font-size: 0.66rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.flyer-chain-card h3 { font-size: 0.78rem; font-weight: 800; color: var(--fp-text); margin: 0 0 2px; line-height: 1.2; }
.flyer-chain-sub {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin-bottom: 4px;
}
.flyer-chain-card p { font-size: 0.66rem; color: var(--fp-muted); line-height: 1.28; margin: 0; }

.flyer-chain-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  color: var(--fp-accent);
  align-self: center;
}
.flyer-chain-arrow svg { width: 16px; height: 16px; }

.flyer-chain-note {
  font-size: 0.7rem;
  color: var(--fp-muted-2);
  line-height: 1.35;
  margin: 0.35rem 0 0;
  padding-top: 0.3rem;
  border-top: 1px solid var(--fp-border);
}

/* ── Scenarios ───────────────────────────────────────────────────────────── */

.flyer-scenario-section { margin-bottom: 0.45rem; }

.flyer-scenario-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}

.flyer-scenario {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.flyer-scenario-icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--fp-accent);
  margin-top: 1px;
}
.flyer-scenario-icon svg { width: 100%; height: 100%; }

.flyer-scenario h3 { font-size: 0.75rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.25; }
.flyer-scenario p { font-size: 0.66rem; color: var(--fp-muted); line-height: 1.32; margin: 0; }

/* ── KPI row ─────────────────────────────────────────────────────────────── */

.flyer-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  padding: 0.4rem 0 0.48rem;
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: 0.45rem;
}

.flyer-kpi { text-align: center; padding: 0 0.4rem; }
.flyer-kpi-num { font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; color: var(--fp-accent); line-height: 1.1; }
.flyer-kpi-label { font-size: 0.72rem; color: var(--fp-muted); line-height: 1.4; margin-top: 4px; }
.flyer-kpi-source { font-size: 0.65rem; color: var(--fp-muted-2); margin-top: 3px; }

/* ── Main two-column area: modules + process ────────────────────────────── */

.flyer-page .flyer-main { margin-bottom: 0.45rem; align-items: start; }

.flyer-modules { display: flex; flex-direction: column; gap: 7px; }
.flyer-page .flyer-process { gap: 5px; }
.flyer-page .flyer-step p { line-height: 1.3; }

/* ── CTA band (full width, replaces sidebar cta-box) ────────────────────── */

.flyer-cta-band {
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  text-align: center;
}

.flyer-cta-band h2 { font-size: 0.92rem; font-weight: 800; color: var(--fp-text); margin: 0 0 0.3rem; }
.flyer-cta-band p { font-size: 0.76rem; color: var(--fp-muted); line-height: 1.42; margin: 0 0 0.6rem; }

.flyer-cta-band-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fp-accent);
  color: var(--fp-on-accent) !important;
  text-decoration: none !important;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 9px 20px;
  margin-bottom: 0.6rem;
}

.flyer-cta-band .flyer-cta-contact {
  flex-direction: row;
  justify-content: center;
  gap: 1.8rem;
  border-top: 1px solid var(--fp-accent-border);
  padding-top: 0.5rem;
  max-width: 30em;
  margin: 0 auto;
  font-size: 0.76rem;
}

@media (max-width: 700px) {
  .flyer-chain-row { flex-wrap: wrap; }
  .flyer-chain-card { flex: 1 1 calc(50% - 5px); }
  .flyer-chain-arrow { display: none; }
  .flyer-scenario-row { grid-template-columns: 1fr; }
  .flyer-kpi-row { grid-template-columns: 1fr; gap: 10px; }
  .flyer-cta-band .flyer-cta-contact { flex-direction: column; align-items: center; gap: 4px; }
}