/* Productpagina huisportret (sjabloon alp-huisportret-landing). Ontwerpsysteem van de andere Lief Papier-pagina's, alles binnen .alp-hpl.
   Geen SVG-filters, blend-modes of backdrop-filter (Safari). */
.alp-hpl{
--papier-0:#FFFFFF;--papier-50:#F9F7F2;--papier-100:#F4F1E8;--papier-200:#EBE6D9;--papier-300:#DED7C6;
--inkt-900:#2C2C2C;--inkt-800:#3A3936;--inkt-700:#4E4C46;--inkt-600:#6B6860;--inkt-400:#8F8B81;
--goud-100:#F6EFDF;--goud-300:#E1C699;--goud-400:#D0B183;--goud-600:#A6854F;--goud-700:#8A6E3F;--goud-800:#6E5730;
--text-heading:#2C2C2C;--text-body:#4E4C46;--text-muted:#6B6860;--text-accent:#8A6E3F;--line-hairline:#DED7C6;
--wall:#E9E3D6;--wall-2:#DFD7C6;
--font-display:'Cormorant Garamond',Georgia,serif;--font-body:'Mulish',system-ui,sans-serif;
--text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-md:1.0625rem;--text-lg:1.25rem;--text-xl:1.5rem;
--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
--section-y:clamp(3rem,7vw,6rem);--gutter:clamp(1.125rem,4vw,3rem);--container:1240px;
--radius-sm:3px;--radius-md:5px;--dur-base:240ms;--ease-out:cubic-bezier(.22,.61,.36,1);
display:block;font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;color:var(--text-body);background:var(--papier-50)}
.alp-hpl *,.alp-hpl *::before,.alp-hpl *::after{box-sizing:border-box}
.alp-hpl h1,.alp-hpl h2,.alp-hpl h3{font-family:var(--font-display);font-weight:300;color:var(--text-heading);margin:0;padding:0;line-height:1.1;text-transform:none;letter-spacing:0}
.alp-hpl p,.alp-hpl ul,.alp-hpl ol,.alp-hpl li,.alp-hpl figure,.alp-hpl figcaption,.alp-hpl details,.alp-hpl summary{margin:0;padding:0}
.alp-hpl ul,.alp-hpl ol{list-style:none}
.alp-hpl img{display:block;max-width:100%;height:auto;border:0;box-shadow:none;border-radius:0}
.alp-hpl a:not([class]){color:var(--goud-700);text-decoration:none}
.alp-hpl a:not([class]):hover{color:var(--goud-800);text-decoration:underline}
.alp-hpl :focus-visible{outline:2px solid var(--goud-600);outline-offset:2px}
.alp-hpl .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.alp-hpl .eyebrow{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--text-accent)}
.alp-hpl h2{font-size:clamp(2rem,1.4rem + 2.2vw,3rem)}
.alp-hpl .muted{color:var(--text-muted);font-size:var(--text-sm)}
.alp-hpl .center{text-align:center;margin-top:var(--space-10)}

/* knoppen */
.alp-hpl .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;margin:0;padding:0 1.8rem;border:1px solid var(--goud-300);border-radius:var(--radius-md);background:var(--goud-300);color:var(--inkt-900);font:500 var(--text-base)/1 var(--font-body);letter-spacing:0;text-transform:none;text-decoration:none;box-shadow:none;cursor:pointer;transition:background var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.alp-hpl .btn:hover{background:var(--goud-400);border-color:var(--goud-400);color:var(--inkt-900);text-decoration:none}
.alp-hpl .btn--line{background:transparent;border-color:var(--inkt-400)}
.alp-hpl .btn--line:hover{background:var(--papier-0);border-color:var(--inkt-800)}
.alp-hpl .more{display:inline-block;margin-top:var(--space-6);font-weight:600;font-size:var(--text-sm);color:var(--goud-700);text-decoration:underline;text-decoration-color:var(--goud-300);text-underline-offset:4px}
.alp-hpl .more:hover{color:var(--goud-800);text-decoration-color:var(--goud-700)}
.alp-hpl .ticks{display:grid;gap:.45rem;margin-top:var(--space-6);font-size:var(--text-sm);color:var(--inkt-800)}
.alp-hpl .ticks li{position:relative;padding-left:1.6rem}
.alp-hpl .ticks li::before{content:"";position:absolute;left:0;top:.3em;width:1rem;height:.55rem;border-left:1.5px solid var(--goud-600);border-bottom:1.5px solid var(--goud-600);transform:rotate(-45deg) scale(.8)}

/* plek-labels (alleen beheerders) */
.alp-hpl span.slot{position:absolute;z-index:3;top:.5rem;left:.5rem;max-width:calc(100% - 1rem);margin:0!important;padding:.2rem .5rem;border-radius:var(--radius-sm);background:#1f6feb;color:#fff!important;font:600 11px/1.4 var(--font-body)!important;text-align:left;letter-spacing:.02em;pointer-events:none;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.alp-hpl figure{position:relative}

/* lijst: zwart aluminium, gehard glas, optioneel passe-partout (breedtes in % van de lijstbreedte) */
.alp-hpl .frame{position:relative;padding:2.2%;background:linear-gradient(135deg,#3a3a3a 0%,#161616 40%,#2b2b2b 100%);box-shadow:0 1px 1px rgba(0,0,0,.25),0 14px 30px rgba(40,32,22,.28),0 4px 8px rgba(40,32,22,.14)}
.alp-hpl .frame__mat{background:var(--papier-0)}
.alp-hpl .frame--pp .frame__mat{padding:var(--my) var(--mx);background:#FBFAF6;box-shadow:inset 1px 1px 2px rgba(0,0,0,.22)}
.alp-hpl .frame--pp .frame__mat img{box-shadow:0 0 0 1px rgba(60,50,40,.08)}
.alp-hpl .frame::after{content:"";position:absolute;inset:2.2%;background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 32%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 100%);pointer-events:none}
.alp-hpl .paper{background:#f7f3ea;box-shadow:0 1px 2px rgba(44,44,44,.12),0 10px 24px rgba(44,44,44,.12)}

/* 1. hero */
.alp-hpl .hero{background:var(--papier-100);border-bottom:1px solid var(--line-hairline);overflow:hidden}
.alp-hpl .hero__grid{display:grid;gap:var(--space-10);align-items:center;padding-top:var(--space-8);padding-bottom:var(--space-12)}
@media (min-width:960px){.alp-hpl .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--space-16);padding-bottom:0}}
.alp-hpl .crumb{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:3.25rem;margin-bottom:var(--space-6);font-size:var(--text-xs);color:var(--text-muted)}
.alp-hpl .crumb a{color:var(--text-muted)}
.alp-hpl .crumb b{font-weight:400;color:var(--text-heading)}
.alp-hpl h1{margin-top:var(--space-3);font-size:clamp(2.4rem,1.6rem + 3vw,3.9rem)}
.alp-hpl .lead{margin-top:var(--space-5);max-width:52ch;font-size:var(--text-md);line-height:1.75}
.alp-hpl .hero__cta{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-8)}
.alp-hpl .hero__from{margin-top:var(--space-4);font-size:var(--text-sm);color:var(--text-muted)}
.alp-hpl .hero__from b{color:var(--inkt-900);font-weight:600}
.alp-hpl .wall{display:flex;align-items:center;justify-content:center;padding:clamp(2rem,5vw,4.5rem) clamp(1.5rem,6vw,5rem);background:radial-gradient(120% 90% at 40% 20%,#EFEAE0 0%,var(--wall) 55%,var(--wall-2) 100%)}
@media (min-width:960px){.alp-hpl .hero__art{align-self:stretch;margin-right:calc(-1 * var(--gutter))}.alp-hpl .hero__text{padding-bottom:var(--space-12)}}
.alp-hpl .hero__art .frame{width:min(100%,430px)}

/* banden */
.alp-hpl .band{padding:var(--section-y) 0}
.alp-hpl .band--white{background:var(--papier-0);border-top:1px solid var(--line-hairline);border-bottom:1px solid var(--line-hairline)}
.alp-hpl .head{max-width:46rem;margin:0 auto var(--space-10);text-align:center}
.alp-hpl .head h2{margin-top:var(--space-2)}
.alp-hpl .head p:not(.eyebrow){margin-top:var(--space-4);color:var(--text-muted)}
.alp-hpl .split{display:grid;gap:var(--space-10);align-items:center}
@media (min-width:900px){.alp-hpl .split{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-16)}.alp-hpl .split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.alp-hpl .split__text h2{margin:var(--space-2) 0 var(--space-5)}
.alp-hpl .split__text p+p{margin-top:var(--space-3)}

/* 2. foto → tekening */
.alp-hpl .ba{position:relative;aspect-ratio:1109/1036;overflow:hidden;border-radius:var(--radius-md);background:#faf8f3;box-shadow:0 14px 30px rgba(40,32,22,.14);touch-action:pan-y}
.alp-hpl .ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.alp-hpl .ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.alp-hpl .ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);pointer-events:none}
.alp-hpl .ba__line span{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.alp-hpl .ba__line span::before,.alp-hpl .ba__line span::after{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-left:2px solid var(--inkt-800);border-bottom:2px solid var(--inkt-800)}
.alp-hpl .ba__line span::before{left:11px;transform:rotate(45deg)}
.alp-hpl .ba__line span::after{right:11px;transform:rotate(-135deg)}
.alp-hpl .ba__tag{position:absolute;bottom:.75rem;padding:.25rem .6rem;border-radius:var(--radius-sm);background:rgba(255,255,255,.9);font-size:var(--text-xs);font-weight:600;color:var(--inkt-900);pointer-events:none}
.alp-hpl .ba__tag--l{left:.75rem}
.alp-hpl .ba__tag--r{right:.75rem}
.alp-hpl .ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}

/* 3. stijlen */
.alp-hpl .styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@media (min-width:900px){.alp-hpl .styles{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-6)}}
.alp-hpl .style{background:var(--papier-0);border:1px solid var(--line-hairline);border-radius:var(--radius-md);overflow:hidden}
.alp-hpl .style__img{aspect-ratio:1/1;padding:var(--space-4);background:var(--papier-0)}
.alp-hpl .style__img img{width:100%;height:100%;object-fit:contain}
.alp-hpl .style figcaption{display:grid;gap:.2rem;padding:var(--space-4) var(--space-5) var(--space-5);border-top:1px solid var(--line-hairline)}
.alp-hpl .style b{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--text-heading)}
.alp-hpl .style span{font-size:var(--text-sm);color:var(--text-muted)}

/* 4. maak hem eigen */
.alp-hpl .eigen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:end}
.alp-hpl .eigen figure:nth-child(2){transform:translateY(-1.5rem)}
.alp-hpl .eigen figcaption{margin-top:var(--space-3);font-size:var(--text-xs);text-align:center;color:var(--text-muted)}

/* 5. formaten op ware verhouding */
.alp-hpl .scale{display:flex;align-items:flex-end;gap:clamp(1rem,3vw,2.5rem);padding:clamp(2rem,4vw,3.5rem) clamp(1rem,4vw,3rem) var(--space-8);background:radial-gradient(120% 90% at 40% 10%,#EFEAE0 0%,var(--wall) 60%,var(--wall-2) 100%);border-radius:var(--radius-md)}
.alp-hpl .scale figure{flex:var(--w) 1 0;min-width:0}
.alp-hpl .scale figcaption{display:grid;gap:.1rem;margin-top:var(--space-4);font-size:var(--text-xs);color:var(--text-muted)}
.alp-hpl .scale figcaption b{font-size:var(--text-sm);color:var(--inkt-900)}
.alp-hpl .scale figcaption em{font-style:normal;font-weight:600;color:var(--inkt-900)}
@media (max-width:700px){.alp-hpl .scale{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}}
@media (max-width:700px){.alp-hpl .scale__true{display:none}}
.alp-hpl .scale__note{margin-top:var(--space-4);text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
.alp-hpl .prices{max-width:52rem;margin:var(--space-10) auto 0;border:1px solid var(--line-hairline);border-radius:var(--radius-md);background:var(--papier-0);overflow:hidden}
.alp-hpl .prices>div{display:grid;grid-template-columns:1.1fr repeat(3,1fr);align-items:center;border-top:1px solid var(--line-hairline)}
.alp-hpl .prices>div:first-child{border-top:0}
.alp-hpl .prices span{display:grid;gap:.1rem;padding:var(--space-4);font-size:var(--text-md);font-variant-numeric:lining-nums tabular-nums;color:var(--inkt-900);text-align:center}
.alp-hpl .prices span[role=rowheader]{text-align:left}
.alp-hpl .prices small{font-size:var(--text-xs);color:var(--text-muted)}
.alp-hpl .prices>div.prices__head{background:var(--papier-50)}
.alp-hpl .prices__head span{padding-top:var(--space-3);padding-bottom:var(--space-3);font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent);background:transparent}
@media (max-width:600px){.alp-hpl .prices span{padding:var(--space-3) var(--space-2);font-size:var(--text-sm)}.alp-hpl .prices__head span{font-size:.625rem;letter-spacing:.02em}}

/* 6. momenten */
.alp-hpl .moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8) var(--space-5)}
@media (min-width:900px){.alp-hpl .moments{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}}
.alp-hpl .moment .frame{margin:0 auto;width:86%}
.alp-hpl .moment figcaption{display:grid;gap:.25rem;margin-top:var(--space-5);text-align:center}
.alp-hpl .moment b{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;color:var(--text-heading)}
.alp-hpl .moment span{font-size:var(--text-sm);color:var(--text-muted);max-width:30ch;margin:0 auto}
.alp-hpl .moment--wide{display:grid;gap:var(--space-8);align-items:center;margin-top:var(--space-12)}
@media (min-width:900px){.alp-hpl .moment--wide{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}.alp-hpl .moment--wide figcaption{text-align:left}.alp-hpl .moment--wide span{margin:0}}
.alp-hpl .moment--wide .frame{width:100%}

/* 7. stappen */
.alp-hpl .steps{display:grid;gap:var(--space-6);counter-reset:s}
@media (min-width:800px){.alp-hpl .steps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.alp-hpl .steps li{counter-increment:s;display:grid;gap:.4rem;padding:var(--space-6);background:var(--papier-0);border:1px solid var(--line-hairline);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--text-muted)}
.alp-hpl .steps li::before{content:counter(s);font-family:var(--font-display);font-size:2.4rem;line-height:1;color:var(--goud-600)}
.alp-hpl .steps b{font-size:var(--text-base);color:var(--inkt-900)}

/* 8. vragen */
.alp-hpl .faq__list{max-width:50rem;margin:0 auto}
.alp-hpl .faq details{border-bottom:1px solid var(--line-hairline)}
.alp-hpl .faq summary{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) 0;font-weight:600;color:var(--inkt-900);cursor:pointer;list-style:none}
.alp-hpl .faq summary::-webkit-details-marker{display:none}
.alp-hpl .faq summary::after{content:"+";flex:0 0 1.25rem;text-align:center;line-height:1;font-weight:400;color:var(--text-muted)}
.alp-hpl .faq details[open] summary::after{content:"–"}
.alp-hpl .faq details p{padding:0 2.25rem var(--space-5) 0;font-size:var(--text-sm);line-height:1.75}

/* 9. slot */
.alp-hpl .final{background:var(--papier-100);border-top:1px solid var(--line-hairline);padding:var(--section-y) 0}
.alp-hpl .final__grid{display:grid;gap:var(--space-10);align-items:center}
@media (min-width:900px){.alp-hpl .final__grid{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}}
.alp-hpl .final h2{margin-bottom:var(--space-4)}
.alp-hpl .final p{margin-bottom:var(--space-8);max-width:44ch}
.alp-hpl .final__art .frame{width:min(100%,300px);margin:0 auto}

/* Voertuigportret (liggende lijsten): bredere lijsten dan bij de staande huisportretten */
.alp-hpl--vp .hero__art .frame{width:min(100%,560px)}
.alp-hpl--vp .final__art .frame{width:min(100%,420px)}
.alp-hpl--vp .moment .frame{width:100%}
@media (max-width:700px){.alp-hpl--vp .eigen{grid-template-columns:minmax(0,1fr)}.alp-hpl--vp .eigen figure:nth-child(2){transform:none}}
/* Sterrenkaart: zes nachtluchten in 3 kolommen (2 op mobiel), één los beeld naast de uitleg. */
@media (min-width:900px){.alp-hpl--sk .styles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.alp-hpl--sk .sk-one{margin:0;max-width:420px;justify-self:center;width:100%}
@media (min-width:900px){.alp-hpl--st .styles{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Bloemenportret: maandkaartjes met de staande stelen */
.alp-hpl--gb .gb-months .style__img{aspect-ratio:3/4;background:#f7f3ea;padding:var(--space-3)}
.alp-hpl--gb .gb-months figcaption span{font-size:var(--text-xs)}
@media (min-width:900px){.alp-hpl--gb .gb-months{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-5)}}
@media (min-width:600px) and (max-width:899px){.alp-hpl--gb .gb-months{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Vakantieportret: foto naast tekening, en liggende lijsten naast elkaar */
.alp-hpl .pair{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);margin:0}
.alp-hpl .pair figure{position:relative;margin:0;border-radius:var(--radius-md);overflow:hidden;box-shadow:0 14px 30px rgba(40,32,22,.14);aspect-ratio:3/2;background:#faf8f3}
.alp-hpl .pair img{width:100%;height:100%;object-fit:cover;display:block}
.alp-hpl .pair .ba__tag{left:.75rem}
@media (min-width:600px){.alp-hpl .pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.alp-hpl .duo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-10) var(--space-8);align-items:end}
@media (min-width:800px){.alp-hpl .duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.alp-hpl .duo .frame{width:100%}
.alp-hpl--vk .final__art .frame{width:min(100%,320px)}