/* Flyer: Red Teaming (/de/flyer/red-teaming). Kernvisualisierung ist die
   Angriffskette als senkrechte Zeitleiste: links die Phase, in der Mitte was
   das Red Team getan hat, rechts was das SOC davon gesehen hat. Zweitakzent
   Terracotta (wie die Red-Teaming-Kachel im Mega-Menue) nur fuer die
   Angriffsspalte und die Urteile "nicht erkannt"; alles andere bleibt
   Navy/Weiss/Markenblau. Farben ueber die --fp-*-Tokens aus flyer-common.css,
   damit Screen dunkel und Druck hell automatisch stimmen.

   Typografie: Fliesstext 0.72rem aufwaerts bei Zeilenhoehe 1.4, kleinste
   Schrift (Badges, Spaltenkoepfe) 0.64rem. Passt etwas nicht auf die Seite,
   wird Inhalt in die Langfassung verschoben, nicht die Schrift verkleinert. */

.frt {
  --frt-rt: #d0714e;
  --frt-rt-soft: rgba(208, 113, 78, 0.16);
  --frt-rt-border: rgba(208, 113, 78, 0.45);
}
@media print {
  .frt {
    --frt-rt: #b55a37;
    --frt-rt-soft: #fbeee8;
    --frt-rt-border: #e6c3b3;
  }
}

/* ---- Kopf ---- */
.frt .flyer-logo { margin-bottom: 12px; }
.frt .flyer-h1 { font-size: clamp(1.4rem, 2.6vw, 1.65rem); letter-spacing: 0; margin-bottom: .4rem; max-width: 30em; }
.frt .flyer-subline { font-size: .84rem; line-height: 1.5; max-width: none; margin-bottom: .7rem; }

.frt-markers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.frt-markers li {
  font-size: .7rem;
  font-weight: 700;
  color: var(--fp-accent);
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 20px;
  padding: 5px 12px;
}

/* ---- Rhythmus ---- */
.frt-section { margin-bottom: .95rem; }
.frt .flyer-h2 { margin-bottom: .5rem; }
.frt-lead { font-size: .76rem; color: var(--fp-muted); line-height: 1.45; margin: 0 0 .6rem; max-width: 60em; }
.frt-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: .55rem 0 0; }

/* ---- Kernvisualisierung: senkrechte Angriffskette ----
   Drei Spalten (Phase / Red Team / Euer SOC), eine Zeile je Phase.
   .frt-phase ist nur Gruppierung im Markup (display: contents), die Zeile
   bekommt jedes Kind per nth-child fest zugewiesen - so bleiben die drei
   Spalten ueber alle sechs Phasen buendig. */
.frt-chain {
  display: grid;
  grid-template-columns: 150px 1fr 1.05fr;
  gap: 8px 14px;
  break-inside: avoid;
}
.frt-chain-rowlabel {
  grid-row: 1;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  align-self: end;
}
.frt-chain-rowlabel-attack { grid-column: 2; color: var(--frt-rt); }
.frt-chain-rowlabel-soc { grid-column: 3; color: var(--fp-accent); }

.frt-phase { display: contents; }
.frt-phase-head { grid-column: 1; }
.frt-phase-attack { grid-column: 2; }
.frt-phase-soc { grid-column: 3; }
.frt-phase:nth-child(3) > * { grid-row: 2; }
.frt-phase:nth-child(4) > * { grid-row: 3; }
.frt-phase:nth-child(5) > * { grid-row: 4; }
.frt-phase:nth-child(6) > * { grid-row: 5; }
.frt-phase:nth-child(7) > * { grid-row: 6; }
.frt-phase:nth-child(8) > * { grid-row: 7; }

.frt-phase-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  min-width: 0;
  padding-top: 1px;
}
/* Senkrechte Verbindung zwischen den Phasen-Nummern */
.frt-phase-head::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 22px;
  bottom: -14px;
  width: 1px;
  background: var(--frt-rt-border);
}
.frt-phase-target .frt-phase-head::after { display: none; }
.frt-phase-num {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--frt-rt);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.frt-phase-num-target { background: var(--fp-accent); }
.frt-phase-num-target svg { width: 13px; height: 13px; }
.frt-phase-name {
  font-size: .74rem;
  font-weight: 800;
  color: var(--fp-text);
  line-height: 1.35;
  position: relative;
  z-index: 1;
  background: var(--fp-bg);
}

.frt-phase-attack {
  background: var(--frt-rt-soft);
  border: 1px solid var(--frt-rt-border);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: .72rem;
  line-height: 1.4;
  color: var(--fp-text);
}
.frt-phase-soc { padding-top: 4px; }
.frt-phase-soc p { font-size: .72rem; line-height: 1.4; color: var(--fp-muted); margin: 0; display: inline; }

.frt-verdict {
  display: inline-block;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.35;
  margin-right: 6px;
  vertical-align: 1px;
}
.frt-v-neutral { color: var(--fp-muted); background: var(--fp-surface); border: 1px solid var(--fp-border); }
.frt-v-partial { color: var(--fp-accent); background: var(--fp-accent-soft); border: 1px solid var(--fp-accent-border); }
.frt-v-missed { color: #fff; background: var(--frt-rt); border: 1px solid var(--frt-rt); }
@media print {
  .frt-v-neutral { background: #f2f5f9; }
}

.frt-metrics-line {
  font-size: .74rem;
  line-height: 1.45;
  color: var(--fp-muted);
  margin: .7rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid var(--fp-border);
}
.frt-metrics-line strong { color: var(--fp-text); }

/* .frt-metrics setzt display:grid und wuerde sonst das display:none aus
   flyer-common.css ueberschreiben (gleiche Spezifitaet, spaeter geladen). */
.frt-metrics.flyer-extra { display: none; }
.flyer-page[data-version="extended"] .frt-metrics.flyer-extra { display: grid; }

.frt-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: .7rem;
  padding-top: .6rem;
  border-top: 1px solid var(--fp-border);
  font-size: .72rem;
  line-height: 1.4;
  color: var(--fp-muted);
}
.frt-metrics strong { color: var(--fp-text); }

/* ---- Ablauf + Dauer ---- */
.frt-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: frt;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px 22px;
}
.frt-steps li {
  counter-increment: frt;
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 0 9px;
  font-size: .74rem;
  line-height: 1.4;
}
.frt-steps li::before {
  content: counter(frt);
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--fp-accent-soft);
  color: var(--fp-accent);
  border: 1px solid var(--fp-accent-border);
  font-size: .66rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / span 2;
  align-self: start;
}
.frt-steps li strong { color: var(--fp-text); font-weight: 700; }
.frt-steps li span { color: var(--fp-muted); grid-column: 2; }

.frt-duration {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: .75rem;
  padding-top: .6rem;
  border-top: 1px solid var(--fp-border);
}
.frt-duration-value { font-size: 1.15rem; font-weight: 800; color: var(--fp-accent); white-space: nowrap; }
.frt-duration-label { font-size: .74rem; color: var(--fp-muted); line-height: 1.4; }

/* ---- Vergleich (Langfassung) ---- */
.frt-compare { width: 100%; border-collapse: collapse; font-size: .74rem; line-height: 1.4; }
.frt-compare th, .frt-compare td { padding: 6px 9px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--fp-border); }
.frt-compare thead th { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--fp-muted-2); padding-top: 0; }
.frt-compare tbody th { font-weight: 700; color: var(--fp-text); width: 26%; }
.frt-compare td { color: var(--fp-muted); }
.frt-compare td.frt-compare-rt { color: var(--fp-text); font-weight: 600; }
.frt-compare thead th.frt-compare-rt { color: var(--frt-rt); }
.frt-compare .frt-compare-rt { background: var(--frt-rt-soft); }
.frt-compare tr:last-child th, .frt-compare tr:last-child td { border-bottom: none; }

/* ---- Bericht ---- */
.frt-report {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
}
.frt-report li {
  position: relative;
  padding-left: 18px;
  font-size: .74rem;
  line-height: 1.4;
  color: var(--fp-text);
}
.frt-report li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--fp-accent);
}

/* ---- Langfassung ---- */
.frt-extra { margin-bottom: 1.1rem; }
.frt-extra .flyer-h2 { margin-bottom: .6rem; }
.frt-kicker { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--frt-rt); margin-bottom: 4px; }

.frt-formats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.frt-format { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 8px; padding: .75rem .85rem; break-inside: avoid; }
.frt-format h3 { font-size: .82rem; font-weight: 800; color: var(--fp-text); margin: 0 0 4px; }
.frt-format p { font-size: .74rem; line-height: 1.45; color: var(--fp-muted); margin: 0; }
.frt-format-for { margin-top: 5px !important; color: var(--fp-text) !important; font-weight: 600; }

.frt-roe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 18px; }
.frt-roe div { break-inside: avoid; }
.frt-roe h3 { font-size: .78rem; font-weight: 800; color: var(--fp-text); margin: 0 0 3px; }
.frt-roe p { font-size: .72rem; line-height: 1.45; color: var(--fp-muted); margin: 0; }

.frt-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.frt-faq div { break-inside: avoid; }
.frt-faq h3 { font-size: .78rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; }
.frt-faq p { font-size: .74rem; line-height: 1.45; color: var(--fp-muted); margin: 0; }

/* ---- Abschluss ---- */
.frt-reassurance { text-align: center; font-size: .74rem; color: var(--fp-muted); line-height: 1.45; max-width: 60em; margin: 0 auto .8rem; }

.frt-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: .85rem 1.1rem;
}
.frt-cta h2 { font-size: .95rem; margin-bottom: .35rem; }
.frt-cta p { font-size: .76rem; line-height: 1.45; margin-bottom: .65rem; }
.frt-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: .8rem;
  font-weight: 700;
  text-decoration: none !important;
}
.frt-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 0 0 0 1.1rem; font-size: .74rem; gap: 7px; }
.frt-cta-contact a { word-break: break-all; }

.frt .flyer-footer-legal { margin-top: .9rem; padding-top: .6rem; font-size: .68rem; }

@media screen and (max-width: 760px) {
  .frt-chain { grid-template-columns: 1fr; gap: 4px; }
  .frt-chain-rowlabel { display: none; }
  .frt-phase { display: block; margin-bottom: 14px; }
  .frt-phase-head, .frt-phase-attack, .frt-phase-soc { grid-row: auto; grid-column: auto; }
  .frt-phase-head { margin-bottom: 5px; }
  .frt-phase-head::after { display: none; }
  .frt-metrics { grid-template-columns: 1fr; }
  .frt-steps { grid-template-columns: 1fr; }
  .frt-report { grid-template-columns: 1fr; }
  .frt-formats, .frt-faq { grid-template-columns: 1fr; }
  .frt-roe { grid-template-columns: 1fr 1fr; }
  .frt-cta { grid-template-columns: 1fr; }
  .frt-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}
@media screen and (max-width: 480px) {
  .frt-roe { grid-template-columns: 1fr; }
}