/* Flyer: NISG 2026 Oesterreich (/de/flyer/nisg-2026). Seitenspezifische
   Regeln auf flyer-common.css.

   Kernvisualisierung ist die Normtreppe: drei Stufen vom allgemeinen
   Gesetzesauftrag (§ 32) ueber die Verordnung (NISV 2026 mit dem Anhang der
   DVO 2024/2690) bis zur Gesetzesbegruendung, die den Penetrationstest
   ausdruecklich nennt. Jede Stufe rueckt eine Spaltenbreite nach rechts ein,
   die rechte Spalte "Was der Test liefert" bleibt dabei buendig - so wird
   die Treppe zur Tabelle, ohne die Ordnung zu verlieren. Die unterste Stufe
   ist die konkreteste und traegt den Zweitakzent.

   Zweitakzent Rot (rot-weiss-rot, sparsam): Landeskennung, die dritte
   Stufe, der Zeitpunkt "jetzt" und die direkt geprueften Massnahmen im
   Katalog. Blau bleibt Pruefung, Nachweis und CTA. Klassenpraefix ng-.
   Kompaktfassung eine A4-Seite, .flyer-extra-Bloecke laufen auf Seite zwei. */

.flyer-page {
  --ng: #ee5a66;
  --ng-soft: rgba(238, 90, 102, 0.1);
  --ng-border: rgba(238, 90, 102, 0.45);
  --ng-ink: #ff8a93;
}

@media print {
  .flyer-page {
    --ng: #c0172c;
    --ng-soft: #fcecee;
    --ng-border: #eebcc3;
    --ng-ink: #a8142a;
  }
}

/* ── Kopf ────────────────────────────────────────────────────────────────── */

.flyer-logo { margin-bottom: 12px; }
@media screen { .flyer-logo-screen { display: block; } }

/* Landeskennung als kleine Flagge aus drei Streifen vor dem Text. */
.ng-country {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ng-ink);
  margin-bottom: .5rem;
}
.ng-country::before {
  content: ""; width: 18px; height: 12px; border-radius: 2px;
  background: linear-gradient(var(--ng) 0 33.4%, #ffffff 33.4% 66.6%, var(--ng) 66.6% 100%);
  box-shadow: 0 0 0 1px var(--fp-border);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

.flyer-h1 { font-size: clamp(1.45rem, 2.7vw, 1.8rem); margin-bottom: .4rem; max-width: 30em; }
.flyer-subline { font-size: .86rem; line-height: 1.55; margin-bottom: .65rem; max-width: 54em; }

.ng-markers {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin: 0 0 .9rem; padding: 0; list-style: none;
}
.ng-markers li {
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  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: .68rem; }
.flyer-section .flyer-h2 { margin-bottom: .5rem; }

.ng-intro { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .65rem; max-width: 64em; }

/* ── Kernvisualisierung: Normtreppe ─────────────────────────────────────── */

.ng-stairs-section { padding-top: .75rem; border-top: 1px solid var(--fp-border); }

.ng-stairs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }

.ng-step {
  --indent: 0%;
  display: grid;
  grid-template-columns: var(--indent) 1fr 27%;
  gap: 0 12px;
  break-inside: avoid;
}
.ng-step--2 { --indent: 6%; }
.ng-step--3 { --indent: 12%; }

.ng-step-norm {
  grid-column: 2;
  border: 1px solid var(--fp-border);
  border-top: 3px solid var(--fp-muted-2);
  border-radius: 0 0 8px 8px;
  padding: .5rem .75rem .55rem;
  background: var(--fp-surface);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ng-step--2 .ng-step-norm { border-top-color: var(--fp-accent); }
.ng-step--3 .ng-step-norm { border-top-color: var(--ng); background: var(--ng-soft); border-color: var(--ng-border); }

.ng-step-src {
  display: block;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fp-muted-2); margin-bottom: 2px;
}
.ng-step--3 .ng-step-src { color: var(--ng-ink); }
.ng-step h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.ng-step-norm p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.ng-step--3 .ng-step-norm p { color: var(--fp-text); }

.ng-step-test {
  grid-column: 3;
  align-self: center;
  font-size: .72rem; color: var(--fp-text); line-height: 1.45;
  border-left: 2px solid var(--fp-accent-border);
  padding: 2px 0 2px 10px;
}
.ng-step-test span {
  display: block;
  font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--fp-accent); margin-bottom: 2px;
}

.ng-iso {
  font-size: .76rem; font-weight: 700; color: var(--fp-text); line-height: 1.45;
  margin: .65rem 0 0; padding: 2px 0 2px 12px;
  border-left: 3px solid var(--ng);
}

/* ── Zeitachse ───────────────────────────────────────────────────────────── */

.ng-time {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin: 0; padding: 0; list-style: none;
}
.ng-time li { border-top: 2px solid var(--fp-border); padding-top: .4rem; break-inside: avoid; }
.ng-time li.is-now { border-top-color: var(--ng); }
.ng-time-when { display: block; font-size: .78rem; font-weight: 800; color: var(--fp-text); margin-bottom: 2px; }
.ng-time li.is-now .ng-time-when { color: var(--ng-ink); }
.ng-time-what { display: block; font-size: .71rem; color: var(--fp-muted); line-height: 1.42; }

/* ── Strafen, Leitung, Beleg ─────────────────────────────────────────────── */

.ng-duty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: .6rem; }
.ng-duty > div { border: 1px solid var(--fp-border); border-radius: 8px; padding: .6rem .75rem; break-inside: avoid; }
.ng-duty > div:last-child { border-color: var(--fp-accent-border); background: var(--fp-accent-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ng-duty-label {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--fp-muted); margin-bottom: 3px;
}
.ng-duty > div:last-child .ng-duty-label { color: var(--fp-accent); }
.ng-duty p { font-size: .72rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.ng-scope { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ── Langfassung ─────────────────────────────────────────────────────────── */

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

.ng-who { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: .55rem; }
.ng-who-col { border: 1px solid var(--fp-border); border-radius: 8px; padding: .6rem .8rem; break-inside: avoid; }
.ng-who-col--ess { border-color: var(--ng-border); }
.ng-who-col h3 { font-size: .8rem; font-weight: 800; color: var(--fp-text); margin: 0 0 .35rem; }
.ng-who-col--ess h3 { color: var(--ng-ink); }
.ng-who-col ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ng-who-col li { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; padding-left: 11px; position: relative; }
.ng-who-col li::before { content: ""; position: absolute; left: 0; top: .5em; width: 4px; height: 4px; border-radius: 50%; background: var(--fp-muted-2); }
.ng-who-note { font-size: .74rem; color: var(--fp-text); line-height: 1.5; margin: 0; }

.ng-catalog {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  margin: 0 0 .5rem; padding: 0; list-style: none;
}
.ng-catalog li {
  display: flex; align-items: baseline; gap: 9px;
  font-size: .73rem; color: var(--fp-muted); line-height: 1.4;
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  padding: .35rem .6rem;
  break-inside: avoid;
}
.ng-lit { flex-shrink: 0; font-size: .74rem; font-weight: 800; color: var(--fp-muted-2); width: 10px; }
.ng-catalog li.is-direct { color: var(--fp-text); font-weight: 600; border-color: var(--ng-border); background: var(--ng-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ng-catalog li.is-direct .ng-lit { color: var(--ng-ink); }
.ng-catalog li.is-partial { color: var(--fp-text); border-style: dashed; border-color: var(--ng); }
.ng-catalog li.is-partial .ng-lit { color: var(--ng-ink); }
.ng-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .68rem; color: var(--fp-muted); margin: 0; }
.ng-key { display: inline-block; width: 12px; height: 9px; border-radius: 2px; border: 1px solid var(--ng-border); margin-left: 8px; }
.ng-key:first-child { margin-left: 0; }
.ng-key--direct { background: var(--ng-soft); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.ng-key--partial { border-style: dashed; border-color: var(--ng); }

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

.ng-report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: .55rem; }
.ng-report > div { display: flex; gap: 10px; align-items: baseline; break-inside: avoid; }
.ng-report-time { flex-shrink: 0; font-size: 1rem; font-weight: 800; color: var(--fp-text); min-width: 3.6em; }
.ng-report p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }
.ng-report-note {
  font-size: .75rem; color: var(--fp-text); line-height: 1.5; margin: 0;
  border-left: 3px solid var(--fp-accent); padding: 2px 0 2px 12px;
}

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

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

.ng-cta { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.3rem; align-items: center; padding: .75rem 1.05rem; }
.ng-cta h2 { font-size: 1rem; margin-bottom: .35rem; }
.ng-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .55rem; }
.ng-cta-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ng-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;
}
.ng-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; }
.ng-cta .flyer-cta-contact a { white-space: nowrap; }
.ng-url-label { color: var(--fp-muted); }

.flyer-footer-legal { margin-top: .75rem; padding-top: .5rem; font-size: .7rem; }

/* Bildschirm-Breakpoints. Chromes A4-Druckbreite liegt bei rund 704 px,
   deshalb ist alles darueber auf screen gescopt. */
@media screen and (max-width: 900px) {
  .ng-time { grid-template-columns: 1fr 1fr; }
  .ng-duty, .ng-scen, .ng-report { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 620px) {
  .ng-step, .ng-step--2, .ng-step--3 { grid-template-columns: 1fr; }
  .ng-step-norm, .ng-step-test { grid-column: 1; }
  .ng-step-test { margin-top: 6px; }
  .ng-time, .ng-duty, .ng-scen, .ng-report, .ng-who, .ng-catalog, .ng-faq, .ng-cta { grid-template-columns: 1fr; }
  .ng-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .7rem 0 0; }
}