/* Advice A: content hierarchy, scoped to the revised surfaces. */
.hero:has(.content-hero) { min-height: 0; padding-bottom: 65px; }
.hero-raster.content-hero { display: block; padding-block: clamp(26px,3vw,44px); }
.content-hero .hero-tekst { max-width: 760px; }
.content-hero .hero-kop { font-size: clamp(2.35rem,4.5vw,4.3rem); line-height: 1.06; max-width: 17ch; }
.content-hero .lede { max-width: 57ch; }
.content-hero .hero-acties { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 16px; }
.content-hero .hero-belofte { font-size: .92rem; max-width: 60ch; }
.content-home > section { padding-block: clamp(32px,4vw,58px); }
.content-home #list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.content-home #list .card:nth-child(n+4) { display: none; }
.content-stappen { list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; padding:0; margin:24px 0; }
.content-stappen b { font-size:1.15rem; }
.content-verdieping { margin-block:20px; border:1px solid var(--lijn-sterk); border-radius:12px; }
.content-verdieping > summary { padding:16px 20px; cursor:pointer; font-weight:650; min-height:48px; }
.content-verdieping > :not(summary) { margin-inline:20px; }
.content-verdieping > section { padding-block:24px; margin-inline:0; }
.content-verdieping > section > .wrap { padding-inline:20px; }
.content-verdieping .pro-ramen-rij { gap:20px; }
.pro-hero-raster { grid-template-columns:minmax(0,760px); }
.pro-hero { padding-block:44px; }
.pro-hero .lede { max-width:60ch; }
#plans-sectie, #vergelijk, #afspraken { padding-block:40px; }
#plans-sectie .plan-lijst { display:none; }
#plans-sectie .plan { padding:24px; }
#plans-sectie .plan-prijs { margin-block:16px 8px; }
#plans-sectie .plan-groot { font-size:clamp(2.1rem,3vw,3rem); }
#plans-sectie .plan-uitleg { min-height:0; }
#plans-sectie .plan-totaal { min-height:2.8em; }
#plans-sectie .voeg { display:none; }
#afrekenen[hidden] { display:none; }
#afspraken #vragen { margin-top:30px; }
#afspraken #vragen .wrap { padding:0; }
.content-tool-kop { font-size:clamp(1.6rem,3vw,2.3rem); margin:4px 0 24px; }
.zo-pagina .zo-stap { padding-block:24px; min-height:0; }
.zo-pagina .zo-stuur { margin-top:24px; }
.content-aanmelden { padding-block:24px; scroll-margin-top:85px; }
.content-aanmelden .veld { flex-wrap:wrap; }
.content-aanmelden input[type=email] { min-width:0; flex:1 1 200px; }
:where(#afrekenen,#plans,#toegang,#terugblik,#bestelseinen) { scroll-margin-top:80px; }
.content-home .btn, .content-aanmelden .btn { min-height:44px; }
@media(max-width:620px) {
 .hero:has(.content-hero) { padding-bottom:24px; }
 .content-hero .hero-raster { padding-top:26px; }
 .content-home #list { grid-template-columns:1fr; }
 .content-home #list .card:nth-child(n+2) { display:none; }
 .content-stappen { grid-template-columns:1fr; gap:12px; }
 .content-hero .hero-acties .btn { width:100%; }
 .content-verdieping > :not(summary) { margin-inline:12px; }
 .content-verdieping > section { margin-inline:0; }
 .pro-hero, #plans-sectie, #vergelijk, #afspraken { padding-block:28px; }
 .zo-pagina .zo-stap { padding-block:16px; }
 .content-aanmelden { padding-bottom:110px; }
}
/* Over die duizend bronnen: de ring van tien op /over. De legenda draagt de
   telling in tekst, want messing haalt op kalk geen 3:1 en sein en steen-diep
   liggen voor protanopen dicht bij elkaar; daarom ook de gaten tussen de bogen. */
.tien { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin: 1.1em 0 1.6em; }
.tien svg { flex: 0 0 auto; }
.tien-legenda { list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--ink-2); }
.tien-legenda li { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.tien-stip { width: 12px; height: 12px; border-radius: 50%; background: var(--k); flex: 0 0 auto; }
.tien-stip.tien-arcering { background: repeating-linear-gradient(45deg, var(--sein) 0 2px, transparent 2px 4px); }
/* De seinketen-widget (public/sein-widget.js, docs/sein-widget.md) op /over en
   /verhuurders. Hier alleen de plek: de ruimte vooraf, zodat wat eronder staat
   niet verspringt als hij binnenkomt. Hij kijkt naar zijn eigen breedte: vanaf
   600 liggend (720 bij 380), smaller staand (380 bij 590). De tekening is 28
   smaller dan de plek (de binnenrand) en er komt 67 bij voor de rand en het
   onderschrift. Zonder javascript komt hij niet, dus dan geen plek. */
.sw-plek { container-type: inline-size; margin: 1.4em 0 1.6em; }
opensein-seinketen:not(:defined) { display: block; height: calc((100cqw - 28px) * 0.5278 + 67px); border-radius: 20px; background: var(--nacht); }
@container (max-width: 599.98px) {
  opensein-seinketen:not(:defined) { height: calc((100cqw - 28px) * 1.5526 + 67px); }
}
html:not([data-stand]) .sw-plek { display: none; }


/* Ons verhaal leest als één brief. De kantlijn blijft aanvullend. */
.verhaal-brief {
  --brief-papier: #fffdf7;
  --brief-schaduw: #10333f0d;
  max-width: 1120px; margin: clamp(16px, 3vw, 40px) auto 28px;
  width: calc(100% - 40px); padding: clamp(24px, 4vw, 54px);
  background: var(--brief-papier); color: var(--ink);
  border: 1px solid var(--lijn); border-top: 4px solid var(--steen);
  border-radius: 3px; box-shadow: 0 14px 46px var(--brief-schaduw);
}
.verhaal-brief > .pagina-kop { padding: 0 0 14px; }
body[data-menu-b] .verhaal-brief .wrap { width: 100%; max-width: none; margin: 0; padding: 0; }
.verhaal-brief .pagina-label { font-size: 13px; letter-spacing: .06em; color: var(--steen-tekst); }
.verhaal-brief .pagina-kop h1 { max-width: 22ch; font-size: clamp(29px, 3.2vw, 42px); line-height: 1.15; margin-bottom: 24px; }
.verhaal-brief .lede-papier { max-width: 62ch; font-size: 18px; line-height: 1.8; color: var(--ink-2); }
.verhaal-brief .br-breed { display: none; }
.verhaal-brief .team-sectie { padding: 32px 0 0; border: 0; }
.verhaal-brief .team-sectie + .team-sectie:not(.vlak-kalk) { border-top: 0; }
.verhaal-brief .team-rubriek { color: var(--steen-tekst); font-size: 13px; font-weight: 650; letter-spacing: .025em; text-transform: none; }
.verhaal-brief .prose.team-tekst { max-width: 65ch; font-size: 18px; line-height: 1.8; }
.verhaal-brief .team-tekst h2, .verhaal-brief .team-slot h2 { font-size: clamp(24px, 2.3vw, 29px); line-height: 1.25; margin: 0 0 18px; }
.verhaal-brief .team-tekst h3 { font-size: 19px; margin: 1.4em 0 .35em; }
.verhaal-brief .team-citaat { margin: 24px 0; padding-left: 18px; }
.verhaal-brief .team-citaat p { font-size: 23px; line-height: 1.4; }
.verhaal-brief .team-stappen, .verhaal-brief .team-beloftes { display: block; margin: 0; }
.verhaal-brief .team-stappen li, .verhaal-brief .team-belofte { display: block; padding: 0; margin: 0 0 22px; background: transparent; border: 0; border-radius: 0; }
.verhaal-brief .team-stappen li::before { content: none; }
.verhaal-brief .team-stappen p, .verhaal-brief .team-belofte p { font-size: inherit; line-height: inherit; }
.verhaal-brief .team-slot { padding: 26px 0 0; background: transparent; }
.verhaal-brief .team-slot .team-rij { display: block; }
.verhaal-brief .team-slot-tekst { max-width: 65ch; }
.verhaal-brief .team-slot p { font-size: 18px; line-height: 1.8; }
.verhaal-brief .team-slot .team-succes { margin-top: 28px; }
.verhaal-brief .team-groet { padding-top: 0; margin-top: 22px; }
.verhaal-brief .team-groet strong { display: inline-block; margin-top: 6px; font-family: var(--kop); font-size: 25px; color: var(--maas); border-bottom: 3px solid var(--messing); }
.verhaal-brief .team-rij.kantlijn-bestaand { grid-template-columns: minmax(0, 1fr) 48px; grid-template-areas: "rubriek naast" "tekst tekst"; gap: 12px 10px; }
.verhaal-brief .team-rij > .team-rubriek { align-self: center; margin: 0; }
.verhaal-brief .team-naast { padding-top: 0; }
.verhaal-brief .kantlijn-knop { min-height: 48px; }
.notitie-verhaal {
  --noot-papier: #f8edc9; --noot-band: #e1c884;
  padding: 22px 20px; border-radius: 2px; background: var(--noot-papier);
  border-top: 5px solid var(--noot-band); color: var(--maas); font-size: 16px; line-height: 1.65;
  box-shadow: var(--schaduw-s);
}
.notitie-verhaal-blauw { --noot-papier: #e4eef0; --noot-band: #8bb5bc; }
.notitie-verhaal .notitie-kop { display: block; font-size: 19px; line-height: 1.35; }
.notitie-verhaal .notitie-meer { font-size: 14px; }
.notitie-verhaal .notitie-rest { margin-top: 18px; }
.notitie-verhaal .notitie-slot { margin-bottom: 0; }
@container (min-width: 780px) {
  .verhaal-brief .team-rij.kantlijn-bestaand { grid-template-columns: minmax(0, 1fr) 260px; grid-template-areas: "rubriek naast" "tekst naast"; gap: 10px 38px; }
  .verhaal-brief .team-naast { padding-top: 30px; }
}
@media (max-width: 600px) {
  .verhaal-brief { width: calc(100% - 20px); padding: 24px 18px; margin-top: 14px; }
  .verhaal-brief .lede-papier, .verhaal-brief .prose.team-tekst, .verhaal-brief .team-slot p { font-size: 17px; line-height: 1.75; }
  .verhaal-brief .team-sectie { padding-top: 28px; }
  .verhaal-brief .team-rubriek { font-size: 13px; }
}
@media print {
  .verhaal-brief { width: 100%; max-width: none; padding: 0; margin: 0; box-shadow: none; border: 0; }
  .verhaal-brief .team-rij.kantlijn-bestaand { display: block; }
}