/*!****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Inter","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-inter","preload":false}],"variableName":"inter"} ***!
  \****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/ba9851c3c22cd980-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/21350d82a1f187e9-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/c5fe6dc8356a8c31-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/19cfc7226ec3afaa-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/df0a9ae256c0569c-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/8e9860b6e62d6359-s.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;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/e4af272ccee01ff0-s.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: 'Inter Fallback';src: local("Arial");ascent-override: 90.44%;descent-override: 22.52%;line-gap-override: 0.00%;size-adjust: 107.12%
}.__className_8a0ba0 {font-family: 'Inter', 'Inter Fallback';font-style: normal
}.__variable_8a0ba0 {--preview-inter: 'Inter', 'Inter Fallback'
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Cormorant_Garamond","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-cormorant","preload":false}],"variableName":"cormorantGaramond"} ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/393d45a2251e223a-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/8715d2ed531152f4-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/c48b38fe8bb532f3-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/48410f3df60da620-s.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;
}
/* latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/7b89a4fd5e90ede0-s.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: 'Cormorant Garamond Fallback';src: local("Times New Roman");ascent-override: 95.27%;descent-override: 29.59%;line-gap-override: 0.00%;size-adjust: 96.98%
}.__className_d6496e {font-family: 'Cormorant Garamond', 'Cormorant Garamond Fallback';font-style: normal
}.__variable_d6496e {--preview-cormorant: 'Cormorant Garamond', 'Cormorant Garamond Fallback'
}

/*!**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Manrope","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-manrope","preload":false}],"variableName":"manrope"} ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/438aa629764e75f3-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/875ae681bfde4580-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/51251f8b9793cdb3-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/e857b654a2caa584-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/cc978ac5ee68c2b6-s.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;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/4c9affa5bc8f420e-s.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: 'Manrope Fallback';src: local("Arial");ascent-override: 103.31%;descent-override: 29.07%;line-gap-override: 0.00%;size-adjust: 103.19%
}.__className_bc8a98 {font-family: 'Manrope', 'Manrope Fallback';font-style: normal
}.__variable_bc8a98 {--preview-manrope: 'Manrope', 'Manrope Fallback'
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Source_Serif_4","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-source-serif","preload":false}],"variableName":"sourceSerif"} ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/3d165c286d94e27c-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/e54d16b9f2c4535b-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/7c21074d9bafed1b-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/916860560b9a2bc2-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/591e43f23f51e5a5-s.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;
}
/* latin */
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/97ac91773d3121b2-s.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: 'Source Serif 4 Fallback';src: local("Times New Roman");ascent-override: 87.87%;descent-override: 28.41%;line-gap-override: 0.00%;size-adjust: 117.91%
}.__className_13486b {font-family: 'Source Serif 4', 'Source Serif 4 Fallback';font-style: normal
}.__variable_13486b {--preview-source-serif: 'Source Serif 4', 'Source Serif 4 Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Source_Sans_3","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-source-sans","preload":false}],"variableName":"sourceSans"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/88da59c891d37117-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/1e377d93cbdd6b44-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/36d711d427a06e51-s.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/f1f7cdf240180e28-s.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/55fbdf033607a0e1-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/b6a6f0b43d027304-s.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;
}
/* latin */
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url(assets/9cf9c6e84ed13b5e-s.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: 'Source Sans 3 Fallback';src: local("Arial");ascent-override: 109.21%;descent-override: 42.66%;line-gap-override: 0.00%;size-adjust: 93.76%
}.__className_fefd96 {font-family: 'Source Sans 3', 'Source Sans 3 Fallback';font-style: normal
}.__variable_fefd96 {--preview-source-sans: 'Source Sans 3', 'Source Sans 3 Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Barlow","arguments":[{"subsets":["latin"],"display":"swap","weight":["400","600","700"],"variable":"--preview-barlow","preload":false}],"variableName":"barlow"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/88e4012f2051f8b4-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/0be08cad6fae8421-s.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/61d96c4884191721-s.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/7816b93d847886e9-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/ea06843a6d8e9ab3-s.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(assets/60c9b95e8d9e49be-s.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/1e6ec62843814326-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/a8bcd0492b5976ee-s.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;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/6ad0344ed98ac2e9-s.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: 'Barlow Fallback';src: local("Arial");ascent-override: 103.43%;descent-override: 20.69%;line-gap-override: 0.00%;size-adjust: 96.68%
}.__className_997f3a {font-family: 'Barlow', 'Barlow Fallback';font-style: normal
}.__variable_997f3a {--preview-barlow: 'Barlow', 'Barlow Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Barlow_Condensed","arguments":[{"subsets":["latin"],"display":"swap","weight":["700","800"],"variable":"--preview-barlow-condensed","preload":false}],"variableName":"barlowCondensed"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/8599be8653318abe-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/3352fdb488e19d84-s.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/437e5f23c97e320c-s.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;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/bd4099f982a70777-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/adc67d25e358ad72-s.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;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(assets/79f0f365efbf4f90-s.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: 'Barlow Condensed Fallback';src: local("Arial");ascent-override: 130.73%;descent-override: 26.15%;line-gap-override: 0.00%;size-adjust: 76.49%
}.__className_74eca8 {font-family: 'Barlow Condensed', 'Barlow Condensed Fallback';font-style: normal
}.__variable_74eca8 {--preview-barlow-condensed: 'Barlow Condensed', 'Barlow Condensed Fallback'
}

/*!***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\fonts.ts","import":"Space_Grotesk","arguments":[{"subsets":["latin"],"display":"swap","variable":"--preview-space-grotesk","preload":false}],"variableName":"spaceGrotesk"} ***!
  \***************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/e1aab0933260df4d-s.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/b7387a63dd068245-s.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;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(assets/36966cca54120369-s.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: 'Space Grotesk Fallback';src: local("Arial");ascent-override: 89.71%;descent-override: 26.62%;line-gap-override: 0.00%;size-adjust: 109.69%
}.__className_c24635 {font-family: 'Space Grotesk', 'Space Grotesk Fallback';font-style: normal
}.__variable_c24635 {--preview-space-grotesk: 'Space Grotesk', 'Space Grotesk Fallback'
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"app\\(preview)\\promo-font.ts","import":"Caveat","arguments":[{"subsets":["latin"],"display":"swap","variable":"--promo-handschrift","preload":true}],"variableName":"flyerHandschrift"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* cyrillic-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/e44cdba7d0878bc5-s.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/07fccecd6728972a-s.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/486fce9f36bc8f45-s.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;
}
/* latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/46bdd75a3ff56824-s.p.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: 'Caveat Fallback';src: local("Arial");ascent-override: 124.77%;descent-override: 38.99%;line-gap-override: 0.00%;size-adjust: 76.94%
}.__className_97f5e1 {font-family: 'Caveat', 'Caveat Fallback';font-style: normal
}.__variable_97f5e1 {--promo-handschrift: 'Caveat', 'Caveat Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/(preview)/preview.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   Basislaag van de voorbeeldwebsites.

   Volledig los van `app/globals.css`: geen Tailwind, geen dashboardtokens, geen
   donker thema. Wat hier staat is het minimum dat elke pagina nodig heeft — de
   rest komt uit het sjabloon (`templates/site/site.module.css`) en het
   branchepalet.

   Deze laag wordt alleen geladen binnen de route group `(preview)`.
   ============================================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  /* Wit als bodemkleur; het sjabloon zet zijn eigen paletkleur eroverheen. Wat
     hier níet mag staan is een dashboardkleur — een preview die per ongeluk op
     een donkere ondergrond valt, ziet eruit als een fout. */
  background: #ffffff;
  color: #111111;
  /* Inter als bodemletter: dit is de laag óm de voorbeeldsite heen (het
     stalenboek, een 404). Het sjabloon zet zijn eigen `--font-ui` eroverheen,
     afgeleid uit de branche. */
  font-family: var(--preview-inter), 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

/* Respecteer de systeeminstelling voor minder beweging. Het sjabloon animeert
   niets, maar een latere toevoeging mag dat niet stilzwijgend negeren. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Papier: geen achtergrondkleuren wegdrukken, marges van de browser gebruiken. */
@media print {
  body {
    background: #ffffff;
  }
}


/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./templates/site/site.module.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* =============================================================================
   Sjabloon voor gegenereerde voorbeeldwebsites.

   Volledig zelfstandig: geen enkele klasse, kleur of variabele van het
   dashboard. Alle kleuren komen als CSS-variabele binnen vanuit het
   branchepalet, alle lettertypes en kopgewichten als variabele vanuit het
   typografiecluster, en alle vormen via `data-vorm`. Zo levert één stylesheet
   vijfentwintig verschillende sites op — en blijft een verbetering aan
   bijvoorbeeld de hero één plek.

   Er staat hier geen enkele branche- of clusternaam. Een nieuw lettertypepaar
   toevoegen gebeurt volledig in `core/design/typografie.ts`; dit bestand ziet
   alleen `--font-display`, `--font-ui` en de bijbehorende gewichten.

   Er staat bewust ook een kleine reset in: dit sjabloon wordt óók gerenderd in
   de browser-mockup op het dashboard, waar een heel andere basisopmaak geldt.
   Zonder reset zou dezelfde site daar anders ogen dan op de echte pagina.
   ============================================================================= */

.site_site__SreoX {
  --radius: 12px;
  /* Eén vorm voor élke knop op élke site; zie de toelichting bij `data-vorm`. */
  --radius-knop: 999px;
  /* 80rem en niet 68rem. De kopbalk draagt naast de bedrijfsnaam ook vijf
     navigatie-items, een telefoonpil en de CTA-knop; op 68rem stonden die op een
     breed scherm samengeperst in het midden met brede lege stroken ernaast. De
     lopende tekst wordt hier niet breder van — die is apart begrensd op
     `--maxregel`. */
  --maxbreedte: 80rem;
  /* De verticale ruimte per sectie, boven én onder — twee secties naast elkaar
     leveren dus het dubbele op.

     Stond op `clamp(3rem, 7vw, 5.5rem)`, wat op een breed scherm 88px werd en
     dus 176px tussen twee blokken. Bij een korte sectie als "over ons" was
     daarmee 42% van de hoogte leeg, en dan valt de pagina uit elkaar in losse
     eilandjes in plaats van door te lopen.

     De ondergrens is met opzet niet aangeraakt: op een telefoon blijft het
     3rem, en daar klopte het ritme al. Alleen de bovengrens en de groeifactor
     zijn kleiner, dus het verschil zit precies waar het probleem zat. */
  --ruimte-sectie: clamp(3rem, 4.6vw, 4rem);

  /* Standaardwaarden voor het geval het sjabloon zonder ontwerp gerenderd wordt
     (bijvoorbeeld in een losse test-render). In de app zet `SiteTemplate` deze
     allemaal inline, afgeleid uit het typografiecluster van de branche. */
  --font-ui: var(--preview-inter, 'Helvetica Neue', Arial, sans-serif);
  --font-display: var(--font-ui);
  --gewicht-body: 400;
  --gewicht-kop: 700;
  --gewicht-kop-klein: 600;
  --gewicht-cta: 680;
  --kop-spatiering: -0.02em;
  --kop-regelhoogte: 1.05;
  --kop-schaal: 1;
  --maxregel: 68ch;

  /* De kleur van de tekst op de hero-foto, en welke van de twee standen geldt.
     Het sjabloon zet `--op-foto-breed` en `--op-foto-smal` inline; hier valt de
     keuze, want een inline `style` kent geen media query. Zonder sjabloon (een
     losse test-render) blijft het wit — dezelfde stand als voorheen. */
  --op-foto-breed: #ffffff;
  --op-foto-smal: var(--op-foto-breed);
  --op-foto: var(--op-foto-breed);

  /* Idem voor de woorden in de kop die de accentkleur dragen; zie
     `heroAccentkleur()` voor waarom dat niet gewoon `--kleur-accent` is. */
  --op-foto-accent-breed: var(--op-foto-breed);
  --op-foto-accent-smal: var(--op-foto-accent-breed);
  --op-foto-accent: var(--op-foto-accent-breed);

  position: relative;
  min-height: 100%;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  font-family: var(--font-ui);
  /* Ondergrens 16px: kleiner zet mobiele browsers aan het inzoomen zodra een
     bezoeker een veld aanraakt. */
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  font-weight: var(--gewicht-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* De tweede stand van de herotekstkleur, op dezelfde breedte waar de hero zelf
   van vorm verandert (4:5 in plaats van liggend; zie "de hero op een telefoon").
   Dat is met opzet dezelfde grens: de knop bestaat omdát het daar een ander stuk
   foto is, dus hij hoort precies mee te schakelen met dat andere kader. */
@media (max-width: 30rem) {
  .site_site__SreoX {
    --op-foto: var(--op-foto-smal);
    --op-foto-accent: var(--op-foto-accent-smal);
  }
}

.site_site__SreoX *,
.site_site__SreoX *::before,
.site_site__SreoX *::after {
  box-sizing: border-box;
}

.site_site__SreoX h1,
.site_site__SreoX h2,
.site_site__SreoX h3,
.site_site__SreoX p,
.site_site__SreoX ul,
.site_site__SreoX ol,
.site_site__SreoX dl,
.site_site__SreoX dd {
  margin: 0;
}

.site_site__SreoX ul,
.site_site__SreoX ol {
  padding: 0;
  list-style: none;
}

.site_site__SreoX img {
  display: block;
  max-width: 100%;
}

.site_site__SreoX a:focus-visible,
.site_site__SreoX button:focus-visible {
  outline: 3px solid var(--kleur-accent);
  outline-offset: 3px;
}

/* --- leesbaarheid van lopende tekst ---------------------------------------- */

/* 50–75 tekens per regel. Daaronder hakt de tekst in stukjes, daarboven raakt
   het oog de volgende regel kwijt. Alles wat een zin kan bevatten valt hier
   dus onder — inclusief nieuwe alinea's die er later bij komen. */
.site_site__SreoX p,
.site_site__SreoX li {
  max-width: var(--maxregel);
}

/* De uitzonderingen bevatten geen lopende tekst maar een rij knoppen of een
   rastercel; een regellengte betekent daar niets en zou de layout knijpen. */
.site_site__SreoX .site_heroActies__6oo0f,
.site_site__SreoX .site_dienst__zyyLb,
.site_site__SreoX .site_galerijItem__RGtU1,
.site_site__SreoX .site_balkNavLijst__p2zqp {
  max-width: none;
}

/* --- koppen en vormtaal per branche ---------------------------------------- */

/* Alleen waar het onderzoek erom vraagt (de condensed technieklijn); kapitalen
   over de hele breedte lezen aantoonbaar trager. */
.site_site__SreoX[data-kop-kapitalen='ja'] .site_bedrijfsnaam__wh3dC {
  text-transform: uppercase;
}

/* Cijfers met vaste breedte voor prijzen, kentekens en telefoonnummers: die
   worden naast elkaar gelezen en vergeleken, en dan hoort een 1 net zo breed
   te zijn als een 8. */
.site_site__SreoX[data-cijfers='tabellarisch'] .site_heroTelefoonNummer__DKC6g,
.site_site__SreoX[data-cijfers='tabellarisch'] .site_balkActies__tSXWU,
.site_site__SreoX[data-cijfers='tabellarisch'] .site_belknop__7yc1e,
.site_site__SreoX[data-cijfers='tabellarisch'] .site_contactWaarde__ZR21R {
  font-variant-numeric: tabular-nums;
}

/* Ankers uit de navigatiebalk landen onder de sticky balk als er geen
   overgangsruimte staat. Iets ruimer dan de balk hoog is, zodat de kop van de
   sectie niet tegen de onderrand ervan plakt. */
.site_site__SreoX :target {
  scroll-margin-top: 5.5rem;
}

/* Springen scheelt oriëntatie; een animatie ook, maar alleen voor wie daar geen
   last van heeft. */
@media (prefers-reduced-motion: no-preference) {
  .site_site__SreoX {
    scroll-behavior: smooth;
  }
}

/* De vormtaal stuurt de kaarten en de vlakken, maar níét de knoppen.

   Die staan overal op een pil. Dat is een bewuste uitzondering op het
   ontwerpsysteem: een knop is het enige element op de pagina waar de vorm zégt
   dat je erop kunt drukken, en die betekenis hoort niet per branche te
   verschillen. Een knop met een straal van 2px op de ene site en een pil op de
   andere leest als twee verschillende systemen, terwijl het dezelfde bouwer is.

   De vormtaal blijft wél zichtbaar in alles wat een vlak is: kaarten, foto's,
   het formulier en de curve naar de contactsectie. Een garage krijgt dus scherpe
   hoeken mét pilknoppen, en dat is een combinatie die klopt. */
.site_site__SreoX[data-vorm='scherp'] {
  --radius: 0px;
}

.site_site__SreoX[data-vorm='zacht'] {
  --radius: 12px;
}

.site_site__SreoX[data-vorm='rond'] {
  --radius: 18px;
}

/* De vaste belbalk staat onderaan het scherm. De pagina reserveert die hoogte,
   zodat de balk nooit over de laatste regel of over de contactgegevens valt. */
.site_site__SreoX[data-cta='sticky-compact-call'] {
  padding-bottom: 4.5rem;
}

@media (min-width: 46rem) {
  .site_site__SreoX[data-cta='sticky-compact-call'] {
    padding-bottom: 0;
  }
}

/* --- aanbieding-banner ------------------------------------------------------ */

/* Optioneel, en alleen als er ook echt een tekst is ingevuld — zie de
   check-constraint in migratie 0012. Bewust níét sticky en bewust geen
   sluitknop: één regel die je leest en waar je langs scrollt heeft geen van
   beide nodig.

   De banner gebruikt `--kleur-cta` en niet het decoratieve accent: dit is het
   enige element op de pagina dat om aandacht vraagt zonder dat je erop kunt
   klikken, en die combinatie is alleen leesbaar met de kleur waarvan het
   tekstcontrast is nagerekend (`ctaTekst` op `cta`). */
.site_site__SreoX .site_aanbieding__BSiYn {
  max-width: none;
  margin: 0;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--kleur-cta);
  color: var(--kleur-cta-tekst);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
}

/* --- sticky kopbalk -------------------------------------------------------- */

/* De kopbalk staat op de omgekeerde toon.

   Hij stond eerder op `--kleur-achtergrond`, dezelfde kleur als de pagina, en
   dat viel weg tegen de hero eronder — die staat op dezelfde kleur plus 9%
   accent. Twee tinten die een paar procent uit elkaar liggen lezen als één vlak.

   Een sterkere tint zou dat niet oplossen: in de donkere paletten (tattoo,
   creatief·donker) is de luminantiestap tussen 9% en 26% accent verwaarloosbaar,
   dus daar zou de balk nog steeds versmelten. De omgekeerde toon is het enige
   contrast dat élk palet garandeert, in beide richtingen — bij een licht palet
   wordt de balk donker, bij een donker palet juist licht. Zie `sectietonen()`.

   Bijkomend voordeel: de pagina krijgt er een boekensteun van. De balk bovenaan
   en de contactsectie onderaan staan in dezelfde toon, met alles ertussen in de
   lichte kant van het palet.

   `sticky` en niet `fixed`: de balk houdt zijn eigen ruimte in het document en
   kan daardoor per definitie geen inhoud afdekken. */
.site_balk__5qOTR {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: var(--vlak-basis);
  color: var(--op-vlak);
}

/* De lichte balk: op de paginakleur in plaats van omgekeerd.

   Dit was de zwaarste kleur op de pagina. De achtergronden zijn licht, maar de
   balk en de hero eronder staan allebei op `tekst` en vullen samen het hele
   eerste scherm — precies het stuk dat op de flyer komt. Een palet mag daarom
   kiezen (`Palet.balkToon`); alles wat niets kiest blijft omgekeerd.

   De haarlijn is hier geen decoratie maar de scheiding: zonder rand verdwijnt
   een meeschuivende balk in een sectie van dezelfde kleur zodra je scrollt. */
.site_balk__5qOTR[data-toon='licht'] {
  border-bottom: 1px solid var(--kleur-rand);
}

.site_balkBinnen___rfYl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.5rem);
  max-width: var(--maxbreedte);
  margin: 0 auto;
}

/* De merkgerichte kopbalk: beeldmerk en naam in het midden, navigatie links,
   knoppen rechts.

   Een raster van drie gelijke buitenkolommen en een middenkolom op zijn eigen
   breedte. Dat is wat het merkblok écht midden op de balk zet — met `flex` en
   `space-between` zou het naar de kant schuiven zodra de navigatie en de knoppen
   niet toevallig even breed zijn.

   De volgorde in de HTML blijft merk, navigatie, knoppen: dat is de volgorde
   waarin je ze wilt horen en waarin je er met de tab-toets langs gaat. Alleen
   wat je ziet verschuift.

   Elk blok wijst zijn kolom expliciet aan, en dat is geen omslachtigheid maar
   een reparatie. Met `order` regelt het raster de plaatsing zelf, en onder de
   62rem — waar de navigatie verdwijnt — zijn er nog maar twee blokken over:
   die schoven dan naar kolom 1 en 2, waarna het beeldmerk tot vijf pixels werd
   platgedrukt door de knoppen ernaast.

   Pas vanaf 40rem, en dat is geen luiheid maar meetkunde: op een telefoon van
   390px staan het telefoonnummer en de afspraakknop samen al bijna over de volle
   breedte. Wat er dan overblijft voor een gecentreerd merkblok is tien pixels,
   en een logo van tien pixels is geen logo. Daaronder blijft de balk dus links
   uitgelijnd — precies wat vrijwel elke echte site op een telefoon doet. */
@media (min-width: 40rem) {
  .site_balk__5qOTR[data-merk='midden'] .site_balkBinnen___rfYl {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .site_balk__5qOTR[data-merk='midden'] .site_balkMerk__rL1uo {
    grid-column: 2;
    justify-content: center;
  }

  .site_balk__5qOTR[data-merk='midden'] .site_balkNav__NqYnb {
    grid-column: 1;
  }

  .site_balk__5qOTR[data-merk='midden'] .site_balkActies__tSXWU {
    grid-column: 3;
    justify-content: flex-end;
  }
}

/* Beeldmerk plus naam. Het logo is bewust klein: het is een herkenningsteken,
   geen sectie. Een bedrijf dat zijn logo als "foto" in Google heeft gezet krijgt
   het hier terug op de enige plek waar het thuishoort. */
/* Zodra er meer dan één pagina is, is dit blok een link naar de homepage. Dat
   mag niet te zien zijn: een onderstreepte bedrijfsnaam in de balk leest als een
   menu-item, terwijl het het merk is. De onderstreping komt bij hover. */
.site_balkMerk__rL1uo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

a.site_balkMerk__rL1uo:hover .site_balkNaam__q_2Ez,
a.site_balkMerk__rL1uo:focus-visible .site_balkNaam__q_2Ez {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* De basismaat, keer de factor uit `logoGrootte`. `--merk-schaal` staat op 1
   wanneer er niets gekozen is, dus dit is precies de 2rem van hiervoor. */
.site_balkLogo__mWvxV {
  width: calc(2rem * var(--merk-schaal, 1));
  height: calc(2rem * var(--merk-schaal, 1));
  /* `contain` en niet `cover`: een logo bijsnijden is een logo kapotmaken. */
  -o-object-fit: contain;
     object-fit: contain;
  flex-shrink: 0;
}

.site_balkNaam__q_2Ez {
  font-family: var(--font-display);
  font-size: calc(1.05rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop-klein);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- navigatie in de kopbalk ------------------------------------------------- */

/* De items komen uit de secties die er écht staan; zie `navItems` in het
   sjabloon. Daardoor leest een pedicure "Behandelingen · Resultaten · Over ons"
   en een bakker "Assortiment · Sfeer · Over ons", zonder dat hier één branche
   genoemd wordt.

   Onder 62rem verdwijnt de navigatie uit de balk. Dat is geen verlies: vijf
   items passen daar niet naast een naam en twee knoppen, en een pagina van deze
   lengte scroll je op een telefoon sneller dan dat je een menu opent. Wat er wél
   blijft staan zijn de twee dingen waarvoor je op een telefoon komt — het
   nummer en de knop. */
.site_balkNav__NqYnb {
  display: none;
  min-width: 0;
  /* De vangrail. De links staan op `white-space: nowrap` en `.balkActies` heeft
     `flex-shrink: 0`, dus zonder dit schuift een te lange lijst gewoon óver het
     telefoonnummer heen in plaats van te krimpen. Afgeknipt is lelijk, over de
     knop heen is kapot. */
  overflow: hidden;
}

@media (min-width: 62rem) {
  .site_balkNav__NqYnb {
    display: block;
  }
}

/* Zes items of meer hebben meer dan 62rem nodig.

   Een media query kan niet tellen, dus het sjabloon zet het aantal als
   `data-nav-items` op de balk. Sinds de salonfamilie kan de balk zes items
   dragen (Behandelingen, Tarieven, Producten, Resultaten, Over ons, Contact) en
   bij 62rem paste dat niet: de laatste link viel over de belknop.

   Wegvallen en niet afknippen. Een half woord in een balk leest als een fout;
   een pagina van deze lengte scroll je sneller dan dat je een menu zoekt, en de
   twee dingen waarvoor je komt — het nummer en de knop — blijven staan. */
@media (max-width: 75.999rem) {
  .site_balk__5qOTR[data-nav-items='6'] .site_balkNav__NqYnb,
  .site_balk__5qOTR[data-nav-items='7'] .site_balkNav__NqYnb,
  .site_balk__5qOTR[data-nav-items='8'] .site_balkNav__NqYnb {
    display: none;
  }
}

.site_balkNavLijst__p2zqp {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

/* Gewicht 600 en de volle tekstkleur: dit is navigatie, geen bijschrift. De
   onderstreping komt pas bij hover en focus, zodat de balk in rust rustig blijft
   maar er nooit twijfel is of het aanklikbaar is. */
.site_balkNavLink__DtEw_ {
  display: block;
  padding: 0.35rem 0;
  color: var(--op-vlak);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.site_balkNavLink__DtEw_:hover,
.site_balkNavLink__DtEw_:focus-visible {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

.site_balkActies__tSXWU {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* --- het menu voor smalle schermen -------------------------------------------- */

/* Drie streepjes rechtsboven, met daarachter dezelfde items als de balk.

   Dit is de opvolger van "de navigatie valt gewoon weg". Dat kon zolang de
   pagina één vel was: alles stond eronder, dus scrollen was sneller dan een menu
   openen. Sinds tarieven en producten eigen pagina's zijn, klopt dat niet meer —
   er zijn nu bestemmingen die je met scrollen niet bereikt, en dan is een menu
   geen luxe maar de enige weg erheen.

   Hij verschijnt precies wanneer `.balkNav` verdwijnt; de twee media queries
   hieronder zijn dezelfde als daar, alleen omgekeerd. Er is dus nooit een stand
   met allebei of met geen van beide. */
.site_menu__i3OVe {
  display: none;
  position: relative;
  /* Geen `flex: 1` uit `.balkActies > *` hieronder: een knop van 40 pixels hoort
     geen ruimte op te eisen naast een belknop en een afspraakknop. */
  flex: 0 0 auto;
}

@media (max-width: 61.999rem) {
  .site_menu__i3OVe {
    display: block;
  }
}

@media (max-width: 75.999rem) {
  .site_balk__5qOTR[data-nav-items='6'] .site_menu__i3OVe,
  .site_balk__5qOTR[data-nav-items='7'] .site_menu__i3OVe,
  .site_balk__5qOTR[data-nav-items='8'] .site_menu__i3OVe {
    display: block;
  }
}

/* Het driehoekje weg dat een `<summary>` standaard krijgt: dit is een knop, en
   de streepjes zeggen het al. `list-style` doet het in Firefox en Chrome, de
   `::-webkit-details-marker` in oudere Safari. */
.site_menuKnop__0FpJS {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: var(--radius-knop);
  cursor: pointer;
  list-style: none;
  color: inherit;
}

.site_menuKnop__0FpJS::-webkit-details-marker {
  display: none;
}

.site_menuKnop__0FpJS:hover,
.site_menu__i3OVe[open] .site_menuKnop__0FpJS {
  border-color: currentColor;
}

.site_menuIcoon___EJKM {
  width: 1.25rem;
  height: 1.25rem;
}

/* Het uitgeklapte paneel.

   In de paginakleuren en niet in die van de balk: de balk staat meestal in de
   omgekeerde toon, en een paneel dat daar met dezelfde vulling onder hangt loopt
   optisch door in de sectie erachter. `achtergrond` + `tekst` is bovendien het
   ene kleurenpaar dat élk palet garandeert — zie de toelichting bij `omgekeerd`
   in `sectietonen()`.

   `z-index` boven die van de balk (20), want het paneel hangt eronder uit en
   moet over de eerste sectie heen vallen. */
.site_menuPaneel__EUpL5 {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 21;
  min-width: 12rem;
  padding: 0.4rem;
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.35);
}

.site_menuLijst__0Otgo {
  display: flex;
  flex-direction: column;
}

.site_site__SreoX .site_menuLink__skSmB {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: calc(var(--radius) * 0.6);
  color: var(--kleur-tekst);
  font-family: var(--font-ui);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
}

.site_site__SreoX .site_menuLink__skSmB:hover,
.site_site__SreoX .site_menuLink__skSmB:focus-visible {
  background: var(--vlak-basis);
  color: var(--op-vlak);
}

/* De pagina waar je al bent, als stand en niet als link. Het `aria-current` in
   het sjabloon zegt het voor een schermlezer; dit zegt het voor de rest. */
.site_site__SreoX .site_menuLink__skSmB[aria-current='page'] {
  color: var(--kleur-accent);
}

/* --- de balk in drie standen ------------------------------------------------- */

/* De kopbalk doet bovenaan de pagina iets anders dan verderop, en op een
   telefoon iets anders dan op een breed scherm. Drie standen:

     ≥ 62rem   naam + navigatie + beide knoppen
     40-62rem  naam + beide knoppen
     < 40rem   alleen de knoppen (plus het beeldmerk, als het er is)

   Waarom de naam op een telefoon weg mag: hij staat zestig pixels lager in de
   hero, vier keer zo groot. Daar is de balk dus puur een actiebalk.

   Waarom hij wég MOET: op `.balkActies` staat `flex-shrink: 0` en op `.balkMerk`
   staat `min-width: 0`. Bij te weinig ruimte gaven de twee knoppen dus geen
   millimeter mee en werd de naam platgedrukt — bij 390px tot één letter naast
   het logo. Dat is de eigenlijke fout: niet dat de naam te lang is, maar dat hij
   het altijd verliest. */
@media (max-width: 39.999rem) {
  .site_balkNaam__q_2Ez {
    display: none;
  }

  /* Hier stond dat de knoppen samen de balk moesten vullen (`flex: 1 1 auto` op
     `.balkActies` en op elk kind), omdat de linkerhelft anders leeg bleef bij een
     lead zonder beeldmerk.

     Dat argument is verlopen. Er staat inmiddels vrijwel altijd een
     sjabloon-beeldmerk links, en sinds deze ronde staat er áltijd een menuknop
     rechts — de balk kan dus niet meer scheef hangen. Wat het opstrekken wél
     deed, was elke knop uitrekken tot de vrije ruimte op was. Bij een familie
     die geen CTA in de balk zet (de schilder: alleen een belknop) werd dat één
     pil van driekwart schermbreedte, met de menuknop ergens in het midden
     ernaast. Precies het beeld dat niet klopte.

     Nu houdt elke knop zijn eigen maat, staat het merk links en staan de acties
     rechts — dezelfde indeling als op een breed scherm, en dezelfde in elke
     branche. */

  /* Het beeldmerk gaat op een telefoon helemaal weg, en die ruimte gaat naar de
     knop ernaast.

     Hier stond eerst `flex-shrink: 0` — het logo hield zijn 32 pixels en de
     knoppenrij gaf mee. Het gevolg was precies één ding: de CTA werd afgekapt.
     Gemeten op 375px met een beeldmerk erbij, "Vraag een offerte aan" heeft
     152 pixels nodig en kreeg er 144. Zonder logo past hij ruim. Ook "Maak een
     afspraak" liep zo tegen "Maak een afsp…" aan.

     Dat is een slechte ruil. Een knop met een half woord erop leest als een
     kapotte pagina, en het beeldmerk voegt hier weinig toe: de bedrijfsnaam
     staat zestig pixels lager in de hero, vier keer zo groot, en bij een echt
     logo staat dát daar ook. Op een telefoon is deze balk puur een actiebalk,
     en dan horen de acties er onverkort in te passen.

     De naam ging al weg op deze breedte (`.balkNaam` hierboven); nu gaat het
     hele merkblok mee. Daarmee vervalt ook de regel die het telefoonnummer in
     tekst verborg zodra er een logo stond: die ruil hoeft niet meer. */
  .site_balkMerk__rL1uo {
    display: none;
  }

  /* De knoppenrij vult de balk van rand tot rand.

     Zonder dit hield hij zijn eigen maat en bleven er links een wit vlak en twee
     kleine pillen ergens rechts ertegenaan over. Op een telefoon is deze balk
     het eerste wat een bezoeker ziet en zo ongeveer het enige waarop hij kan
     drukken; dan hoort hij de volle breedte te gebruiken.

     `min-width: 0` staat erbij omdat de rij ook moet kunnen krimpen: buiten deze
     query houdt `flex-shrink: 0` de balk stevig, maar hier mag een lang label
     hem niet breder maken dan het scherm. */
  .site_balkActies__tSXWU {
    flex: 1;
    min-width: 0;
  }

  /* De belknop en de afspraakknop worden even breed.

     `flex: 1 1 0` op allebei: de basis is nul, dus de inhoud telt niet mee en de
     vrije ruimte wordt in tweeën gedeeld. Twee pillen van dezelfde maat naast
     elkaar, met de menuknop erachter.

     ⚠️ Dit kost ruimte aan de kant waar hij nodig is. De belknop toont op deze
     breedte alleen een icoon en heeft die helft niet nodig; de afspraakknop
     draagt een label dat wél plaats vraagt. Bij een lang label knipt het vangnet
     hieronder (`.balkActies .knopLabel`) hem af met een beletselteken.

     Nagemeten op de gangbare toestelmaten, met "Maak een afspraak" (17 tekens):

         360 px   past
         375 px   past
         390 px   past
         414 px   past

     Een langer label — "Vraag een offerte aan" bij de schilder is er 21 — loopt
     eerder tegen die grens aan. Zie de test in `site-mobiel.test.tsx`, die de
     verdeling vastlegt zodat je weet wat je verandert. */
  .site_balk__5qOTR .site_knopSecundair__4SUW4,
  .site_balk__5qOTR .site_knop__D1_ZM {
    flex: 1 1 0;

    /* Krapper dan `.knopCompact` elders geeft, en dat is precies uitgemeten.

       Op 360 px — de smalste telefoon die er nog toe doet — houdt de balk 328 px
       binnenwerk over. Daar gaan de menuknop (40) en twee tussenruimtes (19) af,
       en de rest wordt in tweeën gedeeld: 134 px per knop.

       Met de gewone zijruimte van 1,1rem blijft daarvan 115 px tekst over, en
       "Maak een afspraak" vraagt er 129 op de normale letter. Die veertien
       pixels komen hiervandaan: acht uit de zijruimte, zes uit een iets kleinere
       letter. Dan past hij met 118 tegen 117 — krap, maar heel.

       ⚠️ Dat is de prijs van twee even brede knoppen: de belknop toont alleen een
       icoon en krijgt toch de helft. Wordt het label langer dan zeventien tekens,
       dan knipt het vangnet hieronder hem af met een beletselteken. */
    padding-inline: 0.375rem;
    font-size: 0.85rem;
  }

  /* De tussenruimte krimpt mee. Op 360 px levert dat 7 px op, en die gaan
     rechtstreeks naar de twee knoppen — genoeg om van "past net niet" naar
     "past met marge" te komen. */
  .site_balkActies__tSXWU {
    gap: 0.375rem;
  }

  /* Op élk kind en niet alleen op de CTA: een flexkind mag standaard niet kleiner
     worden dan zijn inhoud, en dat geldt net zo goed voor de belpil ernaast. Eén
     kind dat weigert mee te geven houdt de hele rij te breed. */
  .site_balkActies__tSXWU > * {
    min-width: 0;
  }

  /* Het vangnet voor de tekst die wij niet in de hand hebben.

     Alles in deze balk heeft een maat die wij kennen: een belicoon, een
     menuknop. Behalve het label op de CTA, want dat mag zestig tekens zijn. Bij
     "Vraag vrijblijvend een offerte aan voor uw project" is er geen breekpunt
     dat nog helpt.

     Een uiterste grens dus, en geen gewone stand: de belknop krimpt eerst tot
     zijn icoon, en pas als dát niet genoeg is knipt dit het label af. Beter een
     beletselteken dan een pagina die je opzij kunt schuiven. */
  .site_balkActies__tSXWU .site_knopLabel__XLNqU {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Onder de 30rem gaat het telefoonnummer in tekst eruit; het belicoon blijft.

   Deze grens stond op 24rem (384px) en dat was net verkeerd. Precies boven die
   grens liggen de maten van vrijwel elke telefoon van nu — 390, 393, 412, 414 —
   en daar verscheen het nummer in tekst weer terwijl de balk er nog geen ruimte
   voor had: logo, nummer, afspraakknop en menuknop samen komen op ongeveer 445
   pixels uit. Het gevolg was een pagina die je een centimeter opzij kon schuiven,
   op precies de toestellen waarop je hem bekijkt.

   30rem is dezelfde grens waarop de hero van vorm verandert, en dus de plek waar
   deze stylesheet "dit is een telefoon" zegt. Op een telefoon is een belicoon
   volstrekt duidelijk, en `aria-label` in het sjabloon houdt de link benoembaar
   voor een schermlezer. */
@media (max-width: 30rem) {
  .site_balk__5qOTR .site_knopSecundair__4SUW4 .site_knopLabel__XLNqU {
    display: none;
  }

  .site_balk__5qOTR .site_knopSecundair__4SUW4 .site_knopIcoon__Dlo1G {
    margin-right: 0;
  }
}

/* Het telefoonnummer is een knop en geen losse link meer: dezelfde pil, dezelfde
   hoogte en dezelfde letter als de primaire knop ernaast. Een kaal
   telefoonnummer naast een gevulde knop leest als bijschrift. */
.site_knopIcoon__Dlo1G {
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.45em;
  flex-shrink: 0;
}

/* --- knoppen --------------------------------------------------------------- */

/* Twee knoppen, één vorm.

   Primair is altijd gevuld, secundair altijd omlijnd, allebei op dezelfde pil
   met dezelfde hoogte en dezelfde letter. Het verschil tussen de twee zit
   uitsluitend in gevuld-versus-omlijnd; dat is één signaal, en één signaal is
   genoeg om te zien welke de belangrijkste is.

   De kleuren zijn níét gelijk, en dat kán ook niet. `cta` is de enige kleur
   waarvan het palet een leesbare tekstkleur garandeert om op te vullen
   (`ctaTekst`, minimaal 5,5:1), en `accent` is de enige waarvan het garandeert
   dat hij als tekst op de pagina leesbaar is (4,5:1 — `cta` haalt op een witte
   achtergrond maar 2,9:1 in het spoedpalet). In de meeste paletten liggen die
   twee vlak bij elkaar; waar ze uiteenlopen is dat onderzocht en bedoeld, zoals
   het navy/oranje van de spoedbranches.

   Knoppen staan altijd in `--font-ui`, nooit in de displayletter. Een
   Cormorant- of Barlow Condensed-knop leest als een titel en niet als iets
   waarop je kunt drukken; bovendien is dit het element dat het vaakst naast een
   formulierveld staat, en dat hoort dezelfde letter te hebben. */
.site_knop__D1_ZM {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--kleur-cta);
  border-radius: var(--radius-knop);
  background: var(--kleur-cta);
  color: var(--kleur-cta-tekst);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: var(--gewicht-cta);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  /* Een knoplabel dat over twee regels breekt leest niet meer als knop; op een
     smal scherm gebeurde dat met het telefoonnummer in de kopbalk. */
  white-space: nowrap;
}

/* Geen `margin-left`: de ruimte tussen twee knoppen komt van de `gap` van hun
   rij. Een marge op de knop zelf springt hem in zodra hij op een smal scherm
   onder de primaire valt. */
.site_knopSecundair__4SUW4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--kleur-accent);
  border-radius: var(--radius-knop);
  background: transparent;
  color: var(--kleur-accent);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: var(--gewicht-cta);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

/* Staat ná beide knopsoorten: op gelijke specificiteit wint de laatste regel,
   en anders houdt de secundaire knop zijn volle maat in de kopbalk. */
.site_knopCompact__xQrNo {
  padding: 0.5rem 1.1rem;
  font-size: 0.9rem;
}

/* Op de omgekeerde sectie draaien de knoppen mee.

   Ze zouden daar anders verdwijnen: `cta` is nergens gegarandeerd zichtbaar
   tegen `tekst`, en in het luxe palet zijn die twee zelfs exact dezelfde kleur —
   een knop die precies de kleur van zijn eigen sectie heeft. `achtergrond` op
   `tekst` is wél overal gegarandeerd, in beide richtingen. */
.site_sectie__ieUhh[data-toon='omgekeerd'] .site_knop__D1_ZM,
.site_balk__5qOTR[data-toon='omgekeerd'] .site_knop__D1_ZM {
  border-color: var(--kleur-achtergrond);
  background: var(--kleur-achtergrond);
  color: var(--kleur-tekst);
}

.site_sectie__ieUhh[data-toon='omgekeerd'] .site_knopSecundair__4SUW4,
.site_balk__5qOTR[data-toon='omgekeerd'] .site_knopSecundair__4SUW4 {
  border-color: var(--kleur-achtergrond);
  background: transparent;
  color: var(--kleur-achtergrond);
}

.site_sectie__ieUhh[data-toon='omgekeerd'] a:focus-visible,
.site_sectie__ieUhh[data-toon='omgekeerd'] button:focus-visible,
.site_balk__5qOTR[data-toon='omgekeerd'] a:focus-visible {
  outline-color: var(--kleur-achtergrond);
}

.site_link__iSAvp {
  color: var(--op-vlak-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- hero ------------------------------------------------------------------ */

/* Eén statische hero met één boodschap en één actie. Geen carrousel: die
   verplaatst de boodschap voordat iemand hem gelezen heeft. */
.site_hero__ayLj5 {
  /* De zijmarge staat hier en niet in de padding van dit blok, omdat de
     verhouding hieronder van de vólle breedte uit moet gaan; zie `.hero::before`
     en `.heroInhoud`. */
  --hero-marge-i: clamp(1.25rem, 5vw, 3rem);

  position: relative;
  /* Eén cel waarin de maatvoerder en de inhoud over elkaar heen liggen. De
     hoogte van de rij is de grootste van de twee: de verhouding bepaalt de
     hoogte, maar een lange bedrijfsnaam duwt het blok groter in plaats van
     eruit te lopen. */
  display: grid;
  grid-template-columns: 1fr;
  /* Bovenaan, en dat is sinds het kader hoger werd geen smaakkwestie meer: op
     een breed scherm is de hero ruim 600 pixels hoog, en onderaan begint de
     naam van het bedrijf dan pas op tweederde van het beeld. De scrim hieronder
     hangt aan diezelfde bovenrand. */
  align-items: start;
  overflow: hidden;
}

/* De maatvoerder: dit lege blokje bepaalt hoe hoog de hero is, en daarmee welk
   deel van de foto je ziet.

   Waarom een procentuele `padding-top` en niet een `min-height` in `vw`, wat
   hier eerst stond: `vw` meet het venster, en de hero staat op drie plekken in
   een kader dat níét het venster is. In het bewerkscherm rendert de pagina in
   een venster van 238% van de kolom, en in de promotiemockup in een iframe van
   1440 of 390. Met `vw` kreeg dezelfde foto in elk van die drie een andere
   uitsnede: op 1440 bleef 68% van de fotohoogte over, op 1920 nog maar 50%, en
   dan stond de vrouw op de stoel in het ene venster vol in beeld en in het
   andere halverwege doorgesneden.

   Een percentage in `padding` rekent tegen de bréédte van het blok zelf. Dus
   38% betekent overal dezelfde verhouding (2,63:1) en overal dezelfde 67,6% van
   de fotohoogte, ongeacht hoe breed het venster eromheen is.

   De ondergrens van 21rem is de telefoon: daar wordt de hoogte niet door de
   foto bepaald maar door wat erin staat. De bovengrens van 52rem grijpt pas
   boven 2190px in en houdt de hero daar binnen één beeldscherm. */
.site_hero__ayLj5::before {
  content: '';
  grid-area: 1 / 1;
  padding-top: clamp(21rem, 38%, 52rem);
}

/* De hero-foto vult het hele blok, dus de verhouding van de sectie doet hier
   het werk (`.hero::before` hierboven). Wat wél per foto verschilt is de
   uitsnede: `object-position` komt inline uit de curatie mee. De waarde
   hieronder is de terugval voor sites van vóór de curatie — nadrukkelijk niet
   `center`, want het midden van een liggende foto is vrijwel altijd vloer. */
.site_heroFoto__JazcL {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 38%;
     object-position: 50% 38%;
}

/* Hier stond `.heroLogo`: het beeldmerk boven de bedrijfsnaam in de hero, met
   een wit rondje eronder om het over de scrim zichtbaar te houden.

   Het is eruit omdat het een dubbeling was geworden. Het was bedoeld voor een
   familie zónder kopbalk — dan is de hero de enige plek waar een logo nog kan
   staan — maar de kopbalk staat er sinds de navigatie erin kwam op élke site.
   Het merk stond dus twee keer boven elkaar: één keer inline in de balk, en
   twintig pixels lager nog eens als los rondje boven de titel. Zie de
   toelichting bij de kopbalk in `index.tsx`. */

/* Tekst over een foto staat nooit rechtstreeks op het beeld: deze scrim maakt
   de ondergrond donker genoeg dat witte tekst ook over een lichte foto ruim
   boven de contrastnorm blijft.

   Op volle sterkte tot 30rem vanaf de bóvenrand, en daarna pas dunner. Dat is
   geen percentage, en met opzet niet: de tekst hangt aan diezelfde bovenrand
   (`align-items: start`), dus staat hij altijd binnen die 30rem — hoe hoog de
   hero verder ook wordt. Met een percentage zou de vervaging op een breed
   scherm omhoog kruipen tot in de kop, en dan klopt de contrastmeting niet
   meer: die rekent met de vólle sterkte.

   480 pixels is ruim: een kop van drie regels plus tagline plus knop eindigt op
   452. Een bedrijfsnaam die dáár nog overheen gaat duwt de onderste regel in de
   vervaging — net zoals hij vóór deze omkering de bóvenste regel het dunne deel
   in duwde. Op een telefoon is de hero lager dan 30rem en is de sluier overal
   even sterk. */
.site_heroScrim___7rzl {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--scrim) 0%, var(--scrim) 30rem, var(--scrim-zacht) 100%);
}

/* De inhoud draagt de marge van de hero, in plaats van de hero zelf. Anders zou
   de maatvoerder hierboven tegen de breedte mínus die marge rekenen, terwijl de
   foto de volle breedte vult — en dan klopt de verhouding net niet.

   De `max-width` telt de marge er weer bij op, zodat de tekst op precies
   dezelfde lijn begint als de koppen van de secties eronder (`.sectieBinnen`,
   ook `--maxbreedte` breed binnen dezelfde zijmarge). */
.site_heroInhoud__OlYeJ {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  max-width: calc(var(--maxbreedte) + 2 * var(--hero-marge-i));
  padding: clamp(2.5rem, 7vw, 5rem) var(--hero-marge-i);
  margin-inline: auto;
}

/* --- de hero op een telefoon ------------------------------------------------- */

/* Staand, met de tekst bovenin — waar hij ook op een breed scherm staat.

   Er zijn hier twee andere versies geweest, allebei afgekeurd. Eerst gestapeld:
   beeld boven, tekstvlak eronder. Dat las prima en kostte de hero zijn karakter
   — een plaatje met een kaartje eronder, en drie bleke banen op elkaar (balk,
   tekstvlak, dienstensectie) zonder één donker anker. Daarna de tekst tegen de
   ónderrand van de foto. Ook dat werkte niet: de titel zakt dan weg in het beeld
   in plaats van de pagina te openen, en je leest hem pas ná een halve foto.

   Wat blíjft van die ronde is het kader. 4:5 staand, zoals het toestel zelf, in
   plaats van de 1,16:1-strook van daarvoor — dat was de helft van het probleem.
   De titel staat weer waar hij hoort: bovenaan, als eerste wat je leest.

   De uitsnedeknoppen dragen de rest: "onder" of "laag" zet het onderwerp in de
   helft die vrij blijft. */
@media (max-width: 30rem) {
  /* 4:5 — de hoogte is 125% van de breedte. Vervangt de `clamp()` hierboven, die
     op een liggende verhouding is gezet. Alleen bij een fotohero: zonder foto is
     de hoogte de inhoud en heeft een verhouding geen betekenis. */
  .site_hero__ayLj5[data-foto='ja']::before {
    padding-top: 125%;
  }

  /* Het knikpunt van de sluier hierboven ligt op 30rem vanaf de bovenrand — dat
     is meer dan dit hele kader hoog is (4:5 op 375px komt op 29rem uit), dus de
     sluier staat op een telefoon overal op volle sterkte en dekt de foto vlak af.
     Dat kost de onderste helft, waar geen letter staat, onnodig zijn diepte.

     Vandaar hier een eigen verloop: vol over de bovenste 15rem waar de kop en de
     tagline staan — genoeg voor drie regels — en daaronder terug naar de kale
     foto. Vaste rem-afstanden en geen procenten, om dezelfde reden als hierboven:
     een percentage schuift mee met de hoogte en dan kruipt het knikpunt bij een
     lange bedrijfsnaam de tekst in. Elk stuk waar letters staan valt binnen de
     volle sterkte, dus `heroContrast()` geldt onverkort. */
  .site_hero__ayLj5[data-foto='ja'] .site_heroScrim___7rzl {
    background: linear-gradient(
      180deg,
      var(--scrim) 0%,
      var(--scrim) 15rem,
      var(--scrim-zacht) 19rem,
      transparent 26rem
    );
  }

  /* De knoppen uit de hero.

     Ze staan zestig pixels hoger al in de kopbalk — dezelfde afspraakknop, in
     dezelfde kleur, en die balk schuift mee. Twee keer dezelfde knop op één
     scherm is geen nadruk maar ruis, en het is precies wat de hero vol maakte.
     Op een breed scherm staan ze ver genoeg uit elkaar en blijft de knop in de
     hero waar hij hoort. */
  .site_hero__ayLj5[data-foto='ja'] .site_heroActies__6oo0f {
    display: none;
  }
}

/* Alles wat met de fotohero te maken heeft hangt aan `data-foto` en niet aan
   `data-accent`: een familie die om een fotohero vráágt maar geen foto's heeft,
   krijgt een gekleurd vlak — en daar hoort donkere tekst op, geen witte.

   `--op-foto` en niet `#ffffff`, want een lichte hero draait de zaak om: dan
   ligt er een lichte sluier over de foto met donkere tekst erop. Welke van de
   twee het is bepaalt het palet (`heroToon`), en die kleur wordt nagerekend —
   zie `heroContrast()`. */
.site_hero__ayLj5[data-foto='ja'] .site_heroInhoud__OlYeJ {
  color: var(--op-foto);
}

/* De hero zonder foto.

   Dit is de stand waarin een lead terechtkomt waarvan Google geen bruikbaar
   beeld heeft — en precies daar ging het eerder mis: de hero werd een wit vlak
   met een streepje eronder, en dan begint de pagina met niets. Terwijl er niets
   aan de páginá ontbreekt: de kleuren, de kaarten, de pictogrammen en de
   typografie zijn er allemaal nog. Alleen de fotó ontbreekt.

   Daarom is dit nu een gekleurd paneel met een motief, en niet de afwezigheid
   van een foto. `data-toon="getint"` staat op het element, dus de kleur komt
   uit dezelfde ladder als de rest van de pagina. */
.site_hero__ayLj5[data-foto='nee'] {
  background: var(--vlak-basis);
}

/* Twee zachte cirkels in de accentkleur, rechtsboven. Puur decoratief en
   bewust buiten het kader lopend, zodat het als vorm leest en niet als een
   plaatje dat niet geladen is. */
.site_heroMotief__jef3c {
  position: absolute;
  top: -18%;
  right: -8%;
  width: min(34rem, 60%);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, var(--kleur-accent) 0%, transparent 62%),
    radial-gradient(circle at 78% 76%, var(--kleur-accent) 0%, transparent 44%);
  opacity: 0.16;
  pointer-events: none;
}

/* Ook onder de hero zonder foto stond zo'n vervaging naar de paginakleur, om
   dezelfde reden en met hetzelfde resultaat. Weg om dezelfde reden: de hero
   eindigt waar hij eindigt. Zie de toelichting bij de sectietonen verderop. */

/* De H1.

   De ondergrens is opgetrokken van 2,1 naar 2,6rem en de bovengrens van 3,75
   naar 4,5. Reden: een cluster dat één letterfamilie gebruikt (zorg-advies,
   vakwerk) heeft geen contrast in vórm, dus moet het contrast volledig uit
   grootte en gewicht komen. Op 2,1rem was de titel maar anderhalf keer de
   tagline en las het titelblok als een alinea met een dikke eerste regel.

   `--kop-schaal` corrigeert daarbovenop de lettermetrics. Cormorant Garamond
   heeft een lage x-hoogte en Barlow Condensed is smal: op dezelfde px-waarde
   komen die merkbaar kleiner over dan Inter. De clamp blijft leidend, dus op
   mobiel groeit de kop niet ongecontroleerd mee. */
.site_bedrijfsnaam__wh3dC {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: calc(clamp(2.6rem, 6.4vw, 4.5rem) * var(--kop-schaal));
  font-weight: var(--gewicht-kop);
  line-height: var(--kop-regelhoogte);
  letter-spacing: var(--kop-spatiering);
  /* Lange bedrijfsnamen ("Hoveniersbedrijf De Groene Hand") mogen op 375px
     breken in plaats van buiten beeld te lopen. */
  overflow-wrap: break-word;
}

/* Op een telefoon een maat kleiner.

   De ondergrens van 2,6rem hierboven is op een breed scherm precies goed, en op
   een telefoon is hij de énige waarde die telt: `6,4vw` komt op 375px uit op
   24px, dus de clamp valt daar altijd terug op de bodem. Die bodem is gekozen om
   de kop te laten winnen van de tagline — een argument dat over de verhouding
   tussen twee tekstblokken gaat, niet over de verhouding tot het scherm.

   Op 375px pakte de titel twee regels van 42px, en samen met de tagline en de
   knop vulde het tekstblok 297 van de 336 pixels hero. Er bleef geen rustig
   stuk foto over; alles wat je zag was letter over beeld. Op 2,05rem past
   dezelfde naam op twee regels van 33px en ademt het blok.

   Een media query en geen ruimere clamp: de bodem geldt tot 650px breed, dus
   met de clamp verschuiven zou ook elke tablet meeveranderen. Dit gaat over
   telefoons. */
@media (max-width: 30rem) {
  .site_bedrijfsnaam__wh3dC {
    font-size: calc(2.05rem * var(--kop-schaal));
  }
}

/* De tagline blijft bewust dicht bij de lopende tekst en groeit niet mee met de
   titel: het verschil tússen die twee is wat de hiërarchie maakt. Wel iets
   lichter gezet, zodat hij als onderschrift leest en niet als tweede kop. */
.site_site__SreoX .site_tagline__jxw5X {
  max-width: 32ch;
  margin-top: 1.15rem;
  font-size: clamp(1.1rem, 2.1vw, 1.35rem);
  line-height: 1.45;
  color: var(--op-vlak-zacht);
}

.site_hero__ayLj5[data-foto='ja'] .site_tagline__jxw5X {
  color: var(--op-foto);
}

/* Over de sluier heeft de omlijnde knop de herotekstkleur nodig; de accentkleur
   van het palet valt daar weg. */
.site_hero__ayLj5[data-foto='ja'] .site_knopSecundair__4SUW4 {
  border-color: var(--op-foto);
  color: var(--op-foto);
}

.site_hero__ayLj5[data-foto='ja'] a:focus-visible {
  outline-color: var(--op-foto);
}

/* Bij spoed is het telefoonnummer het belangrijkste element van de pagina. */
/* `.site` ervoor, en dat is hier geen stijlkwestie maar een reparatie.

   De reset bovenaan (`.site h1, .site h2, .site p, … { margin: 0 }`) heeft
   specificiteit 0,2,0. Een regel die alleen `.heroTelefoon` heet komt op 0,1,0
   uit en verliest het dus — de `margin-top` hieronder deed letterlijk niets, en
   het telefoonnummer plakte tegen de tagline erboven. Dezelfde fout zat op
   `.heroActies`, waar de knop daardoor exact op de onderrand van de subtitel
   begon. `.site .tagline` had het prefix wél; die drie horen bij elkaar. */
.site_site__SreoX .site_heroTelefoon__P4oZd {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-top: 1.75rem;
}

.site_heroTelefoonLabel__06DU_ {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--op-vlak-accent);
}

.site_heroTelefoonNummer__DKC6g {
  font-family: var(--font-display);
  font-size: calc(clamp(1.75rem, 5vw, 2.5rem) * var(--kop-schaal));
  font-weight: var(--gewicht-kop);
  letter-spacing: -0.01em;
  color: var(--op-vlak);
  text-decoration: none;
}

/* De knoppenrij onder de titel.

   `gap` en niet een marge op de tweede knop: bij twee knoppen die op een smal
   scherm onder elkaar vallen, hield die marge de tweede knop ingesprongen en
   zette er geen ruimte tussen. Met `gap` klopt beide richtingen vanzelf, en
   staat de primaire knop op élke breedte links uitgelijnd met de kop erboven.

   `.site` ervoor om dezelfde reden als bij `.heroTelefoon` hierboven: zonder dat
   prefix wint de margin-reset en begint de knop precies op de onderrand van de
   subtitel. Iets ruimer dan de 2rem die er stond, want die ruimte moet nu ook
   het weggevallen labelniveau opvangen. */
.site_site__SreoX .site_heroActies__6oo0f {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

/* --- secties ---------------------------------------------------------------- */

/* --- de toonladder ---------------------------------------------------------- */

/* Elke sectie heeft een kleur uit het palet; geen enkele sectie valt terug op
   wit. Dat was namelijk het probleem: `vlak` is in bijna elk palet #FFFFFF, dus
   een pagina die afwisselde tussen `achtergrond` en `vlak` sprong heen en weer
   tussen crème en wit — en wit is het lichtste en luidste dat er is, dus het
   won altijd.

   Vier variabelen doen het werk, en ze worden per toon overschreven:

     --vlak-basis     de achtergrond van deze sectie, én de ondergrond waar
                      kaarten overheen mengen
     --op-vlak        lopende tekst en koppen
     --op-vlak-zacht  bijschriften
     --op-vlak-accent de accentkleur die op deze toon leesbaar is:
                      pictogrammen, links, de lijn in het procesblok

   Alles binnen een sectie leest deze vier en nooit rechtstreeks een paletkleur.
   Daardoor kan de omgekeerde sectie de hele polariteit omdraaien zonder dat er
   ergens een tweede regel nodig is. */
/* De hero staat in deze lijsten mee: hij is geen `.sectie` — hij heeft een eigen
   hoogte, een eigen uitlijning en soms een foto — maar hij zit wél op dezelfde
   toonladder. Zonder deze regel zou `--vlak-basis` daar niet bestaan en zou de
   hero zonder foto op niets terugvallen. */
.site_sectie__ieUhh,
.site_hero__ayLj5,
.site_balk__5qOTR {
  --vlak-basis: var(--kleur-achtergrond);
  --op-vlak: var(--kleur-tekst);
  --op-vlak-zacht: var(--kleur-tekst-zacht);
  --op-vlak-accent: var(--kleur-accent);
}

.site_sectie__ieUhh {
  position: relative;
  padding: var(--ruimte-sectie) clamp(1.25rem, 5vw, 3rem);
  background: var(--vlak-basis);
  color: var(--op-vlak);
}

/* De getinte sectie: dezelfde paginakleur met een scheut `accent` erin.

   `accent` en niet `accentDecor`, en dat is geen detail — zie `VLAKTINT` in
   `core/design/branche-paletten.ts`. Kort: het decoratieve accent valt in twee
   paletten vrijwel samen met de achtergrond, waardoor de tint daar onzichtbaar
   zou zijn. Van `accent` gárandeert het palet dat hij 4,5:1 haalt tegen de
   achtergrond, dus een tint ervan is per definitie te zien. */
.site_sectie__ieUhh[data-toon='getint'],
.site_hero__ayLj5[data-toon='getint'] {
  --vlak-basis: color-mix(in srgb, var(--kleur-tint) 9%, var(--kleur-achtergrond));
}

/* De omgekeerde sectie: de polariteit van de pagina gedraaid.

   `tekst` als vlak en `achtergrond` als letter — het enige kleurenpaar dat élk
   palet garandeert, in beide richtingen. Bij een licht palet levert dat een
   donkere sectie op; bij `tattoo-donker`, waar de pagina al bijna zwart is,
   juist een lichte. In allebei de gevallen is het de sectie die eruit springt,
   en dat is wat de contactsectie nodig heeft.

   Het accent kan hier niet `accent` zélf zijn: die kleur is nergens gegarandeerd
   tegen `tekst` (in het garage-palet haalt hij 1,5:1). `rand` wél — 9,8:1 in het
   krapste geval — en dat is bovendien een kleur uit hetzelfde palet, dus links en
   pictogrammen blijven branchekleurig in plaats van neutraal wit. */
.site_sectie__ieUhh[data-toon='omgekeerd'],
.site_balk__5qOTR[data-toon='omgekeerd'] {
  /* De tekstkleur, tenzij het palet iets anders kiest — zie `omgekeerdVlak`.
     De twee regels eronder blijven ongemoeid: wát er ook als vlak staat, de
     tekst is de paginakleur en de links zijn de randkleur, en dat paar wordt
     per palet nagerekend. */
  --vlak-basis: var(--kleur-omgekeerd, var(--kleur-tekst));
  --op-vlak: var(--kleur-achtergrond);
  --op-vlak-zacht: color-mix(in srgb, var(--kleur-achtergrond) 75%, var(--kleur-tekst));
  --op-vlak-accent: var(--kleur-rand);
}

/* De overgang tussen twee tonen: een rechte lijn.

   Hier heeft een verloop gestaan. Een getinte sectie liep aan de boven- en
   onderkant over vier centimeter de paginakleur in, met als argument dat een
   harde grens tussen twee bijna gelijke tinten als een naad leest.

   Dat argument klopte niet. Wat je op het scherm zag was geen zachte overgang
   maar een wazige band van acht centimeter waarin de kleur nergens vaststond —
   twee daarvan onder elkaar en de pagina heeft geen indeling meer, alleen nog
   mist. Een tint van 9% hééft geen naad nodig om te verzachten: het verschil is
   klein genoeg dat een rechte grens gewoon leest als "hier begint een ander
   blok", en dat is precies wat een sectiegrens hoort te doen.

   Er staat dus niets meer. De secties grenzen recht aan elkaar en de tint doet
   het werk alleen. */

.site_sectieBinnen__v5BNx {
  position: relative;
  z-index: 1;
  max-width: var(--maxbreedte);
  margin: 0 auto;
}

/* De marge onder de kop hoort bij de kop.

   Die zat eerder op een wikkel om label plus kop heen; nu het label weg is, is
   deze kop het hele titelblok en draagt hij zijn eigen ruimte. Iets ruimer dan
   de 2,25rem van die wikkel, omdat de kop nu direct op de sectierand staat en
   daar wat meer lucht onder nodig heeft om niet aan de tekst te plakken.

   `.site` ervoor, net als bij `.heroActies`: de margin-reset bovenaan noemt
   `.site h2` en wint anders van deze regel. */
.site_site__SreoX .site_sectieKop__obGwF {
  margin-bottom: 2.5rem;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: calc(clamp(1.7rem, 3.4vw, 2.4rem) * var(--kop-schaal));
  font-weight: var(--gewicht-kop);
  /* Ruimer dan de H1: een tussenkop staat midden in de tekst en heeft geen
     baat bij dezelfde strakke zetting als de titel. */
  line-height: 1.15;
  letter-spacing: var(--kop-spatiering);
}

/* De kop in twee niveaus: een klein woord boven een zin.

   Links uitgelijnd, net als elke andere sectiekop op de pagina. Dit heeft
   gecentreerd gestaan en dat ging op twee manieren mis. Het label bleek niet mee
   te centreren — de reset bovenaan geeft elke `p` een `max-width` van
   `--maxregel`, dus het labelblok was smaller dan de sectie en zijn gecentreerde
   tekst kwam links van het midden uit, terwijl de kop eronder wél in het midden
   stond. Twee regels die bij elkaar horen op twee verschillende assen.

   En los daarvan: gecentreerd stond het alleen in dít blok, terwijl de koppen
   van alle andere secties links staan. Eén afwijkende as maakt de pagina niet
   levendiger, die maakt hem onrustig. */
.site_sectieIntro__zqaDK {
  /* Framer zet er 34px onder; dit is de dichtstbijzijnde sport van de eigen
     schaal, en het verschil van twee pixels ziet niemand. Zelf een maat
     verzinnen wél: dan is er geen schaal meer. */
  margin-bottom: 2rem;
}

/* Gecentreerd, als je daarvoor kiest in het bewerkscherm.

   De uitzondering op de regel hierboven, en hij staat er omdat dat argument over
   de hele pagina gaat: boven drie gelijke kaarten kan een gecentreerd kopblok
   juist kloppen. Welke van de twee beter werkt zie je, dus is het een knop.

   Het `margin-inline: auto` op allebei de regels is niet optioneel. `text-align`
   alleen zou precies de oude fout teruggeven: de reset bovenaan geeft elke `p`
   een `max-width` van `--maxregel` en `.sectieKopGroot` heeft er zelf een van
   24ch, dus zonder dit staan hun blokken links en centreert de tekst binnen een
   doos die zelf niet in het midden staat. */
.site_sectieIntro__zqaDK[data-uitlijning='gecentreerd'] {
  text-align: center;
}

.site_sectieIntro__zqaDK[data-uitlijning='gecentreerd'] .site_sectieLabel__CiS2g,
.site_sectieIntro__zqaDK[data-uitlijning='gecentreerd'] .site_sectieKopGroot__xZC4z {
  margin-inline: auto;
}

/* Het kleine woord boven de kop.

   Dezelfde maatvoering als `.contactLabel` en `.heroTelefoonLabel`: dit is de
   derde plek waar de pagina een klein label in kapitalen zet, en die drie horen
   er hetzelfde uit te zien.

   `--op-vlak-accent` en niet `--kleur-accent`: op een omgekeerde sectie is de
   accentkleur van het palet vaak te donker, en dan verdwijnt het label. */
.site_site__SreoX .site_sectieLabel__CiS2g {
  margin-bottom: 0.75rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--op-vlak-accent);
}

/* De kop die bij dat label hoort.

   Geen eigen ondermarge zoals `.sectieKop` die heeft: die staat er alleen, deze
   staat in een blok dat zijn ruimte al draagt. De `max-width` in `ch` houdt hem
   op hoogstens twee regels — daarboven is het geen kop meer maar een alinea. */
/* Een paar woorden in een kop in de accentkleur.

   Waarom dit een klasse is en geen `<strong>` of `<em>`: dit is opmaak zonder
   betekenis. "Schilderwerk met oog voor detail" zegt niet dat die laatste drie
   woorden bélangrijker zijn — ze staan in een andere kleur omdat een kop van één
   kleur vlak leest. Een `<strong>` zou een schermlezer laten benadrukken wat
   niemand benadrukt heeft.

   Twee kleuren, en welke geldt hangt af van waar de kop staat:

     * op een sectie `--op-vlak-accent`, die per toon is nagerekend — op een
       omgekeerde sectie is dat niet eens dezelfde kleur (zie de toonladder);
     * op de hero-foto `--op-foto-accent`, die per sluier is nagerekend, want
       daar ligt geen kleur onder maar een onbekende foto. Zie
       `heroAccentkleur()`.

   Een hero zónder foto valt onder de eerste: dat is een getint vlak, en daar
   klopt de gewone accentkleur. */
.site_site__SreoX .site_kopAccent__gw8Lv {
  color: var(--op-vlak-accent);
}

.site_hero__ayLj5[data-foto='ja'] .site_kopAccent__gw8Lv {
  color: var(--op-foto-accent);
}

.site_site__SreoX .site_sectieKopGroot__xZC4z {
  max-width: 24ch;
  font-family: var(--font-display);
  font-size: calc(clamp(1.9rem, 3.8vw, 2.7rem) * var(--kop-schaal));
  font-weight: var(--gewicht-kop);
  line-height: 1.15;
  letter-spacing: var(--kop-spatiering);
}

/* --- diensten --------------------------------------------------------------- */

/* Het dienstenraster.

   Altijd dezelfde leesrichting — een zigzag-layout (tekst links, beeld rechts,
   dan omgekeerd) leest langzamer omdat het oog steeds moet zoeken waar de
   volgende regel begint. Wat wél verandert is het formáát van de kaarten: het
   raster telt zes kolommen en `data-vorm-kaart` bepaalt hoeveel daarvan een
   kaart pakt. Zie `dienstVormen()` voor welke kaart wat krijgt.

   Zes kolommen en niet drie, omdat drie geen halve kaart kent: met zes kan
   `gewoon` er drie pakken (de helft), `breed` alle zes, en houdt de uitgelichte
   kaart precies de andere helft over twee rijen. */
/* De straal van een dienstkaart: die van de vormtaal, maar nooit helemaal nul.

   `data-vorm='scherp'` zet `--radius` op 0, en dat kwam uit een tijd waarin de
   knoppen die vormtaal volgden: scherpe hoeken op de vlakken én op de knoppen,
   één taal. Sinds elke knop op elke site een pil is (zie de toelichting bij de
   vormtaal) is dat niet meer zo, en waren deze kaarten het enige perfect scherpe
   op een pagina vol ronde hoeken. Dat leest niet als een keuze maar als een
   kaart die zijn afronding kwijt is.

   `max()` en geen vaste waarde: bij `zacht` (12px) en `rond` (18px) verandert er
   niets, alleen de nulstand krijgt een bodem. Klein genoeg om scherp te blijven
   ogen, groot genoeg om bij de rest te horen.

   Bewust alleen hier en niet op elk vlak in het sjabloon. Hetzelfde argument
   geldt waarschijnlijk voor de tarievenkaarten en het formulier, maar dat is een
   ontwerpbeslissing over élke bestaande site en niet iets om er stilletjes bij
   te doen. */
.site_diensten__sjuqZ {
  --radius-dienst: max(var(--radius), 10px);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .site_diensten__sjuqZ {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Op tablet kan de uitgelichte kaart niet twee rijen naast twee andere staan
     — er passen er maar twee naast elkaar. Hij krijgt daar de volle breedte,
     wat hetzelfde doet: er is één kaart die eruit springt. */
  .site_diensten__sjuqZ[data-weergave='standaard'] .site_dienst__zyyLb[data-vorm-kaart='uitgelicht'],
  .site_diensten__sjuqZ[data-weergave='standaard'] .site_dienst__zyyLb[data-vorm-kaart='breed'] {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .site_diensten__sjuqZ {
    grid-template-columns: repeat(3, 1fr);
  }

  .site_diensten__sjuqZ[data-weergave='standaard'] {
    grid-template-columns: repeat(6, 1fr);
  }

  .site_diensten__sjuqZ[data-weergave='standaard'] .site_dienst__zyyLb {
    grid-column: span 3;
  }

  .site_diensten__sjuqZ[data-weergave='standaard'] .site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] {
    grid-column: span 3;
    grid-row: span 2;
  }

  .site_diensten__sjuqZ[data-weergave='standaard'] .site_dienst__zyyLb[data-vorm-kaart='breed'] {
    grid-column: span 6;
  }
}

/* Vier vaste vormen, te kiezen in het bewerkscherm. Geen instelbaar aantal
   kolommen: dat zou per site een andere breedte per kaart opleveren, en dan is
   de regellengte van de omschrijving niet meer te garanderen.

   `drie-koloms` staat hier niet: dat ís de basisregel hierboven, drie gelijke
   kolommen zonder uitzonderingen, en sinds migratie 0022 ook de standaard. De
   drie andere vormen zijn afwijkingen daarvan en staan daarom als override.

   `standaard` legt het ritme met een uitgelichte kaart eroverheen (zes kolommen,
   zie hierboven). `twee-koloms` is er voor diensten met een langere uitleg —
   twee bredere kaarten lezen prettiger dan drie smalle. `lijst` zet ze onder
   elkaar op volle breedte, voor een bedrijf met twee of drie diensten die stuk
   voor stuk uitleg verdienen. Onder 40rem is alles altijd één kolom; deze keuze
   gaat uitsluitend over wat er op een breed scherm gebeurt. */
@media (min-width: 62rem) {
  .site_diensten__sjuqZ[data-weergave='twee-koloms'] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.site_diensten__sjuqZ[data-weergave='lijst'] {
  grid-template-columns: 1fr;
}

/* Eén enkele kaart komt in het midden.

   Deze regel deed hiervoor het echte werk bij vier diensten: de vierde bleef
   alleen op een tweede rij achter en werd hier gecentreerd. Dat was de
   verzachting van een probleem dat er niet hoort te zijn — een losse kaart onder
   een rij van drie leest als een vergissing, waar je hem ook neerzet. Sinds
   `zichtbareDiensten()` toont deze vorm er precies drie, dus dat geval bestaat
   niet meer.

   Wat overblijft is de site met één dienst: `:last-child:nth-child(3n + 1)` is
   dan waar, en één kaart links in een raster van drie is een lege rij met iets
   in de hoek. Bij twee slaat hij niet aan, en dat klopt: twee kaarten naast
   elkaar vormen zelf al een groepje. */
@media (min-width: 62rem) {
  .site_diensten__sjuqZ[data-weergave='drie-koloms'] .site_dienst__zyyLb:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* Een kaart ligt óp de sectie, hij is er geen donkerder plek in.

   Hier stond een tint van 10% over `--vlak-basis`. De gedachte was goed — een
   kaart is dan overal even veel donkerder dan zijn sectie — maar de uitkomst
   was op een getinte sectie een kaart die nauwelijks van de achtergrond te
   onderscheiden was: 9% tint eronder, 10% erin. Vier van die vlakken naast
   elkaar lezen als één groot roze veld met tekst erop, en dat is precies wat er
   op de pedicurepagina te zien was.

   Nu andersom: de kaart neemt de páginakleur, dus hij is lichter dan een getinte
   sectie in plaats van donkerder, met een haarlijn en een zachte slagschaduw
   eromheen. Op een basissectie valt de vulling samen met de achtergrond en doen
   die twee het werk alleen — dat is genoeg, want ze staan er allebei.

   De schaduw is bewust bijna niets: `--kleur-tekst` op 7% in plaats van zwart,
   zodat hij bij een donker palet niet als een vuile vlek onder de kaart hangt.

   `color-mix` heeft een terugval nodig: browsers die het niet kennen (oudere
   Safari) krijgen de regel erboven en dus een kaart zonder schaduw, met randje. */
.site_dienst__zyyLb {
  /* Ruim, en dat is het verschil met de vorige versie.
     Drie kaarten met veel lucht erin lezen als drie blokken; dezelfde drie met
     krappe marges lezen als een tabel met randjes eromheen. De maat komt van de
     referentie waar dit op gebouwd is — daar is de binnenmarge ongeveer twee
     keer de regelhoogte van de tekst erin. */
  padding: 2.4rem 2.1rem;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-dienst);
  /* Nodig sinds een dienstkaart een foto kan dragen: die loopt met negatieve
     marges tot de rand door, en zonder dit steekt hij buiten de afronding uit.
     De slagschaduw hieronder valt bùiten de kaart en wordt hier niet door
     afgeknipt. */
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--kleur-tekst) 5%, transparent),
    0 8px 22px -12px color-mix(in srgb, var(--kleur-tekst) 12%, transparent);
}

/* Er stond hier een variant voor een omgekeerde sectie. Die is weg: hij kon
   nooit aan de beurt komen. `sectietonen()` geeft alleen de contactsectie de
   omgekeerde toon en laat de rest tussen `basis` en `getint` afwisselen, dus
   een dienstenkaart op een donker vlak bestaat niet — ook niet als een familie
   zijn secties in een andere volgorde zet, want die toewijzing is niet
   positioneel. */

/* De uitgelichte dienst. Sterker gekleurd, meer ruimte en een grotere kop —
   drie signalen die samen zeggen "dit is waar deze zaak om bekendstaat". Eén
   ervan zou te subtiel zijn om als keuze te lezen.

   Die sterkere kleur kan alleen omdat de tekst erop meebeweegt: op deze kaart
   staat álles in de volle tekstkleur, ook de omschrijving en het pictogram. Bij
   26% halen `tekstZacht` (de omschrijving) en `accent` (het pictogram) de norm
   niet meer — zie de tabel bij `VLAKTINT`. */
/* De uitgelichte kaart ligt op dezelfde laag als de rest, hij is alleen getint.

   De tint mengt over `--kleur-achtergrond` en niet meer over `--vlak-basis`, om
   dezelfde reden als bij `.dienst` hierboven: dan blijft hij familie van zijn
   buren in plaats van in de sectie weg te zakken terwijl die buren er juist
   bovenop liggen. */
.site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] {
  padding: 2.25rem 2.1rem;
  background: var(--vlak-basis);
  background: color-mix(in srgb, var(--kleur-tint) 26%, var(--kleur-achtergrond));
}

.site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] .site_dienstTitel__MrmQy {
  font-size: calc(1.55rem * var(--kop-schaal));
}

.site_site__SreoX .site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] .site_dienstTekst__RS_nX,
.site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] .site_dienstIcoon__AMuqV {
  color: var(--op-vlak);
}

.site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] .site_dienstIcoon__AMuqV {
  width: 2.1rem;
  height: 2.1rem;
}

/* Het pictogram: één lijntekening in de accentkleur, boven de titel. Klein
   genoeg om niet met de kop te concurreren, groot genoeg om de kaart een begin
   te geven dat geen tekst is. */
.site_dienstIcoon__AMuqV {
  display: block;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 1.15rem;
  color: var(--op-vlak-accent);
}

/* De foto boven op een dienstkaart.

   Vierkant, en dat is een keuze en geen technische beperking: drie kaarten naast
   elkaar met elk hun eigen beeldverhouding lopen in hoogte uiteen, en dan is het
   raster geen raster meer. Een vierkant kader werkt bovendien voor zowel een
   liggende als een staande bronfoto — er valt altijd iets weg, en wélk deel je
   ziet is de knop in het bewerkscherm.

   Hij loopt tot de rand van de kaart door en niet tot de binnenmarge. Een foto
   met een strook vulling eromheen leest als een plaatje dat in de kaart is
   geplakt; tot de rand leest hij als de bovenkant van de kaart zelf. Vandaar de
   negatieve marges, precies zo groot als de binnenmarge van `.dienst`. */
/* `.site .dienstFoto` en niet `.dienstFoto`, en dat is de hele reparatie.

   De beeldreset bovenaan is `.site img { max-width: 100% }` — een klasse plus een
   elementnaam, dus specifieker dan een losse klasse. Een kale `.dienstFoto` met
   `max-width: none` verloor het daar stilzwijgend van: de breedte hieronder werd
   teruggeknepen tot de tekstbreedte, de foto schoof met zijn negatieve marge naar
   links, en rechts bleef een strook ter grootte van de binnenmarge open. Precies
   het scheve beeld dat eruitzag als een verkeerd uitgelijnd plaatje.

   De reset zelf blijft staan: die houdt een te grote foto binnen zijn kader. Dít
   is de ene plek waar een foto er bewust búíten hoort te vallen. */
.site_site__SreoX .site_dienstFoto__riorY {
  display: block;
  width: calc(100% + 2 * 2.1rem);
  max-width: none;
  margin: -2.4rem -2.1rem 1.5rem;
  aspect-ratio: 1 / 1;
  -o-object-fit: cover;
     object-fit: cover;
  /* Geen eigen afronding: de kaart heeft `overflow: hidden`, dus de bovenhoeken
     worden door de kaart zelf geknipt. Hem hier nóg eens zetten levert bij een
     afwijkende straal twee bochten over elkaar op. */
  /* De kaart heeft zelf al een tint; hieronder is hij niet te zien, maar tijdens
     het laden voorkomt dit een wit vlak dat oplicht en weer wegvalt. */
  background: var(--kleur-rand);
}

/* De uitgelichte kaart heeft dezelfde zijmarge maar een andere bovenmarge, dus
   alleen die hoeft mee. Zonder dit steekt de foto er bovenaan overheen.

   Alleen vanaf twee kolommen: op een telefoon staat de foto onderaan de kaart en
   zou deze regel hem over de tekst heen trekken. Zie hieronder. */
@media (min-width: 40rem) {
  .site_site__SreoX .site_dienst__zyyLb[data-vorm-kaart='uitgelicht'] .site_dienstFoto__riorY {
    margin-top: -2.25rem;
  }
}

/* Op een telefoon staat de foto ónder de tekst.

   De aanleiding is de overgang vanuit de hero. Die eindigt met een foto, en de
   dienstensectie begon er meteen weer mee: twee beelden op één scherm met alleen
   een sectiekop ertussen. Dan weet je niet meer waar je naar kijkt.

   Omgedraaid ontstaat er een ritme — kop, tekst, beeld, kop, tekst, beeld — en
   leest elke foto als het antwoord op de regel erboven in plaats van als een
   plaatje dat je nog moet plaatsen.

   Alleen op één kolom. Vanaf twee kolommen staan de kaarten naast elkaar en
   vormen de foto's samen een rij; daar is beeld-boven juist wat het raster
   leesbaar maakt, want dan liggen de koppen op één lijn.

   `order` en niet een andere volgorde in de HTML: het sjabloon rendert de kaart
   één keer, en op een breed scherm hoort de foto er wél bovenaan te staan. In de
   voorleesvolgorde blijft de foto voorop, en dat mag: hij is decoratief en heeft
   een lege `alt`. */
@media (max-width: 39.999rem) {
  .site_dienst__zyyLb {
    display: flex;
    flex-direction: column;
    /* Krapper dan op een breed scherm, en dat is geen andere smaak maar een
       andere maat. De binnenmarge van 2,4rem is gekozen voor een kaart die naast
       twee andere staat; op een telefoon is diezelfde kaart de volle breedte, en
       dan is die lucht 77 pixels die je drie keer wegscrollt. */
    padding: 1.6rem 1.5rem;
  }

  .site_site__SreoX .site_dienstFoto__riorY {
    order: 1;
    /* Gespiegeld: de lucht zit nu bóven de foto en de negatieve marge onder.
       De maten volgen de kleinere binnenmarge hierboven. */
    width: calc(100% + 2 * 1.5rem);
    margin: 1.25rem -1.5rem -1.6rem;
    /*
     * Een vaste hoogte in plaats van vierkant.
     *
     * De foto's zijn 1080 bij 1080, en vierkant betekent op een telefoon: zo hoog
     * als het scherm breed is. Op een toestel van 390 pixels werd dat een beeld
     * van 330 hoog, en met drie kaarten onder elkaar scrol je een half scherm per
     * foto. Dat is de foto niet waard; hij staat er om de tekst erboven te
     * ondersteunen.
     *
     * 14rem (224 pixels) is ongeveer twee derde daarvan en houdt het beeld nog
     * groot genoeg om iets te zien. Een hoogte en geen tweede `aspect-ratio`,
     * omdat het probleem de hóógte is: met een verhouding krijgt een brede
     * telefoon alsnog een hoger beeld dan een smalle.
     *
     * Wat het kost is een uitsnede: van een vierkante foto blijft op deze
     * breedte ruwweg de middelste twee derde over. De uitsnede zit op 38% van
     * boven — dezelfde stand als elders — dus wat wegvalt is vooral de onderrand.
     */
    aspect-ratio: auto;
    height: 14rem;
  }
}

.site_site__SreoX .site_dienstTitel__MrmQy {
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-size: calc(1.35rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop-klein);
  line-height: 1.25;
}

/* Een regelhoogte van 1,6 en niet de 1,45 van de rest.
   Deze alinea is drie regels lang in een kolom van een kaartbreedte; dat is
   precies de maat waarop krappe regelafstand als een blok tekst gaat lezen in
   plaats van als een zin. */
.site_site__SreoX .site_dienstTekst__RS_nX {
  max-width: var(--maxregel);
  color: var(--op-vlak-zacht);
  font-size: 1.02rem;
  line-height: 1.6;
}

.site_site__SreoX .site_overTekst__y_YRA {
  max-width: var(--maxregel);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
}

/* --- de drie redenen onder die alinea ---------------------------------------- */

/* Geen kaarten en geen pictogrammen: een streep boven elke kolom.

   Dit blok staat vlak boven of onder de dienstenkaarten, en nóg een rij kaarten
   ernaast maakt van de pagina een stapel dozen. Wat deze drie nodig hebben is
   scheiding, niet nadruk — een lijn in de accentkleur doet dat met één regel CSS
   en leest als een specificatie in plaats van als reclame.

   Een `<ul>` en geen serie `<div>`'s: het zijn er drie van dezelfde soort, en dat
   is precies wat een lijst is. De opsommingstekens gaan eraf in de reset
   bovenaan. */
/* `.site` ervoor, en dat is hier geen stijlkeuze maar de reset ontwijken: die
   zet `margin: 0` op élke `.site ul`, en dat is specifieker dan een kale klasse.
   Zonder dit prefix plakt de rij tegen de alinea erboven. */
.site_site__SreoX .site_troeven__OIbmS {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  margin-top: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 46rem) {
  .site_site__SreoX .site_troeven__OIbmS {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.site_troef__UpUnO {
  padding-top: 1rem;
  border-top: 2px solid var(--op-vlak-accent);
}

.site_site__SreoX .site_troefTitel__nOVio {
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: calc(1.1rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop-klein);
  line-height: 1.25;
}

.site_site__SreoX .site_troefTekst__uRPoe {
  max-width: var(--maxregel);
  color: var(--op-vlak-zacht);
  font-size: 0.98rem;
}

/* --- het persoonlijke blok ------------------------------------------------------ */

/* Foto links, tekst rechts.

   De foto krijgt de smallere kolom en de tekst de bredere: dit blok moet gelezen
   worden, het beeld is er om de toon te zetten. Op een telefoon staan ze onder
   elkaar met het beeld eerst, want dan is de foto de aankondiging van wat er
   komt in plaats van een plaatje naast een alinea.

   `align-items: center` en niet `start`: de kolommen verschillen in hoogte
   (een staande foto naast vier regels tekst), en dan hangt een bovenaan
   uitgelijnde tekstkolom zichtbaar scheef in het blok. */
.site_persoonlijk__krT0q {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 52rem) {
  .site_persoonlijk__krT0q[data-beeld='ja'] {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Zonder beeld is er niets om naast te staan. Dan wordt het één kolom die niet
   over de volle breedte uitloopt: een alinea van 80 tekens leest niet. */
.site_persoonlijk__krT0q[data-beeld='nee'] {
  max-width: 46rem;
}

.site_persoonlijkBeeld__bFsMu {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kleur-rand);
}

.site_persoonlijkFoto__p1wfJ {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* De kop staat hier in een smallere kolom dan boven de dienstenkaarten, dus
   breekt hij eerder. 16ch in plaats van 24ch houdt hem op twee regels naast de
   foto in plaats van op vier. */
.site_persoonlijkTekst__dDX8r .site_sectieKopGroot__xZC4z {
  max-width: 16ch;
}

.site_site__SreoX .site_persoonlijkAlinea__vvAEt {
  margin-top: 1.25rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2vw, 1.15rem);
  color: var(--op-vlak-zacht);
}

/* De belofte: één regel in een eigen vlakje.

   Hetzelfde recept als een dienstenkaart — paginakleur, haarlijn, zachte
   schaduw — zodat het als hetzelfde soort element leest en niet als een
   waarschuwing. Het vinkje ervoor is de enige versiering.

   `align-items: flex-start` in plaats van `center`: op een smal scherm loopt de
   regel over twee regels door, en dan hoort het vinkje bij de eerste te blijven
   staan in plaats van in het midden te zweven. */
.site_site__SreoX .site_persoonlijkBelofte__8L99C {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 1.75rem;
  max-width: 34rem;
  padding: 0.9rem 1.2rem;
  background: var(--kleur-achtergrond);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--kleur-tekst) 5%, transparent);
  font-size: 0.98rem;
  font-weight: var(--gewicht-kop-klein);
  line-height: 1.45;
}

.site_persoonlijkBelofteIcoon__Z7rot {
  width: 1.15rem;
  height: 1.15rem;
  /* Optisch op de eerste regel uitlijnen: de regelhoogte is 1,45 en het icoon
     is vierkant, dus zonder dit duwtje hangt het net te hoog. */
  margin-top: 0.15rem;
  flex-shrink: 0;
  color: var(--op-vlak-accent);
}

/* De wegwijzer onder de dienstkaarten, naar de volledige lijst.

   Een tekstlink en geen knop: de knop op deze pagina is de CTA, en die hoort er
   één te zijn. Uitgelijnd met de kaarten erboven en niet gecentreerd, zodat hij
   leest als het vervolg van de kolom en niet als een tweede oproep. */
.site_site__SreoX .site_dienstenMeer__jGbsg {
  display: inline-block;
  margin-top: 1.5rem;
  color: var(--op-vlak-accent);
  font-family: var(--font-ui);
  font-weight: var(--gewicht-kop-klein);
  text-decoration: none;
}

.site_site__SreoX .site_dienstenMeer__jGbsg:hover,
.site_site__SreoX .site_dienstenMeer__jGbsg:focus-visible {
  text-decoration: underline;
}

/* --- tarieven ----------------------------------------------------------------- */

/* De prijslijst zoals hij in een salon aan de muur hangt: omschrijving links,
   bedrag rechts, een dunne lijn ertussen.

   Geen kaarten, en dat is het hele punt. Een prijslijst kan vijftien regels
   lang zijn; vijftien kaarten naast elkaar is een raster waarin je geen twee
   bedragen meer met elkaar kunt vergelijken. Onder elkaar met de bedragen
   uitgelijnd kan dat wel, en dat is precies waarvoor iemand hier komt. */
.site_site__SreoX .site_tarieven__H_K67 {
  display: flex;
  flex-direction: column;
  max-width: 44rem;
}

.site_site__SreoX .site_tariefRegel__CT6rB {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--kleur-rand);
}

.site_site__SreoX .site_tariefRegel__CT6rB:last-child {
  border-bottom: 0;
}

/* Hier stond een stippellijn achter de omschrijving, die het oog naar het bedrag
   rechts moest leiden. Die is eruit.

   Op een lijst mét bedragen deed hij zijn werk. Op een lijst zonder bedragen —
   het gewone geval sinds "op aanvraag" niet meer achter elke regel staat — liep
   hij vlak boven de scheidingslijn van de regel eronder, en dan zie je twee
   lijnen onder elkaar waarvan er één nergens heen wijst. Met een toelichting in
   de tweede kolom is er bovendien niets meer om naartoe te leiden: die begint
   direct onder de naam. */
.site_site__SreoX .site_tariefOmschrijving__STSoh {
  flex: 1;
  font-weight: var(--gewicht-kop-klein);
}

/* De toelichting onder de naam: hele breedte, dus de flexregel breekt. Kleiner
   en rustiger dan de naam, want hij hoort erbij en concurreert er niet mee. */
.site_site__SreoX .site_tariefToelichting__3rqB5 {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--op-vlak-zacht);
}

.site_site__SreoX .site_tariefPrijs__ds4ty {
  flex-shrink: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: var(--gewicht-kop-klein);
  white-space: nowrap;
}

/* Het blok onder de lijst.

   Hier stond een omkaderd wit vlak, met het argument dat een losse alinea zou
   lezen als het staartje van de laatste regel. Dat argument klopte, de oplossing
   niet: een witte kaart op een gekleurde sectie trekt meer aandacht dan de
   prijslijst waar hij bij hoort, en op een lichte achtergrond valt hij uit de
   pagina.

   Wat het nu doet is hetzelfde met minder: een streep boven het blok scheidt het
   van de laatste regel, en de ruimte eromheen doet de rest. Geen vlak, geen
   kader, geen tweede achtergrondkleur op één sectie. */
.site_site__SreoX .site_tarievenSlot__QWT1n {
  max-width: 44rem;
  margin-top: 2rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--kleur-rand);
}

.site_site__SreoX .site_tarievenSlotKop__Yb5dD {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--gewicht-kop);
  line-height: 1.3;
}

.site_site__SreoX .site_tarievenSlotTekst__94ehz {
  margin: 0 0 1.25rem;
  color: var(--op-vlak-zacht);
}

/* Staat de kop er wél (een lijst zonder bedragen), dan hoort de zin eronder er
   dichter tegenaan dan tegen de knop. */
.site_site__SreoX .site_tarievenSlotKop__Yb5dD + .site_tarievenSlotTekst__94ehz {
  margin-top: 0.5rem;
}

/* --- producten ---------------------------------------------------------------- */

.site_site__SreoX .site_producten__1JVFz {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  list-style: none;
}

.site_site__SreoX .site_product__iJCLL {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--kleur-rand);
  /* Stond op `--radius-kaart`, en die variabele bestaat nergens: een onbekende
     custom property maakt de hele regel ongeldig, dus productkaarten hadden op
     élke site scherpe hoeken — ook bij een vormtaal die rond is. Viel niet op
     omdat de productensectie zich alleen vult wanneer iemand hem met de hand
     invult. */
  border-radius: var(--radius);
  /* Dezelfde sport als een dienstkaart, en niet een eigen zachtere tint: de
     ladder in `VLAKTINT` is per palet op contrast doorgerekend en een vierde
     sterkte zou daarbuiten vallen. Een test bewaakt dat. */
  background: color-mix(in srgb, var(--kleur-tint) 10%, var(--vlak-basis));
}

.site_site__SreoX .site_productNaam__JDexy {
  font-size: calc(1.05rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop-klein);
  line-height: 1.3;
}

.site_site__SreoX .site_productTekst__svJfh {
  color: var(--op-vlak-zacht);
  font-size: 0.94rem;
}

/* Onderaan de kaart, ook als de omschrijving korter is dan die van de buurman:
   anders staan de bedragen op ongelijke hoogte en lezen ze niet als een reeks. */
/* De alinea boven de productenlijst, met het beeld ernaast.

   Dezelfde verdeling als het persoonlijke blok: tekst links, vierkant beeld
   rechts, en op één kolom onder elkaar. Bewust niet de foto eerst — wat er staat
   is een uitspraak over het merk waar deze zaak mee werkt, en het beeld is de
   bevestiging daarvan. */
.site_productenIntro__rLWBM {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 52rem) {
  .site_productenIntro__rLWBM[data-beeld='ja'] {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
}

.site_site__SreoX .site_productenIntroTekst__9Iuwt {
  max-width: var(--maxregel);
  font-size: clamp(1.02rem, 1.9vw, 1.12rem);
  color: var(--op-vlak-zacht);
}

.site_productenBeeld__FxlR6 {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kleur-rand);
}

.site_productenFoto__gCTIV {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.site_site__SreoX .site_productPrijs__DFCAQ {
  margin-top: auto;
  padding-top: 0.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: var(--gewicht-kop-klein);
}

/* --- openingstijden in de contactlijst ------------------------------------------ */

/* Geen eigen sectie meer maar een regel bij het adres en het nummer, want zo
   zoekt een bezoeker ze: openingstijden en bereikbaarheid zijn één vraag.

   Zeven dagen in een raster van twee kolommen en niet in een flexlijst, want de
   tijden horen onder elkaar uit te lijnen; anders staat "09:00 tot 17:00" bij de
   ene dag verder naar rechts dan bij de andere en moet je zoeken. */
.site_site__SreoX .site_openingstijden__FZfrS {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  gap: 0.1rem 1.25rem;
  margin-top: 0.15rem;
}

.site_site__SreoX .site_openingsregel__Y1ESS {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}

.site_site__SreoX .site_openingsdag__Ot7nf {
  text-transform: capitalize;
}

.site_site__SreoX .site_openingsuren__PD_El {
  font-variant-numeric: tabular-nums;
}

/* Een gesloten dag hoort te lezen als een gesloten dag, niet als een tijd die
   je nog moet ontcijferen. Zachter, maar niet zó zacht dat hij onder de norm
   valt: `--op-vlak-zacht` is dezelfde kleur die de rest van de bijtekst voert
   en is per palet doorgerekend. */
.site_site__SreoX .site_openingsregel__Y1ESS[data-gesloten='ja'] .site_openingsuren__PD_El {
  color: var(--op-vlak-zacht);
}

/* --- procesblok --------------------------------------------------------------- */

/* Een genummerde reeks en geen kaartenraster. Dit is het enige blok op de
   pagina waar de vólgorde de inhoud is — stap 2 na stap 1 — en dat hoort de
   opmaak te laten zien. Kaarten zouden er drie gelijkwaardige dingen van maken.

   De verbindingslijn tussen de cijfers maakt het expliciet. Op één kolom loopt
   hij verticaal mee; vanaf drie kolommen wordt hij horizontaal. */
.site_proces__T6x5T {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  counter-reset: stap;
}

@media (min-width: 52rem) {
  .site_proces__T6x5T {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }
}

.site_processtap__SYLjN {
  position: relative;
}

/* Elke stap staat links in zijn eigen kolom, op elk formaat.

   Hier heeft een gecentreerde versie gestaan: cijfer en tekst midden in de
   kolom, symmetrisch om het midden van de pagina. Op zichzelf zag dat er net
   uit, maar niet naast de rest — de sectiekop erboven, de dienstenkaarten, de
   openingstijden en de voettekst beginnen allemaal op dezelfde linkerlijn. Eén
   blok dat daarvan afwijkt leest als een fout, hoe netjes het intern ook is
   uitgelijnd. De leesas van de pagina wint van de symmetrie van één sectie.

   Dat betekent wel dat de rij rondjes op een breed scherm links van het midden
   eindigt. Dat is de prijs, en het is de goede kant om aan te verliezen. */
.site_processtapNummer__Vom1O {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kleur-tint) 26%, var(--vlak-basis));
  color: var(--op-vlak);
  font-family: var(--font-display);
  font-size: calc(1.1rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop);
  /* Cijfers naast elkaar in gelijke rondjes: dan hoort een 1 net zo breed te
     zijn als een 3, ook bij een letter die dat normaal niet doet. */
  font-variant-numeric: tabular-nums;
}

/* De lijn die de stappen verbindt. Decoratief, dus hij verdwijnt op de laatste
   stap en bij één kolom. */
@media (min-width: 52rem) {
  /* De lijn loopt van de rand van dit rondje naar de rand van het volgende.

     Beide rondjes staan links in hun kolom, dus beide uiteinden zijn een vaste
     maat: 3,25rem is de breedte van het rondje (2,75) plus lucht (0,5), en
     -2rem is de gap van 2,5rem min diezelfde lucht aan de andere kant. */
  .site_processtap__SYLjN:not(:last-child) .site_processtapNummer__Vom1O::after {
    content: '';
    position: absolute;
    top: 1.375rem;
    left: 3.25rem;
    right: -2rem;
    height: 2px;
    background: var(--op-vlak-accent);
    opacity: 0.3;
  }
}

.site_site__SreoX .site_processtapTitel__ENyzk {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: calc(1.15rem * var(--kop-schaal));
  font-weight: var(--gewicht-kop-klein);
  line-height: 1.25;
}

.site_site__SreoX .site_processtapTekst__K__rH {
  max-width: var(--maxregel);
  color: var(--op-vlak-zacht);
  font-size: 0.98rem;
}

/* --- galerij ---------------------------------------------------------------- */

/* Twee vormen, en welke er geldt volgt uit het aantal foto's dat de curatie
   overhield — niet uit een instelling. Bij twee of drie bruikbare foto's is het
   driekoloms raster de verkeerde keuze: je krijgt drie kleine cellen waarin niets
   goed te zien is, en bij twee foto's zelfs een gat. Grote beelden op 4:3 in
   maximaal twee kolommen laten dezelfde foto's iets waard zijn. */
.site_galerij__JCUjB {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 34rem) {
  .site_galerij__JCUjB[data-vorm-galerij='raster'] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 48rem) {
  .site_galerij__JCUjB[data-vorm-galerij='groot'] {
    gap: 1.5rem;
    grid-template-columns: repeat(2, 1fr);
  }

  /* Een oneven aantal grote beelden eindigt anders met een halve lege rij. De
     laatste foto pakt dan de volle breedte — bij één foto is dat meteen de
     eerste, en dan is de "galerij" gewoon één breed beeld. Precies goed. */
  .site_galerij__JCUjB[data-vorm-galerij='groot'] > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 62rem) {
  .site_galerij__JCUjB[data-vorm-galerij='raster'] {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site_galerijItem__RGtU1 {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--kleur-rand);
}

/* Vaste beeldverhouding: het vlak is er al voordat de foto geladen is, dus de
   pagina verspringt niet tijdens het laden. De waarden hier zijn de terugval —
   het sjabloon zet de verhouding van de sectie inline (zie `VERHOUDING` in
   `core/media/fotocuratie.ts`) en de curatie de uitsnede per foto. `center` is
   opzettelijk niet de terugval: het midden van een foto is zelden het onderwerp
   ervan. */
.site_afbeelding__tfLpE {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 42%;
     object-position: 50% 42%;
}

/* --- contact ---------------------------------------------------------------- */

/* De contactsectie sluit de pagina af, met een rechte rand.

   Er zat een curve op: ronde bovenhoeken plus een negatieve marge, zodat het
   blok over de vorige sectie heen schoof. Dat werkte niet samen met wat erin
   staat. Het formulier is zelf een afgerond paneel, en twee gebogen vormen die
   elkaar op een paar centimeter overlappen vechten om dezelfde plek — je ziet
   twee rondingen die niet dezelfde straal hebben in plaats van één afgerond blok.

   Een rechte rand lost dat op zonder er iets voor terug te vragen. Deze sectie
   is de enige op de pagina die van polariteit wisselt; dat contrast ís de
   overgang, en zo'n sprong hoort scherp te zijn. De zachte overgangen elders
   blijven waar ze horen: tussen twee tinten die dicht bij elkaar liggen.

   Extra ruimte bovenaan omdat de rand niets meer verzacht — de kop moet niet
   tegen de vorige sectie aan komen te staan. */
.site_contact__dhIqR {
  padding-top: calc(var(--ruimte-sectie) + 1rem);
}

/* Twee kolommen die allebei iets doen: links de gegevens, rechts de knoppen
   waarmee je vanaf deze pagina appt, belt of mailt. */
.site_contactRaster__ODcDD {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 48rem) {
  .site_contactRaster__ODcDD {
    grid-template-columns: 1fr auto;
    gap: 3.5rem;
  }

  /* Staan er knoppen in de tweede kolom, dan krijgt die kolom een vaste
     maat. `auto` zou hem laten krimpen tot de breedte van het langste woord —
     een smalle strook knoppen naast een halflege sectie.

     De maat staat bewust hier en niet op de knoppen zelf: een `width` op het
     element telt mee als minimale kolombreedte, en dan loopt de sectie op een
     telefoon buiten beeld. Zo blijft de kolom onder 48rem gewoon `1fr`. */
  .site_contactRaster__ODcDD[data-knoppen='ja'] {
    /* Minstens 21rem, en breder als de kop erboven dat vraagt: die staat op
       één regel (zie `.contactKnoppenKolom .sectieKop`) en "Vraag direct een
       offerte aan" is langer dan "Maak direct een afspraak". */
    grid-template-columns: 1fr minmax(21rem, max-content);
  }

  /* De kop boven de knoppen op één regel, net als de sectiekop ernaast.
     Alleen vanaf 48rem: daaronder is het raster één kolom en mag hij breken. */
  .site_site__SreoX .site_contactKnoppenKolom__QgmDN .site_sectieKop__obGwF {
    max-width: none;
    white-space: nowrap;
  }
}

/* Label boven de waarde, en pas naast elkaar zodra er ruimte voor is.

   ── Wat er misging ────────────────────────────────────────────────────────

   Hier stond `grid-template-columns: 7rem 1fr`. Vijf van de zes labels passen
   daarin; "OPENINGSTIJDEN" niet. Dat is veertien tekens in kapitalen mét
   letterspatiëring, en dat loopt op ongeveer 8,1rem uit. Een gridcel knipt niets
   af: het label liep gewoon zijn kolom uit, at de tussenruimte op en plakte tegen
   de tekst ernaast. Precies bij de regel met de langste waarde, dus het viel ook
   nog eens het meest op.

   ── Waarom niet gewoon die kolom breder ───────────────────────────────────

   Dat lost het op een breed scherm op en maakt het op een telefoon erger: 8,5rem
   van een scherm van 390 pixels is een derde van de breedte, alleen voor een
   woord dat je één keer leest. De waarde die overblijft is dan zó smal dat
   "Wij werken op afspraak" over drie regels breekt.

   Onder elkaar is daar het antwoord op, en dat is meteen de gewone oplossing voor
   een definitielijst op een smal scherm. Vanaf 34rem is er ruimte genoeg voor
   twee kolommen, en dán mag de linker breed genoeg zijn voor het langste label. */
.site_contactRegel__u85f9 {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--op-vlak) 20%, transparent);
}

@media (min-width: 34rem) {
  .site_contactRegel__u85f9 {
    /* 9rem en geen 7: het langste label is "OPENINGSTIJDEN" en dat meet bij
       0,8rem in kapitalen met 0,1em spatiëring rond de 8,5rem. De halve rem die
       overblijft is speling voor de andere lettertypes — elk typografiecluster
       brengt zijn eigen letter mee, en die zijn niet even breed.

       Een vaste maat en geen `max-content`, want elke regel is zijn eigen grid:
       met `max-content` krijgt elke rij een andere kolombreedte en staan de
       waarden niet meer onder elkaar. */
    grid-template-columns: 9rem 1fr;
    gap: 1rem;
  }
}

.site_contactRegel__u85f9:last-child {
  border-bottom: 0;
}

/* Het label staat altijd zichtbaar naast de waarde — niet als placeholder die
   verdwijnt zodra er iets staat. */
.site_contactLabel__cZKW9 {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--op-vlak-zacht);
  /* Op een smal scherm staat het label bóven de waarde, en dan hoort de
     letterspatiëring niet aan de rechterkant een gat te laten. */
  padding-right: 0.1em;
}

.site_contactWaarde__ZR21R {
  overflow-wrap: anywhere;
}

/* De socialmedia-regel: een rij beeldmerken in plaats van een rij URL's.

   Hiervoor stond hier per platform de volledige link als tekst, en dat was bij
   een Facebook-pagina van een klein bedrijf een adres van honderd tekens dat
   over twee regels brak. Een bezoeker klikt op zo'n teken; hij typt het niet
   over. */
/* De negatieve marge zit op de rij en niet op de links.

   Hij stond op elke link, en dat is precies één keer te vaak: bedoeld was om het
   éérste icoon uit te lijnen met de tekst van de regels erboven, maar zo trok
   ook elke volgende link zichzelf naar zijn buurman toe. Met een tussenruimte
   van 5,6 pixels tegen twee keer 9,6 pixels marge schoven de plaatjes 3,2 pixels
   over elkaar heen — op een telefoon goed te zien, want daar staan ze het
   dichtst op elkaar.

   Op de rij doet dezelfde verschuiving wat er stond: het blok komt links en
   verticaal op zijn plek, en de links binnenin houden gewoon hun tussenruimte.
   Dat repareert meteen het tweede geval: bij drie of meer platforms brak de rij
   naar een volgende regel, en die schoof met een negatieve bovenmarge óók in de
   vorige. */
.site_socialRij__Ok49O {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  /*
   * Verticaal compenseert de marge het raakvlak, dat hoger is dan een tekstregel.
   * Horizontaal is hij precies de inspringing van het plaatje binnen dat
   * raakvlak, en geen pixel meer: dan staat de líjnkant van het eerste beeldmerk
   * op dezelfde as als het adres en het telefoonnummer erboven.
   *
   * Berekend en niet ingetypt. Hier stond -0,6rem, en dat trok het beeldmerk
   * vier pixels de kolom uit — net genoeg om scheef te lijken zonder dat je ziet
   * waarom. Zo blijft het kloppen als de maten ooit veranderen.
   */
  margin: -0.6rem 0 -0.6rem calc((2.1rem - 2.75rem) / 2);
}

/* Het raakvlak is groter dan de tekening: 44 bij 44 pixels is de maat waarop een
   duim betrouwbaar raakt wat hij bedoelt. */
.site_socialLink__YvViG {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-knop);
  color: var(--op-vlak-accent);
  transition: background-color 0.15s ease;
}

.site_socialLink__YvViG:hover .site_socialBadge__eAwih {
  transform: scale(1.08);
}

/* Het ronde plaatje in de huiskleur van het platform.

   De ring eromheen is geen versiering maar een ondergrens. De contactsectie
   staat op `omgekeerd`, dus op de tekstkleur van het palet — en daar wordt het
   zwarte TikTok-plaatje 1,1:1 tegen `fotograaf-galerie` en het LinkedIn-blauw
   2,4:1 tegen `rust-salie`. Dat is onzichtbaar respectievelijk te zwak voor de
   3:1 die een tekening nodig heeft. Met deze ring heeft elk plaatje altijd een
   rand tegen de ondergrond, ongeacht welk palet eronder ligt.

   Het merk zelf blijft ongemoeid: de ring valt buiten de cirkel. */
.site_socialBadge__eAwih {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--op-vlak) 40%, transparent);
  transition: transform 0.15s ease;
}

.site_socialIcoon__0xOjR {
  width: 1.15rem;
  height: 1.15rem;
}

/* --- contactknoppen --------------------------------------------------------- */

/* Staan in de tweede kolom van `.contactRaster`, op de plek waar tot
   05-09-2026 het contactformulier stond.

   Geen eigen kleuren: alles komt uit de toon van de sectie. Op de omgekeerde
   afsluiting is dat een licht vlak op de donkere kleur, met de tekst in
   `--op-vlak`. Alle drie hetzelfde: een opvallende eerste knop trok de
   aandacht naar WhatsApp, en dat was niet nodig (05-09-2026). Zo werkt het
   voor elk palet, met dezelfde contrastgaranties als de rest van de sectie. */
.site_contactKnoppenKolom__QgmDN {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

/* De linkerkolom: de sectiekop en de lijst eronder. De kop boven de knoppen
   is dezelfde `.sectieKop`, dus beide kolommen beginnen op dezelfde hoogte. */
.site_contactGegevens___vj1N {
  min-width: 0;
}

.site_site__SreoX .site_contactKnoppen___GQHl {
  display: grid;
  gap: 0.85rem;
  padding: 0;
  list-style: none;
  width: 100%;
  min-width: 0;
}

.site_contactKnop__ts5Jl {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border: 1px solid color-mix(in srgb, var(--op-vlak) 32%, transparent);
  border-radius: var(--radius-knop);
  background: color-mix(in srgb, var(--op-vlak) 12%, transparent);
  color: var(--op-vlak);
  font-family: var(--font-ui);
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.site_contactKnop__ts5Jl:hover {
  background: color-mix(in srgb, var(--op-vlak) 18%, transparent);
  transform: translateY(-1px);
}

.site_contactKnopIcoon__Fq6gf {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site_contactKnopTekst__YfXbZ {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.site_contactKnopKop__fwN87 {
  font-size: 1rem;
  font-weight: var(--gewicht-cta);
  line-height: 1.2;
}

/* Het nummer of adres als gewone tekst: wie op een computer zit zonder
   mailprogramma of beltoets kan het zo overtikken. */
.site_contactKnopWaarde__SbYkw {
  font-size: 0.9rem;
  line-height: 1.3;
  opacity: 0.8;
  overflow-wrap: anywhere;
}

/* --- voettekst en notities --------------------------------------------------- */

/* De voettekst staat ónder de contactsectie, op de paginakleur.

   Hij stond een tijdje binnen die sectie, onder een haarlijn. De gedachte was
   dat het donkere blok de pagina dan echt afsluit. In de praktijk las het
   andersom: dit is geen onderdeel van de contactsectie maar een opmerking óver
   de pagina — "voorbeeldontwerp, nog niet gepubliceerd" gaat niet over hoe je
   contact opneemt. Op de tekstkleur van het donkere blok kwam hij bovendien mee
   als inhoud in plaats van als bijschrift.

   Geen rand erboven: de kleuromslag van het donkere blok naar de paginakleur is
   de scheiding al, en een lijn daar bovenop is een streep in een naad. */
.site_voettekst__N7dPX {
  padding: 1.4rem clamp(1.25rem, 5vw, 3rem) 2rem;
  background: var(--kleur-achtergrond);
}

.site_voettekstBinnen__X5kgx {
  max-width: var(--maxbreedte);
  margin: 0 auto;
}

.site_site__SreoX .site_voetregel__fM_lC {
  max-width: var(--maxregel);
  color: var(--kleur-tekst-zacht);
  font-size: 0.85rem;
  line-height: 1.6;
}

.site_site__SreoX .site_voetregel__fM_lC + .site_voetregel__fM_lC {
  margin-top: 0.35rem;
}

/* --- compacte belbalk (alleen spoed, alleen mobiel) -------------------------- */

.site_belbalk__N3BtF {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  padding: 0.6rem 1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: var(--kleur-achtergrond);
  border-top: 1px solid var(--kleur-rand);
}

.site_belknop__7yc1e {
  display: block;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-knop);
  background: var(--kleur-cta);
  color: var(--kleur-cta-tekst);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: var(--gewicht-cta);
  text-align: center;
  text-decoration: none;
}

/* Vanaf tablet staat het nummer al in de sticky kopbalk; dan is een tweede,
   vaste balk overbodig. */
@media (min-width: 46rem) {
  .site_belbalk__N3BtF {
    display: none;
  }
}

/* --- alles op één as, op één kolom ------------------------------------------- */

/* Op een telefoon staat het kórte gecentreerd en de lopende tekst links.

   Dat lijkt in tegenspraak met de regel die hierboven een paar keer terugkomt —
   "de leesas van de pagina wint" — en dat is het niet. Die regel gaat over
   blokken die náást elkaar staan: dan is de linkerlijn wat ze aan elkaar rijgt,
   en één blok dat afwijkt leest als een fout. Op één kolom is er niets om aan
   uit te lijnen. De as die overblijft is het midden van het scherm, en daar
   staan de foto's al: de herofoto vult de breedte, de dienstfoto loopt van rand
   tot rand. Tekst die daar links van hangt is de enige die scheef staat.

   ── En waar die as ophoudt te helpen ──────────────────────────────────────

   Bij een kop, een label, een troef van één zin: daar houdt de regel. Het oog
   heeft aan een korte regel geen linkerlijn nodig, en gecentreerd hangt hij aan
   dezelfde as als het beeld.

   Bij een alinea van zes regels niet meer. Dan moet het oog na elke regel een
   nieuwe startpositie zoeken, want die schuift op met de lengte van de regel
   ervoor. Dat is precies wat een linkerlijn oplost, en het is de reden dat
   lopende tekst overal links staat.

   De grens ligt dus niet bij de sectie maar bij de lengte:

     * koppen, labels, knoppen, de belofte, de drie troeven en de stappen van het
       proces blijven in het midden. Allemaal één zin of minder;
     * de alinea onder "Waar je op kunt rekenen", de alinea van "Over mij" en de
       omschrijving op een dienstkaart gaan naar links. Allemaal meerdere zinnen.

   Op de dienstkaart staan die twee dus onder elkaar: de titel gecentreerd op de
   as van de foto erboven, de omschrijving eronder links. Dat leest niet als een
   fout maar als een kop met een alinea, en dat ís het ook.

   Wat hier níét in meegaat, en dat is de hele afweging:

     * de openingstijden, de tarieven en de contactregels. Dat zijn twee kolommen
       in één regel — dag en tijd, omschrijving en bedrag, label en waarde. Die
       lezen van een rechte rand naar de andere; gecentreerd wordt het een
       woordenwolk waarin geen bedrag meer onder een bedrag staat;
     * het contactformulier. Een label boven een veld hoort op de linkerrand van
       dat veld te beginnen, en ingetypte tekst centreren is ronduit vervelend;
     * de kopbalk. Die heeft zijn eigen indeling (merk links, menu rechts) en die
       is met opzet zo.

   De grens is 40rem en niet 30rem: dat is dezelfde breedte waarop het
   dienstenraster één kolom wordt en de dienstkaart zijn foto onder de tekst zet.
   Eén breedte waarop de pagina van vorm verandert, niet twee. */
@media (max-width: 39.999rem) {
  /* De hero. `margin-inline` staat er overal bij waar een blok een `max-width`
     heeft: `text-align` alleen centreert de regels binnen een doos die zelf nog
     links staat. Zie de toelichting bij `.sectieIntro[data-uitlijning]`. */
  .site_site__SreoX .site_heroInhoud__OlYeJ {
    text-align: center;
  }

  .site_site__SreoX .site_bedrijfsnaam__wh3dC,
  .site_site__SreoX .site_tagline__jxw5X {
    margin-inline: auto;
  }

  .site_site__SreoX .site_heroTelefoon__P4oZd {
    align-items: center;
  }

  .site_site__SreoX .site_heroActies__6oo0f {
    justify-content: center;
  }

  /* De koppen van de secties, in beide vormen: het losse kopje en het kopblok
     met een label erboven. */
  .site_site__SreoX .site_sectieKop__obGwF {
    margin-inline: auto;
    text-align: center;
  }

  .site_site__SreoX .site_sectieIntro__zqaDK {
    text-align: center;
  }

  .site_site__SreoX .site_sectieIntro__zqaDK .site_sectieLabel__CiS2g,
  .site_site__SreoX .site_sectieIntro__zqaDK .site_sectieKopGroot__xZC4z {
    margin-inline: auto;
  }

  /* De dienstkaarten. De foto loopt hier al van rand tot rand, dus dit zet de
     titel op dezelfde as als het beeld erboven. */
  .site_site__SreoX .site_dienst__zyyLb {
    text-align: center;
  }

  .site_site__SreoX .site_dienstIcoon__AMuqV {
    margin-inline: auto;
  }

  /* De omschrijving niet: dat zijn twee of drie zinnen, en dan kost centreren
     meer dan de as oplevert. Zie de toelichting boven dit blok. */
  .site_site__SreoX .site_dienstTekst__RS_nX {
    margin-inline: 0;
    text-align: left;
  }

  /* Over ons en het persoonlijke blok: allebei meerdere zinnen, dus links.

     De koppen erboven blijven wél in het midden — die staan verderop in dit blok
     en zijn één regel. Een gecentreerde kop boven een linkse alinea is de gewone
     vorm en niet een halve wijziging. */
  .site_site__SreoX .site_overTekst__y_YRA,
  .site_site__SreoX .site_persoonlijkAlinea__vvAEt {
    margin-inline: 0;
    text-align: left;
  }

  .site_site__SreoX .site_troef__UpUnO {
    text-align: center;
  }

  .site_site__SreoX .site_troefTekst__uRPoe {
    margin-inline: auto;
  }

  /* De wrapper eromheen centreert het label, de kop en de belofte. De alinea
     draait dat hierboven terug; zonder die regel zou hij dit erven. */
  .site_site__SreoX .site_persoonlijkTekst__dDX8r {
    text-align: center;
  }

  /* En de kop erin. Dezelfde valkuil als bij `.sectieIntro` hierboven, en hier
     was hij het duidelijkst te zien: `.persoonlijkTekst .sectieKopGroot` heeft
     een `max-width` van 16ch, dus op 375px staat de kop in een doos van 267
     pixels binnen een kolom van 335. `text-align: center` centreert de regels
     dán netjes in die doos — maar de doos zelf staat links, en het resultaat
     stond 34 pixels naast het label en de alinea eronder. */
  .site_site__SreoX .site_persoonlijkTekst__dDX8r .site_sectieLabel__CiS2g,
  .site_site__SreoX .site_persoonlijkTekst__dDX8r .site_sectieKopGroot__xZC4z {
    margin-inline: auto;
  }

  /* De belofte.

     Hier stond `display: flex` met `justify-content: center`, en dat ging mis
     zodra de regel over twee regels liep. Flex centreert dan het vinkje plus het
     tékstblok als geheel, en de tweede regel centreert binnen dat blok — dus een
     halve vinkjebreedte naast het midden van het vlakje. Precies genoeg om te
     zien dat er iets niet klopt, en niet genoeg om te zien wát.

     Op één kolom is het daarom geen flexrij meer maar gewone tekst met het
     pictogram als eerste teken. Dan zet de browser élke regel in het midden van
     het vlakje, ook de tweede. Vanaf twee kolommen blijft de flexrij staan: daar
     is de tekst links uitgelijnd en hoort het vinkje op de eerste regel te
     blijven hangen in plaats van mee te zakken. */
  .site_site__SreoX .site_persoonlijkBelofte__8L99C {
    display: block;
    margin-inline: auto;
    text-align: center;
  }

  .site_persoonlijkBelofteIcoon__Z7rot {
    display: inline-block;
    /* De duw van 0,15rem hoorde bij de flexrij, waar het icoon op de eerste
       regel moest blijven staan. Als inline element doet de regel zelf dat werk;
       die marge zou hem nu naar beneden schuiven. */
    margin-top: 0;
    margin-right: 0.5rem;
    vertical-align: -0.2em;
  }

  /* Het stappenplan. Op een breed scherm staan de drie stappen naast elkaar en
     geldt de linkerlijn; hier staan ze onder elkaar en is er geen buur meer om
     mee uit te lijnen. */
  .site_site__SreoX .site_processtap__SYLjN {
    text-align: center;
  }

  .site_site__SreoX .site_processtapNummer__Vom1O,
  .site_site__SreoX .site_processtapTekst__K__rH {
    margin-inline: auto;
  }

  /* De productkaarten. */
  .site_site__SreoX .site_product__iJCLL {
    text-align: center;
  }

  /* De rij beeldmerken onder de contactgegevens.

     Hier stond `justify-content: center`, en dat was een restant uit de tijd dat
     de contactgegevens onder elkaar op één gecentreerde kolom stonden. Ze staan
     inmiddels in twee kolommen — label links, waarde rechts — en dan zet
     centreren de beeldmerken zestig pixels rechts van het adres en het
     telefoonnummer eronder. Ze horen in dezelfde kolom te beginnen als de rest.

     De basisregel doet verder alles al goed; hier valt niets te overschrijven. */
  .site_site__SreoX .site_socialRij__Ok49O {
    justify-content: flex-start;
  }

  .site_site__SreoX .site_voetregel__fM_lC {
    margin-inline: auto;
    text-align: center;
  }
}

/* --- printen ----------------------------------------------------------------- */

/* De preview wordt uitgeprint om mee te nemen naar een gesprek. Zwevende
   elementen horen dan niet op papier. */
@media print {
  .site_balk__5qOTR,
  .site_belbalk__N3BtF {
    display: none;
  }

  .site_site__SreoX {
    padding-bottom: 0;
  }

  /* Op papier telt geen verhouding maar de inhoud: de maatvoerder eruit, dan is
     de hero precies zo hoog als de kop plus de knop. */
  .site_hero__ayLj5::before {
    padding-top: 0;
  }
}