/* Rustige stijl: minder 'sjabloon' (tegels, grote nummers, schaduwen, herhaalde banners), meer gewone pagina.
   Alleen actief op sites met data-rustig op <html> (zie site-vlag "rustig" in site.py). */

html[data-rustig] { --radius: 6px; --shadow: none; }

/* Geen tegels: diensten als gewone lijst met een dunne lijn ertussen */
html[data-rustig] .services { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
html[data-rustig] .services a { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 16px 0; }
html[data-rustig] .services a:hover { transform: none; background: var(--bg-3); }

/* Stappen: een gewoon genummerd lijstje, geen groot cijfer */
html[data-rustig] .steps li { grid-template-columns: 28px 1fr; gap: 10px; padding: 14px 0; }
html[data-rustig] .steps li::before { content: counter(s) "."; font-size: 17px; font-weight: 500; color: var(--ink-3); }

/* De drie 'kerncijfers' onder de kop worden een gewone regel */
html[data-rustig] .hero .facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 24px; }
html[data-rustig] .hero .facts li { max-width: none; font-size: 16px; }
html[data-rustig] .hero .facts b { display: inline; font-size: inherit; font-weight: 600; margin-right: 4px; }

/* Herhaalde actiebanners worden een zin met knoppen, geen gekleurd vlak */
html[data-rustig] .snelactie { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 18px 0 0; margin-top: 28px; }

/* Rustiger knoppen en formulier */
html[data-rustig] .btn { transition: background .15s ease; }
html[data-rustig] .btn:active { transform: none; }
html[data-rustig] .form { border-radius: 8px; box-shadow: none; padding: 22px; }

/* De afsluitende band is geen accentvlak meer */
html[data-rustig] .cta { background: var(--bg-3); }

/* Merk- en plaatslinks minder 'pil' */
html[data-rustig] .places a, html[data-rustig] .merken a { border-radius: 4px; background: transparent; }

/* Ontwerptoets (avoid-ai-design, 21-10): een straal voor alle vlakken (kaarten stonden op 14px naast knoppen op 6px),
   geen gekleurde zijbalk bij de noot, geen wazige kopbalk, knoppen onder de zin links uitgelijnd, geen pil bij de prijsnoot. */
html[data-rustig] .pg, html[data-rustig] .tool, html[data-rustig] .feiten, html[data-rustig] .photo { border-radius: 8px; }
html[data-rustig] .note { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; }
html[data-rustig] .top { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
html[data-rustig] .snelactie > span { margin-left: 0; }
html[data-rustig] .prijsnoot { border-radius: 6px; }