/* Flyer: AI- und LLM-Pentest. Page-specific styles on top of flyer-common.css.
   Kernvisualisierung ist der Weg EINER Eingabe durch das System: fuenf Stufen
   untereinander (Eingabe, System-Prompt, RAG-Kontext, Tool-Aufruf, Ausgabe),
   je Stufe links was dort passiert und rechts die Angriffsklasse, die genau
   dort ansetzt. Bewusst als Schiene von oben nach unten und nicht als fuenf
   schmale Spalten: in einer 130px-Spalte braeuchte der Text sechs Zeilen und
   muesste unter 0,7 rem gesetzt werden. Zweitakzent Violett, nur fuer die
   Angriffsspalte und den AI-Act-Kasten. Alles andere ueber die --fp-*-Tokens
   aus flyer-common.css. Klassenpraefix aif-. Kompaktfassung ist eine A4-Seite,
   .flyer-extra laeuft auf Seite 2. */

.flyer-page {
  --ai2: #a78bfa;
  --ai2-soft: rgba(139, 92, 246, 0.15);
  --ai2-border: rgba(167, 139, 250, 0.42);
  --ai2-ink: #ffffff;
}

@media print {
  .flyer-page {
    --ai2: #6d28d9;
    --ai2-soft: #f4eefd;
    --ai2-border: #cdb6f3;
    --ai2-ink: #5b21b6;
  }
}

/* ── 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: the path of one input, top to bottom ───────────────────── */

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

.aif-colheads {
  display: grid;
  grid-template-columns: 0.82fr 1.06fr 1.3fr;
  gap: 0 10px;
  padding: 0 .1rem .3rem;
}
.aif-colheads span { font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-muted-2); }
.aif-colheads .aif-ch-attack { color: var(--ai2); }
@media print { .aif-colheads .aif-ch-attack { color: var(--ai2-ink); } }

.aif-path { display: flex; flex-direction: column; gap: 6px; break-inside: avoid; }

.aif-row {
  display: grid;
  grid-template-columns: 0.82fr 1.06fr 1.3fr;
  align-items: stretch;
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  overflow: hidden;
  break-inside: avoid;
}

.aif-stage {
  display: flex; align-items: flex-start; gap: 8px;
  padding: .7rem .8rem;
  background: var(--fp-accent-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.aif-num {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--fp-accent); color: var(--fp-on-accent);
  font-size: .66rem; font-weight: 800;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.aif-stage h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0; line-height: 1.3; }

.aif-does { padding: .7rem .8rem; }
.aif-does p { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.aif-attack {
  padding: .7rem .8rem;
  background: var(--ai2-soft);
  border-left: 2px solid var(--ai2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.aif-attack h4 { font-size: .76rem; font-weight: 800; color: var(--ai2); margin: 0 0 2px; line-height: 1.3; }
.aif-attack p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
@media print { .aif-attack h4 { color: var(--ai2-ink); } }

.aif-modules-note { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: .6rem 0 0; }

/* ── Three modules ───────────────────────────────────────────────────────── */

.aif-modules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; break-inside: avoid; }

.aif-module {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-top: 2px solid var(--fp-accent);
  border-radius: 0 0 8px 8px;
  padding: .7rem .8rem .75rem;
  break-inside: avoid;
}
.aif-module h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.aif-module-tag { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .03em; color: var(--fp-accent); margin-bottom: 5px; }
.aif-module p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ── Report list + AI Act aside ──────────────────────────────────────────── */

.aif-two-col { display: grid; grid-template-columns: 1.02fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1rem; break-inside: avoid; }
.aif-two-col .flyer-section { margin-bottom: 0; }

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

.aif-aiact {
  background: var(--ai2-soft);
  border-left: 3px solid var(--ai2);
  border-radius: 0 8px 8px 0;
  padding: .75rem .9rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.aif-aiact .flyer-h2 { margin-bottom: .4rem; color: var(--ai2); }
@media print { .aif-aiact .flyer-h2 { color: var(--ai2-ink); } }
.aif-aiact p { font-size: .73rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.aif-aiact-note { margin-top: .5rem !important; font-weight: 600; color: var(--fp-text) !important; }

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

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

.aif-owasp { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin: 0; padding: 0 0 0 1.5em; }
.aif-owasp li { break-inside: avoid; }
.aif-owasp li::marker { color: var(--fp-accent); font-weight: 800; font-size: .84rem; }
.aif-owasp h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 1px; }
.aif-owasp p { font-size: .75rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.aif-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 26px; margin: 0; padding: 0 0 0 1.5em; }
.aif-process li { break-inside: avoid; }
.aif-process li::marker { color: var(--ai2); font-weight: 800; font-size: .84rem; }
@media print { .aif-process li::marker { color: var(--ai2-ink); } }
.aif-process h3 { font-size: .84rem; font-weight: 700; color: var(--fp-text); margin: 0 0 1px; }
.aif-process p { font-size: .75rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

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

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

.aif-cta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.3rem; align-items: center; padding: .85rem 1.1rem; }
.aif-cta h2 { font-size: 1rem; margin-bottom: .35rem; }
.aif-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .65rem; }
.aif-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.aif-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;
}
.aif-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; }
.aif-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 anything
   above that must be scoped to screen or it fires mid-print. */
@media screen and (max-width: 860px) {
  .aif-colheads { display: none; }
  .aif-row { grid-template-columns: 1fr; }
  .aif-attack { border-left: none; border-top: 2px solid var(--ai2); }
  .aif-modules { grid-template-columns: 1fr; }
  .aif-two-col, .aif-owasp, .aif-process, .aif-faq, .aif-cta { grid-template-columns: 1fr; }
  .aif-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}