/* Zweitakzent Gruen: markiert ausschliesslich die Stelle, an der die
   Angriffskette abbricht (Knoten 2 und die Meldung darueber). Alles andere
   bleibt Markenblau beziehungsweise Tinte. */
.flyer-page {
  --ft-g: #45c98a;
  --ft-g-soft: rgba(69, 201, 138, 0.18);
}
@media print {
  .flyer-page {
    --ft-g: #1f7a4d;
    --ft-g-soft: #e2f4ea;
  }
}

/* Flyer: Schulungen, Vortraege & Live-Hacking. Page-specific styles on top of
   flyer-common.css. Kernvisualisierung ist die Angriffskette (CSS, fuenf
   Glieder), die nach dem zweiten Glied bricht: der geschulte Mitarbeiter
   meldet, die restlichen Glieder sind gestrichelt und ausgeblendet. Darunter
   fuenf Format-Karten (Live-Hacking als Leitkarte), die Ausloeser fuer den
   Zuschnitt und drei Zusagen. Alle Farben ueber var(--fp-*). Kompaktfassung
   auf eine A4-Seite getrimmt, .flyer-extra nur in der Langfassung. */

/* ---- Kopf ---- */
.flyer-logo { margin-bottom: 12px; }
.ft-kicker {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-accent);
  margin: 0 0 .35rem;
}
.flyer-h1 {
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  margin-bottom: .4rem;
  max-width: 30em;
}
.flyer-subline { font-size: .88rem; margin-bottom: .55rem; line-height: 1.45; }

.flyer-trust-markers {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: 0 0 .7rem; 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: 13px; height: 13px; color: var(--fp-accent); }

/* ---- Angriffskette ---- */
.ft-chain-wrap {
  padding: .55rem 0 .6rem;
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: .65rem;
  break-inside: avoid;
}
.ft-chain-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: .2rem; }
.ft-chain-head .flyer-h2 { margin: 0; }
.ft-chain-sub { font-size: .74rem; color: var(--fp-muted); margin: 0; }

.ft-chain { position: relative; padding-top: 34px; padding-bottom: 26px; }

.ft-chain-nodes {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}
.ft-node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
}
/* connector: from this node's centre to the next node's centre */
.ft-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--fp-text);
  z-index: 0;
}
.ft-node-idx {
  position: relative; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--fp-text); color: var(--fp-bg);
  display: flex; align-items: center; justify-content: center;
  font-size: .74rem; font-weight: 800;
}
.ft-node-lbl { font-size: .74rem; font-weight: 700; color: var(--fp-text); line-height: 1.2; }

/* node 2: the trained employee stops here */
.ft-node-stop .ft-node-idx {
  background: var(--ft-g);
  color: #fff;
  box-shadow: 0 0 0 4px var(--ft-g-soft);
}
.ft-node-stop .ft-node-lbl { color: var(--ft-g); }
.ft-node-stop::after {
  background: none;
  border-top: 2px dashed var(--fp-muted-2);
  height: 0;
}
/* nodes 3-5 never happen */
.ft-node-dead .ft-node-idx {
  background: var(--fp-bg);
  color: var(--fp-muted-2);
  border: 2px dashed var(--fp-muted-2);
}
.ft-node-dead .ft-node-lbl { color: var(--fp-muted-2); text-decoration: line-through; text-decoration-color: var(--fp-muted-2); }
.ft-node-dead::after { background: none; border-top: 2px dashed var(--fp-muted-2); height: 0; }

/* report badge above node 2 (node centre = 30% of the row width) */
.ft-chain-report {
  position: absolute;
  top: 0;
  left: 30%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  z-index: 2;
}
.ft-chain-report-badge {
  white-space: nowrap;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em;
  color: #fff;
  background: var(--ft-g);
  border-radius: 5px;
  padding: 4px 10px;
}
.ft-chain-report-stem { width: 2px; height: 12px; background: var(--ft-g); }

/* "Kette unterbrochen" spanning the dead part (nodes 3-5 = 40% .. 100%) */
.ft-chain-stopped {
  position: absolute;
  left: 50%; right: 4%;
  bottom: 0;
  border-top: 1px solid var(--fp-muted-2);
  text-align: center;
  padding-top: 3px;
}
.ft-chain-stopped span {
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-muted-2);
}
.ft-chain-caption { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: .35rem 0 0; max-width: 60em; }

/* ---- Formate ---- */
.flyer-section { margin-bottom: .95rem; }
.flyer-section .flyer-h2 { margin-bottom: .45rem; }
.ft-section-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: .45rem; }
.ft-section-head .flyer-h2 { margin: 0; }
.ft-section-intro { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .55rem; }
.ft-section-head .ft-section-intro { margin: 0; }

.ft-formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  break-inside: avoid;
}
.ft-format {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: .75rem .85rem;
  break-inside: avoid;
}
.ft-format-lead {
  background: var(--fp-accent-soft);
  border-color: var(--fp-accent-border);
}
.ft-format-tag {
  display: block;
  font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fp-accent);
  margin-bottom: 5px;
}
.ft-format h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 5px; line-height: 1.3; }
.ft-format p { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0; overflow-wrap: break-word; }
.ft-format-lead p { color: var(--fp-text); }

/* ---- Zuschnitt + Zusagen ---- */
.ft-row2 {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.4rem;
  align-items: start;
  margin-bottom: .95rem;
  break-inside: avoid;
}
.ft-row2 .flyer-section { margin: 0; }

.ft-trigger-list {
  list-style: none; margin: 0 0 .4rem; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
}
.ft-trigger-list li {
  position: relative;
  font-size: .74rem; font-weight: 600; color: var(--fp-text); line-height: 1.45;
  padding: 7px 10px 7px 24px;
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  background: var(--fp-surface);
}
.ft-trigger-list li::before {
  content: "";
  position: absolute; left: 9px; top: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fp-accent);
}
.ft-trigger-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: 0; }

.ft-promise-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ft-promise-list li { padding-left: 10px; border-left: 2px solid var(--fp-accent); }
.ft-promise-list h3 { font-size: .78rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; }
.ft-promise-list p { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- Ablauf ---- */
.ft-process-wrap { margin-bottom: .95rem; }
.ft-process {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  break-inside: avoid;
}
.ft-process::before {
  content: "";
  position: absolute; top: 12px; left: 12.5%; right: 12.5%;
  height: 1px; background: var(--fp-border);
}
.ft-process-step { text-align: center; }
.ft-process-num {
  position: relative;
  width: 24px; height: 24px; margin: 0 auto 6px;
  border-radius: 50%;
  background: var(--fp-bg);
  border: 1px solid var(--fp-accent-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--fp-accent);
  font-size: .68rem; font-weight: 800;
}
.ft-process-num::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--fp-accent-soft);
}
.ft-process-step h3 { font-size: .78rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.25; }
.ft-process-step p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- Langfassung ---- */
.ft-extra { margin-bottom: 1.05rem; }
.ft-extra .flyer-h2 { margin-bottom: .5rem; }

.ft-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; break-inside: avoid; }
.ft-demo {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: .75rem .85rem;
  break-inside: avoid;
}
.ft-demo h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 5px; line-height: 1.3; }
.ft-demo p { font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0 0 5px; }
.ft-demo .ft-demo-learn { color: var(--fp-text); margin: 0; padding-top: 4px; border-top: 1px solid var(--fp-border); }

.ft-duty { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
.ft-duty dt { font-size: .74rem; font-weight: 800; color: var(--fp-accent); white-space: nowrap; }
.ft-duty dd { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

.ft-place-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ft-place-list li {
  position: relative; padding-left: 16px;
  font-size: .76rem; color: var(--fp-text); line-height: 1.4;
}
.ft-place-list li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--fp-accent);
}

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

/* ---- CTA ---- */
.ft-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.4rem;
  align-items: center;
  padding: .85rem 1.05rem;
}
.ft-cta h2 { font-size: .95rem; margin-bottom: .3rem; }
.ft-cta p { font-size: .76rem; margin-bottom: .55rem; }
.ft-cta-buttons { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: .5rem; }
.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: 8px 18px;
  font-size: .82rem; font-weight: 700;
  text-decoration: none !important;
}
.ft-cta-secondary.flyer-cta-link { margin: 0; font-size: .78rem; }
.ft-url-line { font-size: .72rem; color: var(--fp-muted); margin: 0 0 2px; }
.ft-url-line span { font-weight: 700; }
.ft-url-line a { color: var(--fp-accent) !important; text-decoration: none !important; font-weight: 700; }
.ft-print-only { display: none; }
.ft-cta .flyer-cta-contact {
  border-top: none;
  border-left: 1px solid var(--fp-accent-border);
  padding: .2rem 0 .2rem 1.2rem;
  gap: 6px;
  min-width: 15em;
}

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

@media print {
  .ft-print-only { display: block; }
  .ft-extra { break-inside: avoid; }
}

@media (max-width: 700px) {
  .ft-formats { grid-template-columns: 1fr 1fr; }
  .ft-format-lead { grid-column: 1 / -1; }
  .ft-row2, .ft-demos, .ft-faq, .ft-cta { grid-template-columns: 1fr; }
  .ft-trigger-list { grid-template-columns: 1fr; }
  .ft-process { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .ft-process::before { display: none; }
  .ft-node-lbl { font-size: .64rem; }
  .ft-chain-report-badge { font-size: .6rem; padding: 3px 7px; }
  .ft-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
  .ft-duty { grid-template-columns: 1fr; gap: 2px; }
  .ft-duty dd { margin-bottom: 6px; }
}

@media (max-width: 480px) {
  .ft-formats { grid-template-columns: 1fr; }
  .ft-demos { grid-template-columns: 1fr; }
}

/* Langfassung: die beiden laengeren Formate stehen als eigener Abschnitt
   darunter, zwei gleich breite Karten. */
.ft-formats-pair { grid-template-columns: repeat(2, 1fr); }

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

/* Langfassung: zwei Seiten, also mehr Luft. Ohne das endete Seite 1 bei
   71 Prozent, weil der naechste Block als Ganzes nicht mehr hineinpasste. */
.flyer-page[data-version="extended"] .ft-section-intro { font-size: .8rem; line-height: 1.55; }
.flyer-page[data-version="extended"] .ft-chain-caption { font-size: .78rem; }
.flyer-page[data-version="extended"] .flyer-section { margin-bottom: 1.4rem; }
.flyer-page[data-version="extended"] .ft-row2 { margin-bottom: 1.4rem; }
.flyer-page[data-version="extended"] .ft-promise-list { gap: 15px; }
.flyer-page[data-version="extended"] .ft-promise-list p { font-size: .78rem; line-height: 1.55; }
.flyer-page[data-version="extended"] .ft-duty dd { font-size: .8rem; }
.flyer-page[data-version="extended"] .ft-process-step p { font-size: .76rem; line-height: 1.5; }

/* In der Langfassung stehen die beiden Zweispalter untereinander statt
   nebeneinander: als ein Block waren sie zu hoch fuer den Rest der Seite
   und sprangen komplett um, was Seite 1 bei 77 Prozent enden liess. */
.flyer-page[data-version="extended"] .ft-row2,
.flyer-page[data-version="extended"] .ft-row2.flyer-extra { display: block; }
.flyer-page[data-version="extended"] .ft-row2 > .flyer-section { margin-bottom: 1.4rem; }
.flyer-page[data-version="extended"] .ft-row2 > .flyer-section:last-child { margin-bottom: 0; }
.flyer-page[data-version="extended"] .ft-promise-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.flyer-page[data-version="extended"] .ft-duty { grid-template-columns: auto 1fr; }
.flyer-page[data-version="extended"] .ft-place-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }

/* Das Kartenraster darf zwischen zwei Reihen umbrechen, eine einzelne
   Karte nicht. Als ganzer Block sprang es sonst auf die naechste Seite. */
@media print {
  .ft-formats { break-inside: auto; }
  .ft-format { break-inside: avoid; }
}

@media print {
  /* In der Langfassung stehen die beiden Spalten untereinander, also darf
     zwischen ihnen umbrochen werden. Die einzelnen Abschnitte bleiben ganz. */
  .flyer-page[data-version="extended"] .ft-row2 { break-inside: auto; }
  .flyer-page[data-version="extended"] .ft-row2 > .flyer-section { break-inside: avoid; }
}

.flyer-page[data-version="extended"] .ft-duty { gap: 11px 16px; }
.flyer-page[data-version="extended"] .ft-place-list { gap: 12px 20px; }
.flyer-page[data-version="extended"] .ft-place-list li { font-size: .78rem; line-height: 1.5; }
.flyer-page[data-version="extended"] .ft-process { gap: 18px; }