/* Ontworpen privacypagina — Schaapman Timmerwerken.
   Het lokale :root-blok van het ontwerp is geschrapt: elke token erin was al
   identiek aanwezig in /kit-tokens.css (dat deze pagina ook laadt), en een
   deel ervan was zelfreferentieel (`--vlak: var(--vlak)` enz.) — een bekend
   ontkapsel.mjs-gebrek, zie platform/GEBREKEN.md. */

          * { box-sizing: border-box; }

          body {
            margin: 0;
            background: var(--grond);
            color: var(--ink);
            font-family: "Manrope", system-ui, sans-serif;
            font-size: 17.5px;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
          }

          a { color: var(--accent-tekst); text-decoration: none; }
          a:hover { color: var(--ink); }

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

          .kop {
            font-family: "Anton", "Manrope", sans-serif;
            font-weight: 400;
            letter-spacing: 0.005em;
            line-height: 0.9;
            text-transform: uppercase;
            margin: 0;
          }

          .wrap {
            max-width: 1240px;
            margin: 0 auto;
            padding-left: 32px;
            padding-right: 32px;
          }

          .g12 {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 28px;
          }

          .maatlat {
            height: 17px;
            border-top: 1px solid var(--lijn);
            background-image:
              repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 16px),
              repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 80px);
            background-size: 100% 6px, 100% 13px;
            background-repeat: no-repeat, no-repeat;
            background-position: left top, left top;
          }

          .balk {
            position: sticky;
            top: 0;
            z-index: 30;
            background: var(--grond);
            border-bottom: 1px solid var(--lijn);
          }

          .balk-rij {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            padding-top: 14px;
            padding-bottom: 14px;
          }

          .woordmerk { height: 38px; width: auto; max-width: 100%; align-self: flex-start; flex: 0 0 auto; object-fit: contain; }

          .knop {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: var(--accent-vul);
            color: var(--accent-ink);
            font-weight: 800;
            font-size: 16px;
            letter-spacing: 0.01em;
            padding: 12px 22px;
            border: 1px solid var(--accent-vul);
            border-radius: var(--radius);
            transition: background 0.15s ease, border-color 0.15s ease;
          }
          .knop:hover { background: var(--ink); border-color: var(--ink); color: var(--grond); }

          .terug {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-zacht);
          }
          .terug:hover { color: var(--accent-tekst); }

          .opschrift {
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--ink-zacht);
            margin: 0;
          }
          .nr { color: var(--accent-tekst); }

          .titel {
            font-size: clamp(52px, 9.5vw, 148px);
            line-height: 0.88;
          }

          .lead {
            font-size: 22px;
            line-height: 1.5;
            max-width: 52ch;
            color: var(--ink-zacht);
            margin: 0;
            text-wrap: pretty;
          }

          .datum { font-size: 15px; color: var(--ink-zacht); margin: 0; }

          .blok {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 28px;
            border-top: 1px solid var(--lijn);
            padding-top: 26px;
            padding-bottom: 46px;
          }

          .bloktitel {
            grid-column: span 4;
            font-size: clamp(26px, 2.6vw, 36px);
            line-height: 0.95;
          }

          .blokvak {
            grid-column: 6 / span 7;
            display: flex;
            flex-direction: column;
            gap: 16px;
          }

          .tekst {
            font-size: 18.5px;
            line-height: 1.62;
            color: var(--ink-zacht);
            max-width: 62ch;
            margin: 0;
            text-wrap: pretty;
          }
          .tekst b { color: var(--ink); font-weight: 800; }

          .slotvlak { background: var(--vlak-op); }

          .slotrij {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 32px;
            flex-wrap: wrap;
          }

          .telefoon {
            font-family: "Anton", sans-serif;
            font-weight: 400;
            letter-spacing: 0.01em;
            font-size: clamp(30px, 3.6vw, 46px);
            line-height: 1;
            color: var(--ink);
            display: inline-block;
          }
          .telefoon:hover { color: var(--accent-tekst); }

          .voetrij {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 28px;
            flex-wrap: wrap;
            padding-top: 30px;
            padding-bottom: 40px;
          }

          .voettekst { font-size: 14px; color: var(--ink-zacht); margin: 0; line-height: 1.7; }
          .voettekst b { color: var(--ink); font-weight: 700; }

          .stapel { display: flex; flex-direction: column; }
          .gap8 { gap: 8px; }
          .gap12 { gap: 12px; }
          .gap16 { gap: 16px; }
          .gap20 { gap: 20px; }
          .gap28 { gap: 28px; }

          @media (max-width: 900px) {
            .wrap { padding-left: 20px; padding-right: 20px; }
            .g12 { gap: 22px; }
            .blok { gap: 14px; padding-bottom: 36px; }
            .bloktitel, .blokvak { grid-column: span 12; }
            .woordmerk { height: 30px; }
            .lead { font-size: 19px; }
            .tekst { font-size: 17.5px; }
          }

          @media (max-width: 560px) {
            .balk-rij .knop { font-size: 14px; padding: 10px 14px; }
            .titel { font-size: 13.5vw; }
          }

          /* Raakvlakken op mobiel onder 44px — mobiel-conformiteit (4b) */
          .merklink { display: inline-flex; padding: 8px 0; margin: -8px 0; }
          .terug { padding: 12px 0; margin: -12px 0; }