/* Flyer: Active Directory Pentest (/de/flyer/active-directory-pentest).
   Kernvisualisierung ist die Rechte-Treppe: fuenf Stufen vom normalen
   Benutzerkonto bis zum Domain Admin, jede Stufe weiter eingerueckt und
   hoeher als die vorige, die letzte in Markenblau als Ziel. Zweitakzent ist
   Violett - es steht nur an der Treppe (Stufenkante, Stufenlabel, Technik-
   Tags), nicht flaechig, und kommt bei keinem anderen Flyer vor.

   Typografie: Fliesstext ab 0.72rem bei Zeilenhoehe 1.45, kleinste Schrift
   (Tags, Stufenlabel) 0.66rem. Passt etwas nicht auf die Seite, wandert
   Inhalt in die Langfassung - die Schrift bleibt, wie sie ist. */

.flyer-page {
  --ad-v: #8a6fe0;
  --ad-v-soft: rgba(138, 111, 224, 0.16);
  --ad-v-border: rgba(138, 111, 224, 0.5);
}
@media print {
  .flyer-page {
    --ad-v: #5f45b8;
    --ad-v-soft: #efeafc;
    --ad-v-border: #c9bced;
  }
}

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

.flyer-trust-markers {
  display: flex; flex-wrap: wrap; gap: 7px 20px;
  margin: 0 0 .9rem; padding: 0; list-style: none;
}
.flyer-trust-markers li {
  display: flex; align-items: center; gap: 7px;
  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); }

/* ---- Rhythmus ---- */
.flyer-section { margin-bottom: .95rem; }
.flyer-h2 { margin-bottom: .5rem; }

/* ---- Kernvisualisierung: Rechte-Treppe ----
   Jede Stufe ist eine Zeile, die um --ad-in weiter eingerueckt startet.
   Die senkrechte Kante links markiert den Aufstieg, die letzte Stufe
   wechselt auf Markenblau: das ist das Ziel, nicht mehr der Weg. */
.ad-path-intro { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .7rem; max-width: 62em; }
.flyer-page[data-version="extended"] .ad-path-intro { font-size: .8rem; margin-bottom: 1rem; }

.ad-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.ad-rung {
  --ad-in: 0px;
  margin-left: var(--ad-in);
  display: grid;
  grid-template-columns: 92px 150px 1fr minmax(150px, auto);
  align-items: baseline;
  gap: 4px 12px;
  padding: .7rem .8rem .7rem .75rem;
  border-left: 3px solid var(--ad-v);
  border-radius: 0 7px 7px 0;
  background: var(--fp-surface);
  break-inside: avoid;
  position: relative;
}
.ad-rung--2 { --ad-in: 16px; }
.ad-rung--3 { --ad-in: 32px; }
.ad-rung--4 { --ad-in: 48px; }
.ad-rung--5 { --ad-in: 64px; background: var(--fp-accent-soft); border-left-color: var(--fp-accent); }

/* Die Stufenkante: kurzer senkrechter Strich vom Ende der vorigen Stufe
   auf die naechste, damit die Treppe als Aufstieg lesbar bleibt. */
.ad-rung + .ad-rung::before {
  content: "";
  position: absolute;
  left: -16px;
  top: -7px;
  bottom: 50%;
  width: 3px;
  background: var(--ad-v);
}
.ad-rung--5::before { background: var(--fp-accent); }

.ad-rung-stage {
  grid-column: 1;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ad-v);
}
.ad-rung--5 .ad-rung-stage { color: var(--fp-accent); }
.ad-rung h3 { grid-column: 2; font-size: .8rem; font-weight: 800; color: var(--fp-text); margin: 0; line-height: 1.3; }
.ad-rung p { grid-column: 3; font-size: .74rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.ad-rung--5 p { color: var(--fp-text); }

.ad-rung-tags { grid-column: 4; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ad-rung-tags span {
  font-size: .66rem;
  font-weight: 700;
  color: var(--ad-v);
  background: var(--ad-v-soft);
  border: 1px solid var(--ad-v-border);
  border-radius: 4px;
  padding: 1px 7px;
}
.ad-rung--5 .ad-rung-tags span { color: var(--fp-accent); background: transparent; border-color: var(--fp-accent-border); }

/* ---- Ablauf + Nutzen ---- */
.ad-two-col { display: grid; grid-template-columns: 1.12fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: .95rem; }
.ad-two-col .flyer-section { margin-bottom: 0; }

.ad-process { display: flex; flex-direction: column; gap: 11px; }
.ad-step { display: flex; gap: 10px; align-items: flex-start; break-inside: avoid; }
.ad-step-num {
  flex-shrink: 0;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--ad-v-soft);
  color: var(--ad-v);
  border: 1px solid var(--ad-v-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800;
  margin-top: 1px;
}
.ad-step h3 { font-size: .79rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.ad-step p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.ad-value { display: flex; flex-direction: column; gap: 11px; }
.ad-value > div { padding-left: 11px; border-left: 2px solid var(--fp-accent); break-inside: avoid; }
.ad-value h3 { font-size: .79rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.ad-value p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- Ergebnis ---- */
.ad-delivery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.ad-delivery li { display: flex; gap: 9px; align-items: flex-start; break-inside: avoid; }
.ad-delivery svg { flex-shrink: 0; width: 15px; height: 15px; margin-top: 2px; color: var(--fp-accent); }
.ad-delivery p { font-size: .74rem; color: var(--fp-text); line-height: 1.45; margin: 0; }

/* ---- Langfassung ---- */
.ad-extra-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: .95rem; }
.flyer-page[data-version="extended"] .ad-extra-grid { gap: 18px; margin-bottom: 1.6rem; }
.flyer-page[data-version="extended"] .ad-callout { padding: 1rem 1.05rem; }
.ad-callout {
  background: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-left: 3px solid var(--ad-v);
  border-radius: 8px;
  padding: .8rem .9rem;
  break-inside: avoid;
}
.ad-callout .flyer-h2 { margin-bottom: .35rem; }
.ad-callout p { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

.ad-limits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ad-limits li { display: flex; gap: 9px; align-items: flex-start; break-inside: avoid; }
.ad-limits svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 3px; color: var(--fp-muted-2); }
.ad-limits p { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

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

/* ---- Abschluss ---- */
.ad-cta {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: .85rem 1.1rem;
}
.ad-cta h2 { font-size: .95rem; margin-bottom: .35rem; }
.ad-cta p { font-size: .76rem; line-height: 1.45; margin-bottom: .55rem; }
.ad-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.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: .8rem; font-weight: 700;
  text-decoration: none !important;
  margin-bottom: 0;
}
.ad-cta .flyer-cta-link { margin-bottom: 0; font-size: .76rem; }
.ad-cta .flyer-cta-contact {
  border-top: none;
  border-left: 1px solid var(--fp-accent-border);
  padding: 0 0 0 1.1rem;
  gap: 7px;
  font-size: .74rem;
}
.ad-cta .flyer-cta-contact a { word-break: break-all; }
.ad-url-label { color: var(--fp-muted-2); }

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

/* ---- Langfassung: mehr Luft, zwei Seiten statt einer ---- */
.flyer-page[data-version="extended"] .ad-rung p,
.flyer-page[data-version="extended"] .ad-step p,
.flyer-page[data-version="extended"] .ad-value p,
.flyer-page[data-version="extended"] .ad-delivery p { font-size: .78rem; line-height: 1.55; }
.flyer-page[data-version="extended"] .ad-ladder { gap: 21px; }
.flyer-page[data-version="extended"] .ad-process,
.flyer-page[data-version="extended"] .ad-value { gap: 20px; }
.flyer-page[data-version="extended"] .ad-delivery { gap: 18px 26px; }
.flyer-page[data-version="extended"] .flyer-section { margin-bottom: 1.6rem; }
.flyer-page[data-version="extended"] .ad-two-col { margin-bottom: 1.6rem; }
.flyer-page[data-version="extended"] .ad-callout p,
.flyer-page[data-version="extended"] .ad-limits p,
.flyer-page[data-version="extended"] .ad-faq-item p { font-size: .78rem; line-height: 1.55; }
.flyer-page[data-version="extended"] .ad-faq { gap: 22px 26px; }
.flyer-page[data-version="extended"] .ad-limits { gap: 17px; }

/* ---- Bildschirm, schmal (Druck ist immer A4) ---- */
@media screen and (max-width: 760px) {
  .ad-rung { margin-left: 0; grid-template-columns: 1fr; gap: 3px; }
  .ad-rung + .ad-rung::before { display: none; }
  .ad-rung h3, .ad-rung p, .ad-rung-tags { grid-column: 1; }
  .ad-two-col { grid-template-columns: 1fr; gap: 1rem; }
  .ad-two-col .flyer-section { margin-bottom: .95rem; }
  .ad-delivery, .ad-extra-grid, .ad-faq, .ad-cta { grid-template-columns: 1fr; }
  .ad-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}
.flyer-page[data-version="extended"] .ad-process { gap: 21px; }
.flyer-page[data-version="extended"] .ad-value { gap: 21px; }