/* Subpagina's (oplossingen, cases, werkwijze, kennis, vragen, juridisch, 404) in het nieuwe ontwerp.
   De inhoud komt nog uit marketing/templates.mjs met de oude klassen; dit bestand laadt na
   /website/style.css en /website/v2/style.css en zet die oude klassen om naar wit/geel, Inter/Poppins en kaarten. */
:root {
  --floor: #ffffff;
  --floor-2: #fafafa;
  --floor-3: #f0f0f0;
  --on-dark: #141414;
  --on-dark-2: #545454;
  --ground: #ffffff;
  --tone: #fafafa;
  --paper: #ffffff;
  --ink: #141414;
  --ink-2: #545454;
  --yellow: #ffd23c;
  --yellow-2: #fff4cc;
  --display: "Poppins", "Inter", system-ui, sans-serif;
  --text: "Inter", system-ui, sans-serif;
  --section: clamp(64px, 8vw, 104px);
  --gutter: 24px;
}
body { font-family: var(--text); font-size: 16px; line-height: 1.6; letter-spacing: -0.01em; background: var(--white); }
.frame { width: min(1200px, 100% - 48px); }
/* .frame is hier de oude paginabreedte, niet het schermkader van de homepage */
.frame { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }

/* Thema's: geen donkere vlakken meer, wel de lichte gele wash */
[data-theme="dark"] { background: var(--wash), var(--white); color: var(--graphite); --focus: var(--graphite); }
[data-theme="light"] { background: var(--white); }
[data-theme="tone"] { background: var(--wash-soft), var(--paper); }
[data-theme="yellow"] { background: var(--y-soft); }

/* Koppen: Poppins voor titels, rustiger formaat */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.01em; word-spacing: normal; line-height: 1.15; }
main h1 { font: 600 clamp(34px, 4.4vw, 52px)/1.1 var(--font); letter-spacing: -0.035em; color: var(--graphite); }
main h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 38px); line-height: 1.25; letter-spacing: normal; }
main h3 { font-family: var(--font); font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; letter-spacing: -0.02em; }
main p { color: var(--slate); }
main strong { font-weight: 600; color: var(--graphite); }

/* Knoppen en links */
main .btn, main .button, .cookie-panel .btn { min-height: 0; gap: 8px; padding: 12px 20px; border-radius: var(--radius); font: 600 15px/1.3 var(--font); background: var(--accent); color: var(--accent-ink); }
main .btn:hover { background: #ffc800; box-shadow: var(--shadow-md); }
main .btn-ink, .cookie-panel .btn-ink { background: var(--accent); color: var(--accent-ink); }
main .btn .arrow { width: 16px; height: 16px; }
main .link { color: var(--graphite); font-weight: 500; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Kopbalk: de oude .nav-regels (flex, onderstreping, verbergen op mobiel) mogen de nieuwe kop niet raken */
header.nav { display: block; gap: 0; }
header.nav a { position: static; padding-block: 0; font-size: 14px; }
header.nav a::after { content: none; }
header.nav .btn { min-height: 0; gap: 8px; padding: 10px 18px; font-size: 14px; line-height: 1.3; }
header.nav .nav-links a { padding-block: 0; }

/* Paginakop */
.page-intro { min-height: 0; }
.page-intro-inner { min-height: 0; padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px); }
.page-intro .intro-guide { display: none; }
.page-lead { max-width: 60ch; margin-top: 18px; font-size: 17px; color: var(--slate); }
.breadcrumbs { font-size: 13px; color: var(--fog); }
.breadcrumbs a { color: var(--slate); }

/* Kaarten: alles wat een blok is krijgt de afgeronde, lichte kaartvorm */
.application, .principle, .station, .case-slide, .case-panel, .knowledge-section article, .detail-card, .solution-shot,
.module-preview, .faq-list details, .contact-strip-inner, .prose-layout aside, .case-fact, .case-block {
  border-radius: var(--radius-img); border: 1px solid var(--cloud); background: var(--white); box-shadow: var(--shadow-sm);
}
.faq-list details { padding: 0; }
.faq-list summary { padding: 18px 20px; font: 500 16px/1.4 var(--font); }
.faq-answer p { padding: 0 20px 18px; }

/* Afsluitend blok en contactstrook */
.closing { background: var(--wash), var(--white); color: var(--graphite); border-top: 1px solid var(--cloud); }
.closing-title { font-family: var(--font-display); }
.contact-strip-inner { padding: 28px 32px; }

/* Lijsten met vinkjes en route-stappen in geel */
.ticks li::before, .route-line span, .station i { background: var(--accent); }

/* Cookiepaneel */
.cookie-panel { border-radius: var(--radius-img); border: 1px solid var(--cloud); box-shadow: var(--shadow-md); }
.cookie-panel h2 { font: 600 22px/1.2 var(--font); }

@media (max-width: 640px) {
  .frame { width: calc(100% - 32px); }
  .contact-strip-inner { padding: 22px; }
}

/* Caseslider */
.case-choices button { border-radius: 8px; background: var(--veil); color: var(--slate); font-weight: 500; }
.case-choices button[aria-pressed="true"] { background: var(--accent); color: var(--graphite); }
.case-choices button:not([aria-pressed="true"]):hover { background: var(--cloud); }
.case-arrow, .case-carousel-footer a, .case-carousel-footer button { border-radius: 8px; }

/* Ruimte tussen secties */
.solution { padding-block: clamp(56px, 7vw, 96px); }
.solution-grid { gap: 40px 64px; }

/* Grote koppen uit de oude stylesheet, geschaald voor Poppins/Inter (gegenereerd, factor 0,7) */
body .detail-grid h2 { font-size: clamp(1.26rem, 2.31vw, 2.1rem); }
body .reading-index h3 { font-size: clamp(1.12rem, 1.75vw, 1.68rem); }
body .article-intro h1 { font-size: clamp(1.61rem, 3.85vw, 3.78rem); }
body .prose h2 { font-size: clamp(1.22rem, 2.1vw, 1.89rem); }
body .cookie-panel h2 { font-size: 1.68rem; }
body .hero-title { font-size: clamp(1.4rem, 3.64vw, 3.39rem); }
body .statement { font-size: clamp(1.12rem, 1.82vw, 1.65rem); }
body .case-slide h3 { font-size: clamp(1.4rem, 2.2vw, 2.17rem); }
body .case-related h2 { font-size: clamp(1.4rem, 2.1vw, 1.96rem); }
body .station h3 { font-size: clamp(1.12rem, 1.68vw, 1.54rem); }
body .faq-intro h2 { font-size: clamp(1.54rem, 2.52vw, 2.38rem); }
body .closing-title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
body .solution-copy h2 { font-size: clamp(1.54rem, 2.8vw, 2.66rem); }
body .principle h3 { font-size: clamp(1.12rem, 1.68vw, 1.54rem); }
body .contact-direct h2, body .contact-form h2 { font-size: clamp(1.33rem, 2.1vw, 1.96rem); }
@media (max-width: 860px) { body .hero-title { font-size: clamp(1.33rem, 7vw, 3.08rem); } body .page-intro h1 { font-size: clamp(1.61rem, 7.28vw, 3.08rem); } }
@media (max-width: 600px) { body .case-slide h3 { font-size: clamp(1.29rem, 5.25vw, 1.75rem); } body .impact-number { font-size: clamp(3.5rem, 15.4vw, 4.9rem); } body .impact-headline { font-size: clamp(1.29rem, 6.3vw, 2.24rem); } }
header.nav .mnav nav a { padding: 10px 12px; font-size: 15px; }
header.nav a.logo { font-size: 22px; }