/* Logboek Zeiljachten – in de stijl van het Yacht Portraits-brandbook:
   ivoor, donkerblauw en messing; Cormorant Garamond voor koppen, Source Sans 3 voor tekst.
   Rust, vakmanschap, de foto voorop; ingetogen vormgeving zonder felle accenten. */
:root {
  --ink: #0a1f32;
  --paper: #f6f2ea;
  --wit: #ffffff;
  --brass: #b7995b;
  --brass-deep: #8a7241;
  --muted: #5b6876;
  --line: #6b7785;
  --hair: rgba(10, 31, 50, .14);
  --zacht: rgba(10, 31, 50, .05);
  --rood: #a23b2a;
  --groen: #3c6e3f;
  --oranje: #9a6a1c;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --rond: 3px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.5 var(--sans);
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--brass-deep); text-underline-offset: 3px; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
h1 { font-size: 2.5rem; line-height: 1.05; margin: .2rem 0; font-weight: 300; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; line-height: 1.15; margin: .2rem 0; font-weight: 300; }
h1 em, h2 em { color: var(--brass); font-style: italic; font-weight: 400; }
h3 { font: 600 .95rem/1.3 var(--sans); margin: .2rem 0; }
b { font-weight: 600; }

.bovenkop, .vkop, th {
  font: 600 .7rem/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--brass-deep);
}
.bovenkop { margin: 0 0 .3rem; }

/* kopbalk – zoals yachtportraits.nl: licht, rustig, beeldmerk in messing */
.balk {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: rgba(246, 242, 234, .92); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: calc(.75rem + env(safe-area-inset-top)) 1.2rem .75rem;
  border-bottom: 1px solid var(--hair);
}
.merk { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--ink); }
.merk img { height: 2.1rem; width: auto; transform: translateY(-.08em); }
.merk .streep { width: 1px; height: 1.5rem; background: var(--ink); opacity: .55; }
.merk span.woord { font: 400 1.45rem/1 var(--serif); letter-spacing: -.01em; }
.merk span.woord i { color: var(--brass); font-style: italic; font-weight: 400; }
#wie { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-align: right; }
#wie a { color: var(--brass-deep); margin-left: .5rem; text-decoration: none; border-bottom: 1px solid var(--brass); }

main { max-width: 900px; margin: 0 auto; padding: 1.2rem 1rem 3rem; }
.laden { color: var(--muted); text-align: center; margin-top: 3rem; }

.kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.2rem 0 .8rem; }
.terug { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--brass-deep); }

.welkom { text-align: center; max-width: 560px; margin: 2rem auto 0; }
.welkom h1 { font-size: 2.6rem; }

/* kaarten en lijsten */
.kaart {
  background: var(--wit); border: 0; border-radius: var(--rond); box-shadow: 0 1px 2px rgba(10, 31, 50, .05);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; display: block; color: inherit;
}
.kaart.smal { max-width: 420px; margin: 1.5rem auto; }
a.kaart { text-decoration: none; transition: box-shadow .2s; }
a.kaart:hover { box-shadow: 0 6px 22px rgba(10, 31, 50, .12); }
.raster { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.kaart.schip { padding: 0; overflow: hidden; }
.schipfoto { aspect-ratio: 3 / 2; background: #ebe5d8; display: flex; align-items: center; justify-content: center; }
.schipfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.schipfoto img.leegfoto { width: auto; height: 45%; object-fit: contain; }
.schiptekst { padding: 1rem 1.2rem 1.1rem; }
.schiptekst h2 { font-size: 1.9rem; }

.leeg { color: var(--muted); text-align: center; padding: 1.5rem 0; }
.uitleg { color: var(--muted); font-size: .95rem; margin: .3rem 0 .9rem; }
.midden { text-align: center; }
.grijs { color: var(--muted); }
.klein { font-size: .85rem; }
.groot { font: 300 2.4rem/1.1 var(--serif); margin: 0 0 .8rem; }
.sectie { margin: 1.8rem 0 .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--hair); display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
summary.sectie { cursor: pointer; font: 500 1.3rem var(--serif); }

/* schipkop met foto */
.schipkop {
  position: relative; margin: -1.2rem -1rem 0; padding: 3.2rem 1.2rem 1.2rem; color: var(--paper);
  background: linear-gradient(to bottom, rgba(10, 31, 50, .05) 30%, rgba(10, 31, 50, .78)), var(--foto, none) 50% 45% / cover no-repeat, var(--ink);
  min-height: 15rem; display: flex; flex-direction: column; justify-content: flex-end;
}
.schipkop .terug { color: rgba(246, 242, 234, .82); position: absolute; top: 1rem; left: 1.2rem; }
.schipkop h1 { font-size: 3rem; margin-top: .4rem; }
.schipkop h1 em { color: #d4bd86; }
.schipkop p { margin: .3rem 0 0; color: rgba(246, 242, 234, .82); font-size: .7rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }

.tabs {
  display: flex; gap: .2rem; overflow-x: auto; margin: 0 -1rem 1.2rem; padding: 0 1rem;
  border-bottom: 1px solid var(--hair); scrollbar-width: none; background: var(--paper);
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a {
  white-space: nowrap; padding: .8rem .7rem .7rem; text-decoration: none; color: var(--muted);
  border-bottom: 2px solid transparent; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.tabs a.actief { color: var(--ink); border-color: var(--brass); }
.teller { display: inline-block; min-width: 1.3em; padding: 0 .35em; border-radius: 99px; background: var(--brass); color: var(--wit); font: 600 .7rem/1.4 var(--sans); letter-spacing: 0; text-align: center; vertical-align: middle; }

.samenvatting, .cijfers { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-bottom: 1rem; }
.samenvatting div, .cijfers div {
  background: transparent; border-top: 1px solid var(--brass); padding: .8rem .2rem; text-align: center;
}
.samenvatting b, .cijfers b { display: block; font: 300 2rem/1.1 var(--serif); color: var(--ink); }
.samenvatting span, .cijfers span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.lijst { background: var(--wit); border: 0; border-radius: var(--rond); overflow: hidden; margin: .8rem 0 1rem; box-shadow: 0 1px 2px rgba(10, 31, 50, .05); }
.rij {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .85rem 1.1rem; border-bottom: 1px solid var(--hair); color: inherit; text-decoration: none;
}
.rij:last-child { border-bottom: 0; }
a.rij:hover, .rij.klikbaar:hover { background: var(--zacht); }
.rij.klikbaar { cursor: pointer; }
.rechts { text-align: right; flex-shrink: 0; }
.actjes { display: flex; gap: .3rem; margin-top: .45rem; justify-content: flex-end; flex-wrap: wrap; }
.actjes.links { justify-content: flex-start; }

.logboek { background: var(--wit); border: 0; border-radius: var(--rond); overflow: hidden; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(10, 31, 50, .05); }
.logregel { display: grid; grid-template-columns: 4.4rem 1fr; gap: .9rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--hair); font-size: .95rem; }
.logregel:last-child { border-bottom: 0; }
.logregel.klikbaar { cursor: pointer; }
.logregel.klikbaar:hover { background: var(--zacht); }
.tijdstip { font: 500 1.35rem/1 var(--serif); color: var(--brass-deep); }
.opmerking { white-space: pre-wrap; font-style: italic; margin: .25rem 0 0; }

.feiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid var(--hair); }
.feiten div:last-of-type { border-bottom: 0; }
.feiten span { color: var(--muted); }
.feiten .knop { margin-top: .9rem; }

.label {
  display: inline-block; padding: .12rem .55rem; border-radius: 2px; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; border: 1px solid currentColor;
}
.label.rood { color: var(--rood); background: rgba(162, 59, 42, .06); }
.label.oranje { color: var(--oranje); background: rgba(183, 153, 91, .1); }
.label.groen { color: var(--groen); background: rgba(60, 110, 63, .06); }
.label.grijs { color: var(--muted); background: transparent; border-color: var(--hair); }
.label.zee { color: var(--brass-deep); background: transparent; border-color: var(--brass); }

/* knoppen – ronde lijnknoppen in messing, zoals 'Bespreek uw jacht' op de site */
.knop {
  appearance: none; border: 1px solid var(--brass); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 1.05rem/1.2 var(--serif); letter-spacing: .02em; text-transform: none;
  padding: .6rem 1.3rem; cursor: pointer; min-height: 44px; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; text-align: center;
  transition: background .25s, color .25s, border-color .25s;
}
.knop:hover { background: var(--brass); color: var(--wit); }
.knop.vol { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.knop.vol:hover { background: #12304a; }
.knop.licht { border-color: var(--hair); }
.knop.licht:hover { background: var(--zacht); color: var(--ink); }
.knop.gevaar { color: var(--rood); border-color: rgba(162, 59, 42, .45); }
.knop.gevaar:hover { background: var(--rood); color: var(--wit); }
.knop.breed { width: 100%; margin: .3rem 0 1rem; }
.mini {
  appearance: none; border: 1px solid var(--brass); border-radius: 999px; background: transparent; color: var(--ink);
  font: 500 .92rem/1 var(--serif); padding: .38rem .75rem; cursor: pointer; white-space: nowrap;
}
.mini:hover { background: var(--brass); color: var(--wit); }
.mini.licht { border-color: var(--hair); }
.mini.licht:hover { background: var(--zacht); color: var(--ink); }
.knoppenrij { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1rem; }
.upload { cursor: pointer; }

/* formulieren */
.veld { display: block; margin-bottom: .8rem; }
.veld > span { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.veld small { display: block; color: var(--muted); font-size: .8rem; margin-top: .2rem; }
input, select, textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); /* 16px voorkomt inzoomen op iPhone */
  padding: .6rem .7rem; border: 1px solid var(--hair); border-radius: 2px; background: var(--wit); color: var(--ink);
}
input[type="file"] { padding: .5rem; background: var(--paper); }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--brass); border-color: var(--brass); }
.vink { display: flex; gap: .5rem; align-items: flex-start; margin: .3rem 0 .8rem; font-size: .95rem; }
.vink input { width: auto; margin-top: .25rem; accent-color: var(--ink); }
.velden { display: grid; grid-template-columns: 1fr 1fr; column-gap: .8rem; }
.velden > * { grid-column: 1 / -1; }
.velden > .half { grid-column: auto; }
.vkop { margin: .9rem 0 .6rem; padding-top: .8rem; border-top: 1px solid var(--hair); }

dialog {
  border: 0; border-radius: var(--rond); padding: 0; width: min(580px, 100vw - 1rem); background: var(--paper);
  max-height: calc(100vh - 2rem); box-shadow: 0 14px 50px rgba(10, 31, 50, .35);
}
dialog::backdrop { background: rgba(10, 31, 50, .55); }
dialog form { padding: 1.2rem 1.2rem 0; }
dialog h2 { font-size: 1.9rem; font-weight: 300; }
.knoppen { display: flex; gap: .5rem; align-items: center; margin: .5rem -1.2rem 0; position: sticky; bottom: 0; background: var(--paper); padding: .8rem 1.2rem calc(.8rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); }
.knoppen .vul { flex: 1; }

#melding {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  transform: translate(-50%, 1rem); opacity: 0; visibility: hidden; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: .7rem 1.1rem; border-radius: 2px; border-left: 3px solid var(--brass);
  transition: transform .2s, opacity .2s, visibility .2s; z-index: 50; max-width: calc(100vw - 2rem);
}
#melding.zichtbaar { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
#melding.fout { border-left-color: var(--rood); }

/* herstelpunten */
.herstel h3 { font: 500 1.35rem/1.2 var(--serif); margin: .5rem 0 .2rem; }
.herstelkop { display: flex; justify-content: space-between; align-items: center; gap: .5rem; flex-wrap: wrap; }
.herstelkop .vink { margin: 0; }
.minifotos { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0 .2rem; }
.minifotos img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; display: block; }
.suggesties summary { cursor: pointer; list-style: none; }
.suggesties summary::-webkit-details-marker { display: none; }
.suggesties summary h2::after { content: " ›"; color: var(--brass); }
.suggesties[open] summary h2::after { content: " ⌄"; }
.suggesties .rij { padding-left: 0; padding-right: 0; }

/* kosten */
.jaren { display: flex; gap: .3rem; overflow-x: auto; margin-bottom: .8rem; }
.jaren a { padding: .45rem .8rem; border: 1px solid var(--hair); border-radius: 2px; text-decoration: none; color: var(--muted); font: 500 1.1rem var(--serif); }
.jaren a { border-radius: 999px; }
.jaren a.actief { background: transparent; color: var(--ink); border-color: var(--brass); }
.balkrij { display: grid; grid-template-columns: minmax(0, 11rem) 1fr auto; gap: .7rem; align-items: center; font-size: .9rem; margin: .35rem 0; }
.balkrij span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balkje { height: 6px; background: var(--zacht); }
.balkje i { display: block; height: 100%; background: var(--brass); }

/* foto's */
.fotoraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.fotoraster.klein { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.tegel { position: relative; padding: 0; border: 0; background: var(--ink); aspect-ratio: 1; cursor: pointer; overflow: hidden; border-radius: 2px; }
.tegel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.tegel:hover img { transform: scale(1.03); }
.tegel .label { position: absolute; left: .4rem; bottom: .4rem; }
.tegel .label.grijs { background: rgba(246, 242, 234, .9); }

.verkoopkaart { border-top: 1px solid var(--brass); }

/* ---------- werklijst en brochure (ook om af te drukken) ---------- */
.rapport, .brochure { background: var(--wit); border: 1px solid var(--hair); padding: 2rem 1.6rem; }
.rapport header { border-bottom: 2px solid var(--brass); padding-bottom: 1rem; margin-bottom: .6rem; }
.rapport h1 { font-size: 2.6rem; }
.rapport h2 { margin-top: 1.6rem; }
.rapport table, .specs { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rapport th { text-align: left; padding: 0 .6rem .4rem 0; border-bottom: 1px solid var(--ink); }
.rapport td { padding: .55rem .6rem .55rem 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.rapport .nr { width: 2rem; font: 500 1.1rem var(--serif); color: var(--brass-deep); }
.rapport .vakje { width: 3rem; }
.rapport .vakje::before { content: ""; display: inline-block; width: 1rem; height: 1rem; border: 1px solid var(--line); }
.rapport .notitie { width: 26%; }
.rapport footer, .brochure footer { margin-top: 2rem; padding-top: .8rem; border-top: 1px solid var(--hair); }

.brochure { padding: 0; overflow: hidden; }
.brochure > section { padding: 1.6rem 1.8rem; }
.brochure .voorkant { position: relative; padding: 0; background: var(--ink); color: var(--paper); }
.brochure .held { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-bottom: 2px solid var(--brass); }
.brochure .titelblok { padding: 1.6rem 1.8rem 1.8rem; }
.brochure .titelblok .bovenkop { color: var(--brass); }
.brochure .voorkant h1 { font-size: 3.4rem; font-weight: 300; margin: .2rem 0; }
.brochure .ondertitel { color: #c9c6bf; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; margin: 0; }
.brochure .openingszin { font: italic 300 1.5rem/1.3 var(--serif); margin: 1rem 0 0; }
.brochure .prijs { font: 400 2rem/1.1 var(--serif); color: var(--brass); margin: 1rem 0 .3rem; }
.brochure .prijs small { font: 400 .85rem var(--sans); color: #c9c6bf; }
.brochure h2 { font-size: 1.7rem; border-bottom: 1px solid var(--hair); padding-bottom: .3rem; margin: 0 0 .7rem; }
.tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.specs th { text-align: left; font-weight: 600; padding: .45rem .8rem .45rem 0; border-bottom: 1px solid var(--hair); width: 42%; vertical-align: top; }
.specs td { padding: .45rem 0; border-bottom: 1px solid var(--hair); }
.brochure ul { margin: 0 0 1rem; padding: 0; list-style: none; }
.brochure li { padding: .35rem 0 .35rem 1.1rem; border-bottom: 1px solid var(--hair); position: relative; }
.brochure li::before { content: "—"; position: absolute; left: 0; color: var(--brass); }
.galerij { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.galerij figure { margin: 0; }
.galerij img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.galerij figcaption { font-size: .8rem; color: var(--muted); margin-top: .25rem; font-style: italic; }
.brochure .contact { background: var(--paper); border-top: 2px solid var(--brass); }
.brochure footer { padding: 0 1.8rem 1.4rem; margin-top: 0; border: 0; }

@media (max-width: 600px) {
  h1 { font-size: 1.9rem; }
  .schipkop h1 { font-size: 2.2rem; }
  dialog { width: 100vw; max-width: 100vw; max-height: 92vh; margin: auto 0 0; border-radius: 0; }
  .rij { padding: .75rem .9rem; }
  .tweekolom, .galerij { grid-template-columns: 1fr; }
  .brochure .voorkant h1 { font-size: 2.6rem; }
  .rapport { padding: 1.2rem .9rem; }
  .rapport .notitie, .rapport th:last-child { display: none; }
  .balkrij { grid-template-columns: minmax(0, 8rem) 1fr auto; }
}


/* tijdlijn onderhoud en historie */
.tlgroep .vkop { border-top: 0; padding-top: .4rem; margin-top: 1.1rem; }
.lijst.tl { margin-top: .3rem; }
.tlrij { display: grid; grid-template-columns: 3.6rem 1fr auto; gap: .9rem; align-items: start; padding: .8rem 1.1rem; border-bottom: 1px solid var(--hair); }
.tlrij:last-child { border-bottom: 0; }
.tldatum { text-align: center; border-right: 1px solid var(--brass); padding-right: .8rem; line-height: 1; }
.tldatum .dag { display: block; font: 300 1.9rem/1 var(--serif); color: var(--ink); }
.tldatum .dag.uren { font-size: 1.25rem; padding-top: .3rem; }
.tldatum .mnd { display: block; font: 600 .62rem/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--brass-deep); margin-top: .2rem; }
.tlrij.te_laat .tldatum .dag { color: var(--rood); }
.tlrij.te_laat .tldatum { border-color: var(--rood); }
.tlrij.binnenkort .tldatum .dag { color: var(--oranje); }
.tltekst b { font-weight: 600; }
.roodtekst { color: var(--rood); }
.sectie em { color: var(--brass); font-style: italic; }
.sectie a { font: 400 .9rem var(--sans); text-decoration: none; }

/* snel datums invullen */
.datums .rij { align-items: center; }
.datumvelden { display: flex; gap: .4rem; flex-shrink: 0; }
.datumvelden input[type="date"] { width: 10.5rem; }
.datumvelden input[type="text"] { width: 4.6rem; }
.knoppen.vast { margin: 0; position: sticky; bottom: 0; }

/* bemanning */
.bemkeuze { border: 1px solid var(--hair); border-radius: var(--rond); padding: .7rem .8rem; margin-bottom: .8rem; background: var(--wit); }
.veldlabel { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.bemrij { display: grid; grid-template-columns: 1fr 9rem; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.bemrij .vink { margin: 0; }
.bemrij input { padding: .4rem .5rem; }
.gasten { margin: .5rem 0 .4rem; padding-top: .5rem; border-top: 1px solid var(--hair); }
.bemlijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem 1rem; }
.bemlijst div { border-left: 1px solid var(--brass); padding-left: .6rem; }
.bemlijst b { display: block; font: 400 1.2rem/1.2 var(--serif); }
.bemlijst span { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bemraster { margin-top: 1rem; }
.persoon.klikbaar { cursor: pointer; }
.persoon h2 { font-size: 1.8rem; margin-bottom: .6rem; }
.cijfers.klein3 { gap: .4rem; margin-bottom: .6rem; }
.cijfers.klein3 b { font-size: 1.4rem; }
.cijfers.klein3 span { font-size: .6rem; }

/* weer bij een reis */
.weerkolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.weerkolommen > div { border-left: 1px solid var(--brass); padding-left: .8rem; }
.weerkolommen p, .weer h3 { margin: .2rem 0; }
.weer h3 { margin-top: .9rem; }
.gemeten { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4rem 1rem; margin-top: .3rem; }
.gemeten span { display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gemeten b { font-weight: 400; }

/* facturen in brochure */
.bijlagen { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .6rem; margin-top: .8rem; }
.bijlagen figure { margin: 0; }
.bijlagen img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border: 1px solid var(--hair); display: block; }
.bijlagen figcaption { font-size: .75rem; color: var(--muted); margin-top: .2rem; }

@media (max-width: 600px) {
  .weerkolommen { grid-template-columns: 1fr; }
  .tlrij { grid-template-columns: 3.1rem 1fr; padding: .75rem .9rem; }
  .tlrij .rechts { grid-column: 2; text-align: left; }
  .tlrij .actjes { justify-content: flex-start; }
  .datums .rij { flex-direction: column; align-items: stretch; gap: .4rem; }
  .datumvelden input[type="date"] { flex: 1; width: auto; }
}


/* startpagina: foto van het eigen schip, rustig ingefaded zoals op yachtportraits.nl */
.startfoto { position: relative; display: block; margin: -1.2rem -1rem 1.4rem; height: min(52vh, 440px); overflow: hidden; background: #ebe5d8; }
.startfoto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block;
  opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 6s cubic-bezier(.22, 1, .36, 1); }
.startfoto img.geladen { opacity: 1; transform: scale(1); }
.startfoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(246, 242, 234, 0) 55%, rgba(246, 242, 234, .9) 100%); pointer-events: none; }
.startfoto .onderschrift { position: absolute; right: 1.2rem; bottom: .9rem; z-index: 1; font: italic 400 1.15rem var(--serif); color: var(--brass-deep); }

/* brochure maken */
.pdfkaart { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: .8rem; padding: .9rem 1rem; border: 1px solid var(--brass); border-radius: var(--rond); background: var(--paper); }
.pdfkaart .knoppenrij { margin: 0; }
.checkregel { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .3rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--hair); }
.checkregel .teken { font-weight: 700; }
.checkregel.ok .teken { color: var(--groen); }
.checkregel.mist .teken, .checkregel.mist span:nth-child(2) { color: var(--rood); }
.checkregel.tip .teken { color: var(--brass-deep); }
.checkregel a { font-size: .85rem; text-decoration: none; white-space: nowrap; }

/* werklijst / monteurslijst */
.rapportopties { display: grid; grid-template-columns: 1fr 1fr auto; gap: .8rem; align-items: end; }
.rapportopties .veld, .rapportopties .vink { margin: 0; }
.handtekening { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2rem; }
.handtekening div { border-top: 1px solid var(--ink); padding-top: .3rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .rapportopties { grid-template-columns: 1fr; } .startfoto { height: 36vh; } }


/* kopblok werklijst: schip en contact */
.rapportblok { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: .8rem; }
.rapportblok .bovenkop { margin-bottom: .2rem; }
.rij2 { display: grid; grid-template-columns: 6.5rem 1fr; gap: .5rem; padding: .22rem 0; border-bottom: 1px solid var(--hair); font-size: .9rem; }
.rij2 span { color: var(--muted); }
.rij2 b { font-weight: 600; }
.waarschuwing { border-left: 3px solid var(--oranje); font-size: .92rem; }
.waarschuwing a { white-space: nowrap; }
#wie a#mijn { color: var(--muted); border: 0; margin: 0; }
@media (max-width: 600px) { .rapportblok { grid-template-columns: 1fr; gap: .6rem; } }


/* =====================================================================
   Huisstijl v2 – zo dicht mogelijk bij yachtportraits.nl:
   zwevende ronde kopbalk, kleinkapitale messing kickers, geen witte kaders
   maar ivoor met haarlijnen, grote foto's zonder afronding met cursieve
   onderschriften, lijnknoppen in messing, donkerblauwe voet.
   ===================================================================== */
:root { --ink-zacht: #2d4155; --band: #efeae2; --messing-licht: #d4bd86; }
body { color: var(--ink); font-weight: 400; }
main { max-width: 1080px; padding: 1rem 1.25rem 4rem; }

/* kopbalk: zwevend en rond, zoals op de site */
.balk {
  position: sticky; top: .6rem; margin: .6rem .8rem 0; border: 0; border-radius: 1.4rem;
  background: rgba(246, 242, 234, .86); box-shadow: 0 8px 28px rgba(10, 31, 50, .10);
  padding: .55rem 1.1rem;
}
#wie { font-size: .85rem; letter-spacing: .01em; text-transform: none; font-weight: 500; color: #30414f; }
#wie a#uitlog { border: 1px solid rgba(183, 153, 91, .75); border-radius: 999px; padding: .35rem .9rem;
  font: 500 .95rem var(--serif); color: var(--ink); margin-left: .7rem; }
#wie a#uitlog:hover { background: var(--brass); color: var(--wit); }

/* kickers: kleinkapitaal, messing, met optioneel nummer */
.bovenkop, .vkop, th, .veld > span, .veldlabel, .tabs a, .samenvatting span, .cijfers span, .gemeten span, .bemlijst span, .label {
  font-variant-caps: all-small-caps; text-transform: none !important;
}
.bovenkop, .vkop { font: 600 .98rem/1.3 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--brass); }
.bovenkop .nr { font-size: .9em; margin-right: .9rem; color: var(--brass); }
th { font-size: .9rem; letter-spacing: .14em; color: var(--brass-deep); }
.veld > span, .veldlabel { font-size: .92rem; letter-spacing: .1em; }
h1 { font-size: 2.8rem; font-weight: 300; letter-spacing: -.012em; }
h2 { font-size: 1.9rem; font-weight: 300; }
h1.ingesprongen { margin-left: 1.55rem; }
h1 em, h2 em { color: var(--brass); }

/* grote foto (held): de hele foto, titel rechtsonder */
.held { position: relative; display: table; margin: .9rem auto 2.2rem; overflow: hidden; color: var(--paper); text-decoration: none; }
.held img { display: block; width: auto; max-width: min(100%, 1080px); height: auto; max-height: 80vh;
  opacity: 0; transform: scale(1.03); transition: opacity 1.4s ease, transform 5s cubic-bezier(.22, 1, .36, 1); }
.held.geladen img { opacity: 1; transform: scale(1); }
.held::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 31, 50, 0) 50%, rgba(10, 31, 50, .55) 100%); }
.heldtekst { position: absolute; right: 2rem; bottom: 1.6rem; left: 2rem; z-index: 1; text-align: right; }
.heldtekst h1 { color: var(--paper); font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.05; margin: 0; }
.heldtekst h1 em { color: var(--messing-licht); }
.heldtekst .tag { margin: .7rem 0 0; font: 600 .7rem/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: rgba(246, 242, 234, .85); }
.startfoto, .schipkop { display: none; }
.boventerug { display: inline-block; margin-top: .9rem; font: 500 .85rem var(--sans); letter-spacing: .02em; text-transform: none; color: var(--brass-deep); }
.schipkop-kort { margin: 1.4rem 0 .8rem; }
.schipkop-kort h1 em { color: var(--brass); }

/* tabbladen als de navigatie van de site */
.tabs { background: transparent; border-bottom: 1px solid var(--hair); gap: 1.4rem; margin: 0 0 1.6rem; padding: 0; }
.tabs a { font: 500 .95rem/1 var(--sans); font-variant-caps: normal; letter-spacing: .01em; color: #30414f; padding: .9rem 0 .8rem; border-bottom-width: 1px; }
.tabs a.actief { color: var(--ink); border-color: var(--brass); }

/* geen witte kaders: ivoor met haarlijnen */
.kaart, .lijst, .logboek { background: transparent; box-shadow: none; border: 0; border-top: 1px solid var(--hair); border-radius: 0; }
.kaart { padding: 1.3rem 0; }
.lijst, .logboek { border-bottom: 1px solid var(--hair); }
.rij, .logregel, .tlrij { padding-left: 0; padding-right: 0; }
a.rij:hover, .rij.klikbaar:hover, .tlrij.klikbaar:hover, .logregel.klikbaar:hover { background: rgba(183, 153, 91, .07); }
.kaart.smal { background: transparent; border-top: 1px solid var(--brass); }
.onlangsblok { border-left: 0; border-top: 1px solid var(--groen); }
.verkoopkaart, .pdfkaart { background: var(--band); border: 0; padding: 1.4rem 1.5rem; }
.verkoopkaart { margin: 1.5rem -1.25rem; padding: 2.2rem 1.25rem; }
.samenvatting div, .cijfers div { border-top: 1px solid var(--brass); }
.tldatum { border-right-color: rgba(183, 153, 91, .6); }
.tldatum .dag { font-weight: 300; }
.tldatum .mnd { font-variant-caps: all-small-caps; text-transform: none; font-size: .78rem; letter-spacing: .12em; }

/* scheepstegels op de startpagina */
.kaart.schip { padding: 0; border: 0; }
.kaart.schip:hover { box-shadow: none; }
.schipfoto { position: relative; aspect-ratio: 3 / 2; background: #e9e3d7; }
.schipfoto img { transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.kaart.schip:hover .schipfoto img { transform: scale(1.025); }
.schipfoto { overflow: hidden; }
.fotocap { position: absolute; left: 1.1rem; bottom: .9rem; font: italic 400 1.1rem var(--serif); color: var(--paper); text-shadow: 0 1px 6px rgba(10, 31, 50, .5); }
.schiptekst { padding: 1rem 0 0; }
.schiptekst h2 { font-size: 2rem; }

/* knoppen: alle als ronde messing lijnknop, zoals 'Bespreek uw jacht' */
.knop, .knop.vol { background: transparent; color: var(--ink); border: 1px solid var(--brass); border-radius: 999px;
  font: 500 1.08rem/1.1 var(--serif); padding: .8rem 1.7rem; }
.knop.vol { background: rgba(183, 153, 91, .12); }
.knop:hover, .knop.vol:hover { background: var(--brass); color: var(--wit); }
.knop.licht { border-color: rgba(10, 31, 50, .18); }
.mini { font-size: .95rem; padding: .4rem .85rem; }

/* labels rustiger */
.label { border-radius: 999px; font-size: .78rem; letter-spacing: .08em; padding: .1rem .6rem; }

/* tabellen en lijsten */
.feiten div, .rij2 { border-bottom-color: var(--hair); }
.rij b, .tltekst b { font-weight: 600; color: var(--ink); }
.grijs, .uitleg { color: rgba(45, 65, 85, .78); }
.uitleg { font-size: 1.02rem; line-height: 1.7; max-width: 44em; }

/* dialoogvenster */
dialog { border-radius: 1.2rem; }
dialog h2 { font-size: 2.1rem; }
.knoppen { background: var(--paper); }

/* voet zoals de site: donkerblauw met groot woordmerk */
.voet { background: var(--ink); color: var(--paper); margin-top: 3rem; padding: 3rem 1.25rem 2rem; }
.voetbinnen { max-width: 1080px; margin: 0 auto; border-top: 1px solid rgba(183, 153, 91, .55); padding-top: 1.2rem; }
.voetmerk { font: 400 2.6rem/1 var(--serif); margin: 0; letter-spacing: -.01em; }
.voetmerk i { color: var(--messing-licht); }
.voetregel { margin: .7rem 0 0; font-size: .85rem; color: rgba(246, 242, 234, .6); }

@media (max-width: 600px) {
  main { padding: .6rem 1rem 3rem; }
  .balk { margin: .5rem .5rem 0; top: .5rem; }
  .held { margin-left: -1rem; margin-right: -1rem; display: block; }
  .held img { width: 100%; max-width: none; }
  .heldtekst { right: 1.1rem; left: 1.1rem; bottom: 1.1rem; }
  .heldtekst .tag { letter-spacing: .2em; font-size: .62rem; }
  h1 { font-size: 2.3rem; }
  h1.ingesprongen { margin-left: 0; }
  .tabs { gap: 1.1rem; }
  .verkoopkaart { margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; }
  #wie a#mijn { display: none; }
  .voetmerk { font-size: 2rem; }
}

@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: #fff; }
  body { -webkit-print-color-adjust: exact; print-color-adjust: exact; font-size: 10.5pt; }
  .balk, .geen-afdruk, #melding, .startfoto, .voet, .boventerug { display: none !important; }
  main { max-width: none; padding: 0; }
  .rapport, .brochure { border: 0; padding: 0; }
  .brochure > section { padding: 1rem 0; break-inside: avoid; }
  .brochure .voorkant { break-after: page; }
  .brochure .titelblok { padding: 1.2rem 1.4rem 1.4rem; }
  .brochure .galerij { break-inside: auto; }
  .galerij figure, .rapport tr { break-inside: avoid; }
  .tweekolom { grid-template-columns: 1fr 1fr; }
  .rapportblok { grid-template-columns: 1fr 1fr; }
  .galerij { grid-template-columns: 1fr 1fr; }
  a { color: inherit; text-decoration: none; }
}

@media (max-width: 420px) {
  .merk span.woord { font-size: 1.2rem; white-space: nowrap; }
  .merk img { height: 1.8rem; }
  #wie span { display: none; }
}

/* onderhoud gedaan: eenvoudig kiezen en 'onlangs gedaan' */
.keuzelijst { display: flex; flex-direction: column; gap: .4rem; max-height: 60vh; overflow-y: auto; margin-bottom: .5rem; }
.keuze { display: flex; justify-content: space-between; align-items: center; gap: .6rem; text-align: left; width: 100%;
  background: var(--wit); border: 1px solid var(--hair); border-radius: var(--rond); padding: .8rem .9rem; font: 400 1rem var(--sans); color: var(--ink); cursor: pointer; }
.keuze:hover { border-color: var(--brass); }
.keuze.los { font-style: italic; color: var(--muted); }
details.meer { margin: .2rem 0 .6rem; }
details.meer summary { cursor: pointer; color: var(--brass-deep); font-size: .9rem; padding: .3rem 0 .6rem; }
.onlangs { color: var(--groen); font-size: .85rem; font-weight: 600; }
.onlangsblok { border-left: 3px solid var(--groen); }
.onlangsrij { display: grid; grid-template-columns: 1.3rem 1fr; column-gap: .3rem; padding: .35rem 0; border-bottom: 1px solid var(--hair); }
.onlangsrij:last-child { border-bottom: 0; }
.onlangsrij .vinkje { color: var(--groen); font-weight: 700; grid-row: span 2; }
.onlangsrij .klein { grid-column: 2; }
.tlrij.klikbaar { cursor: pointer; }
.tlrij.klikbaar:hover { background: var(--zacht); }
.tlrij.recent .tldatum { border-color: var(--groen); }

/* huisstijl v2 – laatste verfijningen */
.kaart.onlangsblok { border-left: 0; border-top: 1px solid rgba(60, 110, 63, .55); padding-left: 0; }
@media (max-width: 600px) {
  .knoppenrij { gap: .45rem; }
  .knoppenrij .knop { font-size: 1rem; padding: .55rem 1.1rem; min-height: 40px; }
  .knop.breed { padding: .75rem 1.2rem; }
}

/* donkere band (voet) altijd onderaan: ook op korte pagina's sluit hij aan op de onderrand */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; width: 100%; }
.voet { flex-shrink: 0; margin-top: 3rem; }

/* startpagina: de foto één keer, rustig – foto links, tekst rechts (zoals 'Een jacht is meer dan een object.') */
.schipfoto img { opacity: 0; transition: opacity 1.2s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.schipfoto img.geladen { opacity: 1; }
.raster.een { grid-template-columns: 1fr; }
.raster.een .kaart.schip { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.6rem; align-items: center; }
.raster.een .schipfoto { aspect-ratio: 4 / 3; }
.raster.een .schiptekst { padding: 0; }
.raster.een .schiptekst h2 { font-size: 2.6rem; line-height: 1.05; margin: .3rem 0 .6rem; }
.schiptekst h2 em { color: var(--brass); }
@media (max-width: 700px) {
  .raster.een .kaart.schip { grid-template-columns: 1fr; gap: 1rem; }
  .raster.een .schiptekst h2 { font-size: 2.2rem; }
}
/* geen 4 px extra scroll door de zwevende kopbalk */
body { min-height: calc(100vh - .6rem); min-height: calc(100dvh - .6rem); }

.naarschip { margin-top: 1.4rem; font: 500 1.05rem var(--serif); color: var(--ink); display: inline-block; border-bottom: 1px solid var(--brass); padding-bottom: .15rem; }

/* menubalk: vaste maat, niets mag verspringen */
.schipkop-kort { min-height: 5.4rem; }
.schipkop-kort .bovenkop { min-height: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.schipkop-kort h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { scroll-behavior: auto; }
.tabs a { flex-shrink: 0; }
.teller { min-width: 1.35em; }

/* inlogpagina met korte introductie */
.introgrid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 3.5rem; align-items: start; margin-top: 2.2rem; }
.intro h1 { font-size: 3rem; margin: .3rem 0 1rem; }
.introtekst { font-size: 1.12rem; line-height: 1.75; color: var(--ink-zacht); max-width: 34em; margin: 0 0 1.6rem; }
.intropunten { list-style: none; margin: 0 0 1.4rem; padding: 0; border-top: 1px solid var(--hair); }
.intropunten li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .4rem; padding: .95rem 0; border-bottom: 1px solid var(--hair); }
.intropunten .nr { font: italic 400 1.3rem/1.2 var(--serif); color: var(--brass); }
.intropunten b { font: 400 1.45rem/1.2 var(--serif); color: var(--ink); }
.intropunten p { margin: .25rem 0 0; font-size: .95rem; line-height: 1.65; color: rgba(45, 65, 85, .78); }
.introgrid .inlogvak { margin: 0; position: sticky; top: 6rem; }
@media (max-width: 760px) {
  .introgrid { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1rem; }
  .intro h1 { font-size: 2.3rem; }
  .introgrid .inlogvak { position: static; }
}

.alleenmobiel { display: none; }
@media (max-width: 760px) { .alleenmobiel { display: flex; margin: -.4rem 0 1.4rem; } }

/* beheer */
#wie a#beheerlink { color: var(--brass-deep); margin-right: .9rem; font-weight: 600; }
.samenvatting.vier { grid-template-columns: repeat(4, 1fr); }
.rij.gebruiker.geblokkeerd { opacity: .6; }
.mini.gevaar { border-color: rgba(162, 59, 42, .45); color: var(--rood); }
.mini.gevaar:hover { background: var(--rood); color: var(--wit); }
@media (max-width: 600px) { .samenvatting.vier { grid-template-columns: repeat(2, 1fr); } }

/* intro ook na inloggen */
#wie a#overlink, #wie a#feedbacklink { color: #30414f; margin-right: .9rem; border: 0; }
.voetregel a { color: var(--messing-licht); text-decoration: none; border-bottom: 1px solid rgba(212, 189, 134, .5); }
.overpagina { max-width: 760px; margin: 2rem 0 1rem; }
@media (max-width: 600px) { #wie a#overlink, #wie a#feedbacklink { display: none; } }

/* fotopagina: weergavekeuze en formaten */
.fotobalk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.weergave { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--hair); border-radius: 999px; padding: .2rem; }
.weergave span { font: 600 .85rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brass); padding: 0 .5rem 0 .6rem; }
.weergave button { border: 0; background: transparent; border-radius: 999px; padding: .4rem .85rem; font: 500 1rem var(--serif); color: #30414f; cursor: pointer; }
.weergave button.actief { background: rgba(183, 153, 91, .18); color: var(--ink); }
.fotoraster { gap: .6rem; }
.fotoraster.klein { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; }
.fotoraster.middel { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.fotoraster.middel .tegel { aspect-ratio: 3 / 2; }
.fotoraster.groot { grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr)); gap: 1rem; }
.fotoraster.groot .tegel { aspect-ratio: auto; background: transparent; }
.fotoraster.groot .tegel img { height: auto; object-fit: contain; }
.tegel { border-radius: 0; cursor: zoom-in; }
.tegelcap { position: absolute; left: 1rem; bottom: .8rem; font: italic 400 1.1rem var(--serif); color: var(--paper); text-shadow: 0 1px 6px rgba(10, 31, 50, .55); text-align: left; }
.minifoto { border: 0; padding: 0; background: none; cursor: zoom-in; }

/* fotoviewer: groot bekijken en doorklikken */
body.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(10, 31, 50, .96); display: flex; align-items: center; justify-content: center; animation: vIn .25s ease; }
@keyframes vIn { from { opacity: 0; } to { opacity: 1; } }
.viewer figure { margin: 0; max-width: calc(100vw - 9rem); max-height: calc(100vh - 7rem); display: flex; flex-direction: column; align-items: center; }
.viewer img { max-width: 100%; max-height: calc(100vh - 9rem); object-fit: contain; opacity: 0; transition: opacity .35s ease; }
.viewer img.klaar { opacity: 1; }
.viewer figcaption { margin-top: .8rem; font: italic 400 1.15rem var(--serif); color: var(--paper); min-height: 1.4rem; text-align: center; }
.vsluit { position: absolute; top: 1rem; right: 1.2rem; background: none; border: 0; color: var(--paper); font: 300 2.6rem/1 var(--serif); cursor: pointer; }
.vpijl { position: absolute; top: 50%; transform: translateY(-50%); width: 3.2rem; height: 3.2rem; border-radius: 999px;
  border: 1px solid rgba(212, 189, 134, .7); background: rgba(10, 31, 50, .4); color: var(--paper); font: 300 2rem/1 var(--serif); cursor: pointer; }
.vpijl:hover { background: var(--brass); }
.vpijl.vorige { left: 1.4rem; } .vpijl.volgende { right: 1.4rem; }
.vonder { position: absolute; bottom: 1rem; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: .8rem; }
.vteller { font: 600 .8rem var(--sans); letter-spacing: .2em; color: rgba(246, 242, 234, .7); }
.vonder .mini { color: var(--paper); border-color: rgba(212, 189, 134, .7); text-decoration: none; }
.vonder .mini.licht { border-color: rgba(246, 242, 234, .3); }
@media (max-width: 600px) {
  .viewer figure { max-width: 100vw; }
  .viewer img { max-height: calc(100vh - 10rem); }
  .vpijl { top: auto; bottom: 4.2rem; transform: none; width: 2.8rem; height: 2.8rem; }
  .vpijl.vorige { left: 1rem; } .vpijl.volgende { right: 1rem; }
  .weergave span { display: none; }
}

/* toon wachtwoord */
.wwveld { position: relative; }
.toonww { position: absolute; right: .55rem; bottom: .55rem; border: 0; background: none; color: var(--brass-deep);
  font: 600 .8rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .1em; cursor: pointer; padding: .2rem .3rem; }
.wwveld input { padding-right: 4.2rem; }

/* vermelding Yacht Portraits */
.voetregel.onderdeel { margin-top: .35rem; font-size: .8rem; color: rgba(246, 242, 234, .45); }
.onderdeelvan a { color: var(--brass-deep); text-decoration: none; border-bottom: 1px solid rgba(183, 153, 91, .5); }
.onderdeelvan i { font-family: var(--serif); font-size: 1.05em; }

/* brochure: verhaal en onderdelen */
.brochure .verhaal p { font: italic 300 1.2rem/1.6 var(--serif); color: var(--ink-zacht); max-width: 40em; margin: 0; }
.brochure .blokken { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 2rem; }
@media (max-width: 600px) { .brochure .blokken { grid-template-columns: 1fr; } }

/* lijst voor de monteur: zelf kiezen wat erop komt */
.lijstkeuze { margin: .4rem 0 1.4rem; padding: 1.2rem 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.keuzeknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: .5rem 0 1rem; }
.keuzeknoppen button { text-align: left; background: transparent; border: 1px solid var(--hair); border-radius: 1rem; padding: .85rem 1rem; cursor: pointer; color: var(--ink); }
.keuzeknoppen button b { display: block; font: 400 1.25rem/1.2 var(--serif); }
.keuzeknoppen button span { display: block; font-size: .88rem; color: rgba(45, 65, 85, .75); margin-top: .2rem; }
.keuzeknoppen button.actief { border-color: var(--brass); background: rgba(183, 153, 91, .12); }
.telling { margin: .8rem 0 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.telling b { font: 400 1.4rem var(--serif); color: var(--brass-deep); }
.lijstknop { border: 1px solid var(--hair); background: transparent; border-radius: 999px; padding: .3rem .7rem; font: 500 .9rem var(--serif); color: rgba(45, 65, 85, .8); cursor: pointer; white-space: nowrap; }
.lijstknop.aan { border-color: var(--brass); background: rgba(183, 153, 91, .15); color: var(--ink); }
.keuzecel { width: 7.5rem; padding-right: .6rem !important; }
.rapport tr.uit td:not(.keuzecel) { opacity: .38; }
.rapport div.uit h2 { opacity: .45; }
@media print { .rapport tr.uit, .rapport div.uit { display: none !important; } }
@media (max-width: 600px) { .keuzeknoppen { grid-template-columns: 1fr; } .keuzecel { width: auto; } }

/* navigatie in de bovenbalk */
#wie a#schepenlink { color: #30414f; margin-right: .9rem; border: 0; }
#wie a#schepenlink.actief, #wie a#overlink.actief, #wie a#beheerlink.actief { color: var(--ink); border-bottom: 1px solid var(--brass); padding-bottom: .1rem; }
.overpagina { margin-top: 1.2rem; }
@media (max-width: 600px) {
  #wie a#schepenlink { margin-right: .5rem; font-size: .85rem; }
  #wie a#beheerlink { margin-right: .5rem; font-size: .85rem; }
  #wie a#uitlog { padding: .3rem .7rem; font-size: .9rem; margin-left: .3rem; }
  .merk span.woord { font-size: 1.1rem; }
}
@media (max-width: 380px) { .merk .streep, .merk span.woord { display: none; } }
#wie a#beheerlink { border-bottom: 0; padding-bottom: 0; color: #30414f; font-weight: 500; }
#wie a#schepenlink.actief, #wie a#overlink.actief, #wie a#beheerlink.actief { border-bottom: 1px solid var(--brass); padding-bottom: .1rem; color: var(--ink); }

/* Mijn schepen: foto in 16:9 */
.schipfoto, .raster.een .schipfoto { aspect-ratio: 16 / 9; }
.schipfoto img { object-position: 50% 50%; }

/* Gratis en Plus */
.plustag { display: inline-block; margin-left: .3rem; padding: 0 .45rem; border: 1px solid var(--brass); border-radius: 999px; font: 600 .62rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-deep); vertical-align: middle; }
.plusslot { margin: 1rem 0 2rem; padding: 2rem 1.6rem; background: var(--band); border-top: 1px solid var(--brass); }
.plusslot h2 { font-size: 2.1rem; margin-bottom: .6rem; }
.plusmelding, .herinnering { border-left: 3px solid var(--brass); padding-left: 1rem !important; }
.herinnering { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; }
.fototeller { font-size: .9rem; color: rgba(45, 65, 85, .75); }
.abonnementregel { margin-top: .6rem; }
.abonnementregel .link { color: var(--brass-deep); border-bottom: 1px solid rgba(183, 153, 91, .5); cursor: pointer; }
.vergelijk td:nth-child(2), .vergelijk td:nth-child(3), .vergelijk th:nth-child(2), .vergelijk th:nth-child(3) { text-align: center; width: 22%; }
.vergelijk td { padding: .65rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
.vergelijk th { padding: 0 .5rem .5rem; border-bottom: 1px solid var(--ink); }
.vergelijk th:nth-child(3) { color: var(--brass-deep); }
.overpagina.abonnement, .overpagina.juridisch { max-width: 820px; }
.juridisch h2 { font-size: 1.5rem; margin: 1.6rem 0 .4rem; }
.juridisch p, .juridisch li { line-height: 1.7; color: var(--ink-zacht); }
.juridisch ul { padding-left: 1.1rem; }
.akkoord { font-size: .9rem; line-height: 1.5; }
.downloadblok { margin: .8rem 0 .4rem; padding: 1rem 1.1rem; background: var(--band); border-left: 3px solid var(--brass); }
.downloadblok .knop { margin: .4rem 0 .6rem; }
.overdracht { margin-top: 1.4rem; }
.overdracht h2 em { color: var(--brass); }
body.geen-print .rapport { position: relative; }
@media print { body.geen-print * { display: none !important; } }

.backupblok { margin: 1rem 0 2rem; }
.backupblok .kop { margin-bottom: .2rem; }
.backupblok .mini { text-decoration: none; }

#gratis-plus { margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--brass); scroll-margin-top: 5.5rem; }
#gratis-plus h1 { font-size: 2.3rem; }
.naarplus { color: var(--brass-deep); text-decoration: none; border-bottom: 1px solid rgba(183, 153, 91, .5); }

/* kopbalk zoals yachtportraits.nl: niet over de hele breedte, maar in lijn met de inhoud */
.balk { width: calc(100% - 1.6rem); max-width: 1080px; margin: .6rem auto 0; padding: .55rem 1.25rem; }
@media (max-width: 600px) { .balk { width: calc(100% - 1rem); margin: .5rem auto 0; padding: .5rem 1rem; } }

/* offline-balk */
#offlinebalk { display: none; width: calc(100% - 1.6rem); max-width: 1080px; margin: .5rem auto 0; padding: .55rem 1.25rem; border-radius: 1rem;
  background: var(--band); border: 1px solid var(--brass); font-size: .9rem; color: var(--ink); position: sticky; top: 4.4rem; z-index: 4; }
#offlinebalk.zichtbaar { display: block; }
#offlinebalk.offline { border-color: var(--oranje); background: #f6eddc; }
#offlinebalk .mini { margin-left: .5rem; }
.logregel.wacht { background: rgba(183, 153, 91, .07); }
@media (max-width: 600px) { #offlinebalk { width: calc(100% - 1rem); top: 4rem; font-size: .85rem; } }

/* ---------- menu op de telefoon (zoals yachtportraits.nl) ---------- */
#menuknop { display: none; width: 2.6rem; height: 2.6rem; margin-left: .4rem; border: 0; background: none; cursor: pointer;
  position: relative; padding: 0; }
#menuknop span { position: absolute; left: .55rem; right: .55rem; height: 1.5px; background: var(--ink); border-radius: 2px;
  transition: transform .25s, top .25s; }
#menuknop span:first-child { top: 1.05rem; }
#menuknop span:last-child { top: 1.5rem; left: .85rem; }
#menuknop[aria-expanded="true"] span:first-child { top: 1.27rem; transform: rotate(45deg); }
#menuknop[aria-expanded="true"] span:last-child { top: 1.27rem; left: .55rem; transform: rotate(-45deg); }
#menupaneel { display: none; }
@media (max-width: 600px) {
  #wie > a { display: none !important; }
  #menuknop { display: inline-block; }
  #menupaneel { display: block; position: fixed; z-index: 30; top: 4.4rem; right: .5rem; left: .5rem; max-width: 420px; margin-left: auto;
    background: var(--paper); border-radius: 1.2rem; box-shadow: 0 14px 40px rgba(10, 31, 50, .18); padding: .4rem 1.2rem .8rem;
    opacity: 0; transform: translateY(-.4rem); pointer-events: none; transition: opacity .2s, transform .2s; }
  #menupaneel.open { opacity: 1; transform: none; pointer-events: auto; }
  #menupaneel a { display: block; padding: .8rem 0; border-bottom: 1px solid var(--hair); font: 400 1.35rem/1.2 var(--serif);
    color: var(--ink); text-decoration: none; }
  #menupaneel a:last-child { border-bottom: 0; color: var(--brass-deep); }
  #menupaneel a.actief { color: var(--brass-deep); }
  #menupaneel a.actief::before { content: "— "; color: var(--brass); }
  .menunaam { margin: .6rem 0 .3rem; font: 600 .95rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--brass); }
  .menunaam span { display: block; font: 400 .85rem var(--sans); font-variant-caps: normal; letter-spacing: 0; color: rgba(45, 65, 85, .7); }
}
#menuknop span { display: block !important; }

/* tussen telefoon en breed scherm: links compact naast elkaar */
@media (min-width: 601px) and (max-width: 900px) {
  #wie a#schepenlink, #wie a#overlink, #wie a#beheerlink { margin-right: .6rem; font-size: .85rem; }
  #wie a#mijn { display: none; }
  #wie a#overlink { display: inline !important; }
  .merk span.woord { font-size: 1.25rem; }
}

/* Schuifje (bijv. offline werken) */
.schuif { display: flex; align-items: center; gap: .7rem; margin: .5rem 0 .6rem; cursor: pointer; font-size: .98rem; }
.schuif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schuifje { flex: none; position: relative; width: 2.6rem; height: 1.5rem; border-radius: 1rem; background: var(--line); transition: background .2s; }
.schuifje::after { content: ""; position: absolute; top: .18rem; left: .18rem; width: 1.14rem; height: 1.14rem; border-radius: 50%; background: var(--wit); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .2s; }
.schuif input:checked + .schuifje { background: var(--groen); }
.schuif input:checked + .schuifje::after { transform: translateX(1.1rem); }
.schuif input:focus-visible + .schuifje { outline: 2px solid var(--brass); outline-offset: 2px; }

/* demo en feedback */
#demobalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
  width: calc(100% - 1.6rem); max-width: 1080px; margin: .5rem auto 0; padding: .5rem .6rem .5rem 1.25rem; border-radius: 1rem;
  background: var(--ink); color: var(--paper); font-size: .9rem; }
#demobalk b { color: var(--messing-licht, #d4bd86); font-weight: 600; letter-spacing: .04em; }
#demobalk .mini { background: var(--paper); color: var(--ink); border-color: var(--paper); text-decoration: none; }
.demostart .bovenkop { margin-bottom: .2rem; }
.demopunten { list-style: none; padding: 0; margin: .4rem 0 1.2rem; }
.demopunten li { padding: .3rem 0 .3rem 1.5rem; position: relative; }
.demopunten li::before { content: "✓"; position: absolute; left: 0; color: var(--groen); font-weight: 700; }
.demostart .knop.breed { width: 100%; justify-content: center; }
.feedbackpagina .kaart { margin-top: 1.5rem; }
.feedbackpagina textarea { width: 100%; }
.robotveld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fbrij > div:first-child { min-width: 0; }
.fbvraag { margin: .45rem 0 0; white-space: pre-wrap; }
.fbvraag span { display: block; font: 600 .78rem/1.3 var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brass-deep); }