/* Smartmacherei — Zusatzbausteine des WLAN-Ratgebers (/ratgeber/wlan-funkloch-einfamilienhaus):
   Repeater-Balken, Signalskala, Omada-Karten im Artikel, Grundriss-Heatmap im Artikel. */

/* Repeater halbiert: drei Balken */
.wl-bars { display: grid; gap: 10px; margin: 14px 0 8px; }
.wl-bars .row { display: grid; grid-template-columns: minmax(96px, 150px) 1fr 52px; gap: 10px; align-items: center; font-size: 14px; color: var(--text); }
.wl-bars .row b { font: 700 18px var(--font-display); color: var(--ink); text-align: right; }
.wl-bars .track { height: 22px; border-radius: 6px; background: var(--card-soft); overflow: hidden; }
.wl-bars .fill { height: 100%; border-radius: 6px; background: rgba(19,135,92,.32); box-shadow: inset 0 -2px 0 #13875c; }
.wl-bars .row.mid .fill { background: rgba(201,131,0,.32); box-shadow: inset 0 -2px 0 #c98300; }
.wl-bars .row.weak .fill { background: rgba(207,61,51,.30); box-shadow: inset 0 -2px 0 #cf3d33; }

/* Signalskala -90 bis -40 dBm */
.wl-scale { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin: 14px 0 8px; }
.wl-scale .bar { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #cd3448 0%, #ff6b57 18%, #ffb83d 36%, #a6dc76 55%, #36c98e 75%, #118ad6 100%); }
.wl-scale .ticks { display: flex; justify-content: space-between; font: 500 12px var(--font-mono); color: var(--ink-soft); margin: 6px 0 14px; }
.wl-scale .steps { display: grid; gap: 10px; }
.wl-scale .step { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; background: var(--card-soft); border-radius: 12px; padding: 10px 12px; }
.wl-scale .step svg { width: 44px; height: 44px; display: block; }
.wl-scale .step h3 { margin: 0 0 2px; font-size: 15px; }
.wl-scale .step h3 span { display: block; font: 500 12px var(--font-mono); color: var(--ink-soft); margin-top: 2px; }
.wl-scale .step p { margin: 0; font-size: 14px; }

/* Omada-Bausteine im Artikel (Karten aus landing.css) */
.article .cards { margin: 16px 0 24px; }
.article .prod h3 { margin-top: 0; }
.article .prod .tag { margin-bottom: 8px; }

/* Abstand zwischen Bildunterschrift und Hinweis */
.article .rg-compare + .rg-note, .article .rg-duo + .rg-note, .article .cards + .rg-note { margin-top: 18px; }

/* Grundriss-Heatmap im Artikel */
.article .wp { margin: 14px 0 8px; }
.article .wp-summary { margin: 12px 0 0; }

@media (min-width: 560px) {
  .wl-scale .steps { grid-template-columns: repeat(3, 1fr); }
}