/* T7 · Virtueel kantoor per pand. Knoppen: eo-k__knop (kantoor.css). */

.eo-vo__kop{max-width:780px;margin:0 auto 32px;text-align:center}
.eo-vo__kop h2{margin:0 0 12px}
.eo-vo__periode{display:inline-flex;border:1px solid var(--eo-navy);margin-top:8px}
.eo-vo__periode button{min-height:44px;padding:8px 18px;border:0;background:#fff;color:var(--eo-navy);font:600 14px/1 var(--eo-font);cursor:pointer;border-radius:0}
.eo-vo__periode button[aria-pressed=true]{background:var(--eo-navy);color:#fff}
.eo-vo__periode button:focus-visible{outline:3px solid var(--eo-focus);outline-offset:2px}

.eo-vo__pakketten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:900px;margin:0 auto}
.eo-vo__pakket{position:relative;background:#fff;padding:32px 24px;display:flex;flex-direction:column;gap:8px;border-top:4px solid var(--eo-line)}
.eo-vo__pakket--hl{border-top-color:var(--eo-green);box-shadow:0 8px 24px rgba(30,34,47,.12)}
.eo-locatie .eo-vo__pakket h3{font-family:var(--eo-font-kop);font-weight:400;text-transform:uppercase;font-size:24px;margin:0}
.eo-vo__pill{position:absolute;top:-14px;right:16px;font:700 12px/1 var(--eo-font);letter-spacing:.08em;text-transform:uppercase;background:var(--eo-accent);color:var(--eo-accent-tekst);padding:6px 10px}
.eo-vo__bedrag{margin:0;font-size:14px;color:var(--eo-blue)}
.eo-vo__bedrag strong{font:400 42px/1.1 var(--eo-font-kop);color:var(--eo-navy);margin-right:6px}
.eo-vo__voor{margin:0;font-size:15px}
.eo-vo__pakket ul{list-style:none;margin:8px 0 16px;padding:0;font-size:15px}
.eo-vo__pakket li{position:relative;padding:8px 0 8px 26px;border-top:1px solid #eee}
.eo-vo__ja::before{content:"✓";position:absolute;left:0;color:var(--eo-green);font-weight:700}
.eo-vo__nee{color:#5f6670}
.eo-vo__nee::before{content:"✕";position:absolute;left:0;color:var(--eo-danger);font-weight:700}
.eo-vo__knop{margin-top:auto;flex:none}
.eo-vo__noot{text-align:center;font-size:13px;color:var(--eo-blue);margin:16px 0 0}

.eo-locatie .eo-vo-stappen{background:#fff;margin:0;padding:clamp(48px,7vw,96px) 0;text-align:center}
.eo-vo__stappen{list-style:none;margin:32px 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;counter-reset:s;text-align:left}
.eo-vo__stappen li{counter-increment:s;background:var(--eo-off);padding:16px;border-top:4px solid var(--eo-green);font-size:14px;line-height:1.45;min-width:0;overflow-wrap:break-word;hyphens:auto}
.eo-vo__stappen li::before{content:counter(s);display:block;font:400 30px/1 var(--eo-font-kop);color:var(--eo-green)}
.eo-vo__stappen strong{display:block;margin:8px 0 4px}
.eo-vo__stappen .eo-vo__wwft{border-top-color:var(--eo-accent)}
.eo-vo__start{flex:none}

.eo-vo-faq{max-width:860px}
.eo-vo-faq h2{text-align:center}
.eo-vo-faq details{background:#fff;margin-bottom:8px;border-left:4px solid var(--eo-green)}
.eo-vo-faq summary{padding:18px 24px;font:600 16px/1.4 var(--eo-font);cursor:pointer}
.eo-vo-faq details p{padding:0 24px 20px;margin:0;font-size:15px}

/* Fixronde 19-10: 6 → 3 → 2 gelijke kolommen; lange woorden (Identiteitscontrole) breken binnen de kaart, nooit buiten beeld. */
@media (max-width:1100px){.eo-vo__stappen{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.eo-vo__stappen{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.eo-vo__stappen li{padding:14px 12px}}
@media (max-width:700px){.eo-vo__pakketten{grid-template-columns:1fr}}

/* T7b · Flexplek (mockup akkoord J16c) */
.eo-hero__sub{max-width:660px;margin:16px 0 20px;font-size:18px;color:#fff}
.eo-hero__feiten{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.eo-hero__feiten li{border:1px solid rgba(255,255,255,.5);padding:6px 12px;font:600 13px/1.4 var(--eo-font);color:#fff}
.eo-hero__knoppen{display:flex;flex-wrap:wrap;gap:16px}
.eo-hero__knoppen .eo-k__knop{flex:none}
.eo-k__knop.eo-hero__knop--wit,.eo-k__knop.eo-flex__knop--wit{background:transparent;color:#fff;border:1px solid #fff}
.eo-k__knop.eo-hero__knop--wit:hover,.eo-k__knop.eo-flex__knop--wit:hover{background:#fff;color:var(--eo-navy)}

.eo-flex{padding-block:clamp(48px,7vw,72px)}
.eo-flex__kop{max-width:780px;margin:0 auto;text-align:center}
.eo-flex__kop h2{margin:0 0 12px}
.eo-flex__kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,468px));justify-content:center;gap:24px;max-width:960px;margin:40px auto 0}
.eo-flex__kaart{background:#fff;display:flex;flex-direction:column;border-top:4px solid var(--eo-green)}
.eo-flex__foto{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;height:auto}
.eo-flex__body{padding:28px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.eo-locatie .eo-flex__body h3{margin:0;font-family:var(--eo-font-kop);font-weight:400;text-transform:uppercase;font-size:22px}
.eo-flex__bedrag{margin:0;font-size:14px}
.eo-flex__bedrag strong{font:400 36px/1.1 var(--eo-font-kop);color:var(--eo-navy);margin-right:4px}
.eo-flex__oms{margin:0;font-size:15px}
.eo-flex__body ul{list-style:none;margin:8px 0 16px;padding:0;font-size:15px}
.eo-flex__body li{position:relative;padding:6px 0 6px 24px;border-top:1px solid #eee}
.eo-flex__knop{margin-top:auto;flex:none}

.eo-locatie .eo-flex-stappen{background:#fff;margin:0;padding:clamp(48px,7vw,72px) 0;text-align:center}
.eo-flex__stappen{grid-template-columns:repeat(4,minmax(0,1fr))}
.eo-flex__stappen li{background:#fff;border:1px solid #eee;border-top:4px solid var(--eo-green)}

.eo-flex-uren{padding-block:clamp(48px,7vw,72px);text-align:center}
.eo-flex__uren{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:960px;margin:32px auto 0;text-align:left}
.eo-flex__ukaart{background:#fff;padding:24px;border-top:4px solid var(--eo-accent);font-size:15px}
.eo-locatie .eo-flex__ukaart h3{font-size:20px;margin:0 0 12px}
.eo-flex__ukaart .eo-k__knop{margin-top:8px}

.eo-locatie .eo-flex-vaker{background:var(--eo-navy);color:#F1F0EC;margin:0;padding:clamp(48px,7vw,72px) 0}
.eo-locatie .eo-flex-vaker h2{color:#fff}
.eo-flex__vaker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
.eo-flex__knoppen{display:flex;flex-wrap:wrap;gap:16px}
.eo-flex__knoppen .eo-k__knop{flex:none}
.eo-flex__vfoto{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
#faq-flex{padding-block:clamp(48px,7vw,72px)}

@media (max-width:1000px){.eo-flex__stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.eo-flex__uren,.eo-flex__vaker{grid-template-columns:1fr}}

/* T63 C: eigen blok per pand op pand × virtueel kantoor. */
.eo-vo-pandblok { max-width: 860px; margin-block: 48px; }
.eo-vo-pandblok h2 { margin-bottom: 0.6em; }

/* Taak 111 v2 (T85): adresbalk, je bedrijf op {pand}, ook op {pand}, afsluitende band. */
.eo-vo-balk{background:#fff;border-bottom:1px solid #eee}
.eo-vo-balk__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 32px;margin:0 auto;padding-block:20px}
.eo-vo-balk__in dt{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--eo-navy);opacity:.7;margin:0 0 4px}
.eo-vo-balk__in dd{margin:0;font-size:15px}
.eo-vo-bedrijf{padding-block:clamp(48px,7vw,72px);display:grid;gap:32px}
.eo-vo-bedrijf__fotos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.eo-vo-bedrijf__fotos img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.eo-vo-bedrijf__tekst{max-width:780px}
.eo-vo-bedrijf__tekst h2{margin:0 0 12px}
.eo-vo-bedrijf__feiten{list-style:none;margin:16px 0 24px;padding:0;display:grid;gap:12px}
.eo-vo-bedrijf__feiten li{background:#fff;padding:16px 20px;border-left:4px solid var(--eo-green);font-size:15px}
.eo-vo-bedrijf__feiten strong{display:block;margin-bottom:4px}
.eo-vo-ook{padding-block:clamp(40px,6vw,64px)}
.eo-vo-ook__lijst{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.eo-vo-ook__lijst li{background:#fff;padding:20px;border-top:4px solid var(--eo-green)}
.eo-vo-ook__lijst p{margin:0 0 8px;font-size:15px}
.eo-locatie .eo-vo-band{background:var(--eo-navy);color:#F1F0EC;margin:0;padding:clamp(48px,7vw,72px) 0;text-align:center}
.eo-locatie .eo-vo-band h2{color:#fff}
.eo-vo-band p{max-width:640px;margin:0 auto 24px}
.eo-vo-band a:not(.eo-k__knop){color:#fff}
@media (max-width:800px){.eo-vo-bedrijf__fotos{grid-template-columns:1fr}.eo-vo-bedrijf__fotos li:nth-child(n+2){display:none}}

/* Taak 111 v2 A: landelijke pagina /werken/virtueel-kantoor-huren/. */
.eo-vo-wat{padding-block:clamp(48px,7vw,72px);max-width:960px}
.eo-vo-wat__tegels{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.eo-vo-wat__tegels li{background:#fff;padding:20px;border-top:4px solid var(--eo-green);font-size:15px}
.eo-vo-wat__tegels strong{display:block;margin-bottom:6px}
.eo-vo-adres{padding-block:clamp(48px,7vw,72px)}
.eo-vo-adres__filter{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 24px}
.eo-vo-adres__filter a{padding:8px 14px;border:1px solid var(--eo-navy);color:var(--eo-navy);text-decoration:none;font-size:14px}
.eo-vo-adres__filter a[aria-current="true"]{background:var(--eo-navy);color:#fff}
.eo-vo-adres__kaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.eo-vo-adres__kaart{background:#fff;display:flex;flex-direction:column}
.eo-vo-adres__foto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.eo-vo-adres__body{padding:20px;display:flex;flex-direction:column;gap:6px;flex:1;font-size:15px}
.eo-vo-adres__body h3{margin:0;font-size:20px}
.eo-vo-adres__body p{margin:0}
.eo-vo-adres__adres{color:var(--eo-navy);opacity:.75}
.eo-vo-adres__prijs{font-size:14px;margin-top:auto!important;padding-top:8px}
.eo-vo-adres__body .eo-k__knop{margin-top:8px}
.eo-vo-faqrij{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:40px;padding-block:clamp(48px,7vw,72px);align-items:start}
.eo-vo-faqrij .eo-vo-faq{padding:0;margin:0}
.eo-vo-vooraf{background:#fff;padding:24px;border-top:4px solid var(--eo-accent)}
.eo-vo-vooraf h2{font-size:24px;margin:0 0 8px}
.eo-vo-vooraf__tel a{font-size:20px;color:var(--eo-navy)}
@media (max-width:800px){.eo-vo-wat__tegels,.eo-vo-faqrij{grid-template-columns:1fr}}
.eo-vo-adres__body .eo-k__knop{flex:none;align-self:flex-start}