/* ═══════════════════════════════════════════════════════════════
   PALMA — palma.css
   Huisstijl volgens de mockups: ivoor, brons, matglas, donkere knop.
   Auteur: Erwin Biharie
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #F3F1ED;
  --bg-2: #ECE8E2;
  --glas: rgba(255, 255, 255, 0.62);
  --glas-rand: rgba(255, 255, 255, 0.9);
  --lijn: rgba(60, 50, 40, 0.08);
  --tekst: #2B2925;
  --zacht: #77716A;
  --brons: #93714A;
  --brons-licht: #C9A97E;
  --brons-tint: #EFE6DA;
  --knop: #3B3A37;
  --knop-2: #55534F;
  --groen: #4F7B4B;
  --groen-tint: #E3EBDD;
  --rood: #A2553F;
  --schaduw: 0 10px 30px rgba(80, 64, 44, 0.08);
  --r-groot: 26px;
  --r-mid: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--tekst); background: var(--bg);
  -webkit-font-smoothing: antialiased; overscroll-behavior: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brons); outline-offset: 3px; border-radius: 12px; }
img { max-width: 100%; display: block; }

/* Achtergrond: zachte plantschaduw zoals in de mockups */
.decor { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 70% at 90% 10%, #FBFAF8 0%, var(--bg) 55%, var(--bg-2) 100%); }
.decor::before { content: ""; position: absolute; left: -18%; top: 18%; width: 60%; height: 60%;
  background:
    radial-gradient(closest-side, rgba(110, 120, 90, .22), transparent 70%) 0 0 / 40% 30% no-repeat,
    radial-gradient(closest-side, rgba(110, 120, 90, .18), transparent 70%) 40% 30% / 36% 26% no-repeat,
    radial-gradient(closest-side, rgba(110, 120, 90, .16), transparent 70%) 10% 70% / 44% 30% no-repeat;
  filter: blur(26px); transform: rotate(-18deg); }

/* App-indeling zoals een gewone app: inhoud scrolt, tabbalk staat vast eronder */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; height: 100dvh; }
#app { position: relative; z-index: 1; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  width: 100%; padding: calc(env(safe-area-inset-top) + 14px) max(20px, calc((100% - 480px) / 2)) 28px; }

/* ── Kop ── */
.kop { display: flex; align-items: flex-start; justify-content: space-between; min-height: 104px; }
.kop .rond { width: 46px; height: 46px; border-radius: 50%; background: var(--glas); border: 1px solid var(--glas-rand);
  display: grid; place-items: center; box-shadow: var(--schaduw); margin-top: 10px; }
.kop .rond svg { width: 20px; height: 20px; stroke: var(--tekst); }
.kop .leeg { width: 46px; }
.merk { text-align: center; flex: 1; }
.merk svg { width: 50px; height: 56px; color: var(--brons); }
.merk .naam { font-size: 26px; letter-spacing: .42em; padding-left: .42em; font-weight: 400; margin-top: 2px; }
.merk .slogan { font-size: 9.5px; letter-spacing: .38em; padding-left: .38em; color: var(--zacht); margin-top: 6px; }

h1 { font-size: 36px; line-height: 1.12; font-weight: 500; text-align: center; margin: 18px 0 8px; letter-spacing: -.01em; }
.sub { text-align: center; color: var(--zacht); font-size: 16.5px; line-height: 1.5; margin: 0 auto 18px; max-width: 34ch; }

/* ── Glazen panelen ── */
.paneel { background: var(--glas); border: 1px solid var(--glas-rand); border-radius: var(--r-groot);
  box-shadow: var(--schaduw); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.beeldkaart { position: relative; border-radius: var(--r-groot); overflow: hidden; background: linear-gradient(135deg, #E9E5DF, #D9D3CA);
  border: 1px solid var(--glas-rand); box-shadow: 0 18px 40px rgba(80, 64, 44, .14); }
.beeldkaart img.hand { width: 100%; height: 100%; object-fit: cover; }
.hoek { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.85); }
.hoek.lb { left: 16px; top: 16px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.hoek.rb { right: 16px; top: 16px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.hoek.lo { left: 16px; bottom: 16px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.hoek.ro { right: 16px; bottom: 16px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }

.hud { position: absolute; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.28);
  border: 1px solid rgba(255,255,255,.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 10.5px; letter-spacing: .12em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.18); line-height: 1.7; }
.hud.donker { color: var(--tekst); text-shadow: none; background: rgba(255,255,255,.55); }
.hud .stip { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #5DBB7A; margin-right: 6px; vertical-align: middle; }
.hud ul { list-style: none; margin: 0; padding: 0; }
.hud li::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: middle; opacity: .9; }
.hud li.uit::before { opacity: .45; }
.balkjes { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin-top: 8px; }
.balkjes i { width: 4px; background: currentColor; border-radius: 2px; opacity: .85; }

/* ── Knoppen ── */
.knop { width: 100%; height: 62px; border-radius: 32px; display: flex; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(180deg, var(--knop-2), var(--knop)); color: #fff; font-size: 19px;
  box-shadow: 0 12px 28px rgba(40, 36, 30, .25), inset 0 1px 0 rgba(255,255,255,.18); position: relative; }
.knop .pijl { position: absolute; right: 26px; }
.knop svg { width: 22px; height: 22px; stroke: currentColor; }
.knop.licht { background: var(--glas); color: var(--tekst); border: 1px solid var(--glas-rand); box-shadow: var(--schaduw); height: 56px; font-size: 18px; }
.knop[disabled] { opacity: .45; }
.knoppen { display: grid; gap: 12px; margin-top: 16px; }

/* ── Segmenten ── */
.segment { display: flex; padding: 5px; border-radius: 28px; background: rgba(255,255,255,.45); border: 1px solid var(--glas-rand); margin: 6px auto 16px; }
.segment button { flex: 1; height: 44px; border-radius: 22px; color: var(--zacht); font-size: 16px; }
.segment button[aria-pressed="true"] { background: #fff; color: var(--tekst); box-shadow: 0 4px 12px rgba(80,64,44,.10); font-weight: 500; }
.segment.klein { max-width: 300px; }
.segment.klein button[aria-pressed="true"] { background: #E2D8CB; box-shadow: none; }

/* ── Lijsten ── */
.rij { display: flex; align-items: center; gap: 16px; padding: 14px 16px; margin-bottom: 10px; width: 100%; text-align: left; }
.rij .ico { width: 54px; height: 54px; border-radius: 50%; background: var(--brons-tint); display: grid; place-items: center; flex: none; }
.rij .ico svg { width: 26px; height: 26px; stroke: var(--brons); }
.rij .ico img { width: 46px; height: 46px; }
.rij .tekst { flex: 1; min-width: 0; }
.rij .titel { font-size: 18px; }
.rij .oms { color: var(--zacht); font-size: 14px; margin-top: 3px; line-height: 1.4; }
.vink { width: 34px; height: 34px; border-radius: 50%; background: var(--groen-tint); display: grid; place-items: center; flex: none; }
.vink svg { width: 16px; height: 16px; stroke: var(--groen); }
.vink.leeg { background: rgba(0,0,0,.04); }
.vink.leeg svg { stroke: #B9B2A8; }
.chev { width: 18px; height: 18px; stroke: var(--zacht); flex: none; }

.kaart { padding: 20px; display: flex; gap: 18px; align-items: center; margin-bottom: 12px; width: 100%; text-align: left; }
.kaart .tegel { width: 96px; height: 96px; border-radius: 18px; background: rgba(240,236,230,.8); display: grid; place-items: center; flex: none; }
.kaart .tegel img { width: 84px; height: 84px; }
.kaart .tegel svg { width: 52px; height: 52px; stroke: var(--brons); }
.kaart h3 { margin: 0 0 6px; font-size: 21px; font-weight: 500; }
.kaart p { margin: 0; color: var(--zacht); font-size: 15px; line-height: 1.45; }

.drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0 20px; }
.drie .paneel { padding: 16px 10px; text-align: center; border-radius: var(--r-mid); }
.drie img, .drie svg { width: 58px; height: 58px; margin: 0 auto 10px; }
.drie svg { stroke: var(--brons); }
.drie b { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.drie span { color: var(--zacht); font-size: 12.5px; line-height: 1.4; }

/* ── Scanner ── */
.camera { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-groot); overflow: hidden; background: #CFC9C0; }
.camera video, .camera canvas.overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera .rooster { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 33.33% 33.33%; pointer-events: none; }
.camera .hoek { width: 48px; height: 48px; border-width: 3px; }
.camera .hoek.lb, .camera .hoek.rb { top: 28px; } .camera .hoek.lo, .camera .hoek.ro { bottom: 110px; }
.camera .hoek.lb, .camera .hoek.lo { left: 28px; } .camera .hoek.rb, .camera .hoek.ro { right: 28px; }
.camera .melding { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px 28px 124px; color: var(--tekst); }
.camera .melding img { width: 46%; margin: 0 auto 8px; opacity: .9; }
.bediening { position: absolute; left: 0; right: 0; bottom: 18px; display: flex; justify-content: space-around; align-items: center; }
.bediening .klein { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bediening .klein svg { width: 26px; height: 26px; stroke: #fff; }
.bediening .klein[aria-pressed="true"] { background: rgba(255,255,255,.75); }
.bediening .klein[aria-pressed="true"] svg { stroke: var(--tekst); }
.bediening .klein[disabled] { opacity: .35; }
.sluiter { width: 84px; height: 84px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(147,113,74,.5); }
.sluiter i { width: 64px; height: 64px; border-radius: 50%; background: #fff; transition: transform .15s; }
.sluiter:active i { transform: scale(.9); }
.sluiter[disabled] { opacity: .5; }
.status { margin-top: 12px; padding: 14px; text-align: center; font-size: 16px; border-radius: 22px; display: flex; gap: 10px; align-items: center; justify-content: center; }
.status .stip { width: 11px; height: 11px; border-radius: 50%; background: #B9B2A8; }
.status .stip.aan { background: #4CB86A; box-shadow: 0 0 0 4px rgba(76,184,106,.18); }
.status .stip.bezig { background: var(--brons-licht); animation: puls 1.2s infinite; }
@keyframes puls { 50% { opacity: .35; } }

/* ── Voortgang ── */
.ring { position: absolute; right: 22px; top: 26px; width: 120px; text-align: center; color: var(--tekst); }
.ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 5; }
.ring .baan { stroke: rgba(255,255,255,.65); }
.ring .waarde { stroke: var(--brons); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }
.ring .pct { position: absolute; top: 0; left: 0; width: 120px; height: 120px; display: grid; place-items: center; font-size: 26px; }
.ring small { display: block; font-size: 10px; letter-spacing: .16em; margin-top: 4px; }
.stappen { padding: 18px 22px; margin-top: 18px; }
.stap { display: flex; gap: 18px; position: relative; padding-bottom: 20px; }
.stap:last-child { padding-bottom: 0; }
.stap::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 1.5px; background: #D8D0C5; }
.stap:last-child::before { display: none; }
.stap .bol { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #CFC6BA; flex: none; display: grid; place-items: center; background: transparent; }
.stap.klaar .bol { background: var(--brons); border-color: var(--brons); }
.stap.klaar .bol svg { width: 18px; height: 18px; stroke: #fff; }
.stap.actief .bol { border: 2px solid var(--brons); box-shadow: 0 0 0 6px rgba(147,113,74,.14); }
.stap.actief .bol::after { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--brons); }
.stap b { font-weight: 500; font-size: 18px; display: block; }
.stap span { color: var(--zacht); font-size: 14px; }
.stap.wacht b { color: var(--zacht); }

/* ── Bevestigen ── */
.vraagblok { padding: 18px; margin-bottom: 14px; }
.vraagblok h2 { margin: 0 0 4px; font-size: 21px; font-weight: 500; }
.vraagblok .skt { color: var(--brons); font-size: 13.5px; margin-bottom: 12px; }
.vraag { margin-top: 14px; }
.vraag > div:first-child { font-size: 15px; margin-bottom: 8px; }
.keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuzes button { padding: 10px 14px; border-radius: 18px; background: rgba(255,255,255,.7); border: 1px solid var(--lijn); font-size: 14.5px; }
.keuzes button[aria-pressed="true"] { background: var(--knop); color: #fff; border-color: var(--knop); }
.wissel { display: flex; gap: 8px; justify-content: center; margin: 10px 0 14px; }
.wissel button { padding: 8px 14px; border-radius: 16px; background: var(--glas); border: 1px solid var(--glas-rand); font-size: 14px; }
.wissel button[aria-pressed="true"] { background: var(--brons-tint); color: var(--brons); }

/* ── Waarschuwingen ── */
.waarschuwing { padding: 14px 16px; border-radius: 18px; background: #F6E9E1; color: #6E3E2E; font-size: 14.5px; line-height: 1.45; margin: 12px 0; }
.waarschuwing.midden { background: #F4EEDF; color: #6A5630; }
.info { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--zacht); font-size: 13.5px; margin: 14px 0 4px; text-align: center; }
.info svg { width: 16px; height: 16px; stroke: currentColor; flex: none; }

/* ── Detailblokken ── */
.blok { padding: 20px; margin-bottom: 14px; }
.blok h2 { margin: 0 0 12px; font-size: 26px; font-weight: 500; }
.blok h3 { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.blok p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: #4A4640; }
.blok p:last-child { margin-bottom: 0; }
.skt { color: var(--brons); font-size: 14px; margin-bottom: 8px; }
.ziet { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--lijn); }
.ziet:first-of-type { border-top: 0; }
.ziet .tegel { width: 54px; height: 44px; border-radius: 12px; background: rgba(240,236,230,.9); display: grid; place-items: center; flex: none; }
.ziet .tegel svg { width: 30px; height: 20px; stroke: var(--tekst); }
.ziet b { font-weight: 500; font-size: 17px; display: flex; gap: 8px; align-items: center; }
.ziet span { color: var(--zacht); font-size: 14.5px; }
.chip { font-size: 10.5px; padding: 2px 7px; border-radius: 8px; background: var(--brons-tint); color: var(--brons); font-weight: 500; letter-spacing: .02em; }
.chip.groen { background: var(--groen-tint); color: var(--groen); }
.duiding { display: flex; gap: 16px; }
.duiding .tegel { width: 66px; height: 66px; border-radius: 16px; background: var(--brons-tint); display: grid; place-items: center; flex: none; }
.duiding .tegel svg { width: 34px; height: 34px; stroke: var(--brons); }
.bron { font-size: 12.5px; color: var(--zacht); line-height: 1.45; margin-top: 10px; }
.wetenschap { font-size: 13.5px; background: rgba(230,236,240,.7); color: #3F4A55; border-radius: 14px; padding: 10px 12px; margin-top: 10px; line-height: 1.45; }
.maat { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; font-size: 14.5px; }
.maat span:nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; color: var(--tekst); font-weight: 500; }
.maat span:nth-child(odd) { color: var(--zacht); }

.label-pil { position: absolute; padding: 8px 16px; border-radius: 20px; background: rgba(255,255,255,.72); border: 1px solid rgba(255,255,255,.9); font-size: 14px; transform: translate(-50%, -50%); white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.overlay-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.laatste { display: flex; gap: 16px; align-items: center; padding: 10px; margin: 12px 0; width: 100%; text-align: left; }
.laatste img { width: 112px; height: 104px; border-radius: 16px; object-fit: cover; }
.laatste small { letter-spacing: .18em; font-size: 11px; color: var(--zacht); }
.laatste b { display: block; font-weight: 400; font-size: 18px; margin: 6px 0 4px; }
.laatste span { color: var(--zacht); font-size: 14.5px; }

.rapport-hero { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 300px; }
.rapport-hero .links { padding: 26px 22px; display: flex; flex-direction: column; }
.rapport-hero .links small { letter-spacing: .3em; font-size: 12px; line-height: 1.8; }
.rapport-hero .links i { display: block; width: 28px; height: 2px; background: var(--brons-licht); margin: 14px 0; }
.rapport-hero .links p { color: #57524B; font-size: 14.5px; line-height: 1.5; margin: 0; }
.rapport-hero .links .voet { margin-top: auto; letter-spacing: .3em; font-size: 16px; }
.rapport-hero .links .voet small { display: block; font-size: 8px; letter-spacing: .3em; color: var(--zacht); }
.rapport-hero img { width: 100%; height: 100%; object-fit: cover; }

.historie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.historie button { padding: 0; border-radius: 16px; overflow: hidden; position: relative; aspect-ratio: 4/5; }
.historie img { width: 100%; height: 100%; object-fit: cover; }
.historie span { position: absolute; left: 6px; right: 6px; bottom: 6px; font-size: 11.5px; background: rgba(255,255,255,.8); border-radius: 10px; padding: 3px 6px; }

.veld { display: grid; gap: 6px; margin-bottom: 14px; }
.veld label { font-size: 14px; color: var(--zacht); }
.veld input { height: 50px; border-radius: 16px; border: 1px solid var(--lijn); background: rgba(255,255,255,.75); padding: 0 16px; font: inherit; font-size: 17px; color: var(--tekst); }

/* ── Tabbalk: vast onderaan, niet transparant ── */
.tabbalk { position: relative; z-index: 10; flex: none; display: flex; width: 100%;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: #FBFAF8; border-top: 1px solid rgba(60, 50, 40, .10); }
.tabbalk button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--zacht); font-size: 11.5px; }
.tabbalk svg { width: 26px; height: 26px; stroke: currentColor; fill: none; }
.tabbalk button[aria-current="page"] { color: var(--brons); }
.tabbalk button[aria-current="page"] svg .vul { fill: currentColor; }

.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 80px); transform: translateX(-50%); background: var(--knop); color: #fff; padding: 12px 18px; border-radius: 18px; font-size: 14.5px; z-index: 20; max-width: 90%; text-align: center; }
.verborgen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── Print / PDF ── */
@media print {
  html, body { height: auto; overflow: visible; display: block; }
  #app { overflow: visible; }
  details.thema .chev { display: none; }
  .decor, .tabbalk, .kop .rond, .knoppen, .geen-print, .toast { display: none !important; }
  body { background: #fff; }
  #app { padding: 0; max-width: none; }
  .paneel { box-shadow: none; backdrop-filter: none; background: #fff; border: 1px solid #E6E0D8; break-inside: avoid; }
  .beeldkaart { box-shadow: none; break-inside: avoid; }
}

/* ── Lijn-editor (v1.1) ── */
.editor { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.editor img { pointer-events: none; }
.editor circle[data-punt] { cursor: grab; }
.kop-compact { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; }
.kop-compact .rond { width: 46px; height: 46px; border-radius: 50%; background: var(--glas); border: 1px solid var(--glas-rand); display: grid; place-items: center; box-shadow: var(--schaduw); flex: none; }
.kop-compact .rond svg { width: 20px; height: 20px; }
.kop-compact h1 { font-size: 26px; margin: 0; text-align: left; }
.kop-compact p { margin: 2px 0 0; color: var(--zacht); font-size: 15px; }
.editor { max-height: 50vh; margin: 0 auto; }
.knoppen.plak { position: sticky; bottom: 0; z-index: 5; padding-top: 8px; }

/* ── Lezing (v1.2) ── */
.titelbalk { margin: 6px 0 14px; }
.titelbalk h1 { text-align: left; margin: 0; font-size: 32px; }
.titelbalk p { margin: 4px 0 0; color: var(--zacht); font-size: 15px; }
.foto-klein .beeldkaart { max-height: 44vh; margin: 0 auto; }
.hint { color: var(--zacht); font-size: 14px; margin: 16px 2px 10px; }
details.thema { margin-bottom: 10px; padding: 0; overflow: hidden; }
details.thema summary { list-style: none; display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
details.thema summary::-webkit-details-marker { display: none; }
details.thema .ico { width: 48px; height: 48px; border-radius: 50%; background: var(--brons-tint); display: grid; place-items: center; flex: none; }
details.thema .ico svg { width: 24px; height: 24px; stroke: var(--brons); }
details.thema .kern { flex: 1; min-width: 0; }
details.thema small { display: block; color: var(--brons); font-size: 13px; margin-bottom: 2px; }
details.thema b { display: block; font-weight: 500; font-size: 17.5px; line-height: 1.3; }
details.thema .chev { transition: transform .2s; }
details.thema[open] .chev { transform: rotate(90deg); }
details.thema .uitleg { padding: 0 18px 16px; }
details.thema .uitleg p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: #4A4640; }
.waarom { background: rgba(240, 236, 230, .8); border-radius: 14px; padding: 10px 14px; margin-top: 6px; }
.waarom summary { font-size: 14px; color: var(--brons); cursor: pointer; }
.waarom[open] summary { margin-bottom: 8px; }
.waarom p { font-size: 14px !important; margin-bottom: 6px !important; }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; margin: 10px 0 0; font-size: 13.5px; color: var(--zacht); }
.legenda i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
@media (max-width: 380px) { details.thema .uitleg { padding-left: 18px; } }
.camera .aftellen { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center; font-size: 56px; font-weight: 300; color: #fff; background: rgba(40, 32, 24, .35);
  border: 2px solid rgba(255, 255, 255, .8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; }

/* ── Lijn aan/uit (v1.3) ── */
.lijntabs button { font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lijntabs button i { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0,0,0,.2); flex: none; }
.lijntabs button.uit { text-decoration: line-through; opacity: .5; }
.lijntabs button.uit i { background: transparent !important; }
.lijnstatus { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 2px 10px; font-size: 14px; color: var(--zacht); }
.lijnstatus button { flex: none; padding: 8px 14px; border-radius: 16px; background: var(--glas); border: 1px solid var(--lijn); font-size: 14px; color: var(--tekst); }
.lijnstatus button[data-actie="lijn-weg"] { color: var(--rood); }
.versie { display: inline-block; font-size: 11px; letter-spacing: .04em; color: var(--brons); background: var(--brons-tint); border-radius: 8px; padding: 2px 8px; margin-top: 8px; font-weight: 500; vertical-align: middle; }
h1 .versie { margin: 0 0 0 6px; }
.vraag-groot { text-align: center; font-size: 19px; font-weight: 500; margin: 18px 0 4px; }

/* ═══ v1.5: alles op één scherm, minder scrollen ═══ */
.kop { min-height: 0; margin-bottom: 4px; }
.merk svg { width: 38px; height: 42px; }
.merk .naam { font-size: 20px; }
.merk .slogan { font-size: 8.5px; margin-top: 4px; }
.merk .versie { margin-top: 6px; }
h1 { font-size: 30px; margin: 10px 0 6px; }
.sub { font-size: 15.5px; margin-bottom: 12px; }

/* Schermen die precies passen: inhoud als kolom, foto/camera vult de rest */
#app[data-scherm="scan"], #app[data-scherm="bevestig-kijk"], #app[data-scherm="bevestig-bewerk"] {
  display: flex; flex-direction: column; overflow: hidden; padding-bottom: 12px; }
#app[data-scherm="scan"] > *, #app[data-scherm^="bevestig"] > * { flex: none; }

.scan-kop { justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.scan-kop h1 { font-size: 24px; }
.scan-kop p { font-size: 13.5px; }
.segment.mini { margin: 4px 0 0; width: 150px; flex: none; }
.segment.mini button { height: 36px; font-size: 14px; }
#app[data-scherm="scan"] .camera { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; }
#app[data-scherm="scan"] .camera .hoek.lo, #app[data-scherm="scan"] .camera .hoek.ro { bottom: 112px; }
#app[data-scherm="scan"] .status { margin-top: 8px; padding: 10px; font-size: 14.5px; }

#app[data-scherm^="bevestig"] .editor { flex: 1 1 auto; min-height: 0; max-height: none; aspect-ratio: auto; width: 100%; }
#app[data-scherm^="bevestig"] .kop-compact { margin-bottom: 8px; }
#app[data-scherm^="bevestig"] .kop-compact h1 { font-size: 24px; }
#app[data-scherm^="bevestig"] .legenda { margin-top: 8px; }
#app[data-scherm^="bevestig"] .lijnstatus { margin-bottom: 8px; }
#app[data-scherm^="bevestig"] .lijntabs { margin: 0 auto 8px; }
.vraag-groot { margin: 8px 0 0; font-size: 17px; }
.knoppen.compact { margin-top: 10px; gap: 8px; }
.knoppen.compact .knop { height: 54px; font-size: 17px; }
.knoppen.compact .twee { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.knoppen.compact .twee .knop { height: 46px; font-size: 15px; }
.foto-wissel { position: absolute; right: 10px; top: 10px; padding: 7px 12px; border-radius: 14px; font-size: 13px;
  background: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.95); color: var(--tekst); }

/* Lezing compacter */
.foto-klein .beeldkaart { max-height: 30vh; aspect-ratio: auto !important; height: 30vh; }
.titelbalk { margin: 0 0 10px; }
.titelbalk h1 { font-size: 28px; }
details.thema { margin-bottom: 8px; }
details.thema summary { padding: 10px 14px; gap: 12px; }
details.thema .ico { width: 40px; height: 40px; }
details.thema .ico svg { width: 20px; height: 20px; }
details.thema b { font-size: 16px; }
details.thema small { font-size: 12px; }
.legenda { margin: 8px 0 10px; }