/* Flyer: Social Engineering. Page-specific styles on top of flyer-common.css.

   Core visual is a measurement chain: five columns left to right, each with a
   shrinking gauge bar on top (Zugestellt, Geoeffnet, Geklickt, Eingegeben,
   Gemeldet). The last column is the second accent and points upward, because
   it is the only rate that should grow. The bar widths are schematic and say
   so in the caption - there are no measured rates on this sheet.

   Second accent: amber. Used for the report stage, the on-site channel card
   and the fairness box, nowhere else. Class prefix sf- = social flyer.

   Type scale (deliberate floor, the sheet is printed and read at arm's
   length): body copy 0.72rem at line-height 1.45, labels and chips never
   below 0.66rem. Nothing here is allowed to shrink to make content fit - if
   something does not fit, it comes off the sheet. */

.flyer-page {
  --sf-a2: #f0a93b;
  --sf-a2-soft: rgba(240, 169, 59, 0.14);
  --sf-a2-border: rgba(240, 169, 59, 0.42);
}

@media print {
  .flyer-page {
    --sf-a2: #a8670a;
    --sf-a2-soft: #fdf2df;
    --sf-a2-border: #edd3a4;
  }
}

.flyer-logo { margin-bottom: 14px; }
.flyer-h1 { font-size: clamp(1.55rem, 2.9vw, 2rem); margin-bottom: .4rem; }
.flyer-subline { font-size: .88rem; line-height: 1.5; margin-bottom: .7rem; max-width: 40em; }

.flyer-trust-markers {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0; padding: 0; list-style: none;
}
.flyer-trust-markers li { display: flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 600; color: var(--fp-muted); }
.flyer-trust-markers svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--fp-accent); }

.flyer-section { margin-bottom: .9rem; }
.flyer-section .flyer-h2 { margin-bottom: .55rem; }

/* ---- Head with the three sourced figures on the right ---- */
.sf-head { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.5rem; align-items: start; }

.sf-stats {
  display: flex; flex-direction: column; gap: 9px;
  padding-left: 1.2rem;
  border-left: 1px solid var(--fp-border);
}
.sf-stat { display: flex; align-items: baseline; gap: 9px; }
.sf-stat-num { flex-shrink: 0; font-size: 1.15rem; font-weight: 800; color: var(--fp-accent); min-width: 2.7em; }
.sf-stat-label { font-size: .72rem; color: var(--fp-muted); line-height: 1.4; }
.sf-stat-source { font-size: .66rem; color: var(--fp-muted-2); line-height: 1.45; margin: 3px 0 0; }

/* ---- Core visual: measurement chain ---- */
.sf-chain-section { padding-top: .8rem; margin-top: .3rem; border-top: 1px solid var(--fp-border); }
.sf-chain-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sf-chain-hint { font-size: .68rem; color: var(--fp-muted-2); margin-bottom: .55rem; }

.sf-chain {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px;
  margin: 0; padding: 0; list-style: none;
  break-inside: avoid;
}

.sf-stage {
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: .7rem .75rem;
  background: var(--fp-surface);
}

.sf-gauge {
  display: block; height: 7px; width: 100%;
  border-radius: 4px;
  background: var(--fp-border);
  overflow: hidden;
  margin-bottom: 8px;
}
.sf-gauge-fill {
  display: block; height: 100%;
  background: var(--fp-accent);
  border-radius: 4px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Schematic widths, deliberately not tied to any figure. */
.sf-stage--1 .sf-gauge-fill { width: 100%; }
.sf-stage--2 .sf-gauge-fill { width: 74%; }
.sf-stage--3 .sf-gauge-fill { width: 46%; }
.sf-stage--4 .sf-gauge-fill { width: 24%; }

.sf-stage-label { display: flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 800; color: var(--fp-text); line-height: 1.25; margin-bottom: 4px; }
.sf-stage p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; hyphens: auto; }

.sf-stage--goal { border-color: var(--sf-a2-border); background: var(--sf-a2-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sf-stage--goal .sf-gauge-fill { width: 38%; background: var(--sf-a2); }
.sf-stage--goal .sf-stage-label { color: var(--sf-a2); }
.sf-stage--goal .sf-stage-label svg { width: 12px; height: 12px; flex-shrink: 0; }

.sf-chain-note { font-size: .72rem; color: var(--fp-muted); line-height: 1.5; margin: 9px 0 0; }

/* ---- Four channels ---- */
.sf-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; break-inside: avoid; }
.sf-channel { border: 1px solid var(--fp-border); border-radius: 8px; padding: .7rem .75rem; background: var(--fp-surface); }
.sf-channel-tag { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fp-accent); margin-bottom: 3px; }
.sf-channel h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.25; }
.sf-channel p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; hyphens: auto; }

.sf-channel--onsite { border-color: var(--sf-a2-border); }
.sf-channel--onsite .sf-channel-tag { color: var(--sf-a2); }

.sf-personas { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.sf-personas-label { font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--fp-muted-2); flex-shrink: 0; }
.sf-personas ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.sf-personas li {
  font-size: .7rem; font-weight: 600; color: var(--fp-text);
  border: 1px solid var(--fp-border); border-radius: 20px;
  padding: 2px 10px; line-height: 1.45;
}

/* ---- Fairness box + report list ---- */
.sf-two-col { display: grid; grid-template-columns: 1fr 1.05fr; gap: 1.5rem; align-items: start; break-inside: avoid; }
.sf-two-col .flyer-section { margin-bottom: 0; }

.sf-fair {
  background: var(--sf-a2-soft);
  border-left: 3px solid var(--sf-a2);
  border-radius: 0 8px 8px 0;
  padding: .7rem .9rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sf-fair .flyer-h2 { color: var(--sf-a2); margin-bottom: .45rem; }
.sf-fair ul { margin: 0; padding: 0 0 0 1.05em; display: flex; flex-direction: column; gap: 6px; }
.sf-fair li { font-size: .72rem; color: var(--fp-text); line-height: 1.45; }
.sf-fair li::marker { color: var(--sf-a2); }

.sf-proof-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-proof-list li { display: flex; gap: 9px; align-items: flex-start; }
.sf-proof-list svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--fp-accent); }
.sf-proof-list p { font-size: .74rem; color: var(--fp-text); line-height: 1.45; margin: 0; }

.sf-scope-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: 9px 0 0; }

/* ---- Extended-only blocks ---- */
.sf-process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 0; padding: 0; list-style: none; }
.sf-process li { break-inside: avoid; border-top: 2px solid var(--fp-accent-border); padding-top: 7px; }
.sf-process-num { display: block; font-size: .66rem; font-weight: 800; color: var(--fp-accent); letter-spacing: .06em; margin-bottom: 2px; }
.sf-process h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.25; }
.sf-process p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; hyphens: auto; }

.sf-extra-grid { gap: 1.4rem; margin-bottom: .9rem; grid-template-columns: 1.2fr 1fr; }
.flyer-page[data-version="extended"] .sf-extra-grid { display: grid; }
.sf-extra-grid .flyer-section { margin-bottom: 0; }

.sf-boxed { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 8px; padding: .8rem .9rem; break-inside: avoid; }
.sf-prose { font-size: .76rem; color: var(--fp-muted); line-height: 1.55; margin: 0; }

.sf-why-grid { grid-template-columns: 1.1fr 1fr; gap: 1.5rem; margin-bottom: .9rem; align-items: start; }
.flyer-page[data-version="extended"] .sf-why-grid { display: grid; }
.sf-why-grid .flyer-section { margin-bottom: 0; }

.sf-why { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.sf-why-item { break-inside: avoid; }
.sf-why-item h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.25; }
.sf-why-item p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.sf-mail {
  border: 1px solid var(--fp-border); border-radius: 8px;
  padding: .75rem .9rem; background: var(--fp-surface);
  break-inside: avoid;
}
.sf-mail-tag {
  display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--sf-a2); border: 1px solid var(--sf-a2-border); border-radius: 20px;
  padding: 1px 9px; margin-bottom: 7px;
}
.sf-mail-row { display: flex; gap: 8px; margin-bottom: 5px; }
.sf-mail-key { flex: 0 0 4.2em; font-size: .7rem; font-weight: 700; color: var(--fp-muted-2); }
.sf-mail-val { font-size: .72rem; color: var(--fp-text); line-height: 1.45; }
.sf-mail-btn {
  display: inline-block; margin-top: 3px;
  background: var(--fp-accent); color: var(--fp-on-accent);
  border-radius: 5px; padding: 5px 12px; font-size: .72rem; font-weight: 700;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sf-mail-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: 8px 0 0; }

.sf-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.sf-faq-item { break-inside: avoid; }
.sf-faq-item h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 4px; line-height: 1.3; }
.sf-faq-item p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ---- CTA ---- */
.sf-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.3rem; align-items: center; padding: .8rem 1.1rem; }
.sf-cta h2 { font-size: .95rem; margin-bottom: .3rem; }
.sf-cta p { font-size: .76rem; line-height: 1.45; margin-bottom: .6rem; }
.sf-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sf-cta .flyer-cta-link { margin-bottom: 0; }
.flyer-cta-button {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--fp-accent); color: var(--fp-on-accent) !important;
  border-radius: 6px; padding: 9px 18px; font-size: .82rem; font-weight: 700;
  text-decoration: none !important;
}
.sf-cta .flyer-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 2px 0 2px 1.2rem; gap: 6px; font-size: .74rem; }
.sf-url-label { color: var(--fp-muted); }

.flyer-footer-legal { margin-top: .8rem; padding-top: .5rem; }

@media screen and (max-width: 900px) {
  .sf-head { grid-template-columns: 1fr; }
  .sf-stats { border-left: none; border-top: 1px solid var(--fp-border); padding: .9rem 0 0; }
  .sf-chain { grid-template-columns: repeat(3, 1fr); }
  .sf-channels { grid-template-columns: 1fr 1fr; }
  .sf-process { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 700px) {
  .sf-chain { grid-template-columns: 1fr 1fr; }
  .sf-two-col, .sf-faq, .sf-cta, .sf-why { grid-template-columns: 1fr; }
  .flyer-page[data-version="extended"] .sf-extra-grid,
  .flyer-page[data-version="extended"] .sf-why-grid { grid-template-columns: 1fr; }
  .sf-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}

@media screen and (max-width: 480px) {
  .sf-chain, .sf-channels, .sf-process { grid-template-columns: 1fr; }
}