/* Starruk CRM house-style consumers. The host emits the canonical --s-* values from its
registered palette. Public and print documents emit the same source in light mode. */
@font-face {
font-family: "IBM Plex Sans Variable";
font-style: normal;
font-display: swap;
font-weight: 100 700;
src: url("fonts/ibm-plex-sans-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Sans Variable";
font-style: normal;
font-display: swap;
font-weight: 100 700;
src: url("fonts/ibm-plex-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-display: swap;
font-weight: 400;
src: url("fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-display: swap;
font-weight: 600;
src: url("fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--sr-inkt: var(--s-ink-900);
--sr-inkt-zacht: var(--s-muted);
--sr-accent: var(--s-secondary);
--sr-accent-tekst: var(--s-secondary-text);
--sr-papier: var(--s-background);
--sr-papier-2: var(--s-surface-2);
--sr-lijn: var(--s-line-strong);
--sr-lijn-zacht: var(--s-line);
--sr-go: var(--s-success);
--sr-stop: var(--s-error);
--sr-sans: var(--s-font-body);
--sr-mono: var(--s-font-mono);
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
--sr-inkt: var(--s-ink-900);
--sr-inkt-zacht: var(--s-muted);
--sr-accent: var(--s-secondary);
--sr-accent-tekst: var(--s-secondary-text);
--sr-papier: var(--s-background);
--sr-papier-2: var(--s-surface-2);
--sr-lijn: var(--s-line-strong);
--sr-lijn-zacht: var(--s-line);
--sr-go: var(--s-success);
--sr-stop: var(--s-error);
}
* { box-sizing: border-box; }
html { font-kerning: normal; }
body {
margin: 0;
background: var(--sr-papier);
color: var(--sr-inkt);
font-family: var(--sr-sans);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
.sr-wrap { max-width: 1100px; margin: 0 auto; padding-inline: 24px; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: inherit; }
a:focus-visible, button:focus-visible, .knop:focus-visible {
outline: 2px solid var(--sr-accent);
outline-offset: 3px;
}
.mono {
font-family: var(--sr-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
}
.eyebrow {
font-family: var(--sr-mono);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sr-accent-tekst);
margin: 0 0 14px;
}
.tekst-zacht { color: var(--sr-inkt-zacht); }
/* ---------- topbar ---------- */
.sr-topbar {
border-bottom: 2px solid var(--sr-inkt);
background: var(--sr-papier);
}
.sr-topbar .sr-wrap {
display: flex; align-items: center; justify-content: space-between; gap: 20px;
padding-block: 16px;
}
.sr-merk { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--sr-inkt); }
.sr-merk svg { display: block; }
.sr-merk .sr-naam {
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.22em;
}
.sr-label {
border: 1px solid var(--sr-accent-tekst);
color: var(--sr-accent-tekst);
padding: 2px 8px;
font-family: var(--sr-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sr-topnav { display: flex; gap: 26px; flex-wrap: wrap; }
.sr-topnav a {
font-family: var(--sr-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
color: var(--sr-inkt-zacht);
border-bottom: 1px solid transparent;
padding-bottom: 2px;
}
.sr-topnav a:hover { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }
.sr-wie { font-family: var(--sr-mono); color: var(--sr-inkt-zacht); white-space: nowrap; }
/* ---------- kruimelpad ---------- */
/* Vlakke nav (geen ol/li): dezelfde conventie als het portaal — mono,
hoofdletters, losse "·"-tekstnodes tussen de items. */
.sr-kruimelpad {
display: flex; flex-wrap: wrap; gap: 10px;
margin: 0 0 28px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--sr-inkt-zacht);
}
.sr-kruimelpad a { color: var(--sr-inkt-zacht); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.sr-kruimelpad a:hover { color: var(--sr-accent); border-bottom-color: var(--sr-accent); }
.sr-kruimelpad [aria-current="page"] { color: var(--sr-inkt); }
/* ---------- meldingen (PRG) ---------- */
.melding { border: 1.5px solid var(--sr-go); color: var(--sr-go); padding: 10px 14px; margin: 0 0 20px; }
.melding-fout { border-color: var(--sr-stop); color: var(--sr-stop); }
.rolchips { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
/* ---------- publieke /p/-pagina's (eigen lay-out, geen CRM-navigatie) ---------- */
.publiek-kop { border-bottom: 2px solid var(--sr-inkt); }
.publiek-kop .sr-wrap { padding-top: 18px; padding-bottom: 14px; }
.publiek-woordmerk { font-weight: 700; letter-spacing: 0.22em; font-size: 1rem; color: var(--sr-inkt); }
/* Beeldmerk naast het woordmerk: het monogram uit _BrandMark.cshtml, dat zijn kleur uit
currentColor haalt en dus vanzelf de inkt van de kop draagt. */
.publiek-merk { display: flex; align-items: center; gap: 10px; }
.publiek-beeldmerk { flex: none; display: block; width: 26px; height: 26px; }
.publiek-main { padding: 26px 0 60px; }
.publiek-voet { border-top: 1px solid var(--sr-lijn-zacht); padding: 14px 0 40px; }
.publiek-voet p { font-size: 0.72rem; color: var(--sr-inkt-zacht); }
/* ---------- mailvoorbeeld (conceptpagina) ---------- */
.mailvoorbeeld { width: 100%; height: 540px; border: 1px solid var(--sr-lijn); background: #fff; }
/* ---------- knoppen ---------- */
.knop {
font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.12em;
text-transform: uppercase; text-decoration: none; cursor: pointer;
color: var(--sr-inkt); background: transparent;
border: 1.5px solid var(--sr-inkt); padding: 9px 16px; justify-self: start;
display: inline-block;
}
.knop:hover { background: var(--sr-inkt); color: var(--sr-papier); }
.knop-accent { border-color: var(--sr-accent-tekst); color: var(--sr-accent-tekst); }
.knop-accent:hover { background: var(--sr-accent); border-color: var(--sr-accent); color: #fff; }
.knop.klein { padding: 4px 10px; font-size: 0.68rem; }
.knopregel { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 18px 0; }
/* ---------- tabellen ---------- */
table.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
font-family: var(--sr-mono); font-size: 0.68rem; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--sr-inkt-zacht); text-align: left;
border-bottom: 2px solid var(--sr-inkt); padding: 8px 10px 6px;
}
.tabel td { border-bottom: 1px solid var(--sr-lijn-zacht); padding: 9px 10px; vertical-align: top; }
.tabel td.mono { color: var(--sr-inkt-zacht); }
/* ---------- formulierstijl ---------- */
form.formulier { display: grid; gap: 14px; max-width: 640px; }
.formulier label {
font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--sr-inkt-zacht); display: grid; gap: 6px;
}
.formulier label.vlag {
display: flex; gap: 10px; align-items: baseline; text-transform: none; letter-spacing: 0;
font-family: var(--sr-sans); font-size: 1rem; color: var(--sr-inkt);
}
.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"],
.formulier input[type="password"],
.formulier textarea,
.formulier select {
font: inherit; color: var(--sr-inkt); background: var(--sr-papier);
border: 1.5px solid var(--sr-lijn); padding: 10px 12px; width: 100%;
}
.formulier textarea { min-height: 140px; font-family: var(--sr-mono); font-size: 0.85rem; line-height: 1.6; }
.formulier textarea.kort { min-height: 90px; }
.formulier fieldset { border: 1.5px solid var(--sr-lijn); padding: 12px 16px; }
.formulier legend {
font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sr-inkt-zacht);
}
.zoekveld { font: inherit; color: var(--sr-inkt); background: var(--sr-papier); border: 1.5px solid var(--sr-lijn); padding: 7px 11px; }
/* ---------- panelen & secties ---------- */
.sectie { margin-top: 48px; }
.sectie > h2 { border-bottom: 2px solid var(--sr-inkt); padding-bottom: 6px; font-size: 1.15rem; }
details.paneel { border: 1.5px solid var(--sr-lijn); background: var(--sr-papier-2); padding: 12px 16px; margin-top: 14px; }
details.paneel summary {
cursor: pointer; font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em;
text-transform: uppercase; color: var(--sr-inkt-zacht);
}
details.paneel[open] summary { margin-bottom: 12px; }
/* ---------- logboek / notities ---------- */
.reactie { border-top: 1px solid var(--sr-lijn); padding: 16px 0; }
.reactie .kop { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.reactie .kop strong { font-size: 0.95rem; }
/* ---------- gerenderde markdown ----------
Alles wat door SafeMarkdown gaat, landt in .document-inhoud: ticketbodies, comments,
acceptatiebewijs, documenten, notities.
De blokmarges hieronder staan er niet voor de sier. MudBlazor levert een universele reset
— `* { box-sizing: border-box; margin: 0; padding: 0; border-width: 0 }` — die élk element in
de app raakt, dus ook de ,
en die Markdig hier neerzet. Zonder tegenregels valt
alle blokwitruimte weg: een alinea-einde wordt onzichtbaar, een opsomming verliest zijn
inspringing én zijn opsommingstekens (padding-left 0 knijpt de markers buiten beeld), en een
kop plakt tegen de tekst eronder. Wat de schrijver structuur gaf, leest dan als één muur.
Daarom herstelt dit blok expliciet wat de reset weghaalt — alleen binnen gerenderde markdown,
zodat de reset overal elders gewoon zijn werk blijft doen. */
.document-inhoud { max-width: 72ch; }
.document-inhoud > :first-child { margin-top: 0; }
.document-inhoud > :last-child { margin-bottom: 0; }
/* SRK-461: het meegestuurde platformbericht op de publieke factuurpagina — een rustig blok onder
de factuurgegevens, gescheiden met één lijn in de huisstijl. Alleen tokens, geen eigen kleuren. */
.factuur-publiek-bericht { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--sr-lijn); }
.factuur-publiek-bericht h2 { font-size: 1.1rem; margin: 0 0 12px; }
/* SRK-494: de urenspecificatie op de publieke factuurpagina — het spiegelbeeld van de
specificatiepagina in de PDF. Per factuurregel een tussenkop, daaronder de boekingen als
tabel.tabel (die bestond al), en het regeltotaal met dezelfde rustige lijn erboven als het
platformbericht. Alleen tokens, geen eigen kleuren. */
.factuur-publiek-specificatie { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--sr-lijn); }
.factuur-publiek-specificatie h2 { font-size: 1.1rem; margin: 0 0 12px; }
.factuur-publiek-specificatie h3 { font-size: 0.95rem; color: var(--sr-inkt); margin: 16px 0 6px; }
.factuur-publiek-specificatie table.tabel { margin: 0 0 8px; }
.factuur-publiek-uren { text-align: right; white-space: nowrap; }
.factuur-publiek-specificatie-totaal th,
.factuur-publiek-specificatie-totaal td { border-top: 1px solid var(--sr-lijn);
font-weight: 600; color: var(--sr-inkt); border-bottom: 0; }
.document-inhoud p { margin: 0 0 0.95em; }
.document-inhoud ul, .document-inhoud ol { margin: 0 0 0.95em; padding-left: 1.5em; }
.document-inhoud li { margin: 0 0 0.3em; }
/* Een geneste lijst hoort bij zijn ouder-item, niet als losse alinea eronder. */
.document-inhoud li > ul, .document-inhoud li > ol { margin: 0.3em 0 0; }
.document-inhoud h1, .document-inhoud h2, .document-inhoud h3,
.document-inhoud h4, .document-inhoud h5, .document-inhoud h6 { margin: 1.5em 0 0.5em; line-height: 1.25; }
.document-inhoud h1 { font-size: 1.9rem; line-height: 1.2; }
.document-inhoud h2 { margin-top: 1.4em; }
.document-inhoud pre { margin: 0 0 0.95em; padding: 12px 14px; overflow-x: auto; background: var(--sr-papier-2); color: var(--sr-inkt); }
.document-inhoud hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--sr-lijn); }
.document-inhoud table { border-collapse: collapse; margin: 0 0 0.95em; }
.document-inhoud th, .document-inhoud td { border: 1px solid var(--sr-lijn); padding: 6px 10px; }
.document-inhoud blockquote { border-left: 3px solid var(--sr-accent); margin: 0 0 0.95em; padding-left: 16px; color: var(--sr-inkt-zacht); }
.document-inhoud code { font-family: var(--sr-mono); font-size: 0.85em; background: var(--sr-papier-2); color: var(--sr-inkt); padding: 1px 5px; }
/* Een codeblok draagt zijn eigen kader al; de erbinnen hoeft geen tweede achtergrond. */
.document-inhoud pre code { background: none; padding: 0; }
.metaregel { color: var(--sr-inkt-zacht); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 6px 0 24px; }
/* ---------- grootboek (ledger) — klaar voor F2, leeg tot dan ---------- */
.grootboek-kop {
display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
font-family: var(--sr-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase;
color: var(--sr-inkt-zacht); border-top: 1px solid var(--sr-lijn); padding-top: 16px; margin-bottom: 12px;
}
.grootboek { border: 1px solid var(--sr-lijn); font-variant-numeric: tabular-nums; }
.gb-rij {
display: grid; grid-template-columns: 122px 76px 1fr auto; gap: 16px; align-items: center;
padding: 9px 14px; border-bottom: 1px solid var(--sr-lijn); font-family: var(--sr-mono); font-size: 0.76rem;
}
.gb-rij:last-child { border-bottom: none; }
.gb-rij .t { color: var(--sr-inkt-zacht); white-space: nowrap; }
.gb-rij .h { color: var(--sr-accent-tekst); }
.gb-rij .m { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status {
justify-self: end; font-size: 0.6rem; letter-spacing: 0.09em; padding: 2px 9px;
border: 1px solid currentColor; white-space: nowrap;
}
.status.pass { color: var(--sr-go); }
.status.gate { color: var(--sr-inkt-zacht); }
.status.fix { color: var(--sr-stop); }
.status.ship { color: var(--sr-accent-tekst); }
@media (max-width: 680px) {
.gb-rij { grid-template-columns: 1fr auto; }
.gb-rij .t, .gb-rij .h { display: none; }
}
/* ---------- hoofdstuk / dashboard ---------- */
.hoofd-main { padding: clamp(36px, 6vw, 64px) 0 72px; }
.hoofd-main .sr-wrap { max-width: 880px; }
.hoofd-voet { border-top: 2px solid var(--sr-inkt); padding: 18px 0 32px; }
.hoofd-voet .sr-wrap { max-width: 880px; }
.hoofd-voet p { margin: 0; color: var(--sr-inkt-zacht); }
/* ---------- documentopmaak (CRM-23) ----------
Port van de aanbod-opmaak (starruk-site/src/pages/aanbod/index.astro,
commit b23bbc9; levend in vennoot/vergoedingsmodel.astro) naar de markdown-
HTML van het bevroren documentpatroon (docs/document-patroon.md §3): omdat
het patroon de vorm vastlegt (H1 → doelregel-p → disclaimer-quote → hr →
## N.-secties) volstaan elementselectors — geen classes in de inhoud, geen
renderer-wijziging. Afwijking van de Astro-bron, conform de PDF-referentie:
de 3px inktlijn hoort bij de H1 (titel), niet onder het hele kopblok. */
.document-opmaak h1 {
font-size: clamp(1.7rem, 4.5vw, 2.4rem);
line-height: 1.12;
letter-spacing: -0.012em;
margin: 0 0 0.55em;
padding-bottom: 16px;
border-bottom: 3px solid var(--sr-inkt);
}
.document-opmaak h1 + p { font-size: 1.08rem; max-width: 60ch; }
.document-opmaak blockquote {
border-left: 3px solid var(--sr-lijn);
margin-left: 0;
padding-left: 14px;
font-size: 0.92rem;
color: var(--sr-inkt-zacht);
}
.document-opmaak hr { border: none; border-top: 1px solid var(--sr-lijn); margin: 34px 0 0; }
.document-opmaak h2 {
font-size: 1.4rem;
line-height: 1.2;
letter-spacing: -0.008em;
margin: 44px 0 14px;
padding-top: 16px;
border-top: 1px solid var(--sr-lijn);
}
.document-opmaak h3 { font-size: 1.02rem; margin: 26px 0 8px; }
.document-opmaak ol, .document-opmaak ul { padding-left: 20px; margin: 0 0 16px; }
.document-opmaak li { margin-bottom: 8px; }
.document-opmaak li::marker { color: var(--sr-accent-tekst); font-weight: 600; }
.document-opmaak table {
border-collapse: collapse;
width: 100%;
font-size: 0.92rem;
background: var(--sr-papier-2);
border: 1px solid var(--sr-lijn);
margin: 16px 0 18px;
}
.document-opmaak th {
text-align: left;
font-family: var(--sr-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--sr-inkt-zacht);
padding: 12px 14px 8px;
border: none;
border-bottom: 2px solid var(--sr-inkt);
vertical-align: bottom;
}
.document-opmaak td {
padding: 10px 14px;
border: none;
border-bottom: 1px solid var(--sr-lijn-zacht);
vertical-align: top;
font-variant-numeric: tabular-nums;
color: var(--sr-inkt);
}
.document-opmaak tr:last-child td { border-bottom: none; }
.document-opmaak code { font-family: var(--sr-mono); font-size: 0.85em; background: var(--sr-papier-2); color: var(--sr-inkt); padding: 1px 5px; }
/* ---------- document sheet (CRM-23) ----------
The public/print document root supplies the canonical light theme with data-theme="light".
This class paints that paper; it does not switch a dark app subtree to light. */
.blad-licht {
color-scheme: only light;
background: var(--sr-papier);
color: var(--sr-inkt);
}
.document-blad { max-width: 72ch; margin: 0 auto; padding: clamp(28px, 5vw, 56px) 24px 64px; }
.document-blad .blad-kicker { margin: 0 0 20px; }
.blad-voet {
margin-top: 48px;
border-top: 3px solid var(--sr-inkt);
padding-top: 18px;
font-family: var(--sr-mono);
font-size: 0.8rem;
color: var(--sr-inkt-zacht);
}
.blad-voet p { margin: 0 0 4px; }
.blad-acties {
max-width: 72ch;
margin: 16px auto 0;
padding: 0 24px;
color: var(--sr-inkt-zacht);
}
.blad-acties a { color: inherit; }
@page { size: A4; margin: 18mm 16mm; }
@media print {
.blad-acties { display: none; }
.document-blad {
max-width: none;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.document-opmaak h2, .document-opmaak h3 { break-after: avoid; }
.document-opmaak table, .document-opmaak blockquote { break-inside: avoid; }
}
/* ---------- publieke boekingspagina (SRK-345, /p/boek/{token}) ---------- */
/* Uitsluitend --sr-tokens: de publieke laag laadt app.css niet, dus de w- en d-tokens van de
Werkdag-huid bestaan hier niet. Geen enkele letterlijke kleurwaarde. */
.boek-kop { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.boek-lead { max-width: 62ch; margin: 0 0 14px; }
.boek-form { display: block; }
.boek-weekbalk {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin: 22px 0 12px;
}
.boek-weeklabel { font-weight: 600; }
.boek-zone { margin-left: auto; }
.boek-uit { opacity: 0.35; }
/* Kolommen van een vaste breedte, links uitgelijnd: een week met twee resterende dagen mag
niet twee halve schermbreedtes aan tijdknoppen worden. */
.boek-dagen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 210px));
justify-content: start;
gap: 10px;
}
.boek-dag {
min-width: 0;
border: 1px solid var(--sr-lijn);
background: var(--sr-papier-2);
padding: 12px;
}
.boek-dagkop { margin-bottom: 8px; }
.boek-dagkop b { font-size: 0.9rem; }
.boek-dagkop small { display: block; color: var(--sr-inkt-zacht); }
.boek-slot {
display: block; width: 100%;
font: inherit; font-size: 0.9rem;
font-variant-numeric: tabular-nums;
text-align: center; cursor: pointer;
color: var(--sr-inkt); background: var(--sr-papier);
border: 1.5px solid var(--sr-lijn); padding: 9px 10px; margin-bottom: 6px;
}
.boek-slot:hover { border-color: var(--sr-accent-tekst); }
.boek-slot-gekozen {
background: var(--sr-inkt); color: var(--sr-papier); border-color: var(--sr-inkt);
}
.boek-slot-leeg {
cursor: default; border-style: dashed; color: var(--sr-inkt-zacht); opacity: 0.7;
}
.boek-slot-leeg:hover { border-color: var(--sr-lijn); }
.boek-kaart {
border: 1.5px solid var(--sr-lijn);
background: var(--sr-papier-2);
padding: 16px;
margin-top: 22px;
display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; align-items: end;
}
.boek-kaart > label {
font-family: var(--sr-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--sr-inkt-zacht); display: grid; gap: 6px;
}
.boek-kaart input, .boek-kaart textarea {
font: inherit; color: var(--sr-inkt); background: var(--sr-papier);
border: 1.5px solid var(--sr-lijn); padding: 10px 12px; width: 100%;
}
.boek-kaart textarea.kort { min-height: 64px; font-family: var(--sr-sans); font-size: 1rem; }
.boek-gekozen, .boek-breed, .boek-bevestig { grid-column: 1 / -1; }
.boek-gekozen { margin: 0; }
.boek-bevestig { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.boek-voet { margin-top: 22px; }
/* Keep the whole working week on one row when the page has desktop space. */
@media (min-width: 1100px) {
.boek-dagen { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* Onder 640 px wordt het dagraster één kolom en staat het formulier onder elkaar —
geen horizontale scroll op 390 px. */
@media (max-width: 640px) {
.boek-dagen { grid-template-columns: 1fr; justify-content: stretch; }
.boek-kaart { grid-template-columns: 1fr; }
.boek-zone { margin-left: 0; flex-basis: 100%; }
}