/* Flyer: Einzelhandel und Filialnetze (/de/flyer/einzelhandel).
   Baut auf flyer-common.css auf. Kernvisualisierung ist der Grundriss einer
   Filiale von oben: Verkaufsflaeche mit Kassentresen, dahinter Backoffice und
   Lager mit dem Netzwerkschrank, daneben der Online-Shop als abgesetzter
   vierter Raum an einer gestrichelten Leitung. Die vier Marker im Plan sind
   dieselben Nummern wie in der Stationsliste daneben, Plan und Liste lesen
   sich als eine Abbildung. Zweitakzent ist Magenta und markiert nur die
   Stationsnummern, den Online-Shop und die beiden Kennzahlen; alles andere
   laeuft ueber die --fp-*-Tokens aus flyer-common.css, damit der Bogen am
   Bildschirm dunkel und im Druck hell bleibt. Kompaktfassung auf eine
   A4-Seite getrimmt, .flyer-extra-Bloecke nur in der Langfassung.
   Klassenpraefix rt- = retail. */

.flyer-page {
  --rt-mag: #d9569f;
  --rt-mag-soft: rgba(217, 86, 159, 0.14);
  --rt-mag-border: rgba(217, 86, 159, 0.5);
}
@media print {
  .flyer-page {
    --rt-mag: #b32b7d;
    --rt-mag-soft: #fbe8f3;
    --rt-mag-border: #e6b5d4;
  }
}

/* ---- Kopf ---- */
.rt-sheet .flyer-logo { margin-bottom: 12px; height: 32px; }
.rt-sheet .flyer-h1 { font-size: clamp(1.35rem, 2.5vw, 1.7rem); margin-bottom: .4rem; max-width: 26em; }
.rt-sheet .flyer-subline { font-size: .84rem; line-height: 1.5; margin-bottom: .6rem; max-width: 52em; }

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

.rt-h2 {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-muted);
  margin: 0 0 .5rem;
  break-after: avoid;
}

.rt-note { font-size: .68rem; color: var(--fp-muted-2); line-height: 1.45; margin: .45rem 0 0; }
.rt-source { font-size: .66rem; color: var(--fp-muted-2); line-height: 1.45; margin: .35rem 0 0; }

/* ---- Kernvisualisierung: Grundriss ---- */
.rt-tour { margin-bottom: 1.3rem; break-inside: avoid; }
.rt-tour-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 18px; align-items: start; }

.rt-plan-fig { margin: 0; }
.rt-plan { display: block; width: 100%; height: auto; font-family: var(--font-family); }
.rt-plan-fig figcaption { font-size: .68rem; color: var(--fp-muted-2); line-height: 1.45; margin-top: 6px; }

.rt-plan .p-room { fill: var(--fp-surface); stroke: var(--fp-muted-2); stroke-width: 2; }
.rt-plan .p-wall { stroke: var(--fp-muted-2); stroke-width: 2; }
.rt-plan .p-gap { fill: var(--fp-bg); }
.rt-plan .p-swing { fill: none; stroke: var(--fp-border); stroke-width: 1; }
.rt-plan .p-fixture { fill: var(--fp-accent-soft); stroke: var(--fp-accent); stroke-width: 1.2; }
.rt-plan .p-shop { fill: var(--rt-mag-soft); stroke: var(--rt-mag); stroke-width: 1.5; stroke-dasharray: 5 3; }
.rt-plan .p-link { stroke: var(--rt-mag); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rt-plan .p-zone { font-size: 11.5px; font-weight: 800; fill: var(--fp-text); }
.rt-plan .p-zone-shop { fill: var(--rt-mag); }
.rt-plan .p-zone-shop-sub { fill: var(--rt-mag); font-weight: 700; }
.rt-plan .p-fixture-lbl { font-size: 10px; font-weight: 700; fill: var(--fp-muted); }
.rt-plan .p-door { font-size: 10.5px; font-weight: 600; fill: var(--fp-muted-2); }
.rt-plan .p-mark circle { fill: var(--rt-mag); }
.rt-plan .p-mark text { font-size: 10.5px; font-weight: 800; fill: #ffffff; }

.rt-stations { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.rt-stations li { display: flex; gap: 8px; align-items: flex-start; break-inside: avoid; }
.rt-st-num {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--rt-mag);
  color: #ffffff;
  font-size: .66rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.rt-stations h3 { font-size: .82rem; font-weight: 700; color: var(--fp-text); margin: 0 0 3px; line-height: 1.3; }
.rt-stations p { font-size: .72rem; line-height: 1.45; margin: 0; }
.rt-stations p span {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-right: 5px;
}
.rt-st-see { color: var(--fp-muted); }
.rt-st-see span { color: var(--rt-mag); }
.rt-st-test { color: var(--fp-text); margin-top: 3px !important; }
.rt-st-test span { color: var(--fp-accent); }

/* ---- Kennzahlen unter dem Grundriss ---- */
.rt-lage-nums {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: .8rem;
  padding-top: .7rem;
  border-top: 1px solid var(--fp-border);
}
.rt-num { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; color: var(--rt-mag); line-height: 1.05; }
.rt-num-block p { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; margin: 3px 0 0; }

/* ---- Lagebild ---- */
.rt-lage {
  border-top: 1px solid var(--fp-border);
  border-bottom: 1px solid var(--fp-border);
  padding: .7rem 0;
  margin-bottom: 1rem;
  break-inside: avoid;
}
.rt-lage p { font-size: .78rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

/* ---- PCI-Tabelle ---- */
.rt-pci { margin-bottom: 1.3rem; }
.rt-table { display: flex; flex-direction: column; }
.rt-tr {
  display: grid;
  grid-template-columns: .62fr 1.3fr 1fr;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px solid var(--fp-border);
  align-items: baseline;
}
.rt-th {
  border-top: none;
  padding-bottom: 4px;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-muted-2);
}
.rt-td-req { font-size: .76rem; font-weight: 800; color: var(--fp-text); line-height: 1.4; }
.rt-td-mean { font-size: .72rem; color: var(--fp-muted); line-height: 1.45; }
.rt-td-mod { font-size: .72rem; color: var(--fp-accent); font-weight: 700; line-height: 1.45; }

/* ---- Zwei Groessenordnungen ---- */
.rt-scale { margin-bottom: 1rem; }
.rt-scale-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rt-case {
  border: 1px solid var(--fp-border);
  border-radius: 8px;
  padding: .7rem .8rem;
  background: var(--fp-surface);
}
.rt-case-big { border-left: 3px solid var(--rt-mag); }
.rt-case-small { border-left: 3px solid var(--fp-accent); }
.rt-case-label {
  display: block;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fp-muted-2);
}
.rt-case h3 { font-size: .84rem; font-weight: 800; color: var(--fp-text); margin: 2px 0 0; line-height: 1.3; }
.rt-case-meta { display: block; font-size: .68rem; font-weight: 700; color: var(--fp-muted-2); margin-bottom: 5px; }
.rt-case p { font-size: .74rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.rt-bridge { font-size: .8rem; font-weight: 700; color: var(--fp-text); margin: .6rem 0 0; }

/* ---- Nur Langfassung ---- */
.rt-extra { margin-bottom: 1.5rem; }
.rt-lage { break-inside: avoid; }
.rt-extra-intro { font-size: .78rem; color: var(--fp-muted); line-height: 1.5; margin: 0 0 .7rem; max-width: 60em; }

.rt-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin: 0; padding: 0; list-style: none; }
.rt-modules h3 { font-size: .78rem; font-weight: 700; color: var(--fp-text); margin: 0 0 2px; }
.rt-modules h3::before { content: "\2192\00a0"; color: var(--fp-accent); }
.rt-modules p { font-size: .76rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }

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

/* ---- CTA ---- */
.rt-cta {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  align-items: center;
  background: var(--fp-accent-soft);
  border: 1px solid var(--fp-accent-border);
  border-radius: 10px;
  padding: .8rem .9rem;
  break-inside: avoid;
}
.rt-cta h2 { font-size: 1rem; font-weight: 800; color: var(--fp-text); margin: 0 0 .3rem; }
.rt-cta p { font-size: .75rem; color: var(--fp-muted); line-height: 1.5; margin: 0; }
.rt-cta-url { margin-top: .45rem !important; font-size: .72rem !important; color: var(--fp-text) !important; font-weight: 700; }
.rt-cta-url span { font-weight: 600; color: var(--fp-muted-2); }

.rt-cta-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.rt-cta-actions .rt-contact { grid-column: 1 / -1; }
.rt-btn {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--fp-accent);
  color: var(--fp-on-accent) !important;
  text-decoration: none !important;
  font-size: .8rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 9px 10px;
}
.rt-btn-ghost { background: transparent; color: var(--fp-accent) !important; border: 1px solid var(--fp-accent-border); }
.rt-contact { border-top: 1px solid var(--fp-accent-border); padding-top: .5rem; margin-top: 0; font-size: .72rem; gap: 2px; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }

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

@media screen and (max-width: 700px) {
  .rt-tour-layout, .rt-scale-grid, .rt-modules, .rt-faq, .rt-cta { grid-template-columns: 1fr; }
  .rt-tr { grid-template-columns: 1fr; gap: 2px; }
  .rt-th { display: none; }
}