/* ---------- Tarieven Block ---------- */
.tarieven-block { position:relative; width:100%; padding:85px 0 100px; overflow:hidden; background:#F6F3F0; }
.tarieven-block__container { width:calc(100% - 40px); max-width:1200px; margin:0 auto; }
.tarieven-block__intro { width:100%; max-width:760px; margin:0 auto 48px; text-align:center; }
.tarieven-block__eyebrow { display:block; margin:0 0 8px; color:var(--backgroundColorOrange); font-size:12px; line-height:1.4; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.tarieven-block__title { position:relative; margin:0; padding:0 0 14px; color:var(--backgroundColorBlack); font-size:38px; line-height:1.2; font-weight:700; letter-spacing:-.035em; }
.tarieven-block__title::after { position:absolute; bottom:0; left:50%; width:72px; height:2px; content:""; background:var(--backgroundColorOrange); transform:translateX(-50%); }
.tarieven-block__description { width:100%; max-width:720px; margin:16px auto 0; color:rgba(34,34,34,.76); font-size:15px; line-height:1.7; }
.tarieven-block__description p { margin:0; }
.tarieven-block__description p + p { margin-top:12px; }
.tarieven-block__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; align-items:stretch; }
.tarieven-card { position:relative; display:flex; flex-direction:column; min-width:0; min-height:590px; padding:38px 28px 26px; color:#fff; background:linear-gradient(180deg,#080808 0%,#101010 100%); border:1px solid rgba(255,255,255,.12); border-radius:22px; box-shadow:0 22px 50px rgba(15,15,15,.14); transform:translateY(0); transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease; }
.tarieven-card--featured { z-index:2; border-color:var(--backgroundColorOrange); box-shadow:0 24px 55px rgba(var(--backgroundColorOrangeRGB),.22); }
.tarieven-card__badge { position:absolute; z-index:3; top:0; left:50%; display:inline-flex; align-items:center; justify-content:center; min-height:30px; padding:7px 18px; color:#fff; background:var(--backgroundColorOrange); border-radius:8px; box-shadow:0 8px 22px rgba(var(--backgroundColorOrangeRGB),.28); font-size:10px; line-height:1; font-weight:700; letter-spacing:.045em; text-transform:uppercase; white-space:nowrap; transform:translate(-50%,-50%); }
.tarieven-card__header { display:grid; grid-template-columns:50px minmax(0,1fr); gap:18px; align-items:center; min-height:78px; padding:0 0 22px; border-bottom:1px solid rgba(255,255,255,.12); }
.tarieven-card__stars { display:flex; align-items:center; justify-content:center; align-content:center; flex-wrap:wrap; gap:0; width:50px; min-width:50px; height:52px; color:var(--backgroundColorOrange); font-size:24px; line-height:.7; text-align:center; }
.tarieven-card__stars span { display:block; margin:-1px; }
.tarieven-card__heading { min-width:0; }
.tarieven-card__title { margin:0; color:#fff; font-size:30px; line-height:1.15; font-weight:700; letter-spacing:-.035em; }
.tarieven-card__subtitle { display:block; margin:5px 0 0; color:var(--backgroundColorOrange); font-size:14px; line-height:1.3; font-weight:700; }
.tarieven-card__description { min-height:102px; padding:23px 0 20px; color:rgba(255,255,255,.92); font-size:14px; line-height:1.65; }
.tarieven-card__description p { margin:0; }
.tarieven-card__description p + p { margin-top:12px; }
.tarieven-card__price { display:flex; align-items:flex-end; gap:12px; min-height:70px; padding:0 0 20px; border-bottom:1px solid rgba(255,255,255,.12); }
.tarieven-card__price-prefix { padding:0 0 5px; color:rgba(255,255,255,.5); font-size:12px; line-height:1; }
.tarieven-card__price-value { display:inline-flex; align-items:center; gap:9px; color:#fff; font-size:34px; line-height:1; font-weight:700; letter-spacing:-.035em; }
.tarieven-card__currency { color:#fff; font-size:27px; line-height:1; }
.tarieven-card__features { display:flex; flex-direction:column; gap:11px; margin:0; padding:22px 0 28px; list-style:none; }
.tarieven-card__feature { position:relative; margin:0; padding:0 0 0 28px; color:rgba(255,255,255,.94); font-size:13px; line-height:1.5; }
.tarieven-card__feature::before { position:absolute; top:1px; left:0; display:flex; align-items:center; justify-content:center; width:17px; height:17px; content:"✓"; color:var(--backgroundColorOrange); border:1px solid var(--backgroundColorOrange); border-radius:50%; font-family:Arial,sans-serif; font-size:10px; line-height:1; font-weight:700; }
.tarieven-card__button { display:flex; align-items:center; justify-content:center; gap:13px; width:100%; min-height:49px; margin-top:auto; padding:12px 20px; color:#fff; background:var(--backgroundColorOrange); border:1px solid var(--backgroundColorOrange); border-radius:7px; box-shadow:0 10px 24px rgba(var(--backgroundColorOrangeRGB),.18); font-size:13px; line-height:1; font-weight:700; text-decoration:none; transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease; }
.tarieven-card__button:hover { color:#fff; background:var(--buttonHover); border-color:var(--buttonHover); box-shadow:0 14px 28px rgba(var(--backgroundColorOrangeRGB),.25); text-decoration:none; transform:translateY(-2px); }
.tarieven-card__button:focus-visible { outline:3px solid rgba(var(--backgroundColorOrangeRGB),.35); outline-offset:4px; }
.tarieven-card__button-arrow { display:inline-block; font-family:Arial,sans-serif; font-size:17px; line-height:1; transition:transform .25s ease; }
.tarieven-card__button:hover .tarieven-card__button-arrow { transform:translateX(3px); }
.tarieven-block__note { width:100%; margin:20px auto 0; color:rgba(34,34,34,.62); font-size:11px; line-height:1.5; text-align:center; }
.tarieven-card__price-value { display:inline-flex; align-items:baseline; gap:7px; }
.tarieven-card__amount { color:inherit; font:inherit; line-height:inherit; }
.tarieven-card__price-suffix { margin-left:-4px; color:inherit; font-size:.7em; line-height:1; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }

@media (min-width:901px) {
.tarieven-card--featured { transform:translateY(-10px); }
.tarieven-card:not(.tarieven-card--featured):hover { border-color:rgba(var(--backgroundColorOrangeRGB),.45); box-shadow:0 26px 60px rgba(15,15,15,.2); transform:translateY(-6px); }
.tarieven-card--featured:hover { box-shadow:0 30px 65px rgba(var(--backgroundColorOrangeRGB),.28); transform:translateY(-14px); }
}
@media (max-width:1100px) {
.tarieven-block { padding:75px 0 90px; }
.tarieven-block__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tarieven-card { min-height:580px; }
.tarieven-card--featured { transform:none; }
}

@media (max-width:767px) {
.tarieven-block { padding:60px 0 75px; }
.tarieven-block__container { width:calc(100% - 40px); }
.tarieven-block__intro { margin-bottom:40px; }
.tarieven-block__eyebrow { font-size:11px; }
.tarieven-block__title { font-size:31px; }
.tarieven-block__description { font-size:14px; }
.tarieven-block__grid { grid-template-columns:1fr; gap:30px; }
.tarieven-card { min-height:0; padding:38px 22px 22px; border-radius:18px; }
.tarieven-card--featured { transform:none; }
.tarieven-card__header { grid-template-columns:46px minmax(0,1fr); gap:15px; min-height:72px; padding-bottom:20px; }
.tarieven-card__stars { width:46px; min-width:46px; height:48px; font-size:22px; }
.tarieven-card__title { font-size:27px; }
.tarieven-card__subtitle { font-size:13px; }
.tarieven-card__description { min-height:0; padding:21px 0 19px; font-size:14px; }
.tarieven-card__price { min-height:65px; padding-bottom:19px; }
.tarieven-card__price-value { font-size:31px; }
.tarieven-card__currency { font-size:25px; }
.tarieven-card__features { padding:21px 0 27px; }
.tarieven-card__feature { font-size:13px; }
.tarieven-card__button { min-height:48px; }
}

@media (max-width:420px) {
.tarieven-block__container { width:calc(100% - 32px); }
.tarieven-block__title { font-size:28px; }
.tarieven-card { padding-right:19px; padding-left:19px; }
.tarieven-card__header { grid-template-columns:42px minmax(0,1fr); gap:13px; }
.tarieven-card__stars { width:42px; min-width:42px; height:44px; font-size:20px; }
.tarieven-card__title { font-size:25px; }
.tarieven-card__subtitle { font-size:13px; }
.tarieven-card__price { gap:11px; }
.tarieven-card__price-value { font-size:29px; }
.tarieven-card__currency { font-size:23px; }
.tarieven-card__feature { padding-left:27px; font-size:12px; }
}

.tarieven-card__stars .kami-lucide { display:block; width:18px; height:18px; margin:0 1px; fill:currentColor; stroke:currentColor; }
.tarieven-card__stars .kami-lucide.tarieven-card__icon { width:30px; height:30px; margin:0; fill:none; stroke:currentColor; }
.tarieven-card__feature::before { content:"" !important; border:0 !important; background-color:var(--backgroundColorOrange) !important; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27m9 12 2 2 4-4%27/%3E%3C/svg%3E") center / contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.75%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%2710%27/%3E%3Cpath d=%27m9 12 2 2 4-4%27/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Strakker (27-09) ---------- */
@media (min-width:768px) {
.tarieven-block { padding-top:var(--section-pad); padding-bottom:var(--section-pad); }
.tarieven-block__eyebrow { margin-bottom:8px; }
.tarieven-block__title { font-size:var(--h2-size); line-height:1.18; }
.tarieven-card { border-radius:var(--radius-card-lg); }
}

/* Twee kaarten: centreren in plaats van links in een raster van drie (QA 11-10) */
@media (min-width:1101px) {
.tarieven-block__grid:has(> .tarieven-card:nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,381px)); justify-content:center; }
}
/* Tablet (2 kolommen): een losse laatste kaart centreren in plaats van links (QA 11-10) */
@media (min-width:768px) and (max-width:1100px) {
.tarieven-block__grid > .tarieven-card:last-child:nth-child(odd) { grid-column:1 / -1; justify-self:center; width:calc(50% - 14px); }
}
