/* ============================================================
   IK BEN BUITEN - editorial designsysteem v3
   Sfeer: ochtendmist, aards, elegant met een knipoog
   Letters: systeemstacks, geen webfonts (geen verzoek naar derden)
   ============================================================ */
:root {
  --paper: #f5f1e6;
  --ink: #2a331f;
  --pine: #2f3a26;
  --pine-deep: #242d1d;
  --rust: #c05a2e;
  --soft: #736e5c;
  --line: #e0dac6;
  --white: #fffdf7;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
    Palatino, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  --maxw: 1440px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition: none !important;
  }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.75;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* --- signatuur: LAW-markering --- */
.marker {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex: none;
  background: var(--rust);
  border-radius: 0 100% 0 100%;
  transform: rotate(45deg);
}
.logo:hover .marker {
  background: var(--ink);
  transition: background 0.2s ease;
}

/* --- navigatie --- */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(245, 241, 230, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  text-decoration: none;
}
.logo em {
  font-style: normal;
  color: var(--rust);
}
.nav ul {
  display: flex;
  gap: 30px;
  list-style: none;
  margin-left: auto;
}
.nav a:not(.logo) {
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav a:not(.logo):hover {
  color: var(--rust);
}
.nav a[aria-current] {
  color: var(--rust);
  border-bottom: 2px solid var(--rust);
  padding-bottom: 4px;
}
.nav a:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 4px;
}

/* --- typografie --- */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
}
h1 {
  font-size: clamp(2.8rem, 6.5vw, 5rem);
}
h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
}
h3 {
  font-size: 1.35rem;
  line-height: 1.25;
}
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 18px;
}
.lead {
  font-size: 1.15rem;
  color: var(--soft);
  max-width: 58ch;
}
mark {
  background: linear-gradient(transparent 55%, rgba(192, 90, 46, 0.28) 55%);
  color: inherit;
  padding: 0 0.1em;
}
em.accent {
  font-style: italic;
  color: var(--rust);
}
.hand-note {
  font-family: var(--hand);
  font-size: 1.5rem;
  color: #ebdfc8;
  transform: rotate(-2deg);
  display: inline-block;
}

/* --- knoppen & links --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}
.btn::after {
  content: "\2192";
  transition: transform 0.2s ease;
}
.btn:hover::after {
  transform: translateX(5px);
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--rust {
  background: var(--rust);
  color: #fff6ee;
}
.btn--rust:hover {
  background: #a84a22;
}
.btn--ghost {
  border: 1px solid rgba(255, 253, 247, 0.7);
  color: #fffdf7;
  margin-left: 14px;
}
.btn--ghost:hover {
  background: rgba(255, 253, 247, 0.14);
}
.btn--pine {
  background: var(--pine);
  color: #f2efdf;
}
.btn--pine:hover {
  background: var(--pine-deep);
}
.btn:focus-visible {
  outline: 3px solid var(--rust);
  outline-offset: 3px;
}
.all-link {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
  white-space: nowrap;
}
.all-link:hover {
  color: var(--rust);
  border-color: var(--rust);
}

/* --- hero --- */
.hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: center;
  color: #fffdf7;
  isolation: isolate;
}
.hero picture,
.hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(20, 26, 15, 0.78) 0%,
      rgba(20, 26, 15, 0.38) 55%,
      rgba(20, 26, 15, 0.12) 100%
    ),
    linear-gradient(to top, rgba(20, 26, 15, 0.55) 0%, transparent 30%);
}
.hero .wrap,
.page-hero .wrap {
  max-width: 1440px;
}
.hero .wrap {
  padding-top: 80px;
  padding-bottom: 110px;
}
.hero .eyebrow {
  color: #e4d9be;
}
.hero .lead {
  color: #ede8d6;
  margin: 26px 0 38px;
}
.hero h1 {
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}
.hero h1 .accent {
  color: #e9a87c;
}
.hero .lead {
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

/* --- regioticker --- */
.ticker {
  background: var(--pine);
  color: #efebd8;
  overflow: hidden;
  border-top: 1px solid rgba(255, 253, 247, 0.12);
}
.ticker ul {
  display: flex;
  gap: 0;
  list-style: none;
  flex-wrap: nowrap;
  width: max-content;
  animation: tick 36s linear infinite;
}
.ticker:hover ul {
  animation-play-state: paused;
}
@keyframes tick {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.ticker a {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 26px;
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.25rem;
}
.ticker a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust);
}
.ticker li:last-child a::after {
  display: none;
}
.ticker a:hover {
  color: #fff;
  background: rgba(255, 253, 247, 0.06);
}

/* --- secties --- */
section {
  padding: 100px 0;
}
section.tight {
  padding: 72px 0;
}
.sec-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}
.sec-head p {
  color: var(--soft);
  max-width: 54ch;
  margin-top: 14px;
}

/* --- split (het idee) --- */
.split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: start;
}
.split .lead-col p {
  color: var(--soft);
  margin-bottom: 20px;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 80px;
}
/* Vier pijlers op de home. Als klasse en niet als inline stijl, want een inline
   stijl wint van de mobiele regel hieronder en dan staan er op een telefoon vier
   kolommen van 90 px naast elkaar (gemeten 02-10: 592 px breed op 390). */
.pillars.four {
  grid-template-columns: repeat(4, 1fr);
}
.pillar {
  padding: 0 34px;
  border-left: 1px solid var(--line);
}
.pillar:first-child {
  border-left: none;
  padding-left: 0;
}
.pillar .glyph {
  color: var(--rust);
  margin-bottom: 16px;
}
.pillar h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.pillar p {
  font-size: 0.95rem;
  color: var(--soft);
}
.pillar a {
  display: inline-block;
  margin-top: 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  text-decoration: none;
}
.pillar a:hover {
  text-decoration: underline;
}

/* --- feature (route vd maand) --- */
.feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
}
.feature img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  border-radius: 6px;
  box-shadow: 0 30px 60px -24px rgba(36, 45, 29, 0.4);
}
.meta-trio {
  display: flex;
  gap: 46px;
  margin-bottom: 26px;
}
.meta-trio div small {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 4px;
}
.meta-trio div b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.5rem;
}
.feature h2 {
  margin-bottom: 14px;
}
.feature .sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--soft);
  margin-bottom: 18px;
}
.feature p {
  color: var(--soft);
}
.feature .btn {
  margin-top: 30px;
}

/* --- kaarten --- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.cards.three {
  grid-template-columns: repeat(3, 1fr);
}
.card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.card .imgwrap {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  transition:
    box-shadow 0.35s ease,
    transform 0.35s ease;
}
.card:hover .imgwrap {
  box-shadow: 0 22px 44px -14px rgba(36, 45, 29, 0.45);
  transform: translateY(-4px);
}
.card img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card:hover img {
  transform: scale(1.06);
}
.badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 7px 12px;
}
.card .meta {
  display: flex;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--soft);
  margin: 16px 0 8px;
}
.card h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.card h3:hover {
  color: var(--rust);
}
.card p {
  font-size: 0.92rem;
  color: var(--soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- quote over foto --- */
.quote {
  position: relative;
  padding: 150px 0;
  color: #f2efdf;
  text-align: center;
  isolation: isolate;
}
.quote img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(24, 30, 18, 0.68);
}
.quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.35;
  max-width: 22ch;
  margin: 0 auto 26px;
}
.quote blockquote::before {
  content: "\201C";
  display: block;
  color: var(--rust);
  font-size: 3rem;
  line-height: 0.5;
  margin-bottom: 22px;
}
.quote cite {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #cdc7ae;
}

/* --- donkere band / nieuwsbrief --- */
.band {
  background: var(--pine);
  color: #f2efdf;
  padding: 90px 0;
}
.band h2 {
  margin-bottom: 12px;
}
.band p {
  color: #cfc9b0;
  max-width: 52ch;
  margin-bottom: 30px;
}
.band form {
  display: flex;
  gap: 12px;
  max-width: 470px;
  flex-wrap: wrap;
}
.band input {
  flex: 1;
  min-width: 230px;
  padding: 15px 18px;
  border: 1px solid rgba(255, 253, 247, 0.35);
  background: rgba(255, 253, 247, 0.06);
  color: #fffdf7;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.band input::placeholder {
  color: #a9a48c;
}
.band input:focus-visible {
  outline: 2px solid var(--rust);
}
.band .btn {
  border: none;
  cursor: pointer;
  font-family: var(--sans);
}

/* --- footer --- */
footer {
  background: var(--pine-deep);
  color: #bfbaa2;
  padding: 70px 0 0;
  font-size: 0.92rem;
}
.foot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 44px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}
footer .logo {
  color: #f2efdf;
  margin-bottom: 16px;
}
footer h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: 16px;
}
footer ul {
  list-style: none;
}
footer li {
  margin-bottom: 10px;
}
footer a {
  text-decoration: none;
}
footer a:hover {
  color: #f2efdf;
  text-decoration: underline;
}
.foot-bottom {
  border-top: 1px solid rgba(255, 253, 247, 0.12);
  margin-top: 60px;
}
.foot-bottom .wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  padding-bottom: 22px;
  font-size: 0.8rem;
  color: #8e8a74;
}

/* --- pagina-hero (subpagina's) --- */
.page-hero {
  position: relative;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  color: #fffdf7;
  isolation: isolate;
}
.page-hero img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(24, 30, 18, 0.78) 0%,
    rgba(24, 30, 18, 0.25) 60%,
    rgba(24, 30, 18, 0.15) 100%
  );
}
.page-hero .wrap {
  padding-top: 120px;
  padding-bottom: 64px;
}
.page-hero .eyebrow {
  color: #e4d9be;
}
.page-hero .lead {
  color: #ede8d6;
  margin-top: 18px;
}

/* --- breadcrumb --- */
.crumbs {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--soft);
  padding: 22px 0;
}
.crumbs a {
  color: var(--soft);
}

/* --- artikel --- */
.article {
  max-width: 760px;
  margin: 0 auto;
  padding: 80px 28px;
}
.article .eyebrow {
  margin-bottom: 14px;
}
.article h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 18px;
}
.article .kicker {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--soft);
}
.article h2 {
  font-size: 1.7rem;
  margin: 54px 0 18px;
}
.article p {
  margin: 0 0 20px;
  color: #4a4838;
}
.article ul,
.article ol {
  margin: 0 0 20px 22px;
  color: #4a4838;
}
.article li {
  margin-bottom: 10px;
}
.article img {
  margin: 36px 0;
  border-radius: 6px;
  box-shadow: 0 24px 48px -20px rgba(36, 45, 29, 0.35);
}
.article .note {
  font-family: var(--serif);
  font-style: italic;
  border-left: 3px solid var(--rust);
  padding: 6px 0 6px 22px;
  color: var(--soft);
  margin: 34px 0;
}

/* --- route-/reviewdata --- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 40px 0;
}
.stat {
  background: var(--paper);
  padding: 20px 18px;
}
.stat small {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 6px;
}
.stat b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  /* Een lange haltenaam ("Kamperheideweg") stak op 390 vier pixels buiten de
     pagina (gemeten 02-10); liever het woord breken dan de pagina. */
  overflow-wrap: anywhere;
}

/* --- review score --- */
.score {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 34px;
  margin: 40px 0;
}
.score-row {
  display: grid;
  grid-template-columns: 190px 1fr 52px;
  align-items: center;
  gap: 18px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.bar {
  height: 6px;
  background: var(--line);
}
.bar i {
  display: block;
  height: 100%;
  background: var(--rust);
}
.score-row span:last-child {
  font-family: var(--serif);
  font-size: 1.05rem;
  text-align: right;
}
.score-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--ink);
  padding-top: 18px;
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.score-total b {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--rust);
  letter-spacing: 0;
}
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin: 36px 0;
}
.pc h3 {
  font-size: 1.2rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pc.plus h3 {
  color: var(--pine);
}
.pc.min h3 {
  color: var(--rust);
}
.pc ul {
  list-style: none;
  margin: 0;
}
.pc li {
  padding-left: 24px;
  position: relative;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #4a4838;
}
.pc.plus li::before {
  content: "+";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--pine);
}
.pc.min li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  font-weight: 700;
  color: var(--rust);
}
.disclaimer {
  font-size: 0.8rem;
  color: var(--soft);
  border-left: 3px solid var(--line);
  padding-left: 16px;
  margin-top: 44px;
}

/* --- filterbalk --- */
.filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 44px;
}
.filters a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 16px;
  color: var(--ink);
}
.filters a.active {
  background: var(--pine);
  color: #f2efdf;
}
.filters a:not(.active):hover {
  color: var(--rust);
}

/* --- responsive --- */
@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards.three {
    grid-template-columns: repeat(2, 1fr);
  }
  .split,
  .feature {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .feature img {
    height: 420px;
  }
  .pillars,
  .pillars.four {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  /* Een lang eerste woord in een kop ("Brunssummerheide:") is op 390 breder dan
     de kolom en maakte de hele pagina 527 px (gemeten 02-10). Iets kleiner, en
     als het dan nog niet past breekt het woord in plaats van de pagina. */
  h1 {
    font-size: clamp(2.3rem, 9vw, 2.8rem);
    overflow-wrap: anywhere;
  }
  /* Twee vaste kolommen en een kleinere letter in de stats, anders breken
     haltenamen en startpunten midden in het woord (lezersadvocaat 02-10). */
  .stats {
    grid-template-columns: 1fr 1fr;
  }
  .stat {
    padding: 16px 14px;
  }
  .stat b {
    font-size: 1.05rem;
  }
  .pillar {
    border-left: none;
    padding: 0;
  }
  .foot {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .nav {
    height: auto;
    flex-wrap: wrap;
    padding: 14px 20px;
    gap: 12px;
  }
  .nav ul {
    margin-left: 0;
    flex-wrap: wrap;
    gap: 16px;
  }
  .cards,
  .cards.three {
    grid-template-columns: 1fr;
  }
  .pros-cons {
    grid-template-columns: 1fr;
  }
  .score-row {
    grid-template-columns: 120px 1fr 46px;
  }
  section {
    padding: 64px 0;
  }
  .hero {
    min-height: 74vh;
  }
  .btn--ghost {
    margin-left: 0;
    margin-top: 12px;
  }
  .ticker a {
    padding: 14px 16px;
    font-size: 1.05rem;
    gap: 16px;
  }
}

/* --- scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --- vergelijkingstabel --- */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 36px 0;
  font-size: 0.92rem;
  background: var(--white);
}
.compare th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
  text-align: left;
  padding: 14px 16px;
  border-bottom: 2px solid var(--ink);
}
.compare td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare tr:hover td {
  background: #fbf8ee;
}
.compare .best {
  background: #f3ebd8;
}
.compare .best td:first-child::after {
  content: "beste keus";
  display: inline-block;
  margin-left: 10px;
  background: var(--rust);
  color: #fff6ee;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
}
.compare b {
  font-family: var(--serif);
  font-size: 1.05rem;
}
/* Op een telefoon is de tabel breder dan het scherm (gemeten 10-10: 205 px
   erbuiten op 390). De tabel schuift dan zelf, de pagina niet. */
@media (max-width: 640px) {
  .compare {
    display: block;
    overflow-x: auto;
  }
}
/* --- contactformulier --- */
.form {
  display: grid;
  gap: 18px;
  max-width: 620px;
}
.form label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft);
  display: block;
  margin-bottom: 8px;
}
.form input,
.form select,
.form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: var(--white);
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink);
}
.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 2px solid var(--rust);
}
.form button {
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  justify-self: start;
}

/* ============================================================
   EERLIJKHEIDSLAAG
   Kaarten zonder bestemming zijn geen link, rubrieken in aanbouw
   zeggen dat zelf, en het contact loopt zonder nepformulier.
   ============================================================ */

/* --- tegel zonder bestemming: het artikel bestaat nog niet --- */
.card--soon {
  cursor: default;
}
.card--soon .imgwrap img {
  filter: grayscale(0.4) brightness(0.97);
}
.card--soon:hover .imgwrap {
  box-shadow: none;
  transform: none;
}
.card--soon:hover img {
  transform: none;
}
.card--soon h3:hover {
  color: inherit;
}
.badge--soon {
  left: auto;
  right: 14px;
  background: var(--pine);
  color: #f2efdf;
}

/* --- melding: dit deel is nog niet af --- */
.wip {
  border-left: 3px solid var(--rust);
  background: rgba(192, 90, 46, 0.07);
  padding: 14px 20px;
  margin: 0 0 34px;
  font-size: 0.95rem;
  color: var(--ink);
}
.article .wip {
  margin: 10px 0 34px;
  color: var(--ink);
}

/* --- filterknop zonder filter --- */
.filters span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 16px;
}
.filters span.active {
  background: var(--pine);
  color: #f2efdf;
}
.filters span.uit {
  color: var(--soft);
  opacity: 0.7;
}

/* --- regio in de ticker zonder eigen pagina --- */
.ticker span {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 26px;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: rgba(239, 235, 216, 0.55);
}
.ticker span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rust);
}
.ticker li:last-child span::after {
  display: none;
}

/* --- contact: mailadres in plaats van een formulier --- */
.mailkaart {
  border: 1px solid var(--line);
  background: var(--white);
  padding: 30px;
  max-width: 620px;
}
.mailkaart p {
  margin-bottom: 18px;
}
.mailkaart p:last-child {
  margin-bottom: 0;
}
.mailkaart .klein {
  font-size: 0.88rem;
  color: var(--soft);
}

@media (max-width: 640px) {
  .ticker span {
    padding: 14px 16px;
    font-size: 1.05rem;
    gap: 16px;
  }
}