/* Flyer: Penetrationstest fuer Kliniken (/de/flyer/gesundheitswesen).
   Page-specific styles on top of flyer-common.css.

   Kernvisualisierung: ein schematischer Klinik-Grundriss. Zwei Raeume
   nebeneinander (Empfang, Station), darunter der Flur als schraffiertes Band
   mit der Angreiferspur, ganz unten der Serverraum als Ziel. Alles aus
   CSS-Boxen gebaut, kein Bild, damit es im Druck scharf bleibt.

   Zweitakzent: Korallrot. Es markiert ausschliesslich die Angreiferseite
   (Wegmarke, Eingang, Schrittzahlen, Spalte "Was ein Angreifer vorfindet").
   Blau bleibt unsere Seite: Pruefung, Ueberschriften, CTA.

   Schriftgroessen: nichts unter 0,64 rem, Fliesstext ab 0,72 rem bei
   Zeilenhoehe 1,45. Passt etwas nicht aufs Blatt, wird Text gekuerzt, nicht
   die Schrift kleiner gesetzt. Klassenpraefix hc- = healthcare flyer. */

.hc-flyer {
  --hc-attack: #e4572e;
  --hc-attack-soft: rgba(228, 87, 46, 0.13);
  --hc-attack-border: rgba(228, 87, 46, 0.4);
  --hc-wall: rgba(255, 255, 255, 0.24);
}

@media print {
  .hc-flyer {
    --hc-attack: #c8431d;
    --hc-attack-soft: #fdeee8;
    --hc-attack-border: #f0c3b2;
    --hc-wall: #9aa6b4;
  }
}

/* ---- 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: .7rem; max-width: 54em; }

.hc-markers { display: flex; flex-wrap: wrap; gap: 7px 22px; margin: 0 0 1rem; padding: 0; list-style: none; }
.hc-markers li { display: flex; align-items: center; gap: 7px; font-size: .75rem; font-weight: 600; color: var(--fp-muted); }
.hc-markers svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--fp-accent); }

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

/* ---- Eckdatenleiste ---- */

.hc-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 20px;
  padding: .7rem 0;
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  margin-bottom: 1rem;
}
.hc-fact { border-left: 2px solid var(--fp-accent-border); padding-left: 12px; }
.hc-fact-value { display: block; font-size: 1.1rem; font-weight: 800; color: var(--fp-text); line-height: 1.3; }
.hc-fact-label { display: block; font-size: .74rem; font-weight: 600; color: var(--fp-muted); line-height: 1.4; }
.hc-fact-note { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.45; margin: 5px 0 0; }

/* ---- Grundriss ---- */

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

.hc-building {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 11px;
  border: 2px solid var(--hc-wall);
  border-radius: 9px;
  break-inside: avoid;
}

.hc-room {
  position: relative;
  border: 1px solid var(--fp-border);
  border-radius: 6px;
  background: var(--fp-surface);
  padding: .8rem .85rem;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.hc-room--corridor,
.hc-room--target { grid-column: 1 / -1; }

/* Flur: schraffiertes Band, es traegt die Angreiferspur. */
.hc-room--corridor {
  background:
    repeating-linear-gradient(135deg,
      var(--hc-attack-soft) 0 3px,
      transparent 3px 9px),
    var(--fp-surface);
  border-style: dashed;
  border-color: var(--hc-attack-border);
}

.hc-room--target { border-color: var(--fp-accent-border); background: var(--fp-accent-soft); }

/* Eingang: Tuerspalt in der linken Wand des Empfangs. */
.hc-entry {
  position: absolute;
  left: -12px;
  top: 18px;
  width: 10px;
  height: 22px;
  border: 2px solid var(--hc-attack);
  border-right: none;
  border-radius: 3px 0 0 3px;
}
.hc-entry-label,
.hc-path-label {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hc-attack);
}
.hc-entry-label { position: absolute; top: .6rem; left: .8rem; }
.hc-path-label { margin-left: auto; }

.hc-room--1 .hc-room-head { margin-top: 1.05rem; }

/* Der Flur ist in der Kompaktfassung nur das, was er ist: ein schmales Band
   zwischen den Raeumen. Seine beiden Textspalten erscheinen erst in der
   Langfassung. */
.hc-room--corridor .hc-room-head { margin-bottom: 0; }
.flyer-page[data-version="extended"] .hc-room--corridor .hc-room-head { margin-bottom: 8px; }
.flyer-page[data-version="extended"] .hc-room-body--wide.flyer-extra { display: grid; }

.hc-room-head { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; margin-bottom: 8px; }
.hc-room-head h3 { font-size: .9rem; font-weight: 800; color: var(--fp-text); margin: 0; line-height: 1.25; }
.hc-room-short { font-size: .72rem; color: var(--fp-muted-2); line-height: 1.35; }

.hc-step {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--hc-attack);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 800;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.hc-room-body { display: grid; gap: 9px; }
.hc-room-body--wide { grid-template-columns: 1fr 1fr; gap: 9px 22px; }

.hc-facet { border-left: 2px solid var(--fp-border); padding-left: 10px; }
.hc-facet--attack { border-left-color: var(--hc-attack); }
.hc-facet--test { border-left-color: var(--fp-accent); }
/* Statt acht wiederholter Spaltenbeschriftungen im Plan steht die Zuordnung
   einmal als Legende unter der Ueberschrift. Die Farbe der linken Kante
   uebernimmt danach die Zuordnung. */
.hc-legend { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 .7rem; padding: 0; list-style: none; }
.hc-legend li { display: flex; align-items: center; font-size: .72rem; font-weight: 700; color: var(--fp-muted); }
.hc-legend li::before { content: ""; width: 14px; height: 3px; border-radius: 2px; margin-right: 8px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.hc-legend--attack::before { background: var(--hc-attack); }
.hc-legend--test::before { background: var(--fp-accent); }
.hc-facet p { font-size: .73rem; color: var(--fp-text); line-height: 1.45; margin: 0; }
.hc-facet--attack p { color: var(--fp-muted); }

.hc-note {
  font-size: .73rem;
  color: var(--fp-muted);
  line-height: 1.45;
  margin: .8rem 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--hc-attack-border);
}
.hc-note--plain { border-left-color: var(--fp-border); }

/* ---- Pruefraster (nur Langfassung) ---- */

.hc-grid { width: 100%; border-collapse: collapse; }
.hc-grid th {
  text-align: left;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--fp-muted-2);
  padding: 0 12px 6px 0;
  border-bottom: 1px solid var(--fp-border);
}
.hc-grid td {
  font-size: .75rem;
  color: var(--fp-text);
  line-height: 1.45;
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--fp-border);
  vertical-align: top;
}
.hc-grid td:nth-child(2) { font-weight: 700; color: var(--fp-accent); }
.hc-grid td:nth-child(3) { color: var(--fp-muted); }

/* ---- Zeitleiste + Ablauf + FAQ (nur Langfassung) ---- */

/* Zeitleiste als waagerechter Streifen: vier Daten nebeneinander, verbunden
   durch die Linie ueber den Punkten. Senkrecht gesetzt war sie eine halbe
   Seite hoch und liess die Nachbarspalte leer. */
.hc-time {
  list-style: none;
  margin: 0;
  padding: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 22px;
  position: relative;
}
.hc-time::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 4px;
  border-top: 2px solid var(--fp-border);
}
.hc-time li { position: relative; }
.hc-time li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fp-accent);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.hc-time-date { display: block; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--hc-attack); }
.hc-time h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.3; }
.hc-time p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

.hc-ref { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: .9rem 0 0; padding-left: 12px; border-left: 2px solid var(--fp-accent); }

.hc-process { list-style: none; counter-reset: hcp; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 22px; }
.hc-process li { counter-increment: hcp; padding-left: 26px; position: relative; }
.hc-process li::before {
  content: counter(hcp);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  color: var(--fp-accent);
  font-size: .66rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hc-process h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; line-height: 1.3; }
.hc-process p { font-size: .73rem; color: var(--fp-muted); line-height: 1.45; margin: 0; }

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

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

.hc-cta { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.4rem; align-items: center; padding: 1rem 1.15rem; }
.hc-cta h2 { font-size: .98rem; margin-bottom: .4rem; }
.hc-cta p { font-size: .78rem; line-height: 1.5; margin-bottom: .55rem; }
.hc-scope-note { font-size: .73rem !important; color: var(--fp-muted-2) !important; line-height: 1.45; margin-bottom: .75rem !important; }
.hc-cta-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hc-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;
}
.hc-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; }
.hc-url-label { color: var(--fp-muted); }

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

@media screen and (max-width: 700px) {
  .hc-building { grid-template-columns: 1fr; }
  .hc-room-body--wide { grid-template-columns: 1fr; }
  .hc-facts { grid-template-columns: 1fr; gap: 12px; }
  .hc-cta { grid-template-columns: 1fr; }
  .hc-process, .hc-time, .hc-faq { grid-template-columns: 1fr; }
  .hc-time::before { display: none; }
  .hc-cta .flyer-cta-contact { border-left: none; border-top: 1px solid var(--fp-accent-border); padding: .8rem 0 0; }
  .flyer-page[data-version="extended"] .hc-extra-cols { grid-template-columns: 1fr; }
}