/* Flyer: OT- und ICS-Pentest. Page-specific styles on top of flyer-common.css.
   Kernvisualisierung ist der Zonen-Stapel: vier absteigende Baender von der
   Buero-IT bis zur Feldebene, dazwischen der IT/OT-Uebergang als gestrichelter
   Streifen. Links steht, was in der Zone steht, rechts, was wir dort pruefen.
   Zweitakzent Signalgruen, ausschliesslich fuer den Block ueber die drei
   Arbeitsweisen (passiv, semi-aktiv, Paralleltestumgebung) und dessen
   Betriebsregel, weil genau das der Einwand des Lesers ist. Alles andere ueber
   die --fp-*-Tokens aus flyer-common.css. Klassenpraefix otf-. Kompaktfassung
   ist eine A4-Seite, .flyer-extra laeuft auf Seite 2. */

.flyer-page {
  --ot2: #34c98a;
  --ot2-soft: rgba(21, 154, 91, 0.16);
  --ot2-border: rgba(52, 201, 138, 0.42);
  --ot2-ink: #ffffff;
}

@media print {
  .flyer-page {
    --ot2: #0f7a4c;
    --ot2-soft: #e7f6ee;
    --ot2-border: #b5e0c9;
    --ot2-ink: #0b5836;
  }
}

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

.flyer-logo { margin-bottom: 15px; }
.flyer-h1 { font-size: clamp(1.55rem, 2.9vw, 2rem); margin-bottom: .4rem; }
.flyer-subline { font-size: .9rem; line-height: 1.55; margin-bottom: .6rem; max-width: 50em; }

.flyer-trust-markers {
  display: flex; flex-wrap: wrap; gap: 7px 20px;
  margin: 0 0 1rem; padding: 0; list-style: none;
}
.flyer-trust-markers li { display: flex; align-items: center; gap: 7px; font-size: .78rem; 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: 1rem; }
.flyer-section .flyer-h2 { margin-bottom: .55rem; }

/* ── Core visual: zone stack ─────────────────────────────────────────────── */

.otf-stack-section { padding-top: .7rem; border-top: 1px solid var(--fp-border); }

.otf-stack-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.otf-stack-head .flyer-h2 { margin-bottom: .45rem; }

.otf-colheads { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.otf-colheads span { font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fp-muted-2); }
.otf-colheads span + span::before { content: "·"; margin-right: 7px; }

.otf-stack { display: flex; flex-direction: column; gap: 6px; }

.otf-zone {
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  gap: 0 16px;
  align-items: start;
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--fp-accent);
  border-radius: 0 8px 8px 0;
  background: var(--fp-surface);
  padding: .7rem .85rem;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* The office network sits above the boundary and is deliberately quieter:
   it is where the attack starts, not the system under test. */
.otf-zone--it { border-left-color: var(--fp-muted-2); background: none; }

.otf-zone-tag {
  display: block;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-accent); margin-bottom: 3px;
}
.otf-zone--it .otf-zone-tag { color: var(--fp-muted-2); }

.otf-zone-what p { font-size: .75rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.otf-zone-test { border-left: 1px solid var(--fp-border); padding-left: 16px; }
.otf-zone-test p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.otf-border {
  display: flex; align-items: baseline; gap: 12px;
  border: 1px dashed var(--fp-accent-border);
  border-radius: 7px;
  background: var(--fp-accent-soft);
  padding: .6rem .85rem;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.otf-border-tag {
  flex-shrink: 0;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-accent);
}
.otf-border p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ── The three working modes (second accent) ─────────────────────────────── */

.otf-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.otf-mode {
  background: var(--ot2-soft);
  border: 1px solid var(--ot2-border);
  border-radius: 8px;
  padding: .7rem .85rem .75rem;
  break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.otf-mode h3 { font-size: .84rem; font-weight: 800; color: var(--ot2); margin: 0 0 3px; }
.otf-mode p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
@media print { .otf-mode h3 { color: var(--ot2-ink); } }

.otf-modes-rule {
  font-size: .76rem; color: var(--fp-text); line-height: 1.5;
  margin: 10px 0 0;
  border-left: 3px solid var(--ot2);
  padding: 2px 0 2px 12px;
}

/* ── Proof band ──────────────────────────────────────────────────────────── */

.otf-proof p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.otf-proof-note { margin-top: .4rem !important; font-weight: 600; color: var(--fp-text) !important; }

/* ── Extended-only blocks ────────────────────────────────────────────────── */

.flyer-section.flyer-extra { margin-bottom: 1.15rem; }

.otf-why { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin: 0; padding: 0; list-style: none; }
.otf-why li { break-inside: avoid; }
.otf-why h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; }
.otf-why p { font-size: .75rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.otf-attacks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; }
.otf-attack { break-inside: avoid; border-left: 2px solid var(--ot2-border); padding-left: 12px; }
.otf-attack h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; }
.otf-attack p { font-size: .75rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.otf-regs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px; }
.otf-reg-item { break-inside: avoid; }
.otf-reg-item h3 { font-size: .84rem; font-weight: 700; color: var(--fp-accent); margin: 0 0 2px; }
.otf-reg-item p { font-size: .75rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.otf-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 26px; }
.otf-faq-item { break-inside: avoid; }
.otf-faq-item h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; }
.otf-faq-item p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ── CTA ─────────────────────────────────────────────────────────────────── */

.otf-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.3rem; align-items: center; padding: .85rem 1.1rem; }
.otf-cta h2 { font-size: 1rem; margin-bottom: .35rem; }
.otf-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .65rem; }
.otf-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.otf-cta .flyer-cta-link { margin-bottom: 0; font-size: .78rem; }
.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 19px; font-size: .84rem; font-weight: 700;
  text-decoration: none !important;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.otf-cta .flyer-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 2px 0 2px 1.2rem; gap: 7px; font-size: .77rem; }
.otf-url-label { color: var(--fp-muted); }

.flyer-footer-legal { margin-top: .9rem; padding-top: .55rem; font-size: .7rem; }

/* Screen-only breakpoints. Chrome's A4 print width is ~704px, so every
   breakpoint above that has to be scoped to screen. */
@media screen and (max-width: 860px) {
  .otf-zone { grid-template-columns: 1fr; gap: 7px; }
  .otf-zone-test { border-left: none; border-top: 1px solid var(--fp-border); padding: 7px 0 0; }
  .otf-modes, .otf-regs { grid-template-columns: 1fr; }
  .otf-why, .otf-attacks, .otf-faq, .otf-cta { grid-template-columns: 1fr; }
  .otf-border { display: block; }
  .otf-reg-note { border-left: none; padding-left: 0; }
  .otf-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}