/* Aanvullingen op de thema-opmaak.
 *
 * Het oorspronkelijke thema opende het mobiele menu met jQuery (mmenu). Dat
 * hebben we niet overgenomen, dus die paar regels staan hier. Alles wat het
 * uiterlijk bepaalt komt uit thema.css; hier hoort alleen wat daar niet in
 * kon staan.
 */

/* Mobiel menu zonder JavaScript. */
.menu-knop { display: none; }
.menu-vergelijk { display: none; }

@media (max-width: 1024px) {
  /* De knop staat helemaal rechts, achter de taalkiezer, zoals op de oude
   * site. In de opmaak staat hij eerder; `order` zet hem op zijn plek zonder
   * dat het selectievakje van zijn label losraakt. */
  .menu-knop {
    display: block; cursor: pointer; order: 3; flex: 0 0 auto;
    padding: 10px; width: 44px; height: 44px;
  }
  .menu-knop span {
    display: block; height: 2px; background: #05385f; margin: 5px 0; border-radius: 2px;
  }
  /* `wrap` is er alleen voor het uitklapmenu, dat als vierde op een eigen
   * regel hoort. De drie erboven blijven naast elkaar: het logo krimpt mee en
   * duwt de rest naar rechts met een marge, niet met `margin-left: auto` op
   * de kolom erna — dat laatste vult in een wrappende rij de hele regel en
   * schopt de knop naar een volgende regel. */
  .header .nav-container { flex-wrap: wrap; align-items: center; }
  .header .brand { flex: 0 1 auto; min-width: 0; margin-right: auto; }
  .header .brand img { max-width: 190px; height: auto; }
  /* Zonder deze regels liep de kop 16px buiten het scherm en kon de pagina
   * zijwaarts schuiven. De vergelijkknop past er niet bij; die staat in het
   * uitklapmenu. */
  /* Het thema zet deze lijst op `display: block; width: 100%` voor mobiel,
   * omdat de knop erin daar onder het logo hoorde. Bij ons staat de knop in
   * het menu, dus mag hij zich naar zijn inhoud voegen. */
  .header ul.search-details {
    order: 2; flex: 0 0 auto; margin: 0; width: auto; display: flex; align-items: center;
  }
  .header ul.search-details li a.compare-btn { display: none; }
  #menu { display: none; flex: 0 0 100%; order: 4; width: 100%; }
  .menu-schakelaar:checked ~ #menu { display: block; }
  /* Het thema legt de menubalk horizontaal neer; op een telefoon hoort hij
   * onder elkaar en binnen het scherm. Zonder deze breedtes werd het menu
   * 1.220px breed in een venster van 375. */
  /* De selectors van het thema zijn zwaar (`.header nav#menu ul.menu`); die
   * moeten we hier evenaren, anders blijft de balk horizontaal staan. */
  .header nav#menu ul.menu {
    display: block; width: 100%; margin: 0; padding: 0;
  }
  .header nav#menu ul.menu > li {
    display: block; width: 100%; float: none; margin: 0; position: static;
  }
  .header nav#menu ul.menu > li > a { display: block; padding: 12px 0; }
  .header nav#menu ul.menu li ul.sub-menu {
    position: static; display: block; box-shadow: none; width: 100%;
    left: auto; right: auto; top: auto; min-width: 0;
    padding: 0 0 8px 16px; opacity: 1; visibility: visible; transform: none;
  }
  .header nav#menu ul.menu li ul.sub-menu > li { display: block; width: 100%; float: none; }
  /* De vergelijkknop past niet naast het logo; hier staat hij wel. */
  #menu .menu-vergelijk { display: block; margin: 12px 0 4px; }
}

/* Niets mag breder zijn dan het scherm: zijwaarts schuiven is op een telefoon
 * altijd een fout, nooit een ontwerp. */
html, body { overflow-x: hidden; }

/* Toegankelijkheid: een zichtbare focusring, die het thema niet had. */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #15b9ed; outline-offset: 2px;
}

/* --- Filtersidebar --------------------------------------------------------
 * Het thema leverde de sidebar-opmaak, maar de filters zelf kwamen daar van
 * een zoekdienst met eigen markup. Deze regels geven onze server-side filters
 * hetzelfde uiterlijk.
 */

.sidebar-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.filter-wissen { font-size: 13px; }

.filter-block h6 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: #5a7088; font-weight: 500; margin: 16px 0 6px;
}
.filter-list { list-style: none; margin: 0; padding: 0; }
.filter-list li { margin: 0; }
.filter-list label {
  display: flex; align-items: center; gap: 8px; padding: 4px 0;
  font-size: 14px; cursor: pointer; color: #516373;
}
.filter-list label:hover .filter-naam { color: #0b7ec2; }
.filter-list input { width: 16px; height: 16px; accent-color: #0b7ec2; flex: 0 0 auto; }
.filter-naam { flex: 1 1 auto; }
.filter-aantal {
  flex: 0 0 auto; background: #f1f7fa; color: #5a7088;
  border-radius: 999px; padding: 0 7px; font-size: 12px;
}
.filter-knop { width: 100%; margin-top: 12px; }

.geen-resultaat { padding: 20px; }

/* Uitgelichte afbeelding boven een artikel. */
.content-area img.uitgelicht { border-radius: 10px; margin-bottom: 24px; }

/* Zoekformulier. */
.zoekformulier { display: flex; gap: 8px; margin-bottom: 24px; max-width: 520px; }
.zoekformulier input {
  flex: 1 1 auto; border: 1px solid #aed6ee; border-radius: 5px;
  padding: 12px 14px; font: inherit;
}

/* --- Vergelijker ---------------------------------------------------------- */

.vergelijk-kiezer { background: #fff; border: 1px solid #e3f4fa; border-radius: 10px;
                    padding: 20px; margin-bottom: 30px; box-shadow: 0 20px 35px 0 rgba(15,6,35,.06); }
.kiezer-lijst { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 14px; }

.vergelijk-tabel { overflow-x: auto; background: #fff; border-radius: 10px;
                   box-shadow: 0 20px 35px 0 rgba(15,6,35,.1); }
.vergelijk-tabel table { width: 100%; border-collapse: collapse; font-size: 15px; }
.vergelijk-tabel th, .vergelijk-tabel td { padding: 12px 14px; text-align: left;
                                           border-bottom: 1px solid #aed6ee; vertical-align: top; }
.vergelijk-tabel thead th { background: #f1f7fa; color: #05385f; }
.vergelijk-tabel thead img { display: block; max-width: 90px; max-height: 34px;
                             object-fit: contain; margin-bottom: 6px; }
.vergelijk-tabel tbody th { font-weight: 500; color: #414e5c; }
.vergelijk-tabel tbody th small { display: block; color: #5a7088; font-weight: 400; font-size: 12px; }
.vergelijk-tabel .ja { color: #6e9e24; font-weight: 700; }
.vergelijk-tabel .nee { color: #b23; }
.vergelijk-tabel .leeg { color: #aed6ee; }

.cfd-waarschuwing { background: #f1f7fa; border-left: 3px solid #aed6ee;
                    padding: 14px 18px; border-radius: 0 5px 5px 0; }

/* Naam als terugval wanneer een broker geen logo heeft. */
.all-row .logo .logo-tekst { font-weight: 500; color: #05385f; }

/* Vinkje en kruisje in de brokertabel.
 * De SVG's uit het thema hebben geen eigen afmeting; zonder deze regel rekken
 * ze uit tot de volle breedte van hun kolom.
 */
.box-col .icons img { width: 20px; height: 20px; object-fit: contain; }


/* --- Footer ---------------------------------------------------------------
 * De kolommen in de footer zweven (float). Hun ouder ruimde dat niet op,
 * waardoor het blok hoogte 0 kreeg en de kolommen over de onderrand liepen.
 */
.footers-links-part::after { content: ""; display: table; clear: both; }

/* --- Veelgestelde vragen --------------------------------------------------
 * Het thema klapte deze open en dicht met jQuery, en tekent de ronde pijlknop
 * zelf op `.accordion-row h3:after`. We laten die opmaak met rust en schakelen
 * alleen met een verborgen checkbox. Geen eigen pijl, dus geen dubbele.
 */
.accordion-block .ask-content { display: none; }
.accordion-block .vraag-schakelaar:checked ~ .accordion-content-block .ask-content { display: block; }
.accordion-block label { display: block; cursor: pointer; margin: 0; }
.accordion-block label h3 { margin: 0; }
.accordion-block .vraag-schakelaar:checked ~ .accordion-content-block h3:after {
  background-image: url("../images/arrow-up-blue.410b8968239e.svg");
}

/* --- Tooltips bij de brokerkenmerken --------------------------------------
 * Het thema toont deze pas bij hover. De basisregel daarvoor viel weg bij het
 * filteren van de thema-CSS, waardoor alle uitleg permanent zichtbaar was en
 * de pagina meer dan 12.000 px hoog werd. Hier staat het gedrag expliciet.
 */
.info-icon-block { position: relative; display: inline-block; vertical-align: middle; }
.info-icon-block .info-tooltip {
  position: absolute; top: -7px; left: 31px; width: 214px; z-index: 9;
  background-color: #f5fbfd; border: 1px solid #aed6ee; border-radius: 5px;
  padding: 10px 12px; font-size: 13px; line-height: 20px; color: #05385f;
  text-align: left; font-weight: 400;
  opacity: 0; visibility: hidden; transition: opacity .15s;
  pointer-events: none;
}
.info-icon-block:hover .info-tooltip,
.info-icon-block:focus .info-tooltip,
.info-icon-block:focus-within .info-tooltip { opacity: 1; visibility: visible; }

/* Logo's in de 'andere brokers'-blokken hadden geen hoogte. */
.point-carousel .ref-logo img { max-width: 100%; height: auto; max-height: 44px; object-fit: contain; }

/* Uitgelichte afbeelding boven een artikel. */
.text-page-wrapper img.uitgelicht,
.content-right img.uitgelicht { border-radius: 10px; margin-bottom: 24px; max-width: 100%; height: auto; }

/* Datum onder de blogkop. */
.blog-social .blog-datum { color: #5a7088; font-size: 14px; margin-top: 4px; }


/* --- Opsommingen in artikelen ---------------------------------------------
 * Het thema bevat een zeer brede regel die elk lijstitem inline zet:
 *   ul:not(.sorting-options, ...) li:not(.menu-item) { display: inline }
 * Bedoeld voor de deelknoppen, maar hij raakt ook de opsommingen in artikelen,
 * die daardoor als één doorlopende regel verschenen. Hieronder zetten we dat
 * terug binnen de artikelkolommen. `!important` is nodig omdat de regel van
 * het thema meer gewicht heeft.
 */
.text-page-wrapper ul li,
.content-right ul li,
.content-area ul li,
.info-box-text ul li,
.artikel__lijf ul li {
  display: list-item !important;
  background-image: none !important;
  list-style: disc outside !important;
  padding-left: 0 !important;
  margin-bottom: 6px;
}

/* Behalve in de voor- en nadelentabel van een review: daar staat een plus- of
   minteken voor elk punt in plaats van een bolletje, en dat teken heeft de
   ruimte links nodig. De regel hierboven gebruikt `!important` (het thema zet
   lijstitems inline), dus dit moet dat ook. */
.text-page-wrapper table li,
.info-box-text table li {
  display: list-item !important;
  list-style: none !important;
  padding: 8px 0 8px 25px !important;
  margin-bottom: 0;
}

.text-page-wrapper ol li,
.content-right ol li,
.content-area ol li { display: list-item !important; list-style: decimal outside !important; }

.text-page-wrapper ul,
.content-right ul,
.content-area ul,
.info-box-text ul { margin: 0 0 20px 24px; padding-left: 0; }


/* --- Brokeroverzicht: rijkaarten ------------------------------------------
 * Elke broker is een brede kaart: naam en totaalcijfer bovenaan, daaronder
 * het logo met het soort-label, de vier deelbeoordelingen als balk van tien
 * segmenten, en de pluspunten. Zo toonde de oude site het ook.
 */

.brokerlijst { display: grid; gap: 20px; }

.brokerrij {
  background: #fff; border: 1px solid #e3f4fa; border-radius: 10px;
  padding: 20px 24px; box-shadow: 0 10px 30px 0 rgba(15, 6, 35, .06);
}

.brokerrij__kop { display: flex; align-items: center; justify-content: space-between;
                  gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
/* De naam van de broker. Op de oude site is dat een `div` van 16px in de
   accentkleur; hier blijft het een kop, want een lijst van brokers hoort een
   koppenstructuur te hebben. De opmaak is wel dezelfde. */
h2.brokerrij__naam { margin: 0; font-size: 16px; font-weight: 400; line-height: 24px; }
h2.brokerrij__naam, h2.brokerrij__naam a { color: #0b7ec2; }
.brokerrij__score {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f5fbfd; border: 1px solid #aed6ee; border-radius: 6px;
  padding: 6px 12px; font-size: 14px; font-weight: 500; color: #05385f; white-space: nowrap;
}

.brokerrij__lijf { display: grid; gap: 24px; grid-template-columns: 190px minmax(0, 1fr) minmax(0, 1fr);
                   align-items: start; }

.brokerrij__logo {
  background: #f7fbfe; border-radius: 8px; height: 92px;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.brokerrij__logo img { max-width: 140px; max-height: 46px; width: auto; height: auto; object-fit: contain; }
.brokerrij__soort {
  display: inline-block; margin-top: 8px; background: #e3f4fa; color: #0b7ec2;
  border-radius: 5px; padding: 4px 12px; font-size: 13px;
}

/* Maatvoering van de oude site: labelkolom 140px, daarnaast een balk van
 * 100px. Met een smallere labelkolom botst "Klantvriendelijkheid" tegen de
 * balk aan. */
.scoreregel { display: grid; grid-template-columns: 140px 100px 34px;
              align-items: center; gap: 12px; margin-bottom: 8px; font-size: 14px; color: #516373; }
/* Eén balk met een breedte, net als op de oude site; de kleur hangt af van
 * het cijfer (zie `balkkleur` in views.py). */
.scoreregel__balk { display: block; height: 10px; border-radius: 5px;
                    background: #e3f4fa; overflow: hidden; }
.scoreregel__vulling { display: block; height: 100%; border-radius: 5px; }
.scoreregel__cijfer { text-align: right; font-weight: 500; color: #05385f; }

.brokerrij__usps { list-style: none; margin: 0; padding: 0; }
.brokerrij__usps li {
  display: list-item; position: relative; padding-left: 28px; margin-bottom: 8px;
  font-size: 14px; color: #516373; list-style: none;
  background-image: url("../images/check-green.bf3cbaf971e9.svg");
  background-repeat: no-repeat; background-position: left 2px; background-size: 16px;
}

.brokerrij__voet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                   margin-top: 20px; padding-top: 18px; border-top: 1px solid #e3f4fa; }
.brokerrij__review { font-size: 14px; }

@media (max-width: 1000px) {
  .brokerrij__lijf { grid-template-columns: 150px minmax(0, 1fr); }
  .brokerrij__usps { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .brokerrij__lijf { grid-template-columns: 1fr; }
}

/* --- Filtersidebar --------------------------------------------------------- */

.sidebar-left .white-bgbox { background: #fff; border: 1px solid #e3f4fa; border-radius: 10px;
                             padding: 18px; box-shadow: 0 20px 35px 0 rgba(15,6,35,.06); }
.sidebar-left .filter-title { font-size: 15px; font-weight: 700; color: #05385f;
                              margin: 18px 0 8px; }
.sidebar-left .filter-option { list-style: none; margin: 0; padding: 0; }
.sidebar-left .filter-option li { display: list-item; margin: 0; padding: 0; background: none; }
/* Het vinkje zelf komt uit het thema (`.filter-block .filter-label .checkmark`).
 * Niet overschrijven met een eigen flex-indeling: dan valt het vierkantje weg,
 * want dat is een absoluut geplaatste ::before binnen een relatief label. */
.sidebar-left .filter-option li { margin-bottom: 14px; }
/* De filters op een categorieoverzicht zijn links, geen selectievakjes. Het
 * thema heeft voor links in een filterblok een eigen, veel zwaardere opmaak
 * (`.sidebar-left .filter-block ul li a`); die zetten we hier terug naar de
 * maatvoering van een gewoon filterlabel. */
/* Het thema onderstreept links in lijsten met een blauwe streep. Dat is voor
 * lopende tekst bedoeld; onze filters zijn links (op de oude site waren het
 * labels met een selectievakje) en horen die streep niet te krijgen. */
.sidebar-left .filter-block ul li a.filter-label,
.filter-top .filter-row .left-colum ul.tag-listing li a {
  background-image: none;
  padding-bottom: 0;
}

.sidebar-left .filter-block ul li a.filter-label {
  display: block; width: auto; padding: 0 0 0 30px; opacity: 1;
  font-size: 14px; font-weight: 400; color: #414e5c; text-decoration: none;
}
.sidebar-left .filter-block ul li a.filter-label:hover { color: #0b7ec2; }

/* Op een categorieoverzicht zijn de filters links in plaats van
 * selectievakjes; het aangevinkte filter krijgt hetzelfde vinkje. */
.filter-block .filter-label .checkmark.aan:before {
  background-image: url("../images/icon-check.955bada48e8a.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 13px;
}

/* De filterregel gebruikt de zwevende kolommen van het thema (twee keer 50%).
 * Die niet op `flex` zetten: dan raakt `float: right` in de rechterkolom zijn
 * werking kwijt en springen beide helften om. */
.card-block-filter p { margin: 0; }
.card-block-filter .right-filter { text-align: right; }
.card-block-filter .right-filter .filter-sorting { display: inline-flex; align-items: center; gap: 10px; }
.card-block-filter .right-filter select { padding: 6px 10px; border: 1px solid #d5e3ec;
                                          border-radius: 5px; background: #fff; color: #05385f; }

/* --- Brokerpagina ----------------------------------------------------------
 * De kenmerkentabel: per sectie een gekleurde kop, daaronder rijen van drie
 * kolommen met een label, een uitleg-icoon en de waarde.
 */

.detial-table .main-content-box { background: #fff; border: 1px solid #aed6ee;
                                  border-radius: 10px; padding: 20px; margin-bottom: 30px; }

.detial-table .box-inner { margin-bottom: 18px; }
.detial-table .box-inner-title { background: #e3f4fa; border-radius: 6px; padding: 12px 18px; }
.detial-table .box-inner-title h5 { margin: 0; font-size: 16px; font-weight: 700; color: #05385f; }

.detial-table .box-row { display: flex; border-bottom: 1px solid #e3f4fa; }
.detial-table .box-row:last-child { border-bottom: 0; }
.detial-table .box-col {
  flex: 1 1 0; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 18px; min-width: 0;
  border-right: 1px solid #e3f4fa; font-size: 14px; color: #516373;
}
.detial-table .box-col:last-child { border-right: 0; }
.detial-table .box-row:nth-child(even) { background: #f7fbfe; }

.detial-table .tooltip_content { display: flex; align-items: center; gap: 8px; min-width: 0; }
.detial-table .tooltip_content p { margin: 0; }
.detial-table .icons { flex: 0 0 auto; text-align: right; color: #05385f; }
.detial-table .icons.title_with_text { font-weight: 500; }

.broker-intro { max-width: 900px; margin: 0 auto 30px; }
.broker-intro h2 { text-align: center; }

.floating-box-design { background: #fff; border: 1px solid #aed6ee; border-radius: 10px;
                       padding: 16px 20px; margin: 20px auto; max-width: 1200px; }
.floating-box-design p { margin: 0 0 10px; }

/* Vinkjes voor de pluspunten in de rijkaart. Expliciet, want de brede
 * lijstregels van het thema zetten anders een bolletje neer. */
.brokerrij__usps li {
  list-style: none !important;
  background-image: url("../images/check-green.bf3cbaf971e9.svg") !important;
  background-repeat: no-repeat !important;
  background-position: left 3px !important;
  background-size: 15px !important;
  padding-left: 26px !important;
}
.brokerrij__voet { background: transparent; }
.brokerrij__voet .btn { margin: 0; }

/* --- Reviewpagina: samenvatting -------------------------------------------
 * Onderaan de review staat het totaalcijfer, de score per onderdeel en de
 * belangrijkste voordelen naast elkaar, zoals op de oude site.
 */
.review-samenvatting {
  display: grid; gap: 28px; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr);
  background: #fff; border: 1px solid #aed6ee; border-radius: 10px; padding: 24px;
}
.review-samenvatting h3 { font-size: 16px; margin-bottom: 14px; }
.review-cijfer { font-size: 42px; font-weight: 700; color: #0b7ec2; margin: 0 0 12px; line-height: 1; }
.review-samenvatting__score .btn { display: block; text-align: center; margin-bottom: 8px; }

@media (max-width: 900px) { .review-samenvatting { grid-template-columns: 1fr; } }



/* --- Blogbericht -----------------------------------------------------------
 * Maten overgenomen van de live pagina, gemeten op 1280 px breed:
 * kop over de volle kolom, portret 50 px, tekstkolom 854 px met 16 px inspring.
 */
.blog-social { padding: 40px 0 0; text-align: center; }
.blog-social h1 { max-width: none; margin: 0 0 10px; }
.blog-social > .container > ul {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  list-style: none; margin: 0 0 18px; padding: 0; min-height: 50px;
}
.blog-social > .container > ul > li { display: flex; align-items: center; gap: 8px;
                                      margin: 0; padding: 0; background: none; }
.blog-social .author-img img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.blog-social .author-img span { font-size: 14px; color: #516373; margin-right: 6px; }
.blog-social > .container > ul img { display: block; }
.blog-uitgelicht { display: block; max-width: 100%; height: auto; border-radius: 8px; margin: 0 auto; }

/* De tekstkolom zelf is al 900px breed en gecentreerd; alinea's vullen die
 * volledig, net als op de oude site. Afbeeldingen schalen mee. */
.single-post .content-right > p > img { max-width: 100%; height: auto; }

/* Deelknoppen en portret op hun echte maat (live: 50 / 40 / 38 px). */
.blog-social > .container > ul > li:nth-child(2) img { width: 40px; }
.blog-social > .container > ul > li:nth-child(3) img,
.blog-social > .container > ul > li:nth-child(4) img { width: 38px; }

/* --- Advertentiekolommen ---------------------------------------------------
 * De oude site zet links en rechts van de tekst een banner van 160x600. Op de
 * kennisbank regelt het thema dat zelf (`.left-sidebar`, negatieve marge en een
 * absolute rechterkolom). De blogdetailpagina deed dat via de Elementor-
 * stylesheet, die niet in het thema-CSS zit; die regels staan hieronder.
 *
 * Opzet: de kolom wordt over de volle hoogte van het artikel gespannen en de
 * banner erin plakt (`sticky`). Zo blijft hij meelopen bij het scrollen zonder
 * dat hij ruimte uit de tekstkolom haalt, precies zoals live.
 */
/* Kennisbank: de live site overschrijft de thema-regels (negatieve marge) met
 * twee absoluut geplaatste kolommen, gemeten op de oude site:
 *   linkerkolom  right: 1206px  -> rechterrand op 6px links van de container
 *   rechterkolom right: -230px
 * De tekstkolom houdt daardoor de volle breedte van de container.
 */
.single-kennisbank .banner-btm-info .container .left-sidebar {
  position: absolute; width: 224px; margin-left: 0; right: calc(100% + 6px);
}
.single-kennisbank .banner-btm-info .container .left-sidebar.right-sidebar {
  right: -230px; left: auto;
}
.single-kennisbank .banner-btm-info .container .info-box-text {
  width: 100%; padding: 0 0 10px;
}

/* Gemeten op de oude site (venster 1812px): de blogcontainer is daar 1500px
 * breed, de tekstkolom 900px gecentreerd, en de banners staan op 30px vanaf de
 * linkerrand en 44px vanaf de rechterrand van die container. */
.single-post .overview-content > .container { position: relative; max-width: 1500px; }
.single-post .content-right { max-width: 900px; margin-left: auto; margin-right: auto; }
.left-blog-banner, .right-blog-banner,
.left-onez-banner, .right-onez-banner {
  position: absolute; top: 0; bottom: 0; width: 160px; pointer-events: none;
}
.left-blog-banner { left: 30px; }
.right-blog-banner { right: 44px; }
/* Op het brokeroverzicht hangen de banners buiten de container, gemeten op de
 * oude site op 280px vanaf de rand. */
.page-brokers .overview-content-section > .container { position: relative; }
.left-onez-banner { left: -280px; }
.right-onez-banner { right: -280px; }
@media (max-width: 1780px) { .left-onez-banner, .right-onez-banner { display: none; } }
.left-blog-banner .ad-block, .right-blog-banner .ad-block,
.left-onez-banner .ad-block, .right-onez-banner .ad-block {
  position: sticky; top: 110px; pointer-events: auto;
}
.left-blog-banner img, .right-blog-banner img,
.left-onez-banner img, .right-onez-banner img,
.single-kennisbank .left-sidebar .ad-block img {
  display: block; width: 160px; height: auto; border-radius: 6px;
}

/* De tekstkolom van een blogartikel is 900px breed en staat gecentreerd; de
 * openingsafbeelding is breder (1200px), net als op de oude site. */

@media (max-width: 1499px) { .left-blog-banner, .right-blog-banner { display: none; } }

/* De openingsafbeelding staat boven de advertentiekolommen, over de volle
 * breedte van de container. */
/* De openingsafbeelding loopt door tot de rand van de container (1200px); de
 * negatieve marge heft de padding van .container op. */
.blog-hero { margin: 0 -15px; }
.blog-hero p { margin: 0; }
.blog-hero img { display: block; width: 100%; height: auto; border-radius: 8px; }


/* Een alinea die alleen vetgedrukte tekst bevat gebruikte de redactie als
 * tussenkop. Het thema toont die groter; zonder deze regel valt hij weg in de
 * lopende tekst. */
/* `:only-child` kijkt alleen naar element-kinderen, niet naar tekst. Daardoor
 * viel ook "<p><strong>Beleggen</strong> wordt steeds populairder.</p>"
 * eronder en werd die alinea als kop getoond — bij 106 alinea's. De echte
 * tussenkoppen krijgen nu bij het inlezen een klasse
 * (`manage.py markeer_tussenkoppen`); alleen die wordt hier opgemaakt. */
/* De tussenkoppen zijn nu echte <h4>-koppen (zie
 * `manage.py markeer_tussenkoppen`); het thema maakt die zelf op, dus hier
 * hoeft niets meer te staan. */

/* --- Vaste disclaimerbalk ---------------------------------------------------
 * Staat op de oude site onderaan het scherm vastgezet (gemeten: witte balk,
 * 28px hoog, zwarte tekst van 16px, boven alles). De klasse zat wel in de
 * opmaak maar had geen enkele regel, waardoor de balk onderaan het document
 * verdween in plaats van in beeld te blijven.
 */
.cfd_warning_bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #fff; color: #000; font-size: 16px; line-height: 1.75;
  text-align: center; padding: 0 15px;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.08);
}
/* Zodat de balk de laatste regel van de voettekst niet afdekt. */
body { padding-bottom: 28px; }

@media (max-width: 767px) {
  .cfd_warning_bar { font-size: 12px; line-height: 1.5; padding: 4px 12px; }
  body { padding-bottom: 40px; }
}

/* --- Taalkiezer -------------------------------------------------------------
 * Het thema verbergt de vlaggenlijst en liet jQuery hem openklappen. Dat kan
 * zonder script: openklappen bij aanwijzen en bij toetsenbordfocus, zodat de
 * kiezer ook zonder muis bereikbaar blijft.
 */
ul.search-details li .language:hover .flags,
ul.search-details li .language:focus-within .flags { display: block; }

/* De zoekknop in een categorieoverzicht is op de oude site karmijnrood
 * (gemeten: #cd2653), niet turquoise zoals de andere knoppen. */
.card-block-filter .left-filter .btn-primary { background-color: #cd2653; color: #fff; border: 0; }
.card-block-filter .left-filter .btn-primary:hover { background-color: #b21f47; }
.card-block-filter .left-filter form { display: block; }
.card-block-filter .left-filter .st-search-input {
  display: block; width: 100%; max-width: 390px; margin-bottom: 12px;
  padding: 12px 15px; border: 1px solid #d5e3ec; border-radius: 5px;
  font-size: 14px; color: #05385f; background: #fff;
}

/* Het label "Toon alles" heeft geen eigen kleur; op de oude site is het een
 * omlijnd wit label tussen de gekleurde labels. */
.filter-top .filter-row .left-colum ul.tag-listing li a.alle {
  background: #fff; color: #05385f; border: 1px solid #d5e3ec;
}
.filter-top .filter-row .left-colum ul.tag-listing li a.alle::before { background-color: #05385f; }
.filter-top .blog-categoty { font-size: 15px; font-weight: 700; color: #05385f; margin: 0 0 14px; }

/* Vergelijkvakje op een brokerkaart en de knop eronder. */
.vergelijk-vinkje { display: inline-flex; align-items: center; gap: 8px;
                    font-size: 14px; color: #516373; cursor: pointer; }
.vergelijk-vinkje input { width: 16px; height: 16px; accent-color: #0b7ec2; }
.vergelijk-balk { margin: 10px 0 30px; text-align: right; }

/* --- Brokerdetail: introductie met uitklapper --------------------------------
 * De oude site knipt de introductie af op ongeveer zes regels en zet er een
 * "Lees meer" onder. Dat deed jQuery; hier doet een verborgen selectievakje
 * het, zodat de pagina zonder script werkt.
 */
.single-brokers .banner-btm-info > .container { position: relative; }
.single-brokers .info-box-inner {
  max-height: 190px; overflow: hidden; transition: max-height 0.25s ease;
}
.uitklap-schakelaar:checked ~ .info-box-inner { max-height: none; }
.rdmr-div { text-align: center; padding-top: 6px; }
.read-more-btn { cursor: pointer; color: #0b7ec2; font-weight: 500; display: inline-block; }
.read-more-btn .minder { display: none; }
.uitklap-schakelaar:checked ~ .rdmr-div .read-more-btn .meer { display: none; }
.uitklap-schakelaar:checked ~ .rdmr-div .read-more-btn .minder { display: inline; }
.uitklap-schakelaar:checked ~ .rdmr-div .read-more-btn .fa { transform: rotate(180deg); }
.read-more-btn .fa { transition: transform 0.2s ease; display: inline-block; }

/* De advertentiekolommen naast de introductie hangen buiten de container,
 * gemeten op de oude site (linkerrand 69px, rechterrand 1730px bij 1812px). */
.left-broker-banner, .right-broker-banner {
  position: absolute; top: 0; bottom: 0; width: 160px; pointer-events: none;
}
.left-broker-banner { left: -340px; }
.right-broker-banner { right: -340px; }
.left-broker-banner .ad-block, .right-broker-banner .ad-block {
  position: sticky; top: 110px; pointer-events: auto;
}
.left-broker-banner img, .right-broker-banner img {
  display: block; width: 160px; height: auto; border-radius: 6px;
}
@media (max-width: 1900px) { .left-broker-banner, .right-broker-banner { display: none; } }

/* --- Reviewoverzicht ---------------------------------------------------------
 * De kaarten, de knoppenrij en het raster komen allemaal uit het thema
 * (`#my_cat .gridview-div ...`). Hier staat alleen wat het thema niet had:
 * de sorteerkeuze, die op de oude site door een zoekdienst werd gerenderd.
 */
.filter-fullsection > .container { display: flex; justify-content: space-between;
                                   align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.filter-fullsection .filter-sorting select { padding: 8px 12px; border: 1px solid #d5e3ec;
                                             border-radius: 5px; background: #fff; color: #05385f; }
/* De knopjes zijn bij ons links in plaats van klikbare spans; de opmaak komt
 * verder helemaal uit het thema. */
.check_box_search_cat_tag a { color: inherit; text-decoration: none; display: inline-block; }
.check_box_search_cat_tag .active-cls { box-shadow: 0 0 0 2px rgba(5, 56, 95, 0.25); }

/* --- Filters openklappen op mobiel -------------------------------------------
 * Het thema verbergt de filterblokken onder 1200px en liet JavaScript ze
 * openklappen via `#sub-toggle`. Dat script hebben we niet, dus zonder deze
 * regels waren de filters op een telefoon onbereikbaar.
 */
#sub-toggle { display: none; }

@media (max-width: 1199px) {
  #sub-toggle { display: block; cursor: pointer; margin-left: auto; }
  .filters-schakelaar:checked ~ .sidebar-header + .filter-block,
  .filters-schakelaar:checked ~ .filter-block { display: block; }
  .filters-schakelaar:checked ~ .filter-knop { display: inline-block; }
  .filters-schakelaar:checked ~ .sidebar-header #sub-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(4px, 4px);
  }
  .filters-schakelaar:checked ~ .sidebar-header #sub-toggle span:nth-child(2) { opacity: 0; }
  .filters-schakelaar:checked ~ .sidebar-header #sub-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(4px, -4px);
  }
  #sub-toggle span {
    display: block; width: 20px; height: 2px; margin: 4px 0;
    background: #0b7ec2; border-radius: 2px; transition: transform .2s, opacity .2s;
  }
}

/* --- Scorebalk op een reviewkaart --------------------------------------------
 * Het thema tekent de baan, maar hoogte en kleur van de vulling zette de oude
 * site per balk met JavaScript in een `style`-attribuut. Zonder script bleef
 * de balk daardoor leeg. De kleur is die van de oude site (#7fb827).
 */
.lander-progressbar .progresses .bar {
  height: 10px; background-color: #7fb827; border-radius: 5px;
}

/* Het soortlabel onder een zoekresultaat: bijzaak, dus klein en grijs. */
.zoek-soort { display: inline-block; margin-top: 6px; font-size: 12px;
              color: #5a7088; text-transform: lowercase; }

/* Een bannerkop die geen H1 is (de tekst heeft er zelf al een) moet er wel
 * hetzelfde uitzien als een H1 in diezelfde banner. */
.banner-section .banner-content .banner-kop {
  font-size: 35px; line-height: 45px; font-weight: 700; color: #fff;
}

/* De leestips staan op de oude site in een slider die vier kaarten naast
 * elkaar zet; het raster van het thema doet er drie. Zonder deze regel valt de
 * vierde naar een tweede rij en wordt de sectie bijna twee keer zo hoog. */
@media (min-width: 1200px) {
  .blog-detail-carosial .blog-listing .blog-col { width: 25%; }
}

/* --- Schakelaars zonder JavaScript -------------------------------------------
 * Het mobiele menu, de filterkolom, de veelgestelde vragen en de uitklaptekst
 * werken met een verborgen selectievakje. Dat stond eerst op `hidden`, en dan
 * kan niemand ze met de tabtoets bereiken: het vakje is niet focusbaar en een
 * `<label>` is dat uit zichzelf ook niet. Met de tabtoets waren die vier
 * onderdelen dus onbedienbaar.
 *
 * Hier is het vakje wel aanwezig en focusbaar, maar onzichtbaar. De focusring
 * verschijnt op het label ernaast, zodat je ziet waar je bent.
 */
.schakelaar {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.schakelaar:focus-visible + label,
.schakelaar:focus-visible ~ .sidebar-header label,
.schakelaar:focus-visible ~ label,
.schakelaar:focus-visible ~ .accordion-content-block label,
.schakelaar:focus-visible ~ .rdmr-div label {
  outline: 3px solid #15b9ed;
  outline-offset: 2px;
}

/* Bladeren onder een overzicht. */
.bladeren { display: flex; align-items: center; justify-content: center;
            gap: 18px; margin: 30px 0 10px; }
.bladeren__stand { font-size: 14px; color: #5a7088; }

/* Koppen die van niveau zijn verschoven staan NIET hier. `bouw_thema` laat
   elke thema-regel op `h5` ook gelden voor `.kop-als-h5`, en zo voor elk
   niveau. Dat is nauwkeuriger dan het hier overschrijven: het neemt ook de
   regels mee die alleen binnen een media-query gelden en de regels die aan een
   plek gebonden zijn (`.card-head h5`). Zie core/themabouw.py. */

/* De carrousels van het thema (`.point-carousel`) draaien op de slick-plugin.
   Die zet de breedte van elk item met JavaScript; zonder die plugin krijgen de
   items geen breedte en staan ze onder elkaar op volle containerbreedte. Dat
   was te zien op de brokerpagina's, de reviews, de homepage en onder elk
   kennisbankartikel.

   De maten hieronder zijn afgelezen van de oude site: container 1200 breed,
   drie items van 400 met 15px lucht aan weerszijden, dus een blok van 370 dat
   15px van de containerrand begint. Wat er niet in past zakt naar een volgende
   rij; dat is voor een bezoeker zonder muis beter dan een slider. */
.point-carousel { display: flex; flex-wrap: wrap; }
.point-carousel > .item { width: 33.3333%; padding: 0 15px; }
@media (max-width: 991px) { .point-carousel > .item { width: 50%; } }
@media (max-width: 575px) { .point-carousel > .item { width: 100%; } }

/* ------------------------------------------------------------------ *
 * Reviewpagina                                                        *
 *                                                                     *
 * De reviewpagina's zijn op de oude site in Elementor gebouwd. Die    *
 * opmaak zit niet in de thema-CSS (`bouw_thema` laat elementor er     *
 * bewust uit), dus de onderdelen die daaraan hingen staan hier, met   *
 * de waarden zoals ze in de browser op de oude site gemeten zijn.     *
 * ------------------------------------------------------------------ */

/* De tabel met voor- en nadelen. */
.text-page-wrapper table {
  width: 100%;
  border-collapse: collapse;
  background: #f5fbfd;
  border-radius: 5px;
  overflow: hidden;
  margin: 0 0 30px;
}
.text-page-wrapper table th {
  background: #e3f4fa;
  color: #0b7ec2;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 28px 20px 25px 34px;
  border: 1px solid #e3f4fa;
}
.text-page-wrapper table td {
  padding: 21px 20px 28px 34px;
  border: 1px solid #e3f4fa;
  vertical-align: top;
}
.text-page-wrapper table ul { margin: 0; padding: 0; }
.text-page-wrapper table li {
  list-style: none;
  padding: 8px 0 8px 25px;
  position: relative;
  color: #516373;
  font-size: 16px;
}
.text-page-wrapper table li > i {
  position: absolute;
  left: 0;
  top: 10px;
}
.text-page-wrapper table li > i.fa-plus-circle { color: #80ba27; }
.text-page-wrapper table li > i.fa-minus-circle { color: #ec1c24; }

/* De inhoudsopgave als kolom naast de tekst. Op de oude site staat die in
   een witte doos met een blauwe kop; de kop gebruikt dezelfde achtergrond
   als de zijbalken elders op de site. */
.review-kolommen { display: flex; align-items: flex-start; gap: 50px; }
.review-zijkolom { width: 222px; flex: 0 0 222px; }
.review-inhoudsopgave { width: 100%; }
.review-zijkolom .ad-block { margin-top: 30px; }
.review-zijkolom .ad-block img { max-width: 100%; height: auto; }
.review-inhoudsopgave__doos {
  background: #fff;
  box-shadow: 0 10px 120px 0 rgba(15, 14, 16, .13);
  /* De kopbalk van het thema rondt zijn bovenhoeken af; zonder dezelfde
     ronding op de doos steekt er een witte punt onder het blauw uit. */
  border-radius: 5px;
  overflow: hidden;
  position: sticky;
  top: 20px;
}
/* De kopbalk komt uit het thema (`.sidebar-header`); alleen de tekst erin
   moet wit en op 20px, zoals op de oude site. */
.review-inhoudsopgave .sidebar-header h2 {
  color: #fff;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  margin: 0;
}

/* De lijst. De inspringing zat op de `ul` als marge van 31 pixels aan beide
   kanten; van de 222 bleef er dan 160 over en brak "Beleggingsmogelijkheden"
   over twee regels. De ruimte staat nu als padding op de regel zelf, zodat de
   scheidingslijn wel over de volle breedte loopt en de tekst meer ruimte
   heeft. */
.review-inhoudsopgave ul { margin: 0; padding: 6px 0; }
.review-inhoudsopgave li {
  list-style: none;
  padding: 0;
  border-bottom: 1px solid #eef4f8;
}
.review-inhoudsopgave li:last-child { border-bottom: 0; }

/* De lange selector is nodig, en precies zo lang als hij moet zijn. Het thema
   heeft een brede regel voor links in een lijst
   (`ul:not(...) li:not(...) > a:not(...)`) die `display: inline` zet en er een
   verlopend streepje onder tekent. Elke `:not()` telt daar als klasse, dus die
   regel weegt (0,3,3). Deze selector heeft drie klassen en vier elementen —
   (0,3,4) — en wint daar net van. Met een klasse minder verliest hij, en dan
   staan de regels zonder blokvorm en zonder hun eigen padding. */
.review-zijkolom nav.review-inhoudsopgave .review-inhoudsopgave__doos ul li a {
  /* Het verlopende streepje dat het thema onder zo'n link tekent. */
  background-image: none;
  color: #516373;
  font-size: 15px;
  line-height: 20px;
  display: block;
  /* Rechts ruimte voor het pijltje, zodat een lange titel er niet onder
     doorloopt. De maten zijn afgemeten aan de langste titel die nog op een
     regel hoort te passen: "Beleggingsmogelijkheden" is 177 pixels breed, en
     hiermee is er 178 beschikbaar. Met de eerdere 20/30 bleef er 172 over en
     brak dat woord af met een losse "n" op de tweede regel. */
  padding: 11px 26px 11px 18px;
  position: relative;
  /* Afbreken op een streepje in "Geld storten/opnemen" gaf een regel met een
     los woord; liever het hele woord naar de volgende regel. */
  overflow-wrap: break-word;
}
/* Het thema kleurt zo'n link bij aanwijzen `white !important` en laat het
   verlopende streepje eronder uitgroeien tot over de hele regel, zodat het wit
   op blauw komt te staan. Dat streepje staat hierboven uit, en zonder deze
   regel werd de tekst dus wit op de lichte achtergrond hier: onleesbaar. De
   `!important` is nodig om die van het thema te overstemmen. */
.review-zijkolom nav.review-inhoudsopgave .review-inhoudsopgave__doos ul li a:hover,
.review-zijkolom nav.review-inhoudsopgave .review-inhoudsopgave__doos ul li a:focus-visible {
  color: #0b7ec2 !important;
  background-color: #f7fbfe;
  background-image: none;
}
/* Het pijltje staat verticaal in het midden van de regel. Stond het op
   `top: 0`, dan bleef het bij een titel over twee regels aan de bovenkant
   hangen terwijl de tekst eronder doorliep. */
.review-zijkolom nav.review-inhoudsopgave .review-inhoudsopgave__doos ul li a::after {
  content: "\f105";
  font-family: FontAwesome;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #0b7ec2;
}
/* De tekstkolom is op de oude site 824 breed. `.info-box-text` van het thema
   zet daar een max-width van 980 op, vandaar de extra klasse ervoor. */
.review-kolommen .review-kolommen__tekst {
  flex: 0 1 824px; min-width: 0; max-width: 824px; margin: 0;
}

@media (max-width: 1199px) {
  .review-kolommen { display: block; }
  .review-zijkolom { width: auto; }
  .review-inhoudsopgave { width: auto; margin-bottom: 30px; }
  .review-inhoudsopgave__doos { position: static; }
  .review-kolommen__tekst { max-width: none; }
}

/* Zoekbalk op de kennisbankpagina: veld, keuzemenu en knop op een rij.
   Maten van de oude site: veld 291x48 met een afronding links, keuzemenu 208
   breed op dezelfde witte balk, en een groene knop van 160x50 ernaast. */
.zoekbalk { display: flex; align-items: center; justify-content: center;
            flex-wrap: wrap; gap: 0; }
input.zoekbalk__tekst {
  width: 291px; height: 48px;
  padding: 15px 20px 15px 23px;
  border: 0; border-radius: 5px 0 0 5px;
  color: #0b7ec2; font-size: 16px; background: #fff;
}
input.zoekbalk__tekst::placeholder { color: #0b7ec2; opacity: .75; }
select.zoekbalk__categorie {
  width: 208px; height: 48px;
  padding: 0 20px 0 16px;
  border: 0; border-left: 1px solid #e3f4fa; border-radius: 0 5px 5px 0;
  background: #fff; color: #0b7ec2; font-size: 16px;
}
button.zoekbalk__knop {
  width: 160px; height: 50px; margin-left: 14px;
  background: #80ba27; border: 0; border-radius: 5px;
  color: #fff; font-size: 14px; padding: 12px 20px;
}
button.zoekbalk__knop:hover { background: #6da01f; color: #fff; }
@media (max-width: 767px) {
  input.zoekbalk__tekst, select.zoekbalk__categorie { width: 100%; border-radius: 5px; }
  select.zoekbalk__categorie { border-left: 0; margin-top: 8px; }
  button.zoekbalk__knop { width: 100%; margin: 10px 0 0; }
}

/* De telling achter een filterregel: rechts uitgelijnd, klein en zonder
   haakjes, zoals op de oude site. De tekst loopt eromheen als het label over
   twee regels valt.

   Het omhullende element blijft bewust ongemoeid: dat tekent met een
   ::before het vierkantje van het vinkje, en dat verdwijnt zodra je er
   display of position op zet. */
.filter-option .checkmark span.aantal,
.sidebar .filter-block li label span.aantal {
  float: right;
  margin-left: 8px;
  font-size: 14px;
  color: #414e5c;
}

/* Het vinkje "Vergelijken" staat op de oude site helemaal rechts in de
   knoppenrij van een brokerkaart. */
.brokerrij__voet .vergelijk-vinkje { margin-left: auto; }

/* Het zoekveld op de zoekpagina. De ingevulde tekst stond in het lichtgrijs van
   een plaatshouder (#a2a2a2 op wit is een contrast van 2,6 op 1); wie zijn eigen
   zoekopdracht wil bijstellen moet hem wel kunnen lezen. Breedte gelijk aan het
   veld op de kennisbankpagina. */
.zoekformulier { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
                 width: 100%; max-width: 720px; margin-bottom: 24px; }
.zoekformulier input[type="search"] {
  flex: 0 0 291px;
  width: 291px;
  color: #414e5c;
}
.zoekformulier select { height: 46px; color: #414e5c; }
@media (max-width: 575px) {
  .zoekformulier input[type="search"], .zoekformulier select { width: 100%; }
}

/* Het openingsbeeld van een blogartikel loopt op de oude site over de volle
   breedte van het scherm, niet tot de rand van de container. Gemeten: 1.806 px
   in een venster van 1.812. */
.blog-hero { width: 100%; margin: 0; }
.blog-hero img { width: 100%; height: auto; display: block; }

/* Het blok "Onze beoordeling van <broker>" tussen de inleiding en het eerste
   hoofdstuk van een review. De haken zijn die van het thema, maar de opmaak
   komt op de oude site uit Elementor en zit dus niet in thema.css. Alle waarden
   hieronder zijn daar in de browser afgelezen. */
.review-beoordeling { display: block; width: 100%; margin: 0 0 30px; }
.review-beoordeling .top_title {
  background: #e3f4fa;
  border-radius: 5px 5px 0 0;
  padding: 28px 20px 25px 34px;
}
.review-beoordeling .top_title h3 {
  font-size: 16px; font-weight: 700; color: #0b7ec2; margin: 0; line-height: 1.3;
}
.review-beoordeling .rating-review-block {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: #f5fbfd;
  border: 1px solid #e3f4fa;
  border-radius: 0 0 5px 5px;
  padding: 21px 20px 28px 34px;
}
.review-beoordeling .ons_scor {
  flex: 0 0 170px;
  background: #fff;
  text-align: center;
  padding: 10px 25px 40px;
  font-size: 14px;
  color: #516373;
}
.review-beoordeling .start-ratin {
  font-size: 22px; font-weight: 700; color: #516373; margin: 0;
}
.review-beoordeling .start-ratin img { vertical-align: -2px; margin-right: 4px; }
.review-beoordeling .ons_scor > span { display: block; font-size: 14px; color: #0b7ec2; }

.review-beoordeling .ratings-list { flex: 1 1 auto; padding: 0 60px 0 25px; }
.review-beoordeling .ratings-list ul { margin: 0; padding: 0; }
.review-beoordeling .ratings-list li {
  display: flex !important;
  align-items: center;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 14px !important;
}
.review-beoordeling .ratings-list li > span {
  flex: 0 0 140px; font-size: 14px; color: #516373;
}
.review-beoordeling .ratings-list .progresses {
  flex: 1 1 auto;
  height: 10px;
  background: #c9e6f5;
  border-radius: 14px;
  overflow: hidden;
  margin-right: 12px;
}
.review-beoordeling .ratings-list .bar {
  display: block; height: 10px; background: #7fb827; border-radius: 14px;
}
.review-beoordeling .ratings-list li > .progresses + p,
.review-beoordeling .ratings-list p {
  margin: 0; font-size: 13px; color: #516373; flex: 0 0 26px; text-align: right;
}

@media (max-width: 767px) {
  .review-beoordeling .rating-review-block { display: block; padding: 20px; }
  .review-beoordeling .ons_scor { padding: 10px 20px 20px; }
  .review-beoordeling .ratings-list { padding: 20px 0 0; }
  .review-beoordeling .ratings-list li > span { flex-basis: 110px; }
}

/* De kostentabel in een review. Op de oude site bouwt Elementor die uit losse
   rijen op; hier is het een echte tabel. Kolommen 261 en 483 binnen 744, met de
   kopregel in dezelfde tinten als de voor- en nadelentabel. */
.text-page-wrapper table.kostentabel { width: 744px; max-width: 100%; margin: 0 auto 30px; }
.text-page-wrapper table.kostentabel th { font-weight: 500; }
.text-page-wrapper table.kostentabel td { color: #5a7088; font-size: 16px; }
.text-page-wrapper table.kostentabel td:first-child { width: 261px; }
.text-page-wrapper table.kostentabel td strong { font-weight: 400; }
.text-page-wrapper table.kostentabel .info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  margin-left: 8px;
  border-radius: 50%;
  background: #0b7ec2;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  position: relative;
  cursor: help;
  vertical-align: 1px;
}
.text-page-wrapper table.kostentabel .info-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: 240px;
  padding: 10px 12px;
  border-radius: 5px;
  background: #05385f;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  z-index: 5;
}
.text-page-wrapper table.kostentabel .info-icon:hover .info-tooltip,
.text-page-wrapper table.kostentabel .info-icon:focus .info-tooltip { display: block; }
@media (max-width: 767px) {
  .text-page-wrapper table.kostentabel td:first-child { width: 40%; }
  .text-page-wrapper table.kostentabel .info-tooltip { width: 180px; }
}

/* --- Afbeeldingen in de tekst -------------------------------------------
 * Het thema zet `img { max-width: 100% }` maar geen `height: auto`. De
 * geimporteerde teksten dragen de afmetingen van WordPress als attribuut mee
 * (1.234 van de 2.172 afbeeldingen), en dan houdt de browser die hoogte vast
 * terwijl de breedte wel meeschaalt. Een grafiek van 1907x1237 werd zo
 * 824 breed en 1237 hoog: uitgerekt, en een halve schermlengte te lang.
 *
 * Op de oude site komt `height: auto` uit de stylesheet van Elementor, en die
 * laten we hier bewust liggen. Daarom staat de regel hier.
 */
.text-page-wrapper img,
.content-right img,
.content-area img,
.info-box-text img,
.artikel__lijf img,
.blog-hero img {
  height: auto;
}

/* De rij betaalmethoden: logo boven, naam eronder, naast elkaar. Op de oude
   site staat dat in Elementor-kolommen met de logo's op 55 pixels hoog. Daar
   worden ze in een vast vak van 396 bij 55 geperst; hier houden ze hun
   verhouding en is alleen de hoogte gelijk. */
.text-page-wrapper ul.betaalmethoden {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px 40px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.text-page-wrapper ul.betaalmethoden li {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
}
.text-page-wrapper ul.betaalmethoden img {
  display: block;
  height: 55px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  margin: 0 auto 8px;
}
.text-page-wrapper ul.betaalmethoden span {
  display: block;
  font-size: 16px;
  color: #5a7088;
}

/* De schermafbeeldingen van de app staan in de tekst als een reeks losse
   links met een figure erin. Op de oude site draaien die in een slider met
   vijf naast elkaar op 165 breed; zonder die plugin stonden ze hier onder
   elkaar op volle breedte — vijf telefoonschermen van anderhalve meter.
   Hier staan ze naast elkaar en zakken ze naar een volgende regel als ze niet
   passen. */
.text-page-wrapper > a:has(> figure) {
  display: inline-block;
  vertical-align: top;
  /* Vijf naast elkaar in een kolom van 824, net als op de oude site. */
  width: calc(20% - 1px);
  margin: 0 0 24px;
}
.text-page-wrapper > a > figure { margin: 0; }
.text-page-wrapper > a > figure img { width: 100%; height: auto; display: block; }


/* ==========================================================================
   Het brokeroverzicht uit de Finckers-API (/brokers/)
   ==========================================================================
   De API levert tabel en filter kant-en-klaar, met een eigen, neutrale
   opmaak (grijstinten, `#111827`/`#e5e7eb`). Hieronder staat alleen wat er
   nodig is om dat in de huisstijl te zetten: kleuren, randen en maten. Aan de
   elementen zelf wordt niets veranderd; de HTML komt ongewijzigd binnen.

   Let op bij het bijwerken van de API: de documentatie zegt met zoveel
   woorden dat hun classes kunnen veranderen en alleen `data-cta` vastligt.
   Breekt de opmaak na een versiesprong, dan is dit het bestand waar het
   misgaat, niet de tabel zelf.
   ========================================================================== */

/* --- De filters als zijbalk ---------------------------------------------- */

/* Het filterformulier is al een verticale stapel (`fnckrs-form-stack`) en past
   dus zo in de zijbalk van het thema. Eén ding zit in de weg: hun script meet
   de breedte van het bovenliggende element en zet alles onder de 640 pixels om
   naar een compacte vorm — een zwevende knop rechtsonder met een uitschuifblad.
   Een zijbalk is 270 breed, dus die vorm treedt hier altijd op.

   Op een breed scherm draaien we dat terug: in een zijbalk hoort het paneel
   gewoon open te staan, dat is de hele reden om er een zijbalk van te maken.
   Op smal scherm laten we hun vorm juist staan — daar is een uitschuifblad
   beter dan een muur van vinkjes boven de resultaten. */
/* De tweede selector telt vijf klassen aan hun kant; daarom staan `fnckrs-container`
   en `brokers-zijbalk` er hier allebei bij. Met een kortere selector wint hun
   regel, en dan klapt het paneel op een breed scherm alsnog naar de mobiele
   vorm zodra dat selectievakje aangevinkt raakt — bijvoorbeeld na het
   verkleinen en weer vergroten van het venster. */
@media only screen and (min-width: 992px) {
  .brokers-zijbalk .fnckrs-container.fnckrs-filter-panel.fnckrs-compact,
  .brokers-zijbalk .fnckrs-container.fnckrs-filter-switch:checked ~ .fnckrs-container.fnckrs-filter-panel.fnckrs-compact {
    display: flex;
    position: static;
    max-height: none;
    overflow: visible;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: transparent;
  }
  .brokers-zijbalk .fnckrs-filter-button.fnckrs-compact { display: none; }

  /* Dezelfde doos als een brokerkaart: witte achtergrond, lichtblauwe rand en
     dezelfde ronding. Zonder de schaduw die het thema er normaal onder legt.

     Alleen op een breed scherm. Daaronder staan het paneel en de knop zwevend
     buiten deze kolom, en blijft er een lege doos over: een randje van een paar
     pixels midden op de pagina. */
  .brokers-zijbalk {
    background: #fff;
    border: 1px solid #e3f4fa;
    border-radius: 10px;
  }
}

/* Geen schaduw en geen blauwe kopbalk: het thema hangt die schaduw aan
   `.sidebar` zelf, vandaar dat hij hier uit moet.

   Hier staat bewust geen `border-radius`: een media query telt niet mee voor
   de specificiteit, dus een waarde hier zou de ronding uit het blok hierboven
   overschrijven — dat staat eerder in het bestand. */
.brokers-zijbalk {
  box-shadow: none;
  /* Het thema zet de zijbalk 13 pixels omlaag omdat hij daar onder een kop
     hangt. Hier staat de kop boven beide kolommen, dus die verspringing moet
     eruit: anders begint het eerste filter lager dan de resultaten. */
  margin-top: 0;
}

/* Het thema zet met een `::before` op `.overview-content` een sierafbeelding
   linksboven (`overview-section-bg-top.png`, 576 bij 820). Die valt precies
   achter de filterkolom en schemert door de vinkjes heen. Hier dus weg; de
   tegenhanger rechtsonder staat achter de resultaten en blijft. */
.page-brokers .overview-content:before { content: none; }

/* De titel staat boven beide kolommen, zodat de filters en de resultaten op
   dezelfde hoogte beginnen. De marge eronder is die van de kaartenlijst, zodat
   de eerste kaart en het eerste filter gelijk liggen. */
.brokers-kop h1 { margin-bottom: 24px; }

/* De groepen krijgen de opmaak van de eigen filterzijbalk: elk blok gescheiden
   door een lijn, met dezelfde maatvoering als `.filter-block > ul > li` in het
   thema. Het paneel zet de blokken zelf al onder elkaar met een `gap`; die gaat
   eruit, want de scheidingslijn doet dat werk. */
.brokers-zijbalk .fnckrs-filter-panel { gap: 0; }
.brokers-zijbalk .fnckrs-facet,
.brokers-zijbalk .fnckrs-field {
  display: block;
  padding: 23px 24px 28px;
  border-top: 1px solid #dcdfe4;
}
/* De bovenste groep zonder scheidingslijn; de rand van de doos doet dat werk
   al. De inspringing houdt hij wel, anders plakt het eerste filter tegen die
   rand aan. */
.brokers-zijbalk .fnckrs-filter-panel > :first-child { border-top: 0; }

/* De groepsnaam: blauw en vet, met het pijltje van het thema erachter. Dat
   pijltje is ook op de eigen filterzijbalk sier en geen knop; het staat er
   omdat de rest van de site het daar heeft staan. */
.brokers-zijbalk .fnckrs-facet-title,
.brokers-zijbalk .fnckrs-label {
  position: relative;
  display: block;
  padding: 0 20px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: #0b7ec2;
  letter-spacing: 0.04em;
  text-transform: none;
}
.brokers-zijbalk .fnckrs-facet-title:after {
  content: "\f105";
  font: normal normal normal 17.48px/1 FontAwesome;
  position: absolute;
  right: 0;
  top: 4px;
  color: #0b7ec2;
}

/* Het vraagtekentje met de uitleg hoort bij de groepsnaam maar mag hem niet
   overstemmen; het pijltje staat uiterst rechts, dus dit ernaast. */
.brokers-zijbalk .fnckrs-help {
  margin-left: 6px;
  border: 1px solid rgba(11, 126, 194, 0.35);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  line-height: 1;
  background: transparent;
  color: #0b7ec2;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

/* De vinkjes. Het thema tekent zijn eigen vakje met een `::before` op een span;
   de API levert een gewoon selectievakje, dus dat vakje wordt hier op het
   element zelf getekend. Zelfde maat, rand en vinkafbeelding als in de eigen
   zijbalk. */
.brokers-zijbalk .fnckrs-facet .fnckrs-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 400;
  color: #414e5c;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.brokers-zijbalk .fnckrs-facet .fnckrs-check:last-child { margin-bottom: 0; }
.brokers-zijbalk .fnckrs-facet .fnckrs-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  border: 2px solid rgba(11, 126, 194, 0.3);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
}
.brokers-zijbalk .fnckrs-facet .fnckrs-check input[type="checkbox"]:checked {
  background-image: url("../images/icon-check.955bada48e8a.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 13px;
}
.brokers-zijbalk .fnckrs-facet .fnckrs-check input[type="checkbox"]:focus-visible {
  outline: 2px solid #0b7ec2;
  outline-offset: 2px;
}

/* De eerste groep is geen vinkjeslijst maar het sorteermenu. */
.brokers-zijbalk .fnckrs-input {
  width: 100%;
  margin-top: 12px;
  border: 2px solid rgba(11, 126, 194, 0.3);
  border-radius: 2px;
  padding: 9px 12px;
  color: #414e5c;
  font-size: 14px;
  background: #fff;
}

/* --- De kaarten ---------------------------------------------------------- */

/* Zelfde doos als de eigen brokerkaart (`.brokerrij`): witte achtergrond, een
   lichtblauwe rand in plaats van een grijze, en dezelfde zachte schaduw. */
.fnckrs-container .fnckrs-card,
.fnckrs-container.fnckrs-brokers .fnckrs-card {
  border: 1px solid #e3f4fa;
  border-radius: 10px;
  background: #fff;
  padding: 20px 24px;
  box-shadow: 0 10px 30px 0 rgba(15, 6, 35, .06);
}
.fnckrs-container .fnckrs-cards { gap: 20px; }
.fnckrs-container .fnckrs-count { color: #516373; font-weight: 400; }
.fnckrs-container .fnckrs-count strong { color: #05385f; }

/* De naam van de broker: 16px in de accentkleur, net als op de eigen kaart. */
.fnckrs-container .fnckrs-card-title .fnckrs-provider { color: #0b7ec2; font-size: 16px; }
.fnckrs-container .fnckrs-sub { color: #516373; font-size: 13px; }

/* Het scorevak, met dezelfde omlijsting als "Onze score" op de eigen kaart.
   De API zet het cijfer en het woord "score" in twee eigen spans; die staan
   hier onder elkaar, met het cijfer als hoofdzaak. */
.fnckrs-container .fnckrs-score {
  background: #f5fbfd;
  border: 1px solid #aed6ee;
  border-radius: 6px;
  padding: 6px 12px;
  color: #05385f;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.fnckrs-container .fnckrs-score-value { display: block; font-size: 18px; font-weight: 700; }
.fnckrs-container .fnckrs-score-label {
  display: block;
  font-size: 10px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6f8496;
}

/* Labels. Het geverifieerd-label houdt zijn eigen betekenis en blijft dus
   herkenbaar anders, maar in de groentint van de site. */
.fnckrs-container .fnckrs-pill {
  background: #e3f4fa;
  color: #0b7ec2;
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 400;
}
.fnckrs-container .fnckrs-pill-verified {
  background: #fff;
  border: 1px solid #80ba27;
  color: #5f8d1d;
}

/* Het logo op de maat van de eigen kaart. */
.fnckrs-container.fnckrs-brokers .fnckrs-logo {
  width: 140px; height: 56px;
  background: #f7fbfe; border-radius: 8px; padding: 8px;
}
.fnckrs-container.fnckrs-brokers .fnckrs-logo img { max-width: 124px; max-height: 40px; }

/* De cijferblokken (kosten, ETF's, toezicht). */
.fnckrs-container .fnckrs-stat { background: #f7fbfe; border-radius: 8px; }
.fnckrs-container .fnckrs-stat-label { color: #516373; letter-spacing: 0; }
.fnckrs-container .fnckrs-stat-value { color: #05385f; font-weight: 500; }
.fnckrs-container .fnckrs-muted { color: #97a9b8; }

/* De knoppen dragen `btn btn-success` en `btn btn-info`. `.btn` van het thema
   pakt de vorm al; alleen de kleur klopt nog niet — die valt terug op het
   turkoois van de basisknop. Groen voor de aanvraag, een blauwe omlijning voor
   "meer informatie", precies als op de eigen kaart. */
.fnckrs-container .btn-success { background-color: #80ba27; }
.fnckrs-container .btn-success:hover,
.fnckrs-container .btn-success:focus { background-color: #6e9e24; }
.fnckrs-container .btn-info {
  background-color: transparent;
  border: 1px solid #0b7ec1;
  color: #0b7ec1 !important;
}
.fnckrs-container .btn-info:hover,
.fnckrs-container .btn-info:focus { background-color: #0b7ec1; color: #fff !important; }
.fnckrs-container .btn-info:hover .fnckrs-icon,
.fnckrs-container .btn-info:focus .fnckrs-icon { stroke: #fff; }

/* De knoppen staan in een smalle kolom naast de kaartkop; de maatvoering van
   de themaknop (17px boven en onder) maakt die kolom anders hoger dan de
   kaart zelf. */
.fnckrs-container .fnckrs-card-aside .btn {
  padding: 11px 18px;
  font-size: 13px;
  white-space: nowrap;
}

/* De wettelijke waarschuwing van een aanbieder ("72,9% van de retailbeleggers
   verliest geld..."). Hij staat onder de knop op de brokerkaart en onder de
   knop in het zwevende blok op de brokerpagina.

   Bewust klein en gedempt, maar niet weggemoffeld: het is een verplichte
   melding, dus hij moet leesbaar blijven. Grijs #5a7088 op wit haalt een
   contrast van 5,3 en dat is ruim boven de norm. */
.broker-disclaimer {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 16px;
  color: #5a7088;
}
/* De oproep in de pagina zelf: de knop met de waarschuwing eronder. Het
   zwevende blok kan hem niet dragen — daar verbergt het thema onder 1920 pixels
   alles behalve de knoppen. */
.broker-oproep-section { padding: 0 0 40px; }
.broker-oproep {
  max-width: 824px;
  margin: 0 auto;
  padding: 24px;
  background: #f7fbfe;
  border: 1px solid #e3f4fa;
  border-radius: 10px;
  text-align: center;
}
.broker-oproep .broker-disclaimer {
  margin: 16px auto 0;
  max-width: 700px;
}
/* Zonder knop hoeft er geen ruimte boven de waarschuwing te staan. */
.broker-oproep .broker-disclaimer:first-child { margin-top: 0; }

/* --- De vier brokerkaarten op de homepage ---------------------------------
   Het thema zet ze pas vanaf 1550 pixels met z'n vieren op een rij; daaronder
   met z'n drieen. Op de oude site gaf dat niets, want daar was dit een slider
   waar elk aantal in past. Hier staan er altijd precies vier, en dus stond de
   vierde tussen 992 en 1549 pixels in zijn eentje op een tweede rij.

   Twee bij twee is daar de nette vorm: geen losse kaart, en de kaarten houden
   een leesbare breedte. Vanaf 1550 blijft het vier naast elkaar, zoals het
   thema het bedoelt. */
@media only screen and (min-width: 992px) and (max-width: 1549px) {
  .home .point-carousel-section .point-carousel .item { width: calc(50% - 15px); }
}

/* Even hoge kaarten, met de knoppen onderaan uitgelijnd. Zonder dit hangt de
   knoppenrij op de hoogte die de pluspunten toevallig opleveren, en met een
   disclaimer eronder verschilt dat nog meer. */
.point-carousel-wrapper .point-carousel .item { display: flex; }
.point-carousel-wrapper .point-carousel .single-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.point-carousel-wrapper .point-carousel .single-block > div {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* Duwt de knoppen naar de onderkant van de kaart. Staat er een waarschuwing
   onder, dan zakken ze tot vlak daarboven; de onderkant van de kaarten blijft
   dan gelijk liggen, wat de lijn is die je op een rij kaarten ziet. */
.point-carousel-wrapper .point-carousel .single-block .btn-wrapper { margin-top: auto; }

/* De waarschuwing zit tussen de pluspunten en de knop. `margin-top: auto` zet
   hem onderaan de vrije ruimte, zodat de knoppenrij eronder op dezelfde hoogte
   uitkomt als bij de kaarten zonder waarschuwing. */
.point-carousel-wrapper .point-carousel .single-block .broker-disclaimer {
  margin: auto 0 12px;
  /* Rechts ruimte voor de app-icoontjes: die staan absoluut in de rechteronder-
     hoek van de kaart en liepen dwars door de laatste regels heen. Het thema
     houdt bij de onderste pluspunt-regel dezelfde 70 pixels vrij. */
  padding: 10px 70px 0 0;
  border-top: 1px solid #bddcef;
}
/* Staat er een waarschuwing, dan heeft die de vrije ruimte al opgenomen. */
.point-carousel-wrapper .point-carousel .single-block .broker-disclaimer + .btn-wrapper {
  margin-top: 0;
}