/* Shared styles for the older content pages. Scoped to preserve newer layouts. */
:root:where(html[data-legacy]) {  --blue: #2563eb; --orange: #f59e0b; --shadow-hover: 0 18px 42px rgba(19, 32, 26, 0.12); --radius-sm: 12px; --btn-radius: 10px; }
:where(html[data-legacy]) * { box-sizing: border-box; }
html:where(html[data-legacy]) { scroll-behavior: smooth; }
:where(html[data-legacy]) body { margin: 0px; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); line-height: 1.55; background: radial-gradient(900px 420px at 12% -10%, rgba(109, 94, 243, 0.10), transparent 60%),
    radial-gradient(760px 420px at 92% 0%, rgba(245, 158, 11, 0.10), transparent 58%),
    var(--bg); }
:where(html[data-legacy]) a { color: inherit; text-decoration: none; }
:where(html[data-legacy]) img { max-width: 100%; }
:where(html[data-legacy]) .wrap { width: 100%; max-width: var(--max); margin: 0px auto; padding: 0px 20px; }
:where(html[data-legacy]) .section { padding: 24px 0px 34px; }
:where(html[data-legacy]) .choice-hero { text-align: center; max-width: 860px; margin: 0px auto; }
:where(html[data-legacy]) .choice-hero h1 { margin: 0px 0px 10px; color: rgb(19, 32, 26); font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 600; line-height: 1; }
:where(html[data-legacy]) .choice-hero h2 { margin: 0px; color: rgb(19, 32, 26); font-size: clamp(1rem, 1.45vw, 1.25rem); font-weight: 700; line-height: 1.3; }
:where(html[data-legacy]) .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 10px 15px; border: 1px solid rgba(19, 32, 26, 0.12); border-radius: var(--btn-radius); background: rgba(255, 255, 255, 0.92); color: var(--text); font-size: 0.94rem; font-weight: 850; line-height: 1.1; cursor: pointer; white-space: nowrap; transition: transform 0.12s, background 0.12s, border-color 0.12s, box-shadow 0.12s; }
:where(html[data-legacy]) .btn:hover { transform: translateY(-1px); background: rgb(255, 255, 255); border-color: rgba(109, 94, 243, 0.26); box-shadow: rgba(19, 32, 26, 0.08) 0px 10px 20px; }
:where(html[data-legacy]) .btn-primary { border-color: rgba(109, 94, 243, 0.24); color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(109, 94, 243), rgba(37, 99, 235, 0.92)); }
:where(html[data-legacy]) .btn-primary:hover { border-color: rgba(109, 94, 243, 0.36); background: linear-gradient(135deg, rgb(109, 94, 243), rgb(37, 99, 235)); }
:where(html[data-legacy]) .badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(19, 32, 26, 0.1); border-radius: 999px; background: rgba(19, 32, 26, 0.04); color: rgba(19, 32, 26, 0.86); font-size: 0.78rem; font-weight: 900; line-height: 1; }
:where(html[data-legacy]) .b-comp { border-color: rgba(37, 99, 235, 0.18); background: rgba(37, 99, 235, 0.1); color: rgba(37, 99, 235, 0.95); }
:where(html[data-legacy]) .b-ext { border-color: rgba(245, 158, 11, 0.22); background: rgba(245, 158, 11, 0.13); color: rgba(161, 98, 7, 0.98); }
:where(html[data-legacy]) footer { margin-top: 8px; padding: 28px 0px 40px; border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.48); color: var(--muted); }
@media (max-width: 680px) {
:where(html[data-legacy]) .wrap { padding: 0px 16px; }
:where(html[data-legacy]) .section { padding: 20px 0px 28px; }
:where(html[data-legacy]) .choice-hero h1 { font-size: clamp(2.25rem, 12vw, 3.6rem); letter-spacing: -0.07em; }
:where(html[data-legacy]) .choice-hero h2 { font-size: 1rem; }
}
:where(html[data-legacy]) .article-section { margin-top: 34px; padding: 10px 0px 4px; }
:where(html[data-legacy]) .section-heading { text-align: center; max-width: 720px; margin: 0px auto 22px; }
:where(html[data-legacy]) .section-heading h2 { margin: 12px 0px 8px; color: rgb(19, 32, 26); font-size: clamp(1.7rem, 3vw, 2.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.045em; }
:where(html[data-legacy]) .section-heading p { margin: 0px; color: rgb(93, 103, 95); font-size: 1rem; line-height: 1.5; }
:where(html[data-legacy]) .article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
:where(html[data-legacy]) .article-card { display: flex; flex-direction: column; gap: 8px; min-height: 180px; padding: 20px; border-radius: 24px; background: rgb(255, 255, 255); border: 1px solid rgba(19, 32, 26, 0.08); box-shadow: rgba(19, 32, 26, 0.08) 0px 18px 45px; color: rgb(19, 32, 26); text-decoration: none; transition: transform 0.18s, box-shadow 0.18s; }
:where(html[data-legacy]) .article-card:hover { transform: translateY(-3px); box-shadow: rgba(19, 32, 26, 0.12) 0px 22px 55px; }
:where(html[data-legacy]) .article-card span { color: rgb(109, 94, 243); font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.045em; }
:where(html[data-legacy]) .article-card strong { display: block; color: rgb(19, 32, 26); font-size: 1.08rem; line-height: 1.15; font-weight: 900; }
:where(html[data-legacy]) .article-card p { margin: 0px; color: rgb(93, 103, 95); font-size: 0.95rem; line-height: 1.45; }
@media (max-width: 900px) {
:where(html[data-legacy]) .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
:where(html[data-legacy]) .article-section { margin-top: 24px; }
:where(html[data-legacy]) .article-grid { grid-template-columns: 1fr; }
:where(html[data-legacy]) .article-card { min-height: auto; padding: 18px; border-radius: 20px; }
:where(html[data-legacy]) .section-heading h2 { font-size: clamp(1.55rem, 8vw, 2.1rem); }
}

/* Page-specific content and form styles, shared where identical. */
:where(html[data-page="contact"], html[data-page="privacy-cookies"]) body { margin: 0px; font-family: system-ui, "Segoe UI", Roboto, Arial; background: rgb(246, 248, 251); color: rgb(15, 23, 42); }
:where(html[data-page="contact"]) .wrap { max-width: 1080px; margin: 0px auto; padding: 20px; }
:where(html[data-page="contact"]) .card { background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 14px; padding: 20px; box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px; }
:where(html[data-page="contact"]) label { display: block; margin-top: 12px; font-weight: 600; }
:where(html[data-page="contact"]) input,
:where(html[data-page="contact"]) textarea { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid rgb(221, 221, 221); font-family: inherit; }
:where(html[data-page="contact"]) textarea { min-height: 140px; }
:where(html[data-page="contact"]) button { margin-top: 14px; padding: 10px 16px; border-radius: 10px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; background: rgb(37, 99, 235); color: rgb(255, 255, 255); font-weight: 600; cursor: pointer; }
:where(html[data-page="contact"]) button:hover { opacity: 0.9; }
:where(html[data-page="contact"]) .muted { color: rgb(102, 112, 133); font-size: 14px; }
:where(html[data-page="privacy-cookies"]) .wrap { max-width: 900px; margin: 0px auto; padding: 20px; }
:where(html[data-page="privacy-cookies"]) .card { background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 14px; padding: 25px; box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px; }
:where(html[data-page="privacy-cookies"]) h1,
:where(html[data-page="privacy-cookies"]) h2 { margin-top: 0px; }
:where(html[data-page="privacy-cookies"]) p { line-height: 1.6; }
:where(html[data-page="privacy-cookies"]) ul { line-height: 1.6; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .article-wrap p { margin: 0px 0px 14px; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .article-wrap ul { margin: 0px 0px 14px; padding-left: 18px; color: var(--muted); font-weight: 650; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .article-wrap li { margin: 6px 0px; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .article-wrap img.hero { width: 100%; height: auto; border-radius: 14px; margin: 0px 0px 18px; border: 1px solid var(--line); box-shadow: var(--shadow); display: block; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .related { margin-top: 18px; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .grid-articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 980px) {
:where(html[data-page="extra"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .grid-articles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .grid-articles { grid-template-columns: 1fr; }
}
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleCard { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleTag { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.04); letter-spacing: 0.5px; text-transform: uppercase; width: max-content; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleTitle { margin: 0px; font-size: 16px; letter-spacing: -0.2px; line-height: 1.35; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleLink { align-self: flex-end; font-size: 14px; font-weight: 850; opacity: 0.9; }
:where(html[data-page="extra"], html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleLink:hover { opacity: 1; }
:where(html[data-page="artikelen-jerrycan"]) .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; margin: 16px 0px 8px; }
@media (max-width: 760px) {
:where(html[data-page="artikelen-jerrycan"]) .product-grid { grid-template-columns: 1fr; }
}
:where(html[data-page="artikelen-jerrycan"]) .product-card { min-width: 0px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 12px; }
:where(html[data-page="artikelen-jerrycan"]) .product-card img { width: 100%; height: 220px; aspect-ratio: auto; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); display: block; }
:where(html[data-page="artikelen-jerrycan"]) .product-label { display: inline-block; font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.1); background: rgba(15, 23, 42, 0.04); letter-spacing: 0.5px; text-transform: uppercase; width: max-content; }
:where(html[data-page="artikelen-jerrycan"]) .product-card h3 { margin: 0px; font-size: 18px; line-height: 1.35; letter-spacing: -0.2px; }
:where(html[data-page="artikelen-jerrycan"]) .product-card p { margin: 0px; }
:where(html[data-page="artikelen-jerrycan"]) .product-points { margin: 0px; padding-left: 18px; color: var(--muted); font-weight: 650; }
:where(html[data-page="artikelen-jerrycan"]) .product-points li { margin: 6px 0px; }
:where(html[data-page="artikelen-jerrycan"], html[data-page="artikelen-mei-vakantie-uitje"], html[data-page="artikelen-realistische-noodscenarios-nederland"], html[data-page="artikelen-waarom-een-noodpakket"]) .articleActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 980px) {
:where(html[data-page="artikelen-jerrycan"]) .grid-articles { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}