/* Aanvulling op de oorspronkelijke info-pages.css: alleen ontbrekende onderdelen.
   De drie ontworpen pagina's zijn expliciet uitgesloten van iedere regel.
   Kopbalk, zijmenu, inhoudsvlak, tekst en gewone informatiepagina's blijven intact. */

/* Bestaande namenbanners: de volledige foto blijft zichtbaar en klikbaar. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.gk-namenbanner-link {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin: 20px 0;
  border: 1px solid var(--info-line);
  border-radius: 10px;
  background: #fffefb;
  text-decoration: none;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.gk-namenbanner-link img {
  display: block;
  float: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border-radius: 9px;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .d50.padding) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 18px 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100 > .d50.padding {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .d50.padding) > .d50 {
  float: none;
  width: auto;
  min-width: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d50 img.responsive { width: 100%; height: auto; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d50.padding > a {
  display: block;
  border: 1px solid var(--info-line);
  border-radius: 10px;
  background: #fffefb;
}
/* Deze d100-links bevatten een banner, geen zwevende inleidingsfoto. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d50.padding > a.d100:has(> picture) { padding: 0; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d50.padding > a.d100 > picture {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d50.padding img { display: block; width: 100%; height: auto; padding: 0; border-radius: 9px; }

/* Alle letters blijven gewone links; geen uitklapmenu of verborgen namen. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(div, p):has(> a.letterJongen, > a.letterMeisje) {
  float: none !important; /* De bestaande HTML zet hier inline float:left. */
  display: flex;
  flex-wrap: wrap;
  clear: both;
  gap: 6px;
  width: 100%;
  margin: 20px 0 24px;
  padding: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(a.letterJongen, a.letterMeisje) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--info-line);
  border-radius: 7px;
  background: var(--info-soft);
  color: var(--info-ink);
  font: 600 15px/1.4 var(--info-font);
  text-decoration: none;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(a.letterJongen, a.letterMeisje):is(:hover, [href="./"], [aria-current="page"]) {
  border-color: #bac9b2;
  background: var(--info-active);
  color: var(--info-ink);
}

/* Namen per letter en top 100: een complete, doorlopend genummerde lijst. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) {
  display: flow-root;
  clear: both;
  width: 100%;
  margin: 24px 0;
  padding: 0;
  border: 1px solid var(--info-line);
  border-radius: 9px;
  background: #fffefb;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter, .top10, .d50.tips) h3 {
  margin: 0;
  padding: 16px 18px;
  border-bottom: 1px solid var(--info-line);
  border-radius: 8px 8px 0 0;
  background: var(--info-soft);
  color: var(--info-ink);
  font: 600 17px/1.4 var(--info-font);
  letter-spacing: normal;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) > ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  margin: 0;
  padding: 8px 12px 14px;
  list-style: none;
  counter-reset: info-name;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter, .babynamen-top10-jongens, .babynamen-top10-meisjes) li {
  float: none;
  width: auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 10px 9px;
  border: 0;
  border-bottom: 1px solid #ecece3;
  background: transparent;
  color: var(--info-ink);
  font: 400 15px/1.55 var(--info-font);
  list-style: none;
  overflow-wrap: anywhere;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) li.grijs { background: #f8f7f0; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter, .babynamen-top10-jongens, .babynamen-top10-meisjes) li:not(.empty) {
  display: flex;
  align-items: baseline;
  gap: 9px;
  counter-increment: info-name;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter, .babynamen-top10-jongens, .babynamen-top10-meisjes) li:not(.empty)::before {
  content: counter(info-name);
  flex: 0 0 3ch;
  color: #78836f;
  font: 400 13px/1.55 var(--info-font);
  text-align: left;
}

/* Bestaande top 10- en tipsblokken, in dezelfde kaders als de infopagina's. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .top10, > .d50.tips) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
  margin: 20px 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .top10, > .d50.tips) > .d100 { grid-column: 1 / -1; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.d50.top10, .d50.tips) {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--info-line);
  border-radius: 9px;
  background: #fffefb;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.babynamen-top10-jongens, .babynamen-top10-meisjes, .jongensnamen-top) {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.babynamen-top10-jongens, .babynamen-top10-meisjes) > ul {
  display: block;
  margin: 0;
  padding: 4px 18px;
  list-style: none;
  counter-reset: info-name;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.babynamen-top10-jongens, .babynamen-top10-meisjes) li { padding: 9px 0; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.babynamen-top10-jongens-tekst, .babynamen-top10-meisjes-tekst) {
  padding: 14px 18px 17px;
  color: var(--info-copy);
  font: 400 15px/1.55 var(--info-font);
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu ul.tipslist { margin: 0; padding: 4px 18px; list-style: none; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu ul.tipslist li.tips {
  width: auto;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid #ecece3;
  background: none;
  font: 400 15px/1.55 var(--info-font);
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu ul.tipslist li.tips:last-child { border-bottom: 0; }

/* Kaartbeelden op de losse gedichtenpagina's; oorspronkelijke verhoudingen. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d25:has(> a.handig-kaart-image) {
  float: left;
  clear: none;
  width: 25%;
  min-width: 0;
  margin: 0 0 14px;
  padding: 0 7px;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.handig-kaart-image {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 14px;
  border: 1px solid var(--info-line);
  border-radius: 9px;
  background: #fffefb;
  text-decoration: none;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.handig-kaart-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu h2.nieuwste-ontwerpen { clear: both; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.index-link { display: inline-block; margin-bottom: 14px; font-size: 14px; }
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu > picture:has(> img[style*="float"]) {
  display: block;
  float: right;
  width: 145px;
  margin: 0 0 16px 22px;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu > picture > img[style*="float"] {
  float: none !important;
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu > ol:not([class]) { list-style: decimal; }

/* Bestaande vraagNr + vragen-links: vaste nummerkolom en hangende tekst.
   De br-elementen blijven staan, maar voegen geen extra lege regel toe. */
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .vragenBlok {
  display: flow-root;
  line-height: 0;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .vragenBlok > .vraagNr {
  float: left;
  clear: left;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  min-height: 26px;
  margin: 0 12px 0 0;
  border: 1px solid var(--info-line);
  border-radius: 5px;
  background: var(--info-soft);
  color: var(--info-ink);
  font: 600 13px/1.4 var(--info-font);
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .vragenBlok > a.vragen {
  display: block;
  min-height: 26px;
  margin: 0 0 14px 38px;
  line-height: 1.55;
}
body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .vragenBlok > br { font-size: 0; line-height: 0; }
body.info-interessante-links #content_with_menu > h1 + a[href] {
  display: block;
  max-width: 600px;
  min-height: 48px;
  margin: 6px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--info-line);
  border-radius: 8px;
  background: var(--info-soft);
  text-decoration: none;
}

@media (max-width: 1099px) {
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) > ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .d50.padding),
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d100:has(> .top10, > .d50.tips) { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 7px 8px 12px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) li { padding: 10px 7px; font-size: 14px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) li:not(.empty) { gap: 7px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter) li:not(.empty)::before { font-size: 12px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu :is(.jongensLetter, .meisjesLetter, .top10, .d50.tips) h3 { padding: 14px 16px; font-size: 16px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu .d25:has(> a.handig-kaart-image) { width: 50%; padding: 0 5px; margin-bottom: 10px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu a.handig-kaart-image { padding: 10px; }
  body.info-page:not(:is(.info-klantenservice, .info-voorbeeldteksten, .info-hoe-werkt-het)) #content_with_menu > picture:has(> img[style*="float"]) { width: 96px; margin: 2px 0 12px 15px; }
}