/* Flyer: Penetrationstest fuer Industrie, Produktion und Maschinenbau
   (/de/flyer/industrie-produktion). Page-specific styles on top of
   flyer-common.css.

   Kernvisualisierung: ein Schnitt durch das Werk. Drei waagerechte Schichten
   von der Buero-IT hinunter bis an die Steuerungen, dazwischen die IT/OT-
   Schnittstelle als gestricheltes Band, und zwei orange markierte Einstiege:
   der USB-Stick ganz oben, die Fernwartung seitlich direkt auf die
   Produktionsebene. Links laeuft die Ausbreitungsspur nach unten. Reines CSS,
   kein Bild, damit es im Druck scharf bleibt.

   Zweitakzent: Orange auf Stahlgrau. Orange markiert ausschliesslich die
   Angreiferseite (Einstiege, Spur, die Schnittstelle als Bruchstelle),
   Stahlgrau traegt die Schichtnamen, Blau bleibt unsere Seite.

   Schriftgroessen: nichts unter 0,64 rem, Fliesstext ab 0,72 rem bei
   Zeilenhoehe 1,45. Passt etwas nicht aufs Blatt, wird Text gekuerzt.
   Klassenpraefix mf- = manufacturing flyer. */

.mf-flyer {
  --mf-attack: #f2870f;
  --mf-attack-soft: rgba(242, 135, 15, 0.14);
  --mf-attack-border: rgba(242, 135, 15, 0.45);
  --mf-steel: rgba(255, 255, 255, 0.07);
  --mf-steel-line: rgba(255, 255, 255, 0.22);
}

@media print {
  .mf-flyer {
    --mf-attack: #cf6d00;
    --mf-attack-soft: #fdf1e0;
    --mf-attack-border: #f0cb99;
    --mf-steel: #eef1f5;
    --mf-steel-line: #c3ccd6;
  }
}

/* ---- Kopf ---- */

.flyer-logo { margin-bottom: 14px; }
.flyer-h1 { font-size: clamp(1.45rem, 2.7vw, 1.9rem); margin-bottom: .45rem; }
.flyer-subline { font-size: .86rem; line-height: 1.55; margin-bottom: .75rem; max-width: 56em; }

.mf-markers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 .9rem; padding: 0; list-style: none; }
.mf-markers li {
  font-size: .72rem;
  font-weight: 700;
  color: var(--fp-accent);
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 20px;
  padding: 4px 12px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.flyer-section { margin-bottom: .9rem; }
.flyer-section .flyer-h2 { margin-bottom: .55rem; }

/* ---- Kennzahl ---- */

.mf-stat {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: .7rem 0;
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: .9rem;
}
.mf-stat-key { flex-shrink: 0; width: 118px; }
.mf-stat-num { display: block; font-size: 1.9rem; font-weight: 800; color: var(--fp-accent); line-height: 1.05; }
.mf-stat-kicker { display: block; font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fp-muted-2); line-height: 1.3; margin-top: 2px; }
.mf-stat-body p { font-size: .76rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.mf-stat-cite { font-size: .66rem !important; color: var(--fp-muted-2) !important; margin-top: 3px !important; }

/* ---- Schnitt durch das Werk ---- */

.mf-intro { font-size: .78rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .7rem; max-width: 62em; }

.mf-stack {
  position: relative;
  padding-left: 22px;
}
/* Ausbreitungsspur: gestrichelte Linie von oben nach unten, Pfeilspitze am
   Fuss der Steuerungsebene. */
.mf-stack::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 26px;
  bottom: 14px;
  border-left: 2px dashed var(--mf-attack);
}
.mf-stack::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: 4px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 9px solid var(--mf-attack);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.mf-colhead {
  display: grid;
  grid-template-columns: 27% 1fr 1fr;
  gap: 0 20px;
  padding: 0 .85rem 5px;
}
.mf-colhead span { font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--fp-muted-2); }
.mf-colhead span:nth-child(2) { color: var(--mf-attack); }
.mf-colhead span:nth-child(3) { color: var(--fp-accent); }

.mf-entry {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .03em;
  color: var(--mf-attack);
  background: var(--mf-attack-soft);
  border: 1px solid var(--mf-attack-border);
  border-radius: 20px;
  padding: 3px 11px;
  margin: 0 0 7px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mf-entry--side { font-size: .66rem; margin: 5px 0 0; padding: 2px 9px; }

.mf-layer {
  display: grid;
  grid-template-columns: 27% 1fr 1fr;
  gap: 4px 20px;
  align-items: start;
  padding: .7rem .85rem;
  background: var(--mf-steel);
  border: 1px solid var(--mf-steel-line);
  border-radius: 6px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mf-layer + .mf-layer { margin-top: 8px; }
.mf-layer--floor { border-color: var(--fp-accent-border); }

.mf-layer-name { }
.mf-layer-name h3 { font-size: .88rem; font-weight: 800; color: var(--fp-text); margin: 0 0 2px; line-height: 1.25; }
.mf-layer-name span { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.4; display: block; }

.mf-layer-attack { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.mf-layer-test { font-size: .73rem; color: var(--fp-text); line-height: 1.45; margin: 0; }

/* Die Schnittstelle ist die Bruchstelle, deshalb als einziges Element
   gestrichelt und orange. */
.mf-boundary {
  margin: 8px 0;
  padding: .7rem .85rem;
  border: 1px dashed var(--mf-attack-border);
  border-radius: 6px;
  background: var(--mf-attack-soft);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mf-boundary h3 { font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mf-attack); margin: 0 0 3px; }
.mf-boundary p { font-size: .73rem; color: var(--fp-text); line-height: 1.45; margin: 0; }

/* Beschriftung der Ausbreitungsspur, nur in der Langfassung - die
   Kompaktfassung braucht den Platz fuers Blatt. */
.mf-spread { font-size: .68rem; font-weight: 700; color: var(--mf-attack); margin: .45rem 0 0; padding-left: 22px; position: relative; }
.mf-spread::before { content: ""; position: absolute; left: 2px; top: 50%; width: 12px; border-top: 2px dashed var(--mf-attack); }

/* ---- Vorgehen ---- */

.mf-safe { border-left: 3px solid var(--fp-accent); padding-left: 14px; }
.mf-safe strong { color: var(--fp-text); font-weight: 800; }
.mf-safe p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.mf-safe p + p { margin-top: .5rem; }

/* ---- Muster-Report (nur Langfassung) ---- */

.mf-report { border: 1px solid var(--fp-border); border-radius: 8px; overflow: hidden; }
.mf-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: .6rem .85rem;
  background: var(--mf-steel);
  border-bottom: 1px solid var(--fp-border);
  font-size: .73rem;
  font-weight: 700;
  color: var(--fp-text);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mf-report-status {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mf-attack);
  border: 1px solid var(--mf-attack-border);
  border-radius: 20px;
  padding: 2px 10px;
}
.mf-report-list { list-style: none; margin: 0; padding: 0; }
.mf-report-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: .4rem .85rem;
  break-inside: avoid;
}
.mf-report-list li + li { border-top: 1px solid var(--fp-border); }
.mf-report-list p { font-size: .73rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.mf-report-list span { flex-shrink: 0; font-size: .68rem; font-weight: 700; color: var(--fp-accent); }
.mf-report-foot { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; padding: .45rem .85rem; border-top: 1px solid var(--fp-border); }
.mf-disclaimer { font-size: .68rem; color: var(--fp-muted-2); margin: .35rem 0 0; }

/* ---- Menschen und Gelaende (nur Langfassung) ---- */

.mf-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mf-person { break-inside: avoid; border-top: 2px solid var(--mf-attack); padding-top: 8px; }
.mf-person--module { border-top-color: var(--fp-accent); }
.mf-person h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.3; }
.mf-person p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- FAQ (nur Langfassung) ---- */

.mf-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; }
.mf-faq-item { break-inside: avoid; }
.mf-faq-item h3 { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.mf-faq-item p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

/* ---- CTA ---- */

.mf-cta { display: grid; grid-template-columns: 1.9fr 1fr; gap: 1.4rem; align-items: center; padding: .9rem 1.1rem; }
.mf-cta h2 { font-size: .98rem; margin-bottom: .4rem; }
.mf-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .55rem; }
.mf-scope-note { font-size: .73rem !important; color: var(--fp-muted-2) !important; line-height: 1.45; margin-bottom: .6rem !important; }
.mf-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mf-cta .flyer-cta-link { margin-bottom: 0; font-size: .79rem; }
.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: .83rem; font-weight: 700;
  text-decoration: none !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mf-cta .flyer-cta-contact { border-top: none; border-left: 1px solid var(--fp-accent-border); padding: 2px 0 2px 1.3rem; gap: 7px; font-size: .75rem; }
.mf-url-label { color: var(--fp-muted); }

.flyer-footer-legal { margin-top: .5rem; padding-top: .4rem; }

@media screen and (max-width: 700px) {
  .mf-layer { grid-template-columns: 1fr; }
  .mf-layer-name { grid-row: auto; }
  .mf-layer-attack, .mf-layer-test, .mf-entry--side { grid-column: auto; }
  .mf-colhead { display: none; }
  .mf-people { grid-template-columns: 1fr 1fr; }
  .mf-faq { grid-template-columns: 1fr; }
  .mf-cta { grid-template-columns: 1fr; }
  .mf-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .8rem 0 0; }
  .mf-report-list li { flex-direction: column; gap: 3px; }
}