/* Relatieoverzicht (ontwerp goedgekeurd door de owner, 2026-10-05). Kleuren en maten uit het
   ontwerp; tot 720px de telefoon in de stijl van Google Contacts, daarboven de tabel. */
.os-rel {
  --rel-tekst: #14233A;
  --rel-tekst-2: #3F4955;
  --rel-tekst-3: #5A6472;
  --rel-link: #2C67A6;
  --rel-actie: #3473B5;
  --rel-rand: #D8DFE7;
  --rel-rand-2: #E3E8EE;
  --rel-rand-3: #A9B4C1;
  --rel-zacht: #D6E4F7;
  --rel-klant-bg: #BFE3C6; --rel-klant: #1D5A36;
  --rel-prospect-bg: #F6D98A; --rel-prospect: #5B3F00;
  --rel-leverancier-bg: #BFD5F2; --rel-leverancier: #1E4A80;
  --rel-overig-bg: #D9DEE5; --rel-overig: #3F4955;
  color: #1F2937;
}
.os-rel a { color: var(--rel-link); }
.os-rel a:hover { color: #1E4F85; }
.os-rel__titel { margin: 0 0 16px; font-size: 30px; font-weight: 800; letter-spacing: .01em; color: var(--rel-tekst); text-transform: uppercase; }
.os-rel__synth { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--rel-tekst-3); }
.os-rel-tel { display: none; }

/* -- Computer ------------------------------------------------------------------------- */
/* De tabel gebruikt de volle breedte (owner, 2026-10-07). */
.os-rel-pc { display: flex; flex-direction: column; gap: 16px; }
.os-rel-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--rel-rand); }
.os-rel .os-rel-tab { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--rel-tekst); font-size: 15px; font-weight: 600; text-decoration: none; }
.os-rel .os-rel-tab span { font-weight: 500; color: var(--rel-tekst-3); }
.os-rel .os-rel-tab.is-gekozen { border-bottom-color: var(--rel-actie); color: #1E4F85; font-weight: 700; }
.os-rel-kaart { position: relative; background: #fff; border: 1px solid var(--rel-rand); border-radius: 10px; }
.os-rel-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rel-rand-2); }
.os-rel-balk__zoek { flex: 1 1 240px; min-width: 0; max-width: 460px; }
.os-rel-balk__zoek input { width: 100%; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #BFC8D2; border-radius: 8px; font: inherit; font-size: 15px; color: #1F2937; background: #fff; }
.os-rel .os-rel-knop { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 8px; background: var(--rel-actie); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.os-rel .os-rel-knop:hover { color: #fff; background: #2C67A6; }
.os-rel-balk__vulling { flex: 1; }
.os-rel-balk__aantal { font-size: 14px; color: var(--rel-tekst-3); }
.os-rel-kolomknop { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid #BFC8D2; background: #fff; color: var(--rel-tekst); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.os-rel-kolomknop[hidden] { display: none; }
.os-rel-per { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rel-tekst-3); }
.os-rel-per select { height: 44px; padding: 0 8px; border: 1px solid #BFC8D2; border-radius: 8px; background: #fff; color: var(--rel-tekst); font: inherit; font-size: 15px; }
.os-rel-per__toon { height: 44px; padding: 0 12px; border: 1px solid #BFC8D2; border-radius: 8px; background: #fff; color: var(--rel-tekst); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.os-rel-soorten { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 16px; border-bottom: 1px solid var(--rel-rand-2); }
.os-rel .os-rel-soorten a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid #CBD3DC; color: var(--rel-tekst); font-size: 14px; font-weight: 600; text-decoration: none; }
.os-rel .os-rel-soorten a span { font-weight: 500; color: var(--rel-tekst-3); }
.os-rel .os-rel-soorten a[aria-current] { background: var(--rel-tekst); border-color: var(--rel-tekst); color: #fff; }
.os-rel .os-rel-soorten a[aria-current] span { color: #C9D3DF; }
.os-rel-filter { margin: 0; padding: 10px 16px; font-size: 14px; color: var(--rel-tekst-2); border-bottom: 1px solid var(--rel-rand-2); }
.os-rel-kolommen { position: absolute; right: 16px; top: 64px; z-index: 5; width: 300px; max-width: calc(100% - 32px); background: #fff; border: 1px solid var(--rel-rand); border-radius: 10px; box-shadow: 0 8px 24px rgba(12, 26, 43, .18); padding: 8px 0; }
.os-rel-kolommen[hidden] { display: none; }
.os-rel-kolommen__lijst { max-height: 420px; overflow-y: auto; }
.os-rel-kolommen__lijst label { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 16px; font-size: 15px; color: var(--rel-tekst); cursor: pointer; }
.os-rel-kolommen__lijst label.is-vast { color: var(--rel-tekst-3); cursor: default; }
.os-rel-kolommen__lijst input { width: 18px; height: 18px; }
.os-rel-kolommen__voet { display: flex; align-items: center; gap: 8px; padding: 8px 16px 4px; border-top: 1px solid var(--rel-rand-2); }
.os-rel-kolommen__voet span { flex: 1; }
.os-rel-kolommen__voet button { height: 40px; padding: 0 10px; background: transparent; border: 0; color: var(--rel-link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.os-rel-kolommen__voet .os-rel-kolommen__klaar { padding: 0 12px; border-radius: 8px; border: 1px solid #BFC8D2; background: #fff; color: var(--rel-tekst); }
.os-rel-tabelvak { position: relative; overflow-x: auto; }
.os-rel-tabel { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.os-rel-tabel thead tr { background: #F3F6F9; }
.os-rel-tabel th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--rel-tekst-2); text-transform: uppercase; white-space: nowrap; }
.os-rel-tabel td { padding: 12px 16px; vertical-align: middle; border-top: 1px solid var(--rel-rand-2); }
.os-rel-tabel [hidden] { display: none; }
/* Kolommen slepen en verbreden, zoals in Excel (owner, 2026-10-07; os-relaties.js). */
.os-rel-tabel th[data-kolom] { position: relative; cursor: grab; user-select: none; touch-action: pan-y; }
.os-rel-tabel th.is-gesleept { opacity: .5; cursor: grabbing; }
.os-rel-greep { position: absolute; top: 0; right: 0; bottom: 0; width: 10px; cursor: col-resize; touch-action: none; }
.os-rel-greep::after { content: ""; position: absolute; top: 10px; bottom: 10px; right: 3px; width: 2px; border-radius: 1px; background: transparent; }
.os-rel-tabel th[data-kolom]:hover .os-rel-greep::after, .os-rel-tabel.is-breedte .os-rel-greep::after { background: var(--rel-rand-3); }
.os-rel-tabel.is-breedte, .os-rel-tabel.is-breedte th { cursor: col-resize; }
.os-rel-plek { position: absolute; top: 0; z-index: 2; width: 3px; border-radius: 2px; background: var(--rel-actie); pointer-events: none; }
/* Sorteren op kolom (owner, 2026-10-08): de titel is een link, met een pijltje bij de gekozen kolom. */
.os-rel .os-rel-sorteer { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; cursor: pointer; }
.os-rel .os-rel-sorteer:hover { color: var(--rel-tekst); text-decoration: underline; }
.os-rel .os-rel-sorteer.is-gesorteerd { color: var(--rel-tekst); }
.os-rel-plek[hidden] { display: none; }
.os-rel-vulcel { display: none; }
.os-rel-tabel.is-vast { table-layout: fixed; }
.os-rel-tabel.is-vast .os-rel-vulcel { display: table-cell; padding: 0; }
.os-rel-tabel.is-vast th, .os-rel-tabel.is-vast td { box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; }
.os-rel-tabel.is-vast .os-rel-naamcel > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.os-rel-naamcel { display: flex; align-items: center; gap: 10px; }
.os-rel-naamcel a { font-weight: 600; white-space: nowrap; }
.os-rel-icoon { flex: none; width: 30px; height: 30px; border-radius: 999px; background: #EEF2F6; color: var(--rel-tekst-2); display: flex; align-items: center; justify-content: center; }
.os-rel-via { display: block; font-size: 13px; color: var(--rel-tekst-2); }
.os-rel-rollen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-rel-rolbadge { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.os-rel-rolbadge--klant { background: #DCEFE2; color: #1D5A36; }
.os-rel-rolbadge--prospect { background: #FBEFC8; color: #6E4A00; }
.os-rel-rolbadge--leverancier { background: #DCE7F5; color: #1E4A80; }
.os-rel-rolbadge--overig { background: #E9EDF2; color: var(--rel-tekst-2); }
.os-rel-extra { font-size: 13px; color: var(--rel-tekst-3); }
.os-rel-leeg { color: var(--rel-tekst-3); }
.os-rel-nowrap, .os-rel-tabel td[data-kolom="adres"], .os-rel-tabel td[data-kolom="postcode"] { white-space: nowrap; }
.os-rel-ontbreekt { padding: 2px 8px; border-radius: 999px; background: #FDE5D8; color: #8A2E0A; font-size: 12px; font-weight: 600; white-space: nowrap; }
.os-rel-geen { margin: 0; padding: 20px 16px; font-size: 15px; color: var(--rel-tekst-3); }
.os-rel-pagina { display: flex; align-items: center; gap: 16px; padding: 12px 16px; font-size: 14px; color: var(--rel-tekst-3); }

/* -- Telefoon ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .os-rel-pc { display: none; }
  .os-rel-tel { display: block; padding-bottom: 96px; }
  .os-rel__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .os-rel__synth { margin: 0 4px 10px; }
  .os-rel-tel__zoek { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 6px 0 6px; border-radius: 999px; background: #E1E7EF; color: var(--rel-tekst-2); }
  .os-rel-tel__zoek input { flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: inherit; font-size: 17px; color: #1F2937; outline-offset: 2px; }
  .os-rel-tel__zoek input::-webkit-search-cancel-button { display: none; }
  .os-rel-tel__vergrootglas, .os-rel-tel__wis { flex: none; width: 44px; height: 44px; border-radius: 999px; background: transparent; border: 0; color: var(--rel-tekst-2); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
  .os-rel-groepen { margin: 6px -4px 0 -2px; }
  .os-rel-groepen__knop { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 8px; border-radius: 8px; font-size: 17px; font-weight: 600; color: var(--rel-tekst); list-style: none; cursor: pointer; }
  .os-rel-groepen__knop::-webkit-details-marker { display: none; }
  .os-rel-groepen__scrim { display: none; }
  .os-rel-groepen[open] .os-rel-groepen__scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(12, 26, 43, .45); }
  .os-rel-groepen__paneel { display: none; }
  .os-rel-groepen[open] .os-rel-groepen__paneel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 85dvh; overflow-y: auto; background: #F6F8FB; border-radius: 24px 24px 0 0; padding: 10px 0 calc(24px + env(safe-area-inset-bottom)); }
  .os-rel-groepen__greep { width: 40px; height: 4px; border-radius: 999px; background: #8A95A3; margin: 0 auto 14px; }
  .os-rel-groepen__kop { padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: var(--rel-tekst-2); }
  .os-rel .os-rel-groepen__optie { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 24px; color: var(--rel-tekst); font-size: 17px; text-decoration: none; }
  .os-rel .os-rel-groepen__optie svg { color: var(--rel-link); }
  .os-rel .os-rel-groepen__optie--sub { min-height: 48px; padding-left: 62px; font-size: 16px; }
  .os-rel-groepen__leeg { width: 22px; height: 22px; flex: none; }
  .os-rel-groepen__optie--sub .os-rel-groepen__leeg, .os-rel-groepen__optie--sub svg { width: 18px; height: 18px; }
  .os-rel-groepen__label { flex: 1; }
  .os-rel-groepen__aantal { font-size: 15px; color: var(--rel-tekst-3); }
  .os-rel-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -12px; padding: 0 12px 4px; }
  .os-rel .os-rel-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 44px; box-sizing: border-box; padding: 0 14px; border-radius: 8px; border: 1px solid var(--rel-rand-3); background: #fff; color: var(--rel-tekst); font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; }
  .os-rel .os-rel-chip.is-gekozen { border-color: var(--rel-tekst); background: var(--rel-zacht); }
  .os-rel-tel__sectie { padding: 14px 12px 6px; font-size: 14px; font-weight: 600; color: var(--rel-tekst-2); }
  /* Gesorteerd op … · Op naam sorteren: alleen buiten de standaardvolgorde (owner, 2026-10-12). De link is 44 px hoog.
     De punt staat in de linkerrand van de link; gaat de link naar de volgende regel, dan valt die rand buiten het blok. */
  .os-rel-tel__sortering { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 12px 0; overflow: hidden; font-size: 14px; color: var(--rel-tekst-2); }
  .os-rel-tel__sortering > span { margin-right: 18px; }
  .os-rel .os-rel-tel__sortering a { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-left: -18px; padding-left: 18px; font-weight: 600; }
  .os-rel .os-rel-tel__sortering a::before { content: "·"; content: "·" / ""; position: absolute; left: 0; width: 18px; text-align: center; font-weight: 400; color: var(--rel-tekst-2); }
  .os-rel-tel__blok { display: flex; flex-direction: column; gap: 2px; border-radius: 18px; overflow: hidden; }
  .os-rel-tel__leeg { margin: 24px 8px; font-size: 15px; color: var(--rel-tekst-3); }
  .os-rel-regel { background: #fff; }
  /* Alleen zolang de regel schuift (os-relaties.js); open knipt hij niet af. */
  .os-rel-regel.is-schuivend { overflow: clip; }
  .os-rel .os-rel-regel__dicht { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; box-sizing: border-box; color: var(--rel-tekst); text-decoration: none; }
  .os-rel-regel.is-open .os-rel-regel__dicht { display: none; }
  .os-rel-regel__tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .os-rel-regel__naam { font-size: 17px; color: var(--rel-tekst); }
  .os-rel-regel__sub { font-size: 13px; color: var(--rel-tekst-3); }
  .os-rel-regel__mist { font-size: 13px; font-weight: 600; color: #9A3412; }
  .os-rel-regel__via { font-size: 13px; color: var(--rel-tekst); }
  .os-rel-regel__nummer { margin-left: auto; flex: none; padding-left: 8px; font-size: 14px; color: var(--rel-tekst-3); font-variant-numeric: tabular-nums; }
  .os-rel-pagina { padding: 16px 8px; }

  .os-rel-fab { position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 65; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 8px; }
  .os-rel-fab__knop { width: 60px; height: 60px; border-radius: 18px; background: var(--rel-zacht); color: var(--rel-tekst); box-shadow: 0 2px 8px rgba(12, 26, 43, .25); display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; }
  .os-rel-fab__knop::-webkit-details-marker { display: none; }
  .os-rel-fab__keuzes { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .os-rel .os-rel-fab__keuzes a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 12px; background: #fff; color: var(--rel-tekst); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(12, 26, 43, .2); }
}

.os-rel-rondje { flex: none; width: 40px; height: 40px; box-sizing: border-box; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; }
.os-rel-rondje--groot { width: 48px; height: 48px; font-size: 21px; }
.os-rel-rondje--klant { background: var(--rel-klant-bg); color: var(--rel-klant); }
.os-rel-rondje--prospect { background: var(--rel-prospect-bg); color: var(--rel-prospect); }
.os-rel-rondje--leverancier { background: var(--rel-leverancier-bg); color: var(--rel-leverancier); }
.os-rel-rondje--overig { background: var(--rel-overig-bg); color: var(--rel-overig); }
.os-rel-rondje--geen { background: #fff; border: 1.5px dashed #8A95A3; color: var(--rel-tekst-3); }

/* De uitgevouwen regel. De kop klapt hem in (owner, 2026-10-07); naar de relatiepagina gaat alleen
   via Alle gegevens. */
.os-rel-kort { display: flex; flex-direction: column; padding: 4px 0 16px; }
.os-rel-kort__kop { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 68px; box-sizing: border-box; padding: 10px 12px 10px 16px; border: 0; background: transparent; color: var(--rel-tekst); font: inherit; text-align: left; cursor: pointer; }
.os-rel-kort__naam { flex: 1; min-width: 0; font-size: 19px; font-weight: 600; color: var(--rel-tekst); }
.os-rel-kort__pijl { flex: none; width: 44px; color: var(--rel-tekst-2); }
.os-rel-kort__acties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 4px 16px 14px; }
.os-rel .os-rel-kort__acties > a, .os-rel-kies > summary { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--rel-tekst); font-size: 13px; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
.os-rel-kies > summary::-webkit-details-marker { display: none; }
.os-rel-kort__acties > a > span, .os-rel-kies > summary > span { width: 48px; height: 48px; border-radius: 999px; background: var(--rel-zacht); display: flex; align-items: center; justify-content: center; }
/* Meer dan één nummer of adres: OS vraagt welk, met het label erbij (owner, 2026-10-07). */
.os-rel-kies__scrim, .os-rel-kies__paneel { display: none; }
.os-rel-kies[open] .os-rel-kies__scrim { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(12, 26, 43, .45); }
.os-rel-kies[open] .os-rel-kies__paneel { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 85dvh; overflow-y: auto; background: #F6F8FB; border-radius: 24px 24px 0 0; padding: 10px 0 calc(24px + env(safe-area-inset-bottom)); }
.os-rel-kies__greep { width: 40px; height: 4px; border-radius: 999px; background: #8A95A3; margin: 0 auto 14px; }
.os-rel-kies__kop { padding: 0 24px 8px; font-size: 14px; font-weight: 600; color: var(--rel-tekst-2); }
.os-rel .os-rel-kies__optie { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 64px; padding: 6px 24px; color: var(--rel-tekst); text-decoration: none; }
.os-rel-kies__waarde { order: -1; font-size: 17px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.os-rel-kies__label { font-size: 13px; color: var(--rel-tekst-3); }
/* De tegels tussen de gegevens en Alle gegevens (ontwerp, owner 2026-10-07): hooguit vier, alleen
   met een aantal; actie nodig is oranje. */
.os-rel-tegels { display: grid; grid-template-columns: repeat(var(--rel-tegels), minmax(0, 1fr)); gap: 8px; padding: 16px 16px 0; }
.os-rel-tegels--1 { --rel-tegels: 1; }
.os-rel-tegels--2 { --rel-tegels: 2; }
.os-rel-tegels--3 { --rel-tegels: 3; }
.os-rel-tegels--4 { --rel-tegels: 4; }
.os-rel .os-rel-tegel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 8px 4px; box-sizing: border-box; border-radius: 14px; background: var(--rel-zacht); color: var(--rel-tekst); text-align: center; text-decoration: none; }
.os-rel .os-rel-tegel--actie { background: #FDE2CC; color: #9A3412; }
.os-rel-tegel__aantal { display: flex; align-items: center; gap: 5px; font-size: 20px; font-weight: 700; line-height: 1; }
.os-rel-tegel__label { font-size: 12px; font-weight: 600; line-height: 1.15; }
.os-rel-kort__gegevens { margin: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 10px; }
.os-rel-kort__gegevens > div { display: flex; gap: 12px; }
.os-rel-kort__gegevens dt { flex: none; width: 108px; font-size: 13px; color: var(--rel-tekst-3); }
.os-rel-kort__gegevens dd { margin: 0; font-size: 15px; color: #1F2937; min-width: 0; }
.os-rel-breek { overflow-wrap: anywhere; }
.os-rel-cijfers { font-variant-numeric: tabular-nums; }
.os-rel-ontbreekt-tekst { font-weight: 600; color: #9A3412 !important; }
.os-rel .os-rel-kort__alles { display: flex; align-items: center; justify-content: center; height: 44px; margin: 14px 16px 0; border-radius: 999px; border: 1px solid var(--rel-rand-3); color: var(--rel-tekst); font-size: 15px; font-weight: 600; text-decoration: none; }

/* Onder 350px springt de werkruimte 8px in (os-shell.css), niet 12px: anders schoof de rij
   snelfilters 4px buiten beeld (gemeten met meet_reflow.py op 320px). */
@media (max-width: 349px) {
  .os-rel-chips { margin-inline: -8px; padding-inline: 8px; }
}

/* -- Locatieoverzicht (owner, 2026-10-08; ontwerp "Locaties, eerste ontwerp") ----------------
   Dezelfde opbouw als het relatieoverzicht; het rondje heeft een huis of gebouw in de kleur van de
   status van de installaties. */
.os-loc {
  --loc-bedrijf-bg: #BFE3C6; --loc-bedrijf: #1D5A36;
  --loc-uitvoering-bg: #F6D98A; --loc-uitvoering: #5B3F00;
  --loc-buiten-bg: #FBD3B6; --loc-buiten: #8A2E0A;
  --loc-geen-bg: #D9DEE5; --loc-geen: #3F4955;
}
.os-loc-rondje { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.os-loc-rondje--klein { width: 32px; height: 32px; }
.os-loc-rondje--groot { width: 48px; height: 48px; }
.os-loc-rondje--bedrijf { background: var(--loc-bedrijf-bg); color: var(--loc-bedrijf); }
.os-loc-rondje--uitvoering { background: var(--loc-uitvoering-bg); color: var(--loc-uitvoering); }
.os-loc-rondje--buiten { background: var(--loc-buiten-bg); color: var(--loc-buiten); }
.os-loc-rondje--geen { background: var(--loc-geen-bg); color: var(--loc-geen); }
.os-loc-klant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-loc-klant + .os-loc-klant { margin-top: 4px; }
.os-loc .os-loc-klant a { font-weight: 600; white-space: nowrap; }
.os-loc .os-loc-koppel { font-size: 14px; font-weight: 600; }
.os-loc-inst { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.os-loc-stip { flex: none; width: 10px; height: 10px; border-radius: 999px; background: #8A95A3; }
.os-loc-stip--bedrijf { background: #2F8F55; }
.os-loc-stip--uitvoering { background: #C28A00; }
.os-loc-stip--buiten { background: #C2410C; }
.os-loc-objecten { display: block; padding-left: 18px; font-size: 13px; color: var(--rel-tekst-3); }
.os-loc-actie { display: inline-flex; padding: 3px 9px; border-radius: 999px; background: #FDE2CC; color: #8A2E0A; font-size: 13px; font-weight: 600; }
.os-loc-tabel td[data-kolom="postcode"], .os-loc-tabel td[data-kolom="plaats"] { white-space: nowrap; }
.os-loc-kort__adres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-loc-kort__plaats { font-size: 14px; color: var(--rel-tekst-3); }
.os-loc-kort__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 16px 4px 78px; }
.os-loc-chip { padding: 3px 9px; border-radius: 999px; background: #E9EDF2; color: var(--rel-tekst-2); font-size: 12px; font-weight: 600; }
.os-loc-chip--klasse { background: var(--rel-zacht); color: #1E4F85; font-weight: 700; }
.os-loc-kort__installaties { display: flex; flex-direction: column; gap: 10px; }
.os-loc-kort__object { display: flex; flex-direction: column; gap: 8px; }
.os-loc-kort__objectnaam { font-size: 13px; font-weight: 700; color: var(--rel-tekst-2); }
.os-loc-kort__installatie { display: flex; flex-direction: column; gap: 3px; }
.os-loc-kort__installatie > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.os-loc-status { padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.os-loc-status--bedrijf { background: #DCEFE2; color: #1D5A36; }
.os-loc-status--uitvoering { background: #FBEFC8; color: #6E4A00; }
.os-loc-status--buiten { background: #FDE2CC; color: #8A2E0A; }
.os-loc-kort__sinds { font-size: 13px; color: var(--rel-tekst-3); }
/* De uitgeklapte regel van een locatie op de maat van het ontwerp "Locaties" (owner, 2026-10-09: "leg de
   telefoonweergave naast het canvas en volg het ontwerp"). Alleen hier; het relatieoverzicht houdt zijn eigen maten. */
.os-loc .os-rel-kort__kop { min-height: 72px; padding-bottom: 4px; }
.os-loc .os-rel-kort__acties { display: flex; padding-top: 12px; }
.os-loc .os-rel-kort__acties > * { flex: 1 1 0; min-width: 0; }
.os-loc .os-rel-kort__gegevens { gap: 12px; }
.os-loc .os-rel-kort__gegevens dt { width: 92px; padding-top: 1px; }
.os-loc .os-rel-kort__gegevens .os-rel-rolbadge { padding: 1px 7px; font-size: 11px; }
.os-loc-klant--geen { gap: 10px; }
.os-loc-chip--klasse.is-onbepaald { background: #E9EDF2; color: var(--rel-tekst-2); }

/* -- Relatiepagina (relatiesronde 2b; ontwerp goedgekeurd door de eigenaar op 2026-10-08) -------
   Eén pagina voor telefoon en computer: tot 720px één kolom met Bellen, Mailen, Route en Opname,
   daarboven twee kolommen. De kolommen zijn op de telefoon `display: contents`, zodat de blokken
   met `order` in de volgorde van het telefoonontwerp komen. */
.os-rp { display: flex; flex-direction: column; gap: 16px; max-width: 1180px; }
.os-rp-balk, .os-rp-acties, .os-rel .os-rp-alleen-tel { display: none; }
.os-rp-kruimel { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--rel-tekst-3); }
.os-rel .os-rp-kruimel a { font-weight: 600; }
.os-rp-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.os-rp-kop > .os-rel-rondje { width: 64px; height: 64px; font-size: 28px; }
.os-rp-kop__tekst { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.os-rp-kop__naam { margin: 0; font-size: 26px; font-weight: 700; color: var(--rel-tekst); overflow-wrap: anywhere; }
.os-rp-kop__regel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--rel-tekst-3); }
.os-rp-kop__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-rel .os-rp-knop { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; box-sizing: border-box; border-radius: 8px; background: var(--rel-actie); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; }
.os-rel .os-rp-knop:hover { background: #2C67A6; color: #fff; }
.os-rel .os-rp-knop--rustig { background: #fff; border: 1px solid #BFC8D2; color: var(--rel-tekst); }
.os-rel .os-rp-knop--rustig:hover { background: #F3F6F9; color: var(--rel-tekst); }
.os-rp-icoonknop { width: 44px; height: 44px; padding: 0; box-sizing: border-box; border-radius: 8px; border: 1px solid #BFC8D2; background: #fff; color: var(--rel-tekst-2); display: flex; align-items: center; justify-content: center; cursor: pointer; list-style: none; }
.os-rp-icoonknop::-webkit-details-marker { display: none; }
.os-rp-icoonknop.is-aan { color: #B7791F; }
.os-rp-ster { margin: 0; display: flex; }
.os-rp-meer { position: relative; }
.os-rp-meer__menu { display: none; }
.os-rp-meer[open] .os-rp-meer__menu { display: flex; flex-direction: column; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; padding: 6px 0; background: #fff; border: 1px solid var(--rel-rand); border-radius: 10px; box-shadow: 0 8px 24px rgba(12, 26, 43, .18); }
.os-rel .os-rp-meer__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--rel-tekst); font-size: 15px; text-decoration: none; }
.os-rel .os-rp-meer__menu a:hover { background: #F3F6F9; }
.os-rp-melding { margin: 0; }

.os-rp-actie { display: flex; flex-direction: column; background: #FFF4EA; border: 1px solid #F3C9A8; border-radius: 10px; }
.os-rp-actie__regel { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.os-rp-actie__regel + .os-rp-actie__regel { border-top: 1px solid #F3C9A8; }
.os-rp-actie__icoon { flex: none; color: #C2410C; display: flex; padding-top: 1px; }
.os-rp-actie__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--rel-tekst-2); }
.os-rp-actie__titel { font-size: 15px; font-weight: 700; color: #9A3412; }
.os-rel .os-rp-actie__knop { flex: none; align-self: center; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 8px; background: #fff; border: 1px solid #E8A87C; color: #9A3412; font-size: 14px; font-weight: 600; text-decoration: none; }
.os-rp-dubbel { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.os-rp-dubbel li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.os-rp-dubbel form { margin: 0; }
.os-rp-tekstknop { padding: 0; min-height: 32px; border: 0; background: transparent; color: var(--rel-link); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.os-rel .os-rp-tekstknop { color: var(--rel-link); }

.os-rp-raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
.os-rp-kolom { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.os-rp-kolom--links { flex: 1 1 300px; }
.os-rp-kolom--rechts { flex: 999 1 560px; }
.os-rp-blok { background: #fff; border: 1px solid var(--rel-rand); border-radius: 10px; }
.os-rp-blok__kop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--rel-rand-2); }
.os-rp-blok__kop .os-rp-blok__titel { flex: 1; padding: 0; border: 0; }
.os-rp-blok__titel { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--rel-rand-2); font-size: 16px; font-weight: 700; color: var(--rel-tekst); }
.os-rp-aantal { font-weight: 500; color: var(--rel-tekst-3); }
.os-rel .os-rp-kopknop { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; box-sizing: border-box; border-radius: 8px; border: 1px solid #BFC8D2; color: var(--rel-tekst); font-size: 14px; font-weight: 600; text-decoration: none; }
.os-rel .os-rp-kopknop:hover { background: #F3F6F9; color: var(--rel-tekst); }
.os-rp-leeg { margin: 0; padding: 14px 16px; font-size: 15px; color: var(--rel-tekst-3); }
.os-rp-meta { font-size: 13px; color: var(--rel-tekst-3); }
.os-rp-blok-regel { display: block; }
.os-rp-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--rel-tekst-3); }
.os-rp-chip { padding: 1px 7px; border-radius: 999px; background: var(--rel-zacht); color: #1E4F85; font-size: 12px; font-weight: 600; }
.os-rel .os-rp-klein { font-size: 13px; font-weight: 600; }

.os-rp-groepen { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 16px; }
.os-rp-groep { display: flex; gap: 12px; }
.os-rp-groep__icoon { flex: none; width: 22px; padding-top: 2px; color: var(--rel-tekst-2); }
.os-rp-groep__lijst { margin: 0; padding: 0; list-style: none; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.os-rp-groep__lijst li { display: flex; flex-direction: column; gap: 2px; }
.os-rp-waarde { font-size: 15px; }
.os-rp-waarde--tekst { color: var(--rel-tekst); }
.os-rel .os-rp-kaartlink { font-size: 13px; font-weight: 600; }

.os-rp-gegevens { margin: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; font-size: 15px; }
.os-rp-gegevens > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.os-rp-gegevens dt { color: var(--rel-tekst-3); }
.os-rp-gegevens dd { margin: 0; color: var(--rel-tekst); min-width: 0; overflow-wrap: anywhere; }
.os-rp-opmerkingen { margin: 0; padding: 14px 16px 16px; font-size: 15px; line-height: 1.5; color: #1F2937; overflow-wrap: anywhere; }

.os-rp-tabelvak { overflow-x: auto; }
.os-rp-tabel { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15px; }
.os-rp-tabel thead tr { background: #F3F6F9; }
.os-rp-tabel th { text-align: left; padding: 10px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--rel-tekst-2); text-transform: uppercase; white-space: nowrap; }
.os-rp-tabel td { padding: 12px 16px; vertical-align: top; border-top: 1px solid var(--rel-rand-2); }
.os-rel .os-rp-naam { font-weight: 600; }
.os-rp-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.os-rp-status--blauw { background: #DCE7F5; color: #1E4A80; }
.os-rp-status--groen { background: #DCEFE2; color: #1D5A36; }
.os-rp-status--geel { background: #FBEFC8; color: #6E4A00; }
.os-rp-status--rood { background: #FDE2CC; color: #8A2E0A; }
.os-rp-status--grijs { background: #E9EDF2; color: var(--rel-tekst-2); }

.os-rp-regels { margin: 0; padding: 6px 0; list-style: none; display: flex; flex-direction: column; }
.os-rp-regel { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 16px; }
.os-rp-regel--installatie { padding: 8px 16px 10px 47px; }
.os-rp-regel > .os-rel-icoon { width: 28px; height: 28px; }
.os-rel .os-rp-regel__tekst { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--rel-tekst); text-decoration: none; }
.os-rel .os-rp-regel__tekst:hover .os-rp-naam { text-decoration: underline; }
.os-rp-regel--locatie .os-rp-naam { color: var(--rel-link); }
.os-rp-regel--installatie .os-rp-naam { font-weight: 400; color: var(--rel-link); }

.os-rp-eerder { padding: 4px 16px 12px; }
.os-rp-eerder > summary { min-height: 40px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--rel-tekst-2); cursor: pointer; }
.os-rp-eerder__lijst { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.os-rp-eerder__lijst li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.os-rp-eerder__lijst form { margin: 0; }
/* Uit- en invouwen schuift (UAT van de eigenaar, 9 oktober 2026: "details vloeiend uit- en invouwen"),
   zoals het menu (os-shell.css): de installaties op de locatiepagina, Meer pandgegevens en de blokken als
   Eerder en Nog niet ingevuld. Sinds de nieuwe stijl volgens de notitie Beweging (eigenaar, 9 oktober):
   280 ms, de inhoud komt in 200 ms op, en het pijltje draait mee (`.os-ns-uitklap__pijl`). Niet de
   ⋮-menu's en de keuzevensters: die openen als laag. De inhoud knipt alleen af zolang hij schuift; open
   niet, anders viel het ⋮-menu van een installatie weg onder haar rand. Bij "minder beweging" klapt alles
   zonder schuiven open en dicht: de algemene regel in os-base.css raakt ::details-content niet. Dicht is
   de inhoud niet bereikbaar met Tab of een schermlezer: dat doet <details> zelf. */
@media (prefers-reduced-motion: no-preference) {
  .os-rp-eerder, .os-lp-inst, .os-ns-inst, .os-ns-meerpand { interpolate-size: allow-keywords; }
  .os-rp-eerder::details-content, .os-lp-inst::details-content, .os-ns-inst::details-content, .os-ns-meerpand::details-content { block-size: 0; overflow-y: clip; opacity: 0; transition: block-size 280ms cubic-bezier(.2, 0, 0, 1), opacity 200ms linear, content-visibility 280ms allow-discrete; }
  .os-rp-eerder[open]::details-content, .os-lp-inst[open]::details-content, .os-ns-inst[open]::details-content, .os-ns-meerpand[open]::details-content { block-size: auto; overflow-y: visible; opacity: 1; transition: block-size 280ms cubic-bezier(.2, 0, 0, 1), opacity 200ms linear, content-visibility 280ms allow-discrete, overflow-y 0s 280ms allow-discrete; }
}
.os-rp-kies__annuleren { display: block; width: calc(100% - 48px); height: 44px; margin: 8px 24px 0; border-radius: 999px; border: 1px solid var(--rel-rand-3); background: #fff; color: var(--rel-tekst); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

@media (max-width: 720px) {
  .os-rp { gap: 12px; padding-bottom: 88px; }
  /* Telefoon of computer: deze twee gaan voor elke andere display-regel. */
  .os-rp-kruimel, .os-rp-kop__knoppen, .os-rel .os-rp-alleen-pc { display: none !important; }
  .os-rp .os-rp-alleen-tel { display: revert; }
  .os-rp-balk { display: flex; align-items: center; gap: 2px; margin: -4px -4px 0; }
  .os-rp-balk__vulling { flex: 1; }
  .os-rp-balk .os-rp-icoonknop { border: 0; background: transparent; }
  .os-rp-kop { flex-direction: column; gap: 8px; text-align: center; }
  .os-rp-kop > .os-rel-rondje { width: 80px; height: 80px; font-size: 34px; }
  .os-rp-kop__tekst { flex: none; align-items: center; }
  .os-rp-kop__naam { font-size: 22px; }
  .os-rp-kop__regel { justify-content: center; }
  .os-rp-acties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px 0; }
  .os-rel .os-rp-actieknop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; color: var(--rel-tekst); font-size: 13px; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
  .os-rp-actieknop::-webkit-details-marker { display: none; }
  .os-rp-actieknop > span { width: 48px; height: 48px; border-radius: 999px; background: var(--rel-zacht); display: flex; align-items: center; justify-content: center; }
  .os-rp-kies[open] > .os-rp-actieknop > span { background: #A9C6EC; }
  .os-rel .os-rp-actieknop.is-uit { color: var(--rel-tekst-3); cursor: default; }
  .os-rp-actieknop.is-uit > span { background: #E9EDF2; }
  .os-rp-raster, .os-rp-kolom { display: contents; }
  .os-rp-blok--contactgegevens { order: 1; }
  .os-rp-blok--contacten { order: 2; }
  .os-rp-blok--locaties { order: 3; }
  .os-rp-blok--offertes { order: 4; }
  .os-rp-blok--administratie { order: 5; }
  .os-rp-blok--opmerkingen { order: 6; }
  .os-rp-blok { border: 0; border-radius: 16px; padding: 4px 0; }
  .os-rp-blok__titel, .os-rp-blok__kop { border-bottom: 0; }
  .os-rp-blok__titel { padding: 14px 16px 6px; font-size: 17px; }
  .os-rp-blok__kop { padding: 6px 4px 2px 16px; }
  .os-rel .os-rp-blok__kop .os-rp-kopknop { width: 44px; height: 44px; padding: 0; border: 0; justify-content: center; color: var(--rel-link); }
  .os-rp-groepen { gap: 0; padding: 0 0 4px; }
  .os-rp-groep { gap: 0; }
  .os-rp-groep__icoon { width: 56px; box-sizing: border-box; padding: 18px 16px 0; display: flex; justify-content: center; }
  .os-rp-groep__lijst { flex: 1; gap: 0; }
  .os-rp-groep__lijst li { min-height: 60px; box-sizing: border-box; justify-content: center; padding: 8px 16px 8px 0; gap: 3px; }
  .os-rp-waarde { font-size: 16px; }
  .os-rp-gegevens { gap: 10px; padding: 4px 16px 14px; }
  .os-rp-gegevens > div { display: flex; gap: 12px; }
  .os-rp-gegevens dt { flex: none; width: 128px; font-size: 13px; }
  .os-rp-gegevens dd { font-size: 15px; }
  .os-rp-opmerkingen { padding: 4px 16px 14px; }
  .os-rp-contacten { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .os-rp-contact { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 6px 4px 6px 16px; }
  .os-rp-contact__rondje { width: 40px; height: 40px; }
  .os-rel .os-rp-contact__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--rel-tekst); text-decoration: none; }
  .os-rp-contact__naam { font-size: 16px; font-weight: 600; }
  .os-rel .os-rp-rondknop { flex: none; width: 44px; height: 44px; border-radius: 999px; color: var(--rel-link); display: flex; align-items: center; justify-content: center; }
  .os-rel .os-rp-toevoegen { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; color: var(--rel-link); font-size: 15px; font-weight: 600; text-decoration: none; }
  .os-rp-toevoegen span { font-weight: 400; color: var(--rel-tekst-3); }
  .os-rp-regels { padding: 0; }
  .os-rp-regel { flex-wrap: nowrap; gap: 16px; min-height: 60px; box-sizing: border-box; padding: 8px 16px; }
  .os-rp-regel--installatie { gap: 12px; min-height: 56px; padding: 6px 16px 6px 56px; }
  .os-rp-regel > .os-rel-icoon { background: transparent; width: 24px; }
  .os-rel .os-rp-regel__tekst { flex: 1; }
  .os-rp-regel--locatie .os-rp-naam { color: var(--rel-tekst); font-size: 16px; }
  .os-rp-regel--installatie .os-rp-naam { color: var(--rel-tekst); font-size: 15px; }
  .os-rp-pijl { flex: none; color: var(--rel-tekst-3); display: flex; }
  .os-rp-voet { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 0 0 4px; }
  .os-rp-eerder--plat { flex: 1 1 100%; padding: 0 16px; }
  .os-rp-voet > .os-rp-toevoegen { margin-left: auto; }
  .os-rp-dubbel li { flex-direction: column; align-items: flex-start; gap: 2px; }
}

/* "Opgeslagen" na het wijzigen van de kolommen (relatiesronde 2b): OS onthoudt ze per gebruiker. */
.os-rel-opgeslagen { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: #DCEFE2; color: #1D5A36; font-size: 13px; font-weight: 600; }
.os-rel-opgeslagen[hidden] { display: none; }

/* Favorieten bovenaan de telefoonlijst (relatiesronde 2b; ontwerp): een sectie met een ster. */
.os-rel-tel__sectie--favoriet { display: flex; align-items: center; gap: 8px; }
.os-rel-tel__sectie--favoriet svg { color: #B7791F; }

/* -- Locatiepagina (relatiesronde 2b; ontwerp goedgekeurd door de eigenaar op 2026-10-08 en -09) ----
   Dezelfde opbouw als de relatiepagina (`.os-rp`); hier de installaties, het pand, de foto's en de
   blokken per gebouw. Op de telefoon in de volgorde van het ontwerp. */
.os-lp-kop > .os-loc-rondje { width: 64px; height: 64px; }
.os-lp-naam { color: var(--rel-tekst-2); }
.os-lp-inst { border-top: 1px solid var(--rel-rand-2); }
.os-lp-inst:first-of-type { border-top: 0; }
.os-lp-inst__kop { display: flex; align-items: center; gap: 12px; padding: 10px 16px; list-style: none; cursor: pointer; }
.os-lp-inst__kop::-webkit-details-marker { display: none; }
.os-lp-inst__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-lp-inst__pijl { flex: none; color: var(--rel-tekst-3); display: flex; transform: rotate(90deg); transition: transform .15s; }
.os-lp-inst[open] .os-lp-inst__pijl { transform: rotate(-90deg); }
.os-lp-inst__inhoud { padding: 0 0 8px 44px; }
.os-lp-inst__inhoud .os-rp-gegevens { padding-left: 16px; }
.os-lp-inst__knoppen { display: flex; align-items: center; gap: 8px; padding: 0 16px 8px; }
.os-lp-waarde { display: block; }
.os-lp-regel { display: block; }
.os-lp-regel + .os-lp-regel { margin-top: 8px; }
.os-lp-pand { padding-top: 8px; }
.os-lp-klant { padding-bottom: 8px; }
/* De smalle kolom links: het rondje blijft naast de naam. */
.os-lp-klant .os-rp-regel { flex-wrap: nowrap; }
.os-rel .os-lp-klant .os-rp-regel__tekst { flex: 1 1 auto; }
.os-lp-klant + .os-lp-klant { border-top: 1px solid var(--rel-rand-2); }
.os-lp-klant__kanalen { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 4px 56px; font-size: 14px; }
.os-lp-kanaal { display: inline-flex; align-items: center; gap: 8px; color: var(--rel-tekst-2); }
.os-lp-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 16px 2px 56px; font-size: 14px; }
.os-rel .os-lp-alle { display: block; padding: 4px 16px 14px 56px; font-size: 14px; font-weight: 600; }
.os-lp-fotos { margin: 0; padding: 12px 16px 16px; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px; }
.os-lp-foto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.os-rel .os-lp-foto__beeld { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #E9EDF2; color: var(--rel-tekst-2); font-weight: 700; text-decoration: none; }
.os-lp-foto__beeld img { width: 100%; height: 100%; object-fit: cover; }
.os-lp-foto__naam { font-size: 13px; color: var(--rel-tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* De fotoweergave (eigenaar, 9 oktober): één foto groot, met Vervangen en Weg in de kop. */
.os-lp-fotoweergave__beeld { display: block; max-width: calc(100% - 32px); height: auto; margin: 12px 16px 0; border-radius: 10px; }
.os-lp-fotoweergave__knoppen { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 0; }
.os-lp-fotoweergave > p { margin: 8px 16px 16px; }
.os-lp-gebouw__kop { gap: 12px; }
.os-lp-gebouw__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-lp-gebouw__titel .os-rp-blok__titel { padding: 0; border: 0; }
.os-lp-gebouw__knop { width: 40px; height: 40px; }
.os-lp-subkop { margin: 0; padding: 14px 16px 4px; font-size: 14px; font-weight: 700; color: var(--rel-tekst-2); }
.os-lp-subkop--knop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.os-lp-subkop--knop h3 { margin: 0; font-size: 14px; font-weight: 700; }
.os-lp-gebouwen-voet { display: flex; flex-direction: column; gap: 4px; }
/* Meer knoppen achter één regel van een uitklaplijst, zoals Regel toevoegen en Geen regels. */
.os-lp-knoppen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.os-rel .os-lp-toevoegen { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }

@media (max-width: 720px) {
  .os-lp-kop > .os-loc-rondje { width: 80px; height: 80px; }
  .os-lp-blok--klant { order: 1; }
  .os-lp-blok--installaties, .os-lp-gebouw { order: 2; }
  .os-lp-gebouwen-voet { order: 3; }
  .os-lp-blok--pand { order: 3; }
  .os-lp-blok--offertes { order: 4; }
  .os-lp-blok--fotos { order: 5; }
  .os-lp-blok--opmerkingen { order: 6; }
  .os-lp-blok--gegevens { order: 7; }
  .os-lp-inst__inhoud { padding-left: 0; }
  .os-lp-klant__kanalen, .os-lp-contact { padding-left: 16px; }
  .os-lp-fotos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}

/* -- Nieuwe stijl van de relatie- en locatiepagina (eigenaar, 9 oktober 2026; ontwerp "Relatiepagina-stijl",
   "Locatiepagina-stijl" en hun computerversies) -------------------------------------------------------------
   Kleine grijze kopjes boven witte blokken; rijen met ronde hoeken (20px buiten, 4px tussen de rijen) en 2px
   tussenruimte; knoppen als pillen; knoppen en links minstens 44px hoog. Tot 720px één kolom met Bellen,
   Mailen, Route en Opname, daarboven twee kolommen. Alles onder `.os-ns`, zodat het bewerkscherm en de
   fotoweergave (nog `.os-rp`) blijven zoals ze zijn. */
html:has(.os-ns), html:has(.os-ns) body { background: #EEF1F6; }
.os-ns {
  --ns-tekst: #1B1F26; --ns-grijs: #5E6470; --ns-kop: #44474E; --ns-link: #1F5FA8; --ns-link-zweef: #174A84;
  --ns-rand: #8C939D; --ns-zacht: #D6E4F7; --ns-zacht-tekst: #0F2B4A; --ns-oranje: #8A4A00;
  --ns-signaal: #FCE7D4; --ns-signaal-tekst: #6B3200; --ns-zweef: rgba(27, 31, 38, .06);
  display: flex; flex-direction: column; gap: 24px; max-width: 1180px; margin: 0 auto; color: var(--ns-tekst);
}
.os-ns a { color: var(--ns-link); text-decoration: none; }
.os-ns a:hover { color: var(--ns-link-zweef); }
@media (min-width: 721px) { .os-ns .os-ns-alleen-tel { display: none !important; } }
@media (max-width: 720px) { .os-ns .os-ns-alleen-pc { display: none !important; } }
.os-ns-grijs { color: var(--ns-grijs); }
.os-ns-let { color: var(--ns-oranje); font-weight: 600; }
.os-ns-let--regel { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; font-weight: 400; }
.os-ns-blokregel, .os-ns-waarde { display: block; }
.os-ns-slot { display: inline-flex; align-items: center; margin-left: 6px; color: var(--ns-kop); }

/* De balk van de telefoon, het kruimelpad en de kop. */
.os-ns-balk { display: none; }
.os-ns-balk__vulling { flex: 1; }
.os-ns .os-rp-icoonknop { flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ns-kop); }
.os-ns .os-rp-icoonknop:hover { background: var(--ns-zweef); color: var(--ns-kop); }
.os-ns .os-rp-icoonknop.is-aan { color: #E8A317; }
.os-ns .os-ns-rondknop--rand { width: 44px; height: 44px; border: 1px solid var(--ns-rand); color: var(--ns-tekst); }
.os-ns-kruimel { display: flex; align-items: center; gap: 8px; margin-bottom: -12px; font-size: 14px; color: var(--ns-grijs); }
.os-ns .os-ns-kruimel a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.os-ns-kop { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.os-ns-kop__beeld { flex: none; width: 96px; height: 96px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.os-ns-kop__beeld--locatie { background: var(--ns-zacht); color: var(--ns-zacht-tekst); }
.os-ns-kop__tekst { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns-kop__naam { margin: 0 0 2px; font-size: 32px; line-height: 40px; font-weight: 400; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-ns-kop__adres { margin: 0; font-size: 16px; line-height: 24px; color: var(--ns-tekst); }
.os-ns-kop__regel { margin: 0; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns-kop__let { margin: 0; font-size: 14px; line-height: 20px; color: var(--ns-oranje); font-weight: 600; }

/* -- Vaste kop bij scrollen (eigenaar, 14 oktober 2026; ontwerp "Vaste-kop-relatie", "-locaties" en "-computer") --
   Op de telefoon blijft de balk met de pijl terug direct onder de donkere balk staan (56px), op de computer het
   kruimelpad (58px), met de achtergrond van de pagina. De balk loopt tot de rand van de werkruimte (`--vk-rand`, de
   ruimte opzij), zodat er opzij niets onder door schuift. Een dun lijntje zodra er inhoud onder schuift (`is-lijn`,
   os-shell.js). Op de telefoon staat tussen de pijl en de knoppen klein waar je bent, het kruimelpad zonder de pagina
   zelf, als gewone tekst; verdwijnt de titel van de pagina onder de balk, dan staat hij eronder (`is-titel`). Bij
   "minder beweging" zonder overgang. Een anker en de focus van het toetsenbord komen er niet onder
   (`scroll-padding-top`). De opname houdt haar eigen balk. */
.os-vk { --vk-top: 58px; --vk-rand: 20px; position: sticky; top: var(--vk-top); z-index: 40; background: #EEF1F6; }
.os-vk.is-lijn { box-shadow: 0 1px 0 rgba(27, 31, 38, .14); }
.os-vk-waar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 4px; }
.os-vk-waar__boven { font-size: 13px; line-height: 16px; font-weight: 600; color: var(--ns-grijs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(11px); transition: transform 200ms cubic-bezier(.2, 0, 0, 1); }
.os-vk-waar__titel { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--ns-tekst); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(6px); transition: opacity 200ms linear, transform 200ms cubic-bezier(.2, 0, 0, 1); }
.os-vk.is-titel .os-vk-waar__boven { transform: none; }
.os-vk.is-titel .os-vk-waar__titel { opacity: 1; transform: none; }
/* Het kruimelpad: de tekst blijft waar hij stond; de balk is 56px hoog, zoals in het ontwerp. */
.os-ns-kruimel.os-vk, .os-op-kruimel.os-vk { min-height: 56px; padding: 6px var(--vk-rand); margin: -6px calc(-1 * var(--vk-rand)) 0; }
.os-ns-kruimel.os-vk { margin-bottom: -18px; }
.os-op-kruimel.os-vk { margin-bottom: -6px; }
@media (min-width: 721px) {
  /* 58 + 56 + 16. */
  html:has(.os-ns-kruimel.os-vk, .os-op-kruimel.os-vk) { scroll-padding-top: 130px; }
}
@media (max-width: 720px) {
  .os-vk { --vk-top: 56px; --vk-rand: 12px; }
  /* Direct onder de donkere balk (de 14px boven de pagina valt weg) en 64px hoog, zoals in het ontwerp; de pijl staat
     waar hij stond. */
  .os-ns-balk.os-vk { min-height: 64px; padding: 8px calc(var(--vk-rand) - 8px); margin: -14px calc(-1 * var(--vk-rand)) -24px; }
  .os-op-boven.os-vk { min-height: 64px; padding: 8px calc(var(--vk-rand) - 4px); margin: -14px calc(-1 * var(--vk-rand)) -16px; }
  /* Het overzicht: het zoekveld en de knop met de groep blijven staan (12 + 56 + 6 + 44 + 6 = 124px), de snelfilters
     schuiven mee weg. Boven de onderbalk en de plusknop, zodat het venster met de groepen daar overheen valt. Het
     kopje van de plaats, bij Relaties de letter, blijft eronder staan tot het volgende kopje het wegduwt: elk kopje
     staat met zijn blok in een eigen groep. */
  .os-rel-tel__vast.os-vk { z-index: 66; padding: 12px var(--vk-rand) 6px; margin: -12px calc(-1 * var(--vk-rand)) 0; }
  .os-rel-tel__sectie { position: sticky; top: 180px; z-index: 2; background: #EEF1F6; }
  /* 56 + 64 + 16, en op het overzicht 56 + 124 + het kopje (40) + 8. */
  html:has(.os-ns-balk.os-vk, .os-op-boven.os-vk) { scroll-padding-top: 136px; }
  html:has(.os-rel-tel__vast) { scroll-padding-top: 228px; }
}
@media (max-width: 349px) {
  .os-vk { --vk-rand: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .os-vk-waar__boven, .os-vk-waar__titel { transition: none; }
}
.os-ns-kop__knoppen { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Pillen: omlijnd, gevuld, als tekst en rond. */
.os-ns .os-ns-pil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; box-sizing: border-box; border: 1px solid var(--ns-rand); border-radius: 999px; background: transparent; color: var(--ns-tekst); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
.os-ns .os-ns-pil::-webkit-details-marker { display: none; }
.os-ns .os-ns-pil:hover { background: var(--ns-zweef); color: var(--ns-tekst); }
.os-ns .os-ns-pil--vol { border-color: var(--ns-link); background: var(--ns-link); color: #fff; }
.os-ns .os-ns-pil--vol:hover { border-color: var(--ns-link-zweef); background: var(--ns-link-zweef); color: #fff; }
.os-ns .os-ns-pil--klein { padding: 0 18px; font-size: 14px; }
.os-ns .os-ns-tekstpil { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; box-sizing: border-box; border: 0; border-radius: 999px; background: transparent; color: var(--ns-link); font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.os-ns .os-ns-tekstpil:hover { background: rgba(31, 95, 168, .08); color: var(--ns-link-zweef); }
.os-ns .os-ns-rondknop { flex: none; width: 48px; height: 48px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: var(--ns-link); }
.os-ns .os-ns-rondknop:hover { background: rgba(31, 95, 168, .08); }
.os-ns .os-ns-inlinelink { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.os-ns .os-ns-inlinelink--klein { font-size: 14px; }
.os-ns .os-ns-bestand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 16px; overflow-wrap: anywhere; }

/* De knoppen van de telefoon: pillen van 56px met het woord eronder. */
.os-ns-acties { display: none; }
.os-ns .os-rp-actieknop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; color: var(--ns-tekst); font-size: 13px; line-height: 16px; font-weight: 500; text-decoration: none; list-style: none; cursor: pointer; }
.os-ns .os-rp-actieknop::-webkit-details-marker { display: none; }
.os-ns .os-rp-actieknop > span { width: 100%; height: 56px; border-radius: 28px; background: var(--ns-zacht); color: var(--ns-zacht-tekst); display: flex; align-items: center; justify-content: center; }
.os-ns .os-rp-kies[open] > .os-rp-actieknop > span { background: #B9D0EE; }
.os-ns .os-rp-actieknop.is-uit { color: var(--ns-grijs); cursor: default; }
.os-ns .os-rp-actieknop.is-uit > span { background: #E3E7ED; color: var(--ns-grijs); }

/* "Welk nummer?": een venster in het midden, met het vinkje Als standaard instellen. */
.os-ns .os-rel-kies[open] .os-rel-kies__scrim { background: rgba(12, 18, 28, .36); }
.os-ns .os-rel-kies[open] .os-rel-kies__paneel { left: 24px; right: 24px; top: 50%; bottom: auto; max-width: 420px; max-height: calc(100dvh - 96px); margin: 0 auto; padding: 20px 0 8px; box-sizing: border-box; border-radius: 28px; background: #fff; box-shadow: 0 12px 40px rgba(12, 26, 43, .3); transform: translateY(-50%); }
.os-ns .os-rel-kies__greep { display: none; }
.os-ns .os-rel-kies__kop { padding: 0 24px 8px; font-size: 22px; line-height: 28px; font-weight: 400; color: var(--ns-tekst); }
.os-ns .os-rel-kies__optie { min-height: 64px; padding: 8px 24px; color: var(--ns-tekst); }
.os-ns .os-rel-kies__optie:hover { background: var(--ns-zweef); color: var(--ns-tekst); }
.os-ns .os-rel-kies__waarde { font-size: 16px; line-height: 24px; }
.os-ns .os-rel-kies__label { font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns .os-rel-kies__onthoud { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 24px; font-size: 15px; color: var(--ns-tekst); cursor: pointer; }
.os-ns .os-rel-kies__onthoud[hidden] { display: none; }
.os-ns .os-rel-kies__onthoud input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--ns-link); }
.os-ns .os-rp-kies__annuleren { display: block; width: max-content; height: auto; min-height: 44px; margin: 4px 12px 0 auto; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ns-link); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }

/* Actie nodig: oranje rijen, alleen als er iets te doen is. */
.os-ns-melding { margin: 0; border-radius: 20px; }
.os-ns-signalen { display: flex; flex-direction: column; gap: 2px; }
.os-ns-signaal { display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 12px 8px 12px 16px; box-sizing: border-box; border-radius: 4px; background: var(--ns-signaal); color: var(--ns-signaal-tekst); }
.os-ns-signaal:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.os-ns-signaal:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-ns-signaal__icoon { flex: none; display: flex; }
.os-ns-signaal__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; line-height: 20px; }
.os-ns-signaal__titel { font-size: 15px; font-weight: 600; }
.os-ns .os-ns-signaal__knop { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ns-signaal-tekst); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.os-ns-dubbel { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.os-ns-dubbel li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.os-ns-dubbel form { margin: 0; }
.os-ns .os-ns-dubbel a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ns-signaal-tekst); font-weight: 600; text-decoration: underline; }

/* Twee kolommen op de computer; op de telefoon één, in de volgorde van het ontwerp. */
.os-ns-raster { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.os-ns-kolom { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.os-ns-kolom--links { flex: 1 1 380px; }
.os-ns-kolom--rechts { flex: 999 1 560px; }
.os-ns-blok { min-width: 0; display: flex; flex-direction: column; }
.os-ns-blok__titel { margin: 0; padding: 0 4px 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ns-kop); }
.os-ns-blok__kop { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 0 4px 4px; }
.os-ns-blok__kop .os-ns-blok__titel { flex: 1; min-width: 0; padding: 0; }
.os-ns-blok__kop--sub { margin-top: 16px; }
.os-ns-subkop { margin: 16px 0 0; padding: 0 4px 8px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ns-kop); }
.os-ns-blok__kop--sub .os-ns-subkop { flex: 1; margin: 0; padding: 0; }
.os-ns-gebouw__kop .os-ns-blok__titel { font-size: 15px; font-weight: 600; color: var(--ns-tekst); }
.os-ns-gebouw__kop .os-ns-grijs { font-weight: 400; }
.os-ns-leeg { margin: 0; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; border-radius: 20px; background: #fff; font-size: 15px; color: var(--ns-grijs); }
.os-ns-tekstvak { margin: 0; padding: 16px; border-radius: 20px; background: #fff; font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }

/* Rijen: wit, 4px tussen de rijen en 20px aan de buitenkant, en 2px ertussen. De eerste en laatste
   zichtbare rij krijgen de ronde buitenhoeken; de telefoon en de computer verbergen elk andere rijen. */
.os-ns-rijen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.os-ns-rij { position: relative; display: flex; align-items: center; min-height: 64px; box-sizing: border-box; border-radius: 4px; background: #fff; }
.os-ns-rij--hoog { min-height: 72px; }
@media (min-width: 721px) {
  .os-ns-rijen > :nth-child(1 of :not(.os-ns-alleen-tel)) { border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .os-ns-rijen > :nth-last-child(1 of :not(.os-ns-alleen-tel)) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
}
@media (max-width: 720px) {
  .os-ns-rijen > :nth-child(1 of :not(.os-ns-alleen-pc)) { border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .os-ns-rijen > :nth-last-child(1 of :not(.os-ns-alleen-pc)) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
  /* Op de telefoon een eigen blok voor de nummers, de mailadressen en de adressen (ontwerp). */
  .os-ns-kanalen > .os-ns-rij--groep { border-top-left-radius: 20px; border-top-right-radius: 20px; }
  .os-ns-kanalen > .os-ns-rij--groep:not(:first-child) { margin-top: 10px; }
  .os-ns-kanalen > :has(+ .os-ns-rij--groep) { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
}
.os-ns .os-ns-rijen--vervolg > .os-ns-rij { margin-top: 2px; border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; }
.os-ns-rijen--los { margin-top: 12px; }
.os-ns .os-ns-rij__link { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 16px; min-height: inherit; padding: 8px 4px 8px 16px; box-sizing: border-box; border-radius: inherit; color: var(--ns-tekst); text-decoration: none; }
.os-ns a.os-ns-rij__link:hover { background: rgba(27, 31, 38, .04); color: var(--ns-tekst); }
.os-ns-rij__icoon { flex: none; width: 24px; display: flex; justify-content: center; color: var(--ns-kop); }
.os-ns-rij__icoon--breed { width: 40px; }
.os-ns-rij__rondje { flex: none; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.os-ns-rij__rondje--blauw { background: var(--ns-zacht); color: var(--ns-zacht-tekst); }
.os-ns-rij__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns-rij__waarde { font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-ns-rij__sub { font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns-rij__pijl { flex: none; display: flex; padding-right: 8px; color: var(--ns-kop); }
.os-ns .os-ns-rij__toevoegen { flex: 1; align-self: stretch; display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 16px; border-radius: inherit; color: var(--ns-link); font-size: 15px; font-weight: 600; text-decoration: none; }
.os-ns .os-ns-rij__toevoegen:hover { background: rgba(31, 95, 168, .06); }
.os-ns .os-ns-rij__toevoegen .os-ns-grijs { font-weight: 400; }
.os-ns-rij:has(> .os-ns-rij__toevoegen) { min-height: 56px; }
.os-ns-rij--leeg { flex-wrap: wrap; gap: 4px 8px; padding: 12px 16px; font-size: 15px; color: var(--ns-grijs); }
.os-ns-rij > .os-rp-meer { flex: none; margin-right: 4px; }
.os-ns-rij > .os-ns-tekstpil { margin-right: 8px; }
.os-ns-rij > .os-ns-rondknop { margin-right: 4px; }
.os-ns-stand--geel, .os-ns-stand--rood { color: var(--ns-oranje); font-weight: 600; }

/* Gegevens (dt boven dd); op de computer het label in een kolom van 172px. */
.os-ns-gegevens { margin: 0; }
.os-ns-gegeven { flex-direction: column; align-items: stretch; justify-content: center; padding: 8px 8px 8px 16px; }
.os-ns-gegeven > dt { display: flex; align-items: center; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-ns-gegeven > dd { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 12px; font-size: 16px; line-height: 24px; color: var(--ns-tekst); overflow-wrap: anywhere; }
@media (min-width: 721px) {
  .os-ns-gegevens > .os-ns-gegeven { display: grid; grid-template-columns: 172px minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 56px; }
  .os-ns-gegevens > .os-ns-gegeven > dt { font-size: 14px; }
}

/* ⋮-menu's: wit, 16px rond, met schaduw; op de telefoon met symbolen. */
.os-ns .os-rp-meer { position: relative; }
.os-ns .os-rp-eerder { padding: 0; }
.os-ns .os-rp-meer > summary { list-style: none; }
.os-ns .os-rp-meer[open] > .os-rp-meer__menu { display: flex; flex-direction: column; position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; width: 264px; min-width: 0; padding: 8px 0; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 6px 24px rgba(12, 26, 43, .22); }
.os-ns .os-rp-meer[open] > .os-rp-meer__menu--links { right: auto; left: 0; }
.os-ns .os-rp-meer__menu > form { margin: 0; }
.os-ns .os-rp-meer__menu > a, .os-ns .os-rp-meer__menu > button, .os-ns .os-rp-meer__menu > form > button, .os-ns .os-rp-meer__menu > p { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; box-sizing: border-box; border: 0; background: transparent; color: var(--ns-tekst); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
/* Een menu-item met een regel uitleg eronder, zoals Verwijderen op verzoek (C2, bord "Verwijderen-verzoek"). */
.os-ns .os-rp-meer__menu > .os-rp-meer__twee { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding-block: 10px; }
.os-rp-meer__uitleg { display: block; font-size: 13px; line-height: 18px; font-weight: 400; color: var(--ns-grijs); white-space: normal; }
.os-ns .os-rp-meer__menu > a:hover, .os-ns .os-rp-meer__menu > button:hover, .os-ns .os-rp-meer__menu > form > button:hover { background: #F1F4F8; color: var(--ns-tekst); }
.os-ns .os-rp-meer__menu > p { color: var(--ns-grijs); cursor: default; }
.os-ns .os-rp-meer__menu svg { flex: none; color: var(--ns-kop); }
@media (min-width: 721px) {
  .os-ns .os-rp-meer__menu > a, .os-ns .os-rp-meer__menu > button, .os-ns .os-rp-meer__menu > form > button, .os-ns .os-rp-meer__menu > p { min-height: 44px; }
  .os-ns .os-rp-meer__menu svg { display: none; }
}
/* "Gekopieerd" na Kopiëren (os-relaties.js). */
.os-ns-snack { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 95; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 16px; border-radius: 8px; background: #1B1F26; color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(12, 26, 43, .3); transform: translateX(-50%); }
.os-ns-snack[hidden] { display: none; }
@media (min-width: 721px) { .os-ns-snack { bottom: 24px; } }

/* Uitklapregels: Eerdere locaties, Eerdere contacten en dergelijke, met een pijltje dat meedraait. */
.os-ns-rij--uitklap, .os-ns-rij--kaart { display: block; }
.os-ns-uitklap > summary { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 0 12px 0 56px; box-sizing: border-box; color: var(--ns-tekst); font-size: 15px; list-style: none; cursor: pointer; }
.os-ns-blok--locaties .os-ns-uitklap > summary, .os-ns-blok--contacten .os-ns-uitklap > summary, .os-ns-blok--klant .os-ns-uitklap > summary { padding-left: 72px; }
.os-ns-uitklap > summary::-webkit-details-marker, .os-ns-inst > summary::-webkit-details-marker, .os-ns-meerpand > summary::-webkit-details-marker { display: none; }
.os-ns-uitklap__tekst { flex: 1; min-width: 0; }
.os-ns-uitklap__pijl { flex: none; display: flex; color: var(--ns-kop); transition: transform 280ms cubic-bezier(.2, 0, 0, 1); }
details[open] > summary > .os-ns-uitklap__pijl { transform: rotate(180deg); }
.os-ns-uitklap__lijst { margin: 0; padding: 0 12px 12px 56px; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.os-ns-blok--locaties .os-ns-uitklap__lijst, .os-ns-blok--contacten .os-ns-uitklap__lijst, .os-ns-blok--klant .os-ns-uitklap__lijst { padding-left: 72px; }
.os-ns-uitklap__lijst > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; min-height: 48px; }
.os-ns-uitklap__lijst form { margin: 0; }
.os-ns-uitklap__regel { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns .os-ns-uitklap__regel a { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.os-ns-uitklap__rijen { padding: 0 0 8px; }
.os-ns-uitklap__rijen > .os-ns-rij { background: transparent; }
.os-ns-uitklap--klein > summary { min-height: 48px; padding: 0 4px 0 0; color: var(--ns-kop); font-size: 14px; font-weight: 500; }
.os-ns-uitklap--klein .os-ns-uitklap__lijst { padding: 0 0 8px; font-size: 14px; }

/* Contacten: op de computer rijen met naam, nummer, mailadres en ⋮ (eigenaar, 9 oktober). */
.os-ns .os-ns-contact__naam { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 8px 4px 8px 16px; color: var(--ns-tekst); text-decoration: none; }
@media (min-width: 721px) {
  .os-ns-contact { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.3fr) 48px; align-items: center; column-gap: 16px; padding: 8px 4px 8px 0; }
  .os-ns .os-ns-contact__naam { padding: 0 0 0 16px; }
  .os-ns .os-ns-contact__kanaal { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; color: var(--ns-tekst); font-size: 16px; line-height: 24px; text-decoration: none; overflow-wrap: anywhere; }
  .os-ns span.os-ns-contact__kanaal { color: var(--ns-grijs); font-size: 14px; }
  .os-ns-contact > .os-rp-meer { margin: 0; }
}

/* De installaties: een kaart die uitklapt; op de computer de velden in drie kolommen. */
.os-ns-inst > summary { display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 8px 12px 8px 16px; box-sizing: border-box; list-style: none; cursor: pointer; }
.os-ns-inst__inhoud { display: flex; flex-direction: column; gap: 16px; padding: 4px 16px 16px 72px; }
.os-ns-velden { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.os-ns-velden > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns-velden dt { display: flex; align-items: center; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
.os-ns-velden dd { margin: 0; display: flex; flex-direction: column; align-items: flex-start; font-size: 16px; line-height: 24px; overflow-wrap: anywhere; }
.os-ns-inst__knoppen { display: flex; align-items: center; gap: 8px; }
.os-ns-regelknoppen { display: flex; flex-wrap: wrap; gap: 0 4px; margin-left: -12px; }
@media (min-width: 721px) {
  .os-ns-inst__inhoud { padding: 4px 20px 20px 72px; }
  .os-ns-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; }
}

/* Het pand: de velden uit het ontwerp open, de rest onder Meer pandgegevens, met de knop eronder. */
.os-ns-pand { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns-pand > .os-ns-gegeven { display: flex; min-height: 64px; padding: 8px 16px; box-sizing: border-box; border-radius: 4px; background: #fff; }
.os-ns-pand > .os-ns-gegeven:first-child { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.os-ns-pand--slot > .os-ns-gegeven:last-child { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-ns-pand > .os-ns-gegeven > dd { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.os-ns-pand--meer { padding-top: 2px; }
.os-ns .os-ns-pand--meer > .os-ns-gegeven { border-radius: 4px; }
.os-ns-meerpand { display: flex; flex-direction: column; }
.os-ns-meerpand > summary { order: 1; display: flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 2px; padding: 0 12px 0 16px; box-sizing: border-box; border-radius: 4px; background: #fff; color: var(--ns-link); font-size: 15px; font-weight: 600; list-style: none; cursor: pointer; }
.os-ns-meerpand--slot > summary { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.os-ns-meerpand > summary > .os-ns-uitklap__pijl { color: var(--ns-link); }
.os-ns-meerpand__dicht, .os-ns-meerpand__open { flex: 1; }
.os-ns-meerpand[open] .os-ns-meerpand__dicht, .os-ns-meerpand:not([open]) .os-ns-meerpand__open { display: none; }
@media (min-width: 721px) {
  .os-ns-pand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 16px 24px; padding: 16px 20px; border-radius: 20px 20px 4px 4px; background: #fff; }
  .os-ns-pand--slot { border-radius: 20px; }
  .os-ns .os-ns-pand > .os-ns-gegeven { min-height: 0; padding: 0; justify-content: flex-start; border-radius: 0; background: transparent; }
  .os-ns-pand--meer { padding: 0 20px 16px; border-radius: 0; }
  .os-ns-pand:has(+ .os-ns-meerpand[open]) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .os-ns-meerpand > summary { padding: 0 16px 0 20px; }
}

/* Foto's: tegels in een wit blok. */
.os-ns-fotos { margin: 0; padding: 8px; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border-radius: 20px; background: #fff; }
.os-ns-foto { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.os-ns .os-ns-foto__beeld { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #E3E7ED; color: var(--ns-kop); font-weight: 700; text-decoration: none; }
.os-ns-foto__beeld img { width: 100%; height: 100%; object-fit: cover; }
.os-ns-foto__naam { padding: 0 4px 4px; font-size: 13px; line-height: 18px; color: var(--ns-kop); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 721px) {
  .os-ns-fotos { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 12px; }
  .os-ns .os-ns-foto__beeld { aspect-ratio: 4 / 3; }
}

@media (max-width: 720px) {
  .os-ns { gap: 24px; padding-bottom: 88px; }
  .os-ns-balk { display: flex; align-items: center; margin: -10px -8px -24px; color: var(--ns-kop); }
  .os-ns-kruimel, .os-ns-kop__knoppen { display: none; }
  .os-ns-kop { flex-direction: column; gap: 16px; padding: 8px 12px 0; text-align: center; }
  .os-ns-kop__beeld { width: 112px; height: 112px; font-size: 52px; }
  .os-ns-kop__tekst { flex: none; align-items: center; }
  .os-ns-kop__naam { font-size: 28px; line-height: 36px; }
  .os-ns-acties { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 0 4px; margin-top: -4px; }
  .os-ns-raster, .os-ns-kolom { display: contents; }
  .os-ns-blok--contactgegevens, .os-ns-blok--klant { order: 1; }
  .os-ns-blok--contacten, .os-ns-blok--installaties, .os-ns-gebouw { order: 2; }
  .os-ns-blok--locaties, .os-ns-blok--pand, .os-ns-gebouwen-voet { order: 3; }
  .os-ns-blok--offertes { order: 4; }
  .os-ns-blok--administratie, .os-ns-blok--fotos { order: 5; }
  .os-ns-blok--opmerkingen { order: 6; }
  /* Op de telefoon zonder kop boven de nummers en mailadressen, zoals in het ontwerp. */
  .os-ns-blok--contactgegevens > .os-ns-blok__titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* -- Starten (deel B; eigenaar 11 oktober, punt 1): "Welke offerte?" en de vakgebieden, als venster in het
   midden zoals "Welk nummer?". De vensters staan onderaan de pagina en tellen niet mee in haar opbouw. */
.os-ns .os-lp-venster { position: absolute; }
.os-ns .os-lp-soort { flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; }
.os-lp-soort__icoon { flex: none; width: 40px; height: 40px; border-radius: 999px; background: var(--ns-zacht); color: var(--ns-zacht-tekst); display: flex; align-items: center; justify-content: center; }
.os-lp-soort__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns .os-lp-soort.is-uit, .os-ns .os-lp-soort.is-uit:hover { background: transparent; color: var(--ns-grijs); cursor: default; }
.os-ns .os-lp-soort.is-uit .os-lp-soort__icoon { background: var(--ns-zweef); color: var(--ns-grijs); }
.os-lp-later { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--ns-zweef); font-size: 12px; line-height: 20px; font-weight: 600; color: var(--ns-grijs); vertical-align: 1px; }
.os-ns .os-lp-soort--kop:hover { background: transparent; }
.os-ns .os-lp-gebouw { min-height: 52px; padding-left: 80px; }
/* Achter de pil Opname heet het venster "Nieuwe opname", na "Welke offerte?" "Adviesofferte" (os-relaties.js). */
.os-lp-start__offerte { display: none; }
.os-lp-start[data-van="offerte"] .os-lp-start__offerte { display: inline; }
.os-lp-start[data-van="offerte"] .os-lp-start__pil { display: none; }
.os-lp-start__sub { padding: 0 24px 8px; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-lp-start__leeg { padding: 8px 24px; font-size: 15px; line-height: 22px; }
/* De keuzes bij het starten, in het venster en op de pagina Nieuwe opname. Elke regel minstens 48 px hoog. */
.os-start { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
.os-start__vraag { padding: 8px 24px 4px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ns-kop); }
.os-ns .os-start__keuze { display: flex; align-items: flex-start; gap: 16px; min-height: 48px; padding: 12px 24px; box-sizing: border-box; color: var(--ns-tekst); font-size: 16px; line-height: 24px; cursor: pointer; }
.os-ns .os-start__keuze:hover { background: var(--ns-zweef); }
.os-start__vinkje { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ns-link); }
.os-start__tekst { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-start__uitleg { font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns .os-start__keuze--bevestig { margin-top: 8px; border-top: 1px solid var(--ns-zweef); }
.os-start__fout { margin: 8px 24px 0; padding: 10px 14px; border-radius: 12px; background: #FCE4E4; color: #8E1B1B; font-size: 14px; line-height: 20px; }
.os-start__knoppen { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 24px; }
.os-ns .os-start__knoppen .os-rp-kies__annuleren { margin: 0; }
.os-start__noot { margin: 0 24px 12px; font-size: 13px; line-height: 18px; color: var(--ns-grijs); }
/* De pagina "Voor welk pand?": dezelfde keuzes als het venster, op een witte kaart. */
.os-start-blok > form { display: flex; flex-direction: column; padding: 8px 0; border-radius: 20px; background: #fff; }
.os-start-pagina .os-ns-rij { padding-right: 8px; }
.os-start__hulp { margin: 0 0 8px; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
/* Voor welk pand? (UAT van 17 oktober 2026, punt 2 en 3; bord "Opname-starten"), in het venster op de relatiepagina
   en als pagina: per locatie de panden als kaarten met een rondje, het gekozen pand blauw omrand. */
.os-ns .os-start-pand { display: flex; flex-direction: column; gap: 4px; padding: 0 16px 8px; }
.os-ns .os-start-blok > .os-start-pand { padding: 16px; }
.os-start-pand .os-start { gap: 4px; }
.os-start-pand .os-start__vraag { padding: 0 8px 8px; font-size: 15px; line-height: 22px; }
.os-start__plek { margin: 0; padding: 8px 8px 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ns-grijs); }
.os-ns .os-start__pand { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; box-sizing: border-box; border-radius: 14px; background: #F3F6FA; color: var(--ns-tekst); cursor: pointer; }
.os-ns .os-start__pand:has(input:checked) { background: #E8F0FA; box-shadow: inset 0 0 0 2px var(--ns-link); }
.os-ns .os-start__pand:has(input:focus-visible) { outline: 2px solid var(--ns-link); outline-offset: 2px; }
.os-ns .os-start__pand.is-uit { color: var(--ns-grijs); cursor: default; }
.os-start__pand .os-start__vinkje { margin: 0; }
.os-start__pand .os-start__tekst > span:first-child { font-size: 15px; line-height: 20px; font-weight: 600; }
.os-start__pand .os-start__uitleg { font-size: 13px; line-height: 18px; }
.os-ns .os-start__toevoegen { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px; color: var(--ns-link); font-size: 15px; font-weight: 600; text-decoration: none; }
.os-ns .os-start-pand .os-start__keuze--bevestig { margin-top: 8px; padding: 12px; border-top: 0; border-radius: 14px; background: #F3F6FA; }
.os-start-pand .os-start__fout { margin: 8px 0 0; }
.os-start-pand .os-start__knoppen { padding: 12px 0 0; }
.os-start-pand .os-start__noot { margin: 4px 8px 0; }
/* Voor welke locatie? (Offertes › Nieuwe offerte): het zoekveld met de knop ernaast. */
.os-start-zoek { display: flex; align-items: center; gap: 8px; }
.os-start-zoek > .os-input { flex: 1; min-width: 0; min-height: 48px; }
/* De compacte werkofferte en de directe levering (eigenaar, 25 oktober 2026; KB punt 55; borden "Werkofferte-starten"
   en "Levering-starten"): het venster met de pijl terug naar Welke offerte?, het pictogram van de soort en de klant
   eronder; Wat wil de klant?, de vakgebieden als pillen met een vinkje, en starten met een knop over de hele breedte.
   Kies je Inbraakbeveiliging, dan wisselt de regel onder de vakgebieden (`:has`, ook zonder script). */
.os-vraagvenster__kop { display: flex; align-items: flex-start; gap: 4px; padding: 0 16px 8px 8px; }
.os-ns .os-vraagvenster__terug { flex: none; width: 48px; height: 48px; margin-top: -4px; border-radius: 999px; color: var(--ns-kop); display: flex; align-items: center; justify-content: center; }
.os-ns .os-vraagvenster__terug:hover { background: var(--ns-zweef); color: var(--ns-kop); }
.os-vraagvenster__kop > .os-lp-soort__icoon { margin-right: 8px; }
.os-vraagvenster__titels { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.os-ns .os-vraagvenster__titel { margin: 0; font-size: 22px; line-height: 28px; font-weight: 400; color: var(--ns-tekst); }
.os-vraagvenster__sub { font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns .os-vraagstart { gap: 16px; }
.os-ns .os-vraagstart .os-start { gap: 4px; }
.os-vraagstart__veld { display: flex; flex-direction: column; gap: 6px; }
.os-vraagstart .os-start__vraag, .os-vraagstart__veld > .os-start__vraag { padding: 0 8px 8px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ns-tekst); }
.os-vraagstart__veld > .os-start__vraag { padding-bottom: 0; }
.os-vraagstart .os-start__uitleg { margin: 0; padding: 0 8px; font-size: 13px; line-height: 18px; }
.os-ns .os-vraagstart__tekst { display: block; width: 100%; box-sizing: border-box; min-height: 96px; margin: 0; padding: 12px 14px; border: 1px solid var(--ns-rand); border-radius: 12px; background: #fff; color: var(--ns-tekst); font: inherit; font-size: 16px; line-height: 22px; resize: vertical; }
.os-ns .os-vraagstart__tekst:focus-visible { outline: 2px solid var(--ns-link); outline-offset: -1px; }
.os-vraagstart__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.os-ns .os-vraagstart__chip { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; box-sizing: border-box; border: 1px solid var(--ns-rand); border-radius: 8px; background: #fff; color: var(--ns-tekst); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer; }
.os-vraagstart__chip > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.os-vraagstart__vink { display: none; flex: none; }
.os-ns .os-vraagstart__chip:has(input:checked) { padding-left: 8px; border-color: var(--ns-zacht); background: var(--ns-zacht); color: #0C3A6B; }
.os-vraagstart__chip:has(input:checked) .os-vraagstart__vink { display: block; }
.os-ns .os-vraagstart__chip:has(input:focus-visible) { outline: 2px solid var(--ns-link); outline-offset: 2px; }
.os-vraagstart__inbraak { display: none; }
.os-vraagstart:has(input[name=vakgebied][value=INBRAAKBEVEILIGING]:checked) .os-vraagstart__gewoon { display: none; }
.os-vraagstart:has(input[name=vakgebied][value=INBRAAKBEVEILIGING]:checked) .os-vraagstart__inbraak { display: inline; }
.os-ns .os-vraagstart__knop { justify-content: center; width: 100%; min-height: 52px; font-size: 16px; }
.os-ns .os-vraagstart .os-start__noot { margin: -6px 8px 0; }
.os-ns .os-vraagstart .os-start__fout { margin: 0; }
.os-start__plekleeg { padding: 4px 8px 8px; }
/* Welke offerte? als pagina, zonder JavaScript: de soorten op een witte kaart. */
.os-vraagkiezen > .os-ns-rijen { display: flex; flex-direction: column; overflow: hidden; border-radius: 20px; background: #fff; }

/* Meer gebouwen op een locatie (eigenaar, 12 oktober 2026, punt 5): de naam van het gebouw is een echte kop,
   alles van één gebouw staat samen in een kader, en tussen de gebouwen is meer ruimte, op de computer en de
   telefoon. */
.os-ns .os-ns-gebouw { padding: 12px 12px 16px; border: 1px solid #C9D0DA; border-radius: 28px; background: #F6F8FB; }
.os-ns .os-ns-gebouw + .os-ns-gebouw { margin-top: 16px; }
.os-ns-gebouw__kop { align-items: flex-start; padding: 4px 0 8px 8px; }
.os-ns-gebouw__titel { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.os-ns-gebouw__naam { margin: 0; font-size: 22px; line-height: 28px; font-weight: 500; color: var(--ns-tekst); overflow-wrap: anywhere; }
.os-ns-gebouw__onder { margin: 0; font-size: 14px; line-height: 20px; color: var(--ns-grijs); }
.os-ns-gebouw .os-ns-subkop { margin-top: 12px; }

/* -- Overzichten in de nieuwe stijl (werkpakket nieuwe stijl, eigenaar 12 oktober 2026) ------------------
   Relaties en Locaties, nu in de vormgeving van 9 oktober: de titel zonder hoofdletters, Synthetisch
   begrensd als label, de tabbladen als pillen, de tabel als wit blok met ronde hoeken en 2 px tussen de
   rijen, koppen zonder hoofdletters, links zonder onderstreping, knoppen als pillen en de rol als label
   zonder hoofdletters. De opbouw blijft die van 5 en 8 oktober; de telefoon was al zo. */
html:has(.os-rel--ns), html:has(.os-rel--ns) body { background: #EEF1F6; }
.os-rel--ns a { text-decoration: none; }
.os-rel--ns a:hover { text-decoration: underline; }
.os-rel--ns .os-rel__titel { margin-bottom: 12px; font-size: 28px; line-height: 36px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #1B1F26; }
.os-rel-synthlabel { display: inline-block; margin-right: 4px; padding: 2px 10px; border-radius: 999px; background: #FDEBC8; color: #6B4500; font-size: 12px; line-height: 18px; font-weight: 600; }
.os-rel--ns .os-rel-tabs { gap: 8px; border-bottom: 0; }
.os-rel--ns .os-rel-tab { height: 40px; margin-bottom: 0; padding: 0 16px; border: 1px solid #8C939D; border-radius: 999px; background: #fff; color: #1B1F26; font-weight: 500; }
.os-rel--ns .os-rel-tab:hover { background: #F1F4F8; text-decoration: none; }
.os-rel--ns .os-rel-tab.is-gekozen { border-color: transparent; background: #D6E4F7; color: #0F2B4A; font-weight: 600; }
.os-rel--ns .os-rel-tab.is-gekozen span { color: #0F2B4A; }
.os-rel--ns .os-rel-kaart { border: 0; border-radius: 20px; }
.os-rel--ns .os-rel-balk { border-bottom: 2px solid #EEF1F6; }
.os-rel--ns .os-rel-balk__zoek input { padding: 0 18px; border: 0; border-radius: 999px; background: #E1E7EF; }
.os-rel--ns .os-rel-knop { padding: 0 18px; border-radius: 999px; background: #1F5FA8; }
.os-rel--ns .os-rel-knop:hover { background: #174A84; text-decoration: none; }
/* De ingang van de proefimport uit Silvasoft (R2.2-IMPORT): rechts naast de titel, alleen op de computer. */
.os-rel__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.os-rel--ns .os-rel-import { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 18px; box-sizing: border-box; border: 1px solid #8C939D; border-radius: 999px; background: #fff; color: #1F5FA8; font-size: 14px; font-weight: 600; text-decoration: none; }
.os-rel--ns .os-rel-import:hover { background: #F1F4F8; color: #174A84; text-decoration: none; }
@media (max-width: 720px) { .os-rel--ns .os-rel-import { display: none; } }
.os-rel--ns .os-rel-kolomknop, .os-rel--ns .os-rel-per select { border-radius: 999px; border-color: #8C939D; }
.os-rel--ns .os-rel-per select { padding: 0 12px; }
.os-rel--ns .os-rel-soorten { border-bottom: 2px solid #EEF1F6; }
.os-rel--ns .os-rel-soorten a[aria-current] { border-color: transparent; background: #D6E4F7; color: #0F2B4A; }
.os-rel--ns .os-rel-soorten a[aria-current] span { color: #0F2B4A; }
.os-rel--ns .os-rel-filter { border-bottom: 2px solid #EEF1F6; }
.os-rel--ns .os-rel-tabel thead tr { background: transparent; }
.os-rel--ns .os-rel-tabel th { font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #5E6470; }
.os-rel--ns .os-rel-tabel td { border-top: 2px solid #EEF1F6; }
.os-rel--ns .os-rel-rolbadge { letter-spacing: 0; font-weight: 600; }