/* DataGrip · de dienstenpagina (dashboard-laten-maken.html)
   Wordt na p-blog.css geladen: de pagina gebruikt de opbouw van een artikel, maar is een dienst (feedback 28-10-2026).
   - In de kolom links staat geen inhoudsopgave maar "In het kort": breed loopt het mee, smal staat het boven de tekst.
   - Er is geen oproep in de rechterkolom; de schermafdrukken en de margegrafiek lopen op een breed scherm over de
     tekstkolom en die kolom heen. De tekst zelf blijft 612 pixels breed, zoals op de andere pagina's.
   - Een klik op een schermafdruk vergroot hem binnen de pagina (p-dienst.js); zonder script opent de link het beeld. */
.dienst-kort .blog-kader { margin: 0; }
.dienst-kort ul { display: grid; gap: .55em; margin-top: .6em; padding-left: 1.2em; list-style: disc; font-size: .9375rem; line-height: 1.5; }
.dienst-kort li::marker { color: var(--blog-lijn-teal); }
.dienst-kort-actie { margin-top: .9em; font-size: .9375rem; }
@media (min-width: 1000px) {
  .dienst-kort { position: sticky; top: calc(var(--kop-h) + 28px); }
}

.dienst-breed .blog-figuur { margin-block: 0; }
.dienst-scherm picture, .dienst-scherm img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.dienst-vergroot { display: block; cursor: zoom-in; border-radius: var(--radius); }
.dienst-vergroot:focus-visible { outline: 2px solid var(--blog-lijn-teal); outline-offset: 3px; }

.dienst-actie { margin-top: 1.4em; }

/* de vergroting */
.dienst-groot { width: min(96vw, 1800px); max-width: none; max-height: 94vh; padding: 0; border: 0; border-radius: var(--radius); background: #0b0f17; overflow: auto; }
.dienst-groot::backdrop { background: rgba(0, 10, 14, .86); }
.dienst-groot img { display: block; width: 100%; height: auto; }
.dienst-groot-sluit { position: sticky; top: 8px; float: right; margin: 8px 8px -52px 0; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(0, 22, 32, .85); color: #f0ede6; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.dienst-groot-sluit:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── Derde ronde (28-10-2026): korter en visueler ──
   Bovenaan een uitsnede van het demodashboard in plaats van de tekening; de kaarten "Herken je dit?" en "Wat
   levert het je op?" lopen over de volle breedte, drie naast elkaar vanaf 700, onder elkaar op een telefoon. */
.dienst-kop-beeld img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.dienst-kaarten { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.dienst-kaarten li { display: grid; align-content: start; gap: 8px; padding: 20px 22px 22px; border-radius: var(--radius); background: var(--blog-tint); box-shadow: inset 0 3px 0 var(--line-strong, #c9c3b6); }
.dienst-kaarten--teal li { box-shadow: inset 0 3px 0 var(--blog-lijn-teal); }
.dienst-kaarten strong { font-size: 1.0625rem; line-height: 1.3; font-weight: 650; color: var(--bright); }
.dienst-kaarten span { font-size: .9375rem; line-height: 1.5; color: var(--text); }
/* de kaarten horen bij de kop erboven: minder lucht dan tussen twee stukken tekst */
.blog-tekst > .dienst-breed--kaarten { margin-top: calc(-2.2 * var(--kop-3) + 18px); }

/* ── Vierde ronde (28-10-2026): alles even breed ──
   Tekst, kaarten en schermafdrukken hebben dezelfde breedte (720 pixels), zodat er één rechterrand is. De tekst
   is daarmee iets breder dan op de blogs (612). De kaarten staan pas naast elkaar als hun kolom minstens 600
   pixels breed is (container query): smaller staan ze onder elkaar, ook op een tablet. */
.blog-artikel.dienst-artikel { --blog-tekst: 45rem; }
.blog-tekst > .dienst-breed { max-width: var(--blog-tekst); }
.dienst-breed--kaarten { container-type: inline-size; }
@container (min-width: 600px) { .dienst-kaarten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
/* op een breed scherm heeft het tekstblok twee kolommen (de tweede is leeg sinds de oproep weg is): alles in de eerste */
@media (min-width: 1360px) { .blog-tekst > .dienst-breed { grid-column: 1; } }

/* ── Ronde 7 (28-10-2026, besluit Thomas): tekst in het midden, voorbeelden breed ──
   Geen zijkolom meer: "In het kort" staat bovenaan de tekst. De tekst en de vragen staan in één gecentreerde kolom
   van 720 pixels; alleen de twee demodashboards lopen bijna over de volle breedte van de pagina, zodat de cijfers
   erin te lezen zijn. */
.dienst-lijf { display: block; }
.blog-artikel .dienst-tekst { display: grid; grid-template-columns: minmax(0, 1fr); max-width: var(--blog-tekst); margin-inline: auto; }
.blog-artikel .dienst-tekst > * { grid-column: 1; }
.dienst-tekst .dienst-kort { margin: 0 0 1.6em; }
.blog-tekst > .dienst-breed--vol { max-width: none; justify-self: center; width: min(100vw - 2 * var(--marge), var(--wrap)); }
.dienst-faq-in { max-width: var(--blog-tekst); }
.dienst-faq-in .h2 { margin-bottom: 18px; }


.dienst-privacy { flex-basis: 100%; margin-top: 6px; font-size: .8125rem; color: var(--muted); }
.dienst-tekst .dienst-kort { position: static; }   /* in de tekst loopt "In het kort" niet meer mee */

/* ── Prijzen (28-10-2026, besluit Thomas): drie vanafbedragen en wat er in het maandbedrag zit ──
   De bedragen komen uit "Prijzen · wat geldt" in Drive en staan ook op de homepage, de vragenpagina en in llms.txt. */
.dienst-bedrag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin: 2px 0 2px; font-size: 1.75rem; line-height: 1.15; font-weight: 750; letter-spacing: -.02em; color: var(--bright); font-variant-numeric: tabular-nums; }
.dienst-bedrag small { font-size: .8125rem; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.blog-prose h3 + p { margin-top: .5em; }

/* ── Ronde 8 (29-10-2026, besluit Thomas na een review): minder gelijkvormige kaarten ──
   Kaarten alleen nog voor "Wat verandert er" en de twee inrichtprijzen. "Herken je dit?" zijn drie regels met een
   lijntje, de stroom bij de voorraaddemo is één regel met pijlen, en het maandbedrag is één strook onder de twee
   inrichtprijzen met wat erin zit als rustige lijst. Zo leest het als: eerst inrichten, daarna een vast bedrag. */


/* prijzen: label, twee kaarten, daaronder de strook voor het maandbedrag */
.dienst-prijs-label { margin: 0 0 10px; font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--blog-lijn-teal); }
@container (min-width: 600px) { .dienst-prijzen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dienst-maand { margin-top: 16px; padding: 22px 24px 24px; border-radius: var(--radius); background: var(--blog-tint); box-shadow: inset 0 3px 0 var(--blog-lijn-teal); display: grid; gap: 14px; }
.dienst-maand-kop { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.dienst-maand-kop .dienst-prijs-label { margin: 0; }
.dienst-maand-kop .dienst-bedrag { margin: 0; }
.dienst-maand-lead { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--text); }
.dienst-erin { display: grid; gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
@container (min-width: 600px) { .dienst-erin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dienst-erin li { position: relative; padding-left: 22px; font-size: .9375rem; line-height: 1.5; color: var(--text); }
.dienst-erin li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 6px; border-left: 2px solid var(--blog-lijn-teal); border-bottom: 2px solid var(--blog-lijn-teal); transform: rotate(-45deg); }
.dienst-erin strong { color: var(--bright); font-weight: 650; }

/* ── Ronde 9 (30-10-2026, besluit Thomas) ──
   "Herken je dit?" en "Wat verandert er" zijn één blok: per rij het probleem (grijs) en het antwoord (met vinkje),
   breed naast elkaar met een pijl, smal onder elkaar met "Nu" en "Met DataGrip" erboven. De bronnen van de
   voorraaddemo staan in de tekst erboven (een balk op de schermafdruk leek een deel van het dashboard). */
.dienst-nuna-kop { display: none; margin: 0 0 8px; font-size: .8125rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dienst-nuna-kop span:first-child { color: var(--muted); }
.dienst-nuna-kop span:last-child { color: var(--blog-lijn-teal); }
.dienst-nuna { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--line-strong, #c9c3b6); }
.dienst-nuna li { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line-strong, #c9c3b6); }
.dienst-nuna p { margin: 0; display: grid; gap: 3px; align-content: start; font-size: .9375rem; line-height: 1.5; }
.dienst-nuna-label { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; }
.dienst-nu .dienst-nuna-label { color: var(--muted); }
.dienst-na .dienst-nuna-label { color: var(--blog-lijn-teal); }
.dienst-nu strong { color: var(--text); font-weight: 600; }
.dienst-nu span:not(.dienst-nuna-label) { color: var(--muted); }
.dienst-na { position: relative; padding-left: 24px; }
.dienst-na::before { content: ""; position: absolute; left: 3px; top: 1.75em; width: 10px; height: 6px; border-left: 2px solid var(--blog-lijn-teal); border-bottom: 2px solid var(--blog-lijn-teal); transform: rotate(-45deg); }
.dienst-na strong { color: var(--bright); font-weight: 650; }
.dienst-na span:not(.dienst-nuna-label) { color: var(--text); }
@container (min-width: 600px) {
  .dienst-nuna-kop { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .dienst-nuna-kop span:last-child { grid-column: 3; padding-left: 24px; }
  .dienst-nuna li { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); gap: 0; }
  .dienst-nuna li::before { content: "→"; grid-column: 2; grid-row: 1; justify-self: center; align-self: start; font-size: 1.125rem; line-height: 1.3; color: var(--blog-lijn-teal); font-weight: 600; }
  .dienst-nu { grid-column: 1; grid-row: 1; }
  .dienst-na { grid-column: 3; grid-row: 1; }
  .dienst-na::before { top: .45em; }
  .dienst-nuna-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}