/* Studio: een verkooppagina voor particuliere klanten. Een grote, dunne
   schreefletter, kleine gespatieerde hoofdletters voor labels, afgeronde
   beelden binnen marges en de laatste link van het menu als knop. */

.thema-studio {
  --kop-gewicht: 400;
  --kop-spatiering: -0.012em;
  --gat: 14px;
  --straal: 8px;
  --h1: clamp(2.8rem, 6vw, 5.2rem);
  --h2: clamp(2.1rem, 4.2vw, 3.5rem);
  --h3: clamp(1.4rem, 2.2vw, 1.8rem);
}

.thema-studio h1, .thema-studio h2 { line-height: 1.04; }

.thema-studio .merk-naam { font-size: 1.7rem; letter-spacing: 0; }
.thema-studio .merk-sub, .thema-studio .menu a { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; }
.thema-studio .menu { align-items: center; gap: 6px 30px; }
.thema-studio .menu a:last-child {
  padding: 11px 22px; border: 0; border-radius: 999px;
  background: var(--accent); color: var(--op-accent);
}

/* De omslag: een afgerond beeld binnen de marges, de tekst gecentreerd erop. */
.thema-studio .blok.omslag { margin-inline: var(--rand); border-radius: 14px; overflow: hidden; }
.thema-studio .omslag-volledig { min-height: calc(100svh - 130px); }
.thema-studio .omslag-inhoud { justify-self: center; text-align: center; padding-bottom: clamp(44px, 7vw, 100px); }
.thema-studio .omslag-kop { font-style: italic; max-width: 15ch; margin-inline: auto; }
.thema-studio .omslag-tekst { margin-inline: auto; font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase; }

.thema-studio .knop {
  border-radius: 999px; padding: 15px 32px;
  font-size: 0.74rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
}

.thema-studio .blok-kop { text-align: center; }
.thema-studio .blok-kop .proza { margin-inline: auto; }
.thema-studio .tekst-blok h2, .thema-studio .foto-tekst-inhoud h2 { font-style: italic; }

.thema-studio .series { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.thema-studio .serie-beeld { aspect-ratio: 4 / 5; }
.thema-studio .serie-info { text-align: center; }
.thema-studio .serie-aantal, .thema-studio .contact-gegevens dt, .thema-studio .contact-formulier label,
.thema-studio .serie-nav a span, .thema-studio .kruimel, .thema-studio .nieuws-info time, .thema-studio .artikel-kop time,
.thema-studio .citaat-blok footer {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
}

.thema-studio .stappen { text-align: center; }
.thema-studio .stappen li { border-top: 0; padding-top: 0; }
.thema-studio .stappen li::before {
  width: 52px; height: 52px; margin: 0 auto 16px; border: 1px solid var(--accent); border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem; font-style: italic;
}

/* Een uitspraak van een klant staat op een eigen band. */
.thema-studio .blok.citaat-blok {
  margin-top: var(--blok-ruimte); padding-block: clamp(56px, 8vw, 110px); background: var(--vlak);
}
.thema-studio .citaat-blok blockquote p { font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1.18; }

.thema-studio .tarief { text-align: center; padding: clamp(28px, 3vw, 44px); }
.thema-studio .tarief-prijs { font-style: italic; }
.thema-studio .tarief li { padding-left: 0; }
.thema-studio .tarief li::before { content: none; }

.thema-studio .vragen { margin-inline: auto; max-width: 46rem; }
.thema-studio .contact-formulier input, .thema-studio .contact-formulier textarea, .thema-studio .contact-formulier select { background: var(--vlak); border-color: transparent; }
.thema-studio .foto-tekst-beeld img { border-radius: 14px; }
.thema-studio .voet { justify-content: center; text-align: center; flex-direction: column; align-items: center; }

@media (max-width: 820px) {
  .thema-studio .series { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .thema-studio .menu a:last-child { background: none; color: var(--accent); padding: 10px 0; border-radius: 0; }
  .thema-studio .omslag-volledig { min-height: 76svh; }
}