/* OurStayOne : de algemene site (/platform/).
   De hoofdsite op / is geschreven voor vakantieparken en campings, in het
   bosgroen van de app. Deze site vertelt het verhaal van het platform voor
   iedereen die gasten laat verblijven: hotels, campings, vakantieparken,
   bed & breakfasts, vakantiehuizen, jachthavens, verhuurbedrijven en
   lodges en resorts. Het ontwerp volgt het voorbeeld dat Stefano op
   17 oktober 2026 maakte: warm crème, grote foto's, een klassieke
   schreefletter voor de koppen, taupe als enige kleur (logo, knoppen) en
   antraciet voor tekst. Het palet is van Stefano (11 oktober 2026); de
   crème en zandtinten komen uit zijn voorbeeld. */

:root {
  --offwhite:  #F4EFE8;   /* paginakleur: warm crème */
  --wit:       #FFFFFF;   /* kaarten, formulieren en contentblokken */
  --zand:      #EDE6DC;   /* afwisselende banen, iets warmer dan de pagina */
  --champagne: #E8DFD3;   /* accenten, icoontegels en de lichte knop */
  --lijn:      #DCD3C7;   /* lijnen en randen */
  --taupe-l:   #A8998A;   /* tussenkleur en labels, lichter taupe */
  --bruin:     #A58C75;   /* het bruin van het app-logo, voor de iconen */
  --taupe:     #756252;   /* primair: logo, knoppen, gekozen navigatie */
  --taupe-d:   #5C4C3F;   /* taupe bij aanwijzen */
  --tekst:     #3B3733;   /* lopende tekst, een tint zachter dan antraciet */
  --antraciet: #292724;   /* titels, iconen, donkere banen en de voet */
  --donker:    #2A2119;   /* de donkere baan met de avondfoto */
  --radius:   22px;
  --schaduw:  0 18px 50px rgba(41, 39, 36, .10);
  --schaduw-groot: 0 34px 90px rgba(41, 39, 36, .18);
  --schreef:  'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua',
              Palatino, Georgia, 'Times New Roman', serif;
  --schreefloos: Inter, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto,
              sans-serif;
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--schreefloos);
  color: var(--tekst);
  background: var(--offwhite);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
.container { max-width: 1180px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, .schreef {
  font-family: var(--schreef);
  font-weight: 400;
  color: var(--antraciet);
  letter-spacing: -.01em;
}
h1 { font-size: clamp(46px, 6.4vw, 84px); line-height: 1.0; letter-spacing: -.02em; }
h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.1; }
h3 { font-size: 22px; line-height: 1.3; }
h1 em, h2 em { font-style: italic; color: var(--taupe); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
p a, li a { color: var(--taupe); text-decoration: underline;
            text-underline-offset: 3px; text-decoration-color: var(--lijn); }
p a:hover, li a:hover { color: var(--antraciet); }

/* Het kleine kopje in kapitalen boven een titel. */
.label {
  display: inline-block; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--taupe);
  margin-bottom: 16px;
}
.lead { font-size: 19px; line-height: 1.7; color: #4A4541; max-width: 560px; }
.sub { color: #57524C; max-width: 680px; }
.pijl { font-family: var(--schreefloos); transition: transform .3s ease; }
.btn:hover .pijl { transform: translateX(4px); }

/* ------------------------------------------------------------ knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; padding: 13px 28px; font-weight: 600; font-size: 15px;
  letter-spacing: .02em; border: 1px solid transparent; cursor: pointer;
  transition: all .3s ease; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-taupe { background: var(--taupe); color: var(--wit); }
.btn-taupe:hover { background: var(--taupe-d); }
.btn-antraciet { background: var(--antraciet); color: var(--wit); }
.btn-antraciet:hover { background: #403C37; }
.btn-champagne { background: var(--champagne); color: var(--antraciet); }
.btn-champagne:hover { background: var(--wit); }
.btn-lijn { border-color: var(--taupe-l); color: var(--antraciet); background: transparent; }
.btn-lijn:hover { border-color: var(--antraciet); }
.btn-lijn-licht { border-color: rgba(255,255,255,.45); color: var(--wit); }
.btn-lijn-licht:hover { border-color: var(--wit); }
.btn-lg { padding: 16px 34px; font-size: 16px; }

/* ------------------------------------------------------------ topbalk */
.kop {
  position: sticky; top: 0; z-index: 40;
  background: rgba(244, 239, 232, .82); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.kop-binnen { display: flex; align-items: center; justify-content: space-between;
              gap: 20px; height: 78px; }
/* Het logo: de S zonder achtergrond en de naam uitgeschreven, "One" in
   cursief taupe, zoals in het voorbeeld. */
.logo { display: flex; align-items: center; gap: 10px; color: #3A2F27; }
.logo img { width: 42px; height: 42px; }
.woordmerk { font-family: var(--schreef); font-size: 29px; letter-spacing: -.01em;
  line-height: 1; }
.woordmerk em { font-style: italic; color: #B39C83; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 15px;
       font-weight: 500; color: var(--antraciet); }
.nav > a:not(.btn) { position: relative; padding: 4px 0; }
.nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 100%;
  bottom: 0; height: 1px; background: var(--taupe); transition: right .3s ease; }
.nav > a:not(.btn):hover::after { right: 0; }
.nav .btn { padding: 10px 22px; }
.nav-login { color: var(--taupe); }
.menuknop { display: none; background: none; border: 1px solid var(--lijn);
  border-radius: 999px; padding: 8px 14px; font: inherit; color: var(--antraciet);
  cursor: pointer; }

/* ------------------------------------------------------------ hero */
/* Eén groot, warm beeld: de foto staat rechts en loopt links zacht over
   in het crème van de pagina, zodat de kop erop rust. De topbalk staat
   er half doorzichtig overheen, net als in het voorbeeld. */
.hero { position: relative; overflow: hidden; min-height: 640px;
  margin-top: -78px; padding-top: 78px; display: flex; align-items: center;
  background: var(--offwhite); }
.hero-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 64%;
  height: 100%; object-fit: cover; object-position: center; }
/* De overloop van crème naar foto: een laag crème over de foto die links
   breed en in een zachte boog wegloopt (meerdere stappen, anders zie je
   een rand), en die ook boven en onder de foto een beetje in de pagina
   laat verlopen. Stefano vond de eerste, rechte overloop "niet mooi
   genoeg" (22 oktober 2026). */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    /* De foto begint op 36% van de breedte; tot 38% blijft de laag dicht,
       anders zie je de rand van de foto als een dun lijntje. */
    linear-gradient(90deg, var(--offwhite) 0, var(--offwhite) 38%,
      rgba(244,239,232,.90) 43%, rgba(244,239,232,.68) 48%,
      rgba(244,239,232,.42) 54%, rgba(244,239,232,.18) 60%,
      rgba(244,239,232,.05) 65%, rgba(244,239,232,0) 70%),
    linear-gradient(180deg, var(--offwhite) 0, rgba(244,239,232,.75) 7%,
      rgba(244,239,232,.3) 14%, rgba(244,239,232,0) 22%),
    linear-gradient(180deg, rgba(244,239,232,0) 80%, rgba(244,239,232,.35) 90%,
      rgba(244,239,232,.8) 97%, var(--offwhite) 100%); }
.hero-binnen { position: relative; z-index: 2; width: 100%; padding-top: 70px; padding-bottom: 70px; }
.hero-tekst { max-width: 520px; }
.hero h1 { margin-bottom: 26px; }
.hero .lead { margin-bottom: 34px; }
.hero-acties { display: flex; flex-wrap: wrap; gap: 12px; }
/* De tekst komt regel voor regel binnen. */
.hero-tekst > * { animation: binnen .7s ease both; }
.hero-tekst > :nth-child(2) { animation-delay: .12s; }
.hero-tekst > :nth-child(3) { animation-delay: .24s; }
@keyframes binnen { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-tekst > * { animation: none; opacity: 1; }
}

/* ------------------------------------------------------------ banen */
.baan { padding: 96px 0; }
.baan-zand { background: var(--zand); }
.baan-beige { background: var(--champagne); }
.baan-wit { background: var(--wit); }
.baan-antraciet { background: var(--antraciet); color: #D8CDBF; }
.baan-antraciet h2, .baan-antraciet h3 { color: var(--wit); }
.baan-antraciet .label { color: var(--champagne); }
/* Taupe op antraciet is te donker; in de donkere baan is de knop
   champagne. */
.baan-antraciet .btn-taupe { background: var(--champagne); color: var(--antraciet); }
.baan-antraciet .btn-taupe:hover { background: var(--wit); }
.baan-antraciet .sub, .baan-antraciet .lead { color: #BBAE9E; }
.kop-midden { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.kop-midden .sub, .kop-midden .lead { margin: 14px auto 0; }
.kop-links { max-width: 720px; margin-bottom: 56px; }
.kop-links .sub { margin-top: 16px; }

/* App en webapp: twee kolommen, elk met een waaier van drie telefoons
   (de middelste vooraan, de twee andere erachter en iets gedraaid), een
   titel in taupe, een korte tekst en "Lees meer". */
.manieren { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; text-align: center; }
.manier h3 { font-size: 30px; color: var(--taupe); margin-bottom: 12px; }
.manier p { max-width: 440px; margin: 0 auto 18px; color: #4A4541; }
.lees-meer { display: inline-block; font-weight: 600; color: var(--antraciet);
  border-bottom: 1px solid var(--taupe-l); padding-bottom: 2px; transition: border-color .3s ease; }
.lees-meer:hover { border-color: var(--antraciet); }
.waaier { position: relative; height: 400px; margin: 0 auto 30px; max-width: 460px; }
.tel { position: absolute; width: 156px; aspect-ratio: 9 / 19.2; border-radius: 24px;
  padding: 6px; background: #2B2622; box-shadow: 0 24px 60px rgba(41, 39, 36, .28);
  overflow: hidden; display: flex; flex-direction: column; }
.tel img { width: 100%; height: 100%; object-fit: cover; object-position: top;
  border-radius: 18px; }
.tel-1 { left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; }
.tel-2 { left: 6%; top: 12px; transform: rotate(-11deg); z-index: 1; width: 148px; }
.tel-3 { right: 6%; top: 24px; transform: rotate(10deg); z-index: 2; width: 148px; }
/* De webapp in de browser: een smalle adresbalk boven het scherm. */
.adresbalk { display: block; flex: none; font-size: 9px; letter-spacing: .02em;
  color: #6F665D; background: #F1EEEA; padding: 7px 8px 5px; border-radius: 18px 18px 0 0;
  text-align: center; }
.adresbalk::before { content: "\1F512"; font-size: 7px; margin-right: 4px; }
.tel-web img { border-radius: 0 0 18px 18px; }
/* De acht startschermen per soort verblijf: een losse telefoon per soort,
   met de naam en één zin eronder; de hele kaart is een link naar de site
   van die branche. */
/* De bewegende strook: de acht kaarten staan er twee keer in; het spoor
   schuift een halve breedte naar links en springt dan onzichtbaar terug.
   Elke kaart heeft een vaste breedte en rechtermarge (geen gap), anders is
   de helft niet precies de helft en hapert de overgang. */
.app-slider { padding: 84px 0 72px; overflow: hidden; background: var(--offwhite); }
.app-slider .apps-kop { margin-top: 0; margin-bottom: 44px; }
.app-baan { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 7%, black 93%, transparent); }
.app-spoor { display: flex; width: max-content; animation: schuif 64s linear infinite; }
.app-spoor:hover { animation-play-state: paused; }
.app-spoor .app-kaart { flex: none; width: 236px; margin-right: 30px; }
@keyframes schuif { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .app-spoor { animation: none; }
  .app-baan { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}
.apps-kop { margin-top: 96px; margin-bottom: 44px; }
.apps-titel { font-size: clamp(28px, 3.2vw, 38px); line-height: 1.15; }
.app-rij { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 22px; text-align: center; }
.app-kaart { display: block; transition: transform .35s ease; }
.app-kaart:hover { transform: translateY(-5px); }
.tel-los { position: static; width: 176px; margin: 0 auto 16px; transform: none; }
.app-kaart b { display: block; font-family: var(--schreef); font-weight: 400; font-size: 21px;
  color: var(--antraciet); line-height: 1.25; margin-bottom: 6px; }
.app-kaart > span:not(.tel) { display: block; font-size: 14px; line-height: 1.5; color: #57524C;
  max-width: 230px; margin: 0 auto; }

/* De vier branches: een foto met daaronder een donker vlak met icoon,
   naam, één zin en een pijl, zoals de kaarten in het voorbeeld. */
.branches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.branche { display: flex; flex-direction: column; border-radius: var(--radius);
  overflow: hidden; background: #2F2824; color: #EDE4D8; position: relative;
  transition: transform .35s ease, box-shadow .35s ease; }
.branche:hover { transform: translateY(-5px); box-shadow: var(--schaduw-groot); }
.branche img { width: 100%; height: 210px; object-fit: cover; }
.branche-tekst { position: relative; padding: 0 22px 22px; flex: 1;
  background: linear-gradient(180deg, #2F2824, #241F1B); }
.branche-tekst::before { content: ""; position: absolute; left: 0; right: 0;
  top: -70px; height: 70px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #2F2824); }
.branche-icoon { position: relative; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px; margin-top: -28px;
  background: rgba(244, 235, 222, .22); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(244,235,222,.3); }
.branche-icoon svg { width: 28px; height: 28px; stroke: #F4EBDE; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.branche h3 { color: var(--wit); font-size: 24px; margin: 18px 0 8px; }
.branche p { font-size: 14.5px; line-height: 1.5; color: #CDBFAF; padding-right: 48px;
  overflow-wrap: anywhere; }
.branche-pijl { position: absolute; right: 20px; bottom: 20px; width: 36px; height: 36px;
  border-radius: 50%; display: grid; place-items: center; background: var(--wit);
  color: var(--antraciet); font-size: 16px; transition: transform .3s ease; }
.branche:hover .branche-pijl { transform: translateX(4px); }
/* De achtste kaart, zonder foto: een taupe vlak met het icoon bovenin. */
.branche-overig { background: linear-gradient(160deg, #8F7A67, #5C4C3F); }
.branche-overig .branche-tekst { background: none; padding-top: 30px; justify-content: flex-end;
  display: flex; flex-direction: column; }
.branche-overig .branche-tekst::before { display: none; }
.branche-overig .branche-icoon { margin-top: 0; }
.branche-overig p { color: #E8DCCD; }
.andere { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.andere-midden { justify-content: center; margin-top: 34px; }
.andere-kop { font-family: var(--schreef); font-size: 19px; color: var(--taupe);
  margin-right: 6px; }
.andere a { border: 1px solid var(--lijn); border-radius: 999px; padding: 9px 18px;
  font-size: 14px; color: var(--antraciet); background: var(--wit); transition: all .3s ease; }
.andere a:hover { border-color: var(--antraciet); }

/* Twee kolommen: tekst naast een beeld of een raster. */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.twee-breed { gap: 90px; }
.twee.omgekeerd > .tekst { order: 2; }
.twee + .twee { margin-top: 110px; }
.tekst h2 { margin-bottom: 18px; }
.tekst p { color: #4A4541; margin-bottom: 14px; }
.tekst-actie { margin-top: 26px; }
.tekst ul { list-style: none; padding: 0; margin: 22px 0 0; }
.tekst li { position: relative; padding-left: 26px; margin-bottom: 10px; color: var(--tekst); }
.tekst li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px;
  height: 1px; background: var(--taupe); }
.lijst { border: 1px solid var(--lijn); border-radius: var(--radius); padding: 14px;
  background: var(--wit); box-shadow: var(--schaduw); }
.lijst img { border-radius: 12px; }
.lijst-telefoon { max-width: 320px; margin: 0 auto; border-radius: 40px; padding: 10px;
  background: var(--antraciet); box-shadow: var(--schaduw-groot); }
.lijst-telefoon img { border-radius: 32px; }

/* De zes functies: een tegel met een lijnicoon en een naam eronder. */
.functies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 20px;
  text-align: center; }
.functie b { display: block; font-weight: 500; font-size: 15px; color: var(--antraciet);
  margin-top: 14px; }
.functie-icoon { display: grid; place-items: center; width: 68px; height: 68px;
  margin: 0 auto; border-radius: 18px; background: var(--champagne);
  transition: transform .3s ease, background .3s ease; }
.functie:hover .functie-icoon { transform: translateY(-3px); background: #E0D4C5; }
.functie-icoon svg { width: 30px; height: 30px; stroke: var(--taupe-d); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* De vier lagen van het platform: witte kaarten met een icoon en drie punten. */
.lagen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.laag { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  padding: 30px 28px; transition: all .3s ease; }
.laag:hover { transform: translateY(-4px); box-shadow: var(--schaduw); border-color: var(--taupe-l); }
.laag svg { width: 36px; height: 36px; stroke: var(--taupe); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.laag h3 { margin-bottom: 8px; }
.laag p { font-size: 15px; color: #57524C; line-height: 1.6; }
.laag ul { list-style: none; padding: 0; margin: 18px 0 0; border-top: 1px solid var(--lijn); }
.laag li { position: relative; padding: 8px 0 8px 20px; font-size: 14.5px;
  border-bottom: 1px solid var(--lijn); }
.laag li::before { content: ""; position: absolute; left: 0; top: 18px; width: 10px;
  height: 1px; background: var(--taupe); }

/* Drie stappen. */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.stap { padding: 34px 30px; border-top: 1px solid var(--taupe-l); }
.stap b.nr { font-family: var(--schreef); font-size: 44px; font-weight: 400;
  color: var(--taupe); display: block; line-height: 1; margin-bottom: 18px; }
.stap h3 { margin-bottom: 10px; }
.stap p { font-size: 15.5px; color: #57524C; }

/* De onderdelen van het platform op een categoriepagina, als twee
   kolommen met dunne lijntjes. */
.onderdelen { display: grid; grid-template-columns: 1fr 1fr; gap: 0 60px; }
.onderdeel { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 24px 0;
  border-bottom: 1px solid var(--lijn); }
.onderdeel svg { width: 30px; height: 30px; stroke: var(--taupe-d); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-top: 4px; }
.onderdeel h3 { font-size: 19px; margin-bottom: 4px; }
.onderdeel p { font-size: 15px; color: #57524C; line-height: 1.6; }

/* Prijzen. */
.prijs-kaart { display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--schaduw); }
.prijs-vak { padding: 48px 44px; }
.prijs-vak + .prijs-vak { border-left: 1px solid var(--lijn); background: var(--wit); }
.prijs-bedrag { font-family: var(--schreef); font-size: 58px; line-height: 1;
  color: var(--antraciet); margin: 10px 0 6px; }
.prijs-bedrag small { font-family: var(--schreefloos); font-size: 15px; color: var(--taupe);
  margin-left: 6px; }
.prijs-vak p { font-size: 15.5px; color: #57524C; }
.prijs-vak ul { list-style: none; padding: 0; margin: 20px 0 26px; }
.prijs-vak li { padding: 8px 0 8px 26px; position: relative; font-size: 15px;
  border-top: 1px solid var(--lijn); }
.prijs-vak li::before { content: "✓"; position: absolute; left: 0; color: var(--taupe-d); }
.prijs-voet { text-align: center; font-size: 14px; color: var(--taupe); margin-top: 22px; }

/* De donkere baan met de avondfoto: de foto staat rechts en loopt links
   over in het donker, de tekst staat links. */
.cta { position: relative; overflow: hidden; background: var(--donker);
  color: #E6DACB; padding: 120px 0; }
.cta-foto { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; height: 100%;
  object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40%);
  mask-image: linear-gradient(90deg, transparent 0, black 40%); }
.cta-binnen { position: relative; max-width: 1180px; }
.cta .label { color: #CDBBA3; }
.cta h2 { color: var(--wit); max-width: 520px; margin-bottom: 18px; }
.cta .lead { color: #D3C6B6; margin-bottom: 34px; max-width: 460px; }
.cta-acties { display: flex; flex-wrap: wrap; gap: 12px; }

/* Het slot op een categoriepagina. */
.slot { text-align: center; padding: 110px 0; }
.slot h2 { font-size: clamp(34px, 4.6vw, 54px); max-width: 820px; margin: 0 auto 20px; }
.slot .lead { margin: 0 auto 34px; }
.slot-acties { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ------------------------------------------------------------ voet */
.voet { background: var(--antraciet); color: #A3968A; padding: 64px 0 40px; font-size: 14.5px; }
.voet-kolommen { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 36px;
  margin-bottom: 44px; }
.voet-merk .logo { color: var(--wit); margin-bottom: 14px; }
.voet-merk .logo img { width: 34px; height: 34px; }
.voet-merk .woordmerk { font-size: 24px; }
.voet-merk .woordmerk em { color: #CDBBA3; }
.voet-merk p { max-width: 300px; }
.voet-mail { display: inline-block; margin-top: 12px; color: var(--champagne); }
.voet-kop { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--taupe-l); margin-bottom: 14px; }
.voet-kolom a { display: block; padding: 4px 0; color: #C9BDAF; }
.voet-kolom a:hover { color: var(--wit); }
.voet-onder { border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px;
  font-size: 13px; color: #8A7D70; }
.voet-onder a { color: inherit; }

/* ------------------------------------------------------------ categoriepagina */
.cat-hero { padding: 72px 0 64px; }
.cat-hero .twee { align-items: center; }
.cat-hero h1 { font-size: clamp(40px, 5.6vw, 64px); line-height: 1.05; }
.cat-hero .lead { margin: 0 0 30px; }
.hero-noot { font-size: 14px; color: var(--taupe-l); margin-top: 26px; }
.hero-noot b { color: var(--antraciet); font-weight: 600; }
.kruimel { font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--taupe); margin-bottom: 26px; }
.kruimel a:hover { color: var(--antraciet); }
.kruimel span { margin: 0 8px; color: var(--taupe); }
.cat-icoon { width: 120px; height: 120px; border-radius: 50%; display: grid;
  place-items: center; background: var(--wit); border: 1px solid var(--lijn);
  margin: 0 auto 24px; box-shadow: var(--schaduw); }
.cat-icoon svg { width: 54px; height: 54px; stroke: var(--taupe); fill: none;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.cat-beeld { text-align: center; }
.cat-beeld .citaat { font-family: var(--schreef); font-size: 24px; font-style: italic;
  color: var(--taupe); max-width: 380px; margin: 0 auto; line-height: 1.4; }
.herkenning { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.herken { background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 30px; }
.herken .tijd { font-family: var(--schreef); font-size: 30px; color: var(--taupe-d);
  display: block; margin-bottom: 10px; }
.herken p { font-size: 15.5px; color: #4A4541; }

/* ------------------------------------------------------------ smal */
/* Eén systeem in plaats van een gastenapp naast een boekingssysteem
   (24 oktober 2026, Stefano: "wij moeten het beter brengen: een gastenapp
   en boekingssysteem"). Twee kaarten: bij anderen drie blokjes met een
   plus ertussen, bij ons één gevuld blokje; de noot eronder zegt dat
   alleen de gastenapp ook kan. */
.vergelijk { padding: 72px 0; }
.vergelijk .kop-midden { margin-bottom: 40px; }
.vergelijk-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.vergelijk-kaart { background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 30px 32px; }
.vergelijk-wij { border-color: var(--taupe); box-shadow: var(--schaduw); }
.vergelijk-kop { display: block; font-size: 12px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--taupe-l);
  margin-bottom: 18px; }
.vergelijk-wij .vergelijk-kop { color: var(--taupe); }
.blokjes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.blokje { display: inline-block; padding: 12px 16px; border-radius: 12px;
  border: 1px solid var(--lijn); background: var(--offwhite); font-weight: 500;
  font-size: 15px; color: var(--antraciet); }
.blokje-stippel { border-style: dashed; background: transparent; color: #57524C; }
.blokje-vol { background: var(--taupe); border-color: var(--taupe); color: var(--wit); padding: 14px 20px; }
.plus { color: var(--taupe-l); font-size: 20px; line-height: 1; }
.vergelijk-kaart p { font-size: 15px; color: #57524C; line-height: 1.6; }
.vergelijk-noot { text-align: center; max-width: 720px; margin: 30px auto 0;
  font-size: 15px; line-height: 1.7; color: #4A4541; }
.vergelijk-noot b { color: var(--antraciet); font-weight: 600; }

@media (max-width: 980px) {
  .twee, .prijs-kaart, .onderdelen { grid-template-columns: 1fr; }
  .twee.omgekeerd > .tekst { order: 0; }
  .twee + .twee { margin-top: 70px; }
  .branches, .lagen { grid-template-columns: repeat(2, 1fr); }
  .manieren { grid-template-columns: 1fr; gap: 56px; }
  .app-rij { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .tel-los { width: 150px; }
  .stappen, .herkenning { grid-template-columns: 1fr; }
  .voet-kolommen { grid-template-columns: 1fr 1fr; }
  .prijs-vak + .prijs-vak { border-left: 0; border-top: 1px solid var(--lijn); }
  .baan { padding: 70px 0; }
  /* Op een smal scherm staat de foto onder de tekst, in volle breedte. */
  .hero { min-height: 0; display: block; }
  .hero::after { display: none; }
  .hero-binnen { padding-top: 56px; padding-bottom: 0; }
  .hero-foto { position: static; width: 100%; height: 360px; margin-top: 34px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 30%);
    mask-image: linear-gradient(180deg, transparent 0, black 30%); }
  .cta { padding: 70px 0 0; }
  .cta-foto { position: static; width: 100%; height: 300px; margin-top: 44px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, black 40%);
    mask-image: linear-gradient(180deg, transparent 0, black 40%); }
}
@media (max-width: 760px) {
  .nav { display: none; position: absolute; left: 0; right: 0; top: 78px;
    flex-direction: column; align-items: stretch; gap: 0; background: var(--wit);
    border-bottom: 1px solid var(--lijn); padding: 10px 28px 18px; }
  .nav.open { display: flex; }
  .nav > a { padding: 12px 0; border-bottom: 1px solid var(--lijn); }
  .nav > a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 14px; }
  .menuknop { display: inline-block; }
  .woordmerk { font-size: 24px; }
  /* "vanaf € 99" brak over twee regels op 375 beeldpunten. */
  .prijs-bedrag { font-size: 42px; white-space: nowrap; }
  /* Een lange knoptekst ("Bekijk de site voor uw verhuur van
     vakantiehuizen") mag hier afbreken: op één regel duwde hij de hele
     categoriepagina breder dan het scherm (tot 489 beeldpunten op 375). */
  .hero-acties .btn { white-space: normal; text-align: center; }
  .branches, .lagen { grid-template-columns: 1fr; }
  .functies { grid-template-columns: repeat(2, 1fr); }
  .vergelijk-rij { grid-template-columns: 1fr; }
  .vergelijk { padding: 56px 0; }
  .voet-kolommen { grid-template-columns: 1fr; }
  /* Alleen de zijkanten: "padding: 0 20px" zou ook de ruimte boven de
     kop in de hero (.hero-binnen) weghalen. */
  .container { padding-left: 20px; padding-right: 20px; }
  .prijs-vak { padding: 34px 26px; }
  .hero-foto { height: 280px; }
}

/* ---------------------------------------------------------- de klantenlijn
   De logo's van verblijven die zelf ja zeiden (klantenlijn.py) schuiven
   rustig van rechts naar links. De rij staat er twee keer in, elk logo met
   dezelfde marge, zodat een halve slag precies één rij is en hij naadloos
   rondgaat. Wie liever geen beweging ziet, krijgt de logo's stil naast
   elkaar. */
.klanten { padding: 44px 0 52px; text-align: center; border-bottom: 1px solid var(--lijn); }
.klanten .label { margin-bottom: 26px; }
.klanten-band {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.klanten-rij { display: flex; align-items: center; width: max-content;
  animation: klantenSchuif var(--duur, 40s) linear infinite; }
.klanten-band:hover .klanten-rij { animation-play-state: paused; }
.klanten-rij img { height: 48px; width: auto; max-width: 170px; margin: 0 34px;
  object-fit: contain; filter: grayscale(1); opacity: .72;
  transition: filter .3s ease, opacity .3s ease; }
.klanten-rij img:hover { filter: none; opacity: 1; }
@keyframes klantenSchuif { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .klanten-band { -webkit-mask-image: none; mask-image: none; }
  .klanten-rij { animation: none; width: auto; flex-wrap: wrap;
    justify-content: center; row-gap: 22px; padding: 0 28px; }
  .klanten-rij img[aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------- probeer de app
   Eén donkere baan met één grote telefoon, met de echte app erin (Stefano,
   28 oktober 2026). De app rekent altijd op een echt iPhone-scherm van
   390 bij 844 en wordt hier op 80% getoond. Tot de eerste tik staat er een
   stilstaand startscherm met de knop eroverheen. */
.probeer { position: relative; overflow: hidden; background: var(--donker);
  color: #E9E1D6; padding: 104px 0; }
.probeer::before { content: ""; position: absolute; right: -160px; top: 50%;
  width: 820px; height: 820px; transform: translateY(-50%); pointer-events: none;
  background: radial-gradient(circle, rgba(165, 140, 117, .40), transparent 62%); }
.probeer-binnen { position: relative; display: grid; grid-template-columns: 1fr auto;
  gap: 80px; align-items: center; }
.probeer .label { color: #CDBBA3; }
.probeer h2 { color: #fff; }
.probeer h2 em { color: var(--champagne); }
.probeer-tekst p { color: #D9CFC2; font-size: 19px; line-height: 1.7;
  max-width: 500px; margin: 18px 0 30px; }
.probeer-soorten { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }
.probeer-soort { font: inherit; font-size: 15px; font-weight: 600; color: #E9E1D6;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  padding: 10px 20px; border-radius: 999px; cursor: pointer;
  transition: background .25s ease, color .25s ease; }
.probeer-soort:hover { background: rgba(255, 255, 255, .16); }
.probeer-soort.actief { background: var(--champagne); border-color: var(--champagne);
  color: var(--antraciet); }
.probeer-tips { list-style: none; padding: 0; display: grid; gap: 16px; }
.probeer-tips li { display: flex; align-items: center; gap: 14px; font-size: 16px;
  color: #E9E1D6; }
.probeer-tips b { color: #fff; }
.probeer-tips .nr { flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(232, 223, 211, .45); display: grid; place-items: center;
  font-family: var(--schreef); font-size: 16px; color: var(--champagne); }
.probeer-telefoon { text-align: center; }
.probeer-toestel { width: 332px; height: 695px; padding: 10px; margin: 0 auto;
  border-radius: 52px; background: #0E0C0A;
  box-shadow: 0 50px 110px rgba(0, 0, 0, .55), inset 0 0 0 2px #3A322B; }
.probeer-scherm { position: relative; width: 312px; height: 675px;
  border-radius: 42px; overflow: hidden; background: #F8F6F2; }
.probeer-poster { display: block; width: 100%; height: 100%; object-fit: cover;
  object-position: top; }
.probeer-app { position: absolute; top: 0; left: 0; width: 390px; height: 844px;
  border: 0; background: #F8F6F2; transform: scale(.8); transform-origin: 0 0; }
.probeer-scherm.wacht::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: 0; height: 46%; z-index: 1; pointer-events: none;
  background: linear-gradient(rgba(42, 33, 25, 0), rgba(42, 33, 25, .62)); }
.probeer-start { position: absolute; left: 50%; bottom: 48px; z-index: 2;
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  font: inherit; font-size: 16px; font-weight: 700; white-space: nowrap;
  color: var(--antraciet); background: var(--champagne); border: 0;
  padding: 15px 28px; border-radius: 999px; cursor: pointer;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .35); transition: transform .3s ease; }
.probeer-start:hover { transform: translateX(-50%) scale(1.04); }
.probeer-start svg { width: 18px; height: 18px; fill: currentColor; }
.probeer-start[disabled] { cursor: progress; opacity: .9; }
.probeer-noot { color: #A8998A; font-size: 13.5px; max-width: 332px;
  margin: 22px auto 0; }
@media (max-width: 900px) {
  .probeer { padding: 76px 0; }
  .probeer-binnen { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 420px) {
  .probeer-toestel { transform: scale(.86); transform-origin: top center;
    margin-bottom: -97px; }
}