/* Shared design tokens + components for the FsRdp section (Default.aspx,
   Server.aspx, InstallingOnLinux.aspx). Previously each page carried its own
   near-identical copy of this CSS (fsrdp-hero / fsrdp-server-hero /
   fsrdp-linux-hero, three fsrdp-step copies, five differently-colored
   "pastel" boxes) - consolidated here so there is exactly one navy hero,
   one white card language (color lives in a small icon badge, not the card
   background), and one neutral note style, shared by all three pages. */

:root {
  --fsrdp-navy-950: #17202b;
  --fsrdp-navy-700: #244a73;
  --fsrdp-blue-600: #336699;
  --fsrdp-ink-soft: #495057;
  --fsrdp-paper: #f4f7fc;
  --fsrdp-line: #d7dee7;
  --fsrdp-shadow: 0 0.35rem 1.25rem rgba(20, 42, 68, 0.14);
  --fsrdp-shadow-hover: 0 0.75rem 1.75rem rgba(20, 42, 68, 0.22);
  --fsrdp-radius: 12px;
}

/* ---------- Page header ---------- */

.fsrdp-hero {
  background: linear-gradient(135deg, var(--fsrdp-navy-950), var(--fsrdp-navy-700));
  border-radius: var(--fsrdp-radius);
  color: #fff;
  padding: 2rem;
}

/* ---------- Base white card (downloads, packages, feature cards) ---------- */

.fsrdp-card {
  border: 0;
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsrdp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fsrdp-shadow-hover);
}

.fsrdp-platform {
  color: var(--fsrdp-blue-600);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ---------- Download matrix (compact reference table) ---------- */

.fsrdp-download-matrix {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  overflow: hidden;
}

.fsrdp-download-matrix-header {
  background: var(--fsrdp-navy-700);
  color: #fff;
  font-weight: 700;
  padding: 0.6rem 1rem;
}

.fsrdp-download-matrix-table { margin: 0; }

.fsrdp-download-matrix-table th,
.fsrdp-download-matrix-table td {
  padding: 0.5rem 0.85rem;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}

@media (max-width: 768px) {
  .fsrdp-download-matrix-table th,
  .fsrdp-download-matrix-table td {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .fsrdp-download-matrix {
    overflow-x: auto;
  }
  .fsrdp-download-matrix-table th,
  .fsrdp-download-matrix-table td {
    padding: 0.3rem 0.35rem;
    font-size: 0.7rem;
  }
}

.fsrdp-download-matrix-table tr > *:first-child { text-align: left; }
.fsrdp-download-matrix-table thead th { color: var(--fsrdp-ink-soft); font-weight: 600; }
.fsrdp-download-matrix-table tbody th { font-weight: 600; text-align: left; }
.fsrdp-download-matrix-table a { color: var(--fsrdp-navy-700); font-weight: 600; text-decoration: none; }
.fsrdp-download-matrix-table a:hover { text-decoration: underline; }
.fsrdp-download-matrix-table .btn { color: #fff; }

/* ---------- Download boxes (mobile-only replacement for the table above) ----------
   A 5-column table (Downloads/Windows/Linux ARM64/Linux x64/Anleitung) has no
   honest way to fit a portrait phone even scrolled - swapped below 481px for
   three stacked one-platform-each boxes reusing the same card look. */

.fsrdp-download-boxes { display: none; }

@media (max-width: 480px) {
  .fsrdp-download-table-wrap { display: none; }
  .fsrdp-download-boxes { display: block; }
}

.fsrdp-download-box-body { padding: 0.9rem 1.1rem; }

.fsrdp-download-box-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--fsrdp-line);
}

.fsrdp-download-box-row:last-of-type { border-bottom: 0; }

.fsrdp-download-box-row span {
  font-weight: 600;
  color: var(--fsrdp-ink-soft);
  font-size: 0.85rem;
}

.fsrdp-download-box-row a {
  color: var(--fsrdp-navy-700);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.fsrdp-download-box-row a:hover { text-decoration: underline; }

.fsrdp-download-box-links {
  display: flex;
  gap: 1.25rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fsrdp-line);
  font-size: 0.8rem;
}

.fsrdp-download-box-links a {
  color: var(--fsrdp-navy-700);
  font-weight: 600;
  text-decoration: none;
}

.fsrdp-download-box-links a:hover { text-decoration: underline; }

/* ---------- Feature icon strip (Default.aspx "at a glance" row) ---------- */

.fsrdp-feature-strip {
  text-align: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Replaces the old per-item inline style="flex: 1 1 calc(100% / 10) ..." -
   an inline style has higher specificity than any class selector here and
   silently defeated every breakpoint below (10 items always stayed at their
   inline 10% basis, no matter the media query). Sizing now lives only here.

   Each basis below is calc((100% - (N-1) * gap) / N) for N columns, matching
   the container's gap: 0.5rem exactly - a plain "calc(X% - 4px)" leaves the
   wrong amount of slack once an explicit gap is also reserved between items,
   which is what silently pushed one item too many onto the next line. */
.fsrdp-feature-strip-item {
  flex: 1 1 calc((100% - 9 * 0.5rem) / 10);
  min-width: 0;
  padding: 0 5px;
}

.fsrdp-feature-icon {
  color: var(--fsrdp-blue-600);
  font-size: 1.75rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.fsrdp-feature-strip .fsrdp-feature-label {
  font-size: 0.85rem;
  color: var(--fsrdp-ink-soft);
  overflow-wrap: break-word;
  hyphens: auto;
}

@media (max-width: 1200px) {
  /* 4 per row */
  .fsrdp-feature-strip-item {
    flex: 1 1 calc((100% - 3 * 0.5rem) / 4);
  }
}

@media (max-width: 768px) {
  /* 3 per row */
  .fsrdp-feature-strip-item {
    flex: 1 1 calc((100% - 2 * 0.5rem) / 3);
  }
  .fsrdp-feature-icon { font-size: 1.3rem; }
  .fsrdp-feature-label { font-size: 0.7rem; }
}

@media (max-width: 480px) {
  /* 10 icons total -> 5 per row = exactly 2 rows */
  .fsrdp-feature-strip-item {
    flex: 1 1 calc((100% - 4 * 0.5rem) / 5);
    padding: 0 2px;
  }
  .fsrdp-feature-icon { font-size: 1rem; margin-bottom: 0.3rem; }
  .fsrdp-feature-label { font-size: 0.6rem; line-height: 1.15; }
}

/* Highlighted strip tile: the browser entry is a real link and deliberately
   pops out of the row (replaces a former inline orange border). Same color
   language as the icon badges - blue, not a foreign accent color. */
.fsrdp-feature-highlight {
  display: block;
  text-decoration: none;
  background: rgba(51, 102, 153, 0.08);
  border: 1px solid var(--fsrdp-blue-600);
  border-radius: var(--fsrdp-radius);
  padding: 0.6rem 0.25rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsrdp-feature-highlight:hover,
.fsrdp-feature-highlight:focus-visible {
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: var(--fsrdp-shadow);
}

.fsrdp-feature-highlight .fsrdp-feature-badge {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--fsrdp-blue-600);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

/* ---------- Neutral note (checklists, prerequisites - not a pitch) ---------- */

.fsrdp-note {
  background: var(--fsrdp-paper);
  border-left: 4px solid var(--fsrdp-blue-600);
  border-radius: 8px;
  padding: 1.5rem;
}

.fsrdp-note h2 { font-size: 1.05rem; }

/* ---------- Section panel (one calm neutral break in an otherwise white page) ---------- */

.fsrdp-panel {
  background: var(--fsrdp-paper);
  border-radius: calc(var(--fsrdp-radius) + 4px);
  padding: 2.25rem;
}

@media (max-width: 768px) {
  .fsrdp-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 480px) {
  .fsrdp-panel {
    padding: 1rem;
  }
}

/* ---------- Feature card: white card, color lives only in the icon badge ---------- */

.fsrdp-feature-card {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsrdp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fsrdp-shadow-hover);
}

.fsrdp-feature-card-shot {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  cursor: zoom-in;
  border: 0;
  padding: 0;
}

@media (max-width: 768px) {
  .fsrdp-feature-card-shot {
    height: 150px;
  }
}

@media (max-width: 480px) {
  .fsrdp-feature-card-shot {
    height: 120px;
  }
}

.fsrdp-feature-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

@media (max-width: 480px) {
  .fsrdp-feature-card-body {
    padding: 1.25rem;
  }
}

.fsrdp-feature-icon-badge {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: rgba(51, 102, 153, 0.1);
  color: var(--fsrdp-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 0.85rem;
  flex: 0 0 auto;
}

.fsrdp-feature-card h2 { font-size: 1.15rem; }

.fsrdp-feature-card .badge {
  background-color: var(--fsrdp-blue-600);
  color: #fff;
  letter-spacing: 0.03em;
}

/* ---------- Contact CTA banner ---------- */

.fsrdp-contact-banner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  padding: 1.5rem 1.75rem;
}

.fsrdp-contact-banner-icon {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: rgba(51, 102, 153, 0.1);
  color: var(--fsrdp-blue-600);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex: 0 0 auto;
}

.fsrdp-contact-banner-body { flex: 1 1 260px; }
.fsrdp-contact-banner-body p { margin-bottom: 0.15rem; }

@media (max-width: 640px) {
  .fsrdp-contact-banner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
  }
  .fsrdp-contact-banner-icon {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem;
    margin: 0 auto;
  }
  .fsrdp-contact-banner-body { flex: 1 1 auto; }
  .fsrdp-contact-banner .btn {
    flex: 0 1 auto;
    width: 100%;
  }
}

/* Responsive buttons in general */
.btn {
  white-space: normal;
  word-wrap: break-word;
}

/* Tablet: Buttons noch nebeneinander, aber mit kleinerer Schrift */
@media (max-width: 768px) {
  .btn {
    font-size: 0.9rem;
    padding: 0.5rem 0.85rem;
  }
}

/* Mobile: Stack buttons vertically, smaller font */
@media (max-width: 480px) {
  .btn {
    width: 100%;
    display: block;
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
  }

  /* Stack buttons in flex containers on mobile */
  .d-flex .btn {
    flex: 1 1 100%;
  }

  /* Last button in a card needs space from content below */
  .card-body .btn:last-child {
    margin-bottom: 1rem;
  }

  /* Alert box buttons stack on mobile */
  .alert .btn {
    width: 100%;
    display: block;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .alert .btn:last-child {
    margin-bottom: 0;
  }

  /* Hide card metadata on mobile (version numbers, small text) */
  .card-text.text-muted.small {
    display: none;
  }

  /* Reduce card title size on mobile */
  .card-title {
    font-size: 1rem !important;
  }

  /* Compact card text descriptions on mobile */
  .card-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }
}

/* ---------- Numbered install steps (Server.aspx, InstallingOnLinux.aspx) ---------- */

.fsrdp-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.fsrdp-step-number {
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--fsrdp-blue-600);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fsrdp-step-body h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }

.fsrdp-platform-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

.fsrdp-platform-heading i { color: var(--fsrdp-blue-600); }

/* ---------- Clickable screenshot (inline figures) ---------- */

.fsrdp-shot {
  width: 100%;
  border: 0;
  padding: 0;
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  display: block;
  cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}

.fsrdp-shot:hover,
.fsrdp-shot:focus-visible {
  box-shadow: var(--fsrdp-shadow-hover);
}

.fsrdp-shot-caption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--fsrdp-ink-soft);
  text-align: center;
}

/* ---------- Lightbox (Bootstrap modal, custom image-viewing chrome) ---------- */

/* Fullscreen lightbox (see the modal-fullscreen dialog in Default.aspx): the body is the
   whole window minus the close row, and the picture takes whatever is left over after its
   caption - min-height:0 is what allows the flex child to actually shrink instead of
   overflowing. */
#fsrdpLightbox .modal-content { background: var(--fsrdp-navy-950); border: 0; }
#fsrdpLightbox .modal-body {
  position: relative;
  padding: 1.5rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

#fsrdpLightbox figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 100%;
  min-height: 0;
}

#fsrdpLightbox img {
  max-width: 100%;
  min-height: 0;
  flex: 0 1 auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.4);
}
#fsrdpLightbox figcaption { color: #e7edf8; margin-top: 0.85rem; font-size: 0.95rem; }
#fsrdpLightbox .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.fsrdp-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
}

.fsrdp-lightbox-arrow:hover { background: rgba(255, 255, 255, 0.22); }
.fsrdp-lightbox-arrow.prev { left: 0.75rem; }
.fsrdp-lightbox-arrow.next { right: 0.75rem; }

@media (max-width: 768px) {
  .fsrdp-note {
    padding: 1.25rem;
  }
  .fsrdp-note h2 { font-size: 0.95rem; }
}

@media (max-width: 640px) {
  .fsrdp-lightbox-arrow { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; }
}

/* Mobile-optimized hero section */
@media (max-width: 768px) {
  .fsrdp-hero {
    padding: 1.5rem;
  }
  .fsrdp-hero h1 { font-size: 1.5rem !important; }
  .fsrdp-hero .lead { font-size: 0.95rem; }
}

/* ---------- Product comparison grid (Produktvergleich.aspx) ----------
   11 products x 15 features does not fit any screen, so the grid scrolls
   horizontally inside its own container (never the page body) with the
   feature column and the header row pinned. Deliberately no Bootstrap
   .table-striped: its inset box-shadow paints over the opaque background
   the sticky column needs, which would let scrolled cells bleed through. */

.fsrdp-compare {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  overflow: hidden;
}

.fsrdp-compare-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.fsrdp-compare-table {
  margin: 0;
  min-width: 1400px;
  font-size: 0.85rem;
  border-collapse: separate;
  border-spacing: 0;
}

.fsrdp-compare-table th,
.fsrdp-compare-table td {
  padding: 0.6rem 0.7rem;
  vertical-align: top;
  text-align: center;
  border-bottom: 1px solid var(--fsrdp-line);
  background: #fff;
}

/* Column headings. Deliberately not sticky to the top: the grid sits in a
   horizontal scroll container, which would make vertical stickiness stick to
   that container instead of the viewport - it would look pinned and do nothing. */
.fsrdp-compare-table thead th {
  background: var(--fsrdp-navy-700);
  color: #fff;
  font-weight: 600;
  vertical-align: middle;
  border-bottom: 0;
}

.fsrdp-compare-table thead th.is-own {
  background: var(--fsrdp-blue-600);
}

/* Feature column: pinned to the left while scrolling sideways. */
.fsrdp-compare-feature {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 15rem;
  min-width: 15rem;
  text-align: left;
  font-weight: 600;
  color: var(--fsrdp-navy-950);
  box-shadow: 1px 0 0 var(--fsrdp-line);
}

.fsrdp-compare-table thead .fsrdp-compare-feature {
  color: #fff;
  box-shadow: none;
}

.fsrdp-compare-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--fsrdp-ink-soft);
}

/* Own column: the reference point of the whole page, marked by a tint
   rather than by a louder color language than the rest of the section. */
.fsrdp-compare-table tbody td.is-own {
  background: rgba(51, 102, 153, 0.07);
  font-weight: 600;
}

.fsrdp-compare-table tbody tr:hover td,
.fsrdp-compare-table tbody tr:hover th {
  background: var(--fsrdp-paper);
}

.fsrdp-compare-table tbody tr:hover td.is-own {
  background: rgba(51, 102, 153, 0.12);
}

/* Section heading row. The cell spans the full table width, so the label
   itself is stuck to the left edge - otherwise it would scroll out of sight
   together with the products. */
.fsrdp-compare-group th {
  background: var(--fsrdp-navy-950);
  color: #fff;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
}

.fsrdp-compare-group th span {
  position: sticky;
  left: 0.7rem;
  display: inline-block;
}

.fsrdp-compare-yes i { color: #1f7a45; }
.fsrdp-compare-no i { color: #c62828; }
.fsrdp-compare-limited i { color: #b06a00; }

.fsrdp-compare-table td i { font-size: 1.05rem; }

.fsrdp-compare-no { color: var(--fsrdp-ink-soft); }

.fsrdp-compare-note {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--fsrdp-ink-soft);
}

.fsrdp-compare-fact {
  font-size: 0.8rem;
  color: var(--fsrdp-navy-950);
}

.fsrdp-compare-fact .fsrdp-compare-note {
  margin-top: 0;
  font-size: 0.8rem;
  color: inherit;
}

/* ---------- Legend above the grid ---------- */

.fsrdp-compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  font-size: 0.85rem;
  color: var(--fsrdp-ink-soft);
}

.fsrdp-legend-yes { color: #1f7a45; }
.fsrdp-legend-no { color: #c62828; }
.fsrdp-legend-limited { color: #b06a00; }

/* The scroll hint is only true where the grid actually scrolls - on a wide
   desktop it would point at something that is not happening. */
.fsrdp-compare-scrollhint { display: none; }

@media (max-width: 1500px) {
  .fsrdp-compare-scrollhint {
    display: inline;
    margin-left: auto;
    color: var(--fsrdp-blue-600);
    font-weight: 600;
  }
}

@media (max-width: 768px) {
  .fsrdp-compare-table {
    font-size: 0.8rem;
  }
  .fsrdp-compare-table th,
  .fsrdp-compare-table td {
    padding: 0.45rem 0.5rem;
  }
  .fsrdp-compare-feature {
    width: 10rem;
    min-width: 10rem;
  }
  .fsrdp-compare-legend {
    font-size: 0.78rem;
    gap: 0.3rem 1rem;
  }
}

@media (max-width: 480px) {
  .fsrdp-compare-table {
    min-width: 1100px;
    font-size: 0.72rem;
  }
  .fsrdp-compare-feature {
    width: 8.5rem;
    min-width: 8.5rem;
  }
  .fsrdp-compare-note,
  .fsrdp-compare-hint {
    font-size: 0.66rem;
  }
  .fsrdp-compare-scrollhint {
    margin-left: 0;
  }
}

/* ---------- Ready-made prompt for an AI assistant (InstallingServerLinux.aspx) ----------
   A <pre> would scroll the long first line out of sight; the point of the box is
   that the whole prompt can be read and copied in one go. */

.fsrdp-ai-prompt {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ---------- Topology page (FSRdpTopologie.aspx) ---------- */

/* The three ports as a strip above the four cases: the whole page turns on which of
   them a firewall lets through, so they are named once before the first diagram. */
.fsrdp-topo-ports {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.fsrdp-topo-port {
  background: var(--fsrdp-paper);
  border: 1px solid var(--fsrdp-line);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.fsrdp-topo-port-num {
  color: var(--fsrdp-blue-600);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fsrdp-topo-port-text {
  color: var(--fsrdp-ink-soft);
  font-size: 0.9rem;
  line-height: 1.35;
}

.fsrdp-topo-case {
  margin-bottom: 3rem;
}

.fsrdp-topo-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.fsrdp-topo-badge {
  background: var(--fsrdp-navy-700);
  border-radius: 999px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.7rem;
  text-transform: uppercase;
  white-space: nowrap;
}

.fsrdp-topo-figure {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  margin: 0 0 1rem;
  padding: 1.25rem;
}

/* The drawing keeps a minimum width and scrolls inside its own box rather than
   shrinking its labels into illegibility on a phone. */
.fsrdp-topo-canvas { overflow-x: auto; }

.fsrdp-topo-svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}

.fsrdp-topo-figure figcaption {
  color: var(--fsrdp-ink-soft);
  font-size: 0.88rem;
  margin-top: 0.9rem;
}

/* ---- Diagram vocabulary. Same shapes in all four pictures, so the reader learns
   them once: green frame = your network, navy box = the server, white card = a
   participant, red band = the firewall, and a gap in that band = an opening. ---- */

.fsrdp-topo-lan {
  fill: #f1f8f2;
  stroke: #2f9e5c;
  stroke-width: 1.5;
}

.fsrdp-topo-server {
  fill: var(--fsrdp-navy-700);
  stroke: var(--fsrdp-navy-950);
  stroke-width: 1.5;
}

.fsrdp-topo-client {
  fill: #fff;
  stroke: var(--fsrdp-blue-600);
  stroke-width: 1.5;
}

.fsrdp-topo-vpn {
  fill: #fff;
  stroke: #2f9e5c;
  stroke-width: 1.5;
}

.fsrdp-topo-wall {
  fill: #fdecec;
  stroke: #c0392b;
  stroke-width: 1.5;
}

.fsrdp-topo-wall-closed {
  fill: #f7d9d6;
}

/* An opening is drawn as page-coloured, so the wall really has a hole in it. */
.fsrdp-topo-gap { fill: #fff; }

.fsrdp-topo-void {
  fill: #f7f8fa;
  stroke: var(--fsrdp-line);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.fsrdp-topo-title {
  fill: var(--fsrdp-navy-950);
  font-size: 15px;
  font-weight: 600;
}

/* Text that sits inside the navy server box. A modifier class rather than a sibling
   selector: which text lands on the dark box is a decision of the drawing, not
   something a reader of the stylesheet should have to reconstruct from element order. */
.fsrdp-topo-on-navy { fill: #fff; }
.fsrdp-topo-sub.fsrdp-topo-on-navy { fill: #cddbe9; }

.fsrdp-topo-sub {
  fill: var(--fsrdp-ink-soft);
  font-size: 11.5px;
}

.fsrdp-topo-port-line {
  fill: #fff;
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A port that is reachable from the internet is called out, not just listed. */
.fsrdp-topo-port-open { fill: #ffd9a0; }

.fsrdp-topo-zone {
  fill: var(--fsrdp-ink-soft);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fsrdp-topo-edge {
  fill: var(--fsrdp-navy-950);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.fsrdp-topo-edge-open { fill: #b9581c; }

.fsrdp-topo-wall-text {
  fill: #c0392b;
  font-size: 12px;
  letter-spacing: 0.1em;
}

.fsrdp-topo-void-text {
  fill: var(--fsrdp-ink-soft);
  font-size: 14px;
  font-weight: 600;
}

.fsrdp-topo-void-sub {
  fill: #8a939e;
  font-size: 11.5px;
}

.fsrdp-topo-flow {
  fill: none;
  stroke: var(--fsrdp-navy-700);
  stroke-width: 2;
}

.fsrdp-topo-flow-dashed {
  fill: none;
  stroke: var(--fsrdp-navy-700);
  stroke-width: 2;
  stroke-dasharray: 7 5;
}

.fsrdp-topo-arrowhead { fill: var(--fsrdp-navy-700); }

/* ---- Facts under each diagram: term and answer, two columns on wide screens ---- */

.fsrdp-topo-facts {
  background: var(--fsrdp-paper);
  border-radius: var(--fsrdp-radius);
  display: grid;
  gap: 0.85rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 0;
  padding: 1.25rem 1.5rem;
}

.fsrdp-topo-facts dt {
  color: var(--fsrdp-blue-600);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fsrdp-topo-facts dd {
  color: var(--fsrdp-ink-soft);
  font-size: 0.92rem;
  line-height: 1.45;
  margin: 0.15rem 0 0;
}

.fsrdp-topo-facts code {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: 4px;
  color: var(--fsrdp-navy-700);
  font-size: 0.85em;
  padding: 0.05rem 0.3rem;
}

/* ---- Summary table ---- */

.fsrdp-topo-table-scroll {
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  overflow-x: auto;
}

.fsrdp-topo-table {
  margin: 0;
  min-width: 640px;
}

.fsrdp-topo-table thead th {
  background: var(--fsrdp-navy-700);
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
  vertical-align: bottom;
  white-space: nowrap;
}

.fsrdp-topo-table thead th span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  opacity: 0.85;
}

.fsrdp-topo-table tbody th {
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.fsrdp-topo-table tbody td {
  color: var(--fsrdp-ink-soft);
  font-size: 0.9rem;
  text-align: center;
  vertical-align: middle;
}

.fsrdp-topo-table .is-yes { color: #2f9e5c; font-size: 1.05rem; }
.fsrdp-topo-table .is-no { color: #c0392b; font-size: 1.05rem; }

/* The optional half of case 2 (browser access): dashed instead of solid, so the reader
   sees at a glance which part of the picture the case works without. */
.fsrdp-topo-optional {
  stroke-dasharray: 7 5;
}

.fsrdp-topo-gap-optional {
  stroke: #d98324;
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* The one section that is not about a firewall opening but about data leaving the
   network - amber instead of navy, so it reads as a caveat and not as a fourth case. */
.fsrdp-topo-badge-warn {
  background: #b9581c;
}

/* ---------- Wegweiser-Kästchen (Default.aspx) ---------- */

/* Same white-card language as .fsrdp-card, but built for a short question plus one link:
   the link sits at the bottom edge of every card (margin-top:auto), so three cards of
   different text length still line their links up. */
.fsrdp-pointer-card {
  background: #fff;
  border: 1px solid var(--fsrdp-line);
  border-radius: var(--fsrdp-radius);
  box-shadow: var(--fsrdp-shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fsrdp-pointer-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--fsrdp-shadow-hover);
}

.fsrdp-pointer-card p {
  color: var(--fsrdp-ink-soft);
  margin-bottom: 1rem;
}

.fsrdp-pointer-link {
  margin-top: auto;
  color: var(--fsrdp-blue-600);
  font-weight: 600;
  text-decoration: none;
}

.fsrdp-pointer-link:hover,
.fsrdp-pointer-link:focus-visible {
  text-decoration: underline;
}

/* The chevron nudges forward on hover - the one bit of motion these cards get. */
.fsrdp-pointer-link .fa {
  margin-left: 0.35rem;
  transition: transform 0.15s ease;
  display: inline-block;
}

.fsrdp-pointer-card:hover .fsrdp-pointer-link .fa {
  transform: translateX(3px);
}

@media (max-width: 480px) {
  .fsrdp-pointer-card {
    padding: 1.25rem;
  }
}