/* WoningPrijsKaart.nl — advertentiekolom (Daisycon skyscraper 120x600).

   Eén enkel element in de DOM, dat zich op twee manieren gedraagt:
   - brede schermen (>= 1400px): vast LINKS naast het middenkader, blijft in beeld;
   - smallere schermen (laptop, tablet, mobiel): onder de content, boven de footer.

   Belangrijk: nooit twee kopieën van de banner in de pagina zetten (bijv. een
   aparte mobiele variant). De afbeelding wordt dan twee keer geladen en
   Daisycon telt dan twee vertoningen voor één zichtbare banner — dat verpest
   je CTR-rapportage.

   De rekensom achter de drempel: het middenkader (.wrap) is 1140px breed en
   staat gecentreerd, dus links blijft (V - 1140) / 2 over. Daar moet 120px
   banner + 6px ruimte in passen, plus wat marge tegen de schermrand. Dat lukt
   vanaf een viewport van ongeveer 1400px. Op een 1366px-laptop valt de banner
   dus onder de content — dat is de bedoeling, niet een fout.

   Verticaal: de banner begint op 140px, ruim onder de blauwe kop. Die kop is
   niet overal even hoog — op de pagina's met de brede navigatie breekt het menu
   naar een tweede regel en wordt hij zo'n 129px hoog, op de gegenereerde
   pagina's ongeveer 113px. 140px is dus veilig voor allemaal.

   Op lagere schermen verdwijnt de banner niet, maar schaalt hij mee via
   max-height. Beter een iets kleinere banner die in beeld staat dan geen. */

.zijbalk {
  width: 120px;
  margin: 30px auto 6px;
  text-align: center;
  line-height: 0;
}

.zijbalk-lbl {
  display: block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: #9aa3b2;
  margin-bottom: 6px;
}

.zijbalk img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
  border-radius: 6px;
}

@media (min-width: 1400px) and (min-height: 640px) {
  .zijbalk {
    position: fixed;
    top: 140px;                 /* onder de blauwe kop, ook als het menu afbreekt */
    right: calc(50% + 576px);   /* 570px = halve .wrap, + 6px ruimte ertussen */
    margin: 0;
    z-index: 20;
  }

  /* Past de banner niet meer onder de kop? Dan kleiner tonen in plaats van
     helemaal weglaten. De verhouding blijft kloppen door width:auto. */
  .zijbalk img {
    max-height: calc(100vh - 190px);
    width: auto;
    margin: 0 auto;
  }
}

/* De banner wordt aan alle bezoekers getoond, ongeacht hun cookiekeuze. Het is
   een affiliate-afbeelding; de commissie-cookie wordt pas gezet als iemand op de
   banner klikt (op het doorverwijsdomein), en dat is de eigen handeling van de
   bezoeker. Er staat dus bewust géén verbergregel op data-consent="declined". */

@media print {
  .zijbalk { display: none }
}