.ka-intro-link { display:block; color:inherit; text-decoration:none; border-radius:4px; }
.ka-intro-link:hover h1, .ka-scripture a.ka-vt:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
.ka-scripture a.ka-vt { color:inherit; text-decoration:none; }
.ka-intro-link:focus-visible, .ka-scripture a.ka-vt:focus-visible { outline:2px solid var(--ka-gold-text, #9a7a2c); outline-offset:5px; }
.ka-kunst { max-width:1320px; margin:0 auto; padding:0 48px 48px; box-sizing:border-box; }
.ka-kunst h2 { margin:0 0 8px; font:600 28px/1.2 var(--ka-serif); }
.ka-kunst > p { color:var(--ka-ink-2); margin:0 0 24px; }
.ka-kunst-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.ka-kunstkaart { min-width:0; padding:16px; border:1px solid var(--ka-rule); border-radius:14px; background:var(--ka-surface); }
.ka-kunst-beeld { display:block; color:inherit; text-decoration:none; }
.ka-kunst-beeld img { display:block; width:100%; height:230px; object-fit:contain; }
.ka-kunst h3 { margin:16px 0 8px; font:500 22px/1.2 var(--ka-serif); }
.ka-kunst-ref { font:500 14px/1.4 var(--font-body); color:var(--ka-gold-text); }
.ka-kunst-beeld:hover h3 { text-decoration:underline; text-underline-offset:.15em; }
.ka-kunst-bron, .ka-kunst > p.ka-kunst-rechten { font:400 12px/1.5 var(--font-body); color:var(--ka-muted); margin:14px 0 0; }
.ka-kunst-bron a { color:inherit; }
.ka-kunst-beeld:focus-visible { outline:2px solid var(--ka-gold-text); outline-offset:5px; border-radius:4px; }
.ov-kunstwerk { max-width:580px; margin:0 auto 32px; }
.ov-kunstwerk > a, .ov-kunstwerk img { display:block; width:100%; height:auto; }
.ov-kunstwerk figcaption { margin-top:8px; font:500 15px/1.4 var(--font-body); color:var(--ka-ink-2); }
@media(max-width:768px) {
  .ka-kunst { padding:0 20px 32px; }
  .ka-kunst-grid { grid-template-columns:1fr; }
  .ka-kunst-beeld img { height:auto; }
}
.ka-footer-in { grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); }
@media(max-width:768px) { .ka-footer-in {grid-template-columns:1fr;} }

#topnav .topnav-logo { height:56px; max-width:200px; }
@media(max-width:768px){#topnav .topnav-logo{height:46px;max-width:156px;}}

body:not(.kt-popup-mode) .col-2026 sup.note-marker{display:none!important}

#content.reading-mode .verse-row{grid-template-columns:2rem minmax(0,1fr)}

/* Knoppen rechts in de hoofdstukbalk: Verschillen SV-OV en Kanttekeningen. */
.reader-knoppen { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.reader-diff-toggle { display:inline-flex; align-items:center; gap:7px; font:500 13.5px/1 var(--font-body); padding:7px 12px; border-radius:999px; border:1px solid var(--ka-rule, #d9d2c3) !important; background:transparent !important; color:var(--text-secondary, #555) !important; cursor:pointer; white-space:nowrap; }
/* Stand aan/uit: hol bolletje = uit, gevuld bolletje en gouden knop = aan. */
.reader-diff-toggle::before { content:""; flex:none; width:9px; height:9px; border-radius:50%; border:1.5px solid currentColor; box-sizing:border-box; opacity:.6; }
.reader-diff-toggle:hover { background:var(--ka-gold-wash, rgba(203,164,73,.14)) !important; }
/* !important: het donkere thema geeft alle knoppen een eigen achtergrond. */
.reader-diff-toggle[aria-pressed="true"] { border-color:#cba449 !important; background:#cba449 !important; color:#142e42 !important; font-weight:600; }
.reader-diff-toggle[aria-pressed="true"]::before { background:#142e42; border-color:#142e42; opacity:1; }
.reader-diff-toggle[aria-pressed="true"]:hover { background:#d6b35e !important; }
.reader-diff-toggle:focus-visible { outline:2px solid #cba449; outline-offset:2px; }

/* Kanttekeningen naast de tekst: alleen op brede schermen en als de schakelaar
   Kanttekeningen aan staat. Smal blijft de pop-up bij het nootcijfer. */
#content.reading-mode .verse-row .verse-cell.col-kt, #content .verse-cell.col-kt { display:none !important; }
@media (min-width:1100px) {
  body.kt-popup-mode #content.reading-mode #verses-container { max-width:1280px !important; }
  body.kt-popup-mode #content.reading-mode .verse-row { display:grid !important; grid-template-columns:2rem minmax(0,1.7fr) minmax(0,1fr) !important; column-gap:28px; align-items:start; }
  body.kt-popup-mode #content.reading-mode .verse-row .verse-cell.col-kt { display:block !important; min-width:0; padding:6px 0 6px 16px; border-left:1px solid var(--ka-rule-soft, #e6e0d4); font:400 13.5px/1.5 var(--font-body); color:var(--ka-ink-2, #4a4a4a); }
  body.kt-popup-mode #content.reading-mode .verse-row > .verse-num { grid-column:1; }
  .kt-item { margin:0 0 6px; padding:2px 4px; border-radius:4px; }
  .kt-item.kt-verwijzing { color:var(--ka-muted, #777); }
  .kt-item.is-actief { background:var(--ka-gold-wash, rgba(203,164,73,.18)); }
  .kt-m { font:600 11.5px/1 var(--ka-mono, monospace); color:var(--ka-gold-text, #9a7a2c); background:none; border:0; padding:0 3px 0 0; cursor:pointer; vertical-align:1px; }
  .kt-m:hover, .kt-m:focus-visible { text-decoration:underline; }
}
#mobile-topbar #mobile-diff-btn { flex:none; padding:6px 10px; font-size:13px; min-height:36px; }

/* Hoofdpagina: Johannes 1:1-5 met de kanttekeningen ernaast. */
.ka-passage-body { display:grid; grid-template-columns:minmax(0,1fr); gap:18px; }
.ka-passage-kt { border-top:1px solid var(--ka-rule-soft, #e6e0d4); padding-top:12px; }
.ka-passage-kt h3 { font:500 12px/1.2 var(--ka-mono, monospace); letter-spacing:.06em; text-transform:uppercase; color:var(--ka-muted, #777); margin:0 0 8px; }
#ka-passage-kt { max-height:260px; overflow:auto; position:relative; padding-right:6px; font:400 13.5px/1.5 var(--font-body); color:var(--ka-ink-2, #4a4a4a); }
#ka-passage-kt .kt-item { margin:0 0 6px; padding:2px 4px; border-radius:4px; }
#ka-passage-kt .kt-verwijzing { color:var(--ka-muted, #777); }
#ka-passage-kt .kt-item.is-actief { background:var(--ka-gold-wash, rgba(203,164,73,.18)); }
#ka-passage-kt .kt-m { font:600 11.5px/1 var(--ka-mono, monospace); color:var(--ka-gold-text, #9a7a2c); margin-right:2px; }
#ka-passage-kt .ref-link, #ka-passage-kt .ka-greek-link { color: var(--ka-gold-text, #9a7a2c); text-decoration: underline; text-underline-offset: 2px; }
#ka-passage-kt .ref-link:focus-visible, #ka-passage-kt .ka-greek-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.ka-scripture .note-marker { font:600 10.5px/1 var(--ka-mono, monospace); color:var(--ka-gold-text, #9a7a2c); cursor:pointer; vertical-align:super; padding:0 1px; }
@media (min-width:1100px) {
  .ka-hero { grid-template-columns:minmax(0,.85fr) minmax(0,1.55fr); }
  .ka-passage-body { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:24px; }
  .ka-passage-kt { border-top:0; border-left:1px solid var(--ka-rule-soft, #e6e0d4); padding:0 0 0 18px; }
  #ka-passage-kt { max-height:360px; }
}