/*
* Componenten - ONTWERP.md §5.
*
* Elke maat komt letterlijk uit docs/ontwerp/schermen/. Waar de referentie en
* de app noodzakelijk verschillen staat dat als commentaar bij de regel, met
* de reden. De referentie is een plaatje van 390 bij 844 met `overflow:hidden`;
* een app moet schuiven, meeschalen en aanraakbaar zijn.
*/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
body {
background: var(--page);
color: var(--ink);
font: 400 var(--fs-body) / var(--lh-body) var(--font-sans);
-webkit-font-smoothing: antialiased;
/* Geen overscroll-glow die het donkere vlak onderbreekt. */
overscroll-behavior-y: none;
}
.sf {
font-family: var(--font-serif);
}
/*
* Het scherm.
*
* De referentie zet hier een vaste 390 bij 844 met overflow:hidden. Dat is een
* plaatje, geen app: 390 is volgens §2 de ONDERGRENS (iPhone 13), en elk
* nieuwer toestel is ruimer - 393, 402, 430. Met een vaste breedte zou daar een
* strook zwart naast blijven staan, en met overflow:hidden zou alles onder de
* vouw onbereikbaar zijn.
*
* §8.1 vraagt bovendien om vloeiend bouwen zonder vaste pixelbreedtes, omdat er
* later een desktopindeling overheen moet kunnen. Dus: volle breedte,
* meeschalend, verticaal schuivend.
*/
.screen {
position: relative;
/*
* Vaste hoogte, niet alleen een minimum. Met alleen `min-height` groeit het
* scherm mee met zijn inhoud en scrolt de HELE pagina - inclusief de merkbalk
* bovenaan en de knopbalk onderaan. Die twee horen te blijven staan; alleen
* het middenstuk (.scroll) hoort te bewegen. Gemeten op 375 bij 667: daar
* verdween de knop Visitekaartje vastleggen onder de vouw.
*/
height: 100dvh;
min-height: 100dvh;
overflow: hidden;
/* AANVULLING-28 §1: alle vier de veilige randen op één plek, app-breed.
Boven en onder waren er al; links en rechts ontbraken (het schommelen bij
kantelen). De onderrand loopt via de tabbalk/onderruimte zelf. */
padding-top: var(--safe-top);
padding-left: var(--safe-left);
padding-right: var(--safe-right);
/* AANVULLING-30 §1: de veilige ONDERrand hoort ook hier, app-breed. Een
scherm zónder tabbalk (een detailscherm) leunde hiervoor op de losse
.onderruimte; die is weg, dus de basis draagt nu zelf de onderrand. Een
scherm mét tabbalk overschrijft dit met de volle balkhoogte (var(--onderbalk),
hieronder), dus daar telt het niet dubbel. */
padding-bottom: var(--safe-onder);
display: flex;
flex-direction: column;
/*
* De telefoonkolom, en die geldt ALLEEN onder het breekpunt.
*
* Deze regel stond er toen het computerscherm nog niet was getekend, met de
* aantekening "zodra er een computerontwerp is, vervalt deze regel". Dat
* ontwerp kwam er (§9), de indeling werd gebouwd en nagemeten - en deze regel
* bleef staan. Gevolg: een scherm van 2600 punten toonde een kolom van 390.
* Dat is §19: gebouwd maar niet bereikbaar telt niet als gebouwd.
*
* Boven 1024 neemt bureau.css het over; daar hoort geen kolom meer te staan.
*/
width: 100%;
margin: 0 auto;
background: var(--bg);
}
@media (max-width: 1023px) {
.screen {
/* 480 ligt boven de breedste telefoon van nu (440, iPhone 16 Pro Max), dus
op elk toestel is dit gewoon een schermvullende indeling. */
max-width: 480px;
}
}
.scroll {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.pad {
padding: 0 var(--pad-x);
}
/* ---- Balk bovenaan (§5) ------------------------------------------------ */
.appbar {
display: flex;
align-items: center;
gap: 12px;
height: var(--h-appbar);
padding: 0 var(--pad-x);
flex: 0 0 auto;
}
.mark {
width: 30px;
height: 30px;
border-radius: var(--r-mark);
display: block;
}
.brand {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-brand);
color: var(--gold);
font-weight: 700;
}
.brand-sub {
font-size: var(--fs-micro);
letter-spacing: var(--ls-eyebrow);
color: var(--muted-2);
margin-top: 3px;
}
.ava {
margin-left: auto;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--gold-a14);
border: 1px solid var(--gold-a32);
color: var(--gold-light);
font-size: calc(0.75rem * var(--tekstschaal));
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.04em;
flex: 0 0 auto;
}
.nav {
display: flex;
align-items: center;
gap: 12px;
height: var(--h-nav);
padding: 0 var(--pad-x);
flex: 0 0 auto;
}
/* AANVULLING-32 §2/§18.60: de oude, ongebruikte terugknopstijl .back (en het
losse .tap44-aanraakvlak) zijn weg. Er is nog één terugknop, .terugknop, en
die woont in bureau.js. Een tweede - ook een dode - is er één te veel. */
.navtitle {
font-size: var(--fs-navtitle);
font-weight: 600;
letter-spacing: var(--ls-title);
}
.navicons {
display: flex;
align-items: center;
gap: 14px;
margin-left: auto;
}
/* ---- Kaart, tegel, brede eventkaart ------------------------------------ */
.card {
background: var(--surface);
border: 1px solid var(--white-a06);
border-radius: var(--r-card);
}
.hr {
height: 1px;
background: var(--white-a06);
/* Een als
* de native, gevuld-grijze browserknop - dat waren de "goedkope" vlakken op
* de kop van Fortuyn. Een lnk is gewone tekst die klikbaar is: goud, zonder
* vlak, zonder rand.
*/
.lnk {
background: none;
border: 0;
padding: 0;
font: inherit;
color: var(--gold-soft);
cursor: pointer;
text-align: left;
}
.lnk:hover { color: var(--gold); }
/*
* Ronde 13 punt 4a (par. 17.4): "stil" stond als kale grijze tekst naast
* elke Eerst dit-regel - aantikbaar, maar het zag er niet zo uit. Dat is
* geen geval maar een klasse: elke gedempte tekstknop (.lnk.mut - stil,
* weg, Nee, Laat staan, Niet deze) draagt nu een rustige rand, zodat hij
* gedempt blijft maar als knop leest.
*/
.lnk.mut {
color: var(--muted-2);
border: 1px solid var(--white-a08);
border-radius: var(--r-round);
padding: 3px 10px;
line-height: 1.2;
}
.lnk.mut:hover { color: var(--gold-soft); border-color: var(--gold-a30); }
/* ---- Chips en segmenten (§5) ------------------------------------------- */
.chips {
display: flex;
gap: var(--gap-chip);
/*
* §5: "Een chiprij mag horizontaal scrollen. Laat dan bewust een chip half
* zien." De negatieve marge laat de rij tot de schermrand lopen zodat de
* halve chip echt half is en niet tegen een witrand eindigt.
*/
overflow-x: auto;
scrollbar-width: none;
margin: 0 calc(var(--pad-x) * -1);
padding: 0 var(--pad-x);
}
.chips::-webkit-scrollbar {
display: none;
}
.chip {
/* AANVULLING-28 §2/§18.55: een chip is een duimdoel, dus minstens 44 hoog.
Was 32 (--h-chip); die maat gold voor een muis, niet voor een telefoon. */
min-height: var(--tap-min);
padding: 0 13px;
border-radius: var(--r-round);
display: flex;
align-items: center;
font-size: var(--fs-support);
color: var(--muted);
border: 1px solid var(--white-a08);
white-space: nowrap;
background: none;
font-family: inherit;
flex: 0 0 auto;
cursor: pointer;
}
/*
* Wat gekozen is, ziet er gekozen uit. aria-pressed is de manier van deze app;
* aria-checked krijgt dezelfde stijl als vangnet, zodat een chip nooit meer
* onzichtbaar-gekozen kan raken (§18.55.2). Een chip die een vinkje omhult
* (Met wie, Wie van ons erbij) licht op zodra dat vinkje aanstaat.
*/
.chip[aria-pressed='true'],
.chip[aria-checked='true'],
.chip:has(input:checked) {
background: var(--gold-a15);
border-color: var(--gold-a34);
color: var(--gold-soft);
font-weight: 600;
}
.segs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--white-a045);
border-radius: var(--r-segs);
}
.seg {
flex: 1;
height: var(--h-seg);
border-radius: var(--r-seg);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-support);
font-weight: 600;
color: var(--muted);
border: 0;
background: none;
font-family: inherit;
cursor: pointer;
}
.seg[aria-selected='true'],
.seg[aria-checked='true'] {
background: var(--gold-a18);
color: var(--gold-soft);
box-shadow: inset 0 0 0 1px var(--gold-a28);
}
/* ---- Meldingen (§5) ---------------------------------------------------- */
.banner {
display: flex;
gap: 10px;
padding: 12px 14px;
border-radius: var(--r-banner);
font-size: var(--fs-support-sm);
line-height: var(--lh-banner);
}
.banner b {
font-weight: 600;
}
.banner-warn {
background: var(--warn-a11);
border: 1px solid var(--warn-a30);
color: var(--warn-text);
}
.banner-warn b {
color: var(--warn-strong);
}
.banner-gold {
background: var(--gold-a10);
border: 1px solid var(--gold-a28);
color: var(--gold-light);
}
.banner-gold b {
color: var(--gold-soft);
}
.dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--warn);
flex: 0 0 auto;
}
/* ---- Blok met een kopje (§6.5, §6.3) ------------------------------------ */
/*
* Een blok waarin een paar regels bij elkaar staan onder één kopje: de
* verzendregels op een relatie, praktisch en bemensing op een event. Verhuisd
* uit `relatie.css` toen het tweede scherm het ging gebruiken.
*/
.blk {
padding: 10px 12px;
border-radius: var(--r-card);
background: var(--surface);
border: 1px solid var(--white-a06);
margin-top: 8px;
}
/* ---- Het Inzicht-dashboard (AANVULLING-22 par. 7) ---------------------- */
/*
* Tegels waar je op landt. Ze groeien mee met hun inhoud (een fasenregel
* is langer dan een getal) en elke tegel draagt zijn peildatum als voet.
*/
.inzicht-tegel {
height: auto;
min-height: var(--h-tile);
padding-bottom: 12px;
cursor: pointer;
}
.inzicht-tegel .tile-name {
white-space: normal;
line-height: 1.35;
font-weight: 500;
color: var(--muted);
}
.inzicht-tegel .tile-sub { margin-top: 6px; }
/* ---- Het uitklapblok (AANVULLING-22 par. 1) ---------------------------- */
/*
* Eén component voor de hele app. De kop is de knop (par. 17.4), het
* pijltje draait mee, en een gesloten blok draagt zijn samenvatting -
* alleen een titel is verstoppen (par. 18.34). Tussen blokken 16 punten
* lucht (par. 2: een scherm mag leger zijn dan het kan).
*/
.uitklap {
border-radius: var(--r-card);
background: var(--surface);
border: 1px solid var(--white-a06);
margin-top: 16px;
}
.uitklap-kop {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 14px;
background: none;
border: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.uitklap-titel {
/* De kaartkopstijl uit par. 4 van het hoofdontwerp: een hoofdstukwoord. */
font-size: calc(1rem * var(--tekstschaal));
font-weight: 600;
white-space: nowrap;
}
.uitklap-samenvatting {
color: var(--muted);
font-size: var(--fs-support-sm);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.uitklap-pijl {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: var(--muted);
transition: transform 0.15s ease;
}
.uitklap-open > .uitklap-kop .uitklap-pijl { transform: rotate(90deg); }
.uitklap-lijf { padding: 0 14px 13px; }
/* Leeg blijft staan, gedempt - verdwijnen is verwarrender dan leeg zijn. */
.uitklap-leeg .uitklap-titel { color: var(--muted); }
.uitklap-leeg .uitklap-samenvatting { color: var(--muted-2, var(--muted)); }
.blk-kop { justify-content: space-between; }
.blk-zin { font-size: var(--fs-support-sm); margin-top: 7px; line-height: 1.4; }
.blk-zin b { font-weight: 600; }
/* Label links, waarde rechts. Eén regel, twee dingen. */
.kv { display: flex; justify-content: space-between; font-size: var(--fs-support); padding: 4px 0; }
.kv > span:first-child { color: var(--muted-2); }
/* ---- Lijstregel met aankruisvakje (§5) --------------------------------- */
.task {
display: flex;
gap: 12px;
padding: 13px 0;
align-items: flex-start;
width: 100%;
text-align: left;
background: none;
border: 0;
color: inherit;
font: inherit;
cursor: pointer;
}
.box {
width: 22px;
height: 22px;
border-radius: var(--r-box);
border: 1.5px solid var(--white-a16);
flex: 0 0 auto;
margin-top: 1px;
background: none;
position: relative;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
/* Zichtbaar 22, aanraakbaar 44. */
.box::after {
content: '';
position: absolute;
width: var(--tap-min);
height: var(--tap-min);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box.late {
border-color: var(--warn-a65);
}
.box[aria-checked='true'] {
background: rgba(180, 142, 71, 0.85);
border-color: transparent;
}
.task-text {
font-size: var(--fs-list);
font-weight: 500;
letter-spacing: var(--ls-tight);
line-height: 1.3;
}
.task-text.done {
color: var(--ink-dim);
text-decoration: line-through;
text-decoration-color: var(--white-a16);
}
.task-meta {
font-size: var(--fs-meta);
color: var(--muted-2);
margin-top: 4px;
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.task-meta .lnk {
color: var(--gold);
}
/*
* Hoe laat iets is, in de kleur van te laat. Het staat op dezelfde regel als de
* datum omdat het één mededeling is: wanneer het moest, en hoe ver dat weg is.
*/
.task-meta .let-op {
color: var(--warn);
}
.who {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--gold-a13);
border: 1px solid var(--gold-a28);
color: var(--gold-light);
font-size: calc(0.625rem * var(--tekstschaal));
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
margin-top: 2px;
}
/* Geen eigenaar: grijze cirkel met vraagteken (§6.6). */
.who.none {
background: var(--white-a05);
border-color: var(--white-a10);
color: var(--ink-dim);
}
.groep {
font-size: var(--fs-eyebrow);
letter-spacing: var(--ls-eyebrow);
text-transform: uppercase;
color: var(--muted-2);
font-weight: 600;
margin-top: 20px;
}
.groep.late {
color: var(--warn);
}
/* ---- Iconen (§5) ------------------------------------------------------- */
.i {
width: 18px;
height: 18px;
fill: none;
stroke: var(--gold);
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
flex: 0 0 auto;
}
.i-s {
width: 15px;
height: 15px;
}
.i-dark {
stroke: var(--on-gold);
}
.i-mut {
stroke: var(--muted-2);
}
.i-ink {
stroke: var(--ink);
}
.i-warn {
stroke: var(--warn);
}
.i-ok {
stroke: var(--ok);
}
.row {
display: flex;
align-items: center;
gap: var(--gap-row);
}
/* Een rij knoppen dicht op elkaar (de offertelijst); geen style-attribuut, want CSP style-src self. */
.row-dicht {
gap: 6px;
}
/* ---- Vaste balk onderaan ----------------------------------------------- */
.dock {
position: sticky;
bottom: 0;
/* 12 boven, 34 onder: de referentie, en §2 "onder de onderste 34 punten
ligt nooit een knop". */
padding: 12px var(--pad-x) var(--safe-bottom);
background: linear-gradient(180deg, rgba(11, 10, 8, 0), rgba(11, 10, 8, 0.96) 34%, #0b0a08);
flex: 0 0 auto;
}
.dock-note {
text-align: center;
font-size: var(--fs-tiny);
color: var(--muted-2);
margin-top: 7px;
letter-spacing: var(--ls-pill);
}
/* ---- Zwevende knop ----------------------------------------------------- */
.fab {
position: fixed;
right: var(--pad-x);
/* AANVULLING-30 §1: 16 punten boven de onderbalk - de onderbalk draagt de
balkhoogte en de veilige rand al, dus dit klopt op elk toestel. */
bottom: calc(var(--onderbalk) + var(--fab-boven-onderbalk));
height: var(--h-fab);
padding: 0 22px;
border-radius: 27px;
background: var(--grad-gold-btn);
color: var(--on-gold);
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-body);
font-weight: 700;
box-shadow: var(--shadow-fab);
border: 0;
font-family: inherit;
cursor: pointer;
}
/* AUDIT-1 V2: het icoon op de gouden knop tekent in de KNOPkleur - .i is
* goud, en goud-op-goud is een lege cirkel. */
.tabs {
background: var(--bg, #0b0a08);
}
.fab .i, .fab svg {
stroke: currentColor;
width: 22px;
height: 22px;
}
.fab-round {
width: 58px;
height: 58px;
border-radius: 29px;
padding: 0;
justify-content: center;
}
/* ---- Toegankelijkheid -------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--gold-light);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
/* ---- Hint bij een sneltoets -------------------------------------------- */
/*
* Eén regel die vanzelf verdwijnt. Bewust GEEN melding uit §5: die zijn voor
* iets dat geblokkeerd of te laat is en horen te blijven staan. Dit is een
* terzijde (nu alleen bij Ctrl F) en mag niet in de weg zitten.
*/
.sneltoets-hint {
position: fixed;
left: 50%;
bottom: calc(24px + var(--safe-bottom));
transform: translateX(-50%) translateY(8px);
max-width: min(520px, calc(100vw - 40px));
padding: 10px 14px;
border-radius: var(--r-banner);
background: var(--surface);
border: 1px solid var(--gold-a28);
color: var(--gold-light);
font-size: var(--fs-support-sm);
line-height: var(--lh-banner);
box-shadow: var(--shadow-fab);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, transform 0.15s ease;
z-index: 50;
}
.sneltoets-hint.zichtbaar {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* Wie beweging heeft uitgezet, krijgt hem gewoon zonder overgang. */
@media (prefers-reduced-motion: reduce) {
.sneltoets-hint {
transition: none;
}
}
/* ---- Routeknop (AANVULLING-3 §4) --------------------------------------- */
/* Bemensing.html .route: 42 hoog, radius 11, gouden rand. */
.route {
margin-top: 10px;
height: 42px;
width: 100%;
border-radius: 11px;
border: 1px solid var(--gold-a35);
background: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: var(--fs-body-sm);
font-weight: 600;
color: var(--gold-light);
font-family: inherit;
cursor: pointer;
}
/*
* Het adres als tekst onder de knop. Dat is de terugvaloptie als de kaartenapp
* niet opent, en het is wat je nodig hebt als je iemand het adres wilt appen.
*/
.route-adres {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
font-size: var(--fs-meta);
color: var(--muted-2);
}
.route-kopieer {
flex: 0 0 auto;
border: 0;
background: none;
color: var(--gold);
font: inherit;
font-weight: 600;
cursor: pointer;
padding: 0;
/* Klein op het oog, maar wel aan te raken (afspraak 1: 44 bij 44). */
position: relative;
}
.route-kopieer::after {
content: '';
position: absolute;
inset: -14px -10px;
}
.route-keuze {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--line-2);
}
.route-keuze-vraag {
font-size: var(--fs-support-sm);
color: var(--muted);
margin-bottom: 9px;
}
.route-keuze-knop {
width: 100%;
height: var(--h-btn-sm);
background: none;
font-family: inherit;
cursor: pointer;
margin-bottom: 8px;
}
.route-keuze-uitleg {
font-size: var(--fs-tiny);
color: var(--ink-dim);
}
/* ---- Kleine plaatsingshulpjes ------------------------------------------ */
/*
* Het CSP van deze app is `style-src 'self'` zonder `unsafe-inline`, en dat
* blijft zo. Een `style="..."` in de opgebouwde HTML wordt door de browser
* stilzwijgend weggegooid: de pagina laadt, maar de maat die je zette is weg.
* Gemeten op de echte server - lokaal viel het niet op, want daar staat geen CSP.
*
* Alles wat vast is, staat daarom hier als klasse. Alleen wat echt per keer
* verschilt (de breedte van een voortgangsbalk) wordt na het invoegen gezet met
* element.style.setProperty(), en dat mag wel: het CSP verbiedt het attribuut in
* de opmaak, niet de CSSOM.
*/
.mt-10 { margin-top: 10px; }
.mt-14 { margin-top: 14px; }
/* AANVULLING-31 §2.1: het "ook bewaren als standaardtarief"-vinkje op de offerte. */
.ov-bewaar {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-support);
color: var(--muted);
cursor: pointer;
}
.ov-bewaar input { width: 18px; height: 18px; flex: 0 0 auto; }
/* AANVULLING-29 §4: de drie knoppen onder de vastleg-vraag op Vandaag. */
.nazorg-knoppen {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.mt-24 { margin-top: 24px; }
.groei { flex: 1; }
.groei-smal { flex: 1; min-width: 0; }
.smal { min-width: 0; }
.blok { display: block; }
/*
* De vulling van een voortgangsbalk. De breedte komt uit --deel, die per keer
* met setProperty wordt gezet; staat hij er niet, dan is de balk leeg in plaats
* van per ongeluk vol.
*/
.pbar > i {
width: var(--deel, 0%);
}
/* ---- Terugknop (§16.2, Stijl.html .backdemo) --------------------------- */
/*
* Een geinstalleerde webapp op iOS heeft geen terugknop en geen terugveeg. Deze
* is dus niet een extraatje maar de enige uitgang, en draagt daarom een naam en
* niet alleen een pijl.
*/
.terugknop {
display: inline-flex;
align-items: center;
gap: 8px;
height: 34px;
/*
* Links evenveel binnenruimte als de zijmarge, zodat de TEKST op dezelfde
* lijn staat als de rest van het scherm terwijl het aanraakvlak doorloopt tot
* de rand. De ronding is links weg: een ronde hoek tegen de schermrand ziet
* eruit als een fout.
*/
padding: 0 13px 0 var(--pad-x);
border-radius: 0 17px 17px 0;
border: 1px solid var(--white-a10);
border-left: 0;
font-size: var(--fs-support);
color: var(--ink-act);
background: none;
font-family: inherit;
cursor: pointer;
position: relative;
}
/*
* Het aanraakvlak: tot x=0 en de volle hoogte van de balk.
*
* Zichtbaar is de knop 34 hoog en begint hij bij de rand; aanraakbaar is hij 44
* hoog en loopt hij door tot buiten de linkerrand. Wie in het donker naar links
* mikt, raakt hem dus altijd.
*/
.terugknop::after {
content: '';
position: absolute;
left: calc(-1 * var(--pad-x));
right: 0;
top: 50%;
height: var(--tap-min);
transform: translateY(-50%);
}
.terugknop:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
/* ---- Opslaan-staat (§16.1, Stijl.html .savestate) ---------------------- */
.savestate {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--fs-support-sm);
color: var(--muted);
}
.save-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex: 0 0 auto;
}
.save-dot-ok { background: var(--ok); }
.save-dot-wacht { background: var(--gold); }
.save-dot-stil { background: var(--muted-2); }
/* ---- Ongedaan maken (§16.3, Stijl.html .undo) -------------------------- */
.undo {
display: flex;
align-items: center;
gap: var(--gap-row);
padding: 12px 14px;
border-radius: 12px;
background: #22201b;
border: 1px solid rgba(255, 255, 255, 0.09);
font-size: var(--fs-support);
}
.undo > button {
margin-left: auto;
color: var(--gold-light);
font-weight: 600;
background: none;
border: 0;
font-family: inherit;
font-size: inherit;
cursor: pointer;
}
/* ---- Tabbalk onderaan (Vandaag.html .tabs) ----------------------------- */
/*
* AANVULLING-22 par. 5: de balk was te hoog (78 + 22 valpadding). Gemeten
* op het oudste toestel (iPhone 13 Pro, 390x844, 34 punten
* veiligheidsruimte): 56 punten inhoud plus de veiligheidsruimte, meer
* niet. Icoon 22x22, label 10/600, 3 punten ertussen; geen extra marge,
* rand of schaduw die hoogte kost.
*/
.tabs {
/* De onderbalk blijft aan de vensterrand, buiten de scrollende inhoud. */
position: fixed;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 480px;
z-index: 20;
/* AANVULLING-30 §1: de balk is var(--onderbalk) hoog (56 icoonrij + veilige
rand); de veilige rand is opvulling ONDER de iconen (padding-bottom), zodat
de iconen 56 hoog blijven en niet omhoog schuiven op een toestel met een
thuisstreep. */
height: var(--onderbalk);
padding: 0 6px var(--safe-onder);
display: flex;
background: var(--bg, #0b0a08);
}
/*
* DE BALK IS SCHIL EN DE INHOUD KAN ER NIET ONDER (ronde 13 punt 1, K10).
* De tabbalk staat op elk telefoonscherm; .screen draagt dan een vaste
* onderrand van precies de balkhoogte, zodat het scrollgebied erboven
* eindigt. Dat is de structurele oplossing voor wat AANVULLING-14 par. 1
* per scherm oploste: knoppen die onder de balk lagen.
*/
@media (max-width: 1023px) {
.screen.met-tabbalk {
/* AANVULLING-30 §1: precies de balkhoogte, geen extra lucht. De verwijderde
.onderruimte was een tweede oplossing voor ditzelfde. */
padding-bottom: var(--onderbalk);
}
}
/*
* DE IPHONE ALS APP OP HET BEGINSCHERM (gemeten door Simon, 21-9-2026, met
* de Schermcontrole onder Bedrijf). Bij het openen meldt iOS een venster van
* 812 op een scherm van 874: de klokbalk van 62 ontbreekt. Later corrigeert
* iOS dat stil naar 874, zonder resize-gebeurtenis. Alles wat aan het venster
* hangt (100dvh, position:fixed bottom:0) stond daardoor 62 punten te hoog:
* de onderbalk zweefde en de onderste tegels vielen weg. 100vh klopte vanaf
* het eerste moment (874). Dus in de geinstalleerde app rekenen de schil, de
* onderbalk en de zwevende knop vanaf de BOVENkant met 100vh. In Safari en op
* de computer geldt dit blok niet; daar blijft 100dvh de juiste maat.
*/
@media (display-mode: standalone) and (max-width: 1023px) {
.screen {
height: 100vh;
min-height: 100vh;
}
.tabs {
top: calc(100vh - var(--onderbalk));
bottom: auto;
}
.fab {
top: calc(100vh - var(--onderbalk) - var(--fab-boven-onderbalk) - var(--h-fab));
bottom: auto;
}
}
.tab {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
font-size: calc(0.625rem * var(--tekstschaal));
font-weight: 600;
color: var(--ink-dim);
letter-spacing: var(--ls-pill);
position: relative;
background: none;
border: 0;
font-family: inherit;
cursor: pointer;
}
.tab .i, .tab svg { width: 22px; height: 22px; }
.tab.on { color: var(--gold-light); }
.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -4px; }
.tab .bdg {
position: absolute;
top: 6px;
right: 22px;
min-width: 16px;
height: 16px;
border-radius: 8px;
background: var(--warn);
color: #fff;
font-size: calc(0.59375rem * var(--tekstschaal));
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
}
/* ---- Kop met de terugknop --------------------------------------------- */
/*
* De terugknop staat tegen de LINKERRAND, niet op de zijmarge van 20 punten.
*
* 44 punten voldoet al aan afspraak 1, dus dit is geen correctie maar een
* verbetering: tegen de rand kun je er aan die kant niet naast tikken. Voor de
* enige uitweg die het scherm heeft, bij mensen die het randgebaar niet kennen,
* is dat het waard.
*/
.schilkop {
padding: 10px 0 0;
flex: 0 0 auto;
}
/* ---- Lege staat (AANVULLING-2 §5) -------------------------------------- */
/*
* Eén zin die zegt wat hier komt te staan, plus één knop die dat begint. Geen
* illustratie, geen uitroeptekens.
*/
.leeg {
padding: 48px var(--pad-x) 0;
text-align: center;
}
.leeg-zin {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--muted);
max-width: 30ch;
margin: 0 auto;
}
/*
* De knoppen onder een lege staat. Meer dan één mag: bij Relaties staan er twee
* (AANVULLING-13 §2), want een relatie intikken en een lijst inlezen zijn twee
* routes naar dezelfde uitkomst en allebei horen ze zichtbaar te zijn.
*/
.leeg-knoppen {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
}
.leeg-knop {
width: 100%;
max-width: 260px;
}
/* De zin bij een onderdeel dat er komt maar nog niet werkt (aanvulling 7 §9). */
.leeg-grijs {
margin: 10px auto 0;
max-width: 34ch;
font-size: var(--fs-support-sm);
line-height: 1.45;
color: var(--muted-2);
}
.leeg-nog-niet {
margin-top: 16px;
font-size: var(--fs-support-sm);
color: var(--ink-dim);
}
/*
* `hidden` moet ook echt verbergen.
*
* De browser zet `[hidden] { display: none }` in zijn eigen stijlblad, maar dat
* is een attribuutselector en verliest van elke klasse die zelf een display
* zet - `.item { display: flex }` bijvoorbeeld. Gevolg: de krimpvolgorde
* verborg regels die gewoon bleven staan, en concludeerde daarna dat krimpen
* niet hielp.
*
* Dezelfde val als `.screen .sf` die van `.sf` won. Een !important is hier de
* juiste oplossing en geen noodgreep: `hidden` is een uitspraak van het document
* en hoort geen enkele stijlregel te verliezen.
*/
[hidden] {
display: none !important;
}
/* ---- Een naam vragen, in het scherm zelf -------------------------------- */
/*
* Geen `prompt()` van de browser: die ziet er op elk toestel anders uit, is niet
* te stijlen, en op iOS blokkeert hij de hele pagina. Dit blokje verschijnt in
* het scherm en verdwijnt zodra het antwoord er is.
*
* BOVENAAN, NIET ONDERAAN (AANVULLING-14 §1, "bij Doen komt niets aan").
*
* Hij stond onderaan vastgezet, "waar je duim al is" - en op een echte iPhone
* is onderaan precies waar het TOETSENBORD staat. Het veld krijgt de aandacht,
* het toetsenbord schuift omhoog, en een `position: fixed`-element schuift op
* iOS niet mee: je typt in een veld dat je niet ziet en de knop *Bewaren* ligt
* achter de toetsen. Bovenaan kan het toetsenbord er nooit overheen, op geen
* enkel toestel.
*/
.naamvraag {
position: fixed;
left: 12px;
right: 12px;
top: calc(var(--safe-top) + 66px);
z-index: 40;
padding: 13px 14px;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--gold-a30);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.naamvraag-kop { font-size: var(--fs-support); font-weight: 600; }
.naamvraag-veld {
display: block;
width: 100%;
margin-top: 10px;
min-height: var(--tap-min);
padding: 0 12px;
border-radius: var(--r-btn);
border: 1px solid var(--white-a10);
background: var(--white-a04);
color: var(--ink);
font: inherit;
font-size: var(--fs-body);
}
.naamvraag-knoppen { gap: 8px; margin-top: 12px; }
.naamvraag-knoppen > .btn { flex: 1; }
.naamvraag-fout { margin-top: 9px; font-size: var(--fs-meta); color: var(--warn); }
/* Op de computer is er geen aanraaktoetsenbord; daar staat hij rustig
rechtsonder, uit de weg van waar je leest. */
@media (min-width: 1024px) {
.naamvraag { top: auto; bottom: 20px; left: auto; right: 20px; width: 320px; }
}
/* De keuzevariant van hetzelfde blokje: knoppen onder elkaar. */
.naamvraag-keuzes {
display: grid;
gap: 6px;
margin-top: 10px;
max-height: 40vh;
overflow-y: auto;
}
.naamvraag-keuze { width: 100%; }
.naamvraag-af { width: 100%; margin-top: 8px; }
/* Het accountpaneel (AANVULLING-14 §5): hetzelfde blokje als de naamvraag. */
.account-adres {
margin: 8px 0 0;
font-size: var(--fs-support);
color: var(--muted);
}
/* De ava is sinds aanvulling 14 een knop (account/uitloggen). */
button.ava { font-family: inherit; cursor: pointer; }
/* ---- Afdrukken (blok D) ------------------------------------------------- */
/*
* Wat je ziet is wat er uitkomt, minus de navigatie: de zijbalk, de balken en
* de knoppen blijven weg, de inhoud komt zwart op wit. Geen aparte
* afdrukweergave om te onderhouden.
*/
@media print {
body { background: #fff; color: #000; }
.screen { height: auto; min-height: 0; overflow: visible; background: #fff; }
.scroll { overflow: visible; }
.bureau-zij,
.bureau-top,
.tabs,
.dock,
.fab,
.terugknop,
.schilkop,
.naamvraag,
.btn,
.lijst-toevoegen,
/* M10.14: de agenda drukt het raster af, niet de bediening. */
.segs,
.chips,
.ag-balk { display: none !important; }
.ag-maand, .ag-kolom, .ag-cel { border-color: #ccc; background: #fff; color: #000; }
.ag-blok, .ag-mini, .ag-deadline, .ag-heledag, .ag-evbalk {
background: #fff; color: #000; border: 1px solid #999;
}
.card, .tile, .slim, .blk, .insp-kaart, .bs-cijfer {
border-color: #ccc;
background: #fff;
color: #000;
}
}
/* K1: het vlaggetje - klein, met de landnaam als title/aria en nooit als emoji. */
.vlag { vertical-align: -1px; border-radius: 2px; }
.vlag-code {
display: inline-block; font-size: 9px; line-height: 12px; padding: 0 3px;
border: 1px solid var(--white-a20, rgba(255,255,255,.2)); border-radius: 2px;
vertical-align: 1px; letter-spacing: .5px;
}
/* De vier routeknoppen van Inspiratie (BOUWOPDRACHT-8 par. 6.3). */
.insp-routes { gap: 8px; flex-wrap: wrap; }
.insp-leeg { max-width: 560px; }
/* Aan zet (BOUWOPDRACHT-8 par. 3.8): de reden als zin, twee knoppen. */
.aanzet-rij { padding: 10px 0; border-bottom: 1px solid var(--white-a06); }
.aanzet-open {
background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
text-align: left; width: 100%; display: flex; flex-wrap: wrap; gap: 8px;
align-items: center;
}
.aanzet-reden { flex-basis: 100%; color: var(--gold-light); }
.aanzet-acties { gap: 8px; margin-top: 6px; }
/* ---- De temperatuurpil (AANVULLING-21 par. 4) ---------------------------
Kleurvlak met het woord ernaast-in; de kleur draagt nooit alleen. Dit is
de enige component die de temperatuurkleuren gebruikt. */
.pill.temp { border: 1px solid transparent; font-weight: 600; }
.pill.temp-ijskoud { background: var(--temp-ijskoud-a18); color: var(--temp-ijskoud); border-color: var(--temp-ijskoud); }
.pill.temp-koud { background: var(--temp-koud-a18); color: var(--temp-koud); border-color: var(--temp-koud); }
.pill.temp-lauw { background: var(--temp-lauw-a18); color: var(--temp-lauw); border-color: var(--temp-lauw); }
.pill.temp-warm { background: var(--temp-warm-a18); color: var(--temp-warm); border-color: var(--temp-warm); }
.pill.temp-heet { background: var(--temp-heet-a18); color: var(--temp-heet); border-color: var(--temp-heet); }
.pill.temp-leverancier { background: var(--temp-leverancier-a18); color: var(--temp-leverancier); border-color: var(--temp-leverancier); }
button.pill.temp { cursor: pointer; }
/* K9 9.2: de niet-gekozen temperaturen - zwart met goud, wachtend op de tik. */
.pill.temp-uit {
background: transparent;
color: var(--gold-soft);
border-color: var(--gold-a34);
}
.pill.temp-uit:hover { border-color: var(--gold); color: var(--gold); }
.relatie-temprij { gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* De filterchips van de relatielijst dragen dezelfde vijf kleuren. */
.chip.temp-ijskoud[aria-pressed="true"], .chip.temp-ijskoud[aria-checked="true"] { background: var(--temp-ijskoud); color: var(--on-gold); }
.chip.temp-koud[aria-pressed="true"], .chip.temp-koud[aria-checked="true"] { background: var(--temp-koud); color: var(--on-gold); }
.chip.temp-lauw[aria-pressed="true"], .chip.temp-lauw[aria-checked="true"] { background: var(--temp-lauw); color: var(--on-gold); }
.chip.temp-warm[aria-pressed="true"], .chip.temp-warm[aria-checked="true"] { background: var(--temp-warm); color: var(--on-gold); }
.chip.temp-heet[aria-pressed="true"], .chip.temp-heet[aria-checked="true"] { background: var(--temp-heet); color: var(--on-gold); }
.chip.temp-leverancier[aria-pressed="true"], .chip.temp-leverancier[aria-checked="true"] { background: var(--temp-leverancier); color: var(--on-gold); }
/* ---- Het filtermenu (AANVULLING-22 par. 3) ------------------------------
Een knop Filter op Relaties, Doen en Events. Op de telefoon een vel van
onderen, op de computer een kolom links. De actieve filters staan als
verwijderbare chips boven de lijst, met het aantal dat overblijft. */
.filter-streek {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.filter-chip-actief { display: inline-flex; align-items: center; gap: 6px; }
.filter-chip-kruis { font-weight: 600; opacity: 0.7; }
.filter-telling { font-size: 13px; }
.filter-schaduw {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 60;
}
.filter-vel {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 61;
background: var(--surface);
border-top: 1px solid var(--line);
border-radius: 16px 16px 0 0;
max-height: 72vh;
display: flex;
flex-direction: column;
padding-bottom: var(--safe-onder);
}
.filter-vel-kop {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px 10px;
border-bottom: 1px solid var(--line-2);
}
.filter-vel-lijf {
overflow-y: auto;
padding: 4px 16px 12px;
}
.filter-groep { margin-top: 14px; }
.filter-groep .chips { margin-top: 8px; }
.filter-vel-voet {
display: flex;
gap: 10px;
padding: 12px 16px;
border-top: 1px solid var(--line-2);
}
/* Op de computer is het vel een kolom links (par. 3). */
@media (min-width: 1024px) {
.filter-schaduw { background: rgba(0, 0, 0, 0.35); }
.filter-vel {
right: auto;
top: 0;
width: 340px;
max-height: none;
border-radius: 0;
border-top: 0;
border-right: 1px solid var(--line);
}
}
/* ---- De regelinvoer van de offerte (AANVULLING-23 par. 3) ---------------
Twee producten maal fles/doos/pallet. De productnaam wrapt niet, en elk
aantal draagt zijn eenheid als kopje erboven - zonder dit zwierven de
labels tussen de velden (AUDIT-29). */
.ov-regelrij { align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ov-regelrij > .groei-smal {
flex: 0 0 150px;
font-weight: 600;
white-space: nowrap;
padding-bottom: 12px;
}
.ov-aantal {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 3px;
padding: 0;
}
.ov-aantal .fl { width: auto; }
.ov-aantal .inlees-veld { width: 86px; }
/* AANVULLING-27 §5.1/§5.2: het ene zoekveld, de resultatenlijst met "+ nieuwe
relatie" onderaan, en de gekozen-regel met soort en taal. */
.ov-zoekuit { display: flex; flex-direction: column; }
.ov-zoekuit .item { text-align: left; }
.ov-nieuwrij { color: var(--gold); font-weight: 600; }
.ov-gekozen-blok {
padding: 12px 14px; border: 1px solid var(--gold-a30); border-radius: 12px;
background: var(--surface);
}
.ov-gekozen-blok > .row { align-items: baseline; }
.ov-gekozen-blok [data-ov-gekozen] { font-weight: 600; }
/* ---- Instellingen › Teksten (AANVULLING-23 par. 10) ---------------------
Elke zin een rij, vier taalkolommen; een gat valt op en blokkeert het
versturen in die taal. Breed - dus de tabel scrolt in zijn eigen kader. */
.teksten-houder { overflow-x: auto; }
.teksten-tabel { border-collapse: collapse; min-width: 900px; width: 100%; font-size: var(--fs-support-sm); }
.teksten-tabel th {
text-align: left;
color: var(--muted-2);
font-weight: 600;
font-size: var(--fs-meta);
padding: 6px 8px;
border-bottom: 1px solid var(--line);
}
.teksten-tabel td { vertical-align: top; padding: 4px 4px; border-bottom: 1px solid var(--line-2); }
.teksten-sleutel { color: var(--gold-soft); font-size: var(--fs-meta); white-space: nowrap; padding-top: 10px; }
.teksten-cel {
display: block;
width: 100%;
min-width: 150px;
text-align: left;
background: none;
border: 0;
color: inherit;
font: inherit;
padding: 6px;
border-radius: 8px;
cursor: pointer;
line-height: 1.35;
}
.teksten-cel:hover { background: var(--gold-a10); }
.teksten-gat { color: var(--warn-pill); font-style: italic; }
/*
* De lege staat van Offertes (AUDIT-40): de gouden knop staat links, dus
* een zin die zichzelf centreert zweeft los van de knop waar hij over
* praat. Onder de knop, links uitgelijnd, leest hij als een geheel.
*/
.ov-leeg {
margin: 0;
max-width: 44ch;
}
/* ---- De kansentrechter op Inzicht (ronde 13 punt 4b, K11) -------------- */
/*
* Verhuisd van het computerbeginscherm: de vijf open fasen naast elkaar,
* elk een deur naar het kansenbord (M14.8). Op de telefoon vouwen ze om.
*/
.inzicht-fasen { display: flex; gap: 10px; flex-wrap: wrap; }
.inzicht-fase {
flex: 1;
min-width: 96px;
background: var(--surface);
border: 1px solid var(--white-a06);
border-radius: var(--r-tile);
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 3px;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
.inzicht-fase:hover { border-color: var(--gold-a30); }
.inzicht-fase-getal { font-size: calc(1.375rem * var(--tekstschaal)); line-height: 1; }
.inzicht-fase-naam { font-size: var(--fs-meta); color: var(--muted-2); }
/* Finance uses the existing shell and scales the review source next to the form. */
.fin-wrap{padding:20px;max-width:1240px;margin:auto;overflow-wrap:anywhere}
.fin-wrap h1{font-size:28px;margin:20px 0}.fin-wrap h2{font-size:21px;margin:24px 0 12px}
/* Nog te distilleren: een lijst, geen formulier. Per regel twee korte regels en een knop.
Het bedrag rechts, want daar kijkt een mens eerst naar. */
.fin-aandacht{margin:20px 0;padding:16px;border:1px solid var(--line,#d8d1c5);border-radius:12px;background:var(--surface,#fff)}
.fin-aandacht h2{margin:0 0 4px;font-size:20px;display:flex;align-items:center;gap:8px}
.fin-aandacht-teller{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;padding:0 6px;border-radius:13px;background:var(--gold,#c8a15a);color:#fff;font-size:14px}
.fin-aandacht-leeg h2{color:var(--muted,#6b6257)}
/* Een stap van de automatische verwerking die blijft hangen, bovenaan de werklijst (17-10-2026).
Geen rood alarm: het is een melding die gelezen en nagekeken moet worden. */
.fin-storing{margin:0 0 12px;padding:12px;border:1px solid var(--warn-line,#d9bb7a);background:var(--warn-bg,#fff8e9);border-radius:10px;display:grid;gap:4px}
.fin-storing p{margin:0;font-size:13px}
.fin-acties{margin-top:8px;padding-top:8px;border-top:1px solid var(--line,#d8d1c5);display:grid;gap:8px;justify-items:start}
.fin-acties strong{font-size:13px;color:var(--muted,#6b6257)}
.fin-aandacht-lijst{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.fin-aandacht-regel{padding:12px;border:1px solid var(--line,#d8d1c5);border-radius:10px;display:grid;gap:4px}
.fin-aandacht-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.fin-aandacht-kop strong{font-size:16px}
.fin-aandacht-bedrag{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.fin-aandacht-voorstel{margin:0;font-size:13px;color:var(--muted,#6b6257)}
.fin-aandacht-kop small{font-size:13px;color:var(--muted,#6b6257)}
.fin-aandacht-meer{font-size:13px}
.fin-aandacht-meer summary{cursor:pointer;color:var(--muted,#6b6257)}
.fin-aandacht-meer p{margin:4px 0 0}
.fin-aandacht-nodig{margin:2px 0 6px;font-size:14px}
.fin-aandacht-regel .btn{justify-self:start}
.fin-aandacht-check{border-style:dashed}
.fin-aandacht-checks{margin-top:14px}
.fin-aandacht-checks summary{cursor:pointer;font-size:14px;color:var(--muted,#6b6257)}
@media (max-width:700px){.fin-aandacht{padding:12px}.fin-aandacht-bedrag{margin-left:0}}
.fin-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}
.fin-groups>a,.fin-groups>div,.fin-groups>button{padding:16px;border:1px solid var(--line,#d8d1c5);border-radius:12px;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:6px;background:var(--surface,#fff);text-align:left;cursor:pointer}
.fin-groups b{font-size:22px}.fin-groups span{font-size:13px}
.fin-groups small{font-size:11px;color:var(--muted,#6b655d)}
.fin-task-deck{max-width:760px;padding:16px;border:1px solid var(--line,#d8d1c5);border-radius:14px;background:var(--surface,#fff);margin:12px 0 24px}
.fin-task-card{width:100%}.fin-task-kind{display:inline-block;margin-bottom:4px;color:var(--muted,#6b655d);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.fin-task-nav{display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.fin-review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start}
.fin-sources img{width:100%;height:auto;max-height:700px;object-fit:contain}.fin-sources iframe{width:100%;height:600px;border:1px solid #ccc}
.fin-field{display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:14px}.fin-field input,.fin-field select,.fin-field textarea{width:100%;box-sizing:border-box;min-width:0;font:inherit;min-height:44px;border:1px solid #bdb6aa;border-radius:7px;padding:10px;background:var(--surface,#fff);color:var(--ink,#f4efe4)}
.fin-line{margin:16px 0;border:1px solid #c7bda9;border-radius:10px;padding:12px}.fin-actions{margin:20px 0;display:flex;flex-wrap:wrap;gap:10px}.fin-actions .fin-field{width:100%}
.fin-check{display:flex;gap:10px;align-items:center;min-height:44px}.fin-wrap section{scroll-margin-top:20px}.fin-wrap .item{width:100%;justify-content:space-between;gap:16px;text-align:left}.fin-wrap [data-fin-status]:not(:empty){padding:12px;border-left:3px solid #917033}
@media(max-width:760px){.fin-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-review{grid-template-columns:minmax(0,1fr)}.fin-wrap{padding:16px}.fin-wrap h1{font-size:24px}.fin-sources iframe{height:360px}}
/* Keep the original alongside long recognition/review forms on desktop. */
@media(min-width:761px){.fin-sources{position:sticky;top:0;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain}}
/* Administratie: ieder onderdeel opent als eigen rustig scherm. */
.fin-home-heading{margin:28px 0 18px}.fin-home-heading h1{margin-bottom:6px}.fin-home-heading p{margin:0;color:var(--muted,#6b655d)}
.fin-groups{grid-template-columns:repeat(5,minmax(0,1fr))}
.fin-groups>button{min-height:150px;justify-content:flex-start;transition:border-color .15s ease,transform .15s ease,background .15s ease}
.fin-groups>button:hover,.fin-groups>button:focus-visible{border-color:var(--gold,#d5b768);background:color-mix(in srgb,var(--surface,#fff) 92%,var(--gold,#d5b768));transform:translateY(-2px)}
.fin-group-title{font-size:17px!important;font-weight:750;line-height:1.25}.fin-groups strong{font-size:32px;line-height:1;color:var(--gold,#d5b768);margin-top:auto}.fin-groups small{font-size:13px;line-height:1.35}
.fin-screen-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:end;margin:24px 0}.fin-screen-heading h1,.fin-screen-heading p{margin:0}.fin-screen-heading p{color:var(--muted,#6b655d)}.fin-screen-heading>strong{grid-column:2;grid-row:1/3;font-size:20px;color:var(--gold,#d5b768)}
.fin-task-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.fin-task-card{min-height:150px;border:1px solid var(--line,#d8d1c5);border-radius:14px;padding:18px;background:var(--surface,#fff);color:inherit;text-align:left;display:flex;flex-direction:column;gap:9px;cursor:pointer}.fin-task-card:hover,.fin-task-card:focus-visible{border-color:var(--gold,#d5b768)}.fin-task-card strong{font-size:18px;line-height:1.25}.fin-task-kind{font-size:12px;color:var(--gold,#d5b768);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.fin-task-amount{font-size:18px;margin-top:auto}.fin-done{padding:28px;border:1px solid var(--line,#d8d1c5);border-radius:14px;background:var(--surface,#fff)}
.fin-simple-question{padding:18px;border:1px solid var(--line,#d8d1c5);border-radius:14px;background:var(--surface,#fff);margin:0 0 16px}.fin-simple-question h3{margin:0 0 6px}.fin-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fin-choice{min-height:52px;border:1px solid var(--line,#d8d1c5);border-radius:10px;padding:11px 14px;background:transparent;color:inherit;text-align:left;font:inherit;font-weight:700;cursor:pointer}.fin-choice:hover,.fin-choice:focus-visible{border-color:var(--gold,#d5b768)}.fin-choice[aria-pressed="true"]{border-color:var(--gold,#d5b768);background:color-mix(in srgb,var(--surface,#fff) 84%,var(--gold,#d5b768))}.fin-answer-done{font-weight:750;color:var(--gold,#d5b768)}.fin-possible-match{padding:12px;border-radius:10px;background:color-mix(in srgb,var(--surface,#fff) 88%,var(--gold,#d5b768));margin:10px 0}.fin-possible-match p{margin:5px 0}.fin-summary{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;padding:18px;border:1px solid var(--line,#d8d1c5);border-radius:14px}.fin-summary dt{font-weight:750}.fin-summary dd{margin:0;overflow-wrap:anywhere}.fin-book-button{width:100%;margin:0 0 16px}.fin-advanced,.fin-history{margin-top:18px}.fin-advanced>summary,.fin-history>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--muted,#6b655d)}
.fin-received,.fin-storage,.fin-reading{display:grid;gap:7px;padding:16px 18px;border:1px solid var(--line,#d8d1c5);border-radius:14px;margin:0 0 16px;background:color-mix(in srgb,var(--surface,#fff) 90%,var(--gold,#d5b768))}.fin-received strong,.fin-storage strong,.fin-reading strong{font-size:18px}.fin-received .btn{margin-top:8px;justify-self:start}.fin-storage{grid-template-columns:minmax(0,1fr) auto;align-items:center}.fin-storage span{grid-column:1}.fin-storage a{grid-column:2;grid-row:1 / span 2}.fin-storage-ok{border-color:#3c7d55}.fin-storage-warn{border-color:#a94c46}.fin-reading{border-style:dashed}.fin-review-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:18px;border:1px solid var(--line,#d8d1c5);border-radius:14px;margin-bottom:14px}.fin-review-form>.fin-help,.fin-review-form>.fin-advanced,.fin-review-form>.btn{grid-column:1 / -1}.fin-review-form>.fin-help{margin:0}.fin-needed{font-weight:700;color:var(--muted,#6b655d)}
@media(max-width:1000px){.fin-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.fin-task-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.fin-groups,.fin-task-grid,.fin-choice-grid,.fin-review-form{grid-template-columns:minmax(0,1fr)}.fin-groups>button{min-height:112px}.fin-screen-heading{grid-template-columns:minmax(0,1fr)}.fin-screen-heading>strong{grid-column:1;grid-row:auto}.fin-summary{grid-template-columns:minmax(0,1fr)}.fin-summary dd{margin-bottom:5px}.fin-storage{grid-template-columns:minmax(0,1fr)}.fin-storage span,.fin-storage a{grid-column:1;grid-row:auto}}
@media(max-width:760px){.fin-sources{max-height:360px;overflow:auto}.fin-sources img{max-height:280px}.fin-task-grid{padding-bottom:96px}.fin-home-groups{grid-template-columns:minmax(0,1fr)}.fin-home-groups .fin-desktop-only,.fin-more{display:none}.fin-home-groups>button{min-height:104px}.fin-actions>[data-new-receipt]{width:100%;justify-content:center}.fin-payment-choice{border:0;padding:0;margin:18px 0}.fin-payment-choice .fin-choice{display:flex;align-items:center;gap:12px;margin:8px 0}.fin-payment-choice input{width:22px;height:22px;flex:0 0 auto}}
.fin-mail-source{overflow-wrap:anywhere;margin:18px 0;padding:12px 0;border-bottom:1px solid var(--line,#30291b)}
.fin-party{border:1px solid var(--line,#30291b);border-radius:12px;padding:14px;margin:12px 0}.fin-mail-source a:not(.btn){color:var(--gold,#d5b768)}.fin-mail-source fieldset{border:1px solid var(--line,#30291b);border-radius:10px;padding:12px}
.fin-payment-card,.fin-payment-term{border:1px solid var(--line,#403c32);border-radius:12px;padding:16px;margin:14px 0;background:var(--surface,#191814);min-width:0}.fin-payment-term legend{padding:0 8px}.fin-payment-card dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.fin-payment-card dd{margin:0}.fin-payment-card[hidden]{display:none}.fin-payment-card p,.fin-payment-card dd{overflow-wrap:anywhere}
.fin-recognition-text { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.fin-more { margin-left: auto; position: relative; }
.fin-more > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.fin-more > .btn { margin: 8px 6px 0 0; }
.fin-payment-state{padding:10px 14px;border-radius:10px;background:color-mix(in srgb,var(--surface,#fff) 88%,var(--gold,#d5b768));}
.fin-payment-open{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;color:inherit;cursor:pointer}
.fin-payment-open small{display:block;color:var(--muted,#6b655d)}
.fin-simple-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.fin-simple-actions form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fin-payment-select{padding:14px;border:1px solid var(--line,#d8d1c5);border-radius:10px;margin:8px 0}.fin-payment-select span{display:flex;flex-direction:column;gap:4px}.fin-payment-select small{color:var(--muted,#6b655d)}
.fin-file-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.fin-file-card{padding:20px;border:1px solid var(--line,#d8d1c5);border-radius:14px;background:var(--surface,#fff)}.fin-file-card h3{margin-top:0}
@media(max-width:760px){.fin-file-grid{grid-template-columns:minmax(0,1fr)}}
.fin-declaration-person{max-width:760px;border:1px solid var(--line,#d8d1c5);border-radius:14px;padding:18px;margin:16px 0;background:var(--surface,#fff)}
.fin-declaration-person h2{margin-top:0}.fin-select-all{font-weight:750;margin:14px 0}.fin-declaration-person+.fin-declaration-person{margin-top:18px}
.home-finance-question{width:min(1100px,100%);margin:0 auto 18px;padding:16px 18px;border:1px solid var(--gold,#d5b768);border-radius:14px;background:color-mix(in srgb,var(--surface,#fff) 86%,var(--gold,#d5b768));color:inherit;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;text-align:left;font:inherit;cursor:pointer}
.home-finance-question strong,.home-finance-question small{display:block}.home-finance-question strong{font-size:17px}.home-finance-question small{margin-top:3px;color:var(--muted,#6b655d)}
.home-finance-question-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--gold,#d5b768);color:#17130f;font-size:20px;font-weight:900}
.fin-team-help{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#d8d1c5)}.fin-team-help p{margin:0}.fin-waiting,.fin-answer-received{border-color:var(--gold,#d5b768)}
@media(max-width:560px){.home-finance-question{margin:0 0 16px}.fin-team-help{align-items:stretch;flex-direction:column}.fin-team-help .btn{width:100%;justify-content:center}}
.naamvraag,.naamvraag-veld{box-sizing:border-box;max-width:100%}
.naamvraag-veld[type=date],.naamvraag-veld[type=datetime-local]{color-scheme:dark}
.hag-toestelslot{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 64px);overflow:auto;box-sizing:border-box;border:1px solid var(--gold);border-radius:16px;background:var(--bg);color:var(--ink);padding:28px;text-align:center}
.hag-toestelslot h1{font-size:24px;line-height:1.25}
.hag-toestelslot p{margin-top:16px}
.hag-toestelslot button{margin-top:20px;width:100%}
.hag-toestelslot::backdrop{background:#100e0b}
.hag-toestelslot button{white-space:normal;height:auto;min-height:44px}
.hag-vergrendeld #app{visibility:hidden}
.hag-toestel-acties{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.hag-toestel-acties .btn{height:auto;min-height:44px;padding:10px 14px;white-space:normal}
@media(max-width:700px){.hag-toestel-acties{flex-direction:column;align-items:stretch}.hag-toestel-acties .btn{width:100%}}
/* Het icoon van een menuregel in een zacht rond vlakje (Simon, 16-10-2026:
een gebruikersvriendelijke look achter Menu en Bedrijf). Het vlakje geeft
de regel een vast begin, zodat de namen onder elkaar uitlijnen in plaats
van tegen iconen van verschillende breedte aan te schuiven. */
.item-icoon{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--gold-a12,rgba(180,142,71,.12))}
.item-icoon .i{width:17px;height:17px}
/* Bedrijfsgegevens: bewerken en kopiëren zijn aparte aanraakdoelen. */
.bedrijf-gegeven{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;gap:8px;border-bottom:1px solid var(--line)}
.bedrijf-gegeven>.bedrijf-gegeven-bewerk{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2fr);align-items:center;gap:12px;min-width:0;min-height:44px;padding:10px 0}
.bedrijf-gegeven-waarde{min-width:0;text-align:right;overflow-wrap:anywhere}
.bedrijf-profiel-kort{display:none}
.bedrijf-kopieer{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.bedrijf-kopieer .i{width:19px;height:19px}
.bedrijf-kopieer:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(hover:hover){.bedrijf-kopieer:hover{color:var(--gold);background:var(--gold-a12,rgba(180,142,71,.12))}}
@media(max-width:700px){
.bedrijf-gegeven>.bedrijf-gegeven-bewerk{grid-template-columns:minmax(0,1fr);gap:3px}
.bedrijf-gegeven-bewerk>.mut{font-size:12px}
.bedrijf-gegeven-waarde{text-align:left}
.bedrijf-profiel-volledig{display:none}
.bedrijf-profiel-kort{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
.bedrijf-logo{margin-top:20px;margin-bottom:20px}
.bedrijf-logo-inhoud{display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center;gap:16px}
.bedrijf-logo-preview{display:block;background:#000;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.bedrijf-logo-preview img{display:block;width:100%;height:auto}
.bedrijf-logo-acties{display:flex;flex-wrap:wrap;gap:8px}
@media(max-width:700px){.bedrijf-logo-acties{flex-direction:column;align-items:flex-start}}
/* Contact vastleggen: rustige velden en een bereikbare opslagknop. */
.contact-invoer .velden, .contact-invoer > .pad { max-width: 820px; }
.contact-invoer .fv { min-width: 0; width: 100%; }
.contact-tekstveld { align-items: start; }
.contact-tekstveld textarea { resize: vertical; min-height: 84px; white-space: pre-wrap; }
.contact-bijlagen { display: grid; gap: 14px; }
.contact-bijlagen .f { flex-wrap: wrap; gap: 8px; }
.contact-bijlagen input { min-width: 0; max-width: 100%; }
.contact-bijlagen [data-bestandsnaam] { overflow-wrap: anywhere; }
.dock-knoppen > .btn { width:auto; flex:1 1 0; }
.contact-opslaan { flex-shrink: 0; }
.contact-opslaan .dock-knoppen { flex-wrap: wrap; }
.contact-opslaan [data-actie="volgende"] { flex-basis: 100%; }
[data-contact-temperatuur][hidden] { display: none; }
@media (min-width:1024px) {
.bureau-hoofd .dock { display: block; padding: 14px 24px; border-top: 1px solid var(--gold-a30); background: var(--bg); z-index: 5; }
.contact-opslaan .dock-knoppen { max-width: 820px; }
.bureau-kolom:has(.contact-invoer),.bureau-kolom:has(.contactmoment-opslaan) { max-width: 880px; }
.contact-invoer .velden { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 24px; }
.contact-invoer .velden > .hr { display: none; }
.contact-invoer .velden > .f { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--white-a06); }
.contact-invoer .velden .fl { width: auto; }
}
.tekst-link { color:var(--gold); text-decoration:underline; overflow-wrap:anywhere; }
.taak-omschrijving-links { display:flex; flex-direction:column; gap:8px; margin-top:8px; font-size:var(--fs-support); }
.taak-omschrijving-links[hidden] { display:none; }
.land-herkend { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--mut); }
.land-herkend:empty { display:none; }
.contact-invoer .land-herkend { grid-column:2 / -1; }
/* Appelmoes: invoer altijd in beeld, met vaste afsluitknoppen. */
.appelmoes-invoer { box-sizing:border-box; width:min(620px, calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:0; border:1px solid var(--line); border-radius:18px; background:var(--bg); color:var(--ink); }
.appelmoes-invoer[open] { display:flex; flex-direction:column; }
.appelmoes-invoer::backdrop { background:rgb(0 0 0 / .72); }
.appelmoes-invoer-kop, .appelmoes-invoer-voet { flex:none; padding:16px 20px; }
.appelmoes-invoer-kop { border-bottom:1px solid var(--line); }
.appelmoes-invoer h2 { margin:0; font-size:20px; }
.appelmoes-invoer-voet { border-top:1px solid var(--line); padding-bottom:max(16px,var(--safe-onder)); }
.appelmoes-invoer-inhoud { overflow-y:auto; padding:20px; min-height:0; }
.appelmoes-keuzes { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.appelmoes-keuzes .btn { min-height:48px; width:100%; white-space:normal; }
.appelmoes-keuzes [aria-pressed="true"] { border-color:var(--gold); color:var(--gold); }
.appelmoes-invoer input, .appelmoes-invoer textarea { width:100%; min-width:0; box-sizing:border-box; }
.appelmoes-invoer textarea { resize:vertical; }
.appelmoes-invoer [data-kiezer-tekst], .appelmoes-invoer [data-i-fout] { overflow-wrap:anywhere; }
.appelmoes-invoer [hidden] { display:none !important; }
.appelmoes-link { display:block; color:inherit; text-decoration:none; border:1px solid var(--line); border-radius:12px; overflow:hidden; margin:10px 0; }
.appelmoes-link:hover, .appelmoes-link:focus-visible { border-color:var(--gold); }
.appelmoes-linkbeeld { display:block; aspect-ratio:1; overflow:hidden; background:var(--surface); }
.appelmoes-link img { display:block; width:100%; height:100%; object-fit:cover; }
.appelmoes-beeldleeg { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; aspect-ratio:1; box-sizing:border-box; padding:24px; background:var(--gold-a10); color:var(--gold-light); text-align:center; overflow:hidden; }
.appelmoes-beeldleeg small { text-transform:uppercase; letter-spacing:.1em; }
.appelmoes-beeldleeg strong, .appelmoes-beeldleeg b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; font-size:24px; line-height:1.4; }
.appelmoes-linktekst { display:grid; gap:6px; padding:14px; overflow-wrap:anywhere; }
.appelmoes-linktekst small { color:var(--gold); }
.appelmoes-linktekst strong { font-size:16px; line-height:1.4; }
.appelmoes-linktekst > span { font-size:13px; line-height:1.5; }
.appelmoes-invoer .f { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.appelmoes-invoer .fl { width:auto; flex:none; }
.appelmoes-invoer [data-i-titel] { min-height:44px; }
/* De gezamenlijke overlegagenda blijft boven alle taaklijsten en filters. */
.bespreekpunten-vast { margin-top:16px; margin-bottom:12px; }
.bespreekpunten { border:1px solid var(--gold); border-radius:14px; overflow:hidden; }
.bespreekpunten summary { display:flex; align-items:center; gap:12px; min-height:56px; padding:14px 18px; cursor:pointer; color:var(--gold-light); }
.bespreekpunten summary::before { content:'›'; font-size:24px; line-height:1; }
.bespreekpunten[open] summary::before { transform:rotate(90deg); }
.bespreekpunten summary::-webkit-details-marker { display:none; }
.bespreekpunten summary:hover { background:var(--gold-a10); }
.bespreekpunten [data-bespreek-aantal] { margin-left:auto; color:var(--muted); white-space:nowrap; }
.bespreek-inhoud { padding:0 18px 18px; }
.bespreek-punt { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); }
.bespreek-punt > p { flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.bespreek-vink { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; border:0; background:transparent; color:var(--ink); cursor:pointer; }
.bespreek-vink:hover .box { border-color:var(--gold); }
.bespreek-vink:disabled { opacity:.5; }
.bespreek-form { margin-top:16px; }
.bespreek-form .f { flex-direction:column; align-items:stretch; gap:8px; }
.bespreek-form .fl { width:auto; flex:none; }
.bespreek-form textarea { width:100%; min-width:0; resize:vertical; }
.bespreek-leeg { padding:14px 0; }
.bespreekpunten [hidden] { display:none !important; }
.bespreekpunten [data-bespreek-status]:not(:empty) { margin-top:12px; }
/* Interne begrippenlijst, bescheiden onder Bedrijf en bereikbaar via zoeken. */
.begrippen-inhoud { width:100%; max-width:780px; margin:0 auto; padding:20px; box-sizing:border-box; }
.begrip { border-bottom:1px solid var(--line); scroll-margin-top:16px; }
.begrip[hidden] { display:none; }
.begrip summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; min-height:44px; cursor:pointer; list-style:none; }
.begrip summary::-webkit-details-marker { display:none; }
.begrip summary strong, .begrip summary .mut { display:block; overflow-wrap:anywhere; }
.begrip summary .mut { margin-top:4px; font-size:13px; }
.begrip summary:hover strong, .begrip summary:focus-visible strong { color:var(--gold); }
.begrip-pijl { font-size:26px; flex-shrink:0; }
.begrip[open] .begrip-pijl { transform:rotate(90deg); }
.begrip-uitleg { padding:0 0 20px; line-height:1.65; overflow-wrap:anywhere; }
.begrip-uitleg > p:first-child { margin-top:0; white-space:pre-line; }
.begrip-bron { font-size:12px; }
.begrip-bronnen { padding-left:20px; font-size:13px; }
.begrip-bronnen a { display:inline-block; padding:8px 0; }
/* Alleen een meetvenster; verandert de bestaande schermindeling niet. */
/*
* GEEN INZOOMEN OP DE TELEFOON (Simon, 30-9-2026: "Appelmoes opent te ver
* ingezoomd, en een paar andere velden ook"). Safari op de iPhone zoomt in
* zodra een veld met letters kleiner dan 16 punten de focus krijgt, en blijft
* ingezoomd staan; een scherm dat bij het openen een veld de focus geeft, opent
* dus ingezoomd. De lettermaat van de app is 15 punten, dus elk veld deed dat.
* Op een toestel zonder muis krijgt elk invoerveld daarom minstens 16 punten.
* Een plek voor alle schermen (par. 18.60); de losse 16-punten-regels bij de
* zoekbalk en de krappels blijven, ze zeggen hetzelfde.
*/
@media (max-width: 1023px) and (pointer: coarse) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
font-size: max(1em, 16px);
}
/* Het inleesveld (Aan tafel, inkoop, offertes) zet zelf een kleinere letter via zijn klasse en
won daarmee van de regel hierboven (Simon, 19-10-2026: Aan tafel zoomt in). Element plus
klasse weegt zwaarder dan de klasse alleen. */
input.inlees-veld,
textarea.inlees-veld {
font-size: max(1em, 16px);
}
}
/* Aan tafel (Simon, 30-9-2026): tekst aanklikken om te wijzigen, naar links
* vegen om te verwijderen, en onderaan klein "besproken" met alles wat al eens
* is afgevinkt. */
.bespreek-punt { position: relative; }
.bespreek-punt > p[data-bespreek-tekst-van] { cursor: text; }
.bespreek-bewerk { width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; }
.bespreek-veegmenu { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; background: var(--side); border: 1px solid var(--white-a06); border-radius: 10px; padding: 4px; z-index: 2; }
.bespreek-besproken { margin-top: 14px; }
.bespreek-besproken-knop { font-size: var(--fs-meta); color: var(--muted); letter-spacing: .04em; }
.bespreek-punt-besproken { color: var(--muted); }
.bespreek-besproken-datum { min-width: 72px; font-size: var(--fs-meta); white-space: nowrap; }
/* Prijzen (Simon, 10-10-2026: "overzichtelijker, tarieven onder elkaar"): per groep een kop,
per product een naam en daaronder rijen in één raster; de prijs rechts, de ingevoerde kant
groot en de andere kant er klein onder. Een rij die je kunt wijzigen is een knop. */
.prijs-kop { display:flex; align-items:baseline; justify-content:space-between; gap:4px 12px; flex-wrap:wrap; margin:18px 0 2px; }
.prijs-kop strong { font-size:var(--fs-body, 15px); }
.prijs-kop .mut { font-size:var(--fs-meta); }
.prijs-productnaam { margin:10px 0 0; padding:6px 0 2px; font-size:var(--fs-support); color:var(--muted-2); letter-spacing:.02em; }
.prijs-rij { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:start; width:100%; box-sizing:border-box; padding:7px 0; margin:0; border:0; border-bottom:1px solid var(--line); background:none; font:inherit; font-size:var(--fs-support); color:inherit; text-align:left; }
button.prijs-rij, button.prijs-rij.relatie-veld { cursor:pointer; border-bottom:1px solid var(--line); }
@media (hover: hover) { button.prijs-rij:hover .prijs-naam { color:var(--gold); } }
.prijs-rij .prijs-naam { display:block; min-width:0; }
.prijs-rij .prijs-sub { display:block; font-size:var(--fs-meta); color:var(--muted); margin-top:1px; }
.prijs-bedrag { display:flex; flex-direction:column; align-items:flex-end; text-align:right; white-space:nowrap; }
.prijs-bedrag b { font-weight:600; }
.prijs-bedrag .mut { font-size:var(--fs-meta); }
.prijs-rij > .mut { text-align:right; white-space:normal; max-width:60%; }
.besluit-rij { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:10px; align-items:start; padding:8px 0; border-bottom:1px solid var(--line); }
.besluit-rij > time { font-size:var(--fs-meta); color:var(--muted); white-space:nowrap; padding-top:2px; }
.besluit-rij p { margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.besluit-opmerking { display:block; color:var(--muted); font-size:var(--fs-support); margin-top:2px; text-align:left; }
.besluit-tekst-knop { display:block; width:100%; text-align:left; background:none; border:0; padding:0; margin:0; font:inherit; color:inherit; cursor:text; overflow-wrap:anywhere; white-space:pre-wrap; }
.besluit-datum-knop { font-size:var(--fs-meta); color:var(--muted); padding:2px 0 0; text-decoration:none; }
.besluit-form .f { flex-direction:column; align-items:stretch; gap:8px; }
.besluit-form .fl { width:auto; flex:none; }
.besluit-form textarea, .besluit-form input { width:100%; min-width:0; box-sizing:border-box; }
.besluit-form .besluit-datum { width:auto; }
/* Een regel in een lijst kan ook een link zijn (Contracten op Bedrijf): zelfde rij, geen onderstreping. */
a.item { text-decoration: none; box-sizing: border-box; }
/* Eventpagina (1-10-2026): het vinkje en de rest van de to do-regel zijn twee knoppen. */
.task-rij { cursor: default; }
button.box { padding: 0; font: inherit; }
.task-open { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }