/* Flyer: Finanzsektor — page-specific layout on top of flyer-common.css.
   Visual idea: a 2x2 attack-surface grid (distinct from the DORA flyer's
   fork layout and the Logistik flyer's linear chain), followed by three
   scenario cards that reference back into the grid, then a combined
   modules/process + secondary DORA-crossref/CTA two-column close.
   This page carries more sections than the other flyers (2x2 grid +
   3 scenarios + modules + process + crossref + CTA in one A4 sheet), so
   several shared building-block spacings are tightened here (never their
   colors) to fit the print budget. */

/* Slightly tighter header rhythm — this page has one badge instead of a
   badge row / stats row, so the shared defaults are more generous than
   needed here. */
.flyer-badges { margin-bottom: 1.1rem; }
.flyer-page .flyer-subline { margin-bottom: 1.05rem; }
.flyer-logo { margin-bottom: 14px; }
.flyer-h1 { margin-bottom: 0.45rem; }

.flyer-h2-tight { margin-bottom: 0.65rem; }

/* ── Attack-surface grid (2x2) ──────────────────────────────────────────── */

.flyer-surface-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0.9rem;
}

.flyer-surface-tile {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
}

.flyer-surface-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--fp-accent);
}
.flyer-surface-icon svg { width: 100%; height: 100%; }

.flyer-surface-tile h3 { font-size: 0.85rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.2; }
.flyer-surface-tile p { font-size: 0.72rem; color: var(--fp-muted); line-height: 1.35; margin: 0; }

/* ── Scenario cards ──────────────────────────────────────────────────────── */

.flyer-scenarios-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 0.4rem;
}

.flyer-scenario-card {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
}

.flyer-scenario-tag {
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--fp-accent);
  margin-bottom: 4px;
}

.flyer-scenario-card h3 { font-size: 0.82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 4px; line-height: 1.2; }
.flyer-scenario-card p { font-size: 0.7rem; color: var(--fp-muted); line-height: 1.32; margin: 0; }

.flyer-scenario-disclaimer {
  font-size: 0.68rem;
  font-style: italic;
  color: var(--fp-muted-2);
  /* Note: this <p> is the last child of its <section>, so the site-wide
     `p:last-child { margin-bottom: 0 }` rule (style.css) already wins here
     regardless of margin set below — kept at 0 intentionally, the section
     gap comes from .flyer-main's own top spacing instead. */
  margin: 0;
}

/* ── Combined main area: modules+process (left) / crossref+cta (right) ──── */

.flyer-main-left { display: flex; flex-direction: column; gap: 0.9rem; }

/* Modules and process both render as compact 3-up rows (icon on top, title +
   text below) rather than the default stacked lists, so the combined
   modules+process column stays close in height to the crossref+CTA column
   next to it. */
.flyer-modules-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flyer-modules-grid .flyer-service { flex-direction: column; gap: 7px; }
.flyer-modules-grid .flyer-service-icon { width: 20px; height: 20px; }
.flyer-modules-grid .flyer-service h3 { font-size: 0.8rem; margin-bottom: 3px; line-height: 1.2; }
.flyer-modules-grid .flyer-service p { font-size: 0.68rem; line-height: 1.32; }

.flyer-process-steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.flyer-process-steps-row .flyer-step { flex-direction: column; gap: 7px; }
.flyer-process-steps-row .flyer-step-num { width: 21px; height: 21px; font-size: 0.64rem; margin-bottom: 0; }
.flyer-process-steps-row .flyer-step h3 { font-size: 0.8rem; line-height: 1.2; margin-bottom: 3px; }
.flyer-process-steps-row .flyer-step p { font-size: 0.68rem; line-height: 1.32; }

/* ── DORA cross-reference: deliberately secondary, not another CTA ──────── */

.flyer-side-tight { gap: 0.9rem; }

.flyer-dora-crossref {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--fp-surface);
  border: 1px dashed var(--fp-border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
}

.flyer-dora-crossref-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--fp-muted);
}
.flyer-dora-crossref-icon svg { width: 100%; height: 100%; }

.flyer-dora-crossref h2 {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-muted);
  margin: 0 0 0.3rem;
}

.flyer-dora-crossref p { font-size: 0.7rem; color: var(--fp-muted-2); line-height: 1.35; margin: 0; }

.flyer-cta-box-compact { padding: 0.9rem 1.05rem; }
.flyer-cta-box-compact h2 { font-size: 0.9rem; margin-bottom: 0.4rem; }
.flyer-cta-box-compact p { font-size: 0.74rem; line-height: 1.45; margin-bottom: 0.65rem; }
.flyer-cta-box-compact .flyer-cta-link { font-size: 0.75rem; margin-bottom: 0.7rem; }
.flyer-cta-box-compact .flyer-cta-contact { padding-top: 0.6rem; gap: 4px; font-size: 0.73rem; }

@media (max-width: 700px) {
  .flyer-surface-grid { grid-template-columns: 1fr 1fr; }
  .flyer-scenarios-grid { grid-template-columns: 1fr; }
  .flyer-modules-grid { grid-template-columns: 1fr; }
  .flyer-modules-grid .flyer-service { flex-direction: row; }
  .flyer-process-steps-row { grid-template-columns: 1fr; }
  .flyer-process-steps-row .flyer-step { flex-direction: row; }
}

@media (max-width: 480px) {
  .flyer-surface-grid { grid-template-columns: 1fr; }
}